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

提交

Browse Source
This commit is contained in:
zhaofang
2022-08-30 17:04:11 +08:00
parent 3b0da0bdfd
commit 4cd6e7a652
4 changed files with 145 additions and 116 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -205,6 +205,12 @@ aside {
background: #d0d0d0; background: #d0d0d0;
} }
} }
ul{
padding: 0;
}
li{
list-style: none;
}
.link-type, .link-type,
.link-type:focus { .link-type:focus {

69
src/assets/styles/portal-index.scss Normal file
View File

@@ -0,0 +1,69 @@
.portal-right-box{
width: 410px;
border-radius: 8px;
padding: 30px;
}
.portal-right-text{
font-size: 24px;
font-family: JCHEadA;
color: #D9D9D9;
}
.portal-title-one{
font-size: 24px;
font-family: FZLTCHJW--GB1-0, FZLTCHJW--GB1;
font-weight: 500;
color: #000000;
line-height: 28px;
}
.portal-title-desc{
font-size: 18px;
font-family: PingFangSC-Medium, PingFang SC;
font-weight: 500;
color: #677D86;
}
.portal-title-tow{ // 问答标题
font-size: 16px;
font-family: PingFangSC-Medium, PingFang SC;
font-weight: 600;
color: #333333;
line-height: 22px;
}
.portal-summary-text{ // 问答详情
font-size: 14px;
font-family: PingFangSC-Regular, PingFang SC;
font-weight: 400;
color: #666666;
}
.portal-time{ // 问答详情
font-size: 14px;
font-family: PingFangSC-Regular, PingFang SC;
color: #999999;
}
.portal-model-btn{// 写文章，发课程等按钮
width: 410px;
height: 67px;
background: #DDEDFF;
border-radius: 8px;
font-size: 18px;
font-family: PingFangSC-Medium, PingFang SC;
font-weight: 500;
color: #387DF7;
line-height: 67px;
text-align: center;
margin-bottom: 22px;
}
.orange-one{
color: #EB5D00;
}
.orange-tow{
color: #FE9100;
}
.orange-three{
color: #FEC200;
}
.content-div{
width: 100%
}

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

@@ -4,11 +4,12 @@ body {
} }
.xcontent{ .xcontent{
width: 1000px; // width: 1000px;
margin: 0px auto; // margin: 0px auto;
margin: 0px 5%;
} }
.index-course{ .index-course{
width: 25%; // width: 25%;
} }
.course-index{ .course-index{
@@ -22,8 +23,7 @@ body {
} }
.xcol{ .xcol{
padding-left: 5px; margin-right: 26px;
padding-right: 5px;
display: inline-block; display: inline-block;
box-sizing: border-box; box-sizing: border-box;
} }
@@ -37,8 +37,8 @@ body {
@media screen and (max-width: 1366px){ @media screen and (max-width: 1366px){
.xcontent{ .xcontent{
width: 1000px; // width: 1000px;
margin: 0px auto; // margin: 0px auto;
} }
.index-course{ .index-course{
width: 25%; width: 25%;
@@ -50,8 +50,10 @@ body {
@media screen and (max-width: 1680px) and (min-width:1367px){ @media screen and (max-width: 1680px) and (min-width:1367px){
.xcontent{ .xcontent{
width: 1260px; // width: 1260px;
margin: 0px auto; // margin: 0px auto;
// width: 100%;
// margin: 0px 87px;
} }
.index-course{ .index-course{
width: 20%; width: 20%;
@@ -63,8 +65,10 @@ body {
@media screen and (max-width: 1920px) and (min-width: 1681px){ @media screen and (max-width: 1920px) and (min-width: 1681px){
.xcontent{ .xcontent{
width: 1520px; // width: 1520px;
margin: 0px auto; // margin: 0px auto;
// width: 100%;
// margin: 0px 87px;
} }
.index-course{ .index-course{
width: 16.6666666667%; width: 16.6666666667%;
@@ -76,8 +80,8 @@ body {
@media screen and (min-width: 1921px){ @media screen and (min-width: 1921px){
.xcontent{ .xcontent{
width: 1520px; // width: 1520px;
margin: 0px auto; // margin: 0px auto;
} }
.index-course{ .index-course{
width: 16.6666666667%; width: 16.6666666667%;
@@ -88,7 +92,8 @@ body {
} }
.portal-content { .portal-content {
margin-top: 30px; margin: 30px 87px 0px 87px;
// width: 100%;
.breadcrumb-nav { .breadcrumb-nav {
margin-bottom: 15px; margin-bottom: 15px;
font-size: 14px; font-size: 14px;

153
src/views/portal/qa/Index.vue
View File

@@ -1,23 +1,16 @@
<template> <template>
<div id="qa-list-content" class="qa-list-content"> <div id="qa-list-content" class="qa-list-content">
<portal-header current="qa" @emitInput="emitInput"></portal-header> <portal-header current="qa" @emitInput="emitInput"></portal-header>
<div class="xcontent portal-content"> <div class="portal-content">
<div class="xrow" style="display: flex;justify-content: space-between;"> <div class="xrow" style="display: flex;">
<div style="flex: 1;" class="xcol content-div"> <div class="xcol content-div">
<el-row> <el-row>
<el-card :body-style="{ padding: '0px' }" class="left-div"> <el-card :body-style="{ padding: '0px' }" class="left-div">
<el-row class="search-div"> <!-- <el-row class="search-div">
<el-col> <el-col>
<!-- <el-input placeholder="请输入关键词搜索" clearable v-model="queryKeyWord" maxlength="20">
<el-button slot="append" icon="el-icon-search" @click="search()"></el-button>
</el-input> -->
<!-- <div class="tip">
热门搜索词：
<span v-for="(item, index) in searchRecords" :key="index" @click="useHotword(item)">{{ item.keyword }}</span>
</div> -->
</el-col> </el-col>
</el-row> </el-row> -->
<el-row class="order-div"> <el-row class="order-div">
<span class="quyer-tag"> <span class="quyer-tag">
<el-button type="text" class="order-class" @click="orderFieldData('answers')" :class="{ actice: styleControl == 2 }"> <el-button type="text" class="order-class" @click="orderFieldData('answers')" :class="{ actice: styleControl == 2 }">
@@ -27,11 +20,8 @@
最新 最新
</el-button> </el-button>
<!-- <el-checkbox-group> -->
<el-button type="text" @click="setEssence(queryConditions.isEssence)" class="order-class" :class="{ actice: styleControl == 3 }">精华问题</el-button> <el-button type="text" @click="setEssence(queryConditions.isEssence)" class="order-class" :class="{ actice: styleControl == 3 }">精华问题</el-button>
<!-- </el-checkbox-group> -->
</span> </span>
<!-- <span v-if="qaList.length > 0" style="padding-left:10px;">本次搜索出 {{ count }} 条结果</span> -->
<span class="quyer-tag"> <span class="quyer-tag">
<el-button type="text" class="order-class" @click="isResolveData(null)" :class="{ actice: queryConditions.isResolve === null }"> <el-button type="text" class="order-class" @click="isResolveData(null)" :class="{ actice: queryConditions.isResolve === null }">
全部 全部
@@ -39,13 +29,7 @@
<el-button type="text" class="order-class" @click="isResolveData(false)" :class="{ actice: queryConditions.isResolve === false }"> <el-button type="text" class="order-class" @click="isResolveData(false)" :class="{ actice: queryConditions.isResolve === false }">
待解决 待解决
</el-button> </el-button>
<!-- <el-checkbox-group> -->
<el-button type="text" @click="isResolveData(true)" class="order-class" :class="{ actice: queryConditions.isResolve===true }">已解决</el-button> <el-button type="text" @click="isResolveData(true)" class="order-class" :class="{ actice: queryConditions.isResolve===true }">已解决</el-button>
<!-- <el-radio-group style="margin-right: 10px;" v-model="queryConditions.isResolve" @change="getQaData(1)">
<el-radio-button :label="null" border>全部</el-radio-button>
<el-radio-button :label="false" border>待解决</el-radio-button>
<el-radio-button :label="true" border>已解决</el-radio-button>
</el-radio-group> -->
</span> </span>
</el-row> </el-row>
<div class="data-content" v-if="qaList.length > 0"> <div class="data-content" v-if="qaList.length > 0">
@@ -53,24 +37,23 @@
<div class="qa-info-box"> <div class="qa-info-box">
<div class="qa-info"> <div class="qa-info">
<div class="qa-info-title" @click="jumpDetail(qa)"> <div class="qa-info-title" @click="jumpDetail(qa)">
<div class="qa-title-text one-line-ellipsis"> <div class="portal-title-tow one-line-ellipsis">
<span class="qa-basic qa-unSolve" v-if="qa.isResolve == false" @click="searchData()">【待解决】</span> <span v-if="qa.isResolve == false" @click="searchData()">【待解决】</span>
<span class="qa-basic qa-solve" v-if="qa.isResolve == true" @click="searchData()">【已解决】</span> <span class="qa-basic qa-solve" v-if="qa.isResolve == true" @click="searchData()">【已解决】</span>
<span v-html="$keywordActiveShow(qa.title,queryKeyWord)"></span> <span v-html="$keywordActiveShow(qa.title,queryKeyWord)"></span>
</div> </div>
<div class="qa-info-date"> <div class="portal-time">
<i class="el-icon-time"></i> {{qa.sysCreateTime.substring(0,10)}} <i class="el-icon-time"></i> {{qa.sysCreateTime}}
<!-- <time-show :time="qa.sysCreateTime"></time-show> -->
</div> </div>
</div> </div>
<div style="display: flex;"> <div style="display: flex;">
<div style="flex: 83%" class="qa-info-summary two-line-ellipsis" @click="jumpDetail(qa)" v-html="$keywordActiveShow(qa.content,queryKeyWord)"></div> <div style="flex: 83%" class="qa-info-summary portal-summary-text two-line-ellipsis" @click="jumpDetail(qa)" v-html="$keywordActiveShow(qa.content,queryKeyWord)"></div>
<div style="flex: 17% ; cursor: pointer; text-align: right;cursor: pointer;" v-if="qa.images!==''" @click="jumpDetail(qa)"> <div style="flex: 17% ; cursor: pointer; text-align: right;cursor: pointer;" v-if="qa.images!==''" @click="jumpDetail(qa)">
<img style="width: 156px;height: 105px;" :src="fileBaseUrl + qa.images" alt=""> <img style="width: 156px;height: 105px;" :src="fileBaseUrl + qa.images" alt="">
</div> </div>
</div> </div>
<div style="display: flex;justify-content:flex-start;"> <div style="display: flex;justify-content:space-between;">
<div style="width: 120px;"> <div style="width: 120px;">
<author :avatar="qa.authorInfo.avatar" :name="qa.authorInfo.name" :sex="qa.authorInfo.sex"></author> <author :avatar="qa.authorInfo.avatar" :name="qa.authorInfo.name" :sex="qa.authorInfo.sex"></author>
<!-- <author :avatar="qa.authorInfo.avatar" :name="qa.authorInfo.name" :info="qa.authorInfo.orgInfo"></author> --> <!-- <author :avatar="qa.authorInfo.avatar" :name="qa.authorInfo.name" :info="qa.authorInfo.orgInfo"></author> -->
@@ -94,53 +77,24 @@
</el-card> </el-card>
</el-row> </el-row>
</div> </div>
<div style="width: 245px;margin-left: 5px;"> <div style="width: 410px !important;">
<div> <!-- <div> -->
<div style="padding:0" id="qa-fixd"> <div style="padding:0" id="qa-fixd">
<div style="margin-bottom:15px;padding: 0"> <div class="portal-model-btn" @click="$refs.addQuestion.askQuestionDialog = true">提问题</div>
<el-button style="height: 100%;height: 37px;border-radius: 0;" class="add-btn" @click="$refs.addQuestion.askQuestionDialog = true" type="primary">提问题</el-button> <div class="portal-right-box list-bg">
</div> <p class="portal-title-one" style="padding-bottom:12px">贡献榜</p>
<el-card class="ranking-card"> <ul>
<div slot="header"> <li v-for="(item, index) in ankingList" :key="index" style="margin-top:30px">
<span style="font-size: 14px;font-weight: 600;color: #333333;">贡献排行榜</span> <span class="portal-right-text orange-one" v-if="index==0" style="margin-right:94px">0{{index+1}}.</span>
<!-- <el-radio-group v-model="anking" size="mini" style="float: right"> <span class="portal-right-text orange-tow" v-if="index==1" style="margin-right:94px">0{{index+1}}.</span>
<el-radio-button label="年"></el-radio-button> <span class="portal-right-text orange-three" v-if="index==2" style="margin-right:94px">0{{index+1}}.</span>
<el-radio-button label="月"></el-radio-button> <span class="portal-right-text" v-if="index>2" style="margin-right:94px">0{{index+1}}.</span>
<el-radio-button label="日"></el-radio-button> <span class="portal-title-desc">{{ item.sysCreateUname }}</span>
</el-radio-group> --> </li>
</ul>
</div>
</div> </div>
<div style="padding-bottom:10px"> <!-- </div> -->
<!-- <el-row class="ranking-title"> -->
<!-- <el-col :offset="4" :span="10" style="color: #333333;font-size: 14px;">姓名</el-col>
<el-col :span="10" style="text-align: right;color: #333333;font-size: 14px;">贡献度</el-col> -->
<!-- </el-row> -->
<el-row class="ranking-title bacolor" v-for="(item, index) in ankingList" :key="index" >
<el-col :span="6" style="height:34px">
<img v-if="index===0" :src="`${webBaseUrl}/images/first.png`"/>
<img v-if="index===1" :src="`${webBaseUrl}/images/second.png`"/>
<img v-if="index===2" :src="`${webBaseUrl}/images/third.png`"/>
<span style="margin-left: 10px" v-if="index!=2&&index!=0&&index!=1">{{index+1}}</span>
</el-col>
<!-- <el-tooltip :enterable="false" @click.native="jumpRouter(item)" effect="light" :content="item.name" placement="top-start"> -->
<el-col :span="18" class="one-line-ellipsis"> {{ item.sysCreateUname }}</el-col>
<!-- </el-tooltip> -->
<!-- <el-col class="center" style="color: #FF8E00;" :span="5">{{ item.score }}</el-col> -->
</el-row>
<!-- <el-row class="ranking-title" v-for="(item, index) in ankingList" :key="index">
<el-col :span="4" class="center">
<img v-if="index === 0" :src="`${webBaseUrl}/images/first.png`" />
<img v-if="index === 1" :src="`${webBaseUrl}/images/second.png`" />
<img v-if="index === 2" :src="`${webBaseUrl}/images/third.png`" />
<span v-if="index != 2 && index != 0 && index != 1">{{ index + 1 }}</span>
</el-col>
<el-col style="color: #333333;font-size: 14px;" :span="10">{{ item.sysCreateUname }}</el-col>
<el-col style="text-align: right;color: #333333;font-size: 14px;" :span="10">{{ item.answers }}</el-col>
</el-row> -->
</div>
</el-card>
</div>
</div>
</div> </div>
</div> </div>
@@ -291,7 +245,7 @@ export default {
} }
} }
if(scrollTop > 400) { if(scrollTop > 400) {
document.querySelector('#qa-fixd').style.cssText = "position: fixed;top: 0;width:242.5px"; document.querySelector('#qa-fixd').style.cssText = "position: fixed;top: 0;width:410px;";
} else { } else {
document.querySelector('#qa-fixd').style.cssText = "position: static"; document.querySelector('#qa-fixd').style.cssText = "position: static";
} }
@@ -446,6 +400,9 @@ export default {
</script> </script>
<style scoped lang="scss"> <style scoped lang="scss">
.list-bg{
background: linear-gradient(180deg, #C3DEF8 0%, #FFFFFF 37%);
}
::v-deep .el-card__body{ ::v-deep .el-card__body{
padding: 0; padding: 0;
} }
@@ -513,33 +470,19 @@ export default {
.quyer-tag { .quyer-tag {
.order-class{ .order-class{
padding:0px 12px; padding:0px 12px;
color: #666666; color: #6E7B84;
line-height: 32px; line-height: 32px;
background-color: #FFFFFF; // background-color: #FFFFFF;
border: 1px solid #DDDDDD; // border: 1px solid #DDDDDD;
border-radius: 0px; border-radius: 0px;
} }
// ::v-deep .el-button{
// width: 52px!important;
// height: 32px;
// padding: 0;
// }
// .order-class {
// color: #666666;
// width: 80px;
// // text-align: left;
// border: 1px solid #dfdfdf;
// // padding-left: 5px;
// // padding-top: 5px;
// // padding-bottom: 5px;
// .el-icon--right {
// margin-left: 0;
// }
// }
.actice { .actice {
border: 0px; border: 0px;
background: #3e7fff; background: #387DF7;
color: #fff; color: #fff;
font-size: 14px;
border-radius: 4px;
} }
} }
.more { .more {
@@ -552,7 +495,8 @@ export default {
padding: 10px 0; padding: 10px 0;
} }
.order-div { .order-div {
padding: 0 20px; margin-top: 50px;
padding: 0 40px;
background-color: #fff; background-color: #fff;
display: flex; display: flex;
.quyer-tag{ .quyer-tag{
@@ -564,8 +508,13 @@ export default {
} }
.data-content { .data-content {
background-color: #fff; background-color: #fff;
padding: 5px 10px; padding: 5px 50px;
min-height: 382px; min-height: 382px;
::v-deep .interact-bar-btns{
.interact-bar-btn{
min-width: 30px !important;
}
}
.qa-list:last-child { .qa-list:last-child {
border-bottom: none; border-bottom: none;
} }
@@ -608,11 +557,11 @@ export default {
} }
.qa-info-summary { .qa-info-summary {
cursor: pointer; cursor: pointer;
line-height: 1.6; line-height: 20px;
margin: 12px 0 20px 0; margin: 12px 0 20px 0;
color: #121212; // color: #121212;
height: 45px; // height: 45px;
font-size: 15px; // font-size: 15px;
word-break: break-all; word-break: break-all;
} }
.qa-info-tools { .qa-info-tools {