Skip to content

dev / pingan-life-index-pro

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

Merge branch 'master' of 120.27.44.69:dev/pingan-life-index-pro

2 parents 716fc33d d982c9f3
Expand all
Inline Side-by-side
Showing 21 changed files with 455 additions and 11 deletions
...@@ -11,10 +11,63 @@ module.exports = { ...@@ -11,10 +11,63 @@ module.exports = {
11 nav: { 11 nav: {
12 ttt: "2" 12 ttt: "2"
13 }, 13 },
14 product : { 14 product: {
15 btnPosition : "Booking service", 15 btnPosition: "Booking service",
16 iconProblem : "Common problem", 16 iconProblem: "Common problem",
17 iconProcess : "Insurance process", 17 iconProcess: "Insurance process",
18 iconProduct : "Product details" 18 iconProduct: "Product details"
19 },
20 customService: {
21 name: "Customer service",
22 menu1: "Query",
23 menu2: "Change",
24 menu3: "Renewal",
25 menu4: "Claim",
26 menu5: "Booking",
27 menu6: "Complaint",
28 insuranceQuery: {
29 InsurantNumber: "Insurant number",
30 Insurant: "Insurant",
31 InsurantName: "Insurant name",
32 InsurantAmount: "Insurant amount",
33 effectiveDate: "Effective date",
34 period: "Guarantee period",
35
36 t2Title: "Guarantee information",
37 t2InsurantClassify: "Name of insurance",
38 t2InsurantAmount: "Insured amount",
39
40 t3Title: "Customer information",
41 t3InsurantNameCn: "Name of applicant (Cn)",
42 t3InsurantNameEn: "Name of applicant (En)",
43 t3InsurantIdNumber: "ID Number",
44 t3InsurantContactAddress: "Contact address",
45 t3InsurantAddress: "Address",
46 t3InsurantMobile: "mobile",
47 t3InsurantEmail: "email",
48 t3InsuredNameCn: "Name of insured (Cn)",
49 t3InsuredNameEn: "Name of insured (En)",
50 t3InsuredBirthday: "Birthday",
51 t3InsuredIdNumber: "ID Number",
52
53 t4Title: "Beneficiary information",
54 t4NameCn: "Name (Cn)",
55 t4NameEn: "Name (En)",
56 t4Allocation: "Distribution ratio",
57
58 t5Title: "Payment information",
59 t5PaymentPeriod: "Payment period",
60 t5PaymentMethod: "Payment method",
61 t5PaymentCurrency: "Payment currency",
62 t5CurrentPremium: "Current premium",
63 t5PaymentBank: "Payment bank",
64 t5PaymentAccount: "Payment account",
65
66 t6Title: "Payment record",
67 t6PaymentPeriod: "Payment period",
68 t6PaymentMethod: "Payment method",
69 t6ClosingDate: "Closing date",
70 t6PaymentAmount: "Payment amount",
71 }
19 } 72 }
20 } 73 }
......
...@@ -16,5 +16,58 @@ module.exports = { ...@@ -16,5 +16,58 @@ module.exports = {
16 iconProblem : "常見問題", 16 iconProblem : "常見問題",
17 iconProcess : "投保流程", 17 iconProcess : "投保流程",
18 iconProduct : "產品詳情" 18 iconProduct : "產品詳情"
19 },
20 customService : {
21 name : "客户服务",
22 menu1 : "保單查詢",
23 menu2 : "保全變更",
24 menu3 : "續期繳費",
25 menu4 : "理賠申請",
26 menu5 : "預約服務",
27 menu6 : "投訴受理",
28 insuranceQuery: {
29 InsurantNumber: "保單號碼",
30 Insurant: "被保人",
31 InsurantName: "險種名稱",
32 InsurantAmount: "保險金額",
33 effectiveDate: "生效日期",
34 period: "保障年期",
35
36 t2Title : "保障內容",
37 t2InsurantClassify : "險種名稱",
38 t2InsurantAmount : "保額",
39
40 t3Title : "客戶資料",
41 t3InsurantNameCn : "投保人姓名（中文）",
42 t3InsurantNameEn : "投保人姓名（英文）",
43 t3InsurantIdNumber : "證件號碼",
44 t3InsurantContactAddress : "聯繫地址",
45 t3InsurantAddress : "居住地址",
46 t3InsurantMobile : "手提電話",
47 t3InsurantEmail : "電子郵箱",
48 t3InsuredNameCn : "受保人姓名（中文）",
49 t3InsuredNameEn : "受保人姓名（英文）",
50 t3InsuredBirthday : "出生日期",
51 t3InsuredIdNumber : "證件號碼",
52
53 t4Title : "受益人資料", // t4BeneficiaryInformation
54 t4NameCn : "姓名（中文）",
55 t4NameEn : "姓名（英文）",
56 t4Allocation : "分配比例",
57
58 t5Title : "繳費資料",
59 t5PaymentPeriod: "續費年期",
60 t5PaymentMethod: "繳費方式",
61 t5PaymentCurrency: "繳費幣種",
62 t5CurrentPremium: "當期保費",
63 t5PaymentBank: "繳費銀行",
64 t5PaymentAccount: "繳費帳號",
65
66 t6Title : "繳費記錄",
67 t6PaymentPeriod: "繳費期",
68 t6PaymentMethod : "繳費方式",
69 t6ClosingDate : "實收日期",
70 t6PaymentAmount : "繳費金額",
71 }
19 } 72 }
20 } 73 }
......
...@@ -11,10 +11,64 @@ module.exports = { ...@@ -11,10 +11,64 @@ module.exports = {
11 nav: { 11 nav: {
12 ttt: "1" 12 ttt: "1"
13 }, 13 },
14 product : { 14 product: {
15 btnPosition : "预约服务", 15 btnPosition: "预约服务",
16 iconProblem : "常见问题", 16 iconProblem: "常见问题",
17 iconProcess : "投保流程", 17 iconProcess: "投保流程",
18 iconProduct : "产品详情" 18 iconProduct: "产品详情"
19 },
20 customService: {
21 name : "客戶服務",
22 menu1: "保单查询",
23 menu2: "保全变更",
24 menu3: "续期缴费",
25 menu4: "理赔申请",
26 menu5: "预约服务",
27 menu6: "投诉受理",
28 insuranceQuery: {
29 InsurantNumber: "保单号码",
30 Insurant: "被保人",
31 InsurantName: "险种名称",
32 InsurantAmount: "保险金额",
33 effectiveDate: "生效日期",
34 period: "保障年期",
35
36 t2Title : "保障内容",
37 t2InsurantClassify : "险种名称",
38 t2InsurantAmount : "保额",
39
40 t3Title : "客户资料",
41 t3InsurantNameCn : "投保人姓名（中文）",
42 t3InsurantNameEn : "投保人姓名（英文）",
43 t3InsurantIdNumber : "证件号码",
44 t3InsurantContactAddress : "联系地址",
45 t3InsurantAddress : "居住地址",
46 t3InsurantMobile : "手提电话",
47 t3InsurantEmail : "电子邮箱",
48 t3InsuredNameCn : "受保人姓名（中文）",
49 t3InsuredNameEn : "受保人姓名（英文）",
50 t3InsuredBirthday : "出生日期",
51 t3InsuredIdNumber : "证件号码",
52
53 t4Title : "受益人资料", // t4BeneficiaryInformation
54 t4NameCn : "姓名（中文）",
55 t4NameEn : "姓名（英文）",
56 t4Allocation : "分配比例",
57
58 t5Title : "缴费资料",
59 t5PaymentPeriod: "缴费年期",
60 t5PaymentMethod: "缴费方式",
61 t5PaymentCurrency: "缴费币种",
62 t5CurrentPremium: "当期保费",
63 t5PaymentBank: "缴费银行",
64 t5PaymentAccount: "缴费账号",
65
66 t6Title : "缴费记录",
67 t6PaymentPeriod: "缴费期",
68 t6PaymentMethod : "缴费方式",
69 t6ClosingDate : "实收日期",
70 t6PaymentAmount : "缴费金额",
71 }
72 }
19 } 73 }
20 } 74
...\ No newline at end of file ...\ No newline at end of file
......
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
...@@ -113,6 +113,14 @@ const routes = [ ...@@ -113,6 +113,14 @@ const routes = [
113 title: '' 113 title: ''
114 } 114 }
115 }, 115 },
116 {
117 path: '/custom/service',
118 name: 'customService',
119 component: () => import('./pages/custom-service/custom-service.vue'),
120 meta: {
121 title: '保单查询'
122 }
123 },
116 124
117 { 125 {
118 path: '/demo', 126 path: '/demo',
......