完成访客搭建,完善之前审核界面

This commit is contained in:
Zy
2026-04-13 18:10:23 +08:00
parent d957d1a039
commit 7f152c45f5
34 changed files with 1732 additions and 1208 deletions

View File

@@ -0,0 +1,156 @@
<template>
<div class="ResidentMainBox p-2 w-full h-full">
<PageHeader title="访客信息"></PageHeader>
<div class="ResidentMainBody">
<el-card>
<template #header>
<div class="card-header">
<span>车位信息</span>
</div>
</template>
<el-row>
<el-col :span="12">
<div class="grid grid-cols-3 grid-rows-3">
<div class="carinfo_item">
<div class="label">访问房屋:</div>
<div class="main">北境碧桂园小区A栋2单元402</div>
</div>
<div class="carinfo_item">
<div class="label">访客姓名:</div>
<div class="main">李淑一</div>
</div>
<div class="carinfo_item">
<div class="label">访客性别:</div>
<div class="main">男</div>
</div>
<div class="carinfo_item">
<div class="label">手机号码:</div>
<div class="main">15020360831</div>
</div>
<div class="carinfo_item">
<div class="label">访问日期:</div>
<div class="main">2024/05/08</div>
</div>
<div class="carinfo_item">
<div class="label">访问时长:</div>
<div class="main">3h</div>
</div>
<div class="carinfo_item">
<div class="label">访问业主:</div>
<div class="main flex align-items-center">
<div>去丽丽</div>
<div class="ml-20px color-blue cursor-pointer">住户详情</div>
</div>
</div>
<div class="carinfo_item">
<div class="label">提交时间:</div>
<div class="main">2024/09/15 22:48</div>
</div>
</div>
</el-col>
<el-col :span="5"></el-col>
<el-col :span="6">
<div>
<div>通行证</div>
</div>
</el-col>
</el-row>
<div class="visitorlist">
<h2>访问记录</h2>
</div>
<el-row>
<el-col :span="8">
<el-table :data="tableData" style="width: 100%">
<el-table-column align="center" prop="date" label="开门位置" />
<el-table-column align="center" prop="name" label="开门时间" />
</el-table>
</el-col>
</el-row>
<el-row class="mt-30px">
<el-col :span="12">
<el-button @click="back">返回</el-button>
</el-col>
</el-row>
</el-card>
</div>
</div>
</template>
<script setup lang="ts">
import { ref } from 'vue';
import PageHeader from '@/components/Pageheader/index.vue';
const tableData = [
{
date: '2016-05-03',
name: 'Tom',
address: 'No. 189, Grove St, Los Angeles'
},
{
date: '2016-05-02',
name: 'Tom',
address: 'No. 189, Grove St, Los Angeles'
},
{
date: '2016-05-04',
name: 'Tom',
address: 'No. 189, Grove St, Los Angeles'
},
{
date: '2016-05-01',
name: 'Tom',
address: 'No. 189, Grove St, Los Angeles'
}
];
const router = useRouter();
function back() {
router.push({
path: '/repair/visitorlist'
});
}
</script>
<style scoped lang="scss">
.ResidentMainBox {
display: flex;
flex-direction: column;
.ResidentMainBody {
flex: 1;
margin-top: 20px;
font-size: 15px;
.visitorlist {
margin: 20px 0;
border-bottom: 1px solid #ccc;
}
.carinfo_item {
margin-bottom: 40px;
display: flex;
align-items: center;
.label {
width: 100px;
text-align: right;
font-weight: bolder;
margin-right: 30px;
}
}
&:deep(div.el-step__head.is-process) {
& > div.el-step__line {
width: 0;
border: 1px dashed gray;
background: transparent;
}
}
&:deep(.el-step.is-vertical .el-step__line) {
top: 20px;
}
&:deep(div.el-step__head.is-finish) {
& > div.el-step__line {
width: 0;
border: 1px solid var(--el-color-primary);
background: transparent;
}
}
}
}
</style>