feat: 去除tailwindcss

src/views/auth/Login.vue

@@ -1,7 +1,7 @@
 <template>
-  <div class="flex-col-center">
-    <div class="w-full">
-      <h2 class="text-3xl/9 mb-3 font-bold lg:text-4xl">欢迎回来 👋🏻</h2>
+  <div class="login-wrapper">
+    <div class="login-wrapper__header">
+      <h2 class="login-wrapper__title">欢迎回来 👋🏻</h2>
       <p>
         <span style="color: #71717a">登录账号以进入对战</span>
       </p>
@@ -11,7 +11,7 @@
       :model="loginModel"
       :rules="rules"
       :show-label="false"
-      class="w-full mt-10"
+      class="login-wrapper__form"
     >
       <n-form-item path="username">
         <n-input v-model:value="loginModel.username" placeholder="请输入账号" :maxlength="20" />
@@ -26,7 +26,7 @@
         />
       </n-form-item>
       <n-form-item>
-        <div class="flex flex-1 items-center justify-between">
+        <div class="login-wrapper__actions">
           <n-checkbox v-model:checked="rememberAccount">记住账号</n-checkbox>
           <a href="javascript:void(0)" style="color: #2080f0">忘记密码？</a>
         </div>
@@ -37,13 +37,13 @@
         </n-button>
       </n-form-item>
       <n-form-item>
-        <div class="flex-center flex-1 gap-4">
-          <n-button class="flex-1" @click="router.push('/auth/phone-login')"> 手机登录 </n-button>
-          <n-button class="flex-1" @click="router.push('/auth/qrcode-login')"> 扫码登录 </n-button>
+        <div class="login-wrapper__quick-btns">
+          <n-button class="login-wrapper__quick-btn" @click="router.push('/auth/phone-login')"> 手机登录 </n-button>
+          <n-button class="login-wrapper__quick-btn" @click="router.push('/auth/qrcode-login')"> 扫码登录 </n-button>
         </div>
       </n-form-item>
       <n-form-item>
-        <div class="flex-center flex-1">
+        <div class="login-wrapper__register-link">
           <span>没有账号？</span>
           <router-link to="/auth/register" style="color: #2080f0">创建账号</router-link>
         </div>
@@ -177,4 +177,59 @@ const userLoginFun = () => {
 }
 </script>
 
-<style scoped></style>
+<style scoped>
+.login-wrapper {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+}
+
+.login-wrapper__header {
+  width: 100%;
+}
+
+.login-wrapper__title {
+  font-size: 30px;
+  line-height: 36px;
+  margin-bottom: 12px;
+  font-weight: bold;
+}
+
+@media (min-width: 1024px) {
+  .login-wrapper__title {
+    font-size: 36px;
+  }
+}
+
+.login-wrapper__form {
+  width: 100%;
+  margin-top: 40px;
+}
+
+.login-wrapper__actions {
+  display: flex;
+  flex: 1;
+  align-items: center;
+  justify-content: space-between;
+}
+
+.login-wrapper__quick-btns {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  flex: 1;
+  gap: 16px;
+}
+
+.login-wrapper__quick-btn {
+  flex: 1;
+}
+
+.login-wrapper__register-link {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  flex: 1;
+}
+</style>

src/views/auth/PhoneLogin.vue

@@ -1,7 +1,7 @@
 <template>
-  <div class="flex-col-center">
-    <div class="w-full">
-      <h2 class="text-3xl/9 mb-3 font-bold lg:text-4xl">欢迎回来 📲</h2>
+  <div class="phone-login-wrapper">
+    <div class="phone-login-wrapper__header">
+      <h2 class="phone-login-wrapper__title">欢迎回来 📲</h2>
       <p>
         <span style="color: #71717a">请输入手机号码登录账号以进入对战</span>
       </p>
@@ -11,13 +11,13 @@
       :model="loginModel"
       :rules="rules"
       :show-label="false"
-      class="w-full mt-10"
+      class="phone-login-wrapper__form"
     >
       <n-form-item path="phoneNumber">
         <n-input v-model:value="loginModel.phoneNumber" placeholder="手机号码" :maxlength="20" />
       </n-form-item>
       <n-form-item path="code">
-        <div class="flex flex-1 gap-4">
+        <div class="phone-login-wrapper__code-row">
           <n-input-otp
             block
             v-model:value="loginModel.code"
@@ -33,8 +33,8 @@
         </n-button>
       </n-form-item>
       <n-form-item>
-        <div class="flex-center flex-1 gap-4">
-          <n-button class="flex-1" @click="router.push('/auth/login')"> 返回 </n-button>
+        <div class="phone-login-wrapper__back-row">
+          <n-button class="phone-login-wrapper__back-btn" @click="router.push('/auth/login')"> 返回 </n-button>
         </div>
       </n-form-item>
     </n-form>
@@ -120,4 +120,51 @@ const phoneLoginFun = () => {
 }
 </script>
 
-<style scoped></style>
+<style scoped>
+.phone-login-wrapper {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+}
+
+.phone-login-wrapper__header {
+  width: 100%;
+}
+
+.phone-login-wrapper__title {
+  font-size: 30px;
+  line-height: 36px;
+  margin-bottom: 12px;
+  font-weight: bold;
+}
+
+@media (min-width: 1024px) {
+  .phone-login-wrapper__title {
+    font-size: 36px;
+  }
+}
+
+.phone-login-wrapper__form {
+  width: 100%;
+  margin-top: 40px;
+}
+
+.phone-login-wrapper__code-row {
+  display: flex;
+  flex: 1;
+  gap: 16px;
+}
+
+.phone-login-wrapper__back-row {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  flex: 1;
+  gap: 16px;
+}
+
+.phone-login-wrapper__back-btn {
+  flex: 1;
+}
+</style>

src/views/auth/QRCodeLogin.vue

@@ -1,12 +1,12 @@
 <template>
-  <div class="flex-col-center">
-    <div class="w-full">
-      <h2 class="text-3xl/9 mb-3 font-bold lg:text-4xl">欢迎回来 📱</h2>
+  <div class="qrcode-login-wrapper">
+    <div class="qrcode-login-wrapper__header">
+      <h2 class="qrcode-login-wrapper__title">欢迎回来 📱</h2>
       <p>
         <span style="color: #71717a">请用手机扫描二维码登录</span>
       </p>
     </div>
-    <n-form :show-label="false" class="w-full mt-10">
+    <n-form :show-label="false" class="qrcode-login-wrapper__form">
       <n-form-item>
         <n-space vertical style="align-items: center; flex: 1">
           <n-qr-code v-model:value="qrcode" :size="180" />
@@ -14,8 +14,8 @@
         </n-space>
       </n-form-item>
       <n-form-item>
-        <div class="flex-center flex-1 gap-4">
-          <n-button class="flex-1" @click="router.push('/auth/login')"> 返回 </n-button>
+        <div class="qrcode-login-wrapper__back-row">
+          <n-button class="qrcode-login-wrapper__back-btn" @click="router.push('/auth/login')"> 返回 </n-button>
         </div>
       </n-form-item>
     </n-form>
@@ -32,4 +32,45 @@ const accountStore = useAccountStore()
 const qrcode = ref('')
 </script>
 
-<style scoped></style>
+<style scoped>
+.qrcode-login-wrapper {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+}
+
+.qrcode-login-wrapper__header {
+  width: 100%;
+}
+
+.qrcode-login-wrapper__title {
+  font-size: 30px;
+  line-height: 36px;
+  margin-bottom: 12px;
+  font-weight: bold;
+}
+
+@media (min-width: 1024px) {
+  .qrcode-login-wrapper__title {
+    font-size: 36px;
+  }
+}
+
+.qrcode-login-wrapper__form {
+  width: 100%;
+  margin-top: 40px;
+}
+
+.qrcode-login-wrapper__back-row {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  flex: 1;
+  gap: 16px;
+}
+
+.qrcode-login-wrapper__back-btn {
+  flex: 1;
+}
+</style>

src/views/auth/Register.vue

@@ -1,7 +1,7 @@
 <template>
-  <div class="flex-col-center">
-    <div class="w-full">
-      <h2 class="text-3xl/9 mb-3 font-bold lg:text-4xl">创建一个账号 🚀</h2>
+  <div class="register-wrapper">
+    <div class="register-wrapper__header">
+      <h2 class="register-wrapper__title">创建一个账号 🚀</h2>
       <p>
         <span style="color: #71717a">创建账号进入对战</span>
       </p>
@@ -11,13 +11,13 @@
       :model="registerModel"
       :rules="rules"
       :show-label="false"
-      class="w-full mt-10"
+      class="register-wrapper__form"
     >
       <n-form-item path="username">
         <n-input v-model:value="registerModel.username" placeholder="请输入账号" :maxlength="20" />
       </n-form-item>
       <n-form-item path="password">
-        <div class="flex flex-col flex-1">
+        <div class="register-wrapper__password-group">
           <n-input
             v-model:value="registerModel.password"
             type="password"
@@ -25,39 +25,19 @@
             placeholder="密码"
             :maxlength="20"
           />
-          <div class="flex flex-1 gap-1 mt-2">
-            <div class="flex-1 h-2 rounded-xl relative bg-gray-200 overflow-hidden">
+          <div class="register-wrapper__strength-bars">
+            <div
+              v-for="level in 5"
+              :key="level"
+              class="register-wrapper__strength-bar-track"
+            >
               <div
-                :class="securityLevel > 0 ? 'w-full' : 'w-0'"
-                class="absolute left-0 top-0 h-full bg-red-500 transition-all duration-500"
-              ></div>
-            </div>
-            <div class="flex-1 h-2 rounded-xl relative bg-gray-200 overflow-hidden">
-              <div
-                :class="securityLevel > 1 ? 'w-full' : 'w-0'"
-                class="absolute left-0 top-0 h-full bg-red-500 transition-all duration-500"
-              ></div>
-            </div>
-            <div class="flex-1 h-2 rounded-xl relative bg-gray-200 overflow-hidden">
-              <div
-                :class="securityLevel > 2 ? 'w-full' : 'w-0'"
-                class="absolute left-0 top-0 h-full bg-red-500 transition-all duration-500"
-              ></div>
-            </div>
-            <div class="flex-1 h-2 rounded-xl relative bg-gray-200 overflow-hidden">
-              <div
-                :class="securityLevel > 3 ? 'w-full' : 'w-0'"
-                class="absolute left-0 top-0 h-full bg-red-500 transition-all duration-500"
-              ></div>
-            </div>
-            <div class="flex-1 h-2 rounded-xl relative bg-gray-200 overflow-hidden">
-              <div
-                :class="securityLevel > 4 ? 'w-full' : 'w-0'"
-                class="absolute left-0 top-0 h-full bg-red-500 transition-all duration-500"
+                class="register-wrapper__strength-bar-fill"
+                :style="{ width: securityLevel >= level ? '100%' : '0' }"
               ></div>
             </div>
           </div>
-          <p class="text-xs mt-2" style="color: #71717a">
+          <p class="register-wrapper__password-hint" style="color: #71717a">
             使用 8 个或更多字符，混合大小写字母、数字
           </p>
         </div>
@@ -72,7 +52,7 @@
         />
       </n-form-item>
       <n-form-item path="agreement">
-        <div class="flex flex-1">
+        <div class="register-wrapper__agreement">
           <n-checkbox v-model:checked="registerModel.agreement">我同意</n-checkbox>
           <a href="javascript:void(0)" style="color: #2080f0">隐私政策 & 条款</a>
         </div>
@@ -83,7 +63,7 @@
         </n-button>
       </n-form-item>
       <n-form-item>
-        <div class="flex-center flex-1">
+        <div class="register-wrapper__login-link">
           <span>已经有账号了？</span>
           <router-link to="/auth/login" style="color: #2080f0">去登录</router-link>
         </div>
@@ -247,4 +227,81 @@ const userRegisterFun = () => {
 }
 </script>
 
-<style scoped></style>
+<style scoped>
+.register-wrapper {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+}
+
+.register-wrapper__header {
+  width: 100%;
+}
+
+.register-wrapper__title {
+  font-size: 30px;
+  line-height: 36px;
+  margin-bottom: 12px;
+  font-weight: bold;
+}
+
+@media (min-width: 1024px) {
+  .register-wrapper__title {
+    font-size: 36px;
+  }
+}
+
+.register-wrapper__form {
+  width: 100%;
+  margin-top: 40px;
+}
+
+.register-wrapper__password-group {
+  display: flex;
+  flex-direction: column;
+  flex: 1;
+}
+
+.register-wrapper__strength-bars {
+  display: flex;
+  flex: 1;
+  gap: 4px;
+  margin-top: 8px;
+}
+
+.register-wrapper__strength-bar-track {
+  flex: 1;
+  height: 8px;
+  border-radius: 12px;
+  position: relative;
+  background-color: #e5e7eb;
+  overflow: hidden;
+}
+
+.register-wrapper__strength-bar-fill {
+  position: absolute;
+  left: 0;
+  top: 0;
+  height: 100%;
+  background-color: #ef4444;
+  transition: all 500ms;
+}
+
+.register-wrapper__password-hint {
+  font-size: 12px;
+  margin-top: 8px;
+}
+
+.register-wrapper__agreement {
+  display: flex;
+  flex: 1;
+}
+
+.register-wrapper__login-link {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  flex: 1;
+}
+</style>