vue uniapp自封组件 数据显示块 自适应宽度

<template>
<div class="x_data_box" :style="{width: percentage}">
  <div class="x_title">
    <div class="x_title_con" :style="{backgroundColor: xList.color}"></div>
    <div class="x_title_text">{{xList.title}}</div>
  </div>
  <div class="x_num_style">{{xList.value}}</div>
</div>
</template>

<script>
export default {
  name: "XdataCard",
  data() {
    return{
      percentage: '45%',
    }
  },
  props: {
    xList: {
      type: Object,
      default: {
        title: '',
        value: 0,
        color: "#54ff90"
      }
    },
    xNum: {
      type: Number,//一行有几个就传几个数值过来 默认两个
      default: 2,
    }
  },
  mounted(){
    this.setSize()
  },
  methods: {
    // 处理box宽度
    setSize() {
      this.percentage = 100 / this.xNum - 3 + '%'
    },
  },
}
</script>

<style scoped>
.x_data_box{
  height: 120rpx;
  background-color: #ececec;
  border-radius: 8px;
  padding: 10rpx;
  float: left;
  margin-left: 3%;
  margin-top: 10rpx;
}
.x_title{
  display: flex;
  margin-top: 2px;
}
.x_title_con{
  width: 6rpx;
  height: 30rpx;
  margin-top: 5rpx;
  border-radius: 4rpx;
}
.x_title_text{
  color: #8f8f8f;
  padding-left: 10rpx;
}
.x_num_style{
  font-size: 40rpx;
  line-height: 70rpx;
  font-weight: bold;
  width: 100%;
  text-align: center;
}
</style>