From 7c8c06b5397d22151b02407b1f4f19d771bb15dd Mon Sep 17 00:00:00 2001
From: zhouwx <1175765986@qq.com>
Date: 星期一, 16 六月 2025 14:28:57 +0800
Subject: [PATCH] 修改
---
src/views/loginPage/component/accountLogin.vue | 77 ++++++++++++++++++++++++++------------
1 files changed, 53 insertions(+), 24 deletions(-)
diff --git a/src/views/loginPage/component/accountLogin.vue b/src/views/loginPage/component/accountLogin.vue
index 8ae28b4..800e75a 100644
--- a/src/views/loginPage/component/accountLogin.vue
+++ b/src/views/loginPage/component/accountLogin.vue
@@ -1,14 +1,14 @@
<template>
<el-form size="large" class="login-content-form">
<el-form-item class="login-animation1">
- <el-input type="text" :placeholder="$t('message.account.accountPlaceholder1')" v-model="ruleForm.name" clearable autocomplete="off" size="large">
+ <el-input type="text" placeholder="请输入用户名" v-model="ruleForm.name" clearable autocomplete="off" size="large">
<template #prefix>
<el-icon class="el-input__icon" style="margin-right: 20px"><img src="../../../assets/loginPage/login_icon_user.png" style="width: 24px; height: 24px" /></el-icon>
</template>
</el-input>
</el-form-item>
<el-form-item class="login-animation2">
- <el-input :type="isShowPassword ? 'text' : 'password'" :placeholder="$t('message.account.accountPlaceholder2')" v-model="ruleForm.pwd" autocomplete="off" size="large" @keyup.enter.native="onSignIn">
+ <el-input :type="isShowPassword ? 'text' : 'password'" placeholder="请输入密码" v-model="ruleForm.pwd" autocomplete="off" size="large" @keyup.enter.native="onSignIn">
<template #prefix>
<el-icon class="el-input__icon" style="margin-right: 20px"><img src="../../../assets/loginPage/login_icon_password.png" style="width: 24px; height: 24px" /></el-icon>
</template>
@@ -18,8 +18,8 @@
</el-input>
</el-form-item>
<el-form-item class="login-animation4 codeDeal">
- <el-checkbox v-model="saveCode" label="记住密码" size="large" />
- <span class="forgetCode" @click="identify">忘记密码？</span>
+ <el-checkbox v-model="saveCode" label="记住密码" size="large" style="color: #11FEEE"/>
+<!-- <span class="forgetCode" @click="identify">忘记密码？</span>-->
</el-form-item>
<div class="btnBox">
<el-button type="primary" class="login-content-submit" round @click="onSignIn" :loading="loading.signIn">
@@ -84,7 +84,7 @@
import { useLoginApi } from '/@/api/login';
import { useUserInfo } from '/@/stores/userInfo';
import type { FormInstance, FormRules } from 'element-plus'
-
+import "amfe-flexible";
import {verifyPhone,verifyIdCard} from "/@/utils/toolsValidate"
import { Base64 } from 'js-base64'
import {useMenuApi} from "/@/api/systemManage/menu";
@@ -122,13 +122,24 @@
// 页面载入时执行方法
onMounted(() => {
hasUserCodeOrPassword()
+ const baseSize = 38;
+ /* 设置 rem 函数 */
+ function setRem() {
+ const scale = document.documentElement.clientWidth / 1920; /* 当前页面宽度缩放比例，可根据自己需要修改 */
+ document.documentElement.style.fontSize = baseSize * Math.min(scale, 2) + "px";/* 设置页面根节点字体大小 */
+ }
+ setRem();/* 初始化 rem */
+
+ window.onresize = () => {
+ setRem();/* 改变窗口大小时重新设置 rem */
+ }
// getAllDepartment();
});
const hasUserCodeOrPassword =()=> {
if (localStorage.getItem('userCode') && localStorage.getItem('userPassword')) {
state.ruleForm.name = localStorage.getItem('userCode') as string
- state.ruleForm.password = Base64.decode(localStorage.getItem('userPassword'))//解密
+ state.ruleForm.pwd = Base64.decode(localStorage.getItem('userPassword'))//解密
state.saveCode = true
}
}
@@ -191,16 +202,13 @@
// 存储 token 到浏览器缓存
let res = await useLoginApi().signIn(state.ruleForm);
if (res.data.code === 100) {
- console.log(res.data.data,'user')
await userInfo.setUserInfos(res.data.data);
Cookies.set('token', res.data.data.tk);
Cookies.set('uid', res.data.data.uid);
- // Session.set('token', res.data.data.accessToken);
- // Session.set('projectId', '');
- // Session.set('uid', res.data.data.uid);
+ Cookies.set('roles', JSON.stringify(res.data.data.roles));
if (state.saveCode) {
localStorage.setItem('userCode', state.ruleForm.name)
- localStorage.setItem('userPassword', Base64.encode(state.ruleForm.password),)
+ localStorage.setItem('userPassword', Base64.encode(state.ruleForm.pwd),)
} else {
localStorage.removeItem('userCode')
localStorage.removeItem('userPassword')
@@ -234,7 +242,7 @@
let res = await useMenuApi().getMenuAdmin();
if (res.data.code === 100) {
state.menu = JSON.parse(JSON.stringify(res.data.data))
- router.push(state.menu[0].children[0].path);
+ router.push(state.menu[0].path);
} else {
ElMessage({
type: 'warning',
@@ -327,15 +335,20 @@
<style scoped lang="scss">
.login-content-form {
- margin-top: 40px;
- width: 80%;
+ margin-top: 30px;
+ width: 100%;
- .el-input::v-deep .el-input__wrapper {
- height: 56px;
- border-radius: 4px;
+ .el-input ::v-deep(.el-input__wrapper) {
+ height: 48px;
+ background-color: #0A3296;
+ border-radius: 2px;
padding: 0 30px;
+ border: 1px solid rgba(17,254,238,.4);
+ .el-input__inner{
+ color: #fff;
+ }
&:focus-within {
- border: 1px solid #2053d7;
+ border: 1px solid #11FEEE;
}
}
@for $i from 1 through 4 {
@@ -347,9 +360,13 @@
animation-delay: calc($i/10) + s;
}
}
- .codeDeal::v-deep .el-form-item__content {
+ .codeDeal ::v-deep(.el-form-item__content) {
display: flex;
justify-content: space-between;
+ .el-checkbox__inner{
+ background-color: transparent;
+ border: 1px solid #11FEEE;
+ }
.forgetCode {
color: #2053d7;
@@ -375,20 +392,32 @@
justify-content: center;
}
.login-content-submit {
- width: 55%;
+ width: 100%;
height: 56px;
font-size: 18px;
- border-radius: 6px;
+ border-radius: 28px;
+ border: 1px solid #11FEEE;
letter-spacing: 4px;
font-weight: 300;
- margin-top: 15px;
- background-image: linear-gradient(to right,#545EF1,#6B8CF1);
+ background-image: linear-gradient(to bottom,#0081C2,#003892,#0081C2);
transition: 0.3s;
box-shadow: 0 8px 30px rgba(88,101,241,.4);
&:hover {
letter-spacing: 6px;
- background-image: linear-gradient(to left,#545EF1,#6B8CF1);
+ border: 2px solid #11FEEE;
+ color: #11FEEE;
+ font-weight: bolder;
+ background-color: transparent;
+ background-image: linear-gradient(to bottom,#003892,#003892,#003892);
}
+ &:active {
+ letter-spacing: 6px;
+ border: 2px solid #11FEEE;
+ color: #11FEEE;
+ font-weight: bolder;
+ background-color: transparent;
+ background-image: linear-gradient(to bottom,#003892,#003892,#003892);
+ }
}
}
</style>
--
Gitblit v1.9.2