wanda-bm-guide/src/views/equipment/bottomLayer.vue

<template>
    <div class='bottom-layer'>
        <span class='icon-style'>
            <a-icon type='poweroff' />
        </span>
        <span class='icon-style'>
            <a-icon type='aliyun' />
        </span>
        <span class='icon-style'>
            <a-icon type='minus-square' />
        </span>
        <span class='slider'>
            <a-slider class='slider-style' id='test' :default-value='30' />
        </span>

        <span class='icon-style'>
            <a-icon type='plus-square' />
        </span>
    </div>
</template>

<script>
export default {}
</script>

<style lang="less" scoprd>
.bottom-layer {
    position: fixed;
    width: 360px;
    height: 40px;
    line-height: 40px;
    bottom: 40px;
    z-index: 2;
    background: #ffffff;
    left: 30%;
    display: flex;
    .icon-style {
        width: 40px;
        display: inline-block;
        text-align: center;
        border-right: 1px solid #e4e5e7;
    }
    .slider {
        width: 200px;
        display: inline-block;
        text-align: center;
        border-right: 1px solid #e4e5e7;
        .slider-style {
            display: inline-block;
            width: 180px;
        }
    }
}
</style>