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

提交

Browse Source
This commit is contained in:
zhaofang
2022-09-26 20:11:22 +08:00
parent 147e7a2fcf
commit 96e07d3135
13 changed files with 80 additions and 111 deletions
Download Patch File Download Diff File Expand all files Collapse all files

BIN
public/images/listblue010.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 629 B

BIN
public/images/listblue04.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 738 B

BIN
public/images/listblue05.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 840 B

BIN
public/images/listblue06.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 864 B

BIN
public/images/listblue07.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 776 B

BIN
public/images/listblue08.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 887 B

BIN
public/images/listblue09.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 863 B

2
src/api/phase2/index.js
View File

@@ -3,7 +3,7 @@ import ajax from '@/utils/xajax.js'
/**
* 首页推荐案例
* @param type 1最热 2最新
* @param type 2最热 1最新
* */
const cases=function (type){
return ajax.get('/xboe/portal/index/cases?type='+type);

6
src/assets/styles/portal-index.scss
View File

@@ -53,6 +53,12 @@
color: #00253E;
line-height: 22px;
}
.portal-index-summary{
font-size: 14px;
font-weight: 400;
color: #04243C;
line-height: 24px;
}
.portal-summary-text{ // 问答详情
font-size: 14px;
font-family: PingFangSC-Regular, PingFang SC;

8
src/assets/styles/portal.scss
View File

@@ -41,10 +41,10 @@ body {
// margin: 0px auto;
}
.index-course{
width: 25%;
// width: 25%;
}
.course-index{
width: 33.3333%;
// width: 33.3333%;
}
}
@@ -89,11 +89,11 @@ body {
}
.index-course{
// width: 16.6666666667%;
width: 33.3333%;
// width: 33.3333%;
}
.course-index{
// width: 20%;
width: 33.3333%;
// width: 33.3333%;
}
}

2
src/components/UcHeader/Index.vue
View File

@@ -181,7 +181,7 @@ import {userAvatarText,cutFullName} from "@/utils/tools.js";
this.uinfo.monthTotalDay = item.total;
}
if(item.statType == 30) {
this.uinfo.uCurrency = item.todays;
this.uinfo.uCurrency = item.total;
}
});
}

170
src/views/Index.vue
View File

@@ -22,15 +22,15 @@
<ul class="personal-ul">
<li>
<span class="label">累计学习</span>
<p><span>120.75</span>小时</p>
<p><span>{{userData.studyHourValue}}</span>小时</p>
</li>
<li>
<span class="label">经验值等级</span>
<p><span>L1</span></p>
<p><span>{{userData.level}}</span></p>
</li>
<li>
<span class="label">我的U币</span>
<p><span>307</span>个</p>
<p><span>{{userData.coinValue}}</span>个</p>
</li>
</ul>
</div>
@@ -58,10 +58,10 @@
<div class="modules-list xrow" style="height: 485px;overflow: hidden;">
<!--一个固定内容-->
<div class="xrow-course index-course">
<el-card class="course-card" :body-style="{ padding: '0px' }">
<div class="course-card">
<a href="course/boeframe?id=517CA622-238E-06BA-0AED-B1200D705800&type=online-course">
<div class="course-image-box">
<el-image class="course-image" style="height: 130px;" :src="this.webBaseUrl+'/ad/index_course.png'" fit="fit"></el-image>
<el-image class="course-image" style="height: 200px;" :src="this.webBaseUrl+'/ad/index_course.png'" fit="fit"></el-image>
<span class="course-type">录播课</span>
</div>
<div title="高效谈判系列课" class="course-title one-line-ellipsis">高效谈判系列课</div>
@@ -77,14 +77,14 @@
</div>
</div>
</a>
</el-card>
</div>
</div>
<!--内容列表内容-->
<div v-for="course in courseList.list" :key="course.id" class="xrow-course index-course">
<div class="course-card">
<a :href="toCourseDetail(course)">
<div class="course-image-box">
<course-image height="130px" :course="course"></course-image>
<course-image height="200px" :course="course"></course-image>
<span v-if="course.type == 20 || 10" class="course-type">录播课</span>
</div>
<div :title="course.name" class="course-title one-line-ellipsis" >{{ course.name }}</div>
@@ -103,7 +103,6 @@
</div>
</div>
</a>
<!-- 收藏位置 -->
<div class="cor-praises"><interactBar :type="1" :data="course" :comments="false" :praises="false" :shares="false" :views="false"></interactBar></div>
</div>
</div>
@@ -115,20 +114,8 @@
<p class="portal-title-one" style="padding-bottom:12px">课程排行榜</p>
<ul>
<li class="list-info" v-for="(item, index) in scorelist" :key="index" style="cursor: pointer;margin-top:24px;line-height: 30px;display: flex;">
<span class="portal-right-text blue-one" v-if="index==0">
<img src="/images/listblue01.png" alt="">
</span>
<span class="portal-right-text blue-tow" v-if="index==1">
<img src="/images/listblue02.png" alt="">
</span>
<span class="portal-right-text blue-three" v-if="index==2">
<img src="/images/listblue03.png" alt="">
</span>
<span class="portal-right-text" v-if="index==3">
<img src="/images/list04.png" alt="">
</span>
<span class="portal-right-text" v-if="index==4">
<img src="/images/list05.png" alt="">
<span class="portal-right-text blue-one">
<img :src="getPic(index)" 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;">
@@ -170,12 +157,12 @@
</div>
<div class="modules-list">
<ul class="case-box">
<li class="case-index" v-for="ca in caseList.list" :key="ca.id">
<li class="case-index" v-for="(ca,ind) in caseList.list" :key="ca.id">
<div class="case-top"></div>
<div class="case-conent">
<p class="cast-time">
<span><svg-icon style="margin-right: 0;font-size:16px;" icon-class="crown"></svg-icon>人气榜NO.1</span>
<span>2022-05-19</span>
<span class="time-one" v-if="caseList.orderType==2"><svg-icon style="margin-right: 0;font-size:16px;" icon-class="crown"></svg-icon>人气榜NO.{{ind+1}}</span>
<span style="float: right;">2022-05-19</span>
</p>
<p :title="ca.title" class="two-line-ellipsis case-title">{{ca.title}}</p>
<p class="case-text three-line-ellipsis">{{ca.summary}}</p>
@@ -190,24 +177,12 @@
</div>
</div>
<div>
<div style="margin-top:46px" class="ranking-card portal-right-box list-bg1">
<div style="margin-top:46px" class="ranking-card portal-right-box list-bg">
<p class="portal-title-one" style="padding-bottom:12px">案例排行榜</p>
<ul>
<li v-for="(item, index) in Popularity" :key="index" class="title-line-ellipsis" style="cursor: pointer;margin-top:30px;line-height: 22px;">
<span class="portal-right-text orange-one" v-if="index==0">
<img src="/images/list-01.png" alt="">
</span>
<span class="portal-right-text orange-tow" v-if="index==1">
<img src="/images/list02.png" alt="">
</span>
<span class="portal-right-text orange-three" v-if="index==2">
<img src="/images/list03.png" alt="">
</span>
<span class="portal-right-text" v-if="index==3">
<img src="/images/list04.png" alt="">
</span>
<span class="portal-right-text" v-if="index==4">
<img src="/images/list05.png" alt="">
<span class="portal-right-text orange-one">
<img :src="getPic(index)" alt="">
</span>
<span class="portal-title-desc" style="font-size: 14px;">{{ item.title }}</span>
</li>
@@ -292,28 +267,16 @@
</div>
</div>
<!--内容块-->
<div>
<div style="margin-top:46px">
<!-- 排行榜位置 -->
<div class="portal-right-box art-bgimg" style="background-color:#fff;">
<div class="portal-right-box art-bgimg" style="background-color:#fff;" >
<p class="portal-title-one" style="padding-bottom:12px" >文章排行榜</p>
<ul>
<li v-for="(item, index) in ankingList" :key="index" style="margin-top:30px;line-height: 22px;cursor: pointer;">
<span class="portal-right-text orange-one" v-if="index==0" style="margin-right:94px">
<img src="/images/list-01.png" alt="">
<span class="portal-right-text orange-one">
<img :src="getPic(index)" alt="">
</span>
<span class="portal-right-text orange-tow" v-if="index==1" style="margin-right:94px">
<img src="/images/list02.png" alt="">
</span>
<span class="portal-right-text orange-three" v-if="index==2" style="margin-right:94px">
<img src="/images/list03.png" alt="">
</span>
<span class="portal-right-text" v-if="index==3" style="margin-right:94px">
<img src="/images/list04.png" alt="">
</span>
<span class="portal-right-text" v-if="index==4" style="margin-right:94px">
<img src="/images/list05.png" alt="">
</span>
<span class="portal-title-desc">{{ item.sysCreateUname }}</span>
<span class="portal-index-summary">{{ item.title }}</span>
</li>
</ul>
</div>
@@ -336,7 +299,7 @@
<!--内容列表内容-->
<ul class="qa-box">
<li class="qa-card" v-for="qa in qaList.list" :key="qa.id">
<p class="qa-top"><span>300正在关注</span><span>{{ qa.sysCreateTime.substring(0, 10) }}</span></p>
<p class="qa-top"><span>{{qa.views}}正在关注</span><span>{{ qa.sysCreateTime.substring(0, 10) }}</span></p>
<div class="qa-center">
<p class="one-line-ellipsis portal-index-title" style="color:#181818;">{{ qa.title }}</p>
<p class="portal-summary-text two-line-ellipsis" style="color:#6E7B84;margin-top: 12px;">{{ qa.content }}</p>
@@ -346,35 +309,23 @@
<author-img :avatar="qa.authorInfo.avatar" :aid="qa.authorInfo.aid" :sex="qa.authorInfo.sex"></author-img>
<div>
<p class="info-name">{{qa.authorInfo.name}}</p>
<p style="margin-left:2px"><interactBar :type="4" :readonly="true" :data="qa" :comments="true" :shares="false" :praises="false" :views="false"></interactBar></p>
<p style="margin-left:2px"><interactBar :type="4" :readonly="true" :data="qa" :comments="false" :answers="true" :shares="false" :praises="false" :views="false"></interactBar></p>
</div>
</div>
</li>
</ul>
</el-row>
</div>
<div>
<div style="margin-top:60px">
<!-- 排行榜 -->
<div class="portal-right-box list-bg" style="margin-top:62px">
<div class="portal-right-box list-bg">
<p class="portal-title-one" style="padding-bottom:12px">问答排行榜</p>
<ul>
<li v-for="(item, index) in ankingList" :key="index" style="margin-top:30px;line-height: 22px;cursor: pointer;">
<span class="portal-right-text orange-one" v-if="index==0" style="margin-right:94px">
<img src="/images/list-01.png" alt="">
<li v-for="(item, index) in answersList" :key="index" style="margin-top:30px;line-height: 22px;cursor: pointer;">
<span class="portal-right-text orange-one">
<img :src="getPic(index)" alt="">
</span>
<span class="portal-right-text orange-tow" v-if="index==1" style="margin-right:94px">
<img src="/images/list02.png" alt="">
</span>
<span class="portal-right-text orange-three" v-if="index==2" style="margin-right:94px">
<img src="/images/list03.png" alt="">
</span>
<span class="portal-right-text" v-if="index==3" style="margin-right:94px">
<img src="/images/list04.png" alt="">
</span>
<span class="portal-right-text" v-if="index==4" style="margin-right:94px">
<img src="/images/list05.png" alt="">
</span>
<span class="portal-title-desc">{{ item.sysCreateUname }}</span>
<span class="portal-index-summary">{{ item.title }}</span>
</li>
</ul>
</div>
@@ -408,17 +359,21 @@ import { toScore,cutFullName} from '@/utils/tools.js';
import { swiper, swiperSlide } from 'vue-awesome-swiper';
import apiPlace from "@/api/phase2/place.js"
import AuthorImg from '@/components/Portal/authorImg.vue';
import apiStart from '@/api/phase2/stat.js'
import apiIndex from '@/api/phase2/index.js'
export default {
name: 'index',
components: {AuthorImg, portalHeader,ad, portalFooter, articleImage, portalFloatTools, authorInfo, interactRowBar, interactBar, courseImage },
computed: {
// ...mapGetters(['userInfo'])
...mapGetters(['userInfo'])
},
data() {
return {
userData:{},
userInfo:{},
ankingList:[],
answersList:[],
Popularity:[],
scorelist:[],
resonimg:[],
@@ -481,6 +436,8 @@ export default {
this.getScoreList();
this.getPopularity();
this.getAnkingData();
this.getLevel();
this.getQaAnswers();
},
computed: {
@@ -496,15 +453,33 @@ export default {
// })
},
methods: {
getPic(index) {
return `/images/listblue0${index+1}.png`
},
getLevel(){//获取经验值和等级
apiStart.getUserStatTotalInfo(this.userInfo.aid).then(res=>{
if(res.status == 200) {
this.userData = res.result;
}
});
},
getQaAnswers() {
apiIndex.qaAnswers(3).then(res=>{
if (res.status == 200) {
this.answersList = res.result;
}
})
},
getAnkingData() {// 文章排行榜
apiArticle.countsUsername(5).then(res => {
apiIndex.articleViews(7).then(res => {
if (res.status == 200) {
this.ankingList = res.result;
}
});
},
getPopularity() {//案例排行榜
apiCase.queryPraises(5).then(res => {
apiCase.queryPraises(4).then(res => {
if (res.status == 200) {
this.Popularity = res.result;
// console.log(this.Popularity)
@@ -615,15 +590,7 @@ export default {
this.getCaseData();
},
getCaseData() {
let params = {
pageSize: this.caseList.num,
orderAsc: false,
orderField: 'id'
};
if (this.caseList.orderType == 2) {
params.orderField = 'comments';
}
apiCase.indexList(params).then(res => {
apiIndex.cases(this.caseList.orderType).then(res => {
if (res.status == 200) {
if (res.result.length > 0) {
let userIds = [];
@@ -775,7 +742,6 @@ export default {
});
} else {
console.log('加载用户信息失败:' + res.error);
//this.$message.error(res.message);
}
});
},
@@ -799,12 +765,10 @@ export default {
});
} else {
console.log('加载用户信息失败:' + res.error);
//this.$message.error(res.message);
}
});
},
jumpRouter(item) {
// window.open(`${this.webBaseUrl}/qa/answer?id=${item.id}`)
this.$router.push({ path: '/qa/answer', query: { id: item.id } });
}
}
@@ -820,7 +784,7 @@ export default {
height: 370px;
background: rgba(0,0,0,0.39);
border-radius: 8px;
z-index: 999999;
z-index: 999;
backdrop-filter: blur(10px);
padding: 38px 47px 31px 32px;
text-align: center;
@@ -1051,10 +1015,10 @@ export default {
.cast-time{
font-size: 14px;
color: #6E7B84;
display: flex;
justify-content: space-between;
// display: flex;
// justify-content: space-between;
margin-bottom: 20px;
span:first-child{
.time-one{
height: 24px;
background: rgba($color: #387DF7, $alpha: 0.1);
border-radius: 4px;
@@ -1159,8 +1123,10 @@ export default {
box-sizing: border-box;
}
.course-card {
padding: 30px;
// width: 290px;
margin-bottom: 15px;
margin-bottom: 30px;
margin-right: 36px;
box-sizing: border-box;
position: relative;
background-color: #ffffff;
@@ -1193,12 +1159,12 @@ export default {
}
.course-image-box {
position: relative;
// width: 362px;
// height: 165px;
width: 100%;
width: 350px;
height: 200px;
// width: 100%;
.course-image {
width: 100%;
height: 100%;
// width: 100%;
// height: 100%;
// width: 288px;
// height: 165px;
}

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

@@ -87,9 +87,6 @@
<a :href="toCourseDetail(cinfo)">
<div class="course-image-box" style="height:196px">
<course-image height="196px" :course="cinfo"></course-image>
<!-- <span v-if="cinfo.type < 21" class="course-type-title course-type">录播课</span>
<span v-if="cinfo.type==30" class="course-type-title course-type">线下课</span>
<span v-if="cinfo.type==40" class="course-type-title course-type">学习项目</span> -->
</div>
<div :title="cinfo.title" class="course-title two-line-ellipsis" v-html="cinfo.name">
</div>