重构 Login tailwind

tonecn/src/views/Console/Login.vue

@@ -54,100 +54,40 @@ const login = async () => {
         return ElMessage.error(`未知错误 ${error}`)
     }
 }
-onMounted(async() => {
+onMounted(async () => {
     containerHeight.value = window.innerHeight > 500 ? window.innerHeight - 90 + 'px' : '390px';
 })
 </script>
 <template>
-    <div class="bcc"></div>
+    <div class="bg-default-bg fixed inset-0 w-full h-full -z-10"></div>
-    <div class="main-container">
+    <div
-        <h1>登录到控制台</h1>
+        class="flex flex-col items-center justify-center mx-auto sm:h-[calc(100vh-90px)] h-[calc(100vh-77px)] px-[20px] max-w-[280px] min-h-[400px]">
+        <h1 class="text-center text-[36px] font-medium cursor-default">登录到控制台</h1>
         <el-popover placement="bottom" :width="300" trigger="click">
             <p>控制台是特恩(TONE)网页中的一个控制器界面，如果您是管理员，可通过登录后编辑本网页中的内容（资源、工具、日记等），详情请见<strong style="cursor: pointer;"
                     @click="">《特恩(TONE)控制台使用协议》</strong></p>
             <template #reference>
-                <h3>控制台是什么？</h3>
+                <h3 class="text-center cursor-pointer font-semibold mt-[10px]">控制台是什么？</h3>
             </template>
         </el-popover>
-        <div class="form-container">
+        <div class="w-full flex flex-col items-center">
-            <el-input v-model="formData.username" class="input" placeholder="请输入账户名" clearable>
+            <el-input v-model="formData.username" class="w-full h-[35px] text-[16px] mt-[20px]" placeholder="请输入账户名"
+                clearable>
             </el-input>
-            <el-input v-model="formData.password" show-password class="input" placeholder="密码" @keyup.enter="loginHandle">
+            <el-input v-model="formData.password" show-password class="w-full h-[35px] text-[16px] mt-[10px]"
+                placeholder="密码" @keyup.enter="loginHandle">
             </el-input>
-            <el-button class="login-botton" @click="loginHandle" :loading="loginStatus">登录</el-button>
+            <el-button class="mt-[12px] mb-[120px] w-full h-[35px] font-bold login-button" @click="loginHandle"
+                :loading="loginStatus">登录</el-button>
         </div>
     </div>
     <RotationVerification v-if="isCaptchaShow" @fail="() => { isCaptchaShow = false; ElMessage.warning('验证失败') }"
         @success="() => { isCaptchaShow = false; login() }" />
 </template>
 <style scoped>
-.bcc {
+.login-button:hover {
-    position: fixed;
-    left: 0;
-    top: 0;
-    width: 100%;
-    height: 100%;
-    z-index: -1;
-    background-color: #f6f8f9;
-}
-
-.main-container {
-    height: v-bind(containerHeight);
-    display: flex;
-    flex-direction: column;
-    align-items: center;
-    justify-content: center;
-}
-
-.main-container>h1 {
-    text-align: center;
-    font-size: 36px;
-    font-weight: 400;
-    cursor: default;
-    margin: 0 0;
-}
-
-.main-container>h3 {
-    text-align: center;
-    cursor: pointer;
-}
-
-.main-container .form-container {
-    width: 100%;
-    display: flex;
-    flex-direction: column;
-    align-items: center;
-}
-
-.form-container .input {
-    width: 260px;
-    height: 35px;
-    font-size: 16px;
-    margin-top: 10px;
-}
-
-.login-botton {
-    margin: 10px 0 120px 0;
-    width: 260px;
-    height: 35px;
-    font-weight: 500;
-}
-
-.login-botton:hover {
     background-color: #fff;
     border-color: rgb(220, 223, 230);
-    color: #222;
+    color: #333;
-}
-
-.login-botton:focus {
-    background-color: #fff;
-    border-color: rgb(220, 223, 230);
-    color: #606266;
-}
-@media screen and (max-width: 800px){
-    /* 因为屏幕宽度小于800时，head的高度会减少15px */
-    .main-container{
-        height: calc(v-bind(containerHeight) + 15px);
-    }
 }
 </style>