tone/tonePage
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

优化 login控制台响应式布局

Browse Source
This commit is contained in:
tone
2024-09-12 22:00:55 +08:00
parent d01efd710e
commit 986fde4724
1 changed files with 19 additions and 6 deletions
Download Patch File Download Diff File Expand all files Collapse all files

25
tonecn/src/views/Console/Login.vue
View File

@@ -1,9 +1,10 @@
<script setup lang='ts'> <script setup lang='ts'>
import { ElMessage } from 'element-plus'; import { ElMessage } from 'element-plus';
import { reactive, ref } from 'vue'; import { onMounted, reactive, ref } from 'vue';
import RotationVerification from '@/components/Common/RotationVerification.vue'; import RotationVerification from '@/components/Common/RotationVerification.vue';
import { request, type BaseResponseData } from '@/lib/request'; import { request, type BaseResponseData } from '@/lib/request';
const containerHeight = ref('800px');
const isCaptchaShow = ref(false); const isCaptchaShow = ref(false);
const loginStatus = ref(false); const loginStatus = ref(false);
const formData = reactive({ const formData = reactive({
@@ -53,6 +54,9 @@ const login = async () => {
return ElMessage.error(`未知错误 ${error}`) return ElMessage.error(`未知错误 ${error}`)
} }
} }
onMounted(async() => {
containerHeight.value = window.innerHeight > 500 ? window.innerHeight - 90 + 'px' : '390px';
})
</script> </script>
<template> <template>
<div class="bcc"></div> <div class="bcc"></div>
@@ -88,16 +92,19 @@ const login = async () => {
} }
.main-container { .main-container {
padding: 30px; height: v-bind(containerHeight);
margin-bottom: 160px; display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
} }
.main-container>h1 { .main-container>h1 {
text-align: center; text-align: center;
font-size: 42px; font-size: 36px;
font-weight: 400; font-weight: 400;
margin-top: 50px;
cursor: default; cursor: default;
margin: 0 0;
} }
.main-container>h3 { .main-container>h3 {
@@ -120,7 +127,7 @@ const login = async () => {
} }
.login-botton { .login-botton {
margin-top: 10px; margin: 10px 0 120px 0;
width: 260px; width: 260px;
height: 35px; height: 35px;
font-weight: 500; font-weight: 500;
@@ -137,4 +144,10 @@ const login = async () => {
border-color: rgb(220, 223, 230); border-color: rgb(220, 223, 230);
color: #606266; color: #606266;
} }
@media screen and (max-width: 800px){
/* 因为屏幕宽度小于800时，head的高度会减少15px */
.main-container{
height: calc(v-bind(containerHeight) + 15px);
}
}
</style> </style>