You cannot select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
|
|
|
|
<!DOCTYPE html>
|
|
|
|
|
<html>
|
|
|
|
|
|
|
|
|
|
<head>
|
|
|
|
|
<meta name="description" content="用户头像和登录状态组件">
|
|
|
|
|
</head>
|
|
|
|
|
|
|
|
|
|
<style>
|
|
|
|
|
.header-user {
|
|
|
|
|
display: flex;
|
|
|
|
|
align-items: center;
|
|
|
|
|
gap: 12px;
|
|
|
|
|
padding: 8px 12px;
|
|
|
|
|
border-radius: 20px;
|
|
|
|
|
transition: all 0.2s ease;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.header-user:hover {
|
|
|
|
|
background: rgba(0, 0, 0, 0.05);
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.user-avatar {
|
|
|
|
|
width: 36px;
|
|
|
|
|
height: 36px;
|
|
|
|
|
border-radius: 50%;
|
|
|
|
|
object-fit: cover;
|
|
|
|
|
border: 2px solid #f8f9fa;
|
|
|
|
|
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.user-name {
|
|
|
|
|
font-size: 14px;
|
|
|
|
|
font-weight: 500;
|
|
|
|
|
color: #333;
|
|
|
|
|
text-decoration: none;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.user-name:hover {
|
|
|
|
|
color: #1e88e5;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.auth-btn {
|
|
|
|
|
padding: 6px 16px;
|
|
|
|
|
border-radius: 20px;
|
|
|
|
|
font-size: 14px;
|
|
|
|
|
font-weight: 500;
|
|
|
|
|
cursor: pointer;
|
|
|
|
|
transition: all 0.2s ease;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.login-btn {
|
|
|
|
|
background: #1e88e5;
|
|
|
|
|
color: white;
|
|
|
|
|
border: none;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.login-btn:hover {
|
|
|
|
|
background: #1565c0;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.logout-btn {
|
|
|
|
|
background: transparent;
|
|
|
|
|
color: #f44336;
|
|
|
|
|
border: 1px solid #f44336;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.logout-btn:hover {
|
|
|
|
|
background: rgba(244, 67, 54, 0.1);
|
|
|
|
|
}
|
|
|
|
|
</style>
|
|
|
|
|
|
|
|
|
|
<body>
|
|
|
|
|
<div class="header-user ml-auto" v-if="$G.user.name">
|
|
|
|
|
<img :src="$G.user.icon" class="user-avatar" alt="用户头像">
|
|
|
|
|
<a href='/profile' class="user-name">{{ $G.user.name }}</a>
|
|
|
|
|
<button @click="$G.token.logout()" class="auth-btn logout-btn">
|
|
|
|
|
退出
|
|
|
|
|
</button>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="header-user" v-else>
|
|
|
|
|
<a href="/login" class="auth-btn login-btn">
|
|
|
|
|
登录
|
|
|
|
|
</a>
|
|
|
|
|
</div>
|
|
|
|
|
</body>
|
|
|
|
|
|
|
|
|
|
</html>
|
