Browse Source

优化前端商品详情页面

Xfy
User 5 days ago
parent
commit
7a2bedad1e
  1. 4
      pages/goods-detail/goods-detail.wxml
  2. 16
      pages/goods-detail/goods-detail.wxss

4
pages/goods-detail/goods-detail.wxml

@ -73,7 +73,7 @@
<!-- 商品基本信息 -->
<view class="goods-info">
<view style="display: flex; flex-direction: column; margin-bottom: 10rpx;">
<view style="display: flex; align-items: center; justify-content: space-between; margin-bottom: 8rpx;">
<view style="display: flex; align-items: center; justify-content: space-between; margin-bottom: 0rpx;">
<view style="display: flex; align-items: center; flex: 1;">
<view wx:if="{{goodsDetail.status === 'sold_out'}}" style="display: inline-block; margin-right: 10rpx; font-size: 18rpx; color: #fff; background: linear-gradient(135deg, #8c8c8c 0%, #a6a6a6 100%); padding: 4rpx 10rpx; border-radius: 15rpx; vertical-align: middle; backdrop-filter: blur(10rpx); border: 1rpx solid rgba(255, 255, 255, 0.3); box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.15), inset 0 1rpx 0 rgba(255, 255, 255, 0.5); text-shadow: 0 1rpx 2rpx rgba(0, 0, 0, 0.2); font-weight: bold; margin-top: -20rpx;">售空</view>
<view wx:elif="{{goodsDetail.supplyStatus}}" style="display: inline-block; margin-right: 10rpx; font-size: 18rpx; color: #fff; background: rgba(218, 165, 32, 0.8); padding: 4rpx 10rpx; border-radius: 15rpx; vertical-align: middle; backdrop-filter: blur(10rpx); border: 1rpx solid rgba(255, 255, 255, 0.3); box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.15), inset 0 1rpx 0 rgba(255, 255, 255, 0.5); text-shadow: 0 1rpx 2rpx rgba(0, 0, 0, 0.2); font-weight: bold; margin-top: -20rpx;">{{goodsDetail.supplyStatus}}</view>
@ -86,7 +86,7 @@
</view>
</view>
</view>
<view class="source-description" style="padding: 0rpx 16rpx; background: #f5f5f5; border-radius: 8rpx; font-size: 28rpx; color: #333; margin-top: 4rpx; height: 68rpx; display: block; box-sizing: border-box">
<view class="source-description" style="background: #f5f5f5; font-size: 28rpx; color: #333; height: 43rpx; display: block; box-sizing: border-box">
{{goodsDetail.description || '暂无描述'}}
</view>
</view>

16
pages/goods-detail/goods-detail.wxss

@ -250,7 +250,7 @@ video.slider-media .wx-video-volume-icon {
/* 商品详细信息网格 */
.info-grid {
background-color: #ffffff;
margin: 8px 0;
margin: 8rpx 16rpx;
padding: 12px;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
}
@ -313,9 +313,9 @@ video.slider-media .wx-video-volume-icon {
/* 联系信息 */
.contact-info {
margin: 8px 16px; /* 减小外边距 */
padding: 12px; /* 减小内边距 */
border-radius: 10px; /* 减小圆角 */
margin: 8rpx 16rpx;
padding: 12px;
border-radius: 10px;
background: #ffffff;
border: 1px solid #d6e4ff;
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
@ -724,8 +724,8 @@ video.slider-media .wx-video-volume-icon {
/* 净重件数对应信息样式 */
.weight-quantity-info {
background-color: #ffffff;
margin: 16rpx;
padding: 24rpx;
margin: 8rpx 16rpx;
padding: 16rpx;
border-radius: 12rpx;
box-shadow: 0 2rpx 12rpx rgba(0, 0, 0, 0.08);
border: 1rpx solid #f0f0f0;
@ -1141,7 +1141,7 @@ video.slider-media .wx-video-volume-icon {
/* 内部信息样式 */
.internal-info {
margin: 8px 16px;
margin: 8rpx 16rpx;
padding: 16px;
border-radius: 10px;
background: #f0f5ff;
@ -2263,7 +2263,7 @@ video.slider-media .wx-video-volume-icon {
/* 内部信息样式 */
.internal-info {
margin: 8px 16px;
margin: 8rpx 16rpx;
padding: 16px;
border-radius: 10px;
background: #f0f5ff;

Loading…
Cancel
Save