分享按钮

mallApp/src/pages/goods/detail.vue

@@ -18,23 +18,9 @@
       </view>
       <view class="tui-pro-titbox">
         <view class="tui-pro-title app-size-32">{{ data.name }}</view>
-        <button
-          open-type="share"
-          class="tui-share-btn tui-share-position"
-          @click="shareFn"
-        >
-          <app-tag
-            type="gray"
-            tui-tag-class="tui-tag-share tui-size"
-            shape="circleLeft"
-            size="small"
-          >
-            <view class="flex-center">
-              <i class="iconfont iconfenxiang"></i>
-              <text class="tui-share-text tui-gray">分享</text>
-            </view>
-          </app-tag>
-        </button>
+                 <view class="share-button" @click="shareFn">
+           <i class="iconfont iconfenxiang"></i>
+         </view>
       </view>
       <view class="shop-express app-color-3">
         <view>线下门店</view>
@@ -265,22 +251,27 @@ export default {
       .tui-pro-title {
         width: 80%;
       }
-      .tui-share-btn {
-        display: block;
-        background: none;
-        margin: 0;
-        padding: 0;
-        border-radius: 0;
-        .tui-share-text {
-          padding-left: 4upx;
-          color: $fontColor3;
-        }
-      }
-      .iconfenxiang {
-        font-size: 26upx;
-        color: $fontColor3;
-        margin-right: 6upx;
-      }
+             .share-button {
+         display: flex;
+         align-items: center;
+         justify-content: center;
+         width: 112upx;
+         height: 56upx;
+         background: #f0f2f5;
+         border-radius: 12upx;
+         border: 1upx solid #e4e7ed;
+         transition: all 0.2s ease;
+         
+         &:active {
+           transform: scale(0.95);
+           background: #e4e7ed;
+         }
+         
+         .iconfont {
+           font-size: 28upx;
+           color: #606266;
+         }
+       }
     }
     .shop-express {
       padding-right: 30upx;