微信小程序 添加左邊固定浮動框

view：

            <!-- 懸浮框 -->
            <view class="v-fixed-title1">
                <view class="v-fixed-ic">
                    <uni-icons size="6" class="v-fixed-icon" type="chatbubble" color="#ffffff">
                    </uni-icons>

                    <uni-icons size="3" class="v-fixed-icon" type="closeempty" color="#ffffff">
                    </uni-icons>
                </view>
                <view class="v-fixed-text">參會人</view>
            </view>
            <view class="v-fixed-title2">
                <view class="v-fixed-ic">
                    <uni-icons size="6" class="v-fixed-icon" type="compose" color="#ffffff">
                    </uni-icons>
                    <uni-icons size="3" class="v-fixed-icon" type="closeempty" color="#ffffff">
                    </uni-icons>
                </view>
                <view class="v-fixed-text">簽&nbsp;&nbsp;到</view>
            </view>

css：

    .v-fixed-title1 {
        position: fixed;
        top: 30%;
        left: 15rpx;
        width: 130rpx;
        border-radius: 15rpx;
        display: flex;
        flex-direction: column;
        background-color: #8B3E2F;
        padding-left: 15rpx;
    }

    .v-fixed-title2 {
        position: fixed;
        top: 43%;
        left: 15rpx;
        display: flex;
        padding-left: 15rpx;
        border-radius: 15rpx;
        width: 130rpx;
        /*設置容器內部容器的排列方向*/
        flex-direction: column;
        background-color: #8B3E2F;
    }

    .v-fixed-ic {
        display: flex;
        flex-direction: row;
    }

    .v-fixed-text {
        font-size: 28rpx;
        color: #FFFFFF;
    }

效果：