index.vue 2.42 KB

<template>
	<div class="content">
		<div class="top-space"></div>
		<!-- banner 轮播 -->
		<div class="box-w banner">
			<swiper :options="swiperOption">
				<swiper-slide>
					<img src="@/assets/images/index/banner.png">
				</swiper-slide>
				<div class="swiper-button-prev" slot="button-prev"></div>
				<div class="swiper-button-next" slot="button-next"></div>
				<div class="swiper-pagination" slot="pagination"></div>
			</swiper>
		</div>
		<!-- 推荐产品 -->
		<div class="box recommend">
			<div class="recommend-item">
				<div class="btn"></div>
				<img src="@/assets/images/index/recommend-1.png">
			</div>
			<div class="recommend-item">
				<div class="btn"></div>
				<img src="@/assets/images/index/recommend-2.png">
			</div>
			<div class="recommend-item">
				<div class="btn"></div>
				<img src="@/assets/images/index/recommend-3.png">
			</div>
		</div>
		<!-- 了解我们 -->
		<div class="box more">
			<div class="cont">
				<div class="btn pointer"></div>
				<img src="@/assets/images/index/more-1.png">
			</div>
		</div>
		<!-- 新闻资讯 -->
		<div class="box news">
			<div class="linear"></div>
			<div class="tit">新聞資訊</div>
			<div class="under-line"></div>
			<div class="news-wrap">
				<div class="more pointer">
					查看更多 >
				</div>
				<div @click="toNewsDetail()" class="news-item">
					<div class="news-item-tit">平安人壽2019年2季度保險消費報告出爐!</div>
					<div class="news-item-date">2019-09-27</div>
				</div>
				<div @click="toNewsDetail()" class="news-item">
					<div class="news-item-tit">公益獻禮華誕年,創新開拓扶貧路</div>
					<div class="news-item-date">2019-09-27</div>
				</div>
				<div @click="toNewsDetail()" class="news-item">
					<div class="news-item-tit">平安920要放大招啦!內含超強攻略!</div>
					<div class="news-item-date">2019-09-27</div>
				</div>
				<div @click="toNewsDetail()" class="news-item">
					<div class="news-item-tit">突發!平安人壽迅速應對廣東陽江大巴交通事故</div>
					<div class="news-item-date">2019-09-27</div>
				</div>
				<div @click="toNewsDetail()" class="news-item">
					<div class="news-item-tit">伴成長、助扶貧,平安人壽客服節給家庭“AI”的力量</div>
					<div class="news-item-date">2019-09-27</div>
				</div>
			</div>

		</div>
	</div>
</template>

<script src="./index.js"></script>
<style lang="scss" scoped>
@import "./index.scss";
</style>