feat: 修改登录页样式

This commit is contained in:
砂糖
2025-09-05 10:03:26 +08:00
parent abe3c57300
commit d459072a11
8 changed files with 42 additions and 12 deletions

Binary file not shown.

Before

Width:  |  Height:  |  Size: 6.2 KiB

After

Width:  |  Height:  |  Size: 19 KiB

View File

@@ -6,12 +6,15 @@
import useSettingsStore from '@/store/modules/settings' import useSettingsStore from '@/store/modules/settings'
import { handleThemeStyle } from '@/utils/theme' import { handleThemeStyle } from '@/utils/theme'
import useProductStore from '@/store/modules/product' import useProductStore from '@/store/modules/product'
import { getToken } from '@/utils/auth'
onMounted(() => { onMounted(() => {
nextTick(() => { nextTick(() => {
// 初始化主题样式 // 初始化主题样式
handleThemeStyle(useSettingsStore().theme) handleThemeStyle(useSettingsStore().theme)
if (getToken()) {
useProductStore().fetchProductMap() useProductStore().fetchProductMap()
}
}) })
}) })
</script> </script>

Binary file not shown.

After

Width:  |  Height:  |  Size: 382 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 38 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 50 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 6.2 KiB

After

Width:  |  Height:  |  Size: 19 KiB

View File

@@ -10,16 +10,16 @@
<screenfull id="screenfull" class="right-menu-item hover-effect" /> <screenfull id="screenfull" class="right-menu-item hover-effect" />
<el-tooltip content="主题模式" effect="dark" placement="bottom"> <!-- <el-tooltip content="主题模式" effect="dark" placement="bottom">
<div class="right-menu-item hover-effect theme-switch-wrapper" @click="toggleTheme"> <div class="right-menu-item hover-effect theme-switch-wrapper" @click="toggleTheme">
<svg-icon v-if="settingsStore.isDark" icon-class="sunny" /> <svg-icon v-if="settingsStore.isDark" icon-class="sunny" />
<svg-icon v-if="!settingsStore.isDark" icon-class="moon" /> <svg-icon v-if="!settingsStore.isDark" icon-class="moon" />
</div> </div>
</el-tooltip> </el-tooltip> -->
<el-tooltip content="布局大小" effect="dark" placement="bottom"> <!-- <el-tooltip content="布局大小" effect="dark" placement="bottom">
<size-select id="size-select" class="right-menu-item hover-effect" /> <size-select id="size-select" class="right-menu-item hover-effect" />
</el-tooltip> </el-tooltip> -->
</template> </template>
<el-dropdown @command="handleCommand" class="avatar-container right-menu-item hover-effect" trigger="hover"> <el-dropdown @command="handleCommand" class="avatar-container right-menu-item hover-effect" trigger="hover">

View File

@@ -1,7 +1,11 @@
<template> <template>
<div class="login"> <div class="login">
<div class="login-container">
<el-form ref="loginRef" :model="loginForm" :rules="loginRules" class="login-form"> <el-form ref="loginRef" :model="loginForm" :rules="loginRules" class="login-form">
<h3 class="title">{{ title }}</h3> <h3 class="title">
<img :src="LogoImage" alt="公司 Logo" class="logo-img"/>
{{ title }}
</h3>
<el-form-item prop="username"> <el-form-item prop="username">
<el-input <el-input
v-model="loginForm.username" v-model="loginForm.username"
@@ -57,6 +61,12 @@
</div> </div>
</el-form-item> </el-form-item>
</el-form> </el-form>
<div class="login-right">
<img :src="RightImage" alt="公司 Logo" class="right-img"/>
</div>
</div>
<!-- 底部 --> <!-- 底部 -->
<div class="el-login-footer"> <div class="el-login-footer">
<span>Copyright © 2018-2025 ruoyi.vip All Rights Reserved.</span> <span>Copyright © 2018-2025 ruoyi.vip All Rights Reserved.</span>
@@ -70,6 +80,8 @@ import Cookies from "js-cookie"
import { encrypt, decrypt } from "@/utils/jsencrypt" import { encrypt, decrypt } from "@/utils/jsencrypt"
import useUserStore from '@/store/modules/user' import useUserStore from '@/store/modules/user'
import useProductStore from '@/store/modules/product' import useProductStore from '@/store/modules/product'
import RightImage from '@/assets/images/right.jpg'
import LogoImage from '@/assets/logo/logo-full.jpg'
const title = import.meta.env.VITE_APP_TITLE const title = import.meta.env.VITE_APP_TITLE
const userStore = useUserStore() const userStore = useUserStore()
@@ -171,20 +183,35 @@ getCookie()
justify-content: center; justify-content: center;
align-items: center; align-items: center;
height: 100%; height: 100%;
background-image: url("../assets/images/login-background.jpg"); background-image: url("../assets/images/back.jpg");
background-size: cover; background-size: cover;
} }
.title { .title {
margin: 0px auto 30px auto; margin: 0px auto 30px auto;
text-align: center; text-align: center;
color: #707070; color: #707070;
display: flex;
align-items: center;
justify-content: center;
}
.logo-img {
width: 100px;
height: 100px;
}
.login-container {
display: flex;
justify-content: center;
align-items: center;
height: 60%;
border-radius: 6px;
background: #ffffff;
width: 60%;
padding: 25px 25px 5px 25px;
} }
.login-form { .login-form {
border-radius: 6px;
background: #ffffff;
width: 400px;
padding: 25px 25px 5px 25px;
z-index: 1; z-index: 1;
.el-input { .el-input {
height: 40px; height: 40px;