移动端适配

schoolNewsWeb/src/components/base/FloatingSidebar.vue

@@ -210,10 +210,95 @@ function handleClick(menu: SysMenu) {
   }
 }
 
-/* 响应式设计 */
+/* 移动端响应式设计 - 水平标签栏 */
 @media (max-width: 768px) {
   .floating-sidebar {
-    width: 160px;
+    width: 100%;
+    height: auto;
+    flex-direction: row;
+    border-radius: 0 0 8px 8px; // 顶部圆角移除，与main-content连接
+  }
+  
+  .sidebar-content {
+    width: 100%;
+    flex-direction: row;
+  }
+  
+  .sidebar-nav {
+    flex-direction: row;
+    padding: 10px 0;
+    gap: 0;
+    overflow-x: auto;
+    overflow-y: hidden;
+    
+    /* 水平滚动条样式 */
+    &::-webkit-scrollbar {
+      height: 4px;
+      width: auto;
+    }
+  }
+  
+  .sidebar-item {
+    flex: 1;
+    min-width: 60px;
+    height: 44px;
+    justify-content: center;
+    
+    &::before {
+      display: none; // 移动端隐藏左侧指示条
+    }
+    
+    &.active::after {
+      content: '';
+      position: absolute;
+      bottom: -10px;
+      left: 50%;
+      transform: translateX(-50%);
+      width: 20px;
+      height: 3px;
+      background: #C62828;
+      border-radius: 2px;
+    }
+    
+    // Resource theme 在移动端的特殊样式
+    &.theme-resource {
+      padding: 0 5px;
+      margin: 0;
+      
+      &.active {
+        background: transparent;
+        border-radius: 0;
+        margin: 0;
+        height: 44px;
+        
+        &::after {
+          right: auto;
+          top: auto;
+          width: 20px;
+          height: 3px;
+          background: #C62828;
+          opacity: 1;
+          bottom: -10px;
+          left: 50%;
+          transform: translateX(-50%);
+          border-radius: 2px;
+        }
+        
+        .sidebar-link {
+          color: #C62828;
+        }
+      }
+    }
+  }
+  
+  .sidebar-link {
+    padding: 0 8px;
+    font-size: 14px;
+    justify-content: center;
+    
+    .theme-resource & {
+      margin-left: 0; // 移动端取消左边距
+    }
   }
 }
 </style>