feat(diy-recommend-code): 二维码容器支持尺寸/边框/背景/圆角/内边距可配

新增 6 个 props 字段：
- qrSize: 数字,默认 200,二维码图片宽高(rpx)
- qrBoxBorderColor: 颜色,默认 '',容器边框色（空=按预设默认）
- qrBoxBorderWidth: 数字,默认 0,边框宽度(rpx,0=按预设默认)
- qrBoxBorderRadius: 数字,默认 0,容器圆角(rpx)
- qrBoxBackground: 颜色,默认 '',容器背景色（空=透明）
- qrBoxPadding: 数字,默认 0,容器内边距(rpx)

修改点：4 个预设（gradient/minimal/card/horizontal）的 showQR 块
不再用硬编码 <image width=200rpx>，改为：
  <view style="<动态 width/height/border/borderRadius/bg/padding>">
    <image style="width:100%;height:100%">
  </view>
保证缩放、边框、背景、圆角、内边距都能响应 props 字段。

后端同步：design.html / wap.html 新增 nc.qrSize / nc.qrBoxBorderColor /
  nc.qrBoxBorderWidth / nc.qrBoxBorderRadius / nc.qrBoxBackground /
  nc.qrBoxPadding 字段并应用。

注：单位上,前端 rpx；后端 px。两者各自适配,与现有 fontSize/
  borderRadius/titleFontSize 等字段命名一致。

components-diy/diy-recommend-code.vue

@@ -125,7 +125,9 @@
       </view>
       <!-- showQR -->
       <view v-if="isFeatureOn(value.showQR)" style="margin-top:20rpx;display:flex;flex-direction:column;align-items:center;position:relative;z-index:1;">
-        <image :src="qrcodeRenderUrl" mode="aspectFit" style="width:200rpx;height:200rpx;" />
+        <view :style="{ width: px2rpx(nc.qrSize || 200) + 'rpx', height: px2rpx(nc.qrSize || 200) + 'rpx', background: nc.qrBoxBackground || 'transparent', border: nc.qrBoxBorderWidth && nc.qrBoxBorderColor ? (px2rpx(nc.qrBoxBorderWidth) + 'rpx solid ' + nc.qrBoxBorderColor) : 'none', borderRadius: px2rpx(nc.qrBoxBorderRadius || 0) + 'rpx', padding: px2rpx(nc.qrBoxPadding || 0) + 'rpx', boxSizing: 'border-box' }">
+          <image :src="qrcodeRenderUrl" mode="aspectFit" style="width:100%;height:100%;display:block;" />
+        </view>
         <text style="font-size:22rpx;color:#999;margin-top:12rpx;">{{ value.posterQrTip || '扫码进入并填写入驻信息' }}</text>
       </view>
     </view>
@@ -189,7 +191,9 @@
       </view>
       <!-- showQR -->
       <view v-if="isFeatureOn(value.showQR)" style="margin-top:16rpx;display:flex;flex-direction:column;align-items:center;position:relative;z-index:1;">
-        <image :src="qrcodeRenderUrl" mode="aspectFit" style="width:200rpx;height:200rpx;" />
+        <view :style="{ width: px2rpx(nc.qrSize || 200) + 'rpx', height: px2rpx(nc.qrSize || 200) + 'rpx', background: nc.qrBoxBackground || 'transparent', border: nc.qrBoxBorderWidth && nc.qrBoxBorderColor ? (px2rpx(nc.qrBoxBorderWidth) + 'rpx solid ' + nc.qrBoxBorderColor) : 'none', borderRadius: px2rpx(nc.qrBoxBorderRadius || 0) + 'rpx', padding: px2rpx(nc.qrBoxPadding || 0) + 'rpx', boxSizing: 'border-box' }">
+          <image :src="qrcodeRenderUrl" mode="aspectFit" style="width:100%;height:100%;display:block;" />
+        </view>
         <text style="font-size:22rpx;color:#999;margin-top:8rpx;">{{ value.posterQrTip || '扫码进入并填写入驻信息' }}</text>
       </view>
     </view>
@@ -238,7 +242,9 @@
       </view>
       <!-- showQR -->
       <view v-if="isFeatureOn(value.showQR)" style="margin-top:16rpx;display:flex;flex-direction:column;align-items:center;position:relative;z-index:1;">
-        <image :src="qrcodeRenderUrl" mode="aspectFit" style="width:200rpx;height:200rpx;" />
+        <view :style="{ width: px2rpx(nc.qrSize || 200) + 'rpx', height: px2rpx(nc.qrSize || 200) + 'rpx', background: nc.qrBoxBackground || 'transparent', border: nc.qrBoxBorderWidth && nc.qrBoxBorderColor ? (px2rpx(nc.qrBoxBorderWidth) + 'rpx solid ' + nc.qrBoxBorderColor) : 'none', borderRadius: px2rpx(nc.qrBoxBorderRadius || 0) + 'rpx', padding: px2rpx(nc.qrBoxPadding || 0) + 'rpx', boxSizing: 'border-box' }">
+          <image :src="qrcodeRenderUrl" mode="aspectFit" style="width:100%;height:100%;display:block;" />
+        </view>
         <text style="font-size:22rpx;color:#999;margin-top:8rpx;">{{ value.posterQrTip || '扫码进入并填写入驻信息' }}</text>
       </view>
     </view>
@@ -297,7 +303,9 @@
       </view>
       <!-- showQR -->
       <view v-if="isFeatureOn(value.showQR)" style="margin-top:16rpx;display:flex;flex-direction:column;align-items:center;">
-        <image :src="qrcodeRenderUrl" mode="aspectFit" style="width:200rpx;height:200rpx;" />
+        <view :style="{ width: px2rpx(nc.qrSize || 200) + 'rpx', height: px2rpx(nc.qrSize || 200) + 'rpx', background: nc.qrBoxBackground || 'transparent', border: nc.qrBoxBorderWidth && nc.qrBoxBorderColor ? (px2rpx(nc.qrBoxBorderWidth) + 'rpx solid ' + nc.qrBoxBorderColor) : 'none', borderRadius: px2rpx(nc.qrBoxBorderRadius || 0) + 'rpx', padding: px2rpx(nc.qrBoxPadding || 0) + 'rpx', boxSizing: 'border-box' }">
+          <image :src="qrcodeRenderUrl" mode="aspectFit" style="width:100%;height:100%;display:block;" />
+        </view>
         <text style="font-size:22rpx;color:#999;margin-top:8rpx;">{{ value.posterQrTip || '扫码进入并填写入驻信息' }}</text>
       </view>
     </view>
@@ -396,6 +404,13 @@ export default {
         padding: 16,                     
         showQR: false,
         showLink: false,
+        // 二维码容器样式（与后端 diyData / design.html 对齐）
+        qrSize: 200,                    // 二维码图片尺寸（前端 rpx）
+        qrBoxBorderColor: '',           // 容器边框色;空=不渲染边框
+        qrBoxBorderWidth: 0,            // 边框宽度（rpx）
+        qrBoxBorderRadius: 0,           // 容器圆角（rpx）
+        qrBoxBackground: '',            // 容器背景色;空=透明
+        qrBoxPadding: 0,                // 容器内边距（rpx）
 
         /* ============== 兼容旧字段（不破坏之前商家已经配置过的卡片） ============== */
         // 外间距