60 lines
1.0 KiB
Vue
60 lines
1.0 KiB
Vue
|
<script setup>
|
|||
|
|
import {ref} from 'vue';
|
|||
|
|
import store from "../../store/index.js";
|
|||
|
|
|
|||
|
|
</script>
|
|||
|
|
|
|||
|
|
<template>
|
|||
|
|
<div class="user-info-card">
|
|||
|
|
<div style="position: relative;">
|
|||
|
|
<img :src="store.getters.profileImage" alt="User Avatar" class="avatar"/>
|
|||
|
|
</div>
|
|||
|
|
<div class="user-info">
|
|||
|
|
<h3>{{ store.state.userInfo.username }}</h3>
|
|||
|
|
<p>注册日期：{{ store.state.userInfo.birth?.split(' ')[0] || '未知' }}</p>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</template>
|
|||
|
|
|
|||
|
|
<style scoped>
|
|||
|
|
.user-info-card {
|
|||
|
|
width: 100%;
|
|||
|
|
overflow-y: auto;
|
|||
|
|
display: flex;
|
|||
|
|
flex-direction: column;
|
|||
|
|
align-items: center;
|
|||
|
|
border-radius: 20px;
|
|||
|
|
padding: 30px 0;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.user-info-card h3 button {
|
|||
|
|
color: #fff;
|
|||
|
|
font-size: 24px;
|
|||
|
|
margin-top: 10px;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.theme-light .user-info-card h3 {
|
|||
|
|
color: #252525;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.user-info-card p {
|
|||
|
|
font-size: 16px;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
|
|||
|
|
.avatar {
|
|||
|
|
width: 120px;
|
|||
|
|
height: 120px;
|
|||
|
|
object-fit: cover;
|
|||
|
|
border-radius: 50%;
|
|||
|
|
margin-bottom: 20px;
|
|||
|
|
transition: transform 2s ease;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.avatar:hover {
|
|||
|
|
transform: rotate(3600deg);
|
|||
|
|
transition: transform 10s ease;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
</style>
|