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

调试

Browse Source
This commit is contained in:
670788339
2025-11-13 13:20:03 +08:00
parent 295694349e
commit 9148587eca
1 changed files with 30 additions and 212 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -71,25 +71,25 @@
<!-- 内容导航 -->
<div class="topNav" v-if="!newData">
<div class="search-div nav" style="flex: 1;height: auto;background: #fff;">
<div class="nav-primary" style="gap: 5px;display: flex;margin-top: 20px;">
<div class="nav-primary" style="gap: 15px;display: flex">
<div @click="handleTypeAllClick(1)" class="option-item" style="position: relative;" :class="{ 'option-active': ctypeTagAll }">
<a>全部</a>
<!-- <span :class="ctypeTagAll ? 'nav-bottbor' : ''"></span>-->
<span :class="ctypeTagAll ? 'nav-bottbor' : ''"></span>
</div>
<div @click="handleTypeClick(ctypeList[0], ctypeList)" class="option-item" style="padding-left: 10px;"
<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 }">
<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 }">
<a>学习项目</a>
<!-- <span :class="ctypeList[2].checked ? 'nav-bottbor' : ''"></span>-->
<span :class="ctypeList[2].checked ? 'nav-bottbor' : ''"></span>
</div>
<a class="option-item">
<span @click="uClassClick" class="Uxtext" > U选小课堂
@@ -100,9 +100,10 @@
</a>
</div>
<!-- 修改热点标签区域 -->
<div style="margin: 10px 0;">
<!-- <div class="hot-tags-wrapper">
<div style="margin-top:10px;flex: 1;">
<!-- 修改热点标签容器，支持换行 -->
<div class="hot-tags-wrapper">
<div class="hot-tags-wrapper" style="display: flex">
<div
class="option-item" style=" padding-top: 2px;"
:class="{ 'option-active': isAllHotTagsSelected }"
@@ -112,7 +113,8 @@
<span :class="isAllHotTagsSelected ? 'nav-bottbor' : ''"></span>
</div>
&lt;!&ndash; <div
<div class="fieldbox">
<div
class="option-item" style=" padding-top: 2px;"
v-for="tag in hotTagsList"
:key="tag.id"
@@ -121,52 +123,13 @@
>
<span>{{tag.tagName}}</span>
<span :class="tag.checked ? 'nav-bottbor' : ''"></span>
</div>&ndash;&gt;
&lt;!&ndash; 第一行的热点标签 &ndash;&gt;
<div v-for="(tag, index) in firstRowTags" :key="tag.id"
class="option-item" style="padding-top: 2px;"
@click="handleTagClick(tag, hotTagsList, 1)"
:class="{ 'option-active': tag.checked }">
<span>{{ tag.tagName }}</span>
&lt;!&ndash; <span :class="tag.checked ? 'nav-bottbor' : ''"></span>&ndash;&gt;
</div>
</div>
&lt;!&ndash; 第二行热点标签 &ndash;&gt;
<div class="hot-tags-row" v-if="secondRowTags.length > 0">
&lt;!&ndash; 第二行的热点标签 &ndash;&gt;
<div v-for="(tag, index) in secondRowTags" :key="tag.id"
class="option-item" style="padding-top: 2px;"
@click="handleTagClick(tag, hotTagsList, 1)"
:class="{ 'option-active': tag.checked }">
<span>{{ tag.tagName }}</span>
&lt;!&ndash; <span :class="tag.checked ? 'nav-bottbor' : ''"></span>&ndash;&gt;
</div>
</div>
</div>-->
<div style="flex:1;" id="searchBox">
<div class="field" 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">
<div v-for="(tag, index) in firstRowTags" :key="tag.id"
class="option-item" style="padding-top: 2px;"
@click="handleTagClick(tag, hotTagsList, 1)"
:class="{ 'option-active': tag.checked }">
<span>{{ tag.tagName }}</span>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- <div id="fixd-box" class="upload" style="margin-left: 26px;">
<div v-if="identity == 2 || identity == 3 || identity == 5">
<div class="portal-model-btn pointer" style="margin-bottom: 0px;height: 100px;line-height: 100px;"
@@ -293,10 +256,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>
@@ -501,16 +460,7 @@ export default {
// 添加计算是否所有热点标签都未选中（即"全部"选中状态）
isAllHotTagsSelected() {
return !this.hotTagsList.some(tag => tag.checked);
},
// 计算第一行显示的标签（前5个）
firstRowTags() {
return this.hotTagsList.slice(0, 8);
},
// 计算第二行显示的标签（剩余标签）
secondRowTags() {
return this.hotTagsList.slice(8);
},
}
},
data() {
return {
@@ -2061,13 +2011,6 @@ export default {
color: #999;
}
.couderbox {
// width: 5px;
// padding: 0;
// display: inline-block;
// text-align: center;
}
.coures-border {
width: 2px;
height: 15px;
@@ -2311,16 +2254,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;
@@ -2374,13 +2307,6 @@ export default {
}
}
.searchbar {
//background-color: #ffffff;
// border: 1px solid #f3f3f3;
// width: 900px;
// padding: 5px 20px;
}
.fixed {
position: fixed;
top: 0px;
@@ -2472,14 +2398,6 @@ export default {
}
}
// .tip{
// color:#999999;
// font-size: 12px;
// >span{
// margin-right: 8px;
// cursor: pointer;
// }
// }
.search-item {
// padding: 10px 0;
}
@@ -2522,30 +2440,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;
@@ -2599,19 +2493,15 @@ export default {
padding: 0 !important;
}
/* ---end--- */
// 2025-11-07 10:00 修改
.search-div.nav {
display: block;
width: 100%;
clear: both;
}
.option-item {
position: relative;
cursor: pointer;
white-space: nowrap;
// 确保所有option-item的左边距一致
margin: 0 5px; // 保持左右间距一致
margin: 0px 5px;
}
/* 热点标签：自定义按钮样式 */
a.custom {
@@ -2657,22 +2547,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; // 默认深灰色
@@ -2699,76 +2573,25 @@ a.custom2 {
border-radius: 5px;
}
/* 响应式调整，当屏幕较小时减小标签间距 */
@media (max-width: 1600px) {
.hot-tags-row:first-child,
.hot-tags-row:nth-child(2) {
margin-left: 80px;
gap: 12px;
}
}
@media (max-width: 1400px) {
.hot-tags-row:first-child,
.hot-tags-row:nth-child(2) {
margin-left: 75px;
.hot-tags-wrapper {
gap: 10px;
}
}
@media (max-width: 1200px) {
.hot-tags-row:first-child,
.hot-tags-row:nth-child(2) {
margin-left: 70px;
gap: 8px;
@media (max-width: 1400px) {
.hot-tags-wrapper {
gap: 5px;
}
}
.hot-tags-wrapper {
display: flex;
flex-wrap: wrap;
gap: 5px;
gap: 15px;
align-items: center;
padding-top: 2px;
margin-left: 0;
padding-left: 0;
width: 100%;
}
.nav-primary {
display: flex;
flex-wrap: wrap;
gap: 5px;
align-items: center;
margin-top: 20px;
width: 100%;
}
.hot-tags-row {
display: flex;
align-items: center;
gap: 15px;
width: 100%;
margin-bottom: 8px; /* 行间距 */
}
/* 第一行热点标签：与分类导航对齐 */
.hot-tags-row:first-child {
margin-left: 85px; /* 与"全部"标签对齐的偏移量 */
padding-left: 0;
}
/* 第二行热点标签：与第一行第一个标签对齐 */
.hot-tags-row:nth-child(2) {
margin-left: 64px; /* 与第一行第一个标签对齐 */
padding-left: 0;
}
/* 分类导航项样式调整 */
.nav-primary > .option-item:not(.hot-tags-wrapper) {
margin: 0 15px;
}
/* 热点标签项样式 */
.hot-tags-wrapper .option-item {
margin: 0;
flex-shrink: 0; /* 防止标签被压缩 */
}
.course-tags {
@@ -2817,8 +2640,6 @@ a.custom2 {
background-color: transparent !important;
}
.fieldbox {
display: flex;
@@ -2838,7 +2659,4 @@ a.custom2 {
color: #387DF7;
}
}
</style>