hz/learning-system-portal
1
0
Fork 0
mirror of https://codeup.aliyun.com/67762337eccfc218f6110e0e/vue/learning-system-portal.git synced 2025-12-10 11:26:43 +08:00
Code Issues Packages Projects Releases Wiki Activity

精品课

Browse Source
This commit is contained in:
670788339
2025-11-13 19:18:16 +08:00
parent e34a572390
commit 319d731088
1 changed files with 99 additions and 22 deletions
Download Patch File Download Diff File Expand all files Collapse all files

117
src/views/portal/course/qualityCourse.vue
View File

@@ -115,36 +115,48 @@
<!-- </div>-->
<!-- </div>-->
<!-- </div>-->
<!-- </div>-->
<!-- <div style="margin:20px 0;flex: 1;">-->
<!-- <div>-->
<!-- <div style="display: flex">-->
<!-- <div-->
<!-- class="option-item" style=" padding-top: 2px;"-->
<!-- :class="{ 'option-active': isAllHotTagsSelected }"-->
<!-- @click="handleClearHotTags"-->
<!-- >-->
<!-- <span>全部</span>-->
<!-- </div>-->
<!-- <div class="fieldbox" style="padding-left: 15px;">-->
<!-- <div-->
<!-- class="option-item" style=" padding-top: 2px;"-->
<!-- v-for="tag in hotTagsList"-->
<!-- :key="tag.id"-->
<!-- @click="handleTagClick(tag, hotTagsList,1)"-->
<!-- :class="{ 'option-active': tag.checked }"-->
<!-- >-->
<!-- <span>{{tag.tagName}} </span>-->
<!-- </div>-->
<!-- </div>-->
<!-- </div>-->
<!-- </div>-->
<!-- </div>-->
<div style="margin:20px 0;flex: 1;">
<!-- 修改热点标签容器，支持换行 -->
<div>
<div style="display: flex">
<div
class="option-item" style=" padding-top: 2px;"
:class="{ 'option-active': isAllHotTagsSelected }"
@click="handleClearHotTags"
>
<div class="tags-navigation-container">
<div class="option-item all-tag" :class="{ 'option-active': isAllHotTagsSelected }" @click="handleClearHotTags">
<span>全部</span>
</div>
<div class="fieldbox" style="padding-left: 15px;">
<div
class="option-item" style=" padding-top: 2px;"
v-for="tag in hotTagsList"
:key="tag.id"
@click="handleTagClick(tag, hotTagsList,1)"
:class="{ 'option-active': tag.checked }"
>
<div class="hot-tags-wrapper">
<div class="option-item tag-item" v-for="tag in hotTagsList" :key="tag.id" @click="handleTagClick(tag, hotTagsList,1)" :class="{ 'option-active': tag.checked }">
<span>{{tag.tagName}}</span>
<!-- <span :class="tag.checked ? 'nav-bottbor' : ''"></span>-->
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
@@ -2428,4 +2440,69 @@ export default {
color: #387DF7;
}
}
/* 新增样式 */
.tags-navigation-container {
display: flex;
align-items: center;
flex-wrap: nowrap;
gap: 0;
width: 100%;
}
.all-tag {
flex-shrink: 0;
margin-right: 15px;
padding: 6px 12px;
border-radius: 4px;
background: #f5f7fa;
transition: all 0.3s ease;
border: 1px solid #e8e8e8;
}
.hot-tags-wrapper {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 8px;
flex: 1;
}
.tag-item {
padding: 6px 12px;
border-radius: 4px;
background: #f5f7fa;
transition: all 0.3s ease;
white-space: nowrap;
border: 1px solid #e8e8e8;
}
.option-active {
background: #387DF7 !important;
color: white !important;
border-color: #387DF7 !important;
}
.option-item {
cursor: pointer;
font-size: 14px;
color: #3d3d3d;
font-weight: 500;
display: inline-flex;
align-items: center;
height: 32px;
}
.option-item:hover {
background: #e8f4ff;
color: #387DF7;
}
/* 确保原有样式不受影响 */
.search-div.nav {
display: block;
width: 100%;
clear: both;
}
</style>