mfx/web-fusion
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

pk 重构ui风格

Browse Source
This commit is contained in:
没复习
2026-02-08 20:53:39 +08:00
parent 9f2b9a1997
commit 658f50cc51
7 changed files with 106 additions and 98 deletions
Download Patch File Download Diff File Expand all files Collapse all files

33
src/components/pk-mini/PkAppaside.vue
View File

@@ -55,7 +55,7 @@ const activeId = ref('pk')
const navigationModule = [
{ id: 'pk', name: 'PK', icon: 'sports_esports' },
{ id: 'forum', name: '站内信', icon: 'mail' },
// { id: 'forum', name: '站内信', icon: 'mail' },
{ id: 'message', name: '消息', icon: 'chat' },
{ id: 'mine', name: '我的', icon: 'person' }
]
@@ -121,11 +121,11 @@ onMounted(() => {
width: 50px;
height: 50px;
border-radius: 12px;
background: linear-gradient(135deg, #4fcacd, #03aba8);
background: linear-gradient(135deg, #3b82f6, #2563eb); // from-blue-500 to-blue-600
display: flex;
align-items: center;
justify-content: center;
box-shadow: 0 4px 12px rgba(79, 202, 205, 0.4);
box-shadow: 0 4px 12px rgba(59, 130, 246, 0.4); // shadow-blue-500/40
}
.logo-icon {
@@ -154,36 +154,36 @@ onMounted(() => {
align-items: center;
cursor: pointer;
transition: all 0.3s ease;
background: rgba(255, 255, 255, 0.1);
background-color: #f8fafc; // slate-50
}
.nav-card:hover {
background: rgba(255, 255, 255, 0.9);
background-color: #ffffff;
transform: scale(1.05);
}
.nav-card.active {
background: white;
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
background-color: #ffffff;
box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06); // shadow-md
}
.nav-icon {
font-size: 24px;
color: #666;
color: #64748b; // slate-500
}
.nav-card.active .nav-icon {
color: #03aba8;
color: #2563eb; // blue-600
}
.nav-name {
font-size: 10px;
color: #666;
color: #64748b; // slate-500
margin-top: 4px;
}
.nav-card.active .nav-name {
color: #03aba8;
color: #2563eb; // blue-600
}
.red-dot {
@@ -194,7 +194,7 @@ onMounted(() => {
height: 18px;
padding: 0 5px;
border-radius: 9px;
background-color: #ff4444;
background-color: #ef4444; // red-500
color: white;
font-size: 10px;
text-align: center;
@@ -215,22 +215,23 @@ onMounted(() => {
align-items: center;
cursor: pointer;
transition: all 0.3s ease;
background: rgba(255, 255, 255, 0.1);
background-color: #f8fafc; // slate-50
}
.sign-in-btn:hover {
background: rgba(255, 255, 255, 0.9);
background-color: #ffffff;
box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05); // shadow-sm
transform: scale(1.05);
}
.sign-icon {
font-size: 24px;
color: #03aba8;
color: #2563eb; // blue-600
}
.sign-text {
font-size: 10px;
color: #03aba8;
color: #2563eb; // blue-600
margin-top: 4px;
font-weight: bold;
}