2026-05-18 15:22:08 +08:00
|
|
|
<template>
|
|
|
|
|
<div class="my-account">
|
|
|
|
|
<div class="header">
|
|
|
|
|
<h1 class="title">
|
|
|
|
|
<span class="iconfont icon-tubiao-"></span>
|
2026-05-18 16:46:55 +08:00
|
|
|
<span>My account</span>
|
2026-05-18 15:22:08 +08:00
|
|
|
</h1>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="content" v-if="!token">
|
|
|
|
|
<Login />
|
|
|
|
|
<Register />
|
|
|
|
|
</div>
|
|
|
|
|
<div class="content" v-else>
|
|
|
|
|
<AccountInfo />
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
</template>
|
|
|
|
|
<script setup lang="ts">
|
|
|
|
|
import { computed } from 'vue'
|
|
|
|
|
import Login from './login.vue'
|
|
|
|
|
import Register from './register.vue'
|
|
|
|
|
import AccountInfo from './account-info.vue'
|
|
|
|
|
import { useUserInfoStore } from '@/stores/userInfo'
|
|
|
|
|
const userInfoStore = useUserInfoStore()
|
|
|
|
|
const token = computed(() => userInfoStore.state.token)
|
|
|
|
|
</script>
|
|
|
|
|
|
|
|
|
|
<style scoped lang="less">
|
|
|
|
|
.my-account {
|
|
|
|
|
background-color: #f9f9f9;
|
|
|
|
|
> .header {
|
|
|
|
|
border-top: var(--main-header-height, 85px) solid #000;
|
|
|
|
|
background-color: #666;
|
|
|
|
|
padding: 32px 0;
|
|
|
|
|
color: #fff;
|
|
|
|
|
margin-bottom: 32px;
|
|
|
|
|
> h1 {
|
|
|
|
|
display: flex;
|
|
|
|
|
align-items: center;
|
|
|
|
|
justify-content: center;
|
|
|
|
|
height: 80px;
|
|
|
|
|
> span {
|
|
|
|
|
font-size: 40px;
|
|
|
|
|
font-weight: 400;
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
> .content {
|
|
|
|
|
max-width: 1200px;
|
|
|
|
|
margin: 0 auto;
|
|
|
|
|
padding-bottom: 80px;
|
|
|
|
|
display: flex;
|
|
|
|
|
align-items: flex-start;
|
|
|
|
|
gap: 60px;
|
|
|
|
|
> * {
|
|
|
|
|
flex: 1;
|
|
|
|
|
}
|
|
|
|
|
animation: opacity-in 0.3s linear both;
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
</style>
|
