NanjingMuseumWuJinZang/src/components/BtnClickMe.vue

<template>
  <Transition name="fade-in-out">
    <button
      v-show="isShow"
      class="btn-click-me"
    >
      <div
        v-if="props.text"
        class="text animation-show-hide-half"
      >
        {{ props.text }}
      </div>
      <img
        class=""
        :src="require(`@/assets/images/icon-click-tip.png`)"
        alt=""
        draggable="false"
      >
    </button>
  </Transition>
</template>

<script setup>
import useSizeAdapt from "@/useFunctions/useSizeAdapt"
import { ref, computed, watch, onMounted, inject } from "vue"
import { useRoute, useRouter } from "vue-router"
import { useStore } from "vuex"

const route = useRoute()
const router = useRouter()
const store = useStore()

const $env = inject('$env')

const {
  windowSizeInCssForRef,
  windowSizeWhenDesignForRef,
} = useSizeAdapt()

const props = defineProps({
  color: {
    type: String,
    default: 'white', // 'green'
  },
  text: {
    type: String,
    default: '',
  },
  isShow: {
    type: Boolean,
    default: true,
  }
})

const color = computed(() => {
  if (props.color === 'white') {
    return '#fff'
  } else if (props.color === 'green') {
    return '#7B916B'
  } else {
    return props.color
  }
})

const isShow = computed(() => {
  return props.isShow
})
</script>

<style lang="less" scoped>
.btn-click-me{
  display: flex;
  align-items: center;
  >.text{
    color: v-bind('color');
    margin-right: calc(10 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
    font-family: KaiTi, KaiTi;
    font-weight: 400;
    font-size: calc(20 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
  }
  >img{
    width: calc(30 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
    height: calc(30 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
  }
  .animation-show-hide-half {
    animation: show-hide 1.5s infinite;
  }
}
@keyframes show-hide {
    0% {
      opacity: 0.4;
    }
    50% {
      opacity: 1;
    }
    100% {
      opacity: 0.4;
    }
  }
</style>