LiangZhuTongHua/src/views/HomeView.vue

<template>
  <div class="home">
    <video
      src="@/assets/videos/startup.mp4"
      autoplay
      playsinline
      webkit-playsinline="true"
      muted
    />
    <Transition name="fade-in">
      <div
        v-show="isShowBtnGroup"
        class="btn-group"
      >
        <button @click="onClickBegin">
          开始探索
        </button>
        <button
          id="copy-text"
          :data-clipboard-text="shareUrl"
          data-clipboard-action="copy"
          @click="onClickCopy"
        >
          分享
        </button>
      </div>
    </Transition>
  </div>
</template>

<script setup>
import Clipboard from "clipboard"
import { showToast } from "@/store/index.js"
import { useRoute, useRouter } from "vue-router"
import { ref } from "vue"
const {
  windowSizeInCssForRef,
  windowSizeWhenDesignForRef,
} = useSizeAdapt(724, 375)

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

const isShowBtnGroup = ref(false)
setTimeout(() => {
  isShowBtnGroup.value = true
}, 2500)

const shareUrl = location.origin + location.pathname
function onClickBegin() {
  router.push({
    name: 'EntryList'
  })
}
function onClickCopy() {
  let clipboard = new Clipboard("#copy-text")
  clipboard.on("success", function() {
    showToast('地址已复制到剪贴板')
  })
}


</script>

<style lang="less" scoped>
.home{
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  // background-image: url(@/assets/images/cover-bg.jpg);
  // background-size: cover;
  // background-repeat: no-repeat;
  // background-position: center center;
  >video{
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
  }
  >.btn-group{
    position: absolute;
    bottom: calc(40 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    >button{
      flex: 0 0 auto;
      font-size: calc(20 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
      font-family: Source Han Serif CN-Bold, Source Han Serif CN;
      font-weight: bold;
      color: #484238;
      line-height: calc(23 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
      height: calc(55 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));;
    }
    >button:first-of-type{
      background-image: url(@/assets/images/btn-long-bright.png);
      background-size: contain;
      background-repeat: no-repeat;
      background-position: center center;
      width: calc(186 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
      margin-right: calc(17 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
    }
    >button:last-of-type{
      background-image: url(@/assets/images/btn-short-dark.png);
      background-size: contain;
      background-repeat: no-repeat;
      background-position: center center;
      width: calc(144 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));;
    }
  }
}
</style>