1

<div class="part">
        <div
          class="partBox"
          v-for="(item,index) in data"
          :key="index"
        >
          <div style="color: #e8b213;margin-top:25px">
            <span class="value">测试</span>
            <span style="padding-left: 4px">项</span>
          </div>
          <div class="partTitle">测试</div>
        </div>
      </div>

.part {
  width: 190px;
  height: 100%;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-around;
  text-align: center;
}
.partBox {
  flex: 0 0 50%;
  height: 50%;
  background: url('xxx') center no-repeat;
  background-size: 100% 100%;
  cursor: pointer;
}

2

 <div style="padding: 10px;">
      <div style="width:200px;height:100px;background: #eee;display:flex;align-items: center;justify-content:center;">
        <div style="width: 40%;height: 100%;">
          <img
            src="https://lf-cdn-tos.bytescm.com/obj/static/xitu_extension/static/gold.981a5510.svg"
            alt=""
            style="width:100%;height:100%;"
          >
        </div>
        <div style="width: 40%;margin-left: 10px;">
          <div>top</div>
          <div>bottom</div>
        </div>
      </div>
    </div>

3带图片背景 左图片 右描述格式

 <div class="mian-data">
      <div
        class="box"
        v-for="(item,index) in data"
        :key="index"
        :style="{backgroundImage: `url(${item.src})`,cursor: index===0?'':'pointer'}"
        @click="showSiwuList(index,item.status)"
      >
        <img
          class="img"
          :src="item.icon"
          alt=""
        >
        <div
          :class="`color${index}`"
          style="padding-left: 10px"
        >
          <div class="title">{{item.title}}</div>
          <div>
            <span class="value">{{item.value}}</span>
            <span class="unit">{{item.unit}}</span>
          </div>
        </div>
      </div>
    </div>

 data() {
    return {
      data: [
        {
          title: '测试',
          value: 0,
          code: 'completionRate',
          unit: '%',
          src: 'https://lf3-cdn-tos.bytescm.com/obj/static/xitu_juejin_web/3b78ac82b0c840c0fe1e83d5cfb84b56.svg',//require('@/assets/xxx.png'),
          icon: 'https://pc-index-static.cdn.bcebos.com/pc-index-nav/00001/%E5%AF%BC%E8%88%AAList_%E7%85%8E%E8%9B%8B%E7%BD%91.png',//require('@/assets/xxx.png')
        },
      ],
      echarts: null,
      result: [],
      colorList: ['#01B4D2', '#FFB508', '#9702FE', '#00BD8D', '#D90051']
    }
  },

.mian-data {
  width: 100%;
  height: 70px;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-around;
}
.box {
  flex: 0 0 30%;
  height: 100%;
  background-size: 100% 100%;
  display: flex;
}
.img {
  margin-top: 25px;
  margin-left: 10px;
  width: 37px;
  height: 33px;
}
.value {
  position: relative;
  font-size: 18px;
}
.unit {
  position: relative;
  font-size: 14px;
  padding-left: 5px;
}
.title {
  color: red;
  font-size: 14px;
  padding-top: 15px;
}