wangqiao/front-pc
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Update login components and styling

Browse Source
This commit is contained in:
wangqiao
2025-08-24 22:05:43 +08:00
parent 43724c4d4d
commit 0fe0f14193
3 changed files with 25 additions and 33 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
components/kl-login/index.vue
View File

@ -3,7 +3,7 @@
<div v-if="visible" class="popup-overlay"> <div v-if="visible" class="popup-overlay">
<div class="popup-content"> <div class="popup-content">
<div class="login-container relative"> <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"> <div class="login-left">
<img src="~/assets/images/login-illustration.png" alt="login" class="login-img" /> <img src="~/assets/images/login-illustration.png" alt="login" class="login-img" />

2
components/kl-nav-tab/index.vue
View File

@ -89,7 +89,7 @@
// 是否登录 // 是否登录
const isLogin = computed(() => { const isLogin = computed(() => {
console.log('userStore.token', userStore); console.log('userStore.token', refreshToken.getToken());
return !!userStore.token return !!userStore.token
}) })

54
pages/home/components/LoginForm.vue
View File

@ -1,75 +1,75 @@
<template> <template>
<div class="login-container flex flex-col justify-between"> <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 <el-image
:src="userStore.userInfoRes.avatar || 'https://tuxixi.oss-cn-chengdu.aliyuncs.com/avater.png'" :src="userStore.userInfoRes.avatar || 'https://tuxixi.oss-cn-chengdu.aliyuncs.com/avater.png'"
alt="" alt=""
srcset="" srcset=""
class="h-69px w-69px rd-50%" class="h-[69px] w-[69px] rd-[50%]"
:class="{ 'cursor-pointer': isLogin }" :class="{ 'cursor-pointer': isLogin }"
fit="cover" fit="cover"
@click="handleUserInfo" @click="handleUserInfo"
/> />
<div class="mt-10px text-16px text-[#333333] font-normal"> <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 === 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" /> <img v-if="userStore.userInfoRes.vipLevel === 2" src="~/assets/svg/svip.svg" alt="" class="relative top-[12px]" />
Hi，{{ userStore.userInfoRes.nickname || '欢迎访问~' }} Hi，{{ userStore.userInfoRes.nickname || '欢迎访问~' }}
</div> </div>
</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 justify-between">
<div class="flex items-center"> <div class="flex items-center">
<img src="~/assets/images/cad_0 (1).png" alt="" srcset="" /> <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>
<div class="flex items-center"> <div class="flex items-center">
<img src="~/assets/images/cad_0 (2).png" alt="" srcset="" /> <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> </div>
<div class="flex items-center justify-between"> <div class="flex items-center justify-between">
<div class="flex items-center"> <div class="flex items-center">
<img src="~/assets/images/cad_0 (3).png" alt="" srcset="" /> <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>
<div class="flex items-center"> <div class="flex items-center">
<img src="~/assets/images/cad_0 (4).png" alt="" srcset="" /> <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>
</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 <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" @click="handleLogin"
>立即登录</div >立即登录</div
> >
<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" @click="handleRegister"
>免费注册</div >免费注册</div
> >
</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 <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" @click="handleDrawe"
>发布图纸</div >发布图纸</div
> >
<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" @click="handleLoginOut"
>退出登录</div >退出登录</div
> >
</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/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/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/email-v2.png" alt="邮箱登录" class="social-icon" @click="handleLoginEmail" />
<img src="~/assets/images/phone-v2.png" alt="手机登录" class="social-icon" @click="handleLoginPhone" /> <img src="~/assets/images/phone-v2.png" alt="手机登录" class="social-icon" @click="handleLoginPhone" />
</div> </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" /> <img src="~/assets/images/sign.png" alt="签到奖励" class="bonus-image" />
</div> </div>
</div> </div>
@ -83,7 +83,7 @@
import { getUserStatistics } from '~/api/personal-center/index' import { getUserStatistics } from '~/api/personal-center/index'
import useUserStore from '~/store/user' import useUserStore from '~/store/user'
const userStore = useUserStore() const userStore = useUserStore()
const instance = getCurrentInstance() const app = useNuxtApp()
// 是否登录 // 是否登录
const isLogin = computed(() => { const isLogin = computed(() => {
@ -102,27 +102,19 @@
} }
const handleLogin = () => { const handleLogin = () => {
if (instance) { app.$openLogin()
// instance.appContext.config.globalProperties.$openLogin()
}
} }
const handleRegister = () => { const handleRegister = () => {
if (instance) { app.$openRegister()
// instance.appContext.config.globalProperties.$openRegister()
}
} }
const handleLoginPhone = () => { const handleLoginPhone = () => {
if (instance) { app.$openLogin('verify')
// instance.appContext.config.globalProperties.$openLogin('verify')
}
} }
const handleLoginEmail = () => { const handleLoginEmail = () => {
if (instance) { app.$openLoginEmail()
// instance.appContext.config.globalProperties.$openLoginEmail()
}
} }
const handleUserInfo = () => { const handleUserInfo = () => {