JEECG-BOOT 2.0.2版本发布

ant-design-vue-jeecg/src/components/Trend/Trend.vue

@@ -0,0 +1,41 @@
+<template>
+  <div :class="[prefixCls, reverseColor && 'reverse-color' ]">
+    <span>
+      <slot name="term"></slot>
+      <span class="item-text">
+        <slot></slot>
+      </span>
+    </span>
+    <span :class="[flag]"><a-icon :type="`caret-${flag}`"/></span>
+  </div>
+</template>
+
+<script>
+  export default {
+    name: "Trend",
+    props: {
+      prefixCls: {
+        type: String,
+        default: 'ant-pro-trend'
+      },
+      /**
+       * 上升下降标识：up|down
+       */
+      flag: {
+        type: String,
+        required: true
+      },
+      /**
+       * 颜色反转
+       */
+      reverseColor: {
+        type: Boolean,
+        default: false
+      }
+    }
+  }
+</script>
+
+<style lang="less" scoped>
+  @import "index";
+</style>

ant-design-vue-jeecg/src/components/Trend/index.js

@@ -0,0 +1,3 @@
+import Trend from './Trend.vue'
+
+export default Trend

ant-design-vue-jeecg/src/components/Trend/index.less

@@ -0,0 +1,42 @@
+@import "../index";
+
+@trend-prefix-cls: ~"@{ant-pro-prefix}-trend";
+
+.@{trend-prefix-cls} {
+  display: inline-block;
+  font-size: @font-size-base;
+  line-height: 22px;
+
+  .up,
+  .down {
+    margin-left: 4px;
+    position: relative;
+    top: 1px;
+
+    i {
+      font-size: 12px;
+      transform: scale(0.83);
+    }
+  }
+
+  .item-text {
+    display: inline-block;
+    margin-left: 8px;
+    color: rgba(0,0,0,.85);
+  }
+
+  .up {
+    color: @red-6;
+  }
+  .down {
+    color: @green-6;
+    top: -1px;
+  }
+
+  &.reverse-color .up {
+    color: @green-6;
+  }
+  &.reverse-color .down {
+    color: @red-6;
+  }
+}