首页 响应式
Showing
15 changed files
with
355 additions
and
45 deletions
... | @@ -475,7 +475,7 @@ textarea { | ... | @@ -475,7 +475,7 @@ textarea { |
475 | $fontSize: $fontSize-M; | 475 | $fontSize: $fontSize-M; |
476 | $fontSizeSmall: $fontSizeSmall-M; | 476 | $fontSizeSmall: $fontSizeSmall-M; |
477 | .main-container { | 477 | .main-container { |
478 | margin-bottom: $marginMedium-M; | 478 | // margin-bottom: $marginMedium-M; |
479 | } | 479 | } |
480 | } | 480 | } |
481 | </style> | 481 | </style> | ... | ... |
... | @@ -727,6 +727,8 @@ module.exports = { | ... | @@ -727,6 +727,8 @@ module.exports = { |
727 | tt:"IRS website", | 727 | tt:"IRS website", |
728 | t1:"The country of your request for change of correspondence address / phone no. is the United States of America. To comply with the requirements of the US tax regulations, please complete the W8 / W9 form and submit it to us at the same time. The W8 / W9 form can be downloaded from the ", | 728 | t1:"The country of your request for change of correspondence address / phone no. is the United States of America. To comply with the requirements of the US tax regulations, please complete the W8 / W9 form and submit it to us at the same time. The W8 / W9 form can be downloaded from the ", |
729 | t2:". For questions about US tax regulations, please contact your tax advisor", | 729 | t2:". For questions about US tax regulations, please contact your tax advisor", |
730 | Upload :"Upload", | ||
731 | Submit :"Submit", | ||
730 | }, | 732 | }, |
731 | success: "Successfully submitted", | 733 | success: "Successfully submitted", |
732 | uploadSuccess: "Uploaded successfully", | 734 | uploadSuccess: "Uploaded successfully", | ... | ... |
... | @@ -737,6 +737,8 @@ module.exports = { | ... | @@ -737,6 +737,8 @@ module.exports = { |
737 | tt:"美國國稅局網站", | 737 | tt:"美國國稅局網站", |
738 | t1:"閣下遞交的更改聯繫地址/電話申请國家爲美國。爲符合美國稅務條例要求,請同時填妥W8/W9表格並遞交給我們,W8/W9表格可於", | 738 | t1:"閣下遞交的更改聯繫地址/電話申请國家爲美國。爲符合美國稅務條例要求,請同時填妥W8/W9表格並遞交給我們,W8/W9表格可於", |
739 | t2:"下載。有關美國稅務條例疑問,請聯絡您的稅務顧問。", | 739 | t2:"下載。有關美國稅務條例疑問,請聯絡您的稅務顧問。", |
740 | Upload:"上载表格", | ||
741 | Submit:"提交" | ||
740 | }, | 742 | }, |
741 | success: "遞交申請成功", | 743 | success: "遞交申請成功", |
742 | uploadSuccess:"上傳成功" | 744 | uploadSuccess:"上傳成功" | ... | ... |
... | @@ -396,7 +396,7 @@ module.exports = { | ... | @@ -396,7 +396,7 @@ module.exports = { |
396 | index: { | 396 | index: { |
397 | recommend: { | 397 | recommend: { |
398 | title: "为何选择平安人寿?", | 398 | title: "为何选择平安人寿?", |
399 | contact: "联络我们", | 399 | contact: "联系我们", |
400 | item1: { | 400 | item1: { |
401 | desc: "简单方便<br>线上客户服务系统" | 401 | desc: "简单方便<br>线上客户服务系统" |
402 | }, | 402 | }, |
... | @@ -414,8 +414,8 @@ module.exports = { | ... | @@ -414,8 +414,8 @@ module.exports = { |
414 | service: "联络客服", | 414 | service: "联络客服", |
415 | }, | 415 | }, |
416 | contact: { | 416 | contact: { |
417 | t1: "如欲了解我们的产品,欢迎联络我们。", | 417 | t1: "如欲了解我们的产品,欢迎联系我们。", |
418 | t2: "想了解更多?致电2983 8866 联络我们。", | 418 | t2: "想了解更多?致电2983 8866 联系我们。", |
419 | form: { | 419 | form: { |
420 | Title: "称呼", | 420 | Title: "称呼", |
421 | Name: "姓名", | 421 | Name: "姓名", |
... | @@ -734,12 +734,15 @@ module.exports = { | ... | @@ -734,12 +734,15 @@ module.exports = { |
734 | Mail:"请输入", | 734 | Mail:"请输入", |
735 | }, | 735 | }, |
736 | tax:{ | 736 | tax:{ |
737 | tt:"美国国税局网站", | 737 | tt:"美国国税局", |
738 | t1:"阁下递交的更改联系地址/电话申请国家为美国。为符合美国税务条例要求,请同时填妥W8/W9表格并递交给我们,W8/W9表格可于", | 738 | t1:"阁下递交的更改联系地址/电话申请国家为美国。为符合美国税务条例要求,请同时填妥W8/W9表格并递交给我们,W8/W9表格可于", |
739 | t2:"下载。有关美国税务条例疑问,请联络您的税务顾问。", | 739 | t2:"下载。有关美国税务条例疑问,请联络您的税务顾问。", |
740 | Upload:"上传表格", | ||
741 | Submit:"提交" | ||
740 | }, | 742 | }, |
741 | success: "递交申请成功", | 743 | success: "递交申请成功", |
742 | uploadSuccess:"上传成功" | 744 | uploadSuccess:"上传成功", |
745 | uploadFail:"上传成功", | ||
743 | }, | 746 | }, |
744 | policyChangeInformation: { | 747 | policyChangeInformation: { |
745 | title: "客户资料变更", | 748 | title: "客户资料变更", | ... | ... |
... | @@ -47,7 +47,7 @@ | ... | @@ -47,7 +47,7 @@ |
47 | <!-- 日历主体 --> | 47 | <!-- 日历主体 --> |
48 | <div class="tr"> | 48 | <div class="tr"> |
49 | <div class="td" v-for="(item,index) in fortmatMonthData" :key="index"> | 49 | <div class="td" v-for="(item,index) in fortmatMonthData" :key="index"> |
50 | <div @click="selectDay(item.disable ? null : item)" v-if="item && item.date" class="pointer point" :class="{'sel':item && activity(item),'disable':item.disable}"> | 50 | <div @click="selectDay(item.disable ? null : item)" v-if="item && item.date" class="pointer point" :class="{'act':item && activity(item),'disable':item.disable}"> |
51 | <div>{{item && item.date || ""}}</div> | 51 | <div>{{item && item.date || ""}}</div> |
52 | </div> | 52 | </div> |
53 | </div> | 53 | </div> | ... | ... |
... | @@ -14,6 +14,7 @@ import Auth from "@components/auth/auth.vue"; | ... | @@ -14,6 +14,7 @@ import Auth from "@components/auth/auth.vue"; |
14 | import UsTaxFormUploadComp from "./us-tax-form-upload-comp.vue"; | 14 | import UsTaxFormUploadComp from "./us-tax-form-upload-comp.vue"; |
15 | import PolicyHeadList from "./policy-head-list.vue"; | 15 | import PolicyHeadList from "./policy-head-list.vue"; |
16 | import modalComp from "@/components/modal-comp/modal-comp.vue"; | 16 | import modalComp from "@/components/modal-comp/modal-comp.vue"; |
17 | import Modal2Comp from "@/components/modal2-comp/modal2-comp.vue"; | ||
17 | import Vue from "vue"; | 18 | import Vue from "vue"; |
18 | import { Loading } from "vant"; | 19 | import { Loading } from "vant"; |
19 | Vue.use(Loading); | 20 | Vue.use(Loading); |
... | @@ -66,6 +67,7 @@ export default { | ... | @@ -66,6 +67,7 @@ export default { |
66 | modalVisiable: false, | 67 | modalVisiable: false, |
67 | modalVisiableTimeoutIndex: 0, //定时隐藏索引 | 68 | modalVisiableTimeoutIndex: 0, //定时隐藏索引 |
68 | usTaxFormUploadCompVisible: false, | 69 | usTaxFormUploadCompVisible: false, |
70 | uploadErrorVisible: false, | ||
69 | targetPath: "", | 71 | targetPath: "", |
70 | modalIcon: "succ", | 72 | modalIcon: "succ", |
71 | modalContent: "", | 73 | modalContent: "", |
... | @@ -82,7 +84,8 @@ export default { | ... | @@ -82,7 +84,8 @@ export default { |
82 | Auth, | 84 | Auth, |
83 | PolicyHeadList, | 85 | PolicyHeadList, |
84 | modalComp, | 86 | modalComp, |
85 | UsTaxFormUploadComp | 87 | UsTaxFormUploadComp, |
88 | Modal2Comp | ||
86 | }, | 89 | }, |
87 | computed: { | 90 | computed: { |
88 | locale() { | 91 | locale() { | ... | ... |
... | @@ -5,7 +5,8 @@ | ... | @@ -5,7 +5,8 @@ |
5 | <input type="password" style="display: none;" /> | 5 | <input type="password" style="display: none;" /> |
6 | <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> |
7 | <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> |
8 | <us-tax-form-upload-comp :visible="usTaxFormUploadCompVisible" @close="usTaxFormUploadCompVisible = false" @submit="onUsTaxSubmit" @uploadsuccess="showUploadSuccess"></us-tax-form-upload-comp> | 8 | <modal2-comp :visible="uploadErrorVisible" :close="()=>{uploadErrorVisible = false}" :content="$t('glbalTips.sysError')"></modal2-comp> |
9 | <us-tax-form-upload-comp :visible="usTaxFormUploadCompVisible" @close="usTaxFormUploadCompVisible = false" @submit="onUsTaxSubmit" @uploadsuccess="showUploadSuccess" @uploaderr="uploadErrorVisible = true"></us-tax-form-upload-comp> | ||
9 | <template v-if="showForm"> | 10 | <template v-if="showForm"> |
10 | <policy-head-list :multiSelectable="true" @onSelect="handlePolicySelect"></policy-head-list> | 11 | <policy-head-list :multiSelectable="true" @onSelect="handlePolicySelect"></policy-head-list> |
11 | 12 | ... | ... |
... | @@ -22,8 +22,8 @@ | ... | @@ -22,8 +22,8 @@ |
22 | <div class="modal-btn-wrap"> | 22 | <div class="modal-btn-wrap"> |
23 | <div class="btn"> | 23 | <div class="btn"> |
24 | <input type="file" @change="selectImgs" ref="file"> | 24 | <input type="file" @change="selectImgs" ref="file"> |
25 | <van-loading v-if="loading" />上载表格</div> | 25 | <van-loading v-if="loading" />{{$t('policyChangeContact.tax.Upload')}}</div> |
26 | <div @click="onSubmitHandler" class="btn" :class="{'disable':iobsKey ==''}">提交</div> | 26 | <div @click="onSubmitHandler" class="btn" :class="{'disable':iobsKey ==''}">{{$t('policyChangeContact.tax.Submit')}}</div> |
27 | </div> | 27 | </div> |
28 | 28 | ||
29 | </div> | 29 | </div> | ... | ... |
... | @@ -33,6 +33,33 @@ export default { | ... | @@ -33,6 +33,33 @@ export default { |
33 | bannerCandidateList: [], | 33 | bannerCandidateList: [], |
34 | 34 | ||
35 | // 导航菜单 | 35 | // 导航菜单 |
36 | // tabList: [ | ||
37 | // { | ||
38 | // name: "平安“好e時”<br>自願醫保標準計劃", | ||
39 | // url: "", | ||
40 | // index: 0 | ||
41 | // }, | ||
42 | // { | ||
43 | // name: "「平安 ‧ 傳家福<br>分紅終身壽險計劃", | ||
44 | // url: "", | ||
45 | // index: 1 | ||
46 | // }, | ||
47 | // { | ||
48 | // name: "Ping An 'Pro Easy'<br>VHIS Standard Plan", | ||
49 | // url: "", | ||
50 | // index: 2 | ||
51 | // }, | ||
52 | // { | ||
53 | // name: "Ping An GenRich<br>Insurance Plan", | ||
54 | // url: "", | ||
55 | // index: 3 | ||
56 | // }, | ||
57 | // { | ||
58 | // name: "Ping An 'Pro Easy'<br>VHIS Standard Plan", | ||
59 | // url: "", | ||
60 | // index: 4 | ||
61 | // } | ||
62 | // ], | ||
36 | tabList: [ | 63 | tabList: [ |
37 | { | 64 | { |
38 | name: "平安“好e時”<br>自願醫保標準計劃", | 65 | name: "平安“好e時”<br>自願醫保標準計劃", |
... | @@ -67,7 +94,8 @@ export default { | ... | @@ -67,7 +94,8 @@ export default { |
67 | gender: 1 | 94 | gender: 1 |
68 | }, | 95 | }, |
69 | // 投保背景图 | 96 | // 投保背景图 |
70 | quoteBgUrl:"https://kdcdn.oss-cn-shenzhen.aliyuncs.com/temp/pingan-life/index-quote-bg-temp.png", | 97 | quoteBgUrl: |
98 | "https://kdcdn.oss-cn-shenzhen.aliyuncs.com/temp/pingan-life/index-quote-bg-temp.png", | ||
71 | 99 | ||
72 | // 表单 | 100 | // 表单 |
73 | formData: { | 101 | formData: { |
... | @@ -86,7 +114,7 @@ export default { | ... | @@ -86,7 +114,7 @@ export default { |
86 | } | 114 | } |
87 | ], | 115 | ], |
88 | // 错误提示 | 116 | // 错误提示 |
89 | errTips:"" | 117 | errTips: "" |
90 | }; | 118 | }; |
91 | }, | 119 | }, |
92 | components: { | 120 | components: { |
... | @@ -100,7 +128,55 @@ export default { | ... | @@ -100,7 +128,55 @@ export default { |
100 | return this.$i18n.messages && this.$i18n.locale | 128 | return this.$i18n.messages && this.$i18n.locale |
101 | ? this.$i18n.messages[this.$i18n.locale] | 129 | ? this.$i18n.messages[this.$i18n.locale] |
102 | : {}; | 130 | : {}; |
131 | }, | ||
132 | // 表格tab缩进计算 | ||
133 | tableTapIndentation() { | ||
134 | let result = {}; | ||
135 | let mar = 0; // 两边缩进 | ||
136 | let ind = 0; // 缩进简介 | ||
137 | let tabList = this.tabList; | ||
138 | let len = tabList.length; | ||
139 | switch (len) { | ||
140 | case 1: | ||
141 | mar = 100; | ||
142 | ind = 0; | ||
143 | break; | ||
144 | |||
145 | case 2: | ||
146 | mar = 60; | ||
147 | ind = 124; | ||
148 | break; | ||
149 | |||
150 | case 3: | ||
151 | mar = 30; | ||
152 | ind = 62; | ||
153 | break; | ||
154 | |||
155 | case 4: | ||
156 | mar = 20; | ||
157 | ind = 41; | ||
158 | break; | ||
159 | |||
160 | case 5: | ||
161 | mar = 15; | ||
162 | ind = 30; | ||
163 | break; | ||
164 | |||
165 | default: | ||
166 | break; | ||
167 | } | ||
168 | result = { | ||
169 | mar, | ||
170 | ind | ||
171 | }; | ||
172 | console.log("result:", result); | ||
173 | return result; | ||
103 | } | 174 | } |
175 | // tableTapOpt(){ | ||
176 | // let result = { | ||
177 | // width: | ||
178 | // } | ||
179 | // }, | ||
104 | }, | 180 | }, |
105 | methods: { | 181 | methods: { |
106 | initData() { | 182 | initData() { |
... | @@ -187,6 +263,14 @@ export default { | ... | @@ -187,6 +263,14 @@ export default { |
187 | this.$router.push({ | 263 | this.$router.push({ |
188 | path: "/custom/service?q=m1" | 264 | path: "/custom/service?q=m1" |
189 | }); | 265 | }); |
266 | }, | ||
267 | /** | ||
268 | * 点击我要报价 | ||
269 | * 根据当前tab跳转到不同页面 | ||
270 | * “好e时”tab的情况下,点击立即报价,跳到VHIS网销平台;传家福tab情况下调到传家福产品页 | ||
271 | */ | ||
272 | onQuoteHandler() { | ||
273 | // gotoVHIS(); | ||
190 | } | 274 | } |
191 | }, | 275 | }, |
192 | beforeDestroy() {}, | 276 | beforeDestroy() {}, | ... | ... |
... | @@ -81,7 +81,8 @@ | ... | @@ -81,7 +81,8 @@ |
81 | .btn-wrap { | 81 | .btn-wrap { |
82 | position: absolute; | 82 | position: absolute; |
83 | z-index: 1; | 83 | z-index: 1; |
84 | top: 87%; | 84 | // top: 87%; |
85 | bottom: 12%; | ||
85 | left: 0; | 86 | left: 0; |
86 | right: 0; | 87 | right: 0; |
87 | margin: 0 auto; | 88 | margin: 0 auto; |
... | @@ -139,16 +140,17 @@ | ... | @@ -139,16 +140,17 @@ |
139 | } | 140 | } |
140 | 141 | ||
141 | .features { | 142 | .features { |
142 | display: flex; | 143 | // display: flex; |
143 | justify-content: center; | 144 | // justify-content: center; |
144 | align-items: flex-start; | 145 | // align-items: flex-start; |
145 | margin: 44px auto 0; | 146 | // margin: 44px auto 0; |
146 | 147 | ||
147 | &-item { | 148 | &-item { |
148 | position: relative; | 149 | position: relative; |
149 | text-align: center; | 150 | text-align: center; |
150 | font-size: 22px; | 151 | font-size: 22px; |
151 | width: 306px; | 152 | width: 306px; |
153 | margin: 24px auto; | ||
152 | 154 | ||
153 | .icon { | 155 | .icon { |
154 | @extend .fcc; | 156 | @extend .fcc; |
... | @@ -168,9 +170,10 @@ | ... | @@ -168,9 +170,10 @@ |
168 | bottom: 0; | 170 | bottom: 0; |
169 | right: 0; | 171 | right: 0; |
170 | @include linear-bg(); | 172 | @include linear-bg(); |
171 | @extend .fcc; | 173 | // @extend .fcc; |
172 | padding: 0 24px; | 174 | padding: 0 24px; |
173 | height: 52px; | 175 | height: 52px; |
176 | line-height: 52px; | ||
174 | border-radius: 26px; | 177 | border-radius: 26px; |
175 | font-size: 22px; | 178 | font-size: 22px; |
176 | font-weight: bold; | 179 | font-weight: bold; |
... | @@ -192,10 +195,12 @@ | ... | @@ -192,10 +195,12 @@ |
192 | .quote { | 195 | .quote { |
193 | // background: url("~@/assets/images/index/index-quote-bg-temp.png") center | 196 | // background: url("~@/assets/images/index/index-quote-bg-temp.png") center |
194 | // no-repeat; | 197 | // no-repeat; |
198 | // @extend .bb; | ||
195 | width: 100%; | 199 | width: 100%; |
196 | height: 1482px; | 200 | height: 1482px; |
197 | overflow: hidden; | 201 | overflow: hidden; |
198 | margin: 52px auto 0; | 202 | margin: 52px auto 0; |
203 | padding-bottom: 40px; | ||
199 | 204 | ||
200 | .space1 { | 205 | .space1 { |
201 | height: 540px; | 206 | height: 540px; |
... | @@ -220,7 +225,9 @@ | ... | @@ -220,7 +225,9 @@ |
220 | } | 225 | } |
221 | 226 | ||
222 | .table { | 227 | .table { |
228 | // background-color: wheat; | ||
223 | width: 1200px; | 229 | width: 1200px; |
230 | |||
224 | margin: 56px auto 0; | 231 | margin: 56px auto 0; |
225 | &-tab { | 232 | &-tab { |
226 | position: relative; | 233 | position: relative; |
... | @@ -228,13 +235,15 @@ | ... | @@ -228,13 +235,15 @@ |
228 | display: flex; | 235 | display: flex; |
229 | justify-content: center; | 236 | justify-content: center; |
230 | margin-left: 2px; | 237 | margin-left: 2px; |
238 | margin: 0 auto; | ||
231 | &-item { | 239 | &-item { |
232 | background-image: url("~@/assets/images/index/index-tab.png"); | 240 | background-image: url("~@/assets/images/index/index-tab.png"); |
233 | 241 | ||
234 | @extend .bis; | 242 | @extend .bis; |
235 | @extend .fcc; | 243 | @extend .fcc; |
236 | height: 73px; | 244 | height: 73px; |
237 | margin: 0 -14px; | 245 | // margin: 0 -14px; |
246 | // margin: 0 -46px; | ||
238 | font-size: $fontSize-M2; | 247 | font-size: $fontSize-M2; |
239 | color: $cOrange2; | 248 | color: $cOrange2; |
240 | font-weight: bold; | 249 | font-weight: bold; |
... | @@ -247,7 +256,7 @@ | ... | @@ -247,7 +256,7 @@ |
247 | } | 256 | } |
248 | } | 257 | } |
249 | 258 | ||
250 | .linear{ | 259 | .linear { |
251 | @include linear-bg; | 260 | @include linear-bg; |
252 | height: 8px; | 261 | height: 8px; |
253 | margin: -5px auto 0; | 262 | margin: -5px auto 0; |
... | @@ -256,11 +265,11 @@ | ... | @@ -256,11 +265,11 @@ |
256 | } | 265 | } |
257 | 266 | ||
258 | &-cont { | 267 | &-cont { |
259 | |||
260 | height: 380px; | 268 | height: 380px; |
261 | margin: 0 auto 0; | 269 | margin: 0 auto 0; |
262 | position: relative; | 270 | position: relative; |
263 | display: flex; | 271 | display: flex; |
272 | font-size: 22px; | ||
264 | 273 | ||
265 | .panel { | 274 | .panel { |
266 | position: relative; | 275 | position: relative; |
... | @@ -274,7 +283,6 @@ | ... | @@ -274,7 +283,6 @@ |
274 | @extend .fcc; | 283 | @extend .fcc; |
275 | .desc { | 284 | .desc { |
276 | &-item { | 285 | &-item { |
277 | font-size: 22px; | ||
278 | color: #ffffff; | 286 | color: #ffffff; |
279 | line-height: 1.6; | 287 | line-height: 1.6; |
280 | &:lang() { | 288 | &:lang() { |
... | @@ -344,6 +352,11 @@ | ... | @@ -344,6 +352,11 @@ |
344 | } | 352 | } |
345 | } | 353 | } |
346 | 354 | ||
355 | // 只有一个tab时候 | ||
356 | .table-1 { | ||
357 | width: 1070px; | ||
358 | } | ||
359 | |||
347 | .quote-btn { | 360 | .quote-btn { |
348 | @include btc4(300px, 50px, 22px); | 361 | @include btc4(300px, 50px, 22px); |
349 | margin: 40px auto 0; | 362 | margin: 40px auto 0; |
... | @@ -354,6 +367,8 @@ | ... | @@ -354,6 +367,8 @@ |
354 | } | 367 | } |
355 | .customer-service { | 368 | .customer-service { |
356 | margin-top: 24px; | 369 | margin-top: 24px; |
370 | // margin: 24px auto 32px; | ||
371 | // padding-bottom: 40px; | ||
357 | font-size: 22px; | 372 | font-size: 22px; |
358 | font-weight: bold; | 373 | font-weight: bold; |
359 | text-align: center; | 374 | text-align: center; |
... | @@ -457,7 +472,7 @@ | ... | @@ -457,7 +472,7 @@ |
457 | margin: 12px 0; | 472 | margin: 12px 0; |
458 | display: flex; | 473 | display: flex; |
459 | align-items: flex-start; | 474 | align-items: flex-start; |
460 | .icon{ | 475 | .icon { |
461 | margin-top: 2px; | 476 | margin-top: 2px; |
462 | margin-right: 3px; | 477 | margin-right: 3px; |
463 | } | 478 | } |
... | @@ -472,6 +487,10 @@ | ... | @@ -472,6 +487,10 @@ |
472 | } | 487 | } |
473 | } | 488 | } |
474 | } | 489 | } |
490 | |||
491 | .pic-mobile-botom { | ||
492 | display: none; | ||
493 | } | ||
475 | } | 494 | } |
476 | } | 495 | } |
477 | 496 | ||
... | @@ -515,10 +534,208 @@ | ... | @@ -515,10 +534,208 @@ |
515 | .content { | 534 | .content { |
516 | @include content-percent(); | 535 | @include content-percent(); |
517 | } | 536 | } |
537 | |||
538 | .recommend { | ||
539 | .contact-tips { | ||
540 | // display: block; | ||
541 | margin: 24px auto 0; | ||
542 | position: relative; | ||
543 | max-width: 90%; | ||
544 | display: inline-block; | ||
545 | } | ||
546 | } | ||
547 | |||
548 | // 投保 | ||
549 | .quote { | ||
550 | .table { | ||
551 | width: auto; | ||
552 | |||
553 | &-tab { | ||
554 | } | ||
555 | |||
556 | &-cont { | ||
557 | .arrow { | ||
558 | margin: 0 8px; | ||
559 | z-index: 11111; | ||
560 | } | ||
561 | } | ||
562 | } | ||
563 | } | ||
564 | |||
565 | // 联系我们表单 | ||
566 | .contact { | ||
567 | .panel { | ||
568 | display: block; | ||
569 | // flex-wrap: wrap; | ||
570 | |||
571 | .panel-left { | ||
572 | text-align: center; | ||
573 | |||
574 | .pic-mobile { | ||
575 | display: none; | ||
576 | } | ||
577 | } | ||
578 | |||
579 | .panel-right { | ||
580 | // width: 90%; | ||
581 | padding: 0 4%; | ||
582 | margin-top: 32px; | ||
583 | } | ||
584 | |||
585 | .pic-mobile-botom { | ||
586 | display: block; | ||
587 | margin-top: 32px; | ||
588 | max-width: 100%; | ||
589 | } | ||
590 | } | ||
591 | } | ||
592 | } | ||
593 | |||
594 | @media (max-width: 980px) { | ||
595 | // 导航菜单切换 | ||
596 | .nav-tab { | ||
597 | font-size: $fontSize-M2; | ||
598 | flex-wrap: wrap; | ||
599 | display: block; | ||
600 | &-item { | ||
601 | padding: 8px 0; | ||
602 | width: 100% !important; | ||
603 | border-right: none; | ||
604 | border-bottom: solid 2px #ffffff; | ||
605 | } | ||
606 | } | ||
607 | |||
608 | .recommend { | ||
609 | margin: 40px auto 0; | ||
610 | } | ||
611 | |||
612 | // 投保 | ||
613 | .quote { | ||
614 | .table { | ||
615 | .linear { | ||
616 | display: none; | ||
617 | } | ||
618 | &-tab { | ||
619 | display: none; | ||
620 | } | ||
621 | |||
622 | &-cont { | ||
623 | display: block; | ||
624 | height: auto; | ||
625 | |||
626 | .panel { | ||
627 | padding: 32px 24px; | ||
628 | width: 100%; | ||
629 | } | ||
630 | } | ||
631 | } | ||
632 | } | ||
518 | } | 633 | } |
519 | 634 | ||
520 | @media (max-width: 768px) { | 635 | @media (max-width: 768px) { |
521 | .content { | 636 | // 导航菜单切换 |
637 | .nav-tab { | ||
638 | font-size: $fontSize-M2; | ||
639 | &-item { | ||
640 | } | ||
641 | } | ||
642 | |||
643 | // 推荐 为什么选择平安人寿 | ||
644 | .recommend { | ||
645 | .tit { | ||
646 | font-size: $fontSizeTitle-M2; | ||
647 | } | ||
648 | .features { | ||
649 | &-item { | ||
650 | font-size: $fontSize-M2; | ||
651 | } | ||
652 | } | ||
653 | } | ||
654 | |||
655 | // 投保 | ||
656 | .quote { | ||
657 | height: auto; | ||
658 | |||
659 | .tit { | ||
660 | font-size: $fontSizeTitle-M2; | ||
661 | } | ||
662 | |||
663 | .tit2 { | ||
664 | font-size: $fontSize-M2; | ||
665 | width: 96vw; | ||
666 | } | ||
667 | |||
668 | .table { | ||
669 | .linear { | ||
670 | } | ||
671 | &-tab { | ||
672 | } | ||
673 | |||
674 | &-cont { | ||
675 | display: block; | ||
676 | height: auto; | ||
677 | width: 100% !important; | ||
678 | font-size: $fontSize-M2; | ||
679 | |||
680 | .panel { | ||
681 | // 性别年龄 | ||
682 | .func1 { | ||
683 | &-item { | ||
684 | display: block; | ||
685 | // margin: 36px 0; | ||
686 | |||
687 | .k, | ||
688 | .gender { | ||
689 | margin: 16px 0; | ||
690 | } | ||
691 | |||
692 | .age { | ||
693 | .ipt-wrap-linear { | ||
694 | width: auto; | ||
695 | } | ||
696 | } | ||
697 | } | ||
698 | } | ||
699 | } | ||
700 | |||
701 | .arrow { | ||
702 | transform: scale(0.5); | ||
703 | } | ||
704 | |||
705 | .arrow-left { | ||
706 | left: 0px; | ||
707 | } | ||
708 | .arrow-right { | ||
709 | right: 0px; | ||
710 | } | ||
711 | } | ||
712 | } | ||
713 | |||
714 | .quote-btn { | ||
715 | font-size: $fontSize-M2; | ||
716 | } | ||
717 | |||
718 | .customer-service { | ||
719 | font-size: $fontSize-M2; | ||
720 | } | ||
721 | } | ||
722 | |||
723 | .contact { | ||
724 | .panel { | ||
725 | .panel-left { | ||
726 | .t1 { | ||
727 | font-size: $fontSizeTitle-M2; | ||
728 | } | ||
729 | .t2 { | ||
730 | font-size: $fontSize-M2; | ||
731 | } | ||
732 | } | ||
733 | .panel-right{ | ||
734 | .submit-btn{ | ||
735 | font-size: $fontSize-M2; | ||
736 | } | ||
737 | } | ||
738 | } | ||
522 | } | 739 | } |
523 | 740 | ||
524 | .banner-contaner { | 741 | .banner-contaner { | ... | ... |
... | @@ -36,26 +36,27 @@ | ... | @@ -36,26 +36,27 @@ |
36 | <div class="swiper-button-next" slot="button-next"></div>--> | 36 | <div class="swiper-button-next" slot="button-next"></div>--> |
37 | </div> | 37 | </div> |
38 | <!-- 导航菜单切换 --> | 38 | <!-- 导航菜单切换 --> |
39 | <div class="nav-tab"> | 39 | <div class="gird-g nav-tab"> |
40 | <div @click="onTabHandler(item)" v-html="item.name" v-for="item in tabList" :key="item.id" class="nav-tab-item" :class="{ 'nav-tab-item-act': item.index == curTab.index }" :style="'width: calc(100% / ' + tabList.length + ');'">{{ item.name }}</div> | 40 | <div class="nav-tab-item" :class="{ 'nav-tab-item-act': item.index == curTab.index }" :style="'width: calc(100% / ' + tabList.length + ');'" @click="onTabHandler(item)" v-html="item.name" v-for="item in tabList" :key="item.id" >{{ item.name }}</div> |
41 | <!-- <div class="nav-tab-item pure-u-1 pure-u-md-1-5" :class="{ 'nav-tab-item-act': item.index == curTab.index }" @click="onTabHandler(item)" v-html="item.name" v-for="item in tabList" :key="item.id" >{{ item.name }}</div> --> | ||
41 | </div> | 42 | </div> |
42 | <!-- 推荐 为什么选择平安人寿 --> | 43 | <!-- 推荐 为什么选择平安人寿 --> |
43 | <div class="content recommend"> | 44 | <div class="recommend"> |
44 | <div class="tit">{{ $t("index.recommend.title") }}</div> | 45 | <div class="tit">{{ $t("index.recommend.title") }}</div> |
45 | <div class="features"> | 46 | <div class="gird-g features"> |
46 | <div class="features-item"> | 47 | <div class="features-item pure-u-1 pure-u-md-1-3"> |
47 | <div class="icon"> | 48 | <div class="icon"> |
48 | <img src="@/assets/images/index/recommend-icon-1.png" alt /> | 49 | <img src="@/assets/images/index/recommend-icon-1.png" alt /> |
49 | </div> | 50 | </div> |
50 | <div v-html="$t('index.recommend.item1.desc')" class="desc"></div> | 51 | <div v-html="$t('index.recommend.item1.desc')" class="desc"></div> |
51 | </div> | 52 | </div> |
52 | <div class="features-item"> | 53 | <div class="features-item pure-u-1 pure-u-md-1-3"> |
53 | <div class="icon"> | 54 | <div class="icon"> |
54 | <img src="@/assets/images/index/recommend-icon-2.png" alt /> | 55 | <img src="@/assets/images/index/recommend-icon-2.png" alt /> |
55 | </div> | 56 | </div> |
56 | <div v-html="$t('index.recommend.item2.desc')" class="desc"></div> | 57 | <div v-html="$t('index.recommend.item2.desc')" class="desc"></div> |
57 | </div> | 58 | </div> |
58 | <div class="features-item"> | 59 | <div class="features-item pure-u-1 pure-u-md-1-3"> |
59 | <div class="icon"> | 60 | <div class="icon"> |
60 | <img src="@/assets/images/index/recommend-icon-3.png" alt /> | 61 | <img src="@/assets/images/index/recommend-icon-3.png" alt /> |
61 | </div> | 62 | </div> |
... | @@ -78,18 +79,13 @@ | ... | @@ -78,18 +79,13 @@ |
78 | </div> | 79 | </div> |
79 | 80 | ||
80 | <!-- tab表格 --> | 81 | <!-- tab表格 --> |
81 | <div class="table"> | 82 | <div class="table" :class="{'table-1':tabList.length<=1}"> |
82 | <div class="table-tab"> | 83 | <div class="table-tab"> |
83 | <div @click="onTabHandler(item)" v-html="item.name" v-for="(item, index) in tabList" :key="item.id" class="table-tab-item" :class="{ 'table-tab-item-act': item.index == curTab.index }" :style=" | 84 | <div class="table-tab-item" @click="onTabHandler(item)" v-html="item.name" v-for="(item, index) in tabList" :key="item.id" :class="{ 'table-tab-item-act': item.index == curTab.index }" :style=" |
84 | 'width: calc(100% / ' + | 85 | 'margin:0 -'+tableTapIndentation.mar+'px;width: calc(100% / ' + tabList.length + ');z-index:' + (tabList.length - index) + ''">{{ item.name }}</div> |
85 | tabList.length + | ||
86 | ');z-index:' + | ||
87 | (tabList.length - index) + | ||
88 | '' | ||
89 | ">{{ item.name }}</div> | ||
90 | </div> | 86 | </div> |
91 | <div class="linear" :style="'width: calc(100% - 29px *' + (tabList.length - 1) + ')'"></div> | 87 | <div class="linear" :style="'width: calc(100% - '+tableTapIndentation.ind+'px *' + (tabList.length - 1) + ')'"></div> |
92 | <div class="table-cont" :style="'width: calc(100% - 29px *' + (tabList.length - 1) + ')'"> | 88 | <div class="table-cont" :style="'width: calc(100% - '+tableTapIndentation.ind+'px *' + (tabList.length - 1) + ')'"> |
93 | <div @click="onPrevTabHandler()" class="arrow arrow-left"></div> | 89 | <div @click="onPrevTabHandler()" class="arrow arrow-left"></div> |
94 | <div @click="onNextTabHandler()" class="arrow arrow-right"></div> | 90 | <div @click="onNextTabHandler()" class="arrow arrow-right"></div> |
95 | 91 | ||
... | @@ -138,7 +134,7 @@ | ... | @@ -138,7 +134,7 @@ |
138 | </div> | 134 | </div> |
139 | </div> | 135 | </div> |
140 | </div> | 136 | </div> |
141 | <div class="quote-btn">{{$t('index.quote.quote')}}</div> | 137 | <div @click="onQuoteHandler" class="quote-btn">{{$t('index.quote.quote')}}</div> |
142 | <div class="customer-service"> | 138 | <div class="customer-service"> |
143 | {{$t('index.quote.want')}} | 139 | {{$t('index.quote.want')}} |
144 | <span @click="toContactUs" class="udl pointer">{{$t('index.quote.service')}}</span> | 140 | <span @click="toContactUs" class="udl pointer">{{$t('index.quote.service')}}</span> |
... | @@ -225,6 +221,7 @@ | ... | @@ -225,6 +221,7 @@ |
225 | </div> | 221 | </div> |
226 | <div class="submit-btn">{{ $t("index.contact.form.Submit") }}</div> | 222 | <div class="submit-btn">{{ $t("index.contact.form.Submit") }}</div> |
227 | </div> | 223 | </div> |
224 | <img class="pic-mobile pic-mobile-botom" src="@/assets/images/index/index-mobile.png" alt /> | ||
228 | </div> | 225 | </div> |
229 | </div> | 226 | </div> |
230 | </div> | 227 | </div> | ... | ... |
... | @@ -64,6 +64,7 @@ export default { | ... | @@ -64,6 +64,7 @@ export default { |
64 | return this.userInfo && this.userInfo.sid; | 64 | return this.userInfo && this.userInfo.sid; |
65 | }, | 65 | }, |
66 | gotoVhis() { | 66 | gotoVhis() { |
67 | // 网销平台productCode : VHIS001, | ||
67 | let url = window.global.vhis; | 68 | let url = window.global.vhis; |
68 | let productCode = this.$route.query.p; | 69 | let productCode = this.$route.query.p; |
69 | productCode = productCode ? productCode : "VHIS001"; | 70 | productCode = productCode ? productCode : "VHIS001"; | ... | ... |
-
Please register or sign in to post a comment