From ffe3a0e61205db3fa91ec4e8943044a57087b4d6 Mon Sep 17 00:00:00 2001 From: wangyu <823267011@qq.com> Date: Tue, 28 Apr 2026 13:37:01 +0800 Subject: [PATCH] =?UTF-8?q?style+feat:=20=E9=87=91=E5=B1=9E=E7=81=B0?= =?UTF-8?q?=E6=B7=B1=E8=93=9D=E5=B7=A5=E4=B8=9A=E4=B8=BB=E9=A2=98=20+=20?= =?UTF-8?q?=E7=B4=A7=E5=87=91=E7=BB=84=E4=BB=B6=20+=20=E5=B7=A5=E4=B8=9A?= =?UTF-8?q?=E6=8E=A7=E5=88=B6=E9=A6=96=E9=A1=B5?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit - 主题色：深钢蓝#1c2b3a侧边栏 + 金属灰#607d8b + 海军蓝#1d4e89主色 - 去除所有绿色，成功态改用钢蓝 - 全局组件缩小：输入框28px/按钮12px/表格行5px/表单间距12px - 新首页：状态栏+KPI卡片+双机架工艺参数+计划表+L2/L3通信状态 Co-Authored-By: Claude Sonnet 4.6 --- .../src/assets/styles/element-variables.scss | 104 +++- ruoyi-ui/src/assets/styles/index.scss | 202 ++++---- ruoyi-ui/src/assets/styles/sidebar.scss | 15 +- ruoyi-ui/src/assets/styles/variables.scss | 37 +- ruoyi-ui/src/views/index.vue | 489 ++++++++++++------ 5 files changed, 571 insertions(+), 276 deletions(-) diff --git a/ruoyi-ui/src/assets/styles/element-variables.scss b/ruoyi-ui/src/assets/styles/element-variables.scss index 9c3feb6b..56f19f6b 100644 --- a/ruoyi-ui/src/assets/styles/element-variables.scss +++ b/ruoyi-ui/src/assets/styles/element-variables.scss @@ -1,26 +1,110 @@ /** - * 冷轧二级控制系统 — Element-UI 主题（工业蓝） + * 冷轧二级控制系统 — Element-UI 主题（金属灰·深蓝） */ -/* 主色：工业蓝 */ -$--color-primary: #1565c0; -$--color-success: #52c41a; -$--color-warning: #faad14; -$--color-danger: #f5222d; -$--color-info: #909399; +/* 主色：深海军蓝 */ +$--color-primary: #1d4e89; +/* 成功：用钢蓝替代绿色 */ +$--color-success: #2471a3; +/* 警告：琥珀 */ +$--color-warning: #d68910; +/* 危险：暗红 */ +$--color-danger: #c0392b; +/* 信息：金属灰 */ +$--color-info: #607d8b; $--button-font-weight: 500; -$--border-color-light: #dde1e7; +$--border-color-light: #dde1e6; $--border-color-lighter: #ebeef5; - -$--table-border: 1px solid #e8eaec; +$--table-border: 1px solid #e4e7ed; /* icon font path */ $--font-path: '~element-ui/lib/theme-chalk/fonts'; @import "~element-ui/packages/theme-chalk/src/index"; +// ──────────────────────────────────────────────────────────── +// 紧凑尺寸覆盖（全局缩小所有组件） +// ──────────────────────────────────────────────────────────── + +// 输入框 +.el-input__inner { + height: 28px !important; + line-height: 28px !important; + font-size: 12px !important; + padding: 0 8px !important; +} +.el-input--medium .el-input__inner { height: 28px !important; line-height: 28px !important; } +.el-input--small .el-input__inner { height: 24px !important; line-height: 24px !important; } +.el-input--mini .el-input__inner { height: 22px !important; line-height: 22px !important; } + +// textarea +.el-textarea__inner { font-size: 12px !important; padding: 4px 8px !important; } + +// 按钮 +.el-button { padding: 5px 12px !important; font-size: 12px !important; } +.el-button--medium { padding: 6px 14px !important; font-size: 12px !important; } +.el-button--small { padding: 4px 10px !important; font-size: 12px !important; } +.el-button--mini { padding: 3px 8px !important; font-size: 12px !important; } + +// 表格 +.el-table { + font-size: 12px !important; + th.el-table__cell { padding: 5px 0 !important; font-size: 12px !important; font-weight: 600; background-color: #f2f4f7 !important; color: #2c3e50 !important; } + td.el-table__cell { padding: 4px 0 !important; } + .cell { padding: 0 8px !important; } +} + +// 表单 +.el-form-item { margin-bottom: 12px !important; } +.el-form-item__label { font-size: 12px !important; line-height: 28px !important; padding-right: 8px !important; } +.el-form-item__content { line-height: 28px !important; font-size: 12px !important; } + +// 卡片 +.el-card__header { padding: 10px 14px !important; font-size: 13px !important; font-weight: 600; color: #1c2b3a; border-bottom: 1px solid #e4e7ed; } +.el-card__body { padding: 12px 14px !important; } +.el-card { border-radius: 3px !important; border: 1px solid #dde1e6 !important; box-shadow: 0 1px 4px rgba(0,0,0,.06) !important; } + +// 分页 +.el-pagination { padding: 4px 0 !important; font-size: 12px !important; } +.el-pagination .el-select .el-input { width: 90px; } +.el-pagination button, .el-pagination .el-pager li { font-size: 12px !important; min-width: 26px !important; height: 26px !important; line-height: 26px !important; } + +// 下拉/select +.el-select-dropdown__item { font-size: 12px !important; padding: 0 16px !important; height: 28px !important; line-height: 28px !important; } +.el-select .el-input__inner { height: 28px !important; line-height: 28px !important; } + +// 日期选择器 +.el-date-editor .el-input__inner { padding-left: 28px !important; } +.el-date-editor.el-input { width: 150px !important; } + +// 对话框 +.el-dialog__header { padding: 12px 16px !important; border-bottom: 1px solid #e4e7ed; } +.el-dialog__title { font-size: 14px !important; font-weight: 600; color: #1c2b3a; } +.el-dialog__body { padding: 16px !important; font-size: 12px !important; } +.el-dialog__footer { padding: 10px 16px !important; border-top: 1px solid #e4e7ed; } + +// Tag +.el-tag { font-size: 11px !important; height: 20px !important; line-height: 18px !important; padding: 0 6px !important; border-radius: 2px !important; } +.el-tag--success { background-color: #d6e8f5 !important; border-color: #aacce8 !important; color: #1d4e89 !important; } +.el-tag--warning { background-color: #fdf3e0 !important; border-color: #f5cba7 !important; color: #a04000 !important; } +.el-tag--danger { background-color: #fadbd8 !important; border-color: #f1948a !important; color: #922b21 !important; } +.el-tag--info { background-color: #eaecee !important; border-color: #bdc3c7 !important; color: #4d5f6e !important; } + +// 开关 +.el-switch__label { font-size: 12px !important; } +.el-switch { height: 20px !important; line-height: 20px !important; } +.el-switch__core { height: 18px !important; } +.el-switch.is-checked .el-switch__core { background-color: #1d4e89 !important; border-color: #1d4e89 !important; } + +// 面包屑 +.el-breadcrumb { font-size: 12px !important; line-height: 24px !important; } + +// 搜索栏内组件对齐 +.filter-container .el-input, +.filter-container .el-select { vertical-align: middle; } + // webpack JS/SCSS 变量共享 :export { theme: $--color-primary; diff --git a/ruoyi-ui/src/assets/styles/index.scss b/ruoyi-ui/src/assets/styles/index.scss index 2624b0a6..4501f8f9 100644 --- a/ruoyi-ui/src/assets/styles/index.scss +++ b/ruoyi-ui/src/assets/styles/index.scss @@ -9,35 +9,26 @@ body { height: 100%; margin: 0; background-color: #f0f2f5; - color: #303133; + color: #2c3e50; -moz-osx-font-smoothing: grayscale; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; font-family: 'Helvetica Neue', Helvetica, 'PingFang SC', 'Microsoft YaHei', 'Source Han Sans CN', Arial, sans-serif; - font-size: 14px; + font-size: 12px; } -label { font-weight: 600; } - -html { - height: 100%; - box-sizing: border-box; -} +label { font-weight: 600; color: #4a5568; } +html { height: 100%; box-sizing: border-box; } #app { height: 100%; } - *, *:before, *:after { box-sizing: inherit; } a:focus, a:active { outline: none; } -a, a:focus, a:hover { - cursor: pointer; - color: inherit; - text-decoration: none; -} - +a, a:focus, a:hover { cursor: pointer; color: inherit; text-decoration: none; } div:focus { outline: none; } +// ── 工具类 ────────────────────────────────────────────────── .fr { float: right; } .fl { float: left; } .pr-5 { padding-right: 5px; } @@ -50,109 +41,138 @@ div:focus { outline: none; } .padding-content { padding: 4px 0; } .clearfix:after { - visibility: hidden; - display: block; - font-size: 0; - content: " "; - clear: both; - height: 0; + visibility: hidden; display: block; font-size: 0; + content: " "; clear: both; height: 0; } -// 页面内容容器 -.app-container { - padding: 16px 20px; -} +// ── 页面容器 ───────────────────────────────────────────────── +.app-container { padding: 12px 16px; } -// 搜索过滤栏 +// ── 搜索栏 ─────────────────────────────────────────────────── .filter-container { - padding: 16px; - margin-bottom: 12px; + padding: 10px 12px; + margin-bottom: 10px; background: #ffffff; - border: 1px solid #e8eaec; - border-radius: 4px; + border: 1px solid #dde1e6; + border-radius: 3px; .filter-item { display: inline-block; vertical-align: middle; - margin-bottom: 8px; - margin-right: 8px; + margin-bottom: 6px; + margin-right: 6px; } } -// 机组运行状态点 -.status-dot { - display: inline-block; - width: 8px; - height: 8px; - border-radius: 50%; - margin-right: 6px; - - &.running { background-color: #52c41a; box-shadow: 0 0 5px #52c41a; } - &.stopped { background-color: #f5222d; box-shadow: 0 0 5px #f5222d; } - &.standby { background-color: #faad14; box-shadow: 0 0 5px #faad14; } - &.offline { background-color: #909399; } +// ── 顶部导航栏 ─────────────────────────────────────────────── +.navbar { + background-color: #1c2b3a !important; + border-bottom: 1px solid #253547 !important; + box-shadow: 0 1px 4px rgba(0,0,0,.2) !important; + height: 44px !important; + line-height: 44px !important; } -// 工艺参数数值 -.param-value { - font-family: 'Courier New', Courier, monospace; - font-size: 20px; - font-weight: 700; - color: #1565c0; - letter-spacing: 1px; +// ── 标签页 ─────────────────────────────────────────────────── +.tags-view-container { + background: #ffffff !important; + border-bottom: 1px solid #dde1e6 !important; + height: 30px !important; + + .tags-view-wrapper .tags-view-item { + height: 24px !important; + line-height: 22px !important; + font-size: 11px !important; + border: 1px solid #dde1e6 !important; + background: #f0f2f5 !important; + color: #4a5568 !important; + margin-top: 3px !important; + padding: 0 8px !important; + border-radius: 2px !important; + + &.active { + background: #1d4e89 !important; + border-color: #1d4e89 !important; + color: #ffffff !important; + } + } } -.param-unit { - font-size: 11px; - color: #909399; - margin-left: 4px; +// ── 侧边栏 Logo ────────────────────────────────────────────── +.sidebar-logo-container { + background-color: #152231 !important; + border-bottom: 1px solid #0f1a27 !important; + + .sidebar-title { + font-size: 13px !important; + font-weight: 700 !important; + color: #ecf0f1 !important; + letter-spacing: 0.5px; + } } -// 告警闪烁 -@keyframes alarmBlink { - 0%, 100% { opacity: 1; } - 50% { opacity: 0.3; } -} -.alarm-blink { - animation: alarmBlink 1s ease-in-out infinite; - color: #f5222d; +// ── 面包屑 ─────────────────────────────────────────────────── +.el-breadcrumb__inner { color: #7f8c8d !important; } +.el-breadcrumb__inner.is-link:hover { color: #1d4e89 !important; } +.el-breadcrumb__separator { color: #bdc3c7 !important; } + +// ── 右侧 aside 提示 ────────────────────────────────────────── +aside { + background: #eaf2fb; + padding: 6px 14px; + margin-bottom: 12px; + border-left: 3px solid #1d4e89; + border-radius: 2px; + line-height: 28px; + font-size: 12px; + color: #4a5568; + a { color: #1d4e89; &:hover { color: #2e86c1; } } } .link-type, .link-type:focus { - color: #1890ff; - cursor: pointer; - &:hover { color: #40a9ff; } -} - -aside { - background: #e8f4ff; - padding: 8px 16px; - margin-bottom: 16px; - border-left: 3px solid #1890ff; - border-radius: 2px; - display: block; - line-height: 32px; - font-size: 13px; - color: #606266; - a { color: #1890ff; &:hover { color: #40a9ff; } } + color: #1d4e89; cursor: pointer; + &:hover { color: #2979cc; } } .sub-navbar { - height: 50px; - line-height: 50px; - position: relative; - width: 100%; - text-align: right; - padding-right: 20px; - background: linear-gradient(90deg, #1565c0 0%, #1890ff 100%); - - .subtitle { font-size: 16px; color: #fff; letter-spacing: 1px; } + height: 40px; line-height: 40px; + position: relative; width: 100%; + text-align: right; padding-right: 16px; + background: linear-gradient(90deg, #1c2b3a 0%, #1d4e89 100%); + .subtitle { font-size: 13px; color: #fff; } } -.components-container { - margin: 20px 30px; - position: relative; +.components-container { margin: 16px 24px; position: relative; } + +// ── 机组状态指示 ───────────────────────────────────────────── +.status-dot { + display: inline-block; + width: 7px; height: 7px; + border-radius: 50%; + margin-right: 5px; + &.running { background-color: #2471a3; box-shadow: 0 0 4px #2471a3; } + &.stopped { background-color: #c0392b; box-shadow: 0 0 4px #c0392b; } + &.standby { background-color: #d68910; box-shadow: 0 0 4px #d68910; } + &.offline { background-color: #95a5a6; } } +// ── 工艺参数数值 ───────────────────────────────────────────── +.param-value { + font-family: 'Courier New', Courier, monospace; + font-size: 18px; font-weight: 700; + color: #1d4e89; letter-spacing: 1px; +} +.param-unit { font-size: 11px; color: #7f8c8d; margin-left: 3px; } + +// ── 告警闪烁 ───────────────────────────────────────────────── +@keyframes alarmBlink { 0%,100%{opacity:1} 50%{opacity:.3} } +.alarm-blink { animation: alarmBlink 1s ease-in-out infinite; color: #c0392b; } + +// ── 滚动条 ─────────────────────────────────────────────────── +::-webkit-scrollbar { width: 5px; height: 5px; } +::-webkit-scrollbar-track { background: #f0f2f5; } +::-webkit-scrollbar-thumb { background: #bdc3c7; border-radius: 3px; } +::-webkit-scrollbar-thumb:hover { background: #95a5a6; } + .multiselect { line-height: 16px; } .multiselect--active { z-index: 1000 !important; } diff --git a/ruoyi-ui/src/assets/styles/sidebar.scss b/ruoyi-ui/src/assets/styles/sidebar.scss index c5e7230b..d7b32b13 100644 --- a/ruoyi-ui/src/assets/styles/sidebar.scss +++ b/ruoyi-ui/src/assets/styles/sidebar.scss @@ -80,7 +80,7 @@ .submenu-title-noDropdown, .el-submenu__title { &:hover { - background-color: rgba(255, 255, 255, 0.06) !important; + background-color: rgba(255,255,255,.06) !important; } } @@ -89,26 +89,21 @@ } .el-menu-item.is-active { - background-color: #1565c0 !important; + background-color: #1d4e89 !important; color: #ffffff !important; + border-left: 3px solid #5dade2; } & .nest-menu .el-submenu>.el-submenu__title, & .el-submenu .el-menu-item { min-width: $base-sidebar-width !important; - - &:hover { - background-color: rgba(255, 255, 255, 0.06) !important; - } + &:hover { background-color: rgba(255,255,255,.06) !important; } } & .theme-dark .nest-menu .el-submenu>.el-submenu__title, & .theme-dark .el-submenu .el-menu-item { background-color: $base-sub-menu-background !important; - - &:hover { - background-color: $base-sub-menu-hover !important; - } + &:hover { background-color: $base-sub-menu-hover !important; } } } diff --git a/ruoyi-ui/src/assets/styles/variables.scss b/ruoyi-ui/src/assets/styles/variables.scss index e93c995c..69974f1e 100644 --- a/ruoyi-ui/src/assets/styles/variables.scss +++ b/ruoyi-ui/src/assets/styles/variables.scss @@ -1,32 +1,31 @@ // ============================================================ -// 冷轧双机架二级控制系统 — 工业标准配色 -// 深色侧边栏 + 浅灰内容区（工业管理系统经典布局） +// 冷轧双机架二级控制系统 — 金属灰 · 深蓝工业主题 // ============================================================ -// btn.scss 依赖变量 -$blue: #1565c0; -$light-blue:#1890ff; -$red: #f5222d; -$pink: #eb2f96; -$green: #52c41a; -$tiffany: #13c2c2; -$yellow: #faad14; -$panGreen: #52c41a; +// btn.scss 依赖变量（全部替换为金属/蓝色系，禁用绿色） +$blue: #1d4e89; +$light-blue:#2979cc; +$red: #c0392b; +$pink: #a93226; +$green: #2e86c1; // 原绿色位置改用蓝色 +$tiffany: #2471a3; +$yellow: #d68910; +$panGreen: #2e86c1; -// 侧边栏（深钢蓝） -$base-menu-color: #b8cce4; +// ── 侧边栏（深钢色）────────────────────────────────────────── +$base-menu-color: #b0bec5; // 未激活文字：金属浅灰 $base-menu-color-active: #ffffff; -$base-menu-background: #1b2a3b; -$base-logo-title-color: #ffffff; +$base-menu-background: #1c2b3a; // 深钢蓝 +$base-logo-title-color: #ecf0f1; $base-menu-light-color: rgba(0,0,0,.65); $base-menu-light-background: #ffffff; -$base-logo-light-title-color:#001529; +$base-logo-light-title-color:#1c2b3a; -$base-sub-menu-background: #132233; -$base-sub-menu-hover: #0d1e2e; +$base-sub-menu-background: #152231; +$base-sub-menu-hover: #0f1a27; -$base-sidebar-width: 210px; +$base-sidebar-width: 200px; // webpack JS/SCSS 变量共享 :export { diff --git a/ruoyi-ui/src/views/index.vue b/ruoyi-ui/src/views/index.vue index 0449ac49..894d3ac9 100644 --- a/ruoyi-ui/src/views/index.vue +++ b/ruoyi-ui/src/views/index.vue @@ -1,169 +1,366 @@ - - + +