index.vue 4.63 KB

<template>
	<div>
		<div class="content">
			<div class="banner-contaner">
				<!-- banner 轮播 -->
				<div class="banner">
					<swiper :options="swiperOption">
						<swiper-slide>
							<img class="banner-img" src="@/assets/images/index/banner.png">
						</swiper-slide>
						<swiper-slide>
							<img class="banner-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>
			<!-- 推荐产品 -->
			<div class="box recommend">
				<div class="recommend-item">
					<div @click="onRecommendHandler(1)" class="btn pointer">{{$t('index.recommend.item1.btn')}}</div>
					<div class="tt t1">{{$t('index.recommend.item1.t1')}}</div>
					<img src="@/assets/images/index/recommend-1.png">
				</div>
				<div class="recommend-item">
					<div @click="onRecommendHandler(2)" class="btn pointer">{{$t('index.recommend.item2.btn')}}</div>
					<div class="tt t1">{{$t('index.recommend.item2.t1')}}</div>
					<img src="@/assets/images/index/recommend-2.png">
				</div>
				<div class="recommend-item">
					<div @click="onRecommendHandler(3)" class="btn pointer">{{$t('index.recommend.item3.btn')}}</div>
					<div class="tt t2">{{$t('index.recommend.item3.t1')}}</div>
					<div class="tt t1">{{$t('index.recommend.item3.t2')}}
						<span class="cOrange">{{$t('index.recommend.item3.t3')}}</span>{{$t('index.recommend.item3.t4')}}</div>
					<img src="@/assets/images/index/recommend-3.png">
				</div>
			</div>
			<!-- 了解我们 -->
			<div class="box more">
				<div class="cont">
					<div class="btn pointer" @click="toProfile()"></div>
					<img :src="require('@/assets/images/index/more-1-'+locale+'.png')">
				</div>
			</div>
			<!-- 新闻资讯 -->
			<div class="box news">
				<div class="linear"></div>
				<div class="tit">{{$t('index.news')}}</div>
				<div class="under-line"></div>
				<div class="news-wrap">
					<!-- hardcode start -->
					<template v-if="locale == 'zh'">
						<div @click="onMoreNewsHandler" class="more pointer">
							{{$t('index.newMore')}} >
						</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>
					</template>
					<template v-else>
						<div @click="onMoreNewsHandler" class="more pointer">
							{{$t('index.newMore')}} >
						</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>
					</template>

					<!-- hardcode end -->
				</div>
			</div>
		</div>
	</div>
</template>

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