| | |
|---|
| | | <image class="hero-image" :src="productImage" mode="aspectFill" @error="replaceProductImage"></image> |
|---|
| | | <view class="hero-shade"></view> |
|---|
| | | </view> |
|---|
| | | <view v-if="detailImages.length > 0" class="product-image-gallery"> |
|---|
| | | <image v-for="(imageUrl, index) in detailImages" :key="index" :src="imageUrl" mode="widthFix" @error="replaceDetailImage(index)"></image> |
|---|
| | | </view> |
|---|
| | | |
|---|
| | | <view class="product-summary"> |
|---|
| | | <view class="price-line"><text class="discount-label">折扣价</text><text class="price-symbol">¥</text><text class="price">{{productPrice}}</text><text class="old-price">¥{{productOriginalPrice}}</text><view class="summary-tags"><text class="coupon-tag">券</text><text class="discount-tag">{{productDiscount}}</text></view></view> |
|---|
| | |
|---|
| | | <text v-else-if="productSoldOut" class="product-status">已售罄</text> |
|---|
| | | </view> |
|---|
| | | |
|---|
| | | <view v-if="detailImages.length > 0 || detailText.length > 0" class="detail-card"> |
|---|
| | | <view v-if="detailText.length > 0" class="detail-card"> |
|---|
| | | <text class="card-title">商品详情</text> |
|---|
| | | <view v-if="detailImages.length > 0" class="detail-images"><image v-for="(imageUrl, index) in detailImages" :key="index" :src="imageUrl" mode="widthFix" @error="replaceDetailImage(index)"></image></view> |
|---|
| | | <text v-if="detailText.length > 0" class="detail-description">{{detailText}}</text> |
|---|
| | | <text class="detail-description">{{detailText}}</text> |
|---|
| | | </view> |
|---|
| | | |
|---|
| | | <view class="notice-card"> |
|---|
| | |
|---|
| | | .product-status { display: block; margin-top: 11rpx; color: #E45D3C; font-size: 24rpx; } |
|---|
| | | .detail-card, .notice-card { margin: 16rpx 25rpx 0; padding: 27rpx 27rpx 30rpx; border-radius: 15rpx; background-color: #FFFFFF; } |
|---|
| | | .card-title { display: block; margin-bottom: 23rpx; color: #55575B; font-size: 30rpx; font-weight: 700; } |
|---|
| | | .detail-images image { display: block; width: 100%; margin-bottom: 24rpx; border-radius: 12rpx; } |
|---|
| | | .product-image-gallery { display: flex; padding: 16rpx 25rpx 0; box-sizing: border-box; background-color: #F7F7F7; flex-direction: column; } |
|---|
| | | .product-image-gallery image { display: block; width: 100%; margin-bottom: 16rpx; border-radius: 12rpx; } |
|---|
| | | .detail-description { display: block; color: #626870; font-size: 25rpx; line-height: 43rpx; white-space: pre-wrap; } |
|---|
| | | .notice-item { display: flex; min-height: 105rpx; padding: 19rpx 0; border-bottom-width: 1rpx; border-bottom-style: solid; border-bottom-color: #EEEEEE; flex-direction: row; align-items: flex-start; } |
|---|
| | | .notice-item:last-child { border-bottom-width: 0; } |
|---|
