fix(diy-recommend-code): 复制按钮 style 单位 rpx 改 px 适配鸿蒙元服务
之前复制按钮用 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, 鸿蒙元服务全平台兼容。
This commit is contained in:
@@ -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 || {});
|
||||
|
||||
Reference in New Issue
Block a user