行间距和列间距无法根据不同机型自适应-急，优先级高！

[chenzhengWin]

• 你当前是什么框架(必填)： React 18.2.0, 研发h5页面，需要在app和小程序内打开页面

• 你使用的是哪个包(必填)： "@lucky-canvas/react": "^0.1.13",

• 你当前插件的版本(必填)： "^0.1.13",

• 当前环境是小程序还是浏览器(选填)：

• 详细描述你的bug： 老虎机行、列间距无法根据不同机型自适应；宽度和高度是自己用 width的px除以16得到的rem，如果直接用px也无法自适应。使用rpx也不能支持。 请问1：移动端行列间距，宽高如何设置值以适应不同屏幕？预期：间距可以自适应屏幕。 以375px的设计稿为例，如宽250px，高116px，行间距10px,列间距22px

如图：

请问2： 为什么prize奖品图片设置了宽高，默认背景（蓝色）还那么大？预期：prize设置的图片宽高就是一个单元格的宽高。 希望图中奖品背景的宽高就是整个单元格的宽高，让蓝色背景区域和奖品背景图一样大，60*60的宽高。

• 问题代码(重要)：

  const data = [
    {
      name: '最大奖-免房红包100元',
      bgImg: $tools.IMGV2_BIG_AWARD_BG,
      img: $tools.IMGV2_LOTTERY_DEFAULT_AWARD,
      bgWidth: '56px',
      bgHeight: '56px',
      width: '40px',
      height: '40px',
      fontColor: '#fff',
      background: '#b6c8f6',
    },
    {
      name: '1元打哈还是好得很红包',
      bgImg: $tools.IMGV2_COMMON_AWARD_BG,
      img: $tools.IMGV2_LOTTERY_DEFAULT_AWARD,
      fontColor: '#616161',
      background: '#8c9eed',
    },
    {
      name: '100元红包',
      bgImg: $tools.IMGV2_COMMON_AWARD_BG,
      img: $tools.IMGV2_LOTTERY_DEFAULT_AWARD,
      ackground: '#b6c8f6',
    },
    {
      name: '0.5元红包',
      bgImg: $tools.IMGV2_COMMON_AWARD_BG,
      img: $tools.IMGV2_LOTTERY_DEFAULT_AWARD,
      ackground: '#b6c8f6',
    },
    {
      name: '2元红包',
      bgImg: $tools.IMGV2_COMMON_AWARD_BG,
      img: $tools.IMGV2_LOTTERY_DEFAULT_AWARD,
      ackground: '#b6c8f6',
    },
  ]

  const prizes = []
  for (let i = 0; i < data.length; i++) {
    let item = data[i]
    prizes.push({
      name: item.name,
      index: i,
      background: item.background,
      borderRadius: '10px',
      fonts: [
        {
          text: item.name,
          top: '44px',
          lengthLimit: '44px', // 文字宽度
          lineClamp: 1,
          fontColor: item.fontColor || '#616161',
          fontSize: '8px',
        },
      ],
      imgs: [
        { src: item.bgImg, width: '60px', height: '60px' },
        { src: item.img, width: item.width || '40px', height: item.height || '40px', top: '4px' },
      ],
    })
  }
// 代码开始, 别再放歪了行吗
  const state = {
    blocks: [
      // 老虎机背景
      {
        imgs: [{ src: $tools.IMGV2_LOTTERY_GUN_ZHOU, height: '100%', width: '100%' }],
      },
    ],
    prizes,
    slots: [{}, {}, {}],
    defaultStyle: {
      fontColor: '#616161',
      fontSize: '14rpx',
      textAlign: 'center',
    },
    defaultConfig: {
      rowSpacing: '10px',
      colSpacing: '8px',
    },
  }

  return (
    <div className={className}>
      <SlotMachine
        ref={myLucky}
        width={'15.62rem'} // 250px
        height={'7.25rem'} // 116px
        blocks={state.blocks}
        prizes={state.prizes}
        slots={state.slots}
        defaultStyle={state.defaultStyle}
        defaultConfig={state.defaultConfig}
        onStart={() => {
          // myLucky?.current?.play()
          // setTimeout(() => {
          //   const index = (Math.random() * 6) >> 0
          //   myLucky?.current?.stop(index)
          // }, 2500)
        }}
        onEnd={(prize: { name: string }) => {
          alert('恭喜获得大奖:' + prize.name)
        }}
      />
    </div>
  )
// 代码结束