<template>
|
<div class="login-page">
|
<div class="login-content" :style="contentStyle">
|
<div class="login-title">
|
InnoLab
|
</div>
|
<div class="sub-title">
|
账号登录
|
</div>
|
|
<div class="login-form">
|
<div class="form-item flex">
|
<img class="form-item-icon" :src="require('../../assets/login/account@2x.png')" alt="">
|
<el-input v-model="loginForm.username" placeholder="请输入账号"></el-input>
|
</div>
|
|
<div class="form-item flex mt-40">
|
<img class="form-item-icon" :src="require('../../assets/login/password@2x.png')" alt="">
|
<el-input v-model="loginForm.password" type="password" placeholder="请输入密码"></el-input>
|
</div>
|
|
<div class="login-btn">
|
<el-button type="primary" class="login-btn-item" @click="login">立即登录</el-button>
|
</div>
|
</div>
|
|
</div>
|
</div>
|
</template>
|
<script>
|
import { login } from './service'
|
export default {
|
name: 'Login',
|
data() {
|
return {
|
windowWidth: window.innerWidth,
|
|
loginForm: {
|
username: '',
|
password: ''
|
},
|
viewWidth: '',
|
scale: 1
|
}
|
},
|
computed: {
|
contentStyle() {
|
return {
|
transform: `scale(${this.scale})`,
|
transformOrigin: 'center center'
|
}
|
}
|
},
|
watch: {
|
viewWidth(newWidth) {
|
if (newWidth <= 900) { // 小屏平板
|
this.scale = 0.9
|
} else if (newWidth <= 1200) { // 平板尺寸
|
this.scale = 0.8
|
} else {
|
this.scale = 1
|
}
|
}
|
},
|
created() {
|
// 初始化获取窗口宽度
|
this.viewWidth = window.innerWidth
|
// 添加窗口大小变化监听器
|
window.addEventListener('resize', this.handleResize)
|
},
|
destroyed() {
|
// 组件销毁时移除监听器
|
window.removeEventListener('resize', this.handleResize)
|
},
|
methods: {
|
// 添加处理窗口大小变化的方法
|
handleResize() {
|
this.viewWidth = window.innerWidth
|
console.log(this.viewWidth)
|
},
|
login() {
|
login(this.loginForm).then(res => {
|
console.log(res,'1111111111111111111111111')
|
if (res.code === 200) {
|
sessionStorage.setItem('token', res.token)
|
sessionStorage.setItem('userInfo', JSON.stringify(res.userInfo))
|
this.$router.push('/')
|
}
|
})
|
}
|
}
|
}
|
</script>
|
<style scoped lang="less">
|
.flex {
|
display: flex;
|
}
|
|
.j-between {
|
justify-content: space-between;
|
}
|
|
.mt-40 {
|
margin-top: 40px;
|
}
|
|
.login-page {
|
width: 100%;
|
height: 100vh;
|
background: url('../../assets/login/backGround@2x.png') no-repeat center center;
|
background-size: cover;
|
// background-attachment: fixed;
|
display: flex;
|
justify-content: center;
|
align-items: center;
|
|
.login-content {
|
// width: 45%;
|
width: 550px;
|
// height: 694px;
|
// padding: 4% 5% 4% 5%;
|
padding: 82px 60px 72px 60px;
|
background: #fff;
|
box-shadow: 0px 20px 30px 0px rgba(0, 97, 95, 0.2);
|
border-radius: 20px;
|
border: 4px solid #FFFFFF;
|
display: flex;
|
flex-direction: column;
|
align-items: center;
|
transition: transform 0.3s ease;
|
|
.login-title {
|
// width: 70%;
|
text-align: center;
|
font-family: SourceHanSansCN, SourceHanSansCN;
|
font-weight: 500;
|
font-size: 50px;
|
color: #049C9A;
|
line-height: 75px;
|
}
|
|
.sub-title {
|
font-family: SourceHanSansCN, SourceHanSansCN;
|
font-weight: 500;
|
font-size: 30px;
|
color: #049C9A;
|
line-height: 45px;
|
margin-top: 100px;
|
margin-bottom: 45px;
|
}
|
|
.login-form {
|
width: 100%;
|
|
.form-item {
|
height: 60px;
|
border-radius: 30px;
|
border: 2px solid #DBDBDB;
|
display: flex;
|
align-items: center;
|
padding: 0 40px;
|
|
.form-item-icon {
|
width: 20px;
|
height: 20px;
|
margin-right: 17px;
|
}
|
|
::v-deep .el-input__inner {
|
border: none !important;
|
background: transparent !important;
|
height: 100% !important;
|
padding: 0 !important;
|
font-size: 20px;
|
font-family: SourceHanSansCN, SourceHanSansCN;
|
font-weight: 400;
|
color: #000000;
|
line-height: 30px;
|
}
|
|
|
}
|
}
|
}
|
|
.login-btn {
|
width: 100%;
|
display: flex;
|
justify-content: center;
|
}
|
|
.login-btn-item {
|
width: 300px;
|
height: 60px;
|
background: linear-gradient(270deg, #05F2C2 0%, #05A0C1 100%);
|
border-radius: 30px;
|
border: none;
|
margin-top: 95px;
|
color: #fff;
|
font-family: SourceHanSansCN, SourceHanSansCN;
|
font-weight: bold;
|
font-size: 20px;
|
color: #FFFFFF;
|
line-height: 30px;
|
}
|
|
|
|
}
|
</style>
|
