调试

src/views/portal/course/Index.vue

@@ -71,7 +71,7 @@
           <!-- 内容导航 -->
           <div class="topNav" v-if="!newData">
             <div class="search-div nav" style="flex: 1;height: auto;background: #fff;">
-              <div class="nav-primary" style="gap: 15px;display: flex">
+              <div class="nav-primary" style="gap: 5px;display: flex;margin-top: 20px;">
                 <div @click="handleTypeAllClick(1)" class="option-item" style="position: relative;" :class="{ 'option-active': ctypeTagAll }">
                   <a>全部</a>
                   <span :class="ctypeTagAll ? 'nav-bottbor' : ''"></span>
@@ -100,7 +100,7 @@
                 </a>
               </div>
               <!-- 修改热点标签区域 -->
-              <div style="margin-top:10px;flex: 1;">
+              <div style="margin: 20px 0;">
                 <!-- 修改热点标签容器，支持换行 -->
                 <div class="hot-tags-wrapper">
                   <div class="hot-tags-wrapper">
@@ -2556,19 +2556,13 @@ export default {
   width: 100%;
   clear: both;
 }
-//.search-div.nav {
-//  display: flex;
-//  flex-direction: column;
-//  height: auto;
-//  min-height: 100px;
-//}
-//.hot-tags-area {
-//  width: 100%;
-//  margin-top: 15px;
-//}
 
 .option-item {
-  margin: 0px 5px;
+  position: relative;
+  cursor: pointer;
+  white-space: nowrap;
+  // 确保所有option-item的左边距一致
+  margin: 0 5px; // 保持左右间距一致
 }
 /* 热点标签：自定义按钮样式 */
 a.custom {
@@ -2675,23 +2669,14 @@ a.custom2 {
   gap: 15px;
   align-items: center;
   padding-top: 2px;
+  margin-left: 0; // 重置默认margin
+  padding-left: 0; // 重置默认padding
 }
-//.hot-tags-wrapper {
-//  display: grid;
-//  grid-template-columns: repeat(auto-fill, minmax(120px, max-content));
-//  gap: 15px 20px;
-//  align-items: center;
-//  justify-items: start;
-//  width: 100%;
-//  padding: 10px 0;
-//}
-//.hot-tags-wrapper .option-item {
-//  position: relative;
-//  cursor: pointer;
-//  white-space: nowrap;
-//  padding: 5px 10px;
-//  text-align: center;
-//}
+.nav-primary {
+  // 确保导航项容器没有额外的padding影响对齐
+  padding-left: 0;
+}
+
 .course-tags {
   margin: 5px 0;
   min-height: 20px;