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
import api from '@/api/api'
import {
httpGet,
httpPost
} from '@/api/fetch-api.js'
// import InsuranceQuery from './components/insurance-query'
export default {
data() {
return {
activity: "m1",
insuranceForm: {
f1 : true,
f2 : true,
f3 : true,
f4 : true,
f5 : true,
}
}
},
methods: {
initData() { },
},
created() { },
components: {
// InsuranceQuery
}
}
.content {
display: flex;
}
.left-panel {
width: 12.833333rem ;
height: 42.333333rem ;
margin-left: 3.166667rem;
.separator {
margin:auto;
width: 10.5rem ;
height: .083333rem;
background-color: #dcdddd;
}
.menu-item {
height: 5.916667rem;
line-height: 5.916667rem;
font-size: 1.5rem ;
font-weight: bold;
color: #4c4948;
text-align: center;
cursor: pointer;
i {
display: inline-block;
width: 1.666667rem ;
height: 1.666667rem;
margin-right: 1.333333rem;
vertical-align: middle;
}
.m1 {
background: url("~@/assets/images/insurance-query/m1-unselect.png") no-repeat center center;
background-size: 100% 100%;
}
.m2 {
background: url("~@/assets/images/insurance-query/m2-unselect.png") no-repeat center center;
background-size: 100% 100%;
}
.m3 {
background: url("~@/assets/images/insurance-query/m3-unselect.png") no-repeat center center;
background-size: 100% 100%;
}
.m4 {
background: url("~@/assets/images/insurance-query/m4-unselect.png") no-repeat center center;
background-size: 100% 100%;
}
.m5 {
background: url("~@/assets/images/insurance-query/m5-unselect.png") no-repeat center center;
background-size: 100% 100%;
}
.m6 {
background: url("~@/assets/images/insurance-query/m6-unselect.png") no-repeat center center;
background-size: 100% 100%;
}
}
.menu-item.activity {
color: #f05a23 !important;
.m1 {
background: url("~@/assets/images/insurance-query/m1.png") no-repeat center center;
background-size: 100% 100%;
}
.m2 {
background: url("~@/assets/images/insurance-query/m2.png") no-repeat center center;
background-size: 100% 100%;
}
.m3 {
background: url("~@/assets/images/insurance-query/m3.png") no-repeat center center;
background-size: 100% 100%;
}
.m4 {
background: url("~@/assets/images/insurance-query/m4.png") no-repeat center center;
background-size: 100% 100%;
}
.m5 {
background: url("~@/assets/images/insurance-query/m5.png") no-repeat center center;
background-size: 100% 100%;
}
.m6 {
background: url("~@/assets/images/insurance-query/m6.png") no-repeat center center;
background-size: 100% 100%;
}
}
}
.min-panel {
margin-left: .666667rem;
width: 1.166667rem;
.item {
width: 1.166667rem ;
height: 6rem;
display: flex;
justify-content: flex-start;
align-items: center;
}
.activity .triangle {
width: .583333rem;
height: 1.166667rem ;
background: url("~@/assets/images/insurance-query/triangle.png") no-repeat center center;
background-size: 100% 100%;
}
}
.right-panel {
margin-left: 1.166667rem;
width: 64.166667rem ;
background-color: #ffffff;
.panel {
display: none;
}
.activity {
display: block !important;
}
}
/** 可以抽出来作为一个插件 **/
.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>保單查詢
<div></div>
</div>
<div class="separator"></div>
<div class="menu-item" :class="{activity : activity == 'm2'}" @click="activity = 'm2'">
<i class="m2"></i>保全變更
</div>
<div class="separator"></div>
<div class="menu-item" :class="{activity : activity == 'm3'}" @click="activity = 'm3'">
<i class="m3"></i>續期繳費
</div>
<div class="separator"></div>
<div class="menu-item" :class="{activity : activity == 'm4'}" @click="activity = 'm4'">
<i class="m4"></i>理赔申请
</div>
<div class="separator"></div>
<div class="menu-item" :class="{activity : activity == 'm5'}" @click="activity = 'm5'">
<i class="m5"></i>預約服務
</div>
<div class="separator"></div>
<div class="menu-item" :class="{activity : activity == 'm6'}" @click="activity = 'm6'">
<i class="m6"></i>投诉受理
</div>
</div>
<div class="min-panel">
<div class="item" :class="{activity : activity == 'm1'}">
<div class="triangle"></div>
</div>
<div class="item" :class="{activity : activity == 'm2'}">
<div class="triangle"></div>
</div>
<div class="item" :class="{activity : activity == 'm3'}">
<div class="triangle"></div>
</div>
<div class="item" :class="{activity : activity == 'm4'}">
<div class="triangle"></div>
</div>
<div class="item" :class="{activity : activity == 'm5'}">
<div class="triangle"></div>
</div>
<div class="item" :class="{activity : activity == 'm6'}">
<div class="triangle"></div>
</div>
</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">保單號碼</div>
<div class="td w2">被保人</div>
<div class="td w2">險種名稱</div>
<div class="td w2">保險金額</div>
<div class="td w2">生效日期</div>
<div class="td w2">保障年期</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">保障内容</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">险种名称</div>
<div class="label">分紅重疾</div>
</div>
<div class="separator-v"></div>
<div class="cell1">
<div class="label">保額</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">生效日期</div>
<div class="label">2020-1-1</div>
</div>
<div class="separator-v"></div>
<div class="cell1">
<div class="label">保障年期</div>
<div class="label">终身</div>
</div>
</div>
</div>
</div>
<div class="cell-group">
<div class="table-header">
<div class="normal-header">
<div class="title">保障内容</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">
投保人姓名（中文）<span>修改</span>
</div>
<div class="label">平安</div>
</div>
<div class="separator-v"></div>
<div class="cell1">
<div class="label">
投保人姓名（英文）<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">生效日期</div>
<div class="label">2020-1-1</div>
</div>
<div class="separator-v"></div>
<div class="cell1">
<div class="label">
證件號碼<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">
聯繫地址<span>修改</span>
</div>
<div class="label">深圳市益田路5033號</div>
</div>
<div class="separator-v"></div>
<div class="cell1">
<div class="label">
居住地址<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">
手提電話<span>修改</span>
</div>
<div class="label">（852）2888 8888</div>
</div>
<div class="separator-v"></div>
<div class="cell1">
<div class="label">
電子郵箱<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">
受保人姓名（中文）<span>修改</span>
</div>
<div class="label">平安</div>
</div>
<div class="separator-v"></div>
<div class="cell1">
<div class="label">
受保人姓名（英文）<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">出生日期</div>
<div class="label">1999-1-1</div>
</div>
<div class="separator-v"></div>
<div class="cell1">
<div class="label">
證件號碼<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">受益人資料</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">姓名（中文）</div>
<div class="td">姓名（英文）</div>
<div class="td">分配比例</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">繳費資料</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">續費年期</div>
<div class="label">30年</div>
</div>
<div class="separator-v"></div>
<div class="cell1">
<div class="label">繳費方式</div>
<div class="label">銀行轉帳</div>
</div>
</div>
<div class="separator-h"></div>
<div class="data-line">
<div class="cell1">
<div class="label">繳費幣種</div>
<div class="label">港幣</div>
</div>
<div class="separator-v"></div>
<div class="cell1">
<div class="label">當期保費</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">繳費銀行</div>
<div class="label">平安銀行</div>
</div>
<div class="separator-v"></div>
<div class="cell1">
<div class="label">繳費帳號</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">繳費記錄</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">繳費期</div>
<div class="td w2">繳費方式</div>
<div class="td w2">實收日期</div>
<div class="td w2">繳費金額</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 class="empty-line"></div>
</div>
<div class="panel" :class="{activity : activity == 'm2'}">m2</div>
<div class="panel" :class="{activity : activity == 'm3'}">m3</div>
<div class="panel" :class="{activity : activity == 'm4'}">m4</div>
<div class="panel" :class="{activity : activity == 'm5'}">m5</div>
<div class="panel" :class="{activity : activity == 'm6'}">m6</div>
</div>
</div>
</template>
<script src="./custom-service.js"></script>
<style lang="scss" scoped>
@import "./custom-service.scss";
</style>
\ No newline at end of file
......@@ -88,6 +88,14 @@ const routes = [
title: ''
}
},
{
path: '/custom/service',
name: 'customService',
component: () => import('./pages/custom-service/custom-service.vue'),
meta: {
title: '保单查询'
}
},
{
path: '/demo',
......