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 494 additions and 446 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 api from '@/api/api' 1 import api from '@/api/api'
2 import { 2 import {
3 httpGet, 3 httpGet,
4 httpPost, 4 httpPost,
5 formdata 5 formdata
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 {
13 15
14 props: { 16 props: {
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: "",
22 // 图标编号 24 // 图标编号
23 icon: "", 25 icon: "",
24 // 主单证类型 26 // 主单证类型
25 imageMainTypeID: "", 27 imageMainTypeID: "",
26 // 副单证类型 28 // 副单证类型
27 imageTypeID: "", 29 imageTypeID: "",
28 // toast消息 30 // toast消息
29 toast: "", 31 toast: "",
30 }; 32 };
31 } 33 }
32 }, 34 },
33 icon: { 35 icon: {
34 type: String, 36 type: String,
35 default: "" 37 default: ""
36 } 38 }
37 }, 39 },
38 data() { 40 data() {
39 return { 41 return {
40 uploadFiles: 0, 42 uploadFiles: 0,
41 images: [], 43 images: [],
42 } 44 tipsVisible: false,
43 }, 45 }
44 components: { 46 },
45 }, 47 components: {},
46 computed: { 48 computed: {
47 uploading() { 49 uploading() {
48 let len = this.images.length; 50 let len = this.images.length;
49 if (len < 0) { 51 if (len < 0) {
50 return false; 52 return false;
51 } 53 }
52 for (let index = 0; index < len; index++) { 54 for (let index = 0; index < len; index++) {
53 let d = this.images[index] || null; 55 let d = this.images[index] || null;
54 if (!d) { 56 if (!d) {
55 continue; 57 continue;
56 } 58 }
57 if (d.intervial) { 59 if (d.intervial) {
58 return true; 60 return true;
59 } 61 }
60 } 62 }
61 return false; 63 return false;
62 }, 64 },
63 i18n() { 65 i18n() {
64 return this.$i18n.messages && this.$i18n.locale ? this.$i18n.messages[this.$i18n.locale] : {}; 66 return this.$i18n.messages && this.$i18n.locale ? this.$i18n.messages[this.$i18n.locale] : {};
65 }, 67 },
66 }, 68 },
67 methods: { 69 methods: {
68 initData() { 70 initData() {
69 71
70 }, 72 },
71 selectMutilFile() { 73 selectMutilFile() {
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", {
76 let _this = this; 78 type: this.options.imageTypeID
77 let input = document.createElement("input"); 79 });
78 input.setAttribute("type", "file"); 80 console.log("options:", this.options);
79 input.setAttribute("multiple", "multiple"); 81 let _this = this;
80 input.setAttribute("accept", "image/*"); 82 let input = document.createElement("input");
81 input.onchange = function (val) { 83 input.setAttribute("type", "file");
82 let position = _this.images.length; 84 input.setAttribute("multiple", "multiple");
83 for (let index = 0; index < input.files.length; index++) { 85 input.setAttribute("accept", "image/*");
84 setTimeout(function () { 86 input.onchange = function (val) {
85 _this.initFileUpload(input.files[index], position + index); 87 let position = _this.images.length;
86 }, index * 50); 88 for (let index = 0; index < input.files.length; index++) {
87 }; 89 setTimeout(function () {
88 }; 90 _this.initFileUpload(input.files[index], position + index);
89 input.click(); 91 }, index * 50);
90 }, 92 };
91 initFileUpload(file, index) { 93 };
92 let _this = this; 94 input.click();
93 var reader = new FileReader(); 95 },
94 reader.onload = function (e) { 96 initFileUpload(file, index) {
95 let d = { 97 let _this = this;
96 fileName: "", 98 var reader = new FileReader();
97 file: file, 99 reader.onload = function (e) {
98 data: reader.result, 100 let d = {
99 cacheKey: "", 101 fileName: "",
100 showMask: false, 102 file: file,
101 key: _this.randomAesKey(), 103 data: reader.result,
102 intervial: false, 104 cacheKey: "",
103 tips: "", 105 showMask: false,
104 err: "" 106 key: _this.randomAesKey(),
105 }; 107 intervial: false,
106 _this.$set(_this.images, index, d); 108 tips: "",
107 _this.handleFileUpload(d, index); 109 err: ""
108 } 110 };
109 reader.readAsDataURL(file); 111 _this.$set(_this.images, index, d);
110 }, 112 _this.handleFileUpload(d, index);
111 handleFileUpload(item, index) { 113 }
112 item.intervial = setInterval(function () { 114 reader.readAsDataURL(file);
113 item.tips = item.tips + "."; 115 },
114 if (item.tips.length > 3) { 116 handleFileUpload(item, index) {
115 item.tips = ""; 117 item.intervial = setInterval(function () {
116 } 118 item.tips = item.tips + ".";
117 }, 1000); 119 if (item.tips.length > 3) {
118 this.$set(this, "images", this.images); 120 item.tips = "";
119 let param = { 121 }
120 file: item.file, 122 }, 1000);
121 key: item.key 123 this.$set(this, "images", this.images);
122 } 124 let param = {
123 formdata({ url: api.uploadClarmsImage, data: param }).then(res => { 125 file: item.file,
124 if (res && res.content && res.content.id) { 126 key: item.key
125 item.fileName = res.content.fileName; 127 }
126 item.cacheKey = res.content.id; 128 formdata({
127 clearInterval(item.intervial); 129 url: api.uploadClarmsImage,
128 item.intervial = false; 130 data: param
129 this.$set(this, "images", this.images); 131 }).then(res => {
130 this.refreshUploadNumber(); 132 if (res && res.content && res.content.id) {
131 } else { 133 item.fileName = res.content.fileName;
132 clearInterval(item.intervial); 134 item.cacheKey = res.content.id;
133 item.intervial = false; 135 clearInterval(item.intervial);
134 item.err = "失败"; 136 item.intervial = false;
135 this.$set(this, "images", this.images); 137 this.$set(this, "images", this.images);
136 this.refreshUploadNumber(); 138 this.refreshUploadNumber();
137 } 139 } else {
138 }).catch(err => { 140 clearInterval(item.intervial);
139 clearInterval(item.intervial); 141 item.intervial = false;
140 item.intervial = false; 142 item.err = "失败";
141 item.err = "失败"; 143 this.$set(this, "images", this.images);
142 this.$set(this, "images", this.images); 144 this.refreshUploadNumber();
143 this.refreshUploadNumber(); 145 }
144 }); 146 }).catch(err => {
145 }, 147 clearInterval(item.intervial);
146 refreshUploadNumber() { 148 item.intervial = false;
147 let d = this.images.length; 149 item.err = "失败";
148 let number = 0; 150 this.$set(this, "images", this.images);
149 for (let index = 0; index < d; index++) { 151 this.refreshUploadNumber();
150 let v = this.images[index] || null; 152 });
151 if (v && v.cacheKey) { 153 },
152 number++; 154 refreshUploadNumber() {
153 } 155 let d = this.images.length;
154 } 156 let number = 0;
155 this.uploadFiles = number; 157 for (let index = 0; index < d; index++) {
156 this.emitResult(); 158 let v = this.images[index] || null;
157 }, 159 if (v && v.cacheKey) {
158 onOverHandler(event, item, index) { 160 number++;
159 item.showMask = true; 161 }
160 event.preventDefault(); 162 }
161 }, 163 this.uploadFiles = number;
162 onOutHandler(event, item, index) { 164 this.emitResult();
163 item.showMask = false; 165 },
164 event.preventDefault(); 166 onOverHandler(event, item, index) {
165 }, 167 item.showMask = true;
166 removeItem(index) { 168 event.preventDefault();
167 let images = JSON.parse(JSON.stringify(this.images)); 169 },
168 images.splice(index, 1); 170 onOutHandler(event, item, index) {
169 this.$set(this, "images", images); 171 item.showMask = false;
170 this.refreshUploadNumber(); 172 event.preventDefault();
171 }, 173 },
172 randomAesKey() { 174 removeItem(index) {
173 let chars = "0,1,2,3,4,5,6,7,8,9,a,b,c,d,e,f,g,h,i,j,k,l,m,n,o,p,q,r,s,t,u,v,w,x,y,z".split(","); 175 let images = JSON.parse(JSON.stringify(this.images));
174 let res = ""; 176 images.splice(index, 1);
175 for (let i = 0; i < 16; i++) { 177 this.$set(this, "images", images);
176 let id = Math.ceil(Math.random() * (chars.length - 1)); 178 this.refreshUploadNumber();
177 res += chars[id]; 179 },
178 } 180 randomAesKey() {
179 return res; 181 let chars = "0,1,2,3,4,5,6,7,8,9,a,b,c,d,e,f,g,h,i,j,k,l,m,n,o,p,q,r,s,t,u,v,w,x,y,z".split(",");
180 }, 182 let res = "";
181 emitResult() { 183 for (let i = 0; i < 16; i++) {
182 if (this.images.length == 0) { 184 let id = Math.ceil(Math.random() * (chars.length - 1));
183 this.$emit("success", []); 185 res += chars[id];
184 return; 186 }
185 } 187 return res;
186 if (this.uploading) { 188 },
187 return; 189 emitResult() {
188 } 190 if (this.images.length == 0) {
189 let list = []; 191 this.$emit("success", []);
190 let len = this.images.length; 192 return;
191 if (len < 0) { 193 }
192 return false; 194 if (this.uploading) {
193 } 195 return;
194 for (let index = 0; index < len; index++) { 196 }
195 let d = this.images[index] || null; 197 let list = [];
196 if (!d || !d.cacheKey) { 198 let len = this.images.length;
197 continue; 199 if (len < 0) {
198 } 200 return false;
199 // 结果 201 }
200 let res = { 202 for (let index = 0; index < len; index++) {
201 cloudStorageID: d.cacheKey, 203 let d = this.images[index] || null;
202 imageFileName: d.fileName, 204 if (!d || !d.cacheKey) {
203 imageMainTypeID: this.options.imageMainTypeID, 205 continue;
204 imageTypeID: this.options.imageTypeID 206 }
205 } 207 // 结果
206 list.push(res); 208 let res = {
207 } 209 cloudStorageID: d.cacheKey,
208 let result = { 210 imageFileName: d.fileName,
209 type: this.options.imageTypeID, 211 imageMainTypeID: this.options.imageMainTypeID,
210 list: list 212 imageTypeID: this.options.imageTypeID
211 }; 213 }
212 this.$emit("success", result); 214 list.push(res);
213 } 215 }
214 }, 216 let result = {
215 watch: { 217 type: this.options.imageTypeID,
218 list: list
219 };
220 this.$emit("success", result);
221 },
222 onShowTipsOverHandler(event) {
223 this.tipsVisible = true;
224 },
225 onShowTipsOutHandler(event) {
226 this.tipsVisible = false;
227 }
228 },
229 watch: {
216 230
217 }, 231 },
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;
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>
......