marchglow/webgame-frontend
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: 使用自定义主题色

Browse Source
This commit is contained in:
Azure
2026-06-18 11:01:11 +08:00
parent c1e292ea18
commit 3bd6e972ea
12 changed files with 111 additions and 44 deletions
Download Patch File Download Diff File Expand all files Collapse all files

24
src/layouts/BaseLayout.vue
View File

@@ -58,7 +58,8 @@ const { activeGameIcon, activeGameName } = storeToRefs(baseLayoutStore)
width: 100%;
height: 30px;
padding: 0 12px;
background-color: #fde68a; // amber-200
background-color: var(--bg-topbar);
border-bottom: 1px solid var(--border-default);
}
.base-layout__topbar-title {
@@ -83,7 +84,7 @@ const { activeGameIcon, activeGameName } = storeToRefs(baseLayoutStore)
font-weight: 500;
line-height: 1;
height: 100%;
color: #1a1a1a;
color: var(--text-primary);
}
.base-layout__main {
@@ -99,8 +100,9 @@ const { activeGameIcon, activeGameName } = storeToRefs(baseLayoutStore)
position: relative;
width: 400px;
height: 100%;
padding: 8px;
background-color: #fcd34d; // amber-300
padding: var(--space-sm);
background-color: var(--bg-sidebar);
border-right: 1px solid var(--border-default);
}
.base-layout__sidebar-content {
@@ -109,7 +111,6 @@ const { activeGameIcon, activeGameName } = storeToRefs(baseLayoutStore)
height: 100%;
width: 100%;
padding-bottom: 72px;
background-color: #f59e0b; // amber-500
}
.base-layout__sidebar-bottom {
@@ -120,7 +121,7 @@ const { activeGameIcon, activeGameName } = storeToRefs(baseLayoutStore)
height: 72px;
left: 0;
bottom: 0;
padding: 8px;
padding: var(--space-sm);
}
.base-layout__sidebar-bottom-inner {
@@ -128,8 +129,10 @@ const { activeGameIcon, activeGameName } = storeToRefs(baseLayoutStore)
flex: 1;
width: 100%;
height: 100%;
border-radius: 12px;
background-color: #92400e; // amber-800
border-radius: var(--radius-md);
background-color: var(--bg-surface);
box-shadow: var(--shadow-sm);
border: 1px solid var(--border-light);
}
.base-layout__resize-handle {
@@ -139,9 +142,10 @@ const { activeGameIcon, activeGameName } = storeToRefs(baseLayoutStore)
top: 0;
right: 0;
cursor: ew-resize;
transition: background-color 0.2s ease;
&:hover {
background-color: #d1d5db; // gray-300
background-color: var(--border-default);
}
}
@@ -150,6 +154,6 @@ const { activeGameIcon, activeGameName } = storeToRefs(baseLayoutStore)
flex: 1;
width: 100%;
height: 100%;
background-color: #fbbf24; // amber-400
background-color: var(--bg-body);
}
</style>