From 0fe0f14193e886be03d5cc7af60b497cc356f607 Mon Sep 17 00:00:00 2001
From: wangqiao <wangqiao@58hn.cn>
Date: Sun, 24 Aug 2025 22:05:43 +0800
Subject: [PATCH] Update login components and styling

---
 components/kl-login/index.vue       |  2 +-
 components/kl-nav-tab/index.vue     |  2 +-
 pages/home/components/LoginForm.vue | 54 ++++++++++++-----------------
 3 files changed, 25 insertions(+), 33 deletions(-)

diff --git a/components/kl-login/index.vue b/components/kl-login/index.vue
index e3ae1be..5d64538 100644
--- a/components/kl-login/index.vue
+++ b/components/kl-login/index.vue
@@ -3,7 +3,7 @@
     <div v-if="visible" class="popup-overlay">
       <div class="popup-content">
         <div class="login-container relative">
-          <el-icon class="absolute right-0 top-0 cursor-pointer" @click="onClose()"><Close /></el-icon>
+          <el-icon class="absolute right-[0px] top-[0px] cursor-pointer" @click="onClose()"><Close /></el-icon>
           <!-- 左侧插图 -->
           <div class="login-left">
             <img src="~/assets/images/login-illustration.png" alt="login" class="login-img" />
diff --git a/components/kl-nav-tab/index.vue b/components/kl-nav-tab/index.vue
index 5a6960e..f47046a 100644
--- a/components/kl-nav-tab/index.vue
+++ b/components/kl-nav-tab/index.vue
@@ -89,7 +89,7 @@
 
   // 是否登录
   const isLogin = computed(() => {
-    console.log('userStore.token', userStore);
+    console.log('userStore.token', refreshToken.getToken());
     
     return !!userStore.token
   })
diff --git a/pages/home/components/LoginForm.vue b/pages/home/components/LoginForm.vue
index 631d36d..0494ae2 100644
--- a/pages/home/components/LoginForm.vue
+++ b/pages/home/components/LoginForm.vue
@@ -1,75 +1,75 @@
 <template>
   <div class="login-container flex flex-col justify-between">
-    <div class="ma-auto mt-25px w-100% flex flex-col items-center">
+    <div class="ma-auto mt-[25px] w-[100%] flex flex-col items-center">
       <el-image
         :src="userStore.userInfoRes.avatar || 'https://tuxixi.oss-cn-chengdu.aliyuncs.com/avater.png'"
         alt=""
         srcset=""
-        class="h-69px w-69px rd-50%"
+        class="h-[69px] w-[69px] rd-[50%]"
         :class="{ 'cursor-pointer': isLogin }"
         fit="cover"
         @click="handleUserInfo"
       />
-      <div class="mt-10px text-16px text-[#333333] font-normal">
-        <img v-if="userStore.userInfoRes.vipLevel === 1" src="~/assets/svg/vip.svg" alt="" class="relative top-12px" />
-        <img v-if="userStore.userInfoRes.vipLevel === 2" src="~/assets/svg/svip.svg" alt="" class="relative top-12px" />
+      <div class="mt-[10px] text-[16px] text-[#333333] font-normal">
+        <img v-if="userStore.userInfoRes.vipLevel === 1" src="~/assets/svg/vip.svg" alt="" class="relative top-[12px]" />
+        <img v-if="userStore.userInfoRes.vipLevel === 2" src="~/assets/svg/svip.svg" alt="" class="relative top-[12px]" />
         Hi，{{ userStore.userInfoRes.nickname || '欢迎访问~' }}
       </div>
     </div>
-    <div v-if="isLogin" class="mt-20px flex flex-col gap-20px px-20px text-14px text-[#333333] font-normal">
+    <div v-if="isLogin" class="mt-[20px] flex flex-col gap-[20px] px-[20px] text-[14px] text-[#333333] font-normal">
       <div class="flex items-center justify-between">
         <div class="flex items-center">
           <img src="~/assets/images/cad_0 (1).png" alt="" srcset="" />
-          <span class="title ml-4px" :title="`${userStaticInfo?.pointCount}`">我的积分: {{ userStaticInfo?.pointCount || 0 }}</span>
+          <span class="title ml-[4px]" :title="`${userStaticInfo?.pointCount}`">我的积分: {{ userStaticInfo?.pointCount || 0 }}</span>
         </div>
         <div class="flex items-center">
           <img src="~/assets/images/cad_0 (2).png" alt="" srcset="" />
-          <span class="title ml-4px" :title="`${userStaticInfo?.followCount}`">我的收藏: {{ userStaticInfo?.followCount || 0 }}</span>
+          <span class="title ml-[4px]" :title="`${userStaticInfo?.followCount}`">我的收藏: {{ userStaticInfo?.followCount || 0 }}</span>
         </div>
       </div>
       <div class="flex items-center justify-between">
         <div class="flex items-center">
           <img src="~/assets/images/cad_0 (3).png" alt="" srcset="" />
-          <span class="title ml-4px" :title="`${userStaticInfo?.projectCount}`">我的发布: {{ userStaticInfo?.projectCount || 0 }}</span>
+          <span class="title ml-[4px]" :title="`${userStaticInfo?.projectCount}`">我的发布: {{ userStaticInfo?.projectCount || 0 }}</span>
         </div>
         <div class="flex items-center">
           <img src="~/assets/images/cad_0 (4).png" alt="" srcset="" />
-          <span class="title ml-4px" :title="`${userStaticInfo?.downloadCount}`">我的下载: {{ userStaticInfo?.downloadCount || 0 }}</span>
+          <span class="title ml-[4px]" :title="`${userStaticInfo?.downloadCount}`">我的下载: {{ userStaticInfo?.downloadCount || 0 }}</span>
         </div>
       </div>
     </div>
-    <div v-if="!isLogin" class="mt-48px box-border flex justify-between px-18px">
+    <div v-if="!isLogin" class="mt-[48px] box-border flex justify-between px-[18px]">
       <div
-        class="h-37px w-101px cursor-pointer border border-[#1A65FF] rounded-2px border-solid bg-[#1A65FF] text-center text-14px text-[#FFFFFF] font-normal line-height-37px"
+        class="h-[37px] w-[101px] cursor-pointer border border-[#1A65FF] rounded-[2px] border-solid bg-[#1A65FF] text-center text-[14px] text-[#FFFFFF] font-normal line-height-[37px]"
         @click="handleLogin"
         >立即登录</div
       >
       <div
-        class="h-37px w-101px cursor-pointer border border-[#DDDDDD] rounded-2px border-solid text-center text-14px text-[#333333] font-normal line-height-37px"
+        class="h-[37px] w-[101px] cursor-pointer border border-[#DDDDDD] rounded-[2px] border-solid text-center text-[14px] text-[#333333] font-normal line-height-[37px]"
         @click="handleRegister"
         >免费注册</div
       >
     </div>
-    <div v-else class="mt-30px box-border flex justify-between px-18px">
+    <div v-else class="mt-[30px] box-border flex justify-between px-[18px]">
       <div
-        class="h-37px w-101px cursor-pointer border border-[#1A65FF] rounded-2px border-solid bg-[#1A65FF] text-center text-14px text-[#FFFFFF] font-normal line-height-37px"
+        class="h-[37px] w-[101px] cursor-pointer border border-[#1A65FF] rounded-[2px] border-solid bg-[#1A65FF] text-center text-[14px] text-[#FFFFFF] font-normal line-height-[37px]"
         @click="handleDrawe"
         >发布图纸</div
       >
       <div
-        class="h-37px w-101px cursor-pointer border border-[#DDDDDD] rounded-2px border-solid text-center text-14px text-[#333333] font-normal line-height-37px"
+        class="h-[37px] w-[101px] cursor-pointer border border-[#DDDDDD] rounded-[2px] border-solid text-center text-[14px] text-[#333333] font-normal line-height-[37px]"
         @click="handleLoginOut"
         >退出登录</div
       >
     </div>
-    <div v-if="!isLogin" class="mt-30px flex justify-between px-20px">
+    <div v-if="!isLogin" class="mt-[30px] flex justify-between px-[20px]">
       <img src="~/assets/images/qq-v2.png" alt="QQ登录" class="social-icon" @click="handleLoginQQ" />
       <img src="~/assets/images/weixin-v2.png" alt="微信登录" class="social-icon" @click="handleLoginWechat" />
       <img src="~/assets/images/email-v2.png" alt="邮箱登录" class="social-icon" @click="handleLoginEmail" />
       <img src="~/assets/images/phone-v2.png" alt="手机登录" class="social-icon" @click="handleLoginPhone" />
     </div>
 
-    <div class="sign-bonus mt-18px" @click="handleSign">
+    <div class="sign-bonus mt-[18px]" @click="handleSign">
       <img src="~/assets/images/sign.png" alt="签到奖励" class="bonus-image" />
     </div>
   </div>
@@ -83,7 +83,7 @@
   import { getUserStatistics } from '~/api/personal-center/index'
   import useUserStore from '~/store/user'
   const userStore = useUserStore()
-  const instance = getCurrentInstance()
+  const app = useNuxtApp()
 
   // 是否登录
   const isLogin = computed(() => {
@@ -102,27 +102,19 @@
   }
 
   const handleLogin = () => {
-    if (instance) {
-      // instance.appContext.config.globalProperties.$openLogin()
-    }
+      app.$openLogin()
   }
 
   const handleRegister = () => {
-    if (instance) {
-      // instance.appContext.config.globalProperties.$openRegister()
-    }
+      app.$openRegister()
   }
 
   const handleLoginPhone = () => {
-    if (instance) {
-      // instance.appContext.config.globalProperties.$openLogin('verify')
-    }
+      app.$openLogin('verify')
   }
 
   const handleLoginEmail = () => {
-    if (instance) {
-      // instance.appContext.config.globalProperties.$openLoginEmail()
-    }
+      app.$openLoginEmail()
   }
 
   const handleUserInfo = () => {