hz/learning-system-portal
1
0
Fork 0
mirror of https://codeup.aliyun.com/67762337eccfc218f6110e0e/vue/learning-system-portal.git synced 2025-12-09 10:56:44 +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

376
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;
//页面中的排行内容块
.portal-ranking{
border-radius: 8px;
padding: 30px;
// height: 544px;
// overflow-y: auto;
.course-index-list{
height: 410px;
.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;
}
.case-index-list{
height: 114px;
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;
}
.anking-index-list{
height: 320px;
overflow-y: auto;
.course-image {
width: 100%;
height: 100%;
}
.qa-index-qa{
height: 64px;
overflow-y: auto;
.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;
}
.portal-ranking{
padding: 30px 15px;
}
.course-card {
padding:20px;
margin-right: 20px;
.course-image-box {
width: 200px;
height: 114px;
}
.course-index{
// width: 33.3333%;
}
.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;
}
.portal-ranking{
padding: 30px 20px;
}
.course-card {
padding:25px;
margin-right: 25px;
.course-image-box {
width: 285px;
height: 160px;
}
.course-index{
// width: 25%;
// width: 33.3333%;
}
.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;
}
.portal-ranking{
padding: 30px 30px;
}
.course-card {
padding:25px;
margin-right: 25px;
.course-image-box {
width: 320px;
height: 180px;
}
.course-index{
// width: 20%;
width: 33.3333%;
}
.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;
}
}
}

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

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

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

@@ -3,10 +3,9 @@
<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" >
<!--文章详细内容-->
@@ -49,14 +48,17 @@
<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";
}

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

@@ -4,22 +4,11 @@
<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 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="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>
</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>
@@ -28,14 +17,13 @@
<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 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-->
@@ -74,20 +62,22 @@
<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 v-if="isSeach" style="height:382px"></div>
</div>
</div>
</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>
<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');
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%;

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

@@ -3,10 +3,10 @@
<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="">
<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,12 +96,12 @@
<el-empty :image-size="200"></el-empty>
</div>
</div>
<div style="width: 410px;margin-left: 5px;" :class="zoomShow?'':'fixd-box-show'">
<div :class="zoomShow?'':'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="">
@@ -122,9 +122,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">
<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="">

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

@@ -4,29 +4,18 @@
<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">
<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">
<!-- <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 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>
@@ -35,16 +24,14 @@
<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>
</el-col>
</el-row>
</div>
<div class="search-div-collapse">
<el-row class="search-item">
<el-col :span="24" >
<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>
@@ -59,8 +46,8 @@
</el-radio-group>
</div>
</div>
</el-col>
</el-row>
</div>
</div>
<div class="searBox" v-if="searchwd">
<el-button type="text" id="closeSearchBtn" @click="closeSearch">
@@ -69,7 +56,7 @@
</el-button>
</div>
</el-row>
<el-row style="height:10px;background-color:#f6f7fc;" >
<el-row style="height:30px;background-color:#f6f7fc;" >
</el-row>
<el-row class="order-div" style="border-bottom:none">
<span class="quyer-tag">
@@ -131,15 +118,14 @@
<div v-if="isSeach" style="height:382px">
</div>
</el-card>
</el-col>
</el-row>
</div>
<div style="width: 410px;">
</div>
<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="">
@@ -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;

441
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,28 +71,29 @@
</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 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-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 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 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>
<div v-if="cinfo.score">
<span class="course-score-value">{{toScore(cinfo.score)}}分</span>
@@ -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{
.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="">

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

@@ -6,11 +6,11 @@
<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">
<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 }">
最热
@@ -29,7 +29,7 @@
</el-button>
<el-button type="text" @click="isResolveData(true)" class="order-class" :class="{ actice: queryConditions.isResolve===true }">已解决</el-button>
</span>
</el-row>
</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">
@@ -70,19 +70,19 @@
<div v-if="isSeach" style="height:382px">
</div>
</el-card>
</el-row>
</div>
<div style="width: 410px;">
</div>
</div>
<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="">
@@ -113,7 +113,6 @@
</div>
</div>
<addQuestion ref="addQuestion" @sure="getQaData(true)"></addQuestion>
</div>
<!-- :before-close="handleClose" -->