微信小程序--红色圆形数字冒泡（角标）、底部购物车（居底）

红色圆形数字冒泡

效果图：
.wxss

.view_qipao{
  width: 35rpx;
  height: 35rpx;  
  background-color:red;  
  border-radius: 50%;  
  display: flex;
  align-items: center;
  justify-content: center;  
}

.text_qipao{
  color: white;
  font-size: 25rpx;
}

.wxml

<view class="view_qipao">
	<text class="text_qipao" >6</text>
</view>

底部购物车（角标）

效果图：

wxml

<view class="tui-tabbar">

  <view class="img-view-shop">
    <image class="img-shop" src="../../images/icon_shoppingCart.png" />
    <view class="remind-num">1</view>
  </view>


  <view class=" view-amount">￥
    <text class="tui-amount">800</text>
  </view>
  <view class="view-settlement">去结算</view>

</view>

wxss

/* 购物车 */
.tui-tabbar {
  width: calc(100% - 48rpx);
  height: 120rpx;
  background: #fff;
  position: fixed;
  left: 0;
  bottom: 22rpx;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 30rpx;
  box-sizing: border-box;
  font-size: 24rpx;
  z-index: 99999;

  margin: 0 24rpx;
  box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.25);
  border-radius: 60rpx;
}

.img-shop {
  width: 68rpx;
  height: 68rpx;
  margin-left: 18rpx;
}

.img-view-shop {
  position: relative;
}

/* 角标 */
.remind-num {
  border-radius: 50%;
  position: absolute;
  top: 2rpx;
  right: -15rpx;
  font-size: 20rpx;
  text-align: center;
  min-width: 30rpx;
  width: auto;
  line-height: 30rpx;
  height: 30rpx;
  color: #fff;
  z-index: 100;
  background-color: #FE4B32;
}

.view-amount {
  position: absolute;
  left: 152rpx;
}

.tui-amount {
  font-size: 40rpx;
  font-weight: 600;
  color: #333;
}



.view-settlement {
  width: 212rpx;
  height: 72rpx;
  background: #96CC84;
  border-radius: 21px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 36rpx;
  color: #FFFFFF;
  font-weight: 500;
}

封装成组件：
.json导入组件:

"shoppingCart": "../../components/shoppingCart/shoppingCart"

使用：

<shoppingCart wx:if="{{true}}" quantity='8' amount='500'></shoppingCart>

组件下载地址：https://download.csdn.net/download/wy313622821/18418968