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