diff --git a/frontend/src/assets/styles/global.scss b/frontend/src/assets/styles/global.scss index 2bc4893..6d0a204 100644 --- a/frontend/src/assets/styles/global.scss +++ b/frontend/src/assets/styles/global.scss @@ -14,19 +14,21 @@ --accent-yellow: #{$accent-yellow}; --accent-red: #{$accent-red}; --accent-cyan: #{$accent-cyan}; + --sms-teal: #{$sms-teal}; --sms-blue: #{$sms-blue}; - --sms-highlight: #{$sms-highlight}; --status-run: #{$status-run}; --status-warn: #{$status-warn}; --status-fault: #{$status-fault}; --font-mono: #{$font-mono}; + // 向后兼容旧变量名 + --sms-highlight: #{$sms-teal}; } * { box-sizing: border-box; margin: 0; padding: 0; } body { font-family: $font-main; - background: $bg-primary; + background: $bg-base; color: $text-primary; font-size: 13px; } @@ -35,54 +37,59 @@ body { .card { background: $bg-card; border: 1px solid $border; - border-radius: 6px; + border-radius: 2px; overflow: hidden; &-header { display: flex; align-items: center; gap: 8px; - padding: 8px 14px; + padding: 7px 12px; background: $bg-panel; border-bottom: 1px solid $border; - font-size: 12px; - font-weight: 600; - color: $sms-highlight; - letter-spacing: .4px; + border-left: 3px solid $sms-teal; + font-size: 11px; + font-weight: 700; + color: $text-primary; + letter-spacing: .6px; + text-transform: uppercase; .ch-badge { margin-left: auto; font-size: 10px; - padding: 1px 8px; - border-radius: 8px; - background: rgba(0,200,255,.1); - color: $sms-highlight; - border: 1px solid rgba(0,200,255,.3); + padding: 1px 6px; + border-radius: 1px; + background: rgba($sms-teal, .12); + color: $sms-teal; + border: 1px solid rgba($sms-teal, .3); + font-weight: 600; + letter-spacing: .4px; } } - &-body { padding: 12px 14px; } + &-body { padding: 12px; } } // ─── 指标卡 ─── .metric-box { background: $bg-panel; border: 1px solid $border; - border-radius: 5px; - padding: 10px 14px; + border-top: 2px solid $sms-teal; + border-radius: 2px; + padding: 10px 12px; display: flex; flex-direction: column; gap: 4px; - .mb-label { font-size: 11px; color: $text-secondary; } + .mb-label { font-size: 10px; color: $text-secondary; text-transform: uppercase; letter-spacing: .5px; } .mb-value { - font-size: 22px; + font-size: 24px; font-family: $font-mono; font-weight: 700; - color: $sms-highlight; - line-height: 1; + color: $sms-teal; + line-height: 1.1; } - .mb-unit { font-size: 11px; color: $text-muted; } + .mb-unit { font-size: 10px; color: $text-muted; } } // ─── 数据表格 ─── @@ -92,25 +99,29 @@ body { font-size: 12px; th { - background: $bg-panel; + background: $bg-secondary; color: $text-secondary; - font-weight: 600; - padding: 7px 10px; + font-weight: 700; + padding: 6px 10px; text-align: left; - border-bottom: 1px solid $border; + border-bottom: 1px solid $border-light; white-space: nowrap; + text-transform: uppercase; + font-size: 10px; + letter-spacing: .5px; } td { padding: 6px 10px; - border-bottom: 1px solid rgba(48,54,61,.5); + border-bottom: 1px solid $border; color: $text-primary; font-family: $font-mono; + font-size: 12px; } - tr:hover td { background: rgba(255,255,255,.02); } + tr:hover td { background: rgba($sms-teal, .04); } - .td-num { color: $sms-highlight; } + .td-num { color: $sms-teal; } .td-ok { color: $accent-green; } .td-warn { color: $accent-yellow; } .td-err { color: $accent-red; } @@ -119,87 +130,119 @@ body { .table-scroll { overflow-x: auto; - &::-webkit-scrollbar { height: 4px; } - &::-webkit-scrollbar-thumb { background: $border; } + &::-webkit-scrollbar { height: 3px; } + &::-webkit-scrollbar-thumb { background: $border-light; } } // ─── Badge ─── .badge { display: inline-block; - padding: 1px 8px; - border-radius: 8px; - font-size: 11px; - font-weight: 600; + padding: 1px 7px; + border-radius: 1px; + font-size: 10px; + font-weight: 700; + letter-spacing: .4px; + text-transform: uppercase; - &-green { background: #1a3a1f; color: $accent-green; border: 1px solid $accent-green; } - &-yellow { background: #3a2a00; color: $accent-yellow; border: 1px solid $accent-yellow; } - &-red { background: #3a0a0a; color: $accent-red; border: 1px solid $accent-red; } - &-blue { background: rgba(0,120,212,.15); color: $sms-highlight; border: 1px solid rgba(0,200,255,.3); } - &-gray { background: #222; color: $text-muted; border: 1px solid $border; } + &-green { background: rgba($accent-green, .15); color: $accent-green; border-left: 2px solid $accent-green; } + &-yellow { background: rgba($accent-yellow,.15); color: $accent-yellow; border-left: 2px solid $accent-yellow; } + &-red { background: rgba($accent-red, .15); color: $accent-red; border-left: 2px solid $accent-red; } + &-blue { background: rgba($sms-teal, .15); color: $sms-teal; border-left: 2px solid $sms-teal; } + &-gray { background: rgba($text-muted, .1); color: $text-muted; border-left: 2px solid $text-muted; } } // ─── 按钮 ─── .btn { - padding: 5px 14px; - border-radius: 4px; + padding: 4px 14px; + border-radius: 2px; border: 1px solid; - font-size: 12px; - font-weight: 600; + font-size: 11px; + font-weight: 700; cursor: pointer; - transition: all .15s; + transition: all .12s; user-select: none; font-family: $font-main; + letter-spacing: .3px; + text-transform: uppercase; - &-primary { background: $sms-blue; border-color: $sms-blue; color: #fff; &:hover { background: #1086e0; } } - &-success { background: #1a3a1f; border-color: $accent-green; color: $accent-green; &:hover { background: $accent-green; color: #000; } } - &-danger { background: #3a0a0a; border-color: $accent-red; color: $accent-red; } - &-outline { background: transparent; border-color: $border; color: $text-secondary; &:hover { border-color: $sms-highlight; color: $sms-highlight; } } + &-primary { + background: $sms-blue; + border-color: $sms-blue; + color: #fff; + &:hover { background: lighten($sms-blue, 8%); } + &:disabled { opacity: .5; cursor: not-allowed; } + } + &-success { + background: rgba($accent-green, .12); + border-color: $accent-green; + color: $accent-green; + &:hover { background: rgba($accent-green, .22); } + } + &-danger { + background: rgba($accent-red, .12); + border-color: $accent-red; + color: $accent-red; + } + &-outline { + background: transparent; + border-color: $border-light; + color: $text-secondary; + &:hover { border-color: $sms-teal; color: $sms-teal; } + &:disabled { opacity: .4; cursor: not-allowed; } + } &.fw { width: 100%; } } // ─── 输入框 ─── .kv-input { background: $bg-input; - border: 1px solid $border; - border-radius: 3px; + border: 1px solid $border-light; + border-radius: 2px; color: $text-primary; font-family: $font-mono; font-size: 12px; - padding: 3px 7px; + padding: 4px 8px; width: 100%; outline: none; - transition: border-color .15s; - &:focus { border-color: $accent-blue; } + transition: border-color .12s; + + &:focus { border-color: $sms-teal; box-shadow: 0 0 0 1px rgba($sms-teal, .2); } + &:disabled { opacity: .5; color: $text-muted; } + + &[type="number"] { -moz-appearance: textfield; &::-webkit-inner-spin-button { display: none; } } } +select.kv-input option { background: $bg-panel; } +textarea.kv-input { resize: vertical; min-height: 64px; } + // ─── KV 参数行 ─── -.kv-grid { display: grid; grid-template-columns: auto 1fr; gap: 4px 14px; align-items: center; } -.kv-label { color: $text-secondary; font-size: 12px; white-space: nowrap; } -.kv-value { font-family: $font-mono; font-size: 12px; color: $sms-highlight; font-weight: 600; } -.kv-unit { color: $text-muted; font-size: 11px; } +.kv-grid { display: grid; grid-template-columns: auto 1fr; gap: 4px 14px; align-items: center; } +.kv-label { color: $text-secondary; font-size: 11px; white-space: nowrap; letter-spacing: .2px; } +.kv-value { font-family: $font-mono; font-size: 12px; color: $sms-teal; font-weight: 600; } +.kv-unit { color: $text-muted; font-size: 10px; } // ─── 进度条 ─── -.prog-bar-wrap { background: #111; border-radius: 3px; height: 6px; overflow: hidden; } -.prog-bar-fill { height: 100%; border-radius: 3px; transition: width .4s; } +.prog-bar-wrap { background: $bg-secondary; border-radius: 1px; height: 5px; overflow: hidden; } +.prog-bar-fill { height: 100%; border-radius: 1px; transition: width .4s; } // ─── 分区标题 ─── .sec-title { - font-size: 11px; + font-size: 10px; font-weight: 700; color: $text-muted; text-transform: uppercase; - letter-spacing: 1.2px; + letter-spacing: 1.4px; margin-bottom: 8px; padding-bottom: 4px; border-bottom: 1px solid $border; } // ─── Grid helpers ─── -.grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; } -.grid-3 { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 14px; } -.grid-4 { display: grid; grid-template-columns: repeat(4,1fr); gap: 14px; } -.grid-5 { display: grid; grid-template-columns: repeat(5,1fr); gap: 14px; } -.section-row { display: flex; gap: 14px; > .card { flex: 1; min-width: 0; } } +.grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; } +.grid-3 { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 12px; } +.grid-4 { display: grid; grid-template-columns: repeat(4,1fr); gap: 12px; } +.grid-5 { display: grid; grid-template-columns: repeat(5,1fr); gap: 12px; } +.section-row { display: flex; gap: 12px; > .card { flex: 1; min-width: 0; } } .flex-row { display: flex; gap: 10px; align-items: center; } .flex-col { display: flex; flex-direction: column; gap: 8px; } .flex-between{ display: flex; justify-content: space-between; align-items: center; } @@ -208,53 +251,59 @@ body { .fw { width: 100%; } // ─── Element UI 暗色覆写 ─── +.el-loading-mask { background: rgba($bg-card, .7) !important; } +.el-loading-spinner .path { stroke: $sms-teal !important; } + .el-dialog { background: $bg-card !important; border: 1px solid $border !important; - border-radius: 6px !important; + border-radius: 2px !important; - &__header { background: $bg-panel; border-bottom: 1px solid $border; padding: 12px 16px; } - &__title { color: $sms-highlight !important; font-size: 13px; font-weight: 600; } + &__header { background: $bg-panel; border-bottom: 1px solid $border; border-left: 3px solid $sms-teal; padding: 10px 14px; } + &__title { color: $text-primary !important; font-size: 12px; font-weight: 700; letter-spacing: .4px; text-transform: uppercase; } &__headerbtn .el-dialog__close { color: $text-secondary !important; } - &__body { background: $bg-card; color: $text-primary; padding: 16px; } - &__footer { background: $bg-panel; border-top: 1px solid $border; padding: 10px 16px; } + &__body { background: $bg-card; color: $text-primary; padding: 14px; } + &__footer { background: $bg-panel; border-top: 1px solid $border; padding: 8px 14px; } } -.el-form-item__label { color: $text-secondary !important; font-size: 12px; } +.el-form-item__label { color: $text-secondary !important; font-size: 11px; } .el-input__inner, .el-textarea__inner, .el-select .el-input__inner { background: $bg-input !important; - border-color: $border !important; + border-color: $border-light !important; + border-radius: 2px !important; color: $text-primary !important; font-family: $font-mono; font-size: 12px; - &:focus { border-color: $sms-blue !important; } + &:focus { border-color: $sms-teal !important; } } .el-select-dropdown { background: $bg-panel !important; border-color: $border !important; - .el-select-dropdown__item { color: $text-secondary; &.selected, &:hover { color: $sms-highlight; background: rgba(0,200,255,.08); } } + border-radius: 2px !important; + .el-select-dropdown__item { color: $text-secondary; &.selected, &:hover { color: $sms-teal; background: rgba($sms-teal, .08); } } } .el-date-editor .el-range-input, .el-date-editor .el-range-separator { background: transparent !important; color: $text-secondary !important; } .el-pagination { - .el-pager li { background: $bg-panel; color: $text-secondary; border: 1px solid $border; - &.active { color: $sms-highlight; border-color: $sms-highlight; } } - button { background: $bg-panel !important; color: $text-secondary !important; border: 1px solid $border; } + .el-pager li { + background: $bg-panel; color: $text-secondary; border: 1px solid $border; border-radius: 2px; + &.active { color: $sms-teal; border-color: $sms-teal; } + } + button { background: $bg-panel !important; color: $text-secondary !important; border: 1px solid $border; border-radius: 2px; } } -.el-input-number .el-input__inner { text-align: left; } - -.el-radio__label { color: $text-secondary; font-size: 12px; } -.el-radio__inner { background: $bg-input; border-color: $border; } +.el-radio__label { color: $text-secondary; font-size: 11px; } +.el-radio__inner { background: $bg-input; border-color: $border-light; } .el-radio__input.is-checked .el-radio__inner { background: $sms-blue; border-color: $sms-blue; } .el-message-box { background: $bg-card !important; border-color: $border !important; - &__title { color: $text-primary !important; } + border-radius: 2px !important; + &__title { color: $text-primary !important; font-size: 12px; } &__content { color: $text-secondary !important; } } diff --git a/frontend/src/assets/styles/variables.scss b/frontend/src/assets/styles/variables.scss index b5c4b1d..203164a 100644 --- a/frontend/src/assets/styles/variables.scss +++ b/frontend/src/assets/styles/variables.scss @@ -1,31 +1,39 @@ -// ─── 色彩系统（与参考HTML完全一致）─── -$bg-primary: #0d1117; -$bg-secondary: #161b22; -$bg-card: #1c2230; -$bg-panel: #212936; -$bg-input: #0d1117; -$border: #30363d; -$border-active: #1f6feb; +// ─── 工业暗色调色板（参考西门子 WinCC 风格）─── +$bg-base: #0b0f16; +$bg-primary: #0f1420; +$bg-secondary: #141a28; +$bg-card: #182030; +$bg-panel: #1c2538; +$bg-hover: #22304a; +$bg-input: #0b0f16; -$text-primary: #e6edf3; -$text-secondary: #8b949e; -$text-muted: #6e7681; +$border: #263044; +$border-light: #2e3d58; +$border-active:#00a3be; -$accent-blue: #1f6feb; -$accent-cyan: #00b4d8; -$accent-green: #28a745; -$accent-yellow: #f0a500; -$accent-orange: #e05a00; -$accent-red: #da3633; -$accent-purple: #8957e5; +$text-primary: #c8d6e8; +$text-secondary: #6a82a0; +$text-muted: #3e5070; -$sms-blue: #0078d4; -$sms-highlight: #00c8ff; +// 西门子主色调 - 石油蓝绿 +$sms-teal: #00a3be; +$sms-teal-dim: #007a8c; +$sms-blue: #0066b3; +$sms-blue-dim: #004d88; -$status-run: #28a745; -$status-stop: #6e7681; -$status-warn: #f0a500; -$status-fault: #da3633; +// 状态色 +$status-run: #3db86e; +$status-warn: #d4880a; +$status-fault: #c8322e; +$status-stop: #3e5070; -$font-main: 'Segoe UI', 'Microsoft YaHei', sans-serif; +$accent-green: #3db86e; +$accent-yellow: #d4880a; +$accent-red: #c8322e; +$accent-cyan: #00a3be; + +$font-main: 'Segoe UI', 'Microsoft YaHei UI', 'PingFang SC', sans-serif; $font-mono: 'Consolas', 'Courier New', monospace; + +// 向后兼容 +$sms-highlight: $sms-teal; diff --git a/frontend/src/views/Layout.vue b/frontend/src/views/Layout.vue index 1feef9e..6cb2467 100644 --- a/frontend/src/views/Layout.vue +++ b/frontend/src/views/Layout.vue @@ -3,13 +3,16 @@
- -
推拉酸洗线 L2 过程控制系统  |  PUSH-PULL PICKLING LINE
+ +
推拉酸洗线 · L2 过程控制系统
- ● 机组运行 - ● L2在线 - {{ l3StatusText }} + 机组运行 + L2 在线 + {{ l3StatusText }}
{{ user && (user.full_name || user.username) }} @@ -19,30 +22,34 @@
{{ clock }}
- -
-
- {{ item.icon }} - {{ item.title }} -
-
+ +
- -
- + +
+
+ + {{ item.title }} +
+
+ + +
+ +
-
数据库 正常
-
UDP 监听 :9000
-
L3 {{ l3StatusText }}
-
推拉酸洗线 L2 MES  v1.0.0
+
数据库
+
UDP :9000
+
L3 {{ l3StatusText }}
+
推拉酸洗线 L2 MES · v1.0.0
@@ -51,19 +58,34 @@