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

整体门户页面的样式，宽度的处理

Browse Source
This commit is contained in:
daihh
2022-10-07 21:21:58 +08:00
parent 976ac8fbe4
commit 045c5c14f9
9 changed files with 674 additions and 867 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -1,49 +1,14 @@
/**
* 门户页面的一些通用样式定义在这里面
*/
body {
margin: 0px;
padding: 0px;
}
//页面版心区域
.xcontent{
// width: 1000px;
// margin: 0px auto;
margin: 0px 5%;
}
.index-course{
// width: 25%;
}
.course-index{
// width: 33.34%;
}
.xrow{
margin-left: -5px;
margin-right: -5px;
box-sizing: border-box;
}
.xcol{
margin-right: 26px;
display: inline-block;
box-sizing: border-box;
}
.xrow-course{
// padding-left: 5px;
// padding-right: 5px;
display: inline-block;
box-sizing: border-box;
}
body {margin: 0px;padding: 0px;}
//[文章，案例，问答]详细页面内容部分
.xpage-detail-content{
padding: 50px;
background-color: #fff;
}
// 详细页面的面包屑
//[文章，案例，问答]详细页面的面包屑
.xpage-detail-crumbs{
.crumbs-first{
color:#cccccc;
@@ -59,15 +24,8 @@ body {
color:#3d3d3d;
}
}
//门户页面右边
.xpage-right{
width: 410px;
}
.portal-right-box{
width: 410px;
border-radius: 8px;
padding: 30px;
}
//原样式，未修改
.portal-model-btn{// 写文章，发课程等按钮
width: 100%;
height: 67px;
@@ -81,95 +39,299 @@ body {
text-align: center;
margin-bottom: 22px;
}
.portal-ranking-box{
width: 344px;
// height: 544px;
// overflow-y: auto;
.course-index-list{
height: 410px;
overflow-y: auto;
}
.case-index-list{
height: 114px;
overflow-y: auto;
}
.anking-index-list{
height: 320px;
overflow-y: auto;
}
.qa-index-qa{
height: 64px;
overflow-y: auto;
}
//页面中的排行内容块
.portal-ranking{
border-radius: 8px;
padding: 30px;
// height: 544px;
// overflow-y: auto;
.ranking-title{
font-size: 24px;
font-family: FZLTCHJW--GB1-0, FZLTCHJW--GB1;
font-weight: 600;
color: #000000;
line-height: 28px;
padding-bottom:12px
}
.ranking-data{
min-height: 246px;
margin: 0px;
overflow-y: auto;
}
}
//排行块的背景
.ranking-bg{
background: url('/images/qa-box.png') no-repeat top left;
// background: linear-gradient(180deg, #C3DEF8 0%, #FFFFFF 37%);
//background-size:100% 100%;
background-size:cover;
}
.ranking-bg1{
background: url('/images/list-or.png') no-repeat top left;
//background-size:100% 100%;
background-size:cover;
}
.ranking-bg2{
background: url('/images/list-pink.png') no-repeat top left;
//background-size:100% 100%;
background-size:cover;
}
//左右内容栏
.xcontent2{
display: flex;
justify-content: space-between;
margin: 0px auto;
}
.xcontent2-main{
flex: 1;
}
.xcontent2-minor{
width: auto;
}
//课程卡片
.xcourse-card{
width: 33%;
margin-bottom: 36px;
display: inline-block;
vertical-align: top;
}
.course-card {
// padding: 30px;
// padding-bottom: 18px;
// margin-bottom: 36px;
background: #fff;
border-radius: 8px;
// margin-right: 35px;
// .cor-icon {
// position: absolute;
// left: 100px;
// top: 54px;
// border-radius: 50%;
// background: rgba(88, 138, 252, 0.37);
// .el-icon-caret-right {
// font-size: 36px;
// color: #588afc;
// }
// }
.course-image-box {
position: relative;
width: 100%;
height: 100%;
::v-deep .el-image{
border-radius: 4px !important;
}
.course-image {
width: 100%;
height: 100%;
}
.course-type {
position: absolute;
top: 5px;
right: 0px;
width: 90px;
height: 30px;
line-height: 30px;
text-align: center;
background-color: #292828;
opacity: 0.4;
border-top-left-radius: 15px;
border-bottom-left-radius: 15px;
color: #ffffff;
-moz-user-select: none; /*火狐*/
-webkit-user-select: none; /*webkit浏览器*/
-ms-user-select: none; /*IE10*/
-khtml-user-select: none; /*早期浏览器*/
user-select: none;
}
.course-type-title {
position: absolute;
top: 5px;
right: 0px;
width: 90px;
height: 30px;
line-height: 30px;
text-align: center;
color: #ffffff;
-moz-user-select: none; /*火狐*/
-webkit-user-select: none; /*webkit浏览器*/
-ms-user-select: none; /*IE10*/
-khtml-user-select: none; /*早期浏览器*/
user-select: none;
}
}
.course-title {
height: 44px;
// margin: 10px 0;
margin: 10px 0 10px 0px;
line-height: 24px;
font-size: 16px;
font-weight: 600;
color: #333333;
-moz-user-select: none; /*火狐*/
-webkit-user-select: none; /*webkit浏览器*/
-ms-user-select: none; /*IE10*/
-khtml-user-select: none; /*早期浏览器*/
user-select: none;
}
.course-info { //图片下面的一行信息
// margin: 5px 15px;
// padding-bottom: 10px;
display: flex;
justify-content: space-between;
line-height: 30px;
.course-info-user{
font-size: 14px;
color: #6E7B84;
width: 60%;
.course-info-author{
}
.course-info-studys {
margin-left: 12px;
-moz-user-select: none; /*火狐*/
-webkit-user-select: none; /*webkit浏览器*/
-ms-user-select: none; /*IE10*/
-khtml-user-select: none; /*早期浏览器*/
user-select: none;
}
}
.course-info-score{
display:flex;
width: 40%;
::v-deep .cor-praises {
// position: absolute;
-moz-user-select: none; /*火狐*/
-webkit-user-select: none; /*webkit浏览器*/
-ms-user-select: none; /*IE10*/
-khtml-user-select: none; /*早期浏览器*/
user-select: none;
.interact-bar-btn {
margin-top: -2px;
min-width: 26px !important;
width: 32px;
height: 20px;
background:rgba(237, 239, 240,0.5);
border-radius: 20px;
margin-top: 4px;
margin-right: 12px;
.interact-bar-value {
display: none;
}
.svg-icon{
font-size: 12px !important;
margin-left: 10px;
margin-bottom: 6px;
}
}
}
.course-score-value {
font-size: 14px;
color: #FA6400;
text-align: right;
margin-left: 5px;
font-family: "Arial";
// font-size: 30px;
}
.course-score-no {
text-align: right;
font-size: 14px;
color: #6B7C85;
}
}
}
}
//以下是多分辨率的控制，注意，只是一些样式的高度，宽度，大小控制，非大小控制不要在这里写
@media screen and (max-width: 1366px){
.xcontent{
// width: 1000px;
// margin: 0px auto;
.xcontent2{
width: 1100px;
padding: 20px 5px;
}
.index-course{
// width: 25%;
.xcontent2-minor{
width: 234px;
}
.course-index{
// width: 33.3333%;
.portal-ranking{
padding: 30px 15px;
}
.course-card {
padding:20px;
margin-right: 20px;
.course-image-box {
width: 200px;
height: 114px;
}
}
.portal-model-btn{width: 300px;}
.xpage-right{width: 300px;}
}
@media screen and (max-width: 1680px) and (min-width:1367px){
.xcontent{
// width: 1260px;
// margin: 0px auto;
// width: 100%;
// margin: 0px 87px;
.xcontent2{
width: 1366px;
padding: 30px 20px;
}
.index-course{
// width: 20%;
// width: 33.3333%;
.xcontent2-minor{
width: 300px;
}
.course-index{
// width: 25%;
// width: 33.3333%;
.portal-ranking{
padding: 30px 20px;
}
.course-card {
padding:25px;
margin-right: 25px;
.course-image-box {
width: 285px;
height: 160px;
}
}
.portal-model-btn{width: 410px;}
.xpage-right{width: 410px;}
}
@media screen and (max-width: 1920px) and (min-width: 1681px){
.xcontent{
// width: 1520px;
// margin: 0px auto;
// width: 100%;
// margin: 0px 87px;
.xcontent2{
width: 1640px;
padding: 30px 26px;
}
.index-course{
// width: 16.6666666667%;
width: 33.3333%;
.xcontent2-minor{
width: 400px;
}
.course-index{
// width: 20%;
width: 33.3333%;
.portal-ranking{
padding: 30px 30px;
}
.course-card {
padding:25px;
margin-right: 25px;
.course-image-box {
width: 320px;
height: 180px;
}
}
.portal-model-btn{width: 410px;}
.xpage-right{width: 410px;}
}
@media screen and (min-width: 1921px){
.xcontent{
// width: 1520px;
// margin: 0px auto;
.xcontent2{
width: 1880px;
padding: 30px 26px;
}
.index-course{
// width: 16.6666666667%;
// width: 33.3333%;
.xcontent2-minor{
width: 400px;
}
.course-index{
// width: 20%;
// width: 33.3333%;
.portal-ranking{
padding: 30px 30px;
}
.portal-model-btn{width: 410px;}
.xpage-right{width: 410px;}
.course-card {
padding:25px;
margin-right: 25px;
.course-image-box {
width: 340px;
height: 191px;
}
}
}

9
src/components/Portal/guideBox.vue
View File

@@ -96,9 +96,12 @@
},
showImg(item) {
this.description = item.description;
this.resonimg = [];
this.resonimg = item.images;
this.resonimg = [];
if(item){
this.description = item.description;
this.resonimg = item.images;
}
// this.swiper.update();
},
notYet() {

37
src/views/portal/article/Detail.vue
View File

@@ -3,14 +3,13 @@
<div class="article-banner">
<portal-header current="article" :goSearch="3"></portal-header>
</div>
<div class="portal-content xcontent" style="margin-top: 30px;">
<div class="xrow" style="display: flex;justify-content: space-between;">
<div style="flex: 1;" class="xcol content-div">
<div>
<div class="xcontent2">
<div style="margin-right: 30px;" class="xcontent2-main">
<div v-if="noData" >
<!--文章详细内容-->
<div class="detail">
<div class="detail">
<div class="xpage-detail-crumbs">
<router-link to="/article"><span class="crumbs-first">文章列表</span></router-link>
<span class="crumbs-line">/</span>
@@ -21,7 +20,7 @@
<div style="margin-top: 5px;">
<author :avatar="articleDetailData.avatar" :name="articleDetailData.name" :sex="articleDetailData.sex"></author>
</div>
<div style="margin-top: 8px;padding-left: 15px;font-size: 14px;">
<div style="margin-top: 8px;padding-left: 15px;font-size: 14px;">
{{authorSign}}
<!-- <time-show :time="articleDetailData.sysCreateTime"></time-show> -->
</div>
@@ -39,24 +38,27 @@
<div style="margin-top:10px;">
<interactBar :type="2" :data="articleDetailData" :theme='1' :shares="false" ></interactBar>
</div>
</div>
</div>
<!--评论, 修改边距调整-->
<div>
<comments v-if="articleId!=''" @success="success" :obj-type="2" :obj-id="articleId" :toUsers="toUsers" :authorId="articleDetailData.sysCreateAid"></comments>
</div>
<div>
<comments v-if="articleId!=''" @success="success" :obj-type="2" :obj-id="articleId" :toUsers="toUsers" :authorId="articleDetailData.sysCreateAid"></comments>
</div>
</div>
<div v-else>
<el-empty :image-size="200"></el-empty>
</div>
</div>
<div style="width: 410px;margin-left: 5px;">
<div class="xcontent2-minor">
<div>
<div id="articleAnking">
<el-button class="write-art" @click="openDialog" type="primary"><svg-icon icon-class="addArticle" style="margin-right: 20px;font-size: 26px;"></svg-icon>写文章</el-button>
<div class="portal-right-box art-bgimg" style="background-color:#fff;">
<p class="portal-title-one" style="padding-bottom:12px" >贡献榜</p>
<ul>
<div class="portal-model-btn pointer" @click="openDialog">
<svg-icon style="margin-right: 10px;font-size: 24px;" icon-class="addArticle"></svg-icon>
写文章
</div>
<div class="portal-ranking ranking-bg">
<p class="ranking-title">贡献榜</p>
<ul class="ranking-data">
<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="">
@@ -192,10 +194,11 @@ export default {
//console.log(el_anking.clientWidth,'clientWidth');
//el_anking.wid
let innerHeight = document.querySelector('#article-index').clientHeight
let outerWidth = el_anking.clientWidth;
let outerHeight = document.documentElement.clientHeight
let scrollTop = document.documentElement.scrollTop
if(scrollTop > 400) {
document.querySelector('#articleAnking').style.cssText = "position: fixed;top: 0;width:242.5px";
document.querySelector('#articleAnking').style.cssText = "position: fixed;top: 0;width:"+outerWidth+"px";
} else {
document.querySelector('#articleAnking').style.cssText = "position: static";
}

155
src/views/portal/article/Index.vue
View File

@@ -4,90 +4,80 @@
<portal-header current="article" @emitInput="emitInput"></portal-header>
</div>
<!--内容区域-->
<div class="xcontent portal-content">
<div class="xrow" style="display: flex;justify-content: space-between;">
<div style="flex: 1;background-color: #fff;" class="xcol content-div">
<div>
<div style="padding:0px" class="left-div">
<div class="search-div">
<div>
<!-- <el-input placeholder="请输入关键词搜索" clearable v-model="articleList.keyword" maxlength="20">
<el-button slot="append" icon="el-icon-search" @click="searchData()"></el-button>
</el-input> -->
<!-- <div class="tip">
热门搜索词：
<span v-for="(item, index) in searchRecords" :key="index" @click="useHotword(item)">{{ item.keyword }}</span>
</div> -->
<div class="">
<div class="xcontent2">
<div class="xcontent2-main" style="margin-right: 30px;background-color: #fff;padding-top: 50px;">
<div>
<div style="padding:0px" class="left-div">
<div class="order-div">
<div class="quyer-tag">
<el-button type="text" class="order-class" @click="getData(2)" :class="{ actice: articleList.order == 2 }"> 最热 </el-button>
<el-button type="text" class="order-class" @click="getData(1)" :class="{ actice: articleList.order == 1 }"> 最新 </el-button>
</div>
<span class="more"></span>
</div>
</div>
<div class="order-div">
<div class="quyer-tag">
<el-button type="text" class="order-class" @click="getData(2)" :class="{ actice: articleList.order == 2 }"> 最热 </el-button>
<el-button type="text" class="order-class" @click="getData(1)" :class="{ actice: articleList.order == 1 }"> 最新 </el-button>
</div>
<span class="more"></span>
</div>
<div class="data-content" v-if="articleList.list.length > 0">
<div :span="24" v-for="(article, aidx) in articleList.list" :key="aidx" class="article-list">
<div class="article-info">
<!--title-->
<router-link :to="'article/detail?id=' + article.id">
<div style="display: flex;justify-content: space-between;margin-bottom: 10px;">
<div class="article-title one-line-ellipsis" v-html="$keywordActiveShow(article.title,articleList.keyword)"></div>
<div class="article-info-date"><i style="font-size:14px" class="el-icon-time"></i> {{article.sysCreateTime}}</div>
</div>
</router-link>
<!--body-->
<div class="article-body" style="display: flex;justify-content: space-between;">
<div style="flex: 1;">
<router-link :to="'article/detail?id=' + article.id">
<div style="padding-top: 5px;">
<div class="article-info-summary" :style="{height:article.coverurl==''? '50px':'100px'}" :class="article.coverurl==''? 'two-line-ellipsis':'four-line-ellipsis'">{{ article.summary }}</div>
</div>
</router-link>
</div>
<router-link :to="'article/detail?id=' + article.id">
<div class="article-image" v-if="article.coverurl">
<article-image :article="article"></article-image>
<div class="data-content" v-if="articleList.list.length > 0">
<div v-for="(article, aidx) in articleList.list" :key="aidx" class="article-list">
<div class="article-info">
<!--title-->
<router-link :to="'article/detail?id=' + article.id">
<div style="display: flex;justify-content: space-between;margin-bottom: 10px;">
<div class="article-title one-line-ellipsis" v-html="$keywordActiveShow(article.title,articleList.keyword)"></div>
<div class="article-info-date"><i style="font-size:14px" class="el-icon-time"></i> {{article.sysCreateTime}}</div>
</div>
</router-link>
</div>
<!--互动内容-->
<div style="display: flex;justify-content:flex-start;align-items: center;margin-top: 0px;">
<div style="flex:1;">
<author :avatar="article.authorInfo.avatar" :name="article.sysCreateBy" :sex="article.authorInfo.sex" :aid="article.authorInfo.aid"></author>
</div>
<div style="">
<interactBar nodeWidth="60px" :readonly="true" :type="2" :data="article" :views="false"></interactBar>
</div>
<!-- <author :avatar="article.authorInfo.avatar" :name="article.sysCreateBy" :info="article.authorInfo.orgInfo"></author> -->
<!--body-->
<div class="article-body" style="display: flex;justify-content: space-between;">
<div style="flex: 1;">
<router-link :to="'article/detail?id=' + article.id">
<div style="padding-top: 5px;">
<div class="article-info-summary" :style="{height:article.coverurl==''? '50px':'100px'}" :class="article.coverurl==''? 'two-line-ellipsis':'four-line-ellipsis'">{{ article.summary }}</div>
</div>
</router-link>
</div>
<router-link :to="'article/detail?id=' + article.id">
<div class="article-image" v-if="article.coverurl">
<article-image :article="article"></article-image>
</div>
</router-link>
</div>
<!--互动内容-->
<div style="display: flex;justify-content:flex-start;align-items: center;margin-top: 0px;">
<div style="flex:1;">
<author :avatar="article.authorInfo.avatar" :name="article.sysCreateBy" :sex="article.authorInfo.sex" :aid="article.authorInfo.aid"></author>
</div>
<div style="">
<interactBar nodeWidth="60px" :readonly="true" :type="2" :data="article" :views="false"></interactBar>
</div>
<!-- <author :avatar="article.authorInfo.avatar" :name="article.sysCreateBy" :info="article.authorInfo.orgInfo"></author> -->
</div>
</div>
</div>
</div>
</div>
<!-- <div class="pagination-div" v-if="isMore"><span class="pag-text" @click="loadMore()">加载更多</span></div> -->
<div class="pagination-div">
<span class="pag-text" @click="loadMore()" v-if="moreState == 1">加载更多</span>
<span class="pag-text-msg" v-else-if="moreState == 2">数据加载中</span>
<span class="pag-text-msg" v-else-if="moreState == 3 && !isSeach">没有更多数据了</span>
<span class="pag-text-msg" v-else-if="isSeach">没有查询到相关内容</span>
</div>
<div v-if="isSeach" style="height:382px">
<!-- <div class="pagination-div" v-if="isMore"><span class="pag-text" @click="loadMore()">加载更多</span></div> -->
<div class="pagination-div">
<span class="pag-text" @click="loadMore()" v-if="moreState == 1">加载更多</span>
<span class="pag-text-msg" v-else-if="moreState == 2">数据加载中</span>
<span class="pag-text-msg" v-else-if="moreState == 3 && !isSeach">没有更多数据了</span>
<span class="pag-text-msg" v-else-if="isSeach">没有查询到相关内容</span>
</div>
<div v-if="isSeach" style="height:382px"></div>
</div>
</div>
</div>
</div>
<div style="width: 410px;margin-left: 5px;">
<div>
<div id="articleAnking">
<el-button class="write-art" @click="openDialog" type="primary"><svg-icon icon-class="addArticle" style="margin-right: 20px;font-size: 26px;"></svg-icon>写文章</el-button>
<div class="portal-right-box art-bgimg" style="background-color:#fff;">
<p class="portal-title-one" style="padding-bottom:12px" >贡献榜</p>
<ul>
<div class="xcontent2-minor">
<div>
<div id="articleAnking">
<div>
<div class="portal-model-btn pointer" @click="openDialog">
<svg-icon style="margin-right: 10px;font-size: 24px;" icon-class="addArticle"></svg-icon>
写文章
</div>
</div>
<div class="portal-ranking ranking-bg">
<p class="ranking-title">贡献榜</p>
<ul class="ranking-data">
<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="">
@@ -119,12 +109,7 @@
</div>
</div>
<el-row :gutter="10">
<el-col :span="6" class="right-box" >
</el-col>
</el-row>
</div>
<el-dialog title="创建文章" :visible.sync="diagSync" :close-on-click-modal="false" width="900px" custom-class="g-dialog">
<editItems v-if="diagSync" :jumpLimit="false" :editForm="{}" @success="saveSuccess"></editItems>
@@ -194,7 +179,10 @@ export default {
// let el_anking = document.querySelector('#articleAnking');
// this.ankingWidth=el_anking.clientWidth;
//console.log(el_anking.clientWidth,'clientWidth');
this.articleList.keyword = this.$route.query.keyword;
if(this.$route.query){
this.articleList.keyword = this.$route.query.keyword;
}
if(this.articleList.keyword != '') {
this.isSeach = true;
}
@@ -243,6 +231,7 @@ export default {
//el_anking.wid
let innerHeight = document.querySelector('#article-list-content').clientHeight
let outerHeight = document.documentElement.clientHeight
let outerWidth = el_anking.clientWidth;
let scrollTop = document.documentElement.scrollTop
if ((outerHeight + scrollTop + 350) >= innerHeight) {
if(this.moreState == 1) {
@@ -265,7 +254,7 @@ export default {
// }
// }
if(scrollTop > 400) {
document.querySelector('#articleAnking').style.cssText = "position: fixed;top: 0;width:242.5px";
document.querySelector('#articleAnking').style.cssText = "position: fixed;top: 0;width:"+outerWidth+"px";
} else {
document.querySelector('#articleAnking').style.cssText = "position: static";
}
@@ -409,7 +398,7 @@ export default {
<style scoped lang="scss">
.course-resources{
margin-top: 26px;
width: 410px;
width:100%;
img{
width: 100%;
height: 100%;

68
src/views/portal/case/Detail.vue
View File

@@ -1,12 +1,12 @@
<template>
<div id="case-list-content">
<div class="case-banner">
<portal-header current="case" :goSearch="2"></portal-header>
</div>
<div class="portal-content xcontent" style="margin-top: 30px;">
<div class="xrow" style="display: flex;justify-content: space-between;" >
<div style="flex: 1;" class="xcol content-div" id="content-div">
<div :gutter="10" v-if="noData">
<div class="case-banner">
<portal-header current="case" :goSearch="2"></portal-header>
</div>
<div class="">
<div class="xcontent2">
<div class="xcontent2-main" style="margin-right: 30px;" id="content-div">
<div v-if="noData">
<div class="detail">
<div class="xpage-detail-crumbs">
<router-link to="/case"><span class="crumbs-first">案例列表</span></router-link>
@@ -96,35 +96,35 @@
<el-empty :image-size="200"></el-empty>
</div>
</div>
<div style="width: 410px;margin-left: 5px;" :class="zoomShow?'':'fixd-box-show'">
<div>
<div id="fixd-box">
<div 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 Positive" :key="index" class="title-line-ellipsis" style="cursor: pointer;margin-top:30px;line-height: 22px;">
<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>
<span class="portal-title-desc" style="font-size: 14px;">{{ item.title }}</span>
</li>
<div :class="zoomShow?'':'xcontent2-minor'">
<div>
<div id="fixd-box">
<div class="portal-ranking ranking-bg">
<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;">
<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>
<span class="portal-title-desc" style="font-size: 14px;">{{ item.title }}</span>
</li>
</ul>
</div>
<div style="margin-top:26px" class="ranking-card portal-right-box list-bg1">
<p class="portal-title-one" style="padding-bottom:12px">人气榜</p>
<ul>
<div style="margin-top:26px" class="portal-ranking ranking-bg1">
<p class="ranking-title">人气榜</p>
<ul class="ranking-data">
<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="">

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

@@ -3,143 +3,129 @@
<div class="case-banner">
<portal-header current="case" @emitInput="emitInput"></portal-header>
</div>
<div class="xcontent portal-content">
<div style="flex: 1;" class="xcol content-div">
<el-row>
<el-col :span="24">
<el-card :body-style="{ padding: '0px' }" class="left-div">
<el-row class="search-div">
<!-- <el-row>
<el-col :span="10" class="search-keyword">
<el-input placeholder="请输入关键词搜索" v-model="keyWord" clearable><el-button slot="append" icon="el-icon-search" @click="search"></el-button></el-input>
<div class="tip">热门搜索词：物联网 教师 辅导 绩效</div>
<div class="tip" style="font-size: 14px;">
热门搜索词：<span style="cursor:pointer;font-size:15px;margin-left: 10px;" v-for="(item,index) in searchRecords" :key="index" @click="useHotword(item)">{{item.keyword}}</span>
</div>
</el-col>
</el-row> -->
<div class="searchbar" v-if="searchTags.length > 0">
<div style="line-height: 30px;">
<span class="item-title">搜索条件</span>
<el-tag closable v-for="(tag, tagIdx) in searchTags" :key="tagIdx" @close="tagsClose(tag,tagIdx)">{{ tag.value }}</el-tag>
</div>
</div>
<el-row class="search-item">
<el-col :span="24">
<div style="margin-top:10px; display: flex;">
<div style="line-height: 25px;padding-right: 10px;">
<span class="item-title" style="padding-right: 5px;">组织领域</span>
<span class="item-line"></span>
</div>
<div style="flex:1;">
<el-radio-group v-model="queryCondition.orgDomain" size="mini" @change="search()">
<el-radio-button :label="null">全部</el-radio-button>
<el-radio-button v-for="item in domain" :key="item.code" :label="item.code"> {{ item.name}}</el-radio-button>
</el-radio-group>
<div class="xcontent2">
<div class="xcontent2-main" style="margin-right: 30px;">
<div>
<el-card :body-style="{ padding: '0px' }" class="left-div">
<el-row class="search-div">
<div class="searchbar" v-if="searchTags.length > 0">
<div style="line-height: 30px;">
<span class="item-title">搜索条件</span>
<el-tag closable v-for="(tag, tagIdx) in searchTags" :key="tagIdx" @close="tagsClose(tag,tagIdx)">{{ tag.value }}</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>
<span class="item-line"></span>
</div>
<div style="flex:1;">
<el-radio-group v-model="queryCondition.orgDomain" size="mini" @change="search()">
<el-radio-button :label="null">全部</el-radio-button>
<el-radio-button v-for="item in domain" :key="item.code" :label="item.code"> {{ item.name}}</el-radio-button>
</el-radio-group>
</div>
</div>
</div>
<div class="search-div-collapse">
<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>
<span class="item-line"></span>
</div>
<div style="flex:1" id="searchBox">
<el-radio-group style="display:flex;" v-model="queryCondition.majorType" size="mini" @change="search()">
<el-radio-button :label="null">全部</el-radio-button>
<div>
<el-radio-button v-for="item in speciData" :key="item.code" :label="item.code" > {{ item.name }} </el-radio-button>
</div>
</el-radio-group>
</div>
</div>
</div>
</div>
<div class="searBox" v-if="searchwd">
<el-button type="text" id="closeSearchBtn" @click="closeSearch">
{{word}}
<i :class="showAll ? 'el-icon-arrow-up ': 'el-icon-arrow-down'"></i>
</el-button>
</div>
</el-row>
<el-row style="height:30px;background-color:#f6f7fc;" >
</el-row>
<el-row class="order-div" style="border-bottom:none">
<span class="quyer-tag">
<el-button type="text" class="order-class" @click="searchData('views')" :class="{ actice: queryCondition.orderField == 'views' }">最热</el-button>
<el-button type="text" class="order-class" @click="searchData('')" :class="{ actice: queryCondition.orderField == '' }">最新</el-button>
<!-- <el-button type="text" class="order-class" @click="queryCondition.breCommend = queryCondition.breCommend == ture ? true : null" :class="{ actice: queryCondition.breCommend == true }">组织推荐</el-button> -->
</span>
</el-row>
<el-row class="data-content">
<el-col :span="24" v-for="item in caseList.list" :key="item.id" class="case-list">
<div class="case-info">
<div class="case-info-cont">
<router-link :to="'/case/detail?id='+item.id">
<div class="case-info-title">
<div class="case-titdiv">
<span class="case-tittext" v-html="item.title"></span>
<div class="case-info-date portal-time">
<i class="el-icon-time"></i>
<time-show :time="item.sysCreateTime"></time-show>
</div>
</div>
</div>
<div style="height:58px;padding-top:14px ">
<author :avatar="item.authorInfo.avatar" :name="item.authorInfo.name" :info="item.authorInfo.orgInfo" :sex="item.authorInfo.sex"></author>
</div>
<div class="keyword-text clearfix">
<div style="color:#2974D6;font-weight: 450;" v-if="item.orgDomain">{{ orgDomainTranslate(item.orgDomain) }}</div>
<div style="color:#2974D6;font-weight: 450;" v-if="item.orgDomain == '' && item.orgDomainParent">{{ orgDomainTranslate(item.orgDomainParent) }}</div>
<div style="color:#2974D6;font-weight: 450;" v-for="item,idx in item.majorType" :key="idx" >{{ majorTypeTranslate(item) }}</div>
<div v-if="item.keyword1">{{ item.keyword1 }}</div>
<div v-if="item.keyword2">{{ item.keyword2 }}</div>
<div v-if="item.keyword3">{{ item.keyword3 }}</div>
<div v-if="item.keyword4">{{ item.keyword4 }}</div>
<div v-if="item.keyword5">{{ item.keyword5 }}</div>
</div>
</router-link>
<div class="case-info-summary" @click="jumcasedet(item)">
<!-- <router-link :to="'/case/detail?id='+item.id"> -->
{{displayAll(item)}}
<!-- </router-link> -->
<span style="color:#588afc;cursor:pointer;" v-if="item.summary.length>180" @click.stop="changeIsAll(item)">
{{item.isAll?'收起':'展开'}}
</span>
</div>
<div style="display: flex;justify-content: flex-end;">
<div style="margin:8px 0;">
<interactBar :type="0" :shares="false" :data="item" :readonly="true"></interactBar> </div>
</div>
</div>
</div>
</el-col>
</el-row>
<div class="search-div-collapse">
<el-row class="search-item">
<el-col :span="24" >
<div style="margin-top:10px; display: flex;">
<div style="line-height: 25px;padding-right: 10px;">
<span class="item-title" style="padding-right: 5px;">专业分类</span>
<span class="item-line"></span>
</div>
<div style="flex:1" id="searchBox">
<el-radio-group style="display:flex;" v-model="queryCondition.majorType" size="mini" @change="search()">
<el-radio-button :label="null">全部</el-radio-button>
<div>
<el-radio-button v-for="item in speciData" :key="item.code" :label="item.code" > {{ item.name }} </el-radio-button>
</div>
</el-radio-group>
</div>
</div>
</el-col>
</el-row>
<div class="pagination-div">
<span class="pag-text" @click="loadMore()" v-if="moreState == 1">加载更多</span>
<span class="pag-text-msg" v-else-if="moreState == 2">数据加载中</span>
<span class="pag-text-msg" v-else-if="moreState == 3 && !isSeach">没有更多数据了</span>
<span class="pag-text-msg" v-else-if="isSeach">没有查询到相关内容</span>
</div>
<div class="searBox" v-if="searchwd">
<el-button type="text" id="closeSearchBtn" @click="closeSearch">
{{word}}
<i :class="showAll ? 'el-icon-arrow-up ': 'el-icon-arrow-down'"></i>
</el-button>
<div v-if="isSeach" style="height:382px">
</div>
</el-row>
<el-row style="height:10px;background-color:#f6f7fc;" >
</el-row>
<el-row class="order-div" style="border-bottom:none">
<span class="quyer-tag">
<el-button type="text" class="order-class" @click="searchData('views')" :class="{ actice: queryCondition.orderField == 'views' }">最热</el-button>
<el-button type="text" class="order-class" @click="searchData('')" :class="{ actice: queryCondition.orderField == '' }">最新</el-button>
<!-- <el-button type="text" class="order-class" @click="queryCondition.breCommend = queryCondition.breCommend == ture ? true : null" :class="{ actice: queryCondition.breCommend == true }">组织推荐</el-button> -->
</span>
</el-row>
<el-row class="data-content">
<el-col :span="24" v-for="item in caseList.list" :key="item.id" class="case-list">
<div class="case-info">
<div class="case-info-cont">
<router-link :to="'/case/detail?id='+item.id">
<div class="case-info-title">
<div class="case-titdiv">
<span class="case-tittext" v-html="item.title"></span>
<div class="case-info-date portal-time">
<i class="el-icon-time"></i>
<time-show :time="item.sysCreateTime"></time-show>
</div>
</div>
</div>
<div style="height:58px;padding-top:14px ">
<author :avatar="item.authorInfo.avatar" :name="item.authorInfo.name" :info="item.authorInfo.orgInfo" :sex="item.authorInfo.sex"></author>
</div>
<div class="keyword-text clearfix">
<div style="color:#2974D6;font-weight: 450;" v-if="item.orgDomain">{{ orgDomainTranslate(item.orgDomain) }}</div>
<div style="color:#2974D6;font-weight: 450;" v-if="item.orgDomain == '' && item.orgDomainParent">{{ orgDomainTranslate(item.orgDomainParent) }}</div>
<div style="color:#2974D6;font-weight: 450;" v-for="item,idx in item.majorType" :key="idx" >{{ majorTypeTranslate(item) }}</div>
<div v-if="item.keyword1">{{ item.keyword1 }}</div>
<div v-if="item.keyword2">{{ item.keyword2 }}</div>
<div v-if="item.keyword3">{{ item.keyword3 }}</div>
<div v-if="item.keyword4">{{ item.keyword4 }}</div>
<div v-if="item.keyword5">{{ item.keyword5 }}</div>
</div>
</router-link>
<div class="case-info-summary" @click="jumcasedet(item)">
<!-- <router-link :to="'/case/detail?id='+item.id"> -->
{{displayAll(item)}}
<!-- </router-link> -->
<span style="color:#588afc;cursor:pointer;" v-if="item.summary.length>180" @click.stop="changeIsAll(item)">
{{item.isAll?'收起':'展开'}}
</span>
</div>
<div style="display: flex;justify-content: flex-end;">
<div style="margin:8px 0;">
<interactBar :type="0" :shares="false" :data="item" :readonly="true"></interactBar> </div>
</div>
</div>
</div>
</el-col>
</el-row>
<div class="pagination-div">
<span class="pag-text" @click="loadMore()" v-if="moreState == 1">加载更多</span>
<span class="pag-text-msg" v-else-if="moreState == 2">数据加载中</span>
<span class="pag-text-msg" v-else-if="moreState == 3 && !isSeach">没有更多数据了</span>
<span class="pag-text-msg" v-else-if="isSeach">没有查询到相关内容</span>
</div>
<div v-if="isSeach" style="height:382px">
</div>
</el-card>
</el-col>
</el-row>
</el-card>
</div>
</div>
<div style="width: 410px;">
<div class="xcontent2-minor">
<div>
<div id="fixd-box">
<div class="ranking-card portal-right-box list-bg">
<p class="portal-title-one" style="padding-bottom:12px">好评榜</p>
<ul>
<div class="portal-ranking ranking-bg">
<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;">
<span class="portal-right-text blue-one" v-if="index==0">
<img src="/images/listblue01.png" alt="">
@@ -160,9 +146,9 @@
</li>
</ul>
</div>
<div style="margin-top:26px" class="ranking-card portal-right-box list-bg1">
<p class="portal-title-one" style="padding-bottom:12px">人气榜</p>
<ul>
<div class="portal-ranking ranking-bg1" style="margin-top:26px" >
<p class="ranking-title">人气榜</p>
<ul class="ranking-data">
<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="">
@@ -190,7 +176,7 @@
</div>
</div>
</div>
@@ -351,7 +337,7 @@ export default {
let key = 'case';
apiPlace.detail(key).then(res=>{
console.log(res)
let lmj = JSON.parse(res.result.content)
let lmj = JSON.parse(res.result.content)
// console.log(lmj)
this.resonimg = lmj[0]
console.log(this.resonimg.image)
@@ -746,16 +732,16 @@ export default {
height: 240px;
background: url('/images/case-banner.png');
}
::v-deep .el-checkbox{
.el-checkbox__input{
.el-checkbox__inner{
border: 1px solid #3e3c3c;
}
}
}
::v-deep .el-radio-button{
margin-right:-5px;
}
@@ -813,21 +799,7 @@ export default {
overflow: hidden;
}
.ranking-title {
line-height: 34px;
font-size: 15px;
color: #333333;
.center-titlt {
font-size: 15px;
color: #333333;
}
.center {
text-align: right;
}
img {
margin-top: 5px;
}
}
::v-deep .title-line-ellipsis {
// width: 100%;
display: -webkit-box;
@@ -1068,15 +1040,15 @@ export default {
// // background: linear-gradient(180deg, #7bb4ed 0%, #fff 36%);
// background: url('/images/qa-box.png') no-repeat 100% / 100%;
// }
.ranking-card {
.center {
text-align: center;
}
}
.right-box {
line-height: 25px;
.ranking-title {

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

@@ -3,9 +3,9 @@
<div class="course-banner">
<portal-header current="course" @emitInput="emitInput"></portal-header>
</div>
<div class="xcontent portal-content">
<div class="xrow" style="display: flex;justify-content: space-between;">
<div style="flex: 1;margin-right:0px" class="xcol content-div">
<div class="">
<div class="xcontent2">
<div class="xcontent2-main content-div">
<div class="search-div" style="margin-right:36px">
<div class="searchbar" v-if="searchTags.length > 0">
<div style="line-height: 30px;">
@@ -45,6 +45,8 @@
<svg-icon icon-class="hot" style="font-size:22px"></svg-icon>
</span>
</span>
<span @click="jumOpen()" class="Uxtext" style="margin-left: 30px;"> 公开课
</span>
</div>
<div class="search-item-sub" v-if="types.oneSubList.length != 0">
<span class="item-title" style="width: 40px;">分类:</span>
@@ -69,33 +71,34 @@
</el-row>
</div>
</div>
<div class="order-div" v-if="listType == 1">
<div class="order-div">
<span class="quyer-tag">
<el-button type="text" class="order-class" @click="orderChange('studys')" :class="{ actice: course.orderField == 'studys' }">最热</el-button>
<el-button type="text" class="order-class" @click="orderChange('publishTime')" :class="{ actice: course.orderField == 'publishTime' }">最新</el-button>
</span>
</div>
<div class="xrow data-content" v-if="listType == 1">
<div class="xrow-course course-index" v-for="(cinfo,cidx) in courseList" :key="cinfo.id" v-if="(courseList.length<=course.pageSize) || (cidx<parseInt(courseList.length/columns)*columns)">
<div class="xcourse-list">
<div class="xcourse-card" v-for="(cinfo,cidx) in courseList" :key="cinfo.id" v-if="(courseList.length<=course.pageSize) || (cidx<parseInt(courseList.length/columns)*columns)">
<div class="course-card">
<a :href="toCourseDetail(cinfo)">
<div class="course-image-box" style="height:196px">
<course-image height="196px" :course="cinfo"></course-image>
<div class="course-image-box">
<course-image :course="cinfo"></course-image>
</div>
<div :title="cinfo.title" class="course-title two-line-ellipsis" v-html="cinfo.name">
</div>
<div class="course-author">
<div class="course-author-left">
<span v-if="cinfo.teacher">{{cinfo.teacher=='BOE教师'? '':cinfo.teacher}}</span>
<span class="study-num">{{cinfo.studies}}人学习</span>
</div>
<div style="display:flex">
<div class="cor-praises" v-if="cinfo.source == 2"><interactBar :type="1" :data="cinfo" :courseExclusive="true" :comments="false" :praises="false" :shares="false" :views="false"></interactBar> </div>
<div class="course-title two-line-ellipsis" :title="cinfo.title" v-html="cinfo.name"></div>
<div class="course-info">
<div class="course-info-user">
<span class="course-info-author" v-if="cinfo.teacher">{{cinfo.teacher=='BOE教师'? '':cinfo.teacher}}</span>
<span class="course-info-studys">{{cinfo.studies}}+人学习</span>
</div>
<div class="course-info-score">
<div class="cor-praises" v-if="cinfo.source == 2">
<interactBar :type="1" nodeWidth="20px" :data="cinfo" :courseExclusive="true" :comments="false" :praises="false" :shares="false" :views="false"></interactBar>
</div>
<div>
<div v-if="cinfo.score">
<span class="course-score-value">{{toScore(cinfo.score)}}分</span>
</div>
<div v-else class="course-score-no">未评分</div>
<div v-if="cinfo.score">
<span class="course-score-value">{{toScore(cinfo.score)}}分</span>
</div>
<div v-else class="course-score-no">未评分</div>
</div>
</div>
</div>
@@ -110,7 +113,7 @@
<span class="pag-text-msg" v-else-if="moreState == 3">没有更多数据了</span>
</div>
</div>
<div class="xpage-right">
<div class="xcontent2-minor">
<div id="fixd-box">
<div v-if="identity == 2 || identity == 3 || identity == 5">
<div class="portal-model-btn pointer" @click="toNeedCourse">
@@ -118,9 +121,9 @@
上传课程
</div>
</div>
<div class="ranking-card portal-right-box list-bg">
<p class="portal-title-one" style="padding-bottom:12px">好评榜</p>
<ul>
<div class="portal-ranking 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;">
<span class="portal-right-text blue-one" v-if="index==0">
<img src="/images/listblue01.png" alt="">
@@ -163,9 +166,9 @@
</li>
</ul>
</div>
<div style="margin-top:26px" class="ranking-card portal-right-box list-bg1">
<p class="portal-title-one" style="padding-bottom:12px">人气榜</p>
<ul>
<div style="margin-top:26px" class="portal-ranking 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;">
<span class="portal-right-text orange-one" v-if="index==0">
<img src="/images/list-01.png" alt="">
@@ -208,9 +211,9 @@
</li>
</ul>
</div>
<div style="margin-top:26px" class="ranking-card portal-right-box list-bg2">
<p class="portal-title-one" style="padding-bottom:12px">热度榜</p>
<ul>
<div style="margin-top:26px" class="portal-ranking 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;">
<span class="portal-right-text orange-one" v-if="index==0">
<img src="/images/listred01 .png" alt="">
@@ -257,7 +260,6 @@
<img :src="fileBaseUrl + resonimg.image" alt="">
</div>
</div>
</div>
</div>
</div>
@@ -354,7 +356,6 @@ export default {
},
data: [{}, {}, {}, {}],
order: 1,
listType: 1,
courseList: [],
searchRecords: [],
hotList: [],
@@ -439,6 +440,9 @@ export default {
jumUX() {
window.open("https://m.qingxuetang.com/x/?appId=qxtcorp306130", "_blank");
},
jumOpen(){
//公开课 openCourse=1
},
emitInput(val) {
this.course.keyword = val;
this.searchData();
@@ -455,7 +459,7 @@ export default {
}
if (scrollTop > 830) {
document.querySelector("#fixd-box").style.cssText =
"position: fixed;top: -914px;width:242.5px";
"position: fixed;top: -914px;";
} else {
document.querySelector("#fixd-box").style.cssText = "position: static";
}
@@ -843,10 +847,7 @@ export default {
border-radius: 8px;
}
}
.course-card{
// height: 196px;
position: relative;
}
::v-deep .course-image-box :hover .el-image{
// transition: all 0.5s;
z-index: 999;
@@ -937,10 +938,11 @@ export default {
display: block;
}
.course-banner{
height: 240px;
background: url('/images/course-banner.png');
}
.course-banner{
height: 240px;
background: url('/images/course-banner.png');
}
::v-deep .el-radio-button{
margin-right:0px;
}
@@ -999,14 +1001,10 @@ export default {
}
::v-deep .el-radio-button:first-child .el-radio-button__inner {
border-left: none;
// border-radius: 4px 0 0 4px;
//box-shadow: none!important;
}
// .el-row{
// display: flex;
// flex-wrap: wrap;
// }
.item-title {
margin: 10px 10px 10px 0;
font-size: 14px;
@@ -1017,203 +1015,7 @@ export default {
height: 20px;
background: #ddd;
}
.course-card {
padding: 30px;
padding-bottom: 18px;
margin-bottom: 36px;
background: #fff;
border-radius: 8px;
margin-right: 35px;
::v-deep .cor-praises {
// position: absolute;
-moz-user-select: none; /*火狐*/
-webkit-user-select: none; /*webkit浏览器*/
-ms-user-select: none; /*IE10*/
-khtml-user-select: none; /*早期浏览器*/
user-select: none;
.interact-bar-btn {
margin-top: -2px;
min-width: 26px !important;
width: 32px;
height: 20px;
background:rgba(237, 239, 240,0.5);
border-radius: 20px;
margin-top: 4px;
margin-right: 12px;
.interact-bar-value {
display: none;
}
.svg-icon{
font-size: 12px !important;
margin-left: 10px;
margin-bottom: 6px;
}
}
}
.cor-icon {
position: absolute;
left: 100px;
top: 54px;
border-radius: 50%;
background: rgba(88, 138, 252, 0.37);
.el-icon-caret-right {
font-size: 36px;
color: #588afc;
}
}
.course-image-box {
position: relative;
height: 196px;
// width: 350px;
width: 100%;
height: 100%;
::v-deep .el-image{
border-radius: 4px !important;
}
.course-image {
width: 100%;
height: 148px;
}
.course-type {
position: absolute;
top: 5px;
right: 0px;
width: 90px;
height: 30px;
line-height: 30px;
text-align: center;
background-color: #292828;
opacity: 0.4;
border-top-left-radius: 15px;
border-bottom-left-radius: 15px;
color: #ffffff;
-moz-user-select: none; /*火狐*/
-webkit-user-select: none; /*webkit浏览器*/
-ms-user-select: none; /*IE10*/
-khtml-user-select: none; /*早期浏览器*/
user-select: none;
}
.course-type-title {
position: absolute;
top: 5px;
right: 0px;
width: 90px;
height: 30px;
line-height: 30px;
text-align: center;
color: #ffffff;
-moz-user-select: none; /*火狐*/
-webkit-user-select: none; /*webkit浏览器*/
-ms-user-select: none; /*IE10*/
-khtml-user-select: none; /*早期浏览器*/
user-select: none;
}
.course-flag {
height: 26px;
position: absolute;
top: 15px;
right: 0;
}
.course-tip {
width: 100%;
height: 26px;
position: absolute;
bottom: 0;
padding: 0 10px;
color: #fff;
font-size: 14px;
.course-study-count {
float: left;
}
.course-time {
float: right;
}
}
}
.course-title {
height: 44px;
// margin: 10px 0;
margin: 16px 0 20px 0px;
line-height: 24px;
font-size: 16px;
font-weight: 600;
color: #333333;
-moz-user-select: none; /*火狐*/
-webkit-user-select: none; /*webkit浏览器*/
-ms-user-select: none; /*IE10*/
-khtml-user-select: none; /*早期浏览器*/
user-select: none;
}
.course-author {
// margin: 5px 15px;
// padding-bottom: 10px;
display: flex;
justify-content: space-between;
.course-author-left {
font-size: 14px;
line-height: 30px;
color: #6E7B84;
}
}
.course-score {
// padding: 5px 15px;
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 10px;
.course-score-star {
flex: 1;
}
.course-score-value {
color: #ffb30f;
font-family: "Arial";
-moz-user-select: none; /*火狐*/
-webkit-user-select: none; /*webkit浏览器*/
-ms-user-select: none; /*IE10*/
-khtml-user-select: none; /*早期浏览器*/
user-select: none;
// font-size: 30px;
}
.course-score-no {
font-size: 12px;
color: #ffb30f;
-moz-user-select: none; /*火狐*/
-webkit-user-select: none; /*webkit浏览器*/
-ms-user-select: none; /*IE10*/
-khtml-user-select: none; /*早期浏览器*/
user-select: none;
}
}
}
.course-score-no {
text-align: right;
font-size: 14px;
color: #6B7C85;
line-height: 30px;
}
.course-score-value {
font-size: 14px;
color: #FA6400;
// margin-left: 32px;
line-height: 30px;
font-family: "Arial";
// font-size: 30px;
}
.study-num {
line-height: 30px;
font-size: 14px;
margin-left: 12px;
color: #6E7B84;
-moz-user-select: none; /*火狐*/
-webkit-user-select: none; /*webkit浏览器*/
-ms-user-select: none; /*IE10*/
-khtml-user-select: none; /*早期浏览器*/
user-select: none;
}
.btn-label {
}
.btn-label {
position: relative;
display: inline-block;
@@ -1253,9 +1055,7 @@ export default {
height: 50px;
}
.content-div {
.quyer-tag {
// margin-left: 10px;
.order-class {
margin: 30px 0;
@@ -1290,6 +1090,7 @@ export default {
.search-div {
background: #fff;
padding: 10px 25px;
border-radius: 8px;
::v-deep .el-input {
width: 420px;
height: 38px;
@@ -1353,151 +1154,29 @@ export default {
.order-div {
padding: 0px 15px 0 0px;
}
.data-content {
// padding: 5px 0px;
.course-card {
// width: 290px;
margin-bottom: 36px;
position: relative;
.course-image-box {
position: relative;
.course-image {
width: 288px;
height: 148px;
}
.course-flag {
height: 26px;
position: absolute;
top: 15px;
right: 0;
}
.course-tip {
width: 100%;
height: 26px;
position: absolute;
bottom: 0;
padding: 0 10px;
color: #fff;
font-size: 14px;
.course-study-count {
float: left;
}
.course-time {
float: right;
}
}
}
.course-info-box {
padding: 15px;
.course-info-title {
font-size: 18px;
font-weight: 600;
color: #343434;
height: 48px;
}
.course-other-info {
height: 40px;
margin-top: 10px;
.course-author {
float: left;
height: 40px;
font-size: 12px;
color: #666666;
line-height: 40px;
img {
margin-right: 10px;
width: 30px;
border: 1px solid #eee;
border-radius: 50%;
vertical-align: middle;
}
}
.course-score-info {
float: right;
height: 40px;
line-height: 40px;
.course-score {
color: #f8a114;
font-family: "Arial";
font-size: 36px;
}
.course-score-title {
font-size: 14px;
color: #787878;
}
}
}
}
.cardmark {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(101, 101, 101, 0.8);
pointer-events: none;
border-radius: 5px;
padding: 10px;
opacity: 0;
-webkit-transition: all 1.5s;
-moz-transition: all 1.5s;
-ms-transition: all 1.5s;
-o-transition: all 1.5s;
transition: all 1.5s;
.cardmark-name {
font-size: 18px;
line-height: 30px;
font-weight: 600;
color: #fff;
}
.cardmark-info {
color: #fff;
font-size: 14px;
line-height: 20px;
}
}
}
.course-card:hover .cardmark {
opacity: 1;
}
}
}
.course-form {
width: 100%;
margin: 10px 0;
::v-deep.el-button {
width: 100%;
color: #fff;
}
}
// .course-form {
// width: 100%;
// margin: 10px 0;
// ::v-deep.el-button {
// width: 100%;
// color: #fff;
// }
// }
.right-box {
.add-btn {
width: 100%;
padding: 15px 0;
}
.ranking-card {
margin-top: 0px;
}
// .right-box {
// .add-btn {
// width: 100%;
// padding: 15px 0;
// }
// .ranking-card {
// margin-top: 0px;
// }
// .ranking-data {
// margin: 10px 0;
// color: #999999;
// }
// }
.ranking-data {
margin: 10px 0;
color: #999999;
}
}
.ranking-title {
line-height: 34px;
font-size: 15px;
color: #333333;
.center-titlt {
font-size: 15px;
color: #333333;
}
.center {
text-align: right;
}
img {
margin-top: 5px;
}
}
</style>

16
src/views/portal/qa/Answer.vue
View File

@@ -3,9 +3,9 @@
<div class="qa-banner">
<portal-header current="qa" :goSearch="4"></portal-header>
</div>
<div class="portal-content xcontent">
<div class="xrow" style="display: flex;justify-content: space-between;">
<div style="flex: 1;" class="xcol content-div">
<div >
<div class="xcontent2">
<div style="margin-right: 30px;" class="xcontent2-main">
<div v-if="noData">
<div class="qust-detail">
<div class="xpage-detail-crumbs">
@@ -229,16 +229,16 @@
<el-empty :image-size="200"></el-empty>
</div>
</div>
<div style="width: 410px;margin-left: 26px;">
<div class="xcontent2-minor">
<div class="qa-ranking">
<div class="portal-model-btn" @click="$refs.addQuestion.askQuestionDialog = true">
<div class="portal-model-btn pointer" @click="$refs.addQuestion.askQuestionDialog = true">
<svg-icon style="margin-right: 0;font-size: 24px;" icon-class="question-mark"></svg-icon>
提问题
</div>
<div class="portal-right-box list-bg">
<p class="portal-title-one" style="padding-bottom:12px">贡献榜</p>
<ul>
<div class="portal-ranking ranking-bg">
<p class="ranking-title">贡献榜</p>
<ul class="ranking-data">
<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="">

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

@@ -3,86 +3,86 @@
<div class="qa-banner">
<portal-header current="qa" class="qa-nav" @emitInput="emitInput"></portal-header>
</div>
<div class="portal-content">
<div class="xrow" style="display: flex;justify-content: space-between;">
<div style="flex: 1;" class="xcol content-div">
<el-row>
<el-card :body-style="{ padding: '0px' }" class="left-div">
<el-row class="order-div">
<span class="quyer-tag">
<el-button type="text" class="order-class" @click="orderFieldData('answers')" :class="{ actice: styleControl == 2 }">
最热
</el-button>
<el-button type="text" class="order-class" @click="orderFieldData('')" :class="{ actice: styleControl == 1 }">
最新
</el-button>
<el-button type="text" @click="setEssence(queryConditions.isEssence)" class="order-class" :class="{ actice: styleControl == 3 }">精华问题</el-button>
</span>
<span class="quyer-tag">
<el-button type="text" class="order-class" @click="isResolveData(null)" :class="{ actice: queryConditions.isResolve === null }">
全部
</el-button>
<el-button type="text" class="order-class" @click="isResolveData(false)" :class="{ actice: queryConditions.isResolve === false }">
待解决
</el-button>
<el-button type="text" @click="isResolveData(true)" class="order-class" :class="{ actice: queryConditions.isResolve===true }">已解决</el-button>
</span>
</el-row>
<div class="data-content" v-if="qaList.length > 0">
<div :span="24" v-for="(qa, qaidx) in qaList" :key="qaidx" class="qa-list">
<div class="qa-info-box">
<div class="qa-info">
<div class="qa-info-title" @click="jumpDetail(qa)">
<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="portal-time">
<i class="el-icon-time" style="margin-right:4px"></i> {{qa.sysCreateTime}}
</div>
</div>
<div style="display: flex;justify-content:space-between;">
<div class="qa-info-summary portal-summary-text two-line-ellipsis" @click="jumpDetail(qa)" v-html="$keywordActiveShow(qa.content,queryKeyWord)"></div>
<div style="cursor: pointer; text-align: right;cursor: pointer;" v-if="qa.images!==''" @click="jumpDetail(qa)">
<img style="width: 156px;height: 105px;border-radius: 4px;margin-left: 18px;" :src="fileBaseUrl + qa.images" alt="">
<div class="xcontent2">
<div class="xcontent2-main" style="margin-right: 30px;background-color: #fff;padding-top: 50px;">
<div>
<div class="left-div">
<div class="order-div">
<span class="quyer-tag">
<el-button type="text" class="order-class" @click="orderFieldData('answers')" :class="{ actice: styleControl == 2 }">
最热
</el-button>
<el-button type="text" class="order-class" @click="orderFieldData('')" :class="{ actice: styleControl == 1 }">
最新
</el-button>
<el-button type="text" @click="setEssence(queryConditions.isEssence)" class="order-class" :class="{ actice: styleControl == 3 }">精华问题</el-button>
</span>
<span class="quyer-tag">
<el-button type="text" class="order-class" @click="isResolveData(null)" :class="{ actice: queryConditions.isResolve === null }">
全部
</el-button>
<el-button type="text" class="order-class" @click="isResolveData(false)" :class="{ actice: queryConditions.isResolve === false }">
待解决
</el-button>
<el-button type="text" @click="isResolveData(true)" class="order-class" :class="{ actice: queryConditions.isResolve===true }">已解决</el-button>
</span>
</div>
<div class="data-content" v-if="qaList.length > 0">
<div :span="24" v-for="(qa, qaidx) in qaList" :key="qaidx" class="qa-list">
<div class="qa-info-box">
<div class="qa-info">
<div class="qa-info-title" @click="jumpDetail(qa)">
<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="portal-time">
<i class="el-icon-time" style="margin-right:4px"></i> {{qa.sysCreateTime}}
</div>
</div>
<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>
</div>
<div><interactBar nodeWidth="60px" :readonly="true" :type="4" :data="qa" @addAnswers="qaAnswer(qa)" :shares="true" :comments="false" :answers="true" :clickAnswer="true" :views="false"></interactBar></div>
<div style="display: flex;justify-content:space-between;">
<div class="qa-info-summary portal-summary-text two-line-ellipsis" @click="jumpDetail(qa)" v-html="$keywordActiveShow(qa.content,queryKeyWord)"></div>
<div style="cursor: pointer; text-align: right;cursor: pointer;" v-if="qa.images!==''" @click="jumpDetail(qa)">
<img style="width: 156px;height: 105px;border-radius: 4px;margin-left: 18px;" :src="fileBaseUrl + qa.images" alt="">
</div>
</div>
<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>
</div>
<div><interactBar nodeWidth="60px" :readonly="true" :type="4" :data="qa" @addAnswers="qaAnswer(qa)" :shares="true" :comments="false" :answers="true" :clickAnswer="true" :views="false"></interactBar></div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="pagination-div">
<span class="pag-text" @click="loadMore()" v-if="moreState == 1">加载更多</span>
<span class="pag-text-msg" v-else-if="moreState == 2">数据加载中</span>
<span class="pag-text-msg" v-else-if="moreState == 3 && !isSeach">没有更多数据了</span>
<span class="pag-text-msg" v-else-if="isSeach">没有查询到相关内容</span>
</div>
<div v-if="isSeach" style="height:382px">
<div class="pagination-div">
<span class="pag-text" @click="loadMore()" v-if="moreState == 1">加载更多</span>
<span class="pag-text-msg" v-else-if="moreState == 2">数据加载中</span>
<span class="pag-text-msg" v-else-if="moreState == 3 && !isSeach">没有更多数据了</span>
<span class="pag-text-msg" v-else-if="isSeach">没有查询到相关内容</span>
</div>
<div v-if="isSeach" style="height:382px">
</div>
</div>
</el-card>
</el-row>
</div>
</div>
<div style="width: 410px;">
<div class="xcontent2-minor">
<!-- <div> -->
<div style="padding:0" id="qa-fixd">
<div class="portal-model-btn pointer" @click="$refs.addQuestion.askQuestionDialog = true">
<svg-icon style="margin-right: 0;font-size: 24px;" icon-class="question-mark"></svg-icon>
提问题
</div>
<div class="portal-right-box list-bg">
<p class="portal-title-one" style="padding-bottom:12px">贡献榜</p>
<ul>
<div class="portal-ranking ranking-bg">
<p class="ranking-title">贡献榜</p>
<ul class="ranking-data">
<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="">
@@ -109,11 +109,10 @@
</div>
</div>
<!-- </div> -->
</div>
</div>
<addQuestion ref="addQuestion" @sure="getQaData(true)"></addQuestion>
</div>
<!-- :before-close="handleClose" -->
@@ -215,7 +214,7 @@ export default {
let key = 'qa';
apiPlace.detail(key).then(res=>{
console.log(res)
let lmj = JSON.parse(res.result.content)
let lmj = JSON.parse(res.result.content)
this.resonimg = lmj[0]
console.log(this.resonimg.image)
})