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

精品课导航样式

Browse Source
This commit is contained in:
670788339
2025-11-14 08:45:27 +08:00
parent 40ac85f1fe
commit d3e891e5cc
1 changed files with 191 additions and 68 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -56,23 +56,23 @@
<div class="topNav" v-if="!newData" style="display: flex; flex-direction: row;background-color:#fff;">
<!-- 修改后 -->
<div class="search-div nav" style="flex: 1;height: auto;">
<div class="nav-primary" style="display: flex; justify-content: space-between; align-items: center;">
<div style="display: flex;">
<div class="nav-primary" style="display: flex; justify-content: space-between; align-items: center;margin-top: 15px;">
<div style="display: flex;margin-top: 20px;">
<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>
<!-- <span :class="ctypeList[0].checked ? 'nav-bottbor' : ''"></span>-->
</div>
<div @click="handleTypeClick(ctypeList[1], ctypeList)" class="option-item"
:class="{ 'option-active': ctypeList[1].checked }" style="padding-left: 15px;">
<a>内部专享</a>
<span :class="ctypeList[1].checked ? 'nav-bottbor' : ''"></span>
<!-- <span :class="ctypeList[1].checked ? 'nav-bottbor' : ''"></span>-->
</div>
<div @click="handleTypeClick(ctypeList[2], ctypeList)" class="option-item"
:class="{ 'option-active': ctypeList[2].checked }" style="padding-left: 15px;">
<a>外部精选</a>
<span :class="ctypeList[2].checked ? 'nav-bottbor' : ''"></span>
<!-- <span :class="ctypeList[2].checked ? 'nav-bottbor' : ''"></span>-->
</div>
</div>
@@ -90,34 +90,80 @@
</div>
</div>
<div style="margin-top:10px;flex: 1;">
<!-- 修改热点标签容器，支持换行 -->
<div class="hot-tags-wrapper" style="display: flex;">
<div class="hot-tags-wrapper" style="display: flex; align-items: center;">
<div
class="option-item"
style=" padding-top: 2px; margin-left: 15px;"
:class="{ 'option-active': isAllHotTagsSelected }"
@click="handleClearHotTags"
>
<span>全部</span>
<span :class="isAllHotTagsSelected ? 'nav-bottbor' : ''"></span>
</div>
<!-- <div style="margin-top:10px;flex: 1;">-->
<!-- &lt;!&ndash; 修改热点标签容器，支持换行 &ndash;&gt;-->
<!-- <div class="hot-tags-wrapper" style="display: flex;">-->
<!-- <div class="hot-tags-wrapper" style="display: flex; align-items: center;">-->
<!-- <div-->
<!-- class="option-item"-->
<!-- style=" padding-top: 2px; margin-left: 15px;"-->
<!-- :class="{ 'option-active': isAllHotTagsSelected }"-->
<!-- @click="handleClearHotTags"-->
<!-- >-->
<!-- <span>全部</span>-->
<!-- </div>-->
<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>
<span :class="tag.checked ? 'nav-bottbor' : ''"></span>
<!-- <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 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;min-width: 33px;"
: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>
@@ -444,6 +490,9 @@ export default {
});
return !flag;
},
isAllHotTagsSelected() {
return !this.hotTagsList.some(tag => tag.checked);
}
},
data() {
return {
@@ -711,15 +760,12 @@ export default {
},
// isAllHotTagsSelected() {
// return !this.hotTagsList.some(tag => tag.checked);
// },
handleClearHotTags() {
// 清除所有热点标签的选中状态
this.hotTagsList.forEach(tag => {
tag.checked = false;
});
this.isAllHotTagsSelected = true;
// 清空course.tags
this.course.tags = '';
@@ -1607,29 +1653,29 @@ export default {
}
// 导航
.topNav {
display: flex;
margin-bottom: 20px;
.nav {
display: flex;
align-items: center;
.option-item {
position: relative;
.nav-bottbor {
position: absolute;
top: 130%;
left: 0;
width: 100%;
height: 4px;
background: #387DF7;
border-radius: 5px;
}
}
}
}
//.topNav {
// display: flex;
// margin-bottom: 20px;
//
// .nav {
// display: flex;
// align-items: center;
//
// .option-item {
// position: relative;
//
// .nav-bottbor {
// position: absolute;
// top: 130%;
// left: 0;
// width: 100%;
// height: 4px;
// background: #387DF7;
// border-radius: 5px;
// }
// }
// }
//}
.u-class {
::v-deep .el-dialog {
@@ -2313,11 +2359,11 @@ export default {
align-items: center;
padding-top: 2px;
}
.search-div.nav {
display: block;
width: 100%;
clear: both;
}
//.search-div.nav {
// display: block;
// width: 100%;
// clear: both;
//}
.search-item-type {
line-height: 25px;
padding-right: 10px;
@@ -2325,14 +2371,14 @@ export default {
white-space: nowrap;
}
.option-item {
font-family: "Menlo", "苹方-简" !important;
color: #3d3d3d;
display: inline-block;
font-size: 14px;
margin: 0px 15px;
cursor: pointer
}
//.option-item {
// font-family: "Menlo", "苹方-简" !important;
// color: #3d3d3d;
// display: inline-block;
// font-size: 14px;
// margin: 0px 15px;
// cursor: pointer
//}
.option-border {
width: 2px;
@@ -2342,6 +2388,63 @@ export default {
background: #666;
}
.topNav {
display: flex;
margin-bottom: 20px;
height: auto;
min-height: 80px;
align-items: center;
.nav {
display: flex;
align-items: center;
.option-item {
position: relative;
margin: 0 15px;
cursor: pointer;
.nav-bottbor {
position: absolute;
top: 100%;
left: 0;
width: 100%;
height: 4px;
background: #387DF7;
border-radius: 5px;
}
}
}
}
.search-div.nav {
display: block;
width: 100%;
clear: both;
}
.option-item {
margin: 0px 5px;
}
.fieldbox {
display: flex;
white-space: nowrap;
flex-wrap: wrap;
div {
margin: 0 15px;
display: inline-block;
font-size: 14px;
line-height: 25px;
font-weight: 500;
}
.fieldactive {
color: #387DF7;
}
}
.option-active {
color: #387DF7;
}
@@ -2380,4 +2483,24 @@ export default {
font-weight: bold;
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>