style: 顶部横向导航 + 登录页工业重设计 + 清除 placeholder 文本
- Layout: 恢复顶部横向导航，图标换为 SVG 几何图形 - Login: 西门子风格重设计，去掉渐变/圆角/placeholder - 全局清除所有输入框 placeholder 说明文字 - 修复 Equipment.vue 重复 style 属性
This commit is contained in:
@@ -22,26 +22,22 @@
|
||||
<div class="clock">{{ clock }}</div>
|
||||
</div>
|
||||
|
||||
<!-- ─── BODY ─── -->
|
||||
<div class="body-area">
|
||||
|
||||
<!-- ─── SIDEBAR ─── -->
|
||||
<div class="sidebar">
|
||||
<div
|
||||
v-for="item in menuItems"
|
||||
:key="item.path"
|
||||
:class="['nav-item', { active: $route.path === item.path }]"
|
||||
@click="$router.push(item.path)"
|
||||
>
|
||||
<span class="nav-icon" v-html="item.icon"></span>
|
||||
<span class="nav-label">{{ item.title }}</span>
|
||||
</div>
|
||||
<!-- ─── NAV BAR ─── -->
|
||||
<div class="nav-bar">
|
||||
<div
|
||||
v-for="item in menuItems"
|
||||
:key="item.path"
|
||||
:class="['nav-item', { active: $route.path === item.path }]"
|
||||
@click="$router.push(item.path)"
|
||||
>
|
||||
<span class="nav-icon" v-html="item.icon"></span>
|
||||
<span class="nav-label">{{ item.title }}</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- ─── MAIN ─── -->
|
||||
<div class="main-area">
|
||||
<router-view />
|
||||
</div>
|
||||
<!-- ─── MAIN ─── -->
|
||||
<div class="main-area">
|
||||
<router-view />
|
||||
</div>
|
||||
|
||||
<!-- ─── FOOTER ─── -->
|
||||
@@ -59,18 +55,18 @@
|
||||
import { mapGetters } from 'vuex'
|
||||
|
||||
const IC = {
|
||||
dashboard: `<svg viewBox="0 0 16 16" fill="currentColor"><rect x="1" y="1" width="6" height="6"/><rect x="9" y="1" width="6" height="6"/><rect x="1" y="9" width="6" height="6"/><rect x="9" y="9" width="6" height="6"/></svg>`,
|
||||
material: `<svg viewBox="0 0 16 16" fill="currentColor"><path d="M8 1L1 4.5v7L8 15l7-3.5v-7L8 1zm0 2l5 2.5v5.5L8 13 3 11V5.5L8 3z"/></svg>`,
|
||||
production: `<svg viewBox="0 0 16 16" fill="currentColor"><rect x="1" y="9" width="3" height="6"/><rect x="5.5" y="6" width="3" height="9"/><rect x="10" y="2" width="3" height="13"/></svg>`,
|
||||
plan: `<svg viewBox="0 0 16 16" fill="currentColor"><rect x="2" y="3" width="12" height="2"/><rect x="2" y="7" width="12" height="2"/><rect x="2" y="11" width="7" height="2"/></svg>`,
|
||||
downtime: `<svg viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="1.5"><circle cx="8" cy="8" r="6"/><rect x="5.5" y="5" width="2" height="6" fill="currentColor" stroke="none"/><rect x="8.5" y="5" width="2" height="6" fill="currentColor" stroke="none"/></svg>`,
|
||||
equipment: `<svg viewBox="0 0 16 16" fill="currentColor"><path d="M8 5.5a2.5 2.5 0 100 5 2.5 2.5 0 000-5zm0 1.5a1 1 0 110 2 1 1 0 010-2zM6.8 1l-.4 1.8a5.2 5.2 0 00-1.6 1L3 3.3 1.3 6l1.5 1.1A5 5 0 002.5 8c0 .3 0 .6.05.9L1.3 10 3 12.7l1.8-.5c.48.4 1 .74 1.6 1L6.8 15h2.4l.4-1.8c.6-.26 1.12-.6 1.6-1l1.8.5L14.7 10l-1.3-1.1c.04-.3.06-.6.06-.9 0-.3-.02-.6-.06-.9L14.7 6 13 3.3l-1.8.5a5.2 5.2 0 00-1.6-1L9.2 1H6.8z"/></svg>`,
|
||||
inspection: `<svg viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="1.5"><circle cx="6.5" cy="6.5" r="4.5"/><line x1="9.9" y1="9.9" x2="14" y2="14"/><circle cx="6.5" cy="6.5" r="1.5" fill="currentColor" stroke="none"/></svg>`,
|
||||
message: `<svg viewBox="0 0 16 16" fill="currentColor"><path d="M1 2h14v10H9.5L8 14.5 6.5 12H1V2zm1.5 1.5v7h4l1.5 2.2 1.5-2.2h4v-7h-11z"/></svg>`,
|
||||
process: `<svg viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"><path d="M1 8 Q3 3 5 8 Q7 13 9 8 Q11 3 13 8 Q14 10.5 15 8"/></svg>`,
|
||||
tension: `<svg viewBox="0 0 16 16" fill="currentColor"><path d="M8 1a7 7 0 100 14A7 7 0 008 1zm0 1.5a5.5 5.5 0 110 11 5.5 5.5 0 010-11z"/><line x1="8" y1="8" x2="11.5" y2="5" stroke="currentColor" stroke-width="1.5"/><circle cx="8" cy="8" r="1.2"/></svg>`,
|
||||
quality: `<svg viewBox="0 0 16 16" fill="currentColor"><path d="M8 1l1.9 4.2 4.6.5-3.4 3.1 1 4.5L8 11.2l-4.1 2.1 1-4.5L1.5 5.7l4.6-.5z"/></svg>`,
|
||||
capacity: `<svg viewBox="0 0 16 16" fill="currentColor"><rect x="1" y="10" width="3" height="5"/><rect x="5.5" y="7" width="3" height="8"/><rect x="10" y="4" width="3" height="11"/></svg>`,
|
||||
dashboard: `<svg viewBox="0 0 14 14" fill="currentColor"><rect x="1" y="1" width="5" height="5"/><rect x="8" y="1" width="5" height="5"/><rect x="1" y="8" width="5" height="5"/><rect x="8" y="8" width="5" height="5"/></svg>`,
|
||||
material: `<svg viewBox="0 0 14 14" fill="currentColor"><path d="M7 1L1 4v6l6 3 6-3V4L7 1zm0 1.8L11.5 5v4.5L7 11.8 2.5 9.5V5L7 2.8z"/></svg>`,
|
||||
production: `<svg viewBox="0 0 14 14" fill="currentColor"><rect x="1" y="8" width="3" height="5"/><rect x="5.5" y="5" width="3" height="8"/><rect x="10" y="2" width="3" height="11"/></svg>`,
|
||||
plan: `<svg viewBox="0 0 14 14" fill="currentColor"><rect x="2" y="2.5" width="10" height="2"/><rect x="2" y="6" width="10" height="2"/><rect x="2" y="9.5" width="6" height="2"/></svg>`,
|
||||
downtime: `<svg viewBox="0 0 14 14" fill="none" stroke="currentColor" stroke-width="1.4"><circle cx="7" cy="7" r="5.5"/><rect x="5" y="4.5" width="1.8" height="5" fill="currentColor" stroke="none"/><rect x="7.2" y="4.5" width="1.8" height="5" fill="currentColor" stroke="none"/></svg>`,
|
||||
equipment: `<svg viewBox="0 0 14 14" fill="currentColor"><path d="M7 4.5a2.5 2.5 0 100 5 2.5 2.5 0 000-5zm0 1.4a1.1 1.1 0 110 2.2A1.1 1.1 0 017 5.9zM5.9 1l-.4 1.6A4.6 4.6 0 003.9 3.8L2.3 3.2 1.2 5.3l1.3 1A4.4 4.4 0 002.2 7c0 .25.02.5.06.75L1.2 8.7l1.1 2.1 1.6-.6c.44.37.9.68 1.6.93L5.9 13h2.2l.4-1.6c.6-.25 1.1-.56 1.6-.93l1.6.6 1.1-2.1-1.3-1c.04-.25.06-.5.06-.75 0-.25-.02-.5-.06-.75l1.3-1-1.1-2.1-1.6.6A4.6 4.6 0 008.1 2.6L7.7 1H5.9z"/></svg>`,
|
||||
inspection: `<svg viewBox="0 0 14 14" fill="none" stroke="currentColor" stroke-width="1.4"><circle cx="5.5" cy="5.5" r="4"/><line x1="8.5" y1="8.5" x2="13" y2="13"/><circle cx="5.5" cy="5.5" r="1.2" fill="currentColor" stroke="none"/></svg>`,
|
||||
message: `<svg viewBox="0 0 14 14" fill="currentColor"><path d="M1 1.5h12v9H8.5L7 12.5 5.5 10.5H1V1.5zm1.3 1.3v6.4H6l1 1.6 1-1.6h3.7V2.8H2.3z"/></svg>`,
|
||||
process: `<svg viewBox="0 0 14 14" fill="none" stroke="currentColor" stroke-width="1.4" stroke-linecap="round"><path d="M1 7 Q2.5 3 4 7 Q5.5 11 7 7 Q8.5 3 10 7 Q11 9 13 7"/></svg>`,
|
||||
tension: `<svg viewBox="0 0 14 14" fill="currentColor"><path d="M7 1a6 6 0 100 12A6 6 0 007 1zm0 1.3a4.7 4.7 0 110 9.4A4.7 4.7 0 017 2.3z"/><line x1="7" y1="7" x2="10" y2="4.5" stroke="currentColor" stroke-width="1.3"/><circle cx="7" cy="7" r="1.1"/></svg>`,
|
||||
quality: `<svg viewBox="0 0 14 14" fill="currentColor"><path d="M7 1l1.6 3.7 4 .5-3 2.7.9 4L7 9.8l-3.5 1.9.9-4-3-2.7 4-.5z"/></svg>`,
|
||||
capacity: `<svg viewBox="0 0 14 14" fill="currentColor"><rect x="1" y="9" width="2.5" height="4"/><rect x="5" y="6.5" width="2.5" height="6.5"/><rect x="9" y="3.5" width="2.5" height="9.5"/></svg>`,
|
||||
}
|
||||
|
||||
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;
|
||||
|
||||
Reference in New Issue
Block a user