<!--
|
* @Author: LuLu
|
* @Date: 2023-05-23 14:24:10
|
* @LastEditors: error: error: git config user.name & please set dead value or install git && error: git config user.email & please set dead value or install git & please set dead value or install git
|
* @LastEditTime: 2023-07-09 13:53:14
|
* @FilePath: \cim-xian\src\views\login\Login0.vue
|
* @Description: 登录页
|
-->
|
|
<template>
|
<div class="box">
|
<video src="@/assets/videos/earth_mp4.mp4" class="video_back" autoplay loop muted></video>
|
<!-- <img src="@/assets/images/矩形693拷贝3.png" width="554px" height="109px" class="top_title"> -->
|
<div class="title">{{ appname }}</div>
|
<div class="login_form">
|
|
<el-form :model="loginForm" :rules="fieldRules" ref="loginForm" label-position="left" label-width="0px"
|
class="login-container">
|
<el-form-item prop="username">
|
<el-input class="form_input" style="top: 148px;" type="text" v-model="loginForm.username" auto-complete="off"
|
placeholder="账号">
|
</el-input>
|
</el-form-item>
|
<el-form-item prop="password">
|
<el-input class="form_input" style="top: 216px;" type="password" v-model="loginForm.password"
|
auto-complete="off" placeholder="密码">
|
</el-input>
|
</el-form-item>
|
<el-form-item prop="captcha">
|
<el-input class="form_input" style="top: 284px;" type="text" v-model="loginForm.captcha" auto-complete="off"
|
placeholder="验证码, 单击图片刷新">
|
</el-input>
|
<canvas id="c1" width="100" height="30" class="form_captcha" @click="draw(showNum)"></canvas>
|
</el-form-item>
|
</el-form>
|
|
<div class="login_btn" @click.prevent="handleLogin">
|
<div id="loading" class="donut" v-show="loading"></div>
|
登 录
|
</div>
|
|
|
<span class="form_prop" style="top: 125px;">用户名</span>
|
<span class="form_prop" style="top: 215px;">密 码</span>
|
<span class="form_prop" style="top: 305px;">验证码</span>
|
|
|
|
</div>
|
|
|
</div>
|
</template>
|
|
<script>
|
import { mapActions } from "vuex";
|
export default {
|
name: "Login",
|
components: {
|
|
},
|
data() {
|
return {
|
appname:APP_NAME,
|
loading: false,
|
loginForm: {
|
username: "admin",
|
password: "admin",
|
captcha: "",
|
},
|
fieldRules: {
|
username: [{ required: true, message: " ", trigger: "blur" }],
|
password: [{ required: true, message: " ", trigger: "blur" }],
|
captcha: [{ required: true, message: " ", trigger: "blur" }],
|
},
|
checked: true,
|
showNum: []
|
};
|
},
|
methods: {
|
|
// 获取vuex中Actions里的方法
|
...mapActions(["login", "GetInfo"]),
|
handleLogin() {
|
this.loading = true;
|
let code = this.showNum.join("")
|
if (code == this.loginForm.captcha) {
|
|
this.$refs.loginForm.validate((valid) => {
|
if (valid) {
|
this.login(this.loginForm)
|
.then(() => {
|
this.loading = false;
|
this.GetInfo().then(() => {
|
});
|
this.$router.push("/xianCim");
|
})
|
.catch(() => {
|
this.$message({
|
message: "账号不存在或密码输入错误！",
|
type: "error",
|
duration: 4000,
|
});
|
|
this.loading = false;
|
});
|
} else {
|
console.log("error submit!!");
|
this.$message({
|
message: "账号不存在或密码输入错误！",
|
type: "error",
|
duration: 4000,
|
});
|
this.loading = false;
|
return false;
|
}
|
});
|
} else {
|
this.$message({
|
message: "验证码错误",
|
type: "warning",
|
duration: 4000,
|
});
|
this.loading = true;
|
return
|
}
|
|
|
},
|
// 封装一个把随机验证码放在画布上
|
draw(showNum) {
|
// 获取canvas
|
var canvas = $("#c1")
|
var ctx = canvas[0].getContext("2d")
|
// 获取画布的宽高
|
var canvas_width = canvas.width()
|
var canvas_height = canvas.height()
|
// 清空之前绘制的内容
|
// 0,0清空的起始坐标
|
// 矩形的宽高
|
ctx.clearRect(0, 0, canvas_width, canvas_height)
|
// 开始绘制
|
// var scode = "a,b,c,d,e,f,g,h,i,j,k,l,m,n,o,p,q,r,s,t,u,v,w,x,y,z,A,B,C,D,E,F,G,H,I,J,K,L,M,N,O,P,Q,R,S,T,U,V,W,X,Y,Z,1,2,3,4,5,6,7,8,9,"
|
var scode = "1,2,3,4,5,6,7,8,9"
|
var arrCode = scode.split(",")
|
var arrLength = arrCode.length
|
for (var i = 0; i < 4; i++) {
|
var index = Math.floor(Math.random() * arrCode.length)
|
var txt = arrCode[index]//随机一个字符
|
showNum[i] = txt.toLowerCase()//转化为小写存入验证码数组
|
// 开始控制字符的绘制位置
|
var x = 10 + 20 * i //每一个验证码绘制的起始点x坐标
|
var y = 20 + Math.random() * 8// 起始点y坐标
|
|
ctx.font = "bold 20px 微软雅黑"
|
// 开始旋转字符
|
var deg = Math.random * -0.5
|
// canvas 要实现绘制内容具有倾斜的效果，必须先平移，目的是把旋转点移动到绘制内容的地方
|
ctx.translate(x, y)
|
ctx.rotate(deg)
|
// 设置绘制的随机颜色
|
ctx.fillStyle = this.randomColor()
|
ctx.fillText(txt, 0, 0)
|
|
// 把canvas复原
|
ctx.rotate(-deg)
|
ctx.translate(-x, -y)
|
|
}
|
for (var i = 0; i < 30; i++) {
|
if (i < 5) {
|
// 绘制线
|
ctx.strokeStyle = this.randomColor()
|
ctx.beginPath()
|
ctx.moveTo(Math.random() * canvas_width, Math.random() * canvas_height)
|
ctx.lineTo(Math.random() * canvas_width, Math.random() * canvas_height)
|
ctx.stroke()
|
}
|
// 绘制点
|
ctx.strokeStyle = this.randomColor()
|
ctx.beginPath()
|
var x = Math.random() * canvas_width
|
var y = Math.random() * canvas_height
|
ctx.moveTo(x, y)
|
ctx.lineTo(x + 1, y + 1)
|
ctx.stroke()
|
|
}
|
|
|
},
|
|
// 随机颜色
|
randomColor() {
|
var r = Math.floor(Math.random() * 256)
|
var g = Math.floor(Math.random() * 256)
|
var b = Math.floor(Math.random() * 256)
|
return `rgb(${r},${g},${b})`
|
|
}
|
},
|
mounted() {
|
this.draw(this.showNum)
|
},
|
computed: {},
|
};
|
</script>
|
<style>
|
@Keyframes donut-spin {
|
0% {
|
transform: rotate(0deg);
|
}
|
|
100% {
|
transform: rotate(360deg);
|
}
|
}
|
|
.donut {
|
display: inline-block;
|
border: 4px solid rgba(0, 0, 0, 0.1);
|
border-left-color: #21d2ff54;
|
border-radius: 50%;
|
width: 15px;
|
height: 15px;
|
margin-right: 15px;
|
animation: donut-spin 1.2s linear infinite;
|
}
|
</style>
|
<style lang="less" scoped>
|
|
|
|
|
|
.box {
|
position: absolute;
|
top: 0;
|
left: 0;
|
width: 100%;
|
height: 100%;
|
|
display: flex;
|
flex-direction: column;
|
justify-content: center;
|
align-items: center;
|
|
.video_back {
|
position: absolute;
|
top: 0;
|
left: 0;
|
width: 100%;
|
height: 100%;
|
z-index: 1;
|
object-fit: cover;
|
}
|
|
.top_title {
|
position: absolute;
|
top: 40px;
|
z-index: 2;
|
}
|
|
.title {
|
position: absolute;
|
top: 60px;
|
text-align: center;
|
font-size: 46px;
|
font-weight: bold;
|
color: #f0fafe;
|
text-shadow: 0px 0px 79px #00a6e2;
|
background: linear-gradient(0deg, #46aef7 0%, #1dd5e6 100%);
|
-webkit-background-clip: text;
|
-webkit-text-fill-color: transparent;
|
z-index: 2;
|
}
|
|
.login_form {
|
position: relative;
|
width: 492px;
|
height: 516px;
|
background-image: url("~@/assets/images/login_form.png");
|
background-repeat: no-repeat;
|
background-size: 100% 100%;
|
z-index: 2;
|
display: flex;
|
flex-direction: column;
|
|
|
.form_prop {
|
position: absolute;
|
margin-left: 91px;
|
opacity: 0.76;
|
font-size: 14px;
|
font-weight: 400;
|
color: #e6efff;
|
letter-spacing: 1.05px;
|
}
|
|
.form_input {
|
position: absolute !important;
|
width: 270px !important;
|
height: 40px;
|
background-color: rgba(0, 0, 0, 0);
|
margin-left: 137px;
|
}
|
|
.form_captcha {
|
position: absolute;
|
left: 299px;
|
top: 287px;
|
}
|
|
.login_btn {
|
position: absolute;
|
width: 326px;
|
height: 41px;
|
top: 399px;
|
align-self: center;
|
|
display: flex;
|
flex-direction: row;
|
justify-content: center;
|
align-items: center;
|
|
font-size: 18px;
|
font-family: Source Han Sans CN, Source Han Sans CN-Medium;
|
font-weight: 500;
|
text-align: center;
|
color: #e8eff4;
|
letter-spacing: 2.7px;
|
|
cursor: pointer;
|
}
|
}
|
}
|
|
/deep/.el-input__inner {
|
position: absolute;
|
background-color: rgba(0, 0, 0, 0) !important;
|
color: #e6f6ff;
|
border: none
|
}
|
</style>
|
