Update login components and styling
This commit is contained in:
wangqiao
@ -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" />
|
||||
|
||||
@ -89,7 +89,7 @@
|
||||
|
||||
// 是否登录
|
||||
const isLogin = computed(() => {
|
||||
console.log('userStore.token', userStore);
|
||||
console.log('userStore.token', refreshToken.getToken());
|
||||
|
||||
return !!userStore.token
|
||||
})
|
||||
|
||||
@ -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 = () => {
|
||||
|
||||
Reference in New Issue
Block a user