固定底部菜单样式

  

 

 

 

<view class="btm_tool">

    <view class="tool_item">

      <view class="iconfont icon-kefu"></view>

      <view> 联系客服 </view> 

      <button open-type="contact"></button> 

    </view>

     <view class="tool_item">

      <view class="iconfont icon-share-line"></view>

      <view> 分享 </view> 

      <button open-type="share"></button>

    </view>

   

     <navigator class="tool_item" 

        open-type="switchTab"

        url="/pages/cart/index" > 

      <view class="iconfont icon-gouwuche"></view>

      <view> 购物车 </view> 

    </navigator>

    <view class="tool_item btn_cart"> 

      <view> 加入购物车 </view> 

    </view>

    <view class="tool_item btn_buy"> 

      <view> 立即购买 </view> 

    </view>

 

  </view>

 

/* pages/goods_detail/index.wxss */

page {

  padding-bottom: 90rpx;

}

.detail_swiper swiper {

  height: 60vw;

  text-align: center;

}

.detail_swiper swiper image {

  width: 60%;

}

.goods_price {

  padding: 15rpx;

  font-size: 32rpx;

  font-weight: 600;

  color: var(--themeColor);

}

.goods_name_row {

  border-top: 5rpx solid #dedede;

  border-bottom: 5rpx solid #dedede;

  padding: 10rpx 0;

  display: flex;

}

.goods_name_row .goods_name {

  flex: 5;

  color: #000;

  font-size: 30rpx;

  padding: 0 10rpx;

  display: -webkit-box;

  overflow: hidden;

  -webkit-box-orient: vertical;

  -webkit-line-clamp: 2;

}

.goods_name_row .goods_collect {

  flex: 1;

  display: flex;

  flex-direction: column;

  align-items: center;

  justify-content: center;

  border-left: 1px solid #000;

}

.goods_info .goods_info_title {

  font-size: 32rpx;

  color: var(--themeColor);

  font-weight: 600;

  padding: 20rpx;

}

.btm_tool {

  border-top: 1px solid #ccc;

  position: fixed;

  left: 0;

  bottom: 0;

  width: 100%;

  height: 90rpx;

  background-color: #fff;

  display: flex;

}

.btm_tool .tool_item {

  flex: 1;

  display: flex;

  flex-direction: column;

  justify-content: center;

  align-items: center;

  font-size: 24rpx;

  position: relative;

}

.btm_tool .tool_item button {

  position: absolute;

  top: 0;

  left: 0;

  width: 100%;

  height: 100%;

  opacity: 0;

}

.btm_tool .btn_cart {

  flex: 2;

  display: flex;

  flex-direction: column;

  justify-content: center;

  align-items: center;

  background-color: #ffa500;

  color: #fff;

  font-size: 30rpx;

  font-weight: 600;

}

.btm_tool .btn_buy {

  flex: 2;

  display: flex;

  flex-direction: column;

  justify-content: center;

  align-items: center;

  background-color: #eb4450;

  color: #fff;

  font-size: 30rpx;

  font-weight: 600;

}