Skip to content

dev / pingan-life-index-pro

Go to a project
Toggle navigation
Toggle navigation pinning
bc0cf6aa by simon
Options

默认提交

1 parent 3e4494f5
Expand all
Inline Side-by-side
Showing 14 changed files with 270 additions and 236 deletions

566 KB | W: | H:

316 KB | W: | H:

  • 2-up
  • Swipe
  • Onion skin

5.51 KB | W: | H:

4.04 KB | W: | H:

  • 2-up
  • Swipe
  • Onion skin

4.63 KB | W: | H:

3.38 KB | W: | H:

  • 2-up
  • Swipe
  • Onion skin

6.64 KB | W: | H:

5.71 KB | W: | H:

  • 2-up
  • Swipe
  • Onion skin

6.62 KB | W: | H:

5.05 KB | W: | H:

  • 2-up
  • Swipe
  • Onion skin

2.34 KB | W: | H:

2.03 KB | W: | H:

  • 2-up
  • Swipe
  • Onion skin

8.52 KB | W: | H:

6.04 KB | W: | H:

  • 2-up
  • Swipe
  • Onion skin

511 Bytes | W: | H:

365 Bytes | W: | H:

  • 2-up
  • Swipe
  • Onion skin
1 @import '@/styles/_support'; 1 @import '@/styles/_support';
2 2
3 $borderSize: 8px;
3 4
4 .clarms-container { 5 .clarms-container {
5 box-sizing:border-box; 6 box-sizing: border-box;
6 padding:.166667rem; 7 padding: .166667rem;
8 border-radius: .416667rem;
9 background-image: linear-gradient(to right, #ffb31d, #f15907);
10
11 .clarms-box {
12 position: relative;
13 width: 100%;
14 height: 100%;
7 border-radius: .416667rem; 15 border-radius: .416667rem;
8 background-image: linear-gradient(to right , #ffb31d, #f15907) ; 16 background: #fff;
17 padding: 1.666667rem 2.5rem 0 2.5rem;
18 // padding: 1.666667rem 2.5rem;
19
20 .clarms-tips {
21 top: 20px;
22 left: 80px;
23 position: absolute;
24 z-index: 11;
25 border-radius: 2px;
26 padding: 2px;
27 background-image: linear-gradient(to right, #ffb31d, #f15907);
28
29 .cont {
30 @extend .bb;
31 padding: 4px;
32 width: 100%;
33 height: 100%;
34 background-color: #ffffff;
35 border-radius: 2px;
36 }
37 }
38
39 .clarms-header {
40 display: flex;
41 align-items: center;
42 padding-bottom: 1.666667rem;
43
44 .clarms-header-2 {
45 position: relative;
46 flex-grow: 1;
47 display: flex;
48 align-items: center;
49 }
50
51 .clarms-icon {
52 width: 4.166667rem;
53 }
54 }
55
56 .clarms-title-container {
57 margin-left: 2.5rem;
58 flex-grow: 1;
59 width: 100%;
60
61 .clarmsActivty {
62 color: #ffb31d !important;
63 }
64
65 .clarms-t1 {
66 font-size: 1.5rem;
67 color: #f15907;
68 letter-spacing: .166667rem;
69 }
70
71 .clarms-t2 {
72 color: #58595b;
73 letter-spacing: .166667rem;
74 }
75 }
9 76
10 .clarms-box { 77 hr {
11 width:100%; 78 margin: 0 .833333rem 1.666667rem .833333rem;
12 height:100%; 79 border-top: 1px solid #dddede;
13 border-radius: .416667rem; 80 }
14 background:#fff; 81
15 padding: 1.666667rem 2.5rem 0 2.5rem; 82 .clarms-btn {
83 background: url(~@/assets/images/clarms/button.png);
84 background-size: 100% 100%;
85 width: 10.583333rem !important;
86 height: 3rem;
87
88 text-align: center;
89 line-height: 3rem;
90 color: white;
91 letter-spacing: .166667rem;
92 font-size: 1.166667rem;
93 cursor: pointer;
94 }
16 95
17 .clarms-header { 96 .clarms-img-group {
97 display: flex;
98 flex-wrap: wrap;
99
100 .clarms-img-item-plugin {
101 cursor: pointer;
102 margin-right: .833333rem;
103 margin-bottom: .833333rem;
104 width: 5.833333rem;
105 height: 5.833333rem;
106
107 .clarms-img-item {
108 position: relative;
109 width: 5.833333rem;
110 height: 5.833333rem;
111
112 .clarms-img-cont {
113 width: 5.833333rem;
114 height: 5.833333rem;
115 position: absolute;
116 left: 0;
117 top: 0;
118 }
119
120 .clarms-img-mask {
121 width: 5.833333rem;
122 height: 5.833333rem;
123 text-align: center;
124 line-height: 5.833333rem;
125 position: absolute;
126 left: 0;
127 top: 0;
18 display: flex; 128 display: flex;
129 justify-content: center;
19 align-items: center; 130 align-items: center;
20 margin-bottom: 1.666667rem;
21
22 .clarms-header-2 {
23 flex-grow: 1;
24 display: flex;
25 align-items: center;
26 }
27 131
28 .clarms-icon { 132 background-color: rgba($color: #000000, $alpha: .1);
29 width: 4.166667rem;
30 }
31 }
32
33 .clarms-title-container {
34 margin-left: 2.5rem ;
35 flex-grow: 1;
36 width: 100%;
37
38 .clarmsActivty {
39 color: #ffb31d !important;
40 }
41
42 .clarms-t1 {
43 font-size: 1.5rem ;
44 color: #f15907;
45 letter-spacing: .166667rem;
46 }
47 133
48 .clarms-t2 { 134 img {
49 color: #58595b; 135 width: 2.5rem;
50 letter-spacing: .166667rem; 136 height: 2.5rem;
51 } 137 }
52 } 138 }
53 139
54 hr { 140 .mask-bg-2 {
55 margin: 0 .833333rem 1.666667rem .833333rem; 141 background-color: rgba($color: #000000, $alpha: .5) !important;
56 border-top: 1px solid #dddede ; 142 color: white !important;
143 font-size: 1rem;
144 }
57 } 145 }
58 146
59 .clarms-btn { 147 .clarms-upload-tips {
60 background: url(~@/assets/images/clarms/button.png); 148 font-size: 1rem;
61 background-size: 100% 100%; 149 color: #58595b;
62 width: 10.583333rem !important; 150 text-align: center;
63 height: 3rem;
64
65 text-align: center;
66 line-height: 3rem;
67 color: white;
68 letter-spacing: .166667rem ;
69 font-size: 1.166667rem;
70 cursor: pointer;
71 } 151 }
72 152 }
73 .clarms-img-group {
74 display: flex;
75 flex-wrap: wrap;
76
77 .clarms-img-item-plugin {
78 cursor: pointer;
79 margin-right: .833333rem;
80 margin-bottom: .833333rem;
81 width: 5.833333rem;
82 height: 5.833333rem;
83
84 .clarms-img-item {
85 position: relative;
86 width: 5.833333rem;
87 height: 5.833333rem;
88
89 .clarms-img-cont {
90 width: 5.833333rem;
91 height: 5.833333rem;
92 position: absolute;
93 left: 0;
94 top: 0;
95 }
96
97 .clarms-img-mask {
98 width: 5.833333rem;
99 height: 5.833333rem;
100 text-align: center;
101 line-height: 5.833333rem;
102 position: absolute;
103 left: 0;
104 top: 0;
105 display: flex;
106 justify-content: center;
107 align-items: center;
108
109 background-color: rgba($color: #000000, $alpha: .1);
110
111 img {
112 width: 2.5rem ;
113 height: 2.5rem ;
114 }
115 }
116
117 .mask-bg-2 {
118 background-color: rgba($color: #000000, $alpha: .5) !important;
119 color: white !important;
120 font-size: 1rem;
121 }
122 }
123
124 .clarms-upload-tips {
125 font-size: 1rem ;
126 color: #58595b;
127 text-align: center;
128 }
129 }
130 }
131 }
132
133 .clarms-empty-line {
134 height: .833333rem;
135 } 153 }
154 }
155
156 .clarms-empty-line {
157 height: .833333rem;
158 }
136 } 159 }
137 160
138 161
139 @media (max-width: 800px) { 162 @media (max-width: 800px) {
140 163
141 .clarms-container { 164 .clarms-container {
142 .clarms-box { 165 .clarms-box {
143 .clarms-header { 166 .clarms-header {
144 flex-direction: column; 167 flex-direction: column;
145 168
146 .clarms-header-2{ 169 .clarms-header-2 {
147 align-self: flex-start; 170 align-self: flex-start;
148 }
149
150 .clarms-btn {
151 align-self: flex-end;
152 margin-top: .833333rem;
153 }
154 .clarms-icon {
155 width: 4.166667rem;
156 }
157 }
158 .clarms-title-container {
159 margin-top: .833333rem;
160 margin-left: .833333rem;
161 }
162 } 171 }
172
173 .clarms-btn {
174 align-self: flex-end;
175 margin-top: .833333rem;
176 }
177
178 .clarms-icon {
179 width: 4.166667rem;
180 }
181 }
182
183 .clarms-title-container {
184 margin-top: .833333rem;
185 margin-left: .833333rem;
186 }
163 } 187 }
188 }
164 } 189 }
165 190
166 @media (max-width: 600px) { 191 @media (max-width: 600px) {
167 .clarms-container .clarms-box .clarms-title-container .clarms-t1{ 192 .clarms-container .clarms-box .clarms-title-container .clarms-t1 {
168 font-size: 1.333333rem ; 193 font-size: 1.333333rem;
169 } 194 }
170 195
171 .clarms-container .clarms-box .clarms-title-container .clarms-t2{ 196 .clarms-container .clarms-box .clarms-title-container .clarms-t2 {
172 font-size: 1.333333rem ; 197 font-size: 1.333333rem;
173 } 198 }
174 } 199 }
175 200
176 201
177 202
178 @media (max-width: 500px) { 203 @media (max-width: 500px) {
179 .clarms-container .clarms-box .clarms-title-container .clarms-t1{ 204 .clarms-container .clarms-box .clarms-title-container .clarms-t1 {
180 font-size: 1rem; 205 font-size: 1rem;
181 } 206 }
182 207
183 .clarms-container .clarms-box .clarms-title-container .clarms-t2{
184 font-size: 1rem;
185 }
186 }
...\ No newline at end of file ...\ No newline at end of file
208 .clarms-container .clarms-box .clarms-title-container .clarms-t2 {
209 font-size: 1rem;
210 }
211 }
......
1 <template> 1 <template>
2 <div> 2 <div>
3 <div class="clarms-container"> 3 <div class="clarms-container">
4 <div class="clarms-box"> 4 <div class="clarms-box">
5 <div class="clarms-header"> 5 <div class="clarms-tips" v-if="tipsVisible">
6 <div class="clarms-header-2"> 6 <div class="cont">{{options.toast}}</div>
7 <img class="clarms-icon" :src='icon'> 7 </div>
8 <div class="clarms-title-container"> 8 <div class="clarms-header">
9 <div class="clarms-t1" :class="{clarmsActivty:images && images.length > 0}">{{options.name}}</div> 9 <div class="clarms-header-2">
10 <div class="clarms-t2">{{$t('clarms.step2.uploadFile')}}{{uploadFiles}}</div> 10 <div @mouseover="onShowTipsOverHandler($event)" @mouseout="onShowTipsOutHandler($event)">
11 </div> 11 <img class="clarms-icon" :src='icon'>
12 </div> 12 </div>
13 <div class="clarms-btn" :class="{disabled:uploading}" @click="selectMutilFile"> 13 <div class="clarms-title-container">
14 {{$t('clarms.step2.btnUpload')}} 14 <div class="clarms-t1" :class="{clarmsActivty:images && images.length > 0}">{{options.name}}</div>
15 </div> 15 <div class="clarms-t2">{{$t('clarms.step2.uploadFile')}}{{uploadFiles}}</div>
16 </div> 16 </div>
17 <div v-if="images && images.length > 0"> 17 </div>
18 <hr> 18 <div class="clarms-btn" :class="{disabled:uploading}" @click="selectMutilFile">
19 <div class="clarms-img-group"> 19 {{$t('clarms.step2.btnUpload')}}
20 <div class="clarms-img-item-plugin" @mouseover="onOverHandler($event,item,index)" v-for="(item,index) in images" :key="index"> 20 </div>
21 <div class="clarms-img-item"> 21 </div>
22 <img class="clarms-img-cont" :src="item.data"> 22 <div v-if="images && images.length > 0">
23 <div class="clarms-img-mask" v-if="item.showMask && !item.intervial && !item.err"> 23 <hr>
24 <img src="@/assets/images/clarms/close.png"> 24 <div class="clarms-img-group">
25 </div> 25 <div class="clarms-img-item-plugin" @mouseover="onOverHandler($event,item,index)" v-for="(item,index) in images" :key="index">
26 <div class="clarms-img-mask" v-if="item.showMask && !item.intervial && !item.err" @mouseout="onOutHandler($event,item,index)" @click="removeItem(index)"> 26 <div class="clarms-img-item">
27 </div> 27 <img class="clarms-img-cont" :src="item.data">
28 <div class="clarms-img-mask mask-bg-2" v-if="item.intervial"> 28 <div class="clarms-img-mask" v-if="item.showMask && !item.intervial && !item.err">
29 Uploading{{item.tips}} 29 <img src="@/assets/images/clarms/close.png">
30 </div> 30 </div>
31 <div class="clarms-img-mask mask-bg-2" v-if="item.err" @click="removeItem(index)"> 31 <div class="clarms-img-mask" v-if="item.showMask && !item.intervial && !item.err" @mouseout="onOutHandler($event,item,index)" @click="removeItem(index)">
32 Uploading{{item.err}} 32 </div>
33 </div> 33 <div class="clarms-img-mask mask-bg-2" v-if="item.intervial">
34 </div> 34 Uploading{{item.tips}}
35 </div> 35 </div>
36 </div> 36 <div class="clarms-img-mask mask-bg-2" v-if="item.err" @click="removeItem(index)">
37 <div class="clarms-empty-line"></div> 37 Uploading{{item.err}}
38 </div> 38 </div>
39 </div> 39 </div>
40 </div> 40 </div>
41 </div> 41 </div>
42 <div class="clarms-empty-line"></div>
43 </div>
44 </div>
45 </div>
46 </div>
42 </template> 47 </template>
43 48
44 49
45 <script src="./clarms-plugins-upload.js"></script> 50 <script src="./clarms-plugins-upload.js"></script>
46 <style lang="scss" scoped> 51 <style lang="scss" scoped>
47 @import "./clarms-plugins-upload.scss"; 52 @import "./clarms-plugins-upload.scss";
48 </style>
...\ No newline at end of file ...\ No newline at end of file
53 </style>
......
...@@ -117,8 +117,10 @@ export default { ...@@ -117,8 +117,10 @@ export default {
117 // let videoUrl = sessionStorage.getItem("_video_url"); 117 // let videoUrl = sessionStorage.getItem("_video_url");
118 // let posterUrl = sessionStorage.getItem("_poster_url"); 118 // let posterUrl = sessionStorage.getItem("_poster_url");
119 let playerOptions = { 119 let playerOptions = {
120 width: 800, 120 // width: 800,
121 height: 450, 121 // height: 450,
122 width: 1200,
123 height: 675,
122 // aspectRatio: '16:9', // 将播放器置于流畅模式，并在计算播放器的动态大小时使用该值。值应该代表一个比例 - 用冒号分隔的两个数字（例如"16:9"或"4:3"） 124 // aspectRatio: '16:9', // 将播放器置于流畅模式，并在计算播放器的动态大小时使用该值。值应该代表一个比例 - 用冒号分隔的两个数字（例如"16:9"或"4:3"）
123 autoplay: false, //如果true,浏览器准备好时开始回放。 125 autoplay: false, //如果true,浏览器准备好时开始回放。
124 muted: true, // 默认情况下将会消除任何音频。 126 muted: true, // 默认情况下将会消除任何音频。
...@@ -154,11 +156,11 @@ export default { ...@@ -154,11 +156,11 @@ export default {
154 }, { 156 }, {
155 title: "不設終身保障限額" 157 title: "不設終身保障限額"
156 }, { 158 }, {
157 title: "一家投保<br>盡享稅務扣減" 159 title: "一家投保 盡享稅務扣減"
158 }, { 160 }, {
159 title: "承保投保前未知的已有疾病" 161 title: "承保投保前未知的已有疾病"
160 }, { 162 }, {
161 title: "出院免找數<br>讓您安心無憂" 163 title: "出院免找數 讓您安心無憂"
162 }, { 164 }, {
163 title: "無索償折扣" 165 title: "無索償折扣"
164 }]; 166 }];
......
...@@ -16,7 +16,7 @@ ...@@ -16,7 +16,7 @@
16 // banner 轮播 16 // banner 轮播
17 .banner-contaner { 17 .banner-contaner {
18 width: 100%; 18 width: 100%;
19 height: 791px; 19 height: 502px;
20 margin: 0 auto; 20 margin: 0 auto;
21 position: relative; 21 position: relative;
22 z-index: 1; 22 z-index: 1;
...@@ -50,20 +50,20 @@ ...@@ -50,20 +50,20 @@
50 // top: 272px; 50 // top: 272px;
51 // left: 1228px; 51 // left: 1228px;
52 // top: 310px; 52 // top: 310px;
53 top: 562px; 53 top: 309px;
54 left: 379px; 54 left: 466px;
55 display: flex; 55 display: flex;
56 56
57 .banner-btn { 57 .banner-btn {
58 @extend .pointer; 58 @extend .pointer;
59 @extend .bb; 59 @extend .bb;
60 @include btc4(288px, 60px, $fontSizeTitle); 60 @include btc4(300px, 50px, $fontSizeTitle);
61 font-size: 30px; 61 font-size: 22px;
62 width: auto; 62 width: auto;
63 padding: 0 24px; 63 padding: 0 24px;
64 min-width: 288px; 64 min-width: 288px;
65 margin-left: 12px; 65 margin-left: 12px;
66 background: url("~@assets/images/vhis/vhis-btn2.png"); 66 background: url("~@assets/images/vhis/vhis-btn.png");
67 letter-spacing: 1.5px; 67 letter-spacing: 1.5px;
68 } 68 }
69 } 69 }
...@@ -119,7 +119,7 @@ ...@@ -119,7 +119,7 @@
119 position: relative; 119 position: relative;
120 width: 100%; 120 width: 100%;
121 height: 100%; 121 height: 100%;
122 background-color: #ffffff; 122 background-color: rgba($color: #ffffff, $alpha: 0.8);
123 border-radius: $borderSize; 123 border-radius: $borderSize;
124 124
125 .tit { 125 .tit {
...@@ -152,13 +152,11 @@ ...@@ -152,13 +152,11 @@
152 // 标题 152 // 标题
153 .title { 153 .title {
154 @extend .bb; 154 @extend .bb;
155 padding: 62px 0; 155 padding: 42px 0;
156 background-color: #fff1ed; 156 background-color: #fff1ed;
157 text-align: center; 157 text-align: center;
158 font-size: $fontSize; 158 font-size: $fontSize;
159 159
160
161
162 .tt { 160 .tt {
163 // display: flex; 161 // display: flex;
164 // justify-content: center; 162 // justify-content: center;
...@@ -174,24 +172,25 @@ ...@@ -174,24 +172,25 @@
174 .easy1 { 172 .easy1 {
175 margin-right: 8px; 173 margin-right: 8px;
176 margin-top: -4px; 174 margin-top: -4px;
175 height: 36px;
177 } 176 }
178 177
179
180 .easy2 { 178 .easy2 {
181 margin-right: 10px; 179 margin-right: 10px;
182 margin-top: -4px; 180 margin-top: -4px;
181 height: 26px;
183 } 182 }
184 183
185 .t1 { 184 .t1 {
186 color: $cOrange2; 185 color: $cOrange2;
187 letter-spacing: 2px; 186 letter-spacing: 2px;
188 font-weight: bold; 187 font-weight: bold;
189 font-size: 45px; 188 font-size: 34px;
190 letter-spacing: 6px; 189 letter-spacing: 6px;
191 } 190 }
192 191
193 .t2 { 192 .t2 {
194 font-size: 34px; 193 font-size: 24px;
195 margin-top: 36px; 194 margin-top: 36px;
196 line-height: 1.39; 195 line-height: 1.39;
197 letter-spacing: 2px; 196 letter-spacing: 2px;
...@@ -206,12 +205,12 @@ ...@@ -206,12 +205,12 @@
206 .tit { 205 .tit {
207 color: $cOrange2; 206 color: $cOrange2;
208 letter-spacing: 2.5px; 207 letter-spacing: 2.5px;
209 font-size: 50px; 208 font-size: 36px;
210 font-weight: bold; 209 font-weight: bold;
211 } 210 }
212 211
213 .prod { 212 .prod {
214 margin: 48px auto 0; 213 margin: 24px auto 0;
215 color: $cOrange2; 214 color: $cOrange2;
216 display: flex; 215 display: flex;
217 justify-content: space-between; 216 justify-content: space-between;
...@@ -234,18 +233,18 @@ ...@@ -234,18 +233,18 @@
234 233
235 .icon-wrap { 234 .icon-wrap {
236 @extend .fcc; 235 @extend .fcc;
237 width: 210px; 236 width: 202px;
238 } 237 }
239 238
240 .detail { 239 .detail {
241 padding: 40px 40px 40px 0; 240 padding: 52px 40px 0 0;
242 flex: 1; 241 // flex: 1;
242 flex-grow: 1;
243 243
244 .t1 { 244 .t1 {
245 letter-spacing: 2px; 245 letter-spacing: 2px;
246 font-size: 38px; 246 font-size: 22px;
247 font-weight: bold; 247 font-weight: bold;
248
249 } 248 }
250 249
251 .desc { 250 .desc {
...@@ -259,7 +258,7 @@ ...@@ -259,7 +258,7 @@
259 258
260 .c1 { 259 .c1 {
261 letter-spacing: 1.2px; 260 letter-spacing: 1.2px;
262 font-size: 24px; 261 font-size: 18px;
263 } 262 }
264 } 263 }
265 } 264 }
...@@ -276,13 +275,14 @@ ...@@ -276,13 +275,14 @@
276 // 保障 275 // 保障
277 .guarantee { 276 .guarantee {
278 margin: 100px auto 0; 277 margin: 100px auto 0;
279 font-size: 26px; 278 font-size: 22px;
280 279
281 .tit { 280 .tit {
282 text-align: center; 281 text-align: center;
283 color: $cOrange2; 282 color: $cOrange2;
284 letter-spacing: 1.4px; 283 letter-spacing: 1.8px;
285 284 font-size: 36px;
285 font-weight: bold;
286 } 286 }
287 287
288 .table { 288 .table {
...@@ -302,19 +302,19 @@ ...@@ -302,19 +302,19 @@
302 .tt { 302 .tt {
303 @extend .bb; 303 @extend .bb;
304 width: 50%; 304 width: 50%;
305 padding: 26px 0; 305 padding: 20px 0;
306 letter-spacing: 1.12px; 306 letter-spacing: 1.12px;
307 color: #666666; 307 color: #666666;
308 } 308 }
309 309
310 .label { 310 .label {
311 background-color: #fef1ed; 311 background-color: #fef1ed;
312 padding-left: 76px; 312 padding-left: 100px;
313 border-right: solid 1px #e4e4e5; 313 border-right: solid 1px #e4e4e5;
314 } 314 }
315 315
316 .val { 316 .val {
317 padding-left: 76px; 317 padding-left: 100px;
318 } 318 }
319 } 319 }
320 } 320 }
...@@ -352,7 +352,7 @@ ...@@ -352,7 +352,7 @@
352 position: relative; 352 position: relative;
353 background-image: url('~@assets/images/vhis/vhis-tick.png'); 353 background-image: url('~@assets/images/vhis/vhis-tick.png');
354 background-repeat: no-repeat; 354 background-repeat: no-repeat;
355 background-position: 0 10px; 355 background-position: 0 5px;
356 padding-left: 40px; 356 padding-left: 40px;
357 margin: 24px 0; 357 margin: 24px 0;
358 358
...@@ -393,9 +393,9 @@ ...@@ -393,9 +393,9 @@
393 @extend .bb; 393 @extend .bb;
394 @extend .fcc; 394 @extend .fcc;
395 margin: 0 auto 24px; 395 margin: 0 auto 24px;
396 max-width: 740px; 396 max-width: 602px;
397 height: 82px; 397 height: 67px;
398 line-height: 82px; 398 line-height: 67px;
399 padding: 2px; 399 padding: 2px;
400 border-radius: 2px; 400 border-radius: 2px;
401 cursor: pointer; 401 cursor: pointer;
...@@ -405,28 +405,30 @@ ...@@ -405,28 +405,30 @@
405 @extend .bb; 405 @extend .bb;
406 display: flex; 406 display: flex;
407 align-items: center; 407 align-items: center;
408 padding-left: 220px; 408 padding-left: 178px;
409 409
410 width: 100%; 410 width: 100%;
411 height: 100%; 411 height: 100%;
412 background-color: #ffffff; 412 background-color: #ffffff;
413 font-size: 36px; 413 font-size: 22px;
414 font-weight: bold; 414 font-weight: bold;
415 border-radius: 2px; 415 border-radius: 2px;
416 416
417 .icon { 417 .icon {
418 margin-right: 24px; 418 height: 47px;
419 margin-right: 48px;
419 } 420 }
421
420 } 422 }
421 } 423 }
422 } 424 }
423 425
424 // 提交订单 426 // 提交订单
425 .submit-btn { 427 .submit-btn {
426 margin: 120px auto 100px; 428 margin: 64px auto 100px;
427 @extend .pointer; 429 @extend .pointer;
428 @extend .bb; 430 @extend .bb;
429 @include btc4(406px, 60px, 28px); 431 @include btc4(300px, 50px, 22px);
430 font-weight: bold; 432 font-weight: bold;
431 } 433 }
432 434
......
...@@ -7,8 +7,8 @@ ...@@ -7,8 +7,8 @@
7 <div class="banner banner-pc"> 7 <div class="banner banner-pc">
8 <swiper :options="swiperOption"> 8 <swiper :options="swiperOption">
9 <swiper-slide v-for="(item,index) in bannerList" :key="index"> 9 <swiper-slide v-for="(item,index) in bannerList" :key="index">
10 <img class="banner-img" :src="item.pcBannerUrl"> 10 <!-- <img class="banner-img" :src="item.pcBannerUrl"> -->
11 <!-- <img :src="require('@/assets/images/vhis/kv.png')"> --> 11 <img :src="require('@/assets/images/vhis/kv.png')">
12 <div class="btn-wrap"> 12 <div class="btn-wrap">
13 <div v-for="(btnItem, btnIndex) in item.btns" :key="btnIndex"> 13 <div v-for="(btnItem, btnIndex) in item.btns" :key="btnIndex">
14 <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> 14 <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>
......