heqiapp/platforms
2
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat(frontend): redesign management login pages

Browse Source
This commit is contained in:
david
2026-07-31 12:47:38 +08:00
parent a47e9025d0
commit ad6a914450
20 changed files with 750 additions and 280 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
frontend/gas_admin/README.md
View File

@@ -1,4 +1,4 @@
# 禾气气站管理系统
# 和气气站管理系统
基于 Vue 3、Vite、TypeScript、Pinia 和 Arco Design 的气站管理端。开发服务器默认端口为 `5175`。

2
frontend/gas_admin/index.html
View File

@@ -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>

2
frontend/gas_admin/package.json
View File

@@ -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
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 492 KiB

2
frontend/gas_admin/src/components/footer/index.vue
View File

@@ -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
frontend/gas_admin/src/components/navbar/index.vue
View File

@@ -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>

163
frontend/gas_admin/src/views/login/components/login-form.vue
View File

@@ -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>

151
frontend/gas_admin/src/views/login/index.vue
View File

@@ -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>