From 0b9fdb5c7a2156fa68f6cd663648ba30991de667 Mon Sep 17 00:00:00 2001
From: "jqtmviyu@gmail.com" <jqtmviyu@gmail.com>
Date: Sat, 27 Feb 2021 18:11:41 +0800
Subject: [PATCH] =?UTF-8?q?=E8=B4=AD=E7=89=A9=E5=BA=95=E6=A0=8F?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/App.vue                             | 13 ++++
 src/pages/goods_detail/goods_detail.vue | 80 +++++++++++++++++++------
 2 files changed, 76 insertions(+), 17 deletions(-)

diff --git a/src/App.vue b/src/App.vue
index 6f62a7a..63f5cee 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -33,4 +33,17 @@
       /* 移除图片标签默认的3px 间隙 */
 	    vertical-align: middle;
     }
+
+    // 分享按钮, 子绝父相, 透明度0
+    .open_type_button_wrap {
+      position: relative;
+      .open_type_button {
+        position: absolute;
+        opacity: 0;
+        left: 0;
+        top: 0;
+        width: 100%;
+        height: 100%;
+      }
+    }
 </style>
diff --git a/src/pages/goods_detail/goods_detail.vue b/src/pages/goods_detail/goods_detail.vue
index 0287d90..f78c33a 100644
--- a/src/pages/goods_detail/goods_detail.vue
+++ b/src/pages/goods_detail/goods_detail.vue
@@ -28,6 +28,22 @@
       <view class="detail_title">图文详情</view>
       <rich-text :nodes="goods_introduce"></rich-text>
     </view>
+
+    <!-- 4.0 底部栏 -->
+    <view class="bottom">
+      <view class="icon_btn open_type_button_wrap">
+        <view class="iconfont icon-kefu"></view>
+        <text class="icon_btn_text">联系客服</text>
+        <button class="open_type_button" open-type="contact">客服按钮</button>
+      </view>
+      <view class="icon_btn">
+        <view class="iconfont icon-gouwuche"></view>
+        <text class="icon_btn_text">购物车</text>
+      </view>
+      <view class="button">加入购物车</view>
+      <view class="button">立即购买</view>
+    </view>
+
   </view>
 </template>
 
@@ -116,29 +132,59 @@ export default {
   }
 }
 
-// 分享按钮, 子绝父相, 透明度0
-.open_type_button_wrap {
-  position: relative;
-  .open_type_button {
-    position: absolute;
-    opacity: 0;
-    left: 0;
-    top: 0;
-    width: 100%;
-    height: 100%;
+.detail {
+  padding-bottom: 94rpx;
+  .detail_title {
+    height: 80rpx;
+    display: flex;
+    font-size: 26rpx;
+    justify-content: center;
+    align-items: center;
   }
 }
 
-.detail_title {
-  height: 80rpx;
-  display: flex;
-  font-size: 26rpx;
-  justify-content: center;
-  align-items: center;
-}
 // 小程序规定，要修改富文本的标签样式，只能通过类选择器修改，不支持HTML标签选择器
 .img {
   /* 覆盖默认基线对齐造成的图片底部缝隙影响 */
   vertical-align: top;
 }
+
+.bottom {
+  height: 94rpx;
+  position: fixed;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  background-color: #fff;
+  display: flex;
+  align-items: center;
+  padding: 20rpx;
+  .icon_btn {
+    flex: 1;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    flex-direction: column;
+    .iconfont {
+      font-size: 40rpx;
+    }
+    .icon_btn_text {
+      font-size: 20rpx;
+    }
+  }
+  .button {
+    width: 196rpx;
+    height: 60rpx;
+    border-radius: 30rpx;
+    color: #fff;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    background-color: #fcaa23;
+    margin: 0 10rpx;
+    &:last-child {
+      background-color: #ea4350;
+    }
+  }
+}
 </style>
\ No newline at end of file