From 2bd5b4f32d19abf1ef1cbbcba2b4686486ffcf0f Mon Sep 17 00:00:00 2001
From: liujie <1793218484@qq.com>
Date: 星期六, 10 十月 2026 11:59:34 +0800
Subject: [PATCH] 风格替换
---
hugray-admin/src/views/login.vue | 295 ++++++++++++++++++++++++++++++++++++++--------------------
1 files changed, 193 insertions(+), 102 deletions(-)
diff --git a/hugray-admin/src/views/login.vue b/hugray-admin/src/views/login.vue
index f4b6398..253f98d 100644
--- a/hugray-admin/src/views/login.vue
+++ b/hugray-admin/src/views/login.vue
@@ -1,65 +1,62 @@
<template>
<div class="login">
- <el-form ref="loginRef" :model="loginForm" :rules="loginRules" class="login-form">
- <h3 class="title">{{ title }}</h3>
- <el-form-item prop="username">
- <el-input
- v-model="loginForm.username"
- type="text"
- size="large"
- auto-complete="off"
- placeholder="账号"
- >
- <template #prefix><svg-icon icon-class="user" class="el-input__icon input-icon" /></template>
- </el-input>
- </el-form-item>
- <el-form-item prop="password">
- <el-input
- v-model="loginForm.password"
- type="password"
- size="large"
- auto-complete="off"
- placeholder="密码"
- @keyup.enter="handleLogin"
- >
- <template #prefix><svg-icon icon-class="password" class="el-input__icon input-icon" /></template>
- </el-input>
- </el-form-item>
- <el-form-item prop="code" v-if="captchaEnabled">
- <el-input
- v-model="loginForm.code"
- size="large"
- auto-complete="off"
- placeholder="验证码"
- style="width: 63%"
- @keyup.enter="handleLogin"
- >
- <template #prefix><svg-icon icon-class="validCode" class="el-input__icon input-icon" /></template>
- </el-input>
- <div class="login-code">
- <img :src="codeUrl" @click="getCode" class="login-code-img"/>
+ <!-- 左侧品牌区：直接使用设计稿切图（含 Logo 与标语），图片底色 #0B3F6F 与面板底色一致，缩放后无缝 -->
+ <div class="login-brand"></div>
+ <!-- 右侧表单区 -->
+ <div class="login-panel">
+ <el-form
+ ref="loginRef"
+ :model="loginForm"
+ :rules="loginRules"
+ label-position="top"
+ hide-required-asterisk
+ class="login-form"
+ >
+ <h3 class="title">登录</h3>
+ <el-form-item label="账号" prop="username">
+ <el-input
+ v-model="loginForm.username"
+ type="text"
+ auto-complete="off"
+ placeholder="请输入"
+ @keyup.enter="handleLogin"
+ />
+ </el-form-item>
+ <el-form-item label="密码" prop="password">
+ <el-input
+ v-model="loginForm.password"
+ type="password"
+ auto-complete="off"
+ placeholder="请输入"
+ @keyup.enter="handleLogin"
+ />
+ </el-form-item>
+ <div class="login-options">
+ <el-checkbox v-model="loginForm.rememberMe" class="remember">记住我</el-checkbox>
+ <el-form-item prop="code" class="login-code" v-if="captchaEnabled">
+ <el-input
+ v-model="loginForm.code"
+ auto-complete="off"
+ placeholder="验证码"
+ @keyup.enter="handleLogin"
+ />
+ <img :src="codeUrl" class="login-code-img" alt="验证码" @click="getCode" />
+ </el-form-item>
</div>
- </el-form-item>
- <el-checkbox v-model="loginForm.rememberMe" style="margin:0px 0px 25px 0px;">记住密码</el-checkbox>
- <el-form-item style="width:100%;">
- <el-button
- :loading="loading"
- size="large"
- type="primary"
- style="width:100%;"
- @click.prevent="handleLogin"
- >
- <span v-if="!loading">登 录</span>
- <span v-else>登 录 中...</span>
- </el-button>
- <div style="float: right;" v-if="register">
+ <div class="login-submit">
+ <el-button :loading="loading" class="login-button" @click.prevent="handleLogin">
+ <span v-if="!loading">登 录</span>
+ <span v-else>登 录 中...</span>
+ </el-button>
+ </div>
+ <div class="login-register" v-if="register">
<router-link class="link-type" :to="'/register'">立即注册</router-link>
</div>
- </el-form-item>
- </el-form>
- <!-- 底部 -->
- <div class="el-login-footer">
- <span>{{ footerContent }}</span>
+ </el-form>
+ <!-- 底部 -->
+ <div class="el-login-footer" v-if="footerVisible">
+ <span>{{ footerContent }}</span>
+ </div>
</div>
</div>
</template>
@@ -71,7 +68,7 @@
import useUserStore from '@/store/modules/user'
import defaultSettings from '@/settings'
-const title = import.meta.env.VITE_APP_TITLE
+const footerVisible = defaultSettings.footerVisible
const footerContent = defaultSettings.footerContent
const userStore = useUserStore()
const route = useRoute()
@@ -168,72 +165,166 @@
<style lang='scss' scoped>
.login {
display: flex;
- justify-content: center;
- align-items: center;
height: 100%;
- background-image: url("../assets/images/login-background.jpg");
- background-size: cover;
}
-.title {
- margin: 0px auto 30px auto;
- text-align: center;
- color: #707070;
+
+/* 左侧品牌区：设计稿切图按高度等比铺满，左右留白由同色底填充 */
+.login-brand {
+ flex: 0 0 61.5%;
+ background-color: #0B3F6F;
+ background-image: url("../assets/images/login-left.png");
+ background-repeat: no-repeat;
+ background-position: center;
+ background-size: contain;
+}
+
+/* 右侧表单区 */
+.login-panel {
+ flex: 1;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ background-color: #80BF40;
}
.login-form {
+ width: 360px;
+ max-width: calc(100% - 32px);
+ padding: 22px 52px 40px;
+ background-color: #ffffff;
border-radius: 6px;
- background: #ffffff;
- width: 400px;
- padding: 25px 25px 5px 25px;
- z-index: 1;
- .el-input {
- height: 40px;
- input {
- height: 40px;
+ box-shadow: 0 4px 18px rgba(0, 0, 0, 0.12);
+
+ .title {
+ margin: 0 0 18px;
+ text-align: center;
+ font-size: 16px;
+ font-weight: 600;
+ color: #0B3F6F;
+ }
+
+ :deep(.el-form-item) {
+ margin-bottom: 18px;
+ }
+
+ :deep(.el-form-item__label) {
+ height: auto;
+ padding: 0 0 8px;
+ line-height: 1.2;
+ font-size: 13px;
+ color: #436596;
+ }
+
+ /* 输入框颜色与尺寸全部写死，避免暗色主题的 CSS 变量把白底黑字改掉 */
+ :deep(.el-input__wrapper) {
+ padding: 0 12px;
+ border-radius: 4px;
+ background-color: #ffffff;
+ box-shadow: 0 0 0 1px #D2D2D2 inset;
+ &:hover {
+ box-shadow: 0 0 0 1px #C0C4CC inset;
+ }
+ &.is-focus {
+ box-shadow: 0 0 0 1px #0B3F6F inset;
}
}
- .input-icon {
- height: 39px;
- width: 14px;
- margin-left: 0px;
+
+ :deep(.el-input__inner) {
+ height: 36px;
+ font-size: 13px;
+ color: #333333;
+ &::placeholder {
+ color: #9DA6B3;
+ }
}
-}
-.login-tip {
- font-size: 13px;
- text-align: center;
- color: #bfbfbf;
-}
-.login-code {
- width: 33%;
- height: 40px;
- float: right;
- img {
- cursor: pointer;
+
+ .login-options {
+ display: flex;
+ align-items: center;
+ justify-content: space-between;
+ gap: 10px;
+ }
+
+ .remember {
+ --el-checkbox-checked-bg-color: #1684FC;
+ --el-checkbox-checked-input-border-color: #1684FC;
+ --el-checkbox-checked-icon-color: #ffffff;
+ --el-checkbox-input-border-color-hover: #1684FC;
+ :deep(.el-checkbox__label) {
+ font-size: 13px;
+ color: #333333;
+ }
+ }
+
+ /* 验证码输入框与图片同排，去掉表单项自身的下边距以与「记住我」垂直居中 */
+ .login-code {
+ flex: 0 1 auto;
+ min-width: 0;
+ margin-bottom: 0;
+ :deep(.el-form-item__content) {
+ flex-wrap: nowrap;
+ gap: 8px;
+ }
+ :deep(.el-input) {
+ flex: 0 1 88px;
+ width: 88px;
+ min-width: 56px;
+ }
+ }
+
+ .login-code-img {
+ flex: 0 0 auto;
+ height: 36px;
+ border-radius: 4px;
vertical-align: middle;
+ cursor: pointer;
+ }
+
+ .login-submit {
+ margin-top: 34px;
+ text-align: center;
+ }
+
+ .login-button {
+ width: 140px;
+ height: 36px;
+ font-size: 14px;
+ letter-spacing: 1px;
+ color: #ffffff;
+ background-color: #0B3F6F;
+ border-color: #0B3F6F;
+ border-radius: 4px;
+ &:hover,
+ &:focus {
+ color: #ffffff;
+ background-color: #0A3660;
+ border-color: #0A3660;
+ }
}
}
+
+.login-register {
+ margin-top: 12px;
+ text-align: center;
+}
+
.el-login-footer {
- height: 40px;
- line-height: 40px;
position: fixed;
bottom: 0;
width: 100%;
+ height: 40px;
+ line-height: 40px;
text-align: center;
- color: #fff;
font-family: Arial;
font-size: 12px;
letter-spacing: 1px;
-}
-.login-code-img {
- height: 40px;
- padding-left: 12px;
+ color: rgba(11, 63, 111, 0.65);
}
-html.dark .login {
- background-image: linear-gradient(rgba(0, 0, 0, 0.55), rgba(0, 0, 0, 0.55)), url("../assets/images/login-background.jpg");
- .login-form {
- background: var(--el-bg-color-overlay) !important;
- box-shadow: 0 12px 40px rgba(0, 0, 0, 0.5);
+/* 窄屏收起品牌区，保证表单可用 */
+@media (max-width: 960px) {
+ .login-brand {
+ display: none;
}
}
</style>
--
Gitblit v1.7.1