new-hjb-pc/hjb_pc/components/FixedRight.vue

<script setup>
import '../assets/fonts/联系我们/iconfont.css'
const props = defineProps(['isShowGoTop'])
const isUnfold = ref(true)
const golBox = ref(null)
const img = ref(null)
watch(isUnfold, ne => {
    if (ne) golBox.value.style.translate = '0 0%', img.value.style.rotate = '180deg'
    else golBox.value.style.translate = '0 calc( 100% - .1563rem)', img.value.style.rotate = '0deg'
})

const bottom = ref(null)
const isHoverBot = ref(false)
const timer = ref()
const handleMouseover = () => {
    clearTimeout(timer.value), isHoverBot.value = true
}
const handleMouseout = () => timer.value = setTimeout(() => isHoverBot.value = false, 100)
onMounted(() => {
    bottom.value.addEventListener('mouseover', handleMouseover)
    bottom.value.addEventListener('mouseout', handleMouseout)
})
const scroFn = () => {
    window.scrollTo({
        top: 0,
        behavior: 'smooth'
    });
}
</script>

<template>
    <div class="fixed-right-box">
        <div v-show="isHoverBot" @mouseover="handleMouseover" @mouseout="handleMouseout"
            class="relation-box shadow-radius">
            <div class="top">
                <i class="iconfont icon-dianhua1 i-icon" />
                <div class="in-blo">
                    <span>花机宝客服热线</span>
                    <br>
                    <span>13102889355</span>
                </div>
            </div>
            <div v-if="false" class="center">
                <i class="iconfont icon-kefuyouxiang i-icon" />
                <div class="in-blo">
                    <span>建议反馈</span>
                    <br>
                    <div style="display: inline;font-size: .0573rem;color: #575d6c;">您的每一条建议声音，我们都认真对待</div>
                    <br>
                    <span><a href="#">点击填写</a></span>
                </div>
            </div>
            <div class="line"></div>
            <div class="bottom">
                <img src="/images/花机宝公众号.jpg">
                <div>花机宝企业微信客服</div>
            </div>
        </div>
        <div style="overflow: hidden;">
            <div class="gol-box" ref="golBox">
                <div class="top" @click="isUnfold = !isUnfold">
                    <div class="up-do">
                        <img ref="img" src="/images/fold.png" style="width: 70%" alt="">
                    </div>
                    <div class="text">{{ isUnfold ? '收起' : '展开' }}</div>
                </div>
                <div class="center text-lay shadow-radius">
                    <span>下</span>
                    <span>载</span>
                    <span>花</span>
                    <span>机</span>
                    <span>宝</span>
                    <span>APP</span>
                </div>
                <div class="bottom shadow-radius" ref="bottom">
                    <div class="img-box">
                        <img src="/images/微信.png" alt="">
                    </div>
                    <div class="text-lay text-bot">
                        <span>微</span>
                        <span>信</span>
                        <span>客</span>
                        <span>服</span>
                    </div>
                </div>
            </div>
        </div>
        <div v-if="isShowGoTop"
            style="margin-top: .0521rem; width: 100%;height: .2344rem;background-color: #fff;display: flex;cursor: pointer;"
            @click="scroFn">
            <img src="/images/top.png" style="width: 70%;margin: auto;" alt="">
        </div>
    </div>
</template>
<style scoped lang="scss">
@import url('//at.alicdn.com/t/c/font_4514007_8tr319o5bhq.css');
i {
    vertical-align: top;
}

.fixed-right-box {
    --height: 1.9701rem;
    --wdith: .2344rem;
    width: var(--wdith);
    position: fixed;
    bottom: .5208rem;
    right: .1042rem;

    .shadow-radius {
        box-shadow: 0 .0156rem .0313rem rgba(138, 142, 153, .26);
        border-radius: .0104rem;
    }

    .relation-box {
        display: flex;
        flex-direction: column;
        width: 1.4375rem;
        height: 1.9167rem;
        position: absolute;
        bottom: 0;
        right: .2865rem;
        padding: .1302rem;
        background-color: #fff;

        .i-icon {
            font-size: .1042rem;
            line-height: 1;
        }

        .in-blo {
            display: inline-block;
            margin-left: .026rem;

            &>span:first-of-type {
                font-size: .0833rem;
                line-height:.1042rem;
                font-weight: 600;
                color: #252b3a;
            }

            &>span:nth-of-type(2) {
                line-height: .1302rem;
                font-size: .0677rem;
                color: #d90e19;

                &>a {
                    text-decoration: underline;
                    color: inherit;
                }
            }
        }

        .center {
            margin-top: .0781rem;
        }

        .line {
            margin-top: .1563rem;
            height: .0052rem;
            background: #e1e1e3;
            opacity: 1;
        }

        .bottom {
            flex-grow: 1;
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            font-size: .0677rem;
            color: #8a8e99;
            &>*:first-of-type {
                max-width: .8333rem;
                max-height: .8333rem;
            }
        }
    }

    .gol-box {
        height: 100%;
        transition: all .5s;
        position: relative;
        bottom: 0;

        .text-lay {
            display: flex;
            flex-direction: column;
            align-items: center;
        }

        .top {
            display: flex;
            height: .1563rem;
            overflow: hidden;

            .up-do {
                flex-shrink: 0;
                width: 100%;
                transition: all .5s;
                display: flex;
                background-color: #fcfcfc;

                img {
                    margin: auto;
                    rotate: 180deg;
                }
            }

            .text {
                flex-shrink: 0;
                width: 100%;
                text-align: center;
                line-height: .1563rem;
                background-color: #8a8e99;
                color: #fff;
                transition: all .2s;
            }

            &:hover {
                .up-do {
                    margin-left: -100%;
                }

                .text {
                    background-color: #464749;
                }
            }
        }

        .center {
            margin: .0781rem 0;
            padding: .0781rem 0;
            font-size: .0938rem;
            color: #fff;
            background-color: #fe007f;
            overflow: hidden;
        }

        .bottom {
            overflow: hidden;

            .img-box {
                background-color: #fe007f;
                width: var(--wdith);
                height: var(--wdith);
                display: flex;

                img {
                    width: 70%;
                    margin: auto;
                }
            }

            .text-bot {
                padding: .0521rem 0;
                font-size: .0781rem;
                background-color: #fff;
            }
        }
    }
}
</style>