From 8d987c6b1b574a9538270b73c8f27b9e3ac32aad Mon Sep 17 00:00:00 2001
From: Shu Guang <61069967+shuguangnet@users.noreply.github.com>
Date: Fri, 16 May 2025 18:25:59 +0800
Subject: [PATCH] =?UTF-8?q?fix:=20=E4=BF=AE=E6=94=B9=E5=85=A8=E5=B1=80layo?=
 =?UTF-8?q?ut?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/layouts/GlobalLayout.vue | 162 ++++++++++++++++++++++++++++-------
 1 file changed, 129 insertions(+), 33 deletions(-)

diff --git a/src/layouts/GlobalLayout.vue b/src/layouts/GlobalLayout.vue
index 8114c0b8..b059bb34 100644
--- a/src/layouts/GlobalLayout.vue
+++ b/src/layouts/GlobalLayout.vue
@@ -6,8 +6,13 @@
     :isMobile="isMobile"
     :handleMediaQuery="handleMediaQuery"
     :handleCollapse="handleCollapse"
+    :logo="'/logo.png'"
+    title="竞赛管理系统"
     fixedHeader
     fixSiderbar
+    :headerHeight="64"
+    :siderWidth="256"
+    primaryColor="#1890ff"
   >
     <template #menuHeaderRender>
       <a-avatar src="/logo.png" :size="40" />
@@ -100,56 +105,147 @@ export default {
 <style lang="less">
 @import "~ant-design-vue/es/style/themes/default.less";
 
-.footer-container {
-  text-align: center;
-}
+// 定义主题色变量
+@primary-color: #1890ff;
+@primary-hover: #40a9ff;
+@layout-header-background: linear-gradient(90deg, #1890ff, #36cfc9);
+@menu-dark-bg: #001529;
+@menu-dark-submenu-bg: #000c17;
 
-.ant-layout-footer {
-  padding: 16px 24px;
+.ant-pro-global-header {
+  background: @layout-header-background;
+  box-shadow: 0 2px 8px rgba(24, 144, 255, 0.15);
+  backdrop-filter: blur(8px);
+  
+  .ant-breadcrumb {
+    margin-left: 16px;
+    
+    a, span {
+      color: rgba(255, 255, 255, 0.85);
+      transition: color 0.3s;
+      
+      &:hover {
+        color: #ffffff;
+      }
+    }
+  }
 }
 
 .ant-pro-sider-menu-logo {
-  background-color: #002140;
+  position: relative;
+  height: 64px;
+  padding: 0 24px;
+  overflow: hidden;
+  background: linear-gradient(180deg, #1890ff, #096dd9);
+  cursor: pointer;
+  transition: all 0.3s;
+
+  h1 {
+    color: white;
+    font-size: 20px;
+    margin: 0 0 0 12px;
+    font-weight: 600;
+    opacity: 1;
+    transition: all 0.3s;
+    background: linear-gradient(90deg, #fff, #e6f7ff);
+    -webkit-background-clip: text;
+    -webkit-text-fill-color: transparent;
+  }
+
+  &:hover {
+    background: linear-gradient(180deg, #096dd9, #1890ff);
+  }
 }
 
-.ant-pro-basicLayout-content {
-  margin: 10px 10px 0 10px;
-  padding: 10px;
-  background-color: white;
-  height: 100vh;
-}
+.ant-menu-dark {
+  background: linear-gradient(180deg, #001529, #002140);
 
-.ant-pro-global-header-index-right {
-  margin-right: 8px;
+  .ant-menu-item {
+    margin: 4px 8px;
+    padding: 0 16px;
+    border-radius: 4px;
+    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
 
-  &.ant-pro-global-header-index-dark {
-    .ant-pro-global-header-index-action {
-      color: hsla(0, 0%, 100%, 0.85);
+    &:hover {
+      background: linear-gradient(90deg, #1890ff, #40a9ff) !important;
+      transform: translateX(4px);
+    }
 
-      &:hover {
-        background: #1890ff;
+    &.ant-menu-item-selected {
+      background: linear-gradient(90deg, #1890ff, #40a9ff) !important;
+      box-shadow: 0 2px 8px rgba(24, 144, 255, 0.2);
+      &::after {
+        display: none;
       }
     }
   }
 
-  .ant-pro-account-avatar {
-    .antd-pro-global-header-index-avatar {
-      margin: ~"calc((@{layout-header-height} - 24px) / 2)" 0;
-      margin-right: 8px;
-      color: @primary-color;
-      vertical-align: top;
-      background: rgba(255, 255, 255, 0.85);
-    }
-  }
+  .ant-menu-submenu {
+    &-title {
+      margin: 4px 8px;
+      padding: 0 16px;
+      border-radius: 4px;
+      transition: all 0.3s;
 
-  .menu {
-    .anticon {
-      margin-right: 8px;
+      &:hover {
+        background: rgba(24, 144, 255, 0.1) !important;
+      }
     }
 
-    .ant-dropdown-menu-item {
-      min-width: 100px;
+    &-open {
+      background: rgba(0, 0, 0, 0.2);
+      border-radius: 4px;
     }
   }
 }
+
+.ant-pro-basicLayout-content {
+  margin: 24px;
+  padding: 24px;
+  background: #f0f2f5;
+  border-radius: 8px;
+  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.05);
+  min-height: calc(100vh - 128px);
+}
+
+.footer-container {
+  text-align: center;
+  color: rgba(0, 0, 0, 0.45);
+  padding: 16px;
+  background: white;
+  border-radius: 4px;
+  margin: 0 24px;
+  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.05);
+  
+  &:hover {
+    color: rgba(0, 0, 0, 0.65);
+  }
+}
+
+.ant-pro-global-header-index-right {
+  margin-right: 16px;
+  display: flex;
+  align-items: center;
+  height: 100%;
+
+  .ant-pro-global-header-index-action {
+    padding: 0 12px;
+    cursor: pointer;
+    display: flex;
+    align-items: center;
+    height: 100%;
+    color: white;
+    transition: all 0.3s;
+
+    &:hover {
+      background: rgba(255, 255, 255, 0.1);
+    }
+  }
+
+  .ant-avatar {
+    margin-right: 8px;
+    border: 2px solid rgba(255, 255, 255, 0.2);
+    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
+  }
+}
 </style>