登录
This commit is contained in:
李志鹏
130
src/views/login/css/style.css
Normal file
130
src/views/login/css/style.css
Normal file
@@ -0,0 +1,130 @@
|
||||
.retrieve-password,
|
||||
.register,
|
||||
.login {
|
||||
width: 100%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
margin-top: 2rem;
|
||||
}
|
||||
.retrieve-password:deep(.el-form),
|
||||
.register:deep(.el-form),
|
||||
.login:deep(.el-form) {
|
||||
width: 100%;
|
||||
}
|
||||
.retrieve-password:deep(.el-form) .el-form-item,
|
||||
.register:deep(.el-form) .el-form-item,
|
||||
.login:deep(.el-form) .el-form-item {
|
||||
position: relative;
|
||||
margin-bottom: 1.6rem;
|
||||
}
|
||||
.retrieve-password:deep(.el-form) .el-form-item__content,
|
||||
.register:deep(.el-form) .el-form-item__content,
|
||||
.login:deep(.el-form) .el-form-item__content {
|
||||
position: relative;
|
||||
}
|
||||
.retrieve-password:deep(.el-form) .el-form-item__label,
|
||||
.register:deep(.el-form) .el-form-item__label,
|
||||
.login:deep(.el-form) .el-form-item__label {
|
||||
color: #232323;
|
||||
font-size: 1.2rem;
|
||||
margin-bottom: 0.8rem;
|
||||
line-height: 1.5rem;
|
||||
}
|
||||
.retrieve-password:deep(.el-form) .el-input,
|
||||
.register:deep(.el-form) .el-input,
|
||||
.login:deep(.el-form) .el-input {
|
||||
--el-input-height: 3.4rem;
|
||||
--el-input-border-radius: 0;
|
||||
--el-input-text-color: #232323;
|
||||
--el-border-color: #C4C4C4;
|
||||
font-size: 1.4rem;
|
||||
}
|
||||
.retrieve-password:deep(.el-form) .el-input::placeholder,
|
||||
.register:deep(.el-form) .el-input::placeholder,
|
||||
.login:deep(.el-form) .el-input::placeholder {
|
||||
color: #9F9F9F;
|
||||
}
|
||||
.retrieve-password:deep(.el-form) .password-tip,
|
||||
.register:deep(.el-form) .password-tip,
|
||||
.login:deep(.el-form) .password-tip {
|
||||
position: absolute;
|
||||
z-index: 10;
|
||||
top: -1rem;
|
||||
right: 0;
|
||||
transform: translateY(-100%);
|
||||
}
|
||||
.retrieve-password:deep(.el-form) .password-warning,
|
||||
.register:deep(.el-form) .password-warning,
|
||||
.login:deep(.el-form) .password-warning {
|
||||
--el-checkbox-height: auto;
|
||||
margin-top: -0.6rem;
|
||||
margin-bottom: 1.6rem;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
.retrieve-password:deep(.el-form) .password-warning > .icon,
|
||||
.register:deep(.el-form) .password-warning > .icon,
|
||||
.login:deep(.el-form) .password-warning > .icon {
|
||||
width: 1.4rem;
|
||||
height: 1.4rem;
|
||||
margin-right: 0.8rem;
|
||||
}
|
||||
.retrieve-password:deep(.el-form) .password-warning > .label,
|
||||
.register:deep(.el-form) .password-warning > .label,
|
||||
.login:deep(.el-form) .password-warning > .label {
|
||||
font-family: KaiseiOpti-Regular;
|
||||
font-size: 1rem;
|
||||
color: #9F9F9F;
|
||||
}
|
||||
.retrieve-password:deep(.el-form) .forgotPassword,
|
||||
.register:deep(.el-form) .forgotPassword,
|
||||
.login:deep(.el-form) .forgotPassword {
|
||||
margin-top: -0.8rem;
|
||||
margin-bottom: 5rem;
|
||||
font-size: 1.1rem;
|
||||
text-align: right;
|
||||
color: #666666;
|
||||
cursor: pointer;
|
||||
text-decoration: underline;
|
||||
font-family: KaiseiOpti-Regular;
|
||||
}
|
||||
.retrieve-password:deep(.el-form) .el-form-item__error,
|
||||
.register:deep(.el-form) .el-form-item__error,
|
||||
.login:deep(.el-form) .el-form-item__error {
|
||||
padding-top: 1px;
|
||||
font-size: 1rem;
|
||||
}
|
||||
.retrieve-password:deep(.el-form) .submit,
|
||||
.register:deep(.el-form) .submit,
|
||||
.login:deep(.el-form) .submit {
|
||||
width: 100%;
|
||||
height: 4rem;
|
||||
font-size: 1.36rem;
|
||||
}
|
||||
.retrieve-password:deep(.el-form) .privacy,
|
||||
.register:deep(.el-form) .privacy,
|
||||
.login:deep(.el-form) .privacy {
|
||||
margin-top: -0.6rem;
|
||||
--el-checkbox-height: auto;
|
||||
}
|
||||
.retrieve-password:deep(.el-form) .privacy .el-checkbox__label,
|
||||
.register:deep(.el-form) .privacy .el-checkbox__label,
|
||||
.login:deep(.el-form) .privacy .el-checkbox__label {
|
||||
font-size: 1.1rem;
|
||||
color: #666666;
|
||||
font-family: KaiseiOpti-Regular;
|
||||
}
|
||||
.retrieve-password:deep(.el-form) .privacy .el-checkbox__label > div > span,
|
||||
.register:deep(.el-form) .privacy .el-checkbox__label > div > span,
|
||||
.login:deep(.el-form) .privacy .el-checkbox__label > div > span {
|
||||
font-family: KaiseiOpti-Bold;
|
||||
text-decoration: underline;
|
||||
cursor: pointer;
|
||||
color: #232323;
|
||||
}
|
||||
.retrieve-password > .other-login,
|
||||
.register > .other-login,
|
||||
.login > .other-login {
|
||||
margin-top: 4rem;
|
||||
}
|
||||
143
src/views/login/email-verify.vue
Normal file
143
src/views/login/email-verify.vue
Normal file
@@ -0,0 +1,143 @@
|
||||
<template>
|
||||
<div class="visible-code">
|
||||
<div class="tip" v-html="$t('Login.verifyCodeHasSent', { email: props.email })"></div>
|
||||
<input-code @submit="onVerify" v-model="code" ref="inputCodeRef" />
|
||||
<p class="time" v-if="time > 0">{{ $t('Login.resendCodeIn', { time: timeStr }) }}</p>
|
||||
<p class="time" v-if="time === 0">
|
||||
<span @click="onResend">{{ $t('Login.resendCode') }}</span>
|
||||
</p>
|
||||
<button class="verify" custom="black" @click="onVerify">{{ $t('Login.verify') }}</button>
|
||||
<other-login />
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import md5 from 'md5'
|
||||
import { ElMessage } from 'element-plus'
|
||||
import OtherLogin from './other-login.vue'
|
||||
import { computed, onBeforeUnmount, onMounted, ref } from 'vue'
|
||||
import { CountDown } from '@/utils/tools'
|
||||
import InputCode from '@/components/input-code.vue'
|
||||
import { useRouter } from 'vue-router'
|
||||
import { useI18n } from 'vue-i18n'
|
||||
const { t } = useI18n()
|
||||
const router = useRouter()
|
||||
const emit = defineEmits(['submit-email-code'])
|
||||
const props = defineProps({
|
||||
email: { type: String, required: true },
|
||||
type: {
|
||||
type: String as () => 'LOGIN' | 'REGISTER' | 'FORGOT_PWD',
|
||||
required: true
|
||||
},
|
||||
password: { type: String, default: '' }
|
||||
})
|
||||
const code = ref('')
|
||||
const time = ref(60)
|
||||
const timeStr = computed(() => CountDown(time.value))
|
||||
const timeout = ref(null)
|
||||
const setTime = (s = 120) => {
|
||||
clearTime()
|
||||
time.value = s
|
||||
timeout.value = setInterval(() => {
|
||||
time.value--
|
||||
if (time.value <= 0) {
|
||||
clearTime()
|
||||
time.value = 0
|
||||
}
|
||||
}, 1000)
|
||||
}
|
||||
const clearTime = () => {
|
||||
time.value = -1
|
||||
clearTimeout(timeout.value)
|
||||
}
|
||||
onBeforeUnmount(() => {
|
||||
clearTime()
|
||||
})
|
||||
onMounted(() => {
|
||||
onSendCode()
|
||||
})
|
||||
const inputCodeRef = ref(null)
|
||||
const resetCode = () => {
|
||||
inputCodeRef.value?.resetCode?.()
|
||||
}
|
||||
const onSendCode = async () => {
|
||||
resetCode()
|
||||
const email = props.email
|
||||
if (!email) {
|
||||
console.warn('请输入邮箱')
|
||||
return Promise.reject('请输入邮箱')
|
||||
}
|
||||
// const data = {
|
||||
// email,
|
||||
// type: props.type
|
||||
// }
|
||||
// if (props.type === 'LOGIN') {
|
||||
// data['password'] = md5(props.password)
|
||||
// }
|
||||
// const res = await SendVerificationCode(data)
|
||||
// if (!res) {
|
||||
// ElMessage.error(t('Login.sendCodeError'))
|
||||
// return Promise.reject('发送验证码失败')
|
||||
// }
|
||||
setTime()
|
||||
return Promise.resolve()
|
||||
}
|
||||
const onResend = () => {
|
||||
if (time.value > 0) return
|
||||
onSendCode()
|
||||
}
|
||||
const onVerify = () => {
|
||||
if (code.value.length !== 6) return
|
||||
emit('submit-email-code', code.value)
|
||||
}
|
||||
defineExpose({
|
||||
onSendCode
|
||||
})
|
||||
</script>
|
||||
|
||||
<style lang="less" scoped>
|
||||
.visible-code {
|
||||
width: 100%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
> .tip {
|
||||
text-align: center;
|
||||
margin-top: 4.6rem;
|
||||
line-height: 2.4rem;
|
||||
font-family: KaiseiOpti-Regular;
|
||||
font-size: 1.6rem;
|
||||
color: #666;
|
||||
&:deep(span) {
|
||||
color: #252727;
|
||||
font-family: KaiseiOpti-Medium;
|
||||
}
|
||||
}
|
||||
> .input-code {
|
||||
margin-top: 6rem;
|
||||
}
|
||||
> .verify {
|
||||
margin-top: 5rem;
|
||||
width: 100%;
|
||||
height: 4rem;
|
||||
--button-font-size: 1.4rem;
|
||||
}
|
||||
> .time {
|
||||
user-select: none;
|
||||
margin-top: 2.4rem;
|
||||
font-size: 1.6rem;
|
||||
color: #666;
|
||||
font-family: Regular;
|
||||
> span {
|
||||
color: #ff7a50;
|
||||
text-decoration: underline;
|
||||
cursor: pointer;
|
||||
font-weight: 500;
|
||||
font-family: Medium;
|
||||
}
|
||||
}
|
||||
> .other-login {
|
||||
margin-top: 6rem;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
117
src/views/login/index.vue
Normal file
117
src/views/login/index.vue
Normal file
@@ -0,0 +1,117 @@
|
||||
<template>
|
||||
<div class="index">
|
||||
<div class="header">
|
||||
<span class="tip">{{ $t('AlphaVersion') }}</span>
|
||||
<img src="@/assets/images/logo-1.png" class="logo" />
|
||||
<p class="split"></p>
|
||||
<button class="login" @click="onLogin">{{ $t('Login.login') }}</button>
|
||||
<button class="register" @click="onRegister">{{ $t('Login.register') }}</button>
|
||||
</div>
|
||||
<img src="@/assets/images/login/index-title.png" class="title" draggable="false" />
|
||||
<img src="@/assets/images/login/index-zhuangshi.png" class="zhuangshi" draggable="false" />
|
||||
<div class="tip">{{ $t('Login.indexTip') }}</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { computed } from 'vue'
|
||||
import { useRouter } from 'vue-router'
|
||||
const router = useRouter()
|
||||
const onLogin = () => {
|
||||
router.push({ name: 'login' })
|
||||
}
|
||||
const onRegister = () => {
|
||||
router.push({ name: 'register' })
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="less" scoped>
|
||||
.index {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
overflow: hidden;
|
||||
position: relative;
|
||||
background-image: url('@/assets/images/login/index-bg.png');
|
||||
background-size: cover;
|
||||
background-position: center;
|
||||
> .header {
|
||||
position: absolute;
|
||||
top: 3rem;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
> * {
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
}
|
||||
> .tip {
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
top: 0;
|
||||
left: 0;
|
||||
font-size: 3rem;
|
||||
text-align: center;
|
||||
font-family: Regular;
|
||||
color: #fff;
|
||||
z-index: 0;
|
||||
}
|
||||
> .logo {
|
||||
width: auto;
|
||||
height: 2.5rem;
|
||||
margin-left: 3.8rem;
|
||||
}
|
||||
> .split {
|
||||
margin: 0 auto;
|
||||
}
|
||||
> button {
|
||||
margin-right: 3rem;
|
||||
width: 20rem;
|
||||
height: 5.2rem;
|
||||
border-radius: 5rem;
|
||||
border: none;
|
||||
outline: none;
|
||||
font-size: 2.2rem;
|
||||
font-weight: 600;
|
||||
font-family: SemiBold;
|
||||
border: 0.2rem solid #fff;
|
||||
&:active {
|
||||
opacity: 0.8;
|
||||
}
|
||||
}
|
||||
> .login {
|
||||
background-color: #fff;
|
||||
color: #713e1f;
|
||||
}
|
||||
> .register {
|
||||
background-color: transparent;
|
||||
color: #ffffff;
|
||||
backdrop-filter: blur(10px);
|
||||
}
|
||||
}
|
||||
> .zhuangshi,
|
||||
> .title,
|
||||
> .tip {
|
||||
position: absolute;
|
||||
left: 50%;
|
||||
transform: translateX(-50%);
|
||||
}
|
||||
> .title {
|
||||
// width: 55%;
|
||||
width: 105.6rem;
|
||||
height: auto;
|
||||
top: 20.5rem;
|
||||
}
|
||||
> .zhuangshi {
|
||||
width: 21.5rem;
|
||||
height: auto;
|
||||
bottom: 13.4rem;
|
||||
}
|
||||
> .tip {
|
||||
font-size: 2.8rem;
|
||||
font-family: Regular;
|
||||
color: #fff;
|
||||
bottom: 8rem;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
120
src/views/login/less/style.less
Normal file
120
src/views/login/less/style.less
Normal file
@@ -0,0 +1,120 @@
|
||||
.retrieve-password,
|
||||
.register,
|
||||
.login {
|
||||
width: 100%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
margin-top: 2rem;
|
||||
|
||||
&:deep(.el-form) {
|
||||
width: 100%;
|
||||
|
||||
.el-form-item {
|
||||
position: relative;
|
||||
margin-bottom: 1.6rem;
|
||||
}
|
||||
|
||||
.el-form-item__content {
|
||||
position: relative;
|
||||
}
|
||||
|
||||
|
||||
.el-form-item__label {
|
||||
color: #232323;
|
||||
font-size: 1.2rem;
|
||||
margin-bottom: 0.8rem;
|
||||
line-height: 1.5rem;
|
||||
}
|
||||
|
||||
.el-input {
|
||||
--el-input-height: 3.4rem;
|
||||
--el-input-border-radius: 0;
|
||||
--el-input-text-color: #232323;
|
||||
--el-border-color: #C4C4C4;
|
||||
font-size: 1.4rem;
|
||||
|
||||
&::placeholder {
|
||||
color: #9F9F9F;
|
||||
}
|
||||
}
|
||||
|
||||
.password-tip {
|
||||
position: absolute;
|
||||
z-index: 10;
|
||||
top: -1rem;
|
||||
right: 0;
|
||||
transform: translateY(-100%);
|
||||
}
|
||||
|
||||
.password-warning {
|
||||
--el-checkbox-height: auto;
|
||||
margin-top: -0.6rem;
|
||||
margin-bottom: 1.6rem;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
||||
>.icon {
|
||||
width: 1.4rem;
|
||||
height: 1.4rem;
|
||||
margin-right: 0.8rem;
|
||||
}
|
||||
|
||||
>.label {
|
||||
font-family: KaiseiOpti-Regular;
|
||||
font-size: 1rem;
|
||||
color: #9F9F9F;
|
||||
}
|
||||
}
|
||||
|
||||
.forgotPassword {
|
||||
margin-top: -0.8rem;
|
||||
margin-bottom: 5rem;
|
||||
font-size: 1.1rem;
|
||||
text-align: right;
|
||||
color: #666666;
|
||||
cursor: pointer;
|
||||
text-decoration: underline;
|
||||
font-family: KaiseiOpti-Regular;
|
||||
}
|
||||
|
||||
|
||||
.el-form-item__error {
|
||||
padding-top: 1px;
|
||||
font-size: 1rem;
|
||||
}
|
||||
|
||||
|
||||
.submit {
|
||||
width: 100%;
|
||||
height: 4rem;
|
||||
font-size: 1.36rem;
|
||||
}
|
||||
|
||||
.privacy {
|
||||
margin-top: -0.6rem;
|
||||
--el-checkbox-height: auto;
|
||||
|
||||
.el-checkbox__label {
|
||||
font-size: 1.1rem;
|
||||
color: #666666;
|
||||
font-family: KaiseiOpti-Regular;
|
||||
|
||||
>div {
|
||||
>span {
|
||||
font-family: KaiseiOpti-Bold;
|
||||
text-decoration: underline;
|
||||
cursor: pointer;
|
||||
color: #232323;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
>.other-login {
|
||||
margin-top: 4rem;
|
||||
}
|
||||
|
||||
}
|
||||
224
src/views/login/login-dialog.vue
Normal file
224
src/views/login/login-dialog.vue
Normal file
@@ -0,0 +1,224 @@
|
||||
<template>
|
||||
<el-dialog
|
||||
class="login-dialog"
|
||||
v-model="show"
|
||||
header-class="login-dialog-header"
|
||||
align-center
|
||||
destroy-on-close
|
||||
:show-close="false"
|
||||
:close-on-press-escape="false"
|
||||
:close-on-click-modal="false"
|
||||
>
|
||||
<div class="login-dialog-content">
|
||||
<img class="bg" src="@/assets/images/login/bg.jpg" />
|
||||
<img class="logo" src="@/assets/images/logo.png" />
|
||||
<div class="close" @click="show = false"><svg-icon name="close" /></div>
|
||||
<div class="content" v-if="curentTabInfo">
|
||||
<div class="header">
|
||||
<div class="title" v-show="curentTabInfo.title">
|
||||
<div class="icon" @click="onBack"><svg-icon name="back" size="17" /></div>
|
||||
<div class="label">{{ curentTabInfo.title }}</div>
|
||||
</div>
|
||||
<div class="nav" v-show="!curentTabInfo.title">
|
||||
<div
|
||||
class="item"
|
||||
:class="{ active: currentTab === TabNames.sign_up }"
|
||||
@click="currentTab = TabNames.sign_up"
|
||||
>
|
||||
SIGN UP
|
||||
</div>
|
||||
<div
|
||||
class="item"
|
||||
:class="{ active: currentTab === TabNames.login }"
|
||||
@click="currentTab = TabNames.login"
|
||||
>
|
||||
LOG IN
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<component
|
||||
:is="curentTabInfo.component"
|
||||
@retrieve-password="currentTab = TabNames.retrieve_password"
|
||||
@login="onLogin"
|
||||
@register="onRegister"
|
||||
@submit-email-code="onSubmitEmailCode"
|
||||
:name="data.name"
|
||||
:email="data.email"
|
||||
:password="data.password"
|
||||
type="FORGOT_PWD"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</el-dialog>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { computed, ref, markRaw, watch, onBeforeUnmount } from 'vue'
|
||||
import md5 from 'md5'
|
||||
import login from './login.vue'
|
||||
import register from './register.vue'
|
||||
import emailVerify from './email-verify.vue'
|
||||
import myEvent from '@/utils/myEvent'
|
||||
const data = ref({
|
||||
name: '',
|
||||
email: '',
|
||||
password: '',
|
||||
type: ''
|
||||
})
|
||||
const show = ref(false)
|
||||
const TabNames = {
|
||||
login: 'login',
|
||||
sign_up: 'sign_up',
|
||||
email_verify: 'email_verify',
|
||||
retrieve_password: 'retrieve_password'
|
||||
}
|
||||
const tabList = markRaw([
|
||||
{
|
||||
name: TabNames.login,
|
||||
component: login
|
||||
},
|
||||
{
|
||||
name: TabNames.sign_up,
|
||||
component: register
|
||||
},
|
||||
{
|
||||
name: TabNames.email_verify,
|
||||
title: 'EMAIL VERIFICATION',
|
||||
component: emailVerify
|
||||
},
|
||||
{
|
||||
name: TabNames.retrieve_password,
|
||||
title: 'RETRIEVE PASSWORD',
|
||||
component: login
|
||||
}
|
||||
])
|
||||
const currentTab = ref(TabNames.login)
|
||||
const curentTabInfo = computed(() => tabList.find((v) => v.name === currentTab.value))
|
||||
const lastTab = ref('')
|
||||
watch(currentTab, (v, o) => (lastTab.value = o))
|
||||
const onBack = () => {
|
||||
if (lastTab.value) currentTab.value = lastTab.value
|
||||
}
|
||||
const open = (type?: string) => {
|
||||
currentTab.value = TabNames[type] || TabNames.login
|
||||
data.value.name = ''
|
||||
data.value.email = ''
|
||||
data.value.password = ''
|
||||
show.value = true
|
||||
}
|
||||
myEvent.add('openLoginDialog', open)
|
||||
onBeforeUnmount(() => {
|
||||
myEvent.remove('openLoginDialog', open)
|
||||
})
|
||||
|
||||
const onLogin = (res: any) => {
|
||||
data.value = res
|
||||
data.value.type = TabNames.login
|
||||
currentTab.value = TabNames.email_verify
|
||||
}
|
||||
const onRegister = (res: any) => {
|
||||
data.value = res
|
||||
data.value.type = TabNames.sign_up
|
||||
currentTab.value = TabNames.email_verify
|
||||
}
|
||||
const onSubmitEmailCode = (code: string) => {
|
||||
// data.value.code = code
|
||||
console.log(code)
|
||||
show.value = false
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="less">
|
||||
.login-dialog-header {
|
||||
display: none;
|
||||
}
|
||||
.el-dialog.login-dialog {
|
||||
--el-dialog-border-radius: 0;
|
||||
--el-dialog-padding-primary: 0;
|
||||
}
|
||||
.login-dialog-content {
|
||||
width: 90rem;
|
||||
height: 62rem;
|
||||
position: relative;
|
||||
> .bg {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
display: block;
|
||||
}
|
||||
> * {
|
||||
position: absolute;
|
||||
}
|
||||
> .logo {
|
||||
width: auto;
|
||||
height: 4rem;
|
||||
top: 4rem;
|
||||
left: 3rem;
|
||||
}
|
||||
> .close {
|
||||
width: 3rem;
|
||||
height: 3rem;
|
||||
top: 2rem;
|
||||
right: 2rem;
|
||||
cursor: pointer;
|
||||
}
|
||||
> .content {
|
||||
width: 34rem;
|
||||
top: 5rem;
|
||||
right: 6rem;
|
||||
height: calc(100% - 10rem);
|
||||
> .header {
|
||||
--padding-bottom: 1.2rem;
|
||||
padding-bottom: var(--padding-bottom);
|
||||
border-bottom: 0.1rem solid #9f9f9f;
|
||||
> div {
|
||||
display: flex;
|
||||
height: 3rem;
|
||||
}
|
||||
> .nav {
|
||||
> .item {
|
||||
user-select: none;
|
||||
cursor: pointer;
|
||||
flex: 1;
|
||||
height: 100%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
position: relative;
|
||||
font-size: 2rem;
|
||||
font-family: KaiseiOpti-Regular;
|
||||
color: #9f9f9f;
|
||||
&.active {
|
||||
font-family: KaiseiOpti-Bold;
|
||||
color: #232323;
|
||||
|
||||
&::after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
bottom: calc(0rem - var(--padding-bottom) - 0.2rem);
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 0;
|
||||
border-bottom: 0.4rem solid #232323;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
> .title {
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
> .icon {
|
||||
width: 2.4rem;
|
||||
height: 2.4rem;
|
||||
cursor: pointer;
|
||||
margin-right: 1rem;
|
||||
}
|
||||
> .label {
|
||||
font-family: KaiseiOpti-Bold;
|
||||
font-size: 2rem;
|
||||
color: #232323;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
75
src/views/login/login.vue
Normal file
75
src/views/login/login.vue
Normal file
@@ -0,0 +1,75 @@
|
||||
<template>
|
||||
<div class="login">
|
||||
<el-form :model="formData" :rules="ruleForm" label-position="top" ref="formRef">
|
||||
<el-form-item :label="$t('Login.email')" prop="email">
|
||||
<el-input v-model="formData.email" :placeholder="$t('Login.enterEmail')" name="email" />
|
||||
</el-form-item>
|
||||
<el-form-item :label="$t('Login.password')" prop="password">
|
||||
<el-input
|
||||
v-model="formData.password"
|
||||
:placeholder="$t('Login.enterPassword')"
|
||||
type="password"
|
||||
show-password
|
||||
name="password"
|
||||
/>
|
||||
</el-form-item>
|
||||
<div class="forgotPassword">
|
||||
<span @click="onForgotPassword">{{ $t('Login.forgotPassword') }}</span>
|
||||
</div>
|
||||
<el-form-item>
|
||||
<button type="submit" class="submit" custom="black" @click.prevent="onSubmit">
|
||||
{{ $t('Login.login') }}
|
||||
</button>
|
||||
</el-form-item>
|
||||
<el-form-item prop="privacy" class="privacy">
|
||||
<el-checkbox v-model="formData.privacy">
|
||||
<div v-html="$t('Login.agreeTermsPolicy')"></div>
|
||||
</el-checkbox>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
<other-login />
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { computed, reactive, ref } from 'vue'
|
||||
import { validateEmail, validatePassLength, validatePrivacy } from './tools'
|
||||
import OtherLogin from './other-login.vue'
|
||||
const emit = defineEmits(['retrieve-password', 'login'])
|
||||
const props = defineProps({
|
||||
name: { type: String, default: '' },
|
||||
email: { type: String, default: '' },
|
||||
password: { type: String, default: '' }
|
||||
})
|
||||
const ruleForm = reactive({
|
||||
email: [{ validator: validateEmail, trigger: 'change' }],
|
||||
password: [{ validator: validatePassLength, trigger: 'change' }],
|
||||
privacy: [{ validator: validatePrivacy, trigger: 'change' }]
|
||||
})
|
||||
const formData = reactive({
|
||||
email: props.email,
|
||||
password: props.password,
|
||||
privacy: false
|
||||
})
|
||||
const formRef = ref(null)
|
||||
|
||||
const onForgotPassword = () => {
|
||||
emit('retrieve-password')
|
||||
}
|
||||
const onSubmit = () => {
|
||||
formRef.value?.validate?.((valid) => {
|
||||
if (valid) {
|
||||
emit('login', {
|
||||
email: formData.email,
|
||||
password: formData.password
|
||||
})
|
||||
} else {
|
||||
console.warn('error submit!')
|
||||
}
|
||||
})
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="less" scoped>
|
||||
@import './less/style.less';
|
||||
</style>
|
||||
83
src/views/login/other-login.vue
Normal file
83
src/views/login/other-login.vue
Normal file
@@ -0,0 +1,83 @@
|
||||
<template>
|
||||
<div class="other-login">
|
||||
<div class="title">{{ $t('Login.orContinueWith') }}</div>
|
||||
<div class="btns">
|
||||
<button class="submit" custom @click="onGoogle">
|
||||
<img src="@/assets/images/login/google.png" />
|
||||
{{ $t('Login.googleLogin') }}
|
||||
</button>
|
||||
<button class="submit" custom @click="onWechat">
|
||||
<img src="@/assets/images/login/wechat.png" />
|
||||
{{ $t('Login.wechatLogin') }}
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { computed, reactive, ref } from 'vue'
|
||||
const onGoogle = () => {}
|
||||
const onWechat = () => {}
|
||||
</script>
|
||||
|
||||
<style lang="less" scoped>
|
||||
.other-login {
|
||||
width: 100%;
|
||||
> .title {
|
||||
width: 100%;
|
||||
color: #232323;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
font-size: 1.1rem;
|
||||
font-family: KaiseiOpti-Regular;
|
||||
line-height: 2rem;
|
||||
|
||||
&::before,
|
||||
&::after {
|
||||
content: '';
|
||||
flex: 1;
|
||||
border-bottom: 0.05rem solid #232323;
|
||||
}
|
||||
|
||||
&::before {
|
||||
margin-right: 2rem;
|
||||
}
|
||||
|
||||
&::after {
|
||||
margin-left: 2rem;
|
||||
}
|
||||
}
|
||||
> .btns {
|
||||
margin-top: 2.4rem;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
gap: 2rem;
|
||||
width: 100%;
|
||||
overflow: hidden;
|
||||
> button {
|
||||
min-width: 0;
|
||||
flex: 1;
|
||||
height: 3.4rem;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-around;
|
||||
|
||||
--button-bgcolor: transparent;
|
||||
--button-color: #666666;
|
||||
--button-font-size: 1rem;
|
||||
border: 0.1rem solid #c4c4c4;
|
||||
&:first-child {
|
||||
margin-left: 0;
|
||||
}
|
||||
|
||||
img {
|
||||
width: auto;
|
||||
height: 2rem;
|
||||
// margin-right: 2.5rem;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
60
src/views/login/password-tip.vue
Normal file
60
src/views/login/password-tip.vue
Normal file
@@ -0,0 +1,60 @@
|
||||
<template>
|
||||
<div class="password-tip">
|
||||
<div>
|
||||
<el-icon>
|
||||
<CloseBold v-if="validateLength(value)" />
|
||||
<Select v-else />
|
||||
</el-icon>
|
||||
<span>{{ $t('Login.passwordLengthError', { min: 6, max: 20 }) }}</span>
|
||||
</div>
|
||||
<div>
|
||||
<el-icon>
|
||||
<CloseBold v-if="validateSpecial(value)" />
|
||||
<Select v-else />
|
||||
</el-icon>
|
||||
<span>{{ $t('Login.passwordSpecial') }}</span>
|
||||
</div>
|
||||
<div>
|
||||
<el-icon>
|
||||
<CloseBold v-if="validateCase(value)" />
|
||||
<Select v-else />
|
||||
</el-icon>
|
||||
<span>{{ $t('Login.passwordCase') }}</span>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { computed, reactive, ref } from 'vue'
|
||||
import { Select, CloseBold } from '@element-plus/icons-vue'
|
||||
import { validateLength, validateSpecial, validateCase } from './tools'
|
||||
const props = defineProps({
|
||||
value: {
|
||||
type: String,
|
||||
default: ''
|
||||
}
|
||||
})
|
||||
</script>
|
||||
|
||||
<style lang="less" scoped>
|
||||
.password-tip {
|
||||
background: #404040;
|
||||
color: #fff;
|
||||
font-size: 1.4rem;
|
||||
padding: 2rem;
|
||||
border-radius: 2rem;
|
||||
line-height: normal;
|
||||
|
||||
> div {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
margin-bottom: 0.5rem;
|
||||
&:last-child {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
> .el-icon {
|
||||
margin-right: 1rem;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
85
src/views/login/register.vue
Normal file
85
src/views/login/register.vue
Normal file
@@ -0,0 +1,85 @@
|
||||
<template>
|
||||
<div class="register">
|
||||
<el-form :model="formData" :rules="ruleForm" label-position="top" ref="formRef">
|
||||
<el-form-item :label="$t('Login.name')" prop="name">
|
||||
<el-input name="name" v-model="formData.name" :placeholder="$t('Login.enterName')" />
|
||||
</el-form-item>
|
||||
<el-form-item :label="$t('Login.password')" prop="password">
|
||||
<password-tip :value="formData.password" v-show="showPasswordTip" />
|
||||
<el-input
|
||||
name="password"
|
||||
v-model="formData.password"
|
||||
:placeholder="$t('Login.enterPassword')"
|
||||
type="password"
|
||||
show-password
|
||||
@blur="showPasswordTip = false"
|
||||
@focus="showPasswordTip = true"
|
||||
/>
|
||||
</el-form-item>
|
||||
|
||||
<div class="password-warning">
|
||||
<span class="icon"><svg-icon name="warning" size="12" /></span>
|
||||
<span class="label">You must satisfy ALL password conditions to register.</span>
|
||||
</div>
|
||||
<el-form-item :label="$t('Login.email')" prop="email">
|
||||
<el-input name="email" v-model="formData.email" :placeholder="$t('Login.enterEmail')" />
|
||||
</el-form-item>
|
||||
<el-form-item>
|
||||
<button type="submit" class="submit" custom="black" @click.prevent="onSubmit">
|
||||
{{ $t('Login.register') }}
|
||||
</button>
|
||||
</el-form-item>
|
||||
<el-form-item prop="privacy" class="privacy">
|
||||
<el-checkbox v-model="formData.privacy">
|
||||
<div v-html="$t('Login.agreeTermsPolicy')"></div>
|
||||
</el-checkbox>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
<other-login />
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { computed, reactive, ref } from 'vue'
|
||||
import { validateName, validateEmail, validatePass, validatePrivacy } from './tools'
|
||||
import OtherLogin from './other-login.vue'
|
||||
import PasswordTip from './password-tip.vue'
|
||||
const emit = defineEmits(['register'])
|
||||
const props = defineProps({
|
||||
name: { type: String, default: '' },
|
||||
email: { type: String, default: '' },
|
||||
password: { type: String, default: '' }
|
||||
})
|
||||
const ruleForm = reactive({
|
||||
name: [{ validator: validateName, trigger: 'change' }],
|
||||
email: [{ validator: validateEmail, trigger: 'change' }],
|
||||
password: [{ validator: validatePass, trigger: 'change' }],
|
||||
privacy: [{ validator: validatePrivacy, trigger: 'change' }]
|
||||
})
|
||||
const showPasswordTip = ref(false)
|
||||
const formData = reactive({
|
||||
name: props.name,
|
||||
email: props.email,
|
||||
password: props.password,
|
||||
privacy: false
|
||||
})
|
||||
const formRef = ref(null)
|
||||
const onSubmit = () => {
|
||||
formRef.value?.validate?.((valid) => {
|
||||
if (valid) {
|
||||
// console.log('submit!')
|
||||
emit('register', {
|
||||
name: formData.name,
|
||||
email: formData.email,
|
||||
password: formData.password
|
||||
})
|
||||
} else {
|
||||
console.warn('error submit!')
|
||||
}
|
||||
})
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="less" scoped>
|
||||
@import './less/style.less';
|
||||
</style>
|
||||
120
src/views/login/retrieve-password.vue
Normal file
120
src/views/login/retrieve-password.vue
Normal file
@@ -0,0 +1,120 @@
|
||||
<template>
|
||||
<div class="retrieve-password">
|
||||
<div class="left">
|
||||
<img class="bg" src="@/assets/images/login/left-bg.png" />
|
||||
<img class="logo" src="@/assets/images/logo-1.png" />
|
||||
</div>
|
||||
<div class="right">
|
||||
<div class="top">
|
||||
<button class="back" @click="onBack">
|
||||
<svg-icon name="arrow-left" size="37" />
|
||||
</button>
|
||||
</div>
|
||||
<div class="box">
|
||||
<img src="@/assets/images/login/elephant.png" />
|
||||
<template v-if="!isVisible">
|
||||
<div class="title">{{ $t('Login.retrievePassword') }}</div>
|
||||
<el-form :model="formData" :rules="ruleForm" label-position="top" ref="formRef">
|
||||
<el-form-item :label="$t('Login.email')" prop="email">
|
||||
<el-input
|
||||
v-model="formData.email"
|
||||
:placeholder="$t('Login.enterEmail')"
|
||||
name="email"
|
||||
/>
|
||||
</el-form-item>
|
||||
<el-form-item :label="$t('Login.password')" prop="password">
|
||||
<password-tip :value="formData.password" v-show="showPasswordTip" />
|
||||
<el-input
|
||||
v-model="formData.password"
|
||||
:placeholder="$t('Login.enterPassword')"
|
||||
type="password"
|
||||
show-password
|
||||
name="password"
|
||||
@blur="showPasswordTip = false"
|
||||
@focus="showPasswordTip = true"
|
||||
/>
|
||||
</el-form-item>
|
||||
<br />
|
||||
<br />
|
||||
<el-form-item>
|
||||
<el-button class="submit" type="primary" @click="onSubmit">{{
|
||||
$t('submit')
|
||||
}}</el-button>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
</template>
|
||||
<!-- <visible-code
|
||||
v-show="isVisible"
|
||||
type="FORGOT_PWD"
|
||||
ref="visibleCodeRef"
|
||||
:email="formData.email"
|
||||
@submit="onVerifyCode"
|
||||
/> -->
|
||||
<other-login />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import md5 from 'md5'
|
||||
import { ForgotPassword } from '@/api/user'
|
||||
import { computed, reactive, ref } from 'vue'
|
||||
import { useRouter } from 'vue-router'
|
||||
import { validateEmail, validatePass } from './tools'
|
||||
import OtherLogin from './other-login.vue'
|
||||
import emailVerify from './email-verify.vue'
|
||||
import PasswordTip from './password-tip.vue'
|
||||
import { useUserInfoStore } from '@/stores'
|
||||
const userInfoStore = useUserInfoStore()
|
||||
const router = useRouter()
|
||||
const ruleForm = reactive({
|
||||
email: [{ validator: validateEmail, trigger: 'change' }],
|
||||
password: [{ validator: validatePass, trigger: 'change' }]
|
||||
})
|
||||
const isVisible = ref(false)
|
||||
const showPasswordTip = ref(false)
|
||||
const formData = reactive({
|
||||
email: '',
|
||||
password: ''
|
||||
})
|
||||
const formRef = ref(null)
|
||||
const onBack = () => {
|
||||
if (isVisible.value) {
|
||||
isVisible.value = false
|
||||
} else {
|
||||
router.back()
|
||||
}
|
||||
}
|
||||
const visibleCodeRef = ref(null)
|
||||
const onSubmit = () => {
|
||||
formRef.value?.validate?.((valid) => {
|
||||
if (valid) {
|
||||
// console.log('submit!')
|
||||
visibleCodeRef.value?.onSendCode().then(() => {
|
||||
isVisible.value = true
|
||||
})
|
||||
} else {
|
||||
console.warn('error submit!')
|
||||
}
|
||||
})
|
||||
}
|
||||
const onVerifyCode = (code: string) => {
|
||||
// console.log(code)
|
||||
ForgotPassword({
|
||||
email: formData.email,
|
||||
newPassword: md5(formData.password),
|
||||
verificationCode: code
|
||||
})
|
||||
.then((res) => {
|
||||
if (res) router.push({ name: 'login' })
|
||||
})
|
||||
.catch((error) => {
|
||||
console.warn(error)
|
||||
})
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="less" scoped>
|
||||
@import './less/style.less';
|
||||
</style>
|
||||
54
src/views/login/tools.js
Normal file
54
src/views/login/tools.js
Normal file
@@ -0,0 +1,54 @@
|
||||
import i18n from '@/lang'
|
||||
const t = i18n.global.t
|
||||
export const validateName = (rule, value, callback) => {
|
||||
var str = ""
|
||||
if (!value) {
|
||||
str = t('Login.pleaseInputName')
|
||||
} else if (value.length < 2 || value.length > 20) {
|
||||
str = t('Login.nameLengthError', { min: 2, max: 20 })
|
||||
}
|
||||
callback(str ? new Error(str) : undefined)
|
||||
}
|
||||
export const validateEmail = (rule, value, callback) => {
|
||||
const emailRegex = /^[a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,}(\.[a-zA-Z]{2,})?$/
|
||||
var str = ''
|
||||
if (!value) {
|
||||
str = t('Login.pleaseInputEmail')
|
||||
} else if (!emailRegex.test(value)) {
|
||||
str = t('Login.emailFormatError')
|
||||
}
|
||||
callback(str ? new Error(str) : undefined)
|
||||
}
|
||||
// 检查长度
|
||||
export const validateLength = (v, min = 6, max = 20) => (v.length < 6 || v.length > 20);
|
||||
//检查特殊字符
|
||||
export const validateSpecial = (v) => (!/[!@#$%^&*()_+\-=\[\]{};':"\\|,.<>\/?]/.test(v));
|
||||
//检查大小写字母和数字
|
||||
export const validateCase = (v) => (!/[a-z]/.test(v) || !/[A-Z]/.test(v) || !/\d/.test(v));
|
||||
// 检查密码
|
||||
export const validatePass = (rule, value, callback) => {
|
||||
var str = ''
|
||||
if (validateLength(value)) {
|
||||
str = t('Login.passwordLengthError', { min: 6, max: 20 })
|
||||
} else if (validateSpecial(value)) {
|
||||
str = t('Login.passwordSpecial')
|
||||
} else if (validateCase(value)) {
|
||||
str = t('Login.passwordCase')
|
||||
}
|
||||
callback(str ? new Error(str) : undefined)
|
||||
}
|
||||
// 检查密码长度
|
||||
export const validatePassLength = (rule, value, callback) => {
|
||||
var str = ''
|
||||
if (validateLength(value)) {
|
||||
str = t('Login.passwordLengthError', { min: 6, max: 20 })
|
||||
}
|
||||
callback(str ? new Error(str) : undefined)
|
||||
}
|
||||
export const validatePrivacy = (rule, value, callback) => {
|
||||
if (!value) {
|
||||
callback(new Error(t('Login.pleaseTermsPolicy')))
|
||||
} else {
|
||||
callback()
|
||||
}
|
||||
}
|
||||
@@ -24,8 +24,44 @@
|
||||
>
|
||||
<svg-icon :name="activePath === v.path ? v.active_icon : v.icon" size="22" />
|
||||
</div>
|
||||
<div class="login">Login</div>
|
||||
<div class="profile"></div>
|
||||
<div class="login" @click="onLogin">Login</div>
|
||||
<el-popover
|
||||
ref="profilePopover"
|
||||
placement="bottom-end"
|
||||
trigger="click"
|
||||
:show-arrow="false"
|
||||
popper-style="width: 24rem; padding: 0; border-radius: 0; right: 2rem; top: 10rem;"
|
||||
>
|
||||
<template #reference><div class="profile"></div></template>
|
||||
<template #default>
|
||||
<div class="profile-content">
|
||||
<div class="info">
|
||||
<img src="@/assets/images/profile-content-bg.jpg" alt="" />
|
||||
<div class="content">
|
||||
<div class="profile"></div>
|
||||
<div class="name">Hi, Alexandra_chen</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="nav-item" @click="onMyWardrobe">
|
||||
<div class="icon"><svg-icon name="my_wardrobe" size="18" /></div>
|
||||
<div class="label">My Wardrobe</div>
|
||||
</div>
|
||||
<div class="nav-item" @click="onNotifications">
|
||||
<div class="icon"><svg-icon name="notifications" size="14" /></div>
|
||||
<div class="label">Notifications</div>
|
||||
</div>
|
||||
<div class="nav-item" @click="onSettings">
|
||||
<div class="icon"><svg-icon name="settings" size="16" /></div>
|
||||
<div class="label">Settings</div>
|
||||
</div>
|
||||
<div class="hr"></div>
|
||||
<div class="nav-item logout" @click="onLogout">
|
||||
<div class="icon"><svg-icon name="logout" size="20" /></div>
|
||||
<div class="label">Log off</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
</el-popover>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
@@ -33,6 +69,7 @@
|
||||
<script setup lang="ts">
|
||||
import { computed, ref } from 'vue'
|
||||
import { useRouter, useRoute } from 'vue-router'
|
||||
import myEvent from '@/utils/myEvent'
|
||||
const router = useRouter()
|
||||
const route = useRoute()
|
||||
const activePath = computed(() => route.path)
|
||||
@@ -70,6 +107,29 @@
|
||||
if (path === activePath.value) return
|
||||
router.push(path)
|
||||
}
|
||||
const onLogin = () => {
|
||||
myEvent.emit('openLoginDialog')
|
||||
}
|
||||
const profilePopover = ref(null)
|
||||
const hideProfilePopover = () => {
|
||||
profilePopover.value?.hide()
|
||||
}
|
||||
const onMyWardrobe = () => {
|
||||
hideProfilePopover()
|
||||
console.log('my wardrobe')
|
||||
}
|
||||
const onNotifications = () => {
|
||||
hideProfilePopover()
|
||||
console.log('notifications')
|
||||
}
|
||||
const onSettings = () => {
|
||||
hideProfilePopover()
|
||||
console.log('settings')
|
||||
}
|
||||
const onLogout = () => {
|
||||
hideProfilePopover()
|
||||
console.log('logout')
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="less">
|
||||
@@ -145,4 +205,66 @@
|
||||
}
|
||||
}
|
||||
}
|
||||
.profile-content {
|
||||
width: 100%;
|
||||
> .info {
|
||||
position: relative;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
margin-bottom: 2rem;
|
||||
> img {
|
||||
width: 100%;
|
||||
height: auto;
|
||||
}
|
||||
> .content {
|
||||
position: absolute;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
flex-direction: column;
|
||||
gap: 1rem;
|
||||
> .profile {
|
||||
width: 5rem;
|
||||
height: 5rem;
|
||||
border-radius: 50%;
|
||||
background: #cfcfcf;
|
||||
}
|
||||
> .name {
|
||||
font-size: 1.4rem;
|
||||
color: #232323;
|
||||
}
|
||||
}
|
||||
}
|
||||
> .hr {
|
||||
margin: 1.2rem 1rem;
|
||||
border-top: 0.1rem solid #c4c4c4;
|
||||
}
|
||||
> .nav-item {
|
||||
margin-left: 2rem;
|
||||
margin-bottom: 1.2rem;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
height: 2rem;
|
||||
user-select: none;
|
||||
cursor: pointer;
|
||||
> .icon {
|
||||
width: 2rem;
|
||||
height: 2rem;
|
||||
margin-right: 1rem;
|
||||
}
|
||||
> .label {
|
||||
font-family: KaiseiOpti-Regular;
|
||||
font-size: 1.2rem;
|
||||
color: #585858;
|
||||
}
|
||||
}
|
||||
> .logout {
|
||||
> .label {
|
||||
font-family: KaiseiOpti-Medium;
|
||||
font-size: 1.4rem;
|
||||
color: #232323;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
Reference in New Issue
Block a user