mirror of
https://codeup.aliyun.com/67762337eccfc218f6110e0e/vue/learning-system-portal.git
synced 2025-12-15 22:06:43 +08:00
664 lines
23 KiB
Vue
664 lines
23 KiB
Vue
<template>
|
||
<div id="case-list-content">
|
||
<portal-header current="case" :goSearch="2"></portal-header>
|
||
<div class="portal-content xcontent" style="margin-top: 30px;">
|
||
<el-breadcrumb separator-class="el-icon-arrow-right" class="breadcrumb-nav">
|
||
<el-breadcrumb-item :to="{ path: '/case' }">案例列表</el-breadcrumb-item>
|
||
<el-breadcrumb-item>案例详情</el-breadcrumb-item>
|
||
</el-breadcrumb>
|
||
<div class="xrow" style="display: flex;justify-content: space-between;" >
|
||
<div style="flex: 1;" class="xcol content-div" id="content-div">
|
||
<el-row :gutter="10" v-if="noData">
|
||
<el-col :span="24">
|
||
<el-card :body-style="{ padding: '0px' }" class="detail">
|
||
<div class="title">{{ caseDetail.title }}</div>
|
||
<div class="label">
|
||
<author :onlyAvatar="true" :avatar="authorInfo.avatar" :sex="authorInfo.sex" ></author>
|
||
<span>案主：{{ authorInfo.name }}</span>
|
||
<span>工号：{{ authorInfo.code }}</span>
|
||
<span>组织：{{ authorInfo.orgInfo }}</span>
|
||
<span style="text-align: right;" v-if="caseDetail.sysCreateTime">{{ caseDetail.sysCreateTime.substring(0,10) }}</span>
|
||
</div>
|
||
<!-- <div class="label">
|
||
<span style="margin-left:0px;" v-if="caseDetail.sysCreateTime">{{ caseDetail.sysCreateTime.substring(0,10) }}</span>
|
||
<interactBar :data="caseDetail" :type="3" :comments="false" :shares="true"></interactBar>
|
||
</div> -->
|
||
<!-- <div class="case-summary"><span>{{ caseDetail.summary }}</span></div> -->
|
||
<div class="btn-div clearfix" >
|
||
<div style="color:#2974D6;font-weight: 450;" v-if="caseDetail.orgDomain" class="item">{{ orgDomainTranslate(caseDetail.orgDomain) }}</div>
|
||
<div style="color:#2974D6;font-weight: 450;" class="item" v-if="caseDetail.orgDomain == '' && caseDetail.orgDomainParent">{{ orgDomainTranslate(caseDetail.orgDomainParent) }}</div>
|
||
<div style="color:#2974D6;font-weight: 450;" v-if="caseDetail.majorType" class="item">{{ majorTypeTranslate(caseDetail.majorType) }}</div>
|
||
<div v-if="caseDetail.keyword1" class="item">{{ caseDetail.keyword1 }}</div>
|
||
<div v-if="caseDetail.keyword2" class="item">{{ caseDetail.keyword2 }}</div>
|
||
<div v-if="caseDetail.keyword3" class="item">{{ caseDetail.keyword3 }}</div>
|
||
<div v-if="caseDetail.keyword4" class="item">{{ caseDetail.keyword4 }}</div>
|
||
<div v-if="caseDetail.keyword5" class="item">{{ caseDetail.keyword5 }}</div>
|
||
<!-- <span v-if="caseDetail.caseType" class="item">{{ caseDetail.caseType }}</span>
|
||
<span v-if="caseDetail.caseType1" class="item">{{ caseDetail.caseType1 }}</span>
|
||
<span v-if="caseDetail.caseType2" class="item">{{ caseDetail.caseType2 }}</span> -->
|
||
</div>
|
||
<div class="case-summary"><span>{{ caseDetail.summary }}</span></div>
|
||
<div class="label" style="margin-top:10px">
|
||
<!-- <span style="margin-left:0px;" v-if="caseDetail.sysCreateTime">{{ caseDetail.sysCreateTime.substring(0,10) }}</span> -->
|
||
<interactBar :data="caseDetail" :type="3" :comments="false" :shares="true" :unicom="true"></interactBar>
|
||
</div>
|
||
</el-card>
|
||
<el-card :body-style="{ padding: '0px' }" class="jianjie" id="pdfPreview">
|
||
<!-- <div class="content">
|
||
{{ caseDetail.content }}
|
||
</div> -->
|
||
<pdfPreview v-if="pdfPath" :filePath="pdfPath"></pdfPreview>
|
||
</el-card>
|
||
<div class="postfixt-bot">
|
||
<div class="postfixt-bot-box" id="pdfTopBox">
|
||
<div style="display: flex;justify-content: space-between;">
|
||
<div style="margin-left:20px">
|
||
<div style="margin-top:3px">
|
||
<i style="font-size:22px;color:#a3b1cc" v-show="zoomShow" @click="zoomBox()" class="el-icon-zoom-in"></i>
|
||
<i style="font-size:22px;color:#a3b1cc" v-show="!zoomShow" @click="zoomBox()" class="el-icon-zoom-out"></i>
|
||
</div>
|
||
</div>
|
||
<div>
|
||
<div style="display:inline-block;">
|
||
<interactBar :data="caseDetail" :type="3" :comments="false" :shares="true" :unicom="true"></interactBar>
|
||
</div>
|
||
<div style="display:inline-block;margin: 0 20px;">
|
||
<el-button type="primary" @click="goTop()">返回顶部</el-button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<!-- :authorId="articleDetailData.sysCreateAid" -->
|
||
<div id="comments-box">
|
||
<el-row><comments @success="success" v-if="resolveId != ''" :obj-type="3" :obj-id="resolveId" :authorId="caseDetail.authorId" :toUsers="toUsers"></comments></el-row>
|
||
</div>
|
||
</el-col>
|
||
</el-row>
|
||
<div v-else>
|
||
<el-empty :image-size="200"></el-empty>
|
||
</div>
|
||
</div>
|
||
<div style="width: 245px;margin-left: 5px;" :class="zoomShow?'':'fixd-box-show'">
|
||
<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" effect="light" :content="item.sysCreateUname" placement="bottom" :visible-arrow="false" popper-class="text-tooltip">
|
||
<el-col :span="15" 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="bottom" :visible-arrow="false" popper-class="text-tooltip">
|
||
<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="bottom" :visible-arrow="false" popper-class="text-tooltip">
|
||
<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>
|
||
</div>
|
||
</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 pdfPreview from '@/components/PdfPreview/view.vue';
|
||
import interactBar from '@/components/Portal/interactBar.vue';
|
||
import comments from '@/components/Portal/comments.vue';
|
||
import apiCase from '@/api/modules/cases.js';
|
||
import apiUser from '@/api/system/user.js';
|
||
import author from '@/components/Portal/authorInfo.vue';
|
||
import apiMessage from '@/api/system/message.js';
|
||
import apiDict from "@/api/modules/dict.js"
|
||
import {encrypt} from '@/utils/jsencrypt.js';
|
||
import cookies from 'vue-cookies'
|
||
import {cutFullName} from "@/utils/tools.js";
|
||
import portalFloatTools from "@/components/PortalFloatTools.vue";
|
||
export default {
|
||
name: 'atticle',
|
||
components: { portalHeader,portalFloatTools, portalFooter, interactBar, author, comments,pdfPreview },
|
||
computed: {
|
||
...mapGetters(['userInfo'])
|
||
},
|
||
data() {
|
||
return {
|
||
noData:true,
|
||
zoomShow:true,
|
||
isTopBoxShow:true,
|
||
toUsers:[],
|
||
ankingList:[],
|
||
Popularity:[],
|
||
Positive:[],
|
||
resolveId: '',
|
||
basePath:process.env.VUE_APP_FILE_BASE_URL,
|
||
pdfPath:'',
|
||
caseDetail: {
|
||
id:'',
|
||
filePath:''
|
||
},
|
||
ankingList:[],
|
||
authorInfo:{ aid: '', name: '', orgInfo: '', avatar: '', code: '',sex:null},
|
||
domain: [],
|
||
Profess: [],
|
||
orgData: [],
|
||
};
|
||
},
|
||
mounted() {
|
||
//this.pdfPath=this.basePath+'/case/demo1.pdf';
|
||
this.resolveId = this.$route.query.id;
|
||
this.$watermark.set(this.userInfo.name+this.userInfo.loginName);
|
||
if (this.resolveId) {
|
||
this.getCaseData();
|
||
}
|
||
this.getdomain();
|
||
this.getProfess();
|
||
this.getAnkingData();
|
||
this.getPopularity();
|
||
this.getPositive();
|
||
window.addEventListener(
|
||
"scroll",
|
||
this.handleScroll
|
||
);
|
||
},
|
||
methods: {
|
||
getdomain() {
|
||
let key = "org_domain";
|
||
apiDict.items(key).then(res => {
|
||
if (res.status == 200) {
|
||
this.domain = res.result;
|
||
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
|
||
}
|
||
let name = '';
|
||
let data = this.orgData.find(item => item.code == code);
|
||
if(data == undefined){
|
||
name = '';
|
||
} else {
|
||
name = data.name;
|
||
}
|
||
return name;
|
||
},
|
||
majorTypeTranslate(code){ // 专业分类翻译
|
||
let name = '';
|
||
let data = this.Profess.find(item => item.code == code);
|
||
if(data == undefined){
|
||
name = '';
|
||
} else {
|
||
name = data.name;
|
||
}
|
||
return name;
|
||
},
|
||
zoomBox(){
|
||
this.zoomShow = !this.zoomShow;
|
||
},
|
||
jumpRouter(item) {
|
||
// console.log(item)
|
||
location.href =`${this.webBaseUrl}/case/detail?id=${item.id}`
|
||
// this.$router.push(`/case/detail?id=${item.id}`);
|
||
},
|
||
goTop() {
|
||
document.documentElement.scrollTop = 0;
|
||
},
|
||
createPlayUrl(u){
|
||
let nowDate=new Date();
|
||
let ctime=parseInt(nowDate.getTime()/1000);
|
||
let beforeUrl=parseInt(nowDate.getTime()/1000)+'/'+u;
|
||
let urlSign=encodeURIComponent(encrypt(beforeUrl));
|
||
cookies.set('CASE_TIME', ctime);//写客户端的cookie保存
|
||
//以下判断是为了区分本地环境和服务器环境
|
||
if(process.env.NODE_ENV == 'development'){
|
||
this.pdfPath=process.env.VUE_APP_FILE_BASE_URL+u;
|
||
}else{
|
||
this.pdfPath=process.env.VUE_APP_BASE_API+'/xboe/m/case/content/resource?sign='+urlSign;
|
||
}
|
||
},
|
||
handleScroll() {
|
||
let innerHeight = document.querySelector('#case-list-content').clientHeight
|
||
let pdfTopBox = document.querySelector('#comments-box')
|
||
let pdfPreview = document.querySelector('#pdfPreview') //pdf盒子距离顶部的高度
|
||
let contentDiv = document.querySelector('#content-div').clientWidth;
|
||
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(pdfPreview.getBoundingClientRect().top < 0) {
|
||
document.querySelector('#pdfTopBox').style.cssText = `position: fixed;bottom:0;box-shadow: -3px 3px 10px 10px rgba(90, 119, 186, .1);width:${contentDiv-9}px;`;
|
||
} else {
|
||
document.querySelector('#pdfTopBox').style.cssText = "position:static";
|
||
}
|
||
if(pdfTopBox.getBoundingClientRect().top < 1000) {
|
||
document.querySelector('#pdfTopBox').style.cssText = "position:static";
|
||
}
|
||
if(scrollTop > 630) {
|
||
this.isTopBoxShow = true;
|
||
document.querySelector('#fixd-box').style.cssText = "position: fixed;top: -500px;width:245.5px";
|
||
} else {
|
||
document.querySelector('#fixd-box').style.cssText = "position: static";
|
||
}
|
||
},
|
||
|
||
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
|
||
}
|
||
})
|
||
},
|
||
getPositive(){
|
||
apiCase.queryComments(5).then(res=>{
|
||
if(res.status==200){
|
||
this.Positive=res.result
|
||
}
|
||
})
|
||
},
|
||
getCaseData() {
|
||
apiCase.detail(this.resolveId,true).then(res => {
|
||
if (res.status == 200) {
|
||
if (JSON.stringify(res.result) != '{}') {
|
||
this.caseDetail = res.result;
|
||
this.getCaseUserDetail();
|
||
if(this.caseDetail.filePath){
|
||
//this.pdfPath=this.basePath+this.caseDetail.filePath;
|
||
this.createPlayUrl(this.caseDetail.filePath);
|
||
}else{
|
||
this.$message.error('内容文件不存在或已被删除，请与管理员联系');
|
||
}
|
||
|
||
}
|
||
}else{
|
||
this.noData=false;
|
||
this.$message.error(res.message)
|
||
}
|
||
});
|
||
},
|
||
getCaseUserDetail() {
|
||
apiUser.getByIds([this.caseDetail.authorId]).then(res => {
|
||
if (res.status == 200 && res.result.length>0) {
|
||
this.authorInfo = res.result[0];
|
||
this.authorInfo.orgInfo=cutFullName(this.authorInfo.orgInfo,1);
|
||
|
||
this.toUsers = [
|
||
{name: res.result[0].name, aid:res.result[0].aid ,sex:res.result[0].sex}
|
||
];
|
||
//console.log(res.result,'res.result');
|
||
}
|
||
});
|
||
},
|
||
success(value){
|
||
let content=this.userInfo.name+'评论了我的案例'+'-'+this.caseDetail.title;
|
||
let query={refId:this.caseDetail.id,sendType:1,title:'系统消息',refType:3,content:content,sendName:this.userInfo.name,accpetId:this.caseDetail.sysCreateAid,acceptName:this.caseDetail.sysCreateBy}
|
||
apiMessage.save(query).then(res=>{
|
||
if(res.status==200){
|
||
|
||
}
|
||
})
|
||
// let con=value.sysCreateBy+' 评论了我的文章'+'-'+this.articleDetailData.title;
|
||
// let query={refId:value.objId,content:con,accpetId:value.sysCreateAid,sendType:1,sendName:'系统',acceptName:'文章',title:'系统消息'}
|
||
// apiMessage.save(query).then(res=>{
|
||
// if(res.status==200){
|
||
|
||
// }
|
||
// })
|
||
}
|
||
}
|
||
};
|
||
</script>
|
||
|
||
<style scoped lang="scss">
|
||
.fixd-box-show{
|
||
display: none;
|
||
}
|
||
::v-deep .interact-bar .interact-bar-btns {
|
||
justify-content: flex-start!important;
|
||
|
||
}
|
||
::v-deep .interact-bar-btn{
|
||
margin-left:0px!important;
|
||
margin-right:15px!important;
|
||
}
|
||
.postfixt-bot{
|
||
height: 60px;
|
||
//margin-top: 10px;
|
||
line-height: 60px;
|
||
// background-color: #fff;
|
||
// border: 1px solid #eee;
|
||
// z-index: 999;
|
||
.postfixt-bot-box{
|
||
|
||
// text-align: right;
|
||
background-color: #fff;
|
||
// border: 1px solid #eee;
|
||
}
|
||
}
|
||
.el-card{
|
||
border:none;
|
||
}
|
||
.case-summary{
|
||
font-size: 15px;
|
||
color: #454545;
|
||
word-break:break-all;
|
||
line-height: 25px;
|
||
}
|
||
::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;
|
||
|
||
}
|
||
.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;
|
||
}
|
||
.nav {
|
||
margin-bottom: 10px;
|
||
}
|
||
.detail {
|
||
background-color: #fff;
|
||
padding: 5px 20px 10px 20px;
|
||
.title {
|
||
font-size: 20px;
|
||
line-height: 45px;
|
||
font-weight: 600;
|
||
word-break:break-all;
|
||
}
|
||
.label {
|
||
font-size: 15px;
|
||
color: #999999;
|
||
display: flex;
|
||
justify-content: flex-start;
|
||
align-items: center;
|
||
span {
|
||
margin-left: 10px;
|
||
&:last-of-type {
|
||
flex: 1;
|
||
}
|
||
}
|
||
}
|
||
.type {
|
||
color: #0079fe;
|
||
}
|
||
|
||
|
||
.clearfix:after{
|
||
content: "020";
|
||
display: block;
|
||
height: 0;
|
||
clear: both;
|
||
visibility: hidden;
|
||
}
|
||
.btn-div {
|
||
margin: 0px 0 5px 0;
|
||
padding-bottom: 5px;
|
||
padding-top:5px;
|
||
height: 100%;
|
||
width: 100%;
|
||
.item {
|
||
float: left;
|
||
margin: 7px 10px 0px 0px;
|
||
border: 1px solid #2974D6;
|
||
padding: 0px 10px;
|
||
line-height: 24px;
|
||
text-align: center;
|
||
height: 24px;
|
||
box-sizing: border-box;
|
||
border-radius: 10px;
|
||
font-size: 14px;
|
||
color: #2974D6;
|
||
}
|
||
.item-right {
|
||
float: right;
|
||
}
|
||
}
|
||
}
|
||
.jianjie {
|
||
// margin: 15px 0;
|
||
background-color: #f5f7fa;
|
||
min-height: 300px;
|
||
padding: 0px 0px 0px 0px;
|
||
.content {
|
||
padding: 10px 0;
|
||
line-height: 25px;
|
||
}
|
||
.btn-div {
|
||
margin: 8px 0;
|
||
padding: 10px 0;
|
||
color: #666;
|
||
.item {
|
||
margin-right: 30px;
|
||
}
|
||
.item-right {
|
||
float: right;
|
||
}
|
||
}
|
||
}
|
||
.bottom-btn {
|
||
padding: 10px 50px;
|
||
.article-info-tools-btn {
|
||
padding: 5px 0px;
|
||
margin: 0 10px;
|
||
}
|
||
}
|
||
.bottom-div {
|
||
margin-top: 10px;
|
||
background-color: #fff;
|
||
padding: 5px 20px 10px 20px;
|
||
.title {
|
||
font-size: 16px;
|
||
font-weight: 600;
|
||
line-height: 50px;
|
||
border-bottom: 1px solid #dfdfdf;
|
||
.tip {
|
||
color: #666;
|
||
font-size: 12px;
|
||
margin: 0 10px;
|
||
}
|
||
}
|
||
.submit-div {
|
||
margin: 15px 0;
|
||
}
|
||
.bottom {
|
||
text-align: right;
|
||
}
|
||
|
||
.data {
|
||
margin-top: 10px;
|
||
background-color: #fff;
|
||
padding: 5px 20px 10px 20px;
|
||
.data-item {
|
||
border-bottom: 1px solid #dfdfdf;
|
||
margin-top: 10px;
|
||
.top {
|
||
font-size: 18px;
|
||
font-weight: 600;
|
||
span {
|
||
font-size: 14px;
|
||
color: #666;
|
||
font-weight: normal;
|
||
}
|
||
}
|
||
.text {
|
||
margin: 15px 0 5px 0;
|
||
padding-left: 40px;
|
||
line-height: 35px;
|
||
}
|
||
.huifu {
|
||
padding-left: 40px;
|
||
padding-bottom: 10px;
|
||
border-bottom: 1px solid #dfdfdf;
|
||
}
|
||
.result-div {
|
||
padding-left: 40px;
|
||
padding-top: 10px;
|
||
.top {
|
||
font-size: 16px;
|
||
}
|
||
}
|
||
.up-div {
|
||
padding: 0 15px;
|
||
.up-btn {
|
||
padding: 8px 20px;
|
||
color: #000;
|
||
}
|
||
}
|
||
img {
|
||
margin-right: 10px;
|
||
width: 30px;
|
||
border: 1px solid #eee;
|
||
border-radius: 50%;
|
||
vertical-align: middle;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
.right-box {
|
||
line-height: 25px;
|
||
.ranking-card {
|
||
margin-bottom: 10px;
|
||
.el-col{
|
||
margin-bottom: 10px;
|
||
}
|
||
.center{
|
||
text-align: center;
|
||
}
|
||
}
|
||
.ranking-title {
|
||
}
|
||
.aligh-title{
|
||
font-size: 14px;
|
||
color: #333333;
|
||
}
|
||
.ranking-data {
|
||
margin: 10px 0;
|
||
color: #999999;
|
||
}
|
||
}
|
||
</style>
|