From ff4340c3a9ddedb311b9fd0d6beffabe786a24d1 Mon Sep 17 00:00:00 2001
From: ZF sun <34314687@qq.com>
Date: Sat, 8 Aug 2026 11:29:04 +0800
Subject: [PATCH] =?UTF-8?q?style(diy-recommend-code):=20horizontal=20?=
 =?UTF-8?q?=E9=A2=84=E8=AE=BE=E6=8C=89=E9=92=AE=E8=A1=8C=E4=B8=A4=E7=AB=AF?=
 =?UTF-8?q?=E5=AF=B9=E7=A7=B0=E5=AF=B9=E9=BD=90?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

horizontal 预设的"复制推荐码"和"立即分享"按钮之前是错落布局
(align-items:flex-end),且两端外边距不一致(padding 不统一)。
改为两端对称对齐：

- 父级 view:
  align-items:center (垂直居中,不再错落)
  padding:0 8rpx (两端外边距对称)
- 复制按钮:
  display:inline-flex (按内容自适应宽度)
  border:2rpx solid #FF8F00 (固定橙色边框,不读 diyData.codeColor)
- 立即分享按钮 (button path):
  position:relative; left:0; right:0; margin:0; padding:0
  (修复小程序 button 默认偏移问题,与其他预设 button path 一致)

效果:
- H5: 复制按钮左边缘距卡片左边 = 分享按钮右边缘距卡片右边 (各 8rpx)
- 小程序: 立即分享按钮不再向左偏移,与复制按钮保持视觉对称
- 两个按钮高度统一,垂直居中对齐
---
 components-diy/diy-recommend-code.vue | 20 ++++++++++----------
 1 file changed, 10 insertions(+), 10 deletions(-)

diff --git a/components-diy/diy-recommend-code.vue b/components-diy/diy-recommend-code.vue
index 1bbea6c..8024c65 100644
--- a/components-diy/diy-recommend-code.vue
+++ b/components-diy/diy-recommend-code.vue
@@ -286,22 +286,22 @@
         <view style="margin-top:20rpx;position:relative;z-index:1;">
           <text :style="{ fontSize: px2rpx(Math.max(16, Math.min(48, (Number(value.codeFontSize) || 28) * 1.07))) + 'rpx', fontWeight: '900', color: value.codeColor || '#FF4444', letterSpacing: '2rpx', fontFamily: 'Courier New, monospace' }">{{ code || value.placeholderCode || 'ABCD1234' }}</text>
         </view>
-        <!-- 2.4 + 2.5 按钮行：左复制、右分享，上下错落 -->
-        <view style="margin-top:16rpx;display:flex;align-items:flex-end;justify-content:space-between;gap:16rpx;position:relative;z-index:1;">
-          <!-- 左下角：复制推荐码按钮（描边圆角胶囊） -->
-          <view v-if="value.showCopyButton !== false" @tap="copyRecommendCode" :style="{ height: '64rpx', display: 'flex', justifyContent: 'center', alignItems: 'center', background: '#FFFFFF', border: '2rpx solid ' + (value.codeColor || '#FFB74D'), borderRadius: '32rpx', padding: '0 24rpx', gap: '6rpx' }">
+        <!-- 2.4 + 2.5 按钮行：左复制、右分享，按内容自适应宽度，两端对称对齐 -->
+        <view style="margin-top:16rpx;display:flex;align-items:center;justify-content:space-between;gap:16rpx;padding:0 8rpx;position:relative;z-index:1;">
+          <!-- 左下角：复制推荐码按钮（描边圆角胶囊，按内容自适应） -->
+          <view v-if="value.showCopyButton !== false" @tap="copyRecommendCode" style="height:64rpx;display:inline-flex;justify-content:center;align-items:center;background:#FFFFFF;border:2rpx solid #FF8F00;border-radius:32rpx;padding:0 24rpx;gap:6rpx;box-sizing:border-box;">
             <text style="font-size:22rpx;">📋</text>
-            <text :style="{ fontSize: '24rpx', color: value.codeColor || '#FF8F00', fontWeight: '600' }">{{ nc.copyButtonText || '复制推荐码' }}</text>
+            <text style="font-size:24rpx;color:#FF8F00;font-weight:600;">{{ nc.copyButtonText || '复制推荐码' }}</text>
           </view>
-          <!-- 右下角：立即分享链接按钮（黄橙渐变胶囊，靠右，触发微信原生分享）
+          <!-- 右下角：立即分享链接按钮（黄橙渐变胶囊，按内容自适应，触发微信原生分享）
                H5 端用 view 触发，小程序/APP 端保留 button 以触发 open-type=share -->
-          <button v-if="value.showShareButton !== false && !isH5Platform" open-type="share" @tap="onShareClick" style="text-align:center;background:transparent;border:none;padding:0;line-height:normal;display:inline-block;">
-            <view style="display:inline-block;height:72rpx;line-height:72rpx;padding:0 40rpx;background:linear-gradient(90deg,#FFC107 0%,#FF8F00 100%);border-radius:36rpx;box-shadow:0 4rpx 12rpx rgba(255,143,0,0.3);box-sizing:border-box;">
+          <button v-if="value.showShareButton !== false && !isH5Platform" open-type="share" @tap="onShareClick" style="position:relative;left:0;right:0;margin:0;padding:0;text-align:center;background:transparent;border:0;line-height:normal;display:inline-block;">
+            <view style="display:inline-block;height:72rpx;line-height:72rpx;padding:0 32rpx;background:linear-gradient(90deg,#FFC107 0%,#FF8F00 100%);border-radius:36rpx;box-shadow:0 4rpx 12rpx rgba(255,143,0,0.3);box-sizing:border-box;">
               <text style="font-size:27rpx;font-weight:700;color:#FFFFFF;">📤 {{ value.buttonText || '立即分享' }}</text>
             </view>
           </button>
-          <view v-else-if="value.showShareButton !== false" @tap="onShareClick" :style="{ height: '72rpx', display: 'flex', justifyContent: 'center', alignItems: 'center', background: 'linear-gradient(90deg,#FFC107 0%,#FF8F00 100%)', borderRadius: '36rpx', padding: '0 40rpx', boxShadow: '0 4rpx 12rpx rgba(255,143,0,0.3)', marginBottom: '-4rpx', lineHeight: '1', boxSizing: 'border-box' }">
-            <text :style="{ fontSize: '27rpx', fontWeight: '700', color: '#FFFFFF' }">📤 {{ nc.buttonText || '立即分享' }}</text>
+          <view v-else-if="value.showShareButton !== false" @tap="onShareClick" style="height:72rpx;display:inline-flex;justify-content:center;align-items:center;background:linear-gradient(90deg,#FFC107 0%,#FF8F00 100%);border-radius:36rpx;box-shadow:0 4rpx 12rpx rgba(255,143,0,0.3);padding:0 32rpx;line-height:1;box-sizing:border-box;">
+            <text style="font-size:27rpx;font-weight:700;color:#FFFFFF;">📤 {{ nc.buttonText || '立即分享' }}</text>
           </view>
         </view>
       </view>