lightButton.vue

<template>
  <div class="btn-container" :class="{'mobile':_isMobile,'pc':!_isMobile}">
    <img class="btn-img" src="../assets/images/gesture/light-btn-bg.png" />
    <div class="btn-text light-button-text" :class="{'len':text.length>10}">{{text}}</div>
    <slot name="body"></slot>
  </div>
</template>

<script >
import { isMobile } from "../common/util";

// defineProps({
//   msg: String
// });
export default {
  data() {
    return {
      _isMobile: false
    };
  },
  props: ["text"],
  methods: {
    confirm() {
      this.$emit("update:confirm", { type: "confirm" });
    },
    cancel() {
      this.$emit("update:confirm", { type: "cancel" });
    }
  },
  created() {
    this._isMobile = isMobile();
  }
};
</script>

<style lang="scss" scoped>
.btn-container {
  position: relative;
  color: #ffffff;
  cursor: pointer;
  img,
  div,
  button {
    position: absolute;
    left: 0;
    top: 0;
  }
  &.pc {
    width: 218px;
    height: 38.85px;
    line-height: 38.85px;
  }
  &.mobile {
    width: 5.8133rem;
    height: 1.036rem;
    line-height: 1.036rem;
  }
}
.pc {
  .btn-text {
    width: 100%;
    text-align: center;
    font-size: 22px;
    letter-spacing: 0.2em;
    font-weight: bold;
    &.len {
      font-size: 12px;
    }
  }
  .btn-img {
    width: 100%;
    height: 100%;
  }

  .light-button-text {
    letter-spacing: 0.2em;
  }
}
.mobile {
  .btn-text {
    width: 100%;
    text-align: center;
    font-size: 0.5867rem;
    letter-spacing: 0.2em;
    font-weight: bold;
    &.len {
      font-size: 0.32rem;
    }
  }
  .btn-img {
    width: 100%;
    height: 100%;
  }

  .light-button-text {
    letter-spacing: 0.2em;
  }
}
</style>