固定顶部导航栏与标签页

ruoyi-ui/src/assets/styles/index.scss

@@ -182,7 +182,7 @@ aside {
   position: fixed;
   top: 0;
   right: 0;
-  // left: 0; 
+  // left: 0;
   width: 100%;
   z-index: 999;
   box-shadow: 0 1px 4px rgba(0, 21, 41, 0.08);
@@ -190,6 +190,7 @@ aside {
 
 // 调整内容区域位置（防止被导航栏遮挡）
 .app-main {
-  padding-top: 50px; // 根据导航栏实际高度调整
+  padding-top: 78px; // 根据导航栏实际高度调整
-  min-height: calc(100vh - 50px); // 保持高度正确
+  min-height: calc(100vh - 78px); // 保持高度正确
-}
+}
+

ruoyi-ui/src/layout/components/TagsView/index.vue

@@ -1,5 +1,5 @@
 <template>
-  <div id="tags-view-container" class="tags-view-container">
+  <div id="tags-view-container" class="tags-view-container fixed-tags">
     <scroll-pane ref="scrollPane" class="tags-view-wrapper" @scroll="handleScroll">
       <router-link
         v-for="tag in visitedViews"
@@ -240,6 +240,31 @@ export default {
 </script>
 
 <style lang="scss" scoped>
+/* 添加固定定位样式 */
+.tags-view-container.fixed-tags {
+  position: fixed;
+  top: 44px; /* 导航栏高度 */
+  right: 0;
+  left: 200px; /* 侧边栏宽度 */
+  z-index: 998; /* 低于导航栏 */
+  height: 34px; /* 标签页高度 */
+  transition: left 0.28s;
+}
+
+/* 侧边栏收起时的样式 */
+.hideSidebar .tags-view-container.fixed-tags {
+  left: 54px;
+}
+
+/* 侧边栏隐藏时的样式 */
+.sidebarHide .tags-view-container.fixed-tags {
+  left: 0;
+}
+
+/* 移动端样式 */
+.mobile .tags-view-container.fixed-tags {
+  left: 0;
+}
 .tags-view-container {
   height: 32px;
   width: 100%;
@@ -303,9 +328,7 @@ export default {
     }
   }
 }
-</style>
 
-<style lang="scss">
 //reset element css of el-icon-close
 .tags-view-wrapper {
   .tags-view-item {