LiangZhuTongHua/src/views/HomeView.vue

<template>
  <div class="home">
    <video
      src="@/assets/videos/startup.mp4"
      autoplay
      playsinline
      webkit-playsinline="true"
      x5-video-player-type="h5"
      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>

    <Transition name="fade-in">
      <div
        v-show="isShowBtnGroup"
        class="btn-right"
      >
        <div
          class="right-item"
          @click="isShowForeword = true,forwordType = 1"
        >
          <div
            class="item-circle"
            style="background: #8BD3FF;"
          >
            <img
              src="@/assets/images/gratitude-icon.png"
              alt=""
            >
          </div>
          特别鸣谢
        </div>
        <div
          class="right-item"
          @click="isShowForeword = true,forwordType = 2"
        >
          <div class="item-circle">
            <img
              src="@/assets/images/foreword-icon.png"
              alt=""
            >
          </div>
          策展人说
        </div>
        <div class="right-item">
          <div
            class="item-circle"
            style="background: #E89795;"
            @click="router.push({
              name: 'StartView',
            })"
          >
            <img
              src="@/assets/images/pic-icon.png"
              alt=""
            >
          </div>
          体验版画
        </div>
      </div>
    </Transition>

    <!-- 序言 -->
    <ForeWord
      v-show="isShowForeword"
      :number="forwordType"
      @close="close"
    />
  </div>
</template>

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

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

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

const isShowForeword = ref(false)
const forwordType = ref(1)
const close = () => {
  isShowForeword.value = false
}

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;
      // letter-spacing: .3em;
      font-size: calc(22 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
      font-family: 'jiangxizhuokai-Regular';
      // font-weight: bold;
      color: white;
      background-color: rgba(239, 196, 27, 1);
      border-radius: calc(50 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
      border: solid calc(4 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef')) #fff;
      line-height: calc(23 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
      height: calc(55 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));;
    }
    >button:first-of-type{
      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-color: #4ABBFF;
      background-repeat: no-repeat;
      background-position: center center;
      width: calc(144 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));;
    }
  }
  >.btn-right {
    position: absolute;
    right: 2%;
    top:5%;
    >.right-item {
      margin-bottom: calc(15 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
      font-size: calc(14 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
      color: white;
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      >.item-circle {
        border-radius: calc(50 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
        border: 2px solid white;
        padding: 10%;
        display: flex;
        justify-content: center;
        align-items: center;
        margin-bottom: calc(5 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
        background: #549E7E;

      }

    }
  }
}
</style>