fix:样式优化完善。

2025-12-14 09:10:30 +08:00
parent c60f498355
commit 0e98dfe4c4
2 changed files with 142 additions and 14 deletions
--- a/src/views/HomePage.vue
+++ b/src/views/HomePage.vue
@@ -92,7 +92,7 @@ export default {
      superCategories: [],
      categories: [],
      activeSuperCategoryId: null, // 当前Tab的大分类ID
-      viewMode: 'simple' // 'colorful' 或 'simple'
+      viewMode: this.isMobile() ? 'colorful' : 'simple' // 手机端默认炫彩版，PC端默认简洁版
    }
  },

@@ -100,6 +100,19 @@ export default {
    this.loadData()
  },

+  mounted() {
+    // 动态调整内容区域的padding-top，避免被Tab遮挡
+    this.$nextTick(() => {
+      this.adjustContainerPadding()
+    })
+    // 监听窗口大小变化
+    window.addEventListener('resize', this.adjustContainerPadding)
+  },
+
+  beforeDestroy() {
+    window.removeEventListener('resize', this.adjustContainerPadding)
+  },
+
  computed: {
    // 当前激活的大分类下的分类列表
    currentCategories() {
@@ -109,6 +122,30 @@ export default {
  },

  methods: {
+    // 动态调整容器padding-top
+    adjustContainerPadding() {
+      setTimeout(() => {
+        const tabElement = document.querySelector('.super-category-tabs')
+        const container = document.querySelector('.workbench-container')
+        if (tabElement && container) {
+          const headerHeight = 76 // header固定高度
+          const tabHeight = tabElement.offsetHeight // Tab区域总高度（包含padding）
+          const tabPadding = 30 // Tab的上下padding总和 (15*2)
+          // 减少间距让布局紧凑，减去20像素
+          const newPaddingTop = headerHeight + tabHeight - tabPadding - 20
+          console.log('调整padding-top:', newPaddingTop + 'px', 'Tab高度:', tabHeight)
+          container.style.paddingTop = `${newPaddingTop}px`
+        } else {
+          console.log('元素未找到:', { tabElement, container })
+        }
+      }, 100)
+    },
+
+    // 判断是否为移动端
+    isMobile() {
+      return window.innerWidth <= 600
+    },
+
    // 根据图标文字长度返回字体大小class
    getIconSizeClass(icon) {
      if (!icon) return 'icon-size-default'
@@ -132,6 +169,10 @@ export default {
    // 切换Tab
    switchTab(superCategoryId) {
      this.activeSuperCategoryId = superCategoryId
+      // 切换Tab后重新调整padding
+      this.$nextTick(() => {
+        this.adjustContainerPadding()
+      })
    },

    /**
@@ -206,6 +247,11 @@ export default {
          if (superCategories.length > 0 && !this.activeSuperCategoryId) {
            this.activeSuperCategoryId = superCategories[0].id
          }
+
+          // 数据加载完成后调整padding
+          this.$nextTick(() => {
+            this.adjustContainerPadding()
+          })
        } else {
          console.error('加载数据失败')
          this.loadDefaultData()
@@ -356,15 +402,17 @@ export default {
  min-height: 100vh;
  background: @primary-gradient;
  padding: @header-height 0 0;
-  overflow: visible;
+  overflow-x: hidden; // 防止横向滚动
+  overflow-y: auto; // 允许纵向滚动
 }

 .workbench-container {
  max-width: 1820px;
  margin: 0 auto;
  padding: @spacing-md;
-  padding-top: 89px; // 为固定的 Tab 区域预留空间 (76px标题栏 + 20px上边距 + 40px Tab高度)
+  padding-top: 76px; // 初始值设为header高度，JavaScript会动态调整
  overflow: visible;
+  min-height: calc(100vh - 76px); // 确保容器至少占满视口高度
 }

 // 大分类 Tab 标签样式
@@ -378,7 +426,7 @@ export default {
  flex-wrap: wrap;
  gap: 12px;
  padding: @spacing-md @spacing-md;
-  background: rgba(102, 126, 234, 0.95);
+  background: #667eea !important; // 使用纯色背景，强制覆盖
  backdrop-filter: blur(10px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);

@@ -449,10 +497,11 @@ export default {
  left: 0;
  right: 0;
  width: 100%;
+  height: @header-height; // 固定高度
  display: flex;
  align-items: center;
  justify-content: center;
-  padding: @spacing-md 40px;
+  padding: 0 40px; // 只保留左右padding，去掉上下padding
  background: @primary-gradient;
  z-index: 99;

@@ -555,6 +604,8 @@ export default {
  gap: 20px;
  align-items: flex-start;
  overflow: visible;
+  position: relative;
+  z-index: 1; // 确保整个工具容器低于Tab区域
 }

 .tool-category {
@@ -574,7 +625,6 @@ export default {
    line-height: 1.5;
    text-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
    position: relative;
-    z-index: 1;
  }

  .category-items {
@@ -597,11 +647,14 @@ export default {
  transition: all 0.3s ease;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
  width: @card-width;
+  position: relative;
+  z-index: 1; // 确保卡片低于Tab区域

  &:hover {
    transform: translateY(-4px);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.2);
    background: @white-color;
+    z-index: 10; // 悬浮时也保持低于Tab区域
  }
 }

@@ -619,7 +672,6 @@ export default {
  border: 1px solid rgba(255, 255, 255, 0.5);
  backdrop-filter: blur(10px);
  position: relative;
-  z-index: 1;
  flex: 0 0 auto;

  .simple-tool-name {
@@ -694,7 +746,7 @@ export default {
    box-shadow: 0 6px 20px rgba(102, 126, 234, 0.25);
    background: white;
    border-color: rgba(102, 126, 234, 0.3);
-    z-index: 999;
+    z-index: 10; // 降低悬浮时的z-index，确保低于Tab区域

    .simple-tool-name {
      background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
--- a/src/views/ManagePage.vue
+++ b/src/views/ManagePage.vue
@@ -371,6 +371,16 @@ export default {
  mounted() {
    // 初始化拖拽功能
    this.initSortable()
+    // 动态调整内容区域的padding-top，避免被固定区域遮挡
+    this.$nextTick(() => {
+      this.adjustContainerPadding()
+    })
+    // 监听窗口大小变化
+    window.addEventListener('resize', this.adjustContainerPadding)
+  },
+
+  beforeDestroy() {
+    window.removeEventListener('resize', this.adjustContainerPadding)
  },

  updated() {
@@ -381,6 +391,22 @@ export default {
  },

  methods: {
+    // 动态调整容器padding-top
+    adjustContainerPadding() {
+      setTimeout(() => {
+        const fixedSection = document.querySelector('.fixed-section')
+        const container = document.querySelector('.manage-container')
+        if (fixedSection && container) {
+          const headerHeight = 64 // header固定高度
+          const fixedSectionHeight = fixedSection.offsetHeight // 固定区域总高度（包含padding）
+          // 应该增加padding-top，让内容往下移，减少被遮挡
+          const newPaddingTop = headerHeight + fixedSectionHeight - 53
+          console.log('ManagePage调整padding-top:', newPaddingTop + 'px', '固定区域高度:', fixedSectionHeight)
+          container.style.paddingTop = `${newPaddingTop}px`
+        }
+      }, 100)
+    },
+
    // 根据图标文字长度返回字体大小class
    getIconSizeClass(icon) {
      if (!icon) return 'icon-size-default'
@@ -436,6 +462,10 @@ export default {
    // 切换Tab
    switchTab(superCategoryId) {
      this.activeSuperCategoryId = superCategoryId
+      // 切换Tab后重新调整padding
+      this.$nextTick(() => {
+        this.adjustContainerPadding()
+      })
    },

    async loadData() {
@@ -495,6 +525,11 @@ export default {
          if (superCategories.length > 0 && !this.activeSuperCategoryId) {
            this.activeSuperCategoryId = superCategories[0].id
          }
+
+          // 数据加载完成后调整padding
+          this.$nextTick(() => {
+            this.adjustContainerPadding()
+          })
        }
      } catch (error) {
        console.error('加载数据异常:', error)
@@ -1106,7 +1141,8 @@ export default {
  left: 0;
  right: 0;
  background: @primary-gradient;
-  padding: 20px 40px;
+  height: 64px; // 固定高度
+  padding: 0 40px; // 只保留左右padding，去掉上下padding
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  display: flex;
  justify-content: center; // PC端居中
@@ -1164,20 +1200,20 @@ export default {

 .manage-container {
  padding: 10px 8px;
-  padding-top: 180px; // 减小与固定区域的间距
+  padding-top: 64px; // 初始值，JavaScript会动态调整
 }

 // 固定的书签分类区域
 .fixed-section {
  position: fixed;
-  top:70px;
+  top: 64px; // 紧贴header底部
  left: 0;
  right: 0;
  z-index: 999;
  margin: 0;
  border-radius: 0;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
-  padding: 28px 20px 20px 20px !important; // 顶部增加更多内边距
+  padding: 20px; // PC端padding
 }

 .manage-section {
@@ -2025,10 +2061,16 @@ button {
  .manage-container {
    padding: 16px 8px;
    padding-top: 200px; // 手机端为固定区域预留更多空间
+
+    // 手机端固定区域增加左右padding
+    .fixed-section {
+      padding-left: 12px !important;
+      padding-right: 12px !important;
+    }
  }

-  .fixed-section {
-    padding: 12px 8px;
+  .manage-section.fixed-section {
+    padding: 12px 12px !important; // 手机端左右增加间距，提高优先级
  }

  .category-list {
@@ -2037,6 +2079,40 @@ button {

  .tool-list {
    grid-template-columns: 1fr !important;
+
+    .tool-item {
+      padding: 12px; // 增加padding防止按钮被截断
+      overflow: visible; // 允许内容超出
+
+      .tool-footer {
+        flex-wrap: wrap; // 允许换行
+
+        .tool-url {
+          flex: 1 1 100%; // 手机端让URL占据整行
+          margin-bottom: 8px;
+          word-break: break-all; // 强制换行，防止超出
+          overflow-wrap: break-word; // 兼容性处理
+          white-space: normal !important; // 覆盖PC端的nowrap
+          overflow: visible !important; // 覆盖PC端的hidden
+          text-overflow: clip !important; // 覆盖PC端的ellipsis
+        }
+
+        .tool-actions {
+          flex: 0 0 auto; // 不拉伸，按内容宽度
+          justify-content: flex-end;
+          width: 100%; // 占据全宽
+        }
+      }
+    }
+  }
+
+  // 手机端增大按钮，更易点击
+  button {
+    &.edit-btn, &.delete-btn {
+      padding: 8px 12px !important;
+      font-size: 13px !important;
+      min-width: 50px;
+    }
  }
 }
 </style>