ehs_tanghHe
/
ehs
5
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

p

Browse Source
main
MY-SH\lenovo 9 months ago
parent 3e62a1a954
commit 73d299576f
1 changed files with 187 additions and 146 deletions
Show Stats Download Patch File Download Diff File

333
ruoyi-ui/src/views/login.vue
Unescape Escape View File

@ -3,96 +3,129 @@
<div class="head">
<div class="doll">
<div class="leftBox">
<img class="hui" src="../assets/images/logo2.png" alt="">
<span>
<p class="pChina">唐河县应急管理综合业务平台</p>
<!--<p class="pEnglish">Ministry of Emergency Management of the People's Republic of China</p>-->
</span>
<span class="slogan">
<!-- <p>对党忠诚 纪律严明</p>
<img class="hui" src="../assets/images/logo2.png" alt="" />
<div
style="
flex: 1;
display: flex;
align-items: center;
justify-content: space-between;
"
>
<span>
<p class="pChina">唐河县应急管理综合业务平台</p>
<!--<p class="pEnglish">Ministry of Emergency Management of the People's Republic of China</p>-->
</span>
<span class="slogan">
<!-- <p>对党忠诚 纪律严明</p>
<p>赴汤蹈火 竭诚为民</p> -->
<img class="ft" src="../assets/images/ftdh.png" alt="">
<img class="ft" src="../assets/images/ddzc.png" alt="">
</span>
<img class="ft" src="../assets/images/ftdh.png" alt="" />
<img class="ft" src="../assets/images/ddzc.png" alt="" />
</span>
</div>
</div>
<div class="rightBox">
<!-- <div class="rightBox">
<img src="../assets/images/hui.png" alt="">
<span class="time">{{ currentTime }}</span>
<span class="day">
<p>{{ currentDayOfWeek }}</p>
<p>{{ currentDate }}</p>
</span>
</div>
</div> -->
</div>
</div>
<div class="login">
<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"
<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>
</el-form-item>
<el-checkbox v-model="loginForm.rememberMe" style="margin: 0px 0px 25px 0px"
>记住密码</el-checkbox
>
<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>
<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 class="el-login-footer">
<!-- <span>Copyright © 2018-2023 ruoyi.vip All Rights Reserved.</span> -->
<div class="rightBox">
<div style="
display: flex;
align-items: center;
">
<span class="time">{{ currentTime }}</span>
<span class="day">
<p>{{ currentDayOfWeek }}</p>
<p>{{ currentDate }}</p>
</span>
</div>
<img src="../assets/images/hui.png" alt="" />
</div>
</el-form-item>
</el-form>
<!-- 底部 -->
<div class="el-login-footer">
<!-- <span>Copyright © 2018-2023 ruoyi.vip All Rights Reserved.</span> -->
</div>
</div>
</div>
</div>
</template>
<script>
import { getCodeImg } from "@/api/login";
import Cookies from "js-cookie";
import { encrypt, decrypt } from '@/utils/jsencrypt'
import { encrypt, decrypt } from "@/utils/jsencrypt";
export default {
name: "Login",
@ -104,16 +137,12 @@ export default {
password: "admin123",
rememberMe: false,
code: "",
uuid: ""
uuid: "",
},
loginRules: {
username: [
{ required: true, trigger: "blur", message: "请输入您的账号" }
],
password: [
{ required: true, trigger: "blur", message: "请输入您的密码" }
],
code: [{ required: true, trigger: "change", message: "请输入验证码" }]
username: [{ required: true, trigger: "blur", message: "请输入您的账号" }],
password: [{ required: true, trigger: "blur", message: "请输入您的密码" }],
code: [{ required: true, trigger: "change", message: "请输入验证码" }],
},
loading: false,
// 验证码开关
@ -121,30 +150,31 @@ export default {
// 注册开关
register: false,
redirect: undefined,
currentTime: '',
currentDayOfWeek: '',
currentDate: '' ,
timer:null,
currentTime: "",
currentDayOfWeek: "",
currentDate: "",
timer: null,
};
},
watch: {
$route: {
handler: function(route) {
handler: function (route) {
this.redirect = route.query && route.query.redirect;
},
immediate: true
}
immediate: true,
},
},
created() {
this.getCode();
this.getCookie();
this.getCurrentTime()
this.getCurrentTime();
this.timer = setInterval(this.getCurrentTime, 1000);
},
methods: {
getCode() {
getCodeImg().then(res => {
this.captchaEnabled = res.captchaEnabled === undefined ? true : res.captchaEnabled;
getCodeImg().then((res) => {
this.captchaEnabled =
res.captchaEnabled === undefined ? true : res.captchaEnabled;
if (this.captchaEnabled) {
this.codeUrl = "data:image/gif;base64," + res.img;
this.loginForm.uuid = res.uuid;
@ -154,34 +184,37 @@ export default {
getCookie() {
const username = Cookies.get("username");
const password = Cookies.get("password");
const rememberMe = Cookies.get('rememberMe')
const rememberMe = Cookies.get("rememberMe");
this.loginForm = {
username: username === undefined ? this.loginForm.username : username,
password: password === undefined ? this.loginForm.password : decrypt(password),
rememberMe: rememberMe === undefined ? false : Boolean(rememberMe)
rememberMe: rememberMe === undefined ? false : Boolean(rememberMe),
};
},
handleLogin() {
this.$refs.loginForm.validate(valid => {
this.$refs.loginForm.validate((valid) => {
if (valid) {
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("rememberMe", this.loginForm.rememberMe, { expires: 30 });
} else {
Cookies.remove("username");
Cookies.remove("password");
Cookies.remove('rememberMe');
Cookies.remove("rememberMe");
}
this.$store.dispatch("Login", this.loginForm).then(() => {
this.$router.push({ path: this.redirect || "/" }).catch(()=>{});
}).catch(() => {
this.loading = false;
if (this.captchaEnabled) {
this.getCode();
}
});
this.$store
.dispatch("Login", this.loginForm)
.then(() => {
this.$router.push({ path: this.redirect || "/" }).catch(() => {});
})
.catch(() => {
this.loading = false;
if (this.captchaEnabled) {
this.getCode();
}
});
}
});
},
@ -189,20 +222,28 @@ export default {
// 获取时间
getCurrentTime() {
const date = new Date();
const hours = String(date.getHours()).padStart(2, '0');
const minutes = String(date.getMinutes()).padStart(2, '0');
const hours = String(date.getHours()).padStart(2, "0");
const minutes = String(date.getMinutes()).padStart(2, "0");
const dayOfWeek = this.getDayOfWeek(date.getDay());
const year = date.getFullYear();
const month = String(date.getMonth() + 1).padStart(2, '0');
const day = String(date.getDate()).padStart(2, '0');
const month = String(date.getMonth() + 1).padStart(2, "0");
const day = String(date.getDate()).padStart(2, "0");
this.currentTime = `${hours}:${minutes}`;
this.currentDayOfWeek = dayOfWeek;
this.currentDate = `${year}-${month}-${day}`;
},
getDayOfWeek(day) {
const daysOfWeek = ['星期日', '星期一', '星期二', '星期三', '星期四', '星期五', '星期六'];
const daysOfWeek = [
"星期日",
"星期一",
"星期二",
"星期三",
"星期四",
"星期五",
"星期六",
];
return daysOfWeek[day];
}
},
},
beforeDestroy() {
clearInterval(this.timer); // 在组件销毁前清除定时器
@ -218,7 +259,7 @@ export default {
// height: 100%;
margin-top: 4%;
margin-right: 8%;
margin-right: 8%;
}
.title {
margin: 0px auto 30px auto;
@ -258,7 +299,7 @@ export default {
}
}
.el-login-footer {
height: 40px;
height: 30%;
line-height: 40px;
position: fixed;
bottom: 0;
@ -266,36 +307,34 @@ export default {
text-align: center;
color: #fff;
font-family: Arial;
font-size: 12px;
// font-size: 12px;
letter-spacing: 1px;
}
.login-code-img {
height: 38px;
}
.loginBox{
.loginBox {
width: 100%;
height: 100%;
background-image: url("../assets/images/background.jpg");
background-size: 100% 100%;
.head{
.head {
height: 20%;
background: #056891;
.doll{
.doll {
width: 91%;
height: 100%;
margin: auto;
display: flex;
justify-content: space-between;
align-items: center;
.leftBox{
.leftBox {
display: flex;
align-items: center;
img{
flex: 1;
img {
// object-fit: none;
width: 50px;
height: 50px;
@ -304,31 +343,21 @@ export default {
color: #ffffff;
}
.rightBox{
display: flex;
align-items: center;
img{
width: 120px;
height: auto;
margin-right: 35px;
}
}
}
}
}
.leftBox {
.pChina{
.pChina {
display: table-row;
font-size: 40px;
}
.pEnglish{
.pEnglish {
display: table-row;
font-size: 13px;
letter-spacing: 1px;
}
.slogan{
.slogan {
font-size: 24px;
color: #ff6c00;
line-height: 10px;
@ -336,27 +365,39 @@ export default {
margin-left: 30px;
display: flex;
flex-direction: column;
.ft{
.ft {
object-fit: contain;
width: 300px !important;
}
}
}
.rightBox{
color: #ffffff;
font-size: 24px;
line-height: 10px;
.time{
font-size: 60px;
margin-right: 20px;
}
.day{
font-size: 20px;
}
}
.hui{
.hui {
width: 65px !important;
height: 65px !important;
}
.el-login-footer {
.rightBox {
display: flex;
margin-left: -30%;
flex: 1;
justify-content: space-evenly;
align-items: center;
img {
// object-fit: none;
width: auto;
height: 200px;
margin-left: -333px;
}
span {
font-size: 22px;
line-height: 30px;
margin-left: 15px;
}
.time{
font-size:65px;
}
color: #ffffff;
}
}
</style>

Write Preview
Loading…
Cancel
Save