feat(analysis): add analysis page

src/design/global.less

@@ -1,5 +1,4 @@
 @import './helper/distance.less';
-// 生成样式
 .distance();
 
 .hidden {
@@ -10,6 +9,10 @@
   display: flex;
 }
 
+.align-middle {
+  vertical-align: middle;
+}
+
 .flex-wrap {
   flex-wrap: wrap;
 }
@@ -48,3 +51,27 @@
   word-wrap: normal;
   white-space: nowrap;
 }
+
+.shadow-xs {
+  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.05);
+}
+
+.shadow-sm {
+  box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
+}
+
+.shadow {
+  box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06);
+}
+
+.shadow-md {
+  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
+}
+
+.shadow-lg {
+  box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
+}
+
+.shadow-xl {
+  box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
+}

src/design/transition/fade.less

@@ -4,27 +4,10 @@
 }
 
 .fade-enter-from,
-.fade-enter,
 .fade-leave-to {
   opacity: 0;
 }
 
-/* fade-transform */
-// .fade-transform-leave-active,
-// .fade-transform-enter-active {
-//   transition: all 0.5s;
-// }
-
-// .fade-transform-enter {
-//   opacity: 0;
-//   transform: translateX(-30px);
-// }
-
-// .fade-transform-leave-to {
-//   opacity: 0;
-//   transform: translateX(30px);
-// }
-
 // side-fade
 .slide-fade-enter-active,
 .slide-fade-leave-active {
@@ -42,35 +25,6 @@
   transform: translateX(30%);
 }
 
-// zoom-out
-.zoom-out-enter-active,
-.zoom-out-leave-active {
-  transition: opacity 0.35s ease-in-out, transform 0.45s ease-out;
-}
-
-.zoom-out-enter-from,
-.zoom-out-enter,
-.zoom-out-leave-to {
-  opacity: 0;
-  transform: scale(0);
-}
-
-// zoom-fade
-.zoom-fade-enter-active,
-.zoom-fade-leave-active {
-  transition: transform 0.35s, opacity 0.35s ease-out;
-}
-
-.zoom-fade-enter-from {
-  opacity: 0;
-  transform: scale(0.97);
-}
-
-.zoom-fade-leave-to {
-  opacity: 0;
-  transform: scale(1.03);
-}
-
 // ///////////////////////////////////////////////
 // Fade Bottom
 // ///////////////////////////////////////////////
@@ -92,23 +46,6 @@
   transform: translateY(8%);
 }
 
-// Speed: 2x
-.fade-bottom-2x-enter-active,
-.fade-bottom-2x-leave-active {
-  transition: opacity 0.2s, transform 0.25s;
-}
-
-.fade-bottom-2x-enter-from,
-.fade-bottom-2x-enter {
-  opacity: 0;
-  transform: translateY(-4%);
-}
-
-.fade-bottom-2x-leave-to {
-  opacity: 0;
-  transform: translateY(4%);
-}
-
 // ///////////////////////////////////////////////
 // Fade Top
 // ///////////////////////////////////////////////
@@ -119,8 +56,7 @@
   transition: opacity 0.3s, transform 0.35s;
 }
 
-.fade-top-enter-from,
-.fade-top-enter {
+.fade-top-enter-from {
   opacity: 0;
   transform: translateY(8%);
 }
@@ -129,20 +65,3 @@
   opacity: 0;
   transform: translateY(-8%);
 }
-
-// Speed: 2x
-.fade-top-2x-enter-active,
-.fade-top-2x-leave-active {
-  transition: opacity 0.2s, transform 0.25s;
-}
-
-.fade-top-2x-enter-from,
-.fade-top-2x-enter {
-  opacity: 0;
-  transform: translateY(4%);
-}
-
-.fade-top-2x-leave-to {
-  opacity: 0;
-  transform: translateY(-4%);
-}

src/design/transition/index.less

@@ -3,4 +3,5 @@
 @import './scale.less';
 @import './slide.less';
 @import './scroll.less';
+@import './zoom.less';
 @import './breadcrumb.less';

src/design/transition/scale.less

@@ -12,7 +12,6 @@
 .scale-rotate-transition {
   .transition-default();
 
-  &-enter,
   &-enter-from,
   &-leave,
   &-leave-to {

src/design/transition/scroll.less

@@ -1,14 +1,12 @@
 .scroll-y-transition {
   .transition-default();
 
-  &-enter,
   &-enter-from,
   &-leave-to {
     opacity: 0;
   }
 
-  &-enter-from,
-  &-enter {
+  &-enter-from {
     transform: translateY(-15px);
   }
 
@@ -20,14 +18,12 @@
 .scroll-y-reverse-transition {
   .transition-default();
 
-  &-enter,
   &-enter-from,
   &-leave-to {
     opacity: 0;
   }
 
-  &-enter-from,
-  &-enter {
+  &-enter-from {
     transform: translateY(15px);
   }
 
@@ -39,14 +35,12 @@
 .scroll-x-transition {
   .transition-default();
 
-  &-enter,
   &-enter-from,
   &-leave-to {
     opacity: 0;
   }
 
-  &-enter-from,
-  &-enter {
+  &-enter-from {
     transform: translateX(-15px);
   }
 
@@ -58,14 +52,12 @@
 .scroll-x-reverse-transition {
   .transition-default();
 
-  &-enter,
   &-enter-from,
   &-leave-to {
     opacity: 0;
   }
 
-  &-enter-from,
-  &-enter {
+  &-enter-from {
     transform: translateX(15px);
   }
 

src/design/transition/slide.less

@@ -2,7 +2,6 @@
   .transition-default();
 
   &-enter-from,
-  &-enter,
   &-leave-to {
     opacity: 0;
     transform: translateY(-15px);
@@ -13,7 +12,6 @@
   .transition-default();
 
   &-enter-from,
-  &-enter,
   &-leave-to {
     opacity: 0;
     transform: translateY(15px);
@@ -24,7 +22,6 @@
   .transition-default();
 
   &-enter-from,
-  &-enter,
   &-leave-to {
     opacity: 0;
     transform: translateX(-15px);
@@ -35,7 +32,6 @@
   .transition-default();
 
   &-enter-from,
-  &-enter,
   &-leave-to {
     opacity: 0;
     transform: translateX(15px);

src/design/transition/zoom.less

@@ -0,0 +1,27 @@
+// zoom-out
+.zoom-out-enter-active,
+.zoom-out-leave-active {
+  transition: opacity 0.35s ease-in-out, transform 0.45s ease-out;
+}
+
+.zoom-out-enter-from,
+.zoom-out-leave-to {
+  opacity: 0;
+  transform: scale(0);
+}
+
+// zoom-fade
+.zoom-fade-enter-active,
+.zoom-fade-leave-active {
+  transition: transform 0.35s, opacity 0.35s ease-out;
+}
+
+.zoom-fade-enter-from {
+  opacity: 0;
+  transform: scale(0.97);
+}
+
+.zoom-fade-leave-to {
+  opacity: 0;
+  transform: scale(1.03);
+}