orion/FileCodeBoxFronted2026
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

🎨 调整2026莫兰迪主题色

Browse Source
This commit is contained in:
Orion
2026-06-05 13:01:09 +08:00
parent 4eb2146206
commit 0be56a5b0c
13 changed files with 376 additions and 102 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/layout/AdminLayout/AdminLayout.vue
+18 -18
View File
@@ -1,15 +1,15 @@
<template>
<div
class="flex h-screen overflow-hidden flex-col transition-colors duration-300 lg:flex-row"
:class="[isDarkMode ? 'bg-[#172126]' : 'bg-[#edf3f4]']"
:class="[isDarkMode ? 'bg-[#10191e]' : 'bg-[#dfe9eb]']"
>
<!-- Sidebar -->
<aside
class="fixed inset-y-0 left-0 z-50 flex h-full w-64 shrink-0 transform flex-col border-r lg:relative lg:h-screen lg:translate-x-0"
:class="[
isDarkMode
? 'border-[#344951] bg-[#203039]/90 backdrop-filter backdrop-blur-xl'
: 'border-[#d5e1e3] bg-[#f8fbfb]/92 backdrop-blur-xl',
? 'border-[#31454d] bg-[#1a2930]/92 backdrop-filter backdrop-blur-xl'
: 'border-[#c8d7da] bg-[#f2f6f5]/92 backdrop-blur-xl',
isSidebarOpen ? 'translate-x-0' : '-translate-x-full',
'transition-transform duration-300 ease-in-out lg:transition-none'
]"
@@ -21,19 +21,19 @@
>
<div class="flex items-center">
<div
class="rounded-full bg-gradient-to-r from-[#6f9cad] via-[#91b7b3] to-[#b7b0c4] p-1 animate-spin-slow"
class="rounded-full bg-gradient-to-r from-[#6f98a6] via-[#8eaaa8] to-[#b7b2a1] p-1 animate-spin-slow"
>
<div class="rounded-full p-1" :class="[isDarkMode ? 'bg-[#203039]' : 'bg-[#f8fbfb]']">
<div class="rounded-full p-1" :class="[isDarkMode ? 'bg-[#1a2930]' : 'bg-[#f2f6f5]']">
<BoxIcon
class="w-6 h-6"
:class="[isDarkMode ? 'text-[#9cc5d2]' : 'text-[#5f8fa3]']"
:class="[isDarkMode ? 'text-[#a5c8d0]' : 'text-[#5f8796]']"
/>
</div>
</div>
<h1
@click="router.push('/')"
class="ml-2 text-xl font-semibold cursor-pointer"
:class="[isDarkMode ? 'text-[#eef5f5]' : 'text-[#263f48]']"
:class="[isDarkMode ? 'text-[#edf4f4]' : 'text-[#2d4650]']"
>
{{ t('common.appName') }}
</h1>
@@ -53,11 +53,11 @@
:class="[
route.name === item.id
? isDarkMode
? 'border-[#9cc5d2] bg-[#2b414a] text-[#d8ebef]'
: 'border-[#6f9cad] bg-[#e3eef0] text-[#315f73]'
? 'border-[#a5c8d0] bg-[#294047] text-[#dceff1]'
: 'border-[#6f98a6] bg-[#d5e4e6] text-[#315c69]'
: isDarkMode
? 'border-transparent text-[#aabdc2] hover:bg-[#263941]'
: 'border-transparent text-[#5b737b] hover:bg-[#e7f0f1]'
? 'border-transparent text-[#aebfc3] hover:bg-[#22353c]'
: 'border-transparent text-[#586f75] hover:bg-[#e5eeee]'
]"
@click="closeSidebarForMobile"
>
@@ -69,14 +69,14 @@
</nav>
<!-- 退出登录按钮 -->
<div class="p-4 border-t" :class="[isDarkMode ? 'border-[#344951]' : 'border-[#d5e1e3]']">
<div class="p-4 border-t" :class="[isDarkMode ? 'border-[#31454d]' : 'border-[#c8d7da]']">
<button
@click="handleLogout"
class="flex items-center w-full p-2 rounded-lg transition-colors duration-200"
:class="[
isDarkMode
? 'text-[#aabdc2] hover:bg-[#263941] hover:text-[#eef5f5]'
: 'text-[#5b737b] hover:bg-[#e7f0f1] hover:text-[#263f48]'
? 'text-[#aebfc3] hover:bg-[#22353c] hover:text-[#edf4f4]'
: 'text-[#586f75] hover:bg-[#e5eeee] hover:text-[#2d4650]'
]"
>
<LogOutIcon class="w-5 h-5 mr-3" />
@@ -90,7 +90,7 @@
<!-- Header -->
<header
class="shadow-md border-b transition-colors duration-300 h-16"
:class="[isDarkMode ? 'bg-[#203039] border-[#344951]' : 'bg-[#f8fbfb] border-[#d5e1e3]']"
:class="[isDarkMode ? 'bg-[#1a2930] border-[#31454d]' : 'bg-[#f2f6f5] border-[#c8d7da]']"
>
<div class="flex items-center justify-between h-16 px-4">
<button @click="toggleSidebar" class="lg:hidden">
@@ -102,7 +102,7 @@
<!-- Content -->
<main
class="min-h-0 flex-1 overflow-y-auto transition-colors duration-300 custom-scrollbar"
:class="[isDarkMode ? 'bg-[#172126]' : 'bg-[#edf3f4]']"
:class="[isDarkMode ? 'bg-[#10191e]' : 'bg-[#dfe9eb]']"
>
<router-view />
</main>
@@ -230,11 +230,11 @@ const handleLogout = async () => {
}
input:checked + .slider {
background-color: #4f46e5;
background-color: #6f9688;
}
.dark input:checked + .slider {
background-color: #4f46e5;
background-color: #6f9688;
}
.slider:before {