|
<template>
|
<div class="login-container">
|
<el-card class="login-card">
|
<div class="input-container ab">
|
<i-ep-User class="icon-color" ></i-ep-User>
|
<el-input
|
class="login-input"
|
v-model="username"
|
placeholder="请输入账号"
|
style="margin-left: 20px;"
|
></el-input>
|
</div>
|
<div class="input-container">
|
<i-ep-Lock class="icon-color"></i-ep-Lock>
|
<el-input
|
class="login-input"
|
v-model="password"
|
placeholder="请输入密码"
|
type="password"
|
style="margin-left: 20px;"
|
></el-input>
|
</div>
|
<div >
|
<el-button type="primary" class="login-btn" @click="login">登录</el-button>
|
</div>
|
</el-card>
|
</div>
|
</template>
|
|
<script lang="ts">
|
export default {
|
data() {
|
return {
|
username: '',
|
password: '',
|
};
|
},
|
methods: {
|
login() {
|
// 登录逻辑
|
if (this.username === 'admin' && this.password === 'admin123') {
|
ElMessage.success('登录成功');
|
// 登录成功，跳转到对应页面
|
this.$router.push('/hdata') // 假设登录成功后跳转到 '/dashboard' 页面
|
} else {
|
// console.log('Login Failed!')
|
ElMessage.error('账号或密码错误');
|
}
|
}
|
}
|
};
|
</script>
|
|
<style scoped>
|
.login-container {
|
background-image: url('../assets/login.jpg');
|
/*用于为一个元素设置一个或者多个背景图像。 */
|
background-size: cover; /* 将背景图像等比缩放到完全覆盖容器，背景图像有可能超出容器。*/
|
background-position: center; /* 为每一个背景图片设置初始位置。这个位置是相对于由 background-origin 定义的位置图层的 键字 center，用来居中背景图片。*/
|
width: 100vw;
|
height: 100vh;
|
display: flex;
|
justify-content: center; /*center：伸缩元素向每行中点排列 */
|
align-items: center; /*素在交叉轴居中。如果元素在交叉轴上的高度高于其容器，那么在两个方向上溢出距离相同 */
|
}
|
.login-card {
|
background-color: rgba(38, 124, 149, 0);
|
/* max-width: 400px; */
|
margin: 0 auto;
|
padding: 20px;
|
border-radius: 4px;
|
box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1);
|
border: 0;
|
|
position: absolute;
|
top: 33.5%;
|
/* width: 545px; */
|
width: 23.5%;
|
/* width: 545px;
|
height: 500px;
|
display: flex; */
|
height: 37.7%;
|
|
|
}
|
|
.input-container {
|
display: flex;
|
align-items: center;
|
margin-bottom: 15px;
|
|
}
|
|
.icon {
|
width: 20px;
|
height: 20px;
|
margin-right: 10px;
|
}
|
|
.login-input {
|
flex: 1;
|
}
|
|
.login-btn {
|
/* position: absolute;
|
width:calc(100% - 20px);
|
left: 40px;
|
margin-top: 30px;
|
display: flex; */
|
/* justify-content: center; */
|
/* margin-left: 155px; */
|
position: absolute;
|
left: 85px;
|
width: calc(100% - 150px);
|
padding: 6px;
|
text-align: center;
|
box-sizing: border-box;
|
margin-top: 30px;
|
}
|
.ab {
|
margin-top: 100px;
|
}
|
|
/* 图标颜色 */
|
.icon-color {
|
color: white;
|
}
|
</style>
|
