|
|
@@ -11,13 +11,13 @@
|
|
|
<text v-if="Number(productInfo.discountPrice) > 0">【推荐】</text>
|
|
|
{{ productInfo.name}}
|
|
|
</view>
|
|
|
- <button open-type="share" class="tui-share-btn tui-share-position" style="background-color:#EDEDED;">
|
|
|
- <app-tag type="gray" tui-tag-class="tui-tag-share tui-size" shape="circleLeft" size="small" >
|
|
|
- <view class="flex-center" style="padding:8upx 0;">
|
|
|
- <i class="iconfont iconfenxiang"></i>
|
|
|
- <text class="tui-share-text tui-gray">分享</text>
|
|
|
- </view>
|
|
|
- </app-tag>
|
|
|
+ <button
|
|
|
+ open-type="share"
|
|
|
+ class="share-button"
|
|
|
+ @click="shareFn"
|
|
|
+ >
|
|
|
+ <i class="iconfont iconfenxiang"></i>
|
|
|
+ <text class="share-text">分享</text>
|
|
|
</button>
|
|
|
</view>
|
|
|
<view class="shop-express app-color-3" v-if="productInfo.presell == 1">
|
|
|
@@ -220,6 +220,12 @@ export default {
|
|
|
},
|
|
|
hideShare() {
|
|
|
this.showShare = false;
|
|
|
+ },
|
|
|
+ // 分享
|
|
|
+ shareFn() {
|
|
|
+ // #ifdef H5
|
|
|
+ this.showShare = true;
|
|
|
+ // #endif
|
|
|
}
|
|
|
}
|
|
|
};
|
|
|
@@ -243,6 +249,7 @@ export default {
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
+
|
|
|
.shop-intro {
|
|
|
background: #fff;
|
|
|
padding: 30upx 0 10upx 30upx;
|
|
|
@@ -255,21 +262,43 @@ export default {
|
|
|
text-overflow:ellipsis;
|
|
|
white-space: nowrap;
|
|
|
}
|
|
|
- .tui-share-btn {
|
|
|
- display: block;
|
|
|
- background: none;
|
|
|
+ .share-button {
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: center;
|
|
|
+ width: 168upx;
|
|
|
+ height: 84upx;
|
|
|
+ background: linear-gradient(135deg, #ffffff 0%, #f8f9fa 100%);
|
|
|
+ border-radius: 12upx;
|
|
|
+ border: 1upx solid #e1e5e9;
|
|
|
+ box-shadow: 0 2upx 8upx rgba(0, 0, 0, 0.08);
|
|
|
+ transition: all 0.3s ease;
|
|
|
margin: 0;
|
|
|
padding: 0;
|
|
|
- border-radius: 0;
|
|
|
- .tui-share-text {
|
|
|
- padding-left: 4upx;
|
|
|
- color: $fontColor3;
|
|
|
+
|
|
|
+ &:active {
|
|
|
+ background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
|
|
|
+ box-shadow: 0 1upx 4upx rgba(0, 0, 0, 0.12);
|
|
|
+ }
|
|
|
+
|
|
|
+ .iconfont {
|
|
|
+ font-size: 32upx;
|
|
|
+ color: #4a5568;
|
|
|
+ text-shadow: 0 1upx 2upx rgba(255, 255, 255, 0.8);
|
|
|
+ margin-right: 8upx;
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ line-height: 1;
|
|
|
+ }
|
|
|
+
|
|
|
+ .share-text {
|
|
|
+ font-size: 28upx;
|
|
|
+ color: #4a5568;
|
|
|
+ font-weight: 500;
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ line-height: 1;
|
|
|
}
|
|
|
- }
|
|
|
- .iconfenxiang {
|
|
|
- font-size: 26upx;
|
|
|
- color: $fontColor3;
|
|
|
- margin-right: 6upx;
|
|
|
}
|
|
|
}
|
|
|
}
|
