Browse Source

调整规格信息样式:分离规格和价格显示,修改字体为阿里巴巴普惠体,调整颜色和粗细

pull/12/head
Default User 2 months ago
parent
commit
686f0699e3
  1. 1
      pages/goods-detail/goods-detail.js
  2. 6
      pages/goods-detail/goods-detail.wxml
  3. 30
      pages/goods-detail/goods-detail.wxss

1
pages/goods-detail/goods-detail.js

@ -436,6 +436,7 @@ function processWeightAndQuantityData(weightSpecString, quantityString, specStri
result.push({
weightSpec: weightSpecDisplay,
quantity: quantity,
price: price,
display: display
});
}

6
pages/goods-detail/goods-detail.wxml

@ -117,7 +117,11 @@
<view class="wq-list">
<block wx:for="{{goodsDetail.weightQuantityData}}" wx:key="index">
<view class="wq-item">
<text class="wq-text">{{item.display}}</text>
<!-- 分离规格和价格显示 -->
<text class="wq-text">
<text class="wq-spec">{{item.weightSpec}}【{{item.quantity}}件】</text>
<text class="wq-price" wx:if="{{item.price}}">¥{{item.price}}元</text>
</text>
</view>
</block>
</view>

30
pages/goods-detail/goods-detail.wxss

@ -1,5 +1,14 @@
/* pages/goods-detail/goods-detail.wxss */
/* 引入阿里巴巴普惠体 */
@font-face {
font-family: 'AlibabaPuHuiTi';
src: url('https://at.alicdn.com/t/c/font_4596467_7k3j4t9v1i.woff2') format('woff2'),
url('https://at.alicdn.com/t/c/font_4596467_7k3j4t9v1i.woff') format('woff');
font-weight: normal;
font-style: normal;
}
/* 页面容器 */
.goods-detail-page {
min-height: 100vh;
@ -7,6 +16,11 @@
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'PingFang SC', 'Hiragino Sans GB', 'Microsoft YaHei', sans-serif;
}
/* 规格信息字体设置 */
.goods-detail-content .weight-quantity-info .wq-list .wq-item {
font-family: 'AlibabaPuHuiTi', sans-serif;
}
/* 弹窗显示时固定页面滚动 */
.no-scroll {
overflow: hidden !important;
@ -752,10 +766,22 @@ video.slider-media .wx-video-volume-icon {
}
.wq-text {
font-size: 20px;
color: #595959;
line-height: 1.5;
font-weight: 600;
color: #595959;
}
.wq-spec {
font-size: 20px;
color: #333333;
font-weight: 500;
}
.wq-price {
font-size: 18px;
color: #666666;
font-weight: 400;
margin-left: 10rpx;
}
/* 对比价格弹窗样式 */

Loading…
Cancel
Save