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

案例优化，页面实现，

Browse Source
This commit is contained in:
zhangsir
2024-09-02 15:20:41 +08:00
parent 669bf060b7
commit 5df77cd3b1
9 changed files with 979 additions and 6 deletions
Download Patch File Download Diff File Expand all files Collapse all files

204
src/views/portal/case/Index.vue
View File

@@ -139,25 +139,53 @@
<div style="height:30px;background-color:#f6f7fc;"></div>
<div class="order-div" style="border-bottom:none">
<span class="quyer-tag">
<el-button type="text" class="order-class" @click="searchexcellent('all')"
:class="{ actice: queryCondition.type == 'all' }">全部</el-button>
<el-button type="text" class="order-class" @click="searchexcellent('excellent')"
:class="{ actice: queryCondition.type == 'excellent' }">最佳案例</el-button>
:class="{ actice: queryCondition.type == 'excellent' }">年度最佳</el-button>
<el-button type="text" class="order-class" @click="searchexcellent('recommend')"
:class="{ actice: queryCondition.type == 'recommend' }">推荐案例</el-button>
<el-button type="text" class="order-class" @click="searchexcellent('hot')"
<!-- <el-button type="text" class="order-class" @click="searchexcellent('hot')"
:class="{ actice: queryCondition.type == 'hot' }">最热</el-button>
<el-button type="text" class="order-class" @click="searchexcellent('new')"
:class="{ actice: queryCondition.type == 'new' }">最新</el-button>
:class="{ actice: queryCondition.type == 'new' }">最新</el-button> -->
</span>
<div style="flex: 1; display: flex; justify-content: flex-end;align-items: center;">
<div style="margin-right: 20px;color: #6E7B84;font-size: 14px;">当前已检索 <span style="color:#387DF7;">
{{ caseList.count }}</span> 条数据</div>
<!-- <div style="margin-right: 20px;color: #6E7B84;font-size: 14px;">当前已检索 <span style="color:#387DF7;">
{{ caseList.count }}</span> 条数据</div> -->
<div class="pub_time" @click="searchTime">
<div>发布时间</div>
<div class="triangle">
<div :style="{borderBottomColor:pubTimeNum===2?'#00f':'#DCDFE6'}" class="up-triangle"></div>
<div :style="{borderTopColor:pubTimeNum===1?'#00f':'#DCDFE6'}" class="down-triangle"></div>
</div>
</div>
<div class="pub_time" @click="searchPageView">
<div>浏览量</div>
<div class="triangle">
<div :style="{borderBottomColor:pageViewNum===2?'#00f':'#DCDFE6'}" class="up-triangle"></div>
<div :style="{borderTopColor:pageViewNum===1?'#00f':'#DCDFE6'}" class="down-triangle"></div>
</div>
</div>
<el-select v-model="years" multiple collapse-tags
style="margin-left: 20px; width: 147px; border-radius:20px !important;" placeholder="全部年份">
<el-option v-for="item in caseYears" :key="item.value" :label="item.label" :value="item.value">
</el-option>
</el-select>
<div :class="queryCondition.type == 'collect' ? 'collect_active': 'collect'" @click="searchexcellent('collect')">
<div class="png"></div>
<div class="text">收藏案例</div>
</div>
<div :class="queryCondition.type == 'time' ? 'time_active': 'time'" @click="searchexcellent('time')">
<div class="png"></div>
<div class="text">浏览记录</div>
</div>
</div>
</div>
<div class="search_div_num">
当前已检索 <span style="color:#f00;">
{{ caseList.count }}</span> 条数据
</div>
<div class="data-content">
<div v-for="item in caseList.list" :key="item.id" class="case-list">
<div class="case-info">
@@ -169,10 +197,11 @@
<div class="case-tittext">
<span class="title-line-ellipsis" v-html="item.title"></span>
</div>
<div class="case-activeText">
<div class="case-activeText" @click.stop="toExcellent(item)">
<span v-if="item.breCommend" class="comWords"
style="background-color:rgba(232, 139, 72);">荐</span>
<span v-if="item.excellent" class="comWords" style="background-color:red;">最佳</span>
<span class="comWords" style="background-color:orange">2024年度最佳</span>
</div>
<div class="case-info-date portal-time">
<i class="el-icon-time"></i>
@@ -250,6 +279,10 @@
</div>
<!-- 打开排行榜 -->
<div class="xcontent2-minor">
<router-link class="the_charts" to="/case/charts">
<div class="text">排行榜</div>
<div class="icon">></div>
</router-link>
<div id="fixd-box">
<div class="portal-ranking ranking-bg">
<p class="ranking-title">好评榜</p>
@@ -303,6 +336,32 @@
</li>
</ul>
</div>
<div class="portal-ranking ranking-bg" style="margin-top:26px">
<p class="ranking-title">推荐榜</p>
<ul class="ranking-data">
<li v-for="(item, index) in Positive" :key="index" class="title-line-ellipsis"
style="cursor: pointer;margin-top:30px;line-height: 22px;">
<router-link :to="'/case/detail?id=' + item.id">
<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" style="font-size: 14px;">{{ item.title }}</span>
</router-link>
</li>
</ul>
</div>
</div>
</div>
<div style="height: 50px;"></div>
@@ -399,6 +458,8 @@ export default {
},
data() {
return {
pubTimeNum: 0,
pageViewNum: 0,
twoId:'',
treeList:[],
caseType:process.env.VUE_APP_CASE_TYPE,//类型
@@ -818,6 +879,10 @@ export default {
}
this.$router.push({ path: '/case/detail', query: { id } });
},
toExcellent(item){
console.log(item,'xixi')
this.$router.push({path:'/case/excellent',query:{id:item.id}})
},
tylClick() {
window.open("https://m.qingxuetang.com/x/?appId=qxtcorp306130");
},
@@ -1119,6 +1184,26 @@ export default {
this.isSeach = true;
this.search(true);
},
searchTime(){
this.pubTimeNum++
if(this.pubTimeNum>2){
this.pubTimeNum = 0;
}
if(this.pubTimeNum != 0){
this.pageViewNum = 0;
}
this.search(true);
},
searchPageView(){
this.pageViewNum++
if(this.pageViewNum>2){
this.pageViewNum = 0;
}
if(this.pageViewNum != 0){
this.pubTimeNum = 0;
}
this.search(true);
},
searchexcellent(num) {
if(this.queryCondition.type==num){
this.queryCondition.excellent =false;
@@ -1289,6 +1374,8 @@ export default {
// this.caseList.list = [];
// }
this.moreState = 2;
this.queryCondition.pubTimeNum = this.pubTimeNum
this.queryCondition.pageViewNum = this.pageViewNum
await apiCase.queryListV2(this.queryCondition).then((res) => {
if (res.status == 200) {
if (res.result.list.length > 0) {
@@ -1510,6 +1597,20 @@ export default {
</script>
<style scoped lang="scss">
.the_charts{
display: flex;
margin-bottom: 10px;
color: #000;
font-weight: 600;
font-size: 18px;
.text{
margin-right: 20px;
}
.icon{
}
}
// 课程分类
.course-title-style {
position: relative;
@@ -2095,8 +2196,99 @@ export default {
display: flex;
align-items: center;
// margin-bottom: ;
.pub_time{
display: flex;
margin-right: 15px;
cursor: pointer;
.triangle{
margin-left: 5px;
.up-triangle{
width: 0;
height: 0;
border-left: 5px solid transparent;
border-right: 5px solid transparent;
border-bottom: 10px solid #DCDFE6;
margin-bottom: 2px;
}
.down-triangle{
width: 0;
height: 0;
border-left: 5px solid transparent;
border-right: 5px solid transparent;
border-top: 10px solid #DCDFE6;
}
}
}
.time{
display: flex;
flex-direction: column;
align-items: center;
margin-left: 15px;
.png{
width: 20px;
height: 20px;
background: url('../../../assets/images/time.png') no-repeat;
background-size: 100%;
}
.text{
color: #6E7B84;
}
}
.time_active{
display: flex;
flex-direction: column;
align-items: center;
margin-left: 15px;
.png{
width: 20px;
height: 20px;
background: url('../../../assets/images/time_active.png') no-repeat;
background-size: 100%;
}
.text{
color: #387DF7;
}
}
.collect{
display: flex;
flex-direction: column;
align-items: center;
margin-left: 15px;
.png{
width: 22px;
height: 22px;
background: url('../../../assets/images/collect.png') no-repeat;
background-size: 100%;
}
.text{
color: #6E7B84;
}
}
.collect_active{
display: flex;
flex-direction: column;
align-items: center;
margin-left: 15px;
.png{
width: 22px;
height: 22px;
background: url('../../../assets/images/collect_active.png') no-repeat;
background-size: 100%;
}
.text{
color: #387DF7;
}
}
}
.search_div_num{
height: 26px;
display: flex;
justify-content: center;
align-items: center;
background-color: deepskyblue;
color: #387DF7;
}
.data-content {
background-color: #fff;
padding: 5px 50px;