分享样式调整

litemall-wx/pages/goods/goods.wxml

@@ -5,10 +5,27 @@
   </swiper-item>
  </swiper>
  <!-- 分享 -->
- <view class="service-policy" wx:if="{{!isGroupon}}">
-  <button class="savesharebtn" bindtap="saveShare">分享朋友圈</button>
-  <button class="sharebtn" open-type="share">分享给朋友</button>
- </view>
+  <view class='goods_name'>
+    <view class='goods_name_left'>{{goods.name}}</view>
+    <view class="goods_name_right" bindtap="shareFriendOrCircle">分享</view>
+  </view>
+  <view class="share-pop-box" hidden="{{!openShare}}">
+    <view class="share-pop">
+      <view class="close" bindtap="closeShare">
+        <image class="icon" src="/static/images/icon_close.png"></image>
+      </view>
+      <view class='share-info'>
+        <button class="sharebtn" open-type="share" wx:if="{{!isGroupon}}">
+          <image class='sharebtn_image' src='/static/images/wechat.png'></image>
+          <view class='sharebtn_text'>分享给好友</view>
+        </button>
+        <button class="savesharebtn" bindtap="saveShare" wx:if="{{!isGroupon}}">
+          <image class='sharebtn_image' src='/static/images/friend.png'></image>
+          <view class='sharebtn_text'>发朋友圈</view>
+        </button>
+      </view>
+    </view>
+  </view>
  <view class="goods-info">
   <view class="c">
    <text class="name">{{goods.name}}</text>

litemall-wx/pages/goods/goods.wxss

@@ -790,51 +790,154 @@
   background-size: 55rpx auto;
 }
 
-.contact .name {
+
+/*分享样式*/
+.goods_name {
+  /* border: 1px solid black; */
+  height: 86rpx;
+  line-height: 86rpx;
+  border-bottom: 1px solid #fafafa;
+}
+
+.goods_name_left {
+  /* border: 1px solid #757575; */
+  float: left;
+  height: 86rpx;
+  font-weight: 550;
+  line-height: 86rpx;
+  margin-left: 35rpx;
+  font-size: 38rpx;
+  letter-spacing: 1rpx;
+}
+
+.goods_name_right {
+  float: right;
+  font-weight: 550;
+  margin-top: 28rpx;
+  width: 140rpx;
+  height: 80rpx;
+  line-height: 82rpx;
+  padding: 0;
+  margin: 0;
+  margin-right: 0rpx;
+  text-align: center;
+  font-size: 25rpx;
+  color: #f4f4f4;
+  border-top-left-radius: 50rpx;
+  border-bottom-left-radius: 50rpx;
+  border-top-right-radius: 0rpx;
+  border-bottom-right-radius: 0rpx;
+  letter-spacing: 3rpx;
+  /* background-image: linear-gradient(to right, #ff7701 100%); */
+  background-image: linear-gradient(to right, #9a9ba1 0%, #9a9ba1 100%);
+}
+
+.share-pop-box {
+  width: 100%;
+  height: 100%;
+  position: fixed;
+  background: rgba(0, 0, 0, 0.5);
+  z-index: 8;
+  bottom: 0;
+  /* display: none; */
+}
+
+.share-pop {
+  width: 100%;
+  height: auto;
+  max-height: 780rpx;
+  padding: 31.25rpx;
+  background: #fff;
+  position: fixed;
+  z-index: 9;
+  bottom: 100rpx;
+}
+
+.share-pop .close {
+  position: absolute;
+  width: 48rpx;
+  height: 48rpx;
+  right: 31.25rpx;
+  top: 31.25rpx;
+}
+
+.share-pop .close .icon {
+  width: 48rpx;
+  height: 48rpx;
+}
+
+.share-pop .share-info {
+  width: 100%;
+  height: 225rpx;
+  overflow: hidden;
+  margin-bottom: 41.5rpx;
+}
+
+.sharebtn {
+  top: 75rpx;
+  background: none !important;
   font-size: 32rpx;
-  max-width: 80rpx;
-  color: #fff;
+  color: #fff !important;
+  border-radius: 0%;
+  width: 175rpx;
+  height: 150rpx;
   text-align: center;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  flex-wrap: wrap;
+  float: left;
+  background: #fff;
+  border-bottom: 0px solid #fafafa;
+  margin-left: 15%;
 }
 
-.service-policy {
- width: 100%;
- height: 96rpx;
- /* background: #d3b676; */
- border: 2px solid #fff;
- /* align-items: center; */
+.sharebtn::after {
+  border: none;
+  border-radius: 0%;
 }
 
-.service-policy .sharebtn {
- width: 49.5%;
- float: right;
- border: none;
- height: 80rpx;
- font-size: 32rpx;
- background: #d3b676;
- text-align: center;
- color: #fff;
- border-radius:0%;
+.savesharebtn {
+  top: 75rpx;
+  background: none !important;
+  font-size: 32rpx;
+  color: #fff !important;
+  border-radius: 0%;
+  width: 175rpx;
+  height: 150rpx;
+  text-align: center;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  flex-wrap: wrap;
+  float: right;
+  background: #fff;
+  border-bottom: 0px solid #fafafa;
+  margin-right: 15%;
 }
 
-.service-policy .sharebtn::after {
- border: none;
- border-radius:0%;
+.savesharebtn::after {
+  border: none;
+  border-radius: 0%;
 }
 
-.service-policy .savesharebtn {
- width: 49.5%;
- float: left;
- border: none;
- height: 80rpx;
- font-size: 32rpx;
- background: #d3b676;
- text-align: center;
- color: #fff;
- border-radius:0%;
-}
-
-.service-policy .savesharebtn::after {
- border: none;
- border-radius:0%;
+.sharebtn_image {
+  /* border: 1px solid #757575; */
+  width: 128rpx;
+  height: 128rpx;
+  margin-top: 0rpx;
+}
+.sharebtn_text {
+  /* border: 1px solid #757575; */
+  width: 150rpx;
+  margin-bottom: 2rpx;
+  height: 20rpx;
+  line-height: 20rpx;
+  font-size: 20rpx;
+  color: #555;
+}
+.separate {
+  background: #e0e3da;
+  width: 100%;
+  height: 6rpx;
 }