style(sponsor/PersonDetail): 对齐 executor/PersonDetail 风格

- 加 page-card 包裹 + breadcrumb 三级 '首页 / 人员管理 / 人员详情'
- detail-card → form-card nested (跟 NewPerson 一致)
- detail-actions → form-actions
- max-width: 1000px → 1200px
- 删 :deep(.el-button) { border-radius } (skill 禁忌覆盖 el 默认主题)
- 删 :deep(.el-form-item__label) 颜色覆盖 (让 el 默认)

Co-Authored-By: Claude <noreply@anthropic.com>
This commit is contained in:
郭庆泰
2026-08-18 21:44:07 +08:00
co-authored by Claude
parent d2e7ec110d
commit 14968d46e5
+14 -15
View File
@@ -4,12 +4,10 @@
只读表单: <el-input :model-value="..." readonly /> + readonly-cell 自定义块 只读表单: <el-input :model-value="..." readonly /> + readonly-cell 自定义块
状态用 <el-tag> 状态用 <el-tag>
--> -->
<div class="sponsor-people-detail"> <div class="page-card sponsor-people-detail">
<div class="breadcrumb"> <div class="breadcrumb">首页 / 人员管理 / 人员详情</div>
<a @click="goBack">人员管理</a> &gt; 人员详情
</div>
<el-card v-loading="loading" shadow="never" class="detail-card"> <el-card v-loading="loading" shadow="never" class="form-card nested">
<el-form label-width="120px" class="readonly-form"> <el-form label-width="120px" class="readonly-form">
<el-row :gutter="12"> <el-row :gutter="12">
<el-col :span="12"> <el-col :span="12">
@@ -74,7 +72,7 @@
</el-form> </el-form>
</el-card> </el-card>
<div class="detail-actions"> <div class="form-actions">
<el-button @click="goBack">返回</el-button> <el-button @click="goBack">返回</el-button>
</div> </div>
</div> </div>
@@ -138,18 +136,19 @@ onMounted(load)
</script> </script>
<style scoped> <style scoped>
/* 1:1 抄 doctor/SubmissionDetail.vue */ /* 1:1 对齐 executor/PersonDetail.vue (page-card + form-card nested + form-actions) */
.sponsor-people-detail { max-width: 1000px; } .sponsor-people-detail { max-width: 1200px; }
.breadcrumb { font-size: 13px; color: #8c8c8c; margin-bottom: 16px; } .page-card { background: #fff; padding: 16px 20px; border-radius: 6px; border: 1px solid #f0f0f0; }
.breadcrumb a { color: var(--brand-primary); cursor: pointer; text-decoration: none; } .breadcrumb { font-size: 13px; color: #8c8c8c; margin-bottom: 12px; }
.breadcrumb a:hover { color: var(--brand-primary-deep, var(--brand-primary)); }
.detail-card { border-radius: 6px; } .form-card.nested { background: transparent; border: none; box-shadow: none; }
.detail-card :deep(.el-card__body) { padding: 24px 28px; } :deep(.form-card .el-card__body) { padding: 24px 28px; }
.readonly-form :deep(.el-form-item) { margin-bottom: 22px; } .readonly-form :deep(.el-form-item) { margin-bottom: 22px; }
.readonly-form :deep(.el-form-item__label) { color: #606266; font-weight: normal; } .readonly-form :deep(.el-form-item__label) { color: #606266; font-weight: normal; }
.detail-actions { margin-top: 16px; } .form-actions { margin-top: 16px; display: flex; gap: 8px; }
:deep(.el-button) { border-radius: 4px; }
:deep(.el-input__wrapper), :deep(.el-textarea__inner) { border-radius: 4px; }
:deep(.el-input.is-readonly .el-input__wrapper) { background-color: #fafafa; box-shadow: none; }
</style> </style>