From 0a99f44ec715313a8297ed08185d89945639d551 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E5=86=AF=E6=99=AE?= <18691763612@163.com> Date: Wed, 13 May 2026 11:33:15 +0800 Subject: [PATCH] =?UTF-8?q?feat:=20=E8=90=A5=E5=85=BB=E7=AE=A1=E7=90=86?= =?UTF-8?q?=E6=A8=A1=E5=9D=97=E9=A1=B5=E9=9D=A2=E9=87=8D=E6=9E=84=E5=8F=8A?= =?UTF-8?q?=E6=96=B0=E5=A2=9E=E6=A3=80=E9=AA=8C=E9=A1=B5=E9=9D=A2=EF=BC=8C?= =?UTF-8?q?=E5=88=9B=E5=BB=BA=E5=85=B6=E4=BB=96=E7=BB=88=E7=AB=AF=E7=9B=AE?= =?UTF-8?q?=E5=BD=95=E7=BB=93=E6=9E=84?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit - 新增营养质检-新增检验二级页面(prod-qc-nutrition-add.html) - 重构餐品总库、食物成分、餐品新增等页面 - 删除已废弃的 din-dish-composition.html - 新增数据库设计文档 - 创建 other-module 目录结构（小程序/应急大屏/医疗PAD） - 更新项目背景文档新增其他终端模块定义 - 同步更新 index.html SITE_MAP Co-Authored-By: Claude Opus 4.6 --- index.html | 26 +- .../emergency-screen/jiuchang-center/.gitkeep | 0 .../emergency-screen/standard-center/.gitkeep | 0 .../emergency-screen/xian-center/.gitkeep | 0 other-module/medical-pad/.gitkeep | 0 other-module/mini-program/.gitkeep | 0 web-admin/nutrition/din-dish-add.html | 298 +- web-admin/nutrition/din-dish-all.html | 852 ++-- web-admin/nutrition/din-dish-composition.html | 254 - .../nutrition/din-ingredient-detail.html | 215 +- web-admin/nutrition/din-ingredient.html | 612 +-- web-admin/nutrition/doc/数据库设计文档.md | 4292 +++++++++++++++++ .../nutrition/prod-qc-nutrition-add.html | 333 ++ web-admin/nutrition/prod-qc-nutrition.html | 565 ++- 项目背景.md | 68 +- 15 files changed, 6107 insertions(+), 1408 deletions(-) create mode 100644 other-module/emergency-screen/jiuchang-center/.gitkeep create mode 100644 other-module/emergency-screen/standard-center/.gitkeep create mode 100644 other-module/emergency-screen/xian-center/.gitkeep create mode 100644 other-module/medical-pad/.gitkeep create mode 100644 other-module/mini-program/.gitkeep delete mode 100644 web-admin/nutrition/din-dish-composition.html create mode 100644 web-admin/nutrition/doc/数据库设计文档.md create mode 100644 web-admin/nutrition/prod-qc-nutrition-add.html diff --git a/index.html b/index.html index 45e7f61..5cb249f 100644 --- a/index.html +++ b/index.html @@ -57,7 +57,7 @@ body { background: var(--background); font-family: -apple-system, BlinkMacSystem /* ===== 模块网格 ===== */ .module-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 20px; align-items: stretch; } -.module-grid--center { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 20px; max-width: 960px; margin: 0 auto; align-items: stretch; } +.module-grid--center { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 20px; margin: 0 auto; align-items: stretch; } /* ===== 角色分组 ===== */ .role-group { margin-bottom: 28px; text-align: center; } @@ -71,6 +71,9 @@ body { background: var(--background); font-family: -apple-system, BlinkMacSystem .role-icon--onsite { background: linear-gradient(135deg, #faad14, #ffc53d); } .role-icon--admin { background: linear-gradient(135deg, #eb2f96, #ff85c0); } .role-icon--shared { background: linear-gradient(135deg, #13c2c2, #5cdbd3); } +.role-icon--miniprogram { background: linear-gradient(135deg, #52c41a, #95de64); } +.role-icon--screen { background: linear-gradient(135deg, #722ED1, #b37feb); } +.role-icon--pad { background: linear-gradient(135deg, #1677FF, #69b1ff); } /* ===== 呼吸灯动画 ===== */ @keyframes breathe { @@ -165,12 +168,13 @@ const ICONS = { web: '', app: '', emergency: '', + other: '', page: '', dialog: '', empty: '', prd: '', prdSmall: '', - role: { expert:'👨‍⚕', assistant:'🤖', operator:'📋', professional:'👷', onsite:'🏥', admin:'⚙', shared:'🔗' } + role: { expert:'👨‍⚕', assistant:'🤖', operator:'📋', professional:'👷', onsite:'🏥', admin:'⚙', shared:'🔗', miniprogram:'📱', screen:'🖥', pad:'📋' } }; const SITE_MAP = [ @@ -277,6 +281,7 @@ const SITE_MAP = [ { file:'prod-proc-stats.html', label:'加工统计' }, { file:'prod-qc-daily.html', label:'日常质检' }, { file:'prod-qc-nutrition.html', label:'营养质检' }, + { file:'prod-qc-nutrition-add.html', label:'营养质检-新增' }, { file:'ano-dirty.html', label:'系统脏数据' }, { file:'ano-result.html', label:'结果异常' } ]}, @@ -638,7 +643,14 @@ const SITE_MAP = [ {file:'index.html',label:'消息列表'},{file:'contacts.html',label:'通讯录'},{file:'im-chat.html',label:'聊天'} ]} ] - } + }, + { id:'other-terminals', label:'其他终端', icon:'other', color:'#b37feb', modules:[ + { name:'营养管理小程序', dir:'other-terminals/mini-program', pages:[] }, + { name:'西安应急中心大屏', dir:'other-terminals/emergency-screen/xian-center', pages:[] }, + { name:'标准版中心大屏', dir:'other-terminals/emergency-screen/standard-center', pages:[] }, + { name:'九厂应急中心大屏', dir:'other-terminals/emergency-screen/jiuchang-center', pages:[] }, + { name:'医疗点PAD端', dir:'other-terminals/medical-pad', pages:[] } + ]} ]; /* ===== 渲染逻辑 ===== */ @@ -741,9 +753,11 @@ SITE_MAP.forEach((t, i) => { html += r.modules.map(m => cardHTML(m, 'u' + uidCounter++)).join(''); html += ''; }); - html += `
${ICONS.role.shared}全角色共享
`; - html += t.shared.map(m => cardHTML(m, 'u' + uidCounter++)).join(''); - html += '
'; + if (t.shared && t.shared.length > 0) { + html += `
${ICONS.role.shared}全角色共享
`; + html += t.shared.map(m => cardHTML(m, 'u' + uidCounter++)).join(''); + html += '
'; + } } div.innerHTML = html; tabContents.appendChild(div); diff --git a/other-module/emergency-screen/jiuchang-center/.gitkeep b/other-module/emergency-screen/jiuchang-center/.gitkeep new file mode 100644 index 0000000..e69de29 diff --git a/other-module/emergency-screen/standard-center/.gitkeep b/other-module/emergency-screen/standard-center/.gitkeep new file mode 100644 index 0000000..e69de29 diff --git a/other-module/emergency-screen/xian-center/.gitkeep b/other-module/emergency-screen/xian-center/.gitkeep new file mode 100644 index 0000000..e69de29 diff --git a/other-module/medical-pad/.gitkeep b/other-module/medical-pad/.gitkeep new file mode 100644 index 0000000..e69de29 diff --git a/other-module/mini-program/.gitkeep b/other-module/mini-program/.gitkeep new file mode 100644 index 0000000..e69de29 diff --git a/web-admin/nutrition/din-dish-add.html b/web-admin/nutrition/din-dish-add.html index 12abdf4..92d2819 100644 --- a/web-admin/nutrition/din-dish-add.html +++ b/web-admin/nutrition/din-dish-add.html @@ -44,9 +44,17 @@ body{font-family:-apple-system,BlinkMacSystemFont,'PingFang SC','Microsoft YaHei .breadcrumb{display:flex;align-items:center;gap:6px;font-size:var(--font-sm);color:var(--text-secondary);margin-bottom:16px;} .breadcrumb a{color:var(--primary);text-decoration:none;}.breadcrumb a:hover{text-decoration:underline;} .breadcrumb__sep{color:var(--text-placeholder);} -.form-card{background:#fff;border-radius:var(--radius-md);box-shadow:var(--shadow-sm);padding:24px;margin-bottom:16px;} -.form-card__title{font-size:var(--font-base);font-weight:600;margin-bottom:20px;padding-bottom:12px;border-bottom:1px solid var(--border);} +/* Tab表单样式 */ +.form-card{background:#fff;border-radius:var(--radius-md);box-shadow:var(--shadow-sm);overflow:hidden;} +.form-tabs{display:flex;gap:0;border-bottom:1px solid var(--border);padding:0 24px;flex-wrap:wrap;} +.form-tab{padding:14px 16px;font-size:var(--font-sm);cursor:pointer;color:var(--text-secondary);border-bottom:2px solid transparent;margin-bottom:-1px;transition:all .2s;display:flex;align-items:center;gap:5px;} +.form-tab:hover{color:var(--primary);} +.form-tab.active{color:var(--primary);border-bottom-color:var(--primary);font-weight:500;} +.form-tab.done{color:var(--success);} +.form-panel{display:none;padding:24px;} +.form-panel.active{display:block;} .form-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:16px 24px;} +.form-grid-3{display:grid;grid-template-columns:repeat(3,1fr);gap:16px 24px;} .form-group{display:flex;flex-direction:column;gap:6px;} .form-group.full{grid-column:1/-1;} .form-label{font-size:var(--font-sm);color:var(--text-secondary);} @@ -58,7 +66,37 @@ body{font-family:-apple-system,BlinkMacSystemFont,'PingFang SC','Microsoft YaHei .btn{height:36px;padding:0 16px;border-radius:var(--radius-sm);font-size:var(--font-sm);cursor:pointer;border:none;transition:all .2s;display:inline-flex;align-items:center;gap:6px;text-decoration:none;} .btn-primary{background:var(--primary);color:#fff;}.btn-primary:hover{background:#40a9ff;} .btn-default{background:#fff;color:var(--text-primary);border:1px solid var(--border);}.btn-default:hover{color:var(--primary);border-color:var(--primary);} -.form-footer{display:flex;align-items:center;gap:12px;margin-top:24px;padding-top:16px;border-top:1px solid var(--border);} +.btn-success{background:var(--success);color:#fff;}.btn-success:hover{background:#73d13d;} +.form-footer{display:flex;align-items:center;justify-content:space-between;padding:16px 24px;border-top:1px solid var(--border);} +.form-footer__left{display:flex;gap:8px;} +.form-footer__right{display:flex;gap:8px;} +/* 食材表格 */ +.ingredient-table{width:100%;border-collapse:collapse;font-size:var(--font-sm);margin-top:12px;} +.ingredient-table th{background:#FAFAFA;padding:10px 12px;text-align:left;color:var(--text-secondary);font-weight:500;border-bottom:1px solid var(--border);} +.ingredient-table td{padding:10px 12px;border-bottom:1px solid #F0F0F0;color:var(--text-primary);} +.ingredient-table tr:hover{background:#F8FBFF;} +.tag{display:inline-flex;align-items:center;padding:2px 8px;border-radius:10px;font-size:var(--font-xs);} +.tag-green{background:#F6FFED;color:var(--success);} +.tag-gray{background:#F5F5F5;color:#999;} +.link{color:var(--primary);cursor:pointer;font-size:var(--font-sm);text-decoration:none;}.link:hover{color:#40a9ff;} +/* 弹窗 */ +.dialog-mask{display:none;position:fixed;top:0;left:0;right:0;bottom:0;background:rgba(0,0,0,0.45);z-index:200;align-items:center;justify-content:center;} +.dialog-mask.open{display:flex;} +.dialog{background:#fff;border-radius:var(--radius-lg);width:560px;max-width:90vw;box-shadow:var(--shadow-md);} +.dialog__header{display:flex;align-items:center;justify-content:space-between;padding:20px 24px 16px;border-bottom:1px solid var(--border);} +.dialog__title{font-size:var(--font-lg);font-weight:600;color:var(--text-primary);} +.dialog__close{width:32px;height:32px;border:none;background:none;cursor:pointer;display:flex;align-items:center;justify-content:center;border-radius:var(--radius-sm);color:var(--text-placeholder);} +.dialog__close:hover{background:#F5F5F5;color:var(--text-primary);} +.dialog__body{padding:24px;} +.dialog__footer{display:flex;justify-content:flex-end;gap:8px;padding:16px 24px;border-top:1px solid var(--border);} +.form-row{display:grid;grid-template-columns:1fr 1fr;gap:16px;} +.form-row .form-group{margin-bottom:16px;} +.form-row .form-group label{display:block;font-size:var(--font-sm);color:var(--text-primary);margin-bottom:8px;font-weight:500;} +/* 上传区域 */ +.upload-area{border:2px dashed var(--border);border-radius:var(--radius-md);padding:40px;text-align:center;color:var(--text-placeholder);cursor:pointer;transition:all .2s;} +.upload-area:hover{border-color:var(--primary);color:var(--primary);} +.upload-area__icon{font-size:36px;margin-bottom:8px;} +.upload-area__text{font-size:var(--font-sm);} @@ -125,101 +163,195 @@ body{font-family:-apple-system,BlinkMacSystemFont,'PingFang SC','Microsoft YaHei
-
餐品总库 / 新增餐品
-
-
新增餐品
-
- -
- - -
-
- - -
- -
- - -
-
- - -
- -
- - -
-
- - -
- -
- - -
- -
- - -
-
- - -
- -
- - -
-
- - -
- -
- - -
-
- - -
- -
- - -
-
- - + +
+
🍽️ 基本档案
+
🧩 餐品构成
+
🍳 烹饪工艺
+
📊 营养指标
+
👅 味道档案
+
🎨 色泽档案
+
🫦 口感档案
+
🖼️ 图片库
+
🎬 视频库
+
+ + +
+
+
+
+
+
+
+
+
+
+
+
+ + +
+
+ 食材清单 + +
+ + + + + +
食材名称食材分类用量(g/份)加工状态是否主料过敏原备注操作
暂无食材，请点击"新增食材"添加
+
+ + +
+
+
+
+
+
+
+
+
+
+
+
+
+ + +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ + +
+
+
+
+
+
+
+
+
+
+
+ + +
+
+
+
+
+
+
+
+
+
+
+ + +
+
+
+
+
+
+
+
+
+
+
+ + +
+
+
📤
+
点击或拖拽上传餐品图片
支持 JPG/PNG，单张不超过 5MB
+
+
+ + +
+
+
🎬
+
点击或拖拽上传餐品视频
支持 MP4/MOV，单个不超过 500MB
+
+
+ +
- 取消 - +
+ 取消 +
+
+ + + +
+ +
+
+
+
新增食材
+ +
+
+
+
+
+
+
+
+ + +
+
+
+ - \ No newline at end of file + diff --git a/web-admin/nutrition/din-dish-all.html b/web-admin/nutrition/din-dish-all.html index 9d1e154..09e497f 100644 --- a/web-admin/nutrition/din-dish-all.html +++ b/web-admin/nutrition/din-dish-all.html @@ -31,7 +31,6 @@ body{font-family:-apple-system,BlinkMacSystemFont,'PingFang SC','Microsoft YaHei .sidebar-item.active{color:#fff;background:var(--primary);} .mi{display:inline-block;width:20px;text-align:center;filter:grayscale(1);opacity:0.65;margin-right:2px;} .sidebar-item.active .mi{opacity:0.9;} -.action-bar{display:flex;align-items:center;gap:8px;margin-bottom:16px;} .sidebar-subgroup__header{display:flex;align-items:center;gap:6px;padding:10px 24px;color:rgba(255,255,255,0.65);font-size:var(--font-sm);cursor:pointer;transition:all .15s;user-select:none;} .sidebar-subgroup__header:hover{color:rgba(255,255,255,0.85);background:rgba(255,255,255,0.04);} .sidebar-subgroup__header .arrow{width:10px;height:10px;transition:transform .2s;flex-shrink:0;} @@ -52,32 +51,9 @@ body{font-family:-apple-system,BlinkMacSystemFont,'PingFang SC','Microsoft YaHei .stat-card__info{display:flex;flex-direction:column;gap:4px;} .stat-card__value{font-size:var(--font-xl);font-weight:700;color:var(--text-primary);} .stat-card__label{font-size:var(--font-sm);color:var(--text-secondary);} -.page-tabs{display:flex;gap:0;background:#fff;border-radius:var(--radius-md) var(--radius-md) 0 0;padding:0 24px;box-shadow:var(--shadow-sm);border-bottom:2px solid var(--border);} -.page-tab{padding:14px 20px;font-size:var(--font-sm);cursor:pointer;color:var(--text-secondary);border-bottom:2px solid transparent;margin-bottom:-2px;transition:all .2s;display:flex;align-items:center;gap:6px;} -.page-tab:hover{color:var(--primary);} -.page-tab.active{color:var(--primary);border-bottom-color:var(--primary);font-weight:500;} -.tab-panel{display:none;} -.tab-panel.active{display:block;} -.filter-bar{background:#fff;border-radius:0 0 var(--radius-md) var(--radius-md);padding:20px 24px;margin-bottom:16px;box-shadow:var(--shadow-sm);display:flex;align-items:center;gap:16px;flex-wrap:wrap;} -.filter-item{display:flex;align-items:center;gap:8px;} -.filter-item label{font-size:var(--font-sm);color:var(--text-secondary);white-space:nowrap;} -.filter-input{height:36px;border:1px solid var(--border);border-radius:var(--radius-sm);padding:0 12px;font-size:var(--font-sm);color:var(--text-primary);outline:none;background:#fff;min-width:160px;} -.filter-input:focus{border-color:var(--primary);} -.filter-select{height:36px;border:1px solid var(--border);border-radius:var(--radius-sm);padding:0 28px 0 12px;font-size:var(--font-sm);color:var(--text-primary);outline:none;background:#fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M0 0l5 6 5-6z' fill='%23999'/%3E%3C/svg%3E") no-repeat right 10px center;appearance:none;cursor:pointer;min-width:120px;} .btn{height:36px;padding:0 16px;border-radius:var(--radius-sm);font-size:var(--font-sm);cursor:pointer;border:none;transition:all .2s;display:inline-flex;align-items:center;gap:6px;text-decoration:none;} .btn-primary{background:var(--primary);color:#fff;}.btn-primary:hover{background:#40a9ff;} .btn-default{background:#fff;color:var(--text-primary);border:1px solid var(--border);}.btn-default:hover{color:var(--primary);border-color:var(--primary);} -.table-card{background:#fff;border-radius:var(--radius-md);box-shadow:var(--shadow-sm);overflow:hidden;} -.table-card__header{display:flex;align-items:center;justify-content:space-between;padding:16px 24px;border-bottom:1px solid var(--border);} -.table-card__title{font-size:var(--font-base);font-weight:600;} -.table-card__actions{display:flex;gap:8px;align-items:center;} -.table-card__content{overflow-x:auto;overflow-y:hidden;-webkit-overflow-scrolling:touch;} -.table-card__content table{min-width:100%;white-space:nowrap;} -table{width:100%;border-collapse:collapse;} -thead th{background:#FAFAFA;padding:12px 16px;text-align:left;font-size:var(--font-sm);color:var(--text-secondary);font-weight:500;border-bottom:1px solid var(--border);white-space:nowrap;} -tbody td{padding:14px 16px;font-size:var(--font-sm);color:var(--text-primary);border-bottom:1px solid var(--border);white-space:nowrap;} -tbody tr:last-child td{border-bottom:none;} -tbody tr:hover{background:#F8FBFF;} .tag{display:inline-flex;align-items:center;padding:2px 8px;border-radius:10px;font-size:var(--font-xs);margin-right:4px;} .tag-blue{background:var(--primary-light);color:var(--primary);} .tag-green{background:#F6FFED;color:var(--success);} @@ -85,11 +61,84 @@ tbody tr:hover{background:#F8FBFF;} .tag-red{background:#FFF1F0;color:var(--danger);} .tag-gray{background:#F5F5F5;color:#999;} .link{color:var(--primary);cursor:pointer;font-size:var(--font-sm);text-decoration:none;}.link:hover{color:#40a9ff;} -.pagination{display:flex;align-items:center;justify-content:flex-end;padding:16px 24px;gap:8px;border-top:1px solid var(--border);} -.pagination span{font-size:var(--font-sm);color:var(--text-secondary);} -.page-btn{width:32px;height:32px;border:1px solid var(--border);border-radius:var(--radius-sm);background:#fff;cursor:pointer;font-size:var(--font-sm);display:inline-flex;align-items:center;justify-content:center;transition:all .2s;} + +/* 左右分栏布局 */ +.master-detail{display:flex;gap:16px;height:calc(100vh - 56px - 24px - 24px - 100px);} +.panel-left{width:380px;flex-shrink:0;background:#fff;border-radius:var(--radius-md);box-shadow:var(--shadow-sm);display:flex;flex-direction:column;overflow:hidden;} +.panel-right{flex:1;background:#fff;border-radius:var(--radius-md);box-shadow:var(--shadow-sm);display:flex;flex-direction:column;overflow:hidden;} +.panel-left__header{padding:16px 20px 12px;border-bottom:1px solid var(--border);} +.panel-left__title{font-size:var(--font-base);font-weight:600;margin-bottom:12px;display:flex;align-items:center;justify-content:space-between;} +.panel-left__search{display:flex;gap:8px;margin-bottom:10px;} +.panel-left__search input{flex:1;height:32px;border:1px solid var(--border);border-radius:var(--radius-sm);padding:0 10px;font-size:var(--font-sm);outline:none;} +.panel-left__search input:focus{border-color:var(--primary);} +.panel-left__filter{display:flex;gap:8px;} +.panel-left__filter select{height:32px;border:1px solid var(--border);border-radius:var(--radius-sm);padding:0 24px 0 10px;font-size:var(--font-xs);outline:none;background:#fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M0 0l5 6 5-6z' fill='%23999'/%3E%3C/svg%3E") no-repeat right 8px center;appearance:none;cursor:pointer;flex:1;} +.panel-left__actions{display:flex;gap:8px;padding:10px 20px;border-bottom:1px solid var(--border);flex-wrap:wrap;} +.panel-left__actions .btn{height:30px;font-size:var(--font-xs);padding:0 10px;} +.food-list{flex:1;overflow-y:auto;padding:4px 0;} +.food-item{display:flex;align-items:center;gap:12px;padding:12px 20px;cursor:pointer;transition:background .15s;border-left:3px solid transparent;} +.food-item:hover{background:#F8FBFF;} +.food-item.active{background:var(--primary-light);border-left-color:var(--primary);} +.food-item__icon{width:36px;height:36px;border-radius:var(--radius-sm);background:#F5F7FA;display:flex;align-items:center;justify-content:center;font-size:18px;flex-shrink:0;} +.food-item__info{flex:1;min-width:0;} +.food-item__name{font-size:var(--font-sm);font-weight:500;color:var(--text-primary);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;} +.food-item__meta{font-size:var(--font-xs);color:var(--text-placeholder);margin-top:2px;display:flex;gap:8px;} +.panel-left__footer{padding:10px 20px;border-top:1px solid var(--border);display:flex;align-items:center;justify-content:space-between;} +.panel-left__footer span{font-size:var(--font-xs);color:var(--text-placeholder);} +.page-btn{width:26px;height:26px;border:1px solid var(--border);border-radius:var(--radius-sm);background:#fff;cursor:pointer;font-size:var(--font-xs);display:inline-flex;align-items:center;justify-content:center;transition:all .2s;} .page-btn:hover,.page-btn.active{background:var(--primary);color:#fff;border-color:var(--primary);} -/* 子表格展开样式 */ + +/* 右侧详情面板 */ +.panel-right__header{padding:16px 24px 0;border-bottom:1px solid var(--border);} +.panel-right__food-title{display:flex;align-items:center;gap:12px;margin-bottom:14px;} +.panel-right__food-title h2{font-size:var(--font-lg);font-weight:600;} +.panel-right__food-title .code{font-size:var(--font-sm);color:var(--text-placeholder);} +.detail-tabs{display:flex;gap:0;flex-wrap:wrap;} +.detail-tab{padding:10px 16px;font-size:var(--font-sm);cursor:pointer;color:var(--text-secondary);border-bottom:2px solid transparent;margin-bottom:-1px;transition:all .2s;display:flex;align-items:center;gap:5px;} +.detail-tab:hover{color:var(--primary);} +.detail-tab.active{color:var(--primary);border-bottom-color:var(--primary);font-weight:500;} +.panel-right__body{flex:1;overflow-y:auto;padding:20px 24px;} +.detail-panel{display:none;} +.detail-panel.active{display:block;} + +/* 详情网格 */ +.info-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin-bottom:20px;} +.info-cell{background:#FAFBFC;border-radius:var(--radius-sm);padding:14px 16px;border:1px solid #F0F0F0;} +.info-cell__label{font-size:var(--font-xs);color:var(--text-placeholder);margin-bottom:4px;} +.info-cell__value{font-size:var(--font-sm);font-weight:500;color:var(--text-primary);} +.info-section{margin-bottom:20px;} +.info-section__title{font-size:var(--font-sm);font-weight:600;color:var(--text-primary);margin-bottom:10px;padding-bottom:6px;border-bottom:1px solid #F0F0F0;display:flex;align-items:center;justify-content:space-between;} +.info-table{width:100%;border-collapse:collapse;font-size:var(--font-sm);} +.info-table th{background:#FAFAFA;padding:10px 12px;text-align:left;color:var(--text-secondary);font-weight:500;border-bottom:1px solid var(--border);} +.info-table td{padding:10px 12px;border-bottom:1px solid var(--border);color:var(--text-primary);} +.info-table tr:last-child td{border-bottom:none;} +.info-table tr:hover{background:#F8FBFF;} + +/* 图片/视频网格 */ +.media-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;} +.media-card{background:#FAFBFC;border-radius:var(--radius-md);border:1px solid #F0F0F0;overflow:hidden;} +.media-card__thumb{height:120px;background:#E8E8E8;display:flex;align-items:center;justify-content:center;font-size:36px;color:#999;} +.media-card__info{padding:10px 12px;} +.media-card__title{font-size:var(--font-sm);font-weight:500;margin-bottom:4px;} +.media-card__meta{font-size:var(--font-xs);color:var(--text-placeholder);} + +/* 弹窗 */ +.dialog-mask{display:none;position:fixed;top:0;left:0;right:0;bottom:0;background:rgba(0,0,0,0.45);z-index:200;align-items:center;justify-content:center;} +.dialog-mask.open{display:flex;} +.dialog{background:#fff;border-radius:var(--radius-lg);width:560px;max-width:90vw;box-shadow:var(--shadow-md);} +.dialog__header{display:flex;align-items:center;justify-content:space-between;padding:20px 24px 16px;border-bottom:1px solid var(--border);} +.dialog__title{font-size:var(--font-lg);font-weight:600;color:var(--text-primary);} +.dialog__close{width:32px;height:32px;border:none;background:none;cursor:pointer;display:flex;align-items:center;justify-content:center;border-radius:var(--radius-sm);color:var(--text-placeholder);} +.dialog__close:hover{background:#F5F5F5;color:var(--text-primary);} +.dialog__body{padding:24px;} +.dialog__footer{display:flex;justify-content:flex-end;gap:8px;padding:16px 24px;border-top:1px solid var(--border);} +.form-group{margin-bottom:16px;} +.form-group label{display:block;font-size:var(--font-sm);color:var(--text-primary);margin-bottom:8px;font-weight:500;} +.form-group label .required{color:var(--danger);margin-left:2px;} +.form-input,.form-select{width:100%;height:36px;border:1px solid var(--border);border-radius:var(--radius-sm);padding:0 12px;font-size:var(--font-sm);outline:none;background:#fff;} +.form-input:focus,.form-select:focus{border-color:var(--primary);} +.form-select{appearance:none;background:#fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M0 0l5 6 5-6z' fill='%23999'/%3E%3C/svg%3E") no-repeat right 10px center;padding-right:28px;} +.form-row{display:grid;grid-template-columns:1fr 1fr;gap:16px;} @@ -115,7 +164,7 @@ tbody tr:hover{background:#F8FBFF;} - +