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="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 {
|
||||||
|
|||||||
Reference in New Issue
Block a user