课程库样式调整

src/views/portal/course/Index.vue

@@ -71,25 +71,21 @@
           <!-- 内容导航 -->
           <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: 15px;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>
                 </div>
                 <div @click="handleTypeClick(ctypeList[0], ctypeList)" class="option-item"
                      :class="{ 'option-active': ctypeList[0].checked }">
                   <a>录播课</a>
-                  <span :class="ctypeList[0].checked ? 'nav-bottbor' : ''"></span>
                 </div>
                 <div @click="handleTypeClick(ctypeList[1], ctypeList)" class="option-item"
                      :class="{ 'option-active': ctypeList[1].checked }">
                   <a>线下课</a>
-                  <span :class="ctypeList[1].checked ? 'nav-bottbor' : ''"></span>
                 </div>
                 <div @click="handleTypeClick(ctypeList[2], ctypeList)" class="option-item"
                      :class="{ 'option-active': ctypeList[2].checked }">
                   <a>学习项目</a>
-                  <span :class="ctypeList[2].checked ? 'nav-bottbor' : ''"></span>
                 </div>
                 <a class="option-item">
                     <span @click="uClassClick" class="Uxtext" > U选小课堂
@@ -100,29 +96,31 @@
                 </a>
               </div>
               <!-- 修改热点标签区域 -->
-              <div style="margin-top:10px;flex: 1;">
+              <div style="margin:20px 0;flex: 1;">
                 <!-- 修改热点标签容器，支持换行 -->
-                <div class="hot-tags-wrapper">
+                <div>
-                  <div class="hot-tags-wrapper">
+                  <div style="display: flex">
                     <div
                       class="option-item"        style=" padding-top: 2px;"
                       :class="{ 'option-active': isAllHotTagsSelected }"
                       @click="handleClearHotTags"
                     >
                       <span>全部</span>
-                      <span :class="isAllHotTagsSelected ? 'nav-bottbor' : ''"></span>
                     </div>
 
-                    <div
+                    <div class="fieldbox" style="padding-left: 15px;">
-                      class="option-item"        style=" padding-top: 2px;"
+                      <div
-                      v-for="tag in hotTagsList"
+                        class="option-item"        style=" padding-top: 2px;"
-                      :key="tag.id"
+                        v-for="tag in hotTagsList"
-                      @click="handleTagClick(tag, hotTagsList,1)"
+                        :key="tag.id"
-                      :class="{ 'option-active': tag.checked }"
+                        @click="handleTagClick(tag, hotTagsList,1)"
-                    >
+                        :class="{ 'option-active': tag.checked }"
-                      <span>{{tag.tagName}}</span>
+                      >
-                      <span :class="tag.checked ? 'nav-bottbor' : ''"></span>
+                        <span>{{tag.tagName}} </span>
+                        <!--                            <span :class="tag.checked ? 'nav-bottbor' : ''"></span>-->
+                      </div>
                     </div>
+
                   </div>
                 </div>
               </div>
@@ -253,10 +251,6 @@
             </template>
             <!--  暂无数据 -->
             <div class="pagination-div">
-              <!-- <span class="pag-text" @click="loadMore()"
-                v-if="moreState == 1 && courseList.length >= course.pageSize">加载更多</span> -->
-              <!-- <span class="pag-text-msg" v-if="moreState == 2">数据加载中</span> -->
-              <!-- <span class="pag-text-msg" v-else-if="moreState == 3 && courseList.length > 0">没有更多数据了</span> -->
               <span class="notcoures" v-if="moreState == 3 && courseList.length == 0">
                 <img :src="`${webBaseUrl}/images/nocouresimg.png`" alt="">
                 <h5>暂无课程，请优先学习其它课程吧～</h5>
@@ -1784,7 +1778,7 @@ export default {
 
       .nav-bottbor {
         position: absolute;
-        top: 130%;
+        top: 100%;
         left: 0;
         width: 100%;
         height: 4px;
@@ -2012,13 +2006,6 @@ export default {
   color: #999;
 }
 
-.couderbox {
-  // width: 5px;
-  // padding: 0;
-  // display: inline-block;
-  // text-align: center;
-}
-
 .coures-border {
   width: 2px;
   height: 15px;
@@ -2262,16 +2249,6 @@ export default {
   left: 98%;
 }
 
-// .el-radio-button{
-//   margin-right: 10px;
-//   margin-bottom: 10px;
-
-//   .el-radio-button__inner{
-//     background: #fff;
-//     border: none;
-//     height: 20px;
-//   }
-// }
 ::v-deep .el-radio-button__inner,
 .el-radio-group {
   vertical-align: top;
@@ -2325,13 +2302,6 @@ export default {
   }
 }
 
-.searchbar {
-  //background-color: #ffffff;
-  // border: 1px solid #f3f3f3;
-  // width: 900px;
-  // padding: 5px 20px;
-}
-
 .fixed {
   position: fixed;
   top: 0px;
@@ -2423,14 +2393,6 @@ export default {
       }
     }
 
-    // .tip{
-    //   color:#999999;
-    //   font-size: 12px;
-    //   >span{
-    //     margin-right: 8px;
-    //     cursor: pointer;
-    //   }
-    // }
     .search-item {
       // padding: 10px 0;
     }
@@ -2473,30 +2435,6 @@ export default {
     }
   }
 }
-
-// .course-form {
-//   width: 100%;
-//   margin: 10px 0;
-//   ::v-deep.el-button {
-//     width: 100%;
-//     color: #fff;
-//   }
-// }
-
-// .right-box {
-//   .add-btn {
-//     width: 100%;
-//     padding: 15px 0;
-//   }
-//   .ranking-card {
-//     margin-top: 0px;
-//   }
-
-//   .ranking-data {
-//     margin: 10px 0;
-//     color: #999999;
-//   }
-// }]
 .search-item-type {
   line-height: 25px;
   padding-right: 10px;
@@ -2550,22 +2488,12 @@ export default {
   padding: 0 !important;
 }
 /* ---end--- */
-// 2025-11-07 10:00 修改
 .search-div.nav {
   display: block;
   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;
@@ -2614,22 +2542,6 @@ a.custom2 {
   display: none;
 }
 
-/* 添加标签样式 */
-//.course-tags {
-//  margin: 5px 0;
-//  min-height: 20px;
-//}
-//.course-tags ::v-deep .el-tag {
-//  color: #387DF7 !important;
-//  border-color: #387DF7 !important;
-//}
-//.course-tags ::v-deep .el-tag .el-tag__close {
-//  color: #387DF7 !important;
-//}
-//.course-tags ::v-deep .el-tag .el-tag__close:hover {
-//  background-color: #387DF7 !important;
-//  color: white !important;
-//}
 
 .course-tag-item {
   color: #333333; // 默认深灰色
@@ -2648,7 +2560,7 @@ a.custom2 {
 /* 保持原有的导航底部横线样式 */
 .nav-bottbor {
   position: absolute;
-  top: 130%;
+  top: 100%;
   left: 0;
   width: 100%;
   height: 4px;
@@ -2668,7 +2580,7 @@ a.custom2 {
     gap: 5px;
   }
 }
-// 2025-11-07 10:00 修改
+
 .hot-tags-wrapper {
   display: flex;
   flex-wrap: wrap;
@@ -2676,22 +2588,7 @@ a.custom2 {
   align-items: center;
   padding-top: 2px;
 }
-//.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;
-//}
 .course-tags {
   margin: 5px 0;
   min-height: 20px;
@@ -2738,4 +2635,23 @@ a.custom2 {
   background-color: transparent !important;
 }
 
+.fieldbox {
+
+  display: flex;
+  white-space: nowrap;
+  flex-wrap: wrap;
+
+  div {
+    margin: 0 15px;
+    display: inline-block;
+    font-size: 14px;
+    line-height: 25px;
+    //color: #3d3d3d;
+    font-weight: 500;
+  }
+
+  .fieldactive {
+    color: #387DF7;
+  }
+}
 </style>