Skip to content

dev / pingan-life-index-pro

Go to a project
Toggle navigation
Toggle navigation pinning
181aed6a by simon
Options

默认提交

1 parent 2852c7d7
Inline Side-by-side
Showing 98 changed files with 309 additions and 312 deletions
...@@ -369,6 +369,25 @@ textarea { ...@@ -369,6 +369,25 @@ textarea {
369 border-color: $cOrange !important; 369 border-color: $cOrange !important;
370 } 370 }
371 371
372 .ipt-wrap {
373 .ipt {
374 @extend .bb;
375 width: 100%;
376 height: 4.5rem;
377 border-radius: 4.5rem;
378 border: solid 1px #dcdddd !important;
379 background-color: #ffffff;
380 padding: 0 2rem;
381 flex: 1;
382 letter-spacing: .1rem;
383 }
384 }
385
386 // 视频
387 .video-js {
388 background-color: transparent !important;
389 }
390
372 .video-js .vjs-big-play-button { 391 .video-js .vjs-big-play-button {
373 top: 0 !important; 392 top: 0 !important;
374 bottom: 0 !important; 393 bottom: 0 !important;
...@@ -381,4 +400,8 @@ textarea { ...@@ -381,4 +400,8 @@ textarea {
381 .video-js .vjs-slider { 400 .video-js .vjs-slider {
382 background-color: $cOrange !important; 401 background-color: $cOrange !important;
383 } 402 }
403
404 .video-js .vjs-poster {
405 background-color: transparent !important;
406 }
384 </style> 407 </style>
......

17.6 KB | W: | H:

24.6 KB | W: | H:

  • 2-up
  • Swipe
  • Onion skin

991 Bytes | W: | H:

1.3 KB | W: | H:

  • 2-up
  • Swipe
  • Onion skin

454 Bytes | W: | H:

597 Bytes | W: | H:

  • 2-up
  • Swipe
  • Onion skin

967 Bytes | W: | H:

1.17 KB | W: | H:

  • 2-up
  • Swipe
  • Onion skin

1.25 KB | W: | H:

1.58 KB | W: | H:

  • 2-up
  • Swipe
  • Onion skin

1.39 KB | W: | H:

27.1 KB | W: | H:

  • 2-up
  • Swipe
  • Onion skin

1.47 KB | W: | H:

1.99 KB | W: | H:

  • 2-up
  • Swipe
  • Onion skin

893 Bytes | W: | H:

1.12 KB | W: | H:

  • 2-up
  • Swipe
  • Onion skin

994 Bytes | W: | H:

1.26 KB | W: | H:

  • 2-up
  • Swipe
  • Onion skin

936 Bytes | W: | H:

1.21 KB | W: | H:

  • 2-up
  • Swipe
  • Onion skin

1.16 KB | W: | H:

1.49 KB | W: | H:

  • 2-up
  • Swipe
  • Onion skin

1.08 KB | W: | H:

1.54 KB | W: | H:

  • 2-up
  • Swipe
  • Onion skin

1.46 KB | W: | H:

1.74 KB | W: | H:

  • 2-up
  • Swipe
  • Onion skin

921 Bytes | W: | H:

1.22 KB | W: | H:

  • 2-up
  • Swipe
  • Onion skin

40.3 KB | W: | H:

79.9 KB | W: | H:

  • 2-up
  • Swipe
  • Onion skin

40.3 KB | W: | H:

116 KB | W: | H:

  • 2-up
  • Swipe
  • Onion skin

40.3 KB | W: | H:

149 KB | W: | H:

  • 2-up
  • Swipe
  • Onion skin

40.3 KB | W: | H:

177 KB | W: | H:

  • 2-up
  • Swipe
  • Onion skin

630 Bytes | W: | H:

800 Bytes | W: | H:

  • 2-up
  • Swipe
  • Onion skin

591 Bytes | W: | H:

729 Bytes | W: | H:

  • 2-up
  • Swipe
  • Onion skin

440 Bytes | W: | H:

489 Bytes | W: | H:

  • 2-up
  • Swipe
  • Onion skin

499 Bytes | W: | H:

533 Bytes | W: | H:

  • 2-up
  • Swipe
  • Onion skin

511 Bytes | W: | H:

579 Bytes | W: | H:

  • 2-up
  • Swipe
  • Onion skin

490 Bytes | W: | H:

555 Bytes | W: | H:

  • 2-up
  • Swipe
  • Onion skin

483 Bytes | W: | H:

612 Bytes | W: | H:

  • 2-up
  • Swipe
  • Onion skin

461 Bytes | W: | H:

563 Bytes | W: | H:

  • 2-up
  • Swipe
  • Onion skin

618 Bytes | W: | H:

771 Bytes | W: | H:

  • 2-up
  • Swipe
  • Onion skin

562 Bytes | W: | H:

711 Bytes | W: | H:

  • 2-up
  • Swipe
  • Onion skin

592 Bytes | W: | H:

738 Bytes | W: | H:

  • 2-up
  • Swipe
  • Onion skin

542 Bytes | W: | H:

658 Bytes | W: | H:

  • 2-up
  • Swipe
  • Onion skin

539 Bytes | W: | H:

723 Bytes | W: | H:

  • 2-up
  • Swipe
  • Onion skin

588 Bytes | W: | H:

722 Bytes | W: | H:

  • 2-up
  • Swipe
  • Onion skin

376 Bytes | W: | H:

681 Bytes | W: | H:

  • 2-up
  • Swipe
  • Onion skin

530 Bytes | W: | H:

626 Bytes | W: | H:

  • 2-up
  • Swipe
  • Onion skin

159 Bytes | W: | H:

193 Bytes | W: | H:

  • 2-up
  • Swipe
  • Onion skin

78 Bytes | W: | H:

1.43 KB | W: | H:

  • 2-up
  • Swipe
  • Onion skin

541 Bytes | W: | H:

714 Bytes | W: | H:

  • 2-up
  • Swipe
  • Onion skin

591 Bytes | W: | H:

714 Bytes | W: | H:

  • 2-up
  • Swipe
  • Onion skin

569 Bytes | W: | H:

827 Bytes | W: | H:

  • 2-up
  • Swipe
  • Onion skin

641 Bytes | W: | H:

780 Bytes | W: | H:

  • 2-up
  • Swipe
  • Onion skin

588 Bytes | W: | H:

828 Bytes | W: | H:

  • 2-up
  • Swipe
  • Onion skin

644 Bytes | W: | H:

836 Bytes | W: | H:

  • 2-up
  • Swipe
  • Onion skin

459 Bytes | W: | H:

789 Bytes | W: | H:

  • 2-up
  • Swipe
  • Onion skin

510 Bytes | W: | H:

754 Bytes | W: | H:

  • 2-up
  • Swipe
  • Onion skin

546 Bytes | W: | H:

661 Bytes | W: | H:

  • 2-up
  • Swipe
  • Onion skin

575 Bytes | W: | H:

645 Bytes | W: | H:

  • 2-up
  • Swipe
  • Onion skin

375 Bytes | W: | H:

545 Bytes | W: | H:

  • 2-up
  • Swipe
  • Onion skin

512 Bytes | W: | H:

593 Bytes | W: | H:

  • 2-up
  • Swipe
  • Onion skin

279 Bytes | W: | H:

407 Bytes | W: | H:

  • 2-up
  • Swipe
  • Onion skin
...@@ -614,7 +614,7 @@ module.exports = { ...@@ -614,7 +614,7 @@ module.exports = {
614 m2: "登陸「微信」APP， 按右上角的「+」按鈕並選擇「掃壹掃」掃描下方二維碼（放置二維碼）" 614 m2: "登陸「微信」APP， 按右上角的「+」按鈕並選擇「掃壹掃」掃描下方二維碼（放置二維碼）"
615 }, 615 },
616 qrcode: { 616 qrcode: {
617 title: "社交媒體" 617 title: "官方公眾號"
618 } 618 }
619 }, 619 },
620 customService: { 620 customService: {
......
...@@ -612,7 +612,7 @@ module.exports = { ...@@ -612,7 +612,7 @@ module.exports = {
612 m2: "登陸「微信」APP， 按右上角的「+」按鈕並選擇「掃壹掃」掃描下方二維碼（放置二維碼）" 612 m2: "登陸「微信」APP， 按右上角的「+」按鈕並選擇「掃壹掃」掃描下方二維碼（放置二維碼）"
613 }, 613 },
614 qrcode: { 614 qrcode: {
615 title: "社交媒體" 615 title: "官方公眾號"
616 } 616 }
617 }, 617 },
618 customService: { 618 customService: {
......
...@@ -613,7 +613,7 @@ module.exports = { ...@@ -613,7 +613,7 @@ module.exports = {
613 m2: "登陆「微信」APP， 按右上角的「+」按钮並选择「扫一扫」扫描下方二维码（放置二维码）" 613 m2: "登陆「微信」APP， 按右上角的「+」按钮並选择「扫一扫」扫描下方二维码（放置二维码）"
614 }, 614 },
615 qrcode: { 615 qrcode: {
616 title: "社交媒体" 616 title: "官方公众号"
617 } 617 }
618 }, 618 },
619 customService: { 619 customService: {
......
...@@ -131,13 +131,6 @@ ...@@ -131,13 +131,6 @@
131 131
132 // input和下拉 132 // input和下拉
133 .ipt { 133 .ipt {
134 @extend .bb;
135 width: 100%;
136 height: 4.5rem;
137 border-radius: 4.5rem;
138 border: solid 1px #dcdddd !important;
139 background-color: #ffffff;
140 padding: 0 2rem;
141 flex: 1; 134 flex: 1;
142 letter-spacing: .1rem; 135 letter-spacing: .1rem;
143 } 136 }
......
...@@ -60,22 +60,21 @@ ...@@ -60,22 +60,21 @@
60 li:hover { 60 li:hover {
61 color: $cOrange; 61 color: $cOrange;
62 } 62 }
63
64
65
66
67 } 63 }
68 } 64 }
69 65
66
70 .user { 67 .user {
71 width: 7.333333rem; 68 width: 9.25rem;
72 height: 2.25rem; 69 height: 3rem;
70 border-radius: 3rem;
73 background-color: $cOrange; 71 background-color: $cOrange;
74 border-radius: 2.25rem;
75 display: flex; 72 display: flex;
76 align-items: center; 73 align-items: center;
77 justify-content: center; 74 justify-content: center;
78 color: #ffffff; 75 color: #ffffff;
76 margin: 0 auto;
77
79 78
80 span { 79 span {
81 max-width: 4.25rem; 80 max-width: 4.25rem;
...@@ -89,3 +88,6 @@ ...@@ -89,3 +88,6 @@
89 margin: 0 .5rem; 88 margin: 0 .5rem;
90 } 89 }
91 } 90 }
91
92 // 登陆
93 .login {}
......
1 <template> 1 <template>
2 <div> 2 <div>
3 <div class="drop-list" @mouseover="onOverHandler($event)" @mouseout="onOutHandler($event)"> 3 <div class="drop-list" :class="{'login':type=='login'}" @mouseover="onOverHandler($event)" @mouseout="onOutHandler($event)">
4 <!-- 登陆下拉样式 --> 4 <!-- 登陆下拉样式 -->
5 <template v-if="type=='login'"> 5 <template v-if="type=='login'">
6 <div class="user"> 6 <div class="user">
......
...@@ -42,9 +42,9 @@ ...@@ -42,9 +42,9 @@
42 <div class="public"> 42 <div class="public">
43 <div class="tit">{{$t('footer.qrcode')}}</div> 43 <div class="tit">{{$t('footer.qrcode')}}</div>
44 <!-- <img class="qrcode" src="@/assets/images/home/qrcode-focus.png" alt=""> --> 44 <!-- <img class="qrcode" src="@/assets/images/home/qrcode-focus.png" alt=""> -->
45 <img class="qrcode" src="@/assets/images/home/footer-icon-1.png" alt=""> 45 <img class="qrcode pointer" src="@/assets/images/home/footer-icon-1.png" alt="">
46 <img class="qrcode" src="@/assets/images/home/footer-icon-2.png" alt=""> 46 <img class="qrcode pointer" src="@/assets/images/home/footer-icon-2.png" alt="">
47 <img class="qrcode" src="@/assets/images/home/footer-icon-3.png" alt=""> 47 <img class="qrcode pointer" src="@/assets/images/home/footer-icon-3.png" alt="">
48 </div> 48 </div>
49 49
50 </div> 50 </div>
......
1 @import '@/styles/_support'; 1 @import '@/styles/_support';
2 2
3 .comp { 3 .comp {}
4 // display: flex;
5 }
6 4
7 .pagination { 5 .pagination {
8 display: flex; 6 display: flex;
...@@ -10,14 +8,26 @@ ...@@ -10,14 +8,26 @@
10 align-items: center; 8 align-items: center;
11 flex-wrap: wrap; 9 flex-wrap: wrap;
12 10
11 &-item {
12 @extend .bb;
13 padding: 0 .8rem;
14 display: flex;
15 justify-content: center;
16 align-items: center;
17 flex-wrap: wrap;
18 }
19
13 span { 20 span {
14 margin: 0.4rem 0.7rem; 21 margin: 0.4rem 0.7rem;
15 text-align: center; 22 text-align: center;
16 } 23 }
17 24
18 .page-num { 25 .page-num {
19 width: 1.75rem; 26 @extend .fcc;
20 height: 1.75rem; 27 @extend .bb;
28 padding: 0 4px;
29 min-width: 2.25rem;
30 height: 2.5rem;
21 border: solid 1px #dcdddd; 31 border: solid 1px #dcdddd;
22 text-align: center; 32 text-align: center;
23 cursor: pointer; 33 cursor: pointer;
...@@ -42,7 +52,8 @@ ...@@ -42,7 +52,8 @@
42 52
43 .ipt { 53 .ipt {
44 @extend .bb; 54 @extend .bb;
45 width: 3.5rem; 55 width: 5rem;
56 height: 2.5rem;
46 border: solid 1px #dcdddd; 57 border: solid 1px #dcdddd;
47 padding: 0 .7rem; 58 padding: 0 .7rem;
48 text-align: center; 59 text-align: center;
......
...@@ -2,20 +2,25 @@ ...@@ -2,20 +2,25 @@
2 <template> 2 <template>
3 <div class="comp"> 3 <div class="comp">
4 <div class="pagination gird-g"> 4 <div class="pagination gird-g">
5 <span class="pointer" :class="{'disabled' : cur == 1}"> 5 <div class="pagination-item">
6 <a @click="prevPage()">上一页</a> 6 <span class="pointer" :class="{'disabled' : cur == 1}">
7 </span> 7 <a @click="prevPage()">上一页</a>
8 <span @click="selPage(index)" class="page-num pointer" v-for="(index,idx) in indexs" :key="idx" v-bind:class="{ 'active': cur == index}"> 8 </span>
9 <a>{{index}}</a> 9 <span @click="selPage(index)" class="page-num pointer" v-for="(index,idx) in indexs" :key="idx" v-bind:class="{ 'active': cur == index}">
10 </span> 10 <a>{{index}}</a>
11 <span class="pointer" :class="{'disabled' : cur == total}"> 11 </span>
12 <a @click="nextPage()">下一页</a> 12 <span class="pointer" :class="{'disabled' : cur == total}">
13 </span> 13 <a @click="nextPage()">下一页</a>
14 </span>
15 </div>
16
17 <div class="pagination-item">
18 <span>第</span>
19 <input v-model="sel" class="ipt" :placeholder="cur" type="text">
20 <span>/ {{total}}页</span>
21 <span @click="jumpPage" class="jump pointer">跳转</span>
22 </div>
14 23
15 <span>第</span>
16 <input v-model="sel" class="ipt" :placeholder="cur" type="text">
17 <span>/ {{total}}页</span>
18 <span @click="jumpPage" class="jump pointer">跳转</span>
19 </div> 24 </div>
20 </div> 25 </div>
21 </template> 26 </template>
......
...@@ -17,11 +17,12 @@ ...@@ -17,11 +17,12 @@
17 .ebg { 17 .ebg {
18 position: absolute; 18 position: absolute;
19 bottom: 0; 19 bottom: 0;
20 left: 0; 20 width: 100%;
21 right: 0; 21 overflow: hidden;
22 22
23 img { 23 img {
24 max-width: 100%; 24 width: 1920px;
25 margin-left: -360px;
25 } 26 }
26 } 27 }
27 28
...@@ -32,20 +33,16 @@ ...@@ -32,20 +33,16 @@
32 33
33 &-item { 34 &-item {
34 background-color: #ffffff; 35 background-color: #ffffff;
35 // display: flex;
36 // justify-content: center;
37 // align-content: center;
38 // align-items: center;
39 flex-wrap: wrap; 36 flex-wrap: wrap;
40 width: 12.5rem; 37 width: 16rem;
41 height: 12.5rem; 38 height: 16rem;
42 border-radius: .75rem; 39 border-radius: $borderRadius;
43 border: solid 1px #f2f2f2; 40 border: solid 1px #f2f2f2;
44 margin: .5rem; 41 margin: $marginSmallHalf;
45 cursor: pointer; 42 cursor: pointer;
46 43
47 .icon-wrap { 44 .icon-wrap {
48 height: 8.25rem; 45 height: 11rem;
49 @extend .fcc; 46 @extend .fcc;
50 } 47 }
51 48
......
...@@ -10,7 +10,7 @@ ...@@ -10,7 +10,7 @@
10 @include border-top-radius(.666667rem); 10 @include border-top-radius(.666667rem);
11 display: flex; 11 display: flex;
12 align-items: center; 12 align-items: center;
13 height: 2.5rem; 13 height: 3.25rem;
14 color: #ffffff; 14 color: #ffffff;
15 font-weight: bold; 15 font-weight: bold;
16 letter-spacing: .1rem; 16 letter-spacing: .1rem;
...@@ -24,7 +24,7 @@ ...@@ -24,7 +24,7 @@
24 text-align: center; 24 text-align: center;
25 border: solid 1px #f2f2f2; 25 border: solid 1px #f2f2f2;
26 @include border-bottom-radius(.666667rem); 26 @include border-bottom-radius(.666667rem);
27 $gridHei: 4.333333rem; 27 $gridHei: 5.25rem;
28 28
29 &-item { 29 &-item {
30 position: relative; 30 position: relative;
...@@ -36,11 +36,11 @@ ...@@ -36,11 +36,11 @@
36 36
37 .hl { 37 .hl {
38 position: absolute; 38 position: absolute;
39 width: 5.25rem; 39 width: 6.45rem;
40 height: 1px; 40 height: 1px;
41 background-color: #dcdddd; 41 background-color: #dcdddd;
42 bottom: 0; 42 bottom: 0;
43 left: .75rem; 43 left: 1rem;
44 } 44 }
45 45
46 .grid { 46 .grid {
...@@ -61,7 +61,7 @@ ...@@ -61,7 +61,7 @@
61 margin: auto 0; 61 margin: auto 0;
62 } 62 }
63 63
64 .icon{ 64 .icon {
65 margin-right: .916667rem; 65 margin-right: .916667rem;
66 } 66 }
67 } 67 }
...@@ -83,8 +83,9 @@ ...@@ -83,8 +83,9 @@
83 83
84 .w4 { 84 .w4 {
85 .h-line { 85 .h-line {
86 width: 9rem; 86 width: 12rem;
87 } 87 }
88
88 color: $cOrange; 89 color: $cOrange;
89 } 90 }
90 } 91 }
...@@ -95,15 +96,15 @@ ...@@ -95,15 +96,15 @@
95 } 96 }
96 97
97 .w1 { 98 .w1 {
98 width: 7rem; 99 width: 8.75rem; // 105
99 } 100 }
100 101
101 .w2 { 102 .w2 {
102 width: 23rem; 103 width: 29rem; // 348
103 } 104 }
104 105
105 .w3 { 106 .w3 {
106 width: 23.5rem; 107 width: 29.75rem; // 357
107 } 108 }
108 109
109 .w4 { 110 .w4 {
......
...@@ -7,7 +7,7 @@ ...@@ -7,7 +7,7 @@
7 } 7 }
8 8
9 .reservation-container { 9 .reservation-container {
10 width: 64.25rem; 10 // width: 64.25rem;
11 border-radius: .666667rem; 11 border-radius: .666667rem;
12 border: solid .083333rem #f2f2f2; 12 border: solid .083333rem #f2f2f2;
13 background-color: #ffffff; 13 background-color: #ffffff;
...@@ -44,27 +44,17 @@ ...@@ -44,27 +44,17 @@
44 position: relative; 44 position: relative;
45 45
46 // input和下拉 46 // input和下拉
47 .ipt { 47 .ipt {}
48 @extend .bb;
49
50 width: 100%;
51 height: 3.5rem;
52 border: solid 1px #dcdddd;
53 background-color: #ffffff;
54 border-radius: 3.5rem;
55 padding: 0 2.083333rem;
56 }
57 48
58 .name-ipt{ 49 .name-ipt {
59 width: 13.666667rem; 50 width: 18rem;
60 } 51 }
61 52
62 .phone-ipt{ 53 .phone-ipt {
63 width: 13.666667rem; 54 width: 18rem;
64 } 55 }
65 56
66 .mail-ipt{ 57 .mail-ipt {}
67 }
68 58
69 // 长文本 59 // 长文本
70 .textarea { 60 .textarea {
...@@ -143,9 +133,11 @@ ...@@ -143,9 +133,11 @@
143 display: flex; 133 display: flex;
144 align-items: center; 134 align-items: center;
145 flex-wrap: wrap; 135 flex-wrap: wrap;
136
146 .validator { 137 .validator {
147 margin-top: 3rem; 138 margin-top: 3rem;
148 } 139 }
140
149 .label { 141 .label {
150 // min-width: 8.833333rem; 142 // min-width: 8.833333rem;
151 } 143 }
...@@ -163,7 +155,7 @@ ...@@ -163,7 +155,7 @@
163 } 155 }
164 } 156 }
165 157
166 .ipt-wrap2{ 158 .ipt-wrap2 {
167 flex: 1; 159 flex: 1;
168 } 160 }
169 161
...@@ -184,11 +176,11 @@ ...@@ -184,11 +176,11 @@
184 176
185 } 177 }
186 178
187 .form2{ 179 .form2 {
188 .form-item{ 180 .form-item {
189 margin-right: 1.166667rem; 181 margin-right: 1.166667rem;
190 182
191 &:last-child{ 183 &:last-child {
192 margin-right: 0; 184 margin-right: 0;
193 } 185 }
194 } 186 }
...@@ -242,5 +234,5 @@ input { ...@@ -242,5 +234,5 @@ input {
242 234
243 .disabled { 235 .disabled {
244 background-color: gray !important; 236 background-color: gray !important;
245 background-image:none !important; 237 background-image: none !important;
246 } 238 }
......
...@@ -5,9 +5,8 @@ ...@@ -5,9 +5,8 @@
5 5
6 .border { 6 .border {
7 @extend .bb; 7 @extend .bb;
8 padding: 2.833333rem 4.0rem 0 3.5rem; 8 padding: 44px 4.0rem 0 55px;
9 width: 64.166667rem; 9 min-height: 490px;
10 height: 32.25rem;
11 border-radius: $borderRadius; 10 border-radius: $borderRadius;
12 border: solid 1px #f2f2f2; 11 border: solid 1px #f2f2f2;
13 background-color: #ffffff; 12 background-color: #ffffff;
...@@ -19,7 +18,7 @@ ...@@ -19,7 +18,7 @@
19 margin-bottom: 4.416667rem; 18 margin-bottom: 4.416667rem;
20 19
21 &-item { 20 &-item {
22 font-size: $paddingSmall; 21 font-size: $fontSize;
23 22
24 &-tit { 23 &-tit {
25 display: flex; 24 display: flex;
......
1 @import '@/styles/_support';
2
1 .cell-group { 3 .cell-group {
2 margin-bottom: 1rem; 4 margin-bottom: 1rem;
3 5
...@@ -6,23 +8,22 @@ ...@@ -6,23 +8,22 @@
6 } 8 }
7 9
8 div { 10 div {
9 font-size: 1rem;
10 color: #4c4948; 11 color: #4c4948;
11 } 12 }
12 13
13 .w1 { 14 .w1 {
14 min-width: 9.166667rem; 15 width: 10rem;
15 text-align: center; 16 text-align: center;
16 } 17 }
17 18
18 .w2 { 19 .w2 {
19 min-width: 6.25rem; 20 width: 6.25rem;
20 text-align: center; 21 text-align: center;
21 } 22 }
22 23
23 .table-header { 24 .table-header {
24 width: 64.166667rem; 25 // width: 64.166667rem;
25 height: 2.5rem; 26 height: 3.25rem;
26 border-top-left-radius: .666667rem; 27 border-top-left-radius: .666667rem;
27 border-top-right-radius: .666667rem; 28 border-top-right-radius: .666667rem;
28 background-color: #f2f2f2; 29 background-color: #f2f2f2;
...@@ -30,14 +31,16 @@ ...@@ -30,14 +31,16 @@
30 align-items: center; 31 align-items: center;
31 32
32 .normal-header { 33 .normal-header {
33 width: 58.833333rem; 34 // width: 58.833333rem;
35 @extend .bb;
36 padding: 0 2.75rem;
37 width: 100%;
34 margin: auto; 38 margin: auto;
35 display: flex; 39 display: flex;
36 justify-content: space-between; 40 justify-content: space-between;
37 align-items: center; 41 align-items: center;
38 42
39 .title { 43 .title {
40 font-size: 1rem;
41 font-weight: bold; 44 font-weight: bold;
42 color: #575453; 45 color: #575453;
43 } 46 }
...@@ -59,15 +62,16 @@ ...@@ -59,15 +62,16 @@
59 } 62 }
60 63
61 .table-content { 64 .table-content {
62 width: 64.166667rem; 65 // width: 64.166667rem;
66
63 height: auto; 67 height: auto;
64 display: inline-block; 68 // display: inline-block;
65 border-bottom-left-radius: .666667rem; 69 border-bottom-left-radius: .666667rem;
66 border-bottom-right-radius: .666667rem; 70 border-bottom-right-radius: .666667rem;
67 border-left: solid .083333rem #f2f2f2; 71 border-left: solid .083333rem #f2f2f2;
68 border-right: solid .083333rem #f2f2f2; 72 border-right: solid .083333rem #f2f2f2;
69 border-bottom: solid .083333rem #f2f2f2; 73 border-bottom: solid .083333rem #f2f2f2;
70 padding: 0 2.583333rem; 74 padding: 0 2.75rem;
71 max-height: 41.666667rem; 75 max-height: 41.666667rem;
72 transition: max-height ease-out 0.3s !important; 76 transition: max-height ease-out 0.3s !important;
73 overflow: hidden; 77 overflow: hidden;
...@@ -80,18 +84,31 @@ ...@@ -80,18 +84,31 @@
80 align-items: center; 84 align-items: center;
81 85
82 .cell1 { 86 .cell1 {
83 width: 29.166667rem; 87 width: 98%;
84 display: flex; 88 display: flex;
85 justify-content: space-between; 89 justify-content: space-between;
86 margin: auto; 90 margin: auto;
87 } 91 }
88 92
93
94
89 .separator-v { 95 .separator-v {
90 height: 2.5rem; 96 height: 2.5rem;
91 width: .166667rem; 97 width: .166667rem;
92 background-color: #f2f2f2; 98 background-color: #f2f2f2;
93 margin: 0 .916667rem; 99 margin: 0 .916667rem;
94 } 100 }
101
102 .td {
103 &:first-child {
104 text-align: left;
105 }
106
107 &:last-child {
108 text-align: right;
109 }
110 }
111
95 } 112 }
96 113
97 .label span { 114 .label span {
...@@ -102,8 +119,8 @@ ...@@ -102,8 +119,8 @@
102 } 119 }
103 120
104 .separator-h { 121 .separator-h {
105 width: 58.833333rem; 122 width: 100%;
106 height: .083333rem; 123 height: 1px;
107 background-color: #f2f2f2; 124 background-color: #f2f2f2;
108 } 125 }
109 } 126 }
......
...@@ -11,7 +11,7 @@ ...@@ -11,7 +11,7 @@
11 &-nav { 11 &-nav {
12 display: flex; 12 display: flex;
13 justify-content: space-between; 13 justify-content: space-between;
14 flex-wrap: wrap; 14 flex-wrap: nowrap;
15 15
16 &-item { 16 &-item {
17 @extend .pointer; 17 @extend .pointer;
...@@ -19,23 +19,31 @@ ...@@ -19,23 +19,31 @@
19 display: flex; 19 display: flex;
20 justify-content: center; 20 justify-content: center;
21 align-items: center; 21 align-items: center;
22 height: 3.75rem; 22
23 height: 4.75rem;
23 background-color: #f2f2f2; 24 background-color: #f2f2f2;
24 padding: 0 1.25rem; 25 padding: 0 20px;
26 margin-right: $marginSmall;
25 27
26 &-icon { 28 &-icon {
27 margin-right: .4rem; 29 margin-right: 0.6rem;
28 30
29 img { 31 img {
30 max-width: 2rem; 32 width: 2.4rem;
31 } 33 }
32 } 34 }
35
36 &:last-child {
37 margin-right: 0;
38 }
33 } 39 }
34 40
35 .active { 41 .active {
36 color: #ffffff; 42 color: #ffffff;
37 background-image: linear-gradient(to bottom, #f05f28, #f05021); 43 background-image: linear-gradient(to bottom, #f05f28, #f05021);
38 } 44 }
45
46
39 } 47 }
40 48
41 &-line { 49 &-line {
...@@ -45,7 +53,7 @@ ...@@ -45,7 +53,7 @@
45 53
46 &-cont { 54 &-cont {
47 @extend .bb; 55 @extend .bb;
48 padding: 3.5rem 6.166667rem 0 2rem; 56 padding: 4.25rem 2rem 0 2.5rem;
49 border: solid 1px #f2f2f2; 57 border: solid 1px #f2f2f2;
50 background-color: #ffffff; 58 background-color: #ffffff;
51 min-height: 43.75rem; 59 min-height: 43.75rem;
...@@ -63,8 +71,8 @@ ...@@ -63,8 +71,8 @@
63 li { 71 li {
64 background-image: url('~@assets/images/payment-type/icon-li.png'); 72 background-image: url('~@assets/images/payment-type/icon-li.png');
65 background-repeat: no-repeat; 73 background-repeat: no-repeat;
66 background-position: 0rem 1.25rem; 74 background-position: 0 18px;
67 padding-left: 1rem; 75 padding-left: 16px;
68 } 76 }
69 } 77 }
70 } 78 }
......
...@@ -3,7 +3,7 @@ ...@@ -3,7 +3,7 @@
3 .container { 3 .container {
4 @extend .bb; 4 @extend .bb;
5 padding: 1.833333rem 3rem 2.5rem 2.166667rem; 5 padding: 1.833333rem 3rem 2.5rem 2.166667rem;
6 width: 770px; 6
7 } 7 }
8 8
9 .border { 9 .border {
...@@ -12,7 +12,6 @@ ...@@ -12,7 +12,6 @@
12 background-color: #ffffff; 12 background-color: #ffffff;
13 } 13 }
14 14
15
16 .form { 15 .form {
17 display: flex; 16 display: flex;
18 flex-wrap: wrap; 17 flex-wrap: wrap;
...@@ -20,6 +19,7 @@ ...@@ -20,6 +19,7 @@
20 &-item { 19 &-item {
21 position: relative; 20 position: relative;
22 margin-bottom: 2.333333rem; 21 margin-bottom: 2.333333rem;
22 width: 100%;
23 23
24 &:last-child { 24 &:last-child {
25 margin-bottom: 0; 25 margin-bottom: 0;
...@@ -43,20 +43,19 @@ ...@@ -43,20 +43,19 @@
43 43
44 .ipt-wrap { 44 .ipt-wrap {
45 display: flex; 45 display: flex;
46 justify-content: space-between;
46 align-items: center; 47 align-items: center;
47 position: relative; 48 position: relative;
48 49
49 // input和下拉 50 // input和下拉
50 .ipt { 51 .ipt {
51 @extend .bb; 52 flex: 1;
52 width: 42.833333rem;
53 height: 3.5rem;
54 border: solid 1px #dcdddd;
55 background-color: #ffffff;
56 border-radius: 3.5rem;
57 padding: 0 2.083333rem;
58 } 53 }
59 54
55 .agree{
56 // @extend .bb;
57 // padding-left: 80px;
58 }
60 59
61 .name-ipt { 60 .name-ipt {
62 width: 13.666667rem; 61 width: 13.666667rem;
...@@ -101,7 +100,7 @@ ...@@ -101,7 +100,7 @@
101 right: 16rem; 100 right: 16rem;
102 display: flex; 101 display: flex;
103 align-items: center; 102 align-items: center;
104 // bottom: 0; 103 // bottom: 0;
105 104
106 img { 105 img {
107 display: inline-block; 106 display: inline-block;
......
...@@ -6,17 +6,14 @@ ...@@ -6,17 +6,14 @@
6 <div class="label"> 6 <div class="label">
7 <div class="icon"><img src="@/assets/images/policy-change-contact/icon-pcc-phone.png"></div>{{$t('policyChangeContact.phone')}} 7 <div class="icon"><img src="@/assets/images/policy-change-contact/icon-pcc-phone.png"></div>{{$t('policyChangeContact.phone')}}
8 </div> 8 </div>
9 <div class="ipt-wrap" > 9 <div class="ipt-wrap">
10 <!-- <div> --> 10 <input class="ipt mail-ipt" :class="{err : errorTips.e1.length > 0}" type="text" v-model="data.mobile">
11 <input class="ipt mail-ipt" :class="{err : errorTips.e1.length > 0}" type="text" v-model="data.mobile"> 11 <div class="agree pointer" @click="checked1 = !checked1">
12
13 <!-- </div> -->
14 <div class="pointer" @click="checked1 = !checked1">
15 <img v-if="!checked1" class="check-icon pointer" src="@/assets/images/reservation/un-check.png"> 12 <img v-if="!checked1" class="check-icon pointer" src="@/assets/images/reservation/un-check.png">
16 <img v-else class="check-icon pointer" src="@/assets/images/reservation/check.png"> 13 <img v-else class="check-icon pointer" src="@/assets/images/reservation/check.png">
17 <span>{{$t("policyChangeContact.checkTips")}}</span> 14 <span>{{$t("policyChangeContact.checkTips")}}</span>
18 </div> 15 </div>
19 16
20 </div> 17 </div>
21 <div class="validator" v-if="errorTips.e1.length > 0"> 18 <div class="validator" v-if="errorTips.e1.length > 0">
22 <img src="@/assets/images/common/icon-notice.png" alt="">{{errorTips.e1}} 19 <img src="@/assets/images/common/icon-notice.png" alt="">{{errorTips.e1}}
......
...@@ -10,7 +10,7 @@ ...@@ -10,7 +10,7 @@
10 @include border-top-radius(.666667rem); 10 @include border-top-radius(.666667rem);
11 display: flex; 11 display: flex;
12 align-items: center; 12 align-items: center;
13 height: 2.5rem; 13 height: 3.25rem;
14 color: #ffffff; 14 color: #ffffff;
15 font-weight: bold; 15 font-weight: bold;
16 letter-spacing: .1rem; 16 letter-spacing: .1rem;
...@@ -35,7 +35,8 @@ ...@@ -35,7 +35,8 @@
35 35
36 .hl { 36 .hl {
37 position: absolute; 37 position: absolute;
38 width: 60.833333rem; 38 width: 95%;
39 // width: 77rem;
39 height: 1px; 40 height: 1px;
40 background-color: #dcdddd; 41 background-color: #dcdddd;
41 bottom: 0; 42 bottom: 0;
...@@ -47,7 +48,7 @@ ...@@ -47,7 +48,7 @@
47 48
48 .grid { 49 .grid {
49 position: relative; 50 position: relative;
50 padding: 1.583333rem 2rem; 51 padding: 2rem 3rem;
51 background-color: #ffffff; 52 background-color: #ffffff;
52 53
53 .v-line { 54 .v-line {
...@@ -103,24 +104,25 @@ ...@@ -103,24 +104,25 @@
103 } 104 }
104 105
105 .w1 { 106 .w1 {
106 width: 10.333333rem; 107 width: 13.25rem;
107 } 108 }
108 109
109 .w2 { 110 .w2 {
110 width: 16.916667rem; 111 width: 21.5rem;
111 112
112 } 113 }
113 114
114 .w3 { 115 .w3 {
115 width: 9.75rem; 116 width: 12.5rem;
116 } 117 }
117 118
118 .w4 { 119 .w4 {
119 width: 13.583333rem; 120 width: 17rem;
120 } 121 }
121 122
122 .w5 { 123 .w5 {
123 flex: 1; 124 flex: 1;
125 // width: 212px;
124 } 126 }
125 127
126 } 128 }
......
...@@ -21,7 +21,7 @@ ...@@ -21,7 +21,7 @@
21 @include border-top-radius(.666667rem); 21 @include border-top-radius(.666667rem);
22 display: flex; 22 display: flex;
23 align-items: center; 23 align-items: center;
24 height: 2.5rem; 24 height: 3.25rem;
25 color: #ffffff; 25 color: #ffffff;
26 font-weight: bold; 26 font-weight: bold;
27 letter-spacing: .1rem; 27 letter-spacing: .1rem;
...@@ -85,14 +85,6 @@ ...@@ -85,14 +85,6 @@
85 85
86 // input和下拉 86 // input和下拉
87 .ipt { 87 .ipt {
88 @extend .bb;
89
90 width: 100%;
91 height: 3.5rem;
92 border: solid 1px #dcdddd;
93 background-color: #ffffff;
94 border-radius: 3.5rem;
95 padding: 0 2.083333rem;
96 } 88 }
97 89
98 .disable { 90 .disable {
...@@ -175,7 +167,6 @@ ...@@ -175,7 +167,6 @@
175 background-blend-mode: soft-light, ; 167 background-blend-mode: soft-light, ;
176 background-image: linear-gradient(to top, #000000, #ffffff), linear-gradient(to bottom, #ec6429, #ec6429); 168 background-image: linear-gradient(to top, #000000, #ffffff), linear-gradient(to bottom, #ec6429, #ec6429);
177 text-align: center; 169 text-align: center;
178 font-size: 1.291667rem;
179 letter-spacing: .129167rem; 170 letter-spacing: .129167rem;
180 color: #ffffff; 171 color: #ffffff;
181 border-radius: 3.5rem; 172 border-radius: 3.5rem;
......
...@@ -12,7 +12,7 @@ input { ...@@ -12,7 +12,7 @@ input {
12 } 12 }
13 13
14 .reservation-container { 14 .reservation-container {
15 width: 64.25rem; 15 // width: 64.25rem;
16 border-radius: .666667rem; 16 border-radius: .666667rem;
17 border: solid .083333rem #f2f2f2; 17 border: solid .083333rem #f2f2f2;
18 background-color: #ffffff; 18 background-color: #ffffff;
...@@ -50,14 +50,6 @@ input { ...@@ -50,14 +50,6 @@ input {
50 50
51 // input和下拉 51 // input和下拉
52 .ipt { 52 .ipt {
53 @extend .bb;
54
55 width: 100%;
56 height: 3.5rem;
57 border: solid 1px #dcdddd;
58 background-color: #ffffff;
59 border-radius: 3.5rem;
60 padding: 0 2.083333rem;
61 } 53 }
62 54
63 // 长文本 55 // 长文本
......
...@@ -2,19 +2,18 @@ ...@@ -2,19 +2,18 @@
2 2
3 .content { 3 .content {
4 display: flex; 4 display: flex;
5 // margin-top: 2.333333rem;
6 margin: 2.333333rem auto; 5 margin: 2.333333rem auto;
7 position: relative; 6 position: relative;
7
8 } 8 }
9 9
10 .left-panel { 10 .left-panel {
11 width: 12.833333rem; 11 width: 16rem;
12 // height: 42.333333rem; 12 // background-color: wheat;
13 margin-left: 3.166667rem;
14 13
15 .separator { 14 .separator {
16 margin: auto; 15 margin: auto;
17 width: 10.5rem; 16 width: 13.25rem;
18 height: .083333rem; 17 height: .083333rem;
19 background-color: #dcdddd; 18 background-color: #dcdddd;
20 } 19 }
...@@ -22,8 +21,7 @@ ...@@ -22,8 +21,7 @@
22 .menu-item { 21 .menu-item {
23 position: relative; 22 position: relative;
24 @extend .bb; 23 @extend .bb;
25 padding: 1.25rem 0; 24 padding: 1.5rem 0;
26 // height: 3.833333rem;
27 font-weight: bold; 25 font-weight: bold;
28 color: $cFontGray; 26 color: $cFontGray;
29 text-align: center; 27 text-align: center;
...@@ -32,12 +30,12 @@ ...@@ -32,12 +30,12 @@
32 align-items: center; 30 align-items: center;
33 justify-content: flex-start; 31 justify-content: flex-start;
34 border-bottom: solid 1px #dcdddd; 32 border-bottom: solid 1px #dcdddd;
35 width: 10.5rem; 33 width: 13.25rem;
36 margin-left: 1.083333rem; 34 margin-left: 1.25rem;
37 35
38 .icon-wrap { 36 .icon-wrap {
39 @extend .fcc; 37 @extend .fcc;
40 width: 3rem; 38 width: 4rem;
41 39
42 .icon {} 40 .icon {}
43 } 41 }
...@@ -52,10 +50,11 @@ ...@@ -52,10 +50,11 @@
52 50
53 .sel { 51 .sel {
54 position: absolute; 52 position: absolute;
55 width: .583333rem; 53 width: 8px;
56 height: 1.166667rem; 54 height: 17px;
57 top: 0; 55 top: 0;
58 bottom: 0; 56 bottom: 0;
57 // right: 0;
59 right: -1.75rem; 58 right: -1.75rem;
60 margin: auto 0; 59 margin: auto 0;
61 background: url("~@/assets/images/insurance-query/triangle.png") no-repeat center center; 60 background: url("~@/assets/images/insurance-query/triangle.png") no-repeat center center;
...@@ -82,9 +81,8 @@ ...@@ -82,9 +81,8 @@
82 } 81 }
83 82
84 .right-panel { 83 .right-panel {
85 margin-left: 3rem; 84 margin-left: $marginMedium;
86 // width: 64.166667rem; 85 width: 975px;
87 width: 64.416667rem;
88 background-color: #ffffff; 86 background-color: #ffffff;
89 87
90 .panel { 88 .panel {
......
...@@ -50,34 +50,6 @@ ...@@ -50,34 +50,6 @@
50 <div class="panel" v-if="activity == 'm8'"> 50 <div class="panel" v-if="activity == 'm8'">
51 <common-form></common-form> 51 <common-form></common-form>
52 </div> 52 </div>
53 <!-- <div class="panel" :class="{activity : activity == 'm1'}">
54 <contact-us></contact-us>
55 </div>
56 <div class="panel" :class="{activity : activity == 'm2'}">
57 <payment-type></payment-type>
58 </div>
59 <div class="panel" :class="{activity : activity == 'm3'}">
60 <insurance-query></insurance-query>
61 </div>
62 <div class="panel" :class="{activity : activity == 'm41'}">
63 <policy-change-guide></policy-change-guide>
64 </div>
65 <div class="panel" :class="{activity : activity == 'm42'}">
66 <policy-change-contact></policy-change-contact>
67 </div>
68 <div class="panel" :class="{activity : activity == 'm43'}">
69 <policy-change-information></policy-change-information>
70 </div>
71 <div class="panel" :class="{activity : activity == 'm5'}"></div>
72 <div class="panel" :class="{activity : activity == 'm6'}">
73 <reservation></reservation>
74 </div>
75 <div class="panel" :class="{activity : activity == 'm7'}">
76 <complaint-acceptance></complaint-acceptance>
77 </div>
78 <div class="panel" :class="{activity : activity == 'm8'}">
79 <common-form></common-form>
80 </div> -->
81 </div> 53 </div>
82 </div> 54 </div>
83 </template> 55 </template>
......
...@@ -30,10 +30,10 @@ export default { ...@@ -30,10 +30,10 @@ export default {
30 playerOptions: { 30 playerOptions: {
31 width: 843, 31 width: 843,
32 height: 475, 32 height: 475,
33 // autoplay: true, 33 autoplay: false, //如果true,浏览器准备好时开始回放。
34 muted: true, 34 muted: true, // 默认情况下将会消除任何音频。
35 language: 'en', 35 language: 'en',
36 // playbackRates: [0.7, 1.0, 1.5, 2.0], 36 // playbackRates: [0.7, 1.0, 1.5, 2.0],//播放速度
37 sources: [{ 37 sources: [{
38 type: "video/mp4", 38 type: "video/mp4",
39 // mp4 39 // mp4
...@@ -41,7 +41,13 @@ export default { ...@@ -41,7 +41,13 @@ export default {
41 // webm 41 // webm
42 // src: "https://cdn.theguardian.tv/webM/2015/07/20/150716YesMen_synd_768k_vp8.webm" 42 // src: "https://cdn.theguardian.tv/webM/2015/07/20/150716YesMen_synd_768k_vp8.webm"
43 }], 43 }],
44 poster: "https://ow.go.qudone.com/jyesupload/476b392f19354fb3a21083220200d912.jpg", 44 poster: 'images/video-poster.png',
45 },
46 controlBar: {
47 timeDivider: true,
48 durationDisplay: true,
49 remainingTimeDisplay: false,
50 fullscreenToggle: true //全屏按钮
45 } 51 }
46 } 52 }
47 }, 53 },
...@@ -93,7 +99,7 @@ export default { ...@@ -93,7 +99,7 @@ export default {
93 // player is ready 99 // player is ready
94 playerReadied(player) { 100 playerReadied(player) {
95 // seek to 10s 101 // seek to 10s
96 console.log('example player 1 readied', player) 102 // console.log('example player 1 readied', player)
97 player.currentTime(10) 103 player.currentTime(10)
98 // console.log('example 01: the player is readied', player) 104 // console.log('example 01: the player is readied', player)
99 }, 105 },
...@@ -147,7 +153,6 @@ export default { ...@@ -147,7 +153,6 @@ export default {
147 }, 153 },
148 mounted() { 154 mounted() {
149 setTimeout(() => { 155 setTimeout(() => {
150 console.log('dynamic change options', this.player)
151 this.player.muted(false) 156 this.player.muted(false)
152 }, 2000) 157 }, 2000)
153 }, 158 },
......
...@@ -25,7 +25,6 @@ ...@@ -25,7 +25,6 @@
25 } 25 }
26 26
27 .banner { 27 .banner {
28 // box-shadow: 0 0 1.75rem 0 rgba(255, 87, 0, 0.1);
29 position: absolute; 28 position: absolute;
30 z-index: 1; 29 z-index: 1;
31 left: 50%; 30 left: 50%;
...@@ -69,6 +68,7 @@ ...@@ -69,6 +68,7 @@
69 68
70 img { 69 img {
71 width: 100%; 70 width: 100%;
71 @include border-top-radius($borderRadius);
72 } 72 }
73 73
74 &:first-child { 74 &:first-child {
...@@ -91,9 +91,9 @@ ...@@ -91,9 +91,9 @@
91 overflow: hidden; 91 overflow: hidden;
92 } 92 }
93 93
94 .desc { 94 .txt {
95 @extend .fcc;
95 @extend .bb; 96 @extend .bb;
96 padding-top: 3.833333rem;
97 padding-left: 2.166667rem; 97 padding-left: 2.166667rem;
98 flex: 1; 98 flex: 1;
99 line-height: 2.3; 99 line-height: 2.3;
...@@ -102,7 +102,6 @@ ...@@ -102,7 +102,6 @@
102 } 102 }
103 103
104 104
105
106 .swiper-button-prev { 105 .swiper-button-prev {
107 background-image: url('~@/assets/images/common/button-prev.png'); 106 background-image: url('~@/assets/images/common/button-prev.png');
108 left: 360px; 107 left: 360px;
...@@ -114,7 +113,9 @@ ...@@ -114,7 +113,9 @@
114 right: 360px; 113 right: 360px;
115 } 114 }
116 115
117 .swiper-pagination-fraction, .swiper-pagination-custom, .swiper-container-horizontal > .swiper-pagination-bullets{ 116 .swiper-pagination-fraction,
117 .swiper-pagination-custom,
118 .swiper-container-horizontal>.swiper-pagination-bullets {
118 bottom: 48px; 119 bottom: 48px;
119 } 120 }
120 121
......
...@@ -62,7 +62,7 @@ ...@@ -62,7 +62,7 @@
62 <div class="box detail"> 62 <div class="box detail">
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)"> 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)">
64 </video-player> 64 </video-player>
65 <div class="desc"> 65 <div class="txt">
66 中國平安人壽保險股份有限公司成立於2002年,是中國平安保險（集團）股份有限公司旗下的重要成員。截至2017年12月31日,平安人壽註冊資本為338億元，在全國擁有42家分公司（含7家電話銷售中心）及超過3,300個營業網點,壽險代理人達138.6萬名。公司個險、銀保、電銷、互聯網多渠道齊頭並進，實現協同發展，運營管理水平及客戶體驗領先市場，並依托集團“金融+科技”雙驅動戰略，在合規經營、防範風險的前提下，開啟平臺經營新時代，持續提升產品、科技兩大核心競爭力，推動內含價值及規模持續、健康、穩定增長。 66 中國平安人壽保險股份有限公司成立於2002年,是中國平安保險（集團）股份有限公司旗下的重要成員。截至2017年12月31日,平安人壽註冊資本為338億元，在全國擁有42家分公司（含7家電話銷售中心）及超過3,300個營業網點,壽險代理人達138.6萬名。公司個險、銀保、電銷、互聯網多渠道齊頭並進，實現協同發展，運營管理水平及客戶體驗領先市場，並依托集團“金融+科技”雙驅動戰略，在合規經營、防範風險的前提下，開啟平臺經營新時代，持續提升產品、科技兩大核心競爭力，推動內含價值及規模持續、健康、穩定增長。
67 </div> 67 </div>
68 </div> 68 </div>
......
...@@ -19,9 +19,13 @@ ...@@ -19,9 +19,13 @@
19 .ebg { 19 .ebg {
20 position: absolute; 20 position: absolute;
21 bottom: 0; 21 bottom: 0;
22 left: 50%; 22 width: 100%;
23 margin-left: -960px; 23 overflow: hidden;
24 width: 1920px; 24
25 img {
26 width: 1920px;
27 margin-left: -360px;
28 }
25 } 29 }
26 30
27 .step { 31 .step {
...@@ -164,13 +168,6 @@ ...@@ -164,13 +168,6 @@
164 168
165 // input和下拉 169 // input和下拉
166 .ipt { 170 .ipt {
167 @extend .bb;
168 width: 100%;
169 height: 4.5rem;
170 border-radius: 4.5rem;
171 border: solid 1px #dcdddd;
172 background-color: #ffffff;
173 padding: 0 2rem;
174 flex: 1; 171 flex: 1;
175 letter-spacing: .1rem; 172 letter-spacing: .1rem;
176 } 173 }
......
...@@ -16,12 +16,17 @@ ...@@ -16,12 +16,17 @@
16 position: relative; 16 position: relative;
17 } 17 }
18 18
19
19 .ebg { 20 .ebg {
20 position: absolute; 21 position: absolute;
21 bottom: 0; 22 bottom: 0;
22 left: 50%; 23 width: 100%;
23 margin-left: -960px; 24 overflow: hidden;
24 width: 1920px; 25
26 img {
27 width: 1920px;
28 margin-left: -360px;
29 }
25 } 30 }
26 31
27 .login { 32 .login {
...@@ -155,13 +160,6 @@ ...@@ -155,13 +160,6 @@
155 160
156 // input和下拉 161 // input和下拉
157 .ipt { 162 .ipt {
158 @extend .bb;
159 width: 100%;
160 height: 4.5rem;
161 border-radius: 4.5rem;
162 border: solid 1px #dcdddd;
163 background-color: #ffffff;
164 padding: 0 2rem;
165 flex: 1; 163 flex: 1;
166 letter-spacing: .1rem; 164 letter-spacing: .1rem;
167 } 165 }
......
1 @import '@/styles/_support'; 1 @import '@/styles/_support';
2 2
3 .content { 3 .content {
4 // font-family: MicrosoftYaHei;
5 color: #4c4948;
6 padding-bottom: 8.5rem; 4 padding-bottom: 8.5rem;
7 } 5 }
8 6
...@@ -12,12 +10,12 @@ ...@@ -12,12 +10,12 @@
12 } 10 }
13 11
14 .top-space { 12 .top-space {
15 height: 5rem; 13 height: 3rem;
16 } 14 }
17 15
18 .tit { 16 .tit {
19 text-align: center; 17 text-align: center;
20 font-size: 18px; 18 font-size: $fontSizeTitle;
21 font-weight: bold; 19 font-weight: bold;
22 letter-spacing: 1.8px; 20 letter-spacing: 1.8px;
23 } 21 }
...@@ -44,7 +42,7 @@ ...@@ -44,7 +42,7 @@
44 } 42 }
45 43
46 .desc { 44 .desc {
47 max-width: 64rem; 45 max-width: $articleWidth;
48 margin-top: 2.5rem; 46 margin-top: 2.5rem;
49 line-height: 2; 47 line-height: 2;
50 letter-spacing: 1.2px; 48 letter-spacing: 1.2px;
......
...@@ -16,18 +16,19 @@ ...@@ -16,18 +16,19 @@
16 .ebg { 16 .ebg {
17 position: absolute; 17 position: absolute;
18 bottom: 0; 18 bottom: 0;
19 left: 0; 19 width: 100%;
20 right: 0; 20 overflow: hidden;
21 21
22 img { 22 img {
23 max-width: 100%; 23 width: 1920px;
24 margin-left: -360px;
24 } 25 }
25 } 26 }
26 27
27 .news { 28 .news {
28 color: #4c4948; 29 color: #4c4948;
29 margin: 0 auto; 30 margin: 0 auto;
30 max-width: 66.75rem; 31 max-width: 81.75rem;
31 32
32 &-item { 33 &-item {
33 34
...@@ -35,7 +36,7 @@ ...@@ -35,7 +36,7 @@
35 justify-content: space-between; 36 justify-content: space-between;
36 align-items: center; 37 align-items: center;
37 38
38 height: 4.25rem; 39 height: 5.5rem;
39 border-bottom: solid 1px #dcdddd; 40 border-bottom: solid 1px #dcdddd;
40 cursor: pointer; 41 cursor: pointer;
41 42
......
1 1
2 <template> 2 <template>
3 <div class="content"> 3 <div>
4 <div class="ebg"> 4
5 <img src="@/assets/images/news-list/news-list-c1.png"> 5 <div class="content">
6 </div> 6 <div class="ebg">
7 <div class="top-space"></div> 7 <img src="@/assets/images/news-list/news-list-bg.png">
8 <div class="box"> 8 </div>
9 <div class="news"> 9 <div class="top-space"></div>
10 <div @click="toNewsDetail()" v-for="(item,index) in items" :key="index" class="news-item"> 10 <div class="box">
11 <div class="news-item-tit"> 11 <div class="news">
12 <div class="point"></div> 12 <div @click="toNewsDetail()" v-for="(item,index) in items" :key="index" class="news-item">
13 {{item}} 13 <div class="news-item-tit">
14 <img v-if="index < 3" class="new" src="@/assets/images/news-list/news-list-new.png"> 14 <div class="point"></div>
15 {{item}}
16 <img v-if="index < 3" class="new" src="@/assets/images/news-list/news-list-new.png">
17 </div>
18 <div class="news-item-date">2019-09-27</div>
15 </div> 19 </div>
16 <div class="news-item-date">2019-09-27</div>
17 </div> 20 </div>
21 <pagination @selpage="selPage" :total="23" class="pagination"></pagination>
18 </div> 22 </div>
19 <pagination @selpage="selPage" :total="23" class="pagination"></pagination>
20 </div> 23 </div>
21 </div> 24 </div>
25
22 </template> 26 </template>
23 27
24 <script src="./news-list.js"></script> 28 <script src="./news-list.js"></script>
......
...@@ -20,9 +20,13 @@ ...@@ -20,9 +20,13 @@
20 .ebg { 20 .ebg {
21 position: absolute; 21 position: absolute;
22 bottom: 0; 22 bottom: 0;
23 left: 50%; 23 width: 100%;
24 margin-left: -960px; 24 overflow: hidden;
25 width: 1920px; 25
26 img {
27 width: 1920px;
28 margin-left: -360px;
29 }
26 } 30 }
27 31
28 .step { 32 .step {
...@@ -170,13 +174,6 @@ ...@@ -170,13 +174,6 @@
170 174
171 // input和下拉 175 // input和下拉
172 .ipt { 176 .ipt {
173 @extend .bb;
174 width: 100%;
175 height: 4.5rem;
176 border-radius: 4.5rem;
177 border: solid 1px #dcdddd;
178 background-color: #ffffff;
179 padding: 0 2rem;
180 flex: 1; 177 flex: 1;
181 letter-spacing: .1rem; 178 letter-spacing: .1rem;
182 } 179 }
......
...@@ -20,9 +20,13 @@ ...@@ -20,9 +20,13 @@
20 .ebg { 20 .ebg {
21 position: absolute; 21 position: absolute;
22 bottom: 0; 22 bottom: 0;
23 left: 50%; 23 width: 100%;
24 margin-left: -960px; 24 overflow: hidden;
25 width: 1920px; 25
26 img {
27 width: 1920px;
28 margin-left: -360px;
29 }
26 } 30 }
27 31
28 .step { 32 .step {
...@@ -170,13 +174,6 @@ ...@@ -170,13 +174,6 @@
170 174
171 // input和下拉 175 // input和下拉
172 .ipt { 176 .ipt {
173 @extend .bb;
174 width: 100%;
175 height: 4.5rem;
176 border-radius: 4.5rem;
177 border: solid 1px #dcdddd;
178 background-color: #ffffff;
179 padding: 0 2rem;
180 flex: 1; 177 flex: 1;
181 letter-spacing: .1rem; 178 letter-spacing: .1rem;
182 } 179 }
......
1 @import '@/styles/_support'; 1 @import '@/styles/_support';
2 2
3 .content { 3 .content {
4 // font-family: MicrosoftYaHei;
5 color: #4c4948;
6 padding-bottom: 8.5rem; 4 padding-bottom: 8.5rem;
7 } 5 }
8 6
...@@ -11,19 +9,19 @@ ...@@ -11,19 +9,19 @@
11 } 9 }
12 10
13 .top-space { 11 .top-space {
14 height: 5rem; 12 height: 3rem;
15 } 13 }
16 14
17 .tit { 15 .tit {
18 text-align: center; 16 text-align: center;
19 font-size: 18px; 17 font-size: $fontSizeTitle;
20 font-weight: bold; 18 font-weight: bold;
21 letter-spacing: 1.8px; 19 letter-spacing: 1.8px;
22 } 20 }
23 21
24 .desc { 22 .desc {
25 max-width: 64rem; 23 max-width: $articleWidth;
26 margin-top: 4.25rem; 24 margin-top: 3rem;
27 line-height: 2; 25 line-height: 2;
28 letter-spacing: 1.2px; 26 letter-spacing: 1.2px;
29 } 27 }
......
1 @import '@/styles/_support';
2
3
1 .content { 4 .content {
2 background-color: #f5f5f5; 5 background-color: #f5f5f5;
3 } 6 }
4 7
5 .fix { 8 .fix {
6 position: fixed; 9 position: fixed;
7 max-width: 950px; 10 max-width: 1200px;
8 width: 100%; 11 width: 100%;
9 top: 0; 12 top: 0;
10 } 13 }
11 14
12 .banner { 15 .banner {
13 margin-bottom: 3.333333rem; 16 padding-bottom: $marginMedium;
14 position: relative; 17 position: relative;
15 18
16 .btn-position { 19 .btn-position {
17 position: absolute; 20 position: absolute;
18 top: 23.333333rem; 21 top: 27.2rem;
19 left: 2.833333rem; 22 left: 2.833333rem;
20 cursor: pointer; 23 cursor: pointer;
21 } 24 }
22 25
26 img {
27 width: 100%;
28 }
29
23 .btn { 30 .btn {
24 background: #FF5700; 31 background: #FF5700;
25 border: 0; 32 border: 0;
...@@ -135,5 +142,5 @@ ...@@ -135,5 +142,5 @@
135 } 142 }
136 143
137 .bottom-space { 144 .bottom-space {
138 padding-bottom: 5rem; 145 padding-bottom: $marginMedium;
139 } 146 }
......
1 @import '@/styles/_support'; 1 @import '@/styles/_support';
2 2
3 .content { 3 .content {
4 // font-family: MicrosoftYaHei;
5 color: #4c4948;
6 padding-bottom: 8.5rem; 4 padding-bottom: 8.5rem;
7 } 5 }
8 6
...@@ -11,7 +9,7 @@ ...@@ -11,7 +9,7 @@
11 } 9 }
12 10
13 .top-space { 11 .top-space {
14 height: 5rem; 12 height: 3rem;
15 } 13 }
16 14
17 .tit { 15 .tit {
...@@ -22,8 +20,8 @@ ...@@ -22,8 +20,8 @@
22 } 20 }
23 21
24 .desc { 22 .desc {
25 max-width: 64rem; 23 max-width: $articleWidth;
26 margin-top: 4.25rem; 24 margin-top: 3rem;
27 line-height: 2; 25 line-height: 2;
28 letter-spacing: 1.2px; 26 letter-spacing: 1.2px;
29 } 27 }
......
1 @import '@/styles/_support'; 1 @import '@/styles/_support';
2 2
3 .content { 3 .content {
4 // font-family: MicrosoftYaHei;
5 color: #4c4948;
6 padding-bottom: 8.5rem; 4 padding-bottom: 8.5rem;
7 } 5 }
8 6
...@@ -11,19 +9,19 @@ ...@@ -11,19 +9,19 @@
11 } 9 }
12 10
13 .top-space { 11 .top-space {
14 height: 5rem; 12 height: 3rem;
15 } 13 }
16 14
17 .tit { 15 .tit {
18 text-align: center; 16 text-align: center;
19 font-size: 18px; 17 font-size: $fontSizeTitle;
20 font-weight: bold; 18 font-weight: bold;
21 letter-spacing: 1.8px; 19 letter-spacing: 1.8px;
22 } 20 }
23 21
24 .desc { 22 .desc {
25 max-width: 64rem; 23 max-width: $articleWidth;
26 margin-top: 4.25rem; 24 margin-top: 3rem;
27 line-height: 2; 25 line-height: 2;
28 letter-spacing: 1.2px; 26 letter-spacing: 1.2px;
29 } 27 }
......
...@@ -19,9 +19,13 @@ ...@@ -19,9 +19,13 @@
19 .ebg { 19 .ebg {
20 position: absolute; 20 position: absolute;
21 bottom: 0; 21 bottom: 0;
22 left: 50%; 22 width: 100%;
23 margin-left: -960px; 23 overflow: hidden;
24 width: 1920px; 24
25 img {
26 width: 1920px;
27 margin-left: 360px;
28 }
25 } 29 }
26 30
27 .step { 31 .step {
...@@ -174,13 +178,6 @@ ...@@ -174,13 +178,6 @@
174 178
175 // input和下拉 179 // input和下拉
176 .ipt { 180 .ipt {
177 @extend .bb;
178 width: 100%;
179 height: 4.5rem;
180 border-radius: 4.5rem;
181 border: solid 1px #dcdddd;
182 background-color: #ffffff;
183 padding: 0 2rem;
184 flex: 1; 181 flex: 1;
185 letter-spacing: .1rem; 182 letter-spacing: .1rem;
186 } 183 }
......
1 @import '@/styles/_support'; 1 @import '@/styles/_support';
2 2
3 .content { 3 .content {
4 // font-family: MicrosoftYaHei;
5 color: #4c4948;
6 padding-bottom: 8.5rem; 4 padding-bottom: 8.5rem;
7 } 5 }
8 6
...@@ -11,19 +9,19 @@ ...@@ -11,19 +9,19 @@
11 } 9 }
12 10
13 .top-space { 11 .top-space {
14 height: 5rem; 12 height: 3rem;
15 } 13 }
16 14
17 .tit { 15 .tit {
18 text-align: center; 16 text-align: center;
19 font-size: 18px; 17 font-size: $fontSizeTitle;
20 font-weight: bold; 18 font-weight: bold;
21 letter-spacing: 1.8px; 19 letter-spacing: 1.8px;
22 } 20 }
23 21
24 .desc { 22 .desc {
25 max-width: 64rem; 23 max-width: $articleWidth;
26 margin-top: 4.25rem; 24 margin-top: 3rem;
27 line-height: 2; 25 line-height: 2;
28 letter-spacing: 1.2px; 26 letter-spacing: 1.2px;
29 } 27 }
......
...@@ -6,19 +6,20 @@ ...@@ -6,19 +6,20 @@
6 * 6 *
7 */ 7 */
8 8
9 $contentWidth:1200px;
9 10
10 $borderRadiusSmall:5px; 11 $borderRadiusSmall:5px;
11 $borderRadius:8px; 12 $borderRadius:8px;
12 13
13 // Margin 14 // Margin
14 $marginSmall: 10px; // 小间距 15 $marginSmallHalf: 5px; // 小间距的一半
16 $marginSmall: 10px; // 小间距
15 $marginMedium: 28px; // 间距 17 $marginMedium: 28px; // 间距
16 // $marginLarge: 28px; 18 // $marginLarge: 28px;
17 19
18 // Padding 20 // Padding
19 $paddingSmall: 10px; 21 $paddingSmall: 10px;
20 $paddingMedium: 28px; 22 $paddingMedium: 28px;
21 // $paddingLarge: 28px;
22 23
23 // Font 24 // Font
24 $fontSizeTitle:16px; 25 $fontSizeTitle:16px;
...@@ -33,8 +34,10 @@ $cGray:#bfbfbf; ...@@ -33,8 +34,10 @@ $cGray:#bfbfbf;
33 $cDark:#dcdcdc; 34 $cDark:#dcdcdc;
34 $cLightBlack:#333333; 35 $cLightBlack:#333333;
35 36
37 // 文章宽度
38 $articleWidth:1041px;
36 39
37 // 移动端 40 // 移动端
38 $marginSmall-M: 10px; // 小间距 41 $marginSmall-M: 10px; // 小间距
39 $marginMedium-M: 20px; // 间距 42 $marginMedium-M: 20px; // 间距
40 // $marginLarge: 28px; 43 // $marginLarge: 28px;
......
...@@ -45,6 +45,7 @@ module.exports = { ...@@ -45,6 +45,7 @@ module.exports = {
45 chainWebpack: (config) => { 45 chainWebpack: (config) => {
46 config.resolve.alias 46 config.resolve.alias
47 .set('@', resolve('src')) 47 .set('@', resolve('src'))
48 .set('@public', resolve('public'))
48 .set('@assets', resolve('src/assets')) 49 .set('@assets', resolve('src/assets'))
49 .set('@components', resolve('src/components')) 50 .set('@components', resolve('src/components'))
50 .set('@pages', resolve('src/pages')) 51 .set('@pages', resolve('src/pages'))
......