From 7f356bf22e4fe731e2b79ca3877e7c702eaf0704 Mon Sep 17 00:00:00 2001 From: fuliqi <fuliqi@qq.com> Date: 星期三, 03 四月 2024 14:25:17 +0800 Subject: [PATCH] Merge remote-tracking branch 'origin/master' --- src/views/screen/components/screen-table/index.vue | 90 +++++++++++++++++++++++++++++++++++++------- 1 files changed, 75 insertions(+), 15 deletions(-) diff --git a/src/views/screen/components/screen-table/index.vue b/src/views/screen/components/screen-table/index.vue index df8fd27..bb24e4c 100644 --- a/src/views/screen/components/screen-table/index.vue +++ b/src/views/screen/components/screen-table/index.vue @@ -4,23 +4,59 @@ <el-table :data="tableData" border :height="tableHeight" :max-height="tableHeight" class="rank-table"> <el-table-column prop="name" label="鍦板尯" align="center" width="100"> </el-table-column> - <el-table-column label="浜鸿劯璁惧" align="center"> - <el-table-column prop="data1" label="璁惧姝e父鏁�" align="center"> - </el-table-column> - <el-table-column prop="data1" label="璁惧寮傚父鏁�" align="center"> - </el-table-column> + + <el-table-column label="浜鸿劯璁惧姝e父鐜�" align="center"> + <template slot-scope="scope"> + <el-tooltip placement="top"> + <div slot="content"> + <div class="tip-item"> + <div class="tip-label">璁惧姝e父鏁�:</div> + <div class="tip-info tip-success">12</div> + </div> + <div class="tip-item"> + <div class="tip-label">璁惧寮傚父鏁�:</div> + <div class="tip-info tip-danger">4</div> + </div> + </div> + <div class="tip-num">75%</div> + </el-tooltip> + </template> </el-table-column> - <el-table-column label="杞﹁締璁惧" align="center"> - <el-table-column prop="data1" label="璁惧姝e父鏁�" align="center"> - </el-table-column> - <el-table-column prop="data1" label="璁惧寮傚父鏁�" align="center"> - </el-table-column> + + <el-table-column label="杞﹁締璁惧姝e父鐜�" align="center"> + <template slot-scope="scope"> + <el-tooltip placement="top"> + <div slot="content"> + <div class="tip-item"> + <div class="tip-label">璁惧姝e父鏁�:</div> + <div class="tip-info tip-success">12</div> + </div> + <div class="tip-item"> + <div class="tip-label">璁惧寮傚父鏁�:</div> + <div class="tip-info tip-danger">4</div> + </div> + </div> + <div class="tip-num">75%</div> + </el-tooltip> + </template> </el-table-column> - <el-table-column label="瑙嗛璁惧" align="center"> - <el-table-column prop="data1" label="璁惧姝e父鏁�" align="center"> - </el-table-column> - <el-table-column prop="data1" label="璁惧寮傚父鏁�" align="center"> - </el-table-column> + + <el-table-column label="瑙嗛璁惧姝e父鐜�" align="center"> + <template slot-scope="scope"> + <el-tooltip placement="top"> + <div slot="content"> + <div class="tip-item"> + <div class="tip-label">璁惧姝e父鏁�:</div> + <div class="tip-info tip-success">12</div> + </div> + <div class="tip-item"> + <div class="tip-label">璁惧寮傚父鏁�:</div> + <div class="tip-info tip-danger">4</div> + </div> + </div> + <div class="tip-num">75%</div> + </el-tooltip> + </template> </el-table-column> </el-table> </div> @@ -165,4 +201,28 @@ ::v-deep .el-table--enable-row-hover .el-table__body tr:hover>td.el-table__cell { background-color: #447ed648; } + +.tip-item { + display: flex; + align-items: center; + margin-bottom: 10px; + font-size: 16px; + + &:last-of-type { + margin-bottom: 0; + } + + .tip-label { + color: #5b83bd; + margin-right: 10px; + } + + .tip-success { + color: #0cd81d; + } + + .tip-danger { + color: #e20c0c; + } +} </style> \ No newline at end of file -- Gitblit v1.8.0