mirror of
https://codeup.aliyun.com/67762337eccfc218f6110e0e/vue/learning-system-portal.git
synced 2025-12-15 22:06:43 +08:00
888 lines
28 KiB
Vue
888 lines
28 KiB
Vue
<template>
|
||
<div id="case-list-content">
|
||
<portal-header current="case" @emitInput="emitInput"></portal-header>
|
||
<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 }}</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: 5px;">
|
||
<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.name"> {{ item.name}}</el-radio-button>
|
||
</el-radio-group>
|
||
</div>
|
||
|
||
</div>
|
||
|
||
</el-col>
|
||
</el-row>
|
||
<div class="search-div-collapse">
|
||
<el-row class="search-item">
|
||
<el-col :span="24">
|
||
<!-- <div class="item-title">专业领域</div> -->
|
||
<div style="margin-top:10px; display: flex;">
|
||
<div style="line-height: 25px;padding-right: 5px;">
|
||
<span class="item-title" style="padding-right: 5px;">专业分类</span>
|
||
<span class="item-line"></span>
|
||
</div>
|
||
<div style="flex:1" id="searchBox">
|
||
<el-radio-group v-model="queryCondition.majorType" size="mini" @change="search()">
|
||
<el-radio-button :label="null">全部</el-radio-button>
|
||
<el-radio-button v-for="item in Profess" :key="item.code" :label="item.name" > {{ item.name }} </el-radio-button>
|
||
</el-radio-group>
|
||
</div>
|
||
|
||
</div>
|
||
|
||
</el-col>
|
||
</el-row>
|
||
</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 class="order-div">
|
||
<span class="quyer-tag">
|
||
<el-button type="text" class="order-class" @click="searchData('comments')" :class="{ actice: queryCondition.orderField == 'comments' }">最热</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">
|
||
<div class="case-info-title">
|
||
<router-link :to="'/case/detail?id='+item.id">
|
||
<!-- <span v-if="i % 2 == 0" style="color:red;margin-right:5px">[组织推荐]</span> -->
|
||
<div>
|
||
<span class="" v-html="item.title"></span>
|
||
<div class="case-info-date">
|
||
<i class="el-icon-time"></i>
|
||
<time-show :time="item.sysCreateTime"></time-show>
|
||
</div>
|
||
</div>
|
||
</router-link>
|
||
</div>
|
||
<div style="height:35px">
|
||
<author :avatar="item.authorInfo.avatar" :name="item.authorInfo.name" :info="item.authorInfo.orgInfo" :sex="item.authorInfo.sex"></author>
|
||
</div>
|
||
<!-- <router-link :to="'/case/detail?id='+item.id"> -->
|
||
<!-- class="case-info-summary" -->
|
||
<div>
|
||
<router-link :to="'/case/detail?id='+item.id">
|
||
<!-- {{item.summary}} -->
|
||
{{displayAll(item)}}
|
||
</router-link>
|
||
<span style="color:#588afc" v-if="item.summary.length>90" @click="changeIsAll(item)">
|
||
{{item.isAll?'收起':'全文'}}
|
||
</span>
|
||
</div>
|
||
<!-- </router-link> -->
|
||
<!-- <div class="button-wrap" v-if="needShowExpande">
|
||
<div class="exp-but" @click="expandeClick" v-if="!expande">展开
|
||
</div>
|
||
<div class="exp-but" @click="expandeClick" v-else>收起</div>
|
||
</div> -->
|
||
|
||
<div style="display: flex;justify-content: space-between;">
|
||
|
||
<div>
|
||
<interactBar :type="0" :shares="false" :data="item" :readonly="false"></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>
|
||
</div>
|
||
<div style="width: 245px;margin-left: 5px;">
|
||
<div>
|
||
<div id="fixd-box">
|
||
<el-card class="ranking-card" >
|
||
<div slot="header">
|
||
<span style="font-size: 14px;font-weight: 600;color: #333333;">好评榜</span>
|
||
</div>
|
||
<div style="padding-bottom:10px">
|
||
<el-row class="ranking-title">
|
||
<!-- <el-col :span="15" style="color: #333333;font-size: 14px;">名称</el-col> -->
|
||
<!-- <el-col :offset="4" :span="5" class="center" style="color: #333333;font-size: 14px;">分数</el-col> -->
|
||
</el-row>
|
||
<el-row class="ranking-title bacolor" v-for="(item, index) in ankingList" :key="index" >
|
||
<el-col :span="6" style="height:34px">
|
||
<img v-if="index===0" :src="`${webBaseUrl}/images/first.png`"/>
|
||
<img v-if="index===1" :src="`${webBaseUrl}/images/second.png`"/>
|
||
<img v-if="index===2" :src="`${webBaseUrl}/images/third.png`"/>
|
||
<span style="margin-left: 10px" v-if="index!=2&&index!=0&&index!=1">{{index+1}}</span>
|
||
</el-col>
|
||
<el-tooltip :enterable="false" @click.native="jumpRouter(item)" effect="light" :content="item.sysCreateUname" placement="top-start">
|
||
<el-col :span="15" style="cursor: pointer;" class="title-line-ellipsis"> {{ item.sysCreateUname }}</el-col>
|
||
</el-tooltip>
|
||
<!-- <el-col class="center" style="color: #FF8E00;" :span="5">{{ item.score }}</el-col> -->
|
||
</el-row>
|
||
</div>
|
||
</el-card>
|
||
<div style="height: 10px;"></div>
|
||
<el-card class="ranking-card" >
|
||
<div slot="header">
|
||
<span style="font-size: 14px;font-weight: 600;color: #333333;">人气榜</span>
|
||
</div>
|
||
<div style="padding-bottom:10px">
|
||
<el-row class="ranking-title">
|
||
<!-- <el-col :span="15" style="color: #333333;font-size: 14px;">名称</el-col> -->
|
||
<!-- <el-col :offset="4" :span="5" class="center" style="color: #333333;font-size: 14px;">分数</el-col> -->
|
||
</el-row>
|
||
<el-row class="ranking-title bacolor" v-for="(item, index) in Popularity" :key="index" >
|
||
<el-col :span="6" style="height:34px">
|
||
<img v-if="index===0" :src="`${webBaseUrl}/images/first.png`"/>
|
||
<img v-if="index===1" :src="`${webBaseUrl}/images/second.png`"/>
|
||
<img v-if="index===2" :src="`${webBaseUrl}/images/third.png`"/>
|
||
<span style="margin-left: 10px" v-if="index!=2&&index!=0&&index!=1">{{index+1}}</span>
|
||
</el-col>
|
||
<el-tooltip :enterable="false" @click.native="jumpRouter(item)" effect="light" :content="item.title" placement="top-start">
|
||
<el-col :span="15" style="cursor: pointer;" class="title-line-ellipsis"> {{ item.title }}</el-col>
|
||
</el-tooltip>
|
||
<!-- <el-col class="center" style="color: #FF8E00;" :span="5">{{ item.score }}</el-col> -->
|
||
</el-row>
|
||
</div>
|
||
</el-card>
|
||
<div style="height: 10px;"></div>
|
||
<el-card class="ranking-card" >
|
||
<div slot="header">
|
||
<span style="font-size: 14px;font-weight: 600;color: #333333;">热度榜</span>
|
||
</div>
|
||
<div style="padding-bottom:10px">
|
||
<el-row class="ranking-title">
|
||
<!-- <el-col :span="15" style="color: #333333;font-size: 14px;">名称</el-col> -->
|
||
<!-- <el-col :offset="4" :span="5" class="center" style="color: #333333;font-size: 14px;">分数</el-col> -->
|
||
</el-row>
|
||
<el-row class="ranking-title bacolor" v-for="(item, index) in Positive" :key="index" >
|
||
<el-col :span="6" style="height:34px">
|
||
<img v-if="index===0" :src="`${webBaseUrl}/images/first.png`"/>
|
||
<img v-if="index===1" :src="`${webBaseUrl}/images/second.png`"/>
|
||
<img v-if="index===2" :src="`${webBaseUrl}/images/third.png`"/>
|
||
<span style="margin-left: 10px" v-if="index!=2&&index!=0&&index!=1">{{index+1}}</span>
|
||
</el-col>
|
||
<el-tooltip :enterable="false" @click.native="jumpRouter(item)" effect="light" :content="item.title" placement="top-start">
|
||
<el-col :span="15" style="cursor: pointer;" class="title-line-ellipsis"> {{ item.title }}</el-col>
|
||
</el-tooltip>
|
||
<!-- <el-col class="center" style="color: #FF8E00;" :span="5">{{ item.score }}</el-col> -->
|
||
</el-row>
|
||
</div>
|
||
</el-card>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<el-row :gutter="10">
|
||
</el-row>
|
||
<div style="height: 50px;"></div>
|
||
<el-dialog class="protocol" :visible.sync="protocolDialogVisible" width="30%" :show-close="false">
|
||
<div class="protocol-title">案例查阅及使用用户协议</div>
|
||
<div class="protocol-content">
|
||
  本专区内案例为BOE各组织沉淀的通用案例、 组织案例、卓越绩效案例、管理案例、 职级晋升案例、企业文化案例等。 案例内容记录作者亲历的、真实的、已完成的、
|
||
典型工作事件，提炼解决具体问题的心得、思路经验、方法等。 仅供BOE员工查询、学习、交流使用，未经允许不等已任何方式外传。
|
||
</div>
|
||
<span slot="footer" class="dialog-footer">
|
||
<el-checkbox label="我已阅读并同意。" @change="protocolCheck" style="float: left"></el-checkbox>
|
||
<el-tooltip :disabled="!protocolConfirmButton" effect="light" content="请先勾选‘我已阅读并同意。’" placement="bottom">
|
||
<span><el-button type="primary" :disabled="protocolConfirmButton" @click="protocolConfirm">确 定</el-button></span>
|
||
</el-tooltip>
|
||
</span>
|
||
</el-dialog>
|
||
</div>
|
||
<portal-footer></portal-footer>
|
||
<portalFloatTools></portalFloatTools>
|
||
</div>
|
||
</template>
|
||
|
||
<script>
|
||
import { mapGetters } from 'vuex';
|
||
import portalHeader from '@/components/PortalHeader.vue';
|
||
import portalFooter from '@/components/PortalFooter.vue';
|
||
import portalFloatTools from '@/components/PortalFloatTools.vue';
|
||
import interactBar from '@/components/Portal/interactBar.vue';
|
||
import timeShow from '@/components/Portal/datetimeShow.vue';
|
||
import author from '@/components/Portal/authorInfo.vue';
|
||
import apiCase from '@/api/modules/cases.js';
|
||
import apiUser from '@/api/system/user.js';
|
||
import apiSearchterm from "@/api/modules/searchterm.js";
|
||
import { deepClone } from "../../../utils";
|
||
import apiDict from "@/api/modules/dict.js"
|
||
export default {
|
||
name: 'index',
|
||
components: { portalHeader, portalFooter, portalFloatTools, interactBar,timeShow ,author},
|
||
computed: {
|
||
...mapGetters(['userInfo','portalCase']),
|
||
word: function() {
|
||
if (this.showAll == false) {
|
||
//对文字进行处理
|
||
return "展开";
|
||
} else {
|
||
return "收起";
|
||
}
|
||
},
|
||
isMore() {
|
||
let isOk = true;
|
||
if(this.caseList.list.length === this.caseList.count) {
|
||
isOk = false;
|
||
}
|
||
return isOk;
|
||
}
|
||
},
|
||
data() {
|
||
return {
|
||
moreState:1,// 1 加载更多 2 加载中 3无数据
|
||
isSeach:false,
|
||
searchwd:true,
|
||
showAll:true,//是否展开全部
|
||
searchRecords:[],
|
||
caseList:{
|
||
count:0,
|
||
list:[]
|
||
},
|
||
ankingList:[],
|
||
Popularity:[],
|
||
Positive:[],
|
||
domain:[],
|
||
Profess:[],
|
||
optionsList: [], //分类数据
|
||
protocolDialogVisible: false,
|
||
protocolConfirmButton:true,
|
||
queryCondition:{
|
||
pageIndex:1,
|
||
pageSize:10,
|
||
orderField:'comments',
|
||
// breCommend:null,
|
||
keyWord:'',
|
||
majorType:null,//专业分类
|
||
orgDomain:null,// 组织领域
|
||
orderAsc: false
|
||
},
|
||
keyWord:'',
|
||
anking: 2,
|
||
queryExpand: true, // true更多，false收起
|
||
category: 0,
|
||
type2: 0,
|
||
type3: 0,
|
||
isFind: false,
|
||
searchTags: []
|
||
};
|
||
},
|
||
|
||
mounted() {
|
||
this.$nextTick(function() {
|
||
this.closeSearch();
|
||
});
|
||
if(!this.portalCase.readProtocol){
|
||
this.protocolDialogVisible = true;
|
||
}
|
||
this.keyWord = this.$route.query.keyword;
|
||
if(this.keyWord != '') {
|
||
this.isSeach = true;
|
||
}
|
||
this.getAnkingData();
|
||
this.getPopularity();
|
||
this.searchterm();
|
||
this.getPositive();
|
||
this.getProfess();
|
||
this.getdomain();
|
||
// this.getCaseData();
|
||
this.search();
|
||
window.addEventListener(
|
||
"scroll",
|
||
this.handleScroll
|
||
);
|
||
},
|
||
|
||
watch:{
|
||
// queryCondition:{
|
||
// handler(newValue,oldValue){
|
||
// this.getCaseData()
|
||
// },
|
||
// deep:true,
|
||
// immediate:true
|
||
// }
|
||
},
|
||
beforeDestroy(){
|
||
window.removeEventListener("scroll",this.handleScroll);
|
||
},
|
||
methods: {
|
||
//展示全部
|
||
displayAll(item) {
|
||
if(!item.isAll && item.summary && item.summary.length > 90) {
|
||
return item.summary.slice(0, 90) + "...";
|
||
}
|
||
return item.summary;
|
||
},
|
||
changeIsAll(item) {
|
||
item.isAll=!item.isAll;
|
||
},
|
||
closeSearch() {
|
||
this.showAll = !this.showAll;
|
||
var searchBoxHeght = document.getElementById("searchBox");
|
||
var searchBoxWidth = document.getElementById("searchBox");
|
||
if(searchBoxWidth.clientWidth > 950){
|
||
this.searchwd = false;
|
||
}
|
||
if (this.showAll == false) {
|
||
searchBoxHeght.style.height = 70 + "px";
|
||
} else {
|
||
searchBoxHeght.style.height = "auto";
|
||
}
|
||
|
||
|
||
},
|
||
|
||
getAnkingData(){
|
||
apiCase.usernameList(5).then(res=>{
|
||
if(res.status==200){
|
||
this.ankingList=res.result
|
||
// console.log(res)
|
||
}
|
||
})
|
||
},
|
||
getPopularity(){
|
||
apiCase.queryPraises(5).then(res=>{
|
||
if(res.status==200){
|
||
this.Popularity=res.result
|
||
// console.log(this.Popularity)
|
||
}
|
||
})
|
||
},
|
||
getPositive(){
|
||
apiCase.queryComments(5).then(res=>{
|
||
if(res.status==200){
|
||
this.Positive=res.result
|
||
console.log(res)
|
||
}
|
||
})
|
||
},
|
||
|
||
getdomain(){
|
||
let key ='org_domain'
|
||
apiDict.items(key).then(res =>{
|
||
if(res.status==200){
|
||
this.domain = res.result
|
||
}
|
||
})
|
||
},
|
||
getProfess(){
|
||
let key ='major_type'
|
||
apiDict.items(key).then(res =>{
|
||
if(res.status==200){
|
||
this.Profess = res.result
|
||
}
|
||
})
|
||
},
|
||
emitInput(val) {
|
||
this.keyWord=val;
|
||
this.isSeach =true;
|
||
this.queryCondition.pageIndex = 1
|
||
this.search()
|
||
},
|
||
searchData(num) {
|
||
this.queryCondition.orderField = num;
|
||
this.getCaseData();
|
||
},
|
||
handleScroll() {
|
||
let innerHeight = document.querySelector('#case-list-content').clientHeight
|
||
let outerHeight = document.documentElement.clientHeight
|
||
let scrollTop = document.documentElement.scrollTop
|
||
if ((outerHeight + scrollTop + 350) >= innerHeight) {
|
||
if(this.moreState == 1 && this.course.pageIndex < 4) {
|
||
this.loadMore();
|
||
}
|
||
}
|
||
if(scrollTop > 630) {
|
||
document.querySelector('#fixd-box').style.cssText = "position: fixed;top: -550px;width:245.5px";
|
||
} else {
|
||
document.querySelector('#fixd-box').style.cssText = "position: static";
|
||
}
|
||
},
|
||
useHotword(item){
|
||
this.keyWord=item.keyword;
|
||
this.search();
|
||
},
|
||
searchterm(){
|
||
apiSearchterm.list(5,3).then(res => {
|
||
if (res.status === 200) {
|
||
this.searchRecords = res.result;
|
||
}
|
||
});
|
||
},
|
||
loadMore() {
|
||
this.queryCondition.pageIndex += 1;
|
||
this.getCaseData();
|
||
},
|
||
protocolCheck(obj){
|
||
this.protocolConfirmButton = !obj;
|
||
},
|
||
protocolConfirm(){
|
||
this.protocolDialogVisible = false;
|
||
this.$store.dispatch('portal/SetReadProtocol', true);
|
||
},
|
||
handleSizeChange(item){
|
||
this.queryCondition.pageSize=item;
|
||
},
|
||
handleCurrentChange(item){
|
||
this.queryCondition.pageIndex=item;
|
||
},
|
||
search(){
|
||
apiSearchterm.save({keyword:this.keyWord,type:3});
|
||
if(!this.isFind){
|
||
this.isFind = true;
|
||
}
|
||
this.queryCondition.pageIndex = 1;
|
||
if(this.keyWord!=this.queryCondition.keyWord){
|
||
this.queryCondition.keyWord=this.keyWord
|
||
}
|
||
this.getCaseData();
|
||
},
|
||
async getCaseData(){
|
||
this.getTags();
|
||
let isTopList = [];
|
||
let caseList = [];
|
||
if(this.queryCondition.pageIndex == 1) {
|
||
this.caseList.list =[];
|
||
}
|
||
this.moreState = 2;
|
||
await apiCase.queryList(this.queryCondition).then(res=>{
|
||
if(res.status==200){
|
||
if(res.result.list.length>0){
|
||
this.isSeach =false;
|
||
res.result.list.forEach(item=>{
|
||
item.isAll=false;
|
||
item.authorInfo={aid:'',name:'',orgInfo:'',avatar:'',sex:null};
|
||
if(item.isTop) {
|
||
isTopList.push(item);
|
||
} else {
|
||
caseList.push(item)
|
||
}
|
||
})
|
||
|
||
this.caseList.list.push(...isTopList,...caseList);
|
||
this.caseList.count=res.result.count;
|
||
this.getCaseUserData(res.result.list)
|
||
this.moreState = 1;
|
||
if(res.result.count === res.result.list.length) {
|
||
this.moreState = 3;
|
||
}
|
||
} else {
|
||
this.moreState = 3;
|
||
|
||
}
|
||
}else{
|
||
this.$message.error(res.message);
|
||
}
|
||
}).catch(err=>{
|
||
console.log(err)
|
||
})
|
||
},
|
||
getTags() {
|
||
this.searchTags = [];
|
||
let caseData = deepClone(this.queryCondition);
|
||
for (let i in caseData) {
|
||
if (
|
||
caseData[i] !== "" &&
|
||
i !== "pageIndex" &&
|
||
i !== "pageSize" &&
|
||
i !== "orderField" &&
|
||
i !== "orderAsc" &&
|
||
caseData[i] !== null &&
|
||
caseData[i] !== undefined
|
||
) {
|
||
if(caseData[i] !== '0') {
|
||
this.searchTags.push(
|
||
caseData[i]
|
||
);
|
||
}
|
||
}
|
||
}
|
||
},
|
||
tagsClose(tag, index) {
|
||
for (let i in this.queryCondition) {
|
||
if (tag === this.queryCondition[i]) {
|
||
if(i == 'majorType'){
|
||
this.queryCondition.majorType = null;
|
||
}
|
||
if(i == 'orgDomain'){
|
||
this.queryCondition.orgDomain = null;
|
||
}
|
||
this.queryCondition[i] = "";
|
||
|
||
this.searchTags.splice(index, 1);
|
||
this.getCaseData();
|
||
}
|
||
}
|
||
},
|
||
getCaseUserData(caseList){
|
||
let ids=caseList.map((item,index)=>{
|
||
return item.sysCreateAid
|
||
})
|
||
const noReapetIds=[...new Set(ids)]
|
||
apiUser.getByIds(ids).then(res=>{
|
||
if(res.status==200){
|
||
caseList.forEach((item,index)=>{
|
||
res.result.some(author=>{
|
||
if(author.aid==item.sysCreateAid){
|
||
item.authorInfo=author;
|
||
return true;
|
||
}else{
|
||
return false;
|
||
}
|
||
})
|
||
});
|
||
}else{
|
||
this.$message.error(res.message);
|
||
}
|
||
});
|
||
},
|
||
getAnkingData(){
|
||
apiCase.usernameList(10).then(res=>{
|
||
if(res.status==200){
|
||
this.ankingList=res.result
|
||
}
|
||
})
|
||
|
||
|
||
},
|
||
getPopularity(){
|
||
apiCase.queryPraises(5).then(res=>{
|
||
if(res.status==200){
|
||
this.Popularity=res.result
|
||
|
||
}
|
||
})
|
||
},
|
||
getPositive(){
|
||
apiCase.queryComments(5).then(res=>{
|
||
if(res.status==200){
|
||
this.Positive=res.result
|
||
|
||
}
|
||
})
|
||
},
|
||
|
||
jumpRouter(item){
|
||
this.$router.push(`/case/detail?id=${item.id}`);
|
||
|
||
}
|
||
}
|
||
};
|
||
</script>
|
||
|
||
<style scoped lang="scss">
|
||
.searBox{
|
||
text-align: center;
|
||
margin: 0px auto 0 auto;
|
||
}
|
||
#searchBox {
|
||
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;
|
||
overflow: hidden;
|
||
text-overflow:ellipsis;
|
||
-webkit-box-orient: vertical;
|
||
-webkit-line-clamp: 1;
|
||
box-sizing: border-box;
|
||
word-break:break-all;
|
||
}
|
||
::v-deep .el-card__body{
|
||
padding: 0;
|
||
}
|
||
::v-deep .bacolor:nth-child(odd){
|
||
background-color: #f6f6f6;
|
||
padding: 0 5px;
|
||
}
|
||
::v-deep .bacolor:nth-child(even){
|
||
background-color: #fff;
|
||
padding: 0 5px;
|
||
|
||
}
|
||
::v-deep .el-card{
|
||
border: none;
|
||
border-radius: 0px;
|
||
border: 1px solid #EBEEF5;
|
||
}
|
||
::v-deep .el-radio-button__inner, .el-radio-group {
|
||
vertical-align: top;
|
||
}
|
||
::v-deep .el-radio-button__inner{
|
||
background: none;
|
||
}
|
||
::v-deep .el-radio-button:first-child .el-radio-button__inner {
|
||
border-left: none;
|
||
|
||
// border-radius: 4px 0 0 4px;
|
||
//box-shadow: none!important;
|
||
}
|
||
|
||
.item-title{
|
||
margin: 10px 10px 10px 0;
|
||
//font-size: 14px;
|
||
font-weight: 600;
|
||
color: #333333;
|
||
// line-height: 20px;
|
||
}
|
||
.item-line{
|
||
padding-left: 2px;
|
||
height: 20px;
|
||
|
||
background: #ddd;
|
||
}
|
||
|
||
.portal-content{
|
||
display: flex;
|
||
justify-content: space-between;
|
||
// .item-title{
|
||
// margin-bottom: 5px;
|
||
// line-height: 36px;
|
||
// font-size: 14px;
|
||
// font-weight: 600;
|
||
// color: #333333;
|
||
// }
|
||
}
|
||
.searchbar {
|
||
background-color: #ffffff;
|
||
// border: 1px solid #f3f3f3;
|
||
// width: 1200px;
|
||
// padding: 5px 20px;
|
||
// margin-bottom: 10px;
|
||
}
|
||
|
||
.fixed {
|
||
position: fixed;
|
||
top: 0px;
|
||
background-color: #f0f0f0;
|
||
z-index: 999;
|
||
height: 50px;
|
||
}
|
||
.protocol {
|
||
.protocol-title {
|
||
font-size: 20px;
|
||
font-weight: 600;
|
||
text-align: center;
|
||
margin-bottom: 25px;
|
||
}
|
||
.protocol-content {
|
||
font-size: 14px;
|
||
line-height: 25px;
|
||
}
|
||
}
|
||
.left-div {
|
||
.quyer-tag {
|
||
// margin-left: 10px;
|
||
.order-class {
|
||
color: #666666;
|
||
width: 80px;
|
||
// text-align: left;
|
||
border: 1px solid #dfdfdf;
|
||
// padding-left: 5px;
|
||
// padding-top: 5px;
|
||
// padding-bottom: 5px;
|
||
// padding: 8px 20px;
|
||
.el-icon--right {
|
||
margin-left: 0;
|
||
}
|
||
}
|
||
.actice {
|
||
background: #3e7fff;
|
||
color: #fff;
|
||
}
|
||
}
|
||
/* 分页div */
|
||
.pagination-div {
|
||
text-align: center;
|
||
padding: 10px 0;
|
||
.pag-text{
|
||
|
||
}
|
||
}
|
||
.order-div {
|
||
padding: 12px 15px;
|
||
background-color: #fff;
|
||
// margin-bottom: ;
|
||
}
|
||
.data-content {
|
||
background-color: #fff;
|
||
padding: 5px 10px;
|
||
.case-list:last-child {
|
||
border-bottom: none;
|
||
}
|
||
|
||
.case-list {
|
||
margin: 5px 0;
|
||
padding-bottom: 10px;
|
||
padding-left: 10px;
|
||
padding-right: 10px;
|
||
border-bottom: 1px solid #dfdfdf;
|
||
}
|
||
.case-image {
|
||
width: 230px;
|
||
height: 170px;
|
||
float: left;
|
||
border: 1px solid #eee;
|
||
}
|
||
.case-info {
|
||
.case-info {
|
||
.case-info-title {
|
||
font-size: 16px;
|
||
font-weight: 600;
|
||
height: 30px;
|
||
.case-info-date {
|
||
height: 30px;
|
||
float: right;
|
||
font-weight: 200;
|
||
color: #999999;
|
||
i {
|
||
margin-right: 5px;
|
||
}
|
||
}
|
||
}
|
||
.case-info-summary {
|
||
height: 60px;
|
||
|
||
line-height: 30px;
|
||
font-size: 15px;
|
||
color: #444444;
|
||
display: -webkit-box;
|
||
overflow: hidden;
|
||
-webkit-box-orient: vertical;
|
||
-webkit-line-clamp: 2;
|
||
}
|
||
.case-info-tools {
|
||
height: 30px;
|
||
.case-info-tools-auth {
|
||
float: left;
|
||
font-size: 13px;
|
||
color: #999999;
|
||
img {
|
||
margin-right: 10px;
|
||
width: 30px;
|
||
border: 1px solid #eee;
|
||
border-radius: 50%;
|
||
vertical-align: middle;
|
||
}
|
||
}
|
||
.case-info-tools-btns {
|
||
float: right;
|
||
.case-info-tools-btn {
|
||
margin: 0 0 0 15px;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
}
|
||
}
|
||
.search-div {
|
||
background: #fff;
|
||
padding: 10px 25px;
|
||
.search-keyword {
|
||
line-height: 30px;
|
||
.tip {
|
||
font-size: 12px;
|
||
color: #999999;
|
||
// margin-bottom: 20px;
|
||
}
|
||
}
|
||
.search-item {
|
||
// padding: 10px 0;
|
||
}
|
||
// .search-item:not(:last-child) {
|
||
// // border-bottom: 1px solid #dfdfdf;
|
||
// }
|
||
}
|
||
.search-div-collapse {
|
||
display: block;
|
||
}
|
||
.search-div-expand {
|
||
display: none;
|
||
}
|
||
.search-div-more {
|
||
text-align: center;
|
||
}
|
||
}
|
||
|
||
|
||
.ranking-card {
|
||
|
||
|
||
.center{
|
||
text-align: center;
|
||
}
|
||
}
|
||
.right-box {
|
||
line-height: 25px;
|
||
|
||
.ranking-title {
|
||
}
|
||
.aligh-title{
|
||
font-size: 14px;
|
||
color: #333333;
|
||
}
|
||
.ranking-data {
|
||
margin: 10px 0;
|
||
color: #999999;
|
||
}
|
||
}
|
||
</style>
|