diff --git a/frontend/src/assets/images/login-bg.jpg b/frontend/src/assets/images/login-bg.jpg new file mode 100644 index 0000000..540596e Binary files /dev/null and b/frontend/src/assets/images/login-bg.jpg differ diff --git a/frontend/src/views/Layout.vue b/frontend/src/views/Layout.vue index 6bcbb2a..90bc0d8 100644 --- a/frontend/src/views/Layout.vue +++ b/frontend/src/views/Layout.vue @@ -4,10 +4,10 @@
-
推拉酸洗线 · L2 过程控制系统
+
二级过程控制系统
机组运行 diff --git a/frontend/src/views/Login.vue b/frontend/src/views/Login.vue index b102cc5..0e55f60 100644 --- a/frontend/src/views/Login.vue +++ b/frontend/src/views/Login.vue @@ -1,34 +1,49 @@ @@ -67,101 +82,192 @@ export default { @import '@/assets/styles/variables'; .login-page { + position: relative; height: 100vh; display: flex; align-items: center; - justify-content: center; - background: $bg-base; -} - -.login-panel { - width: 360px; - background: $bg-card; - border: 1px solid $border; - border-top: 3px solid $sms-teal; - border-radius: 2px; + justify-content: space-between; + padding: 0 9vw; + background: url('~@/assets/images/login-bg.jpg') center/cover no-repeat; overflow: hidden; } -.login-header { - display: flex; - align-items: center; - gap: 12px; - padding: 20px 24px; - background: $bg-panel; - border-bottom: 1px solid $border; +// 主题色渐变蒙版（左深红 → 右半透明，保证文字与卡片可读） +.login-overlay { + position: absolute; + inset: 0; + background: + linear-gradient(105deg, rgba($sms-teal, .82) 0%, rgba(28, 22, 24, .72) 46%, rgba(20, 16, 18, .55) 100%); } -.header-mark { - width: 36px; - height: 36px; - background: $sms-teal; - color: $bg-base; - font-size: 18px; +// ─── 左侧品牌 ─── +.login-brand { + position: relative; + z-index: 1; + color: #fff; + max-width: 480px; +} + +.brand-logo { + display: flex; + align-items: center; + gap: 16px; +} + +.brand-mark { + width: 60px; + height: 60px; + background: #fff; + color: $sms-teal; + font-size: 32px; font-weight: 900; display: flex; align-items: center; justify-content: center; - border-radius: 2px; + border-radius: 8px; + box-shadow: 0 6px 20px rgba(0, 0, 0, .3); flex-shrink: 0; } -.header-title { - font-size: 14px; - font-weight: 700; - color: $text-primary; +.brand-title { + font-size: 38px; + font-weight: 800; + letter-spacing: 6px; + line-height: 1.1; +} + +.brand-en { + font-size: 12px; + letter-spacing: 3px; + opacity: .8; + margin-top: 4px; +} + +.brand-slogan { + margin-top: 26px; + font-size: 20px; + font-weight: 600; letter-spacing: 2px; } -.header-sub { - font-size: 10px; - color: $text-secondary; - margin-top: 3px; - letter-spacing: .3px; +.brand-desc { + margin-top: 12px; + font-size: 14px; + letter-spacing: 1px; + opacity: .85; } -.login-body { - padding: 24px; +// ─── 右侧登录卡片 ─── +.login-card { + position: relative; + z-index: 1; + width: 380px; + background: #fff; + border-radius: 12px; + border-top: 4px solid $sms-teal; + padding: 40px 36px 28px; + box-shadow: 0 18px 50px rgba(0, 0, 0, .35); +} + +.card-title { + font-size: 22px; + font-weight: 700; + color: $text-primary; + letter-spacing: 1px; +} + +.card-tip { + margin-top: 6px; + font-size: 13px; + color: $text-muted; + margin-bottom: 26px; } .field-group { - margin-bottom: 14px; + margin-bottom: 18px; .field-label { - font-size: 10px; - font-weight: 700; + font-size: 13px; color: $text-secondary; - text-transform: uppercase; - letter-spacing: .6px; - margin-bottom: 6px; + margin-bottom: 8px; } +} - .kv-input { padding: 7px 9px; font-size: 13px; } +.login-input { + width: 100%; + height: 42px; + padding: 0 14px; + font-size: 14px; + color: $text-primary; + background: $bg-panel; + border: 1px solid $border; + border-radius: 8px; + outline: none; + transition: all .15s; + + &::placeholder { color: $text-muted; } + &:focus { + background: #fff; + border-color: $sms-teal; + box-shadow: 0 0 0 3px rgba($sms-teal, .12); + } } .login-error { - margin-top: 8px; - font-size: 11px; + font-size: 13px; color: $accent-red; - padding: 5px 8px; + padding: 8px 12px; background: rgba($accent-red, .08); - border-left: 2px solid $accent-red; + border-radius: 6px; + margin-bottom: 14px; } -.login-footer { - padding: 8px 24px; - background: $bg-panel; - border-top: 1px solid $border; - font-size: 10px; - color: $text-muted; +.login-btn { + width: 100%; + height: 44px; + margin-top: 8px; + font-size: 16px; + font-weight: 600; + letter-spacing: 4px; + color: #fff; + background: $sms-teal; + border: none; + border-radius: 8px; + cursor: pointer; + transition: all .15s; + + &:hover { background: $sms-teal-dim; box-shadow: 0 6px 16px rgba($sms-teal, .35); } + &:active { transform: translateY(1px); } + &:disabled { opacity: .6; cursor: not-allowed; } +} + +.login-foot { display: flex; align-items: center; - gap: 6px; - letter-spacing: .3px; + gap: 7px; + margin-top: 22px; + font-size: 12px; + color: $text-muted; - .dot { - width: 5px; height: 5px; border-radius: 50%; display: inline-block; - &.g { background: $status-run; } - } + .dot { width: 7px; height: 7px; border-radius: 50%; background: $status-run; box-shadow: 0 0 6px rgba($status-run, .6); } + .ver { margin-left: auto; } +} + +.copyright { + position: absolute; + bottom: 22px; + left: 0; + right: 0; + text-align: center; + z-index: 1; + font-size: 12px; + color: rgba(255, 255, 255, .65); + letter-spacing: 1px; +} + +// 窄屏：隐藏品牌区，卡片居中 +@media (max-width: 900px) { + .login-page { justify-content: center; padding: 0 20px; } + .login-brand { display: none; } } diff --git a/frontend/src/views/Material.vue b/frontend/src/views/Material.vue index 3e987e6..6d81dbc 100644 --- a/frontend/src/views/Material.vue +++ b/frontend/src/views/Material.vue @@ -72,7 +72,7 @@
推拉酸洗线 - 物料跟踪总图
- + @@ -84,12 +84,12 @@ - {{ eq.label }} + {{ eq.label }} - - + + @@ -97,62 +97,62 @@ - {{ dryer.t1.toFixed(0) }}/{{ dryer.t2.toFixed(0) }}/{{ dryer.t3.toFixed(0) }}°C + {{ dryer.t1.toFixed(0) }}/{{ dryer.t2.toFixed(0) }}/{{ dryer.t3.toFixed(0) }}°C - + - + - - + + - WELD + WELD - - + + 焊缝位置 {{ (weld.position * 100).toFixed(1) }}% 酸洗液 漂洗水 - + 当前设备 - — — 带钢运行方向 → + — — 带钢运行方向 →
@@ -360,11 +360,11 @@ const EQUIPMENTS = [ ] const SECTION_COLORS = { - '入口段': '#5a8fc8', - '酸洗段': '#ffaa44', - '清洗段': '#3aa0c8', - '烘干段': '#e87a3a', - '出口段': '#88c070', + '入口段': '#4a7fbe', + '酸洗段': '#d98a2a', + '清洗段': '#2f93b8', + '烘干段': '#d96a2a', + '出口段': '#5ba84e', } // 默认辊缝值 (mm) @@ -690,7 +690,7 @@ export default { .status-item .kv-unit { color: $text-muted; font-size: 10px; margin-left: 2px; } .line-wrap { padding: 0; } -.line-body { padding: 6px 10px 10px; background: #0a1218; } +.line-body { padding: 6px 10px 10px; background: #f2f5f9; } .line-svg { width: 100%; height: 305px; display: block; } .split-row { display: grid; grid-template-columns: 1fr 3fr; gap: 10px; align-items: stretch; }