hz/learning-system-portal
1
0
Fork 0
mirror of https://codeup.aliyun.com/67762337eccfc218f6110e0e/vue/learning-system-portal.git synced 2025-12-09 02:46:44 +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="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="search-div nav" style="flex: 1;height: auto;">
<div class="nav-primary" style="display: flex; justify-content: space-between; align-items: center;"> <div class="nav-primary" style="display: flex; justify-content: space-between; align-items: center;margin-top: 15px;">
<div style="display: flex;"> <div style="display: flex;margin-top: 20px;">
<div @click="handleTypeClick(ctypeList[0], ctypeList)" class="option-item" <div @click="handleTypeClick(ctypeList[0], ctypeList)" class="option-item"
:class="{ 'option-active': ctypeList[0].checked }"> :class="{ 'option-active': ctypeList[0].checked }">
<a>全部</a> <a>全部</a>
<span :class="ctypeList[0].checked ? 'nav-bottbor' : ''"></span> <!-- <span :class="ctypeList[0].checked ? 'nav-bottbor' : ''"></span>-->
</div> </div>
<div @click="handleTypeClick(ctypeList[1], ctypeList)" class="option-item" <div @click="handleTypeClick(ctypeList[1], ctypeList)" class="option-item"
:class="{ 'option-active': ctypeList[1].checked }" style="padding-left: 15px;"> :class="{ 'option-active': ctypeList[1].checked }" style="padding-left: 15px;">
<a>内部专享</a> <a>内部专享</a>
<span :class="ctypeList[1].checked ? 'nav-bottbor' : ''"></span> <!-- <span :class="ctypeList[1].checked ? 'nav-bottbor' : ''"></span>-->
</div> </div>
<div @click="handleTypeClick(ctypeList[2], ctypeList)" class="option-item" <div @click="handleTypeClick(ctypeList[2], ctypeList)" class="option-item"
:class="{ 'option-active': ctypeList[2].checked }" style="padding-left: 15px;"> :class="{ 'option-active': ctypeList[2].checked }" style="padding-left: 15px;">
<a>外部精选</a> <a>外部精选</a>
<span :class="ctypeList[2].checked ? 'nav-bottbor' : ''"></span> <!-- <span :class="ctypeList[2].checked ? 'nav-bottbor' : ''"></span>-->
</div> </div>
</div> </div>
@@ -90,34 +90,80 @@
</div> </div>
</div> </div>
<div style="margin-top:10px;flex: 1;"> <!-- <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;">-->
<div class="hot-tags-wrapper" style="display: flex; align-items: center;"> <!-- <div class="hot-tags-wrapper" style="display: flex; align-items: center;">-->
<div <!-- <div-->
class="option-item" <!-- class="option-item"-->
style=" padding-top: 2px; margin-left: 15px;" <!-- style=" padding-top: 2px; margin-left: 15px;"-->
:class="{ 'option-active': isAllHotTagsSelected }" <!-- :class="{ 'option-active': isAllHotTagsSelected }"-->
@click="handleClearHotTags" <!-- @click="handleClearHotTags"-->
> <!-- >-->
<span>全部</span> <!-- <span>全部</span>-->
<span :class="isAllHotTagsSelected ? 'nav-bottbor' : ''"></span> <!-- </div>-->
</div>
<div <!-- <div-->
class="option-item" <!-- class="option-item"-->
style=" padding-top: 2px;" <!-- style=" 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> <!-- </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> </div>
</div> </div>
</div> </div>
@@ -444,6 +490,9 @@ export default {
}); });
return !flag; return !flag;
}, },
isAllHotTagsSelected() {
return !this.hotTagsList.some(tag => tag.checked);
}
}, },
data() { data() {
return { return {
@@ -711,15 +760,12 @@ export default {
}, },
// isAllHotTagsSelected() {
// return !this.hotTagsList.some(tag => tag.checked);
// },
handleClearHotTags() { handleClearHotTags() {
// 清除所有热点标签的选中状态 // 清除所有热点标签的选中状态
this.hotTagsList.forEach(tag => { this.hotTagsList.forEach(tag => {
tag.checked = false; tag.checked = false;
}); });
this.isAllHotTagsSelected = true;
// 清空course.tags // 清空course.tags
this.course.tags = ''; this.course.tags = '';
@@ -1607,29 +1653,29 @@ export default {
} }
// 导航 // 导航
.topNav { //.topNav {
display: flex; // display: flex;
margin-bottom: 20px; // margin-bottom: 20px;
//
.nav { // .nav {
display: flex; // display: flex;
align-items: center; // align-items: center;
//
.option-item { // .option-item {
position: relative; // position: relative;
//
.nav-bottbor { // .nav-bottbor {
position: absolute; // position: absolute;
top: 130%; // top: 130%;
left: 0; // left: 0;
width: 100%; // width: 100%;
height: 4px; // height: 4px;
background: #387DF7; // background: #387DF7;
border-radius: 5px; // border-radius: 5px;
} // }
} // }
} // }
} //}
.u-class { .u-class {
::v-deep .el-dialog { ::v-deep .el-dialog {
@@ -2313,11 +2359,11 @@ export default {
align-items: center; align-items: center;
padding-top: 2px; padding-top: 2px;
} }
.search-div.nav { //.search-div.nav {
display: block; // display: block;
width: 100%; // width: 100%;
clear: both; // clear: both;
} //}
.search-item-type { .search-item-type {
line-height: 25px; line-height: 25px;
padding-right: 10px; padding-right: 10px;
@@ -2325,14 +2371,14 @@ export default {
white-space: nowrap; white-space: nowrap;
} }
.option-item { //.option-item {
font-family: "Menlo", "苹方-简" !important; // font-family: "Menlo", "苹方-简" !important;
color: #3d3d3d; // color: #3d3d3d;
display: inline-block; // display: inline-block;
font-size: 14px; // font-size: 14px;
margin: 0px 15px; // margin: 0px 15px;
cursor: pointer // cursor: pointer
} //}
.option-border { .option-border {
width: 2px; width: 2px;
@@ -2342,6 +2388,63 @@ export default {
background: #666; 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 { .option-active {
color: #387DF7; color: #387DF7;
} }
@@ -2380,4 +2483,24 @@ export default {
font-weight: bold; font-weight: bold;
background-color: transparent !important; 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> </style>