完成home页

src/App.vue

@@ -91,7 +91,7 @@ function fixPanoData(panoData) {
 api.fetchPanoData().then((res) => {
   fixPanoData(res)
   store.commit('setPanoData', res)
-  console.log(store.getters.catalogTopology)
+  console.log('catalogTopology', store.getters.catalogTopology)
 })
 </script>
 

src/components/StartUp.vue

@@ -1,5 +1,25 @@
 <template>
   <div class="start-up">
+    <img
+      class="logo"
+      src="@/assets/images/logo.png"
+      alt=""
+      draggable="false"
+    >
+    <div class="title-wrap">
+      <img
+        class="title"
+        src="@/assets/images/startup-title.png"
+        alt=""
+        draggable="false"
+      >
+      <img
+        class="title-sub"
+        src="@/assets/images/startup-title-sub.png"
+        alt=""
+        draggable="false"
+      >
+    </div>
     <button
       v-show="canStart"
       class="start"
@@ -7,6 +27,10 @@
     >
       开始
     </button>
+    <div class="cast-list">
+      <p>主办单位：中国大运河博物馆 协办单位：首都博物馆</p>
+      <p>鸣谢单位：故宫博物院 上海博物馆 南京博物院 河北博物院 山西博物院 安徽博物院 陕西省考古研究院 河北省文物考古研究院 中国丝绸博物馆 北京石刻艺术博物馆 北京市考古研究院（北京市文化遗产研究院）北京考古遗址博物馆 隆化民族博物馆 保定市满城区文化广电和旅游局 菏泽市博物馆 杭州博物馆 苏州博物馆 镇江博物馆 常州博物</p>
+    </div>
     <div
       v-show="isShowVideo"
       class="video-wrap"
@@ -69,6 +93,7 @@ watch(haveShownStartUp, (v) => {
 </script>
 
 <style lang="less" scoped>
+@page-height-design-px: 970;
 .start-up{
   position: absolute;
   left: 0;
@@ -80,6 +105,29 @@ watch(haveShownStartUp, (v) => {
   background-repeat: no-repeat;
   background-position: center center;
   background-color: black;
+  >img.logo{
+    position: absolute;
+    top: 32px;
+    left: 68px;
+    width: 281px;
+    height: 54px;
+  }
+  div.title-wrap{
+    position: absolute;
+    left: 50%;
+    transform: translateX(-50%);
+    top: calc(86 / @page-height-design-px * 100vh);
+    >img.title{
+      height: calc( 470 / @page-height-design-px * 100vh);
+    }
+    >img.title-sub{
+      position: absolute;
+      right: 100%;
+      top: 43%;
+      transform: translateY(-50%);
+      height: calc(255 / @page-height-design-px * 100vh);
+    }
+  }
   >button.start{
     position: absolute;
     left: 50%;

src/router/index.js

@@ -1,6 +1,7 @@
 import { createRouter, createWebHashHistory } from 'vue-router'
 import HomeView from '../views/HomeView.vue'
 import PanoView from "@/views/PanoView.vue"
+import RelicList from "@/views/RelicList.vue"
 // import store from '@/store/index.js'
 
 const routes = [
@@ -14,6 +15,11 @@ const routes = [
     name: 'PanoView',
     component: PanoView,
   },
+  {
+    path: '/relic-list',
+    name: 'RelicList',
+    component: RelicList,
+  },
 ]
 
 const router = createRouter({

src/views/HomeView.vue

@@ -7,102 +7,129 @@
       />
     </transition>
     <transition name="fade-in-out">
-      <img
+      <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"
-        src="@/assets/images/scene-1-preview.jpg"
-        alt=""
-        draggable="false"
+        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">
-      <img
+      <div
         v-if="hoveringEntryIdx === 2"
-        class="scene-preview"
-        src="@/assets/images/scene-2-preview.jpg"
-        alt=""
-        draggable="false"
+        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">
-      <img
+      <div
         v-if="hoveringEntryIdx === 3"
-        class="scene-preview"
-        src="@/assets/images/scene-3-preview.jpg"
-        alt=""
-        draggable="false"
+        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.png"
-        alt=""
-        draggable="false"
-      >
-    </button>
-    <img
-      class="title"
-      src="@/assets/images/home-title.png"
-      alt=""
-      draggable="false"
-    >
-    <button
-      class="scene-entry entry-1"
-      @mouseenter="hoveringEntryIdx = 1"
-      @mouseleave="hoveringEntryIdx = 0"
-      @click="router.push({
-        name: 'PanoView',
-        query: {
-          sceneIdx: 1,
-        }
-      })"
-    >
-      <img
-        class=""
-        src="@/assets/images/scene-entry-1.png"
-        alt=""
-        draggable="false"
-      >
-    </button>
-    <button
-      class="scene-entry entry-2"
-      @mouseenter="hoveringEntryIdx = 2"
-      @mouseleave="hoveringEntryIdx = 0"
-      @click="router.push({
-        name: 'PanoView',
-        query: {
-          sceneIdx: 2,
-        }
-      })"
-    >
-      <img
-        class=""
-        src="@/assets/images/scene-entry-2.png"
-        alt=""
-        draggable="false"
-      >
-    </button>
-    <button
-      class="scene-entry entry-3"
-      @mouseenter="hoveringEntryIdx = 3"
-      @mouseleave="hoveringEntryIdx = 0"
-      @click="router.push({
-        name: 'PanoView',
-        query: {
-          sceneIdx: 3,
-        }
-      })"
-    >
-      <img
-        class=""
-        src="@/assets/images/scene-entry-3.png"
+        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>
 
@@ -111,6 +138,10 @@ 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()
@@ -130,39 +161,82 @@ function onClickLogo() {
 <style lang="less" scoped>
 .home{
   height: 100%;
-  background-image: url(@/assets/images/home-bg-default.jpg);
+  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;
   }
-  >button.logo{
+  >.bg-default{
     position: absolute;
-    left: 100px;
-    top: 100px;
-    width: 200px;
-    height: 100px;
-    >img{
+    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(734 / 1080 * 100vh);
+    left: 0;
+    top: 50%;
+    transform: translateY(-50%);
+    >img.bg{
       position: absolute;
       left: 0;
       top: 0;
       width: 100%;
       height: 100%;
+      object-fit: cover;
+    }
+    >img.title{
+      position: absolute;
     }
   }
-  >img.title{
-    position: absolute;
-    left: 400px;
-    top: 300px;
-    width: 400px;
-    height: 400px;
+  >.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);
+    }
   }
-  >button.scene-entry{
+  >.scene-preview-3{
+    >img.title{
+      top: calc(95 / 1080 * 100vh);
+      left: calc(900 / 1920 *100vw);
+      height: calc(390 / 1080 * 100vh);
+    }
+  }
+
+  >button.logo{
     position: absolute;
-    bottom: 100px;
-    width: 200px;
-    height: 100px;
+    left: 50px;
+    top: 30px;
+    width: 252px;
+    height: 55px;
     >img{
       position: absolute;
       left: 0;
@@ -171,14 +245,103 @@ function onClickLogo() {
       height: 100%;
     }
   }
-  >button.scene-entry.entry-1{
-    left: 100px;
-  }
-  >button.scene-entry.entry-2{
-    left: 400px;
-  }
-  >button.scene-entry.entry-3{
-    left: 600px;
+  >.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>

src/views/PanoView.vue

@@ -1,7 +1,12 @@
 <template>
   <div class="pano-view">
     <div id="pano" />
-    <button class="return-home">
+    <button
+      class="return-home"
+      @click="router.push({
+        name: 'HomeView',
+      })"
+    >
       返回home
     </button>
     <CameraDesc
@@ -26,12 +31,51 @@
         draggable="false"
         @click="isShowCameraDesc = true"
       >
+      <button class="one">
+        按钮1
+      </button>
+      <button class="two">
+        按钮2
+      </button>
+      <button class="three">
+        按钮3
+      </button>
+      <button
+        class="four"
+        @click="router.push({
+          name: 'RelicList',
+          query: {
+            sceneIdx: route.query.sceneIdx,
+            cameraIdx: route.query.cameraIdx,
+          }
+        })"
+      >
+        文物列表
+      </button>
+    </div>
+    <div class="camera-list">
+      <button
+        v-for="(item, idx) in cameraList"
+        :key="idx"
+        :class="{
+          active: idx === Number(route.query.cameraIdx)
+        }"
+        @click="router.push({
+          name: route.name,
+          query:{
+            sceneIdx: route.query.sceneIdx,
+            cameraIdx: idx,
+          }
+        })"
+      >
+        {{ item.name }}
+      </button>
     </div>
   </div>
 </template>
 
 <script setup>
-import { ref, computed, watch, onMounted } from "vue"
+import { ref, computed, watch, onMounted, nextTick } from "vue"
 import { useRoute, useRouter, onBeforeRouteUpdate } from "vue-router"
 import { useStore } from "vuex"
 import * as krfn from "@/libs/pano-core/index.js"
@@ -45,6 +89,18 @@ const store = useStore()
 const isShowCameraDesc = ref(false)
 const isShowCharacterDesc = ref(false)
 
+const cameraList = ref([
+  {
+    name: '雄伟帝都',
+  },
+  {
+    name: '大都宫阙',
+  },
+  {
+    name: '大都揽胜',
+  },
+])
+
 /**
  * 全景图
  */
@@ -53,8 +109,8 @@ window.__krfn = __krfn
 
 let scene = null
 
-function loadScene() {
-  scene = store.getters.catalogTopology[0].children[0].children[0]
+function loadScene(sceneIdx, cameraIdx) {
+  scene = store.getters.catalogTopology[sceneIdx].children[0].children[Number(cameraIdx)]
 
   $("#pano").empty()
   window.vrInitFn = () => {
@@ -92,19 +148,18 @@ function loadScene() {
   })
 }
 
-setTimeout(() => {
-  loadScene()
-}, 2000)
+onMounted(() => {
+  // nextTick(() => {
+  loadScene(Number(route.query.sceneIdx), Number(route.query.cameraIdx))
+  // })
+})
 
-// onBeforeRouteUpdate((to, from) => {
-//   console.log('to: ', to)
-//   if (to.name === 'PanoView') {
-//     if (route.params.scene) {
-//       scene = route.params.scene
-//       loadScene()
-//     }
-//   }
-// })
+onBeforeRouteUpdate((to, from) => {
+  console.log('to: ', to)
+  if (to.name === route.name) {
+    loadScene(Number(to.query.sceneIdx), Number(to.query.cameraIdx))
+  }
+})
 </script>
 
 <style lang="less" scoped>
@@ -146,6 +201,37 @@ setTimeout(() => {
       height: 100%;
       cursor: pointer;
     }
+    >button.one{
+      position: absolute;
+      left: calc(100% + 10px);
+      top: 10px;
+    }
+    >button.two{
+      position: absolute;
+      left: calc(100% + 10px);
+      top: 30px;
+    }
+    >button.three{
+      position: absolute;
+      left: calc(100% + 10px);
+      top: 50px;
+    }
+    >button.four{
+      position: absolute;
+      left: calc(100% + 10px);
+      top: 70px;
+    }
+  }
+  >div.camera-list{
+    position: absolute;
+    bottom: 10px;
+    right: 50px;
+    >button{
+
+    }
+    >button.active{
+      color: red;
+    }
   }
 }
 </style>