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

修改导航区域结构

Browse Source
This commit is contained in:
670788339
2025-11-08 08:44:58 +08:00
parent be88ddcf20
commit 617888abfd
1 changed files with 109 additions and 67 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -283,61 +283,62 @@
</div> --> </div> -->
<!-- 内容导航 --> <!-- 内容导航 -->
<div class="topNav" v-if="!newData"> <div class="topNav" v-if="!newData">
<div class="search-div nav" style="height: 100px;flex: 1;"> <div class="search-div nav" style="flex: 1;height: auto;">
<div @click="handleTypeAllClick(1)" class="option-item" style="font-weight: bold;position: relative;margin-right: 20px;" :class="{ 'option-active': ctypeTagAll }"> <div class="nav-primary">
<a>全部</a> <div @click="handleTypeAllClick(1)" class="option-item" style="font-weight: bold;position: relative;margin-right: 20px;" :class="{ 'option-active': ctypeTagAll }">
<span :class="ctypeTagAll ? 'nav-bottbor' : ''"></span> <a>全部</a>
</div> <span :class="ctypeTagAll ? 'nav-bottbor' : ''"></span>
<div @click="handleTypeClick(ctypeList[0], ctypeList)" class="option-item" style="font-weight: bold"
: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" style="font-weight: bold"
: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" style="font-weight: bold"
: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" style="font-weight: bold"> U选小课堂
<span class="uxicon">
<svg-icon icon-class="hot" style="font-size:22px"></svg-icon>
</span>
</span>
</a>
<!-- 修改热点标签区域 -->
<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-wrapper">
<div
class="option-item" style="font-weight: bold; padding-top: 2px;"
:class="{ 'option-active': isAllHotTagsSelected }"
@click="handleClearHotTags"
>
<span>全部</span>
<span :class="isAllHotTagsSelected ? 'nav-bottbor' : ''"></span>
</div> </div>
<div @click="handleTypeClick(ctypeList[0], ctypeList)" class="option-item" style="font-weight: bold"
: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" style="font-weight: bold"
: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" style="font-weight: bold"
: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" style="font-weight: bold"> U选小课堂
<span class="uxicon">
<svg-icon icon-class="hot" style="font-size:22px"></svg-icon>
</span>
</span>
</a>
</div>
<!-- 修改热点标签区域 -->
<div style="margin-top:10px;flex: 1;">
<!-- 修改热点标签容器，支持换行 -->
<div class="hot-tags-wrapper">
<div class="hot-tags-wrapper">
<div
class="option-item" style="font-weight: bold; padding-top: 2px;"
:class="{ 'option-active': isAllHotTagsSelected }"
@click="handleClearHotTags"
>
<span>全部</span>
<span :class="isAllHotTagsSelected ? 'nav-bottbor' : ''"></span>
</div>
<div <div
class="option-item" style="font-weight: bold; padding-top: 2px;" 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,1)" @click="handleTagClick(tag, hotTagsList,1)"
:class="{ 'option-active': tag.checked }" :class="{ 'option-active': tag.checked }"
> >
<span>{{tag.tagName}}</span> <span>{{tag.tagName}}</span>
<span :class="tag.checked ? 'nav-bottbor' : ''"></span> <span :class="tag.checked ? 'nav-bottbor' : ''"></span>
</div>
</div>
</div> </div>
</div> </div>
</div>
</div> </div>
<!-- <div id="fixd-box" class="upload" style="margin-left: 26px;"> <!-- <div id="fixd-box" class="upload" style="margin-left: 26px;">
<div v-if="identity == 2 || identity == 3 || identity == 5"> <div v-if="identity == 2 || identity == 3 || identity == 5">
@@ -1856,6 +1857,9 @@ export default {
.topNav { .topNav {
display: flex; display: flex;
margin-bottom: 20px; margin-bottom: 20px;
height: auto;
min-height: 80px;
align-items: center;
.nav { .nav {
display: flex; display: flex;
@@ -2333,8 +2337,8 @@ export default {
margin-left: 15px; margin-left: 15px;
font-size: 14px; font-size: 14px;
color: #3d3d3d; color: #3d3d3d;
cursor: pointer; //cursor: pointer;
position: relative; //position: relative;
} }
.uxicon { .uxicon {
@@ -2465,6 +2469,8 @@ export default {
background: #fff; background: #fff;
padding: 10px 25px; padding: 10px 25px;
border-radius: 8px; border-radius: 8px;
height: auto;
min-height: 60px;
::v-deep .el-input { ::v-deep .el-input {
width: 420px; width: 420px;
@@ -2588,7 +2594,8 @@ export default {
color: #3d3d3d; color: #3d3d3d;
display: inline-block; display: inline-block;
font-size: 14px; font-size: 14px;
margin: 0px 15px; //margin: 0px 15px;
font-weight: normal;
} }
.option-border { .option-border {
@@ -2628,12 +2635,23 @@ export default {
padding: 0 !important; padding: 0 !important;
} }
/* ---end--- */ /* ---end--- */
/* ---标签管理 added by zhengsongbo on 2025-08-01--- */ // 2025-11-07 10:00 修改
.search-div.nav { .search-div.nav {
display: block; display: block;
width: 100%; width: 100%;
clear: both; 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 { .option-item {
margin: 0px 5px; margin: 0px 5px;
} }
@@ -2672,7 +2690,7 @@ a.custom2 {
.hot-tags-container { .hot-tags-container {
display: inline-block; display: inline-block;
white-space: nowrap; //white-space: nowrap;
overflow-x: auto; overflow-x: auto;
vertical-align: top; vertical-align: top;
} }
@@ -2705,16 +2723,6 @@ a.custom2 {
color: #387DF7 !important; // 匹配时的蓝色 color: #387DF7 !important; // 匹配时的蓝色
} }
/* 添加热点标签容器样式，支持换行 */
.hot-tags-wrapper {
display: flex;
flex-wrap: wrap;
gap: 15px;
align-items: center;
padding-top: 2px;
//margin-left: 90px; /* 为"热点标签:"文本留出空间 */
}
/* 调整option-item样式以适应换行布局 */ /* 调整option-item样式以适应换行布局 */
.option-item { .option-item {
position: relative; position: relative;
@@ -2745,5 +2753,39 @@ a.custom2 {
gap: 5px; gap: 5px;
} }
} }
/* ---end--- */ // 2025-11-07 10:00 修改
.hot-tags-wrapper {
display: flex;
flex-wrap: wrap;
gap: 15px;
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;
}
.course-tag-item {
color: #333333;
}
.course-tag-item[style*="color: #387DF7"] {
color: #387DF7 !important;
}
</style> </style>