mirror of
https://codeup.aliyun.com/67762337eccfc218f6110e0e/vue/learning-system-portal.git
synced 2025-12-09 19:06:43 +08:00
提交
This commit is contained in:
@@ -205,6 +205,12 @@ aside {
|
||||
background: #d0d0d0;
|
||||
}
|
||||
}
|
||||
ul{
|
||||
padding: 0;
|
||||
}
|
||||
li{
|
||||
list-style: none;
|
||||
}
|
||||
|
||||
.link-type,
|
||||
.link-type:focus {
|
||||
|
||||
69
src/assets/styles/portal-index.scss
Normal file
69
src/assets/styles/portal-index.scss
Normal 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%
|
||||
}
|
||||
|
||||
|
||||
|
||||
@@ -4,11 +4,12 @@ body {
|
||||
}
|
||||
|
||||
.xcontent{
|
||||
width: 1000px;
|
||||
margin: 0px auto;
|
||||
// width: 1000px;
|
||||
// margin: 0px auto;
|
||||
margin: 0px 5%;
|
||||
}
|
||||
.index-course{
|
||||
width: 25%;
|
||||
// width: 25%;
|
||||
}
|
||||
|
||||
.course-index{
|
||||
@@ -22,8 +23,7 @@ body {
|
||||
}
|
||||
|
||||
.xcol{
|
||||
padding-left: 5px;
|
||||
padding-right: 5px;
|
||||
margin-right: 26px;
|
||||
display: inline-block;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
@@ -37,8 +37,8 @@ body {
|
||||
|
||||
@media screen and (max-width: 1366px){
|
||||
.xcontent{
|
||||
width: 1000px;
|
||||
margin: 0px auto;
|
||||
// width: 1000px;
|
||||
// margin: 0px auto;
|
||||
}
|
||||
.index-course{
|
||||
width: 25%;
|
||||
@@ -50,8 +50,10 @@ body {
|
||||
|
||||
@media screen and (max-width: 1680px) and (min-width:1367px){
|
||||
.xcontent{
|
||||
width: 1260px;
|
||||
margin: 0px auto;
|
||||
// width: 1260px;
|
||||
// margin: 0px auto;
|
||||
// width: 100%;
|
||||
// margin: 0px 87px;
|
||||
}
|
||||
.index-course{
|
||||
width: 20%;
|
||||
@@ -63,8 +65,10 @@ body {
|
||||
|
||||
@media screen and (max-width: 1920px) and (min-width: 1681px){
|
||||
.xcontent{
|
||||
width: 1520px;
|
||||
margin: 0px auto;
|
||||
// width: 1520px;
|
||||
// margin: 0px auto;
|
||||
// width: 100%;
|
||||
// margin: 0px 87px;
|
||||
}
|
||||
.index-course{
|
||||
width: 16.6666666667%;
|
||||
@@ -76,8 +80,8 @@ body {
|
||||
|
||||
@media screen and (min-width: 1921px){
|
||||
.xcontent{
|
||||
width: 1520px;
|
||||
margin: 0px auto;
|
||||
// width: 1520px;
|
||||
// margin: 0px auto;
|
||||
}
|
||||
.index-course{
|
||||
width: 16.6666666667%;
|
||||
@@ -88,7 +92,8 @@ body {
|
||||
}
|
||||
|
||||
.portal-content {
|
||||
margin-top: 30px;
|
||||
margin: 30px 87px 0px 87px;
|
||||
// width: 100%;
|
||||
.breadcrumb-nav {
|
||||
margin-bottom: 15px;
|
||||
font-size: 14px;
|
||||
|
||||
@@ -1,23 +1,16 @@
|
||||
<template>
|
||||
<div id="qa-list-content" class="qa-list-content">
|
||||
<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 style="flex: 1;" class="xcol content-div">
|
||||
<div class="xrow" style="display: flex;">
|
||||
<div class="xcol content-div">
|
||||
<el-row>
|
||||
<el-card :body-style="{ padding: '0px' }" class="left-div">
|
||||
<el-row class="search-div">
|
||||
<!-- <el-row class="search-div">
|
||||
<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-row>
|
||||
</el-row> -->
|
||||
<el-row class="order-div">
|
||||
<span class="quyer-tag">
|
||||
<el-button type="text" class="order-class" @click="orderFieldData('answers')" :class="{ actice: styleControl == 2 }">
|
||||
@@ -27,11 +20,8 @@
|
||||
最新
|
||||
</el-button>
|
||||
|
||||
<!-- <el-checkbox-group> -->
|
||||
<el-button type="text" @click="setEssence(queryConditions.isEssence)" class="order-class" :class="{ actice: styleControl == 3 }">精华问题</el-button>
|
||||
<!-- </el-checkbox-group> -->
|
||||
</span>
|
||||
<!-- <span v-if="qaList.length > 0" style="padding-left:10px;">本次搜索出 {{ count }} 条结果</span> -->
|
||||
<span class="quyer-tag">
|
||||
<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>
|
||||
<!-- <el-checkbox-group> -->
|
||||
<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>
|
||||
</el-row>
|
||||
<div class="data-content" v-if="qaList.length > 0">
|
||||
@@ -53,24 +37,23 @@
|
||||
<div class="qa-info-box">
|
||||
<div class="qa-info">
|
||||
<div class="qa-info-title" @click="jumpDetail(qa)">
|
||||
<div class="qa-title-text one-line-ellipsis">
|
||||
<span class="qa-basic qa-unSolve" v-if="qa.isResolve == false" @click="searchData()">【待解决】</span>
|
||||
<div class="portal-title-tow one-line-ellipsis">
|
||||
<span v-if="qa.isResolve == false" @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>
|
||||
</div>
|
||||
<div class="qa-info-date">
|
||||
<i class="el-icon-time"></i> {{qa.sysCreateTime.substring(0,10)}}
|
||||
<!-- <time-show :time="qa.sysCreateTime"></time-show> -->
|
||||
<div class="portal-time">
|
||||
<i class="el-icon-time"></i> {{qa.sysCreateTime}}
|
||||
</div>
|
||||
</div>
|
||||
<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)">
|
||||
<img style="width: 156px;height: 105px;" :src="fileBaseUrl + qa.images" alt="">
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div style="display: flex;justify-content:flex-start;">
|
||||
<div style="display: flex;justify-content:space-between;">
|
||||
<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" :info="qa.authorInfo.orgInfo"></author> -->
|
||||
@@ -94,53 +77,24 @@
|
||||
</el-card>
|
||||
</el-row>
|
||||
</div>
|
||||
<div style="width: 245px;margin-left: 5px;">
|
||||
<div>
|
||||
<div style="padding:0" id="qa-fixd">
|
||||
<div style="margin-bottom:15px;padding: 0">
|
||||
<el-button style="height: 100%;height: 37px;border-radius: 0;" class="add-btn" @click="$refs.addQuestion.askQuestionDialog = true" type="primary">提问题</el-button>
|
||||
</div>
|
||||
<el-card class="ranking-card">
|
||||
<div slot="header">
|
||||
<span style="font-size: 14px;font-weight: 600;color: #333333;">贡献排行榜</span>
|
||||
<!-- <el-radio-group v-model="anking" size="mini" style="float: right">
|
||||
<el-radio-button label="年"></el-radio-button>
|
||||
<el-radio-button label="月"></el-radio-button>
|
||||
<el-radio-button label="日"></el-radio-button>
|
||||
</el-radio-group> -->
|
||||
<div style="width: 410px !important;">
|
||||
<!-- <div> -->
|
||||
<div style="padding:0" id="qa-fixd">
|
||||
<div class="portal-model-btn" @click="$refs.addQuestion.askQuestionDialog = true">提问题</div>
|
||||
<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">
|
||||
<span class="portal-right-text orange-one" v-if="index==0" style="margin-right:94px">0{{index+1}}.</span>
|
||||
<span class="portal-right-text orange-tow" v-if="index==1" style="margin-right:94px">0{{index+1}}.</span>
|
||||
<span class="portal-right-text orange-three" v-if="index==2" style="margin-right:94px">0{{index+1}}.</span>
|
||||
<span class="portal-right-text" v-if="index>2" style="margin-right:94px">0{{index+1}}.</span>
|
||||
<span class="portal-title-desc">{{ item.sysCreateUname }}</span>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
<div style="padding-bottom:10px">
|
||||
<!-- <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>
|
||||
|
||||
@@ -291,7 +245,7 @@ export default {
|
||||
}
|
||||
}
|
||||
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 {
|
||||
document.querySelector('#qa-fixd').style.cssText = "position: static";
|
||||
}
|
||||
@@ -446,6 +400,9 @@ export default {
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
.list-bg{
|
||||
background: linear-gradient(180deg, #C3DEF8 0%, #FFFFFF 37%);
|
||||
}
|
||||
::v-deep .el-card__body{
|
||||
padding: 0;
|
||||
}
|
||||
@@ -513,33 +470,19 @@ export default {
|
||||
.quyer-tag {
|
||||
.order-class{
|
||||
padding:0px 12px;
|
||||
color: #666666;
|
||||
color: #6E7B84;
|
||||
line-height: 32px;
|
||||
background-color: #FFFFFF;
|
||||
border: 1px solid #DDDDDD;
|
||||
// background-color: #FFFFFF;
|
||||
// border: 1px solid #DDDDDD;
|
||||
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 {
|
||||
border: 0px;
|
||||
background: #3e7fff;
|
||||
background: #387DF7;
|
||||
color: #fff;
|
||||
font-size: 14px;
|
||||
border-radius: 4px;
|
||||
}
|
||||
}
|
||||
.more {
|
||||
@@ -552,7 +495,8 @@ export default {
|
||||
padding: 10px 0;
|
||||
}
|
||||
.order-div {
|
||||
padding: 0 20px;
|
||||
margin-top: 50px;
|
||||
padding: 0 40px;
|
||||
background-color: #fff;
|
||||
display: flex;
|
||||
.quyer-tag{
|
||||
@@ -564,8 +508,13 @@ export default {
|
||||
}
|
||||
.data-content {
|
||||
background-color: #fff;
|
||||
padding: 5px 10px;
|
||||
padding: 5px 50px;
|
||||
min-height: 382px;
|
||||
::v-deep .interact-bar-btns{
|
||||
.interact-bar-btn{
|
||||
min-width: 30px !important;
|
||||
}
|
||||
}
|
||||
.qa-list:last-child {
|
||||
border-bottom: none;
|
||||
}
|
||||
@@ -608,11 +557,11 @@ export default {
|
||||
}
|
||||
.qa-info-summary {
|
||||
cursor: pointer;
|
||||
line-height: 1.6;
|
||||
line-height: 20px;
|
||||
margin: 12px 0 20px 0;
|
||||
color: #121212;
|
||||
height: 45px;
|
||||
font-size: 15px;
|
||||
// color: #121212;
|
||||
// height: 45px;
|
||||
// font-size: 15px;
|
||||
word-break: break-all;
|
||||
}
|
||||
.qa-info-tools {
|
||||
|
||||
Reference in New Issue
Block a user