<template>
|
<div class="s-board-card flex-center">
|
<div style="width:38%;">
|
<div class="top-text">
|
<em>{{title}}</em>
|
</div>
|
<div class="mid-text">
|
<em>{{total}}</em>
|
</div>
|
</div>
|
<div style="height:86px;">
|
<el-divider class="divider-css" direction="vertical"></el-divider>
|
</div>
|
<div style="width:61%;height:100%;">
|
<div style="height:50%;" class="flex-center right-bot-css">
|
<el-tooltip effect="dark" placement="top">
|
<div slot="content">全部打开分析开关</div>
|
<span class="bottom-text">
|
<i class="iconfont iconquanbu" style="color:#3D68E1;" v-show="ValidCount.length"></i>
|
{{ValidCount}}
|
</span>
|
</el-tooltip>
|
|
<el-tooltip effect="dark" placement="top">
|
<div slot="content">算法配置不全</div>
|
<span class="bottom-text">
|
<i
|
class="iconfont iconicon-test6"
|
style="color:#3D68E1;margin-left: 15px;"
|
v-show="InValidCount.length"
|
></i>
|
{{InValidCount}}
|
</span>
|
</el-tooltip>
|
</div>
|
<div style="width:100%;">
|
<el-divider></el-divider>
|
</div>
|
<div style="height:40%;" class="flex-center right-bot-css">
|
<el-tooltip effect="dark" placement="top">
|
<div slot="content">正在执行分析处理</div>
|
<span class="bottom-text">
|
<i class="iconfont iconicon-test11" style="color:#3D68E1" v-show="RunningCount.length"></i>
|
{{RunningCount}}
|
</span>
|
</el-tooltip>
|
|
<el-tooltip effect="dark" placement="top">
|
<div slot="content">{{fourTip}}</div>
|
<span class="bottom-text">
|
<i
|
:class="`iconfont ${fourIcon}`"
|
style="color:#3D68E1;margin-left:15px;"
|
v-show="NoDeal.length"
|
></i>
|
{{NoDeal}}
|
</span>
|
</el-tooltip>
|
</div>
|
</div>
|
</div>
|
</template>
|
|
<script>
|
export default {
|
name: "BoardCard",
|
props: {
|
title: { type: String, default: "" },
|
total: { type: String, default: "" },
|
ValidCount: { type: String, default: "" },
|
InValidCount: { type: String, default: "" },
|
RunningCount: { type: String, default: "" },
|
NoDeal: { type: String, default: "" },
|
width: { type: String, default: "126px" },
|
fourTip: { type: String, default: "" },
|
fourIcon: { type: String, default: "" }
|
}
|
}
|
</script>
|
<style lang="scss">
|
.s-board-card {
|
height: 120px;
|
width: 100%;
|
display: inline-block;
|
margin: 10px;
|
background: #ffffff;
|
border: 1px solid #e2e2e2;
|
box-shadow: 0 5px 12px 0 rgba(0, 0, 0, 0.07);
|
border-radius: 4px;
|
cursor: pointer;
|
.top-text {
|
line-height: 30px;
|
font-family: PingFangSC-Medium;
|
font-size: 14px;
|
color: #222222;
|
}
|
.mid-text {
|
margin-bottom: 18px;
|
font-family: PingFangSC-Medium;
|
font-size: 18px;
|
color: #ff7733;
|
}
|
.bottom-text {
|
word-break: keep-all;
|
text-align: right;
|
// position: relative;
|
// top: 3px;
|
// left: 1px;
|
// color: #666666;
|
// font-size: 13px;
|
}
|
em {
|
font-weight: 700;
|
}
|
hr {
|
background: rgb(226, 226, 226);
|
border: 0;
|
height: 1px;
|
}
|
i {
|
font-size: 20px;
|
}
|
.divider-css {
|
height: 100%;
|
margin: 0;
|
}
|
.el-divider--horizontal {
|
display: block;
|
height: 1px;
|
width: 100%;
|
margin: 3px 0;
|
}
|
.right-top-css {
|
margin: 0px auto;
|
position: relative;
|
}
|
.right-bot-css {
|
margin: 0px 5px;
|
position: relative;
|
}
|
.out-div-33 {
|
width: 33%;
|
height: 100%;
|
.txt-css {
|
width: 100%;
|
height: 50%;
|
position: relative;
|
top: 30px;
|
}
|
.icon-css {
|
width: 100%;
|
height: 30%;
|
margin-top: 10px;
|
position: relative;
|
}
|
}
|
}
|
</style>
|
