feat(login):重构登录模块并新增API支持

- 新增 newLoginApi.ts 文件，实现图片验证码、手机验证码、注册、登录、忘记密码等接口
- 新增 indexApi.ts 文件，封装 axios 请求类，支持请求拦截、响应拦截、全局错误处理等- 修改 login.ts 文件，将 getAuthMenuListApi 返回值改为 Promise 形式
- 更新 login 页面样式，采用新布局和设计元素
- 引入 element-plus 组件库，重构登录表单为标签页形式（密码登录/验证码登录）- 添加用户协议和隐私政策弹窗展示功能
- 实现登录验证逻辑，包括验证码刷新、倒计时等功能
- 调整路由配置文件，增加调试日志输出
- 更新静态路由配置，优化重定向设置- 修改认证 store 模块，增强菜单权限获取逻辑
- 在主页组件中引入 vue-router 并添加路由信息打印- 升级登录页面 SCSS 样式，适配响应式布局，支持多设备访问- 替换背景图资源路径，调整整体视觉风格- 移除旧版 SwitchDark 组件及相关暗色模式切换功能
- 新增二维码展示区域及扫码下载提示文案- 调整登录框尺寸与定位方式，提升用户体验
- 增加品牌标题与标语展示区，强化品牌形象识别-优化表单项布局结构，统一使用 el-form-item 包裹输入控件- 补充手机号、密码、验证码等字段校验规则定义
- 完善底部链接区域功能，支持跳转至注册页面及找回密码流程- 加入用户协议勾选框，默认未选中状态需手动确认- 实现 tab 切换效果，区分不同登录方式入口
- 增强安全性处理，如密码输入框开启自动填充防护
- 提升无障碍访问体验，为表单控件添加 label 关联属性
- 修复若干潜在 bug 并清理冗余 console 输出语句

.env.development

@@ -16,6 +16,7 @@ VITE_PWA = false
 
 # 开发环境接口地址
 # VITE_API_URL_STORE = /api  # 开发环境使用
+VITE_API=/api
 VITE_API_URL_STORE = /api/alienStore #生产环境使用
 VITE_API_URL = /api/alienStore
 VITE_API_URL_SECOND = /api/alienSecond

src/api/indexApi.ts

@@ -0,0 +1,123 @@
+import axios, { AxiosInstance, AxiosError, AxiosRequestConfig, InternalAxiosRequestConfig, AxiosResponse } from "axios";
+import { showFullScreenLoading, tryHideFullScreenLoading } from "@/components/Loading/fullScreen";
+import { LOGIN_URL } from "@/config";
+import { ElMessage } from "element-plus";
+import { ResultData } from "@/api/interface";
+import { ResultEnum } from "@/enums/httpEnum";
+import { checkStatus } from "./helper/checkStatus";
+import { AxiosCanceler } from "./helper/axiosCancel";
+import { useUserStore } from "@/stores/modules/user";
+import router from "@/routers";
+
+export interface CustomAxiosRequestConfig extends InternalAxiosRequestConfig {
+  loading?: boolean;
+  cancel?: boolean;
+}
+
+const config = {
+  // 默认地址请求地址，可在 .env.** 文件中修改
+  baseURL: import.meta.env.VITE_API as string,
+  // 设置超时时间
+  timeout: ResultEnum.TIMEOUT as number,
+  // 跨域时候允许携带凭证
+  withCredentials: true
+};
+
+const axiosCanceler = new AxiosCanceler();
+
+class RequestHttp {
+  service: AxiosInstance;
+  public constructor(config: AxiosRequestConfig) {
+    // instantiation
+    this.service = axios.create(config);
+
+    /**
+     * @description 请求拦截器
+     * 客户端发送请求 -> [请求拦截器] -> 服务器
+     * token校验(JWT) : 接受服务器返回的 token,存储到 vuex/pinia/本地储存当中
+     */
+    this.service.interceptors.request.use(
+      (config: CustomAxiosRequestConfig) => {
+        const userStore = useUserStore();
+        // 重复请求不需要取消，在 api 服务中通过指定的第三个参数: { cancel: false } 来控制
+        config.cancel ??= true;
+        config.cancel && axiosCanceler.addPending(config);
+        // 当前请求不需要显示 loading，在 api 服务中通过指定的第三个参数: { loading: false } 来控制
+        config.loading ??= true;
+        config.loading && showFullScreenLoading();
+        if (config.headers && typeof config.headers.set === "function") {
+          config.headers.set("Authorization", userStore.token);
+        }
+        return config;
+      },
+      (error: AxiosError) => {
+        return Promise.reject(error);
+      }
+    );
+
+    /**
+     * @description 响应拦截器
+     *  服务器换返回信息 -> [拦截统一处理] -> 客户端JS获取到信息
+     */
+    this.service.interceptors.response.use(
+      (response: AxiosResponse & { config: CustomAxiosRequestConfig }) => {
+        const { data, config } = response;
+
+        const userStore = useUserStore();
+        axiosCanceler.removePending(config);
+        config.loading && tryHideFullScreenLoading();
+        // 登录失效
+        if (data.code == ResultEnum.OVERDUE) {
+          userStore.setToken("");
+          router.replace(LOGIN_URL);
+          ElMessage.error(data.msg);
+          return Promise.reject(data);
+        }
+        // 全局错误信息拦截（防止下载文件的时候返回数据流，没有 code 直接报错）
+        if (data.code && data.code !== ResultEnum.SUCCESS) {
+          ElMessage.error(data.msg);
+          return Promise.reject(data);
+        }
+        // 成功请求（在页面上除非特殊情况，否则不用处理失败逻辑）
+        return data;
+      },
+      async (error: AxiosError) => {
+        const { response } = error;
+        tryHideFullScreenLoading();
+        // 请求超时 && 网络错误单独判断，没有 response
+        if (error.message.indexOf("timeout") !== -1) ElMessage.error("请求超时！请您稍后重试");
+        if (error.message.indexOf("Network Error") !== -1) ElMessage.error("网络错误！请您稍后重试");
+        // 根据服务器响应的错误状态码，做不同的处理
+        if (response.data.message) {
+          ElMessage.error(response.data.message);
+        } else {
+          if (response) checkStatus(response.status);
+        }
+        // 服务器结果都没有返回(可能服务器错误可能客户端断网)，断网处理:可以跳转到断网页面
+        if (!window.navigator.onLine) router.replace("/500");
+        return Promise.reject(error);
+      }
+    );
+  }
+  /**
+   * @description 常用请求方法封装
+   */
+  get<T>(url: string, params?: object, _object = {}): Promise<ResultData<T>> {
+    return this.service.get(url, { params, ..._object });
+  }
+  post<T>(url: string, params?: object | string, _object = {}): Promise<ResultData<T>> {
+    console.log(config.baseURL, url, params);
+    return this.service.post(url, params, _object);
+  }
+  put<T>(url: string, params?: object, _object = {}): Promise<ResultData<T>> {
+    return this.service.put(url, params, _object);
+  }
+  delete<T>(url: string, params?: any, _object = {}): Promise<ResultData<T>> {
+    return this.service.delete(url, { params, ..._object });
+  }
+  download(url: string, params?: object, _object = {}): Promise<BlobPart> {
+    return this.service.post(url, params, { ..._object, responseType: "blob" });
+  }
+}
+
+export default new RequestHttp(config);

src/api/modules/login.ts

@@ -20,7 +20,9 @@ export const loginApi = (params: Login.ReqLoginForm): Promise<{ data: Login.ResL
 export const getAuthMenuListApi = () => {
   // return http.get<Menu.MenuOptions[]>(PORT1 + `/menu/list`, {}, { loading: false });
   // 如果想让菜单变为本地数据，注释上一行代码，并引入本地 authMenuList.json 数据
-  return authMenuList;
+  return new Promise(resolve => {
+    resolve(authMenuList);
+  });
 };
 
 // 获取按钮权限

src/api/modules/newLoginApi.ts

@@ -0,0 +1,33 @@
+import type { Login } from "@/api/interface";
+import httpLogin from "@/api/indexApi";
+// 获取图片验证码
+export const getImgCode = () => {
+  return httpLogin.get(
+    `/alienStorePlatform/storePlatformLogin/generateCaptcha`,
+    {},
+    {
+      responseType: "blob",
+      loading: false
+    }
+  ); // 正常 post json 请求  ==>  application/json
+};
+// 获取手机验证码
+export const getPhoneCode = params => {
+  return httpLogin.get(`/alienStore/ali/sendSms`, params, { loading: false });
+};
+// 注册账号
+export const registerAccount = params => {
+  return httpLogin.get(`/alienStorePlatform/storePlatformLogin/register`, params, { loading: false });
+};
+//注册校验
+export const registerCheck = params => {
+  return httpLogin.get(`/alienStorePlatform/storePlatformLogin/checkRegister`, params, { loading: false });
+};
+//登录账号 /storePlatformLogin/login
+export const loginAccount = params => {
+  return httpLogin.get(`/alienStorePlatform/storePlatformLogin/login`, params, { loading: false });
+};
+// 忘记密码 /storePlatformLogin/updatePassword
+export const forgetPassword = params => {
+  return httpLogin.get(`/alienStorePlatform/storePlatformLogin/updatePassword`, params, { loading: false });
+};

src/routers/modules/dynamicRouter.ts

@@ -45,6 +45,7 @@ export const initDynamicRouter = async () => {
         router.addRoute("layout", item as unknown as RouteRecordRaw);
       }
     });
+    console.log("路由加入完毕", router.getRoutes());
   } catch (error) {
     // 当按钮 || 菜单请求出错时，重定向到登陆页
     userStore.setToken("");

src/stores/modules/auth.ts

@@ -32,7 +32,8 @@ export const useAuthStore = defineStore({
     },
     // Get AuthMenuList
     async getAuthMenuList() {
-      const { data } = await getAuthMenuListApi();
+      const { data } = (await getAuthMenuListApi()) as any;
+      console.log(data, "ddd-000d");
       this.authMenuList = data;
     },
     // Set RouteName

src/views/home/index.vue

@@ -17,11 +17,13 @@ import { ref } from "vue";
 import goEnter from "./components/go-enter.vue";
 import goFlow from "./components/go-flow.vue";
 import goExamine from "./components/go-examine.vue";
+import { useRouter } from "vue-router";
 const userInfo = ref(1);
 
 // 当前步骤：0-首页，1-第一步，2-第二步
 const currentStep = ref(0);
-
+const router = useRouter();
+console.log(router.getRoutes());
 // 处理更新currentStep事件
 const handleUpdateCurrentStep = (step: number) => {
   currentStep.value = step;

src/views/login/index.scss

@@ -1,83 +1,264 @@
 .login-container {
-  height: 100%;
-  min-height: 550px;
-  background-color: #eeeeee;
-  background-image: url("@/assets/images/login_bg.svg");
-  background-size: 100% 100%;
+  position: relative;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  height: 100vh;
+  min-height: 600px;
+  padding: 20px;
+  overflow: hidden;
+  background-color: #f5f7fa;
+  background-image: url("@/assets/login/bg.jpg");
+  background-repeat: no-repeat;
+  background-position: center;
   background-size: cover;
   .login-box {
     position: relative;
+    z-index: 1;
     box-sizing: border-box;
     display: flex;
     align-items: center;
-    justify-content: space-around;
-    width: 96.5%;
-    height: 94%;
-    padding: 0 50px;
-    background-color: rgb(255 255 255 / 80%);
-    border-radius: 10px;
-    .dark {
-      position: absolute;
-      top: 13px;
-      right: 18px;
-    }
+    justify-content: space-between;
+    width: 100%;
+    max-width: 1200px;
+    height: 90%;
+    min-height: 600px;
+    padding: 40px 60px;
+    background-color: transparent;
+
+    // 左侧品牌区域
     .login-left {
-      width: 800px;
-      margin-right: 10px;
-      .login-left-img {
-        width: 100%;
-        height: 100%;
-      }
-    }
-    .login-form {
-      width: 420px;
-      padding: 50px 40px 45px;
-      background-color: var(--el-bg-color);
-      border-radius: 10px;
-      box-shadow: rgb(0 0 0 / 10%) 0 2px 10px 2px;
-      .login-logo {
+      display: flex;
+      flex: 1;
+      flex-direction: column;
+      align-items: flex-start;
+      padding-right: 60px;
+      .brand-header {
         display: flex;
+        gap: 12px;
         align-items: center;
-        justify-content: center;
-        margin-bottom: 45px;
-        .login-icon {
-          width: 60px;
-          height: 52px;
+        margin-bottom: 20px;
+        .logo-img {
+          max-width: 50px;
+          height: auto;
+          object-fit: contain;
         }
-        .logo-text {
-          padding: 0 0 0 25px;
-          margin: 0;
-          font-size: 42px;
-          font-weight: bold;
-          color: #34495e;
-          white-space: nowrap;
+        .brand-text {
+          font-size: 20px;
+          font-weight: 600;
+          color: #409eff;
         }
       }
-      .el-form-item {
+      .slogan {
+        width: 567px;
+        height: 44px;
         margin-bottom: 40px;
+        font-family: Inter;
+        font-size: 36px;
+        font-style: normal;
+        font-weight: 300;
+        line-height: 44px;
+        color: #8b8b8b;
+        text-align: left;
+        text-transform: none;
       }
-      .login-btn {
+      .store-section {
         display: flex;
-        justify-content: space-between;
+        gap: 20px;
+        align-items: flex-end;
         width: 100%;
-        margin-top: 40px;
-        white-space: nowrap;
-        .el-button {
-          width: 185px;
+        margin-bottom: 30px;
+      }
+
+      //.store-illustration {
+      //  flex: 1;
+      //  display: flex;
+      //  align-items: center;
+      //  justify-content: center;
+      .store-img {
+        width: 686px;
+        height: 568px;
+
+        //object-fit: contain;
+      }
+
+      //}
+      .qr-code-card {
+        flex-shrink: 0;
+        .qr-card-wrapper {
+          width: 180px;
+          padding: 20px;
+          text-align: center;
+          background-color: #ffffff;
+          border: 1px solid #e4e7ed;
+          border-radius: 8px;
+          box-shadow: 0 2px 8px rgb(0 0 0 / 5%);
+          .qr-title-img {
+            width: 100%;
+            max-width: 100%;
+            height: auto;
+            margin-bottom: 12px;
+            object-fit: contain;
+          }
+          .qr-code {
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            width: 140px;
+            height: 140px;
+            margin: 0 auto 12px;
+            background-color: #f5f7fa;
+            border: 1px solid #e4e7ed;
+            border-radius: 4px;
+            .qr-img {
+              width: 100%;
+              height: 100%;
+              object-fit: contain;
+            }
+            .qr-placeholder {
+              font-size: 12px;
+              color: #909399;
+            }
+          }
+          .qr-desc {
+            font-size: 12px;
+            color: #909399;
+          }
+        }
+      }
+    }
+
+    // 右侧登录表单
+    .login-form {
+      box-sizing: border-box;
+      display: flex;
+      flex-direction: column;
+      width: 480px;
+      height: 600px;
+      padding: 50px 40px;
+      background-color: #ffffff;
+      border-radius: 12px;
+      box-shadow: 0 2px 12px rgb(0 0 0 / 8%);
+      .form-title {
+        display: flex;
+        gap: 8px;
+        align-items: center;
+        justify-content: center;
+        margin: 0 0 30px;
+        font-family: Inter;
+        font-size: 26px;
+        font-style: normal;
+        font-weight: 400;
+        line-height: 100%;
+        color: #303133;
+        text-align: center;
+        letter-spacing: 0%;
+        .form-title-img {
+          width: auto;
+          height: 2em;
+          vertical-align: middle;
+          object-fit: contain;
         }
       }
     }
   }
 }
 
-@media screen and (width <= 1250px) {
-  .login-left {
-    display: none;
+// 响应式设计
+@media screen and (width <= 1200px) {
+  .login-container {
+    .login-box {
+      .login-left {
+        padding-right: 40px;
+        .store-illustration {
+          .store-img {
+            max-height: 300px;
+          }
+        }
+      }
+    }
+  }
+}
+
+@media screen and (width <= 992px) {
+  .login-container {
+    .login-box {
+      flex-direction: column;
+      padding: 30px 40px;
+      .login-left {
+        align-items: center;
+        width: 100%;
+        padding-right: 0;
+        margin-bottom: 30px;
+        .brand-header {
+          width: 100%;
+        }
+        .slogan {
+          width: 100%;
+          max-width: 567px;
+          height: auto;
+          font-size: 28px;
+          line-height: 1.2;
+          text-align: center;
+        }
+        .store-section {
+          flex-direction: column;
+          align-items: center;
+          .store-illustration {
+            margin-bottom: 20px;
+            .store-img {
+              max-height: 250px;
+            }
+          }
+          .qr-code-card {
+            margin: 0 auto;
+          }
+        }
+      }
+      .login-form {
+        width: 100%;
+        max-width: 480px;
+      }
+    }
   }
 }
 
 @media screen and (width <= 600px) {
-  .login-form {
-    width: 97% !important;
+  .login-container {
+    padding: 10px;
+    .login-box {
+      min-height: auto;
+      padding: 20px;
+      .login-left {
+        .slogan {
+          width: 100%;
+          height: auto;
+          font-size: 24px;
+          line-height: 1.2;
+        }
+        .store-section {
+          flex-direction: column;
+          align-items: center;
+          .store-illustration {
+            .store-img {
+              max-height: 200px;
+            }
+          }
+          .qr-code-card {
+            .qr-card-wrapper {
+              width: 150px;
+              padding: 15px;
+              .qr-code {
+                width: 120px;
+                height: 120px;
+              }
+            }
+          }
+        }
+      }
+      .login-form {
+        padding: 30px 20px;
+      }
+    }
   }
 }

src/views/login/index.vue

@@ -1,25 +1,1321 @@
 <template>
-  <div class="login-container flx-center">
-    <div class="login-box">
-      <SwitchDark class="dark" />
-      <div class="login-left">
-        <img class="login-left-img" src="@/assets/images/login_left.png" alt="login" />
-      </div>
-      <div class="login-form">
-        <div class="login-logo">
-          <h2 class="logo-text">Alien-Store</h2>
+  <div class="login-bg">
+    <div class="left-box">
+      <div class="left-box-title">
+        <div style="display: flex; align-items: center">
+          <img src="@/assets/login/logo.png" style=" width: 49px;height: 44px" />
+          <span class="left-box-title-text">U店商家端</span>
         </div>
-        <LoginForm />
+        <div class="left-box-title-bottom-text">登录U店在这，轻松管店、快速核销</div>
+      </div>
+      <img src="@/assets/login/login.png" class="login-class" />
+      <div class="qrcode-box">
+        <img src="@/assets/login/udzzApp.png" />
+        <div style=" width: 124px;height: 124px; background: black" />
+        <span class="qrcode-box-text">扫码下载</span>
+      </div>
+    </div>
+    <div class="right-box">
+      <div class="right-box-title">
+        欢迎登录
+        <img src="@/assets/login/ud.png" style=" width: 74px;height: 74px" />
+        在这
+      </div>
+
+      <el-tabs v-model="activeTab" class="login-tabs">
+        <el-tab-pane label="密码登录" name="password">
+          <el-form ref="passwordFormRef" :model="passwordForm" :rules="passwordRules" size="large" class="login-form-content">
+            <el-form-item prop="phone" label="手机号码" label-position="top">
+              <el-input v-model="passwordForm.phone" placeholder="请输入手机号" maxlength="11" clearable />
+            </el-form-item>
+            <el-form-item prop="password" label="密码" label-position="top">
+              <el-input
+                v-model="passwordForm.password"
+                type="password"
+                placeholder="请输入密码"
+                show-password
+                autocomplete="new-password"
+                clearable
+              />
+            </el-form-item>
+            <el-form-item prop="captcha" label="登录验证" label-position="top">
+              <div class="captcha-wrapper">
+                <el-input
+                  v-model="passwordForm.captcha"
+                  placeholder="请输入图片中的数字"
+                  maxlength="4"
+                  clearable
+                  class="captcha-input"
+                />
+                <div class="captcha-image" @click="refreshCaptcha">
+                  <img v-if="captchaImage" :src="captchaImage" alt="验证码" />
+                  <div v-else class="captcha-placeholder">点击获取</div>
+                </div>
+              </div>
+            </el-form-item>
+          </el-form>
+        </el-tab-pane>
+
+        <el-tab-pane label="验证码登录" name="code">
+          <el-form ref="codeFormRef" :model="codeForm" :rules="codeRules" size="large" class="login-form-content">
+            <el-form-item prop="phone" label="手机号码" label-position="top">
+              <el-input v-model="codeForm.phone" placeholder="请输入手机号" maxlength="11" clearable />
+            </el-form-item>
+            <el-form-item prop="code" label="验证码" label-position="top">
+              <div class="code-wrapper">
+                <el-input v-model="codeForm.code" placeholder="请输入验证码" maxlength="6" clearable class="code-input" />
+                <el-button :disabled="codeCountdown > 0" @click="sendLoginCode" class="code-button">
+                  {{ codeCountdown > 0 ? `${codeCountdown}秒后重试` : "获取验证码" }}
+                </el-button>
+              </div>
+            </el-form-item>
+          </el-form>
+        </el-tab-pane>
+      </el-tabs>
+
+      <!-- 登录按钮 -->
+      <el-button type="primary" size="large" :loading="loading" @click="handleLogin" class="login-button"> 登录 </el-button>
+
+      <!-- 底部链接 -->
+      <div class="form-footer">
+        <span class="link-text" @click="handleForgotPassword">忘记密码?</span>
+        <span class="link-text" @click="openRegister">还没有账号,去注册</span>
+      </div>
+
+      <!-- 用户协议 -->
+      <div class="agreement-wrapper">
+        <el-checkbox v-model="agreed" />
+        <span class="agreement-text">
+          我已阅读并同意
+          <span class="link-text" @click="handleUserAgreement">《用户协议》</span>
+          和
+          <span class="link-text" @click="handlePrivacyPolicy">《隐私政策》</span>
+        </span>
       </div>
     </div>
+    <el-dialog v-model="userShow">
+      <template #header>
+        <div>
+          <p style="display: flex; align-items: center; justify-content: center">“U 店在这” 商家端用户协议</p>
+        </div>
+      </template>
+      <div style=" height: 50vh; padding: 10px; overflow-y: auto; font-size: 14px;line-height: 1.6">
+        <p>
+          您在使用爱丽恩严（大连）商务科技有限公司旗下U店在这APP软件提供的服务前，应当仔细认真阅读本《服务条款》(下称"本条款")中的全部规则、《用户协议》及发布的其他服务条款、专项产品或服务规则或规范的内容，尤其是以粗体或加下划线标示的条款，包括但不限于免除或者限爱丽恩严（大连）商务科技有限公司责任的条款、对用户权利进行限制的条款以及约定争议解决方式、司法管辖的条款，上述条款请您重点阅读。您有权选择同意或者不同意本协议。
+        </p>
+
+        <p><strong>本协议所称的爱丽恩严</strong>是指爱丽恩严（大连）商务科技有限公司的简称。</p>
+
+        <p>
+          您与爱丽恩严均应当严格履行本协议及其补充协议所约定的各项义务，如发生争议或者纠纷，双方可以友好协商解决；协商不成的，任何一方均可向本协议签订地有管辖权的人民法院提起诉讼。本协议签订地为大连市中山区。
+        </p>
+
+        <p>
+          您如果通过登录U店在哪APP用户注册页面或者爱丽恩严提供的其他用户注册渠道注册用户账号，完成我们的注册流程并通过点击同意的形式在线签署本协议即视为您完全同意本协议，愿意接受本协议所有及任何条款的约束。
+        </p>
+
+        <p>所有服务规则视为本条款不可分割的一部分，与本条款具有同等法律效力。</p>
+
+        <p>
+          <strong>本条款的签约双方</strong>为爱丽恩严服务的实际运营商爱丽恩严（大连）商务科技有限公司（下称"爱丽恩严"）
+          与使用爱丽恩严相关服务的使用人（以下称"用户"或"您"），本条款是您与爱丽恩严之间关于您使用爱丽恩严提供的各项服务所订立的服务条款，具有正式书面合同的效力。
+        </p>
+
+        <p>
+          本条款为爱丽恩严平台《用户协议》（包括但不限于所附的《隐私协议》）
+          的必要组成部分。《用户协议》将同时适用于爱丽恩严的各项服务。如本条款与《用户协议》文本内容存在冲突之处，则以时间上最新发布的内容为准，发布时间相同的，以本条款为准。本条款有待明确、存在歧义或未规定之处均以《用户协议》中的规定为准。
+        </p>
+
+        <p>
+          您理解并同意，爱丽恩严将根据《用户协议》的约定，对本条款或各项服务规则不时地进行修改更新。修改更新内容的发布和实施均适用《用户协议》的相关约定。
+        </p>
+
+        <h3>一、名词解释</h3>
+        <p>除您与爱丽恩严另有约定外，本协议及其补充协议当中的下列名词均采用如下解释：</p>
+
+        <p>
+          1.
+          服务条款：即本协议，指您与爱丽恩严当下订立的旨在约定您登录、使用本平台，通过本平台下达订单、购买商品/服务、支付价款以及爱丽恩严运用自己的平台系统，通过互联网络等方式为用户提供商户信息、点评信息、消费信息、优惠信息、团购等整个网络服务过程中，您与爱丽恩严之间的权利、义务的书面合同。
+        </p>
+
+        <p>
+          2. 爱丽恩严：指是爱丽恩严（大连）商务科技有限公司运营的爱丽恩严生活服务信息平台，包括但不限于
+          爱丽恩严网站、爱丽恩严客户端、爱丽恩严小程序等形式的互联网平台。
+        </p>
+
+        <p>
+          3.
+          商户：是指根据本条款及其他适用的服务规则，在爱丽恩严平台上发布信息为爱丽恩严用户提供各项线上及线下的商品或服务的第三方商家。
+        </p>
+
+        <p>
+          4.
+          团购：团购是指通过爱丽恩严平台，一定数量的用户组团或者参团，以较低折扣价格购买同一种服务或商品的行为，包括消费买单、预约及预订服务项目等。
+        </p>
+
+        <p>
+          5.
+          团购信息：是指商户通过爱丽恩严发布的团购商品或服务的信息，此类信息包括但不限于团购商品或服务的名称、种类、数量、质量、价格、配送方式、支付形式、退换货方式、退款条件、售后服务等内容。
+        </p>
+
+        <p>
+          6.
+          团购券：是指用户通过爱丽恩严购买商户的服务或商品并成功支付团购价款后，相关商户通过爱丽恩严自动向用户出具的供用户向该商户要求提供商品或服务的交易凭证。
+        </p>
+
+        <p>
+          7.
+          优惠券：是指用户通过爱丽恩严购买商户的服务或商品时，购买、免费领取或使用积分兑换用于享受减免、折扣或其他优惠条件的电子交易凭证。
+        </p>
+
+        <p>
+          8. 交互信息服务：交互信息服务是指用户在爱丽恩严应用上交互平台（下称 "点评交互平台
+          "）上发布文字、图片、视频及表演（直播）等信息。点评交互平台包括但不限于点评社区、点评头条、 点评直播、笔记功能等。
+        </p>
+
+        <h3>二、用户账号</h3>
+        <p>
+          1.在注册、管理、使用账号时，您应遵循诚实信用、合法善意的原则。您向平台提交的相关注册资料应当遵守法律法规、社会主义制度、国家利益、公民合法权益、公序良俗、信息真实等原则，不应提交任何违法或不良信息。相关资料如有变动，您应及时更新。如果因您所提供的注册资料不合法、不真实、不准确或未及时更新，从而导致相关法律责任或不利后果的，您将承担相
+          应的法律责任及不利后果。同时，爱丽恩严有权拒绝为您提供注册服务。
+        </p>
+        <p>2.您同意并承诺以合法、合规、合理的方式使用爱丽恩严账号：</p>
+        <ul>
+          <li>
+            （1）您设置的账号昵称、头像及个人介绍等个人资料不得出现违法和不良信息，包括但不限于使用政治、色情、低俗、侮辱、诽谤等违反法律、道德及公序良俗的词语。
+          </li>
+          <li>
+            （2）未经他人许可，您不得使用他人名义（包括但不限于冒用他人姓名、名称、字号、头像、身份等或采取其他足以让人引起混淆的方式）开设爱丽恩严账号。
+          </li>
+          <li>
+            （3）不得假冒、仿冒、捏造党政军机关、企事业单位、新闻媒体等组织机构名称、标识信息或采取其他足以让人引起混淆的方式开设爱丽恩严账号。
+          </li>
+          <li>
+            （4）您不得恶意注册爱丽恩严账号（包括但不限于频繁注册、批量注册账号等行为）或将账号用于非法或不正当用途（包括但不限于流量作假等行为），不得实施任何侵害国家利益、损害其他公民合法权益，有害社会道德风尚的行为，不得采取各种技术手段恶意绕开或者对抗平台规则。
+          </li>
+        </ul>
+        <p>
+          3.您理解并同意，您的爱丽恩严账号的所有权及有关权益均归爱丽恩严所有，您仅享有该账号的使用权且仅限于您本人使用。为保证账号安全，未经爱丽恩严的书面同意，您不应将爱丽恩严账号以赠与、转让、出售、出借或其他方式许可他人使用，否则您应当承担由此产生的全部责任，爱丽恩严保留拒绝提供相应服务、冻结或收回注册账号或终止本服务协议的权利，并可要求您对爱丽恩严所承受的损失予以赔偿。
+        </p>
+        <p>
+          4.您应妥善保管账号信息、账号密码以及其他与账号相关的信息、资料。您有责任维护个人账号、密码的安全性与保密性，并对您以注册账号名义所从事的活动承担全部法律责任，包括但不限于您在爱丽恩严平台进行的任何信息发表、浏览点击等操作行为可能引起的一切法律责任。若发现他人未经许可使用您的账号或发生其他任何安全漏洞问题时，您应当立即通知爱丽恩严。
+        </p>
+        <p>
+          5.您理解并同意，如您违反上述条款，爱丽恩严有权对您采取要求限期改正、禁止注册、删除或屏蔽违法违规信息、不同时限的禁止信息发布和账号信息修改、封号、注销账号等处置措施。
+        </p>
+        <p>
+          6.您理解并同意，您可通过注册新的账号或登录您现有的账号以使用爱丽恩严的各项服务及功能，您使用爱丽恩严账号应同时遵守《用户协议》中的各项规定。
+        </p>
+
+        <h3>三、用户管理</h3>
+        <p>
+          1.您知悉、理解并同意，爱丽恩严在服务过程中，可能涉及收集、存储、使用、共享和保护用户个人信息。在您使用爱丽恩严提供的服务时，您同意爱丽恩严依据《隐私协议》的规定执行相关个人信息的收集、使用和共享。您进一步同意，就爱丽恩严平台所产生的交易或其他与个人信息使用紧密相关的交易，您授权爱丽恩严使用或允许爱丽恩严许可的第三方在必要、合理的限度内使用您的个人信息，包括但不限于身份信息、账号信息、交易信息等。
+        </p>
+        <p>
+          2.您知悉并同意，爱丽恩严将按照有权网络信息主管部门的相关规定对您的账号信息及所发布的各项信息进行必要的安全审查及评估，保留并向有关部门定期报送您的账号信息及您所发布的各项信息。
+        </p>
+        <p>
+          3.用户有权在爱丽恩严平台上发布客观、真实、亲身体验的文字点评、图片点评、视频点评或者自行添加商户、完善爱丽恩严平台中商户的商户名称、营业时间、位置等信息。用户同意并理解，为了遵守法律法规和政策，维护良好的平台秩序，爱丽恩严有权对特定用户、特定行业、特定商品或者服务的点评信息或者商户信息发布流程作出特别设定或者限制。
+        </p>
+        <p>
+          4.您可以通过正式的页面公告和/或站内信和/或电子邮件和/或客服电话和/或手机短信、常规的信件接收和查看中奖、优惠等活动或信息，并在爱丽恩严上自行浏览、下载和使用优惠券和/
+          或团购券。
+        </p>
+        <p>
+          5.用户知晓并同意，他人可能通过"认领"等操作获得用户在爱丽恩严平台中添加的商户条目之管理权限，并可能对用户添加、完善之信息进行修改或者使用。
+        </p>
+        <p>6.用户有权根据爱丽恩严相关规定，在发布点评信息等贡献后，取得爱丽恩严给予的奖励（如贡献值、积分等）。</p>
+        <p>
+          7.用户在发布信息时，您应确保该等信息的真实性、客观性、合法性，爱丽恩严提倡用户贡献高质量点评。用户应确保在爱丽恩严上发表的各类点评信息、攻略或文章、图片及视频均不涉及侵犯第三方隐私、著作权或其他合法权益。用户需维护点评的客观性，不得利用爱丽恩严用户身份进行任何违反法律、法规、国家政策以及诚实信用原则的行为，包括但不限于：
+        </p>
+        <ul>
+          <li>（1）违反法律法规及国家政策的行为：</li>
+          <li>①反对宪法所确定的基本原则的；</li>
+          <li>②危害国家安全，泄露国家秘密，颠覆国家政权，破坏国家统一的；</li>
+          <li>③损害国家荣誉和利益的；</li>
+          <li>④歪曲、丑化、亵渎、否定英雄烈士事迹和精神，以侮辱、诽谤或者其他方式侵害英雄烈士的姓名、肖像、名誉、荣誉的；</li>
+          <li>⑤宣扬恐怖主义、极端主义或者煽动实施恐怖活动、极端主义活动的；</li>
+          <li>⑥煽动民族仇恨、民族歧视，破坏民族团结的；</li>
+          <li>⑦破坏国家宗教政策，宣扬邪教和封建迷信的；</li>
+          <li>⑧散布谣言，扰乱经济秩序和社会秩序的；</li>
+          <li>⑨散布淫秽、色情、赌博、暴力、凶杀、恐怖或者教唆犯罪的；</li>
+          <li>⑩侮辱或者诽谤他人，侵害他人名誉、隐私和其他合法权益的；</li>
+          <li>⑪法律、行政法规禁止的其他内容。</li>
+          <li>（2）违反诚实信用原则的行为：</li>
+          <li>①炒作并向商户收取费用或获取利益；</li>
+          <li>②为获得利益或好处，参与或组织撰写及发布虚假点评；</li>
+          <li>③以差评威胁、要求商户提供额外的利益或好处；</li>
+          <li>④以虚构事实、侮辱、诽谤等方式恶意诋毁爱丽恩严网或商家的商誉；</li>
+          <li>⑤进行其他其它影响点评客观、干扰扰乱爱丽恩严正常秩序的违规行为等。</li>
+        </ul>
+        <p>如您存在以上行为的，爱丽恩严有权采取如下行动：</p>
+        <ul>
+          <li>①屏蔽违规信息，视情节轻重情况发出警告；</li>
+          <li>②清除其所有评价、图片，屏蔽其发布的涉及商业性炒作的帖子；</li>
+          <li>③暂时限制/永久限制您使用账号在爱丽恩严平台上发布信息；</li>
+          <li>④法律、行政法规、本条款及《用户协议》规定的其他方式。</li>
+        </ul>
+        <p>
+          8.禁止用户将爱丽恩严以任何形式作为从事各种非法活动的场所、平台或媒介。未经爱丽恩严的授权或许可，用户不得借用爱丽恩严的名义从事任何商业活动，也不得以任何形式将爱丽恩严作为从事商业活动的场所、平台或媒介。
+        </p>
+        <p>
+          9.您违反本条款、《用户协议》或爱丽恩严发布的其他任何服务规则，则爱丽恩严有权在法律允许的范围内采取一切必要的措施，包括但不限于删除用户发布的内容、取消用户在爱丽恩严获得的用户积分、星级、荣誉以及虚拟财富，暂停或终止您对爱丽恩严账号的使用，给爱丽恩严造成损失的，您应负全部赔偿责任，包括且不限于财产损害赔偿、名誉损害赔偿、诉讼费、律师费、公证费、交通费等因维权而产生的合理费用。爱丽恩严有权按照本条款及《用户协议》的相关规定对您的行为进行处理。
+        </p>
+
+        <h3>四、团购服务特别约定</h3>
+        <p>1.您有权通过爱丽恩严平台浏览各项团购信息，购买团购券、优惠券并使用其参与相关商户提供的商品或服务。</p>
+        <p>
+          2.您知悉并同意，您在爱丽恩严平台上所浏览及购买的团购券、优惠券或其他消费产品均系商户所提供的商品或服务，如您因购买或使用该等商品或服务产生任何问题或争议，您应自行与相应商户协商解决。
+        </p>
+
+        <h3>五、信息评价等特别约定</h3>
+        <p>
+          1.您应确保具有相应的资格并符合在爱丽恩严开展信息评价的相应条件。
+          如果因为您不具备相应资格或者条件的情形下通过爱丽恩严平台发布信息而引发任何法律责任，您应自行承担。因此给爱丽恩严平台造成损失的，您应予以全额赔偿。
+        </p>
+        <p>
+          2.平台有可能在相关法律法规和政策的指引下，对评价、帖子等信息发布实施分级分类管理，建立发布者信用等级管理体系，建立黑名单管理制度等。
+        </p>
+        <p>3.用户在平台发布的文字、图片、视频、表演（直播）等信息均应遵守相关法律法规、规章、本条款及《用户协议》的相关规定。</p>
+        <p>4.您同意：如出现以下任一情形的，爱丽恩严将视情节轻重采取删除信息、限制平台使用功能、停止您的账号使用等处理措施：</p>
+        <ul>
+          <li>（1）发布违反相关法律法规、规章、政策之规定或者违反本条款及相关服务规则的信息；</li>
+          <li>（2）发布与主题无关的信息或评论，包含文字、图片、视频等；</li>
+          <li>（3）发布可能存在交易风险的外部网站和APP信息，如发布社交、团购等外部网站或 APP的名称、超链接、二维码等信息；</li>
+          <li>
+            （4）发布的视频违反国家法律法规的相关要求，包括但不限于《广播电视管理条例》、《电影管理条例》、《互联网视听节目服务管理规定》、《广电总局关于加强互联网视听节目内容管理的通知》等的相关要求；
+          </li>
+          <li>
+            （5）用户进行表演（直播）时违反国家法律法规的相关要求，包括但不限于《互联网文化管理暂行规定》、《互联网直播服务管理规定》等的相关要求；
+          </li>
+          <li>（6）其他违反及《用户协议》相关规定的情形。</li>
+        </ul>
+
+        <h3>六、关于服务终止的约定</h3>
+        <p>
+          1.您同意爱丽恩严有权随时修改或中断其向您提供的任何免费服务而无需事先通知您。您与爱丽恩严进行的有偿交易，您同意爱丽恩严有权在事先通知的情况下予以修改、中断，并按照公平、诚实信用、等价有偿的原则处理后续事宜。
+        </p>
+        <p>
+          2.如您的账号同时符合以下条件，则爱丽恩严有权利终止您对爱丽恩严账号的使用。这将导致您的账号不能再登录爱丽恩严，相应服务亦同时终止：
+        </p>
+        <ul>
+          <li>（1）连续六个月未登录；</li>
+          <li>（2）不存在未到期的有效业务；</li>
+          <li>（3）终止您的账号和服务的行为不违反相关法律法规的强制性规定。</li>
+        </ul>
+        <p>
+          3.如您对本条款及其不时修订有任何异议的，您有权停止使用爱丽恩严的各项服务，或通过客服等渠道告知爱丽恩严停止对您提供服务。停止服务后，除法律法规另有明确规定外，爱丽恩严有权（但无义务）保留您的账号访问爱丽恩严的相关信息和数据，或留存、转发任何账号内的任何站内信或短消息。在此情况下，爱丽恩严没有义务（但有权利）向您或代为向商家或其他第三方传送任何未处理的信息或未完成的服务或交易信息。您同意爱丽恩严不就终止爱丽恩严服务而对您或任何第三方承担任何责任。
+        </p>
+        <p>
+          4.您同意，您与爱丽恩严的合同关系终止后，爱丽恩严就您在使用爱丽恩严服务期间存在违法行为或违反本条款和／或其他服务规则的行为的，
+          仍可依据本条款向您主张权利。
+        </p>
+
+        <h3>七、知识产权及其它权利</h3>
+        <p>1.用户确认其已经仔细阅读并同意爱丽恩严关于知识产权等相关权利的一切声明。</p>
+        <p>
+          2.爱丽恩严平台及相关服务的运营系统由爱丽恩严自主开发、运营并提供技术支持，爱丽恩严对平台服务的开发和运营等过程中产生的所有数据和信息等享有全部权利。爱丽恩严提供各项服务时所依托软件的著作权、专利权，所使用的各项商标、商业形象、商业标识、技术诀窍，其著作权、商标权及其他各项相关权利均归爱丽恩严所有。
+        </p>
+        <p>
+          3，您理解并同意，您在爱丽恩严发表的各项点评信息、文章、视频、反馈意见等所有信息及其衍生品的知识产权及所有权，适用《用户协议》中的相关约定。
+        </p>
+
+        <h3>八、免责事由</h3>
+        <p>
+          1.除非爱丽恩严以书面形式明确约定，爱丽恩严对于用户以任何方式（包括但不限于包含、经
+          由、连接或下载）从爱丽恩严所获得的任何由商户发布的内容信息，包括但不限于商户信息、点
+          评内容等，不保证其准确性、完整性、可靠性。用户应当自行审核判断相关信息，并对于用户因
+          爱丽恩严上的内容信息而购买、获取的任何产品、服务、信息或资料自行承担责任和风险。用户
+          因此受损的，爱丽恩严在法律允许的最大范围内予以免责。爱丽恩严内所有用户所发表的用户
+          点评、商户或者产品信息等，仅代表用户个人观点，并不表示爱丽恩严赞同其观点或证实其描
+          述，爱丽恩严在法律允许的最大范围内予以免责。
+        </p>
+        <p>
+          2.您同意并理解，针对商户向您销售/提供的商品/服务，爱丽恩严并非您所购买的具体商品或者服务的生产者和销售者。您同意，针对该等商品或者服务以及相关售后服务中所产生的任何矛盾和纠纷均不应针对爱丽恩严提出。在法律允许的范围内，爱丽恩严不对上述商品/服务承担包括解释说明、赔偿在内的任何责任。
+        </p>
+        <p>
+          3.您在爱丽恩严平台上传、发布任何信息或者内容的，应当自行保留备份。爱丽恩严不对用户所发布信息的保存、修改、删除或储存失败负责，对爱丽恩严上的非因爱丽恩严故意所导致的排字错误、疏忽等不承担责任。爱丽恩严有权但无义务，改善或更正爱丽恩严任何部分之疏漏、错误。
+        </p>
+        <p>
+          4.您知悉爱丽恩严在其平台上所公布的各项排行榜单系根据用户真实评价、访问次数、浏览时长等数据自行生成，并无人工干预。该等榜单仅为您选择商品或服务提供参考，不涉及任何商户付费宣传，您应自行判断榜单中所列商品及服务的属性，爱丽恩严将不对此榜单中所列商品和服务做出任何形式的担保或保证。
+        </p>
+        <p>5.任何非经爱丽恩严正规渠道获得的中奖、优惠等活动或信息，爱丽恩严不承担法律责任。</p>
+        <p>
+          6.爱丽恩严因发现爱丽恩严上显现的团购、预订、消费买单等交易产品信息明显错误或缺货时，有权单方面作出修改，但该等修改不应视为爱丽恩严对您作出的任何承诺。
+        </p>
+        <p>
+          7.爱丽恩严有权在法律允许范围内，在不通知您的情况下删除任何用户发布的不符合本条款及各项服务规则、《用户协议》以及法律规定的信息。爱丽恩严将不对删除该等信息给您造成的不便或损失承担任何责任。
+        </p>
+        <p>
+          8.您同意，在法律许可范围内，爱丽恩严在任何情况下都不对任何个人或实体的直接、间接、偶然、特殊、惩罚性的损害或其他损害或损失承担责任，这些损害或损失包括但不限于：
+        </p>
+        <ul>
+          <li>（1）您理解并同意，由于互联网的特殊性造成的爱丽恩严显示的信息所存在的滞后性或差错，爱丽恩严对此不承担任何责任；</li>
+          <li>
+            （2）您在使用爱丽恩严服务中，因第三方原因使您遭受侮辱、诽谤、不作为、淫秽、色情或亵渎事件，爱丽恩严在法律允许的范围内不承担法律责任；
+          </li>
+          <li>（3）《用户协议》中规定其他不可抗力及免责事由。</li>
+        </ul>
+
+        <h3>九、管辖、法律适用与争议解决</h3>
+        <p>1.本协议的成立、生效、履行、解释与纠纷解决，适用中华人民共和国法律法规，并且排除一切冲突法规定的适用。</p>
+        <p>
+          2.您同意并理解，如您因通过爱丽恩严平台购买的任何商品或者服务产生任何纠纷的，爱丽恩严可在法律法规要求的范围内协助您与争议对方进行协商调解。您同意，爱丽恩严有权向争议双方了解情况，并将所了解的情况通过必要方式通知对方。但您理解并同意，爱丽恩严无任何义务对您与商家之间的任何争议承担任何责任。
+        </p>
+        <p>
+          3.您与爱丽恩严均应当严格履行本协议及其补充协议所约定的各项义务，如发生争议或者纠纷，双方可以友好协商解决；协商不成的，任何一方均可向本协议签订地有管辖权的法院提起诉讼。
+        </p>
+        <p>本协议签订地：大连市中山区。</p>
+
+        <h3>十、意见及反馈</h3>
+        <p>如您对本协议有任何问题或建议，请在工作时间联系爱丽恩严客服部门。联系方式如下：</p>
+        <ul>
+          <li>您可以通过网站（ailien.shop）/App上提供的在线联系方式/客服系统与我们联系；</li>
+        </ul>
+      </div>
+      <template #footer>
+        <div style=" display: flex; align-items: center; justify-content: center;width: 100%">
+          <el-button
+            @click="userShow = false"
+            style=" width: 406px; height: 60px; color: #ffffff;background-color: #6c8ff8; border-radius: 10px"
+          >
+            已阅读并同意协议内容
+          </el-button>
+        </div>
+      </template>
+    </el-dialog>
+    <el-dialog v-model="privacyShow">
+      <template #header>
+        <div>
+          <p style="display: flex; align-items: center; justify-content: center">《[U店在这] 隐私协议》</p>
+        </div>
+      </template>
+      <div style=" height: 50vh; padding: 10px; overflow-y: auto; font-size: 14px;line-height: 1.6">
+        <p />
+        <p>生效日期：2024 年 10 月 29 日</p>
+        <p>
+          欢迎使用[U店在这]！我们深知个人信息对您的重要性，并将竭尽全力保护您的隐私。本隐私协议旨在向您说明我们如何收集、使用、存储和保护您的个人信息，以及您对个人信息享有的权利。
+        </p>
+        <p>一、定义</p>
+        <p>
+          1.“个人信息”login
+          是指以电子或者其他方式记录的能够单独或者与其他信息结合识别特定自然人身份或者反映特定自然人活动情况的各种信息。
+        </p>
+        <p>2.“我们”、“本公司” 或 “[U店在这]” 指 [APP 所属公司名称]。</p>
+        <p>二、信息收集范围</p>
+        <p>3.您在注册、登录 [U店在这] 时提供的信息，包括但不限于用户名、密码、手机号码、电子邮箱等。</p>
+        <p>4.您在使用 [U店在这] 过程中产生的信息，如浏览记录、搜索记录、交易记录等。</p>
+        <p>5.我们从第三方获取的信息，如您通过第三方平台登录 [U店在这] 时，我们可能会获取您在该第三方平台上的部分信息。</p>
+        <p>三、信息使用目的</p>
+        <p>6.为您提供个性化的服务和内容，满足您的需求。</p>
+        <p>7.改善和优化 [U店在这] 的功能和体验。</p>
+        <p>8.进行数据分析和研究，以提升我们的服务质量和效率。</p>
+        <p>9.与您进行沟通和互动，回复您的咨询和反馈。</p>
+        <p>10.遵守法律法规的要求，履行我们的法律义务。</p>
+        <p>四、信息存储</p>
+        <p>11.我们将按照法律法规的要求，将您的个人信息存储在安全的服务器上。</p>
+        <p>12.我们会采取合理的技术和管理措施，确保您的个人信息的安全，防止其被未经授权的访问、披露、使用、修改或丢失。</p>
+        <p>
+          13.我们将根据您的使用情况和需求，确定个人信息的存储期限。在存储期限届满后，我们将对您的个人信息进行删除或匿名化处理。
+        </p>
+        <p>五、信息共享与披露</p>
+        <p>14.我们不会向第三方出售、出租或交易您的个人信息。</p>
+        <p>
+          15.我们可能会在以下情况下与第三方共享您的个人信息： 在获得您的明确同意后；
+          为了向您提供特定的服务，我们需要与第三方合作，此时我们会与该第三方签订保密协议，确保其按照本隐私协议的要求处理您的个人信息；
+          为了遵守法律法规的要求，履行我们的法律义务。
+        </p>
+        <p>
+          16.在以下情况下，我们可能会披露您的个人信息： 经您明确同意或授权； 根据法律法规的要求，向有权机关披露；
+          为了维护我们的合法权益，如在涉及诉讼、仲裁等法律程序时。
+        </p>
+        <p>六、您的权利</p>
+        <p>17.您有权访问、更正、删除您的个人信息。您可以通过 [U店在这] 的设置页面或联系我们的客服来行使这些权利。</p>
+        <p>18.您有权撤回您对我们处理您个人信息的同意。但请注意，撤回同意可能会影响您使用 [U店在这] 的部分功能。</p>
+        <p>19.您有权要求我们提供关于我们处理您个人信息的详细信息，包括处理目的、处理方式、处理的个人信息种类等。</p>
+        <p>
+          20.您有权要求我们限制对您个人信息的处理，例如在您认为我们处理您个人信息的行为违反法律法规的要求或您的合法权益受到侵害时。
+        </p>
+        <p>七、Cookie 和同类技术的使用</p>
+        <p>21.我们可能会使用 Cookie 和同类技术来收集和存储您的信息，以便为您提供更好的服务和体验。</p>
+        <p>
+          22.您可以通过设置浏览器的隐私设置来拒绝接受 Cookie 和同类技术。但请注意，拒绝接受 Cookie和同类技术可能会影响您使用
+          [U店在这] 的部分功能。
+        </p>
+        <p>八、未成年人保护</p>
+        <p>23.[U店在这] 不面向未成年人提供服务。如果您是未成年人，请不要使用 [U店在这]。</p>
+        <p>24.如果我们发现我们在未经授权的情况下收集了未成年人的个人信息，我们将立即采取措施删除该信息。</p>
+        <p>九、隐私政策的变更</p>
+        <p>25.我们可能会根据法律法规的要求、业务发展的需要或用户反馈等因素，对本隐私协议进行修订。</p>
+        <p>
+          26.修订后的隐私协议将在 [U店在这]上公布，并在公布后的特定时间生效。如果您在修订后的隐私协议生效后继续使用
+          [U店在这]，则视为您同意修订后的隐私协议。
+        </p>
+        <p>十、联系方式</p>
+        <p>如果您对本隐私协议有任何疑问、意见或建议，请通过以下方式与我们联系：</p>
+        <p>[爱丽恩（大连）贸易有限公司]</p>
+        <p>[辽宁省大连市中山区普照街44号国泰港汇中心一层F109-110、112-117、FGQ103号商铺]</p>
+        <p>[0411-81820856]</p>
+        <p>[15641179898@163.com]</p>
+        <p>我们将尽快回复您的咨询和反馈。</p>
+        <p>感谢您对 [U店在这]的信任和支持！</p>
+      </div>
+      <template #footer>
+        <div style=" display: flex; align-items: center; justify-content: center;width: 100%">
+          <el-button
+            @click="privacyShow = false"
+            style=" width: 406px; height: 60px; color: #ffffff;background-color: #6c8ff8; border-radius: 10px"
+          >
+            已阅读并同意协议内容
+          </el-button>
+        </div>
+      </template>
+    </el-dialog>
+    <el-dialog title="忘记密码" v-model="forgetShow" style="height: 55vh">
+      <el-form ref="forgetFormRef" :model="forgetForm" :rules="forgetRules" size="large" class="login-form-content">
+        <el-form-item prop="phone" label="手机号码" label-position="top">
+          <el-input v-model="forgetForm.phone" placeholder="请输入手机号码" maxlength="11" clearable />
+        </el-form-item>
+        <el-form-item prop="code" label="验证码" label-position="top">
+          <div class="code-wrapper">
+            <el-input v-model="forgetForm.code" placeholder="请输入验证码" maxlength="6" clearable class="code-input" />
+            <el-button :disabled="codeCountdown > 0" @click="sendForgotCode" class="code-button">
+              {{ codeCountdown > 0 ? `${codeCountdown}秒后重试` : "获取验证码" }}
+            </el-button>
+          </div>
+        </el-form-item>
+        <div
+          style="
+            margin-bottom: 10px;
+            font-family: Inter;
+            font-size: 20px;
+            font-style: normal;
+            font-weight: 400;
+            color: #000000;
+            text-align: left;
+            text-transform: none;
+          "
+        >
+          设置新密码
+        </div>
+        <el-form-item prop="newPassword" label="新密码" label-position="top">
+          <el-input
+            v-model="forgetForm.newPassword"
+            type="password"
+            placeholder="请输入新密码"
+            show-password
+            autocomplete="new-password"
+            clearable
+          />
+        </el-form-item>
+      </el-form>
+      <template #footer>
+        <div style="display: flex; align-items: center; justify-content: center">
+          <el-button
+            :loading="loading"
+            @click="handleForgotPasswordConfirm"
+            style=" width: 406px; height: 60px; color: #ffffff;background-color: #6c8ff8; border-radius: 10px"
+          >
+            确认
+          </el-button>
+        </div>
+      </template>
+    </el-dialog>
+    <el-dialog title="注册账号" v-model="registerShow" style="height: 65vh">
+      <el-form ref="registerFormRef" :model="registerForm" :rules="registerRules" size="large" class="login-form-content">
+        <el-form-item prop="phone" label="手机号码" label-position="top">
+          <el-input v-model="registerForm.phone" placeholder="请输入手机号码" maxlength="11" clearable />
+        </el-form-item>
+        <el-form-item prop="code" label="验证码" label-position="top">
+          <div class="code-wrapper">
+            <el-input v-model="registerForm.code" placeholder="请输入验证码" maxlength="6" clearable class="code-input" />
+            <el-button :disabled="codeCountdown > 0" @click="sendRegisterCode" class="code-button">
+              {{ codeCountdown > 0 ? `${codeCountdown}秒后重试` : "获取验证码" }}
+            </el-button>
+          </div>
+        </el-form-item>
+        <el-form-item prop="password" label="密码" label-position="top">
+          <el-input
+            v-model="registerForm.password"
+            type="password"
+            placeholder="请输入密码"
+            show-password
+            autocomplete="new-password"
+            clearable
+          />
+        </el-form-item>
+        <el-form-item prop="confirmPassword" label="确认密码" label-position="top">
+          <el-input
+            v-model="registerForm.confirmPassword"
+            type="password"
+            placeholder="请再次输入密码"
+            show-password
+            autocomplete="new-password"
+            clearable
+          />
+        </el-form-item>
+      </el-form>
+      <!-- 用户协议 -->
+      <div class="agreement-wrapper">
+        <el-checkbox v-model="registerAgreed" />
+        <span class="agreement-text">
+          我已阅读并同意
+          <span class="link-text" @click="handleUserAgreement">《用户协议》</span>
+          和
+          <span class="link-text" @click="handlePrivacyPolicy">《隐私政策》</span>
+        </span>
+      </div>
+      <template #footer>
+        <div style="display: flex; align-items: center; justify-content: center">
+          <el-button
+            @click="handleRegister"
+            style=" width: 406px; height: 60px; color: #ffffff;background-color: #6c8ff8; border-radius: 10px"
+          >
+            注册
+          </el-button>
+        </div>
+      </template>
+    </el-dialog>
   </div>
 </template>
 
 <script setup lang="ts" name="login">
-import LoginForm from "./components/LoginForm.vue";
-import SwitchDark from "@/components/SwitchDark/index.vue";
+import { ref, reactive, watch, onMounted, onBeforeUnmount } from "vue";
+import { useRoute, useRouter } from "vue-router";
+import { HOME_URL } from "@/config";
+import { Login } from "@/api/interface/index";
+import { ElMessage, ElNotification } from "element-plus";
+import { loginApi } from "@/api/modules/login";
+import { useUserStore } from "@/stores/modules/user";
+import { useTabsStore } from "@/stores/modules/tabs";
+import { useKeepAliveStore } from "@/stores/modules/keepAlive";
+import { initDynamicRouter } from "@/routers/modules/dynamicRouter";
+import type { ElForm } from "element-plus";
+import md5 from "md5";
+import {
+  forgetPassword,
+  getImgCode,
+  getPhoneCode,
+  loginAccount,
+  registerAccount,
+  registerCheck
+} from "@/api/modules/newLoginApi";
+
+const router = useRouter();
+const route = useRoute();
+const userStore = useUserStore();
+const tabsStore = useTabsStore();
+const keepAliveStore = useKeepAliveStore();
+const userShow = ref(false);
+const privacyShow = ref(false);
+const forgetShow = ref(false);
+const registerShow = ref(false);
+// 当前激活的标签
+const activeTab = ref<"password" | "code">("password");
+
+// 表单引用
+const passwordFormRef = ref<InstanceType<typeof ElForm>>();
+const codeFormRef = ref<InstanceType<typeof ElForm>>();
+const forgetFormRef = ref<InstanceType<typeof ElForm>>();
+const registerFormRef = ref<InstanceType<typeof ElForm>>();
+
+// 加载状态
+const loading = ref(false);
+
+// 用户协议同意状态
+const agreed = ref(false);
+
+// 密码登录表单
+const passwordForm = reactive({
+  phone: "",
+  password: "",
+  captcha: ""
+});
+
+const forgetForm = ref({
+  phone: "",
+  code: "",
+  newPassword: ""
+});
+
+// 注册表单
+const registerForm = reactive({
+  phone: "",
+  code: "",
+  password: "",
+  confirmPassword: ""
+});
+
+// 验证码登录表单
+const codeForm = reactive({
+  phone: "",
+  code: ""
+});
+
+// 图片验证码
+const captchaImage = ref("");
+
+// 验证码倒计时
+const codeCountdown = ref(0);
+let countdownTimer: NodeJS.Timeout | null = null;
+
+// 表单验证规则
+const passwordRules = reactive({
+  phone: [
+    { required: true, message: "请输入手机号", trigger: "blur" },
+    { pattern: /^1[3-9]\d{9}$/, message: "请输入正确的手机号码", trigger: "blur" }
+  ],
+  password: [{ required: true, message: "请输入密码", trigger: "blur" }],
+  captcha: [{ required: true, message: "请输入验证码", trigger: "blur" }]
+});
+
+const codeRules = reactive({
+  phone: [
+    { required: true, message: "请输入手机号", trigger: "blur" },
+    { pattern: /^1[3-9]\d{9}$/, message: "请输入正确的手机号码", trigger: "blur" }
+  ],
+  code: [{ required: true, message: "请输入验证码", trigger: "blur" }]
+});
+// 密码验证函数
+const validatePassword = (rule: any, value: string, callback: any) => {
+  if (!value) {
+    callback(new Error("请输入密码"));
+    return;
+  }
+  if (value.length < 6 || value.length > 16) {
+    callback(new Error("密码长度为6-16位，密码必须包含字母和数字"));
+    return;
+  }
+  if (!/^(?=.*[a-zA-Z])(?=.*\d).+$/.test(value)) {
+    callback(new Error("密码长度为6-16位，密码必须包含字母和数字"));
+    return;
+  }
+  callback();
+};
+
+const forgetRules = ref({
+  phone: [
+    { required: true, message: "请输入手机号", trigger: "blur" },
+    { pattern: /^1[3-9]\d{9}$/, message: "请输入正确的手机号码", trigger: "blur" }
+  ],
+  code: [{ required: true, message: "请输入验证码", trigger: "blur" }],
+  newPassword: [
+    { required: true, message: "请输入新密码", trigger: "blur" },
+    { validator: validatePassword, trigger: "blur" }
+  ]
+});
+
+// 注册表单验证规则
+const registerRules = reactive({
+  phone: [
+    { required: true, message: "请输入手机号", trigger: "blur" },
+    { pattern: /^1[3-9]\d{9}$/, message: "请输入正确的手机号码", trigger: "blur" }
+  ],
+  code: [{ required: true, message: "请输入验证码", trigger: "blur" }],
+  password: [
+    { required: true, message: "请输入密码", trigger: "blur" },
+    { validator: validatePassword, trigger: "blur" }
+  ],
+  confirmPassword: [
+    { required: true, message: "请确认密码", trigger: "blur" },
+    {
+      validator: (rule: any, value: string, callback: any) => {
+        if (!value) {
+          callback(new Error("请确认密码"));
+          return;
+        }
+        if (value !== registerForm.password) {
+          callback(new Error("两次输入的密码不一致"));
+        } else {
+          callback();
+        }
+      },
+      trigger: "blur"
+    }
+  ]
+});
+
+// 注册协议同意状态
+const registerAgreed = ref(false);
+// 刷新图片验证码
+const refreshCaptcha = async () => {
+  captchaImage.value = "";
+  let res: any = await getImgCode();
+  const blobUrl = URL.createObjectURL(res);
+  captchaImage.value = blobUrl;
+};
+// 发送忘记密码验证码
+const sendForgotCode = async () => {
+  if (!forgetForm.value.phone) {
+    ElMessage.warning("请先输入手机号");
+    return;
+  }
+  if (!/^1[3-9]\d{9}$/.test(forgetForm.value.phone)) {
+    ElMessage.warning("请输入正确的手机号码");
+    return;
+  }
+
+  let phoneCode: any = await getPhoneCode({ phone: forgetForm.value.phone, appType: "2", businessType: "6" });
+  if (phoneCode.code === 200) {
+    ElMessage.success("验证码已发送");
+    // 开始倒计时
+    codeCountdown.value = 60;
+    countdownTimer = setInterval(() => {
+      codeCountdown.value--;
+      if (codeCountdown.value <= 0) {
+        if (countdownTimer) {
+          clearInterval(countdownTimer);
+          countdownTimer = null;
+        }
+      }
+    }, 1000);
+  }
+};
+
+// 发送短信验证码
+const sendLoginCode = async () => {
+  if (!codeForm.phone) {
+    ElMessage.warning("请先输入手机号");
+    return;
+  }
+  if (!/^1[3-9]\d{9}$/.test(codeForm.phone)) {
+    ElMessage.warning("请输入正确的手机号码");
+    return;
+  }
+
+  let phoneCode: any = await getPhoneCode({ phone: codeForm.phone, appType: "2", businessType: "0" });
+  if (phoneCode.code === 200) {
+    ElMessage.success("验证码已发送");
+    // 开始倒计时
+    codeCountdown.value = 60;
+    countdownTimer = setInterval(() => {
+      codeCountdown.value--;
+      if (codeCountdown.value <= 0) {
+        if (countdownTimer) {
+          clearInterval(countdownTimer);
+          countdownTimer = null;
+        }
+      }
+    }, 1000);
+  }
+};
+
+// 发送注册验证码
+const sendRegisterCode = async () => {
+  if (!registerForm.phone) {
+    ElMessage.warning("请先输入手机号");
+    return;
+  }
+  if (!/^1[3-9]\d{9}$/.test(registerForm.phone)) {
+    ElMessage.warning("请输入正确的手机号码");
+    return;
+  }
+  let checkRes = await registerCheck({ phone: registerForm.phone });
+  console.log(checkRes.data, "checkRes.data");
+  if (!checkRes.data) {
+    ElMessage.warning("该账号已注册");
+    return;
+  }
+  let phoneCode: any = await getPhoneCode({ phone: registerForm.phone, appType: "2", businessType: "2" });
+  if (phoneCode.code === 200) {
+    console.log(phoneCode, "phoneCode");
+    ElMessage.success("验证码已发送");
+    // 开始倒计时
+    codeCountdown.value = 60;
+    countdownTimer = setInterval(() => {
+      codeCountdown.value--;
+      if (codeCountdown.value <= 0) {
+        if (countdownTimer) {
+          clearInterval(countdownTimer);
+          countdownTimer = null;
+        }
+      }
+    }, 1000);
+  }
+};
+
+// 登录处理
+const handleLogin = async () => {
+  if (!agreed.value) {
+    ElMessage.warning("请先同意用户协议和隐私政策");
+    return;
+  }
+
+  let formRef: InstanceType<typeof ElForm> | undefined;
+  let formData: any = {};
+
+  if (activeTab.value === "password") {
+    formRef = passwordFormRef.value;
+    formData = {
+      phone: passwordForm.phone,
+      password: passwordForm.password,
+      captcha: passwordForm.captcha,
+      // code:'',
+      isPassword: true
+    };
+  } else {
+    formRef = codeFormRef.value;
+    formData = {
+      phone: codeForm.phone,
+      code: codeForm.code,
+      isPassword: false
+    };
+  }
+
+  if (!formRef) return;
+
+  await formRef.validate(async valid => {
+    if (!valid) return;
+
+    loading.value = true;
+    try {
+      let loginParams: any;
+
+      const res: any = await loginAccount(formData);
+
+      if (res.data) {
+        userStore.setToken(res.data.token);
+        await initDynamicRouter();
+
+        // 3.清空 tabs、keepAlive 数据
+        await tabsStore.setTabs([]);
+        await keepAliveStore.setKeepAliveName([]);
+        console.log("调整");
+        console.log(router.getRoutes(), route);
+        // 4.跳转到首页
+        router.push(HOME_URL);
+
+        ElNotification({
+          title: "登录成功",
+          type: "success",
+          duration: 3000
+        });
+      } else {
+        ElNotification({
+          title: "登录失败，请检查账号和密码",
+          type: "error",
+          duration: 3000
+        });
+      }
+    } catch (error: any) {
+      ElNotification({
+        title: error?.msg || "登录失败，请稍后重试",
+        type: "error",
+        duration: 3000
+      });
+    } finally {
+      loading.value = false;
+    }
+  });
+};
+
+// 忘记密码
+const handleForgotPassword = () => {
+  forgetShow.value = true;
+};
+// 忘记密码提交
+const handleForgotPasswordConfirm = async () => {
+  if (!forgetFormRef.value) return;
+
+  await forgetFormRef.value.validate(async valid => {
+    if (!valid) return;
+
+    loading.value = true;
+    try {
+      let resForget: any = await forgetPassword({
+        phone: forgetForm.value.phone,
+        verificationCode: forgetForm.value.code,
+        type: "0",
+        newPassword: forgetForm.value.newPassword
+      });
+
+      if (resForget.code === 200) {
+        ElNotification({
+          title: "修改成功",
+          type: "success",
+          duration: 3000
+        });
+        forgetShow.value = false;
+
+        // 重置表单
+        if (forgetFormRef.value) {
+          forgetFormRef.value.resetFields();
+        }
+      } else {
+        ElNotification({
+          title: resForget.msg || "修改失败，请稍后重试",
+          type: "error",
+          duration: 3000
+        });
+      }
+    } catch (error: any) {
+      ElNotification({
+        title: error?.msg || "修改失败，请稍后重试",
+        type: "error",
+        duration: 3000
+      });
+    } finally {
+      loading.value = false;
+    }
+  });
+};
+
+// 打开注册弹窗
+const openRegister = () => {
+  registerShow.value = true;
+};
+
+// 注册提交
+const handleRegister = async () => {
+  if (!registerAgreed.value) {
+    ElMessage.warning("请先同意用户协议和隐私政策");
+    return;
+  }
+
+  if (!registerFormRef.value) return;
+
+  await registerFormRef.value.validate(async valid => {
+    if (!valid) return;
+
+    loading.value = true;
+    try {
+      // TODO: 调用注册接口
+      const registerParams = {
+        phone: registerForm.phone,
+        code: registerForm.code,
+        // password: md5(registerForm.password)
+        password: registerForm.password
+      };
+      let res: any = await registerAccount(registerParams);
+      if (res.code === 200) {
+        ElNotification({
+          title: "注册成功",
+          type: "success",
+          duration: 3000
+        });
+
+        // 注册成功后关闭弹窗
+        registerShow.value = false;
+
+        // 重置表单
+        if (registerFormRef.value) {
+          registerFormRef.value.resetFields();
+        }
+        registerAgreed.value = false;
+      }
+    } catch (error: any) {
+      ElNotification({
+        title: error?.msg || "注册失败，请稍后重试",
+        type: "error",
+        duration: 3000
+      });
+    } finally {
+      loading.value = false;
+    }
+  });
+};
+
+// 用户协议
+const handleUserAgreement = () => {
+  ElMessage.info("用户协议");
+  userShow.value = true;
+};
+
+// 隐私政策
+const handlePrivacyPolicy = () => {
+  ElMessage.info("隐私政策");
+  privacyShow.value = true;
+};
+
+// 切换登录方式时重置表单
+const resetForms = () => {
+  if (passwordFormRef.value) {
+    passwordFormRef.value.resetFields();
+  }
+  if (codeFormRef.value) {
+    codeFormRef.value.resetFields();
+  }
+  captchaImage.value = "";
+  codeCountdown.value = 0;
+  if (countdownTimer) {
+    clearInterval(countdownTimer);
+    countdownTimer = null;
+  }
+};
+
+// 监听标签切换
+watch(
+  () => activeTab.value,
+  () => {
+    resetForms();
+  }
+);
+
+// 监听注册表单密码变化，重新验证确认密码
+watch(
+  () => registerForm.password,
+  () => {
+    if (registerFormRef.value && registerForm.confirmPassword) {
+      registerFormRef.value.validateField("confirmPassword");
+    }
+  }
+);
+
+onMounted(() => {
+  if (activeTab.value === "password") {
+    refreshCaptcha();
+  }
+
+  document.onkeydown = (e: KeyboardEvent) => {
+    if (e.code === "Enter" || e.code === "enter" || e.code === "NumpadEnter") {
+      if (loading.value) return;
+      handleLogin();
+    }
+  };
+});
+
+onBeforeUnmount(() => {
+  document.onkeydown = null;
+  if (countdownTimer) {
+    clearInterval(countdownTimer);
+  }
+});
 </script>
 
 <style scoped lang="scss">
-@import "./index";
+.login-bg {
+  position: relative;
+  width: 100%;
+  height: 100%;
+  background: url("../../assets/login/bg.jpg");
+  background-repeat: no-repeat;
+  background-position: center;
+  background-size: cover;
+}
+.left-box {
+  .left-box-title {
+    position: absolute;
+    top: 201px;
+    left: 290px;
+    display: flex;
+    flex-flow: column;
+    justify-content: center;
+    .left-box-title-text {
+      margin-left: 10px;
+      font-family: Inter;
+      font-size: 30px;
+      font-weight: 700;
+      line-height: 100%;
+    }
+    .left-box-title-bottom-text {
+      margin-top: 20px;
+      font-family: Inter;
+      font-size: 36px;
+      font-weight: 300;
+      line-height: 100%;
+      color: #8b8b8b;
+    }
+  }
+  .login-class {
+    position: absolute;
+    top: 336px;
+    left: 328px;
+    width: 686px;
+    height: 585px;
+  }
+  .qrcode-box {
+    position: absolute;
+    top: 626px;
+    left: 282px;
+    display: flex;
+    flex-flow: column;
+    align-items: center;
+    justify-content: center;
+    width: 178px;
+    height: 238px;
+    background-color: #ffffff;
+    border-radius: 20px;
+    .qrcode-box-text {
+      margin-top: 10px;
+      font-family: Inter;
+      font-size: 16px;
+      font-weight: 400;
+      line-height: 100%;
+      color: #979797;
+      text-align: center;
+    }
+  }
+}
+.right-box {
+  position: absolute;
+  top: 154px;
+  left: 1071px;
+  box-sizing: border-box;
+  display: flex;
+  flex-direction: column;
+  width: 546px;
+  height: 759px;
+  padding: 50px 40px;
+  background-color: #ffffff;
+  border-radius: 20px;
+  box-shadow: 0 4px 20px 0 rgb(0 0 0 / 8%);
+  .right-box-title {
+    display: flex;
+    gap: 8px;
+    align-items: center;
+    justify-content: center;
+    margin-bottom: 30px;
+    font-family: Inter;
+    font-size: 26px;
+    font-style: normal;
+    font-weight: 400;
+    color: #151515;
+    text-align: center;
+    text-transform: none;
+  }
+  .login-tabs {
+    :deep(.el-tabs__header) {
+      width: fit-content;
+      margin: 0 auto;
+    }
+    :deep(.el-tabs__content) {
+      padding-top: 38px;
+    }
+    :deep(.el-tabs__nav-wrap::after) {
+      background-color: #e4e7ed;
+    }
+    :deep(.el-tabs__item) {
+      padding: 12px 24px;
+      font-size: 16px;
+      color: #606266;
+      &.is-active {
+        font-weight: 700;
+        color: #000000;
+      }
+      &:hover {
+        color: #606266;
+      }
+    }
+    :deep(.el-tabs__active-bar) {
+      background-color: #6c8ff8;
+    }
+  }
+  .login-button {
+    width: 100%;
+    height: 44px;
+    margin-top: 10px;
+    font-size: 16px;
+  }
+  :deep(.login-button.el-button--primary) {
+    background-color: #6c8ff8;
+    border-color: #6c8ff8;
+    &:hover {
+      background-color: #5a7de8;
+      border-color: #5a7de8;
+    }
+    &:active {
+      background-color: #4a6dd8;
+      border-color: #4a6dd8;
+    }
+  }
+  .form-footer {
+    display: flex;
+    justify-content: space-between;
+    margin-top: 20px;
+    font-size: 14px;
+    .link-text {
+      color: #409eff;
+      cursor: pointer;
+      &:hover {
+        text-decoration: underline;
+      }
+    }
+  }
+}
+.login-form-content {
+  :deep(.el-form-item) {
+    margin-bottom: 20px;
+  }
+  :deep(.el-form-item__label) {
+    height: 19px;
+    margin-bottom: 10px;
+    font-family: Inter;
+    font-size: 16px;
+    font-style: normal;
+    font-weight: 400;
+    color: #000000;
+    text-align: left;
+    text-transform: none;
+    &::before {
+      display: none;
+    }
+  }
+  :deep(.el-input__wrapper) {
+    padding: 12px 15px;
+    border: 1px solid #d0d3d6;
+    border-radius: 10px;
+  }
+}
+.captcha-wrapper {
+  display: flex;
+  gap: 10px;
+  width: 100%;
+  .captcha-input {
+    flex: 1;
+  }
+  .captcha-image {
+    display: flex;
+    flex-shrink: 0;
+    align-items: center;
+    justify-content: center;
+    width: 120px;
+    height: 40px;
+    cursor: pointer;
+    background-color: #f5f7fa;
+    border: 1px solid #dcdfe6;
+    border-radius: 4px;
+    img {
+      width: 100%;
+      height: 100%;
+      object-fit: contain;
+    }
+    .captcha-placeholder {
+      font-size: 12px;
+      color: #909399;
+    }
+  }
+}
+.code-wrapper {
+  display: flex;
+  gap: 10px;
+  align-items: center;
+  width: 100%;
+  .code-input {
+    flex: 1;
+  }
+  .code-button {
+    flex-shrink: 0;
+    white-space: nowrap;
+  }
+}
+.agreement-wrapper {
+  display: flex;
+  align-items: center;
+
+  // justify-content: center;
+  margin-top: 20px;
+  font-size: 14px;
+  color: #606266;
+  :deep(.el-checkbox) {
+    margin-right: 8px;
+  }
+  .agreement-text {
+    .link-text {
+      color: #409eff;
+      cursor: pointer;
+      &:hover {
+        text-decoration: underline;
+      }
+    }
+  }
+}
 </style>