Skip to content

dev / pingan-life-index-pro

Go to a project
Toggle navigation
Toggle navigation pinning
b196a9fd by joe
Options

保单查询

1 parent 7f539609
Inline Side-by-side
Showing 18 changed files with 620 additions and 0 deletions
1 import api from '@/api/api'
2 import {
3 httpGet,
4 httpPost
5 } from '@/api/fetch-api.js'
6
7 // import InsuranceQuery from './components/insurance-query'
8
9 export default {
10 data() {
11 return {
12 activity: "m1",
13
14 insuranceForm: {
15 f1 : true,
16 f2 : true,
17 f3 : true,
18 f4 : true,
19 f5 : true,
20 }
21 }
22 },
23 methods: {
24 initData() { },
25 },
26 created() { },
27 components: {
28 // InsuranceQuery
29 }
30 }
1
2
3 .content {
4 display: flex;
5 }
6
7 .left-panel {
8 width: 12.833333rem ;
9 height: 42.333333rem ;
10 margin-left: 3.166667rem;
11
12 .separator {
13 margin:auto;
14 width: 10.5rem ;
15 height: .083333rem;
16 background-color: #dcdddd;
17 }
18 .menu-item {
19 height: 5.916667rem;
20 line-height: 5.916667rem;
21 font-size: 1.5rem ;
22 font-weight: bold;
23 color: #4c4948;
24 text-align: center;
25 cursor: pointer;
26
27 i {
28 display: inline-block;
29 width: 1.666667rem ;
30 height: 1.666667rem;
31 margin-right: 1.333333rem;
32 vertical-align: middle;
33 }
34 .m1 {
35 background: url("~@/assets/images/insurance-query/m1-unselect.png") no-repeat center center;
36 background-size: 100% 100%;
37 }
38 .m2 {
39 background: url("~@/assets/images/insurance-query/m2-unselect.png") no-repeat center center;
40 background-size: 100% 100%;
41 }
42 .m3 {
43 background: url("~@/assets/images/insurance-query/m3-unselect.png") no-repeat center center;
44 background-size: 100% 100%;
45 }
46 .m4 {
47 background: url("~@/assets/images/insurance-query/m4-unselect.png") no-repeat center center;
48 background-size: 100% 100%;
49 }
50 .m5 {
51 background: url("~@/assets/images/insurance-query/m5-unselect.png") no-repeat center center;
52 background-size: 100% 100%;
53 }
54 .m6 {
55 background: url("~@/assets/images/insurance-query/m6-unselect.png") no-repeat center center;
56 background-size: 100% 100%;
57 }
58 }
59 .menu-item.activity {
60 color: #f05a23 !important;
61
62 .m1 {
63 background: url("~@/assets/images/insurance-query/m1.png") no-repeat center center;
64 background-size: 100% 100%;
65 }
66 .m2 {
67 background: url("~@/assets/images/insurance-query/m2.png") no-repeat center center;
68 background-size: 100% 100%;
69 }
70 .m3 {
71 background: url("~@/assets/images/insurance-query/m3.png") no-repeat center center;
72 background-size: 100% 100%;
73 }
74 .m4 {
75 background: url("~@/assets/images/insurance-query/m4.png") no-repeat center center;
76 background-size: 100% 100%;
77 }
78 .m5 {
79 background: url("~@/assets/images/insurance-query/m5.png") no-repeat center center;
80 background-size: 100% 100%;
81 }
82 .m6 {
83 background: url("~@/assets/images/insurance-query/m6.png") no-repeat center center;
84 background-size: 100% 100%;
85 }
86
87 }
88 }
89
90 .min-panel {
91 margin-left: .666667rem;
92 width: 1.166667rem;
93
94 .item {
95 width: 1.166667rem ;
96 height: 6rem;
97 display: flex;
98 justify-content: flex-start;
99 align-items: center;
100 }
101
102 .activity .triangle {
103 width: .583333rem;
104 height: 1.166667rem ;
105 background: url("~@/assets/images/insurance-query/triangle.png") no-repeat center center;
106 background-size: 100% 100%;
107 }
108 }
109
110 .right-panel {
111 margin-left: 1.166667rem;
112 width: 64.166667rem ;
113 background-color: #ffffff;
114
115 .panel {
116 display: none;
117 }
118
119 .activity {
120 display: block !important;
121 }
122 }
123
124
125 /** 可以抽出来作为一个插件 **/
126 .cell-group {
127 margin-bottom: 1rem /* 12/12 */;
128 div{
129 font-size: 1rem /* 12/12 */;
130 color: #4c4948;
131 }
132
133 .w1 {
134 min-width: 9.166667rem /* 110/12 */;
135 text-align: center;
136 }
137
138 .w2 {
139 min-width: 6.25rem /* 75/12 */;
140 text-align: center;
141 }
142
143 .table-header {
144 width: 64.166667rem /* 770/12 */;
145 height: 2.5rem /* 30/12 */;
146 border-top-left-radius: .666667rem /* 8/12 */;
147 border-top-right-radius: .666667rem /* 8/12 */;
148 background-color: #f2f2f2;
149 display: flex;
150 align-items: center;
151
152 .normal-header {
153 width: 58.833333rem /* 706/12 */;
154 margin: auto;
155 display: flex;
156 justify-content: space-between;
157 align-items: center;
158
159 .title {
160 font-size: 1rem /* 12/12 */;
161 font-weight: bold;
162 color: #575453;
163 }
164
165 .guide {
166 transition: all 0.5s;
167 cursor: pointer;
168 width: 1rem /* 12/12 */;
169 height: .666667rem /* 8/12 */ ;
170 background: url("~@/assets/images/insurance-query/triangle-down.png") no-repeat center center;
171 background-size: 100% 100%;
172 }
173
174 .rotate180 {
175 transform: rotate(180deg);
176 transition: all 0.5s;
177 }
178 }
179 }
180
181 .table-content {
182 width: 64.166667rem /* 770/12 */;
183 height: auto;
184 display: inline-block;
185 border-bottom-left-radius: .666667rem /* 8/12 */;
186 border-bottom-right-radius: .666667rem /* 8/12 */;
187 border-left: solid .083333rem /* 1/12 */ #f2f2f2;
188 border-right: solid .083333rem /* 1/12 */ #f2f2f2;
189 border-bottom: solid .083333rem /* 1/12 */ #f2f2f2;
190 padding: 0 2.583333rem /* 31/12 */;
191 max-height: 41.666667rem /* 500/12 */;
192 transition: max-height ease-out 0.3s !important;
193 overflow: hidden;
194
195 .data-line {
196 height: 4.416667rem /* 53/12 */;
197 margin: auto;
198 display: flex;
199 justify-content: space-between;
200 align-items: center;
201
202 .cell1 {
203 width: 29.166667rem /* 350/12 */;
204 display: flex;
205 justify-content: space-between;
206 margin: auto;
207 }
208
209 .separator-v {
210 height: 2.5rem /* 30/12 */;
211 width: .166667rem /* 2/12 */;
212 background-color: #f2f2f2;
213 margin: 0 .916667rem /* 11/12 */;
214 }
215 }
216
217 .label span {
218 color: #f05a23;
219 margin-left: .583333rem /* 7/12 */;
220 cursor: pointer;
221 text-decoration: underline;
222 }
223
224 .separator-h {
225 width: 58.833333rem /* 706/12 */;
226 height: .083333rem /* 1/12 */;
227 background-color: #f2f2f2;
228 }
229 }
230 .orange {
231 background-color: #f05a23 !important;
232 div {
233 color: #ffffff;
234 }
235 }
236
237 .hide {
238 max-height: 0;
239 border-bottom:none;
240 }
241
242 }
243
244 .empty-line {
245 height: 1.333333rem /* 16/12 */;
246 }
...\ No newline at end of file ...\ No newline at end of file
1 <template>
2 <div class="content">
3 <div class="left-panel">
4 <div class="menu-item" :class="{activity : activity == 'm1'}" @click="activity = 'm1'">
5 <i class="m1"></i>保單查詢
6 <div></div>
7 </div>
8 <div class="separator"></div>
9 <div class="menu-item" :class="{activity : activity == 'm2'}" @click="activity = 'm2'">
10 <i class="m2"></i>保全變更
11 </div>
12 <div class="separator"></div>
13 <div class="menu-item" :class="{activity : activity == 'm3'}" @click="activity = 'm3'">
14 <i class="m3"></i>續期繳費
15 </div>
16 <div class="separator"></div>
17 <div class="menu-item" :class="{activity : activity == 'm4'}" @click="activity = 'm4'">
18 <i class="m4"></i>理赔申请
19 </div>
20 <div class="separator"></div>
21 <div class="menu-item" :class="{activity : activity == 'm5'}" @click="activity = 'm5'">
22 <i class="m5"></i>預約服務
23 </div>
24 <div class="separator"></div>
25 <div class="menu-item" :class="{activity : activity == 'm6'}" @click="activity = 'm6'">
26 <i class="m6"></i>投诉受理
27 </div>
28 </div>
29 <div class="min-panel">
30 <div class="item" :class="{activity : activity == 'm1'}">
31 <div class="triangle"></div>
32 </div>
33 <div class="item" :class="{activity : activity == 'm2'}">
34 <div class="triangle"></div>
35 </div>
36 <div class="item" :class="{activity : activity == 'm3'}">
37 <div class="triangle"></div>
38 </div>
39 <div class="item" :class="{activity : activity == 'm4'}">
40 <div class="triangle"></div>
41 </div>
42 <div class="item" :class="{activity : activity == 'm5'}">
43 <div class="triangle"></div>
44 </div>
45 <div class="item" :class="{activity : activity == 'm6'}">
46 <div class="triangle"></div>
47 </div>
48 </div>
49 <div class="right-panel">
50 <div class="panel" :class="{activity : activity == 'm1'}">
51 <div class="cell-group">
52 <div class="table-header orange">
53 <div class="normal-header">
54 <div class="td w1">保單號碼</div>
55 <div class="td w2">被保人</div>
56 <div class="td w2">險種名稱</div>
57 <div class="td w2">保險金額</div>
58 <div class="td w2">生效日期</div>
59 <div class="td w2">保障年期</div>
60 </div>
61 </div>
62 <div class="table-content">
63 <div class="data-line">
64 <div class="td w1">P3**********0772</div>
65 <div class="td w2">平安</div>
66 <div class="td w2">分红重疾</div>
67 <div class="td w2">HK$10,000</div>
68 <div class="td w2">2020-1-1</div>
69 <div class="td w2">終身</div>
70 </div>
71 </div>
72 </div>
73
74 <div class="cell-group">
75 <div class="table-header">
76 <div class="normal-header">
77 <div class="title">保障内容</div>
78 <div class="guide" :class="{rotate180 : !insuranceForm.f1}" @click="insuranceForm.f1 = !insuranceForm.f1"></div>
79 </div>
80 </div>
81 <div class="table-content" :class="{hide : !insuranceForm.f1}">
82 <div class="data-line">
83 <div class="cell1">
84 <div class="label">险种名称</div>
85 <div class="label">分紅重疾</div>
86 </div>
87 <div class="separator-v"></div>
88 <div class="cell1">
89 <div class="label">保額</div>
90 <div class="label">HK$10,000</div>
91 </div>
92 </div>
93 <div class="separator-h"></div>
94 <div class="data-line">
95 <div class="cell1">
96 <div class="label">生效日期</div>
97 <div class="label">2020-1-1</div>
98 </div>
99 <div class="separator-v"></div>
100 <div class="cell1">
101 <div class="label">保障年期</div>
102 <div class="label">终身</div>
103 </div>
104 </div>
105 </div>
106 </div>
107
108 <div class="cell-group">
109 <div class="table-header">
110 <div class="normal-header">
111 <div class="title">保障内容</div>
112 <div class="guide" :class="{rotate180 : !insuranceForm.f2}" @click="insuranceForm.f2 = !insuranceForm.f2"></div>
113 </div>
114 </div>
115 <div class="table-content" :class="{hide : !insuranceForm.f2}">
116 <div class="data-line">
117 <div class="cell1">
118 <div class="label">
119 投保人姓名（中文）<span>修改</span>
120 </div>
121 <div class="label">平安</div>
122 </div>
123 <div class="separator-v"></div>
124 <div class="cell1">
125 <div class="label">
126 投保人姓名（英文）<span>修改</span>
127 </div>
128 <div class="label">Pingan</div>
129 </div>
130 </div>
131 <div class="separator-h"></div>
132 <div class="data-line">
133 <div class="cell1">
134 <div class="label">生效日期</div>
135 <div class="label">2020-1-1</div>
136 </div>
137 <div class="separator-v"></div>
138 <div class="cell1">
139 <div class="label">
140 證件號碼<span>修改</span>
141 </div>
142 <div class="label">123*****567</div>
143 </div>
144 </div>
145 <div class="separator-h"></div>
146 <div class="data-line">
147 <div class="cell1">
148 <div class="label">
149 聯繫地址<span>修改</span>
150 </div>
151 <div class="label">深圳市益田路5033號</div>
152 </div>
153 <div class="separator-v"></div>
154 <div class="cell1">
155 <div class="label">
156 居住地址<span>修改</span>
157 </div>
158 <div class="label">深圳市益田路5033號</div>
159 </div>
160 </div>
161
162 <div class="separator-h"></div>
163 <div class="data-line">
164 <div class="cell1">
165 <div class="label">
166 手提電話<span>修改</span>
167 </div>
168 <div class="label">（852）2888 8888</div>
169 </div>
170 <div class="separator-v"></div>
171 <div class="cell1">
172 <div class="label">
173 電子郵箱<span>修改</span>
174 </div>
175 <div class="label">123@ping.com.cn</div>
176 </div>
177 </div>
178
179 <div class="separator-h"></div>
180 <div class="data-line">
181 <div class="cell1">
182 <div class="label">
183 受保人姓名（中文）<span>修改</span>
184 </div>
185 <div class="label">平安</div>
186 </div>
187 <div class="separator-v"></div>
188 <div class="cell1">
189 <div class="label">
190 受保人姓名（英文）<span>修改</span>
191 </div>
192 <div class="label">Pingan</div>
193 </div>
194 </div>
195
196 <div class="separator-h"></div>
197 <div class="data-line">
198 <div class="cell1">
199 <div class="label">出生日期</div>
200 <div class="label">1999-1-1</div>
201 </div>
202 <div class="separator-v"></div>
203 <div class="cell1">
204 <div class="label">
205 證件號碼<span>修改</span>
206 </div>
207 <div class="label">123*****567</div>
208 </div>
209 </div>
210 </div>
211 </div>
212
213 <div class="cell-group">
214 <div class="table-header">
215 <div class="normal-header">
216 <div class="title">受益人資料</div>
217 <div class="guide" :class="{rotate180 : !insuranceForm.f3}" @click="insuranceForm.f3 = !insuranceForm.f3"></div>
218 </div>
219 </div>
220 <div class="table-content" :class="{hide : !insuranceForm.f3}">
221 <div class="data-line">
222 <div class="td">姓名（中文）</div>
223 <div class="td">姓名（英文）</div>
224 <div class="td">分配比例</div>
225 </div>
226 <div class="separator-h"></div>
227 <div class="data-line">
228 <div class="td">張三</div>
229 <div class="td">Zhangsan</div>
230 <div class="td">50%</div>
231 </div>
232 <div class="separator-h"></div>
233 <div class="data-line">
234 <div class="td">李四</div>
235 <div class="td">Lisi</div>
236 <div class="td">50%</div>
237 </div>
238 </div>
239 </div>
240
241 <div class="cell-group">
242 <div class="table-header">
243 <div class="normal-header">
244 <div class="title">繳費資料</div>
245 <div class="guide" :class="{rotate180 : !insuranceForm.f4}" @click="insuranceForm.f4 = !insuranceForm.f4"></div>
246 </div>
247 </div>
248 <div class="table-content" :class="{hide : !insuranceForm.f4}">
249 <div class="data-line">
250 <div class="cell1">
251 <div class="label">續費年期</div>
252 <div class="label">30年</div>
253 </div>
254 <div class="separator-v"></div>
255 <div class="cell1">
256 <div class="label">繳費方式</div>
257 <div class="label">銀行轉帳</div>
258 </div>
259 </div>
260 <div class="separator-h"></div>
261
262 <div class="data-line">
263 <div class="cell1">
264 <div class="label">繳費幣種</div>
265 <div class="label">港幣</div>
266 </div>
267 <div class="separator-v"></div>
268 <div class="cell1">
269 <div class="label">當期保費</div>
270 <div class="label">HK$2,000</div>
271 </div>
272 </div>
273 <div class="separator-h"></div>
274
275 <div class="data-line">
276 <div class="cell1">
277 <div class="label">繳費銀行</div>
278 <div class="label">平安銀行</div>
279 </div>
280 <div class="separator-v"></div>
281 <div class="cell1">
282 <div class="label">繳費帳號</div>
283 <div class="label">1234******888</div>
284 </div>
285 </div>
286 <div class="separator-h"></div>
287 </div>
288 </div>
289
290 <div class="cell-group">
291 <div class="table-header">
292 <div class="normal-header">
293 <div class="title">繳費記錄</div>
294 <div class="guide" :class="{rotate180 : !insuranceForm.f5}" @click="insuranceForm.f5 = !insuranceForm.f5"></div>
295 </div>
296 </div>
297 <div class="table-content" :class="{hide : !insuranceForm.f5}">
298 <div class="data-line">
299 <div class="td w2">繳費期</div>
300 <div class="td w2">繳費方式</div>
301 <div class="td w2">實收日期</div>
302 <div class="td w2">繳費金額</div>
303 </div>
304 <div class="separator-h"></div>
305 <div class="data-line">
306 <div class="td w2">首期</div>
307 <div class="td w2">現金</div>
308 <div class="td w2">2020-1-1</div>
309 <div class="td w2">HK$2,000</div>
310 </div>
311 <div class="separator-h"></div>
312 <div class="data-line">
313 <div class="td w2">第二期</div>
314 <div class="td w2">現金</div>
315 <div class="td w2">2020-1-1</div>
316 <div class="td w2">HK$2,000</div>
317 </div>
318 </div>
319 </div>
320
321 <div class="empty-line"></div>
322 </div>
323 <div class="panel" :class="{activity : activity == 'm2'}">m2</div>
324 <div class="panel" :class="{activity : activity == 'm3'}">m3</div>
325 <div class="panel" :class="{activity : activity == 'm4'}">m4</div>
326 <div class="panel" :class="{activity : activity == 'm5'}">m5</div>
327 <div class="panel" :class="{activity : activity == 'm6'}">m6</div>
328 </div>
329 </div>
330 </template>
331
332
333 <script src="./custom-service.js"></script>
334 <style lang="scss" scoped>
335 @import "./custom-service.scss";
336 </style>
...\ No newline at end of file ...\ No newline at end of file
...@@ -88,6 +88,14 @@ const routes = [ ...@@ -88,6 +88,14 @@ const routes = [
88 title: '' 88 title: ''
89 } 89 }
90 }, 90 },
91 {
92 path: '/custom/service',
93 name: 'customService',
94 component: () => import('./pages/custom-service/custom-service.vue'),
95 meta: {
96 title: '保单查询'
97 }
98 },
91 99
92 { 100 {
93 path: '/demo', 101 path: '/demo',
......