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:
@@ -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> > 人员详情
|
|
||||||
</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>
|
||||||
Reference in New Issue
Block a user