Merge branch 'main' of http://120.76.84.145:10101/gitblit/r/H5/leshan-laboratory
| | |
| | | <template> |
| | | <div class="login-page"> |
| | | <div class="login-content"> |
| | | <div class="login-content" :style="contentStyle"> |
| | | <div class="login-title"> |
| | | InnoLab |
| | | </div> |
| | |
| | | </div> |
| | | |
| | | <div class="login-btn"> |
| | | <el-button type="primary" class="login-btn-item" @click="login">登录</el-button> |
| | | <el-button type="primary" class="login-btn-item" @click="login">立即登录</el-button> |
| | | </div> |
| | | </div> |
| | | |
| | |
| | | name: 'Login', |
| | | data() { |
| | | return { |
| | | windowWidth: window.innerWidth, |
| | | |
| | | loginForm: { |
| | | account: '', |
| | | password: '' |
| | | }, |
| | | viewWidth: '' |
| | | 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 |
| | |
| | | console.log(this.viewWidth) |
| | | }, |
| | | login() { |
| | | this.$router.push('/') |
| | | console.log(this.loginForm) |
| | | } |
| | | } |
| | |
| | | display: flex; |
| | | flex-direction: column; |
| | | align-items: center; |
| | | transition: transform 0.3s ease; |
| | | |
| | | .login-title { |
| | | // width: 70%; |
| | |
| | | width: 100%; |
| | | |
| | | .form-item { |
| | | width: calc(100% - 80px); |
| | | height: 60px; |
| | | border-radius: 30px; |
| | | border: 2px solid #DBDBDB; |