feat: asset-detail tags样式优化

nezha-fronted/src/assets/stylus/main.scss

@@ -922,6 +922,34 @@ li{
     max-height: 500px;
   }
 }
+@keyframes unfold-600 {
+  0%{
+    visibility: hidden;
+    opacity: 0;
+    max-height: 0;
+  }
+  25%{
+    opacity: 0;
+    max-height: 120px;
+  }
+  50%{
+    opacity: 0;
+    max-height: 240px;
+  }
+  66%{
+    opacity: 0.2;
+    max-height: 360px;
+  }
+  83%{
+    opacity: 0.5;
+    max-height: 480px;
+  }
+  100% {
+    visibility: visible;
+    opacity: 1;
+    max-height: 600px;
+  }
+}
 @keyframes fold-500 {
   0% {
     opacity: 1;
@@ -950,6 +978,34 @@ li{
     max-height: 0;
   }
 }
+@keyframes fold-600 {
+  0% {
+    opacity: 1;
+    max-height: 600px;
+    visibility: visible;
+  }
+  16% {
+    opacity: 0.5;
+    max-height: 480px;
+  }
+  33%{
+    opacity: 0.2;
+    max-height: 360px;
+  }
+  50%{
+    opacity: 0;
+    max-height: 240px;
+  }
+  75%{
+    opacity: 0;
+    max-height: 120px;
+  }
+  100% {
+    visibility: hidden;
+    opacity: 0;
+    max-height: 0;
+  }
+}
 .right-box-enter-active {
   animation: slide-in-from-right 0.4s;
 }

nezha-fronted/src/components/charts/chart-detail.vue

@@ -29,7 +29,7 @@
                 <span><i :class="{'el-icon-caret-right': show.indexOf(index) == -1,'el-icon-caret-bottom': show.indexOf(index) > -1}"></i></span>
                 <span>{{item.title}}</span>
               </div>
-              <div class="chart-sub-content" :class="{'init-no-animation': index == 0, 'fold-500': show.indexOf(index) == -1, 'unfold-500': show.indexOf(index) > -1}">
+              <div class="chart-sub-content" :class="{'init-no-animation': index == 0, 'fold-600': show.indexOf(index) == -1, 'unfold-600': show.indexOf(index) > -1}">
                 <template v-for="(value, key, i) in item.data">
 
                   <!-- endpoint-detail、asset、model的assetInfo的asset详情-->
@@ -42,9 +42,9 @@
                     <div class="content-item-value item-tip" :id="`value-${index}-${i}`">
                       <span v-if="key == 'state'">{{value == 1 ? $t('asset.createAssetTab.inStock') : $t('asset.createAssetTab.outStock')}}</span>
                       <span v-else-if="key == 'alert'" class="as-button" :class="{'success': value <= 0, 'danger': value > 0}">{{value + ' ' + $t('overall.active')}}</span>
-                      <div v-if="key == 'tags'" class="no-overflow">
+                      <div v-else-if="key == 'tags'" class="no-overflow" style="padding-bottom: 5px;">
                         <template v-if="value && value.length > 0">
-                          <nz-alert-tag :label="tagItem.tag" type="normal" style="margin: 5px; vertical-align: middle;"
+                          <nz-alert-tag :label="tagItem.tag" type="normal" style="margin: 5px 5px 0 0; vertical-align: middle;"
                                         :cursor-point="false"
                                         :key="tagItem.id"
                                         v-for="(tagItem, tagIndex) in value">

nezha-fronted/src/components/charts/chart.scss

@@ -400,6 +400,14 @@
       max-height: 0;
       visibility: hidden;
     }
+    .fold-600 {
+      animation-name: fold-600; //该动画定义在main.scss里
+      animation-duration: 0.2s;
+      animation-iteration-count:1;
+      opacity: 0;
+      max-height: 0;
+      visibility: hidden;
+    }
     .fold-200 {
       animation-name: fold-200; //该动画定义在main.scss里
       animation-duration: 0.2s;
@@ -416,6 +424,14 @@
       max-height: 500px;
       visibility: visible;
     }
+    .unfold-600 {
+      animation-name: unfold-600;
+      animation-duration: 0.2s;
+      animation-iteration-count:1;
+      opacity: 1;
+      max-height: 600px;
+      visibility: visible;
+    }
     .unfold-200 {
       animation-name: unfold-200;
       animation-duration: 0.2s;