index.vue 4.31 KB

<template>
	<div class="content">
		<div class="top-space"></div>
		<!-- banner 轮播 -->
		<div class="box-w banner">
			<swiper :options="swiperOption">
				<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 class="box recommend">
			<div class="recommend-item">
				<div @click="onRecommendHandler(1)" class="btn pointer">了解更多產品</div>
				<div class="tt t1">為自己和家人尋找壹份保障</div>
				<img src="@/assets/images/index/recommend-1.png">
			</div>
			<div class="recommend-item">
				<div @click="onRecommendHandler(2)" class="btn pointer">立即預約</div>
				<div class="tt t1">在線預約 專業服務</div>
				<img src="@/assets/images/index/recommend-2.png">
			</div>
			<div class="recommend-item">
				<div @click="onRecommendHandler(3)" class="btn pointer">客户服务</div>
				<div class="tt t2">專業客服為妳服務</div>
				<div class="tt t1">想了解更多,可致電
					<span class="cOrange">95511</span>聯絡我們,或進入</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-zh.png"> -->
				<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>
</template>

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