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 1180 additions and 564 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 @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;
6 font-size: $fontSize-M2; 5 font-size: $fontSize-M2;
7 } 6 }
8 7
9 .hide { 8 .hide {
10 max-height: 0; 9 max-height: 0;
11 border-bottom: none; 10 border-bottom: none;
12 } 11 }
13 12
14 .table-contaner { 13 .table-contaner {
15 position: relative; 14 position: relative;
16 } 15 }
17 16
18 .download { 17 .download {
19 position: relative; 18 position: relative;
20 display: flex; 19 display: flex;
21 align-items: center; 20 align-items: center;
22 21 &-tips {
23 &-tips { 22 display: none;
24 display: none; 23 position: absolute;
25 position: absolute; 24 top: 0px;
26 top: 0px; 25 left: 20px;
27 left: 20px; 26 z-index: 11;
28 z-index: 11; 27 padding: 2px;
29 padding: 2px; 28 @include border-tans();
30 @include border-tans(); 29 min-width: 88px;
31 min-width: 88px; 30 padding: 4px;
32 padding: 4px; 31 }
33 } 32 .icon-download {
34 33 margin-right: 4px;
35 .icon-download { 34 }
36 margin-right: 4px; 35 .desc {
37 } 36 padding: 0;
38 .desc{ 37 }
39 padding: 0;
40 }
41 } 38 }
42 39
43 .guide { 40 .guide {
44 position: absolute; 41 position: absolute;
45 transition: all 0.5s; 42 transition: all 0.5s;
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; 47 background-size: 100% 100%;
51 background-size: 100% 100%; 48 top: 16px;
52 top: 16px; 49 right: 26px;
53 right: 26px;
54 } 50 }
55 51
56 .rotate180 { 52 .rotate180 {
57 transform: rotate(180deg); 53 transform: rotate(180deg);
58 transition: all 0.5s; 54 transition: all 0.5s;
59 } 55 }
60 56
61 .cell-group { 57 .cell-group {
62 margin-bottom: 12px; 58 margin-bottom: 12px;
63 59 &:last-child {
64 &:last-child { 60 margin-bottom: 0;
65 margin-bottom: 0;
66 }
67
68 div {
69 color: #4c4948;
70 }
71
72 .td {
73 position: relative;
74 @extend .fcc;
75 text-align: center;
76 }
77
78 .w1 {
79 width: 180px;
80 }
81
82 .w2 {
83 width: 240px;
84 }
85
86 .w3 {
87 width: 140px;
88 }
89 .w4 {
90 width: 120px;
91 }
92 .w5 {
93 width: 100px;
94 }
95
96 .table-header {
97 height: 50px;
98 border-top-left-radius: 8px;
99 border-top-right-radius: 8px;
100 background-color: #f2f2f2;
101 display: flex;
102 align-items: center;
103
104 .normal-header {
105 // width: 706px;
106 @extend .bb;
107 padding: 0 32px;
108 width: 100%;
109 margin: auto;
110 display: flex;
111 justify-content: space-between;
112 align-items: center;
113
114 .title {
115 font-weight: bold;
116 color: #575453;
117 }
118
119 .guide {
120 transition: all 0.5s;
121 cursor: pointer;
122 width: 12px;
123 height: 8px;
124 background: url("~@/assets/images/insurance-query/triangle-down.png")
125 no-repeat center center;
126 background-size: 100% 100%;
127 }
128
129 .rotate180 {
130 transform: rotate(180deg);
131 transition: all 0.5s;
132 }
133 } 61 }
134 } 62 div {
135 63 color: #4c4948;
136 .table-content { 64 }
137 // width: 770px; 65 .td {
138
139 height: auto;
140 max-height: 600px;
141 // display: inline-block;
142 border-bottom-left-radius: 8px;
143 border-bottom-right-radius: 8px;
144 border-left: solid 1px #f2f2f2;
145 border-right: solid 1px #f2f2f2;
146 border-bottom: solid 1px #f2f2f2;
147 padding: 0 32px;
148 transition: max-height ease-out 0.3s !important;
149 overflow: auto;
150
151 .data-line {
152 // padding: 0 32px;
153 height: 50px;
154 margin: auto;
155 display: flex;
156 justify-content: space-between;
157 align-items: center;
158
159 .td {
160 position: relative; 66 position: relative;
67 @extend .fcc;
68 text-align: center;
69 }
70 .w1 {
71 width: 180px;
72 }
73 .w2 {
74 width: 240px;
75 }
76 .w3 {
77 width: 140px;
78 }
79 .w4 {
80 width: 120px;
81 }
82 .w5 {
83 width: 100px;
84 }
85 .table-header {
86 height: 50px;
87 border-top-left-radius: 8px;
88 border-top-right-radius: 8px;
89 background-color: #f2f2f2;
161 display: flex; 90 display: flex;
162 justify-content: center;
163 align-items: center; 91 align-items: center;
164 } 92 .normal-header {
165 93 // width: 706px;
166 .cell1 { 94 @extend .bb;
167 width: 98%; 95 padding: 0 32px;
168 display: flex; 96 width: 100%;
169 justify-content: space-between; 97 margin: auto;
170 margin: auto; 98 display: flex;
171 } 99 justify-content: space-between;
172 100 align-items: center;
173 .separator-v { 101 .title {
174 height: 30px; 102 font-weight: bold;
175 width: 2px; 103 color: #575453;
176 background-color: #f2f2f2; 104 }
177 margin: 0 11px; 105 .guide {
178 } 106 transition: all 0.5s;
107 cursor: pointer;
108 width: 12px;
109 height: 8px;
110 background: url("~@/assets/images/insurance-query/triangle-down.png") no-repeat center center;
111 background-size: 100% 100%;
112 }
113 .rotate180 {
114 transform: rotate(180deg);
115 transition: all 0.5s;
116 }
117 }
179 } 118 }
180 119 .table-content {
181 .label span { 120 // width: 770px;
182 color: $cOrange; 121 height: auto;
183 margin-left: 7px; 122 max-height: 600px;
184 cursor: pointer; 123 // display: inline-block;
185 text-decoration: underline; 124 border-bottom-left-radius: 8px;
125 border-bottom-right-radius: 8px;
126 border-left: solid 1px #f2f2f2;
127 border-right: solid 1px #f2f2f2;
128 border-bottom: solid 1px #f2f2f2;
129 padding: 0 32px;
130 transition: max-height ease-out 0.3s !important;
131 overflow: auto;
132 .data-line {
133 // padding: 0 32px;
134 height: 58px;
135 margin: auto;
136 display: flex;
137 justify-content: space-between;
138 align-items: center;
139 .td {
140 position: relative;
141 display: flex;
142 justify-content: center;
143 align-items: center;
144 }
145 .cell1 {
146 width: 98%;
147 display: flex;
148 justify-content: space-between;
149 margin: auto;
150 }
151 .separator-v {
152 height: 30px;
153 width: 2px;
154 background-color: #f2f2f2;
155 margin: 0 11px;
156 }
157 }
158 .label span {
159 color: $cOrange;
160 margin-left: 7px;
161 cursor: pointer;
162 text-decoration: underline;
163 }
164 .separator-h {
165 width: 100%;
166 height: 2px;
167 background-color: #f2f2f2;
168 }
186 } 169 }
187 170 .orange {
188 .separator-h { 171 background-color: $cOrange;
189 width: 100%; 172 div {
190 height: 1px; 173 color: #ffffff;
191 background-color: #f2f2f2; 174 }
192 } 175 }
193 } 176 .new {
194 177 @include linear-bg;
195 .orange { 178 }
196 background-color: $cOrange; 179 .hide {
197 180 max-height: 0;
198 div { 181 border-bottom: none;
199 color: #ffffff; 182 }
183 .sp {
184 text-decoration: underline;
185 padding: 0 4.8px;
186 }
187 .ac {
188 color: $cOrange !important;
200 } 189 }
201 }
202
203 .new {
204 @include linear-bg;
205 }
206
207 .hide {
208 max-height: 0;
209 border-bottom: none;
210 }
211
212 .sp {
213 text-decoration: underline;
214 padding: 0 4.8px;
215 }
216
217 .ac {
218 color: $cOrange !important;
219 }
220 } 190 }
221 191
222 .show-more-btn { 192 .show-more-btn {
223 width: 100%; 193 width: 100%;
224 color: $cOrange !important; 194 color: $cOrange !important;
225 text-decoration: underline; 195 text-decoration: underline;
226 cursor: pointer; 196 cursor: pointer;
227 justify-content: center !important; 197 justify-content: center !important;
228 } 198 }
229 199
230 .pointer { 200 .pointer {
231 cursor: pointer; 201 cursor: pointer;
232 } 202 }
233 203
234 .activity { 204 .activity {
235 background-color: $cOrange !important; 205 background-color: $cOrange !important;
236 opacity: 0.5; 206 opacity: 0.5;
237 207 div {
238 div { 208 color: #ffffff !important;
239 color: #ffffff !important; 209 }
240 }
241 } 210 }
242 211
243 .empty { 212 .empty {
244 height: 500px; 213 height: 500px;
245 display: flex;
246 align-items: center;
247 justify-content: center;
248
249 .tips {
250 align-items: center;
251 display: flex; 214 display: flex;
252 215 align-items: center;
253 .icon { 216 justify-content: center;
254 margin-right: 5px; 217 .tips {
255 display: inline-block; 218 align-items: center;
256 } 219 display: flex;
257 220 .icon {
258 .btn { 221 margin-right: 5px;
259 color: $cOrange; 222 display: inline-block;
223 }
224 .btn {
225 color: $cOrange;
226 }
260 } 227 }
261 }
262 } 228 }
263 229
264 .down-arrow { 230 .down-arrow {
265 background-image: url("~@/assets/images/common/down-arrow-white.png"); 231 background-image: url("~@/assets/images/common/down-arrow-white.png");
266 width: 16px; 232 width: 16px;
267 height: 12px; 233 height: 12px;
268 background-repeat: no-repeat; 234 background-repeat: no-repeat;
269 background-position: center; 235 background-position: center;
270 background-size: 100% 100%; 236 background-size: 100% 100%;
271 margin-left: 7px; 237 margin-left: 7px;
272 cursor: pointer; 238 cursor: pointer;
273 } 239 }
...\ No newline at end of file ...\ No newline at end of file
......
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(() => {
110 this.loading = false;
111 this.showSuccess();
112 }).catch(err => {
113 this.loading = false;
114 if (err.code == 404) {
115 this.$refs.auth.noAuth();
116 }
117 }) 133 })
134 .then(() => {
135 this.loading = false;
136 this.showSuccess();
137 })
138 .catch(err => {
139 this.loading = false;
140 if (err.code == 404) {
141 this.$refs.auth.noAuth();
142 }
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,23 +181,25 @@ export default { ...@@ -155,23 +181,25 @@ 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 })
159 this.data = {}; 185 .then(response => {
160 if (response) { 186 this.data = {};
161 this.loading = false; 187 if (response) {
162 this.dataInit = true; 188 this.loading = false;
163 this.data.mobile = response.clientMobileNo; 189 this.dataInit = true;
164 this.checked1 = "1" == response.clientMobileAcceptMessage; 190 this.data.mobile = response.clientMobileNo;
165 this.data.address = response.clientContactAddress; 191 this.checked1 = "1" == response.clientMobileAcceptMessage;
166 this.checked2 = "1" == response.clientAddressAcceptMessage; 192 this.data.address = response.clientContactAddress;
167 this.data.email = response.clientEmail; 193 this.checked2 = "1" == response.clientAddressAcceptMessage;
168 this.checked3 = "1" == response.clientEmailAcceptMessage; 194 this.data.email = response.clientEmail;
169 } 195 this.checked3 = "1" == response.clientEmailAcceptMessage;
170 }).catch(res => { 196 }
171 if (res.code == "404") { 197 })
172 this.$refs.auth.noAuth(); 198 .catch(res => {
173 } 199 if (res.code == "404") {
174 }); 200 this.$refs.auth.noAuth();
201 }
202 });
175 }, 203 },
176 handlePolicySelect(data) { 204 handlePolicySelect(data) {
177 this.selectedPolicies = data; 205 this.selectedPolicies = data;
...@@ -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 <auth @onLogin="userLogin" @onLogout="userLogout" :checkProfile="true" ref="auth" :tipModel="'m2'"></auth> 4 <!-- 该input用于防止chrome自动填充 -->
5 <modal-comp :visible="modalVisiable" :show-confirm="false" :icon="modalIcon" :content="modalContent" :confirm="modalCallback" :overlay="modalCallback"></modal-comp> 5 <input type="password" style="display: none;" />
6 <template v-if="showForm"> 6 <auth @onLogin="userLogin" @onLogout="userLogout" :checkProfile="true" ref="auth" :tipModel="'m2'"></auth>
7 <policy-head-list :multiSelectable="true" @onSelect="handlePolicySelect"></policy-head-list> 7 <modal-comp :visible="modalVisiable" :show-confirm="false" :icon="modalIcon" :content="modalContent" :confirm="modalCallback" :overlay="modalCallback"></modal-comp>
8 <div class="container border" v-if="selectedPolicies.length > 0 && data"> 8 <template v-if="showForm">
9 <div class="form"> 9 <policy-head-list :multiSelectable="true" @onSelect="handlePolicySelect"></policy-head-list>
10 <div class="form-item">
11 <div class="label">
12 <div class="icon"><img src="@/assets/images/policy-change-contact/icon-pcc-phone.png"></div>{{$t('policyChangeContact.phone')}}
13 </div>
14 <div class="ipt-wrap">
15 <input class="ipt mail-ipt" :class="{err : errorTips.e1.length > 0}" type="text" v-model="data.mobile">
16 <div class="agree" @click="checked1 = !checked1">
17 <img v-if="!checked1" class="check-icon pointer" src="@/assets/images/reservation/un-check.png">
18 <img v-else class="check-icon pointer" src="@/assets/images/reservation/check.png">
19 <span>{{$t("policyChangeContact.checkTips")}}</span>
20 </div>
21 10
22 </div> 11 <div class="container border" v-if="selectedPolicies.length > 0 && data">
23 <div class="validator" v-if="errorTips.e1.length > 0"> 12 <!-- 表单 -->
24 <img src="@/assets/images/common/icon-notice.png" alt="">{{errorTips.e1}} 13 <div class="form">
25 </div> 14 <!-- 1 -->
26 </div> 15 <div class="form-item">
27 <div class="form-item"> 16 <div class="label">
28 <div class="label"> 17 <div class="icon"><img src="@/assets/images/policy-change-contact/icon-pcc-phone.png"></div>{{$t('policyChangeContact.phone')}}
29 <div class="icon"><img src="@/assets/images/policy-change-contact/icon-pcc-location.png"></div>{{$t('policyChangeContact.address')}} 18 </div>
30 </div>
31 <div class="ipt-wrap">
32 <input class="ipt mail-ipt" type="text" :class="{err : errorTips.e2.length > 0}" v-model="data.address">
33 <div class="agree" @click="checked2 = !checked2">
34 <img v-if="!checked2" class="check-icon pointer" src="@/assets/images/reservation/un-check.png">
35 <img v-else class="check-icon pointer" src="@/assets/images/reservation/check.png">
36 <span>{{$t("policyChangeContact.checkTips")}}</span>
37 </div>
38 </div>
39 <div class="validator" v-if="errorTips.e2.length > 0">
40 <img src="@/assets/images/common/icon-notice.png" alt="">{{errorTips.e2}}
41 </div>
42 </div>
43 <div class="form-item">
44 <div class="label">
45 <div class="icon"><img src="@/assets/images/policy-change-contact/icon-pcc-mail.png"></div>{{$t('policyChangeContact.email')}}
46 </div>
47 <div class="ipt-wrap">
48 <input class="ipt mail-ipt" type="text" :class="{err : errorTips.e3.length > 0}" v-model="data.email">
49 <div class="agree" @click="checked3 = !checked3">
50 <img v-if="!checked3" class="check-icon pointer" src="@/assets/images/reservation/un-check.png">
51 <img v-else class="check-icon pointer" src="@/assets/images/reservation/check.png">
52 <span>{{$t("policyChangeContact.checkTips")}}</span>
53 </div>
54 </div>
55 19
56 <div class="validator" v-if="errorTips.e3.length > 0"> 20 <div class="gird-g ipt-gird">
57 <img src="@/assets/images/common/icon-notice.png" alt="">{{errorTips.e3}} 21 <div class="pure-u-1 pure-u-md-6-24 ipt-gird-item">
58 </div> 22 <div class="ipt-wrap-linear">
59 </div> 23 <div class="down-arrow"></div>
60 <div class="submit-btn flex-center" @click="updateContactsHandler" :class="{disabled: submitBtnDisabled}"> 24 <div class="cont">
61 <van-loading v-if="loading" /> 25 <el-select class="ipt" v-model="data.areaCode" :placeholder="$t('policyChangeContact.form.InternationalArea')">
62 <span>{{$t('policyChangeContact.submit')}}</span> 26 <el-option v-for="(item, index) in areaCodeList" :key="index" :label="item.n" :value="item.v"></el-option>
63 </div> 27 </el-select>
64 </div> 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>
33 </div>
65 34
66 </div> 35 <div class="pure-u-1 pure-u-md-8-24 ipt-gird-item">
67 <!-- <div v-else style="height:400px"></div> --> 36 <div class="ipt-wrap-linear">
68 </template> 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')">
69 </div> 38 </div>
39 <div class="validator" v-if="errorTips.e1.length > 0">
40 <img src="@/assets/images/common/icon-notice.png" alt="">{{errorTips.e1}}
41 </div>
42 </div>
43 </div>
44 </div>
45
46 <!-- 2 -->
47 <div class="form-item">
48 <div class="label">
49 <div class="icon"><img src="@/assets/images/policy-change-contact/icon-pcc-location.png"></div>{{$t('policyChangeContact.address')}}
50 </div>
51 <div class="gird-g ipt-gird">
52 <div class="pure-u-1 pure-u-md-6-24 ipt-gird-item">
53 <div class="ipt-wrap-linear">
54 <div class="down-arrow"></div>
55 <div class="cont">
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>
59 </div>
60 </div>
61 <div class="validator" v-if="errorTips.e2.length > 0">
62 <img src="@/assets/images/common/icon-notice.png" alt="">{{errorTips.e2}}
63 </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 -->
88 <div class="form-item">
89 <div class="label">
90 <div class="icon"><img src="@/assets/images/policy-change-contact/icon-pcc-mail.png"></div>{{$t('policyChangeContact.email')}}
91 </div>
92 <div class="gird-g ipt-gird">
93 <div class="pure-u-1 ipt-gird-item">
94 <div class="pure-u-1 pure-u-md-12-24 ipt-wrap-linear">
95 <input class="ipt" type="text" :class="{err : errorTips.e3.length > 0}" v-model="data.email" autocomplete="new-password" :placeholder="$t('policyChangeContact.form.Mail')">
96 </div>
97 <div class="validator" v-if="errorTips.e3.length > 0">
98 <img src="@/assets/images/common/icon-notice.png" alt="">{{errorTips.e3}}
99 </div>
100 </div>
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}">
111 <van-loading v-if="loading" />
112 <span>{{$t('policyChangeContact.submit')}}</span>
113 </div>
114 </div>
115
116 </div>
117 </template>
118 </div>
70 </template> 119 </template>
71 120
72 <script src="./policy-change-contact.js"></script> 121 <script src="./policy-change-contact.js"></script>
......
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
92 .ipt:focus {
93 border-color: $cOrange !important;
94 }
95 90
96 .ipt.err { 91 .ipt:focus {
97 border-color: $cOrange !important; 92 border-color: $cOrange !important;
98 } 93 }
99 94
100 .err { 95 .ipt.err {
101 .ipt {
102 border-color: $cOrange !important; 96 border-color: $cOrange !important;
103 } 97 }
98
99 .err {
100 .ipt {
101 border-color: $cOrange !important;
102 }
103 }
104 } 104 }
105 105
106 // 输入框 106 // 输入框
...@@ -115,14 +115,14 @@ ...@@ -115,14 +115,14 @@
115 background-clip: padding-box, border-box; 115 background-clip: padding-box, border-box;
116 background-origin: padding-box, border-box; 116 background-origin: padding-box, border-box;
117 background-image: linear-gradient(90deg, #fff, #fff), 117 background-image: linear-gradient(90deg, #fff, #fff),
118 linear-gradient(90deg, #feab1b, #f15a08); 118 linear-gradient(90deg, #feab1b, #f15a08);
119 119
120 background-color: #ffffff; 120 background-color: #ffffff;
121 padding: 0 24px; 121 padding: 0 24px;
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) {
......
...@@ -10,160 +10,153 @@ ...@@ -10,160 +10,153 @@
10 10
11 // 居中按钮样式 11 // 居中按钮样式
12 @mixin btn-center($width, $height) { 12 @mixin btn-center($width, $height) {
13 width: $width; 13 width: $width;
14 height: $height; 14 height: $height;
15 line-height: $height; 15 line-height: $height;
16 text-align: center; 16 text-align: center;
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;
24 -webkit-line-clamp: $line; 24 -webkit-line-clamp: $line;
25 overflow: hidden; 25 overflow: hidden;
26 text-overflow: ellipsis; 26 text-overflow: ellipsis;
27 } 27 }
28 28
29 // 文字截取 29 // 文字截取
30 @mixin text-overflow() { 30 @mixin text-overflow() {
31 overflow: hidden; 31 overflow: hidden;
32 white-space: normal; 32 white-space: normal;
33 text-overflow: ellipsis; 33 text-overflow: ellipsis;
34 word-break: break-all; 34 word-break: break-all;
35 word-wrap: normal; 35 word-wrap: normal;
36 } 36 }
37 37
38 @mixin word-break() { 38 @mixin word-break() {
39 word-break: break-all; 39 word-break: break-all;
40 word-wrap: break-word; 40 word-wrap: break-word;
41 white-space: normal; 41 white-space: normal;
42 } 42 }
43 43
44 // No wrap 44 // No wrap
45 @mixin no-wrap() { 45 @mixin no-wrap() {
46 word-break: normal; 46 word-break: normal;
47 word-wrap: normal; 47 word-wrap: normal;
48 white-space: nowrap; 48 white-space: nowrap;
49 } 49 }
50 50
51 // 清除浮动 51 // 清除浮动
52 @mixin clearfix() { 52 @mixin clearfix() {
53 53 &:before,
54 &:before, 54 &:after {
55 &:after { 55 content: " "; // 1
56 content: " "; // 1 56 display: table; // 2
57 display: table; // 2 57 }
58 } 58 &:after {
59 59 clear: both;
60 &:after { 60 }
61 clear: both;
62 }
63 } 61 }
64 62
65 // Single side border-radius 63 // Single side border-radius
66 @mixin border-top-radius($radius) { 64 @mixin border-top-radius($radius) {
67 border-top-right-radius: $radius; 65 border-top-right-radius: $radius;
68 border-top-left-radius: $radius; 66 border-top-left-radius: $radius;
69 } 67 }
70 68
71 @mixin border-right-radius($radius) { 69 @mixin border-right-radius($radius) {
72 border-bottom-right-radius: $radius; 70 border-bottom-right-radius: $radius;
73 border-top-right-radius: $radius; 71 border-top-right-radius: $radius;
74 } 72 }
75 73
76 @mixin border-bottom-radius($radius) { 74 @mixin border-bottom-radius($radius) {
77 border-bottom-right-radius: $radius; 75 border-bottom-right-radius: $radius;
78 border-bottom-left-radius: $radius; 76 border-bottom-left-radius: $radius;
79 } 77 }
80 78
81 @mixin border-left-radius($radius) { 79 @mixin border-left-radius($radius) {
82 border-bottom-left-radius: $radius; 80 border-bottom-left-radius: $radius;
83 border-top-left-radius: $radius; 81 border-top-left-radius: $radius;
84 } 82 }
85 83
86 // Center-align a block level element 84 // Center-align a block level element
87 @mixin center-block() { 85 @mixin center-block() {
88 display: block; 86 display: block;
89 margin-left: auto; 87 margin-left: auto;
90 margin-right: auto; 88 margin-right: auto;
91 } 89 }
92 90
93 // CSS image replacement 91 // CSS image replacement
94 // Source: https://github.com/h5bp/html5-boilerplate/commit/aa0396eae757 92 // Source: https://github.com/h5bp/html5-boilerplate/commit/aa0396eae757
95 @mixin hide-text() { 93 @mixin hide-text() {
96 font-size: 0; 94 font-size: 0;
97 line-height: 0; 95 line-height: 0;
98 color: transparent; 96 color: transparent;
99 text-shadow: none; 97 text-shadow: none;
100 background-color: transparent; 98 background-color: transparent;
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;
110 font-size: $fontSize; 107 font-size: $fontSize;
111 border-radius: $hei; 108 border-radius: $hei;
112 text-align: center; 109 text-align: center;
113 color: #ffffff; 110 color: #ffffff;
114 background-color: #f05a23; 111 background-color: #f05a23;
115 // box-shadow: 0px 10px 13px 0 rgba(236, 100, 41, 0.2); 112 // box-shadow: 0px 10px 13px 0 rgba(236, 100, 41, 0.2);
116 // background-blend-mode: soft-light, ; 113 // background-blend-mode: soft-light, ;
117 // background-image: linear-gradient(to bottom, #f05f28, #f05021); 114 // background-image: linear-gradient(to bottom, #f05f28, #f05021);
118 box-shadow: 0px 10px 13px 0 rgba(236, 100, 41, 0.2); 115 box-shadow: 0px 10px 13px 0 rgba(236, 100, 41, 0.2);
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 119 }
123 } 120
124 121 @mixin btc3($wid: 63px, $hei: 30px, $fontSize: 12px) {
125 122 width: $wid;
126 @mixin btc3($wid:63px, $hei:30px, $fontSize:12px) { 123 height: $hei;
127 width: $wid; 124 line-height: $hei;
128 height: $hei; 125 font-size: $fontSize;
129 line-height: $hei; 126 border-radius: $hei;
130 font-size: $fontSize; 127 text-align: center;
131 border-radius: $hei; 128 color: #006441;
132 text-align: center; 129 border: solid 1px #006441;
133 color: #006441; 130 }
134 border: solid 1px #006441; 131
135 } 132 @mixin btc4($wid: 288px, $hei: 60px, $fontSize: 18px) {
136 133 width: $wid;
137 @mixin btc4($wid:288px, $hei:60px, $fontSize:12px) { 134 height: $hei;
138 width: $wid; 135 line-height: $hei;
139 height: $hei; 136 font-size: $fontSize;
140 line-height: $hei; 137 border-radius: $hei;
141 font-size: $fontSize; 138 text-align: center;
142 border-radius: $hei; 139 background-image: linear-gradient(135deg, #f15a08, #feab1b), linear-gradient(90deg, #fff, #fff);
143 text-align: center; 140 color: white;
144 background-image: linear-gradient(135deg, #f15a08, #feab1b), linear-gradient(90deg, #fff, #fff); 141 font-weight: 600;
145 color: white; 142 cursor: pointer;
146 font-weight: 600; 143 letter-spacing: 1.4px;
147 cursor: pointer; 144 }
148 letter-spacing: 1.4px; 145
149 } 146 @mixin content-percent($percent: 4%) {
150 147 box-sizing: border-box;
151 148 padding: 0 $percent;
152 @mixin content-percent($percent:4%) { 149 }
153 box-sizing: border-box; 150
154 padding: 0 $percent; 151 @mixin border-tans($borderRadius: 1px, $borderSize: 2px) {
155 152 border: $borderSize solid transparent;
156 } 153 background-clip: padding-box, border-box;
157 154 background-origin: padding-box, border-box;
158 @mixin border-tans($borderRadius:1px, $borderSize:2px) { 155 background-image: linear-gradient(90deg, #fff, #fff), linear-gradient(90deg, #feab1b, #f15a08);
159 border: $borderSize solid transparent; 156 border-radius: $borderRadius;
160 background-clip: padding-box, border-box;
161 background-origin: padding-box, border-box;
162 background-image: linear-gradient(90deg, #fff, #fff), linear-gradient(90deg, #feab1b, #f15a08);
163 border-radius: $borderRadius;
164 } 157 }
165 158
166 @mixin linear-bg() { 159 @mixin linear-bg() {
167 background-color: transparent; 160 background-color: transparent;
168 background-image: linear-gradient(135deg, #f15a08, #feab1b), linear-gradient(90deg, #fff, #fff); 161 background-image: linear-gradient(135deg, #f15a08, #feab1b), linear-gradient(90deg, #fff, #fff);
169 } 162 }
...\ No newline at end of file ...\ No newline at end of file
......
...@@ -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 }
......