|
@@ -172,15 +172,12 @@
|
|
|
<!-- 底部操作栏:必须与 scroll-view 平级,否则 iOS 上 position: fixed 在 scroll-view 内不生效(按钮不显示) -->
|
|
<!-- 底部操作栏:必须与 scroll-view 平级,否则 iOS 上 position: fixed 在 scroll-view 内不生效(按钮不显示) -->
|
|
|
<view class="bottom-bar" v-if="!loading && product.id">
|
|
<view class="bottom-bar" v-if="!loading && product.id">
|
|
|
<view class="action-left">
|
|
<view class="action-left">
|
|
|
- <view class="action-extra">
|
|
|
|
|
- <button class="btn-share" @click="onShareProduct"><image class="btn-share-icon" src="/static/icons/poster.png" mode="aspectFit" /><text class="btn-share-text">生成海报</text></button>
|
|
|
|
|
- </view>
|
|
|
|
|
|
|
+ <button class="btn-share-friend" open-type="share"><text class="btn-share-friend-icon">📤</text></button>
|
|
|
|
|
+ <button class="btn-share" @click="onShareProduct"><image class="btn-share-icon" src="/static/icons/poster.png" mode="aspectFit" /><text class="btn-share-text">海报</text></button>
|
|
|
</view>
|
|
</view>
|
|
|
<view class="action-right">
|
|
<view class="action-right">
|
|
|
- <view class="action-extra">
|
|
|
|
|
- <button class="btn-cart" @click="onAddToCart">加入购物车</button>
|
|
|
|
|
- </view>
|
|
|
|
|
- <button class="btn-buy" @click="onBuy">{{ buyButtonText }}</button>
|
|
|
|
|
|
|
+ <button class="btn-cart" @click="onAddToCart"><text class="btn-cart-icon">🛒</text></button>
|
|
|
|
|
+ <button class="btn-buy" @click="onBuy">{{ buyButtonText }}</button>
|
|
|
</view>
|
|
</view>
|
|
|
</view>
|
|
</view>
|
|
|
|
|
|
|
@@ -893,7 +890,7 @@ export default {
|
|
|
}
|
|
}
|
|
|
.content {
|
|
.content {
|
|
|
height: calc(100vh - 120rpx);
|
|
height: calc(100vh - 120rpx);
|
|
|
- padding-bottom: 120rpx;
|
|
|
|
|
|
|
+ padding-bottom: 140rpx;
|
|
|
}
|
|
}
|
|
|
.cover-swiper {
|
|
.cover-swiper {
|
|
|
width: 100%;
|
|
width: 100%;
|
|
@@ -1264,7 +1261,7 @@ export default {
|
|
|
bottom: 0;
|
|
bottom: 0;
|
|
|
left: 0;
|
|
left: 0;
|
|
|
right: 0;
|
|
right: 0;
|
|
|
- height: 100rpx;
|
|
|
|
|
|
|
+ height: 120rpx;
|
|
|
background: $app-surface;
|
|
background: $app-surface;
|
|
|
border-top: 1rpx solid $facade-hairline-2;
|
|
border-top: 1rpx solid $facade-hairline-2;
|
|
|
display: flex;
|
|
display: flex;
|
|
@@ -1299,47 +1296,51 @@ export default {
|
|
|
.btn-buy {
|
|
.btn-buy {
|
|
|
background: linear-gradient(135deg, $brand-primary, $brand-primary-light);
|
|
background: linear-gradient(135deg, $brand-primary, $brand-primary-light);
|
|
|
color: $app-surface;
|
|
color: $app-surface;
|
|
|
- font-size: calc(28rpx * var(--font-scale, 1));
|
|
|
|
|
|
|
+ font-size: calc(30rpx * var(--font-scale, 1));
|
|
|
font-weight: bold;
|
|
font-weight: bold;
|
|
|
- padding: 0 60rpx;
|
|
|
|
|
- height: 72rpx;
|
|
|
|
|
- line-height: 72rpx;
|
|
|
|
|
|
|
+ padding: 0 56rpx;
|
|
|
|
|
+ height: 88rpx;
|
|
|
|
|
+ line-height: 88rpx;
|
|
|
border-radius: 24rpx;
|
|
border-radius: 24rpx;
|
|
|
border: none;
|
|
border: none;
|
|
|
}
|
|
}
|
|
|
.btn-buy::after {
|
|
.btn-buy::after {
|
|
|
border: none;
|
|
border: none;
|
|
|
}
|
|
}
|
|
|
-.action-extra {
|
|
|
|
|
- display: flex;
|
|
|
|
|
- align-items: center;
|
|
|
|
|
- margin-right: 20rpx;
|
|
|
|
|
-}
|
|
|
|
|
.btn-favorite {
|
|
.btn-favorite {
|
|
|
font-size: calc(40rpx * var(--font-scale, 1));
|
|
font-size: calc(40rpx * var(--font-scale, 1));
|
|
|
margin-right: 16rpx;
|
|
margin-right: 16rpx;
|
|
|
padding: 0 8rpx;
|
|
padding: 0 8rpx;
|
|
|
}
|
|
}
|
|
|
.btn-cart {
|
|
.btn-cart {
|
|
|
|
|
+ width: 88rpx;
|
|
|
|
|
+ height: 88rpx;
|
|
|
background: $app-surface;
|
|
background: $app-surface;
|
|
|
color: $brand-primary;
|
|
color: $brand-primary;
|
|
|
border: 2rpx solid $brand-primary;
|
|
border: 2rpx solid $brand-primary;
|
|
|
- font-size: calc(28rpx * var(--font-scale, 1));
|
|
|
|
|
- padding: 0 24rpx;
|
|
|
|
|
- height: 72rpx;
|
|
|
|
|
- line-height: 72rpx;
|
|
|
|
|
border-radius: 24rpx;
|
|
border-radius: 24rpx;
|
|
|
|
|
+ margin-right: 16rpx;
|
|
|
|
|
+ display: flex;
|
|
|
|
|
+ align-items: center;
|
|
|
|
|
+ justify-content: center;
|
|
|
|
|
+ padding: 0;
|
|
|
|
|
+ line-height: 1;
|
|
|
|
|
+ flex-shrink: 0;
|
|
|
}
|
|
}
|
|
|
.btn-cart::after {
|
|
.btn-cart::after {
|
|
|
border: none;
|
|
border: none;
|
|
|
}
|
|
}
|
|
|
|
|
+.btn-cart-icon {
|
|
|
|
|
+ font-size: calc(44rpx * var(--font-scale, 1));
|
|
|
|
|
+ line-height: 1;
|
|
|
|
|
+}
|
|
|
.btn-share {
|
|
.btn-share {
|
|
|
background: $app-surface;
|
|
background: $app-surface;
|
|
|
border: 2rpx solid $brand-primary;
|
|
border: 2rpx solid $brand-primary;
|
|
|
- font-size: calc(24rpx * var(--font-scale, 1));
|
|
|
|
|
- padding: 0 24rpx;
|
|
|
|
|
- height: 64rpx;
|
|
|
|
|
- line-height: 64rpx;
|
|
|
|
|
|
|
+ font-size: calc(26rpx * var(--font-scale, 1));
|
|
|
|
|
+ padding: 0 28rpx;
|
|
|
|
|
+ height: 80rpx;
|
|
|
|
|
+ line-height: 80rpx;
|
|
|
border-radius: 24rpx;
|
|
border-radius: 24rpx;
|
|
|
margin-right: 16rpx;
|
|
margin-right: 16rpx;
|
|
|
display: flex;
|
|
display: flex;
|
|
@@ -1348,8 +1349,30 @@ export default {
|
|
|
font-weight: 600;
|
|
font-weight: 600;
|
|
|
text-align: center;
|
|
text-align: center;
|
|
|
}
|
|
}
|
|
|
-.btn-share-icon { width: calc(32rpx * var(--font-scale, 1)); height: calc(32rpx * var(--font-scale, 1)); margin-right: 6rpx; flex-shrink: 0; }
|
|
|
|
|
-.btn-share-text { font-size: calc(24rpx * var(--font-scale, 1)); }
|
|
|
|
|
|
|
+.btn-share-icon { width: calc(36rpx * var(--font-scale, 1)); height: calc(36rpx * var(--font-scale, 1)); margin-right: 8rpx; flex-shrink: 0; }
|
|
|
|
|
+.btn-share-text { font-size: calc(26rpx * var(--font-scale, 1)); }
|
|
|
|
|
+.btn-share-friend {
|
|
|
|
|
+ width: 88rpx;
|
|
|
|
|
+ height: 88rpx;
|
|
|
|
|
+ background: $app-surface;
|
|
|
|
|
+ border: 2rpx solid $brand-primary;
|
|
|
|
|
+ border-radius: 24rpx;
|
|
|
|
|
+ margin-right: 16rpx;
|
|
|
|
|
+ display: flex;
|
|
|
|
|
+ align-items: center;
|
|
|
|
|
+ justify-content: center;
|
|
|
|
|
+ color: $brand-primary;
|
|
|
|
|
+ padding: 0;
|
|
|
|
|
+ line-height: 1;
|
|
|
|
|
+ flex-shrink: 0;
|
|
|
|
|
+}
|
|
|
|
|
+.btn-share-friend::after {
|
|
|
|
|
+ border: none;
|
|
|
|
|
+}
|
|
|
|
|
+.btn-share-friend-icon {
|
|
|
|
|
+ font-size: calc(44rpx * var(--font-scale, 1));
|
|
|
|
|
+ line-height: 1;
|
|
|
|
|
+}
|
|
|
|
|
|
|
|
/* 配送信息 */
|
|
/* 配送信息 */
|
|
|
.delivery-info-section {
|
|
.delivery-info-section {
|