From 9300040f80721d230e2f7e296cb0d25a84b8067b Mon Sep 17 00:00:00 2001
From: 马宇豪 <978517621@qq.com>
Date: 星期三, 09 八月 2023 09:55:45 +0800
Subject: [PATCH] 新项目
---
.env.development | 2
src/assets/loginPage/panel-bg.png | 0
src/views/loginPage/loginPage.vue | 100 +++++++--------------------------
src/assets/loginPage/login-bg.jpg | 0
src/assets/loginPage/login_icon_user.png | 0
src/views/loginPage/component/accountLogin.vue | 49 ++++++++++------
src/assets/loginPage/login_icon_password.png | 0
7 files changed, 54 insertions(+), 97 deletions(-)
diff --git a/.env.development b/.env.development
index 7cbe28c..5fe3cb4 100644
--- a/.env.development
+++ b/.env.development
@@ -1,5 +1,5 @@
# 本地环境
ENV = 'development'
-VITE_API_URL = 'http://121.239.169.27:16070'
+VITE_API_URL = 'http://121.239.169.41:9091'
#线上正式环境接口地址
\ No newline at end of file
diff --git a/src/assets/loginPage/login-bg.jpg b/src/assets/loginPage/login-bg.jpg
index aa29885..e49ef50 100644
--- a/src/assets/loginPage/login-bg.jpg
+++ b/src/assets/loginPage/login-bg.jpg
Binary files differ
diff --git a/src/assets/loginPage/login_icon_password.png b/src/assets/loginPage/login_icon_password.png
index 1f6653d..8929a6f 100644
--- a/src/assets/loginPage/login_icon_password.png
+++ b/src/assets/loginPage/login_icon_password.png
Binary files differ
diff --git a/src/assets/loginPage/login_icon_user.png b/src/assets/loginPage/login_icon_user.png
index a113a9b..5e67ddb 100644
--- a/src/assets/loginPage/login_icon_user.png
+++ b/src/assets/loginPage/login_icon_user.png
Binary files differ
diff --git a/src/assets/loginPage/panel-bg.png b/src/assets/loginPage/panel-bg.png
new file mode 100644
index 0000000..bb1518f
--- /dev/null
+++ b/src/assets/loginPage/panel-bg.png
Binary files differ
diff --git a/src/views/loginPage/component/accountLogin.vue b/src/views/loginPage/component/accountLogin.vue
index 8ae28b4..cf4d1c8 100644
--- a/src/views/loginPage/component/accountLogin.vue
+++ b/src/views/loginPage/component/accountLogin.vue
@@ -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">
@@ -191,16 +191,12 @@
// 存储 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);
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')
@@ -327,15 +323,17 @@
<style scoped lang="scss">
.login-content-form {
- margin-top: 40px;
- width: 80%;
+ margin-top: 4vh;
+ 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);
&:focus-within {
- border: 1px solid #2053d7;
+ border: 1px solid #11FEEE;
}
}
@for $i from 1 through 4 {
@@ -347,9 +345,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 +377,31 @@
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-image: linear-gradient(to bottom,#003892,#003892,#003892);
}
+ &:active {
+ letter-spacing: 6px;
+ border: 2px solid #11FEEE;
+ color: #11FEEE;
+ font-weight: bolder;
+ background-image: linear-gradient(to bottom,#003892,#003892,#003892);
+ }
}
}
</style>
diff --git a/src/views/loginPage/loginPage.vue b/src/views/loginPage/loginPage.vue
index 29c9c52..7ad9d7c 100644
--- a/src/views/loginPage/loginPage.vue
+++ b/src/views/loginPage/loginPage.vue
@@ -1,16 +1,12 @@
<template>
<div class="login-container">
<div class="loginContent">
+ <div class="welcc">广域特殊气体泄露在线监测预警系统</div>
<div class="loginPanel">
- <div class="welcc">科学研究实验安全风险评估系统</div>
<div class="loginGroup">
- <div class="loginPic">
- <img src="../../assets/loginPage/login-pic.png">
- </div>
- <div style="width: 45%">
- <el-tabs v-model="tabsActiveName">
+ <div style="width: 100%">
+ <div style="width:100%;text-align: center;font-size: 22px;color: #11FEEE">欢迎登录</div>
<AccountLogin />
- </el-tabs>
</div>
</div>
</div>
@@ -30,7 +26,6 @@
// 定义接口来定义对象的类型
interface LoginState {
- tabsActiveName: string;
isScan: boolean;
}
@@ -41,7 +36,6 @@
const storesThemeConfig = useThemeConfig();
const { themeConfig } = storeToRefs(storesThemeConfig);
const state = reactive<LoginState>({
- tabsActiveName: 'account',
isScan: false
});
// 获取布局配置信息
@@ -64,60 +58,13 @@
<style scoped lang="scss">
@media screen and (min-width: 1366px){
- .loginContent{
- display: flex;
- justify-content: space-around;
- padding: 0 200px;
- }
- .loginPic{
- width: 55%;
- height: 100%;
- position: relative;
- img{
- width: 103%;
- height: auto;
- position: absolute;
- bottom: -180px;
- right: 15%;
- margin-top: 40px;
- }
- }
}
@media screen and (min-width: 1024px) and (max-width: 1366px){
- .loginPic{
- width: 55%;
- height: 100%;
- position: relative;
- img{
- width: 103%;
- height: auto;
- position: absolute;
- bottom: -80px;
- right: 0;
- }
- }
}
@media screen and (min-width: 960px) and (max-width: 1024px){
- .loginContent{
- display: flex;
- justify-content: space-between;
- padding: 0 40px;
- }
- .loginPic{
- width: 55%;
- height: 100%;
- position: relative;
- img{
- width: 103%;
- height: auto;
- position: absolute;
- bottom: -80px;
- right: 0;
- }
- }
}
.login-container {
width: 100%;
@@ -144,34 +91,31 @@
}
}
.loginContent {
- width: 100%;
+ width: 32vw;
display: flex;
+ flex-direction: column;
+ align-items: center;
justify-content: center;
-
+ margin-top: -10vh;
+ .welcc {
+ font-size: 40px;
+ font-family: 'PingFang SC';
+ text-align: center;
+ font-weight: 900;
+ color: #11FEEE;
+ white-space: nowrap;
+ z-index: 9999;
+ margin-bottom: 3vh;
+ }
.loginPanel {
- width: 85%;
- min-height: 56%;
- padding: 80px 40px;
+ width: 100%;
+ padding: 4vh;
box-sizing: border-box;
display: flex;
flex-direction: column;
- align-items: flex-end;
- background: #fff;
- min-width: 450px;
- border-radius: 15px;
- box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
- .welcc {
- font-size: 52px;
- font-family: 'PingFang SC';
- text-align: right;
- font-weight: 900;
- color: #485BD4;
- letter-spacing: 6px;
- white-space: nowrap;
- position: relative;
- z-index: 9999;
- text-shadow: 0 3px 5px rgba(72,91,212,.4);
- }
+ align-items: center;
+ background: url("../../assets/loginPage/panel-bg.png") no-repeat center;
+ background-size: 100% 100%;
:deep(.loginGroup){
width: 100%;
--
Gitblit v1.9.2