Skip to content

dev / pingan-life-index-pro

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

默认提交

1 parent 27ff180f
Expand all
Inline Side-by-side
Showing 18 changed files with 435 additions and 189 deletions
1 <template> 1 <template>
2 <div id="app"> 2 <div id="app">
3 <v-header class="header"></v-header> 3 <v-header class="header"></v-header>
4 <main ref="container" class="main-container"> 4 <main ref="container" class="main-container">
5 <router-view /> 5 <router-view />
6 </main> 6 </main>
7 <v-footer></v-footer> 7 <v-footer></v-footer>
8 <vhis-modal></vhis-modal> 8 <vhis-modal></vhis-modal>
9 </div> 9 </div>
10 </template> 10 </template>
11 11
12 12
...@@ -436,6 +436,10 @@ textarea { ...@@ -436,6 +436,10 @@ textarea {
436 display: none; 436 display: none;
437 } 437 }
438 438
439 .clarms .el-input__inner {
440 font-size: 22px;
441 }
442
439 @media (max-width: 1200px) { 443 @media (max-width: 1200px) {
440 .page-index { 444 .page-index {
441 .video-js { 445 .video-js {
......
1 <template> 1 <template>
2 2
3 <div> 3 <div class="comp">
4 <template v-if="!insuredList || insuredList.length == 0"> 4 <template v-if="!insuredList || insuredList.length == 0">
5 <div class="reservation-container-2"> 5 <div class="reservation-container-2">
6 <div class="empty"> 6 <div class="empty">
...@@ -17,7 +17,7 @@ ...@@ -17,7 +17,7 @@
17 <template v-else> 17 <template v-else>
18 <div class="reservation-container-2"> 18 <div class="reservation-container-2">
19 <div class="title default-mt"> 19 <div class="title default-mt">
20 <span>{{$t('clarms.step2.label1')}}</span> 20 <span class="t1">{{$t('clarms.step2.label1')}}</span>
21 <div class="clarms-border"> 21 <div class="clarms-border">
22 <el-select class="clarms-select" v-model="data.insuredIndex" :placeholder="$t('clarms.step2.placeHolder1')"> 22 <el-select class="clarms-select" v-model="data.insuredIndex" :placeholder="$t('clarms.step2.placeHolder1')">
23 <template v-if="lan == 'en'"> 23 <template v-if="lan == 'en'">
...@@ -30,7 +30,7 @@ ...@@ -30,7 +30,7 @@
30 </template> 30 </template>
31 </el-select> 31 </el-select>
32 </div> 32 </div>
33 <span>{{$t('clarms.step2.label2')}}</span> 33 <span class="t1">{{$t('clarms.step2.label2')}}</span>
34 </div> 34 </div>
35 <hr> 35 <hr>
36 <div class="gird-g form default-mt"> 36 <div class="gird-g form default-mt">
...@@ -165,4 +165,4 @@ ...@@ -165,4 +165,4 @@
165 <script src="./clarms-plugins-material.js"></script> 165 <script src="./clarms-plugins-material.js"></script>
166 <style lang="scss" scoped> 166 <style lang="scss" scoped>
167 @import "./clarms-plugins-material.scss"; 167 @import "./clarms-plugins-material.scss";
168 </style>
...\ No newline at end of file ...\ No newline at end of file
168 </style>
......
...@@ -9,6 +9,7 @@ ...@@ -9,6 +9,7 @@
9 height: 100%; 9 height: 100%;
10 @extend .fcc; 10 @extend .fcc;
11 text-align: center; 11 text-align: center;
12 font-size: 22px;
12 } 13 }
13 14
14 .overlay { 15 .overlay {
...@@ -23,7 +24,7 @@ ...@@ -23,7 +24,7 @@
23 .modal { 24 .modal {
24 position: relative; 25 position: relative;
25 @extend .bb; 26 @extend .bb;
26 width: 63.333333rem; 27 width: 800px;
27 // height: 28.5rem; 28 // height: 28.5rem;
28 border-radius: .8333rem; 29 border-radius: .8333rem;
29 background-color: #ffffff; 30 background-color: #ffffff;
...@@ -32,93 +33,98 @@ ...@@ -32,93 +33,98 @@
32 33
33 34
34 .content { 35 .content {
35 display: flex; 36 display: flex;
36 justify-content: flex-start; 37 justify-content: flex-start;
37 align-items: center; 38 align-items: center;
38 padding: 10rem 8.333333rem; 39 padding: 10rem 8.333333rem;
39 40
40 .info-icon { 41 .info-icon {
41 width: 10rem; 42 width: 10rem;
42 min-width: 6rem; 43 min-width: 10rem;
43 img { 44
44 width:100%; 45 img {
45 } 46 width: 100%;
46 } 47 }
48 }
47 49
48 .message { 50 .message {
49 margin-left: 1.666667rem; 51 margin-left: 32px;
50 font-size: 1.333333rem; 52 // font-size: 1.333333rem;
51 font-weight: 600; 53 font-weight: 600;
52 color: $cOrange; 54 color: $cOrange;
53 letter-spacing: .083333rem ; 55 letter-spacing: .083333rem;
54 text-align: left; 56 text-align: left;
55 line-height: 1.5; 57 line-height: 1.5;
56 58
57 span { 59 span {
58 cursor: pointer; 60 cursor: pointer;
59 text-decoration: underline; 61 text-decoration: underline;
60 }
61 } 62 }
63 }
62 } 64 }
63 65
64 .close { 66 .close {
65 cursor: pointer; 67 cursor: pointer;
68
66 img { 69 img {
67 width: 1.666667rem ; 70 width: 1.666667rem;
68 position: absolute; 71 position: absolute;
69 right: -2.5rem; 72 right: -2.5rem;
70 top: -1.666667rem ; 73 top: -1.666667rem;
71 } 74 }
72 } 75 }
73 } 76 }
74 77
75 78
76 @media (max-width: 800px) { 79 @media (max-width: 800px) {
77 .modal { 80 .modal {
78 // height: 28.5rem; 81 // height: 28.5rem;
79 padding: 3rem 1.5rem; 82 padding: 3rem 1.5rem;
80 width: 80%; 83 width: 80%;
81 height: auto; 84 height: auto;
82 85
83 .content { 86 .content {
84 padding: 5rem 4rem; 87 padding: 5rem 4rem;
85 } 88 }
86 .close { 89
87 display: none; 90 .close {
88 } 91 display: none;
89 } 92 }
90 } 93 }
94 }
91 95
92 @media (max-width: 700px) { 96 @media (max-width: 700px) {
93 .modal { 97 .modal {
94 // height: 28.5rem; 98 // height: 28.5rem;
95 padding: 3rem 1.5rem; 99 padding: 3rem 1.5rem;
96 width: 80%; 100 width: 80%;
97 height: auto; 101 height: auto;
98 102
99 .content { 103 .content {
100 padding: 4rem 2rem; 104 padding: 4rem 2rem;
101 } 105 }
102 .close { 106
103 display: none; 107 .close {
104 } 108 display: none;
105 } 109 }
106 } 110 }
111 }
107 112
108 113
109 114
110 @media (max-width: 450px) { 115 @media (max-width: 450px) {
111 .modal { 116 .modal {
112 // height: 28.5rem; 117 // height: 28.5rem;
113 padding: 3rem 1.5rem; 118 padding: 3rem 1.5rem;
114 width: 90%; 119 width: 90%;
115 height: auto; 120 height: auto;
116 121
117 .close { 122 .close {
118 display: none; 123 display: none;
119 } 124 }
120 .content { 125
121 padding: 2rem .5rem; 126 .content {
122 } 127 padding: 2rem .5rem;
123 } 128 }
124 } 129 }
130 }
......
...@@ -9,6 +9,7 @@ ...@@ -9,6 +9,7 @@
9 height: 100%; 9 height: 100%;
10 @extend .fcc; 10 @extend .fcc;
11 text-align: center; 11 text-align: center;
12 font-size: 22px;
12 } 13 }
13 14
14 .overlay { 15 .overlay {
...@@ -23,7 +24,7 @@ ...@@ -23,7 +24,7 @@
23 .modal { 24 .modal {
24 position: relative; 25 position: relative;
25 @extend .bb; 26 @extend .bb;
26 width: 63.333333rem; 27 width: 800px;
27 // height: 28.5rem; 28 // height: 28.5rem;
28 border-radius: .8333rem; 29 border-radius: .8333rem;
29 background-color: #ffffff; 30 background-color: #ffffff;
...@@ -32,93 +33,98 @@ ...@@ -32,93 +33,98 @@
32 33
33 34
34 .content { 35 .content {
35 display: flex; 36 display: flex;
36 justify-content: flex-start; 37 justify-content: flex-start;
37 align-items: center; 38 align-items: center;
38 padding: 10rem 8.333333rem; 39 padding: 10rem 8.333333rem;
39 40
40 .info-icon { 41 .info-icon {
41 width: 10rem; 42 width: 10rem;
42 min-width: 6rem; 43 min-width: 10rem;
43 img { 44
44 width:100%; 45 img {
45 } 46 width: 100%;
46 } 47 }
48 }
47 49
48 .message { 50 .message {
49 margin-left: 1.666667rem; 51 margin-left: 32px;
50 font-size: 1.333333rem; 52 // font-size: 1.333333rem;
51 font-weight: 600; 53 font-weight: 600;
52 color: $cOrange; 54 color: $cOrange;
53 letter-spacing: .083333rem ; 55 letter-spacing: .083333rem;
54 text-align: left; 56 text-align: left;
55 line-height: 1.5; 57 line-height: 1.5;
56 58
57 span { 59 span {
58 cursor: pointer; 60 cursor: pointer;
59 text-decoration: underline; 61 text-decoration: underline;
60 }
61 } 62 }
63 }
62 } 64 }
63 65
64 .close { 66 .close {
65 cursor: pointer; 67 cursor: pointer;
68
66 img { 69 img {
67 width: 1.666667rem ; 70 width: 1.666667rem;
68 position: absolute; 71 position: absolute;
69 right: -2.5rem; 72 right: -2.5rem;
70 top: -1.666667rem ; 73 top: -1.666667rem;
71 } 74 }
72 } 75 }
73 } 76 }
74 77
75 78
76 @media (max-width: 800px) { 79 @media (max-width: 800px) {
77 .modal { 80 .modal {
78 // height: 28.5rem; 81 // height: 28.5rem;
79 padding: 3rem 1.5rem; 82 padding: 3rem 1.5rem;
80 width: 80%; 83 width: 80%;
81 height: auto; 84 height: auto;
82 85
83 .content { 86 .content {
84 padding: 5rem 4rem; 87 padding: 5rem 4rem;
85 } 88 }
86 .close { 89
87 display: none; 90 .close {
88 } 91 display: none;
89 } 92 }
90 } 93 }
94 }
91 95
92 @media (max-width: 700px) { 96 @media (max-width: 700px) {
93 .modal { 97 .modal {
94 // height: 28.5rem; 98 // height: 28.5rem;
95 padding: 3rem 1.5rem; 99 padding: 3rem 1.5rem;
96 width: 80%; 100 width: 80%;
97 height: auto; 101 height: auto;
98 102
99 .content { 103 .content {
100 padding: 4rem 2rem; 104 padding: 4rem 2rem;
101 } 105 }
102 .close { 106
103 display: none; 107 .close {
104 } 108 display: none;
105 } 109 }
106 } 110 }
111 }
107 112
108 113
109 114
110 @media (max-width: 450px) { 115 @media (max-width: 450px) {
111 .modal { 116 .modal {
112 // height: 28.5rem; 117 // height: 28.5rem;
113 padding: 3rem 1.5rem; 118 padding: 3rem 1.5rem;
114 width: 90%; 119 width: 90%;
115 height: auto; 120 height: auto;
116 121
117 .close { 122 .close {
118 display: none; 123 display: none;
119 } 124 }
120 .content { 125
121 padding: 2rem .5rem; 126 .content {
122 } 127 padding: 2rem .5rem;
123 } 128 }
124 } 129 }
130 }
......
...@@ -2,6 +2,10 @@ ...@@ -2,6 +2,10 @@
2 2
3 $borderSize: 8px; 3 $borderSize: 8px;
4 4
5 .comp{
6 font-size: 22px;
7 }
8
5 .clarms-container { 9 .clarms-container {
6 box-sizing: border-box; 10 box-sizing: border-box;
7 padding: .166667rem; 11 padding: .166667rem;
...@@ -25,6 +29,7 @@ $borderSize: 8px; ...@@ -25,6 +29,7 @@ $borderSize: 8px;
25 border-radius: 2px; 29 border-radius: 2px;
26 padding: 2px; 30 padding: 2px;
27 background-image: linear-gradient(to right, #ffb31d, #f15907); 31 background-image: linear-gradient(to right, #ffb31d, #f15907);
32 max-width: 400px;
28 33
29 .cont { 34 .cont {
30 @extend .bb; 35 @extend .bb;
...@@ -33,6 +38,7 @@ $borderSize: 8px; ...@@ -33,6 +38,7 @@ $borderSize: 8px;
33 height: 100%; 38 height: 100%;
34 background-color: #ffffff; 39 background-color: #ffffff;
35 border-radius: 2px; 40 border-radius: 2px;
41 font-size: 18px;
36 } 42 }
37 } 43 }
38 44
...@@ -63,7 +69,7 @@ $borderSize: 8px; ...@@ -63,7 +69,7 @@ $borderSize: 8px;
63 } 69 }
64 70
65 .clarms-t1 { 71 .clarms-t1 {
66 font-size: 1.5rem; 72 font-size: 22px;
67 color: #f15907; 73 color: #f15907;
68 letter-spacing: .166667rem; 74 letter-spacing: .166667rem;
69 } 75 }
...@@ -71,6 +77,7 @@ $borderSize: 8px; ...@@ -71,6 +77,7 @@ $borderSize: 8px;
71 .clarms-t2 { 77 .clarms-t2 {
72 color: #58595b; 78 color: #58595b;
73 letter-spacing: .166667rem; 79 letter-spacing: .166667rem;
80 font-size: 18px;
74 } 81 }
75 } 82 }
76 83
...@@ -89,7 +96,8 @@ $borderSize: 8px; ...@@ -89,7 +96,8 @@ $borderSize: 8px;
89 line-height: 3rem; 96 line-height: 3rem;
90 color: white; 97 color: white;
91 letter-spacing: .166667rem; 98 letter-spacing: .166667rem;
92 font-size: 1.166667rem; 99 // font-size: 1.166667rem;
100 font-size: 18px;
93 cursor: pointer; 101 cursor: pointer;
94 } 102 }
95 103
......
1 <template> 1 <template>
2 <div> 2 <div class="comp">
3 <div class="clarms-container"> 3 <div class="clarms-container">
4 <div class="clarms-box"> 4 <div class="clarms-box">
5 <div class="clarms-tips" v-if="tipsVisible"> 5 <div class="clarms-tips" v-if="tipsVisible">
......
1 <template> 1 <template>
2 <div class="reservation-container"> 2 <div class="comp reservation-container">
3 <div class="title" v-if="!(userInfo && userInfo.name)"><u><span class="pointer" @click="toRegisterPage">{{$t('clarms.step1.register')}}</span>/<span class="pointer" @click="toLoginPage">{{$t('clarms.step1.login')}}</span></u>{{$t('clarms.step1.t1')}}</div> 3 <div class="title" v-if="!(userInfo && userInfo.name)"><u><span class="pointer" @click="toRegisterPage">{{$t('clarms.step1.register')}}</span>/<span class="pointer" @click="toLoginPage">{{$t('clarms.step1.login')}}</span></u>{{$t('clarms.step1.t1')}}</div>
4 <div class="form-name default-mt"> {{$t('clarms.step1.label0')}}</div> 4 <div class="form-name default-mt"> {{$t('clarms.step1.label0')}}</div>
5 <div class="gird-g form default-mt"> 5 <div class="gird-g form default-mt">
...@@ -69,4 +69,4 @@ ...@@ -69,4 +69,4 @@
69 <script src="./clarms-plugins-verifyform.js"></script> 69 <script src="./clarms-plugins-verifyform.js"></script>
70 <style lang="scss" scoped> 70 <style lang="scss" scoped>
71 @import "./clarms-plugins-verifyform.scss"; 71 @import "./clarms-plugins-verifyform.scss";
72 </style>
...\ No newline at end of file ...\ No newline at end of file
72 </style>
......
1 1
2 <template> 2 <template>
3 <div>
4 <div class="navigate">
5 <div class="bg"></div>
6 <div class="cont">
7 <span class="tt">索償申請</span>
8 </div>
9 </div>
10 <div class="content clarms">
11 <template v-if="step == 3">
12 <div class="alert">
13 <img class="icon" src="@/assets/images/common/icon-alert-i.png" alt="">
14 <div class="txt">
15 {{$t('customService.unauth.baseInfoTip')}}&nbsp;
16 <span class="pointer btn" @click="gotoInformationPage">{{$t('customService.unauth.infoBtn')}}</span>
17 &nbsp;{{$t('customService.unauth.baseInfoTail')}}
18 </div>
19 <!-- <img class="pointer close" src="@/assets/images/common/icon-alert-close.png" alt=""> -->
20 </div>
21 </template>
22 <clarms-modal-one v-if="showModal1" @close="showModal1 = false"></clarms-modal-one>
23 <clarms-modal-two v-if="showModal2" @close="showModal2 = false"></clarms-modal-two>
24 <div class="mobile-margin">
3 25
4 <div> 26 <template v-if="step == 1">
5 <template v-if="step == 3"> 27 <clarms-verify-form @insuredInfoList="handleInsuredInfo"></clarms-verify-form>
6 <div class="alert"> 28 </template>
7 <img class="icon" src="@/assets/images/common/icon-alert-i.png" alt="">
8 <div class="txt">
9 {{$t('customService.unauth.baseInfoTip')}}&nbsp;
10 <span class="pointer btn" @click="gotoInformationPage">{{$t('customService.unauth.infoBtn')}}</span>
11 &nbsp;{{$t('customService.unauth.baseInfoTail')}}
12 </div>
13 <!-- <img class="pointer close" src="@/assets/images/common/icon-alert-close.png" alt=""> -->
14 </div>
15 </template>
16 <clarms-modal-one v-if="showModal1" @close="showModal1 = false"></clarms-modal-one>
17 <clarms-modal-two v-if="showModal2" @close="showModal2 = false"></clarms-modal-two>
18 <div class="mobile-margin">
19 29
20 <template v-if="step == 1"> 30 <template v-if="step == 2">
21 <clarms-verify-form @insuredInfoList="handleInsuredInfo"></clarms-verify-form> 31 <clarms-material :insuredList="customerList" :cid="cid" @showModal="handleShowModal"></clarms-material>
22 </template> 32 </template>
33 </div>
34 </div>
35 </div>
23 36
24 <template v-if="step == 2">
25 <clarms-material :insuredList="customerList" :cid="cid" @showModal="handleShowModal"></clarms-material>
26 </template>
27 </div>
28 </div>
29 </template> 37 </template>
30 38
31 <script src="./clarms.js"></script> 39 <script src="./clarms.js"></script>
......
1 import {
2 mapGetters,
3 mapActions,
4 mapState
5 } from "vuex";
6
7 import api from '@/api/api'
8 import {
9 httpGet,
10 httpPost
11 } from '@/api/fetch-api.js'
12
13 import ClarmsModalOne from '@/components/clarms/clarms-plugins-modal1.vue';
14 import ClarmsModalTwo from '@/components/clarms/clarms-plugins-modal2.vue';
15 import ClarmsVerifyForm from '@/components/clarms/clarms-plugins-verifyform.vue';
16 import ClarmsMaterial from '@/components/clarms/clarms-plugins-material.vue';
17
18 // 用户没有登录
19 // 校验成功
20 // 校验失败
21 // 用户已经登录
22 // 没有保单
23 // 校验成功
24 // 校验失败
25 // 有保单
26
27 export default {
28 data() {
29 return {
30 step: 0, // 1是表单；2是报案页面；3=信息不完整
31 showModal1: false,
32 showModal2: false,
33 agress: false,
34 reservationTypes: [],
35 cid: false,
36 // 可以理赔的客户信息
37 customerList: []
38 }
39 },
40 components: {
41 ClarmsVerifyForm,
42 ClarmsMaterial,
43 ClarmsModalOne,
44 ClarmsModalTwo
45 },
46 computed: {
47 ...mapState({
48 userInfo: state => state.userInfo
49 }),
50 i18n() {
51 return this.$i18n.messages && this.$i18n.locale ? this.$i18n.messages[this.$i18n.locale] : {};
52 },
53 },
54 methods: {
55 toClarms() {
56 this.$router.push({
57 path: "/clarms",
58 query: {}
59 });
60 },
61 initData() {
62 // this.step = 2;
63 // return;
64 if (this.userInfo && this.userInfo.name) {
65 this.loadCidIfLogin();
66 sessionStorage.removeItem("clarmsRequestCid")
67 } else {
68 let cid = sessionStorage.getItem("clarmsRequestCid");
69 if (cid) {
70 this.cid = cid;
71 this.checkCid();
72 } else {
73 this.step = 1;
74 }
75 }
76 },
77 loadCidIfLogin() {
78 let param = {
79 sid: this.userInfo.sid
80 };
81 httpPost({
82 url: api.getCidByLogin,
83 sid: true,
84 data: param
85 }).then(res => {
86 if (res) {
87 this.cid = res;
88 this.checkCid();
89 } else {
90 this.step = 3;
91 }
92 }).catch(e => {
93 this.step = 1;
94 });
95 },
96 checkCid() {
97 let param = {
98 cid: this.cid
99 }
100 httpPost({
101 url: api.clarmsCustomerList,
102 data: param
103 }).then(res => {
104 sessionStorage.removeItem("clarmsRequestCid");
105 if (res) {
106 this.customerList = res.insuredInfoList;
107 this.step = 2;
108 }
109 // if (res && res.insuredInfoList && res.insuredInfoList.length > 0) {
110 // this.customerList = res.insuredInfoList;
111 // this.step = 2;
112 // } else {
113 // sessionStorage.removeItem("clarmsRequestCid");
114 // this.step = 1;
115 // }
116 }).catch(e => {
117 sessionStorage.removeItem("clarmsRequestCid");
118 this.step = 1;
119 });
120 },
121 handleInsuredInfo(data) {
122 this.cid = data.cid;
123 this.customerList = data.list;
124 this.step = 2;
125 },
126 handleShowModal(modalIndex) {
127 console.log(modalIndex);
128 if (modalIndex == 1) {
129 this.showModal1 = true;
130 } else if (modalIndex == 2) {
131 this.showModal2 = true;
132 }
133 },
134 gotoInformationPage() {
135 let c = this.$route.fullPath;
136 this.$router.push({
137 path: "/infomation/improve",
138 query: {
139 c: c,
140 a: 1
141 }
142 });
143 },
144 logoutAction() {
145 this.sid = false;
146 this.hadQueryCustomerList = false;
147 this.customerList = [];
148 this.step = 1;
149 },
150 loginAction() {
151 this.sid = false;
152 this.hadQueryCustomerList = false;
153 this.customerList = [];
154 }
155 },
156 watch: {
157 userInfo(val) {
158 if (val && val.name) {
159 this.loginAction();
160 } else {
161 this.logoutAction();
162 }
163 }
164 },
165 mounted() {
166 this.initData();
167 },
168 created() {}
169 }
...@@ -29,11 +29,13 @@ input { ...@@ -29,11 +29,13 @@ input {
29 } 29 }
30 30
31 .reservation-container { 31 .reservation-container {
32 @extend .fcc;
32 @extend .bb; 33 @extend .bb;
33 border-radius: .666667rem; 34 border-radius: .666667rem;
34 border: solid .083333rem $cOrange; 35 border: solid .083333rem $cOrange;
35 background-color: #ffffff; 36 background-color: #ffffff;
36 padding: 2.666667rem 10rem 2.833333rem 10rem; 37 padding: 2.666667rem 10rem 2.833333rem 10rem;
38 min-height: 500px;
37 39
38 .title { 40 .title {
39 font-size: 1.333333rem; 41 font-size: 1.333333rem;
...@@ -80,7 +82,7 @@ input { ...@@ -80,7 +82,7 @@ input {
80 border: solid .083333rem $cOrange; 82 border: solid .083333rem $cOrange;
81 background-color: #ffffff; 83 background-color: #ffffff;
82 padding: 1.666667rem 10rem 2.833333rem 10rem; 84 padding: 1.666667rem 10rem 2.833333rem 10rem;
83 85
84 .title { 86 .title {
85 font-size: 1.333333rem; 87 font-size: 1.333333rem;
86 color: $cOrange; 88 color: $cOrange;
...@@ -94,28 +96,28 @@ input { ...@@ -94,28 +96,28 @@ input {
94 color: #666666; 96 color: #666666;
95 } 97 }
96 } 98 }
97 99
98 .default-mt { 100 .default-mt {
99 margin-top: 2.666667rem; 101 margin-top: 2.666667rem;
100 } 102 }
101 103
102 .submit-btn{ 104 .submit-btn{
103 margin: 2.5rem auto 1rem; 105 margin: 2.5rem auto 1rem;
104 } 106 }
105 107
106 .flex-top { 108 .flex-top {
107 display: flex; 109 display: flex;
108 justify-content: left; 110 justify-content: left;
109 align-items: flex-start; 111 align-items: flex-start;
110 } 112 }
111 113
112 .flex-start { 114 .flex-start {
113 display: flex; 115 display: flex;
114 justify-content: left; 116 justify-content: left;
115 align-items: flex-start; 117 align-items: flex-start;
116 flex-wrap: wrap; 118 flex-wrap: wrap;
117 } 119 }
118 120
119 .check-item { 121 .check-item {
120 display: flex; 122 display: flex;
121 align-items: center; 123 align-items: center;
...@@ -171,28 +173,28 @@ input { ...@@ -171,28 +173,28 @@ input {
171 background: url("~@/assets/images/clarms/icon1.png"); 173 background: url("~@/assets/images/clarms/icon1.png");
172 background-size: 100% 100%; 174 background-size: 100% 100%;
173 } 175 }
174 176
175 .upload-icon-2 { 177 .upload-icon-2 {
176 width: 8.333333rem ; 178 width: 8.333333rem ;
177 height: 8.333333rem ; 179 height: 8.333333rem ;
178 background: url("~@/assets/images/clarms/icon2.png"); 180 background: url("~@/assets/images/clarms/icon2.png");
179 background-size: 100% 100%; 181 background-size: 100% 100%;
180 } 182 }
181 183
182 .upload-icon-3 { 184 .upload-icon-3 {
183 width: 8.333333rem ; 185 width: 8.333333rem ;
184 height: 8.333333rem ; 186 height: 8.333333rem ;
185 background: url("~@/assets/images/clarms/icon3.png"); 187 background: url("~@/assets/images/clarms/icon3.png");
186 background-size: 100% 100%; 188 background-size: 100% 100%;
187 } 189 }
188 190
189 .upload-icon-4 { 191 .upload-icon-4 {
190 width: 8.333333rem ; 192 width: 8.333333rem ;
191 height: 8.333333rem ; 193 height: 8.333333rem ;
192 background: url("~@/assets/images/clarms/icon4.png"); 194 background: url("~@/assets/images/clarms/icon4.png");
193 background-size: 100% 100%; 195 background-size: 100% 100%;
194 } 196 }
195 197
196 .upload-icon-5 { 198 .upload-icon-5 {
197 width: 8.333333rem ; 199 width: 8.333333rem ;
198 height: 8.333333rem ; 200 height: 8.333333rem ;
...@@ -218,7 +220,7 @@ input { ...@@ -218,7 +220,7 @@ input {
218 border-top: 1px solid #eee; 220 border-top: 1px solid #eee;
219 margin-top: 2.5rem ; 221 margin-top: 2.5rem ;
220 } 222 }
221 223
222 .tips { 224 .tips {
223 display: flex; 225 display: flex;
224 justify-content: flex-start; 226 justify-content: flex-start;
...@@ -234,7 +236,7 @@ input { ...@@ -234,7 +236,7 @@ input {
234 color: $cOrange; 236 color: $cOrange;
235 } 237 }
236 } 238 }
237 239
238 .contact { 240 .contact {
239 text-align: center; 241 text-align: center;
240 cursor: pointer; 242 cursor: pointer;
...@@ -242,7 +244,7 @@ input { ...@@ -242,7 +244,7 @@ input {
242 font-weight: 600; 244 font-weight: 600;
243 } 245 }
244 } 246 }
245 247
246 248
247 .form { 249 .form {
248 display: flex; 250 display: flex;
...@@ -466,7 +468,7 @@ input { ...@@ -466,7 +468,7 @@ input {
466 .label { 468 .label {
467 min-width: 30%; 469 min-width: 30%;
468 } 470 }
469 471
470 .ipt-wrap { 472 .ipt-wrap {
471 width: 70%; 473 width: 70%;
472 } 474 }
...@@ -478,7 +480,7 @@ input { ...@@ -478,7 +480,7 @@ input {
478 } 480 }
479 } 481 }
480 } 482 }
481 } 483 }
482 484
483 @media (max-width: 600px) { 485 @media (max-width: 600px) {
484 .reservation-container { 486 .reservation-container {
...@@ -492,7 +494,7 @@ input { ...@@ -492,7 +494,7 @@ input {
492 .label { 494 .label {
493 min-width: 30%; 495 min-width: 30%;
494 } 496 }
495 497
496 .ipt-wrap { 498 .ipt-wrap {
497 width: 70%; 499 width: 70%;
498 } 500 }
...@@ -539,4 +541,4 @@ input { ...@@ -539,4 +541,4 @@ input {
539 .reservation-container-2 { 541 .reservation-container-2 {
540 padding: 1.666667rem 1rem; 542 padding: 1.666667rem 1rem;
541 } 543 }
542 }
...\ No newline at end of file ...\ No newline at end of file
544 }
......
1
2 <template>
3 <div class="reservation-container">
4 <div class="submit-btn" @click="toClarms">下一步</div>
5 </div>
6 <!-- <div>
7 <template v-if="step == 3">
8 <div class="alert">
9 <img class="icon" src="@/assets/images/common/icon-alert-i.png" alt="">
10 <div class="txt">
11 {{$t('customService.unauth.baseInfoTip')}}&nbsp;
12 <span class="pointer btn" @click="gotoInformationPage">{{$t('customService.unauth.infoBtn')}}</span>
13 &nbsp;{{$t('customService.unauth.baseInfoTail')}}
14 </div>
15 </div>
16 </template>
17 <clarms-modal-one v-if="showModal1" @close="showModal1 = false"></clarms-modal-one>
18 <clarms-modal-two v-if="showModal2" @close="showModal2 = false"></clarms-modal-two>
19 <div class="mobile-margin">
20
21 <template v-if="step == 1">
22 <clarms-verify-form @insuredInfoList="handleInsuredInfo"></clarms-verify-form>
23 </template>
24
25 <template v-if="step == 2">
26 <clarms-material :insuredList="customerList" :cid="cid" @showModal="handleShowModal"></clarms-material>
27 </template>
28 </div>
29 </div> -->
30 </template>
31
32 <script src="./clarms-comp.js"></script>
33 <style lang="scss" scoped>
34 @import "./clarms-comp.scss";
35 </style>
...@@ -14,7 +14,7 @@ import CommonForm from './components/common-form.vue' ...@@ -14,7 +14,7 @@ import CommonForm from './components/common-form.vue'
14 import PolicyChangeGuide from './components/policy-change-guide.vue' 14 import PolicyChangeGuide from './components/policy-change-guide.vue'
15 import PolicyChangeContact from './components/policy-change-contact.vue' 15 import PolicyChangeContact from './components/policy-change-contact.vue'
16 import PolicyChangeInformation from './components/policy-change-information.vue' 16 import PolicyChangeInformation from './components/policy-change-information.vue'
17 import Clarms from './components/clarms.vue' 17 import Clarms from './components/clarms-comp.vue'
18 18
19 export default { 19 export default {
20 data() { 20 data() {
......
...@@ -189,7 +189,7 @@ export default { ...@@ -189,7 +189,7 @@ export default {
189 this.$set(this, 'bannerList', bannerList); 189 this.$set(this, 'bannerList', bannerList);
190 console.log(this.bannerList); 190 console.log(this.bannerList);
191 191
192 this.refreshVideoPlayer(targetData.videoUrl, targetData.videoPlayer); 192 this.refreshVideoPlayer(targetData.videoUrl, targetData.videoPoster);
193 // 设置标题 193 // 设置标题
194 document.title = targetData.productName; 194 document.title = targetData.productName;
195 195
......
...@@ -276,6 +276,14 @@ const routes = [ ...@@ -276,6 +276,14 @@ const routes = [
276 meta: { 276 meta: {
277 title: '平安人寿香港' 277 title: '平安人寿香港'
278 } 278 }
279 },
280 {
281 path: '/clarms',
282 name: 'clarms',
283 component: () => import('./pages/clarms/clarms.vue'),
284 meta: {
285 title: '平安人寿香港'
286 }
279 } 287 }
280 // 404页面 288 // 404页面
281 // { 289 // {
...@@ -306,12 +314,12 @@ router.beforeEach((to, from, next) => { ...@@ -306,12 +314,12 @@ router.beforeEach((to, from, next) => {
306 case "zh": 314 case "zh":
307 lang = zh; 315 lang = zh;
308 break; 316 break;
309 // 英文 317 // 英文
310 case "en": 318 case "en":
311 defaultTitle = "Ping An Life Hong Kong" 319 defaultTitle = "Ping An Life Hong Kong"
312 lang = en; 320 lang = en;
313 break; 321 break;
314 // 繁体 322 // 繁体
315 default: 323 default:
316 defaultTitle = "平安人壽香港" 324 defaultTitle = "平安人壽香港"
317 lang = tc; 325 lang = tc;
......