JHVip/src/components/ShowMoney/ShowMoney.vue

<template>
  <div class="show_money">
    <div class="content_box">
      <div v-for="(title, index) in title" :key="index" class="content">
        <span class="name"> {{ title }} :</span>
        <span class="value">
          {{ content[index] }}
        </span>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: "",
  components: {},
  data() {
    return {};
  },
  props: {
    // 标题
    title: {
      type: Array,
      default: function () {
        return [];
      },
    },
    // 内容
    content: {
      type: Array,
      default: function () {
        return [];
      },
    },
  },
  computed: {},
  watch: {},
  created() {},
  mounted() {},
  methods: {},
};
</script>

<style lang='less' scoped>
.show_money {
  width: 35%;
  padding: 20px;
  margin-right: 20px;
  box-sizing: border-box;
  float: left;
  background-color: #fff;
  border-top: 1px solid #2196f3;
  .content_box {
    .content {
      padding: 0 10px;
      height: 35px;
      line-height: 35px;
      margin-top: 10px;
      text-align: left;
      background-color: #f5f5f5;
      color: #3d3b3b;
      border-radius: 2px;
      &:last-child {
        height: 200px;
        text-align: center;
        background-color: #f2f2f2;
        overflow: hidden;
        .name {
          display: block;
          margin-top: 70px;
        }

        .value {
          display: block;
        }
      }
    }
  }
}
</style>