saas_masterPlatform/src/components/Comon/pictureList.vue

<template>
  <div class="dis_flex_order_li">
    <div class="list" v-for="(item, index) in list" :key="index">
      <img :src="backFullSrc(item.img)" alt="" />
      <div class="right">
        <h4>{{ item.label }}：</h4>
        <p>
          {{ item.value || info[item.prop] | formatPrice }}{{ item.ch || "元" }}
        </p>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: "SaasMasterPlatformPictureList",
  props: {
    list: {
      type: Array,
      default: () => {
        return [];
      },
    },
    fn: {
      type: Function,
      default: () => {
        return Promise.resolve({ data: {} });
      },
    },
  },
  data() {
    return {
      info: {},
    };
  },

  mounted() {
    this.fn().then((res) => {
      this.info = res.data;
    });
  },

  methods: {
    backFullSrc(name) {
      return require(`@/assets/images/${name}@2x.png`);
    },
  },
};
</script>

<style lang="scss" scoped>
.dis_flex_order_li {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  & > .list {
    user-select: none;
    cursor: pointer;
    transition: all 0.3s;
    box-shadow: 0px 0px 4px 1px rgba(0, 0, 0, 0.2);
    &:hover {
      transform: scale(1.04);
    }
    width: 136px;
    height: 44px;
    border-radius: 6px;
    display: flex;
    align-items: center;
    flex-shrink: 0;
    margin-right: 10px;
    margin-bottom: 10px;
    & > img {
      margin-left: 2px;
      width: 40px;
      height: 40px;
    }
    & > .right {
      flex: 1;
      padding-left: 4px;
      & > h4 {
        color: #000;
        margin: 0;
        font-size: 12px;
      }
      & > p {
        font-size: 12px;
        color: red;
        margin: 0;
      }
    }
  }
}
</style>