zhaoyang/estate
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

住户信息结构完成

Browse Source
This commit is contained in:
Zy
2026-04-09 18:41:18 +08:00
parent 267a9a5f29
commit 238aa9a400
10 changed files with 1008 additions and 232 deletions
Download Patch File Download Diff File Expand all files Collapse all files

214
src/views/system/resident/ResidentMain.vue Normal file
View File

@@ -0,0 +1,214 @@
<template>
<div class="ResidentMainBox p-2 w-full h-full">
<PageHeader title="住户详情"></PageHeader>
<div class="ResidentMainBody">
<el-row :span="24" :gutter="20">
<el-col :span="16">
<div class="userInfobox">
<el-card>
<template #header>
<div class="card-header">
<span>基础资料</span>
</div>
</template>
<div class="w-full h-full">
<el-row :gutter="20">
<el-col :span="12">
<div class="userinfo_item">
<div class="title_item">住户姓名：</div>
<span> 去丽丽 </span>
</div>
<div class="userinfo_item">
<div class="title_item">手机号码：</div>
<span> 去丽丽 </span>
</div>
<div class="userinfo_item">
<div class="title_item">证件类型：</div>
<span> 去丽丽 </span>
</div>
<div class="userinfo_item">
<div class="title_item">住户类型：</div>
<span> 去丽丽 </span>
</div>
<div class="userinfo_item">
<div class="title_item">住户来源：</div>
<span> 去丽丽 </span>
</div>
<div class="userinfo_item">
<div class="title_item">注册时间：</div>
<span> 去丽丽 </span>
</div>
<div class="userinfo_item">
<div class="title_item">身份证正面：</div>
<span> 去丽丽 </span>
</div>
</el-col>
<el-col :span="12">
<div class="userinfo_item">
<div class="title_item">住户编号：</div>
<span> 去丽丽 </span>
</div>
<div class="userinfo_item">
<div class="title_item">住户性别：</div>
<span> 去丽丽 </span>
</div>
<div class="userinfo_item">
<div class="title_item">证件号码：</div>
<span> 去丽丽 </span>
</div>
<div class="userinfo_item">
<div class="title_item">备注：</div>
<span> 去丽丽 </span>
</div>
<div class="userinfo_item">
<div class="title_item">提交审核时间：</div>
<span> 去丽丽 </span>
</div>
<div class="userinfo_item">
<div class="title_item">身份证正面：</div>
<span> 去丽丽 </span>
</div>
</el-col>
</el-row>
</div>
</el-card>
</div>
<div class="previewbox">
<el-card>
<template #header>
<div class="card-header">
<span>审核</span>
</div>
</template>
<div class="w-full h-full flex mt-2">
<div class="title">审批意见</div>
<div class="preivewBodybox">
<el-input placeholder="请输入" type="textarea" :rows="5"></el-input>
<div class="actions">
<el-button type="primary">审核通过</el-button>
<el-button type="danger">审核不通过</el-button>
<el-button>返回</el-button>
</div>
</div>
</div>
</el-card>
</div>
</el-col>
<el-col :span="8">
<el-card style="position: relative" class="h-full">
<template #header>
<div class="asideCardHeader w-full h-full">
<div class="cardSubtitle">
<div class="line"></div>
<div class="subtitle">审批流程</div>
</div>
</div>
</template>
<div class="w-full h-50%">
<el-steps direction="vertical" :active="0">
<el-step title="提交信息" description="2023/4/23 10:28:43" />
<el-step title="物业审核" description="2023/4/23 11:10:58" />
<el-step title="认证通过" description="2023/4/23 12:35:22" />
</el-steps>
</div>
</el-card>
</el-col>
</el-row>
</div>
</div>
</template>
<script setup lang="ts">
import { ref } from 'vue';
import PageHeader from '@/components/Pageheader/index.vue';
</script>
<style scoped lang="scss">
.ResidentMainBox {
display: flex;
flex-direction: column;
.ResidentMainBody {
flex: 1;
margin-top: 20px;
.userInfobox {
.card-header {
font-size: 18px;
height: 60px;
line-height: 60px;
}
.userinfo_item {
margin-bottom: 20px;
height: 60px;
line-height: 60px;
display: flex;
align-items: center;
background: peru;
.title_item {
margin-right: 10px;
width: 100px;
text-align: right;
}
}
}
.previewbox {
margin-top: 20px;
.card-header {
font-size: 18px;
height: 60px;
line-height: 60px;
}
.title {
width: 120px;
padding-right: 20px;
text-align: right;
}
.preivewBodybox {
flex: 1;
height: 200px;
.actions {
margin-top: 20px;
}
}
}
.cardSubtitle {
position: absolute;
left: 0px;
top: 28px;
width: 100px;
background: #fff;
color: #000;
display: flex;
align-items: center;
justify-content: center;
.line {
width: 5px;
height: 19px;
margin-right: 5px;
border-radius: 5px;
background-color: rgba(26, 117, 255, 1);
}
.subtitle {
height: 23px;
line-height: 23px;
color: rgba(51, 51, 51, 1);
font-size: 16px;
}
}
&:deep(div.el-step__head.is-process) {
& > div.el-step__line {
width: 0;
border: 1px dashed gray;
background: transparent;
}
}
&:deep(div.el-step__head.is-finish) {
& > div.el-step__line {
width: 0;
border: 1px solid var(--el-color-primary);
background: transparent;
}
}
}
}
</style>