parent
f915d437c4
commit
91ba9f1dd9
@ -0,0 +1,186 @@
|
||||
<template>
|
||||
<div style="padding: 0px 20px">
|
||||
<div>
|
||||
<div ref="lxHeader">
|
||||
<lx-header icon="md-apps" text="详细信息" style="margin-bottom: 10px; border: 0px; margin-top: 15px">
|
||||
<div slot="content">
|
||||
<Button type="primary" icon="ios-arrow-back" @click="$router.back()">返回</Button>
|
||||
<Button type="primary" @click="$router.push(`/detailCustomer/${$route.params.id++}`)" ghost style="margin-left: 10px;">下一条<Icon type="ios-arrow-forward" /></Button>
|
||||
</div>
|
||||
</lx-header>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<el-card :style="{height : cardHeight + 'px'}">
|
||||
<div class="grid">
|
||||
<div style="grid-area: a1-1">姓名</div>
|
||||
<div style="grid-area: a1-2">XXX</div>
|
||||
<div style="grid-area: a1-3">性别</div>
|
||||
<div style="grid-area: a1-4">男</div>
|
||||
<div style="grid-area: a1-5">身份证号</div>
|
||||
<div style="grid-area: a1-6">320503198111122755</div>
|
||||
<div style="grid-area: a1-7">户籍地址</div>
|
||||
<div style="grid-area: a1-8">江苏省苏州市虎丘区阳光假日新苑90幢2404室</div>
|
||||
|
||||
</div>
|
||||
|
||||
<el-divider></el-divider>
|
||||
|
||||
<div class="image">
|
||||
<div class="image-title">
|
||||
健康档案
|
||||
</div>
|
||||
<div class="image-content">
|
||||
<div>
|
||||
<div class="image-content-title">身份证头像面</div>
|
||||
<div>
|
||||
<el-image fit="cover" :src="srcList[0]" lazy style="width: 180px;" :preview-src-list="srcList"></el-image>
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<div class="image-content-title">身份证国徽面</div>
|
||||
<div>
|
||||
<el-image fit="cover" :src="srcList[1]" lazy style="width: 180px;" :preview-src-list="srcList"></el-image>
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<div class="image-content-title">社保卡正面</div>
|
||||
<div>
|
||||
<el-image fit="cover" :src="srcList[0]" lazy style="width: 180px;" :preview-src-list="srcList"></el-image>
|
||||
</div>
|
||||
</div>
|
||||
<div style="flex-basis: 100%;">
|
||||
<div class="image-content-title">出院小结</div>
|
||||
<div>
|
||||
<el-image fit="cover" :src="srcList[1]" lazy style="width: 340px;" :preview-src-list="srcList"></el-image>
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<div class="image-content-title">街道证明</div>
|
||||
<div>
|
||||
<el-image fit="cover" :src="srcList[0]" lazy style="width: 140px;" :preview-src-list="srcList"></el-image>
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<div class="image-content-title">长护险申请人承诺书</div>
|
||||
<div>
|
||||
<el-image fit="cover" :src="srcList[0]" lazy style="width: 140px;" :preview-src-list="srcList"></el-image>
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<div class="image-content-title">委托书</div>
|
||||
<div>
|
||||
<el-image fit="cover" :src="srcList[0]" lazy style="width: 140px;" :preview-src-list="srcList"></el-image>
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<div class="image-content-title">失能等级评定表</div>
|
||||
<div>
|
||||
<el-image fit="cover" :src="srcList[0]" lazy style="width: 140px;" :preview-src-list="srcList"></el-image>
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<div class="image-content-title">申请告知书签字版</div>
|
||||
<div>
|
||||
<el-image fit="cover" :src="srcList[0]" lazy style="width: 140px;" :preview-src-list="srcList"></el-image>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</el-card>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
cardHeight: 0,
|
||||
srcList: [
|
||||
'https://fuss10.elemecdn.com/8/27/f01c15bb73e1ef3793e64e6b7bbccjpeg.jpeg',
|
||||
'https://fuss10.elemecdn.com/1/8e/aeffeb4de74e2fde4bd74fc7b4486jpeg.jpeg'
|
||||
]
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
initLoad() {
|
||||
var that = this;
|
||||
var clientHeight = document.documentElement.clientHeight
|
||||
var lxHeader_height = 96.5; //查询 头部
|
||||
var paginationHeight = 37; //分页的高度
|
||||
var topHeight = 50; //页面 头部
|
||||
let cardHeight = clientHeight - lxHeader_height - topHeight - paginationHeight - 20;
|
||||
that.cardHeight = cardHeight;
|
||||
},
|
||||
},
|
||||
created() {
|
||||
this.initLoad()
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
.grid{
|
||||
display: grid;
|
||||
grid-template-columns: 1fr 0.6fr 1fr 0.8fr 1fr 1.4fr 1fr 2.6fr;
|
||||
grid-template-rows: auto;
|
||||
grid-template-areas:
|
||||
"a1-1 a1-2 a1-3 a1-4 a1-5 a1-6 a1-7 a1-8";
|
||||
&>div{
|
||||
font-size: 13px;
|
||||
border: 1px solid rgba(200,200,200,0.5);
|
||||
|
||||
padding: 10px 4px;
|
||||
}
|
||||
:nth-child(2n + 1){
|
||||
font-size: 13.5px;
|
||||
background: rgba(243,242,247,0.8);
|
||||
color: #6E6B7B;
|
||||
font-weight: 600;
|
||||
text-align: center;
|
||||
|
||||
}
|
||||
}
|
||||
.image{
|
||||
|
||||
|
||||
&-title{
|
||||
font-size: 13.5px;
|
||||
color: #6E6B7B;
|
||||
font-weight: 600;
|
||||
}
|
||||
&-content{
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
align-items: flex-start;
|
||||
|
||||
&>div{
|
||||
padding-right: 20px;
|
||||
}
|
||||
::v-deep .el-image__preview{
|
||||
border-radius: 6px;
|
||||
}
|
||||
&-title{
|
||||
|
||||
padding: 10px 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
<style scoped lang="scss">
|
||||
::v-deep .el-card{
|
||||
overflow-y: scroll !important;
|
||||
}
|
||||
::v-deep .el-card::-webkit-scrollbar {
|
||||
width: 6px !important;
|
||||
height: 10px !important;
|
||||
}
|
||||
::v-deep .el-card::-webkit-scrollbar-thumb {
|
||||
border-radius: 5px !important;
|
||||
background: #ddd !important;
|
||||
}
|
||||
::v-deep .el-divider{
|
||||
background: #B3241D;
|
||||
}
|
||||
</style>
|
||||
|
||||
File diff suppressed because one or more lines are too long
Loading…
Reference in new issue