网站悬浮框

网站的右侧固定悬浮框是很常见的功能，下面是代码

<template>
    <div id="body">
        <div class="suspension">
            <div class="text">
                <p>联系客服</p>
            </div>
            <div class="image"><img src="../../assets/customerService.png" alt=""></div>
        </div>
    </div>
</template>

<style lang="less" scoped>
#body {
    width: 100%;
    height: 2000px;
    background-color: aqua;
}

.suspension {
    width: 50px;
    height: 130px;
    background-color: rgb(73, 241, 7);
    position: fixed;
    top: 50%;
    right: 0;
    transform: translateY(-50%);
    cursor: pointer;

    .text {
        width: 50px;
        height: 90px;
        padding-top: 10px;
        background-color: brown;
        writing-mode: vertical-rl;
        /* 竖直排列，从右到左书写 */
        text-orientation: mixed;
        /* 文字方向混合，确保文字正确显示 */
        text-align: center;
        /* 文字水平居中对齐 */
        display: flex;
        /* 使用 Flex 布局 */
        justify-content: center;
        /* 水平居中对齐 */
        align-items: center;
        /* 垂直居中对齐 */
    }

    .image {
        width: 50px;
        height: 40px;
        display: flex;
        justify-content: center;
        align-items: center;
    }

}
</style>