购物底栏

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>

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,19 +132,8 @@ export default {
   }
 }
 
-// 分享按钮, 子绝父相, 透明度0
+.detail {
-.open_type_button_wrap {
+  padding-bottom: 94rpx;
-  position: relative;
-  .open_type_button {
-    position: absolute;
-    opacity: 0;
-    left: 0;
-    top: 0;
-    width: 100%;
-    height: 100%;
-  }
-}
-
   .detail_title {
     height: 80rpx;
     display: flex;
@@ -136,9 +141,50 @@ export default {
     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>