mirror of
https://codeup.aliyun.com/67762337eccfc218f6110e0e/vue/learning-system-portal.git
synced 2025-12-10 19:36:43 +08:00
1111修改课程库内容导航底色样式
This commit is contained in:
670788339
@@ -62,229 +62,16 @@
|
||||
</div>
|
||||
</div>
|
||||
<div id="fixd-box">
|
||||
<!-- 好评榜 -->
|
||||
<!-- <div class="portal-ranking-list ranking-bg">
|
||||
<div class="ranking-title">好评榜</div>
|
||||
<ul class="ranking-data">
|
||||
<li class="list-info" v-for="(item, index) in scorelist" :key="index"
|
||||
style="cursor: pointer;margin-top:24px;line-height: 30px;display: flex;">
|
||||
<a style="display: inherit" @click="toCourseDetail(item)">
|
||||
<span class="portal-right-text blue-one" v-if="index == 0">
|
||||
<img :src="`${webBaseUrl}/images/listblue01.png`" alt="">
|
||||
</span>
|
||||
<span class="portal-right-text blue-tow" v-if="index == 1">
|
||||
<img :src="`${webBaseUrl}/images/listblue02.png`" alt="">
|
||||
</span>
|
||||
<span class="portal-right-text blue-three" v-if="index == 2">
|
||||
<img :src="`${webBaseUrl}/images/listblue03.png`" alt="">
|
||||
</span>
|
||||
<span class="portal-right-text" v-if="index == 3">
|
||||
<img :src="`${webBaseUrl}/images/list04.png`" alt="">
|
||||
</span>
|
||||
<span class="portal-right-text" v-if="index == 4">
|
||||
<img :src="`${webBaseUrl}/images/list05.png`" alt="">
|
||||
</span>
|
||||
<span class="portal-title-desc title-line-ellipsis" v-if="item.images == ''"
|
||||
style="font-size: 14px;">{{ item.name }}</span>
|
||||
<span class="portal-title-desc" v-else style="font-size: 14px;">
|
||||
<span class="portal-images-title two-line-ellipsis">{{ item.name }}</span>
|
||||
</span>
|
||||
|
||||
<div class="list-active">
|
||||
<div class="list-content">
|
||||
<div class="list-img">
|
||||
<course-image :course="item" :text="false" width="108px" height="60px"></course-image>
|
||||
<span v-if="item.type < 21" class="course-type">录播</span>
|
||||
<span v-if="item.type == 30" class="course-type">线下课</span>
|
||||
<span v-if="item.type == 40" class="course-type">学习项目</span>
|
||||
</div>
|
||||
<div class="list-text">
|
||||
<h6 class="index-one-line-ellipsis">{{ item.name }}</h6>
|
||||
<span class="index-one-line-ellipsis">{{ item.publishTime }}</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="list-bottom">
|
||||
<couresinteract :type="1" :data="item"></couresinteract>
|
||||
</div>
|
||||
</div>
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div> -->
|
||||
<!-- 人气榜 -->
|
||||
<!-- <div style="margin-top:26px" class="portal-ranking-list ranking-bg1">
|
||||
<div class="ranking-title">人气榜</div>
|
||||
<ul class="ranking-data">
|
||||
<li class="list-info" v-for="(item, index) in ankingList" :key="index"
|
||||
style="cursor: pointer;margin-top:24px;line-height: 30px;display: flex;">
|
||||
<a style="display: inherit" @click="toCourseDetail(item)">
|
||||
<span class="portal-right-text orange-one" v-if="index == 0">
|
||||
<img :src="`${webBaseUrl}/images/list-01.png`" alt="">
|
||||
</span>
|
||||
<span class="portal-right-text orange-tow" v-if="index == 1">
|
||||
<img :src="`${webBaseUrl}/images/list02.png`" alt="">
|
||||
</span>
|
||||
<span class="portal-right-text orange-three" v-if="index == 2">
|
||||
<img :src="`${webBaseUrl}/images/list03.png`" alt="">
|
||||
</span>
|
||||
<span class="portal-right-text" v-if="index == 3">
|
||||
<img :src="`${webBaseUrl}/images/list04.png`" alt="">
|
||||
</span>
|
||||
<span class="portal-right-text" v-if="index == 4">
|
||||
<img :src="`${webBaseUrl}/images/list05.png`" alt="">
|
||||
</span>
|
||||
<span class="portal-title-desc title-line-ellipsis" v-if="item.images == ''"
|
||||
style="font-size: 14px;">{{ item.name }}</span>
|
||||
<span class="portal-title-desc" v-else style="font-size: 14px;">
|
||||
<span class="portal-images-title two-line-ellipsis">{{ item.name }}</span>
|
||||
</span>
|
||||
|
||||
<div class="list-active">
|
||||
<div class="list-content">
|
||||
<div class="list-img">
|
||||
<course-image :course="item" :text="false" width="108px" height="60px"></course-image>
|
||||
<span v-if="item.type < 21" class="course-type">录播</span>
|
||||
<span v-if="item.type == 30" class="course-type">线下课</span>
|
||||
<span v-if="item.type == 40" class="course-type">学习项目</span>
|
||||
</div>
|
||||
<div class="list-text">
|
||||
<h6 class="index-one-line-ellipsis">{{ item.name }}</h6>
|
||||
<span class="index-one-line-ellipsis">{{ item.publishTime }}</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="list-bottom">
|
||||
<couresinteract :type="1" :data="item"></couresinteract>
|
||||
</div>
|
||||
</div>
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div> -->
|
||||
<!-- 热榜 -->
|
||||
<!-- <div style="margin-top:26px" class="portal-ranking-list ranking-bg2">
|
||||
<div class="ranking-title">热度榜</div>
|
||||
<ul class="ranking-data">
|
||||
<li class="list-info" v-for="(item, index) in hotList" :key="index"
|
||||
style="cursor: pointer;margin-top:24px;line-height: 30px;display: flex;">
|
||||
<a style="display: inherit" @click="toCourseDetail(item)">
|
||||
<span class="portal-right-text orange-one" v-if="index == 0">
|
||||
<img :src="`${webBaseUrl}/images/listred01 .png`" alt="">
|
||||
</span>
|
||||
<span class="portal-right-text orange-tow" v-if="index == 1">
|
||||
<img :src="`${webBaseUrl}/images/listred02.png`" alt="">
|
||||
</span>
|
||||
<span class="portal-right-text orange-three" v-if="index == 2">
|
||||
<img :src="`${webBaseUrl}/images/listred03.png`" alt="">
|
||||
</span>
|
||||
<span class="portal-right-text" v-if="index == 3">
|
||||
<img :src="`${webBaseUrl}/images/list04.png`" alt="">
|
||||
</span>
|
||||
<span class="portal-right-text" v-if="index == 4">
|
||||
<img :src="`${webBaseUrl}/images/list05.png`" alt="">
|
||||
</span>
|
||||
<span class="portal-title-desc title-line-ellipsis list-lidex" v-if="item.images == ''"
|
||||
style="font-size: 14px;">{{ item.courseName }}</span>
|
||||
<span class="portal-title-desc " v-else style="font-size: 14px;">
|
||||
<span class="portal-images-title two-line-ellipsis">{{ item.courseName }}</span>
|
||||
</span>
|
||||
<div class="list-active">
|
||||
<div class="list-content">
|
||||
<div class="list-img">
|
||||
<course-image :course="item" :text="false" width="108px" height="60px"></course-image>
|
||||
<span v-if="item.type < 21" class="course-type">录播</span>
|
||||
<span v-if="item.type == 30" class="course-type">线下课</span>
|
||||
<span v-if="item.type == 40" class="course-type">学习项目</span>
|
||||
</div>
|
||||
<div class="list-text">
|
||||
<h6 class="index-one-line-ellipsis">{{ item.courseName }}</h6>
|
||||
<span class="index-one-line-ellipsis">{{ item.publishTime }}</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="list-bottom">
|
||||
<couresinteract :type="1" :data="item"></couresinteract>
|
||||
</div>
|
||||
</div>
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div> -->
|
||||
</div>
|
||||
</div>
|
||||
<!-- 右侧 -->
|
||||
<div class="xcontent2-main content-div">
|
||||
<!-- 之前的 -->
|
||||
<!-- <div class="search-div" style="margin-right:36px">
|
||||
<div class="searchbar" style="padding-right: 40px;" v-if="stagList.length > 0">
|
||||
<span @click="handleClearTags" style="float: right;margin-top: 6px;margin-right: -20px;color: #858585;cursor: pointer;" title="清除查询条件"><i class="el-icon-close"></i> 清除</span>
|
||||
<div style="line-height: 30px;">
|
||||
<span class="item-title"> 搜索条件</span>
|
||||
<el-tag closable v-for="(tag, tagIdx) in stagList" :key="'t'+tagIdx" @close="stagClose(tag,tagIdx)">{{ tag.name }}</el-tag>
|
||||
</div>
|
||||
</div>
|
||||
<div class="search-item">
|
||||
<div style="margin-top:10px; display: flex;">
|
||||
<div style="line-height: 25px;padding-right: 10px;">
|
||||
<span class="item-title" style="padding-right: 5px;">授课方式:</span>
|
||||
</div>
|
||||
<div>
|
||||
<a @click="handleTypeAllClick(1)" class="option-item" :class="{'option-active':ctypeTagAll}">全部</a>
|
||||
<a @click="handleTypeClick(ctypeList[0],ctypeList)" class="option-item" :class="{'option-active':ctypeList[0].checked}">录播课</a>
|
||||
<a @click="handleTypeClick(ctypeList[1],ctypeList)" class="option-item" :class="{'option-active':ctypeList[1].checked}">线下课</a>
|
||||
<a class="option-border"> </a>
|
||||
<a @click="handleTypeClick(ctypeList[2],ctypeList)" class="option-item" :class="{'option-active':ctypeList[2].checked}">学习项目</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="search-item">
|
||||
<div style="line-height: 25px;margin-top:10px; display: flex;">
|
||||
<div class="search-item-type">
|
||||
<span class="item-title" style="padding-right: 5px;">一级分类:</span>
|
||||
</div>
|
||||
<div>
|
||||
<a @click="handleTypeAllClick(11)" class="option-item" :class="{'option-active':oneTagAll}">全部</a>
|
||||
<a v-for="one in oneList" @click="handleOptionClick(one,oneList,1)" class="option-item" :class="{'option-active':one.checked}">{{one.name}}</a>
|
||||
<a class="option-border"> </a>
|
||||
<a class="option-item">
|
||||
<span @click="uClassClick" class="Uxtext" style=""> U选小课堂
|
||||
<span class="uxicon">
|
||||
<svg-icon icon-class="hot" style="font-size:22px"></svg-icon>
|
||||
</span>
|
||||
</span>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="search-item" v-if="twoList.length>0">
|
||||
<div style="line-height: 25px;margin-top:10px; display: flex;justify-content: flex-start;">
|
||||
<div class="search-item-type">
|
||||
<span class="item-title" style="padding-right: 5px;">二级分类:</span>
|
||||
</div>
|
||||
<div style="white-space: nowrap;">
|
||||
<a @click="handleTypeAllClick(12)" class="option-item" :class="{'option-active':twoTagAll}">全部</a>
|
||||
</div>
|
||||
<div>
|
||||
<a v-for="two in twoList" @click="handleOptionClick(two,twoList,2)" class="option-item" :class="{'option-active':two.checked}">{{two.name}}</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="search-item" v-if="threeList.length>0">
|
||||
<div style="line-height: 25px;margin-top:10px; display: flex;justify-content: flex-start;">
|
||||
<div class="search-item-type">
|
||||
<span class="item-title" style="padding-right: 5px;">三级分类:</span>
|
||||
</div>
|
||||
<div style="white-space: nowrap;">
|
||||
<a @click="handleTypeAllClick(13)" class="option-item" :class="{'option-active':threeTagAll}">全部</a>
|
||||
</div>
|
||||
<div>
|
||||
<a v-for="three in threeList" :key="three.id" @click="handleOptionClick(three,threeList,3)" class="option-item" :class="{'option-active':three.checked}">{{three.name}}</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div> -->
|
||||
|
||||
<!-- 内容导航 -->
|
||||
<div class="topNav" v-if="!newData">
|
||||
<div class="search-div nav" style="flex: 1;height: auto;">
|
||||
<div class="nav-primary">
|
||||
<div class="search-div nav" style="flex: 1;height: auto;background: #fff;">
|
||||
<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>
|
||||
@@ -2472,6 +2259,7 @@ export default {
|
||||
height: auto;
|
||||
min-height: 60px;
|
||||
|
||||
|
||||
::v-deep .el-input {
|
||||
width: 420px;
|
||||
height: 38px;
|
||||
|
||||
Reference in New Issue
Block a user