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

Merge branch 'master-20251023-tag' into test1024

Browse Source
This commit is contained in:
670788339
2025-10-31 17:00:48 +08:00
parent b38a4768a6 b3756280cf
commit e0db15c85d
1 changed files with 47 additions and 31 deletions
Download Patch File Download Diff File Expand all files Collapse all files

78
src/views/portal/course/Index.vue
View File

@@ -310,55 +310,30 @@
</span> </span>
</span> </span>
</a> </a>
<!-- 热点标签 add by zhengsongbo on 2025-08-01 -->
<!-- <div style="margin-top:10px;flex: 1;">
<div class="search-item-type" style="padding-top: 2px; float: left;">
<span class="item-title" style="padding-right: 5px;">热点标签:</span>
</div>
<div class="hot-tags-container">
<div
class="option-item" style="padding-top: 2px; display: inline-block;"
@click="handleClearHotTags"
>
<a class="custom" :class="isAllHotTagsSelected ? '' : 'custom2'">全部</a>
</div>
<div
class="option-item"
style="padding-top: 2px; display: inline-block;"
v-for="tag in hotTagsList"
:key="tag.id"
@click="handleTagClick(tag, hotTagsList)"
>
<a class="custom" :class="tag.checked ? 'custom2' : ''">{{tag.tagName}}</a>
</div>
</div>
</div>-->
<!-- 修改热点标签区域 --> <!-- 修改热点标签区域 -->
<div style="margin-top:10px;flex: 1;"> <div style="margin-top:10px;flex: 1;">
<div class="search-item-type" style="padding-top: 2px; float: left;"> <div class="search-item-type" style="padding-top: 2px; float: left;">
<span class="item-title" style="padding-right: 5px;">热点标签:</span> <span class="item-title" style="padding-right: 5px;">热点标签:</span>
</div> </div>
<div class="hot-tags-container"> <!-- 修改热点标签容器，支持换行 -->
<!-- "全部"选项，样式与上方选项一致 --> <div class="hot-tags-wrapper">
<div <div
class="option-item" class="option-item" style="font-weight: bold; padding-top: 2px;"
style="font-weight: bold; padding-top: 2px; display: inline-block;"
:class="{ 'option-active': isAllHotTagsSelected }" :class="{ 'option-active': isAllHotTagsSelected }"
@click="handleClearHotTags" @click="handleClearHotTags"
> >
<a>全部</a> <span>全部</span>
<span :class="isAllHotTagsSelected ? 'nav-bottbor' : ''"></span> <span :class="isAllHotTagsSelected ? 'nav-bottbor' : ''"></span>
</div> </div>
<!-- 热点标签循环，样式与上方选项一致 -->
<div <div
class="option-item" style="font-weight: bold; padding-top: 2px; display: inline-block;" class="option-item" style="font-weight: bold; padding-top: 2px;"
v-for="tag in hotTagsList" v-for="tag in hotTagsList"
:key="tag.id" :key="tag.id"
@click="handleTagClick(tag, hotTagsList)" @click="handleTagClick(tag, hotTagsList)"
:class="{ 'option-active': tag.checked }" :class="{ 'option-active': tag.checked }"
> >
<a>{{tag.tagName}}</a> <span>{{tag.tagName}}</span>
<span :class="tag.checked ? 'nav-bottbor' : ''"></span> <span :class="tag.checked ? 'nav-bottbor' : ''"></span>
</div> </div>
</div> </div>
@@ -2711,5 +2686,46 @@ a.custom2 {
background-color: #387DF7 !important; background-color: #387DF7 !important;
color: white !important; color: white !important;
} }
* 添加热点标签容器样式，支持换行 */
.hot-tags-wrapper {
display: flex;
flex-wrap: wrap;
gap: 15px;
align-items: center;
padding-top: 2px;
margin-left: 90px; /* 为"热点标签:"文本留出空间 */
}
/* 调整option-item样式以适应换行布局 */
.option-item {
position: relative;
cursor: pointer;
white-space: nowrap;
}
/* 保持原有的导航底部横线样式 */
.nav-bottbor {
position: absolute;
top: 130%;
left: 0;
width: 100%;
height: 4px;
background: #387DF7;
border-radius: 5px;
}
/* 响应式调整，当屏幕较小时减小标签间距 */
@media (max-width: 1600px) {
.hot-tags-wrapper {
gap: 10px;
}
}
@media (max-width: 1400px) {
.hot-tags-wrapper {
gap: 5px;
}
}
/* ---end--- */ /* ---end--- */
</style> </style>