效果如下:

image.png

html:

1
2
3
4
5
6
7
8
9
 <div class="top-item" v-for="(item,index) in logPlusStatistics" :key="index" :style="{borderLeftColor:  colors[index]? colors[index]:colors[colors.length-1], backgroundColor:  bgColors[index]? bgColors[index]:bgColors[bgColors.length-1],}">
   <a-tooltip placement="top">
     <template slot="title">
       <span> {{  item.label }} </span>
     </template>
    <span class="left">{{  item.label }} </span>
    </a-tooltip>
    <span class="right">{{  item.value }}</span>
</div>

css:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
.top-item {
           display: flex;
           justify-content: space-between;
           align-items: center;
           color: #000;
           border-left: 3px solid;
           line-height: 30px;
           margin-top: 12px;
           padding: 4px 12px;

           .left {
               font-size: 14px;
               font-weight: bold;
               line-height: 20px;
               flex-grow: 1;
               overflow: hidden;
               text-overflow: ellipsis;
               white-space: nowrap;
           }
           .right {
               color: #000;
               font-size: 14px;
               font-weight: bold;
               margin-left: 16px;
           }
       }