feat(frontend): redesign management login pages
This commit is contained in:
david
68
design-qa.md
Normal file
68
design-qa.md
Normal file
@@ -0,0 +1,68 @@
|
||||
# 登录页设计 QA
|
||||
|
||||
## 对照目标
|
||||
|
||||
- Source visual truth: `/Users/david/.codex/generated_images/019fb64b-4fca-7e12-a4cd-c9b59661af31/call_06YYBym4qGkCMq6raecZit9J.png`
|
||||
- Platform implementation: `/tmp/heqi-login-design-qa/platform_admin/platform-login-desktop-revised.png`
|
||||
- Gas implementation: `/tmp/heqi-login-design-qa/gas_admin/gas-login-desktop-revised.png`
|
||||
- Delivery implementation: `/tmp/heqi-login-design-qa/delivery_admin/delivery-login-desktop-revised.png`
|
||||
- Desktop family evidence: `/tmp/heqi-login-design-qa/platform_admin/login-family-desktop-revised.jpg`
|
||||
- Mobile layout evidence: browser DOM geometry and overflow checks at `390 x 844`
|
||||
- Source/implementation comparison: `/tmp/heqi-login-design-qa/platform_admin/platform-source-vs-implementation.png`
|
||||
|
||||
## 归一化条件
|
||||
|
||||
- Source pixels: `1487 x 1058`.
|
||||
- Source normalized pixels: `1440 x 1024`.
|
||||
- Desktop implementation pixels and CSS viewport: `1440 x 1024`.
|
||||
- Mobile implementation pixels and CSS viewport: `390 x 844`.
|
||||
- Density normalization: screenshots and CSS viewports are 1:1; the source was resized to the desktop comparison viewport.
|
||||
- State: 初始登录态，用户名已记忆，密码为空，复选框选中。
|
||||
|
||||
## Full-view comparison evidence
|
||||
|
||||
平台端保留深蓝色等距业务场景、居中的高不透明度磨砂卡片、蓝色主按钮、紧凑表单节奏和下方智能阀门焦点。按用户最新要求，三套页面均移除左上角 Logo 与标题。气站端改为暖米色日间气站场景，配送点端改为浅蓝薄荷色日间配送场景；两者与平台深色背景明显区分，同时沿用同一卡片骨架维持品牌家族感。
|
||||
|
||||
三套桌面页面保持一致的卡片宽度、字号层级、输入高度、圆角和阴影；三套移动页面均为 `358 x 501` 卡片、左右各 `16px` 安全边距，无横向或纵向溢出。
|
||||
|
||||
## Focused region comparison evidence
|
||||
|
||||
未额外裁切局部图。最新三联对照由三张完整 `1440 x 1024` 页面截图等比缩放后横向拼接，能够直接检查背景差异、卡片位置、输入控件、按钮和小字。
|
||||
|
||||
## Required fidelity surfaces
|
||||
|
||||
- Fonts and typography: 使用系统中文无衬线字体，标题、系统名、定位文案、表单和页脚层级与视觉稿一致；没有换行或截断。
|
||||
- Spacing and layout rhythm: 卡片宽度 `420px`，输入和按钮高度 `48px`，桌面卡片位于视觉中心上方，移动端保持 `16px` 安全边距。
|
||||
- Colors and visual tokens: 平台深蓝、气站暖米色、配送浅蓝薄荷色分别映射到背景资产；按钮与焦点态继续使用平台蓝、气站橙、配送青绿，卡片对比度稳定。
|
||||
- Image quality and asset fidelity: 三张背景均为独立生成并压缩的 JPEG 资产，未使用 CSS 绘图、占位图或伪造图形；Logo 继续使用仓库原始 SVG。
|
||||
- Copy and content: 三套系统统一为“和气”，标题合并为单行“登录 + 完整系统名称”，并保留已确认的三组业务定位文案。
|
||||
|
||||
## Interaction and browser checks
|
||||
|
||||
- 用户名、密码、记住用户名和登录按钮均可通过可访问名称唯一定位。
|
||||
- 输入字段可编辑；记住用户名可切换。
|
||||
- 空表单提交会显示“请输入用户名”和“请输入密码”两个客户端校验提示。
|
||||
- 三套页面在 `1440 x 1024` 和 `390 x 844` 视口完成浏览器渲染检查。
|
||||
- 最新移动端 DOM 检查结果均为 `390 x 844`，页面滚动尺寸同为 `390 x 844`，卡片尺寸同为 `358 x 501`，左边距 `16px`，且 `.brand-lockup` 均不存在。
|
||||
- 浏览器控制台未发现 warning 或 error。
|
||||
|
||||
## Comparison history
|
||||
|
||||
1. 初次桌面对照发现卡片中心比视觉稿低约 `95px`，属于 P2 级主构图偏差。
|
||||
2. 将桌面卡片上移 `56px`、移动卡片上移 `24px`，重新构建并在相同视口截图。
|
||||
3. 复查后卡片与视觉稿的垂直中心差异降至约 `40px`；保留这部分差异是为了更符合用户明确提出的“中间登录框”，归为可接受的 P3。
|
||||
4. 用户要求去掉左上角 Logo 与标题，并让气站、配送点背景区别于平台且使用浅色背景。
|
||||
5. 移除三套页面品牌锁定区，重新生成气站暖米色日间场景和配送点浅蓝薄荷色日间场景；平台背景保持不变。
|
||||
6. 重新完成三套桌面端并排视觉复核与 `390 x 844` 移动端几何、溢出检查。
|
||||
7. 将原主标题与系统副标题合并为单行完整登录标题；三套页面在 `390px` 宽度下均为一行，且没有残留 `.login-form-system` 节点。
|
||||
|
||||
## Findings
|
||||
|
||||
- 无 P0、P1 或 P2 问题。
|
||||
- P3: 实现的卡片比生成稿略靠近视口正中，属于响应用户“中间登录框”要求的有意调整。
|
||||
|
||||
## Follow-up polish
|
||||
|
||||
- 若后续提供正式版权主体和年份，可替换当前统一页脚文案。
|
||||
|
||||
final result: passed
|
||||
@@ -1,4 +1,4 @@
|
||||
# 禾气配送点管理系统
|
||||
# 和气配送点管理系统
|
||||
|
||||
配送点管理端使用 Vue 3、TypeScript、Vite、Pinia 和 Arco Design，开发端口为 `5176`，默认 API 为 `http://localhost:12426/heqi/delivery/v1`。
|
||||
|
||||
|
||||
@@ -4,7 +4,7 @@
|
||||
<meta charset="UTF-8" />
|
||||
<link rel="icon" type="image/svg+xml" href="/favicon.svg">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<title>禾气配送点管理系统</title>
|
||||
<title>和气配送点管理系统</title>
|
||||
</head>
|
||||
<body>
|
||||
<div id="app"></div>
|
||||
|
||||
@@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "heqi-delivery-admin",
|
||||
"description": "禾气配送点管理系统",
|
||||
"description": "和气配送点管理系统",
|
||||
"version": "1.0.0",
|
||||
"private": true,
|
||||
"author": "ArcoDesign Team",
|
||||
|
||||
BIN
frontend/delivery_admin/src/assets/images/login-background.jpg
Normal file
BIN
frontend/delivery_admin/src/assets/images/login-background.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 472 KiB |
@@ -1,5 +1,5 @@
|
||||
<template>
|
||||
<a-layout-footer class="footer">禾气配送点管理系统</a-layout-footer>
|
||||
<a-layout-footer class="footer">和气配送点管理系统</a-layout-footer>
|
||||
</template>
|
||||
|
||||
<script lang="ts" setup></script>
|
||||
|
||||
@@ -2,7 +2,7 @@
|
||||
<div class="navbar">
|
||||
<a-space class="brand">
|
||||
<img :src="logoUrl" alt="和气平台" />
|
||||
<a-typography-title :heading="5" :style="{ margin: 0 }">禾气配送点管理系统</a-typography-title>
|
||||
<a-typography-title :heading="5" :style="{ margin: 0 }">和气配送点管理系统</a-typography-title>
|
||||
<icon-menu-fold v-if="!topMenu && appStore.device === 'mobile'" class="menu-trigger" @click="toggleDrawerMenu" />
|
||||
</a-space>
|
||||
<a-space>
|
||||
|
||||
@@ -1,7 +1,7 @@
|
||||
<template>
|
||||
<div class="login-form-wrapper">
|
||||
<div class="login-form-title">登录和气平台</div>
|
||||
<div class="login-form-sub-title">使用平台管理员账户登录</div>
|
||||
<div class="login-form-title">登录和气配送点管理系统</div>
|
||||
<div class="login-form-sub-title">智能调度 · 高效配送 · 全程可追溯</div>
|
||||
<a-form
|
||||
ref="loginForm"
|
||||
:model="userInfo"
|
||||
@@ -40,23 +40,27 @@
|
||||
</template>
|
||||
</a-input-password>
|
||||
</a-form-item>
|
||||
<a-space :size="16" direction="vertical">
|
||||
<div class="login-form-password-actions">
|
||||
<a-checkbox
|
||||
checked="rememberPassword"
|
||||
:model-value="loginConfig.rememberPassword"
|
||||
@change="setRememberPassword as any"
|
||||
>
|
||||
记住用户名
|
||||
</a-checkbox>
|
||||
</div>
|
||||
<div v-if="errorMessage" class="login-form-error-msg">
|
||||
{{ errorMessage }}
|
||||
</div>
|
||||
<a-button type="primary" html-type="submit" long :loading="loading">
|
||||
登录
|
||||
</a-button>
|
||||
</a-space>
|
||||
<div class="login-form-password-actions">
|
||||
<a-checkbox
|
||||
checked="rememberPassword"
|
||||
:model-value="loginConfig.rememberPassword"
|
||||
@change="setRememberPassword as any"
|
||||
>
|
||||
记住用户名
|
||||
</a-checkbox>
|
||||
</div>
|
||||
<div class="login-form-error-msg" aria-live="polite">
|
||||
{{ errorMessage }}
|
||||
</div>
|
||||
<a-button
|
||||
class="login-form-submit"
|
||||
type="primary"
|
||||
html-type="submit"
|
||||
long
|
||||
:loading="loading"
|
||||
>
|
||||
登录
|
||||
</a-button>
|
||||
</a-form>
|
||||
</div>
|
||||
</template>
|
||||
@@ -126,35 +130,130 @@ const setRememberPassword = (value: boolean) => {
|
||||
<style lang="less" scoped>
|
||||
.login-form {
|
||||
&-wrapper {
|
||||
width: 320px;
|
||||
width: 100%;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
&-title {
|
||||
color: var(--color-text-1);
|
||||
font-weight: 500;
|
||||
font-size: 24px;
|
||||
line-height: 32px;
|
||||
color: #16313a;
|
||||
font-weight: 600;
|
||||
font-size: 28px;
|
||||
line-height: 38px;
|
||||
letter-spacing: 0.01em;
|
||||
}
|
||||
|
||||
&-sub-title {
|
||||
color: var(--color-text-3);
|
||||
font-size: 16px;
|
||||
line-height: 24px;
|
||||
margin-top: 6px;
|
||||
color: #718a8e;
|
||||
font-size: 13px;
|
||||
line-height: 20px;
|
||||
letter-spacing: 0.04em;
|
||||
}
|
||||
|
||||
&-error-msg {
|
||||
height: 32px;
|
||||
color: rgb(var(--red-6));
|
||||
line-height: 32px;
|
||||
min-height: 34px;
|
||||
padding-top: 8px;
|
||||
color: #d83b42;
|
||||
font-size: 13px;
|
||||
line-height: 20px;
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
&-password-actions {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
margin-top: 2px;
|
||||
color: #4e686d;
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
&-register-btn {
|
||||
color: var(--color-text-3) !important;
|
||||
&-submit {
|
||||
height: 48px;
|
||||
background: var(--login-accent) !important;
|
||||
border-color: var(--login-accent) !important;
|
||||
border-radius: 9px;
|
||||
font-weight: 500;
|
||||
font-size: 16px;
|
||||
box-shadow: 0 10px 24px rgba(15, 159, 146, 0.2);
|
||||
transition:
|
||||
background-color 0.2s ease,
|
||||
border-color 0.2s ease,
|
||||
transform 0.2s ease;
|
||||
|
||||
&:hover {
|
||||
background: var(--login-accent-hover) !important;
|
||||
border-color: var(--login-accent-hover) !important;
|
||||
transform: translateY(-1px);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.login-form {
|
||||
margin-top: 26px;
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
:deep(.arco-form-item) {
|
||||
margin-bottom: 16px;
|
||||
}
|
||||
|
||||
:deep(.arco-input-wrapper) {
|
||||
height: 48px;
|
||||
padding: 0 14px;
|
||||
background: rgba(246, 252, 251, 0.9);
|
||||
border: 1px solid #cedfdd;
|
||||
border-radius: 9px;
|
||||
box-shadow: none;
|
||||
transition:
|
||||
border-color 0.2s ease,
|
||||
box-shadow 0.2s ease,
|
||||
background-color 0.2s ease;
|
||||
|
||||
&:hover {
|
||||
background: #fff;
|
||||
border-color: #a3c2be;
|
||||
}
|
||||
|
||||
&.arco-input-focus {
|
||||
background: #fff;
|
||||
border-color: var(--login-accent);
|
||||
box-shadow: 0 0 0 3px rgba(15, 159, 146, 0.12);
|
||||
}
|
||||
}
|
||||
|
||||
:deep(.arco-input-prefix) {
|
||||
margin-right: 10px;
|
||||
color: #829b9e;
|
||||
font-size: 18px;
|
||||
}
|
||||
|
||||
:deep(.arco-checkbox-label) {
|
||||
color: #4e686d;
|
||||
font-size: 13px;
|
||||
}
|
||||
|
||||
@media (max-width: @screen-sm) {
|
||||
.login-form {
|
||||
margin-top: 22px;
|
||||
|
||||
&-title {
|
||||
font-size: 25px;
|
||||
line-height: 34px;
|
||||
}
|
||||
|
||||
&-sub-title {
|
||||
letter-spacing: 0.01em;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@media (prefers-reduced-motion: reduce) {
|
||||
.login-form-submit {
|
||||
transition: none;
|
||||
|
||||
&:hover {
|
||||
transform: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -1,79 +1,114 @@
|
||||
<template>
|
||||
<div class="container">
|
||||
<div class="logo">
|
||||
<img alt="和气平台" :src="logoUrl" />
|
||||
<div class="logo-text">禾气配送点管理系统</div>
|
||||
</div>
|
||||
<LoginBanner />
|
||||
<div class="content">
|
||||
<div class="content-inner">
|
||||
<LoginForm />
|
||||
</div>
|
||||
<div class="footer">
|
||||
<Footer />
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
class="login-page"
|
||||
:style="{ backgroundImage: `url(${backgroundUrl})` }"
|
||||
>
|
||||
<main class="login-card" aria-label="和气配送点管理系统登录">
|
||||
<img class="login-card-logo" :src="logoUrl" alt="和气" />
|
||||
<LoginForm />
|
||||
<div class="login-footer">© 2026 和气 · 安全连接每一程</div>
|
||||
</main>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script lang="ts" setup>
|
||||
import backgroundUrl from '@/assets/images/login-background.jpg';
|
||||
import logoUrl from '@/assets/logo.svg?url';
|
||||
import Footer from '@/components/footer/index.vue';
|
||||
import LoginBanner from './components/login-banner.vue';
|
||||
import LoginForm from './components/login-form.vue';
|
||||
</script>
|
||||
|
||||
<style lang="less" scoped>
|
||||
.container {
|
||||
display: flex;
|
||||
height: 100vh;
|
||||
.login-page {
|
||||
--login-accent: #0f9f92;
|
||||
--login-accent-hover: #0a8278;
|
||||
position: relative;
|
||||
isolation: isolate;
|
||||
display: grid;
|
||||
min-height: 100vh;
|
||||
min-height: 100dvh;
|
||||
padding: 96px 24px 32px;
|
||||
overflow: auto;
|
||||
background-color: #e9f7f7;
|
||||
background-repeat: no-repeat;
|
||||
background-position: center;
|
||||
background-size: cover;
|
||||
place-items: center;
|
||||
|
||||
.banner {
|
||||
width: 550px;
|
||||
background: linear-gradient(163.85deg, #1d2129 0%, #00308f 100%);
|
||||
}
|
||||
|
||||
.content {
|
||||
position: relative;
|
||||
display: flex;
|
||||
flex: 1;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
padding-bottom: 40px;
|
||||
}
|
||||
|
||||
.footer {
|
||||
&::before {
|
||||
position: absolute;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
width: 100%;
|
||||
inset: 0;
|
||||
z-index: -1;
|
||||
background: rgba(245, 255, 255, 0.03);
|
||||
content: '';
|
||||
}
|
||||
}
|
||||
|
||||
.logo {
|
||||
position: fixed;
|
||||
top: 24px;
|
||||
left: 22px;
|
||||
z-index: 1;
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
|
||||
&-text {
|
||||
margin-right: 4px;
|
||||
margin-left: 4px;
|
||||
color: var(--color-fill-1);
|
||||
font-size: 20px;
|
||||
}
|
||||
.login-card {
|
||||
width: min(420px, 100%);
|
||||
padding: 34px 40px 18px;
|
||||
transform: translateY(-56px);
|
||||
background: rgba(250, 255, 254, 0.95);
|
||||
border: 1px solid rgba(226, 255, 250, 0.72);
|
||||
border-radius: 16px;
|
||||
box-shadow: 0 28px 80px rgba(1, 25, 40, 0.3);
|
||||
backdrop-filter: blur(18px);
|
||||
}
|
||||
</style>
|
||||
|
||||
<style lang="less" scoped>
|
||||
// responsive
|
||||
@media (max-width: @screen-lg) {
|
||||
.container {
|
||||
.banner {
|
||||
width: 25%;
|
||||
.login-card-logo {
|
||||
display: block;
|
||||
width: 48px;
|
||||
height: 48px;
|
||||
margin: 0 auto 14px;
|
||||
}
|
||||
|
||||
.login-footer {
|
||||
margin-top: 24px;
|
||||
padding-top: 16px;
|
||||
border-top: 1px solid rgba(17, 77, 73, 0.09);
|
||||
color: #839694;
|
||||
font-size: 12px;
|
||||
line-height: 20px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
@media (max-width: @screen-sm) {
|
||||
.login-page {
|
||||
padding: 82px 16px 20px;
|
||||
background-position: center;
|
||||
|
||||
&::before {
|
||||
background: rgba(245, 255, 255, 0.08);
|
||||
}
|
||||
}
|
||||
|
||||
.login-card {
|
||||
padding: 28px 22px 16px;
|
||||
transform: translateY(-24px);
|
||||
background: rgba(250, 255, 254, 0.98);
|
||||
backdrop-filter: blur(20px);
|
||||
}
|
||||
|
||||
.login-card-logo {
|
||||
width: 44px;
|
||||
height: 44px;
|
||||
margin-bottom: 12px;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-height: 720px) and (min-width: @screen-sm) {
|
||||
.login-page {
|
||||
padding-top: 82px;
|
||||
}
|
||||
|
||||
.login-card {
|
||||
padding-top: 26px;
|
||||
transform: none;
|
||||
}
|
||||
}
|
||||
|
||||
@media (prefers-reduced-motion: reduce) {
|
||||
.login-page {
|
||||
scroll-behavior: auto;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -1,4 +1,4 @@
|
||||
# 禾气气站管理系统
|
||||
# 和气气站管理系统
|
||||
|
||||
基于 Vue 3、Vite、TypeScript、Pinia 和 Arco Design 的气站管理端。开发服务器默认端口为 `5175`。
|
||||
|
||||
|
||||
@@ -4,7 +4,7 @@
|
||||
<meta charset="UTF-8" />
|
||||
<link rel="icon" type="image/svg+xml" href="/favicon.svg">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<title>禾气气站管理系统</title>
|
||||
<title>和气气站管理系统</title>
|
||||
</head>
|
||||
<body>
|
||||
<div id="app"></div>
|
||||
|
||||
@@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "heqi-gas-admin",
|
||||
"description": "禾气气站管理系统",
|
||||
"description": "和气气站管理系统",
|
||||
"version": "1.0.0",
|
||||
"private": true,
|
||||
"author": "ArcoDesign Team",
|
||||
|
||||
BIN
frontend/gas_admin/src/assets/images/login-background.jpg
Normal file
BIN
frontend/gas_admin/src/assets/images/login-background.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 492 KiB |
@@ -1,5 +1,5 @@
|
||||
<template>
|
||||
<a-layout-footer class="footer">禾气气站管理系统</a-layout-footer>
|
||||
<a-layout-footer class="footer">和气气站管理系统</a-layout-footer>
|
||||
</template>
|
||||
|
||||
<script lang="ts" setup></script>
|
||||
|
||||
@@ -2,7 +2,7 @@
|
||||
<div class="navbar">
|
||||
<a-space class="brand">
|
||||
<img :src="logoUrl" alt="和气平台" />
|
||||
<a-typography-title :heading="5" :style="{ margin: 0 }">禾气气站管理系统</a-typography-title>
|
||||
<a-typography-title :heading="5" :style="{ margin: 0 }">和气气站管理系统</a-typography-title>
|
||||
<icon-menu-fold v-if="!topMenu && appStore.device === 'mobile'" class="menu-trigger" @click="toggleDrawerMenu" />
|
||||
</a-space>
|
||||
<a-space>
|
||||
|
||||
@@ -1,7 +1,7 @@
|
||||
<template>
|
||||
<div class="login-form-wrapper">
|
||||
<div class="login-form-title">登录和气平台</div>
|
||||
<div class="login-form-sub-title">使用平台管理员账户登录</div>
|
||||
<div class="login-form-title">登录和气气站管理系统</div>
|
||||
<div class="login-form-sub-title">站点经营 · 履约管理 · 安全服务</div>
|
||||
<a-form
|
||||
ref="loginForm"
|
||||
:model="userInfo"
|
||||
@@ -40,23 +40,27 @@
|
||||
</template>
|
||||
</a-input-password>
|
||||
</a-form-item>
|
||||
<a-space :size="16" direction="vertical">
|
||||
<div class="login-form-password-actions">
|
||||
<a-checkbox
|
||||
checked="rememberPassword"
|
||||
:model-value="loginConfig.rememberPassword"
|
||||
@change="setRememberPassword as any"
|
||||
>
|
||||
记住用户名
|
||||
</a-checkbox>
|
||||
</div>
|
||||
<div v-if="errorMessage" class="login-form-error-msg">
|
||||
{{ errorMessage }}
|
||||
</div>
|
||||
<a-button type="primary" html-type="submit" long :loading="loading">
|
||||
登录
|
||||
</a-button>
|
||||
</a-space>
|
||||
<div class="login-form-password-actions">
|
||||
<a-checkbox
|
||||
checked="rememberPassword"
|
||||
:model-value="loginConfig.rememberPassword"
|
||||
@change="setRememberPassword as any"
|
||||
>
|
||||
记住用户名
|
||||
</a-checkbox>
|
||||
</div>
|
||||
<div class="login-form-error-msg" aria-live="polite">
|
||||
{{ errorMessage }}
|
||||
</div>
|
||||
<a-button
|
||||
class="login-form-submit"
|
||||
type="primary"
|
||||
html-type="submit"
|
||||
long
|
||||
:loading="loading"
|
||||
>
|
||||
登录
|
||||
</a-button>
|
||||
</a-form>
|
||||
</div>
|
||||
</template>
|
||||
@@ -126,35 +130,130 @@ const setRememberPassword = (value: boolean) => {
|
||||
<style lang="less" scoped>
|
||||
.login-form {
|
||||
&-wrapper {
|
||||
width: 320px;
|
||||
width: 100%;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
&-title {
|
||||
color: var(--color-text-1);
|
||||
font-weight: 500;
|
||||
font-size: 24px;
|
||||
line-height: 32px;
|
||||
color: #2d211a;
|
||||
font-weight: 600;
|
||||
font-size: 28px;
|
||||
line-height: 38px;
|
||||
letter-spacing: 0.01em;
|
||||
}
|
||||
|
||||
&-sub-title {
|
||||
color: var(--color-text-3);
|
||||
font-size: 16px;
|
||||
line-height: 24px;
|
||||
margin-top: 6px;
|
||||
color: #8b776a;
|
||||
font-size: 13px;
|
||||
line-height: 20px;
|
||||
letter-spacing: 0.04em;
|
||||
}
|
||||
|
||||
&-error-msg {
|
||||
height: 32px;
|
||||
color: rgb(var(--red-6));
|
||||
line-height: 32px;
|
||||
min-height: 34px;
|
||||
padding-top: 8px;
|
||||
color: #d83b42;
|
||||
font-size: 13px;
|
||||
line-height: 20px;
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
&-password-actions {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
margin-top: 2px;
|
||||
color: #66564b;
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
&-register-btn {
|
||||
color: var(--color-text-3) !important;
|
||||
&-submit {
|
||||
height: 48px;
|
||||
background: var(--login-accent) !important;
|
||||
border-color: var(--login-accent) !important;
|
||||
border-radius: 9px;
|
||||
font-weight: 500;
|
||||
font-size: 16px;
|
||||
box-shadow: 0 10px 24px rgba(217, 119, 6, 0.2);
|
||||
transition:
|
||||
background-color 0.2s ease,
|
||||
border-color 0.2s ease,
|
||||
transform 0.2s ease;
|
||||
|
||||
&:hover {
|
||||
background: var(--login-accent-hover) !important;
|
||||
border-color: var(--login-accent-hover) !important;
|
||||
transform: translateY(-1px);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.login-form {
|
||||
margin-top: 26px;
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
:deep(.arco-form-item) {
|
||||
margin-bottom: 16px;
|
||||
}
|
||||
|
||||
:deep(.arco-input-wrapper) {
|
||||
height: 48px;
|
||||
padding: 0 14px;
|
||||
background: rgba(252, 249, 245, 0.88);
|
||||
border: 1px solid #dfd5ca;
|
||||
border-radius: 9px;
|
||||
box-shadow: none;
|
||||
transition:
|
||||
border-color 0.2s ease,
|
||||
box-shadow 0.2s ease,
|
||||
background-color 0.2s ease;
|
||||
|
||||
&:hover {
|
||||
background: #fff;
|
||||
border-color: #bfae9e;
|
||||
}
|
||||
|
||||
&.arco-input-focus {
|
||||
background: #fff;
|
||||
border-color: var(--login-accent);
|
||||
box-shadow: 0 0 0 3px rgba(217, 119, 6, 0.12);
|
||||
}
|
||||
}
|
||||
|
||||
:deep(.arco-input-prefix) {
|
||||
margin-right: 10px;
|
||||
color: #9b8c81;
|
||||
font-size: 18px;
|
||||
}
|
||||
|
||||
:deep(.arco-checkbox-label) {
|
||||
color: #66564b;
|
||||
font-size: 13px;
|
||||
}
|
||||
|
||||
@media (max-width: @screen-sm) {
|
||||
.login-form {
|
||||
margin-top: 22px;
|
||||
|
||||
&-title {
|
||||
font-size: 25px;
|
||||
line-height: 34px;
|
||||
}
|
||||
|
||||
&-sub-title {
|
||||
letter-spacing: 0.01em;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@media (prefers-reduced-motion: reduce) {
|
||||
.login-form-submit {
|
||||
transition: none;
|
||||
|
||||
&:hover {
|
||||
transform: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -1,79 +1,114 @@
|
||||
<template>
|
||||
<div class="container">
|
||||
<div class="logo">
|
||||
<img alt="和气平台" :src="logoUrl" />
|
||||
<div class="logo-text">禾气气站管理系统</div>
|
||||
</div>
|
||||
<LoginBanner />
|
||||
<div class="content">
|
||||
<div class="content-inner">
|
||||
<LoginForm />
|
||||
</div>
|
||||
<div class="footer">
|
||||
<Footer />
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
class="login-page"
|
||||
:style="{ backgroundImage: `url(${backgroundUrl})` }"
|
||||
>
|
||||
<main class="login-card" aria-label="和气气站管理系统登录">
|
||||
<img class="login-card-logo" :src="logoUrl" alt="和气" />
|
||||
<LoginForm />
|
||||
<div class="login-footer">© 2026 和气 · 安全连接每一程</div>
|
||||
</main>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script lang="ts" setup>
|
||||
import backgroundUrl from '@/assets/images/login-background.jpg';
|
||||
import logoUrl from '@/assets/logo.svg?url';
|
||||
import Footer from '@/components/footer/index.vue';
|
||||
import LoginBanner from './components/login-banner.vue';
|
||||
import LoginForm from './components/login-form.vue';
|
||||
</script>
|
||||
|
||||
<style lang="less" scoped>
|
||||
.container {
|
||||
display: flex;
|
||||
height: 100vh;
|
||||
.login-page {
|
||||
--login-accent: #d97706;
|
||||
--login-accent-hover: #b85f04;
|
||||
position: relative;
|
||||
isolation: isolate;
|
||||
display: grid;
|
||||
min-height: 100vh;
|
||||
min-height: 100dvh;
|
||||
padding: 96px 24px 32px;
|
||||
overflow: auto;
|
||||
background-color: #f3eee4;
|
||||
background-repeat: no-repeat;
|
||||
background-position: center;
|
||||
background-size: cover;
|
||||
place-items: center;
|
||||
|
||||
.banner {
|
||||
width: 550px;
|
||||
background: linear-gradient(163.85deg, #1d2129 0%, #00308f 100%);
|
||||
}
|
||||
|
||||
.content {
|
||||
position: relative;
|
||||
display: flex;
|
||||
flex: 1;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
padding-bottom: 40px;
|
||||
}
|
||||
|
||||
.footer {
|
||||
&::before {
|
||||
position: absolute;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
width: 100%;
|
||||
inset: 0;
|
||||
z-index: -1;
|
||||
background: rgba(255, 250, 242, 0.04);
|
||||
content: '';
|
||||
}
|
||||
}
|
||||
|
||||
.logo {
|
||||
position: fixed;
|
||||
top: 24px;
|
||||
left: 22px;
|
||||
z-index: 1;
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
|
||||
&-text {
|
||||
margin-right: 4px;
|
||||
margin-left: 4px;
|
||||
color: var(--color-fill-1);
|
||||
font-size: 20px;
|
||||
}
|
||||
.login-card {
|
||||
width: min(420px, 100%);
|
||||
padding: 34px 40px 18px;
|
||||
transform: translateY(-56px);
|
||||
background: rgba(255, 253, 249, 0.95);
|
||||
border: 1px solid rgba(255, 245, 230, 0.72);
|
||||
border-radius: 16px;
|
||||
box-shadow: 0 28px 80px rgba(26, 13, 4, 0.32);
|
||||
backdrop-filter: blur(18px);
|
||||
}
|
||||
</style>
|
||||
|
||||
<style lang="less" scoped>
|
||||
// responsive
|
||||
@media (max-width: @screen-lg) {
|
||||
.container {
|
||||
.banner {
|
||||
width: 25%;
|
||||
.login-card-logo {
|
||||
display: block;
|
||||
width: 48px;
|
||||
height: 48px;
|
||||
margin: 0 auto 14px;
|
||||
}
|
||||
|
||||
.login-footer {
|
||||
margin-top: 24px;
|
||||
padding-top: 16px;
|
||||
border-top: 1px solid rgba(74, 43, 21, 0.09);
|
||||
color: #978b82;
|
||||
font-size: 12px;
|
||||
line-height: 20px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
@media (max-width: @screen-sm) {
|
||||
.login-page {
|
||||
padding: 82px 16px 20px;
|
||||
background-position: center;
|
||||
|
||||
&::before {
|
||||
background: rgba(255, 250, 242, 0.1);
|
||||
}
|
||||
}
|
||||
|
||||
.login-card {
|
||||
padding: 28px 22px 16px;
|
||||
transform: translateY(-24px);
|
||||
background: rgba(255, 253, 249, 0.98);
|
||||
backdrop-filter: blur(20px);
|
||||
}
|
||||
|
||||
.login-card-logo {
|
||||
width: 44px;
|
||||
height: 44px;
|
||||
margin-bottom: 12px;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-height: 720px) and (min-width: @screen-sm) {
|
||||
.login-page {
|
||||
padding-top: 82px;
|
||||
}
|
||||
|
||||
.login-card {
|
||||
padding-top: 26px;
|
||||
transform: none;
|
||||
}
|
||||
}
|
||||
|
||||
@media (prefers-reduced-motion: reduce) {
|
||||
.login-page {
|
||||
scroll-behavior: auto;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
BIN
frontend/platform_admin/src/assets/images/login-background.jpg
Normal file
BIN
frontend/platform_admin/src/assets/images/login-background.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 389 KiB |
@@ -1,7 +1,7 @@
|
||||
<template>
|
||||
<div class="login-form-wrapper">
|
||||
<div class="login-form-title">登录和气平台</div>
|
||||
<div class="login-form-sub-title">使用平台管理员账户登录</div>
|
||||
<div class="login-form-title">登录和气平台总后台</div>
|
||||
<div class="login-form-sub-title">全局治理 · 安全运营 · 数据协同</div>
|
||||
<a-form
|
||||
ref="loginForm"
|
||||
:model="userInfo"
|
||||
@@ -40,23 +40,27 @@
|
||||
</template>
|
||||
</a-input-password>
|
||||
</a-form-item>
|
||||
<a-space :size="16" direction="vertical">
|
||||
<div class="login-form-password-actions">
|
||||
<a-checkbox
|
||||
checked="rememberPassword"
|
||||
:model-value="loginConfig.rememberPassword"
|
||||
@change="setRememberPassword as any"
|
||||
>
|
||||
记住用户名
|
||||
</a-checkbox>
|
||||
</div>
|
||||
<div v-if="errorMessage" class="login-form-error-msg">
|
||||
{{ errorMessage }}
|
||||
</div>
|
||||
<a-button type="primary" html-type="submit" long :loading="loading">
|
||||
登录
|
||||
</a-button>
|
||||
</a-space>
|
||||
<div class="login-form-password-actions">
|
||||
<a-checkbox
|
||||
checked="rememberPassword"
|
||||
:model-value="loginConfig.rememberPassword"
|
||||
@change="setRememberPassword as any"
|
||||
>
|
||||
记住用户名
|
||||
</a-checkbox>
|
||||
</div>
|
||||
<div class="login-form-error-msg" aria-live="polite">
|
||||
{{ errorMessage }}
|
||||
</div>
|
||||
<a-button
|
||||
class="login-form-submit"
|
||||
type="primary"
|
||||
html-type="submit"
|
||||
long
|
||||
:loading="loading"
|
||||
>
|
||||
登录
|
||||
</a-button>
|
||||
</a-form>
|
||||
</div>
|
||||
</template>
|
||||
@@ -126,35 +130,130 @@ const setRememberPassword = (value: boolean) => {
|
||||
<style lang="less" scoped>
|
||||
.login-form {
|
||||
&-wrapper {
|
||||
width: 320px;
|
||||
width: 100%;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
&-title {
|
||||
color: var(--color-text-1);
|
||||
font-weight: 500;
|
||||
font-size: 24px;
|
||||
line-height: 32px;
|
||||
color: #17233d;
|
||||
font-weight: 600;
|
||||
font-size: 28px;
|
||||
line-height: 38px;
|
||||
letter-spacing: 0.01em;
|
||||
}
|
||||
|
||||
&-sub-title {
|
||||
color: var(--color-text-3);
|
||||
font-size: 16px;
|
||||
line-height: 24px;
|
||||
margin-top: 6px;
|
||||
color: #768198;
|
||||
font-size: 13px;
|
||||
line-height: 20px;
|
||||
letter-spacing: 0.04em;
|
||||
}
|
||||
|
||||
&-error-msg {
|
||||
height: 32px;
|
||||
color: rgb(var(--red-6));
|
||||
line-height: 32px;
|
||||
min-height: 34px;
|
||||
padding-top: 8px;
|
||||
color: #d83b42;
|
||||
font-size: 13px;
|
||||
line-height: 20px;
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
&-password-actions {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
margin-top: 2px;
|
||||
color: #526078;
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
&-register-btn {
|
||||
color: var(--color-text-3) !important;
|
||||
&-submit {
|
||||
height: 48px;
|
||||
background: var(--login-accent) !important;
|
||||
border-color: var(--login-accent) !important;
|
||||
border-radius: 9px;
|
||||
font-weight: 500;
|
||||
font-size: 16px;
|
||||
box-shadow: 0 10px 24px rgba(36, 104, 242, 0.2);
|
||||
transition:
|
||||
background-color 0.2s ease,
|
||||
border-color 0.2s ease,
|
||||
transform 0.2s ease;
|
||||
|
||||
&:hover {
|
||||
background: var(--login-accent-hover) !important;
|
||||
border-color: var(--login-accent-hover) !important;
|
||||
transform: translateY(-1px);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.login-form {
|
||||
margin-top: 26px;
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
:deep(.arco-form-item) {
|
||||
margin-bottom: 16px;
|
||||
}
|
||||
|
||||
:deep(.arco-input-wrapper) {
|
||||
height: 48px;
|
||||
padding: 0 14px;
|
||||
background: rgba(248, 250, 253, 0.86);
|
||||
border: 1px solid #d7dde8;
|
||||
border-radius: 9px;
|
||||
box-shadow: none;
|
||||
transition:
|
||||
border-color 0.2s ease,
|
||||
box-shadow 0.2s ease,
|
||||
background-color 0.2s ease;
|
||||
|
||||
&:hover {
|
||||
background: #fff;
|
||||
border-color: #aeb9cb;
|
||||
}
|
||||
|
||||
&.arco-input-focus {
|
||||
background: #fff;
|
||||
border-color: var(--login-accent);
|
||||
box-shadow: 0 0 0 3px rgba(36, 104, 242, 0.12);
|
||||
}
|
||||
}
|
||||
|
||||
:deep(.arco-input-prefix) {
|
||||
margin-right: 10px;
|
||||
color: #8a96aa;
|
||||
font-size: 18px;
|
||||
}
|
||||
|
||||
:deep(.arco-checkbox-label) {
|
||||
color: #526078;
|
||||
font-size: 13px;
|
||||
}
|
||||
|
||||
@media (max-width: @screen-sm) {
|
||||
.login-form {
|
||||
margin-top: 22px;
|
||||
|
||||
&-title {
|
||||
font-size: 25px;
|
||||
line-height: 34px;
|
||||
}
|
||||
|
||||
&-sub-title {
|
||||
letter-spacing: 0.01em;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@media (prefers-reduced-motion: reduce) {
|
||||
.login-form-submit {
|
||||
transition: none;
|
||||
|
||||
&:hover {
|
||||
transform: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -1,79 +1,114 @@
|
||||
<template>
|
||||
<div class="container">
|
||||
<div class="logo">
|
||||
<img alt="和气平台" :src="logoUrl" />
|
||||
<div class="logo-text">和气平台总后台</div>
|
||||
</div>
|
||||
<LoginBanner />
|
||||
<div class="content">
|
||||
<div class="content-inner">
|
||||
<LoginForm />
|
||||
</div>
|
||||
<div class="footer">
|
||||
<Footer />
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
class="login-page"
|
||||
:style="{ backgroundImage: `url(${backgroundUrl})` }"
|
||||
>
|
||||
<main class="login-card" aria-label="和气平台总后台登录">
|
||||
<img class="login-card-logo" :src="logoUrl" alt="和气" />
|
||||
<LoginForm />
|
||||
<div class="login-footer">© 2026 和气 · 安全连接每一程</div>
|
||||
</main>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script lang="ts" setup>
|
||||
import backgroundUrl from '@/assets/images/login-background.jpg';
|
||||
import logoUrl from '@/assets/logo.svg?url';
|
||||
import Footer from '@/components/footer/index.vue';
|
||||
import LoginBanner from './components/login-banner.vue';
|
||||
import LoginForm from './components/login-form.vue';
|
||||
</script>
|
||||
|
||||
<style lang="less" scoped>
|
||||
.container {
|
||||
display: flex;
|
||||
height: 100vh;
|
||||
.login-page {
|
||||
--login-accent: #2468f2;
|
||||
--login-accent-hover: #1756d8;
|
||||
position: relative;
|
||||
isolation: isolate;
|
||||
display: grid;
|
||||
min-height: 100vh;
|
||||
min-height: 100dvh;
|
||||
padding: 96px 24px 32px;
|
||||
overflow: auto;
|
||||
background-color: #0c2b58;
|
||||
background-repeat: no-repeat;
|
||||
background-position: center;
|
||||
background-size: cover;
|
||||
place-items: center;
|
||||
|
||||
.banner {
|
||||
width: 550px;
|
||||
background: linear-gradient(163.85deg, #1d2129 0%, #00308f 100%);
|
||||
}
|
||||
|
||||
.content {
|
||||
position: relative;
|
||||
display: flex;
|
||||
flex: 1;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
padding-bottom: 40px;
|
||||
}
|
||||
|
||||
.footer {
|
||||
&::before {
|
||||
position: absolute;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
width: 100%;
|
||||
inset: 0;
|
||||
z-index: -1;
|
||||
background: rgba(3, 19, 45, 0.1);
|
||||
content: '';
|
||||
}
|
||||
}
|
||||
|
||||
.logo {
|
||||
position: fixed;
|
||||
top: 24px;
|
||||
left: 22px;
|
||||
z-index: 1;
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
|
||||
&-text {
|
||||
margin-right: 4px;
|
||||
margin-left: 4px;
|
||||
color: var(--color-fill-1);
|
||||
font-size: 20px;
|
||||
}
|
||||
.login-card {
|
||||
width: min(420px, 100%);
|
||||
padding: 34px 40px 18px;
|
||||
transform: translateY(-56px);
|
||||
background: rgba(255, 255, 255, 0.94);
|
||||
border: 1px solid rgba(255, 255, 255, 0.68);
|
||||
border-radius: 16px;
|
||||
box-shadow: 0 28px 80px rgba(2, 18, 48, 0.28);
|
||||
backdrop-filter: blur(18px);
|
||||
}
|
||||
</style>
|
||||
|
||||
<style lang="less" scoped>
|
||||
// responsive
|
||||
@media (max-width: @screen-lg) {
|
||||
.container {
|
||||
.banner {
|
||||
width: 25%;
|
||||
.login-card-logo {
|
||||
display: block;
|
||||
width: 48px;
|
||||
height: 48px;
|
||||
margin: 0 auto 14px;
|
||||
}
|
||||
|
||||
.login-footer {
|
||||
margin-top: 24px;
|
||||
padding-top: 16px;
|
||||
border-top: 1px solid rgba(29, 44, 75, 0.08);
|
||||
color: #8a94a6;
|
||||
font-size: 12px;
|
||||
line-height: 20px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
@media (max-width: @screen-sm) {
|
||||
.login-page {
|
||||
padding: 82px 16px 20px;
|
||||
background-position: center;
|
||||
|
||||
&::before {
|
||||
background: rgba(3, 19, 45, 0.24);
|
||||
}
|
||||
}
|
||||
|
||||
.login-card {
|
||||
padding: 28px 22px 16px;
|
||||
transform: translateY(-24px);
|
||||
background: rgba(255, 255, 255, 0.97);
|
||||
backdrop-filter: blur(20px);
|
||||
}
|
||||
|
||||
.login-card-logo {
|
||||
width: 44px;
|
||||
height: 44px;
|
||||
margin-bottom: 12px;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-height: 720px) and (min-width: @screen-sm) {
|
||||
.login-page {
|
||||
padding-top: 82px;
|
||||
}
|
||||
|
||||
.login-card {
|
||||
padding-top: 26px;
|
||||
transform: none;
|
||||
}
|
||||
}
|
||||
|
||||
@media (prefers-reduced-motion: reduce) {
|
||||
.login-page {
|
||||
scroll-behavior: auto;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
Reference in New Issue
Block a user