mirror of
https://codeup.aliyun.com/67762337eccfc218f6110e0e/vue/learning-system-portal.git
synced 2025-12-06 17:36:42 +08:00
调试
This commit is contained in:
@@ -310,55 +310,30 @@
|
||||
</span>
|
||||
</span>
|
||||
</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 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="hot-tags-wrapper">
|
||||
<div
|
||||
class="option-item"
|
||||
style="font-weight: bold; padding-top: 2px; display: inline-block;"
|
||||
class="option-item" style="font-weight: bold; padding-top: 2px;"
|
||||
:class="{ 'option-active': isAllHotTagsSelected }"
|
||||
@click="handleClearHotTags"
|
||||
>
|
||||
<a>全部</a>
|
||||
<span>全部</span>
|
||||
<span :class="isAllHotTagsSelected ? 'nav-bottbor' : ''"></span>
|
||||
</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"
|
||||
:key="tag.id"
|
||||
@click="handleTagClick(tag, hotTagsList)"
|
||||
:class="{ 'option-active': tag.checked }"
|
||||
>
|
||||
<a>{{tag.tagName}}</a>
|
||||
<span>{{tag.tagName}}</span>
|
||||
<span :class="tag.checked ? 'nav-bottbor' : ''"></span>
|
||||
</div>
|
||||
</div>
|
||||
@@ -882,7 +857,7 @@ export default {
|
||||
|
||||
// 触发搜索
|
||||
this.searchData();
|
||||
}
|
||||
},
|
||||
|
||||
// 改变分页
|
||||
currentChange(val) {
|
||||
@@ -2711,5 +2686,46 @@ a.custom2 {
|
||||
background-color: #387DF7 !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--- */
|
||||
</style>
|
||||
|
||||
Reference in New Issue
Block a user