From a7864c2d1757411076f6a8059613d67f169d1802 Mon Sep 17 00:00:00 2001
From: hanbaoshan <hanbaoshan@aiotlink.com>
Date: 星期三, 29 七月 2020 13:38:01 +0800
Subject: [PATCH] 算力管理相关组件样式调试
---
src/components/subComponents/DataStackCard.vue | 99 ++++++++++++++++++++++++++++++++++++++++++++-----
1 files changed, 88 insertions(+), 11 deletions(-)
diff --git a/src/components/subComponents/DataStackCard.vue b/src/components/subComponents/DataStackCard.vue
index 0cd0054..3a52bf8 100644
--- a/src/components/subComponents/DataStackCard.vue
+++ b/src/components/subComponents/DataStackCard.vue
@@ -1,17 +1,65 @@
<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 class="s-board-card flex-center power-card">
+ <div class="card-name">
+ <div class="content" style="">
+ <div class="top-text">
+ <em>{{title}}</em>
+ </div>
+ <div class="mid-text">
+ <em>{{total}}</em>
+ </div>
</div>
</div>
- <div style="height:86px;">
- <el-divider class="divider-css" direction="vertical"></el-divider>
+ <el-divider class="divider-css" direction="vertical"></el-divider>
+ <div class="desc">
+ <div class="item">
+ <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>
+ </div>
+ <div class="item">
+ <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>
+ <el-divider></el-divider>
+ <div class="item">
+ <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>
+ </div>
+ <div class="item">
+ <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 style="width:61%;height:100%;">
+
+ <!-- <div style="width:61%;height:100%;float:right;">
<div style="height:50%;" class="flex-center right-bot-css">
<el-tooltip effect="dark" placement="top">
<div slot="content">鍏ㄩ儴鎵撳紑鍒嗘瀽寮�鍏�</div>
@@ -57,7 +105,7 @@
</span>
</el-tooltip>
</div>
- </div>
+ </div> -->
</div>
</template>
@@ -155,4 +203,33 @@
}
}
}
+.power-card{
+ display: flex;
+ align-items: center;
+ .card-name {
+ width:38%;
+ height:100%;
+ display:flex;
+ justify-content: center;
+ align-items:center;
+ }
+ .el-divider{
+ height: 86px;
+ }
+ .desc {
+ height: 100%;
+ margin-left: 10px;
+ display: flex;
+ flex-wrap: wrap;
+ .item{
+ line-height: 56px;
+ height: 56px;
+ width: 40%
+ }
+ .el-divider{
+ width: 90%;
+ height: 1px;
+ }
+ }
+}
</style>
\ No newline at end of file
--
Gitblit v1.8.0