mirror of
https://codeup.aliyun.com/67762337eccfc218f6110e0e/vue/learning-system-portal.git
synced 2025-12-10 11:26:43 +08:00
整体门户页面的样式，宽度的处理
This commit is contained in:
daihh
@@ -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 {
|
||||
|
||||
Reference in New Issue
Block a user