style

src/pages/login-page.vue

@@ -49,7 +49,7 @@ const { mutate: login, isPending: loading } = useMutation({
               <NInput v-model:value="formData.password" type="password" show-password-on="click" placeholder="请输入密码" />
             </NFormItem>
           </NForm>
-          <NButton type="primary" block strong :loading="loading" @click="() => login(formData)"> 登录 </NButton>
+          <NButton type="primary" block strong :loading="loading" @click="() => login(formData)">登录</NButton>
         </NFlex>
       </NCard>
     </div>
@@ -58,44 +58,43 @@ const { mutate: login, isPending: loading } = useMutation({
 
 <style scoped lang="scss">
 .login-page {
-}
+  .login-card-container {
+    width: 100%;
+    height: 100%;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+  }
 
-.login-card-container {
+  .login-card {
-  width: 100%;
+    width: 400px;
-  height: 100%;
+    border-radius: 8px;
-  display: flex;
+    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
-  justify-content: center;
+    padding: 32px;
-  align-items: center;
+    position: relative;
-}
+  }
 
-.login-card {
+  .theme-switch {
-  width: 400px;
+    position: absolute;
-  border-radius: 8px;
+    bottom: 16px;
-  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
+    right: 16px;
-  padding: 32px;
+  }
-  position: relative;
-}
 
-.theme-switch {
+  .platform-title {
-  position: absolute;
+    font-size: 28px;
-  bottom: 16px;
+    font-weight: 500;
-  right: 16px;
+    margin-bottom: 8px;
-}
+  }
 
-.platform-title {
+  .login-title {
-  font-size: 28px;
+    font-size: 16px;
-  font-weight: 500;
+    color: #999;
-  margin-bottom: 8px;
+    margin-bottom: 24px;
-}
+  }
 
-.login-title {
+  .login-form {
-  font-size: 16px;
+    width: 100%;
-  color: #999;
+    margin-bottom: 16px;
-  margin-bottom: 24px;
+  }
-}
-
-.login-form {
-  width: 100%;
-  margin-bottom: 16px;
 }
 </style>