feat: 登录页面

src/api/all/login.ts

@@ -1,20 +1,16 @@
 import Http from '@/api';
 
-
 // 导出一个函数，用于获取登录验证码
 export const fetchLoginCaptCha = (params = {}) => {
-
   return Http.post('/v1/sms/login-captcha', params);
 };
 
-
 // 导出一个函数，用于获取验证码
 export const fetchAuthorizationsCaptcha = (params = {}) => {
   // 使用Http.post方法，发送POST请求，请求地址为'/v1/authorizations/captcha'，请求参数为params
   return Http.post('/v1/authorizations/captcha', params);
 };
 
-
 // 导出一个函数，用于获取授权信息
 export const fetchAuthorizations = (params = {}) => {
   // 使用Http.put方法，向服务器发送PUT请求，获取授权信息
@@ -27,22 +23,18 @@ export const fetchLogOut = (params = {}) => {
   return Http.put('/v1/authorizations', params);
 };
 
-
 // 导出一个名为fetchProfileInfo的函数，用于获取用户信息
 export const fetchProfileInfo = (params = {}) => {
   // 使用Http.put方法，向/v1/me接口发送put请求，并将params作为参数传递
   return Http.put('/v1/me', params);
 };
 
-
 // 导出一个函数，用于获取编辑手机号的验证码
 export const fetchEditPhoneCaptcha = (params = {}) => {
   // 使用Http.put方法，向服务器发送PUT请求，获取编辑手机号的验证码
   return Http.put('/v1/sms/update-mobile-captcha', params);
 };
 
-
 export const fetchBindPhone = (params = {}) => {
   return Http.put('/v1/me/mobile', params);
 };
-

src/api/index.ts

@@ -1,32 +1,46 @@
 /*
  * @Author: 田鑫
  * @Date: 2023-02-17 11:58:44
- * @LastEditors: 田鑫
+ * @LastEditors: Please set LastEditors
- * @LastEditTime: 2023-03-05 19:17:29
+ * @LastEditTime: 2025-06-20 06:00:54
  * @Description:
  */
 
 import axios from 'axios';
 import type { AxiosInstance, AxiosRequestConfig, AxiosResponse } from 'axios';
+import { handleUserLogout } from '@/utils/user';
+
+const contentType = 'application/json';
+const requestTimeout = 30000;
+
+const HttpStatusCode = {
+  OK: 200,
+  BadRequest: 400, // 请求参数错误
+  Unauthorized: 401, // token 无效或过期
+  NotFound: 404,
+  InternalServerError: 500,
+};
 
 //* 导出Request类，可以用来自定义传递配置来创建实例
 export class Request {
   //* axios 实例
   private instance: AxiosInstance;
   //* 基础配置
-  private baseConfig: AxiosRequestConfig = { baseURL: import.meta.env.EO_API_URL, timeout: 60000 };
+  private baseConfig: AxiosRequestConfig = {
+    baseURL: import.meta.env.EO_API_URL,
+    timeout: requestTimeout,
+    headers: {
+      'Content-Type': contentType,
+    },
+  };
 
   public constructor(config: AxiosRequestConfig) {
     this.instance = axios.create(Object.assign(this.baseConfig, config));
 
     this.instance.interceptors.request.use(
       (config: AxiosRequestConfig) => {
-        const token = localStorage.getItem('token') as string;
+        const token = localStorage.getItem('accessToken') as string;
-        if (token) {
         config.headers!.Authorization = token;
-        } else {
-          config.headers!.satoken = '123';
-        }
         return config;
       },
       (err: any) => {
@@ -36,21 +50,17 @@ export class Request {
 
     this.instance.interceptors.response.use(
       (res: AxiosResponse) => {
-        //* http请求成功
+        const { data } = res;
-        //* 存入通用response header
+        switch (data.code) {
-        let tenanttype = localStorage.getItem('tenanttype') as string;
+          case HttpStatusCode.OK:
-        if (!tenanttype) {
+            return data;
-          tenanttype = res.headers!.tenanttype;
+          default:
-          localStorage.setItem('tenanttype', tenanttype);
+            return Promise.reject(data);
         }
-        if (res.data.code === 200) {
-          return res.data.data;
-        }
-        AMessage.error(res.data!.msg);
-        return Promise.reject(res.data);
       },
       (err: any) => {
-        // AMessage.error(err.message);
+        const message = err.response?.data?.message ?? err.message;
+        AMessage.error(message);
         // 这里用来处理http常见错误，进行全局提示
         return Promise.reject(err.response);
       },

src/components/_base/navbar/index.vue

@@ -2,10 +2,11 @@
 import { useAppStore } from '@/stores';
 import { IconExport, IconFile, IconCaretDown } from '@arco-design/web-vue/es/icon';
 import { fetchMenusTree } from '@/api/all';
+import { handleUserLogout } from '@/utils/user';
 const lists = ref([]);
 const router = useRouter();
 const clickExit = () => {
-  router.replace('/login');
+  handleUserLogout();
 };
 const getMenus = async () => {
   const res = await fetchMenusTree();
@@ -16,7 +17,6 @@ onMounted(() => {
 });
 const appStore = useAppStore();
 
-
 function setServerMenu() {
   appStore.fetchServerMenuConfig();
   console.log(appStore.serverMenu);
@@ -59,7 +59,7 @@ const handleDopdownClick = (index: any, ind: any) => {
     <div class="center-side">
       <div class="menu-demo">
         <a-menu mode="horizontal" :default-selected-keys="['1']">
-          <a-menu-item :key="'1'" @click="handleSelect(0)">
+          <a-menu-item key="1" @click="handleSelect(0)">
             <view>工作台</view>
           </a-menu-item>
           <a-menu-item v-for="(item, index) in lists" :key="index + 2">

src/router/index.ts

@@ -1,8 +1,8 @@
 /*
  * @Author: 田鑫
  * @Date: 2023-03-05 18:14:17
- * @LastEditors: 田鑫
+ * @LastEditors: Please set LastEditors
- * @LastEditTime: 2023-03-05 19:20:40
+ * @LastEditTime: 2025-06-20 05:35:27
  * @Description:
  */
 import { createRouter, createWebHistory } from 'vue-router';
@@ -20,7 +20,7 @@ const router = createRouter({
   routes: [
     {
       path: '/login',
-      name: 'login',
+      name: 'UserLogin',
       component: () => import('@/views/components/login'),
     },
     {
@@ -30,7 +30,7 @@ const router = createRouter({
     },
     {
       path: '/',
-      name: 'dataEngine',
+      name: 'Home',
       redirect: '/dataEngine/dataEngine/hotTranslation',
       children: [...appRoutes, REDIRECT_MAIN, NOT_FOUND_ROUTE],
     },

src/stores/index.ts

@@ -1,5 +1,10 @@
-const pinia = createPinia();
+/*
+ * @Author: RenXiaoDong
+ * @Date: 2025-06-19 01:45:53
+ */
+import { createPinia } from 'pinia';
+const store = createPinia();
 
-export default pinia;
+export default store;
 
 export * from './modules';

src/stores/modules/app/index.ts

@@ -1,3 +1,4 @@
+import { defineStore } from 'pinia';
 import type { AppState, RouteRecordNormalized, NotificationReturn } from './types';
 
 import defaultSettings from '@/config/settings.json';

src/stores/modules/tab-bar/index.ts

@@ -1,3 +1,8 @@
+/*
+ * @Author: RenXiaoDong
+ * @Date: 2025-06-19 01:45:53
+ */
+import { defineStore } from 'pinia';
 import type { TabBarState, TagProps, RouteLocationNormalized } from './types';
 
 import { DEFAULT_ROUTE, DEFAULT_ROUTE_NAME, REDIRECT_ROUTE_NAME } from '@/router/constants';

src/stores/modules/user/index.ts

@@ -1,46 +1,29 @@
-/*
+import { defineStore } from 'pinia';
- * @Author: 田鑫
- * @Date: 2023-03-05 14:57:17
- * @LastEditors: 田鑫
- * @LastEditTime: 2023-03-05 15:29:15
- * @Description: 用户相关状态
- */
-
-type Role = 'ENTERPRISE' | 'PERSON';
 
 interface UserState {
-  role: Role;
+  token: String;
-  isLogin: boolean;
 }
 
 export const useUserStore = defineStore('user', {
   state: (): UserState => ({
-    role: 'PERSON',
+    token: localStorage.getItem('accessToken') || '',
-    isLogin: false,
   }),
 
-  getters: {
+  getters: {},
-    userRole(state) {
-      return state.role;
-    },
-    userIsLogin(state) {
-      return state.isLogin;
-    },
-  },
 
   actions: {
-    setUserRole(role: Role) {
+    setToken(token: String) {
-      this.role = role;
+      const _token = `Bearer ${token}`;
+      this.token = _token;
+      localStorage.setItem('accessToken', _token);
     },
-
+    deleteToken() {
-    setUserLoginStatus(isLogin: boolean) {
+      this.token = '';
-      this.isLogin = isLogin;
+      localStorage.removeItem('accessToken');
     },
-
     async getUserInfo() {
       // todo 调用获取用户信息接口，当前用mock数据表示
-      AMessage.success(`当前用户角色为：ENTERPRISE`)
+      // AMessage.success(`当前用户角色为：ENTERPRISE`);
-      this.setUserRole('ENTERPRISE');
     },
   },
 });

src/utils/user.ts

@@ -0,0 +1,29 @@
+/*
+ * @Author: RenXiaoDong
+ * @Date: 2025-06-20 05:32:19
+ */
+import router from '@/router';
+
+import { useUserStore } from '@/stores';
+
+// 登录
+export function goUserLogin(query?: any) {
+  router.push({ name: 'UserLogin', query });
+}
+
+// 登录处理
+export async function handleUserLogin() {
+  handleUserHome();
+}
+
+// 首页
+export function handleUserHome() {
+  router.push({ name: 'Home' });
+}
+
+export function handleUserLogout() {
+  const userStore = useUserStore();
+  userStore.deleteToken();
+
+  goUserLogin();
+}

src/views/components/login/index.vue

@@ -1,56 +1,49 @@
+<!-- eslint-disable vue/no-duplicate-attributes -->
 <template>
-  <div class="content">
+  <div
-    <img src="@/assets/img/Frame.svg" alt="" style="width: 480px; height: 480px; margin-right: 160px" />
+    class="relative w-100vw h-100vh min-h-175 flex justify-center items-center bg-cover bg-center bg-#f0edff login-wrap"
+  >
+    <section class="login-bg"></section>
+    <section class="relative flex justify-between w-1200 h-100% my-0 mx-auto">
+      <div class="flex flex-col justify-center flex-column h-100% mt--12.5">
+        <img src="@/assets/img/Frame.svg" class="w-480 h-480 mr-40" alt="" />
+      </div>
+      <div class="flex items-center w-400 h-100%">
         <a-space
           direction="vertical"
           size="large"
-      style="width: 400px; height: 480px; background-color: #fff; border-radius: 8px; margin-top: 40px"
           align="center"
+          class="w-400 bg-#fff rounded-8px shadow-[0_4px_10px_0_#6D4CFE33] px-40px py-48px"
         >
-      <img src="@/assets/img/LOGO.svg" alt="" style="width: 155px; height: 37px; margin-top: 49px" />
+          <img src="@/assets/img/LOGO.svg" alt="" class="w-155 h-37 mb-8px" />
-      <span style="font-size: 16px; color: #737478">AI营销工具</span>
+          <span class="text-4 color-#737478">AI营销工具</span>
-      <a-form
+          <a-form ref="formRef" :model="loginForm" :rules="formRules" auto-label-width class="w-320 mt-48px form-wrap">
-        ref="formRef"
+            <a-form-item field="mobile" hide-label>
-        :model="loginForm"
-        :rules="formRules"
-        auto-label-width
-        style="width: 320px; margin-top: 20px"
-      >
-        <a-form-item field="username" hide-label>
               <a-input
-            v-model="loginForm.username"
+                v-model="loginForm.mobile"
                 placeholder="输入手机号"
-            class="form-input"
+                class="form-input border border-solid border-#d7d7d9 rounded-8px w-100% h-48px text-14 rounded-4px color-#333 bg-#fff"
-            style="margin-top: 48px; border-radius: 8px"
                 clearable
-            @blur="validateField('username')"
-            @input="clearError('username')"
                 allow-clear
+                @blur="validateField('mobile')"
+                @input="clearError('mobile')"
               />
             </a-form-item>
-        <a-form-item field="code" hide-label>
+            <a-form-item field="captcha" hide-label>
               <div
-            class="form-input"
+                class="form-input border border-solid border-#d7d7d9 rounded-8px w-100% h-48px text-14 rounded-4px color-#333 bg-#fff flex justify-between items-center rounded-8px"
-            style="display: flex; justify-content: space-between; align-items: center; border-radius: 8px"
               >
                 <a-input
-              v-model="loginForm.code"
+                  v-model="loginForm.captcha"
                   placeholder="验证码"
                   style="background-color: #fff; border: none"
-              @blur="validateField('code')"
-              @input="clearError('code')"
                   allow-clear
                   maxlength="6"
+                  @blur="validateField('captcha')"
+                  @input="clearError('captcha')"
                 />
                 <span
-              style="
+                  class="w-120 font-400 text-right mr-4 text-16px"
-                font-size: 16px;
-                font-weight: 400;
-                text-align: center;
-                margin-right: 16px;
-                width: 120px;
-                text-align: right;
-              "
                   :style="{
                     color: countdown > 0 || hasGetCode ? '#6D4CFE' : '#211F24',
                     cursor: countdown > 0 ? 'not-allowed' : 'pointer',
@@ -60,49 +53,47 @@
                 >
               </div>
             </a-form-item>
-        <a-form-item hide-label>
+            <a-form-item hide-label class="mt-68px mb-16px">
               <div
                 type="primary"
-            style="
+                class="w-480 h-48 text-16px rounded-8px text-center text-white leading-48px"
-              width: 480px;
+                :class="disabledSubmitBtn ? 'cursor-no-drop' : 'cursor-pointer'"
-              height: 48px;
+                :style="{ backgroundColor: disabledSubmitBtn ? '#C5B7FF' : '#6D4CFE' }"
-              font-size: 16px;
+                :disabled="disabledSubmitBtn"
-              border-radius: 8px;
-              color: #fff;
-              text-align: center;
-              line-height: 48px;
-            "
-            :style="{ backgroundColor: isFormValid && hasCheck ? '#6D4CFE' : '#C5B7FF' }"
                 @click="handleSubmit"
-            :disabled="!isFormValid || !hasCheck"
               >
                 {{ isLogin ? '登录' : '注册并开通企业账号' }}
               </div>
             </a-form-item>
           </a-form>
-      <a-space style="margin-top: 16px; color: #737478; font-size: 12px">
+          <a-space class="text-12px color-#737478 justify-start items-center">
-        <a-checkbox v-model="hasCheck" style="margin-right: 0px; font-size: 12px"
+            <a-checkbox v-model="hasCheck" class="!text-12px mr-8px"></a-checkbox>
-          >{{ isLogin ? '登录' : '注册' }}即代表同意</a-checkbox
+            <span class="text-12px color-#737478">{{ isLogin ? '登录' : '注册' }}即代表同意</span>
-        >
+            <a-link href="link" class="form-link color-#211F24" target="_blank">用户协议</a-link>
-        <a-link href="link" class="form-link" target="_blank">用户协议</a-link>
+            <span class="text-12px color-#737478">和</span>
-        <span>和</span>
+            <a-link href="link" class="form-link color-#211f24" target="_blank">隐私政策</a-link>
-        <a-link href="link" class="form-link" target="_blank">隐私政策</a-link>
           </a-space>
         </a-space>
       </div>
+    </section>
+
+    <section class="login-footer">
+      <p class="text">闽公网安备 352018502850842号 闽ICP备20250520582号 © 2025小题科技</p>
+    </section>
+  </div>
   <PuzzleVerification
     :show="isVerificationVisible"
     @submit="handleVerificationSubmit"
     @cancel="isVerificationVisible = false"
   />
-  <a-modal :visible="visible" @ok="handleOk" @cancel="handleCancel" unmountOnClose hide-cancel>
+  <a-modal :visible="visible" unmountOnClose hide-cancel @ok="handleOk" @cancel="handleCancel">
     <template #title>
       <span style="text-align: left; width: 100%">选择账号</span>
     </template>
     <div class="account-bind-container">
       <a-card :bordered="false" class="bind-card">
         <div class="bind-header">
-          <a-typography-text class="phone-number">{{ phoneNumber }} 已在以下企业绑定了账号</a-typography-text>
+          <a-typography-text class="mobile-number">{{ mobileNumber }} 已在以下企业绑定了账号</a-typography-text>
         </div>
 
         <a-list :bordered="false" :split="false" class="account-list">
@@ -116,7 +107,7 @@
             <a-list-item-meta>
               <template #title>
                 <div style="display: flex; align-items: center; gap: 12px">
-                  <a-checkbox :model-value="selectedAccount == index" />
+                  <a-checkbox :model-value="selectedAccount === index" />
                   <a-typography-text>{{ account.name }}</a-typography-text>
                 </div>
               </template>
@@ -129,35 +120,36 @@
 </template>
 
 <script setup lang="ts">
-import PuzzleVerification from './PuzzleVerification.vue';
+import PuzzleVerification from './components/PuzzleVerification.vue';
-import { fetchLoginCaptCha } from '@/api/all/login';
+import { fetchLoginCaptCha, fetchAuthorizationsCaptcha } from '@/api/all/login';
 import { ref, reactive, onUnmounted, computed } from 'vue';
-import { Message } from '@arco-design/web-vue';
+import { useUserStore } from '@/stores';
+import { handleUserLogin } from '@/utils/user';
 import router from '@/router';
-const $message = Message;
 
 const formRef = ref();
+const userStore = useUserStore();
 const countdown = ref(0);
 let timer = ref();
-const isLogin = ref(false);
+const isLogin = ref(true);
 const isVerificationVisible = ref(false);
 const visible = ref(false);
 const hasGetCode = ref(false);
 const submitting = ref(false);
 const hasCheck = ref(false);
-const phoneNumber = ref('13616544933');
+const mobileNumber = ref('13616544933');
 const selectedAccount = ref(0);
 
 const accounts = ref([{ name: '灵机用户291094' }, { name: '灵机用户291094' }]);
 
 const loginForm = reactive({
-  username: '',
+  mobile: '',
-  code: '',
+  captcha: '',
 });
 
 // 表单校验规则
 const formRules = {
-  username: [
+  mobile: [
     {
       required: true,
       message: '请填写手机号',
@@ -174,7 +166,7 @@ const formRules = {
       trigger: ['blur', 'change'],
     },
   ],
-  code: [
+  captcha: [
     {
       required: true,
       message: '请填写验证码',
@@ -196,13 +188,17 @@ const formRules = {
 // 表单是否有效
 const isFormValid = computed(() => {
   return (
-    loginForm.username.trim() !== '' &&
+    loginForm.mobile.trim() !== '' &&
-    /^1[3-9]\d{9}$/.test(loginForm.username) &&
+    /^1[3-9]\d{9}$/.test(loginForm.mobile) &&
-    loginForm.code.trim() !== '' &&
+    loginForm.captcha.trim() !== '' &&
-    /^\d{6}$/.test(loginForm.code)
+    /^\d{6}$/.test(loginForm.captcha)
   );
 });
 
+const disabledSubmitBtn = computed(() => {
+  return !isFormValid.value;
+});
+
 const selectAccount = (index: any) => {
   selectedAccount.value = index;
 };
@@ -227,11 +223,11 @@ const getCode = async () => {
   if (countdown.value > 0) return;
 
   // 先重置验证状态
-  formRef.value.clearValidate('username');
+  formRef.value.clearValidate('mobile');
 
   // 验证手机号字段
   try {
-    const result = await formRef.value.validateField('username');
+    const result = await formRef.value.validateField('mobile');
     // 只有当验证通过时才会显示滑块验证
     if (result === true || result === undefined) {
       isVerificationVisible.value = true;
@@ -248,10 +244,10 @@ const handleVerificationSubmit = async () => {
   startCountdown();
 
   try {
-    await fetchLoginCaptCha({ mobile: loginForm.username });
+    await fetchLoginCaptCha({ mobile: loginForm.mobile });
-    $message.success('验证码发送成功');
+    AMessage.success('验证码发送成功');
   } catch (error) {
-    $message.error('验证码发送失败');
+    AMessage.error('验证码发送失败');
     // 重置倒计时
     countdown.value = 0;
     clearInterval(timer.value);
@@ -260,22 +256,28 @@ const handleVerificationSubmit = async () => {
 
 // 提交表单
 const handleSubmit = async () => {
+  if (disabledSubmitBtn.value) return;
+
   try {
     // 校验所有字段
     await formRef.value.validate();
 
     if (!hasCheck.value) {
-      $message.error('请先勾选同意用户协议');
+      AMessage.error('请先勾选同意用户协议');
       return;
     }
 
     submitting.value = true;
-    // 调用登录/注册API
-    await new Promise((resolve) => setTimeout(resolve, 1000));
 
+    const { code, data } = await fetchAuthorizationsCaptcha(loginForm);
+
+    if (code === 200) {
       // 处理登录成功逻辑
-    $message.success(isLogin.value ? '登录成功' : '注册成功');
+      AMessage.success(isLogin.value ? '登录成功' : '注册成功');
-    router.replace({ path: '/dataEngine', replace: true });
+      userStore.setToken(data.access_token);
+
+      handleUserLogin();
+    }
   } catch (error) {
     // 错误信息会显示在输入框下方
   } finally {
@@ -303,107 +305,6 @@ onUnmounted(() => {
 });
 </script>
 
-<style scoped>
+<style scoped lang="scss">
-.content {
+@import './style.scss';
-  background-image: url('@/assets/img/BG.svg');
-  width: 100vw;
-  height: 100vh;
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  background-size: cover;
-  background-position: center;
-  background-color: #f0edff;
-}
-.form-input {
-  border: 1px solid #d7d7d9;
-  background-color: #fff;
-  border-radius: 4px;
-  width: 320px;
-  height: 48px;
-  font-size: 14px;
-  color: #333333;
-}
-.form-link {
-  color: #211f24;
-  font-size: 12px;
-  margin: 0px;
-}
-:deep(.arco-space-item) {
-  margin: 0px !important;
-}
-
-.account-bind-container {
-  width: 100%;
-  max-width: 400px;
-  margin: 0 auto;
-  display: flex;
-}
-
-.bind-card {
-  background-color: var(--color-bg-2);
-  width: 100%;
-  flex-direction: column;
-  align-items: start;
-}
-
-.bind-header {
-  margin-bottom: 8px;
-  text-align: left;
-}
-
-.phone-number {
-  font-size: 14px;
-  color: var(--color-text-4);
-  text-align: left;
-}
-
-.account-list {
-  margin-top: 16px;
-}
-
-.account-item {
-  padding: 12px 16px;
-  margin-bottom: 8px;
-  background-color: var(--color-bg-2);
-  border-radius: 4px;
-  cursor: pointer;
-  transition: all 0.2s ease;
-  display: flex;
-  align-items: center;
-}
-
-.account-item {
-  padding: 12px 16px;
-  margin-bottom: 8px;
-  background-color: var(--color-bg-2);
-  border-radius: 4px;
-  cursor: pointer;
-  transition: all 0.2s ease;
-  border: 1px solid var(--color-border-2);
-  box-shadow: 0 2px 4px 0 #b1b2b5;
-}
-
-.account-item.selected {
-  border-color: #6d4cfe;
-  background-color: rgba(109, 76, 254, 0.1);
-  box-shadow: 0 2px 4px 0 rgba(109, 76, 254, 0.5);
-}
-
-:deep(.arco-list-item-main) {
-  padding: 0;
-}
-
-:deep(.arco-list-item-actions) {
-  margin-left: 12px;
-}
-
-:deep(.arco-checkbox) {
-  margin-right: 0;
-}
-
-:deep(.arco-checkbox-checked .arco-checkbox-mask) {
-  background-color: #6d4cfe;
-  border-color: #6d4cfe;
-}
 </style>

src/views/components/login/style.scss

@@ -0,0 +1,115 @@
+.login-wrap {
+  .login-bg {
+    position: fixed;
+    left: 0;
+    right: 0;
+    top: 0;
+    height: 100%;
+    text-align: center;
+    background-image: url('@/assets/img/BG.svg');
+    background-repeat: no-repeat;
+    background-position: center;
+    background-size: cover;
+  }
+  .form-link {
+    color: #211f24;
+    font-size: 12px;
+    margin: 0px;
+  }
+
+  .login-footer {
+    position: absolute;
+    bottom: 32px;
+    left: 50%;
+    transform: translateX(-50%);
+
+    .text {
+      font-family: Alibaba PuHuiTi;
+      font-weight: 400;
+      font-size: 14px;
+      line-height: 22px;
+      letter-spacing: 0%;
+      color: #939499;
+    }
+  }
+
+  :deep(.arco-space-item) {
+    margin: 0px !important;
+  }
+}
+
+
+
+.account-bind-container {
+  width: 100%;
+  max-width: 400px;
+  margin: 0 auto;
+  display: flex;
+
+  .bind-card {
+    background-color: var(--color-bg-2);
+    width: 100%;
+    flex-direction: column;
+    align-items: start;
+  }
+
+  .bind-header {
+    margin-bottom: 8px;
+    text-align: left;
+  }
+
+  .phone-number {
+    font-size: 14px;
+    color: var(--color-text-4);
+    text-align: left;
+  }
+
+  .account-list {
+    margin-top: 16px;
+
+    .account-item {
+      padding: 12px 16px;
+      margin-bottom: 8px;
+      background-color: var(--color-bg-2);
+      border-radius: 4px;
+      cursor: pointer;
+      transition: all 0.2s ease;
+      display: flex;
+      align-items: center;
+    }
+
+    .account-item {
+      padding: 12px 16px;
+      margin-bottom: 8px;
+      background-color: var(--color-bg-2);
+      border-radius: 4px;
+      cursor: pointer;
+      transition: all 0.2s ease;
+      border: 1px solid var(--color-border-2);
+      box-shadow: 0 2px 4px 0 #b1b2b5;
+
+      &.selected {
+        border-color: #6d4cfe;
+        background-color: rgba(109, 76, 254, 0.1);
+        box-shadow: 0 2px 4px 0 rgba(109, 76, 254, 0.5);
+      }
+    }
+
+    .account-item:deep(.arco-list-item-main) {
+      padding: 0;
+    }
+
+    :deep(.arco-list-item-actions) {
+      margin-left: 12px;
+    }
+
+    :deep(.arco-checkbox) {
+      margin-right: 0;
+    }
+
+    :deep(.arco-checkbox-checked .arco-checkbox-mask) {
+      background-color: #6d4cfe;
+      border-color: #6d4cfe;
+    }
+  }
+}