<!-- 业主模块 - 个人中心 -->

<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>