sannongzixunwang_web/app.vue

<template>
  <div class="sannong">
    <NuxtLayout>
      <NuxtPage></NuxtPage>
      <!-- <img src="./static/images/weixin 1.png" alt=""> -->
      <ul class="kefu">
        <li>
          <img src="./static//images/weixin 1.png" alt="">
          <p>微信客服</p>
        </li>
        <li>
          <img src="./static//images/qq 1.png" alt="">
          <p>QQ客服</p>
        </li>
        <li>
          <img src="./static//images/dianhua 1.png" alt="">
          <p>电话客服</p>
        </li>
        <li @click="close">
          <img src="./static//images/guanbi 1.png" alt="">
          <p>关闭</p>
        </li>
      </ul>
      <!-- <div class="kefu1">
        <img src="./static//images/weixin 1.png" alt="">
      </div> -->
    </NuxtLayout>
    <!-- <div class="zhinengwenda">
      <Zhinengqwnda></Zhinengqwnda>
    </div> -->

  </div>
</template>

<script setup>
let close = () => {
  let kefu = document.querySelector('.kefu')
  kefu.style.display = 'none'
}
</script>

<style lang="less" scoped>
.kefu {
  width: 100px;
  height: 445px;
  position: fixed;
  bottom: 80px;
  right: 129px;

  >li {
    width: 100px;
    height: 100px;
    margin-bottom: 15px;
    text-align: center;
    background-color: #fff;

    >img {
      width: 60px;
      height: 60px;
      margin-top: 10px;
    }

    >p {
      font-family: PingFang SC, PingFang SC;
      font-weight: 500;
      font-size: 14px;
      color: #666666;
      line-height: 16px;
    }
  }
}

.kefu1 {
  width: 70px;
  height: 70px;
  position: fixed;
  bottom: 0px;
  right: 220px;
}

.zhinengwenda {
  width: 360px;
  height: 562px;
  position: fixed;
  bottom: 85px;
  right: 220px;
  // border: 1px solid #CCCCCC;
  box-shadow: 0px 4px 16px 0px rgba(0, 0, 0, 0.1);
  border-radius: 10px;
  background-color: #fff;
  z-index: 1000;
}
</style>