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:
@@ -1,56 +1,50 @@
|
||||
<template>
|
||||
<div class="content">
|
||||
<!-- #1 面包屑 (跟原型 §#1 一致: 项目列表可点击链接) -->
|
||||
<div class="breadcrumb">
|
||||
<a href="javascript:void(0)" @click="goBack">项目列表</a> > 新建会议
|
||||
</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; }
|
||||
|
||||
Reference in New Issue
Block a user