|
<template>
|
<div class="login-container">
|
<el-card class="login-card">
|
<h2>登陆</h2>
|
<div class="box"><img src="../../assets/loginBg.png" class="imag"> </div>
|
<el-form label-position="top">
|
<el-form-item label="用户名">
|
<el-input
|
class="login-input"
|
v-model="username"
|
placeholder="请输入账号"
|
size="large"
|
></el-input>
|
</el-form-item>
|
<el-form-item label="密码">
|
<el-input
|
class="login-input"
|
v-model="password"
|
placeholder="请输入密码"
|
type="password"
|
size="large"
|
show-password
|
></el-input>
|
</el-form-item>
|
|
<el-button color="#3d86d5" class="login-btn" @click="login" size="large">登录</el-button>
|
</el-form>
|
</el-card>
|
</div>
|
</template>
|
|
<script lang="ts">
|
import Cookie from 'js-cookie'
|
export default {
|
data() {
|
return {
|
username: '',
|
password: '',
|
};
|
},
|
methods: {
|
login() {
|
// 登录逻辑
|
if (this.username === 'admin' && this.password === 'admin123') {
|
ElMessage.success('登录成功');
|
const token = 'abc'
|
Cookie.set('token',token)
|
// 登录成功，跳转到对应页面
|
this.$router.push('/edata') // 假设登录成功后跳转到 '/dashboard' 页面
|
} else {
|
// console.log('Login Failed!')
|
ElMessage.error('账号或密码错误');
|
}
|
}
|
}
|
};
|
</script>
|
|
<style scoped>
|
.login-container {
|
background-image: url('../../assets/loginPageBg.png');
|
/*用于为一个元素设置一个或者多个背景图像。 */
|
background-size: cover; /* 将背景图像等比缩放到完全覆盖容器，背景图像有可能超出容器。*/
|
background-position: center; /* 为每一个背景图片设置初始位置。这个位置是相对于由 background-origin 定义的位置图层的 键字 center，用来居中背景图片。*/
|
|
width: 100vw;
|
height: 100vh;
|
display: flex;
|
justify-content: center; /*center：伸缩元素向每行中点排列 */
|
align-items: center; /*素在交叉轴居中。如果元素在交叉轴上的高度高于其容器，那么在两个方向上溢出距离相同 */
|
|
position: relative;
|
}
|
.login-card {
|
background-color: white;
|
margin: 0 auto;
|
padding: 20px;
|
/* border-radius: 12px; */
|
box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1);
|
border: 0;
|
|
position: absolute;
|
right: 10%;
|
width: 20%;
|
|
height: 500;
|
|
}
|
.el-form-item {
|
margin-bottom: 40px;
|
}
|
.box {
|
width: 120px;
|
height: 120px;
|
|
position: absolute;
|
top: 10px;
|
right:10px;
|
}
|
.imag {
|
max-width: 100%;
|
max-height: 100%;
|
}
|
.el-card h2 {
|
text-align: center;
|
padding: 20px;
|
margin-bottom: 20px;
|
}
|
|
|
.login-btn {
|
|
position: absolute;
|
width: calc(100% - 80px);
|
font-size: 1.1em;
|
letter-spacing: 0.3em;
|
text-align: center;
|
box-sizing: border-box;
|
bottom: 10px;
|
|
}
|
|
|
</style>
|
