From ec960a29c4370e92952bb2a55c97b39f597bd2b2 Mon Sep 17 00:00:00 2001
From: ZF sun <34314687@qq.com>
Date: Sat, 8 Aug 2026 15:01:52 +0800
Subject: [PATCH] =?UTF-8?q?fix(diy-recommend-code):=20=E5=A4=8D=E5=88=B6?=
 =?UTF-8?q?=E6=8C=89=E9=92=AE=20style=20=E5=8D=95=E4=BD=8D=20rpx=20?=
 =?UTF-8?q?=E6=94=B9=20px=20=E9=80=82=E9=85=8D=E9=B8=BF=E8=92=99=E5=85=83?=
 =?UTF-8?q?=E6=9C=8D=E5=8A=A1?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

之前复制按钮用 rpx 单位:
- border:2rpx solid #xxx
- font-size:24rpx
- height:60rpx / padding:0 32rpx / border-radius:30rpx / gap:8rpx

在 H5/微信小程序没问题,但鸿蒙元服务对动态拼接 style 中的 rpx
解析异常,渲染尺寸可能错乱。

修复: rpx 全改成 px(1rpx = 0.5px,即原数值 / 2):
- border:1px solid #xxx     (原 2rpx)
- font-size:12px            (原 24rpx)
- border-radius:15px        (原 30rpx)
- padding:0 16px            (原 0 32rpx)
- height:30px               (原 60rpx)
- gap:4px                   (原 8rpx)

horizontal 预设:
- border-radius:16px        (原 32rpx)
- padding:0 12px            (原 0 24rpx)
- height:32px               (原 64rpx)
- gap:3px                   (原 6rpx)

这样 4 处复制按钮 + 文字节点所有动态 style 数值都用 px,
鸿蒙元服务全平台兼容。
---
 components-diy/diy-recommend-code.vue | 16 +++++++++-------
 1 file changed, 9 insertions(+), 7 deletions(-)

diff --git a/components-diy/diy-recommend-code.vue b/components-diy/diy-recommend-code.vue
index dc6da4b..f730cbd 100644
--- a/components-diy/diy-recommend-code.vue
+++ b/components-diy/diy-recommend-code.vue
@@ -104,7 +104,7 @@
         </view>
         <!-- 复制推荐码按钮：白色小按钮，红边框，在推荐码下方居中 -->
         <view v-if="value.showCopyButton !== false" style="margin-top:16rpx;text-align:center;">
-          <view @tap="copyRecommendCode" :style="$util.objToStyle(copyBtnStyleObj({display:'inline-flex',alignItems:'center',borderRadius:'30rpx',padding:'0 32rpx',height:'60rpx',gap:'8rpx'}))">
+          <view @tap="copyRecommendCode" :style="$util.objToStyle(copyBtnStyleObj({display:'inline-flex',alignItems:'center',borderRadius:'15px',padding:'0 16px',height:'30px',gap:'4px'}))">
             <text style="font-size:22rpx;">📋</text>
             <text :style="$util.objToStyle(copyBtnStyleObj({}, true))">{{ nc.copyButtonText || '复制推荐码' }}</text>
           </view>
@@ -175,7 +175,7 @@
       </view>
       <!-- 复制推荐码按钮：白色小按钮，在虚线框下方、立即分享链接上方 -->
       <view v-if="value.showCopyButton !== false" style="margin-top:14rpx;display:flex;justify-content:center;position:relative;z-index:1;">
-        <view @tap="copyRecommendCode" :style="$util.objToStyle(copyBtnStyleObj({width:'fit-content',height:'60rpx',display:'flex',justifyContent:'center',alignItems:'center',borderRadius:'30rpx',padding:'0 32rpx',gap:'8rpx'}))">
+        <view @tap="copyRecommendCode" :style="$util.objToStyle(copyBtnStyleObj({width:'fit-content',height:'30px',display:'flex',justifyContent:'center',alignItems:'center',borderRadius:'15px',padding:'0 16px',gap:'4px'}))">
           <text style="font-size:22rpx;">📋</text>
           <text :style="$util.objToStyle(copyBtnStyleObj({}, true))">{{ nc.copyButtonText || '复制推荐码' }}</text>
         </view>
@@ -231,7 +231,7 @@
       </view>
       <!-- 复制推荐码按钮：白色小按钮，在虚线框下方、立即分享链接上方，居中 -->
       <view v-if="value.showCopyButton !== false" style="margin-top:14rpx;display:flex;justify-content:center;position:relative;z-index:1;">
-        <view @tap="copyRecommendCode" :style="$util.objToStyle(copyBtnStyleObj({width:'fit-content',height:'60rpx',display:'flex',justifyContent:'center',alignItems:'center',borderRadius:'30rpx',padding:'0 32rpx',gap:'8rpx'}))">
+        <view @tap="copyRecommendCode" :style="$util.objToStyle(copyBtnStyleObj({width:'fit-content',height:'30px',display:'flex',justifyContent:'center',alignItems:'center',borderRadius:'15px',padding:'0 16px',gap:'4px'}))">
           <text style="font-size:22rpx;">📋</text>
           <text :style="$util.objToStyle(copyBtnStyleObj({}, true))">{{ nc.copyButtonText || '复制推荐码' }}</text>
         </view>
@@ -289,7 +289,7 @@
         <!-- 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="$util.objToStyle(copyBtnStyleObj({height:'64rpx',display:'inline-flex',justifyContent:'center',alignItems:'center',borderRadius:'32rpx',padding:'0 24rpx',gap:'6rpx'}))">
+          <view v-if="value.showCopyButton !== false" @tap="copyRecommendCode" :style="$util.objToStyle(copyBtnStyleObj({height:'32px',display:'inline-flex',justifyContent:'center',alignItems:'center',borderRadius:'16px',padding:'0 12px',gap:'3px'}))">
             <text style="font-size:22rpx;">📋</text>
             <text :style="$util.objToStyle(copyBtnStyleObj({}, true))">{{ nc.copyButtonText || '复制推荐码' }}</text>
           </view>
@@ -805,7 +805,9 @@ export default {
    * 复制按钮样式对象(跟随后端 diyData.codeColor)
    * 返回对象,用 $util.objToStyle 转字符串,
    * 兼容 H5/小程序/APP/鸿蒙
-   * @param {Object} preset 预设差异(可选,如 {borderRadius:'32rpx',height:'64rpx'})
+   * 注意:使用 px 而非 rpx 单位,避免鸿蒙元服务对动态 style 中 rpx
+   * 解析异常的问题。1rpx = 0.5px,直接换算成 px 数值。
+   * @param {Object} preset 预设差异(可选,如 {borderRadius:'16px',height:'32px'})
    * @param {Boolean} textOnly 只返回文字样式(用于内嵌 text 节点)
    */
   copyBtnStyleObj(preset, textOnly) {
@@ -813,14 +815,14 @@ export default {
     const codeColor = (v && v.codeColor) ? v.codeColor : '#DC143C';
     if (textOnly) {
       return Object.assign({
-        fontSize: '24rpx',
+        fontSize: '12px',  // 原 24rpx → 12px
         color: codeColor,
         fontWeight: '600'
       }, preset || {});
     }
     const base = {
       background: '#FFFFFF',
-      border: `2rpx solid ${codeColor}`,
+      border: `1px solid ${codeColor}`,  // 原 2rpx → 1px
       boxSizing: 'border-box'
     };
     return Object.assign(base, preset || {});