Skip to content

dev / pingan-life-index-pro

Go to a project
Toggle navigation
Toggle navigation pinning
2852c7d7 by simon
Options

默认提交

1 parent 9f781307
Inline Side-by-side
Showing 14 changed files with 215 additions and 219 deletions
...@@ -27,6 +27,7 @@ ...@@ -27,6 +27,7 @@
27 "vue-awesome-swiper": "^3.1.3", 27 "vue-awesome-swiper": "^3.1.3",
28 "vue-i18n": "^8.15.0", 28 "vue-i18n": "^8.15.0",
29 "vue-router": "^3.0.3", 29 "vue-router": "^3.0.3",
30 "vue-video-player": "^5.0.2",
30 "vuex": "^3.0.1" 31 "vuex": "^3.0.1"
31 }, 32 },
32 "devDependencies": { 33 "devDependencies": {
......
...@@ -69,8 +69,8 @@ html { ...@@ -69,8 +69,8 @@ html {
69 box-sizing: border-box; 69 box-sizing: border-box;
70 } 70 }
71 71
72 body{ 72 body {
73 // font-size: 14px; 73 font-size: $fontSize;
74 } 74 }
75 75
76 html, 76 html,
...@@ -327,29 +327,31 @@ textarea { ...@@ -327,29 +327,31 @@ textarea {
327 } 327 }
328 328
329 .content { 329 .content {
330 max-width: 1024px; 330 // max-width: 1024px;
331 max-width: 1200px;
331 width: 100%; 332 width: 100%;
332 margin: 0 auto; 333 margin: 0 auto;
333 } 334 }
334 335
335 .box-w { 336 .box-w {
336 // max-width: 1024px; 337 // max-width: 1024px;
337 max-width: 950px; 338 // max-width: 950px;
339 max-width: 1200px;
338 width: 100%; 340 width: 100%;
339 margin: 0 auto; 341 margin: 0 auto;
340 } 342 }
341 343
342 .box { 344 .box {
343 max-width: 950px; 345 // max-width: 950px;
346 max-width: 1200px;
344 width: 100%; 347 width: 100%;
345 margin: 0 auto; 348 margin: 0 auto;
346 } 349 }
347 350
348 .focus{ 351 .focus {
349 border: 1px solid $cOrange ; 352 border: 1px solid $cOrange;
350 } 353 }
351 354
352
353 .swiper-pagination-bullet { 355 .swiper-pagination-bullet {
354 width: 1rem !important; 356 width: 1rem !important;
355 height: 1rem !important; 357 height: 1rem !important;
...@@ -359,7 +361,6 @@ textarea { ...@@ -359,7 +361,6 @@ textarea {
359 background: $cOrange !important; 361 background: $cOrange !important;
360 } 362 }
361 363
362
363 .ipt:focus { 364 .ipt:focus {
364 border-color: $cOrange !important; 365 border-color: $cOrange !important;
365 } 366 }
...@@ -368,4 +369,16 @@ textarea { ...@@ -368,4 +369,16 @@ textarea {
368 border-color: $cOrange !important; 369 border-color: $cOrange !important;
369 } 370 }
370 371
372 .video-js .vjs-big-play-button {
373 top: 0 !important;
374 bottom: 0 !important;
375 left: 0 !important;
376 right: 0 !important;
377 margin: auto !important;
378 // display: none !important;
379 }
380
381 .video-js .vjs-slider {
382 background-color: $cOrange !important;
383 }
371 </style> 384 </style>
......

52.1 KB | W: | H:

1.02 MB | W: | H:

  • 2-up
  • Swipe
  • Onion skin

55.1 KB | W: | H:

40.3 KB | W: | H:

  • 2-up
  • Swipe
  • Onion skin

58.8 KB | W: | H:

40.3 KB | W: | H:

  • 2-up
  • Swipe
  • Onion skin

22.9 KB | W: | H:

40.3 KB | W: | H:

  • 2-up
  • Swipe
  • Onion skin
...@@ -56,7 +56,6 @@ export default { ...@@ -56,7 +56,6 @@ export default {
56 } 56 }
57 }, 57 },
58 onOverHandler(event) { 58 onOverHandler(event) {
59
60 let ul = event.currentTarget.childNodes[1].childNodes[1]; 59 let ul = event.currentTarget.childNodes[1].childNodes[1];
61 ul.style.display = "block"; 60 ul.style.display = "block";
62 }, 61 },
......
...@@ -2,7 +2,7 @@ ...@@ -2,7 +2,7 @@
2 2
3 .drop-list { 3 .drop-list {
4 display: inline-block; 4 display: inline-block;
5 min-width: 8rem; 5 min-width: 10rem;
6 position: relative; 6 position: relative;
7 margin: 0 1rem; 7 margin: 0 1rem;
8 font-size: $fontSize; 8 font-size: $fontSize;
...@@ -21,8 +21,7 @@ ...@@ -21,8 +21,7 @@
21 text-align: center; 21 text-align: center;
22 } 22 }
23 23
24 span:hover { 24 span:hover {}
25 }
26 25
27 ul { 26 ul {
28 display: none; 27 display: none;
...@@ -31,20 +30,40 @@ ...@@ -31,20 +30,40 @@
31 border-radius: .5rem; 30 border-radius: .5rem;
32 31
33 li { 32 li {
34 border-bottom: solid 1px #f1f1f1; 33 // border-bottom: solid 1px #f1f1f1;
35 background: #ffffff; 34 background: #ffffff;
36 // min-height: 4.25rem;
37 text-align: center; 35 text-align: center;
38 padding: 1.5rem 0; 36 padding: 1.5rem 0;
37 position: relative;
38
39 &:after {
40 content: "";
41 width: 7rem;
42 height: 1px;
43 background: #f1f1f1;
44 position: absolute;
45 bottom: 0;
46 left: 50%;
47 transform: translateX(-50%); //居中处理
48 }
49
39 } 50 }
40 51
41 li:last-child { 52 li:last-child {
42 border-bottom: none; 53 border-bottom: none;
54
55 &:after {
56 background: transparent;
57 }
43 } 58 }
44 59
45 li:hover { 60 li:hover {
46 color: $cOrange; 61 color: $cOrange;
47 } 62 }
63
64
65
66
48 } 67 }
49 } 68 }
50 69
...@@ -59,7 +78,8 @@ ...@@ -59,7 +78,8 @@
59 color: #ffffff; 78 color: #ffffff;
60 79
61 span { 80 span {
62 max-width: 4.25rem ;/* 51/12 */ 81 max-width: 4.25rem;
82 /* 51/12 */
63 overflow: hidden; 83 overflow: hidden;
64 white-space: nowrap; 84 white-space: nowrap;
65 text-overflow: ellipsis; 85 text-overflow: ellipsis;
......
...@@ -13,6 +13,19 @@ Vue.use(VueAwesomeSwiper) ...@@ -13,6 +13,19 @@ Vue.use(VueAwesomeSwiper)
13 import Mock from './mock' 13 import Mock from './mock'
14 Mock.bootstrap(); 14 Mock.bootstrap();
15 15
16
17 // 视频
18 import VueVideoPlayer from 'vue-video-player'
19 import 'video.js/dist/video-js.css'
20 // import 'vue-video-player/src/custom-theme.css'
21
22 Vue.use(VueVideoPlayer,
23 /* {
24 options: global default options,
25 events: global videojs events
26 } */
27 )
28
16 // import 'amfe-flexible'; 29 // import 'amfe-flexible';
17 30
18 Vue.config.productionTip = false 31 Vue.config.productionTip = false
......
...@@ -9,16 +9,14 @@ export default { ...@@ -9,16 +9,14 @@ export default {
9 data() { 9 data() {
10 return { 10 return {
11 key: 'value', 11 key: 'value',
12 // swiper
12 swiperOption: { 13 swiperOption: {
13 navigation: { 14 // navigation: {
14 nextEl: '.swiper-button-next', 15 // nextEl: '.swiper-button-next',
15 prevEl: '.swiper-button-prev' 16 // prevEl: '.swiper-button-prev'
16 }, 17 // },
17 pagination: { 18 pagination: {
18 el: '.swiper-pagination', 19 el: '.swiper-pagination'
19 // renderBullet(index, className) {
20 // return `<span class="${className} swiper-pagination-bullet-custom">${index + 1}</span>`
21 // }
22 }, 20 },
23 autoplay: { 21 autoplay: {
24 delay: 5000, 22 delay: 5000,
...@@ -27,6 +25,23 @@ export default { ...@@ -27,6 +25,23 @@ export default {
27 }, 25 },
28 speed: 1000, 26 speed: 1000,
29 27
28 },
29 // 视频
30 playerOptions: {
31 width: 843,
32 height: 475,
33 // autoplay: true,
34 muted: true,
35 language: 'en',
36 // playbackRates: [0.7, 1.0, 1.5, 2.0],
37 sources: [{
38 type: "video/mp4",
39 // mp4
40 src: "https://ow.go.qudone.com/jyesupload/ee516bb327484197b7ca72f3dc4be9e6.mp4",
41 // webm
42 // src: "https://cdn.theguardian.tv/webM/2015/07/20/150716YesMen_synd_768k_vp8.webm"
43 }],
44 poster: "https://ow.go.qudone.com/jyesupload/476b392f19354fb3a21083220200d912.jpg",
30 } 45 }
31 } 46 }
32 }, 47 },
...@@ -37,9 +52,52 @@ export default { ...@@ -37,9 +52,52 @@ export default {
37 }, 52 },
38 i18n() { 53 i18n() {
39 return this.$i18n.messages && this.$i18n.locale ? this.$i18n.messages[this.$i18n.locale] : {}; 54 return this.$i18n.messages && this.$i18n.locale ? this.$i18n.messages[this.$i18n.locale] : {};
55 },
56 player() {
57 return this.$refs.videoPlayer.player
40 } 58 }
41 }, 59 },
42 methods: { 60 methods: {
61
62 onPlayerPlay(player) {
63 // console.log('player play!', player)
64 },
65 onPlayerPause(player) {
66 // console.log('player pause!', player)
67 },
68 onPlayerEnded(player) {
69 // console.log('player ended!', player)
70 },
71 onPlayerLoadeddata(player) {
72 // console.log('player Loadeddata!', player)
73 },
74 onPlayerWaiting(player) {
75 // console.log('player Waiting!', player)
76 },
77 onPlayerPlaying(player) {
78 // console.log('player Playing!', player)
79 },
80 onPlayerTimeupdate(player) {
81 // console.log('player Timeupdate!', player.currentTime())
82 },
83 onPlayerCanplay(player) {
84 // console.log('player Canplay!', player)
85 },
86 onPlayerCanplaythrough(player) {
87 // console.log('player Canplaythrough!', player)
88 },
89 // or listen state event
90 playerStateChanged(playerCurrentState) {
91 // console.log('player current update state', playerCurrentState)
92 },
93 // player is ready
94 playerReadied(player) {
95 // seek to 10s
96 console.log('example player 1 readied', player)
97 player.currentTime(10)
98 // console.log('example 01: the player is readied', player)
99 },
100
43 /** 101 /**
44 * 推荐产品 102 * 推荐产品
45 */ 103 */
...@@ -80,14 +138,18 @@ export default { ...@@ -80,14 +138,18 @@ export default {
80 path: '/news/detail' 138 path: '/news/detail'
81 }) 139 })
82 }, 140 },
83 toProfile(){ 141 toProfile() {
84 this.$router.push({ 142 this.$router.push({
85 path: '/profile' 143 path: '/profile'
86 }) 144 })
87 }, 145 },
88 initData() {} 146 initData() {}
89 }, 147 },
90 mounted() {}, 148 mounted() {
91 created() { 149 setTimeout(() => {
92 } 150 console.log('dynamic change options', this.player)
151 this.player.muted(false)
152 }, 2000)
153 },
154 created() {}
93 } 155 }
......
...@@ -11,28 +11,27 @@ ...@@ -11,28 +11,27 @@
11 11
12 .box { 12 .box {
13 position: relative; 13 position: relative;
14 14 margin-top: $marginMedium;
15 } 15 }
16 16
17 // banner 轮播 17 // banner 轮播
18 .banner-contaner { 18 .banner-contaner {
19 // height: 360px;
20 // 匹配父容器
21 position: relative;
22 width: 100%; 19 width: 100%;
20 height: 470px;
21 margin: 0 auto;
22 position: relative;
23 z-index: 1;
23 overflow: hidden; 24 overflow: hidden;
24 height: 250px;
25 } 25 }
26 26
27 .banner { 27 .banner {
28 // box-shadow: 0 0 1.75rem 0 rgba(255, 87, 0, 0.1); 28 // box-shadow: 0 0 1.75rem 0 rgba(255, 87, 0, 0.1);
29 position: absolute; 29 position: absolute;
30 z-index: 1;
30 left: 50%; 31 left: 50%;
31 // width: 1920px; 32 margin-left: -960px;
32 // margin-left: -960px;
33 top: 0; 33 top: 0;
34 width: 1024px; 34 width: 1920px;
35 margin-left: -512px;
36 height: 100%; 35 height: 100%;
37 overflow: hidden; 36 overflow: hidden;
38 37
...@@ -45,22 +44,18 @@ ...@@ -45,22 +44,18 @@
45 // 推荐产品 44 // 推荐产品
46 .recommend { 45 .recommend {
47 display: flex; 46 display: flex;
48 // flex-wrap: wrap;
49 // justify-content: center;
50 // width: auto;
51 text-align: center; 47 text-align: center;
52 justify-content: space-between; 48 justify-content: space-between;
53 max-width: 79.166667rem;
54 // max-width: 1200px;
55 49
56 &-item { 50 &-item {
57 margin-top: 2.25rem; 51
58 position: relative; 52 position: relative;
59 width: 25.833333rem; 53
60 border-radius: .75rem; 54 width: 24.25rem;
55 height: 32.75rem;
56 border-radius: $borderRadiusSmall;
61 box-shadow: 0 0 1.5rem 0 rgba(255, 87, 0, 0.15); 57 box-shadow: 0 0 1.5rem 0 rgba(255, 87, 0, 0.15);
62 background-color: #fbfbfb; 58 background-color: #fbfbfb;
63 padding: 0 5px;
64 59
65 .btn { 60 .btn {
66 position: absolute; 61 position: absolute;
...@@ -72,24 +67,8 @@ ...@@ -72,24 +67,8 @@
72 @include btc2(13.5rem, 4rem, 16px); 67 @include btc2(13.5rem, 4rem, 16px);
73 } 68 }
74 69
75 .tt {
76 position: absolute;
77 width: 100%;
78 color: #4c4948;
79
80
81 }
82
83 .t1 {
84 bottom: 9.3rem;
85 }
86
87 .t2 {
88 bottom: 11.42rem;
89 }
90
91 img { 70 img {
92 height: 100%; 71 width: 100%;
93 } 72 }
94 73
95 &:first-child { 74 &:first-child {
...@@ -102,107 +81,56 @@ ...@@ -102,107 +81,56 @@
102 } 81 }
103 } 82 }
104 83
105 // 了解我们 84 // 详情
106 .more { 85 .detail {
107 margin: 3.5rem auto 0; 86 display: flex;
108 // margin-top: 3.5rem; 87 height: 39.75rem;
109 // margin-left: 9.791667rem;
110 position: relative;
111 88
112 .btn { 89 .vjs-custom-skin {
113 position: absolute; 90 border-radius: $borderRadius !important;
114 width: 26%; 91 overflow: hidden;
115 height: 8%;
116 top: 83%;
117 left: 69%;
118 z-index: 1;
119 // background-color: wheat;
120 } 92 }
121 93
122 .cont { 94 .desc {
123 position: relative; 95 @extend .bb;
124 96 padding-top: 3.833333rem;
125 // 客户要求按设计审核，不做居中对齐 97 padding-left: 2.166667rem;
126 // margin: 0 auto; 98 flex: 1;
127 margin-left: 6.583333rem; 99 line-height: 2.3;
128 100 letter-spacing: 1.4px;
129 // @extend .fcc;
130 width: 85%;
131
132 img {
133 width: 100%;
134 }
135 } 101 }
136 } 102 }
137 103
138 // 新闻资讯
139 .news {
140 margin: 4.25rem auto 0;
141
142 .linear {
143 width: 100%;
144 height: 2.04rem;
145 background-image: url('~@/assets/images/index/linear.png');
146 }
147 104
148 .tit {
149 text-align: center;
150 color: #f05a23;
151 font-size: 18px;
152 font-weight: bold;
153 letter-spacing: 1.8px;
154 }
155 105
156 .under-line { 106 .swiper-button-prev {
157 margin: .75rem auto 0; 107 background-image: url('~@/assets/images/common/button-prev.png');
158 width: 4rem; 108 left: 360px;
159 height: .25rem;
160 background-color: #275d40;
161 }
162
163 .news-wrap {
164 margin: 3.2rem auto 0;
165 // max-width: 66.75rem;
166 max-width: 100rem;
167
168 .more {
169 width: 85%;
170 text-align: right;
171 margin-bottom: .5rem;
172 }
173
174 .news-item {
175 width: 85%;
176 margin: auto;
177 height: 4.25rem;
178 color: #4c4948;
179 display: flex;
180 justify-content: space-between;
181 align-items: center;
182 border-top: solid 1px #dcdddd;
183 cursor: pointer;
184 109
185 &-tit {} 110 }
186 111
187 &-date {} 112 .swiper-button-next {
113 background-image: url('~@/assets/images/common/button-next.png');
114 right: 360px;
115 }
188 116
189 &:last-child { 117 .swiper-pagination-fraction, .swiper-pagination-custom, .swiper-container-horizontal > .swiper-pagination-bullets{
190 border-bottom: solid 1px #dcdddd; 118 bottom: 48px;
191 }
192 }
193 }
194 } 119 }
195 120
196 .swiper-button-prev { 121 .swiper-pagination-bullet {
197 background-image: url('~@/assets/images/common/button-prev.png'); 122 width: 12px;
198 // display: none; 123 height: 12px;
124 background-color: #dcdddd;
199 } 125 }
200 126
201 .swiper-button-next { 127 .swiper-pagination-bullet-active {
202 background-image: url('~@/assets/images/common/button-next.png'); 128 width: 12px;
203 // display: none; 129 height: 12px;
130 background-color: $cOrange;
204 } 131 }
205 132
133
206 @media (max-width: 950px) { 134 @media (max-width: 950px) {
207 .box { 135 .box {
208 width: 96%; 136 width: 96%;
......
1 1
2 <template> 2 <template>
3 <div> 3 <div>
4 <div class="content">
5 <div class="banner-contaner"> 4 <div class="banner-contaner">
6 <!-- banner 轮播 --> 5 <!-- banner 轮播 -->
7 <div class="banner"> 6 <div class="banner">
8 <swiper :options="swiperOption"> 7 <swiper :options="swiperOption">
9 <swiper-slide> 8 <swiper-slide>
10 <img class="banner-img" src="@/assets/images/index/banner.png"> 9 <img class="banner-img " src="@/assets/images/index/banner.png">
11 </swiper-slide> 10 </swiper-slide>
12 <swiper-slide> 11 <swiper-slide>
13 <img class="banner-img" src="@/assets/images/index/banner.png"> 12 <img class="banner-img " src="@/assets/images/index/banner.png">
14 </swiper-slide> 13 </swiper-slide>
15 <div class="swiper-button-prev" slot="button-prev"></div> 14 <!-- <div class="swiper-button-prev" slot="button-prev"></div>
16 <div class="swiper-button-next" slot="button-next"></div> 15 <div class="swiper-button-next" slot="button-next"></div> -->
17 <div class="swiper-pagination" slot="pagination"></div> 16 <div class="swiper-pagination" slot="pagination"></div>
18 </swiper> 17 </swiper>
18
19 </div> 19 </div>
20 </div> 20 </div>
21 <div class="content">
22
21 <!-- 推荐产品 --> 23 <!-- 推荐产品 -->
22 <div class="box recommend"> 24 <div class="box recommend">
23 <div class="recommend-item"> 25 <div class="recommend-item">
24 <div @click="onRecommendHandler(1)" class="btn pointer">{{$t('index.recommend.item1.btn')}}</div> 26 <div @click="onRecommendHandler(1)" class="btn pointer">{{$t('index.recommend.item1.btn')}}</div>
27 <img src="@/assets/images/index/recommend-1.png">
28 </div>
29 <div class="recommend-item">
30 <div @click="onRecommendHandler(1)" class="btn pointer">{{$t('index.recommend.item1.btn')}}</div>
31 <img src="@/assets/images/index/recommend-2.png">
32 </div>
33 <div class="recommend-item">
34 <div @click="onRecommendHandler(1)" class="btn pointer">{{$t('index.recommend.item1.btn')}}</div>
35 <img src="@/assets/images/index/recommend-3.png">
36 </div>
37 <div class="recommend-item">
38 <div @click="onRecommendHandler(1)" class="btn pointer">{{$t('index.recommend.item1.btn')}}</div>
39 <img src="@/assets/images/index/recommend-4.png">
40 </div>
41 </div>
42 <!-- <div class="box recommend">
43 <div class="recommend-item">
44 <div @click="onRecommendHandler(1)" class="btn pointer">{{$t('index.recommend.item1.btn')}}</div>
25 <div class="tt t1">{{$t('index.recommend.item1.t1')}}</div> 45 <div class="tt t1">{{$t('index.recommend.item1.t1')}}</div>
26 <img src="@/assets/images/index/recommend-1.png"> 46 <img src="@/assets/images/index/recommend-1.png">
27 </div> 47 </div>
...@@ -37,73 +57,13 @@ ...@@ -37,73 +57,13 @@
37 <span class="cOrange">{{$t('index.recommend.item3.t3')}}</span>{{$t('index.recommend.item3.t4')}}</div> 57 <span class="cOrange">{{$t('index.recommend.item3.t3')}}</span>{{$t('index.recommend.item3.t4')}}</div>
38 <img src="@/assets/images/index/recommend-3.png"> 58 <img src="@/assets/images/index/recommend-3.png">
39 </div> 59 </div>
40 </div> 60 </div> -->
41 <!-- 了解我们 --> 61 <!-- 详情 -->
42 <div class="box more"> 62 <div class="box detail">
43 <div class="cont"> 63 <video-player class="vjs-custom-skin" controls ref="videoPlayer" :options="playerOptions" :playsinline="true" @play="onPlayerPlay($event)" @pause="onPlayerPause($event)" @ended="onPlayerEnded($event)" @loadeddata="onPlayerLoadeddata($event)" @waiting="onPlayerWaiting($event)" @playing="onPlayerPlaying($event)" @timeupdate="onPlayerTimeupdate($event)" @canplay="onPlayerCanplay($event)" @canplaythrough="onPlayerCanplaythrough($event)" @ready="playerReadied" @statechanged="playerStateChanged($event)">
44 <div class="btn pointer" @click="toProfile()"></div> 64 </video-player>
45 <img :src="require('@/assets/images/index/more-1-'+locale+'.png')"> 65 <div class="desc">
46 </div> 66 中國平安人壽保險股份有限公司成立於2002年,是中國平安保險（集團）股份有限公司旗下的重要成員。截至2017年12月31日,平安人壽註冊資本為338億元，在全國擁有42家分公司（含7家電話銷售中心）及超過3,300個營業網點,壽險代理人達138.6萬名。公司個險、銀保、電銷、互聯網多渠道齊頭並進，實現協同發展，運營管理水平及客戶體驗領先市場，並依托集團“金融+科技”雙驅動戰略，在合規經營、防範風險的前提下，開啟平臺經營新時代，持續提升產品、科技兩大核心競爭力，推動內含價值及規模持續、健康、穩定增長。
47 </div>
48 <!-- 新闻资讯 -->
49 <div class="box news">
50 <div class="linear"></div>
51 <div class="tit">{{$t('index.news')}}</div>
52 <div class="under-line"></div>
53 <div class="news-wrap">
54 <!-- hardcode start -->
55 <template v-if="locale == 'zh'">
56 <div @click="onMoreNewsHandler" class="more pointer">
57 {{$t('index.newMore')}} >
58 </div>
59 <div @click="toNewsDetail()" class="news-item">
60 <div class="news-item-tit">平安人寿2019年2季度保险消费报告出炉！</div>
61 <div class="news-item-date">2019-09-27</div>
62 </div>
63 <div @click="toNewsDetail()" class="news-item">
64 <div class="news-item-tit">公益献礼华诞年，创新开拓扶贫路</div>
65 <div class="news-item-date">2019-09-27</div>
66 </div>
67 <div @click="toNewsDetail()" class="news-item">
68 <div class="news-item-tit">平安920要放大招啦！内含超强攻略！</div>
69 <div class="news-item-date">2019-09-27</div>
70 </div>
71 <div @click="toNewsDetail()" class="news-item">
72 <div class="news-item-tit">突发！平安人寿迅速应对广东阳江大巴交通事故</div>
73 <div class="news-item-date">2019-09-27</div>
74 </div>
75 <div @click="toNewsDetail()" class="news-item">
76 <div class="news-item-tit">伴成长、助扶贫，平安人寿客服节给家庭“AI”的力量</div>
77 <div class="news-item-date">2019-09-27</div>
78 </div>
79 </template>
80 <template v-else>
81 <div @click="onMoreNewsHandler" class="more pointer">
82 {{$t('index.newMore')}} >
83 </div>
84 <div @click="toNewsDetail()" class="news-item">
85 <div class="news-item-tit">平安人壽2019年2季度保險消費報告出爐！</div>
86 <div class="news-item-date">2019-09-27</div>
87 </div>
88 <div @click="toNewsDetail()" class="news-item">
89 <div class="news-item-tit">公益獻禮華誕年，創新開拓扶貧路</div>
90 <div class="news-item-date">2019-09-27</div>
91 </div>
92 <div @click="toNewsDetail()" class="news-item">
93 <div class="news-item-tit">平安920要放大招啦！內含超強攻略！</div>
94 <div class="news-item-date">2019-09-27</div>
95 </div>
96 <div @click="toNewsDetail()" class="news-item">
97 <div class="news-item-tit">突發！平安人壽迅速應對廣東陽江大巴交通事故</div>
98 <div class="news-item-date">2019-09-27</div>
99 </div>
100 <div @click="toNewsDetail()" class="news-item">
101 <div class="news-item-tit">伴成長、助扶貧，平安人壽客服節給家庭“AI”的力量</div>
102 <div class="news-item-date">2019-09-27</div>
103 </div>
104 </template>
105
106 <!-- hardcode end -->
107 </div> 67 </div>
108 </div> 68 </div>
109 </div> 69 </div>
......