diff --git a/components-diy/diy-recommend-code.vue b/components-diy/diy-recommend-code.vue
index 02db0aa..ab63bb1 100644
--- a/components-diy/diy-recommend-code.vue
+++ b/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）
 
         /* ============== 兼容旧字段（不破坏之前商家已经配置过的卡片） ============== */
         // 外间距