Files
learning-system-portal/src/views/portal/case/Index.vue
2024-01-11 16:33:03 +08:00

2193 lines
64 KiB
Vue
Raw Blame History

This file contains ambiguous Unicode characters
This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.
<template>
<div id="case-list-content">
<div style="margin-bottom:30px" class="case-banner">
<portal-header current="case" textColor="#fff" @emitInput="emitInput" @showClass="showClass"></portal-header>
</div>
<div class="xcontent2">
<!-- 新增的案例分类 -->
<!-- <div class="xcontent2-minor" style="margin-right:36px;">
<div class="course-title-style">
<div class="imgTilte">
<div>案例分类</div>
<div>COURSE</div>
</div>
</div>
<div class="course-list">
<div class="course-one" v-for="one in treeList" :key="one.id" @click.stop="handleOptionClick(one, 1, treeList)">
<div class="course-one-content">{{ one.name }}</div>
<div class="course-two" v-for="(twoList, twoIndex) in one.children" :key="twoList.id"
@click.stop="handleOptionClick(twoList, 2, one.children)"
:class="{ courseTwoActive: twoList.id == twoId || twoList.checked }" @mouseleave.stop="leaveIndex"
@mouseenter.stop="changeIndex(twoList.id)"
>
<el-popover class="popover" popper-class='coursePopperClass' placement="right-start" width="536"
:disabled="!twoList.children.length" :open-delay="0" :close-delay="0" trigger="hover" :visible-arrow="false"
@hide="leaveIndex" @show="changeIndex(twoList.id)" transition="none">
<div class="course-two-content" slot="reference">{{ twoList.name }}</div>
<div class="course-three-box">
<div class="course-three-box-title">
{{ twoList.name }}
</div>
<div style="padding: 0 40px;display: flex;flex-wrap: wrap;">
<div :class="threeList.checked ? 'threeActive' : ''" v-for="threeList in twoList.children"
:key="threeList.id" @click.stop="handleOptionClick(threeList, 3, twoList.children)"
class="course-three">
<span>{{ threeList.name }}</span>
</div>
</div>
</div>
</el-popover>
</div>
</div>
</div>
</div> -->
<div class="xcontent2-main" style="margin-right: 30px;">
<div class="left-div">
<div class="search-div">
<div class="searchbar" v-if="tagList.length > 0">
<div style="line-height: 30px;">
<span class="item-title">搜索条件</span>
<el-tag closable v-for="(tag, tagIdx) in tagList" :key="tagIdx" @close="tagsClose(tag, tagIdx)">{{
tag.name
}}</el-tag>
</div>
</div>
<div class="search-item">
<div style="margin-top:10px; display: flex;margin-bottom:24px;">
<div style="flex:1;">
<div class="field">
<div style="line-height: 25px;padding-right: 10px;padding-left: 0;">
<!-- <img class="orgaicon" :src="`${webBaseUrl}/images/orgaimg.png`" alt=""> -->
<span class="item-title">组织领域</span>
<span class="item-line"></span>
</div>
<div style="padding:0;" :class="oneTagAll ? 'fieldactive' : ''" @click="domainall(1)">全部</div>
<div class="fieldbox">
<div :class="item.fielclass ? 'fieldactive' : ''" @click="fieldswich(item, 1)"
v-for="(item, idx) in domain" :key="'a' + idx">
{{ item.name }}
</div>
</div>
</div>
<!-- <el-checkbox-group v-model="queryCondition.orgDomain" size="mini" @change="search()">
<el-checkbox-button :label="null">全部</el-checkbox-button>
<el-checkbox-button v-for="item in domain" :key="item.code" :label="item.code"> {{ item.name}}</el-checkbox-button>
</el-checkbox-group> -->
<!-- 二级分类 -->
<!-- <div class="field" v-if="twoList.length > 0" style="margin-top: 24px;">
<div style="line-height: 25px;padding-right: 10px;padding-left: 0;">
<span class="item-title">二级分类</span>
<span class="item-line"></span>
</div>
<div style="padding:0;" :class="twoTagAll ? 'fieldactive' : ''" @click="domainall(2)">全部</div>
<div class="fieldbox">
<div :class="item.fielclass ? 'fieldactive' : ''" @click="fieldswich(item, 2)"
v-for="(item, idx) in twoList" :key="'b' + idx">{{ item.name }}</div>
</div>
</div> -->
<!-- 三级分类 -->
<!-- <div class="field" v-if="threeList.length > 0" style="margin-top: 24px;">
<div style="line-height: 25px;padding-right: 10px;padding-left: 0;">
<span class="item-title">三级分类</span>
<span class="item-line"></span>
</div>
<div style="padding:0;" :class="threeTagAll ? 'fieldactive' : ''" @click="domainall(3)">全部</div>
<div class="fieldbox">
<div :class="item.fielclass ? 'fieldactive' : ''" @click="fieldswich(item, 3)"
v-for="(item, idx) in threeList" :key="'c' + idx">{{ item.name }}</div>
</div>
</div> -->
</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;white-space: nowrap;">
<!-- <img class="orgaicon" :src="`${webBaseUrl}/images/specimg.png`" alt=""> -->
<span class="item-title">专业分类</span>
<span class="item-line"></span>
</div>
<div style="flex:1;" id="searchBox">
<div class="field">
<div style="padding:0;" :class="speciAll ? 'fieldactive' : ''" @click="majorall()">全部</div>
<div class="fieldbox">
<div :class="item.fielclass ? 'fieldactive' : ''" @click="fieldmajor(item)"
v-for="(item, idx) in speciData" :key="'d' + idx">{{ item.name }}({{ item.explanation }})</div>
</div>
</div>
<!-- <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>
</div>
<div style="height:30px;background-color:#f6f7fc;"></div>
<div class="order-div" style="border-bottom:none">
<span class="quyer-tag">
<el-button type="text" class="order-class" @click="searchexcellent('excellent')"
:class="{ actice: queryCondition.type == 'excellent' }">最佳案例</el-button>
<el-button type="text" class="order-class" @click="searchexcellent('recommend')"
:class="{ actice: queryCondition.type == 'recommend' }">推荐案例</el-button>
<el-button type="text" class="order-class" @click="searchexcellent('hot')"
:class="{ actice: queryCondition.type == 'hot' }">最热</el-button>
<el-button type="text" class="order-class" @click="searchexcellent('new')"
:class="{ actice: queryCondition.type == 'new' }">最新</el-button>
</span>
<div style="flex: 1; display: flex; justify-content: flex-end;align-items: center;">
<div style="margin-right: 20px;color: #6E7B84;font-size: 14px;">当前已检索 <span style="color:#387DF7;">
{{ caseList.count }}</span> 条数据</div>
<el-select v-model="years" multiple collapse-tags
style="margin-left: 20px; width: 147px; border-radius:20px !important;" placeholder="全部年份">
<el-option v-for="item in caseYears" :key="item.value" :label="item.label" :value="item.value">
</el-option>
</el-select>
</div>
</div>
<div class="data-content">
<div 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 @click="toCaseDetail(item.id, item.refId)" style="cursor: pointer;">
<div class="case-info-title">
<div class="case-titdiv">
<div class="case-tittext">
<span class="title-line-ellipsis" v-html="item.title"></span>
</div>
<div class="case-activeText">
<span v-if="item.breCommend" class="comWords"
style="background-color:rgba(232, 139, 72);"></span>
<span v-if="item.excellent" class="comWords" style="background-color:red;">最佳</span>
</div>
<div class="case-info-date portal-time">
<i class="el-icon-time"></i>
<time-show :time="item.sysCreateTime"></time-show>
</div>
</div>
</div>
</div>
<!-- </router-link> -->
<div style="height:58px;padding-top:14px ">
<author :avatar="item.authorInfo.avatar" :name="item.authorInfo.name" :info="item.authorInfo.orgInfo"
:sex="item.authorInfo.sex" :aid="item.authorInfo.aid">
<template>
<div v-if="item.breCommend"
style="padding-top: 6px;flex: 1;display: flex;justify-content: flex-end;color: #999;font-size: 12px;">
<span>{{ item.recommendOrgName }}推荐</span>
</div>
</template>
</author>
</div>
<!-- <router-link :to="'/case/detail?id=' + item.id"> -->
<div @click="toCaseDetail(item.id, item.refId)" style="cursor: pointer;">
<div class="keyword-text clearfix">
<div style="color:#2974D6;font-weight: 450;" v-if="item.orgDomainParent">
{{ orgDomainTranslate(item.orgDomainParent) }}
</div>
<!-- <div style="color:#2974D6;font-weight: 450;" v-if="item.orgDomain">{{ orgDomainTranslate(item.orgDomain) }}</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>
</div>
<!-- </router-link> -->
<div class="case-info-summary two-line-ellipsis" @click="toCaseDetail(item.id, item.refId)">
{{ item.summary }}
<!-- <router-link :to="'/case/detail?id='+item.id"> -->
<!-- {{displayAll(item)}} -->
<!-- </router-link> -->
<!-- <span style="color:#588afc;cursor:pointer;" v-if="item.summary.length>150" @click.stop="changeIsAll(item)"> -->
<!-- {{item.isAll?'收起':'展开'}} -->
<!-- </span> -->
</div>
<div style="display: flex;justify-content: flex-end;">
<div style="margin:8px 0;">
<interactBar :type="3" :data="item" :comments="false" :shares="true"></interactBar>
</div>
</div>
</div>
</div>
</div>
<div v-if="caseList.showPagCount > queryCondition.pageSize">
<pagination :size="queryCondition.pageSize" :total="caseList.count" :page="queryCondition.pageIndex"
layout="total, prev, pager, next, jumper" @change-page="currentChange"></pagination>
</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">没有更多数据了</span> -->
<span class="notcoures" v-if="caseList.list.length == 0">
<img :src="`${webBaseUrl}/images/nocase.png`" alt="">
<h5>暂无案例请优先学习其它案例吧</h5>
</span>
<!-- <span class="pag-text-msg" v-else-if="isSeach">没有查询到相关内容</span> -->
</div>
<div v-if="isSeach" style="height:382px">
</div>
</div>
</div>
<!-- 打开排行榜 -->
<div class="xcontent2-minor">
<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;">
<router-link :to="'/case/detail?id=' + item.id">
<span class="portal-right-text blue-one" v-if="index == 0">
<img :src="`${webBaseUrl}/images/listblue01.png`" alt="">
</span>
<span class="portal-right-text blue-tow" v-if="index == 1">
<img :src="`${webBaseUrl}/images/listblue02.png`" alt="">
</span>
<span class="portal-right-text blue-three" v-if="index == 2">
<img :src="`${webBaseUrl}/images/listblue03.png`" alt="">
</span>
<span class="portal-right-text" v-if="index == 3">
<img :src="`${webBaseUrl}/images/list04.png`" alt="">
</span>
<span class="portal-right-text" v-if="index == 4">
<img :src="`${webBaseUrl}/images/list05.png`" alt="">
</span>
<span class="portal-title-desc" style="font-size: 14px;">{{ item.title }}</span>
</router-link>
</li>
</ul>
</div>
<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;">
<router-link :to="'/case/detail?id=' + item.id">
<span class="portal-right-text orange-one" v-if="index == 0">
<img :src="`${webBaseUrl}/images/list-01.png`" alt="">
</span>
<span class="portal-right-text orange-tow" v-if="index == 1">
<img :src="`${webBaseUrl}/images/list02.png`" alt="">
</span>
<span class="portal-right-text orange-three" v-if="index == 2">
<img :src="`${webBaseUrl}/images/list03.png`" alt="">
</span>
<span class="portal-right-text" v-if="index == 3">
<img :src="`${webBaseUrl}/images/list04.png`" alt="">
</span>
<span class="portal-right-text" v-if="index == 4">
<img :src="`${webBaseUrl}/images/list05.png`" alt="">
</span>
<span class="portal-title-desc" style="font-size: 14px;">{{ item.title }}</span>
</router-link>
</li>
</ul>
</div>
</div>
</div>
<div style="height: 50px;"></div>
<el-dialog class="protocol" :close-on-click-modal="false" :visible.sync="protocolDialogVisible" width="30%"
:show-close="false">
<div class="protocol-title">案例查阅及使用用户协议</div>
<div class="protocol-content">
&emsp;&emsp;本专区内案例为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>
<!-- U课堂弹窗 -->
<div class="u-class">
<el-dialog :visible.sync="showUClass" width="833px">
<div class="ClassBoxContent">
<img src="../../../assets/images/u_class.png" alt="" class="img" />
<div class="ContentBox">
<div class="left">
<div class="title">U选小课堂</div>
<div class="jy">项目简介</div>
<div class="msg">
于22年首推是一个面向全集团员工开放的职业通识类数字化培养项目旨在帮助员工开阔眼界加厚职业素养在原有外部精选通用力课程基础上2023年引入创新专区以新鲜的话题新颖的形式带给全员丰富有趣的学习体验
</div>
<div class="bottom"></div>
</div>
<div class="right">
<div class="tyl" @click="tylClick">
<div class="tyl_title">
<img src="../../../assets/images/dc.png" alt="" class="tyl_title_img" />
<span class="tyl_title_msg">通用力专区</span>
</div>
<div class="tyl_jy">加厚职业素养轻学习快成长</div>
<div class="tyl_msg">
内容涵盖领导力市场营销职场技能财务知识法律常识人力资源经典国学人文社科
</div>
</div>
<div class="cyl" @click="cylClick">
<div class="tyl_title">
<img src="../../../assets/images/cyl.png" alt="" class="tyl_title_img" />
<span class="tyl_title_msg">创新力专区</span>
</div>
<div class="tyl_jy">激发创新潜力拓视野促思考</div>
<div class="tyl_msg">
内容涵盖组合创新单点破局错位竞争分形创新第二曲线数字化元宇宙
</div>
</div>
</div>
</div>
</div>
</el-dialog>
</div>
</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";
import apiType from "@/api/modules/type.js";
import { cutFullName } from "@/utils/tools.js";
import apiPlace from "@/api/phase2/place.js"
export default {
name: "index",
components: {
portalHeader,
portalFooter,
portalFloatTools,
interactBar,
timeShow,
author
},
data() {
return {
twoId:'',
treeList:[],
caseType:process.env.VUE_APP_CASE_TYPE,//类型
caseYears:[],
refId: '',//消息跳转案例的id
selectList: [],//点击选中的list
twoList: [], //二级分类{type:12}
threeList: [],//三级分类{type:13}
showUClass: false,
fileBaseUrl: process.env.VUE_APP_FILE_BASE_URL,
resonimg: {},
domain: [],//组织领域
domainAll: [],//全部的组织领域
speciData: [],//专业分类
moreState: 1, // 1 加载更多 2 加载中 3无数据
isSeach: false,
searchwd: false,
showAll: true, //是否展开全部
initHeight: 40,//原始 高度
searchRecords: [],//热门搜索词
caseList: {
count: 0,
list: [],
showPagCount: 0
},
ankingList: [],//排行数据1
Popularity: [],//排行数据2
Positive: [],//排行数据3
protocolDialogVisible: false,
protocolConfirmButton: true,
years: [],
queryCondition: {
pageIndex: 1,
pageSize: 5,
// orderField: "excellent",
majorType: '', //专业分类code
// orderAsc: false,
// isTop: true,
excellent: true,
keyWord: '',
orgDomainDtos: [],
caseType: '',
authorName: '',
notInIds: [],
type: 'excellent',
userId: '',
parent: '',
children: [],
name: '',
years: [],
// 随机
notInIds: [],//重复的id
orderField: "id",
orderAsc: false,//排序
sysType1:'',
sysType2:'',
sysType3:''
},
keyWord: "",
anking: 2,
queryExpand: true, // true更多false收起
category: 0,
type2: 0,
type3: 0,
isFind: false,
fielclassjor: true,
localSessionKey: this.$xpage.constants.localCaseFiltersKey
};
},
watch: {
years() {
this.search(true)
}
},
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;
},
tagList() { //列表属性,用于计算
let list = [];
if (this.keyWord) {
list.push({ type: '0', code: 'keyword', name: this.keyWord, checked: true })
}
this.domain.forEach(one => {
var twoChildChecked = false;//是否有下级
one.list.forEach(two => {
if (two.fielclass) {
twoChildChecked = true;
}
var threeChildChecked = false;
two.list.forEach(three => {
if (three.fielclass) {
list.push(three);
threeChildChecked = true;
}
});
if (two.fielclass && !threeChildChecked) {
list.push(two);
}
});
if (one.fielclass && !twoChildChecked) {
list.push(one);
}
})
this.speciData.forEach(item => {
if (item.fielclass) {
list.push(item);
}
});
this.treeList.forEach(one => {
var twoChildChecked = false;//是否有下级
one.children && one.children.forEach(two => {
if (two.checked) {
twoChildChecked = true;
}
var threeChildChecked = false;
two.children && two.children.forEach(three => {
if (three.checked) {
list.push(three);
threeChildChecked = true;
}
});
if (two.checked && !threeChildChecked) {
list.push(two);
}
});
if (one.checked && !twoChildChecked) {
list.push(one);
}
})
console.log(list,'计算属性');
return list;
},
oneTagAll() {
return !this.domain.some(item => item.fielclass);
},
twoTagAll() {
return !this.twoList.some(item => item.fielclass)
},
threeTagAll() {
return !this.threeList.some(item => item.fielclass);
},
speciAll() {
return !this.speciData.some(item => item.fielclass);
}
},
created() {
(() => {
const allData = {
0: {
orderField: 'id',
orderAsc: false
},
1: {
orderField: 'id',
orderAsc: true
},
2: {
orderField: 'title',
orderAsc: false
},
3: {
orderField: 'title',
orderAsc: true
},
4: {
orderField: 'sysCreateTime',
orderAsc: false
},
5: {
orderField: 'sysCreateTime',
orderAsc: true
},
6: {
orderField: 'authorId',
orderAsc: false
},
7: {
orderField: 'authorId',
orderAsc: true
},
8: {
orderField: 'authorName',
orderAsc: false
},
9: {
orderField: 'authorName',
orderAsc: true
},
}
const allArr = Object.keys(allData)
let recordsArr = JSON.parse(sessionStorage.getItem("recordsArr")) || [];
let difference = allArr.filter(element => !recordsArr.includes(element));
if (recordsArr.length === allArr.length) {
difference = [...allArr]
recordsArr = []
}
let random = Math.floor(Math.random() * difference.length)
for (let i = 0; i < difference.length; i++) {
if (i == random) {
recordsArr.push(difference[i])
break;
}
}
sessionStorage.setItem("recordsArr", JSON.stringify(recordsArr))
const dataList = (data) => {
this.queryCondition.orderField = data.orderField
this.queryCondition.orderAsc = data.orderAsc
}
dataList(allData[random])
})()
},
mounted() {
let $this = this;
// if(this.speciData.length==0){
// this.specialized();
// }
// if(this.domain.length==0){
// this.getdomain();
// }
let isBack = false;
if (window.history && window.history.pushState) {
history.pushState(null, null, document.URL); //这里有没有都无所谓,最好是有以防万一
isBack = true;
}
console.log(isBack, 'isBack');
// Promise.all([apiType.items("org_domain"), apiCase.majorTypes()]).then(rs => {
// 90是测试环境155是生产环境
console.log(this.caseType);
Promise.all([apiType.treeList(1,Number(this.caseType ?? 155),1), apiCase.majorTypes()]).then(rs => {
if (rs[0].code == 200) {
const {records} = rs[0].data
records.forEach(item => {
item.fielclass = false;
item.type = 'org_domain';
item.list = item.children ? item.children : []
if (Array.isArray(item.children)) {
item.list.forEach(sub => {
sub.list = sub.children ? sub.children : []
sub.fielclass = false
if (Array.isArray(sub.children)) {
sub.list.forEach(three => {
three.list = three.children ? three.children : []
three.fielclass = false
})
}
})
}
})
this.domain = records;
}
if (rs[1].status == 200) {
rs[1].result.forEach(item => {
item.fielclass = false;
item.type = 'major_type';
})
this.speciData = rs[1].result;
}
this.loadLocalFilters();
this.$nextTick(function () {
$this.initHeight = document.getElementById("searchBox").offsetHeight;
$this.closeSearch();
});
this.search();
});
if (!this.portalCase.readProtocol) {
this.protocolDialogVisible = true;
}
this.keyWord = this.$route.query.keyword;
if (this.keyWord != "") {
this.isSeach = true;
}
// 从消息多个案例跳转到本页面
this.refId = this.$route.query.recommendId;
if (this.refId) {
this.queryCondition.type = 'recommend'
}
this.loadTypeData();//加载分类
this.getAnkingData();
this.searchterm();
//打开排行榜下边的两个
this.getPopularity();
this.getPositive();
this.couresreso();
// window.addEventListener("scroll", this.handleScroll);
// 获取年
this.getYears();
},
beforeDestroy() {
// window.removeEventListener("scroll", this.handleScroll);
console.log('销毁了');
},
methods: {
handleOptionClick(treeItem){
this.treeList.forEach(one => {
one.checked = false;
if (one.id == treeItem.id) {
one.checked = true;
this.queryCondition.sysType2 = ''
this.queryCondition.sysType3 = ''
this.queryCondition.sysType1 = one.id
}
one.children.forEach(two => {
two.checked = false;
if (two.id == treeItem.id) {
two.checked = true
this.queryCondition.sysType1 = ''
this.queryCondition.sysType3 = ''
this.queryCondition.sysType2 = two.id
}
two.children.forEach(three => {
three.checked = false;
if (three.id == treeItem.id) {
three.checked = true
this.queryCondition.sysType1 = ''
this.queryCondition.sysType2 = ''
this.queryCondition.sysType3 = three.id
}
})
})
})
this.getCaseData()
},
// 移入
changeIndex(twoId) {
this.twoId = twoId
},
// 移除
leaveIndex() {
this.twoId = ''
},
// 加载分类
async loadTypeData() {
try {
const { result, status } = await apiType.tree(1);
if (status === 200) {
result.forEach(one => {
one.checked = false;
if(!one.children) one.children = []
one.children && one.children.forEach(two => {
two.checked = false;
if(!two.children) two.children = []
two.children && two.children.forEach(three => {
three.checked = false;
if(!three.children) three.children = []
})
})
})
this.treeList = result
}
} catch (error) {
console.log(error);
}
},
getYears() {
apiCase.caseYears().then(res => {
if (res.status == 200) {
const { result } = res;
console.log(result);
this.caseYears = result.map(year => ({
value: year,
label: year,
}))
}
})
},
// 查看率的时间
toCaseDetail(id, refId) {
if (refId) {
apiCase.startReadTimer(refId)
}
this.$router.push({ path: '/case/detail', query: { id } });
},
tylClick() {
window.open("https://m.qingxuetang.com/x/?appId=qxtcorp306130");
},
cylClick() {
window.open("https://u.boe.com/pc/course?keyword=创新力专区");
},
showClass(flag) {
if (flag) {
this.showUClass = flag;
}
},
saveLocalFilters() {
let typeCodeList = [];
this.tagList.forEach(item => {
typeCodeList.push({
type: item.type,
code: item.code,
name: item.name
})
});
let typeCodeString = JSON.stringify(typeCodeList);
sessionStorage.setItem(this.localSessionKey, typeCodeString);
},
loadLocalFilters(t) {
let hasData = sessionStorage.getItem(this.localSessionKey);
if (hasData) {
let typeCodeList = JSON.parse(hasData);
typeCodeList.forEach(item => {
if (item.type == '0') {
this.keyWord = item.name;
} else if (item.type == 'major_type') {
this.speciData.some(m => {
if (m.code == item.code) {
m.fielclass = true;
return true;
}
return false;
})
} else if (item.type == 'org_domain') {
this.domain.some(m => {
if (m.code == item.code) {
m.fielclass = true;
return true;
}
return false;
})
}
})
}
},
majorall() {
this.queryCondition.majorType = '';
this.speciData.forEach(item => {
item.fielclass = false;
})
this.search(true);
},
// 组织领域全部
domainall(type) {
console.log(this.selectList, 999);
if (type == 1) {
// 清空一下所有的
this.domain.forEach(item => {
item.fielclass = false;
item?.list?.forEach(sub => {
sub.fielclass = false;
sub?.list.forEach(subsub => {
subsub.fielclass = false;
})
})
})
this.twoList = [];
this.threeList = [];
} else if (type == 2) {
this.twoList.forEach(item => {
item.fielclass = false;
})
// 清空当前元素的三级的
this.domain.forEach(item => {
if (this.selectList.code == item.code) {
item?.list?.forEach(sub => {
sub?.list?.forEach(three => {
three.fielclass = false
});
})
}
})
this.threeList = [];
} else if (type == 3) {
this.threeList.forEach(item => {
item.fielclass = false;
})
}
this.search(true);
},
fieldmajor(item) {//专业分类
item.fielclass = !item.fielclass;
this.search(true);
},
//组织领域
fieldswich(item, level) {
item.fielclass = !item.fielclass;
// 清空下边的为false的时候
if (!item.fielclass) {
if (Array.isArray(item.list)) {
item.list.forEach(subItem => {
subItem.fielclass = false;
if (subItem.list) {
subItem.list.forEach(sub => {
sub.fielclass = false;
})
}
});
}
if (level == 1) {
this.twoList = [];
this.threeList = [];
}
if (level == 2) {
this.threeList = [];
}
this.search(true);
return;
}
if (level === 1) {
this.twoList = [];
this.threeList = [];
this.twoList.push(...item.list);
// 全选根据他判断清楚三级
this.selectList = item
} else if (level === 2) {
this.threeList = [];
this.threeList.push(...item.list);
} else if (level === 3) {
}
this.search(true);
},
banJump() {
if (this.resonimg.JumpUrl) {
window.open(this.resonimg.JumpUrl);
}
},
couresreso() {
let key = 'case';
apiPlace.detail(key).then(res => {
let lmj = JSON.parse(res.result.content)
this.resonimg = lmj[0]
})
},
specialized() {
let $this = this;
apiCase.majorTypes().then(res => {
if (res.status == 200) {
if (res.status == 200) {
res.result.forEach(item => {
item.fielclass = false;
item.type = 'major_type';
})
}
this.speciData = res.result;
this.loadLocalFilters(1);
//this.Profess=res.result;
this.$nextTick(function () {
$this.initHeight = document.getElementById("searchBox").offsetHeight;
$this.closeSearch();
});
}
})
},
// jumcasedet(item) {
// this.$router.push({ path: '/case/detail', query: { id: item.id } });
// },
// debounce(func, wait) {
// // 非立即执行
// let timeout;
// return function () {
// let context = this;
// let args = arguments;
// if (timeout) clearTimeout(timeout);
// timeout = setTimeout(() => {
// func.apply(context, args);
// }, wait);
// };
// },
//展示全部
displayAll(item) {
if (!item.isAll && item.summary && item.summary.length > 150) {
return item.summary.slice(0, 150) + "...";
}
return item.summary;
},
changeIsAll(item) {
item.isAll = !item.isAll;
},
closeSearch() {
this.showAll = !this.showAll;
var searchBoxHeght = document.getElementById("searchBox");
//console.log(this.initHeight,'this.initHeight');
if (this.initHeight > 100) {
this.searchwd = true;
}
//console.log(het,'het');
if (this.showAll) {
//searchBoxHeght.style.height = "auto";
searchBoxHeght.style.maxHeight = this.initHeight + "px";
} else {
searchBoxHeght.style.maxHeight = 70 + "px";
}
},
getAnkingData() {
apiCase.usernameList(5).then(res => {
if (res.status == 200) {
this.ankingList = res.result;
}
});
},
// 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);
}
});
},
// 无用
async getdomain() {
let key = "org_domain";
await apiDict.items("org_domain").then(res => {
if (res.status == 200) {
res.result.forEach(item => {
item.fielclass = false;
item.type = key;
})
this.domain = res.result;
this.loadLocalFilters(2);
// if(res.result.length > 0) {
// this.orgDomainLevel(res.result)
// }
}
});
},
//删除,不再使用
// getProfess() {
// let key = "major_type";
// apiDict.items(key).then(res => {
// if (res.status == 200) {
// this.Profess = res.result;
// }
// });
// },
// orgDomainLevel(organization) {
// this.orgData = [];
// organization.forEach(item=>{
// this.orgData.push(item);
// if(item.list && item.list != "" && item.list.length > 0){
// item.list.forEach(it =>{
// this.orgData.push(it);
// })
// }
// })
// },
orgDomainTranslate(code) { // 组织领域翻译
if (code == '') {
return
}
//console.log(code,'code')
//console.log(this.domain,'this.domain')
let name = '';
let data = this.domain.find(item => {
return item.code == code;
});
if (data) {
name = data.name;
}
return name;
},
majorTypeTranslate(code) { // 专业分类翻译
let name = '';
let data = this.speciData.find(item => item.code == code);
if (data) {
name = data.name;
}
return name;
},
emitInput(val) {
this.keyWord = val;
this.isSeach = true;
this.search(true);
},
searchexcellent(num) {
if(this.queryCondition.type==num){
this.queryCondition.excellent =false;
this.queryCondition.type = '';
this.search(true)
return
}
this.queryCondition.excellent =false;
this.queryCondition.type = num;
if(num == 'excellent'){
this.queryCondition.excellent =true;
this.queryCondition.type = num;
}
this.search(true);
// this.getCaseData();
},
// searchData(num) {
// // if(num == 1){
// // this.queryCondition.excellent = !this.queryCondition.excellent;
// // this.getCaseData();
// // }
// this.queryCondition.pageIndex = 1;
// this.queryCondition.type = num;
// this.getCaseData();
// },
// 滚动请求
// handleScroll() {
// let innerw = document.querySelector("#fixd-box");
// let innerHeight = document.querySelector("#case-list-content")
// .clientHeight;
// let outerHeight = document.documentElement.clientHeight;
// let outerWidth = innerw.clientWidth;
// let scrollTop = document.documentElement.scrollTop;
// if (outerHeight + scrollTop + 350 >= innerHeight) {
// if (this.moreState == 1) {
// this.debounce(this.loadMore(), 5000);
// }
// }
// if (scrollTop > 630) {
// document.querySelector("#fixd-box").style.cssText =
// "position: fixed;top: -400px;width:" + outerWidth + "px";
// } 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;
// },
getAllFielclass() { //获取全部选中的标签
let newlist = JSON.parse(JSON.stringify(this.domain))
return newlist.filter(one => {
one.list = one.list.filter(two => {
// if (!two.fielclass) {
// one.list = []
// }
two.list = two.list.filter(three => {
// if (!three.fielclass) {
// two.list = []
// }
return three.fielclass;
})
return two.fielclass;
});
return one.fielclass
})
},
// 改变分页
currentChange(val) {
this.caseList.showPagCount = 0
this.queryCondition.pageIndex = val
this.search()
},
// 查询
search(num = false) {
// 记录查询的数据
if (this.keyWord) {
apiSearchterm.save({ keyword: this.keyWord, type: 3 });
}
if (!this.isFind) {
this.isFind = true;
}
if (num) {
this.caseList.showPagCount = 0
this.queryCondition.pageIndex = 1;
}
if (this.keyWord != this.queryCondition.keyWord) {
this.queryCondition.keyWord = this.keyWord;
}
if (this.queryCondition.majorType == 0) {
this.queryCondition.majorType = ''
}
this.getCaseData();
},
async getCaseData() {
this.saveLocalFilters();//存储本地刷新有记录
let majorTypeList = [];
let allFielclass = JSON.parse(JSON.stringify(this.getAllFielclass()));
// 获取树状id
this.queryCondition.orgDomainDtos = allFielclass.map(item => {
item.list = item.list.map(two => {
two.list = two.list.map(three => {
return {
parent: three.code
}
})
return {
parent: two.code,
children: two.list || []
}
})
return {
parent: item.code,
children: item.list || []
}
})
console.log(JSON.stringify(this.queryCondition.orgDomainDtos));
// 专业分类的id
this.tagList.forEach(tag => {
if (tag.type == '0') {
this.queryCondition.keyWord = tag.name;
} else if (tag.type == 'major_type') {
majorTypeList.push(tag.code);
}
});
this.queryCondition.majorType = majorTypeList.join(',');
//设置年
this.queryCondition.years = this.years.map(item => parseInt(item))
// 设置最佳案例为true或是false
if (this.queryCondition.type == 'excellent') {
this.queryCondition.excellent = true;
} else {
this.queryCondition.excellent = false;
}
//this.getTags();
// if (this.queryCondition.pageIndex == 1) {
// this.caseList.list = [];
// }
this.moreState = 2;
await apiCase.queryListV2(this.queryCondition).then((res) => {
if (res.status == 200) {
if (res.result.list.length > 0) {
this.isSeach = false;
res.result.list.forEach(item => {
item.majorType = item.majorType ? item.majorType.split(",") : [];
item.isAll = false;
item.authorInfo = {
aid: "",
name: "",
orgInfo: "",
avatar: "",
sex: null
};
});
// this.caseList.list.push(...res.result.list);
this.moreState = 1;
if (res.result.count === res.result.list.length) {
this.moreState = 3;
}
} else {
this.moreState = 3;
}
console.log(res?.result?.list ,'有没有数据');
this.caseList.list = res.result.list
this.getCaseUserData(res.result.list);
// 给所有的赋值
this.caseList.count = res.result.count;
this.caseList.showPagCount = res.result.count;
} else {
this.$message.error(res.message);
}
}).catch(err => {
console.log(err);
});
// 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.majorType = item.majorType.split(",");
// item.isAll = false;
// item.authorInfo = {
// aid: "",
// name: "",
// orgInfo: "",
// avatar: "",
// sex: null
// };
// });
// this.caseList.list.push(...res.result.list);
// 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" &&
// i !== "isTop" &&
// caseData[i] !== null &&
// caseData[i] !== undefined
// ) {
// if (caseData[i] == "0") {
// return;
// }
// if(i == 'majorType'){
// this.searchTags.push({ type:'majorType',value:this.majorTypeTranslate(caseData[i])})
// }
// if(i == 'orgDomain'){
// this.searchTags.push({type:'orgDomain',value:this.orgDomainTranslate(caseData[i])})
// }
// if(i == 'keyWord'){
// this.searchTags.push({type:'keyWord',value:caseData[i]})
// }
// }
// }
// },
// 清楚数组的元素
// clear(tag) {
// if (tag.type == 'org_domain') {
// this.twoList = [];
// this.threeList = [];
// }
// if (tag.type == 1) {
// console.log(111);
// this.threeList = [];
// }
// },
tagsClose(tag, index) {
// 课程分类
if(tag.hasOwnProperty('checked')){
tag.checked = false;
this.queryCondition.sysType1 =''
this.queryCondition.sysType2 =''
this.queryCondition.sysType3 =''
}else{
// 案例分类
tag.fielclass = false;
}
if (tag.type == 0) {
this.keyWord = '';
}
// if(tag.type=='org_domain'){
// console.log(tag)
// this.domain.some((m,idx)=>{
// if(m.code=tag.code){
// m.fielclass=false;
// return true;
// }
// return false;
// })
// }else if(tag.type=='major_type'){
// this.speciData.some((m,idx)=>{
// if(m.code=tag.code){
// m.fielclass=false;
// return true;
// }
// return false;
// })
// }else if(tag.type=='keyWord'){
// this.queryCondition.keyWord = "";
// this.keyWord = "";
// }
//this.fieldData.splice(index,1);
//this.getCaseData();
this.search(true);
},
getCaseUserData(caseList) {
let ids = caseList.map((item, index) => {
return item.authorId;
});
//不能为空
if (!ids.length) return
const noReapetIds = [...new Set(ids)];
apiUser.getByIds(noReapetIds).then(res => {
if (res.status == 200) {
caseList.forEach((item, index) => {
res.result.some(author => {
if (author.aid == item.authorId) {
item.authorInfo = author;
author.orgInfo = cutFullName(author.orgInfo, 1);
return true;
} else {
return false;
}
});
});
} else {
this.$message.error(res.message);
}
});
},
getPopularity() {
apiCase.queryPraises(5).then(res => {
if (res.status == 200) {
this.Popularity = res.result;
if (res.result.length < 5) {
for (let i = 0; i = (5 - res.result.length); i++) {
this.Popularity.push({
authorName: '',
count: 1,
id: '',
title: '',
})
}
}
}
});
},
getPositive() {
apiCase.queryComments(5).then(res => {
if (res.status == 200) {
this.Positive = res.result;
if (res.result.length < 5) {
for (let i = 0; i = (5 - res.result.length); i++) {
this.Positive.push({
authorName: '',
count: 1,
id: '',
title: '',
})
}
}
}
});
},
jumpRouter(item) {
// console.log(item)
this.$router.push(`/case/detail?id=${item.id}`);
}
}
};
</script>
<style scoped lang="scss">
// 课程分类
.course-title-style {
position: relative;
height: 100px;
background-image: url('../../../../public/images/courseBg.png');
background-repeat: no-repeat;
background-size: 100% 100%;
display: flex;
align-items: center;
.imgTilte {
& div:first-child {
padding-left: 40px;
font-size: 30px;
color: #FFFFFF;
}
& div:last-child {
padding-left: 40px;
font-size: 20px;
color: #FFFFFF;
opacity: .5;
font-family: ArialMT !important;
}
}
}
// 三级列表
.course-list {
background-color: #fff;
.course-one {
position: relative;
.course-one-content {
cursor: pointer;
line-height: 38px;
height: 38px;
padding-left: 40px;
background: linear-gradient(270deg, #F0F7FF 0%, #DDEDFF 100%);
}
// 二级的高亮
.courseTwoActive {
color: #387DF7;
border-image: linear-gradient(90deg, rgba(47, 101, 236, 1), rgba(228, 236, 255, 1)) 1 1 !important;
}
.course-two {
position: relative;
border-bottom: 1px solid;
border-image: linear-gradient(333deg, rgba(243, 243, 243, 1), rgba(227, 227, 227, 1)) 1 1;
.course-two-content {
cursor: pointer;
height: 38px;
line-height: 38px;
font-size: 16px;
padding-left: 40px;
}
}
.popover {
background: linear-gradient(180deg, rgba(78, 166, 255, 0.2) 0%, rgba(78, 166, 255, 0) 100%);
}
}
}
.u-class {
::v-deep .el-dialog {
border-radius: 15px;
.el-dialog__headerbtn .el-dialog__close {
color: white;
position: absolute;
z-index: 99;
right: 15px;
}
}
::v-deep .el-dialog__body {
padding: 0px;
}
.ClassBoxContent {
width: 100%;
height: 456px;
// background: red;
border-radius: 15px;
.ContentBox {
width: 100%;
height: 100%;
position: absolute;
z-index: 9;
display: flex;
.left,
.right {
height: calc(100% - 30px);
}
.left {
padding-left: 30px;
width: 48%;
.title {
width: 200px;
height: 59px;
line-height: 59px;
text-align: center;
margin-left: -8px;
font-size: 38px;
color: white;
margin-top: 42.97px;
padding-top: 5px;
text-shadow: 0 6px 3px rgba(96, 85, 243, 0.4);
}
.jy {
color: white;
font-size: 20px;
margin-top: 87.53px;
font-weight: 400;
}
.msg {
margin-top: 5px;
color: rgba(255, 255, 255, 0.85);
width: 326px;
text-align: justify;
line-height: 20px;
}
.bottom {
width: 100px;
height: 1px;
background: rgba(255, 255, 255, 0.85);
margin-top: 40px;
}
}
.right {
// padding-left: 10px;
width: 50%;
.tyl {
cursor: pointer;
width: calc(100% - 20px);
background: rgba(255, 255, 255, 0.95);
box-shadow: 0px 2px 12px 0px rgba(0, 0, 0, 0.1);
border-radius: 4px;
height: 160px;
margin-top: 83px;
.tyl_title {
width: 100%;
padding-left: 20px;
padding-top: 20px;
.tyl_title_img {
width: 18px;
height: 18px;
}
.tyl_title_msg {
font-size: 20px;
margin-left: 10px;
color: #333333;
font-weight: 600;
}
}
.tyl_jy {
margin-top: 6.5px;
font-size: 14px;
font-weight: 600;
padding-left: 20px;
color: #333333;
}
.tyl_msg {
width: 350.36px;
margin-top: 13px;
margin-left: 20px;
font-size: 14px;
color: #666666;
font-weight: 400;
letter-spacing: 0;
text-align: justify;
}
}
.tyl:hover {
border: 0.96px solid rgba(140, 105, 242, 1);
box-shadow: 7px 5px 6px 0px rgba(76, 31, 221, 0.3);
}
.cyl {
cursor: pointer;
width: calc(100% - 20px);
background: rgba(255, 255, 255, 0.95);
box-shadow: 0px 2px 12px 0px rgba(0, 0, 0, 0.1);
border-radius: 4px;
height: 160px;
margin-top: 10px;
.tyl_title {
width: 100%;
padding-left: 20px;
padding-top: 20px;
.tyl_title_img {
width: 18px;
height: 18px;
}
.tyl_title_msg {
font-size: 20px;
margin-left: 10px;
color: #333333;
font-weight: 600;
}
}
.tyl_jy {
margin-top: 6.5px;
font-size: 14px;
font-weight: 600;
padding-left: 20px;
color: #333333;
}
.tyl_msg {
width: 350.36px;
margin-top: 13px;
margin-left: 20px;
font-size: 14px;
color: #666666;
font-weight: 400;
letter-spacing: 0;
text-align: justify;
}
}
.cyl:hover {
border: 0.96px solid rgba(140, 105, 242, 1);
box-shadow: 7px 5px 6px 0px rgba(76, 31, 221, 0.24);
}
}
}
.img {
width: 835px;
margin-left: -1px;
margin-top: -1px;
position: absolute;
top: 0px;
}
}
}
.fieldbox {
display: flex;
white-space: nowrap;
flex-wrap: wrap;
div {
padding: 0 15px;
display: inline-block;
font-size: 14px;
line-height: 25px;
color: #3d3d3d;
font-weight: 500;
}
.fieldactive {
color: #387DF7;
}
}
.field {
display: flex;
white-space: nowrap;
// flex-wrap: wrap;
div {
padding: 0 15px;
// display: inline-block;
font-size: 14px;
line-height: 25px;
color: #3d3d3d;
font-weight: 500;
}
.fieldactive {
color: #387DF7;
}
}
::v-deep .el-checkbox-button.is-checked .el-checkbox-button__inner {
box-shadow: none !important;
}
::v-deep .el-checkbox-button.is-checked .el-checkbox-button__inner {
color: #387df7 !important;
background-color: #fff !important;
}
::v-deep .el-checkbox-button--mini .el-checkbox-button__inner {
font-size: 14px;
}
::v-deep .el-checkbox-button .el-checkbox-button__inner {
border: none !important;
}
.notcoures {
text-align: center;
img {
width: 360px;
height: 226px;
}
h5 {
font-size: 14px;
color: #333333;
font-weight: 400;
}
}
.orgaicon {
width: 22px;
height: 22px;
vertical-align: middle;
margin-right: 8px;
img {
width: 100%;
height: 100%;
}
}
.course-resources {
margin-top: 26px;
img {
width: 100%;
height: 100%;
border-radius: 8px;
}
}
.case-banner {
height: 240px;
background: url('../../../../public/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;
}
::v-deep .el-button {
border-radius: 0px;
}
.case-titdiv {
line-height: 30px;
display: flex;
.case-tittext {
font-size: 18px;
font-weight: 600;
color: #333333;
max-width: 67%;
}
.case-activeText {
line-height: 27.5px;
.comWords {
color: white;
font-size: 12px;
border-radius: 2px;
padding: 2px 4px;
margin-left: 20px;
}
}
}
::v-deep .interact-bar .interact-bar-btns .interact-bar-btn {
margin-left: 0;
margin-right: 20px;
}
.clearfix:after {
content: "020";
display: block;
height: 0;
clear: both;
visibility: hidden;
}
.keyword-text {
div {
padding: 0px 8px;
margin-top: 5px;
float: left;
line-height: 24px;
font-size: 12px;
border-radius: 2px;
margin-right: 8px;
color: #2C68FF;
height: 24px;
background: rgba(44, 104, 255, 0.06);
}
}
.searBox {
text-align: center;
margin: 0px auto 0 auto;
}
#searchBox {
overflow: hidden;
}
::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;
}
::v-deep.item-title {
margin: 15px 10px 10px 0;
font-size: 16px !important;
font-weight: 400;
color: #6B7C85;
line-height: 25px;
}
.item-line {
padding-left: 2px;
height: 20px;
// background: #ddd;
}
.portal-content {
display: flex;
justify-content: space-between;
}
.searchbar {
background-color: #ffffff;
}
.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 {
border: none;
.quyer-tag {
// margin-left: 10px;
.order-class {
padding: 0px 12px;
color: #6E7B84;
line-height: 32px;
border-radius: 0px;
.el-icon--right {
margin-left: 0;
}
}
.actice {
border: 0px;
background: #387DF7;
color: #fff;
font-size: 14px;
border-radius: 4px;
}
}
/* 分页div */
.pagination-div {
text-align: center;
padding: 10px 0;
.pag-text {}
}
.order-div {
padding: 34px 40px 20px 40px;
background-color: #fff;
display: flex;
align-items: center;
// margin-bottom: ;
}
.data-content {
background-color: #fff;
padding: 5px 50px;
::v-deep .interact-bar-btns {
.interact-bar-btn {
text-align: right;
min-width: 78px !important;
margin-right: 0;
}
}
.case-list:last-child {
border-bottom: none;
}
.case-list {
border-bottom: 1px solid rgba(153, 153, 153, .2);
margin-top: 10px;
margin-bottom: 25px;
padding-left: 5px;
padding-right: 5px;
}
.case-image {
width: 230px;
height: 170px;
float: left;
border: 1px solid #eee;
}
.case-info {
.case-info-cont {
.case-info-title {
font-size: 15px;
color: #333;
font-weight: 600;
height: 30px;
.case-info-date {
flex: 1;
text-align: right;
font-weight: normal;
// font-size: 12px;
// height: 30px;
// font-weight: 200;
// color: #8590a6;
i {
margin-right: 5px;
}
}
}
.case-info-summary {
margin-top: 16px;
cursor: pointer;
margin-bottom: 5px;
word-break: break-all;
line-height: 24px;
font-size: 14px;
color: #333330;
font-weight: 400;
}
.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: 30px 40px;
.search-keyword {
line-height: 30px;
.tip {
font-size: 12px;
color: #999999;
// margin-bottom: 20px;
}
}
.search-item {
cursor: pointer;
// margin-bottom: 10px;
// 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;
}
}
</style>