From 8a028d9896f22a38611d877efa497c06d894fe41 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E7=8E=8B=E6=96=87=E6=98=8A?=
 <15984991+wwh2328692301@user.noreply.gitee.com>
Date: Thu, 9 Jul 2026 14:16:18 +0800
Subject: [PATCH 1/2] =?UTF-8?q?feat(wms/flow):=20=E6=96=B0=E5=A2=9E?=
 =?UTF-8?q?=E5=A4=9A=E4=B8=AA=E4=B8=9A=E5=8A=A1=E6=B5=81=E7=A8=8B=E5=B9=B6?=
 =?UTF-8?q?=E4=BC=98=E5=8C=96=E6=8E=92=E4=BA=A7=E6=B5=81=E7=A8=8B=E9=85=8D?=
 =?UTF-8?q?=E7=BD=AE?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

1.  新增批量调拨、发货、检验、质量评审、收货5个业务流程的菜单与流程图配置
2.  优化排产流程的节点名称和逻辑描述，调整节点ID与对应页面路径
3.  移除冗余的样式定义，统一流程图的样式规范
---
 klp-ui/src/views/wms/post/flow.vue | 243 +++++++++++++++++++++++++----
 1 file changed, 216 insertions(+), 27 deletions(-)

diff --git a/klp-ui/src/views/wms/post/flow.vue b/klp-ui/src/views/wms/post/flow.vue
index f9d587e8b..5bcb72160 100644
--- a/klp-ui/src/views/wms/post/flow.vue
+++ b/klp-ui/src/views/wms/post/flow.vue
@@ -67,6 +67,11 @@ const TAB_LIST = [
   { key: 'inventoryCheck', label: '盘库流程', icon: 'el-icon-s-check' },
   { key: 'productionSchedule', label: '排产流程', icon: 'el-icon-s-order' },
   { key: 'equipmentRepair', label: '设备维修流程', icon: 'el-icon-s-tools' },
+  { key: 'batchTransfer', label: '批量调拨流程', icon: 'el-icon-sort' },
+  { key: 'delivery', label: '发货流程', icon: 'el-icon-s-promotion' },
+  { key: 'inspection', label: '检验流程', icon: 'el-icon-document-checked' },
+  { key: 'qualityReview', label: '质量评审流程', icon: 'el-icon-s-check' },
+  { key: 'receiving', label: '收货流程', icon: 'el-icon-download' },
 ]
 
 const NODE_EVENT_CONFIG = {
@@ -116,17 +121,16 @@ const NODE_EVENT_CONFIG = {
     { id: 'N', label: '执行处理差异', handler: 'handleOpen', params: { componentPath: 'wms/post/InvCount/execute' } },
   ],
   productionSchedule: [
-    { id: 'A', label: '创建需求单', handler: 'handleOpen', params: { componentPath: 'wms/post/aps/requirement' } },
-    { id: 'B', label: '选择合同', handler: 'handleOpen', params: { componentPath: 'wms/post/aps/order' } },
+    { id: 'A', label: '创建产需单', handler: 'handleOpen', params: { componentPath: 'wms/post/aps/requirement' } },
+    { id: 'B', label: '绑定销售订单', handler: 'handleOpen', params: { componentPath: 'wms/post/aps/order' } },
     { id: 'C', label: '自动获取需求明细', handler: 'handleOpen', params: { componentPath: 'wms/post/aps/requirement' } },
     { id: 'D', label: '调整需求明细', handler: 'handleOpen', params: { componentPath: 'wms/post/aps/requirement' } },
-    { id: 'E', label: '提交审批', handler: 'handleOpen', params: { componentPath: 'wms/post/aps/schedule' } },
-    { id: 'H', label: '转化为排产单', handler: 'handleOpen', params: { componentPath: 'wms/post/aps/schedule' } },
-    { id: 'I', label: '排产单', handler: 'handleOpen', params: { componentPath: 'wms/post/aps/schedule' } },
-    { id: 'J', label: '再次提交审批', handler: 'handleOpen', params: { componentPath: 'wms/post/aps/schedule' } },
-    { id: 'M', label: '提交给车间', handler: 'handleOpen', params: { componentPath: 'wms/post/aps/schedule' } },
-    { id: 'N', label: '车间绑定钢卷', handler: 'handleOpen', params: { componentPath: 'wms/post/aps/compare' } },
-    { id: 'O', label: '执行生产', handler: 'handleOpen', params: { componentPath: 'wms/post/aps/schedule' } },
+    { id: 'E', label: '下发产需单', handler: 'handleOpen', params: { componentPath: 'wms/post/aps/requirement' } },
+    { id: 'H', label: '选择工艺路线', handler: 'handleOpen', params: { componentPath: 'wms/post/aps/schedule' } },
+    { id: 'I', label: '自动生成排产项', handler: 'handleOpen', params: { componentPath: 'wms/post/aps/schedule' } },
+    { id: 'J', label: '已排产明细管理', handler: 'handleOpen', params: { componentPath: 'wms/post/aps/schedule' } },
+    { id: 'K', label: '按工序绑定钢卷', handler: 'handleOpen', params: { componentPath: 'wms/post/aps/compare' } },
+    { id: 'L', label: '执行生产', handler: 'handleOpen', params: { componentPath: 'wms/post/aps/schedule' } },
   ],
   equipmentRepair: [
     { id: 'A', label: '创建维修计划', handler: 'handleOpen', params: { componentPath: 'wms/post/eqp/index' } },
@@ -134,6 +138,56 @@ const NODE_EVENT_CONFIG = {
     { id: 'B', label: '提交审批', handler: 'handleOpen', params: { componentPath: 'wms/post/eqp/approval' } },
     { id: 'E', label: '逐设备维修记录', handler: 'handleOpen', params: { componentPath: 'wms/post/eqp/execute' } },
   ],
+
+  batchTransfer: [
+    { id: 'A', label: '创建调拨单', handler: 'handleOpen', params: { componentPath: 'wms/move/batch' } },
+    { id: 'B', label: '添加调拨明细', handler: 'handleOpen', params: { componentPath: 'wms/move/batch' } },
+    { id: 'C', label: '提交审批', handler: 'handleOpen', params: { componentPath: 'wms/move/batch' } },
+    { id: 'E', label: '执行调拨', handler: 'handleOpen', params: { componentPath: 'wms/move/record' } },
+    { id: 'G', label: '调拨后处理', handler: 'handleOpen', params: { componentPath: 'wms/move/record' } },
+  ],
+
+  delivery: [
+    { id: 'A', label: '创建发货计划', handler: 'handleOpen', params: { componentPath: 'wms/delivery/plan/index' } },
+    { id: 'A2', label: '编排订单明细', handler: 'handleOpen', params: { componentPath: 'wms/delivery/plan/index' } },
+    { id: 'B', label: '查看可用库存', handler: 'handleOpen', params: { componentPath: 'wms/delivery/canuse/index' } },
+    { id: 'D', label: '配卷/发货绑定', handler: 'handleOpen', params: { componentPath: 'wms/delivery/plan/index' } },
+    { id: 'F', label: '分级调整', handler: 'handleOpen', params: { componentPath: 'wms/delivery/grading/index' } },
+    { id: 'G', label: '创建发货单/运单', handler: 'handleOpen', params: { componentPath: 'wms/delivery/waybill/index' } },
+    { id: 'H', label: '打印发货单', handler: 'handleOpen', params: { componentPath: 'wms/delivery/bills/index' } },
+    { id: 'J', label: '批量发货', handler: 'handleOpen', params: { componentPath: 'wms/delivery/bills/index' } },
+    { id: 'K', label: '单卷发货', handler: 'handleOpen', params: { componentPath: 'wms/coil/do/ship' } },
+    { id: 'L', label: '发货记录', handler: 'handleOpen', params: { componentPath: 'wms/delivery/record/index' } },
+    { id: 'M', label: '生产发货看板', handler: 'handleOpen', params: { componentPath: 'micro/pages/zinc/components/Shipping' } },
+    { id: 'N', label: '发货报表统计', handler: 'handleOpen', params: { componentPath: 'wms/delivery/report/index' } },
+  ],
+
+  inspection: [
+    { id: 'A', label: '维护检验方案模板', handler: 'handleOpen', params: { componentPath: 'mes/qc/template/index' } },
+    { id: 'B', label: '取样/检验数据录入', handler: 'handleOpen', params: { componentPath: 'mes/qc/inspectionSample/index' } },
+    { id: 'D', label: '常规检验录入', handler: 'handleOpen', params: { componentPath: 'mes/qc/inspectionSample/index' } },
+    { id: 'E', label: '拉伸检验（专项）', handler: 'handleOpen', params: { componentPath: 'mes/qc/inspectionTensile/index' } },
+    { id: 'H', label: '生成质量证明书', handler: 'handleOpen', params: { componentPath: 'mes/qc/certificate/book' } },
+    { id: 'I', label: '触发质量评审', handler: 'handleOpen', params: { componentPath: 'mes/qc/qualityReview/index' } },
+  ],
+
+  qualityReview: [
+    { id: 'A', label: '创建质量评审单', handler: 'handleOpen', params: { componentPath: 'mes/qc/qualityReview/index' } },
+    { id: 'B', label: '选择问题钢卷', handler: 'handleOpen', params: { componentPath: 'mes/qc/qualityReview/index' } },
+    { id: 'C', label: '填写缺陷及改判信息', handler: 'handleOpen', params: { componentPath: 'mes/qc/qualityReview/index' } },
+    { id: 'D', label: '品质部评审意见', handler: 'handleOpen', params: { componentPath: 'mes/qc/qualityReview/index' } },
+    { id: 'E', label: '提交送审', handler: 'handleOpen', params: { componentPath: 'mes/qc/qualityReview/index' } },
+    { id: 'F', label: '领导审批', handler: 'handleOpen', params: { componentPath: 'mes/qc/qualityReview/index' } },
+    { id: 'H', label: '查看驳回原因', handler: 'handleOpen', params: { componentPath: 'mes/qc/qualityReview/index' } },
+  ],
+
+  receiving: [
+    { id: 'A', label: '创建收货计划', handler: 'handleOpen', params: { componentPath: 'wms/receive/plan/index' } },
+    { id: 'B', label: '导入钢卷', handler: 'handleOpen', params: { componentPath: 'wms/receive/plan/index' } },
+    { id: 'C', label: '待收货列表', handler: 'handleOpen', params: { componentPath: 'wms/receive/detail/index' } },
+    { id: 'E', label: '确认收货', handler: 'handleOpen', params: { componentPath: 'wms/receive/detail/index' } },
+    { id: 'I', label: '收货报表统计', handler: 'handleOpen', params: { componentPath: 'wms/receive/report/index' } },
+  ],
 }
 
 const DIAGRAMS = {
@@ -253,28 +307,22 @@ graph TD
 
   productionSchedule: `
 graph TD
-  A["<b>创建需求单</b><br/>填写基本信息"]:::p1
-
-  A --> B["<b>选择合同</b><br/>可选一个或多个合同"]:::p2
+  A["<b>创建产需单</b><br/>填写基本信息<br/>产需单号/生产日期/订货单位"]:::p1
+  A --> B["<b>绑定销售订单</b><br/>选择关联合同订单"]:::p2
   B --> C["<b>自动获取需求明细</b><br/>从所选合同提取"]:::p3
   C --> D["<b>调整需求明细</b><br/>可编辑/修改/补充"]:::p4
 
-  D --> E["<b>提交审批</b>"]:::p5
-  E --> F{"审批"}:::dec
-  F -->|不通过| G["<b>退回修改</b>"]:::p4
+  D --> E["<b>下发产需单</b><br/>提交到车间待审核"]:::p5
+  E --> F{"车间审核"}:::dec
+  F -->|驳回| G["<b>退回修改</b>"]:::p4
   G --> D
-  F -->|通过| H["<b>转化为排产单</b>"]:::p6
+  F -->|接收| H["<b>选择工艺路线</b><br/>为每条明细配置<br/>工艺+工序步骤"]:::p6
 
-  H --> I["<b>排产单</b><br/>可再次编辑"]:::p7
-  I --> J["<b>再次提交审批</b>"]:::p5
-  J --> K{"审批"}:::dec
-  K -->|不通过| L["<b>退回修改</b>"]:::p7
-  L --> I
-  K -->|通过| M["<b>提交给车间</b>"]:::p8
-
-  M --> N["<b>车间绑定钢卷</b><br/>每个排产计划<br/>绑定一个或多个钢卷"]:::p9
-  N --> O["<b>执行生产</b>"]:::p10
-  O --> P(["<b>排产完结</b>"]):::pend
+  H --> I["<b>自动生成排产项</b><br/>按工序步骤分组"]:::p7
+  I --> J["<b>已排产明细管理</b><br/>按步骤查看/编辑<br/>内联修改排产状态"]:::p7
+  J --> K["<b>按工序绑定钢卷</b><br/>将现存钢卷绑定到<br/>对应的排产明细"]:::p8
+  K --> L["<b>执行生产</b>"]:::p9
+  L --> M(["<b>排产完结</b>"]):::pend
 
   classDef p1 fill:#409eff,stroke:#337ecc,color:#fff,stroke-width:2px
   classDef p2 fill:#e6fffa,stroke:#13c2c2,color:#303133,stroke-width:2px
@@ -285,7 +333,6 @@ graph TD
   classDef p7 fill:#fff0f6,stroke:#eb2f96,color:#303133,stroke-width:2px
   classDef p8 fill:#f6ffed,stroke:#52c41a,color:#303133,stroke-width:2px
   classDef p9 fill:#f0f5ff,stroke:#597ef7,color:#303133,stroke-width:2px
-  classDef p10 fill:#fffbe6,stroke:#fadb14,color:#303133,stroke-width:2px
   classDef dec fill:#f9f0ff,stroke:#722ed1,color:#303133,stroke-width:2px
   classDef pend fill:#dcf7e8,stroke:#52c41a,color:#303133,stroke-width:2px,rx:10,ry:10
   linkStyle default stroke:#bfbfbf,stroke-width:2px
@@ -315,6 +362,148 @@ graph TD
   classDef eend fill:#dcf7e8,stroke:#52c41a,color:#303133,stroke-width:2px,rx:10,ry:10
   linkStyle default stroke:#bfbfbf,stroke-width:2px
 `,
+
+  batchTransfer: `
+graph TD
+  A["<b>创建调拨单</b><br/>填写调拨单号/名称<br/>选择调拨类型/时间"]:::m1
+  A --> B["<b>添加调拨明细</b><br/>选择钢卷或批量导入<br/>填写调拨前后属性"]:::m2
+  B --> C["<b>提交审批</b>"]:::m3
+  C --> D{"审批"}:::dec
+  D -->|通过| E["<b>执行调拨</b><br/>批量/单条执行<br/>实际移动钢卷库区"]:::m4
+  D -->|驳回| F["<b>退回修改</b>"]:::m5
+  F --> B
+  E --> G["<b>调拨后处理</b><br/>可重贴标签<br/>记录调拨备注"]:::m6
+  G --> H(["调拨归档<br/>库存已更新"]):::mend
+
+  classDef m1 fill:#409eff,stroke:#337ecc,color:#fff,stroke-width:2px
+  classDef m2 fill:#e6fffa,stroke:#13c2c2,color:#303133,stroke-width:2px
+  classDef m3 fill:#f0f5ff,stroke:#597ef7,color:#303133,stroke-width:2px
+  classDef m4 fill:#fff7e6,stroke:#fa8c16,color:#303133,stroke-width:2px
+  classDef m5 fill:#fff1f0,stroke:#f5222d,color:#303133,stroke-width:2px
+  classDef m6 fill:#e6f7ff,stroke:#1890ff,color:#303133,stroke-width:2px
+  classDef dec fill:#f9f0ff,stroke:#722ed1,color:#303133,stroke-width:2px
+  classDef mend fill:#dcf7e8,stroke:#52c41a,color:#303133,stroke-width:2px,rx:10,ry:10
+  linkStyle default stroke:#bfbfbf,stroke-width:2px
+`,
+
+  delivery: `
+graph TD
+  A["<b>创建发货计划</b><br/>填写计划名称/日期"]:::d1
+  A --> A2["<b>编排订单明细</b><br/>添加关联合同订单"]:::d2
+  A2 --> B["<b>查看可用库存</b><br/>可配钢卷<br/><i>仅显示合格品</i>"]:::d3
+  B --> C{"质量校验<br/><i>系统自动过滤</i>"}:::dec
+  C -->|合格| D["<b>配卷/发货绑定</b><br/>选择钢卷绑定到计划"]:::d4
+  C -->|不合格| E["<b>锁定不可发货</b><br/>可分级调整或处理缺陷"]:::d5
+  E --> F["<b>分级调整</b><br/>手动调整等级（后备）"]:::d6
+  F --> B
+  D --> G["<b>创建发货单/运单</b><br/>填写车牌/收货单位/负责人"]:::d7
+  G --> H["<b>打印发货单</b><br/>选择打印模板"]:::d8
+  H --> I{"出库方式"}:::dec
+  I -->|批量出库| J["<b>批量发货</b><br/>整单确认出库"]:::d9
+  I -->|单卷出库| K["<b>单卷发货</b><br/>逐卷扫码出库"]:::d10
+  J --> L["<b>发货记录</b><br/>操作日志可追溯"]:::d11
+  K --> L
+  L --> M["<b>生产发货看板</b><br/>配卷情况/发货记录"]:::d12
+  M --> N["<b>发货报表统计</b>"]:::d13
+  N --> O(["发货完结"]):::dend
+
+  classDef d1 fill:#409eff,stroke:#337ecc,color:#fff,stroke-width:2px
+  classDef d2 fill:#e6fffa,stroke:#13c2c2,color:#303133,stroke-width:2px
+  classDef d3 fill:#fff7e6,stroke:#fa8c16,color:#303133,stroke-width:2px
+  classDef d4 fill:#f6ffed,stroke:#52c41a,color:#303133,stroke-width:2px
+  classDef d5 fill:#fff1f0,stroke:#f5222d,color:#303133,stroke-width:2px
+  classDef d6 fill:#fffbe6,stroke:#fadb14,color:#303133,stroke-width:2px
+  classDef d7 fill:#e6f7ff,stroke:#1890ff,color:#303133,stroke-width:2px
+  classDef d8 fill:#f0f5ff,stroke:#597ef7,color:#303133,stroke-width:2px
+  classDef d9 fill:#f6ffed,stroke:#52c41a,color:#303133,stroke-width:2px
+  classDef d10 fill:#fff0f6,stroke:#eb2f96,color:#303133,stroke-width:2px
+  classDef d11 fill:#e6f7ff,stroke:#1890ff,color:#303133,stroke-width:2px
+  classDef d12 fill:#fffbe6,stroke:#fadb14,color:#303133,stroke-width:2px
+  classDef d13 fill:#f0f5ff,stroke:#597ef7,color:#303133,stroke-width:2px
+  classDef dec fill:#f9f0ff,stroke:#722ed1,color:#303133,stroke-width:2px
+  classDef dend fill:#dcf7e8,stroke:#52c41a,color:#303133,stroke-width:2px,rx:10,ry:10
+  linkStyle default stroke:#bfbfbf,stroke-width:2px
+`,
+
+  inspection: `
+graph TD
+  A["<b>维护检验方案模板</b><br/>定义检验项/单位/标准"]:::i1
+  A --> B["<b>取样/检验数据录入</b><br/>选择方案模板<br/>动态生成检验项表格"]:::i2
+  B --> C{"检验项类型"}:::dec
+  C -->|常规项| D["<b>常规检验录入</b><br/>直接在模板表格<br/>填写检测数据"]:::i3
+  C -->|拉伸试验| E["<b>拉伸检验（专项）</b><br/>独立试验记录<br/>管理明细数据"]:::i4
+  D --> F["<b>汇总检验结果</b>"]:::i5
+  E --> F
+  F --> G{"判定"}:::dec
+  G -->|合格| H["<b>生成质量证明书</b><br/>汇总全部检验数据"]:::i6
+  G -->|不合格| I["<b>触发质量评审</b><br/>进入评审流程"]:::i7
+  H --> J(["检验归档"]):::iend
+
+  classDef i1 fill:#409eff,stroke:#337ecc,color:#fff,stroke-width:2px
+  classDef i2 fill:#e6fffa,stroke:#13c2c2,color:#303133,stroke-width:2px
+  classDef i3 fill:#fff7e6,stroke:#fa8c16,color:#303133,stroke-width:2px
+  classDef i4 fill:#f0f5ff,stroke:#597ef7,color:#303133,stroke-width:2px
+  classDef i5 fill:#fffbe6,stroke:#fadb14,color:#303133,stroke-width:2px
+  classDef i6 fill:#f6ffed,stroke:#52c41a,color:#303133,stroke-width:2px
+  classDef i7 fill:#fff1f0,stroke:#f5222d,color:#303133,stroke-width:2px
+  classDef dec fill:#f9f0ff,stroke:#722ed1,color:#303133,stroke-width:2px
+  classDef iend fill:#dcf7e8,stroke:#52c41a,color:#303133,stroke-width:2px,rx:10,ry:10
+  linkStyle default stroke:#bfbfbf,stroke-width:2px
+`,
+
+  qualityReview: `
+graph TD
+  A["<b>创建质量评审单</b><br/>填写产品名称/传递部门<br/>选择日期"]:::q1
+  A --> B["<b>选择问题钢卷</b><br/>仅O级钢卷可被选中<br/>可多选"]:::q2
+  B --> C["<b>填写缺陷及改判信息</b><br/>缺陷描述/改判后等级<br/>改判后目标库区"]:::q3
+  C --> D["<b>品质部评审意见</b><br/>填写评审意见/签字"]:::q4
+  D --> E["<b>提交送审</b>"]:::q5
+  E --> F{"领导审批"}:::dec
+  F -->|通过| G["<b>执行改判</b><br/>自动更新钢卷质量状态<br/>移动钢卷到目标库区"]:::q6
+  F -->|驳回| H["<b>查看驳回原因</b><br/>修改后重新提交"]:::q7
+  H --> C
+  G --> I["生成审批记录<br/>流程归档"]:::q8
+  I --> J(["评审完结"]):::qend
+
+  classDef q1 fill:#409eff,stroke:#337ecc,color:#fff,stroke-width:2px
+  classDef q2 fill:#e6fffa,stroke:#13c2c2,color:#303133,stroke-width:2px
+  classDef q3 fill:#fff7e6,stroke:#fa8c16,color:#303133,stroke-width:2px
+  classDef q4 fill:#f0f5ff,stroke:#597ef7,color:#303133,stroke-width:2px
+  classDef q5 fill:#e6f7ff,stroke:#1890ff,color:#303133,stroke-width:2px
+  classDef q6 fill:#f6ffed,stroke:#52c41a,color:#303133,stroke-width:2px
+  classDef q7 fill:#fff1f0,stroke:#f5222d,color:#303133,stroke-width:2px
+  classDef q8 fill:#fffbe6,stroke:#fadb14,color:#303133,stroke-width:2px
+  classDef dec fill:#f9f0ff,stroke:#722ed1,color:#303133,stroke-width:2px
+  classDef qend fill:#dcf7e8,stroke:#52c41a,color:#303133,stroke-width:2px,rx:10,ry:10
+  linkStyle default stroke:#bfbfbf,stroke-width:2px
+`,
+
+  receiving: `
+graph TD
+  A["<b>创建收货计划</b><br/>填写计划名称/日期"]:::r1
+  A --> B["<b>导入钢卷</b><br/>批量导入原料钢卷<br/>记录卷号/规格/重量"]:::r2
+  B --> C["<b>待收货列表</b><br/>查看待收货钢卷"]:::r3
+  C --> D{"验收决定"}:::dec
+  D -->|签收| E["<b>确认收货</b><br/>选择实际库区<br/>钢卷入库/库存更新"]:::r4
+  D -->|拒签| F["<b>拒签处理</b><br/>钢卷不入库<br/>标记为已取消"]:::r5
+  E --> G["已入库完成"]:::r6
+  F --> H["已拒签/取消"]:::r7
+  G --> I["<b>收货报表统计</b>"]:::r8
+  H --> I
+  I --> J(["收货完结"]):::rend
+
+  classDef r1 fill:#409eff,stroke:#337ecc,color:#fff,stroke-width:2px
+  classDef r2 fill:#e6fffa,stroke:#13c2c2,color:#303133,stroke-width:2px
+  classDef r3 fill:#fff7e6,stroke:#fa8c16,color:#303133,stroke-width:2px
+  classDef r4 fill:#f6ffed,stroke:#52c41a,color:#303133,stroke-width:2px
+  classDef r5 fill:#fff1f0,stroke:#f5222d,color:#303133,stroke-width:2px
+  classDef r6 fill:#e6f7ff,stroke:#1890ff,color:#303133,stroke-width:2px
+  classDef r7 fill:#fffbe6,stroke:#fadb14,color:#303133,stroke-width:2px
+  classDef r8 fill:#f0f5ff,stroke:#597ef7,color:#303133,stroke-width:2px
+  classDef dec fill:#f9f0ff,stroke:#722ed1,color:#303133,stroke-width:2px
+  classDef rend fill:#dcf7e8,stroke:#52c41a,color:#303133,stroke-width:2px,rx:10,ry:10
+  linkStyle default stroke:#bfbfbf,stroke-width:2px
+`,
 }
 
 

From 3a8d2cfa9a813b310f59c1f20275d61caccbf870 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E6=9C=B1=E6=98=8A=E5=A4=A9?=
 <15984976+n2319_0@user.noreply.gitee.com>
Date: Thu, 9 Jul 2026 14:17:20 +0800
Subject: [PATCH 2/2] =?UTF-8?q?=E9=A6=96=E9=A1=B5=E6=99=AE=E9=80=82?=
 =?UTF-8?q?=E4=BC=98=E5=8C=96?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../HomeModules/QuickAccessGroup.vue          | 153 +++---
 klp-ui/src/views/index.vue                    | 473 ++++++++++++------
 2 files changed, 425 insertions(+), 201 deletions(-)

diff --git a/klp-ui/src/components/HomeModules/QuickAccessGroup.vue b/klp-ui/src/components/HomeModules/QuickAccessGroup.vue
index a67540c56..dba44d84b 100644
--- a/klp-ui/src/components/HomeModules/QuickAccessGroup.vue
+++ b/klp-ui/src/components/HomeModules/QuickAccessGroup.vue
@@ -24,8 +24,8 @@
         <span class="debug-value">{{ mergedItemsText }}</span>
       </div>
     </div> -->
-    <el-row :gutter="10" class="panel-group">
-      <el-col :xs="24" :sm="12" :md="12" :lg="12" class="card-panel-col" v-for="item in homeItems" :key="item.key">
+    <el-row :gutter="8" class="panel-group">
+      <el-col :xs="24" :sm="12" :md="8" :lg="6" :xl="4" class="card-panel-col" v-for="item in homeItems" :key="item.key">
         <div class="card-panel" :class="{ 'is-add': item.isAdd }" @click="handleCardClick(item)">
           <template v-if="item.isAdd">
             <div class="card-panel-add">
@@ -52,7 +52,7 @@
       </el-col>
     </el-row>
 
-    <el-dialog title="配置快捷入口" :visible.sync="configVisible" width="1120px" top="5vh" custom-class="quick-access-dialog">
+    <el-dialog title="配置快捷入口" :visible.sync="configVisible" width="1120px" top="5vh" custom-class="quick-access-dialog" append-to-body>
       <div class="quick-access-config-bar">
         <el-form inline size="mini">
           <el-form-item label="用户">
@@ -1185,7 +1185,7 @@ export default {
 
 <style lang="scss" scoped>
 .quick-access {
-  margin-top: 18px;
+  margin-top: 0;
 }
 
 .quick-access-debug-bar {
@@ -1395,11 +1395,11 @@ export default {
 
 .panel-group {
   .card-panel-col {
-    margin-bottom: 32px;
+    margin-bottom: 8px;
   }
 
   .card-panel {
-    height: 108px;
+    height: 72px;
     cursor: pointer;
     font-size: 12px;
     position: relative;
@@ -1408,75 +1408,78 @@ export default {
     align-items: center;
     color: #666;
     background: #fff;
-    border: 1px solid rgba(0, 0, 0, 0.06);
+    border: 1px solid #ebeef5;
     border-radius: 10px;
-    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.06);
+    box-shadow: 0 2px 8px rgba(15, 23, 42, 0.04);
     transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease;
 
     &:hover {
-      transform: translateY(-3px);
-      border-color: rgba(64, 158, 255, 0.35);
-      box-shadow: 0 12px 34px rgba(0, 0, 0, 0.1);
+      transform: translateY(-1px);
+      border-color: rgba(64, 158, 255, 0.28);
+      box-shadow: 0 10px 22px rgba(15, 23, 42, 0.08);
 
       .card-panel-icon-wrapper {
-        color: #fff;
-        background: linear-gradient(135deg, #409eff 0%, #66b1ff 100%);
-        box-shadow: 0 10px 18px rgba(64, 158, 255, 0.25);
+        border-color: rgba(64, 158, 255, 0.18);
+        background: linear-gradient(135deg, rgba(64, 158, 255, 0.14) 0%, rgba(64, 158, 255, 0.08) 100%);
       }
     }
 
     &.is-add {
       border-style: dashed;
-      background: #fafafa;
+      background: linear-gradient(180deg, #fbfcfe 0%, #f7f9fc 100%);
       justify-content: center;
     }
 
     &.is-add:hover {
       border-color: rgba(64, 158, 255, 0.5);
-      background: rgba(64, 158, 255, 0.04);
+      background: rgba(64, 158, 255, 0.03);
 
       .card-panel-add-icon {
-        background: linear-gradient(135deg, #409eff 0%, #66b1ff 100%);
-        color: #fff;
-        box-shadow: 0 10px 18px rgba(64, 158, 255, 0.25);
+        border-color: rgba(64, 158, 255, 0.18);
+        background: linear-gradient(135deg, rgba(64, 158, 255, 0.14) 0%, rgba(64, 158, 255, 0.08) 100%);
       }
     }
 
     .card-panel-icon-wrapper {
       flex: 0 0 auto;
-      margin: 0 14px 0 14px;
-      padding: 16px;
+      width: 34px;
+      height: 34px;
+      margin: 0 10px;
+      display: flex;
+      align-items: center;
+      justify-content: center;
       transition: all 0.18s ease;
-      border-radius: 10px;
+      border-radius: 8px;
       color: #409eff;
-      background: linear-gradient(135deg, rgba(64, 158, 255, 0.18) 0%, rgba(64, 158, 255, 0.08) 100%);
-      box-shadow: inset 0 0 0 1px rgba(64, 158, 255, 0.1);
+      border: 1px solid rgba(64, 158, 255, 0.12);
+      background: linear-gradient(135deg, rgba(64, 158, 255, 0.12) 0%, rgba(64, 158, 255, 0.05) 100%);
     }
 
     .card-panel-icon {
-      font-size: 34px;
+      font-size: 16px;
     }
 
     .card-panel-description {
       flex: 1;
       min-width: 0;
-      font-weight: 600;
-      margin: 0 18px 0 0;
+      font-weight: 500;
+      margin: 0 10px 0 0;
 
       .card-panel-text {
-        line-height: 20px;
+        line-height: 17px;
         color: rgba(0, 0, 0, 0.75);
-        font-size: 16px;
-        margin-bottom: 6px;
+        font-size: 13px;
+        margin-bottom: 1px;
+        font-weight: 600;
         white-space: nowrap;
         overflow: hidden;
         text-overflow: ellipsis;
       }
 
       .card-panel-subtext {
-        font-size: 12px;
-        color: rgba(0, 0, 0, 0.45);
-        line-height: 16px;
+        font-size: 10px;
+        color: #909399;
+        line-height: 14px;
         white-space: nowrap;
         overflow: hidden;
         text-overflow: ellipsis;
@@ -1492,40 +1495,41 @@ export default {
 
     .card-panel-add-icon {
       flex: 0 0 auto;
-      width: 56px;
-      height: 56px;
-      margin: 0 14px 0 14px;
-      border-radius: 12px;
+      width: 34px;
+      height: 34px;
+      margin: 0 10px;
+      border-radius: 8px;
       display: flex;
       align-items: center;
       justify-content: center;
-      font-size: 26px;
+      font-size: 16px;
       color: #409eff;
-      background: rgba(64, 158, 255, 0.12);
+      border: 1px solid rgba(64, 158, 255, 0.12);
+      background: linear-gradient(135deg, rgba(64, 158, 255, 0.12) 0%, rgba(64, 158, 255, 0.05) 100%);
       transition: all 0.18s ease;
-      box-shadow: inset 0 0 0 1px rgba(64, 158, 255, 0.1);
     }
 
     .card-panel-add-text {
       flex: 1;
       min-width: 0;
-      margin: 0 18px 0 0;
-      font-weight: 600;
+      margin: 0 10px 0 0;
+      font-weight: 500;
 
       .card-panel-text {
-        line-height: 20px;
+        line-height: 17px;
         color: rgba(0, 0, 0, 0.75);
-        font-size: 16px;
-        margin-bottom: 6px;
+        font-size: 13px;
+        margin-bottom: 1px;
+        font-weight: 600;
         white-space: nowrap;
         overflow: hidden;
         text-overflow: ellipsis;
       }
 
       .card-panel-subtext {
-        font-size: 12px;
-        color: rgba(0, 0, 0, 0.45);
-        line-height: 16px;
+        font-size: 10px;
+        color: #909399;
+        line-height: 14px;
         white-space: nowrap;
         overflow: hidden;
         text-overflow: ellipsis;
@@ -1555,25 +1559,32 @@ export default {
   .panel-group {
     .card-panel {
       .card-panel-icon-wrapper {
-        margin-right: 10px;
-        padding: 14px;
+        width: 32px;
+        height: 32px;
       }
 
       .card-panel-icon {
-        font-size: 30px;
+        font-size: 15px;
       }
 
       .card-panel-description {
-        margin-right: 12px;
-
         .card-panel-text {
-          font-size: 15px;
+          font-size: 12px;
         }
       }
     }
   }
 }
 
+@media screen and (min-width: 1200px) {
+  .panel-group {
+    .card-panel-col {
+      flex: 0 0 20%;
+      max-width: 20%;
+    }
+  }
+}
+
 @media screen and (max-width: 768px) {
   .quick-access-config-body {
     flex-direction: column;
@@ -1587,26 +1598,48 @@ export default {
 
   .panel-group {
     .card-panel {
-      height: 92px;
+      height: 68px;
 
       .card-panel-icon-wrapper {
-        padding: 12px;
+        margin: 0 8px;
+        width: 30px;
+        height: 30px;
       }
 
       .card-panel-icon {
-        font-size: 24px;
+        font-size: 14px;
       }
 
       .card-panel-description {
-        margin-right: 10px;
+        margin-right: 8px;
 
         .card-panel-text {
-          font-size: 14px;
-          margin-bottom: 6px;
+          font-size: 12px;
+          margin-bottom: 1px;
         }
 
         .card-panel-subtext {
+          font-size: 10px;
+        }
+      }
+
+      .card-panel-add-icon {
+        width: 30px;
+        height: 30px;
+        margin: 0 8px;
+        font-size: 14px;
+      }
+
+      .card-panel-add-text {
+        margin-right: 8px;
+
+        .card-panel-text {
           font-size: 12px;
+          margin-bottom: 1px;
+        }
+
+        .card-panel-subtext {
+          font-size: 10px;
         }
       }
     }
diff --git a/klp-ui/src/views/index.vue b/klp-ui/src/views/index.vue
index e00b53abc..0fdca57d9 100644
--- a/klp-ui/src/views/index.vue
+++ b/klp-ui/src/views/index.vue
@@ -1,51 +1,83 @@
 <template>
   <div class="dashboard-editor-container">
     <img src="http://kelunpuzhonggong.com/upload/img/20250427091033.jpg" alt="">
-    
-    <div class="aboutus">
-      <el-row :gutter="30">
-        <!-- 左栏 -->
-        <el-col :span="12" :xs="24">
-           <div class="aboutus-title">
-            <h2>关于我们</h2>
-            <p>ABOUT US</p>
-          </div>
-          <div class="aboutus-left">
-            <p class="aboutus-desc">
-              嘉祥科伦普重工有限公司是山东省重点工程项目，是济宁市工程之一，也是科伦普产品结构调整重要的工程项目。工程采用了外方技术总负责、关键设备整体引进、点采集成、国内技术总成、自主创新、单体设备引进等多种建设方案，保证了技术先进和人才的培养，确保工程投产后达产达效。
-            </p>
-            <p class="aboutus-desc">
-              科伦普冷轧重工有限公司是设计年产量150万吨，能向广大用户提供热轧酸洗、热轧镀锌、冷硬、罩式退火、冷轧镀锌、铝锌合金、锌铝合金、锌铝镁、镀铬等各大类产品。产品覆盖东北、华北、华东、华南等地区。
-            </p>
-          </div>
+    <div class="home-workspace">
+      <div class="workspace-shell">
+        <el-row :gutter="20" class="workspace-grid workspace-grid--top">
+          <el-col :xs="24" :sm="24" :md="8" :lg="7" :xl="6">
+            <div class="workspace-card summary-card">
+              <div class="module-title">
+                <h2>关于我们</h2>
+                <p>ABOUT US</p>
+              </div>
+              <div class="aboutus-left">
+                <p class="aboutus-lead">
+                  嘉祥科伦普重工有限公司是山东省重点工程项目，也是科伦普产品结构调整的重要工程项目，聚焦高铁装备、模具制造和涂镀新材料研发。
+                </p>
+                <div class="aboutus-metrics">
+                  <div class="metric-item">
+                    <span class="metric-label">成立时间</span>
+                    <span class="metric-value">2017年8月</span>
+                  </div>
+                  <div class="metric-item">
+                    <span class="metric-label">注册资金</span>
+                    <span class="metric-value">33100万元</span>
+                  </div>
+                  <div class="metric-item">
+                    <span class="metric-label">设计年产能</span>
+                    <span class="metric-value">150万吨</span>
+                  </div>
+                  <div class="metric-item">
+                    <span class="metric-label">覆盖区域</span>
+                    <span class="metric-value">东北 华北 华东 华南等</span>
+                  </div>
+                </div>
+                <p class="aboutus-desc">
+                  工程采用外方技术总负责、关键设备整体引进、国内技术总成、自主创新等多种建设方案，既保证技术先进性，也兼顾人才培养与项目达产达效。
+                </p>
+                <p class="aboutus-desc">
+                  公司设计年产量150万吨，产品覆盖热轧酸洗、热轧镀锌、冷硬、罩式退火、冷轧镀锌、铝锌合金、锌铝合金、锌铝镁、镀铬等多个大类。
+                </p>
+              </div>
+            </div>
+          </el-col>
 
-          <quick-access-group />
-        </el-col>
+          <el-col :xs="24" :sm="24" :md="16" :lg="17" :xl="18">
+            <div class="workspace-card detail-card">
+              <div class="module-title">
+                <h2>企业介绍</h2>
+                <p>COMPANY PROFILE</p>
+              </div>
+              <div class="aboutus-right">
+                <div class="detail-section">
+                  <h3>企业概况</h3>
+                  <p class="aboutus-detail">
+                    嘉祥科伦普重工有限公司成立于2017年8月，注册资金33100万元，主要经营高铁设备、配件制造与销售，模具制造与销售，新材料技术研发，高性能有色金属及合金材料销售，机械零件、零部件加工与销售，金属材料制造与销售，锌铝镁新材料等。目前公司拥有10余项具有自主知识产权的发明专利技术，综合技术水平达国内领先，2024年公司主导产品国内市场占有率约占85%。2024年总资产5.98亿元，净资产4.49亿元，收入3.95亿元，公司现有员工238人，研究与试验发展人员57人，其中专职研究与试验发展人员52人，外聘专家5人。
+                  </p>
+                </div>
+                <div class="detail-section">
+                  <h3>项目建设</h3>
+                  <p class="aboutus-detail">
+                    2024年公司新建科伦普合金新材料研发项目，占地290亩，采用国内先进的镀层核心技术和热处理工艺，专业生产锌铝镁板材和镀铬板材。致力于打造国内工艺链条最完善、产品型号最丰富的涂镀新材料生产企业。全部投产后可实现新增销售收入80亿元，利税4.7亿元，带动就业约500人。项目主要生产的冷轧板、锌铝镁涂层板、镀铬涂层板、镀锡涂层板等产品，涵盖0.08MM-6.0MM区间60多种产品，是国内单个企业产品种类最多的项目。产品因其防锈、耐氧化、耐腐蚀、高电导、高稳定的优秀特性，广泛应用于建筑结构件、汽车制造、轻工家电、食品包装、医疗器械、电子通讯、航空航天领域。
+                  </p>
+                </div>
+              </div>
+            </div>
+          </el-col>
+        </el-row>
+      </div>
 
-        <!-- 右栏 -->
-        <el-col :span="12" :xs="24">
-          <img src="http://kelunpuzhonggong.com/upload/img/20251015103934.jpg" alt="">
-          <!-- <div class="aboutus-right">
-            <p class="aboutus-detail">
-              嘉祥科伦普重工有限公司成立于2017年8月，注册资金33100万元，主要经营高铁设备、配件制造与销售，模具制造与销售，新材料技术研发，高性能有色金属及合金材料销售，机械零件、零部件加工与销售，金属材料制造与销售，锌铝镁新材料等。目前公司拥有10余项具有自主知识产权的发明专利技术，综合技术水平达国内领先，2024年公司主导产品国内市场占有率约占85%。2024年总资产5.98亿元，净资产4.49亿元，收入3.95亿元，公司现有员工238人，研究与试验发展人员57人，其中专职研究与试验发展人员52人，外聘专家5人。
-            </p>
-            <p class="aboutus-detail">
-              2024年公司新建科伦普合金新材料研发项目，占地290亩，采用国内先进的镀层核心技术和热处理工艺，专业生产锌铝镁板材和镀铬板材。致力于打造国内工艺链条最完善、产品型号最丰富的涂镀新材料生产企业。全部投产后可实现新增销售收入80亿元，利税4.7亿元，带动就业约500人。项目主要生产的冷轧板、锌铝镁涂层板、镀铬涂层板、镀锡涂层板等产品，涵盖0.08MM-6.0MM区间60多种产品，是国内单个企业产品种类最多的项目。产品因其防锈、耐氧化、耐腐蚀、高电导、高稳定的优秀特性，广泛应用于建筑结构件、汽车制造、轻工家电、食品包装、医疗器械、电子通讯、航空航天领域。
-            </p>
-          </div> -->
-        </el-col>
-      </el-row>
+      <div class="workspace-card quick-card quick-card--full">
+        <div class="module-title module-title--inline">
+          <div>
+            <h2>快捷入口</h2>
+            <p>WORKSPACE</p>
+          </div>
+          <span class="module-title-tip">支持按权限自动展示，并可配置本人常用入口</span>
+        </div>
+        <quick-access-group />
+      </div>
     </div>
-
-    <!-- <AllApplications />    
-    <el-row :gutter="10">
-      <el-col :span="18">
-        <el-empty description="办公模块定制开发中"></el-empty>
-      </el-col>
-      <el-col :span="6">
-        <mini-calendar />
-      </el-col>
-    </el-row> -->
   </div>
 </template>
 
@@ -67,7 +99,7 @@ export default {
 
 <style lang="scss" scoped>
 .dashboard-editor-container {
-  background-color: #fff;
+  background: #f5f7fa;
   position: relative;
 
   img {
@@ -82,111 +114,270 @@ export default {
   }
 }
 
-// 关于我们区域样式
-.aboutus {
-  padding: 20px;
-  max-width: 1200px;
-  margin: 0 auto;
+.home-workspace {
+  padding: 0 60px 32px;
+}
 
-  // 标题
-  .aboutus-title {
-    margin-bottom: 25px;
-    h2 {
-      font-size: 28px;
-      color: #333;
-      margin: 0;
-    }
-    p {
-      font-size: 14px;
-      color: #999;
-      margin: 5px 0 0 0;
-    }
+.workspace-shell {
+  width: 100%;
+  max-width: none;
+  margin: 0;
+  margin-top: -36px;
+  position: relative;
+}
+
+.workspace-grid--top {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: stretch;
+  margin-bottom: 20px;
+}
+
+.workspace-grid--top > .el-col {
+  display: flex;
+  margin-bottom: 20px;
+}
+
+.workspace-card {
+  width: 100%;
+  height: 100%;
+  padding: 28px;
+  background: #fff;
+  border: 1px solid rgba(15, 23, 42, 0.05);
+  border-radius: 18px;
+  box-shadow: 0 14px 36px rgba(15, 23, 42, 0.06);
+}
+
+.module-title {
+  margin-bottom: 20px;
+
+  h2 {
+    margin: 0;
+    font-size: 28px;
+    line-height: 36px;
+    font-weight: 600;
+    color: #303133;
   }
 
-  // 左栏
-  .aboutus-left {
-    text-indent: 2em;
-    line-height: 2em;
-    font-size: 14px;
-
-    .aboutus-desc {
-      color: #666;
-      line-height: 1.8;
-      margin-bottom: 18px;
-    }
-
-    // 特色模块
-    .aboutus-features {
-      display: flex;
-      justify-content: space-between;
-      margin: 30px 0;
-
-      .feature-item {
-        display: flex;
-        flex-direction: column;
-        align-items: center;
-
-        .feature-icon {
-          width: 42px;
-          height: 42px;
-          border-radius: 50%;
-          background-color: #9370db; // 截图紫色图标背景
-          display: flex;
-          align-items: center;
-          justify-content: center;
-          margin-bottom: 10px;
-
-          .icon {
-            color: #fff;
-            font-size: 22px;
-          }
-        }
-
-        .feature-text {
-          font-size: 14px;
-          color: #333;
-        }
-      }
-    }
-
-    // 按钮
-    .read-more-btn {
-      border: 1px solid #333;
-      background: transparent;
-      padding: 8px 22px;
-      font-size: 14px;
-      cursor: pointer;
-      transition: background 0.3s;
-
-      &:hover {
-        background-color: #f5f5f5;
-      }
-    }
-  }
-
-  // 右栏
-  .aboutus-right {
-    .aboutus-detail {
-      font-size: 14px;
-      color: #666;
-      line-height: 1.8;
-      margin-bottom: 18px;
-    }
+  p {
+    margin: 6px 0 0;
+    font-size: 13px;
+    line-height: 20px;
+    color: #909399;
+    letter-spacing: 1px;
   }
 }
 
-// 响应式适配
-@media (max-width: 1024px) {
-  .dashboard-editor-container {
-    .aboutus {
-      padding: 20px 25px;
+.module-title--inline {
+  display: flex;
+  align-items: flex-start;
+  justify-content: space-between;
+  gap: 16px;
+}
 
-      .el-row {
-        .el-col:first-child {
-          margin-bottom: 30px;
-        }
-      }
-    }
+.module-title-tip {
+  flex: 0 0 auto;
+  font-size: 13px;
+  line-height: 20px;
+  color: #909399;
+  padding-top: 8px;
+}
+
+.aboutus-left {
+  font-size: 14px;
+  line-height: 26px;
+}
+
+.aboutus-lead {
+  margin: 0;
+  color: #303133;
+  font-size: 15px;
+  line-height: 28px;
+  font-weight: 500;
+}
+
+.aboutus-metrics {
+  display: grid;
+  grid-template-columns: repeat(2, minmax(0, 1fr));
+  gap: 10px;
+  margin: 18px 0;
+}
+
+.metric-item {
+  min-width: 0;
+  padding: 12px 14px;
+  border-radius: 12px;
+  background: linear-gradient(180deg, #fbfcfe 0%, #f7f9fc 100%);
+  border: 1px solid #eef2f7;
+}
+
+.metric-label {
+  display: block;
+  margin-bottom: 6px;
+  font-size: 12px;
+  line-height: 18px;
+  color: #909399;
+}
+
+.metric-value {
+  display: block;
+  font-size: 14px;
+  line-height: 20px;
+  font-weight: 600;
+  color: #303133;
+}
+
+.aboutus-desc,
+.aboutus-detail {
+  margin: 0;
+  color: #606266;
+  font-size: 14px;
+  line-height: 26px;
+}
+
+.aboutus-desc + .aboutus-desc,
+.aboutus-detail + .aboutus-detail {
+  margin-top: 16px;
+}
+
+.aboutus-right {
+  display: block;
+}
+
+.quick-card {
+  margin-top: 20px;
+  padding: 20px 20px 16px;
+}
+
+.quick-card--full {
+  width: 100%;
+}
+
+.quick-card .module-title {
+  margin-bottom: 14px;
+}
+
+.summary-card {
+  min-height: 100%;
+  display: flex;
+  flex-direction: column;
+}
+
+.detail-card {
+  margin-top: 0;
+}
+
+.detail-section + .detail-section {
+  margin-top: 24px;
+  padding-top: 24px;
+  border-top: 1px solid #ebeef5;
+}
+
+.detail-section h3 {
+  margin: 0 0 10px;
+  font-size: 18px;
+  line-height: 26px;
+  font-weight: 600;
+  color: #303133;
+}
+
+.detail-section .aboutus-detail {
+  font-size: 15px;
+  line-height: 28px;
+  color: #5f6b7a;
+}
+
+@media (max-width: 1024px) {
+  .home-workspace {
+    padding: 0 36px 28px;
+  }
+
+  .workspace-shell {
+    margin-top: -20px;
+  }
+
+  .workspace-card {
+    padding: 20px;
+  }
+
+  .quick-card {
+    padding: 18px 18px 14px;
+  }
+
+  .workspace-grid--top > .el-col {
+    margin-bottom: 16px;
+  }
+
+  .module-title h2 {
+    font-size: 24px;
+    line-height: 32px;
+  }
+
+  .aboutus-metrics {
+    grid-template-columns: 1fr;
+  }
+}
+
+@media (max-width: 768px) {
+  .home-workspace {
+    padding: 0 28px 24px;
+  }
+
+  .workspace-shell {
+    margin-top: 12px;
+  }
+
+  .workspace-card {
+    padding: 18px 16px;
+    border-radius: 14px;
+  }
+
+  .quick-card {
+    padding: 16px 14px 12px;
+  }
+
+  .workspace-grid--top {
+    display: block;
+    margin-bottom: 16px;
+  }
+
+  .workspace-grid--top > .el-col {
+    display: block;
+    margin-bottom: 12px;
+  }
+
+  .module-title--inline {
+    display: block;
+  }
+
+  .module-title-tip {
+    display: block;
+    margin-top: 8px;
+    padding-top: 0;
+  }
+
+  .detail-card {
+    margin-top: 0;
+  }
+
+  .detail-section + .detail-section {
+    margin-top: 18px;
+    padding-top: 18px;
+  }
+
+  .quick-card {
+    margin-top: 12px;
+  }
+
+
+  .aboutus-lead {
+    font-size: 14px;
+    line-height: 26px;
+  }
+
+  .detail-section .aboutus-detail {
+    font-size: 14px;
+    line-height: 26px;
   }
 }
 </style>