index.vue
3.42 KB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
<template>
<div class="page page-index">
<div class="banner-contaner">
<!-- banner 轮播 -->
<div class="banner banner-pc">
<swiper :options="swiperOption">
<swiper-slide v-for="(item,index) in bannerList" :key="index">
<img class="banner-img" :src="item.pcBannerUrl">
<div class="btn-wrap">
<div v-for="(btnItem, btnIndex) in item.btns" :key="btnIndex">
<div class="banner-btn" v-if="btnItem.n && btnItem.t && btnItem.c" @click="btnNavigateTo(btnItem.t,btnItem.l)" :style="{backgroundColor:btnItem.c}">{{btnItem.n}}</div>
</div>
</div>
</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="banner banner-mobile">
<swiper class="swiper" :options="swiperOption">
<swiper-slide v-for="(item,index) in bannerList" :key="index">
<img class="banner-img" :src="item.mobileBannerUrl">
<div class="btn-wrap">
<div class="banner-btn" v-for="(btnItem, btnIndex) in item.btns" :key="btnIndex" @click="btnNavigateTo(btnItem.t,btnItem.l)" :style="{color:btnItem.c}">{{btnItem.n}} ></div>
</div>
</swiper-slide>
<div class="swiper-pagination" slot="pagination"></div>
</swiper>
</div>
<!-- <div class="swiper-button-prev" slot="button-prev"></div>
<div class="swiper-button-next" slot="button-next"></div> -->
</div>
<!-- 导航菜单切换 -->
<div class="nav-tab">
<div @click="onTabHandler(item)" v-html="item.name" v-for="item in tabList" :key="item.id" class="nav-tab-item" :class="{'nav-tab-item-act':item.id == curTab.id}" :style="'width: calc(100% / '+tabList.length+');'">{{item.name}}</div>
</div>
<!-- 推荐 为什么选择平安人寿 -->
<div class="content recommend">
<div class="tit">為何選擇平安人壽？</div>
<div class="features">
<div class="features-item">
<div class="icon">
<img src="@/assets/images/index/recommend-icon-1.png" alt="">
</div>
<div class="desc">簡單方便<br>線上客戶服務系統</div>
</div>
<div class="features-item">
<div class="icon">
<img src="@/assets/images/index/recommend-icon-2.png" alt="">
</div>
<div class="desc">信心保證<br>服務超過2億客戶</div>
</div>
<div class="features-item">
<div class="icon">
<img src="@/assets/images/index/recommend-icon-3.png" alt="">
</div>
<div class="desc">國際級<br>風險管理</div>
</div>
</div>
<div class="contact-tips">
<span class="icon"></span>
聯絡我們
</div>
</div>
<!-- 线上报价 -->
<div class="quote"></div>
<!-- 联系我们表单 -->
<div class="contact">
<div class="box-w panel">
<div class="panel-left">
<div class="t1">如欲了解我們的產品，<br>歡迎聯絡我們。</div>
<div class="t2">想了解更多？致電2983 8866^聯絡我們。</div>
<img class="pic-mobile" src="@/assets/images/index/index-mobile.png" alt="">
</div>
<div class="panel-right">
<div class="form">
<div class="ipt-wrap2">
<div class="cont">
<input class="ipt" type="text">
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</template>
<script src="./index.js"></script>
<style lang="scss" scoped>
@import "./index.scss";
</style>