dx-element-ui/packages/card/src/main.vue

<template>
  <div :class="[mode, myClass]">
    <nt-loading style="flex: 1;" v-if="!data" :type="'05'"/>
    <div v-else v-for="(item, index) in options" :key="index" :class="item.class" :style="item.style">
      <div v-for="(node, nodeIndex) in item.list" :key="nodeIndex" v-if="!(isNotShow && node.isNotShow)">
        <div v-if="node.type === 1" :style="node.style" :class="node.class">
          <img :src="node.key ? data[node.key] : node.value" alt="">
        </div>
        <div v-else-if="node.type === 2" class="text-space-nowrap" :style="node.style" :class="node.class" v-html="node.key ? (data[node.key] || node.value) : node.value"></div>
        <div v-else-if="node.type === 3" class="text-space-nowrap" :style="node.style" :class="node.class">{{node.curr}}{{ node.key ? (data[node.key] || node.value) : node.value }}</div>
        <div v-else-if="node.type === 4" class="text-space-nowrap" :style="node.style" :class="[node.class, rateBGColor(node)]">{{ rateValue(node) }}</div>
        <div v-else-if="node.type === 5" class="text-space-nowrap" :style="node.style" :class="node.class">
          <img :src="node.icon" class="icon-image" alt="">{{ node.key ? (data[node.key] || node.value) : node.value }}
        </div>
        <div v-else :style="node.style" class="text-space-nowrap" :class="node.class">{{ node.key ? (data[node.key] || node.value) : node.value }}</div>
      </div>
    </div>
  </div>
</template>
<script>
import NtLoading from 'submodule/dx-element-ui/packages/loading'
export default {
  name: 'NtCard',
  components: { NtLoading },
  data: function () {
    return {}
  },
  watch: {},
  props: {
    data: {
      required: true,
      type: Object | null | undefined,
      default: () => {}
    },
    options: {
      required: true,
      type: Array,
      default: () => []
    },
    mode: {
      type: String,
      default: 'horizontal'
    },
    myClass: {
      type: String,
      default: ''
    },
    isNotShow: {
      type: Boolean,
      default: false
    }
  },
  methods: {
    rateBGColor(node) {
      const val = node.key ? parseFloat(this.$props.data[node.key]) : parseFloat(node.value)

      if (val > 0) {
        return 'up'
      } else if (val < 0) {
        return 'down'
      }
    },
    rateValue(node) {
      let sign = ''
      const val = node.key ? parseFloat(this.$props.data[node.key]) : parseFloat(node.value)

      if (val > 0) {
        sign = '↗'
      } else if (val < 0) {
        sign = '↘'
      } else {
        return 0
      }

      return sign + Math.abs(val) + (node.sign || '')
    }
  }
}
</script>

<style lang="scss" scoped>
  .horizontal {
    display: flex;
    flex-direction: row;
  }

  .title__size {
    font-size: 1.6rem;
  }

  .big__size {
    font-size: 4.2rem;
  }

  .small__size {
    font-size: 1.4rem;
  }

  .text__color {
    color: #14121F;
  }

  .text__size {
    font-size: 3.4rem;
  }

  .font-weight__bold {
    font-weight: bold;
  }

  .font-family__fb {
    font-family: AGENCYFB;
  }

  .font-family__fbo {
    font-family: AGENCYFB_0;
  }

  .vertical {
    display: flex;
    flex-direction: column;
  }

  .align-items__center {
    align-items: center;
  }

  .align-items__end {
    align-items: flex-end;
  }

  .justify-content__center {
    justify-content: center;
  }

  .justify-content__between {
    justify-content: space-between;
  }

  .card-line {
    display: flex;
  }

  .card-images {
    display: flex;
    justify-content: center;
    align-items: center;
    margin-right: 1.3rem;
    width: 6rem;
    height: 6rem;
    border-radius: 50%;
    background: #5b8ff9;
    img {
      width: 3.4rem;
    }
  }

  .history-info__text-8 {
    color: rgba(20, 18, 31, .8)
  }

  .history-info__text {
    color: rgba(20, 18, 31, .5)
  }

  .icon-image {
    height: 3rem;
    margin-right: 10px;
  }

  .order__info {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
  }

  .rate {
    display: flex;
    align-items: center;
    justify-content: center;
    background: #C2C4D1;
    padding: 0 5px;
    height: 1.8rem;
    width: fit-content;
    font-size: 1.4rem;
    color: #fff;
    &.up {
      background-color: #E86452;
    }
    &.down {
      background-color: #41CC7C;
    }
  }
  .text-space-nowrap {
    white-space: nowrap;
  }
</style>