nuxtProject/components/common/onlineInformationBtn.vue

<template>
  <a v-if="isPC" class="zxzx-btn" @click="btnClick">在线咨询</a>
</template>

<script>
import {linkForKefu} from "~/defaultConfig"

export default {
  name: "onlineInformation",
  props: {
    myType: {
      type: String,
      default: '1'
    }
  },
  data() {
    return {
      linkForKefu
    }
  },
  methods: {
    isPC() {
      const browserWidth = document.documentElement.clientWidth;
      if (browserWidth <= 768) {
        return false;
      } else {
        return true;
      }
    },
    btnClick() {
      if (this.isPC()) {
        window.open(this.linkForKefu)
      } else {
        window.location.href = this.linkForKefu
      }

    }
  },
}
</script>

<style lang="scss">
.zxzx-btn {
  width: 154px;
  height: 48px;
  line-height: 48px;
  border-radius: 24px;
  border: 1px solid #00b96b;
  cursor: pointer;
  display: inline-block;
  text-align: center;
  color: #00b96b;

  @media (max-width: 768px) {
    width: 44%;
    height: 35px;
    line-height: 35px;
    max-width: 120px;
    margin: 0 3%;
    font-size: 14px;
  }
}

.zxzx-btn.shouye {
  height: 55px;
  width: 180px;
  line-height: 55px;
  color: #fff;
  background: #00b96b;
}

.zxzx-btn.green {
  background-color: #00B96B;
  color: #fff;
}
</style>