diff --git a/components-diy/diy-recommend-code.vue b/components-diy/diy-recommend-code.vue
index 393712a..db62dc5 100644
--- a/components-diy/diy-recommend-code.vue
+++ b/components-diy/diy-recommend-code.vue
@@ -214,10 +214,14 @@
           <text :style="{ fontSize: '24rpx', color: value.codeColor || '#FF6B6B', fontWeight: '600' }">复制推荐码</text>
         </view>
       </view>
-      <!-- 立即分享链接按钮：全宽铺满白底红边框，触发微信原生分享 -->
-      <button v-if="value.showShareButton !== false" open-type="share" @tap="onShareClick" :style="{ marginTop: '16rpx', height: '76rpx', width: '100%', display: 'flex', justifyContent: 'center', alignItems: 'center', background: (value.buttonBgColor && /^#[0-9a-f]{3,8}$/i.test(value.buttonBgColor)) ? value.buttonBgColor : '#FFFFFF', border: (value.buttonBgColor && /^#[0-9a-f]{3,8}$/i.test(value.buttonBgColor)) ? 'none' : '2rpx solid ' + (value.codeColor || '#FF6B6B'), borderRadius: '38rpx', position: 'relative', zIndex: '1', lineHeight: '1' }">
+      <!-- 立即分享链接按钮：Card 风格固定「白底红边框」设计，不读 buttonBgColor
+           H5 端改用 view 触发（避免 <button> 默认样式影响），小程序/APP 端保留 button 以触发 open-type=share -->
+      <button v-if="value.showShareButton !== false && !isH5Platform" open-type="share" @tap="onShareClick" :style="{ marginTop: '16rpx', height: '76rpx', width: '100%', display: 'flex', justifyContent: 'center', alignItems: 'center', background: '#FFFFFF', border: '2rpx solid ' + (value.codeColor || '#FF6B6B'), borderRadius: '38rpx', position: 'relative', zIndex: '1', lineHeight: '1' }">
         <text :style="{ fontSize: '27rpx', fontWeight: '600', color: value.codeColor || '#FF6B6B' }">📤 {{ value.buttonText || '立即分享' }}</text>
       </button>
+      <view v-else-if="value.showShareButton !== false" @tap="onShareClick" :style="{ marginTop: '16rpx', height: '76rpx', width: '100%', display: 'flex', justifyContent: 'center', alignItems: 'center', background: '#FFFFFF', border: '2rpx solid ' + (nc.codeColor || '#FF6B6B'), borderRadius: '38rpx', position: 'relative', zIndex: '1', lineHeight: '1', boxSizing: 'border-box' }">
+        <text :style="{ fontSize: '27rpx', fontWeight: '600', color: nc.codeColor || '#FF6B6B' }">📤 {{ nc.buttonText || '立即分享' }}</text>
+      </view>
       <!-- showLink -->
       <view v-if="isFeatureOn(value.showLink)" style="margin-top:16rpx;text-align:center;position:relative;z-index:1;">
         <text @tap="copyLink" style="font-size:22rpx;color:#999;text-decoration:underline;">{{ formatShareLink }}</text>
@@ -368,7 +372,7 @@ export default {
         textColor: '#FFFFFF',
         titleColor: '#333333',
         codeColor: '#E4393C',
-        buttonBgColor: '#E4393C',
+        buttonBgColor: '',         // 默认空：让 Card 风格的立即分享按钮走「白底红边框」分支，匹配设计参考图
         buttonTextColor: '#FFFFFF',
         shareButtonBgColor: '#67C23A',
         titleFontSize: 14,              
@@ -395,6 +399,8 @@ export default {
       code: '',
       shareLink: '',
       qrcodeUrl: '',
+      /* H5 平台标识：用于在 H5 端用 view 替代 button，避免浏览器 <button> 默认样式覆盖 */
+      isH5Platform: false,
       /* 状态机 */
       showConsent: false,       
       loadingCode: false,      
@@ -636,6 +642,12 @@ export default {
   },
   created() {
     try {
+      // H5 端检测：避开 <button> 默认样式影响（h5 端改用 view 触发）
+      try {
+        // #ifdef H5
+        this.isH5Platform = true;
+        // #endif
+      } catch (e) {}
       if (this.storeToken) {
         this._resetAll();
         var vm = this;