From e5d499ae6a4e6b320f71c49987b76cc11f6bc1e4 Mon Sep 17 00:00:00 2001
From: zxl <763096477@qq.com>
Date: 星期二, 28 十月 2025 14:13:10 +0800
Subject: [PATCH] 首页问题
---
src/views/login.vue | 385 ++++++++++++++++++++++++++++++++++++------------------
1 files changed, 258 insertions(+), 127 deletions(-)
diff --git a/src/views/login.vue b/src/views/login.vue
index e855493..82cadab 100644
--- a/src/views/login.vue
+++ b/src/views/login.vue
@@ -1,141 +1,130 @@
<template>
<div class="login">
- <div class="title-container">
- <h3 class="title">鑷础鍏畨澶╃綉杩愮淮骞冲彴</h3>
- </div>
- <el-form ref="loginForm" :model="loginForm" :rules="loginRules" class="login-form">
- <h3 class="title">鑷础鍏畨澶╃綉杩愮淮骞冲彴</h3>
-
- <el-form-item prop="username">
- <el-input
- v-model="loginForm.username"
- type="text"
- auto-complete="off"
- placeholder="璐﹀彿"
- >
- <svg-icon slot="prefix" icon-class="user" class="el-input__icon input-icon" />
- </el-input>
- </el-form-item>
- <el-form-item prop="password">
- <el-input
- v-model="loginForm.password"
- type="password"
- auto-complete="off"
- placeholder="瀵嗙爜"
- @keyup.enter.native="handleLogin"
- >
- <svg-icon slot="prefix" icon-class="password" class="el-input__icon input-icon" />
- </el-input>
- </el-form-item>
- <el-form-item prop="code" v-if="captchaEnabled">
- <el-input
- v-model="loginForm.code"
- auto-complete="off"
- placeholder="楠岃瘉鐮�"
- style="width: 63%"
- @keyup.enter.native="handleLogin"
- >
- <svg-icon slot="prefix" icon-class="validCode" class="el-input__icon input-icon" />
- </el-input>
- <div class="login-code">
- <img :src="codeUrl" @click="getCode" class="login-code-img"/>
+ <div class="login-container">
+ <div class="login-wrapper">
+ <div class="info-wrapper enter-x">
+ <div class="title-wrapper">
+ <div class="logo">
+ <img src="../assets/icons/logo.png" alt="">
+ </div>
+ <p class="title">杩愮淮鑰冩牳骞冲彴</p>
+ </div>
+ <div class="logo-wrapper">
+ <img src="../assets/svg/login-box-bg.svg" alt="">
+ </div>
</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="medium"
- type="primary"
- style="width:100%;"
- @click.native.prevent="handleLogin"
- >
- <span v-if="!loading">鐧� 褰�</span>
- <span v-else>鐧� 褰� 涓�...</span>
- </el-button>
- <div style="float: right;" v-if="register">
- <router-link class="link-type" :to="'/register'">绔嬪嵆娉ㄥ唽</router-link>
- </div>
- </el-form-item>
- </el-form>
-
- <el-dialog title="涓轰簡鎮ㄧ殑璐﹀彿瀹夊叏,棣栨鐧婚檰璇蜂慨鏀瑰瘑鐮�" :visible.sync="loginInfo.firstLogin==0">
- <el-form>
- <el-form-item label="鏂板瘑鐮�">
- <el-input v-model="newPassword" autocomplete="off"></el-input>
- </el-form-item>
- <el-form-item label="璇风‘璁ゅ瘑鐮�">
- <el-input v-model="confirmPassword" autocomplete="off"></el-input>
+ <div class="form-wrapper">
+ <h1 class="title">鐧诲綍</h1>
+ <el-form ref="loginForm" :model="loginForm" :rules="loginRules" class="login-form">
+ <el-form-item prop="username">
+ <el-input v-model="loginForm.username" type="text" auto-complete="off" placeholder="璐﹀彿">
+ <svg-icon slot="prefix" icon-class="user" class="el-input__icon input-icon"/>
+ </el-input>
</el-form-item>
- </el-form>
- <div slot="footer" class="dialog-footer">
+ <el-form-item prop="password">
+ <el-input v-model="loginForm.password" type="password" auto-complete="off" placeholder="瀵嗙爜"
+ @keyup.enter.native="handleLogin">
+ <svg-icon slot="prefix" icon-class="password" class="el-input__icon input-icon"/>
+ </el-input>
+ </el-form-item>
+ <el-form-item prop="code" v-if="captchaEnabled">
+ <el-input v-model="loginForm.code" auto-complete="off" placeholder="楠岃瘉鐮�" style="width: 63%"
+ @keyup.enter.native="handleLogin">
+ <svg-icon slot="prefix" icon-class="validCode" class="el-input__icon input-icon"/>
+ </el-input>
+ <div class="login-code">
+ <img :src="codeUrl" @click="getCode" class="login-code-img"/>
+ </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="medium" type="primary" style="width:100%;"
+ @click.native.prevent="handleLogin">
+ <span v-if="!loading">鐧� 褰�</span>
+ <span v-else>鐧� 褰� 涓�...</span>
+ </el-button>
+ <div style="float: right;" v-if="register">
+ <router-link class="link-type" :to="'/register'">绔嬪嵆娉ㄥ唽</router-link>
+ </div>
+ </el-form-item>
+ </el-form>
+ </div>
+ <el-dialog title="涓轰簡鎮ㄧ殑璐﹀彿瀹夊叏,棣栨鐧婚檰璇蜂慨鏀瑰瘑鐮�" :modal="false" width="500px" :visible.sync="loginInfo.firstLogin == 0">
+ <el-form>
+ <el-form-item label="鏂板瘑鐮�">
+ <el-input v-model="newPassword" show-password autocomplete="off"></el-input>
+ </el-form-item>
+ </el-form>
+ <div slot="footer" class="dialog-footer">
<el-button type="primary" @click="updatePwd">纭� 瀹�</el-button>
- </div>
- </el-dialog>
+ </div>
+ </el-dialog>
+ </div>
+ </div>
</div>
</template>
<script>
-import { getCodeImg ,getInfo} from "@/api/login";
+import {getCodeImg, getInfo} from "@/api/login";
import Cookies from "js-cookie";
-import { encrypt, decrypt } from '@/utils/jsencrypt'
-import { updateUserPwd } from "@/api/system/user";
+import {encrypt, decrypt} from '@/utils/jsencrypt'
+import {updateUserPwd} from "@/api/system/user";
export default {
//鏂板瀵硅薄銆佸彉閲�
name: "Login",
data() {
const equalToPassword = (rule, value, callback) => {
- if (this.newPassword !== value) {
- callback(new Error("涓ゆ杈撳叆鐨勫瘑鐮佷笉涓�鑷�"));
- } else {
- callback();
- }
- };
+ if (this.newPassword !== value) {
+ callback(new Error("涓ゆ杈撳叆鐨勫瘑鐮佷笉涓�鑷�"));
+ } else {
+ callback();
+ }
+ };
const validatePassword = (rule, value, callback) => {
- var regex = /(?=.*[0-9])(?=.*[A-Z])(?=.*[a-z])(?=.*[\W_])/;
- if (value.length < 8 || value.length > 10) {
- callback(new Error('璇疯緭鍏�8-10浣嶅ぇ鍐欏瓧姣�+灏忓啓瀛楁瘝+鏁板瓧+鐗规畩瀛楃'));
- }
- else if (!regex.test(value)) {
- callback(new Error("璇疯緭鍏�8-10浣嶅ぇ鍐欏瓧姣�+灏忓啓瀛楁瘝+鏁板瓧+鐗规畩瀛楃"));
- } else {
- callback();
- }
- };
+ var regex = /(?=.*[0-9])(?=.*[A-Z])(?=.*[a-z])(?=.*[\W_])/;
+ if (value.length < 8 || value.length > 10) {
+ callback(new Error('璇疯緭鍏�8-10浣嶅ぇ鍐欏瓧姣�+灏忓啓瀛楁瘝+鏁板瓧+鐗规畩瀛楃'));
+ } else if (!regex.test(value)) {
+ callback(new Error("璇疯緭鍏�8-10浣嶅ぇ鍐欏瓧姣�+灏忓啓瀛楁瘝+鏁板瓧+鐗规畩瀛楃"));
+ } else {
+ callback();
+ }
+ };
return {
codeUrl: "",
loginForm: {
- username: "admin",
- password: "admin123",
+ username: "",
+ password: "",
rememberMe: false,
code: "",
uuid: ""
},
loginInfo: {
- firstLogin: 1
+ firstLogin: 1
},
+ roles:[],
newPassword: undefined,
confirmPassword: undefined,
loginRules: {
username: [
- { required: true, trigger: "blur", message: "璇疯緭鍏ユ偍鐨勮处鍙�" }
+ {required: true, trigger: "blur", message: "璇疯緭鍏ユ偍鐨勮处鍙�"}
],
password: [
- { required: true, trigger: "blur", message: "璇疯緭鍏ユ偍鐨勫瘑鐮�" }
+ {required: true, trigger: "blur", message: "璇疯緭鍏ユ偍鐨勫瘑鐮�"}
],
- code: [{ required: true, trigger: "change", message: "璇疯緭鍏ラ獙璇佺爜" }]
+ code: [{required: true, trigger: "change", message: "璇疯緭鍏ラ獙璇佺爜"}]
},
rules: {
newPassword: [
- { required: true, message: "鏂板瘑鐮佷笉鑳戒负绌�", trigger: "blur" },
- { required: true, validator: validatePassword, trigger: "blur" }
+ {required: true, message: "鏂板瘑鐮佷笉鑳戒负绌�", trigger: "blur"},
+ {required: true, validator: validatePassword, trigger: "blur"}
],
confirmPassword: [
- { required: true, message: "纭瀵嗙爜涓嶈兘涓虹┖", trigger: "blur" },
- { required: true, validator: equalToPassword, trigger: "blur" }
+ {required: true, message: "纭瀵嗙爜涓嶈兘涓虹┖", trigger: "blur"},
+ {required: true, validator: equalToPassword, trigger: "blur"}
]
},
loading: false,
@@ -148,7 +137,7 @@
},
watch: {
$route: {
- handler: function(route) {
+ handler: function (route) {
console.log(route);
this.redirect = route.query && route.query.redirect;
},
@@ -185,9 +174,9 @@
this.loading = true;
if (this.loginForm.rememberMe) {
- Cookies.set("username", this.loginForm.username, { expires: 30 });
- Cookies.set("password", encrypt(this.loginForm.password), { expires: 30 });
- Cookies.set('rememberMe', this.loginForm.rememberMe, { expires: 30 });
+ Cookies.set("username", this.loginForm.username, {expires: 30});
+ Cookies.set("password", encrypt(this.loginForm.password), {expires: 30});
+ Cookies.set('rememberMe', this.loginForm.rememberMe, {expires: 30});
} else {
Cookies.remove("username");
Cookies.remove("password");
@@ -195,90 +184,191 @@
}
this.$store.dispatch("Login", this.loginForm).then((res) => {
- getInfo().then(loginInfo => {
+ getInfo().then(loginInfo => {
this.loginInfo = loginInfo.user
+ this.roles = loginInfo.roles
//濡傛灉杩斿洖涓�1姝ｅ父璺宠浆
- if(this.loginInfo.firstLogin == 1){
- this.$router.push({ path: "/" }).catch(()=>{});
- return;
- this.$router.push({ path: this.redirect || "/" }).catch(()=>{});
+ if (this.loginInfo.firstLogin == 1) {
+ // this.$router.push({ path: "/" }).catch(() => { });
+ // return;
+ if (this.roles .includes("admin") || this.roles .includes("city_leader")) {
+ this.$router.push({
+ path: '/screen'
+ })
+ } else {
+ this.$router.push({path: this.redirect || "/index"}).catch(() => {
+ });
+ }
} else {
- localStorage.setItem('firstLogin',0)
+ localStorage.setItem('firstLogin', 0)
}
- }).catch(()=>{})
+ }).catch(() => {
+ })
}).catch(() => {
this.loading = false;
if (this.captchaEnabled) {
this.getCode();
}
});
- }
- });
- },
+ }
+ });
+ },
// 鏂板淇敼鏂规硶
- updatePwd(){
+ updatePwd() {
updateUserPwd("", this.newPassword, 0).then(response => {
- // 淇敼瀹屾垚灏唂irstLogin鏀逛负1
+ // 淇敼瀹屾垚灏唂irstLogin鏀逛负1
localStorage.setItem('firstLogin', 1)
this.$modal.msgSuccess("淇敼鎴愬姛");
- this.$router.push({ path: this.redirect || "/" }).catch(() => {});
+ this.$router.push({path: this.redirect || "/"}).catch(() => {
+ });
}).catch((e) => {
console.info(e)
- });
- }
- }
- };
+ });
+ }
+ }
+};
</script>
<style rel="stylesheet/scss" lang="scss" scoped>
+$light_gray: #eee;
-$light_gray:#eee;
.login {
+ width: 100%;
+ height: 100%;
display: flex;
justify-content: center;
align-items: center;
height: 100%;
- background-image: url("../assets/images/login-background.jpg");
- background-size: cover;
-}
-.title {
+ // background-image: url("../assets/images/login-background.jpg");
+ // background-size: cover;
- margin: 0px auto 30px auto;
- text-align: center;
- color: #707070;
+ &::before {
+ content: '';
+ position: absolute;
+ top: 0;
+ left: 0;
+ width: 100%;
+ height: 100%;
+ margin-left: -48%;
+ background-image: url('../assets/svg/login-bg.svg');
+ background-repeat: no-repeat;
+ background-position: 100%;
+ background-size: auto 100%;
+ }
}
+
+.login-container {
+ margin: 0 auto;
+ width: 100%;
+ height: 100%;
+ box-sizing: border-box;
+ position: relative;
+ z-index: 2;
+ padding: 0 20px;
+}
+
+.login-wrapper {
+ display: flex;
+ height: 100%;
+}
+
+.info-wrapper {
+ width: 50%;
+ height: 100%;
+ display: flex;
+ flex-direction: column;
+ justify-content: center;
+ position: relative;
+
+ .logo-wrapper {
+ transform: translateX(-80px);
+ opacity: 0;
+ animation: enter-x 0.3s ease forwards;
+
+ img {
+ width: 50%;
+ }
+ }
+
+ .title-wrapper {
+ transform: translateX(-80px);
+ opacity: 0;
+ animation: enter-x 0.3s ease forwards;
+ animation-delay: 0.1s;
+ display: flex;
+ align-items: center;
+ margin-bottom: 50px;
+
+ .title {
+ text-align: left;
+ font-size: 30px;
+ color: #fff;
+ margin-left: 10px;
+ }
+ }
+}
+
+.form-wrapper {
+ width: 50%;
+ height: 100%;
+ display: flex;
+ flex-direction: column;
+ justify-content: center;
+ align-items: center;
+
+ .title {
+ transform: translateX(80px);
+ opacity: 0;
+ animation: enter-x 0.3s ease forwards;
+ }
+
+ .login-form {
+ transform: translateX(80px);
+ opacity: 0;
+ animation: enter-x 0.3s ease forwards;
+ animation-delay: 0.1s;
+ }
+}
+
.login-form {
border-radius: 6px;
background: #ffffff;
width: 400px;
padding: 25px 25px 5px 25px;
+
.el-input {
height: 38px;
+
input {
height: 38px;
}
}
+
.input-icon {
height: 39px;
width: 14px;
margin-left: 2px;
}
}
+
.login-tip {
font-size: 13px;
text-align: center;
color: #bfbfbf;
}
+
.login-code {
width: 33%;
height: 38px;
float: right;
+
img {
cursor: pointer;
vertical-align: middle;
}
}
+
.el-login-footer {
height: 40px;
line-height: 40px;
@@ -291,13 +381,16 @@
font-size: 12px;
letter-spacing: 1px;
}
+
.login-code-img {
height: 38px;
}
+
.title-container {
position: absolute;
transform: translateY(-400%);
left: 35%;
+
.title {
font-size: 40px;
color: $light_gray;
@@ -307,4 +400,42 @@
letter-spacing: 20px;
}
}
+
+@media (min-width: 640px) {
+ .login-container {
+ max-width: 640px;
+ }
+}
+
+@media (min-width: 768px) {
+ .login-container {
+ max-width: 768px;
+ }
+}
+
+
+@media (min-width: 1024px) {
+ .login-container {
+ max-width: 1024px;
+ }
+}
+
+@media (min-width: 1280px) {
+ .login-container {
+ max-width: 1280px;
+ }
+}
+
+@media (min-width: 1536px) {
+ .login-container {
+ max-width: 1536px;
+ }
+}
+
+@keyframes enter-x {
+ 100% {
+ opacity: 1;
+ transform: translateX(0);
+ }
+}
</style>
--
Gitblit v1.8.0