From e2c063dad64e4597b610c83fe302d02281ba299a Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E9=99=88=E5=8A=B2=E6=9D=BE?= <chenjinsong@zdjizhi.com>
Date: Sun, 21 Jun 2020 16:39:52 +0800
Subject: [PATCH] =?UTF-8?q?feat:=20asset-detail=20tags=E6=A0=B7=E5=BC=8F?=
 =?UTF-8?q?=E4=BC=98=E5=8C=96?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 nezha-fronted/src/assets/stylus/main.scss     | 56 +++++++++++++++++++
 .../src/components/charts/chart-detail.vue    |  6 +-
 .../src/components/charts/chart.scss          | 16 ++++++
 3 files changed, 75 insertions(+), 3 deletions(-)

diff --git a/nezha-fronted/src/assets/stylus/main.scss b/nezha-fronted/src/assets/stylus/main.scss
index 911d125be..8300d1594 100644
--- a/nezha-fronted/src/assets/stylus/main.scss
+++ b/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;
 }
diff --git a/nezha-fronted/src/components/charts/chart-detail.vue b/nezha-fronted/src/components/charts/chart-detail.vue
index 9bf205af6..80bb6a4c8 100644
--- a/nezha-fronted/src/components/charts/chart-detail.vue
+++ b/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">
diff --git a/nezha-fronted/src/components/charts/chart.scss b/nezha-fronted/src/components/charts/chart.scss
index 190740bc6..5eab8a253 100644
--- a/nezha-fronted/src/components/charts/chart.scss
+++ b/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;