style(userInfo): 更新 UserInfo 组件样式

- 修改背景色、文本颜色等样式,以适应新的设计主题
- 优化部分样式以提升视觉效果和用户体验
This commit is contained in:
高手 2025-02-17 00:21:40 +08:00
parent 2ef2f53ce6
commit 293f30bd87

View File

@ -72,8 +72,7 @@ onUnmounted(() => {
width: 32px; width: 32px;
height: 32px; height: 32px;
border-radius: 50%; border-radius: 50%;
background: var(--c-brand); background: var(--vp-c-bg);
/* color: white; */
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
@ -95,7 +94,7 @@ onUnmounted(() => {
position: fixed; position: fixed;
top: 50px; top: 50px;
right: 20px; right: 20px;
background: var(--c-bg); background: var(--vp-c-bg);
border-radius: 8px; border-radius: 8px;
box-shadow: 0 2px 12px rgba(0, 0, 0, 0.15); box-shadow: 0 2px 12px rgba(0, 0, 0, 0.15);
padding: 1rem; padding: 1rem;
@ -110,7 +109,7 @@ onUnmounted(() => {
right: 10px; right: 10px;
width: 12px; width: 12px;
height: 12px; height: 12px;
background: var(--c-bg); background: var(--vp-c-bg);
transform: rotate(45deg); transform: rotate(45deg);
box-shadow: -2px -2px 5px rgba(0, 0, 0, 0.04); box-shadow: -2px -2px 5px rgba(0, 0, 0, 0.04);
} }
@ -128,13 +127,13 @@ onUnmounted(() => {
align-items: center; align-items: center;
gap: 0.8rem; gap: 0.8rem;
padding-bottom: 0.8rem; padding-bottom: 0.8rem;
border-bottom: 1px solid var(--c-border); border-bottom: 1px solid var(--vp-c-divider);
} }
.user-avatar { .user-avatar {
width: 24px; width: 24px;
height: 24px; height: 24px;
color: var(--c-text-lighter); color: var(--vp-c-text-2);
} }
.logout-icon { .logout-icon {
@ -144,7 +143,7 @@ onUnmounted(() => {
.fullname { .fullname {
font-size: 0.9rem; font-size: 0.9rem;
color: var(--c-text); color: var(--vp-c-text-1);
} }
.logout-btn { .logout-btn {
@ -153,13 +152,13 @@ onUnmounted(() => {
gap: 0.5rem; gap: 0.5rem;
padding: 0.5rem; padding: 0.5rem;
border-radius: 4px; border-radius: 4px;
color: var(--c-text); color: var(--vp-c-text-1);
text-decoration: none; text-decoration: none;
transition: all 0.2s; transition: all 0.2s;
} }
.logout-btn:hover { .logout-btn:hover {
background: var(--c-brand-light); background: var(--vp-c-brand);
color: white; color: white;
} }
</style> </style>