分享按钮的优化

mallApp/src/pages/goods/detail.vue

@@ -24,6 +24,7 @@
            @click="shareFn"
          >
            <i class="iconfont iconfenxiang"></i>
+           <text class="share-text">分享</text>
          </button>
       </view>
       <view class="shop-express app-color-3">
@@ -262,7 +263,7 @@ export default {
          display: flex;
          align-items: center;
          justify-content: center;
-         width: 112upx;
+         width: 168upx;
          height: 84upx;
          background: linear-gradient(135deg, #ffffff 0%, #f8f9fa 100%);
          border-radius: 12upx;
@@ -272,16 +273,28 @@ export default {
          margin: 0;
          padding: 0;
          
-         &:active {
-           transform: scale(0.95);
-           background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
-           box-shadow: 0 1upx 4upx rgba(0, 0, 0, 0.12);
-         }
+                   &: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;
          }
        }
     }

mallApp/src/pages/item/detail.vue

@@ -11,13 +11,13 @@
           <text v-if="Number(data.discountPrice) > 0">【推荐】</text>
           {{ data.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="data.presell == 1">
@@ -207,6 +207,12 @@ export default {
     },
     hideShare() {
       this.showShare = false;
+    },
+    // 分享
+    shareFn() {
+      // #ifdef H5
+      this.showShare = true;
+      // #endif
     }
   }
 };
@@ -239,36 +245,50 @@ export default {
       .tui-pro-title {
         width: 80%;
       }
-      .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;
       }
     }
     .shop-express {
       padding-right: 30upx;
       @include disFlex(center, space-between);
-      .prompt-text {
-        margin-right: 4upx;
-      }
-    }
-  }
-  .shop-desc {
-    .module-det {
-      // padding: 24upx;
-      line-height: 48upx;
     }
   }
+
 }
 </style>