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-13 14:29:23 +08:00
parent d78cc1f97c
commit 6ee8eaca00
1 changed files with 40 additions and 124 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -71,25 +71,21 @@
<!-- 内容导航 -->
<div class="topNav" v-if="!newData">
<div class="search-div nav" style="flex: 1;height: auto;background: #fff;">
<div class="nav-primary" style="gap: 15px;display: flex">
<div class="nav-primary" style="gap: 15px;display: flex;margin-top: 20px;">
<div @click="handleTypeAllClick(1)" class="option-item" style="position: relative;" :class="{ 'option-active': ctypeTagAll }">
<a>全部</a>
<span :class="ctypeTagAll ? 'nav-bottbor' : ''"></span>
</div>
<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>
</div>
<div @click="handleTypeClick(ctypeList[1], ctypeList)" class="option-item"
: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"
: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" > U选小课堂
@@ -100,19 +96,19 @@
</a>
</div>
<!-- 修改热点标签区域 -->
<div style="margin-top:10px;flex: 1;">
<div style="margin:20px 0;flex: 1;">
<!-- 修改热点标签容器，支持换行 -->
<div class="hot-tags-wrapper">
<div class="hot-tags-wrapper">
<div>
<div style="display: flex">
<div
class="option-item" style=" padding-top: 2px;"
:class="{ 'option-active': isAllHotTagsSelected }"
@click="handleClearHotTags"
>
<span>全部</span>
<span :class="isAllHotTagsSelected ? 'nav-bottbor' : ''"></span>
</div>
<div class="fieldbox" style="padding-left: 15px;">
<div
class="option-item" style=" padding-top: 2px;"
v-for="tag in hotTagsList"
@@ -120,10 +116,12 @@
@click="handleTagClick(tag, hotTagsList,1)"
:class="{ 'option-active': tag.checked }"
>
<span>{{tag.tagName}}</span>
<span :class="tag.checked ? 'nav-bottbor' : ''"></span>
<span>{{tag.tagName}} </span>
<!-- <span :class="tag.checked ? 'nav-bottbor' : ''"></span>-->
</div>
</div>
</div>
</div>
</div>
</div>
@@ -253,10 +251,6 @@
</template>
<!-- 暂无数据 -->
<div class="pagination-div">
<!-- <span class="pag-text" @click="loadMore()"
v-if="moreState == 1 && courseList.length >= course.pageSize">加载更多</span> -->
<!-- <span class="pag-text-msg" v-if="moreState == 2">数据加载中</span> -->
<!-- <span class="pag-text-msg" v-else-if="moreState == 3 && courseList.length > 0">没有更多数据了</span> -->
<span class="notcoures" v-if="moreState == 3 && courseList.length == 0">
<img :src="`${webBaseUrl}/images/nocouresimg.png`" alt="">
<h5>暂无课程，请优先学习其它课程吧～</h5>
@@ -1784,7 +1778,7 @@ export default {
.nav-bottbor {
position: absolute;
top: 130%;
top: 100%;
left: 0;
width: 100%;
height: 4px;
@@ -2012,13 +2006,6 @@ export default {
color: #999;
}
.couderbox {
// width: 5px;
// padding: 0;
// display: inline-block;
// text-align: center;
}
.coures-border {
width: 2px;
height: 15px;
@@ -2262,16 +2249,6 @@ export default {
left: 98%;
}
// .el-radio-button{
// margin-right: 10px;
// margin-bottom: 10px;
// .el-radio-button__inner{
// background: #fff;
// border: none;
// height: 20px;
// }
// }
::v-deep .el-radio-button__inner,
.el-radio-group {
vertical-align: top;
@@ -2325,13 +2302,6 @@ export default {
}
}
.searchbar {
//background-color: #ffffff;
// border: 1px solid #f3f3f3;
// width: 900px;
// padding: 5px 20px;
}
.fixed {
position: fixed;
top: 0px;
@@ -2423,14 +2393,6 @@ export default {
}
}
// .tip{
// color:#999999;
// font-size: 12px;
// >span{
// margin-right: 8px;
// cursor: pointer;
// }
// }
.search-item {
// padding: 10px 0;
}
@@ -2473,30 +2435,6 @@ export default {
}
}
}
// .course-form {
// width: 100%;
// margin: 10px 0;
// ::v-deep.el-button {
// width: 100%;
// color: #fff;
// }
// }
// .right-box {
// .add-btn {
// width: 100%;
// padding: 15px 0;
// }
// .ranking-card {
// margin-top: 0px;
// }
// .ranking-data {
// margin: 10px 0;
// color: #999999;
// }
// }]
.search-item-type {
line-height: 25px;
padding-right: 10px;
@@ -2550,22 +2488,12 @@ export default {
padding: 0 !important;
}
/* ---end--- */
// 2025-11-07 10:00 修改
.search-div.nav {
display: block;
width: 100%;
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 {
margin: 0px 5px;
@@ -2614,22 +2542,6 @@ a.custom2 {
display: none;
}
/* 添加标签样式 */
//.course-tags {
// margin: 5px 0;
// min-height: 20px;
//}
//.course-tags ::v-deep .el-tag {
// color: #387DF7 !important;
// border-color: #387DF7 !important;
//}
//.course-tags ::v-deep .el-tag .el-tag__close {
// color: #387DF7 !important;
//}
//.course-tags ::v-deep .el-tag .el-tag__close:hover {
// background-color: #387DF7 !important;
// color: white !important;
//}
.course-tag-item {
color: #333333; // 默认深灰色
@@ -2648,7 +2560,7 @@ a.custom2 {
/* 保持原有的导航底部横线样式 */
.nav-bottbor {
position: absolute;
top: 130%;
top: 100%;
left: 0;
width: 100%;
height: 4px;
@@ -2668,7 +2580,7 @@ a.custom2 {
gap: 5px;
}
}
// 2025-11-07 10:00 修改
.hot-tags-wrapper {
display: flex;
flex-wrap: wrap;
@@ -2676,22 +2588,7 @@ a.custom2 {
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;
@@ -2738,4 +2635,23 @@ a.custom2 {
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>