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

精品课

Browse Source
This commit is contained in:
670788339
2025-11-13 19:27:58 +08:00
parent 319d731088
commit dea7100af3
1 changed files with 127 additions and 129 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -144,19 +144,25 @@
<!-- </div>--> <!-- </div>-->
<div style="margin:20px 0;flex: 1;"> <div style="margin:20px 0;flex: 1;">
<div class="tags-navigation-container"> <div>
<div class="option-item all-tag" :class="{ 'option-active': isAllHotTagsSelected }" @click="handleClearHotTags"> <div style="display: flex">
<div class="option-item" style="padding-top: 2px;"
:class="{ 'option-active': isAllHotTagsSelected }"
@click="handleClearHotTags">
<span>全部</span> <span>全部</span>
</div> </div>
<div class="fieldbox" style="padding-left: 15px;">
<div class="hot-tags-wrapper"> <div class="option-item" style="padding-top: 2px;"
<div class="option-item tag-item" v-for="tag in hotTagsList" :key="tag.id" @click="handleTagClick(tag, hotTagsList,1)" :class="{ 'option-active': tag.checked }"> v-for="tag in hotTagsList"
:key="tag.id"
@click="handleTagClick(tag, hotTagsList,1)"
:class="{ 'option-active': tag.checked }">
<span>{{tag.tagName}}</span> <span>{{tag.tagName}}</span>
</div> </div>
</div> </div>
</div> </div>
</div> </div>
</div>
</div> </div>
@@ -1647,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 {
@@ -2353,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;
@@ -2365,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;
@@ -2382,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;
} }
@@ -2421,88 +2484,23 @@ export default {
background-color: transparent !important; background-color: transparent !important;
} }
.fieldbox { //.fieldbox {
//
display: flex; // display: flex;
white-space: nowrap; // white-space: nowrap;
flex-wrap: wrap; // flex-wrap: wrap;
//
div { // div {
margin: 0 15px; // margin: 0 15px;
display: inline-block; // display: inline-block;
font-size: 14px; // font-size: 14px;
line-height: 25px; // line-height: 25px;
//color: #3d3d3d; // //color: #3d3d3d;
font-weight: 500; // font-weight: 500;
} // }
//
.fieldactive { // .fieldactive {
color: #387DF7; // color: #387DF7;
} // }
} //}
/* 新增样式 */
.tags-navigation-container {
display: flex;
align-items: center;
flex-wrap: nowrap;
gap: 0;
width: 100%;
}
.all-tag {
flex-shrink: 0;
margin-right: 15px;
padding: 6px 12px;
border-radius: 4px;
background: #f5f7fa;
transition: all 0.3s ease;
border: 1px solid #e8e8e8;
}
.hot-tags-wrapper {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 8px;
flex: 1;
}
.tag-item {
padding: 6px 12px;
border-radius: 4px;
background: #f5f7fa;
transition: all 0.3s ease;
white-space: nowrap;
border: 1px solid #e8e8e8;
}
.option-active {
background: #387DF7 !important;
color: white !important;
border-color: #387DF7 !important;
}
.option-item {
cursor: pointer;
font-size: 14px;
color: #3d3d3d;
font-weight: 500;
display: inline-flex;
align-items: center;
height: 32px;
}
.option-item:hover {
background: #e8f4ff;
color: #387DF7;
}
/* 确保原有样式不受影响 */
.search-div.nav {
display: block;
width: 100%;
clear: both;
}
</style> </style>