admin/guoju0808
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

style(submission-detail): 对齐 People.vue 风格 — page-card + el-descriptions + max-width 1200px

Browse Source 
- template: 1 层 page-card 包全部, 删 el-card 嵌套
- template: 标准 breadcrumb (首页 / 分类 / 当前页), 删 inline <a> 链接
- template: 只读信息改用 el-descriptions (column=2, border), 删 el-input readonly 那一坨
- template: el-link 下载 (上一提交已加, 保留)
- script: 删 fmt/display (el-descriptions 内联 {{ xxx || '-' }})
- style: 3 行 (max-width 1200px / breadcrumb / detail-actions), 删 readonly-form/readonly-cell/.detail-card/:deep(.el-button) 全部
This commit is contained in:
郭庆泰
2026-08-18 00:54:49 +08:00
parent ad3aac0e68
commit 3de26199b1
1 changed files with 20 additions and 98 deletions
Download Patch File Download Diff File Expand all files Collapse all files
ry-vue3/src/views/doctor/SubmissionDetail.vue
+20 -98
View File
@@ -1,63 +1,22 @@
<template>
<div class="submission-detail">
<!-- 面包屑 (与 SubmissionNew 一致) -->
<div class="breadcrumb">
<a @click="goBack">我的项目设计投稿</a> &gt; 投稿详情
</div>
<div v-loading="loading" class="page-card doctor-submission-detail">
<!-- 面包屑 (标准: 首页 / 分类 / 当前页) -->
<div class="breadcrumb">首页 / 我的项目设计投稿 / 投稿详情</div>
<!-- 表单卡片 (与 SubmissionNew 同款) -->
<el-card v-loading="loading" shadow="never" class="detail-card">
<el-form label-width="120px" class="readonly-form">
<el-row :gutter="12">
<el-col :span="12">
<el-form-item label="策划方案名称">
<el-input :model-value="display.planName" readonly />
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item label="项目方向">
<el-input :model-value="display.planDirectionTitle" readonly />
</el-form-item>
</el-col>
</el-row>
<!-- 只读信息 (el-descriptions 是详情页标准) -->
<el-descriptions :column="2" border>
<el-descriptions-item label="策划方案名称">{{ detail.planName || '-' }}</el-descriptions-item>
<el-descriptions-item label="项目方向">{{ detail.planDirectionTitle || detail.planDirection || '-' }}</el-descriptions-item>
<el-descriptions-item label="项目形式">{{ detail.projectForm || '-' }}</el-descriptions-item>
<el-descriptions-item label="项目类别">{{ detail.planCategory || '-' }}</el-descriptions-item>
<el-descriptions-item label="设计文件" :span="2">
<el-link v-if="detail.designFileUrl" :href="detail.designFileUrl" :download="detail.planName || '设计文件'" target="_blank" type="primary">下载</el-link>
<span v-else>-</span>
</el-descriptions-item>
<el-descriptions-item label="备注" :span="2">{{ detail.remark || '-' }}</el-descriptions-item>
</el-descriptions>
<el-row :gutter="12">
<el-col :span="12">
<el-form-item label="项目形式">
<el-input :model-value="display.projectForm" readonly />
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item label="项目类别">
<el-input :model-value="display.planCategory" readonly />
</el-form-item>
</el-col>
</el-row>
<el-row :gutter="12">
<el-col :span="24">
<el-form-item label="设计文件">
<div class="readonly-cell">
<template v-if="detail.designFileUrl">
<el-link :href="detail.designFileUrl" :download="detail.planName || '设计文件'" target="_blank" type="primary">下载</el-link>
</template>
<span v-else>-</span>
</div>
</el-form-item>
</el-col>
</el-row>
<el-row :gutter="12">
<el-col :span="24">
<el-form-item label="备注">
<el-input :model-value="display.remark" type="textarea" :rows="4" readonly />
</el-form-item>
</el-col>
</el-row>
</el-form>
</el-card>
<!-- 操作按钮 (与 SubmissionNew 同位置同样式) -->
<!-- 操作按钮 -->
<div class="detail-actions">
<el-button @click="goBack">返回</el-button>
</div>
@@ -65,7 +24,7 @@
</template>
<script setup>
import { ref, computed, onMounted } from 'vue'
import { ref, onMounted } from 'vue'
import { useRoute, useRouter } from 'vue-router'
import { ElMessage } from 'element-plus'
import request from '@/utils/request'
@@ -76,20 +35,6 @@ const router = useRouter()
const loading = ref(false)
const detail = ref({})
// 显示用: 空值显示 "-"
function fmt(v) {
if (v === null || v === undefined || v === '') return '-'
return v
}
const display = computed(() => ({
planName: fmt(detail.value.planName),
planDirectionTitle: fmt(detail.value.planDirectionTitle || detail.value.planDirection),
projectForm: fmt(detail.value.projectForm),
planCategory: fmt(detail.value.planCategory),
remark: fmt(detail.value.remark)
}))
function goBack() {
router.push({ path: '/doctor/submissions', query: { _t: Date.now() } })
}
@@ -117,31 +62,8 @@ onMounted(load)
</script>
<style scoped>
.submission-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)); }
.detail-card { border-radius: 6px; }
.detail-card :deep(.el-card__body) { padding: 24px 28px; }
/* 只读表单样式 - 模拟 el-input 视觉, 但只显示文字 */
.readonly-form :deep(.el-form-item) { margin-bottom: 22px; }
.readonly-form :deep(.el-form-item__label) { color: #606266; font-weight: normal; }
.readonly-cell {
min-height: 40px;
line-height: 38px;
padding: 0 14px;
background: #fafafa;
border: 1px solid #e8e8e8;
border-radius: 4px;
color: #262626;
font-size: 14px;
word-break: break-all;
}
.readonly-form :deep(.el-link) { font-weight: 500; }
/* 整页面板 (详情页标准: max-width 1200px) */
.doctor-submission-detail { max-width: 1200px; padding: 16px; }
.breadcrumb { font-size: 13px; color: #8c8c8c; margin-bottom: 12px; }
.detail-actions { margin-top: 16px; }
:deep(.el-button) { border-radius: 4px; }
</style>