【vue】自封组件 自适应宽度的数据展示卡片

默认样式：

数据示例：

<x-datalist :xl-list="fhList1"></x-datalist>
hList1: [
  {
    text: '新能源总出力',
    value: 10.322,
  }, {
    text: '风电',
    value: 8850,
  },  {
    text: '光伏',
    value: 924,
  }, {
    text: '生物质',
    value: 542,
  }
],

样式2： 续传值:style-type="2"

<x-datalist :xl-list="grList1" :style-type="2"></x-datalist>
grList1: [{
    text: '钢铁（元/吨）',
    value: 10.322,
    colorType: 1,
    changeNum: '+0.14%'
  }, {
    text: '钢铁（元/吨）',
    value: 8850,
    colorType: 0,
    changeNum: '-0.14%'
  },  ],

源码：https://download.csdn.net/download/galaxyJING/89911997