<template>
|
<div class="board-card">
|
<div class="top-text">
|
<em>{{title}}</em>
|
<em style="color:#ff7733;font-size:13px">{{channelTotal}}</em>
|
</div>
|
<div class="bottom-icon">
|
<div style="height:45%;" class="flex-center">
|
<div class="right-bot-css">
|
<el-tooltip effect="dark" placement="top">
|
<div slot="content">有规则</div>
|
<span class="bottom-text">
|
<i class="el-icon-success" style="color:#149A46;" 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="el-icon-warning" style="color:orange;margin-left: 18px;" v-show="InValidCount.length"></i>
|
{{InValidCount}}
|
</span>
|
</el-tooltip>
|
</div>
|
</div>
|
<div style="width:100%;">
|
<el-divider></el-divider>
|
</div>
|
<div style="height:45%;" class="flex-center">
|
<div class="right-bot-css">
|
<el-tooltip effect="dark" placement="top">
|
<div slot="content">处理中</div>
|
<span class="bottom-text">
|
<i class="iconfont iconzhengzaichuli" style="color:#3D68E1;font-size:18px;" v-show="RunningCount.length"></i>
|
{{RunningCount}}
|
</span>
|
</el-tooltip>
|
|
<el-tooltip effect="dark" placement="top">
|
<div slot="content">未处理</div>
|
<span class="bottom-text">
|
<i class="iconfont iconchuli" title="未处理" style="margin-left:18px;font-size:18px;" v-show="NoDeal.length"></i>
|
{{NoDeal}}
|
</span>
|
</el-tooltip>
|
</div>
|
</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: "" },
|
channelTotal: { type: String, default: "" },
|
NoDeal: { type: String, default: "" },
|
width: { type: String, default: "126px"}
|
}
|
}
|
</script>
|
<style lang="scss">
|
.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;
|
}
|
.bottom-icon {
|
width: 100%;
|
height: calc(100% - 30px);
|
}
|
.mid-text {
|
margin-bottom: 18px;
|
font-family: PingFangSC-Medium;
|
font-size: 18px;
|
color: #ff7733;
|
}
|
.bottom-text {
|
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 auto;
|
position: relative;
|
}
|
.item {
|
margin: 4px;
|
}
|
}
|
</style>
|
