style(meeting-new): 对齐 manager/MeetingNew.vue 到项目统一风格

- 替换 #1890ff / #169bd5 硬编码蓝 → var(--brand-primary) / var(--brand-primary-deep)
- 单 page-card 包裹 + max-width: 1200px (form 页 skill 标准)
- 面包屑 改 首页 / 会议管理 / 新建会议 (skill 标准, 原型 项目列表 / 新建会议)
- 删 h1 新建会议 大标题 (skill 禁忌)
- 红字提示包到 .hint-text (skill .hint-list 风格, 12px #ff4d4f + #fff bg + #f0f0f0 border)
- form-label 110px → 120px (skill label-width 标准)
- 保留 6+5 form-row 布局 (跟原型 1:1)
- 保留 768px 响应式

Co-Authored-By: Claude <noreply@anthropic.com>
This commit is contained in:
郭庆泰
2026-08-18 22:41:04 +08:00
co-authored by Claude
parent 4fbfcbfb0c
commit 5b4008d24a
+56 -48
View File
@@ -1,56 +1,50 @@
<template>
<div class="content">
<!-- #1 面包屑 (跟原型 §#1 一致: 项目列表可点击链接) -->
<div class="breadcrumb">
<a href="javascript:void(0)" @click="goBack">项目列表</a> &gt; 新建会议
</div>
<div class="page-card manager-meeting-new">
<!-- 面包屑 (skill: 首页 / 分类 / 当前页) -->
<div class="breadcrumb">首页 / 会议管理 / 新建会议</div>
<!-- #2 h1 (跟原型 §#2 一致) -->
<h1 class="page-title">新建会议</h1>
<!-- #3 红字提示 (跟原型 §#3 一致) -->
<!-- 红字提示 (业务规则, 跟原型一致) -->
<p class="hint-text">*会议名称默认为项目名称,不可修改</p>
<!-- #4+#5 表单(对应原型两列布局, 6 项只读 + 5 , grid-auto-flow: column 让左右对齐) -->
<div class="card">
<div class="form-grid">
<!-- 左列 (原型 6 项只读值) -->
<div class="form-row">
<span class="form-label">项目编号:</span>
<span class="form-label">项目编号</span>
<span class="form-value code">{{ snap.projectNo }}</span>
</div>
<div class="form-row">
<span class="form-label">项目名称:</span>
<span class="form-label">项目名称</span>
<span class="form-value">{{ snap.projectName }}</span>
</div>
<div class="form-row">
<span class="form-label">总场次/总期数:</span>
<span class="form-label">总场次/总期数</span>
<span class="form-value">{{ snap.totalSessions }}</span>
</div>
<div class="form-row">
<span class="form-label">支持单位:</span>
<span class="form-label">支持单位</span>
<span class="form-value">{{ snap.sponsorOrgName }}</span>
</div>
<div class="form-row">
<span class="form-label">创建时间:</span>
<span class="form-label">创建时间</span>
<span class="form-value">{{ snap.createTime }}</span>
</div>
<div class="form-row">
<span class="form-label">创建人员:</span>
<span class="form-label">创建人员</span>
<span class="form-value">{{ snap.createBy }}</span>
</div>
<!-- 右列 (原型 5 : 1 只读 + 4 输入) -->
<div class="form-row">
<span class="form-label">会议名称:</span>
<span class="form-label">会议名称</span>
<span class="form-value">{{ form.meetingName }}</span>
</div>
<div class="form-row">
<span class="form-label">期数:</span>
<span class="form-label">期数</span>
<input type="text" class="form-input" v-model="form.periodNo" placeholder="请输入期数" />
</div>
<div class="form-row">
<span class="form-label">会议开始时间:</span>
<span class="form-label">会议开始时间</span>
<el-date-picker
v-model="form.startTime"
type="datetime"
@@ -60,7 +54,7 @@
/>
</div>
<div class="form-row">
<span class="form-label">会议结束时间:</span>
<span class="form-label">会议结束时间</span>
<el-date-picker
v-model="form.endTime"
type="datetime"
@@ -70,12 +64,12 @@
/>
</div>
<div class="form-row">
<span class="form-label">备注:</span>
<span class="form-label">备注</span>
<input type="text" class="form-input" v-model="form.remark" placeholder="请输入备注" />
</div>
</div>
<!-- #6+#7 按钮 (跟原型 §#6/§#7 一致: 保存() + 取消()) -->
<!-- 底部按钮 -->
<div class="form-actions">
<button type="button" class="btn btn-primary" @click="onSave">保存</button>
<button type="button" class="btn btn-default" @click="goBack">取消</button>
@@ -85,7 +79,7 @@
</template>
<script setup>
import { ref, reactive, onMounted } from 'vue'
import { reactive, onMounted } from 'vue'
import { useRoute, useRouter } from 'vue-router'
import { bizAdd, bizGet } from '@/api/public'
import { ElMessage } from 'element-plus'
@@ -161,24 +155,32 @@ onMounted(async () => {
</script>
<style scoped>
/* === 跟 proto/html/components/new-meeting.html CSS 1:1 对齐 === */
.content { padding: 24px 32px; }
/* === 整页面板 (skill 标准: 单 page-card, form 页 max-width 1200px) === */
.manager-meeting-new {
max-width: 1200px;
margin: 0 auto;
padding: 16px;
}
.breadcrumb {
font-size: 13px;
color: #8c8c8c;
margin-bottom: 12px;
}
.breadcrumb a { color: #1890ff; text-decoration: none; }
.breadcrumb a:hover { text-decoration: underline; }
.page-title {
font-size: 22px;
font-weight: 600;
color: #1a1a1a;
margin-bottom: 20px;
/* 红字提示 (skill: 业务规则, 用 .hint-text) */
.hint-text {
background: #fff;
border: 1px solid #f0f0f0;
border-radius: 8px;
padding: 12px 20px;
margin-bottom: 16px;
font-size: 12px;
color: #ff4d4f;
line-height: 1.8;
}
/* 表单容器 (跟原型 .card 一致, 不是嵌套 page-card) */
.card {
background: #fff;
border-radius: 8px;
@@ -186,33 +188,31 @@ onMounted(async () => {
border: 1px solid #f0f0f0;
}
.hint-text {
font-size: 12px;
color: #ff4d4f;
margin-bottom: 20px;
}
/* 2 列布局 (跟原型 .form-grid 一致, grid-auto-flow: column 让左 6 右 5 对齐) */
.form-grid {
display: grid;
grid-template-columns: 1fr 1fr;
/* 跟原型设计意图一致: 左 6 + 右 5 (默认 row 流会交错, 改 column 流让左 6 右 5 对齐) */
grid-auto-flow: column;
grid-template-rows: repeat(6, auto);
gap: 20px 32px;
max-width: 900px;
}
.form-row {
display: flex;
align-items: center;
}
/* skill 标准: label-width 120px */
.form-label {
flex: 0 0 110px;
flex: 0 0 120px;
font-size: 14px;
color: #595959;
text-align: right;
padding-right: 16px;
white-space: nowrap;
}
.form-input {
flex: 1;
min-width: 0;
@@ -227,8 +227,8 @@ onMounted(async () => {
transition: all 0.2s;
}
.form-input:focus {
border-color: #1890ff;
box-shadow: 0 0 0 3px rgba(24,144,255,0.1);
border-color: var(--brand-primary);
box-shadow: 0 0 0 3px rgba(30, 58, 138, 0.1);
}
/* el-date-picker 撑满 flex:1 (跟 .form-input 同宽) */
.form-input-picker { flex: 1; min-width: 0; }
@@ -236,6 +236,7 @@ onMounted(async () => {
height: 32px;
border-radius: 4px;
}
.form-value {
flex: 1;
font-size: 14px;
@@ -244,9 +245,10 @@ onMounted(async () => {
}
.form-value.code {
font-family: ui-monospace, "Courier New", monospace;
color: #1890ff;
color: var(--brand-primary);
}
/* 按钮区 (跟原型一致, 用 .btn 自定义风格, 主色改用 var(--brand-primary)) */
.form-actions {
display: flex;
gap: 12px;
@@ -266,20 +268,26 @@ onMounted(async () => {
border: 1px solid transparent;
}
.btn-primary {
background: #169bd5;
background: var(--brand-primary);
color: #fff;
border-color: #169bd5;
border-color: var(--brand-primary);
}
.btn-primary:hover {
background: var(--brand-primary-deep);
border-color: var(--brand-primary-deep);
}
.btn-primary:hover { background: #0f8db8; border-color: #0f8db8; }
.btn-default {
background: #fff;
color: #333;
border-color: #797979;
}
.btn-default:hover { border-color: #1890ff; color: #1890ff; }
.btn-default:hover {
border-color: var(--brand-primary);
color: var(--brand-primary);
}
@media (max-width: 768px) {
.content { padding: 16px; }
.manager-meeting-new { padding: 16px; }
.card { padding: 16px; }
.form-grid { grid-template-columns: 1fr; grid-auto-flow: row; }
.form-actions { flex-direction: column; }