style(frontend): 工艺线SVG浅色重绘 + 登录页改版 + 品牌名改为推拉酸洗线
- Material 物料跟踪总图 SVG 全部重新配色：深色设备图改为浅色钢灰底， 介质色保留（酸洗琥珀/漂洗青/烘干橙），当前设备与焊缝高亮改主题红 - 段位标签色加深以适配白底图例 - 登录页大改：左侧品牌 + 右侧白卡片，背景换工业钢厂实拍图 + 红色主题渐变蒙版 - 品牌名由 SIMATIC L2 改为「推拉酸洗线」（登录页与顶栏 logo） Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
This commit is contained in:
@@ -1,34 +1,49 @@
|
||||
<template>
|
||||
<div class="login-page">
|
||||
<div class="login-panel">
|
||||
<div class="login-header">
|
||||
<div class="header-mark">S</div>
|
||||
<div class="header-right">
|
||||
<div class="header-title">SIMATIC L2</div>
|
||||
<div class="header-sub">推拉酸洗线 过程控制系统</div>
|
||||
<div class="login-overlay"></div>
|
||||
|
||||
<!-- 左侧品牌区 -->
|
||||
<div class="login-brand">
|
||||
<div class="brand-logo">
|
||||
<div class="brand-mark">酸</div>
|
||||
<div class="brand-word">
|
||||
<div class="brand-title">推拉酸洗线</div>
|
||||
<div class="brand-en">PUSH-PULL PICKLING LINE</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="brand-slogan">二级过程控制系统</div>
|
||||
<div class="brand-desc">物料跟踪 · 计划实绩 · 工艺模型 · 质量管理</div>
|
||||
</div>
|
||||
|
||||
<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="field-group">
|
||||
<div class="field-label">密码</div>
|
||||
<input v-model="form.password" type="password" class="kv-input" autocomplete="current-password" @keyup.enter="handleLogin" />
|
||||
</div>
|
||||
<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 class="login-card">
|
||||
<div class="card-title">系统登录</div>
|
||||
<div class="card-tip">请输入账号密码以继续</div>
|
||||
|
||||
<div class="field-group">
|
||||
<div class="field-label">用户名</div>
|
||||
<input v-model="form.username" class="login-input" autocomplete="username"
|
||||
placeholder="请输入用户名" @keyup.enter="handleLogin" />
|
||||
</div>
|
||||
<div class="field-group">
|
||||
<div class="field-label">密码</div>
|
||||
<input v-model="form.password" type="password" class="login-input" autocomplete="current-password"
|
||||
placeholder="请输入密码" @keyup.enter="handleLogin" />
|
||||
</div>
|
||||
|
||||
<div class="login-footer">
|
||||
<i class="dot g"></i>系统就绪
|
||||
<span style="margin-left:auto;">v1.0.0</span>
|
||||
<div v-if="error" class="login-error">{{ error }}</div>
|
||||
|
||||
<button class="login-btn" :disabled="loading" @click="handleLogin">
|
||||
{{ loading ? '验证中…' : '登 录' }}
|
||||
</button>
|
||||
|
||||
<div class="login-foot">
|
||||
<span class="dot"></span>系统就绪
|
||||
<span class="ver">v1.0.0</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="copyright">推拉酸洗线 L2 MES · 过程控制系统</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
@@ -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; }
|
||||
}
|
||||
</style>
|
||||
|
||||
Reference in New Issue
Block a user