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 297 additions and 264 deletions
......@@ -36,6 +36,7 @@ export default {
this.dataForm = null;
httpPost({ url: api.policyDetail, sid: true, data: submitData }).then(res => {
this.dataForm = res;
console.log("this.dataForm:",this.dataForm.productCode)
if (this.dataForm.clientNameCn) {
......
@import '@/styles/_support.scss';
@import "@/styles/_support.scss";
.container{
.container {
// font-size: 18px;
}
......@@ -52,7 +52,8 @@
cursor: pointer;
width: 12px;
height: 8px;
background: url("~@/assets/images/insurance-query/triangle-down.png") no-repeat center center;
background: url("~@/assets/images/insurance-query/triangle-down.png")
no-repeat center center;
background-size: 100% 100%;
}
......@@ -64,9 +65,7 @@
}
.table-content {
height: auto;
// display: inline-block;
border-bottom-left-radius: 8px;
border-bottom-right-radius: 8px;
border-left: solid 1px #f2f2f2;
......@@ -77,6 +76,49 @@
transition: max-height ease-out 0.3s !important;
overflow: scroll;
.cell {
position: relative;
display: flex;
justify-content: space-between;
align-items: center;
height: 50px;
border-bottom: solid 1px #f2f2f2;
.label span {
color: $cOrange;
margin-left: 7px;
cursor: pointer;
text-decoration: underline;
}
&:last-child(){
border-bottom: none;
}
&:nth-last-child(2){
border-bottom: none;
}
&:nth-child(odd) {
padding-right: 10px;
}
&:nth-child(even) {
padding-left: 10px;
}
&:nth-child(odd):after {
content: "";
background-color: #f2f2f2;
position: absolute;
top: 10px;
right: 0;
height: 30px;
width: 1px;
}
}
.cell1:nth-child(1){
text-align: right !important;
}
.data-line {
height: 50px;
margin: auto;
......@@ -114,7 +156,6 @@
}
}
.label span {
color: #f05a23;
margin-left: 7px;
......@@ -141,7 +182,6 @@
max-height: 0;
border-bottom: none;
}
}
.cell-between {
......@@ -156,7 +196,6 @@
}
}
}
}
.icon-download {
......@@ -201,4 +240,3 @@
// .table-content{
// -ms-overflow-style: none;
// }
......
<template>
<div class="container">
<!-- 登陆/注册提示 -->
<auth @onLogin="userLogin" @onLogout="userLogout" :checkProfile="true" :tipModel="'m1'" ref="auth"></auth>
<div v-if="showForm">
<!-- 保单列表 -->
<policy-head-list style="width:100%;" :multiSelectable="false" @onSelect="handlePolicySelect"></policy-head-list>
<div class="container">
<!-- 登陆/注册提示 -->
<auth @onLogin="userLogin" @onLogout="userLogout" :checkProfile="true" :tipModel="'m1'" ref="auth"></auth>
<div v-if="showForm">
<!-- 保单列表 -->
<policy-head-list style="width:100%;" :multiSelectable="false" @onSelect="handlePolicySelect"></policy-head-list>
<!-- 保单详情 -->
<template v-if="dataForm">
<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.t2n1')}}</div>
<div class="label">{{formatPolicyName(dataForm.productCode, dataForm.productName)}}</div>
</div>
<div class="separator-v"></div>
<div class="cell1">
<div class="label">{{$t('customService.insuranceQuery.t2n2')}}</div>
<div class="label">{{dataForm.moneyMark}} {{formatMoney(dataForm.amount,0)}}</div>
</div>
</div>
<!-- 保单详情 -->
<template v-if="dataForm">
<div class="separator-h"></div>
<div class="data-line">
<div class="cell1">
<div class="label">{{$t('customService.insuranceQuery.t2n9k')}}</div>
<div class="label">{{$t('customService.insuranceQuery.t2n9v')}}</div>
</div>
<div class="separator-v"></div>
<div class="cell1">
<div class="label">{{$t('customService.insuranceQuery.t2n3')}}</div>
<div class="label">{{dataForm.activeDate?dataForm.activeDate.split(" ")[0]:""}}</div>
</div>
</div>
<!-- 1 -->
<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="separator-h"></div>
<div class="data-line">
<div class="cell1">
<div class="label">{{$t('customService.insuranceQuery.t2n4')}}</div>
<div class="label">{{formatInsuredPeriod(dataForm.periodType,dataForm.periodValue)}}</div>
</div>
<div class="separator-v"></div>
<div class="cell1">
<div class="label">{{$t('customService.insuranceQuery.t2n5')}}
<span @click="toModifyPage(1)">{{$t('customService.insuranceQuery.modify')}}</span>
</div>
<div class="label">{{dataForm.insuredNameCn}}</div>
</div>
</div>
<div class="separator-h"></div>
<div class="data-line">
<div class="cell1">
<div class="label">{{$t('customService.insuranceQuery.t2n6')}}
<span @click="toModifyPage(1)">{{$t('customService.insuranceQuery.modify')}}</span>
</div>
<div class="label">{{dataForm.insuredNameEn}}</div>
</div>
<div class="separator-v"></div>
<div class="cell1">
<div class="label">{{$t('customService.insuranceQuery.t2n7')}}</div>
<div class="label">{{dataForm.insuredBirthday?dataForm.insuredBirthday.split(" ")[0]:""}}</div>
</div>
</div>
<div class="gird-g table-content flw" :class="{hide : !insuranceForm.f1}">
<div class="pure-u-1-2 pure-u-md-1-2 cell">
<div class="label">{{$t('customService.insuranceQuery.t2n1')}}</div>
<div class="label">{{formatPolicyName(dataForm.productCode, dataForm.productName)}}</div>
</div>
<div class="pure-u-1-2 pure-u-md-1-2 cell">
<div class="label">{{$t('customService.insuranceQuery.t2n2')}}</div>
<div class="label">{{dataForm.moneyMark}} {{formatMoney(dataForm.amount,0)}}</div>
</div>
<div class="separator-h"></div>
<div class="data-line">
<div class="cell1">
<div class="label">{{$t('customService.insuranceQuery.t2n8')}}
<span @click="toModifyPage(1)">{{$t('customService.insuranceQuery.modify')}}</span>
</div>
<div class="label">{{dataForm.insuredIdNumber}}</div>
</div>
<div class="pure-u-1-2 pure-u-md-1-2 cell" v-if="dataForm.productCode == 'WLPAR01' || dataForm.productCode == 'WLPAR02'">
<div class="label">{{$t('customService.insuranceQuery.t2n9k')}}</div>
<div class="label">{{$t('customService.insuranceQuery.t2n9v')}}</div>
</div>
<div class="separator-v"></div>
<div class="cell1">
<div class="label"></div>
<div class="label"></div>
</div>
</div>
</div>
</div>
<div class="pure-u-1-2 pure-u-md-1-2 cell">
<div class="label">{{$t('customService.insuranceQuery.t2n3')}}</div>
<div class="label">{{dataForm.activeDate?dataForm.activeDate.split(" ")[0]:""}}</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.t3n1')}}
<span @click="toModifyPage(2)">{{$t('customService.insuranceQuery.modify')}}</span>
</div>
<div class="label">{{dataForm.clientNameCn}}</div>
</div>
<div class="separator-v"></div>
<div class="cell1">
<div class="label">{{$t('customService.insuranceQuery.t3n2')}}
<span @click="toModifyPage(2)">{{$t('customService.insuranceQuery.modify')}}</span>
</div>
<div class="label">{{dataForm.clientNameEn}}</div>
</div>
</div>
<div class="separator-h"></div>
<div class="data-line">
<div class="cell1">
<div class="label">{{$t('customService.insuranceQuery.t3n3')}}</div>
<div class="label">{{dataForm.clientBirthday?dataForm.clientBirthday.split(" ")[0]:""}}</div>
</div>
<div class="separator-v"></div>
<div class="cell1">
<div class="label">{{$t('customService.insuranceQuery.t3n4')}}
<span @click="toModifyPage(2)">{{$t('customService.insuranceQuery.modify')}}</span>
</div>
<div class="label">{{dataForm.clientIdNumber}}</div>
</div>
</div>
<div class="separator-h"></div>
<div class="data-line">
<div class="cell1">
<div class="label">{{$t('customService.insuranceQuery.t3n5')}}
<span @click="toModifyPage(2,1)">{{$t('customService.insuranceQuery.modify')}}</span>
</div>
<div class="label"> {{dataForm.clientContactAddress}}</div>
</div>
<div class="separator-v"></div>
<div class="cell1">
<div class="label">{{$t('customService.insuranceQuery.t3n6')}}
<span @click="toModifyPage(2,1)">{{$t('customService.insuranceQuery.modify')}}</span>
</div>
<div class="label"> {{dataForm.clientLivingAddress}}</div>
</div>
</div>
<div class="separator-h"></div>
<div class="data-line">
<div class="cell1">
<div class="label">{{$t('customService.insuranceQuery.t3n7')}}
<span @click="toModifyPage(2,1)">{{$t('customService.insuranceQuery.modify')}}</span>
</div>
<div class="label">{{dataForm.clientMobileNo}}</div>
</div>
<div class="separator-v"></div>
<div class="cell1">
<div class="label">{{$t('customService.insuranceQuery.t3n8')}}
<span @click="toModifyPage(2,1)">{{$t('customService.insuranceQuery.modify')}}</span>
</div>
<div class="label">{{dataForm.clientEmail}}</div>
</div>
</div>
<div class="pure-u-1-2 pure-u-md-1-2 cell">
<div class="label">{{$t('customService.insuranceQuery.t2n4')}}</div>
<div class="label">{{formatInsuredPeriod(dataForm.periodType,dataForm.periodValue)}}</div>
</div>
<div class="pure-u-1-2 pure-u-md-1-2 cell">
<div class="label">{{$t('customService.insuranceQuery.t2n5')}}
<span @click="toModifyPage(1)">{{$t('customService.insuranceQuery.modify')}}</span>
</div>
<div class="label">{{dataForm.insuredNameCn}}</div>
</div>
</div>
</div>
<div class="pure-u-1-2 pure-u-md-1-2 cell">
<div class="label">{{$t('customService.insuranceQuery.t2n6')}}
<span @click="toModifyPage(1)">{{$t('customService.insuranceQuery.modify')}}</span>
</div>
<div class="label">{{dataForm.insuredNameEn}}</div>
</div>
<div class="pure-u-1-2 pure-u-md-1-2 cell">
<div class="label">{{$t('customService.insuranceQuery.t2n7')}}</div>
<div class="label">{{dataForm.insuredBirthday?dataForm.insuredBirthday.split(" ")[0]:""}}</div>
</div>
<div class="cell-group cell-between">
<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 w2">{{$t('customService.insuranceQuery.t4NameCn')}}</div>
<div class="td w2">{{$t('customService.insuranceQuery.t4NameEn')}}</div>
<div class="td w2">{{$t('customService.insuranceQuery.t4Relation')}}</div>
<div class="td w2">{{$t('customService.insuranceQuery.t4Allocation')}}</div>
</div>
<div class="separator-h"></div>
<div class="pure-u-1-2 pure-u-md-1-2 cell">
<div class="label">{{$t('customService.insuranceQuery.t2n8')}}
<span @click="toModifyPage(1)">{{$t('customService.insuranceQuery.modify')}}</span>
</div>
<div class="label">{{dataForm.insuredIdNumber}}</div>
</div>
<div v-for="(item,index) in dataForm.benefitList" :key="index">
<div class="data-line">
<div class="td w2">{{item.name}}</div>
<div class="td w2">{{item.nameEn}}</div>
<div class="td w2">{{formatBenefitType(item.relationshipWithLA)}}</div>
<div class="td w2">{{item.benefitRate}}</div>
</div>
<div class="separator-h" v-if="index < dataForm.benefitList.length - 1"></div>
</div>
</div>
</div>
<!-- 为了凑正对 -->
<div class="pure-u-1-2 pure-u-md-1-2 cell" v-if="dataForm.productCode == 'WLPAR01' || dataForm.productCode == 'WLPAR02'">
<div class="label"></div>
<div class="label"></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">{{formatPayPeriod(dataForm.payPeriodType,dataForm.payPeriodValue)}}</div>
</div>
<div class="separator-v"></div>
<div class="cell1">
<div class="label">{{$t('customService.insuranceQuery.t5PaymentMethod')}}</div>
<div class="label">{{formatPayMode(dataForm.payMode)}}</div>
</div>
</div>
<div class="separator-h"></div>
<!-- 2 -->
<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.t3n1')}}
<span @click="toModifyPage(2)">{{$t('customService.insuranceQuery.modify')}}</span>
</div>
<div class="label">{{dataForm.clientNameCn}}</div>
</div>
<div class="separator-v"></div>
<div class="cell1">
<div class="label">{{$t('customService.insuranceQuery.t3n2')}}
<span @click="toModifyPage(2)">{{$t('customService.insuranceQuery.modify')}}</span>
</div>
<div class="label">{{dataForm.clientNameEn}}</div>
</div>
</div>
<div class="separator-h"></div>
<div class="data-line">
<div class="cell1">
<div class="label">{{$t('customService.insuranceQuery.t3n3')}}</div>
<div class="label">{{dataForm.clientBirthday?dataForm.clientBirthday.split(" ")[0]:""}}</div>
</div>
<div class="separator-v"></div>
<div class="cell1">
<div class="label">{{$t('customService.insuranceQuery.t3n4')}}
<span @click="toModifyPage(2)">{{$t('customService.insuranceQuery.modify')}}</span>
</div>
<div class="label">{{dataForm.clientIdNumber}}</div>
</div>
</div>
<div class="separator-h"></div>
<div class="data-line">
<div class="cell1">
<div class="label">{{$t('customService.insuranceQuery.t3n5')}}
<span @click="toModifyPage(2,1)">{{$t('customService.insuranceQuery.modify')}}</span>
</div>
<div class="label"> {{dataForm.clientContactAddress}}</div>
</div>
<div class="separator-v"></div>
<div class="cell1">
<div class="label">{{$t('customService.insuranceQuery.t3n6')}}
<span @click="toModifyPage(2,1)">{{$t('customService.insuranceQuery.modify')}}</span>
</div>
<div class="label"> {{dataForm.clientLivingAddress}}</div>
</div>
</div>
<div class="separator-h"></div>
<div class="data-line">
<div class="cell1">
<div class="label">{{$t('customService.insuranceQuery.t3n7')}}
<span @click="toModifyPage(2,1)">{{$t('customService.insuranceQuery.modify')}}</span>
</div>
<div class="label">{{dataForm.clientMobileNo}}</div>
</div>
<div class="separator-v"></div>
<div class="cell1">
<div class="label">{{$t('customService.insuranceQuery.t3n8')}}
<span @click="toModifyPage(2,1)">{{$t('customService.insuranceQuery.modify')}}</span>
</div>
<div class="label">{{dataForm.clientEmail}}</div>
</div>
</div>
<div class="data-line">
<div class="cell1">
<div class="label">{{$t('customService.insuranceQuery.t5PaymentCurrency')}}</div>
<div class="label">{{formatMoneyName(dataForm.moneyId)}}</div>
</div>
<div class="separator-v"></div>
<div class="cell1">
<div class="label">{{$t('customService.insuranceQuery.t5CurrentPremium')}}</div>
<div class="label">{{dataForm.moneyMark}} {{formatMoney(dataForm.premium)}}</div>
</div>
</div>
<div class="separator-h"></div>
</div>
</div>
<div class="data-line">
<div class="cell1">
<div class="label">{{$t('customService.insuranceQuery.t5PaymentBank')}}</div>
<div class="label">{{dataForm.bankName}}</div>
</div>
<div class="separator-v"></div>
<div class="cell1">
<div class="label">{{$t('customService.insuranceQuery.t5PaymentAccount')}}</div>
<div class="label">{{dataForm.bankAccount}}</div>
</div>
</div>
<div class="separator-h"></div>
</div>
</div>
<!-- 3 -->
<div class="cell-group cell-between">
<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 w2">{{$t('customService.insuranceQuery.t4NameCn')}}</div>
<div class="td w2">{{$t('customService.insuranceQuery.t4NameEn')}}</div>
<div class="td w2">{{$t('customService.insuranceQuery.t4Relation')}}</div>
<div class="td w2">{{$t('customService.insuranceQuery.t4Allocation')}}</div>
</div>
<div class="separator-h"></div>
<div class="cell-group cell-between">
<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 v-for="(item,index) in dataForm.pandupList" :key="index">
<div class="data-line">
<div class="td w2">{{formatPanduPayPeriod(item.policyYear,item.policyPeriod)}}</div>
<div class="td w2">{{formatPayMode(dataForm.payMode)}}</div>
<div class="td w2">{{item.receiptDate?item.receiptDate.split(" ")[0]:""}}</div>
<div class="td w2">{{dataForm.moneyMark}} {{formatMoney(item.totalPremium)}}</div>
</div>
<div class="separator-h" v-if="index < dataForm.pandupList.length - 1"></div>
</div>
</div>
</div>
</template>
</div>
</div>
<div v-for="(item,index) in dataForm.benefitList" :key="index">
<div class="data-line">
<div class="td w2">{{item.name}}</div>
<div class="td w2">{{item.nameEn}}</div>
<div class="td w2">{{formatBenefitType(item.relationshipWithLA)}}</div>
<div class="td w2">{{item.benefitRate}}</div>
</div>
<div class="separator-h" v-if="index < dataForm.benefitList.length - 1"></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">{{formatPayPeriod(dataForm.payPeriodType,dataForm.payPeriodValue)}}</div>
</div>
<div class="separator-v"></div>
<div class="cell1">
<div class="label">{{$t('customService.insuranceQuery.t5PaymentMethod')}}</div>
<div class="label">{{formatPayMode(dataForm.payMode)}}</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">{{formatMoneyName(dataForm.moneyId)}}</div>
</div>
<div class="separator-v"></div>
<div class="cell1">
<div class="label">{{$t('customService.insuranceQuery.t5CurrentPremium')}}</div>
<div class="label">{{dataForm.moneyMark}} {{formatMoney(dataForm.premium)}}</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">{{dataForm.bankName}}</div>
</div>
<div class="separator-v"></div>
<div class="cell1">
<div class="label">{{$t('customService.insuranceQuery.t5PaymentAccount')}}</div>
<div class="label">{{dataForm.bankAccount}}</div>
</div>
</div>
<div class="separator-h"></div>
</div>
</div>
<div class="cell-group cell-between">
<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 v-for="(item,index) in dataForm.pandupList" :key="index">
<div class="data-line">
<div class="td w2">{{formatPanduPayPeriod(item.policyYear,item.policyPeriod)}}</div>
<div class="td w2">{{formatPayMode(dataForm.payMode)}}</div>
<div class="td w2">{{item.receiptDate?item.receiptDate.split(" ")[0]:""}}</div>
<div class="td w2">{{dataForm.moneyMark}} {{formatMoney(item.totalPremium)}}</div>
</div>
<div class="separator-h" v-if="index < dataForm.pandupList.length - 1"></div>
</div>
</div>
</div>
</template>
</div>
</div>
</template>
......
......@@ -8,6 +8,11 @@
display: flex;
}
.flw {
display: flex;
flex-wrap: wrap;
}
.flc {
display: flex;
justify-content: center;
......