120 lines
4.2 KiB
Vue
120 lines
4.2 KiB
Vue
<!-- 业主模块 - 个人中心 -->
|
||
|
||
<template>
|
||
<div class="MainBox">
|
||
<!-- 个人信息卡片 -->
|
||
<el-card class="info-card" shadow="hover">
|
||
<template #header>
|
||
<span>个人信息</span>
|
||
</template>
|
||
<el-row :gutter="20">
|
||
<el-col :span="12">
|
||
<el-descriptions :column="1" borderless>
|
||
<el-descriptions-item label="姓名">张伟</el-descriptions-item>
|
||
<el-descriptions-item label="角色">票证签发人</el-descriptions-item>
|
||
<el-descriptions-item label="联系方式">
|
||
<span>138****8888</span>
|
||
<el-button type="text" size="small" style="margin-left: 10px;">修改</el-button>
|
||
</el-descriptions-item>
|
||
</el-descriptions>
|
||
</el-col>
|
||
<el-col :span="12">
|
||
<el-descriptions :column="1" borderless>
|
||
<el-descriptions-item label="所属部门">工程部</el-descriptions-item>
|
||
<el-descriptions-item label="负责项目范围">
|
||
<el-list>
|
||
<el-list-item>• 苏州工业园区新建厂房项目</el-list-item>
|
||
<el-list-item>• 南京江北新区研发中心建设</el-list-item>
|
||
<el-list-item>• 杭州未来科技城办公楼扩建</el-list-item>
|
||
</el-list>
|
||
</el-descriptions-item>
|
||
</el-descriptions>
|
||
</el-col>
|
||
</el-row>
|
||
</el-card>
|
||
|
||
<!-- 功能入口 -->
|
||
<div class="function-section">
|
||
<h3>功能入口</h3>
|
||
<el-row :gutter="20">
|
||
<el-col :span="8">
|
||
<el-card class="function-card" shadow="hover">
|
||
<div class="function-icon">
|
||
<el-icon><Clock /></el-icon>
|
||
</div>
|
||
<h4>操作日志</h4>
|
||
<p>查看本人签发/审核记录，按时间/项目筛选</p>
|
||
<el-button type="primary" style="margin-top: 15px;">查看详情</el-button>
|
||
</el-card>
|
||
</el-col>
|
||
<el-col :span="8">
|
||
<el-card class="function-card" shadow="hover">
|
||
<div class="function-icon">
|
||
<el-icon><Lock /></el-icon>
|
||
</div>
|
||
<h4>密码修改</h4>
|
||
<p>旧密码 + 新密码 + 确认密码</p>
|
||
<el-button type="primary" style="margin-top: 15px;">修改密码</el-button>
|
||
</el-card>
|
||
</el-col>
|
||
<el-col :span="8">
|
||
<el-card class="function-card" shadow="hover">
|
||
<div class="function-icon">
|
||
<el-icon><Message /></el-icon>
|
||
</div>
|
||
<h4>消息中心</h4>
|
||
<p>接收票证提交通知、驳回反馈、作废通知等</p>
|
||
<el-button type="primary" style="margin-top: 15px;">进入消息中心</el-button>
|
||
</el-card>
|
||
</el-col>
|
||
</el-row>
|
||
</div>
|
||
</div>
|
||
</template>
|
||
<style scoped lang="scss">
|
||
.MainBox {
|
||
padding: 20px;
|
||
height: 100%;
|
||
background: #F9FAFB;
|
||
}
|
||
|
||
.info-card {
|
||
margin-bottom: 20px;
|
||
}
|
||
|
||
.function-section {
|
||
margin-top: 30px;
|
||
|
||
h3 {
|
||
margin-bottom: 20px;
|
||
font-size: 18px;
|
||
font-weight: 600;
|
||
}
|
||
}
|
||
|
||
.function-card {
|
||
height: 250px;
|
||
display: flex;
|
||
flex-direction: column;
|
||
align-items: center;
|
||
justify-content: center;
|
||
text-align: center;
|
||
|
||
.function-icon {
|
||
font-size: 48px;
|
||
color: #409eff;
|
||
margin-bottom: 15px;
|
||
}
|
||
|
||
h4 {
|
||
margin-bottom: 10px;
|
||
font-size: 16px;
|
||
font-weight: 600;
|
||
}
|
||
|
||
p {
|
||
color: #666;
|
||
margin-bottom: 10px;
|
||
}
|
||
}
|
||
</style> |