Skip to content

dev / pingan-life-index-pro

Go to a project
Toggle navigation
Toggle navigation pinning
8a698e31 by simon
Options

更改联络方式交互样式，含三语和mock数据结构

1 parent ae2b9504
Expand all
Inline Side-by-side
Showing 19 changed files with 885 additions and 275 deletions

269 Bytes | W: | H:

477 Bytes | W: | H:

  • 2-up
  • Swipe
  • Onion skin

194 Bytes | W: | H:

264 Bytes | W: | H:

  • 2-up
  • Swipe
  • Onion skin

283 Bytes | W: | H:

500 Bytes | W: | H:

  • 2-up
  • Swipe
  • Onion skin
1 module.exports = { 1 module.exports = {
2 common: { 2 common: {
3 Confirm:"Confirm", 3 Confirm: "Confirm",
4 Cancel:"Cancel", 4 Cancel: "Cancel",
5 Male: "Male",
6 Female: "Female",
7 Sex: "Sex",
8 Age: "Age",
5 }, 9 },
6 message: { 10 message: {
7 login: 'Login', 11 login: 'Login',
...@@ -373,53 +377,35 @@ module.exports = { ...@@ -373,53 +377,35 @@ module.exports = {
373 customService: "contact customer service hotline", 377 customService: "contact customer service hotline",
374 }, 378 },
375 index: { 379 index: {
376 // news: "新聞資訊", 380 recommend: {
377 // newMore: "查看更多", 381 title: "Why choose us?",
378 // recommend: { 382 contact: "Contact us",
379 // t1: "Online Quotation", 383 item1: {
380 // t2: "Customer Service", 384 desc: "E-service at Finger Tips",
381 // t3: "Products",
382 // t4: "Latest News",
383 // item1: {
384 // btn: "了解更多產品",
385 // t1: "為自己和家人尋找壹份保障",
386 // },
387 // item2: {
388 // btn: "立即預約",
389 // t1: "在線預約 專業服務",
390 // },
391 // item3: {
392 // btn: "客户服务",
393 // t1: "專業客服為妳服務",
394 // t2: "想了解更多，可致電",
395 // t3: "95511",
396 // t4: "聯絡我們，或進入",
397 // }
398 // },
399 recommend:{
400 title:"為何選擇平安人壽？",
401 contact:"Contact us",
402 item1:{
403 desc:"E-service at Finger Tips",
404 }, 385 },
405 item2:{ 386 item2: {
406 desc:"Serving more than 200 million customers", 387 desc: "Serving more than 200 million customers",
407 }, 388 },
408 item3:{ 389 item3: {
409 desc:"International risk management standard", 390 desc: "International risk management standard",
410 }, 391 },
411 }, 392 },
412 contact:{ 393 quote: {
413 t1:"Contact us for more product information.", 394 quote: "Quote now",
414 t2:"Leave your contact or call us at 2983 8866.", 395 want: "",
415 form:{ 396 service: "Contact customer service",
416 Title:"Title", 397 },
417 Name:"Name", 398 contact: {
418 PhoneNumber:"Phone number", 399 t1: "Contact us for more product information.",
419 Email:"Email", 400 t2: "Leave your contact or call us at 2983 8866.",
420 Time:"Preferred contact time slot", 401 form: {
421 Inquiry:"Inquiry", 402 Title: "Title",
422 Submit:"Submit", 403 Name: "Name",
404 PhoneNumber: "Phone number",
405 Email: "Email",
406 Time: "Preferred contact time slot",
407 Inquiry: "Inquiry",
408 Submit: "Submit",
423 } 409 }
424 } 410 }
425 411
...@@ -717,6 +703,14 @@ module.exports = { ...@@ -717,6 +703,14 @@ module.exports = {
717 e2: "請填寫聯繫地址", 703 e2: "請填寫聯繫地址",
718 e3: "Please enter the collect E-mail" 704 e3: "Please enter the collect E-mail"
719 }, 705 },
706 form:{
707 InternationalArea:"International area",
708 Mobile:"Mobile",
709 Nation:"Nation(Region)",
710 District:"District",
711 Address:"Address",
712 Mail:"Please enter",
713 },
720 success: "Success", 714 success: "Success",
721 }, 715 },
722 policyChangeInformation: { 716 policyChangeInformation: {
...@@ -775,10 +769,10 @@ module.exports = { ...@@ -775,10 +769,10 @@ module.exports = {
775 SentOutDate: "Sent Out Date", 769 SentOutDate: "Sent Out Date",
776 DownloadLink: "Download link", 770 DownloadLink: "Download link",
777 Status: "Status", 771 Status: "Status",
778 letterName : "Notice of Policy Issuance and Cooling-off Period", 772 letterName: "Notice of Policy Issuance and Cooling-off Period",
779 DownloadDoc : "Download document", 773 DownloadDoc: "Download document",
780 Read : "Read", 774 Read: "Read",
781 UnRead : "Unread" 775 UnRead: "Unread"
782 }, 776 },
783 customService: { 777 customService: {
784 name: "Customer service", 778 name: "Customer service",
...@@ -1149,7 +1143,7 @@ module.exports = { ...@@ -1149,7 +1143,7 @@ module.exports = {
1149 num1: "（i）", 1143 num1: "（i）",
1150 num2: "（ii）", 1144 num2: "（ii）",
1151 title: "Plan At-a-glance", 1145 title: "Plan At-a-glance",
1152 titleLt:"Basic Information", 1146 titleLt: "Basic Information",
1153 titleT1: "", 1147 titleT1: "",
1154 titleT2: "", 1148 titleT2: "",
1155 titleNum: "", 1149 titleNum: "",
...@@ -1168,20 +1162,20 @@ module.exports = { ...@@ -1168,20 +1162,20 @@ module.exports = {
1168 v5: "The higher of the following, less any indebtedness:", 1162 v5: "The higher of the following, less any indebtedness:",
1169 v51: "110% of the sum of the Total Basic Premiums Paid;", 1163 v51: "110% of the sum of the Total Basic Premiums Paid;",
1170 v52: "Guaranteed Cash Value plus the face value of accumulated Reversionary Bonus and face value of Terminal Bonus (if any).", 1164 v52: "Guaranteed Cash Value plus the face value of accumulated Reversionary Bonus and face value of Terminal Bonus (if any).",
1171 k6:"Additional accidental death benefit for the Insured Person", 1165 k6: "Additional accidental death benefit for the Insured Person",
1172 v6:"Equivalent to the Basic Total Premiums Paid", 1166 v6: "Equivalent to the Basic Total Premiums Paid",
1173 v61:"Maximum USD 125,000 for all Ping An GenRich Insurance Plans", 1167 v61: "Maximum USD 125,000 for all Ping An GenRich Insurance Plans",
1174 k7:"Accidental death benefit for the Policy Owner", 1168 k7: "Accidental death benefit for the Policy Owner",
1175 v7:"Equivalent to the future premiums payable for the remainder of the Premium Payment Term.", 1169 v7: "Equivalent to the future premiums payable for the remainder of the Premium Payment Term.",
1176 v71:"Maximum USD 125,000 for all Ping An GenRich Insurance Plans", 1170 v71: "Maximum USD 125,000 for all Ping An GenRich Insurance Plans",
1177 v72:"Not applicable if the Policy Owner is also the Insured Person", 1171 v72: "Not applicable if the Policy Owner is also the Insured Person",
1178 v73:"Not applicable if the Insured Person and the Policy Holder both died in the same accident.", 1172 v73: "Not applicable if the Insured Person and the Policy Holder both died in the same accident.",
1179 k8:"Surrender benefit", 1173 k8: "Surrender benefit",
1180 v8:"The sum of guaranteed surrender value, accumulated cash value of reversionary bonus and cash value of terminal bonus (if any) less any indebtedness.", 1174 v8: "The sum of guaranteed surrender value, accumulated cash value of reversionary bonus and cash value of terminal bonus (if any) less any indebtedness.",
1181 k9:"Bonus withdrawal", 1175 k9: "Bonus withdrawal",
1182 v9:"While this Policy is in effect, the Policy Holder may withdraw some or all of the cash value of accumulated Reversionary Bonus at any time, subject to our prevailing administrative rules regarding the minimum and maximum amount of each withdrawals. The cash value of the corresponding Terminal Bonus (on the withdrawn Reversionary Bonus), if any, will also be withdrawn.", 1176 v9: "While this Policy is in effect, the Policy Holder may withdraw some or all of the cash value of accumulated Reversionary Bonus at any time, subject to our prevailing administrative rules regarding the minimum and maximum amount of each withdrawals. The cash value of the corresponding Terminal Bonus (on the withdrawn Reversionary Bonus), if any, will also be withdrawn.",
1183 k10:"Policy loan", 1177 k10: "Policy loan",
1184 v10:"The Policy Holder can apply for a policy loan for an amount not exceeding 80% of the sum of guaranteed surrender value and cash value of accumulated reversionary bonus of the policy. The policy may also be subject to an automatic policy loan if premium remains unpaid at the end of the Grace Period to cover the outstanding premium and levy payable (if any). Any policy loan and automatic policy loan will be charged with loan interest, where the loan interest rate is solely determined by the Company.", 1178 v10: "The Policy Holder can apply for a policy loan for an amount not exceeding 80% of the sum of guaranteed surrender value and cash value of accumulated reversionary bonus of the policy. The policy may also be subject to an automatic policy loan if premium remains unpaid at the end of the Grace Period to cover the outstanding premium and levy payable (if any). Any policy loan and automatic policy loan will be charged with loan interest, where the loan interest rate is solely determined by the Company.",
1185 }, 1179 },
1186 download: { 1180 download: {
1187 t1: "Download Product Brochure", 1181 t1: "Download Product Brochure",
......
1 @import "@/styles/_support.scss"; 1 @import "@/styles/_support.scss";
2
3 .list-container { 2 .list-container {
4 overflow-x: auto; 3 overflow-x: auto;
5 margin-bottom: 24px; 4 margin-bottom: 24px;
...@@ -19,7 +18,6 @@ ...@@ -19,7 +18,6 @@
19 position: relative; 18 position: relative;
20 display: flex; 19 display: flex;
21 align-items: center; 20 align-items: center;
22
23 &-tips { 21 &-tips {
24 display: none; 22 display: none;
25 position: absolute; 23 position: absolute;
...@@ -31,11 +29,10 @@ ...@@ -31,11 +29,10 @@
31 min-width: 88px; 29 min-width: 88px;
32 padding: 4px; 30 padding: 4px;
33 } 31 }
34
35 .icon-download { 32 .icon-download {
36 margin-right: 4px; 33 margin-right: 4px;
37 } 34 }
38 .desc{ 35 .desc {
39 padding: 0; 36 padding: 0;
40 } 37 }
41 } 38 }
...@@ -46,8 +43,7 @@ ...@@ -46,8 +43,7 @@
46 cursor: pointer; 43 cursor: pointer;
47 width: 12px; 44 width: 12px;
48 height: 8px; 45 height: 8px;
49 background: url("~@/assets/images/insurance-query/triangle-down2.png") 46 background: url("~@/assets/images/insurance-query/triangle-down2.png") no-repeat center center;
50 no-repeat center center;
51 background-size: 100% 100%; 47 background-size: 100% 100%;
52 top: 16px; 48 top: 16px;
53 right: 26px; 49 right: 26px;
...@@ -60,29 +56,23 @@ ...@@ -60,29 +56,23 @@
60 56
61 .cell-group { 57 .cell-group {
62 margin-bottom: 12px; 58 margin-bottom: 12px;
63
64 &:last-child { 59 &:last-child {
65 margin-bottom: 0; 60 margin-bottom: 0;
66 } 61 }
67
68 div { 62 div {
69 color: #4c4948; 63 color: #4c4948;
70 } 64 }
71
72 .td { 65 .td {
73 position: relative; 66 position: relative;
74 @extend .fcc; 67 @extend .fcc;
75 text-align: center; 68 text-align: center;
76 } 69 }
77
78 .w1 { 70 .w1 {
79 width: 180px; 71 width: 180px;
80 } 72 }
81
82 .w2 { 73 .w2 {
83 width: 240px; 74 width: 240px;
84 } 75 }
85
86 .w3 { 76 .w3 {
87 width: 140px; 77 width: 140px;
88 } 78 }
...@@ -92,7 +82,6 @@ ...@@ -92,7 +82,6 @@
92 .w5 { 82 .w5 {
93 width: 100px; 83 width: 100px;
94 } 84 }
95
96 .table-header { 85 .table-header {
97 height: 50px; 86 height: 50px;
98 border-top-left-radius: 8px; 87 border-top-left-radius: 8px;
...@@ -100,7 +89,6 @@ ...@@ -100,7 +89,6 @@
100 background-color: #f2f2f2; 89 background-color: #f2f2f2;
101 display: flex; 90 display: flex;
102 align-items: center; 91 align-items: center;
103
104 .normal-header { 92 .normal-header {
105 // width: 706px; 93 // width: 706px;
106 @extend .bb; 94 @extend .bb;
...@@ -110,32 +98,26 @@ ...@@ -110,32 +98,26 @@
110 display: flex; 98 display: flex;
111 justify-content: space-between; 99 justify-content: space-between;
112 align-items: center; 100 align-items: center;
113
114 .title { 101 .title {
115 font-weight: bold; 102 font-weight: bold;
116 color: #575453; 103 color: #575453;
117 } 104 }
118
119 .guide { 105 .guide {
120 transition: all 0.5s; 106 transition: all 0.5s;
121 cursor: pointer; 107 cursor: pointer;
122 width: 12px; 108 width: 12px;
123 height: 8px; 109 height: 8px;
124 background: url("~@/assets/images/insurance-query/triangle-down.png") 110 background: url("~@/assets/images/insurance-query/triangle-down.png") no-repeat center center;
125 no-repeat center center;
126 background-size: 100% 100%; 111 background-size: 100% 100%;
127 } 112 }
128
129 .rotate180 { 113 .rotate180 {
130 transform: rotate(180deg); 114 transform: rotate(180deg);
131 transition: all 0.5s; 115 transition: all 0.5s;
132 } 116 }
133 } 117 }
134 } 118 }
135
136 .table-content { 119 .table-content {
137 // width: 770px; 120 // width: 770px;
138
139 height: auto; 121 height: auto;
140 max-height: 600px; 122 max-height: 600px;
141 // display: inline-block; 123 // display: inline-block;
...@@ -147,29 +129,25 @@ ...@@ -147,29 +129,25 @@
147 padding: 0 32px; 129 padding: 0 32px;
148 transition: max-height ease-out 0.3s !important; 130 transition: max-height ease-out 0.3s !important;
149 overflow: auto; 131 overflow: auto;
150
151 .data-line { 132 .data-line {
152 // padding: 0 32px; 133 // padding: 0 32px;
153 height: 50px; 134 height: 58px;
154 margin: auto; 135 margin: auto;
155 display: flex; 136 display: flex;
156 justify-content: space-between; 137 justify-content: space-between;
157 align-items: center; 138 align-items: center;
158
159 .td { 139 .td {
160 position: relative; 140 position: relative;
161 display: flex; 141 display: flex;
162 justify-content: center; 142 justify-content: center;
163 align-items: center; 143 align-items: center;
164 } 144 }
165
166 .cell1 { 145 .cell1 {
167 width: 98%; 146 width: 98%;
168 display: flex; 147 display: flex;
169 justify-content: space-between; 148 justify-content: space-between;
170 margin: auto; 149 margin: auto;
171 } 150 }
172
173 .separator-v { 151 .separator-v {
174 height: 30px; 152 height: 30px;
175 width: 2px; 153 width: 2px;
...@@ -177,43 +155,35 @@ ...@@ -177,43 +155,35 @@
177 margin: 0 11px; 155 margin: 0 11px;
178 } 156 }
179 } 157 }
180
181 .label span { 158 .label span {
182 color: $cOrange; 159 color: $cOrange;
183 margin-left: 7px; 160 margin-left: 7px;
184 cursor: pointer; 161 cursor: pointer;
185 text-decoration: underline; 162 text-decoration: underline;
186 } 163 }
187
188 .separator-h { 164 .separator-h {
189 width: 100%; 165 width: 100%;
190 height: 1px; 166 height: 2px;
191 background-color: #f2f2f2; 167 background-color: #f2f2f2;
192 } 168 }
193 } 169 }
194
195 .orange { 170 .orange {
196 background-color: $cOrange; 171 background-color: $cOrange;
197
198 div { 172 div {
199 color: #ffffff; 173 color: #ffffff;
200 } 174 }
201 } 175 }
202
203 .new { 176 .new {
204 @include linear-bg; 177 @include linear-bg;
205 } 178 }
206
207 .hide { 179 .hide {
208 max-height: 0; 180 max-height: 0;
209 border-bottom: none; 181 border-bottom: none;
210 } 182 }
211
212 .sp { 183 .sp {
213 text-decoration: underline; 184 text-decoration: underline;
214 padding: 0 4.8px; 185 padding: 0 4.8px;
215 } 186 }
216
217 .ac { 187 .ac {
218 color: $cOrange !important; 188 color: $cOrange !important;
219 } 189 }
...@@ -234,7 +204,6 @@ ...@@ -234,7 +204,6 @@
234 .activity { 204 .activity {
235 background-color: $cOrange !important; 205 background-color: $cOrange !important;
236 opacity: 0.5; 206 opacity: 0.5;
237
238 div { 207 div {
239 color: #ffffff !important; 208 color: #ffffff !important;
240 } 209 }
...@@ -245,16 +214,13 @@ ...@@ -245,16 +214,13 @@
245 display: flex; 214 display: flex;
246 align-items: center; 215 align-items: center;
247 justify-content: center; 216 justify-content: center;
248
249 .tips { 217 .tips {
250 align-items: center; 218 align-items: center;
251 display: flex; 219 display: flex;
252
253 .icon { 220 .icon {
254 margin-right: 5px; 221 margin-right: 5px;
255 display: inline-block; 222 display: inline-block;
256 } 223 }
257
258 .btn { 224 .btn {
259 color: $cOrange; 225 color: $cOrange;
260 } 226 }
......
1 import api from '@/api/api' 1 import api from "@/api/api";
2 import { 2 import { httpGet, httpPost } from "@/api/fetch-api.js";
3 httpGet,
4 httpPost
5 } from '@/api/fetch-api.js'
6 3
7 import { contactMethodCheck } from '@utils/utils.js'; 4 import { contactMethodCheck } from "@utils/utils.js";
8 import { setTitle } from '@/utils/utils.js'; 5 import { setTitle } from "@/utils/utils.js";
9 6
10 import Auth from '@components/auth/auth.vue'; 7 import Auth from "@components/auth/auth.vue";
11 import modalComp from '@/components/modal-comp/modal-comp.vue'; 8 import modalComp from "@/components/modal-comp/modal-comp.vue";
12 import PolicyHeadList from "./policy-head-list.vue"; 9 import PolicyHeadList from "./policy-head-list.vue";
13 import Vue from 'vue'; 10 import Vue from "vue";
14 import { Loading } from 'vant'; 11 import { Loading } from "vant";
15 Vue.use(Loading); 12 Vue.use(Loading);
16 13
17 export default { 14 export default {
...@@ -19,7 +16,7 @@ export default { ...@@ -19,7 +16,7 @@ export default {
19 return { 16 return {
20 loading: false, 17 loading: false,
21 showForm: false, 18 showForm: false,
22 key: 'value', 19 key: "value",
23 checked1: false, 20 checked1: false,
24 checked2: false, 21 checked2: false,
25 checked3: false, 22 checked3: false,
...@@ -30,6 +27,8 @@ export default { ...@@ -30,6 +27,8 @@ export default {
30 mobile: "", 27 mobile: "",
31 email: "", 28 email: "",
32 address: "", 29 address: "",
30
31 areaCode: ""
33 }, 32 },
34 errorTips: { 33 errorTips: {
35 e1: "", 34 e1: "",
...@@ -42,7 +41,30 @@ export default { ...@@ -42,7 +41,30 @@ export default {
42 targetPath: "", 41 targetPath: "",
43 modalIcon: "succ", 42 modalIcon: "succ",
44 modalContent: "", 43 modalContent: "",
45 } 44
45 // 新增
46 // 国际号码区号列表
47 areaCodeList: [
48 {
49 v: "abc",
50 n: "abc"
51 },
52 {
53 v: "efg",
54 n: "efg"
55 }
56 ],
57 countryList:[
58 {
59 v: "cn",
60 n: "中国"
61 },
62 {
63 v: "en",
64 n: "美国"
65 }
66 ]
67 };
46 }, 68 },
47 components: { 69 components: {
48 Auth, 70 Auth,
...@@ -51,10 +73,12 @@ export default { ...@@ -51,10 +73,12 @@ export default {
51 }, 73 },
52 computed: { 74 computed: {
53 locale() { 75 locale() {
54 return this.$i18n.locale || 'tc'; 76 return this.$i18n.locale || "tc";
55 }, 77 },
56 i18n() { 78 i18n() {
57 return this.$i18n.messages && this.$i18n.locale ? this.$i18n.messages[this.$i18n.locale] : {}; 79 return this.$i18n.messages && this.$i18n.locale
80 ? this.$i18n.messages[this.$i18n.locale]
81 : {};
58 }, 82 },
59 submitBtnDisabled() { 83 submitBtnDisabled() {
60 let b1 = !this.selectedPolicies || this.selectedPolicies.length == 0; 84 let b1 = !this.selectedPolicies || this.selectedPolicies.length == 0;
...@@ -100,27 +124,29 @@ export default { ...@@ -100,27 +124,29 @@ export default {
100 addressAcceptMsg: this.checked2 ? 1 : 0, 124 addressAcceptMsg: this.checked2 ? 1 : 0,
101 emailAcceptMsg: this.checked3 ? 1 : 0, 125 emailAcceptMsg: this.checked3 ? 1 : 0,
102 policies: policies 126 policies: policies
103 } 127 };
104 this.loading = true; 128 this.loading = true;
105 httpPost({ 129 httpPost({
106 url: api.updatePolicyContanct, 130 url: api.updatePolicyContanct,
107 data: data, 131 data: data,
108 sid: true 132 sid: true
109 }).then(() => { 133 })
134 .then(() => {
110 this.loading = false; 135 this.loading = false;
111 this.showSuccess(); 136 this.showSuccess();
112 }).catch(err => { 137 })
138 .catch(err => {
113 this.loading = false; 139 this.loading = false;
114 if (err.code == 404) { 140 if (err.code == 404) {
115 this.$refs.auth.noAuth(); 141 this.$refs.auth.noAuth();
116 } 142 }
117 }) 143 });
118 } 144 }
119 }, 145 },
120 checkMobile() { 146 checkMobile() {
121 if (this.data.mobile) { 147 if (this.data.mobile) {
122 let hkMobile = contactMethodCheck('hkmobile', this.data.mobile); 148 let hkMobile = contactMethodCheck("hkmobile", this.data.mobile);
123 let zhMobile = contactMethodCheck('mobile', this.data.mobile); 149 let zhMobile = contactMethodCheck("mobile", this.data.mobile);
124 if (!hkMobile && !zhMobile) { 150 if (!hkMobile && !zhMobile) {
125 this.errorTips.e1 = this.i18n.policyChangeContact.errorTips.e1; 151 this.errorTips.e1 = this.i18n.policyChangeContact.errorTips.e1;
126 return false; 152 return false;
...@@ -132,7 +158,7 @@ export default { ...@@ -132,7 +158,7 @@ export default {
132 return true; 158 return true;
133 }, 159 },
134 checkEmail() { 160 checkEmail() {
135 if (this.data.email && !contactMethodCheck('email', this.data.email)) { 161 if (this.data.email && !contactMethodCheck("email", this.data.email)) {
136 this.errorTips.e3 = this.i18n.policyChangeContact.errorTips.e3; 162 this.errorTips.e3 = this.i18n.policyChangeContact.errorTips.e3;
137 return false; 163 return false;
138 } 164 }
...@@ -155,7 +181,8 @@ export default { ...@@ -155,7 +181,8 @@ export default {
155 url: api.policyDetail, 181 url: api.policyDetail,
156 data: param, 182 data: param,
157 sid: true 183 sid: true
158 }).then(response => { 184 })
185 .then(response => {
159 this.data = {}; 186 this.data = {};
160 if (response) { 187 if (response) {
161 this.loading = false; 188 this.loading = false;
...@@ -167,7 +194,8 @@ export default { ...@@ -167,7 +194,8 @@ export default {
167 this.data.email = response.clientEmail; 194 this.data.email = response.clientEmail;
168 this.checked3 = "1" == response.clientEmailAcceptMessage; 195 this.checked3 = "1" == response.clientEmailAcceptMessage;
169 } 196 }
170 }).catch(res => { 197 })
198 .catch(res => {
171 if (res.code == "404") { 199 if (res.code == "404") {
172 this.$refs.auth.noAuth(); 200 this.$refs.auth.noAuth();
173 } 201 }
...@@ -193,17 +221,17 @@ export default { ...@@ -193,17 +221,17 @@ export default {
193 } 221 }
194 }, 222 },
195 watch: { 223 watch: {
196 'data.mobile': function () { 224 "data.mobile": function() {
197 this.errorTips.e1 = ""; 225 this.errorTips.e1 = "";
198 }, 226 },
199 'data.address': function () { 227 "data.address": function() {
200 this.errorTips.e2 = ""; 228 this.errorTips.e2 = "";
201 }, 229 },
202 'data.email': function () { 230 "data.email": function() {
203 this.errorTips.e3 = ""; 231 this.errorTips.e3 = "";
204 } 232 }
205 }, 233 },
206 mounted() { 234 mounted() {
207 this.initTitle(); 235 this.initTitle();
208 } 236 }
209 } 237 };
......
1 @import '@/styles/_support.scss'; 1 @import "@/styles/_support.scss";
2 .comp {
3 font-size: $fontSize-M2;
4 }
2 5
3 .container { 6 .container {
4 @extend .bb; 7 @extend .bb;
5 padding: 22px 36px 30px 26px; 8 padding: 24px 32px;
6
7 } 9 }
8 10
9 .border { 11 .border {
...@@ -15,29 +17,47 @@ ...@@ -15,29 +17,47 @@
15 .form { 17 .form {
16 display: flex; 18 display: flex;
17 flex-wrap: wrap; 19 flex-wrap: wrap;
18
19 &-item { 20 &-item {
20 position: relative; 21 position: relative;
21 margin-bottom: 28px;
22 width: 100%; 22 width: 100%;
23
24 &:last-child { 23 &:last-child {
25 margin-bottom: 0; 24 margin-bottom: 0;
26 } 25 }
27
28 .label { 26 .label {
29 color: #f05a23;
30 display: flex; 27 display: flex;
31 align-items: center; 28 align-items: center;
32 margin-bottom: 8.4px; 29 margin-bottom: 8.4px;
33
34 .icon { 30 .icon {
35 width: 26px; 31 margin-right: 14px;
36 display: flex;
37 } 32 }
38
39 img { 33 img {
40 height: 12px; 34 }
35 }
36
37 .ipt-gird {
38 &-item {
39 margin: 0 auto 48px;
40 padding-left: 18px;
41 padding-right: 18px;
42
43 &:first-child {
44 margin-right: 0;
45 padding-left: 0;
46 }
47 &:last-child {
48 margin-right: 0;
49 padding-right: 0;
50 }
51 }
52
53 .w1 {
54 width: 210px;
55 }
56 .w2 {
57 width: 300px;
58 }
59 .w3 {
60 width: 360px;
41 } 61 }
42 } 62 }
43 63
...@@ -46,26 +66,18 @@ ...@@ -46,26 +66,18 @@
46 justify-content: space-between; 66 justify-content: space-between;
47 align-items: center; 67 align-items: center;
48 position: relative; 68 position: relative;
49
50 // input和下拉 69 // input和下拉
51 .ipt { 70 .ipt {
52 flex: 1; 71 flex: 1;
53 } 72 }
54
55 .agree {
56 cursor: pointer;
57 }
58
59 .name-ipt { 73 .name-ipt {
60 width: 164px; 74 width: 164px;
61 } 75 }
62
63 .phone-ipt { 76 .phone-ipt {
64 width: 164px; 77 width: 164px;
65 } 78 }
66 79 .mail-ipt {
67 .mail-ipt {} 80 }
68
69 // 长文本 81 // 长文本
70 .textarea { 82 .textarea {
71 min-height: 105px; 83 min-height: 105px;
...@@ -73,62 +85,58 @@ ...@@ -73,62 +85,58 @@
73 @extend .bb; 85 @extend .bb;
74 padding: 9px; 86 padding: 9px;
75 } 87 }
76
77 .down-arrow { 88 .down-arrow {
78 position: absolute; 89 position: absolute;
79 top: 26.4px; 90 top: 26.4px;
80 right: 24px; 91 right: 24px;
81 background-image: url('~@/assets/images/reservation/re-down-arrow.png'); 92 background-image: url("~@/assets/images/reservation/re-down-arrow.png");
82 width: 12px; 93 width: 12px;
83 height: 8px; 94 height: 8px;
84 pointer-events: none; 95 pointer-events: none;
85 cursor: default; 96 cursor: default;
86 } 97 }
87
88 .check-icon { 98 .check-icon {
89 display: inline-block; 99 display: inline-block;
90 margin-left: 26px; 100 margin-left: 26px;
91 margin-right: 8px; 101 margin-right: 8px;
92 } 102 }
93 } 103 }
94
95 .validator { 104 .validator {
96 color: $cOrange; 105 color: $cOrange2;
97 margin-top: 6px; 106 margin-top: 6px;
98 position: absolute; 107 position: absolute;
99 right: 192px; 108 // right: 0;
109 left: 0;
100 display: flex; 110 display: flex;
101 align-items: center; 111 align-items: center;
102 // bottom: 0; 112 // bottom: 0;
103
104 img { 113 img {
105 display: inline-block; 114 display: inline-block;
106 margin-right: 4.8px; 115 margin-right: 4.8px;
107 } 116 }
108 } 117 }
109 } 118 }
119 }
110 120
121 .agree {
122 width: 100%;
123 display: flex;
124 align-items: center;
125 // margin-top: 48px;
126 font-size: $fontSizeSmall-M2;
127 .check-icon {
128 margin-right: 8px;
129 width: 18px;
130 height: 18px;
131 }
111 } 132 }
112 133
113 .submit-btn { 134 .submit-btn {
114 width: 163px; 135 @include btc4(300px, 50px, 18px);
115 height: 49px; 136 width: 300px;
116 margin: 0 auto 0; 137 height: 50px;
117 line-height: 49px; 138 border-radius: 25px;
118 box-shadow: 0px 10px 13px 0 rgba(236, 100, 41, 0.2); 139 margin: 40px auto 0;
119 background-blend-mode: soft-light, ;
120 background-image: linear-gradient(to top, #000000, #ffffff), linear-gradient(to bottom, #ec6429, #ec6429);
121 text-align: center;
122 font-size: 15.5px;
123 color: #ffffff;
124 border-radius: 42px;
125 cursor: pointer;
126 border: none;
127 color: #ffffff;
128 background-color: #f05a23;
129 box-shadow: 0px 10px 13px 0 rgba(236, 100, 41, 0.2);
130 background-blend-mode: soft-light, ;
131 background-image: linear-gradient(to top, #000000, #ffffff), linear-gradient(to bottom, #ec6429, #ec6429);
132 } 140 }
133 141
134 .submit-btn:lang(zh) { 142 .submit-btn:lang(zh) {
...@@ -141,27 +149,23 @@ ...@@ -141,27 +149,23 @@
141 overflow-x: auto; 149 overflow-x: auto;
142 -webkit-overflow-scrolling: touch; 150 -webkit-overflow-scrolling: touch;
143 width: 92vw; 151 width: 92vw;
144
145 } 152 }
146 } 153 }
147 154
148
149 @media (max-width: 768px) { 155 @media (max-width: 768px) {
156 .container {
157 padding: 24px 16px;
158 }
150 .form { 159 .form {
151 &-item { 160 &-item {
152 .ipt-wrap { 161 .ipt-wrap {
153 display: block; 162 display: block;
154 } 163 }
155 164 .ipt-gird {
156 .agree { 165 &-item {
157 margin-top: $marginSmall-M; 166 padding: 0;
158
159 .check-icon {
160 margin-left: 0;
161 } 167 }
162 } 168 }
163
164
165 } 169 }
166 } 170 }
167 } 171 }
......
1 1
2 <template> 2 <template>
3 <div> 3 <div class="policy-change-contact">
4 <!-- 该input用于防止chrome自动填充 -->
5 <input type="password" style="display: none;" />
4 <auth @onLogin="userLogin" @onLogout="userLogout" :checkProfile="true" ref="auth" :tipModel="'m2'"></auth> 6 <auth @onLogin="userLogin" @onLogout="userLogout" :checkProfile="true" ref="auth" :tipModel="'m2'"></auth>
5 <modal-comp :visible="modalVisiable" :show-confirm="false" :icon="modalIcon" :content="modalContent" :confirm="modalCallback" :overlay="modalCallback"></modal-comp> 7 <modal-comp :visible="modalVisiable" :show-confirm="false" :icon="modalIcon" :content="modalContent" :confirm="modalCallback" :overlay="modalCallback"></modal-comp>
6 <template v-if="showForm"> 8 <template v-if="showForm">
7 <policy-head-list :multiSelectable="true" @onSelect="handlePolicySelect"></policy-head-list> 9 <policy-head-list :multiSelectable="true" @onSelect="handlePolicySelect"></policy-head-list>
10
8 <div class="container border" v-if="selectedPolicies.length > 0 && data"> 11 <div class="container border" v-if="selectedPolicies.length > 0 && data">
12 <!-- 表单 -->
9 <div class="form"> 13 <div class="form">
14 <!-- 1 -->
10 <div class="form-item"> 15 <div class="form-item">
11 <div class="label"> 16 <div class="label">
12 <div class="icon"><img src="@/assets/images/policy-change-contact/icon-pcc-phone.png"></div>{{$t('policyChangeContact.phone')}} 17 <div class="icon"><img src="@/assets/images/policy-change-contact/icon-pcc-phone.png"></div>{{$t('policyChangeContact.phone')}}
13 </div> 18 </div>
14 <div class="ipt-wrap"> 19
15 <input class="ipt mail-ipt" :class="{err : errorTips.e1.length > 0}" type="text" v-model="data.mobile"> 20 <div class="gird-g ipt-gird">
16 <div class="agree" @click="checked1 = !checked1"> 21 <div class="pure-u-1 pure-u-md-6-24 ipt-gird-item">
17 <img v-if="!checked1" class="check-icon pointer" src="@/assets/images/reservation/un-check.png"> 22 <div class="ipt-wrap-linear">
18 <img v-else class="check-icon pointer" src="@/assets/images/reservation/check.png"> 23 <div class="down-arrow"></div>
19 <span>{{$t("policyChangeContact.checkTips")}}</span> 24 <div class="cont">
25 <el-select class="ipt" v-model="data.areaCode" :placeholder="$t('policyChangeContact.form.InternationalArea')">
26 <el-option v-for="(item, index) in areaCodeList" :key="index" :label="item.n" :value="item.v"></el-option>
27 </el-select>
28 </div>
29 </div>
30 <div class="validator" v-if="errorTips.e1.length > 0">
31 <img src="@/assets/images/common/icon-notice.png" alt="">{{errorTips.e1}}
32 </div>
20 </div> 33 </div>
21 34
35 <div class="pure-u-1 pure-u-md-8-24 ipt-gird-item">
36 <div class="ipt-wrap-linear">
37 <input class="ipt mail-ipt" :class="{err : errorTips.e1.length > 0}" type="text" v-model="data.mobile" autocomplete="new-password" :placeholder="$t('policyChangeContact.form.Mobile')">
22 </div> 38 </div>
23 <div class="validator" v-if="errorTips.e1.length > 0"> 39 <div class="validator" v-if="errorTips.e1.length > 0">
24 <img src="@/assets/images/common/icon-notice.png" alt="">{{errorTips.e1}} 40 <img src="@/assets/images/common/icon-notice.png" alt="">{{errorTips.e1}}
25 </div> 41 </div>
26 </div> 42 </div>
43 </div>
44 </div>
45
46 <!-- 2 -->
27 <div class="form-item"> 47 <div class="form-item">
28 <div class="label"> 48 <div class="label">
29 <div class="icon"><img src="@/assets/images/policy-change-contact/icon-pcc-location.png"></div>{{$t('policyChangeContact.address')}} 49 <div class="icon"><img src="@/assets/images/policy-change-contact/icon-pcc-location.png"></div>{{$t('policyChangeContact.address')}}
30 </div> 50 </div>
31 <div class="ipt-wrap"> 51 <div class="gird-g ipt-gird">
32 <input class="ipt mail-ipt" type="text" :class="{err : errorTips.e2.length > 0}" v-model="data.address"> 52 <div class="pure-u-1 pure-u-md-6-24 ipt-gird-item">
33 <div class="agree" @click="checked2 = !checked2"> 53 <div class="ipt-wrap-linear">
34 <img v-if="!checked2" class="check-icon pointer" src="@/assets/images/reservation/un-check.png"> 54 <div class="down-arrow"></div>
35 <img v-else class="check-icon pointer" src="@/assets/images/reservation/check.png"> 55 <div class="cont">
36 <span>{{$t("policyChangeContact.checkTips")}}</span> 56 <el-select class="ipt" v-model="data.countryCode" :placeholder="$t('policyChangeContact.form.Nation')">
57 <el-option v-for="(item, index) in countryList" :key="index" :label="item.n" :value="item.v"></el-option>
58 </el-select>
37 </div> 59 </div>
38 </div> 60 </div>
39 <div class="validator" v-if="errorTips.e2.length > 0"> 61 <div class="validator" v-if="errorTips.e2.length > 0">
40 <img src="@/assets/images/common/icon-notice.png" alt="">{{errorTips.e2}} 62 <img src="@/assets/images/common/icon-notice.png" alt="">{{errorTips.e2}}
41 </div> 63 </div>
42 </div> 64 </div>
65
66 <div class="pure-u-1 pure-u-md-6-24 ipt-gird-item">
67 <div class="ipt-wrap-linear">
68 <input class="ipt" type="text" :class="{err : errorTips.e2.length > 0}" v-model="data.address" autocomplete="new-password" :placeholder="$t('policyChangeContact.form.District')">
69 </div>
70 <div class="validator" v-if="errorTips.e2.length > 0">
71 <img src="@/assets/images/common/icon-notice.png" alt="">{{errorTips.e2}}
72 </div>
73 </div>
74
75 <div class="pure-u-1 pure-u-md-12-24 ipt-gird-item">
76 <div class="ipt-wrap-linear">
77 <input class="ipt" type="text" :class="{err : errorTips.e2.length > 0}" v-model="data.address" autocomplete="new-password" :placeholder="$t('policyChangeContact.form.Address')">
78 </div>
79 <div class="validator" v-if="errorTips.e2.length > 0">
80 <img src="@/assets/images/common/icon-notice.png" alt="">{{errorTips.e2}}
81 </div>
82 </div>
83
84 </div>
85 </div>
86
87 <!-- 3 -->
43 <div class="form-item"> 88 <div class="form-item">
44 <div class="label"> 89 <div class="label">
45 <div class="icon"><img src="@/assets/images/policy-change-contact/icon-pcc-mail.png"></div>{{$t('policyChangeContact.email')}} 90 <div class="icon"><img src="@/assets/images/policy-change-contact/icon-pcc-mail.png"></div>{{$t('policyChangeContact.email')}}
46 </div> 91 </div>
47 <div class="ipt-wrap"> 92 <div class="gird-g ipt-gird">
48 <input class="ipt mail-ipt" type="text" :class="{err : errorTips.e3.length > 0}" v-model="data.email"> 93 <div class="pure-u-1 ipt-gird-item">
49 <div class="agree" @click="checked3 = !checked3"> 94 <div class="pure-u-1 pure-u-md-12-24 ipt-wrap-linear">
50 <img v-if="!checked3" class="check-icon pointer" src="@/assets/images/reservation/un-check.png"> 95 <input class="ipt" type="text" :class="{err : errorTips.e3.length > 0}" v-model="data.email" autocomplete="new-password" :placeholder="$t('policyChangeContact.form.Mail')">
51 <img v-else class="check-icon pointer" src="@/assets/images/reservation/check.png">
52 <span>{{$t("policyChangeContact.checkTips")}}</span>
53 </div>
54 </div> 96 </div>
55
56 <div class="validator" v-if="errorTips.e3.length > 0"> 97 <div class="validator" v-if="errorTips.e3.length > 0">
57 <img src="@/assets/images/common/icon-notice.png" alt="">{{errorTips.e3}} 98 <img src="@/assets/images/common/icon-notice.png" alt="">{{errorTips.e3}}
58 </div> 99 </div>
59 </div> 100 </div>
60 <div class="submit-btn flex-center" @click="updateContactsHandler" :class="{disabled: submitBtnDisabled}"> 101 </div>
102
103 </div>
104 <div class="agree" @click="checked1 = !checked1">
105 <img v-if="!checked1" class="check-icon pointer" src="@/assets/images/reservation/un-check.png">
106 <img v-else class="check-icon pointer" src="@/assets/images/reservation/check.png">
107 <span>{{$t("policyChangeContact.checkTips")}}</span>
108 </div>
109
110 <div class="submit-btn" @click="updateContactsHandler" :class="{disabled: submitBtnDisabled}">
61 <van-loading v-if="loading" /> 111 <van-loading v-if="loading" />
62 <span>{{$t('policyChangeContact.submit')}}</span> 112 <span>{{$t('policyChangeContact.submit')}}</span>
63 </div> 113 </div>
64 </div> 114 </div>
65 115
66 </div> 116 </div>
67 <!-- <div v-else style="height:400px"></div> -->
68 </template> 117 </template>
69 </div> 118 </div>
70 </template> 119 </template>
......
1 /**
2 * 组件描述：保单查询列表
3 */
4
5 import api from '@/api/api';
6 import {
7 httpPost,
8 requestDomain
9 } from '@/api/fetch-api.js';
10
11 import {
12 mapState
13 } from 'vuex';
14 import {
15 formatMoney,
16 getInsuredPeriod,
17 getInsuredState,
18 getPolicyName
19 } from "@/utils/biz.js";
20 import Modal2Comp from '@/components/modal2-comp/modal2-comp.vue';
21
22 export default {
23 props: {
24 multiSelectable: {
25 type: Boolean,
26 default: false
27 },
28 model: {
29 type: String,
30 default: "download"
31 },
32 },
33 name: "PolicyHeadList",
34 data() {
35 return {
36 myPolicyList: [],
37 maxShow: 2,
38 selectPolicyCode: "",
39 selectPolicyCodes: {},
40 hide: false,
41 showDownloadError: false
42 }
43 },
44 computed: {
45 ...mapState({
46 policyList: state => state.policyList
47 }),
48 lan() {
49 return this.$i18n.locale;
50 },
51 i18n() {
52 return this.$i18n.messages && this.$i18n.locale ? this.$i18n.messages[this.$i18n.locale] : {};
53 },
54 },
55 methods: {
56 onShowTipsOverHandler(event, item, index) {
57 let child = event.currentTarget.childNodes[0];
58 child.style.display = "block";
59 },
60 onShowTipsOutHandler(event, item, index) {
61 let child = event.currentTarget.childNodes[0];
62 child.style.display = "none";
63 },
64 toContactUs() {
65 this.$router.push({
66 path: "/custom/service",
67 query: {
68 q: "m1"
69 }
70 });
71 },
72 queryList() {
73 if (this.policyList && this.policyList.length > 0) {
74 this.myPolicyList = this.policyList;
75 this.myPolicyList.forEach(element => {
76 element.activity = false;
77 })
78 this.initSelected();
79 } else {
80 this.checkCustomer().then(() => {
81 httpPost({
82 url: api.policyList,
83 sid: true
84 }).then(res => {
85 if (!res || res.length == 0) {
86 this.myPolicyList = null;
87 } else {
88 res.forEach(element => {
89 element.activity = false;
90 // let len = element.policyCode.length;
91 // element.policyCodeStr = element.policyCode && len > 5 ?
92 // element.policyCode.substring(0, 2) + "**********"
93 // + element.policyCode.substring(len - 4, len) : element.policyCode;
94 });
95 this.$store.commit("CACHE_POLICY_LIST", res);
96 this.myPolicyList = res;
97 }
98 this.initSelected();
99 }).catch(e => {
100 this.myPolicyList = null;
101 switch (e.code) {
102 case "2002":
103 // 不是客户，没有购买保单
104 break;
105 }
106 });
107 });
108
109 }
110 },
111 initSelected() {
112 let selectPolicy = null;
113 try {
114 let data = sessionStorage.getItem("_hklife_policy");
115 if (data) {
116 sessionStorage.removeItem("_hklife_policy");
117 selectPolicy = JSON.parse(decodeURIComponent(data));
118 if (selectPolicy) {
119 if (this.multiSelectable) {
120 this.selectPolicyCodes[selectPolicy.code] = selectPolicy;
121 } else {
122 this.selectPolicyCode = selectPolicy.code;
123 }
124 this.$emit("onSelect", [selectPolicy]);
125
126 // 判断最大显示
127 let index = -1;
128 for (let i = 0; i < this.myPolicyList.length; i++) {
129 if (selectPolicy.code == this.myPolicyList[i].policyCode) {
130 this.myPolicyList[i].activity = true;
131 index = i;
132 }
133 }
134 this.$set(this, "myPolicyList", this.myPolicyList);
135 if (index > 2) {
136 this.maxShow = this.myPolicyList.length;
137 }
138 }
139 }
140 } catch (e) {
141
142 }
143 if (!selectPolicy) {
144 let firstPolicy = this.myPolicyList[0];
145 this.myPolicyList[0].activity = true;
146 selectPolicy = {
147 id: firstPolicy.policyId,
148 code: firstPolicy.policyCode
149 };
150 if (this.multiSelectable) {
151 this.selectPolicyCodes[selectPolicy.code] = selectPolicy;
152 } else {
153 this.selectPolicyCode = selectPolicy.code;
154 }
155 this.$emit("onSelect", [selectPolicy]);
156 }
157 },
158 handlePolicySelect(item, index) {
159 let code = item.policyCode;
160 if (this.multiSelectable) {
161 let c = this.selectPolicyCodes[code];
162 if (!c || typeof c == "undefined") {
163 item.activity = true;
164 this.selectPolicyCodes[code] = {
165 code: code,
166 id: item.policyId
167 };
168 } else {
169 item.activity = false;
170 delete this.selectPolicyCodes[code];
171 }
172 // this.$set(this, 'myPolicyList', this.myPolicyList);
173 let data = [];
174 for (let key in this.selectPolicyCodes) {
175 data.push(this.selectPolicyCodes[key]);
176 }
177 this.$emit("onSelect", data);
178 } else {
179 if (code != this.selectPolicyCode) {
180 this.selectPolicyCode = code;
181 this.$emit("onSelect", [{
182 code: code,
183 id: item.policyId
184 }]);
185 }
186 }
187 },
188 isPolicySelect(item, index) {
189 let code = item.policyCode;
190 if (this.multiSelectable) {
191 let c = this.selectPolicyCodes[code];
192 if (!c || typeof c == "undefined") {
193 return false;
194 } else {
195 return true;
196 }
197 }
198 return false;
199 },
200 checkCustomer() {
201 return new Promise(resolve => {
202 resolve();
203 // httpPost({ url: api.profile, sid: true }).then(res => {
204 // if (res.isCustomer == 1) {
205 // resolve();
206 // } else {
207 // this.gotoCustomerAuthPage();
208 // }
209 // }).catch(res => {
210
211 // });
212 });
213 },
214 gotoCustomerAuthPage() {
215 let c = this.$route.fullPath;
216 this.$router.push({
217 name: "customerAuth",
218 query: {
219 c: c
220 }
221 });
222 },
223 formatMoney(s, t) {
224 if (typeof t == "undefined") {
225 t = 1;
226 }
227 return formatMoney(s, t);
228 },
229 // 保障年限，保n年
230 formatInsuredPeriod(t, v) {
231 return getInsuredPeriod(this.$i18n.locale, t, v);
232 },
233 formatInsuredState(c) {
234 return getInsuredState(this.$i18n.locale, c);
235 },
236 formatPolicyName(c, n) {
237 return getPolicyName(this.$i18n.locale, c, n);
238 },
239 downloadPolicy(policy) {
240 if (policy) {
241 httpPost({
242 url: api.getDownloadPath,
243 sid: true,
244 data: {
245 policyCode: policy.policyCode
246 }
247 }).then(res => {
248 if (res) {
249 let url = requestDomain() + api.downloadPolicy + "/" + res;
250 window.open(url);
251 } else {
252 this.showDownloadError = true;
253 }
254 });
255 }
256 }
257 },
258 components: {
259 Modal2Comp
260 },
261 mounted() {
262 this.queryList();
263 },
264 }
1 @import '@/styles/_support.scss';
2
3 .list-container {
4 overflow-x: auto;
5 margin-bottom: 24px;
6 }
7
8 .hide {
9 max-height: 0;
10 border-bottom: none;
11 }
12
13 .table-contaner {
14 position: relative;
15 }
16
17 .download {
18 position: relative;
19
20 &-tips {
21 display: none;
22 position: absolute;
23 top: -3px;
24 left: 20px;
25 z-index: 11;
26 padding: 2px;
27 @include border-tans();
28 min-width: 80px;
29 }
30 }
31
32 .guide {
33 position: absolute;
34 transition: all 0.5s;
35 cursor: pointer;
36 width: 12px;
37 height: 8px;
38 background: url("~@/assets/images/insurance-query/triangle-down2.png") no-repeat center center;
39 background-size: 100% 100%;
40 top: 16px;
41 right: 26px;
42 }
43
44 .rotate180 {
45 transform: rotate(180deg);
46 transition: all 0.5s;
47 }
48
49 .cell-group {
50 margin-bottom: 12px;
51
52 &:last-child {
53 margin-bottom: 0;
54 }
55
56 div {
57 color: #4c4948;
58 }
59
60 .w1 {
61 // width: 120px;
62 width: 240px;
63 text-align: center;
64 }
65
66 .w2 {
67 // width: 75px;
68 width: 150px;
69 text-align: center;
70 }
71
72 .table-header {
73 // width: 770px;
74 height: 39px;
75 border-top-left-radius: 8px;
76 border-top-right-radius: 8px;
77 background-color: #f2f2f2;
78 display: flex;
79 align-items: center;
80
81 .normal-header {
82 // width: 706px;
83 @extend .bb;
84 padding: 0 32px;
85 width: 100%;
86 margin: auto;
87 display: flex;
88 justify-content: space-between;
89 align-items: center;
90
91 .title {
92 font-weight: bold;
93 color: #575453;
94 }
95
96 .guide {
97 transition: all 0.5s;
98 cursor: pointer;
99 width: 12px;
100 height: 8px;
101 background: url("~@/assets/images/insurance-query/triangle-down.png") no-repeat center center;
102 background-size: 100% 100%;
103 }
104
105 .rotate180 {
106 transform: rotate(180deg);
107 transition: all 0.5s;
108 }
109 }
110 }
111
112 .table-content {
113 // width: 770px;
114
115 height: auto;
116 max-height: 600px;
117 // display: inline-block;
118 border-bottom-left-radius: 8px;
119 border-bottom-right-radius: 8px;
120 border-left: solid 1px #f2f2f2;
121 border-right: solid 1px #f2f2f2;
122 border-bottom: solid 1px #f2f2f2;
123 padding: 0 32px;
124 transition: max-height ease-out 0.3s !important;
125 overflow: auto;
126
127 .data-line {
128 // padding: 0 32px;
129 height: 50px;
130 margin: auto;
131 display: flex;
132 justify-content: space-between;
133 align-items: center;
134
135 .td {
136 display: flex;
137 justify-content: center;
138 align-items: center;
139
140
141 }
142
143 .cell1 {
144 width: 98%;
145 display: flex;
146 justify-content: space-between;
147 margin: auto;
148 }
149
150 .separator-v {
151 height: 30px;
152 width: 2px;
153 background-color: #f2f2f2;
154 margin: 0 11px;
155 }
156 }
157
158 .label span {
159 color: $cOrange;
160 margin-left: 7px;
161 cursor: pointer;
162 text-decoration: underline;
163 }
164
165 .separator-h {
166 width: 100%;
167 height: 1px;
168 background-color: #f2f2f2;
169 }
170 }
171
172 .orange {
173 background-color: $cOrange;
174
175 div {
176 color: #ffffff;
177 }
178 }
179
180 .hide {
181 max-height: 0;
182 border-bottom: none;
183 }
184
185 .sp {
186 text-decoration: underline;
187 padding: 0 4.8px;
188 }
189
190 .ac {
191 color: $cOrange !important;
192 }
193 }
194
195 .show-more-btn {
196 width: 100%;
197 color: $cOrange !important;
198 text-decoration: underline;
199 cursor: pointer;
200 justify-content: center !important;
201 }
202
203 .pointer {
204 cursor: pointer;
205 }
206
207 .activity {
208 background-color: $cOrange !important;
209 opacity: .5;
210
211 div {
212 color: #FFFFFF !important;
213 }
214 }
215
216 .empty {
217 height: 500px;
218 display: flex;
219 align-items: center;
220 justify-content: center;
221
222 .tips {
223 align-items: center;
224 display: flex;
225
226 .icon {
227 margin-right: 5px;
228 display: inline-block;
229 }
230
231 .btn {
232 color: $cOrange;
233 }
234 }
235 }
236
1 <template>
2 <div class="list-container">
3 <modal2-comp :visible="showDownloadError" :close="()=>{showDownloadError = false}" :content="$t('glbalTips.sysError')"></modal2-comp>
4 <div class="cell-group">
5 <div class="table-contaner">
6 <div class="table-header orange" >
7 <div class="normal-header">
8 <div class="td w1">{{$t('customService.insuranceQuery.InsurantNumber')}}</div>
9 <div class="td w2">{{$t('customService.insuranceQuery.policyState')}}</div>
10 <div class="td w2">{{$t('customService.insuranceQuery.activeDate')}}</div>
11 <div class="td w2">{{$t('customService.insuranceQuery.Insurant')}}</div>
12 <div class="td w1">{{$t('customService.insuranceQuery.InsurantName')}}</div>
13 <div class="td w2">{{$t('customService.insuranceQuery.InsurantAmount')}}</div>
14 <div class="td w2">{{$t('customService.insuranceQuery.effectiveDate')}}</div>
15 <div class="td w2">{{$t('customService.insuranceQuery.period')}}</div>
16 </div>
17 </div>
18 <div class="guide" :class="{rotate180 : hide}" @click="hide = !hide"></div>
19 </div>
20 <div class="table-content" :class="{hide : hide}">
21 <template v-if="myPolicyList">
22 <div v-for="(item,index) in myPolicyList" :key="index">
23 <template v-if="index < maxShow">
24 <div class="data-line" @click="handlePolicySelect(item,index)">
25 <div class="td w1 pointer">
26 <template v-if="multiSelectable">
27 <img v-if="item.activity" class="icon-check pointer" src="@/assets/images/insurance-query/check.png">
28 <img v-else class="icon-check pointer" src="@/assets/images/insurance-query/un-check.png">
29 <span class="sp" :class="{ac: item.activity}">{{item.policyCode}}</span>
30 </template>
31 <template v-else>
32 <template v-if="model != 'download'">
33 <img v-if="selectPolicyCode == item.policyCode" class="icon-check pointer" src="@/assets/images/insurance-query/check.png">
34 <img v-else class="icon-check pointer" src="@/assets/images/insurance-query/un-check.png">
35 </template>
36 <span class="sp" :class="{ac: selectPolicyCode == item.policyCode}">{{item.policyCode}}</span>
37 <template v-if="model == 'download'">
38 <div class="download" @mouseover="onShowTipsOverHandler($event,item,index)" @mouseout="onShowTipsOutHandler($event,item,index)" @click="downloadPolicy(item)">
39 <div class="download-tips">
40 <div class="cont">{{$t('customService.insuranceQuery.downloadClick')}}</div>
41 </div>
42 <img class="icon-download" src="@/assets/images/insurance-query/icon-down-load.png" alt="">
43 </div>
44 </template>
45 </template>
46 </div>
47
48 <div class="td w2">{{formatInsuredState(item.policyState)}}</div>
49 <div class="td w2">{{item.activeDate?item.activeDate.split(" ")[0]:""}}</div>
50 <div class="td w2">{{lan == 'en' ? (item.insuredNameEn ? item.insuredNameEn : item.insuredNameCn) : (item.insuredNameCn ? item.insuredNameCn : item.insuredNameEn)}}</div>
51 <div class="td w1">{{formatPolicyName(item.productCode, item.productName)}}</div>
52 <div class="td w2">{{item.moneyCode}} {{formatMoney(item.amount,0)}}</div>
53 <div class="td w2">{{item.expireAt?item.expireAt.split(" ")[0]:""}}</div>
54 <!-- <div class="td w2">{{item.guaranteeAge?item.guaranteeAge.split(" ")[0]:""}}</div> -->
55 <div class="td w2">{{formatInsuredPeriod(item.insuredPeriodType,item.insuredPeriodValue)}}</div>
56
57 </div>
58 <div class="separator-h" v-if="index < myPolicyList.length - 1 && index < maxShow - 1"></div>
59 </template>
60 </div>
61 <template v-if="!policyList || maxShow < policyList.length">
62 <div class="separator-h"></div>
63 <div class="data-line show-more-btn" @click="maxShow = policyList.length">{{$t('customService.insuranceQuery.showMore')}}</div>
64 </template>
65 </template>
66
67 <template v-else>
68 <div class="empty">
69 <div class="tips">
70 <img class="icon" src="@/assets/images/common/icon-alert-i.png" alt="">
71 <div class="txt">
72 {{$t('customService.insuranceQuery.noPolicy')}}
73 <span class="pointer btn" @click="toContactUs">{{$t('customService.insuranceQuery.customService')}}</span>
74 </div>
75 </div>
76 </div>
77 </template>
78 </div>
79 </div>
80 </div>
81 </template>
82
83
84 <script src="./policy-head-list.js"></script>
85 <style lang="scss" scoped>
86 @import "./policy-head-list.scss";
87 </style>
1 @import '@/styles/_support.scss'; 1 @import "@/styles/_support.scss";
2
3 .list-container { 2 .list-container {
4 overflow-x: auto; 3 overflow-x: auto;
5 margin-bottom: 24px; 4 margin-bottom: 24px;
5 font-size: $fontSize-M2;
6 } 6 }
7 7
8 .hide { 8 .hide {
...@@ -16,7 +16,6 @@ ...@@ -16,7 +16,6 @@
16 16
17 .download { 17 .download {
18 position: relative; 18 position: relative;
19
20 &-tips { 19 &-tips {
21 display: none; 20 display: none;
22 position: absolute; 21 position: absolute;
...@@ -35,7 +34,8 @@ ...@@ -35,7 +34,8 @@
35 cursor: pointer; 34 cursor: pointer;
36 width: 12px; 35 width: 12px;
37 height: 8px; 36 height: 8px;
38 background: url("~@/assets/images/insurance-query/triangle-down2.png") no-repeat center center; 37 background: url("~@/assets/images/insurance-query/triangle-down2.png")
38 no-repeat center center;
39 background-size: 100% 100%; 39 background-size: 100% 100%;
40 top: 16px; 40 top: 16px;
41 right: 26px; 41 right: 26px;
...@@ -48,36 +48,30 @@ ...@@ -48,36 +48,30 @@
48 48
49 .cell-group { 49 .cell-group {
50 margin-bottom: 12px; 50 margin-bottom: 12px;
51
52 &:last-child { 51 &:last-child {
53 margin-bottom: 0; 52 margin-bottom: 0;
54 } 53 }
55
56 div { 54 div {
57 color: #4c4948; 55 color: #4c4948;
58 } 56 }
59
60 .w1 { 57 .w1 {
61 // width: 120px; 58 // width: 120px;
62 width: 240px; 59 width: 240px;
63 text-align: center; 60 text-align: center;
64 } 61 }
65
66 .w2 { 62 .w2 {
67 // width: 75px; 63 // width: 75px;
68 width: 150px; 64 width: 150px;
69 text-align: center; 65 text-align: center;
70 } 66 }
71
72 .table-header { 67 .table-header {
73 // width: 770px; 68 // width: 770px;
74 height: 39px; 69 height: 50px;
75 border-top-left-radius: 8px; 70 border-top-left-radius: 8px;
76 border-top-right-radius: 8px; 71 border-top-right-radius: 8px;
77 background-color: #f2f2f2; 72 background-color: #f2f2f2;
78 display: flex; 73 display: flex;
79 align-items: center; 74 align-items: center;
80
81 .normal-header { 75 .normal-header {
82 // width: 706px; 76 // width: 706px;
83 @extend .bb; 77 @extend .bb;
...@@ -87,31 +81,27 @@ ...@@ -87,31 +81,27 @@
87 display: flex; 81 display: flex;
88 justify-content: space-between; 82 justify-content: space-between;
89 align-items: center; 83 align-items: center;
90
91 .title { 84 .title {
92 font-weight: bold; 85 font-weight: bold;
93 color: #575453; 86 color: #575453;
94 } 87 }
95
96 .guide { 88 .guide {
97 transition: all 0.5s; 89 transition: all 0.5s;
98 cursor: pointer; 90 cursor: pointer;
99 width: 12px; 91 width: 12px;
100 height: 8px; 92 height: 8px;
101 background: url("~@/assets/images/insurance-query/triangle-down.png") no-repeat center center; 93 background: url("~@/assets/images/insurance-query/triangle-down.png")
94 no-repeat center center;
102 background-size: 100% 100%; 95 background-size: 100% 100%;
103 } 96 }
104
105 .rotate180 { 97 .rotate180 {
106 transform: rotate(180deg); 98 transform: rotate(180deg);
107 transition: all 0.5s; 99 transition: all 0.5s;
108 } 100 }
109 } 101 }
110 } 102 }
111
112 .table-content { 103 .table-content {
113 // width: 770px; 104 // width: 770px;
114
115 height: auto; 105 height: auto;
116 max-height: 600px; 106 max-height: 600px;
117 // display: inline-block; 107 // display: inline-block;
...@@ -123,30 +113,24 @@ ...@@ -123,30 +113,24 @@
123 padding: 0 32px; 113 padding: 0 32px;
124 transition: max-height ease-out 0.3s !important; 114 transition: max-height ease-out 0.3s !important;
125 overflow: auto; 115 overflow: auto;
126
127 .data-line { 116 .data-line {
128 // padding: 0 32px; 117 // padding: 0 32px;
129 height: 50px; 118 height: 58px;
130 margin: auto; 119 margin: auto;
131 display: flex; 120 display: flex;
132 justify-content: space-between; 121 justify-content: space-between;
133 align-items: center; 122 align-items: center;
134
135 .td { 123 .td {
136 display: flex; 124 display: flex;
137 justify-content: center; 125 justify-content: center;
138 align-items: center; 126 align-items: center;
139
140
141 } 127 }
142
143 .cell1 { 128 .cell1 {
144 width: 98%; 129 width: 98%;
145 display: flex; 130 display: flex;
146 justify-content: space-between; 131 justify-content: space-between;
147 margin: auto; 132 margin: auto;
148 } 133 }
149
150 .separator-v { 134 .separator-v {
151 height: 30px; 135 height: 30px;
152 width: 2px; 136 width: 2px;
...@@ -154,39 +138,35 @@ ...@@ -154,39 +138,35 @@
154 margin: 0 11px; 138 margin: 0 11px;
155 } 139 }
156 } 140 }
157
158 .label span { 141 .label span {
159 color: $cOrange; 142 color: $cOrange;
160 margin-left: 7px; 143 margin-left: 7px;
161 cursor: pointer; 144 cursor: pointer;
162 text-decoration: underline; 145 text-decoration: underline;
163 } 146 }
164
165 .separator-h { 147 .separator-h {
166 width: 100%; 148 width: 100%;
167 height: 1px; 149 height: 2px;
168 background-color: #f2f2f2; 150 background-color: #f2f2f2;
169 } 151 }
170 } 152 }
171
172 .orange { 153 .orange {
173 background-color: $cOrange; 154 background-color: $cOrange;
174
175 div { 155 div {
176 color: #ffffff; 156 color: #ffffff;
177 } 157 }
178 } 158 }
179 159 .new {
160 @include linear-bg;
161 }
180 .hide { 162 .hide {
181 max-height: 0; 163 max-height: 0;
182 border-bottom: none; 164 border-bottom: none;
183 } 165 }
184
185 .sp { 166 .sp {
186 text-decoration: underline; 167 text-decoration: underline;
187 padding: 0 4.8px; 168 padding: 0 4.8px;
188 } 169 }
189
190 .ac { 170 .ac {
191 color: $cOrange !important; 171 color: $cOrange !important;
192 } 172 }
...@@ -206,10 +186,9 @@ ...@@ -206,10 +186,9 @@
206 186
207 .activity { 187 .activity {
208 background-color: $cOrange !important; 188 background-color: $cOrange !important;
209 opacity: .5; 189 opacity: 0.5;
210
211 div { 190 div {
212 color: #FFFFFF !important; 191 color: #ffffff !important;
213 } 192 }
214 } 193 }
215 194
...@@ -218,19 +197,24 @@ ...@@ -218,19 +197,24 @@
218 display: flex; 197 display: flex;
219 align-items: center; 198 align-items: center;
220 justify-content: center; 199 justify-content: center;
221
222 .tips { 200 .tips {
223 align-items: center; 201 align-items: center;
224 display: flex; 202 display: flex;
225
226 .icon { 203 .icon {
227 margin-right: 5px; 204 margin-right: 5px;
228 display: inline-block; 205 display: inline-block;
229 } 206 }
230
231 .btn { 207 .btn {
232 color: $cOrange; 208 color: $cOrange;
233 } 209 }
234 } 210 }
235 } 211 }
236 212
213 @media (max-width: 1200px) {
214 .list-container {
215 display: -webkit-box;
216 overflow-x: auto;
217 -webkit-overflow-scrolling: touch;
218 width: 92vw;
219 }
220 }
...\ No newline at end of file ...\ No newline at end of file
......
...@@ -3,11 +3,11 @@ ...@@ -3,11 +3,11 @@
3 <modal2-comp :visible="showDownloadError" :close="()=>{showDownloadError = false}" :content="$t('glbalTips.sysError')"></modal2-comp> 3 <modal2-comp :visible="showDownloadError" :close="()=>{showDownloadError = false}" :content="$t('glbalTips.sysError')"></modal2-comp>
4 <div class="cell-group"> 4 <div class="cell-group">
5 <div class="table-contaner"> 5 <div class="table-contaner">
6 <div class="table-header orange" > 6 <div class="table-header orange new" >
7 <div class="normal-header"> 7 <div class="normal-header">
8 <div class="td w1">{{$t('customService.insuranceQuery.InsurantNumber')}}</div> 8 <div class="td w1">{{$t('customService.insuranceQuery.InsurantNumber')}}</div>
9 <div class="td w2">{{$t('customService.insuranceQuery.policyState')}}</div> 9 <!-- <div class="td w2">{{$t('customService.insuranceQuery.policyState')}}</div>
10 <div class="td w2">{{$t('customService.insuranceQuery.activeDate')}}</div> 10 <div class="td w2">{{$t('customService.insuranceQuery.activeDate')}}</div> -->
11 <div class="td w2">{{$t('customService.insuranceQuery.Insurant')}}</div> 11 <div class="td w2">{{$t('customService.insuranceQuery.Insurant')}}</div>
12 <div class="td w1">{{$t('customService.insuranceQuery.InsurantName')}}</div> 12 <div class="td w1">{{$t('customService.insuranceQuery.InsurantName')}}</div>
13 <div class="td w2">{{$t('customService.insuranceQuery.InsurantAmount')}}</div> 13 <div class="td w2">{{$t('customService.insuranceQuery.InsurantAmount')}}</div>
...@@ -45,8 +45,8 @@ ...@@ -45,8 +45,8 @@
45 </template> 45 </template>
46 </div> 46 </div>
47 47
48 <div class="td w2">{{formatInsuredState(item.policyState)}}</div> 48 <!-- <div class="td w2">{{formatInsuredState(item.policyState)}}</div> -->
49 <div class="td w2">{{item.activeDate?item.activeDate.split(" ")[0]:""}}</div> 49 <!-- <div class="td w2">{{item.activeDate?item.activeDate.split(" ")[0]:""}}</div> -->
50 <div class="td w2">{{lan == 'en' ? (item.insuredNameEn ? item.insuredNameEn : item.insuredNameCn) : (item.insuredNameCn ? item.insuredNameCn : item.insuredNameEn)}}</div> 50 <div class="td w2">{{lan == 'en' ? (item.insuredNameEn ? item.insuredNameEn : item.insuredNameCn) : (item.insuredNameCn ? item.insuredNameCn : item.insuredNameEn)}}</div>
51 <div class="td w1">{{formatPolicyName(item.productCode, item.productName)}}</div> 51 <div class="td w1">{{formatPolicyName(item.productCode, item.productName)}}</div>
52 <div class="td w2">{{item.moneyCode}} {{formatMoney(item.amount,0)}}</div> 52 <div class="td w2">{{item.moneyCode}} {{formatMoney(item.amount,0)}}</div>
......
...@@ -87,20 +87,20 @@ ...@@ -87,20 +87,20 @@
87 .eye-act { 87 .eye-act {
88 background-image: url("~@/assets/images/common/icon-eyes-on.png"); 88 background-image: url("~@/assets/images/common/icon-eyes-on.png");
89 } 89 }
90 }
91 90
92 .ipt:focus { 91 .ipt:focus {
93 border-color: $cOrange !important; 92 border-color: $cOrange !important;
94 } 93 }
95 94
96 .ipt.err { 95 .ipt.err {
97 border-color: $cOrange !important; 96 border-color: $cOrange !important;
98 } 97 }
99 98
100 .err { 99 .err {
101 .ipt { 100 .ipt {
102 border-color: $cOrange !important; 101 border-color: $cOrange !important;
103 } 102 }
103 }
104 } 104 }
105 105
106 // 输入框 106 // 输入框
...@@ -122,7 +122,7 @@ ...@@ -122,7 +122,7 @@
122 flex: 1; 122 flex: 1;
123 display: flex; 123 display: flex;
124 align-items: center; 124 align-items: center;
125 font-size: 22px; 125 font-size: 18px;
126 color: $cFontGray2; 126 color: $cFontGray2;
127 127
128 &:lang(zh) { 128 &:lang(zh) {
......
...@@ -17,7 +17,7 @@ ...@@ -17,7 +17,7 @@
17 } 17 }
18 18
19 // 超过多少行自动省略 默认一行 19 // 超过多少行自动省略 默认一行
20 @mixin ellipsis($line:1) { 20 @mixin ellipsis($line: 1) {
21 display: -webkit-box; 21 display: -webkit-box;
22 word-break: break-all; 22 word-break: break-all;
23 -webkit-box-orient: vertical; 23 -webkit-box-orient: vertical;
...@@ -50,13 +50,11 @@ ...@@ -50,13 +50,11 @@
50 50
51 // 清除浮动 51 // 清除浮动
52 @mixin clearfix() { 52 @mixin clearfix() {
53
54 &:before, 53 &:before,
55 &:after { 54 &:after {
56 content: " "; // 1 55 content: " "; // 1
57 display: table; // 2 56 display: table; // 2
58 } 57 }
59
60 &:after { 58 &:after {
61 clear: both; 59 clear: both;
62 } 60 }
...@@ -101,9 +99,8 @@ ...@@ -101,9 +99,8 @@
101 border: 0; 99 border: 0;
102 } 100 }
103 101
104
105 // 橙色按钮 102 // 橙色按钮
106 @mixin btc2($wid:63px, $hei:30px, $fontSize:12px) { 103 @mixin btc2($wid: 63px, $hei: 30px, $fontSize: 12px) {
107 width: $wid; 104 width: $wid;
108 height: $hei; 105 height: $hei;
109 line-height: $hei; 106 line-height: $hei;
...@@ -119,11 +116,9 @@ ...@@ -119,11 +116,9 @@
119 background-blend-mode: soft-light; 116 background-blend-mode: soft-light;
120 background-image: linear-gradient(to bottom, #ec6429, #ec6429), linear-gradient(to top, #000000, #ffffff); 117 background-image: linear-gradient(to bottom, #ec6429, #ec6429), linear-gradient(to top, #000000, #ffffff);
121 // background-image: linear-gradient(to top, #000000, #ffffff), linear-gradient(to bottom, #ec6429, #ec6429); 118 // background-image: linear-gradient(to top, #000000, #ffffff), linear-gradient(to bottom, #ec6429, #ec6429);
122
123 } 119 }
124 120
125 121 @mixin btc3($wid: 63px, $hei: 30px, $fontSize: 12px) {
126 @mixin btc3($wid:63px, $hei:30px, $fontSize:12px) {
127 width: $wid; 122 width: $wid;
128 height: $hei; 123 height: $hei;
129 line-height: $hei; 124 line-height: $hei;
...@@ -134,7 +129,7 @@ ...@@ -134,7 +129,7 @@
134 border: solid 1px #006441; 129 border: solid 1px #006441;
135 } 130 }
136 131
137 @mixin btc4($wid:288px, $hei:60px, $fontSize:12px) { 132 @mixin btc4($wid: 288px, $hei: 60px, $fontSize: 18px) {
138 width: $wid; 133 width: $wid;
139 height: $hei; 134 height: $hei;
140 line-height: $hei; 135 line-height: $hei;
...@@ -148,14 +143,12 @@ ...@@ -148,14 +143,12 @@
148 letter-spacing: 1.4px; 143 letter-spacing: 1.4px;
149 } 144 }
150 145
151 146 @mixin content-percent($percent: 4%) {
152 @mixin content-percent($percent:4%) {
153 box-sizing: border-box; 147 box-sizing: border-box;
154 padding: 0 $percent; 148 padding: 0 $percent;
155
156 } 149 }
157 150
158 @mixin border-tans($borderRadius:1px, $borderSize:2px) { 151 @mixin border-tans($borderRadius: 1px, $borderSize: 2px) {
159 border: $borderSize solid transparent; 152 border: $borderSize solid transparent;
160 background-clip: padding-box, border-box; 153 background-clip: padding-box, border-box;
161 background-origin: padding-box, border-box; 154 background-origin: padding-box, border-box;
......
...@@ -60,3 +60,8 @@ $--font-path: "~element-ui/lib/theme-chalk/fonts"; ...@@ -60,3 +60,8 @@ $--font-path: "~element-ui/lib/theme-chalk/fonts";
60 font-size: 22px; 60 font-size: 22px;
61 font-weight: bold; 61 font-weight: bold;
62 } 62 }
63
64 .policy-change-contact .el-input__inner {
65 font-size: 18px;
66 color: $cFontGray2;
67 }
......