Skip to content

dev / pingan-life-index-pro

Go to a project
Toggle navigation
Toggle navigation pinning
0b5e6d57 by simon
Options

保单查询修改

1 parent f91f43a5
Inline Side-by-side
Showing 4 changed files with 72 additions and 39 deletions
...@@ -36,6 +36,7 @@ export default { ...@@ -36,6 +36,7 @@ export default {
36 this.dataForm = null; 36 this.dataForm = null;
37 httpPost({ url: api.policyDetail, sid: true, data: submitData }).then(res => { 37 httpPost({ url: api.policyDetail, sid: true, data: submitData }).then(res => {
38 this.dataForm = res; 38 this.dataForm = res;
39 console.log("this.dataForm:",this.dataForm.productCode)
39 40
40 41
41 if (this.dataForm.clientNameCn) { 42 if (this.dataForm.clientNameCn) {
......
1 @import '@/styles/_support.scss'; 1 @import "@/styles/_support.scss";
2 2
3 .container{ 3 .container {
4 // font-size: 18px; 4 // font-size: 18px;
5 } 5 }
6 6
...@@ -52,7 +52,8 @@ ...@@ -52,7 +52,8 @@
52 cursor: pointer; 52 cursor: pointer;
53 width: 12px; 53 width: 12px;
54 height: 8px; 54 height: 8px;
55 background: url("~@/assets/images/insurance-query/triangle-down.png") no-repeat center center; 55 background: url("~@/assets/images/insurance-query/triangle-down.png")
56 no-repeat center center;
56 background-size: 100% 100%; 57 background-size: 100% 100%;
57 } 58 }
58 59
...@@ -64,9 +65,7 @@ ...@@ -64,9 +65,7 @@
64 } 65 }
65 66
66 .table-content { 67 .table-content {
67
68 height: auto; 68 height: auto;
69 // display: inline-block;
70 border-bottom-left-radius: 8px; 69 border-bottom-left-radius: 8px;
71 border-bottom-right-radius: 8px; 70 border-bottom-right-radius: 8px;
72 border-left: solid 1px #f2f2f2; 71 border-left: solid 1px #f2f2f2;
...@@ -77,6 +76,49 @@ ...@@ -77,6 +76,49 @@
77 transition: max-height ease-out 0.3s !important; 76 transition: max-height ease-out 0.3s !important;
78 overflow: scroll; 77 overflow: scroll;
79 78
79 .cell {
80 position: relative;
81 display: flex;
82 justify-content: space-between;
83 align-items: center;
84 height: 50px;
85 border-bottom: solid 1px #f2f2f2;
86
87 .label span {
88 color: $cOrange;
89 margin-left: 7px;
90 cursor: pointer;
91 text-decoration: underline;
92 }
93
94 &:last-child(){
95 border-bottom: none;
96 }
97 &:nth-last-child(2){
98 border-bottom: none;
99 }
100
101 &:nth-child(odd) {
102 padding-right: 10px;
103 }
104 &:nth-child(even) {
105 padding-left: 10px;
106 }
107 &:nth-child(odd):after {
108 content: "";
109 background-color: #f2f2f2;
110 position: absolute;
111 top: 10px;
112 right: 0;
113 height: 30px;
114 width: 1px;
115 }
116 }
117
118 .cell1:nth-child(1){
119 text-align: right !important;
120 }
121
80 .data-line { 122 .data-line {
81 height: 50px; 123 height: 50px;
82 margin: auto; 124 margin: auto;
...@@ -114,7 +156,6 @@ ...@@ -114,7 +156,6 @@
114 } 156 }
115 } 157 }
116 158
117
118 .label span { 159 .label span {
119 color: #f05a23; 160 color: #f05a23;
120 margin-left: 7px; 161 margin-left: 7px;
...@@ -141,7 +182,6 @@ ...@@ -141,7 +182,6 @@
141 max-height: 0; 182 max-height: 0;
142 border-bottom: none; 183 border-bottom: none;
143 } 184 }
144
145 } 185 }
146 186
147 .cell-between { 187 .cell-between {
...@@ -156,7 +196,6 @@ ...@@ -156,7 +196,6 @@
156 } 196 }
157 } 197 }
158 } 198 }
159
160 } 199 }
161 200
162 .icon-download { 201 .icon-download {
...@@ -201,4 +240,3 @@ ...@@ -201,4 +240,3 @@
201 // .table-content{ 240 // .table-content{
202 // -ms-overflow-style: none; 241 // -ms-overflow-style: none;
203 // } 242 // }
204
......
...@@ -8,6 +8,8 @@ ...@@ -8,6 +8,8 @@
8 8
9 <!-- 保单详情 --> 9 <!-- 保单详情 -->
10 <template v-if="dataForm"> 10 <template v-if="dataForm">
11
12 <!-- 1 -->
11 <div class="cell-group"> 13 <div class="cell-group">
12 <div class="table-header"> 14 <div class="table-header">
13 <div class="normal-header"> 15 <div class="normal-header">
...@@ -15,79 +17,65 @@ ...@@ -15,79 +17,65 @@
15 <div class="guide" :class="{rotate180 : !insuranceForm.f1}" @click="insuranceForm.f1 = !insuranceForm.f1"></div> 17 <div class="guide" :class="{rotate180 : !insuranceForm.f1}" @click="insuranceForm.f1 = !insuranceForm.f1"></div>
16 </div> 18 </div>
17 </div> 19 </div>
18 <div class="table-content" :class="{hide : !insuranceForm.f1}"> 20
19 <div class="data-line"> 21 <div class="gird-g table-content flw" :class="{hide : !insuranceForm.f1}">
20 <div class="cell1"> 22 <div class="pure-u-1-2 pure-u-md-1-2 cell">
21 <div class="label">{{$t('customService.insuranceQuery.t2n1')}}</div> 23 <div class="label">{{$t('customService.insuranceQuery.t2n1')}}</div>
22 <div class="label">{{formatPolicyName(dataForm.productCode, dataForm.productName)}}</div> 24 <div class="label">{{formatPolicyName(dataForm.productCode, dataForm.productName)}}</div>
23 </div> 25 </div>
24 <div class="separator-v"></div> 26 <div class="pure-u-1-2 pure-u-md-1-2 cell">
25 <div class="cell1">
26 <div class="label">{{$t('customService.insuranceQuery.t2n2')}}</div> 27 <div class="label">{{$t('customService.insuranceQuery.t2n2')}}</div>
27 <div class="label">{{dataForm.moneyMark}} {{formatMoney(dataForm.amount,0)}}</div> 28 <div class="label">{{dataForm.moneyMark}} {{formatMoney(dataForm.amount,0)}}</div>
28 </div> 29 </div>
29 </div>
30 30
31 <div class="separator-h"></div> 31 <div class="pure-u-1-2 pure-u-md-1-2 cell" v-if="dataForm.productCode == 'WLPAR01' || dataForm.productCode == 'WLPAR02'">
32 <div class="data-line">
33 <div class="cell1">
34 <div class="label">{{$t('customService.insuranceQuery.t2n9k')}}</div> 32 <div class="label">{{$t('customService.insuranceQuery.t2n9k')}}</div>
35 <div class="label">{{$t('customService.insuranceQuery.t2n9v')}}</div> 33 <div class="label">{{$t('customService.insuranceQuery.t2n9v')}}</div>
36 </div> 34 </div>
37 <div class="separator-v"></div> 35
38 <div class="cell1"> 36 <div class="pure-u-1-2 pure-u-md-1-2 cell">
39 <div class="label">{{$t('customService.insuranceQuery.t2n3')}}</div> 37 <div class="label">{{$t('customService.insuranceQuery.t2n3')}}</div>
40 <div class="label">{{dataForm.activeDate?dataForm.activeDate.split(" ")[0]:""}}</div> 38 <div class="label">{{dataForm.activeDate?dataForm.activeDate.split(" ")[0]:""}}</div>
41 </div> 39 </div>
42 </div>
43 40
44 <div class="separator-h"></div> 41 <div class="pure-u-1-2 pure-u-md-1-2 cell">
45 <div class="data-line">
46 <div class="cell1">
47 <div class="label">{{$t('customService.insuranceQuery.t2n4')}}</div> 42 <div class="label">{{$t('customService.insuranceQuery.t2n4')}}</div>
48 <div class="label">{{formatInsuredPeriod(dataForm.periodType,dataForm.periodValue)}}</div> 43 <div class="label">{{formatInsuredPeriod(dataForm.periodType,dataForm.periodValue)}}</div>
49 </div> 44 </div>
50 <div class="separator-v"></div> 45 <div class="pure-u-1-2 pure-u-md-1-2 cell">
51 <div class="cell1">
52 <div class="label">{{$t('customService.insuranceQuery.t2n5')}} 46 <div class="label">{{$t('customService.insuranceQuery.t2n5')}}
53 <span @click="toModifyPage(1)">{{$t('customService.insuranceQuery.modify')}}</span> 47 <span @click="toModifyPage(1)">{{$t('customService.insuranceQuery.modify')}}</span>
54 </div> 48 </div>
55 <div class="label">{{dataForm.insuredNameCn}}</div> 49 <div class="label">{{dataForm.insuredNameCn}}</div>
56 </div> 50 </div>
57 </div> 51
58 <div class="separator-h"></div> 52 <div class="pure-u-1-2 pure-u-md-1-2 cell">
59 <div class="data-line">
60 <div class="cell1">
61 <div class="label">{{$t('customService.insuranceQuery.t2n6')}} 53 <div class="label">{{$t('customService.insuranceQuery.t2n6')}}
62 <span @click="toModifyPage(1)">{{$t('customService.insuranceQuery.modify')}}</span> 54 <span @click="toModifyPage(1)">{{$t('customService.insuranceQuery.modify')}}</span>
63 </div> 55 </div>
64 <div class="label">{{dataForm.insuredNameEn}}</div> 56 <div class="label">{{dataForm.insuredNameEn}}</div>
65 </div> 57 </div>
66 <div class="separator-v"></div> 58 <div class="pure-u-1-2 pure-u-md-1-2 cell">
67 <div class="cell1">
68 <div class="label">{{$t('customService.insuranceQuery.t2n7')}}</div> 59 <div class="label">{{$t('customService.insuranceQuery.t2n7')}}</div>
69 <div class="label">{{dataForm.insuredBirthday?dataForm.insuredBirthday.split(" ")[0]:""}}</div> 60 <div class="label">{{dataForm.insuredBirthday?dataForm.insuredBirthday.split(" ")[0]:""}}</div>
70 </div> 61 </div>
71 </div>
72 62
73 <div class="separator-h"></div> 63 <div class="pure-u-1-2 pure-u-md-1-2 cell">
74 <div class="data-line">
75 <div class="cell1">
76 <div class="label">{{$t('customService.insuranceQuery.t2n8')}} 64 <div class="label">{{$t('customService.insuranceQuery.t2n8')}}
77 <span @click="toModifyPage(1)">{{$t('customService.insuranceQuery.modify')}}</span> 65 <span @click="toModifyPage(1)">{{$t('customService.insuranceQuery.modify')}}</span>
78 </div> 66 </div>
79 <div class="label">{{dataForm.insuredIdNumber}}</div> 67 <div class="label">{{dataForm.insuredIdNumber}}</div>
80 </div> 68 </div>
81 69
82 <div class="separator-v"></div> 70 <!-- 为了凑正对 -->
83 <div class="cell1"> 71 <div class="pure-u-1-2 pure-u-md-1-2 cell" v-if="dataForm.productCode == 'WLPAR01' || dataForm.productCode == 'WLPAR02'">
84 <div class="label"></div> 72 <div class="label"></div>
85 <div class="label"></div> 73 <div class="label"></div>
86 </div> 74 </div>
87 </div> 75 </div>
88 </div> 76 </div>
89 </div>
90 77
78 <!-- 2 -->
91 <div class="cell-group"> 79 <div class="cell-group">
92 <div class="table-header"> 80 <div class="table-header">
93 <div class="normal-header"> 81 <div class="normal-header">
...@@ -161,6 +149,7 @@ ...@@ -161,6 +149,7 @@
161 </div> 149 </div>
162 </div> 150 </div>
163 151
152 <!-- 3 -->
164 <div class="cell-group cell-between"> 153 <div class="cell-group cell-between">
165 <div class="table-header"> 154 <div class="table-header">
166 <div class="normal-header"> 155 <div class="normal-header">
......
...@@ -8,6 +8,11 @@ ...@@ -8,6 +8,11 @@
8 display: flex; 8 display: flex;
9 } 9 }
10 10
11 .flw {
12 display: flex;
13 flex-wrap: wrap;
14 }
15
11 .flc { 16 .flc {
12 display: flex; 17 display: flex;
13 justify-content: center; 18 justify-content: center;
......