1

src/layout/components/Sidebar/Logo.vue

@@ -65,6 +65,12 @@ export default {
   overflow: hidden;
   border-bottom: 1px solid rgba(255, 255, 255, 0.1);
   backdrop-filter: blur(10px);
+  
+  // 移动端优化
+  @media (max-width: 768px) {
+    height: 50px;
+    line-height: 50px;
+  }
 
   & .sidebar-logo-link {
     height: 100%;
@@ -73,6 +79,10 @@ export default {
     align-items: center;
     justify-content: center;
     padding: 0 20px;
+    
+    @media (max-width: 768px) {
+      padding: 0 15px;
+    }
 
     & .logo-icon {
       display: flex;
@@ -86,11 +96,21 @@ export default {
       margin-right: 15px;
       transition: all 0.3s ease;
       box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
+      
+      @media (max-width: 768px) {
+        width: 36px;
+        height: 36px;
+        margin-right: 10px;
+      }
 
       i {
         font-size: 22px;
         color: #ffffff;
         text-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
+        
+        @media (max-width: 768px) {
+          font-size: 18px;
+        }
       }
 
       &:hover {
@@ -99,6 +119,10 @@ export default {
         transform: scale(1.05);
         box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
       }
+      
+      &:active {
+        transform: scale(0.95);
+      }
     }
 
     & .sidebar-title {
@@ -110,6 +134,10 @@ export default {
       font-family: Avenir, Helvetica Neue, Arial, Helvetica, sans-serif;
       vertical-align: middle;
       text-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
+      
+      @media (max-width: 768px) {
+        font-size: 14px;
+      }
     }
   }