YangZhouDaYunHeDaDu/src/views/HomeView.vue

<template>
  <div class="home">
    <transition name="fade-out">
      <StartUp
        v-show="!store.state.haveShownStartUp"
        class="start-up"
      />
    </transition>
    <transition name="fade-in-out">
      <div
        v-if="hoveringEntryIdx === 0"
        class="bg-default"
      >
        <img
          class="bg-default"
          src="@/assets/images/home-bg-default.jpg"
          alt=""
          draggable="false"
        >
        <img
          class="title"
          src="@/assets/images/home-title.png"
          alt=""
          draggable="false"
        >
      </div>
    </transition>
    <transition name="fade-in-out">
      <div
        v-if="hoveringEntryIdx === 1"
        class="scene-preview scene-preview-1"
      >
        <img
          class="bg"
          src="@/assets/images/scene-1-preview.jpg"
          alt=""
          draggable="false"
        >
        <img
          class="title"
          src="@/assets/images/scene-preview-title-1.png"
          alt=""
          draggable="false"
        >
      </div>
    </transition>
    <transition name="fade-in-out">
      <div
        v-if="hoveringEntryIdx === 2"
        class="scene-preview scene-preview-2"
      >
        <img
          class="bg"
          src="@/assets/images/scene-2-preview.jpg"
          alt=""
          draggable="false"
        >
        <img
          class="title"
          src="@/assets/images/scene-preview-title-2.png"
          alt=""
          draggable="false"
        >
      </div>
    </transition>
    <transition name="fade-in-out">
      <div
        v-if="hoveringEntryIdx === 3"
        class="scene-preview scene-preview-3"
      >
        <img
          class="bg"
          src="@/assets/images/scene-3-preview.jpg"
          alt=""
          draggable="false"
        >
        <img
          class="title"
          src="@/assets/images/scene-preview-title-3.png"
          alt=""
          draggable="false"
        >
      </div>
    </transition>
    <button
      class="logo"
      @click="onClickLogo"
    >
      <img
        src="@/assets/images/logo-bright.png"
        alt=""
        draggable="false"
      >
    </button>
    <div class="btn-group">
      <button
        class="scene-entry entry-1"
        @mouseenter="hoveringEntryIdx = 1"
        @mouseleave="hoveringEntryIdx = 0"
        @click="router.push({
          name: 'PanoView',
          query: {
            sceneIdx: 0,
            cameraIdx: 0,
          }
        })"
      />
      <button
        class="scene-entry entry-2"
        @mouseenter="hoveringEntryIdx = 2"
        @mouseleave="hoveringEntryIdx = 0"
        @click="router.push({
          name: 'PanoView',
          query: {
            sceneIdx: 1,
            cameraIdx: 0,
          }
        })"
      />
      <button
        class="scene-entry entry-3"
        @mouseenter="hoveringEntryIdx = 3"
        @mouseleave="hoveringEntryIdx = 0"
        @click="router.push({
          name: 'PanoView',
          query: {
            sceneIdx: 2,
            cameraIdx: 0,
          }
        })"
      />
    </div>
  </div>
</template>

<script setup>
import { ref, computed, watch, onMounted } from "vue"
import { useRoute, useRouter } from "vue-router"
import { useStore } from "vuex"
import StartUp from '@/components/StartUp.vue'
const {
  windowSizeInCssForRef,
  windowSizeWhenDesignForRef,
} = useSizeAdapt()

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

const canStart = computed(() => {
  return store.state.canStart
})

const hoveringEntryIdx = ref(0)

function onClickLogo() {
  store.commit('setHaveShownStartUp', false)
}
</script>

<style lang="less" scoped>
.home{
  height: 100%;
  background-image: url(@/assets/images/home-bg-bg.jpg);
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center center;
  >.start-up{
    z-index: 3;
  }
  >.bg-default{
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    >img.bg-default{
      position: absolute;
      width: 100%;
      height: calc(891 / 1080 * 100vh);
      left: 0;
      top: 0;
      object-fit: cover;
    }
    >img.title{
      position: absolute;
      left: 50%;
      top: 30%;
      transform: translate(-50%, -50%);
      width: calc(1102 / 1920 * 100vw);
    }
  }
  >.scene-preview{
    position: absolute;
    width: 100%;
    height: calc(891 / 1080 * 100vh);
    left: 0;
    top: 0;
    >img.bg{
      position: absolute;
      left: 0;
      top: 0;
      width: 100%;
      height: 100%;
      object-fit: cover;
    }
    >img.title{
      position: absolute;
    }
  }
  >.scene-preview-1{
    >img.title{
      top: calc(87 / 1080 * 100vh);
      left: calc(130 / 1920 *100vw);
      height: calc(274 / 1080 * 100vh);
    }
  }
  >.scene-preview-2{
    >img.title{
      top: calc(95 / 1080 * 100vh);
      right: calc(60 / 1920 *100vw);
      height: calc(312 / 1080 * 100vh);
    }
  }
  >.scene-preview-3{
    >img.title{
      top: calc(95 / 1080 * 100vh);
      left: calc(900 / 1920 *100vw);
      height: calc(390 / 1080 * 100vh);
    }
  }

  >button.logo{
    position: absolute;
    left: 50px;
    top: 30px;
    width: 252px;
    height: 55px;
    >img{
      position: absolute;
      left: 0;
      top: 0;
      width: 100%;
      height: 100%;
    }
  }
  >.btn-group{
    position: absolute;
    width: 100%;
    bottom: 100px;
    display: flex;
    >button.scene-entry.entry-1{
      position: absolute;
      left: 20%;
      transform: translate(-50%);
      bottom: 0;
      background-image: url(@/assets/images/scene-entry-1.png);
      background-size: cover;
      background-repeat: no-repeat;
      background-position: center center;
      width: calc(489 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
      height: calc(245 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
      &:hover{
        background-image: url(@/assets/images/scene-entry-1-active.png);
        width: calc(507 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
        height: calc(259 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
        transform: translate(calc(-50% - (10 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'))), calc(12 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef')));
        &::after{
          position: absolute;
          content: '';
          left: calc(30 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
          bottom: calc(10 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
          width: calc(143 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
          height: calc(380 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
          background-image: url(@/assets/images/scene-entry-active-deco.png);
          background-size: cover;
          background-repeat: no-repeat;
          background-position: center center;
        }
      }
    }
    >button.scene-entry.entry-2{
      position: absolute;
      left: 50%;
      transform: translate(-50%);
      bottom: 0;
      background-image: url(@/assets/images/scene-entry-2.png);
      background-size: cover;
      background-repeat: no-repeat;
      background-position: center center;
      width: calc(548 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
      height: calc(369 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
      &:hover{
        background-image: url(@/assets/images/scene-entry-2-active.png);
        transform: translate(calc(-20 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef')), calc(0 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef')));
        width: calc(579 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
        height: calc(393 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
        transform: translate(calc(-50% - (15 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'))), calc(0 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef')));
        &::after{
          position: absolute;
          content: '';
          right: calc(100 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
          bottom: calc(10 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
          width: calc(143 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
          height: calc(380 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
          background-image: url(@/assets/images/scene-entry-active-deco.png);
          background-size: cover;
          background-repeat: no-repeat;
          background-position: center center;
        }
      }
    }
    >button.scene-entry.entry-3{
      position: absolute;
      left: 80%;
      transform: translate(-50%);
      bottom: 0;
      background-image: url(@/assets/images/scene-entry-3.png);
      background-size: cover;
      background-repeat: no-repeat;
      background-position: center center;
      width: calc(386 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
      height: calc(319 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
      &:hover{
        background-image: url(@/assets/images/scene-entry-3-active.png);
        transform: translate(calc(-20 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef')), calc(0 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef')));
        width: calc(416 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
        height: calc(343 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
        transform: translate(calc(-50% - (15 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'))), calc(0 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef')));
        &::after{
          position: absolute;
          content: '';
          left: calc(10 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
          bottom: calc(10 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
          width: calc(143 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
          height: calc(380 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
          background-image: url(@/assets/images/scene-entry-active-deco.png);
          background-size: cover;
          background-repeat: no-repeat;
          background-position: center center;
        }
      }
    }
  }
}
</style>