<template>
|
<div class="board-card flex-center">
|
<div style="width:40%;">
|
<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:59%;height:100%;" class="flex-center">
|
<div class="out-div-33">
|
<div class="txt-css">
|
<span>视频</span>
|
</div>
|
<el-tooltip v-if="total" effect="dark" placement="top" content="忙碌">
|
<div class="icon-css">
|
<i class="iconfont iconmanglu"></i>
|
</div>
|
</el-tooltip>
|
<el-tooltip v-else effect="dark" placement="top" content="等待">
|
<div class="icon-css">
|
<i class="iconfont icondengdai1"></i>
|
</div>
|
</el-tooltip>
|
</div>
|
<div style="height:86px;">
|
<el-divider class="divider-css" direction="vertical"></el-divider>
|
</div>
|
<div class="out-div-33">
|
<div class="txt-css">
|
<span>图片</span>
|
</div>
|
<el-tooltip effect="dark" placement="top" content="等待">
|
<div class="icon-css">
|
<i class="iconfont icondengdai1"></i>
|
</div>
|
</el-tooltip>
|
</div>
|
<div style="height:86px;">
|
<el-divider class="divider-css" direction="vertical"></el-divider>
|
</div>
|
<div class="out-div-33">
|
<div class="txt-css">
|
<span>音频</span>
|
</div>
|
<el-tooltip effect="dark" placement="top" content="等待">
|
<div class="icon-css">
|
<i class="iconfont icondengdai1"></i>
|
</div>
|
</el-tooltip>
|
</div>
|
</div>
|
</div>
|
</template>
|
|
<script>
|
export default {
|
name: "BoardCard",
|
props: {
|
title: { type: String, default: "" },
|
total: { type: String, default: "" },
|
success: { type: String, default: "" },
|
warning: { type: String, default: "" }
|
}
|
}
|
</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;
|
}
|
.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;
|
}
|
.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>
|
