<template>
  <div class="right_con">
    <div class="kefu">
      <ul>
        <li>
          <NuxtLink class="kf-gy kf-a1"><img src="@/assets/images/kf-a1.png" alt=""/></NuxtLink>
          <span>定制方案</span>
        </li>
        <li>
          <NuxtLink class="kf-gy kf-a1"><img src="@/assets/images/kf-b1.png" alt=""/></NuxtLink>
          <span>13303358557 0335-8909696</span>
        </li>
        <li>
          <NuxtLink class="kf-gy kf-a1"><img src="@/assets/images/kf-d1.png" alt=""/></NuxtLink>
          <span>
            <img src="@/assets/images/img19.png" alt=""/>
            <img src="@/assets/images/img20.png" alt=""/>
          </span>
        </li>
        <li v-show="showBackTop" class="back" @click="scrollToTop">
          <div class="kf-gy kf-a1"><img src="@/assets/images/kf-e1.png" alt=""/></div>
        </li>
      </ul>
    </div>
  </div>
</template>
<script setup lang="ts">
import { ref, onMounted, onUnmounted } from "vue";

const showBackTop = ref(false);

const handleScroll = () => {
  showBackTop.value = window.scrollY > 300;
};

const scrollToTop = () => {
  window.scrollTo({
    top: 0,
    behavior: "smooth",
  });
};

onMounted(() => {
  window.addEventListener("scroll", handleScroll);
});

onUnmounted(() => {
  window.removeEventListener("scroll", handleScroll);
});
</script>

<style scoped lang="scss">
.kefu{
  position:fixed;
  z-index:99999;
  top:30%;
  right:50px;
  width:48px;
  ul{
    li{
      position:relative;
      margin-bottom:12px;
      list-style: none;
      cursor: pointer;
      a, div{
        width:48px;
        height:48px;
        background:#fff;
        border:1px solid #eee;
        display:block;
        text-align:center;
        line-height:48px;
        color:#333;
        border-radius:50px;
        box-shadow: 0 4px 16px rgba(28,67,125,.08);
        transition: all 0.5s ease-out 0s;
        font-size: 18px;

        img{
          width:24px;
          height: 24px;
          margin: 12px auto;
        }
      }
      span{
        position: absolute;
        box-shadow: rgba(28, 67, 125, 0.08) 0 4px 16px;
        font-size: 16px;
        line-height: 22px;
        top: 0;
        text-align: center;
        right: 20px;
        padding: 16px 10px;
        white-space: nowrap;
        background: rgb(255, 255, 255);
        border-width: 1px;
        border-style: solid;
        border-color: rgba(180, 183, 192, 0.12);
        border-image: initial;
        border-radius: 4px;
        transition: 0.3s;
        font-weight: bold;
        color: #1d78ff;
        display: none;
        img{
          margin-right: 10px;
        }

       &::after {
          position: absolute;
          box-sizing: border-box;
          background-color: inherit;
          width: 12px;
          height: 12px;
          top: 20px;
          right: -4.25px;
          transform: rotate(315deg);
          content: "";
          transition: 250ms ease-in-out;
          border-right: 1px solid rgba(180, 183, 192, 0.12);
          border-bottom: 1px solid rgba(180, 183, 192, 0.12);
        }
      }
      &:hover{
        span{
          display: block;
      }
        a,div{
          background: #90ceff;
          border:1px solid #90ceff;
        }
    }
  }
  }
}




</style>
