Skip to content

dev / pingan-life-index-pro

Go to a project
Toggle navigation
Toggle navigation pinning
0c0f85f5 by joe
Options

1

1 parent d8dabbb4
Inline Side-by-side
Showing 7 changed files with 483 additions and 429 deletions
......@@ -18,7 +18,7 @@ module.exports = {
iconProduct: "产品详情"
},
customService: {
name : "客戶服務",
name: "客戶服務",
menu1: "保单查询",
menu2: "保全变更",
menu3: "续期缴费",
......@@ -33,29 +33,29 @@ module.exports = {
effectiveDate: "生效日期",
period: "保障年期",
t2Title : "保障内容",
t2InsurantClassify : "险种名称",
t2InsurantAmount : "保额",
t2Title: "保障内容",
t2InsurantClassify: "险种名称",
t2InsurantAmount: "保额",
t3Title : "客户资料",
t3InsurantNameCn : "投保人姓名（中文）",
t3InsurantNameEn : "投保人姓名（英文）",
t3InsurantIdNumber : "证件号码",
t3InsurantContactAddress : "联系地址",
t3InsurantAddress : "居住地址",
t3InsurantMobile : "手提电话",
t3InsurantEmail : "电子邮箱",
t3InsuredNameCn : "受保人姓名（中文）",
t3InsuredNameEn : "受保人姓名（英文）",
t3InsuredBirthday : "出生日期",
t3InsuredIdNumber : "证件号码",
t3Title: "客户资料",
t3InsurantNameCn: "投保人姓名（中文）",
t3InsurantNameEn: "投保人姓名（英文）",
t3InsurantIdNumber: "证件号码",
t3InsurantContactAddress: "联系地址",
t3InsurantAddress: "居住地址",
t3InsurantMobile: "手提电话",
t3InsurantEmail: "电子邮箱",
t3InsuredNameCn: "受保人姓名（中文）",
t3InsuredNameEn: "受保人姓名（英文）",
t3InsuredBirthday: "出生日期",
t3InsuredIdNumber: "证件号码",
t4Title : "受益人资料", // t4BeneficiaryInformation
t4NameCn : "姓名（中文）",
t4NameEn : "姓名（英文）",
t4Allocation : "分配比例",
t4Title: "受益人资料", // t4BeneficiaryInformation
t4NameCn: "姓名（中文）",
t4NameEn: "姓名（英文）",
t4Allocation: "分配比例",
t5Title : "缴费资料",
t5Title: "缴费资料",
t5PaymentPeriod: "缴费年期",
t5PaymentMethod: "缴费方式",
t5PaymentCurrency: "缴费币种",
......@@ -63,12 +63,11 @@ module.exports = {
t5PaymentBank: "缴费银行",
t5PaymentAccount: "缴费账号",
t6Title : "缴费记录",
t6Title: "缴费记录",
t6PaymentPeriod: "缴费期",
t6PaymentMethod : "缴费方式",
t6ClosingDate : "实收日期",
t6PaymentAmount : "缴费金额",
t6PaymentMethod: "缴费方式",
t6ClosingDate: "实收日期",
t6PaymentAmount: "缴费金额",
}
}
}
\ No newline at end of file
}
......
import api from '@/api/api'
import {
httpGet,
httpPost
} from '@/api/fetch-api.js'
export default {
data() {
return {
insuranceForm: {
f1 : true,
f2 : true,
f3 : true,
f4 : true,
f5 : true,
}
}
},
}
.cell-group {
margin-bottom: 1rem /* 12/12 */;
div{
font-size: 1rem /* 12/12 */;
color: #4c4948;
}
.w1 {
min-width: 9.166667rem /* 110/12 */;
text-align: center;
}
.w2 {
min-width: 6.25rem /* 75/12 */;
text-align: center;
}
.table-header {
width: 64.166667rem /* 770/12 */;
height: 2.5rem /* 30/12 */;
border-top-left-radius: .666667rem /* 8/12 */;
border-top-right-radius: .666667rem /* 8/12 */;
background-color: #f2f2f2;
display: flex;
align-items: center;
.normal-header {
width: 58.833333rem /* 706/12 */;
margin: auto;
display: flex;
justify-content: space-between;
align-items: center;
.title {
font-size: 1rem /* 12/12 */;
font-weight: bold;
color: #575453;
}
.guide {
transition: all 0.5s;
cursor: pointer;
width: 1rem /* 12/12 */;
height: .666667rem /* 8/12 */ ;
background: url("~@/assets/images/insurance-query/triangle-down.png") no-repeat center center;
background-size: 100% 100%;
}
.rotate180 {
transform: rotate(180deg);
transition: all 0.5s;
}
}
}
.table-content {
width: 64.166667rem /* 770/12 */;
height: auto;
display: inline-block;
border-bottom-left-radius: .666667rem /* 8/12 */;
border-bottom-right-radius: .666667rem /* 8/12 */;
border-left: solid .083333rem /* 1/12 */ #f2f2f2;
border-right: solid .083333rem /* 1/12 */ #f2f2f2;
border-bottom: solid .083333rem /* 1/12 */ #f2f2f2;
padding: 0 2.583333rem /* 31/12 */;
max-height: 41.666667rem /* 500/12 */;
transition: max-height ease-out 0.3s !important;
overflow: hidden;
.data-line {
height: 4.416667rem /* 53/12 */;
margin: auto;
display: flex;
justify-content: space-between;
align-items: center;
.cell1 {
width: 29.166667rem /* 350/12 */;
display: flex;
justify-content: space-between;
margin: auto;
}
.separator-v {
height: 2.5rem /* 30/12 */;
width: .166667rem /* 2/12 */;
background-color: #f2f2f2;
margin: 0 .916667rem /* 11/12 */;
}
}
.label span {
color: #f05a23;
margin-left: .583333rem /* 7/12 */;
cursor: pointer;
text-decoration: underline;
}
.separator-h {
width: 58.833333rem /* 706/12 */;
height: .083333rem /* 1/12 */;
background-color: #f2f2f2;
}
}
.orange {
background-color: #f05a23 !important;
div {
color: #ffffff;
}
}
.hide {
max-height: 0;
border-bottom:none;
}
}
\ No newline at end of file
<template>
<div>
<div class="cell-group">
<div class="table-header orange">
<div class="normal-header">
<div class="td w1">{{$t('customService.insuranceQuery.InsurantNumber')}}</div>
<div class="td w2">{{$t('customService.insuranceQuery.Insurant')}}</div>
<div class="td w2">{{$t('customService.insuranceQuery.InsurantName')}}</div>
<div class="td w2">{{$t('customService.insuranceQuery.InsurantAmount')}}</div>
<div class="td w2">{{$t('customService.insuranceQuery.effectiveDate')}}</div>
<div class="td w2">{{$t('customService.insuranceQuery.period')}}</div>
</div>
</div>
<div class="table-content">
<div class="data-line">
<div class="td w1">P3**********0772</div>
<div class="td w2">平安</div>
<div class="td w2">分红重疾</div>
<div class="td w2">HK$10,000</div>
<div class="td w2">2020-1-1</div>
<div class="td w2">終身</div>
</div>
</div>
</div>
<div class="cell-group">
<div class="table-header">
<div class="normal-header">
<div class="title">{{$t('customService.insuranceQuery.t2Title')}}</div>
<div
class="guide"
:class="{rotate180 : !insuranceForm.f1}"
@click="insuranceForm.f1 = !insuranceForm.f1"
></div>
</div>
</div>
<div class="table-content" :class="{hide : !insuranceForm.f1}">
<div class="data-line">
<div class="cell1">
<div class="label">{{$t('customService.insuranceQuery.t2InsurantClassify')}}</div>
<div class="label">分紅重疾</div>
</div>
<div class="separator-v"></div>
<div class="cell1">
<div class="label">{{$t('customService.insuranceQuery.InsurantAmount')}}</div>
<div class="label">HK$10,000</div>
</div>
</div>
<div class="separator-h"></div>
<div class="data-line">
<div class="cell1">
<div class="label">{{$t('customService.insuranceQuery.effectiveDate')}}</div>
<div class="label">2020-1-1</div>
</div>
<div class="separator-v"></div>
<div class="cell1">
<div class="label">{{$t('customService.insuranceQuery.period')}}</div>
<div class="label">终身</div>
</div>
</div>
</div>
</div>
<div class="cell-group">
<div class="table-header">
<div class="normal-header">
<div class="title">{{$t('customService.insuranceQuery.t3Title')}}</div>
<div
class="guide"
:class="{rotate180 : !insuranceForm.f2}"
@click="insuranceForm.f2 = !insuranceForm.f2"
></div>
</div>
</div>
<div class="table-content" :class="{hide : !insuranceForm.f2}">
<div class="data-line">
<div class="cell1">
<div class="label">
{{$t('customService.insuranceQuery.t3InsurantNameCn')}}
<span>修改</span>
</div>
<div class="label">平安</div>
</div>
<div class="separator-v"></div>
<div class="cell1">
<div class="label">
{{$t('customService.insuranceQuery.t3InsurantNameEn')}}
<span>修改</span>
</div>
<div class="label">Pingan</div>
</div>
</div>
<div class="separator-h"></div>
<div class="data-line">
<div class="cell1">
<div class="label">{{$t('customService.insuranceQuery.effectiveDate')}}</div>
<div class="label">2020-1-1</div>
</div>
<div class="separator-v"></div>
<div class="cell1">
<div class="label">
{{$t('customService.insuranceQuery.t3InsurantIdNumber')}}
<span>修改</span>
</div>
<div class="label">123*****567</div>
</div>
</div>
<div class="separator-h"></div>
<div class="data-line">
<div class="cell1">
<div class="label">
{{$t('customService.insuranceQuery.t3InsurantContactAddress')}}
<span>修改</span>
</div>
<div class="label">深圳市益田路5033號</div>
</div>
<div class="separator-v"></div>
<div class="cell1">
<div class="label">
{{$t('customService.insuranceQuery.t3InsurantAddress')}}
<span>修改</span>
</div>
<div class="label">深圳市益田路5033號</div>
</div>
</div>
<div class="separator-h"></div>
<div class="data-line">
<div class="cell1">
<div class="label">
{{$t('customService.insuranceQuery.t3InsurantMobile')}}
<span>修改</span>
</div>
<div class="label">（852）2888 8888</div>
</div>
<div class="separator-v"></div>
<div class="cell1">
<div class="label">
{{$t('customService.insuranceQuery.t3InsurantEmail')}}
<span>修改</span>
</div>
<div class="label">123@ping.com.cn</div>
</div>
</div>
<div class="separator-h"></div>
<div class="data-line">
<div class="cell1">
<div class="label">
{{$t('customService.insuranceQuery.t3InsuredNameCn')}}
<span>修改</span>
</div>
<div class="label">平安</div>
</div>
<div class="separator-v"></div>
<div class="cell1">
<div class="label">
{{$t('customService.insuranceQuery.t3InsuredNameEn')}}
<span>修改</span>
</div>
<div class="label">Pingan</div>
</div>
</div>
<div class="separator-h"></div>
<div class="data-line">
<div class="cell1">
<div class="label">{{$t('customService.insuranceQuery.t3InsuredBirthday')}}</div>
<div class="label">1999-1-1</div>
</div>
<div class="separator-v"></div>
<div class="cell1">
<div class="label">
{{$t('customService.insuranceQuery.t3InsuredIdNumber')}}
<span>修改</span>
</div>
<div class="label">123*****567</div>
</div>
</div>
</div>
</div>
<div class="cell-group">
<div class="table-header">
<div class="normal-header">
<div class="title">{{$t('customService.insuranceQuery.t4Title')}}</div>
<div
class="guide"
:class="{rotate180 : !insuranceForm.f3}"
@click="insuranceForm.f3 = !insuranceForm.f3"
></div>
</div>
</div>
<div class="table-content" :class="{hide : !insuranceForm.f3}">
<div class="data-line">
<div class="td">{{$t('customService.insuranceQuery.t4NameCn')}}</div>
<div class="td">{{$t('customService.insuranceQuery.t4NameEn')}}</div>
<div class="td">{{$t('customService.insuranceQuery.t4Allocation')}}</div>
</div>
<div class="separator-h"></div>
<div class="data-line">
<div class="td">張三</div>
<div class="td">Zhangsan</div>
<div class="td">50%</div>
</div>
<div class="separator-h"></div>
<div class="data-line">
<div class="td">李四</div>
<div class="td">Lisi</div>
<div class="td">50%</div>
</div>
</div>
</div>
<div class="cell-group">
<div class="table-header">
<div class="normal-header">
<div class="title">{{$t('customService.insuranceQuery.t5Title')}}</div>
<div
class="guide"
:class="{rotate180 : !insuranceForm.f4}"
@click="insuranceForm.f4 = !insuranceForm.f4"
></div>
</div>
</div>
<div class="table-content" :class="{hide : !insuranceForm.f4}">
<div class="data-line">
<div class="cell1">
<div class="label">{{$t('customService.insuranceQuery.t5PaymentPeriod')}}</div>
<div class="label">30年</div>
</div>
<div class="separator-v"></div>
<div class="cell1">
<div class="label">{{$t('customService.insuranceQuery.t5PaymentMethod')}}</div>
<div class="label">銀行轉帳</div>
</div>
</div>
<div class="separator-h"></div>
<div class="data-line">
<div class="cell1">
<div class="label">{{$t('customService.insuranceQuery.t5PaymentCurrency')}}</div>
<div class="label">港幣</div>
</div>
<div class="separator-v"></div>
<div class="cell1">
<div class="label">{{$t('customService.insuranceQuery.t5CurrentPremium')}}</div>
<div class="label">HK$2,000</div>
</div>
</div>
<div class="separator-h"></div>
<div class="data-line">
<div class="cell1">
<div class="label">{{$t('customService.insuranceQuery.t5PaymentBank')}}</div>
<div class="label">平安銀行</div>
</div>
<div class="separator-v"></div>
<div class="cell1">
<div class="label">{{$t('customService.insuranceQuery.t5PaymentAccount')}}</div>
<div class="label">1234******888</div>
</div>
</div>
<div class="separator-h"></div>
</div>
</div>
<div class="cell-group">
<div class="table-header">
<div class="normal-header">
<div class="title">{{$t('customService.insuranceQuery.t6Title')}}</div>
<div
class="guide"
:class="{rotate180 : !insuranceForm.f5}"
@click="insuranceForm.f5 = !insuranceForm.f5"
></div>
</div>
</div>
<div class="table-content" :class="{hide : !insuranceForm.f5}">
<div class="data-line">
<div class="td w2">{{$t('customService.insuranceQuery.t6PaymentPeriod')}}</div>
<div class="td w2">{{$t('customService.insuranceQuery.t6PaymentMethod')}}</div>
<div class="td w2">{{$t('customService.insuranceQuery.t6ClosingDate')}}</div>
<div class="td w2">{{$t('customService.insuranceQuery.t6PaymentAmount')}}</div>
</div>
<div class="separator-h"></div>
<div class="data-line">
<div class="td w2">首期</div>
<div class="td w2">現金</div>
<div class="td w2">2020-1-1</div>
<div class="td w2">HK$2,000</div>
</div>
<div class="separator-h"></div>
<div class="data-line">
<div class="td w2">第二期</div>
<div class="td w2">現金</div>
<div class="td w2">2020-1-1</div>
<div class="td w2">HK$2,000</div>
</div>
</div>
</div>
</div>
</template>
<script src="./insurance-query.js"></script>
<style lang="scss" scoped>
@import "./insurance-query.scss";
</style>
\ No newline at end of file
......@@ -4,27 +4,23 @@ import {
httpPost
} from '@/api/fetch-api.js'
// import InsuranceQuery from './components/insurance-query'
import InsuranceQuery from './components/insurance-query'
export default {
data() {
return {
activity: "m1",
insuranceForm: {
f1 : true,
f2 : true,
f3 : true,
f4 : true,
f5 : true,
}
activity: "m1"
}
},
methods: {
initData() { },
},
created() { },
created() {
let activity = this.$route.params.p;
activity = activity ? activity : "m1";
this.activity = activity;
},
components: {
// InsuranceQuery
InsuranceQuery
}
}
......
......@@ -121,126 +121,6 @@
}
}
/** 可以抽出来作为一个插件 **/
.cell-group {
margin-bottom: 1rem /* 12/12 */;
div{
font-size: 1rem /* 12/12 */;
color: #4c4948;
}
.w1 {
min-width: 9.166667rem /* 110/12 */;
text-align: center;
}
.w2 {
min-width: 6.25rem /* 75/12 */;
text-align: center;
}
.table-header {
width: 64.166667rem /* 770/12 */;
height: 2.5rem /* 30/12 */;
border-top-left-radius: .666667rem /* 8/12 */;
border-top-right-radius: .666667rem /* 8/12 */;
background-color: #f2f2f2;
display: flex;
align-items: center;
.normal-header {
width: 58.833333rem /* 706/12 */;
margin: auto;
display: flex;
justify-content: space-between;
align-items: center;
.title {
font-size: 1rem /* 12/12 */;
font-weight: bold;
color: #575453;
}
.guide {
transition: all 0.5s;
cursor: pointer;
width: 1rem /* 12/12 */;
height: .666667rem /* 8/12 */ ;
background: url("~@/assets/images/insurance-query/triangle-down.png") no-repeat center center;
background-size: 100% 100%;
}
.rotate180 {
transform: rotate(180deg);
transition: all 0.5s;
}
}
}
.table-content {
width: 64.166667rem /* 770/12 */;
height: auto;
display: inline-block;
border-bottom-left-radius: .666667rem /* 8/12 */;
border-bottom-right-radius: .666667rem /* 8/12 */;
border-left: solid .083333rem /* 1/12 */ #f2f2f2;
border-right: solid .083333rem /* 1/12 */ #f2f2f2;
border-bottom: solid .083333rem /* 1/12 */ #f2f2f2;
padding: 0 2.583333rem /* 31/12 */;
max-height: 41.666667rem /* 500/12 */;
transition: max-height ease-out 0.3s !important;
overflow: hidden;
.data-line {
height: 4.416667rem /* 53/12 */;
margin: auto;
display: flex;
justify-content: space-between;
align-items: center;
.cell1 {
width: 29.166667rem /* 350/12 */;
display: flex;
justify-content: space-between;
margin: auto;
}
.separator-v {
height: 2.5rem /* 30/12 */;
width: .166667rem /* 2/12 */;
background-color: #f2f2f2;
margin: 0 .916667rem /* 11/12 */;
}
}
.label span {
color: #f05a23;
margin-left: .583333rem /* 7/12 */;
cursor: pointer;
text-decoration: underline;
}
.separator-h {
width: 58.833333rem /* 706/12 */;
height: .083333rem /* 1/12 */;
background-color: #f2f2f2;
}
}
.orange {
background-color: #f05a23 !important;
div {
color: #ffffff;
}
}
.hide {
max-height: 0;
border-bottom:none;
}
}
.empty-line {
height: 1.333333rem /* 16/12 */;
}
\ No newline at end of file
......
<template>
<div class="content">
<div class="left-panel">
<div class="menu-item" :class="{activity : activity == 'm1'}" @click="activity = 'm1'">
<i class="m1"></i>{{$t('customService.menu1')}}
......@@ -48,276 +49,7 @@
</div>
<div class="right-panel">
<div class="panel" :class="{activity : activity == 'm1'}">
<div class="cell-group">
<div class="table-header orange">
<div class="normal-header">
<div class="td w1">{{$t('customService.insuranceQuery.InsurantNumber')}}</div>
<div class="td w2">{{$t('customService.insuranceQuery.Insurant')}}</div>
<div class="td w2">{{$t('customService.insuranceQuery.InsurantName')}}</div>
<div class="td w2">{{$t('customService.insuranceQuery.InsurantAmount')}}</div>
<div class="td w2">{{$t('customService.insuranceQuery.effectiveDate')}}</div>
<div class="td w2">{{$t('customService.insuranceQuery.period')}}</div>
</div>
</div>
<div class="table-content">
<div class="data-line">
<div class="td w1">P3**********0772</div>
<div class="td w2">平安</div>
<div class="td w2">分红重疾</div>
<div class="td w2">HK$10,000</div>
<div class="td w2">2020-1-1</div>
<div class="td w2">終身</div>
</div>
</div>
</div>
<div class="cell-group">
<div class="table-header">
<div class="normal-header">
<div class="title">{{$t('customService.insuranceQuery.t2Title')}}</div>
<div class="guide" :class="{rotate180 : !insuranceForm.f1}" @click="insuranceForm.f1 = !insuranceForm.f1"></div>
</div>
</div>
<div class="table-content" :class="{hide : !insuranceForm.f1}">
<div class="data-line">
<div class="cell1">
<div class="label">{{$t('customService.insuranceQuery.t2InsurantClassify')}}</div>
<div class="label">分紅重疾</div>
</div>
<div class="separator-v"></div>
<div class="cell1">
<div class="label">{{$t('customService.insuranceQuery.InsurantAmount')}}</div>
<div class="label">HK$10,000</div>
</div>
</div>
<div class="separator-h"></div>
<div class="data-line">
<div class="cell1">
<div class="label">{{$t('customService.insuranceQuery.effectiveDate')}}</div>
<div class="label">2020-1-1</div>
</div>
<div class="separator-v"></div>
<div class="cell1">
<div class="label">{{$t('customService.insuranceQuery.period')}}</div>
<div class="label">终身</div>
</div>
</div>
</div>
</div>
<div class="cell-group">
<div class="table-header">
<div class="normal-header">
<div class="title">{{$t('customService.insuranceQuery.t3Title')}}</div>
<div class="guide" :class="{rotate180 : !insuranceForm.f2}" @click="insuranceForm.f2 = !insuranceForm.f2"></div>
</div>
</div>
<div class="table-content" :class="{hide : !insuranceForm.f2}">
<div class="data-line">
<div class="cell1">
<div class="label">
{{$t('customService.insuranceQuery.t3InsurantNameCn')}}<span>修改</span>
</div>
<div class="label">平安</div>
</div>
<div class="separator-v"></div>
<div class="cell1">
<div class="label">
{{$t('customService.insuranceQuery.t3InsurantNameEn')}}<span>修改</span>
</div>
<div class="label">Pingan</div>
</div>
</div>
<div class="separator-h"></div>
<div class="data-line">
<div class="cell1">
<div class="label">{{$t('customService.insuranceQuery.effectiveDate')}}</div>
<div class="label">2020-1-1</div>
</div>
<div class="separator-v"></div>
<div class="cell1">
<div class="label">
{{$t('customService.insuranceQuery.t3InsurantIdNumber')}}<span>修改</span>
</div>
<div class="label">123*****567</div>
</div>
</div>
<div class="separator-h"></div>
<div class="data-line">
<div class="cell1">
<div class="label">
{{$t('customService.insuranceQuery.t3InsurantContactAddress')}}<span>修改</span>
</div>
<div class="label">深圳市益田路5033號</div>
</div>
<div class="separator-v"></div>
<div class="cell1">
<div class="label">
{{$t('customService.insuranceQuery.t3InsurantAddress')}}<span>修改</span>
</div>
<div class="label">深圳市益田路5033號</div>
</div>
</div>
<div class="separator-h"></div>
<div class="data-line">
<div class="cell1">
<div class="label">
{{$t('customService.insuranceQuery.t3InsurantMobile')}}<span>修改</span>
</div>
<div class="label">（852）2888 8888</div>
</div>
<div class="separator-v"></div>
<div class="cell1">
<div class="label">
{{$t('customService.insuranceQuery.t3InsurantEmail')}}<span>修改</span>
</div>
<div class="label">123@ping.com.cn</div>
</div>
</div>
<div class="separator-h"></div>
<div class="data-line">
<div class="cell1">
<div class="label">
{{$t('customService.insuranceQuery.t3InsuredNameCn')}}<span>修改</span>
</div>
<div class="label">平安</div>
</div>
<div class="separator-v"></div>
<div class="cell1">
<div class="label">
{{$t('customService.insuranceQuery.t3InsuredNameEn')}}<span>修改</span>
</div>
<div class="label">Pingan</div>
</div>
</div>
<div class="separator-h"></div>
<div class="data-line">
<div class="cell1">
<div class="label">{{$t('customService.insuranceQuery.t3InsuredBirthday')}}</div>
<div class="label">1999-1-1</div>
</div>
<div class="separator-v"></div>
<div class="cell1">
<div class="label">
{{$t('customService.insuranceQuery.t3InsuredIdNumber')}}<span>修改</span>
</div>
<div class="label">123*****567</div>
</div>
</div>
</div>
</div>
<div class="cell-group">
<div class="table-header">
<div class="normal-header">
<div class="title">{{$t('customService.insuranceQuery.t4Title')}}</div>
<div class="guide" :class="{rotate180 : !insuranceForm.f3}" @click="insuranceForm.f3 = !insuranceForm.f3"></div>
</div>
</div>
<div class="table-content" :class="{hide : !insuranceForm.f3}">
<div class="data-line">
<div class="td">{{$t('customService.insuranceQuery.t4NameCn')}}</div>
<div class="td">{{$t('customService.insuranceQuery.t4NameEn')}}</div>
<div class="td">{{$t('customService.insuranceQuery.t4Allocation')}}</div>
</div>
<div class="separator-h"></div>
<div class="data-line">
<div class="td">張三</div>
<div class="td">Zhangsan</div>
<div class="td">50%</div>
</div>
<div class="separator-h"></div>
<div class="data-line">
<div class="td">李四</div>
<div class="td">Lisi</div>
<div class="td">50%</div>
</div>
</div>
</div>
<div class="cell-group">
<div class="table-header">
<div class="normal-header">
<div class="title">{{$t('customService.insuranceQuery.t5Title')}}</div>
<div class="guide" :class="{rotate180 : !insuranceForm.f4}" @click="insuranceForm.f4 = !insuranceForm.f4"></div>
</div>
</div>
<div class="table-content" :class="{hide : !insuranceForm.f4}">
<div class="data-line">
<div class="cell1">
<div class="label">{{$t('customService.insuranceQuery.t5PaymentPeriod')}}</div>
<div class="label">30年</div>
</div>
<div class="separator-v"></div>
<div class="cell1">
<div class="label">{{$t('customService.insuranceQuery.t5PaymentMethod')}}</div>
<div class="label">銀行轉帳</div>
</div>
</div>
<div class="separator-h"></div>
<div class="data-line">
<div class="cell1">
<div class="label">{{$t('customService.insuranceQuery.t5PaymentCurrency')}}</div>
<div class="label">港幣</div>
</div>
<div class="separator-v"></div>
<div class="cell1">
<div class="label">{{$t('customService.insuranceQuery.t5CurrentPremium')}}</div>
<div class="label">HK$2,000</div>
</div>
</div>
<div class="separator-h"></div>
<div class="data-line">
<div class="cell1">
<div class="label">{{$t('customService.insuranceQuery.t5PaymentBank')}}</div>
<div class="label">平安銀行</div>
</div>
<div class="separator-v"></div>
<div class="cell1">
<div class="label">{{$t('customService.insuranceQuery.t5PaymentAccount')}}</div>
<div class="label">1234******888</div>
</div>
</div>
<div class="separator-h"></div>
</div>
</div>
<div class="cell-group">
<div class="table-header">
<div class="normal-header">
<div class="title">{{$t('customService.insuranceQuery.t6Title')}}</div>
<div class="guide" :class="{rotate180 : !insuranceForm.f5}" @click="insuranceForm.f5 = !insuranceForm.f5"></div>
</div>
</div>
<div class="table-content" :class="{hide : !insuranceForm.f5}">
<div class="data-line">
<div class="td w2">{{$t('customService.insuranceQuery.t6PaymentPeriod')}}</div>
<div class="td w2">{{$t('customService.insuranceQuery.t6PaymentMethod')}}</div>
<div class="td w2">{{$t('customService.insuranceQuery.t6ClosingDate')}}</div>
<div class="td w2">{{$t('customService.insuranceQuery.t6PaymentAmount')}}</div>
</div>
<div class="separator-h"></div>
<div class="data-line">
<div class="td w2">首期</div>
<div class="td w2">現金</div>
<div class="td w2">2020-1-1</div>
<div class="td w2">HK$2,000</div>
</div>
<div class="separator-h"></div>
<div class="data-line">
<div class="td w2">第二期</div>
<div class="td w2">現金</div>
<div class="td w2">2020-1-1</div>
<div class="td w2">HK$2,000</div>
</div>
</div>
</div>
<insurance-query></insurance-query>
<div class="empty-line"></div>
</div>
<div class="panel" :class="{activity : activity == 'm2'}">m2</div>
......