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

p

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

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

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

Write Preview
Loading…
Cancel
Save