Skip to content

dev / pingan-life-index-pro

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

默认提交

1 parent 3e4494f5
Inline Side-by-side
Showing 14 changed files with 118 additions and 70 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
...@@ -6,7 +6,9 @@ import { ...@@ -6,7 +6,9 @@ import {
6 } from '@/api/fetch-api.js' 6 } from '@/api/fetch-api.js'
7 7
8 import Vue from 'vue'; 8 import Vue from 'vue';
9 import { Loading } from 'vant'; 9 import {
10 Loading
11 } from 'vant';
10 Vue.use(Loading); 12 Vue.use(Loading);
11 13
12 export default { 14 export default {
...@@ -15,7 +17,7 @@ export default { ...@@ -15,7 +17,7 @@ export default {
15 // 是否显示组件 17 // 是否显示组件
16 options: { 18 options: {
17 type: Object, 19 type: Object,
18 default() { 20 default () {
19 return { 21 return {
20 // 名称 22 // 名称
21 name: "", 23 name: "",
...@@ -39,10 +41,10 @@ export default { ...@@ -39,10 +41,10 @@ export default {
39 return { 41 return {
40 uploadFiles: 0, 42 uploadFiles: 0,
41 images: [], 43 images: [],
44 tipsVisible: false,
42 } 45 }
43 }, 46 },
44 components: { 47 components: {},
45 },
46 computed: { 48 computed: {
47 uploading() { 49 uploading() {
48 let len = this.images.length; 50 let len = this.images.length;
...@@ -72,7 +74,10 @@ export default { ...@@ -72,7 +74,10 @@ export default {
72 if (this.uploading) { 74 if (this.uploading) {
73 return; 75 return;
74 } 76 }
75 this.$emit("beforeUpload", { type: this.options.imageTypeID }); 77 this.$emit("beforeUpload", {
78 type: this.options.imageTypeID
79 });
80 console.log("options:", this.options);
76 let _this = this; 81 let _this = this;
77 let input = document.createElement("input"); 82 let input = document.createElement("input");
78 input.setAttribute("type", "file"); 83 input.setAttribute("type", "file");
...@@ -120,7 +125,10 @@ export default { ...@@ -120,7 +125,10 @@ export default {
120 file: item.file, 125 file: item.file,
121 key: item.key 126 key: item.key
122 } 127 }
123 formdata({ url: api.uploadClarmsImage, data: param }).then(res => { 128 formdata({
129 url: api.uploadClarmsImage,
130 data: param
131 }).then(res => {
124 if (res && res.content && res.content.id) { 132 if (res && res.content && res.content.id) {
125 item.fileName = res.content.fileName; 133 item.fileName = res.content.fileName;
126 item.cacheKey = res.content.id; 134 item.cacheKey = res.content.id;
...@@ -210,6 +218,12 @@ export default { ...@@ -210,6 +218,12 @@ export default {
210 list: list 218 list: list
211 }; 219 };
212 this.$emit("success", result); 220 this.$emit("success", result);
221 },
222 onShowTipsOverHandler(event) {
223 this.tipsVisible = true;
224 },
225 onShowTipsOutHandler(event) {
226 this.tipsVisible = false;
213 } 227 }
214 }, 228 },
215 watch: { 229 watch: {
...@@ -218,5 +232,5 @@ export default { ...@@ -218,5 +232,5 @@ export default {
218 mounted() { 232 mounted() {
219 this.initData(); 233 this.initData();
220 }, 234 },
221 created() { } 235 created() {}
222 } 236 }
......
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;
7 border-radius: .416667rem; 8 border-radius: .416667rem;
8 background-image: linear-gradient(to right , #ffb31d, #f15907) ; 9 background-image: linear-gradient(to right, #ffb31d, #f15907);
9 10
10 .clarms-box { 11 .clarms-box {
11 width:100%; 12 position: relative;
12 height:100%; 13 width: 100%;
14 height: 100%;
13 border-radius: .416667rem; 15 border-radius: .416667rem;
14 background:#fff; 16 background: #fff;
15 padding: 1.666667rem 2.5rem 0 2.5rem; 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 }
16 38
17 .clarms-header { 39 .clarms-header {
18 display: flex; 40 display: flex;
19 align-items: center; 41 align-items: center;
20 margin-bottom: 1.666667rem; 42 padding-bottom: 1.666667rem;
21 43
22 .clarms-header-2 { 44 .clarms-header-2 {
45 position: relative;
23 flex-grow: 1; 46 flex-grow: 1;
24 display: flex; 47 display: flex;
25 align-items: center; 48 align-items: center;
...@@ -31,7 +54,7 @@ ...@@ -31,7 +54,7 @@
31 } 54 }
32 55
33 .clarms-title-container { 56 .clarms-title-container {
34 margin-left: 2.5rem ; 57 margin-left: 2.5rem;
35 flex-grow: 1; 58 flex-grow: 1;
36 width: 100%; 59 width: 100%;
37 60
...@@ -40,7 +63,7 @@ ...@@ -40,7 +63,7 @@
40 } 63 }
41 64
42 .clarms-t1 { 65 .clarms-t1 {
43 font-size: 1.5rem ; 66 font-size: 1.5rem;
44 color: #f15907; 67 color: #f15907;
45 letter-spacing: .166667rem; 68 letter-spacing: .166667rem;
46 } 69 }
...@@ -53,7 +76,7 @@ ...@@ -53,7 +76,7 @@
53 76
54 hr { 77 hr {
55 margin: 0 .833333rem 1.666667rem .833333rem; 78 margin: 0 .833333rem 1.666667rem .833333rem;
56 border-top: 1px solid #dddede ; 79 border-top: 1px solid #dddede;
57 } 80 }
58 81
59 .clarms-btn { 82 .clarms-btn {
...@@ -65,7 +88,7 @@ ...@@ -65,7 +88,7 @@
65 text-align: center; 88 text-align: center;
66 line-height: 3rem; 89 line-height: 3rem;
67 color: white; 90 color: white;
68 letter-spacing: .166667rem ; 91 letter-spacing: .166667rem;
69 font-size: 1.166667rem; 92 font-size: 1.166667rem;
70 cursor: pointer; 93 cursor: pointer;
71 } 94 }
...@@ -109,8 +132,8 @@ ...@@ -109,8 +132,8 @@
109 background-color: rgba($color: #000000, $alpha: .1); 132 background-color: rgba($color: #000000, $alpha: .1);
110 133
111 img { 134 img {
112 width: 2.5rem ; 135 width: 2.5rem;
113 height: 2.5rem ; 136 height: 2.5rem;
114 } 137 }
115 } 138 }
116 139
...@@ -122,7 +145,7 @@ ...@@ -122,7 +145,7 @@
122 } 145 }
123 146
124 .clarms-upload-tips { 147 .clarms-upload-tips {
125 font-size: 1rem ; 148 font-size: 1rem;
126 color: #58595b; 149 color: #58595b;
127 text-align: center; 150 text-align: center;
128 } 151 }
...@@ -143,7 +166,7 @@ ...@@ -143,7 +166,7 @@
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 } 171 }
149 172
...@@ -151,10 +174,12 @@ ...@@ -151,10 +174,12 @@
151 align-self: flex-end; 174 align-self: flex-end;
152 margin-top: .833333rem; 175 margin-top: .833333rem;
153 } 176 }
177
154 .clarms-icon { 178 .clarms-icon {
155 width: 4.166667rem; 179 width: 4.166667rem;
156 } 180 }
157 } 181 }
182
158 .clarms-title-container { 183 .clarms-title-container {
159 margin-top: .833333rem; 184 margin-top: .833333rem;
160 margin-left: .833333rem; 185 margin-left: .833333rem;
...@@ -164,23 +189,23 @@ ...@@ -164,23 +189,23 @@
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{ 208 .clarms-container .clarms-box .clarms-title-container .clarms-t2 {
184 font-size: 1rem; 209 font-size: 1rem;
185 } 210 }
186 } 211 }
......
...@@ -2,9 +2,14 @@ ...@@ -2,9 +2,14 @@
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-tips" v-if="tipsVisible">
6 <div class="cont">{{options.toast}}</div>
7 </div>
5 <div class="clarms-header"> 8 <div class="clarms-header">
6 <div class="clarms-header-2"> 9 <div class="clarms-header-2">
10 <div @mouseover="onShowTipsOverHandler($event)" @mouseout="onShowTipsOutHandler($event)">
7 <img class="clarms-icon" :src='icon'> 11 <img class="clarms-icon" :src='icon'>
12 </div>
8 <div class="clarms-title-container"> 13 <div class="clarms-title-container">
9 <div class="clarms-t1" :class="{clarmsActivty:images && images.length > 0}">{{options.name}}</div> 14 <div class="clarms-t1" :class="{clarmsActivty:images && images.length > 0}">{{options.name}}</div>
10 <div class="clarms-t2">{{$t('clarms.step2.uploadFile')}}{{uploadFiles}}</div> 15 <div class="clarms-t2">{{$t('clarms.step2.uploadFile')}}{{uploadFiles}}</div>
......
...@@ -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>
......