diff --git a/frontend/src/views/Equipment.vue b/frontend/src/views/Equipment.vue index 6d2905d..186a9fe 100644 --- a/frontend/src/views/Equipment.vue +++ b/frontend/src/views/Equipment.vue @@ -19,7 +19,7 @@ -
+
{{ s.label }} {{ s.count }} diff --git a/frontend/src/views/Layout.vue b/frontend/src/views/Layout.vue index 6cb2467..ad3fa1b 100644 --- a/frontend/src/views/Layout.vue +++ b/frontend/src/views/Layout.vue @@ -22,26 +22,22 @@
{{ clock }}
- -
- - -
-
- - {{ item.title }} -
+ +
+
+ + {{ item.title }}
+
- -
- -
+ +
+
@@ -59,18 +55,18 @@ import { mapGetters } from 'vuex' const IC = { - dashboard: ``, - material: ``, - production: ``, - plan: ``, - downtime: ``, - equipment: ``, - inspection: ``, - message: ``, - process: ``, - tension: ``, - quality: ``, - capacity: ``, + dashboard: ``, + material: ``, + production: ``, + plan: ``, + downtime: ``, + equipment: ``, + inspection: ``, + message: ``, + process: ``, + tension: ``, + quality: ``, + capacity: ``, } const MENU = [ @@ -135,7 +131,7 @@ export default { // ─── TOP BAR ─── .top-bar { - height: 44px; + height: 46px; background: $bg-secondary; border-bottom: 1px solid $border; display: flex; @@ -148,29 +144,28 @@ export default { .logo { display: flex; align-items: center; - gap: 7px; + gap: 8px; flex-shrink: 0; } .logo-mark { - width: 24px; - height: 24px; + width: 26px; + height: 26px; background: $sms-teal; color: $bg-base; - font-size: 13px; + font-size: 14px; font-weight: 900; display: flex; align-items: center; justify-content: center; - border-radius: 1px; - letter-spacing: 0; + border-radius: 2px; } .logo-text { font-size: 12px; font-weight: 700; color: $text-primary; - letter-spacing: 1.5px; + letter-spacing: 1.8px; text-transform: uppercase; } @@ -180,7 +175,6 @@ export default { border-left: 1px solid $border; padding-left: 14px; white-space: nowrap; - letter-spacing: .3px; } .spacer { flex: 1; } @@ -195,8 +189,8 @@ export default { display: flex; align-items: center; gap: 5px; - padding: 2px 9px; - border-radius: 1px; + padding: 2px 8px; + border-radius: 2px; font-size: 10px; font-weight: 700; letter-spacing: .5px; @@ -209,9 +203,9 @@ export default { display: inline-block; } - &.run { background: rgba($status-run, .12); color: $status-run; border: 1px solid rgba($status-run, .4); .dot { background: $status-run; } } - &.warn { background: rgba($status-warn, .12); color: $status-warn; border: 1px solid rgba($status-warn, .4); .dot { background: $status-warn; } } - &.stop { background: rgba($status-stop, .1); color: $status-stop; border: 1px solid $border; .dot { background: $status-stop; } } + &.run { background: rgba($status-run,.12); color: $status-run; border: 1px solid rgba($status-run,.35); .dot { background: $status-run; } } + &.warn { background: rgba($status-warn,.12); color: $status-warn; border: 1px solid rgba($status-warn,.35); .dot { background: $status-warn; } } + &.stop { background: rgba($text-muted,.08); color: $text-muted; border: 1px solid $border; .dot { background: $text-muted; } } } .top-user { @@ -221,8 +215,8 @@ export default { font-size: 11px; color: $text-secondary; - .divider { color: $border-light; } - .logout { cursor: pointer; color: $text-muted; &:hover { color: $sms-teal; } } + .divider { color: $border; } + .logout { cursor: pointer; color: $text-muted; transition: color .12s; &:hover { color: $sms-teal; } } } .clock { @@ -230,72 +224,52 @@ export default { font-size: 13px; font-weight: 700; color: $sms-teal; - min-width: 70px; + min-width: 68px; text-align: right; letter-spacing: 1px; } -// ─── BODY ─── -.body-area { - flex: 1; +// ─── NAV BAR ─── +.nav-bar { + height: 36px; + background: $bg-primary; + border-bottom: 1px solid $border; display: flex; - overflow: hidden; -} - -// ─── SIDEBAR ─── -.sidebar { - width: 158px; + align-items: stretch; + overflow-x: auto; flex-shrink: 0; - background: $bg-secondary; - border-right: 1px solid $border; - overflow-y: auto; scrollbar-width: none; &::-webkit-scrollbar { display: none; } - padding: 6px 0; } .nav-item { display: flex; align-items: center; - gap: 9px; - padding: 9px 14px; + gap: 6px; + padding: 0 14px; font-size: 11px; + font-weight: 500; color: $text-secondary; cursor: pointer; - user-select: none; - border-left: 2px solid transparent; + white-space: nowrap; + border-bottom: 2px solid transparent; transition: all .12s; - letter-spacing: .2px; + user-select: none; - &:hover { - background: rgba($sms-teal, .06); - color: $text-primary; - } - - &.active { - background: rgba($sms-teal, .10); - color: $sms-teal; - border-left-color: $sms-teal; - } + &:hover { color: $text-primary; background: rgba($sms-teal, .05); } + &.active { color: $sms-teal; border-bottom-color: $sms-teal; background: rgba($sms-teal, .07); } } .nav-icon { - width: 16px; - height: 16px; + width: 13px; + height: 13px; flex-shrink: 0; display: flex; align-items: center; justify-content: center; - opacity: .85; + opacity: .9; - ::v-deep svg { - width: 16px; - height: 16px; - } -} - -.nav-label { - white-space: nowrap; + ::v-deep svg { width: 13px; height: 13px; } } // ─── MAIN AREA ─── @@ -310,12 +284,12 @@ export default { scrollbar-width: thin; scrollbar-color: $border transparent; &::-webkit-scrollbar { width: 5px; } - &::-webkit-scrollbar-thumb { background: $border-light; border-radius: 1px; } + &::-webkit-scrollbar-thumb { background: $border; border-radius: 1px; } } // ─── FOOTER ─── .footer { - height: 24px; + height: 22px; background: $bg-secondary; border-top: 1px solid $border; display: flex; diff --git a/frontend/src/views/Login.vue b/frontend/src/views/Login.vue index ddbe61f..b102cc5 100644 --- a/frontend/src/views/Login.vue +++ b/frontend/src/views/Login.vue @@ -1,44 +1,32 @@