fix: 补贴价飘带文字居中 + 价格与元留间距

实测底图(image_bj_text.png)右侧约 18% 是蓝色箭头、左侧橙色才是文字槽。
旧代码 content-box 把飘带拉宽、箭头右移,文字左贴留下右侧空档=太靠左。
改法:盒子改 border-box 精确等于底图宽,右侧 padding 让出箭头区,
文字在橙色槽内 justify-content 居中;拆成 标签/¥/价格/元 四段控制间距,
价格与"元"间留 8rpx(375 屏约 4px),去掉导致数字上偏的 margin-bottom。
实测:文字居中、左留白与右留白均衡、元与价格有明显间距、不压蓝色箭头。

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
This commit is contained in:
xuchao
2026-07-21 16:07:57 +08:00
co-authored by Claude Opus 4.8
parent 97b22650ad
commit 7dee45aeed
+23 -6
View File
@@ -11,8 +11,8 @@
<view class="r_text">{{item.subTypeId}}</view> <view class="r_text">{{item.subTypeId}}</view>
<view class="nr_origin">原售价<text <view class="nr_origin">原售价<text
class="nr_origin_num">{{(item.price/100).toFixed(0)}}</text>元</view> class="nr_origin_num">{{(item.price/100).toFixed(0)}}</text>元</view>
<view class="p_text">会员补贴价¥<text <view class="p_text"><text class="p_label">会员补贴价</text><text class="p_symbol">¥</text><text
class="p_num">{{(item.unitPrice/100).toFixed(0)}}</text>元</view> class="p_num">{{(item.unitPrice/100).toFixed(0)}}</text><text class="p_unit">元</text></view>
</view> </view>
</view> </view>
<!-- xuchao: 订单悬浮按钮 --> <!-- xuchao: 订单悬浮按钮 -->
@@ -122,24 +122,41 @@
.p_text { .p_text {
position: absolute; position: absolute;
bottom: 0rpx; bottom: 0rpx;
width: 240rpx;
right: 0rpx; right: 0rpx;
// xuchao: border-box 让盒子精确等于底图宽度;右侧 padding 让出蓝色箭头区,文字在橙色槽内居中
width: 250rpx;
height: 50rpx; height: 50rpx;
box-sizing: border-box;
background: url('https://aliyunoss.hn12301.net/xgh/image_bj_text.png'); background: url('https://aliyunoss.hn12301.net/xgh/image_bj_text.png');
background-size: 100% 100%; background-size: 100% 100%;
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: center;
color: #fff; color: #fff;
font-size: 16rpx; padding-left: 14rpx;
padding-left: 18rpx; padding-right: 51rpx;
border-radius: 4rpx; border-radius: 4rpx;
} }
.p_label {
font-size: 16rpx;
}
.p_symbol {
font-size: 18rpx;
margin: 0 2rpx 0 6rpx;
}
.p_num { .p_num {
font-size: 32rpx; font-size: 32rpx;
font-style: italic; font-style: italic;
font-weight: bold; font-weight: bold;
margin-bottom: 8rpx; }
.p_unit {
font-size: 16rpx;
// xuchao: 价格与"元"之间留出明显间距(8rpx ≈ 375 屏 4px)
margin-left: 8rpx;
} }
.nr_origin { .nr_origin {