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-tag>
|
||||
-->
|
||||
<div class="sponsor-people-detail">
|
||||
<div class="breadcrumb">
|
||||
<a @click="goBack">人员管理</a> > 人员详情
|
||||
</div>
|
||||
<div class="page-card sponsor-people-detail">
|
||||
<div class="breadcrumb">首页 / 人员管理 / 人员详情</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-row :gutter="12">
|
||||
<el-col :span="12">
|
||||
@@ -74,7 +72,7 @@
|
||||
</el-form>
|
||||
</el-card>
|
||||
|
||||
<div class="detail-actions">
|
||||
<div class="form-actions">
|
||||
<el-button @click="goBack">返回</el-button>
|
||||
</div>
|
||||
</div>
|
||||
@@ -138,18 +136,19 @@ onMounted(load)
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
/* 1:1 抄 doctor/SubmissionDetail.vue */
|
||||
.sponsor-people-detail { max-width: 1000px; }
|
||||
.breadcrumb { font-size: 13px; color: #8c8c8c; margin-bottom: 16px; }
|
||||
.breadcrumb a { color: var(--brand-primary); cursor: pointer; text-decoration: none; }
|
||||
.breadcrumb a:hover { color: var(--brand-primary-deep, var(--brand-primary)); }
|
||||
/* 1:1 对齐 executor/PersonDetail.vue (page-card + form-card nested + form-actions) */
|
||||
.sponsor-people-detail { max-width: 1200px; }
|
||||
.page-card { background: #fff; padding: 16px 20px; border-radius: 6px; border: 1px solid #f0f0f0; }
|
||||
.breadcrumb { font-size: 13px; color: #8c8c8c; margin-bottom: 12px; }
|
||||
|
||||
.detail-card { border-radius: 6px; }
|
||||
.detail-card :deep(.el-card__body) { padding: 24px 28px; }
|
||||
.form-card.nested { background: transparent; border: none; box-shadow: none; }
|
||||
:deep(.form-card .el-card__body) { padding: 24px 28px; }
|
||||
|
||||
.readonly-form :deep(.el-form-item) { margin-bottom: 22px; }
|
||||
.readonly-form :deep(.el-form-item__label) { color: #606266; font-weight: normal; }
|
||||
|
||||
.detail-actions { margin-top: 16px; }
|
||||
:deep(.el-button) { border-radius: 4px; }
|
||||
.form-actions { margin-top: 16px; display: flex; gap: 8px; }
|
||||
|
||||
: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>
|
||||
Reference in New Issue
Block a user