DeXun/pickling-mes
9
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

style: 顶部横向导航 + 登录页工业重设计 + 清除 placeholder 文本

Browse Source 
- Layout: 恢复顶部横向导航，图标换为 SVG 几何图形
- Login: 西门子风格重设计，去掉渐变/圆角/placeholder
- 全局清除所有输入框 placeholder 说明文字
- 修复 Equipment.vue 重复 style 属性
This commit is contained in:
wangyu
2026-05-27 17:04:48 +08:00
parent d4f334761f
commit fb28599365
10 changed files with 144 additions and 161 deletions
Download Patch File Download Diff File Expand all files Collapse all files

139
frontend/src/views/Login.vue
View File

@@ -1,44 +1,32 @@
<template>
<div class="login-page">
<div class="login-wrap">
<div class="login-panel">
<div class="login-header">
<div class="login-logo">SMS <span>L2</span></div>
<div class="login-title">推拉酸洗线 L2 过程控制系统</div>
<div class="login-sub">PUSH-PULL PICKLING LINE MES</div>
<div class="header-mark">S</div>
<div class="header-right">
<div class="header-title">SIMATIC L2</div>
<div class="header-sub">推拉酸洗线 过程控制系统</div>
</div>
</div>
<div class="login-form">
<div class="form-item">
<div class="form-label">用户名</div>
<input
v-model="form.username"
class="kv-input"
placeholder="请输入用户名"
@keyup.enter="handleLogin"
/>
<div class="login-body">
<div class="field-group">
<div class="field-label">用户名</div>
<input v-model="form.username" class="kv-input" autocomplete="username" @keyup.enter="handleLogin" />
</div>
<div class="form-item">
<div class="form-label">密码</div>
<input
v-model="form.password"
type="password"
class="kv-input"
placeholder="请输入密码"
@keyup.enter="handleLogin"
/>
<div class="field-group">
<div class="field-label">密码</div>
<input v-model="form.password" type="password" class="kv-input" autocomplete="current-password" @keyup.enter="handleLogin" />
</div>
<button
:class="['btn btn-primary', { loading }]"
style="width:100%;margin-top:20px;padding:9px;"
@click="handleLogin"
>
{{ loading ? '登录中...' : '登 录' }}
</button>
<div v-if="error" class="login-error">{{ error }}</div>
<button class="btn btn-primary fw" style="margin-top:18px;padding:7px;" :disabled="loading" @click="handleLogin">
{{ loading ? '验证中...' : '登录' }}
</button>
</div>
<div class="login-footer">
<span class="dot g"></span>系统就绪 &nbsp;|&nbsp; v1.0.0
<i class="dot g"></i>系统就绪
<span style="margin-left:auto;">v1.0.0</span>
</div>
</div>
</div>
@@ -57,7 +45,7 @@ export default {
methods: {
async handleLogin() {
if (!this.form.username || !this.form.password) {
this.error = '请输入用户名和密码'
this.error = '用户名和密码不能为空'
return
}
this.loading = true
@@ -83,76 +71,97 @@ export default {
display: flex;
align-items: center;
justify-content: center;
background: $bg-primary;
background-image:
radial-gradient(ellipse at 20% 50%, rgba(0,120,212,.08) 0%, transparent 60%),
radial-gradient(ellipse at 80% 30%, rgba(0,200,255,.05) 0%, transparent 60%);
background: $bg-base;
}
.login-wrap {
width: 380px;
.login-panel {
width: 360px;
background: $bg-card;
border: 1px solid $border;
border-radius: 8px;
border-top: 3px solid $sms-teal;
border-radius: 2px;
overflow: hidden;
}
.login-header {
padding: 32px 32px 24px;
display: flex;
align-items: center;
gap: 12px;
padding: 20px 24px;
background: $bg-panel;
border-bottom: 1px solid $border;
text-align: center;
}
.login-logo {
font-size: 20px;
font-weight: 700;
color: $sms-highlight;
letter-spacing: 2px;
margin-bottom: 8px;
span { color: $accent-yellow; }
.header-mark {
width: 36px;
height: 36px;
background: $sms-teal;
color: $bg-base;
font-size: 18px;
font-weight: 900;
display: flex;
align-items: center;
justify-content: center;
border-radius: 2px;
flex-shrink: 0;
}
.login-title {
.header-title {
font-size: 14px;
font-weight: 700;
color: $text-primary;
font-weight: 600;
margin-bottom: 4px;
letter-spacing: 2px;
}
.login-sub {
font-size: 11px;
color: $text-muted;
letter-spacing: .5px;
.header-sub {
font-size: 10px;
color: $text-secondary;
margin-top: 3px;
letter-spacing: .3px;
}
.login-form {
padding: 24px 32px;
.login-body {
padding: 24px;
}
.form-item {
.field-group {
margin-bottom: 14px;
.form-label { color: $text-secondary; font-size: 12px; margin-bottom: 6px; }
.kv-input { padding: 8px 10px; }
.field-label {
font-size: 10px;
font-weight: 700;
color: $text-secondary;
text-transform: uppercase;
letter-spacing: .6px;
margin-bottom: 6px;
}
.kv-input { padding: 7px 9px; font-size: 13px; }
}
.login-error {
margin-top: 10px;
font-size: 12px;
margin-top: 8px;
font-size: 11px;
color: $accent-red;
text-align: center;
padding: 5px 8px;
background: rgba($accent-red, .08);
border-left: 2px solid $accent-red;
}
.login-footer {
padding: 10px 32px;
padding: 8px 24px;
background: $bg-panel;
border-top: 1px solid $border;
font-size: 11px;
font-size: 10px;
color: $text-muted;
display: flex;
align-items: center;
gap: 6px;
letter-spacing: .3px;
.dot { width: 6px; height: 6px; border-radius: 50%; &.g { background: $accent-green; } }
.dot {
width: 5px; height: 5px; border-radius: 50%; display: inline-block;
&.g { background: $status-run; }
}
}
</style>