修改样式

src/components/charts/ChartSingleValue.vue

@@ -1,6 +1,8 @@
 <template>
   <div class="cn-chart cn-chart__single-value" :class="singleValueClass(type)">
-    <div class="single-value__icon"><i class="el-icon-apple"></i></div>
+    <div class="single-value-icon__box">
+      <div class="single-value__icon"><i class="el-icon-apple"></i></div>
+    </div>
     <div class="single-value__content" v-if="type === 51">
       <div class="content__data">11112</div>
       <div class="content__title">{{$t('common.save')}}</div>

src/components/charts/panel.scss

@@ -58,8 +58,15 @@
     justify-content: center;
     align-items: center;
 
+    .single-value-icon__box{
+      height: 70px;
+      flex: 4;
+      display: flex;
+      justify-content: space-around;
+      align-items: center;
+
+    }
     .single-value__icon {
-      position: relative;
       margin-right: 7.5%;
       width: 72px;
       height: 72px;
@@ -67,16 +74,17 @@
       border-radius: 50%;
 
       i {
-        position: absolute;
+        display: flex;
-        top: 50%;
+        justify-content: space-around;
-        left: 50%;
+        align-items: center;
-        transform: translate(-50%,-50%);
+        margin-top: 25px;
         font-size: 28px;
         color: $--color-primary;
       }
     }
 
     .single-value__content {
+      flex: 6;
       display: flex;
       flex-direction: column;
 
@@ -87,9 +95,19 @@
         font-weight: bold;
       }
       .content__title {
+        white-space: nowrap;
+        text-overflow: ellipsis;
+        overflow: hidden;
+        word-break: break-all;
+        width: 40px;
         font-size: 16px;
         color: #666666;
       }
+      .content__title:hover{
+        overflow: visible;
+        white-space: inherit;
+        min-width:100%;
+      }
     }
   }
   .cn-chart__single-value.cn-chart__single-value--icon-right {