|
|
@@ -6,9 +6,7 @@
|
|
|
@click="router.push({
|
|
|
name: 'HomeView',
|
|
|
})"
|
|
|
- >
|
|
|
- 返回home
|
|
|
- </button>
|
|
|
+ />
|
|
|
<CameraDesc
|
|
|
v-if="isShowCameraDesc"
|
|
|
@close="isShowCameraDesc = false"
|
|
|
@@ -22,7 +20,7 @@
|
|
|
class="name"
|
|
|
@click="isShowCharacterDesc = true"
|
|
|
>
|
|
|
- 金二胖
|
|
|
+ <span>金二胖</span>
|
|
|
</button>
|
|
|
<img
|
|
|
class="character"
|
|
|
@@ -31,17 +29,29 @@
|
|
|
draggable="false"
|
|
|
@click="isShowCameraDesc = true"
|
|
|
>
|
|
|
- <button class="one">
|
|
|
- 按钮1
|
|
|
+ <img
|
|
|
+ class="btn-track"
|
|
|
+ src="@/assets/images/people-btn-track.png"
|
|
|
+ alt=""
|
|
|
+ draggable="false"
|
|
|
+ >
|
|
|
+ <button
|
|
|
+ class="one btn-on-track"
|
|
|
+ >
|
|
|
+ <span>雄伟帝都</span>
|
|
|
</button>
|
|
|
- <button class="two">
|
|
|
- 按钮2
|
|
|
+ <button
|
|
|
+ class="two btn-on-track"
|
|
|
+ >
|
|
|
+ <span>雄伟帝都</span>
|
|
|
</button>
|
|
|
- <button class="three">
|
|
|
- 按钮3
|
|
|
+ <button
|
|
|
+ class="three btn-on-track"
|
|
|
+ >
|
|
|
+ <span>雄伟帝都</span>
|
|
|
</button>
|
|
|
<button
|
|
|
- class="four"
|
|
|
+ class="four btn-on-track"
|
|
|
@click="router.push({
|
|
|
name: 'RelicList',
|
|
|
query: {
|
|
|
@@ -50,7 +60,7 @@
|
|
|
}
|
|
|
})"
|
|
|
>
|
|
|
- 文物列表
|
|
|
+ <span>雄伟帝都</span>
|
|
|
</button>
|
|
|
</div>
|
|
|
<div class="camera-list">
|
|
|
@@ -68,7 +78,19 @@
|
|
|
}
|
|
|
})"
|
|
|
>
|
|
|
- {{ item.name }}
|
|
|
+ <span>{{ item.name }}</span>
|
|
|
+ <img
|
|
|
+ class="bg-normal"
|
|
|
+ src="@/assets/images/camera-list-item-bg.png"
|
|
|
+ alt=""
|
|
|
+ draggable="false"
|
|
|
+ >
|
|
|
+ <img
|
|
|
+ class="bg-active"
|
|
|
+ src="@/assets/images/camera-list-item-bg-active.png"
|
|
|
+ alt=""
|
|
|
+ draggable="false"
|
|
|
+ >
|
|
|
</button>
|
|
|
</div>
|
|
|
</div>
|
|
|
@@ -82,10 +104,24 @@ import * as krfn from "@/libs/pano-core/index.js"
|
|
|
import CameraDesc from '@/components/CameraDesc.vue'
|
|
|
import CharacterDesc from '@/components/CharacterDesc.vue'
|
|
|
|
|
|
+const {
|
|
|
+ windowSizeInCssForRef,
|
|
|
+ windowSizeWhenDesignForRef,
|
|
|
+} = useSizeAdapt()
|
|
|
+
|
|
|
const route = useRoute()
|
|
|
const router = useRouter()
|
|
|
const store = useStore()
|
|
|
|
|
|
+const btnOnTrack1ImgUrl = 'url(' + require(`@/assets/images/camera-btn-${Number(route.query.sceneIdx) + 1}-${Number(route.query.cameraIdx) + 1}-1.png`) + ')'
|
|
|
+const btnOnTrack1ActiveImgUrl = 'url(' + require(`@/assets/images/camera-btn-${Number(route.query.sceneIdx) + 1}-${Number(route.query.cameraIdx) + 1}-1-active.png`) + ')'
|
|
|
+const btnOnTrack2ImgUrl = 'url(' + require(`@/assets/images/camera-btn-${Number(route.query.sceneIdx) + 1}-${Number(route.query.cameraIdx) + 1}-2.png`) + ')'
|
|
|
+const btnOnTrack2ActiveImgUrl = 'url(' + require(`@/assets/images/camera-btn-${Number(route.query.sceneIdx) + 1}-${Number(route.query.cameraIdx) + 1}-2-active.png`) + ')'
|
|
|
+const btnOnTrack3ImgUrl = 'url(' + require(`@/assets/images/camera-btn-${Number(route.query.sceneIdx) + 1}-${Number(route.query.cameraIdx) + 1}-3.png`) + ')'
|
|
|
+const btnOnTrack3ActiveImgUrl = 'url(' + require(`@/assets/images/camera-btn-${Number(route.query.sceneIdx) + 1}-${Number(route.query.cameraIdx) + 1}-3-active.png`) + ')'
|
|
|
+const btnOnTrack4ImgUrl = 'url(' + require(`@/assets/images/camera-btn-${Number(route.query.sceneIdx) + 1}-${Number(route.query.cameraIdx) + 1}-4.png`) + ')'
|
|
|
+const btnOnTrack4ActiveImgUrl = 'url(' + require(`@/assets/images/camera-btn-${Number(route.query.sceneIdx) + 1}-${Number(route.query.cameraIdx) + 1}-4-active.png`) + ')'
|
|
|
+
|
|
|
const isShowCameraDesc = ref(false)
|
|
|
const isShowCharacterDesc = ref(false)
|
|
|
|
|
|
@@ -175,62 +211,184 @@ onBeforeRouteUpdate((to, from) => {
|
|
|
}
|
|
|
>button.return-home{
|
|
|
position: absolute;
|
|
|
- width: 100px;
|
|
|
- height: 100px;
|
|
|
- top: 100px;
|
|
|
- right: 100px;
|
|
|
- background-color: red;
|
|
|
+ width: 77px;
|
|
|
+ height: 77px;
|
|
|
+ top: 43px;
|
|
|
+ right: 51px;
|
|
|
+ background-image: url(@/assets/images/btn-return-home.png);
|
|
|
+ background-size: cover;
|
|
|
+ background-repeat: no-repeat;
|
|
|
+ background-position: center center;
|
|
|
+ &:hover{
|
|
|
+ background-image: url(@/assets/images/btn-return-home-active.png);
|
|
|
+ }
|
|
|
}
|
|
|
>.character-wrap{
|
|
|
position: absolute;
|
|
|
- left: 0;
|
|
|
+ left: calc(40 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
|
|
|
bottom: 0;
|
|
|
- width: 100px;
|
|
|
- height: 100px;
|
|
|
+ width: calc(335 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
|
|
|
+ height: calc(452 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
|
|
|
>button.name{
|
|
|
position: absolute;
|
|
|
top: 0;
|
|
|
left: 0;
|
|
|
+ transform: translateX(-50%);
|
|
|
+ width: calc(36 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
|
|
|
+ height: calc(178 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
|
|
|
z-index: 1;
|
|
|
+ font-size: calc(23 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
|
|
|
+ font-family: Source Han Serif SC, Source Han Serif SC;
|
|
|
+ font-weight: 400;
|
|
|
+ color: #43310E;
|
|
|
+ line-height: calc(27 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
|
|
|
+ letter-spacing: calc(7 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
|
|
|
+ writing-mode: vertical-lr;
|
|
|
+ background-image: url(@/assets/images/people-name-bg.png);
|
|
|
+ background-size: contain;
|
|
|
+ background-repeat: no-repeat;
|
|
|
+ background-position: center center;
|
|
|
+ >span{
|
|
|
+ position: absolute;
|
|
|
+ left: 45%;
|
|
|
+ top: 50%;
|
|
|
+ transform: translate(-50%, -50%);
|
|
|
+ }
|
|
|
}
|
|
|
- >img{
|
|
|
+ >img.character{
|
|
|
position: absolute;
|
|
|
left: 0;
|
|
|
top: 0;
|
|
|
width: 100%;
|
|
|
height: 100%;
|
|
|
+ z-index: 1;
|
|
|
cursor: pointer;
|
|
|
}
|
|
|
- >button.one{
|
|
|
+ >img.btn-track{
|
|
|
position: absolute;
|
|
|
- left: calc(100% + 10px);
|
|
|
- top: 10px;
|
|
|
+ width: calc(598 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
|
|
|
+ height: calc(598 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
|
|
|
+ left: calc(-52 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
|
|
|
+ bottom: calc(-101 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
|
|
|
}
|
|
|
- >button.two{
|
|
|
+ >button.btn-on-track{
|
|
|
position: absolute;
|
|
|
- left: calc(100% + 10px);
|
|
|
- top: 30px;
|
|
|
+ width: calc(78 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
|
|
|
+ height: calc(78 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
|
|
|
+ background-size: cover;
|
|
|
+ background-repeat: no-repeat;
|
|
|
+ background-position: center center;
|
|
|
+ >span{
|
|
|
+ display: none;
|
|
|
+ font-size: calc(23 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
|
|
|
+ font-family: Source Han Serif SC, Source Han Serif SC;
|
|
|
+ font-weight: 600;
|
|
|
+ color: #FFF1BE;
|
|
|
+ line-height: calc(27 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
|
|
|
+ letter-spacing: calc(5 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
|
|
|
+ }
|
|
|
+ &:hover{
|
|
|
+ width: calc(397 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
|
|
|
+ height: calc(91 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
|
|
|
+ transform: translate(calc(-10 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef')), calc(-10 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef')));
|
|
|
+ >span{
|
|
|
+ display: initial;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ >button.one{
|
|
|
+ left: calc(310 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
|
|
|
+ top: calc(-39 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
|
|
|
+ background-image: v-bind(btnOnTrack1ImgUrl);
|
|
|
+ &:hover{
|
|
|
+ background-image: v-bind(btnOnTrack1ActiveImgUrl);
|
|
|
+ }
|
|
|
+ }
|
|
|
+ >button.two{
|
|
|
+ left: calc(433 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
|
|
|
+ top: calc(62 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
|
|
|
+ background-image: v-bind(btnOnTrack2ImgUrl);
|
|
|
+ &:hover{
|
|
|
+ background-image: v-bind(btnOnTrack2ActiveImgUrl);
|
|
|
+ }
|
|
|
}
|
|
|
>button.three{
|
|
|
- position: absolute;
|
|
|
- left: calc(100% + 10px);
|
|
|
- top: 50px;
|
|
|
+ left: calc(483 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
|
|
|
+ top: calc(205 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
|
|
|
+ background-image: v-bind(btnOnTrack3ImgUrl);
|
|
|
+ &:hover{
|
|
|
+ background-image: v-bind(btnOnTrack3ActiveImgUrl);
|
|
|
+ }
|
|
|
}
|
|
|
>button.four{
|
|
|
- position: absolute;
|
|
|
- left: calc(100% + 10px);
|
|
|
- top: 70px;
|
|
|
+ left: calc(450 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
|
|
|
+ top: calc(353 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
|
|
|
+ background-image: v-bind(btnOnTrack4ImgUrl);
|
|
|
+ &:hover{
|
|
|
+ background-image: v-bind(btnOnTrack4ActiveImgUrl);
|
|
|
+ }
|
|
|
}
|
|
|
}
|
|
|
>div.camera-list{
|
|
|
position: absolute;
|
|
|
- bottom: 10px;
|
|
|
- right: 50px;
|
|
|
+ bottom: 0;
|
|
|
+ right: 0;
|
|
|
+ width: calc(1346 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
|
|
|
+ height: calc(161 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
|
|
|
+ background-image: url(@/assets/images/camera-list-bg.png);
|
|
|
+ background-size: cover;
|
|
|
+ background-repeat: no-repeat;
|
|
|
+ background-position: center center;
|
|
|
+ display: flex;
|
|
|
+ justify-content: flex-end;
|
|
|
+ align-items: center;
|
|
|
+ padding-top: calc(10 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
|
|
|
+ padding-right: calc(204 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
|
|
|
>button{
|
|
|
-
|
|
|
+ width: calc(198 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
|
|
|
+ height: calc(41 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
|
|
|
+ font-size: calc(21 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
|
|
|
+ font-family: Source Han Serif SC, Source Han Serif SC;
|
|
|
+ font-weight: 600;
|
|
|
+ color: #FFED87;
|
|
|
+ line-height: calc(25 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
|
|
|
+ letter-spacing: calc(9 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
|
|
|
+ position: relative;
|
|
|
+ z-index: 0;
|
|
|
+ >img.bg-normal{
|
|
|
+ display: initial;
|
|
|
+ position: absolute;
|
|
|
+ left: 50%;
|
|
|
+ top: 50%;
|
|
|
+ transform: translate(-50%, -50%);
|
|
|
+ width: calc(198/ v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
|
|
|
+ height: calc(55 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
|
|
|
+ z-index: -1;
|
|
|
+ }
|
|
|
+ >img.bg-active{
|
|
|
+ display: none;
|
|
|
+ position: absolute;
|
|
|
+ left: 50%;
|
|
|
+ top: 0%;
|
|
|
+ transform: translate(-50%, -50%);
|
|
|
+ width: calc(230 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
|
|
|
+ height: auto;
|
|
|
+ z-index: -1;
|
|
|
+ }
|
|
|
}
|
|
|
>button.active{
|
|
|
- color: red;
|
|
|
+ font-size: calc(21 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
|
|
|
+ font-family: Source Han Serif SC, Source Han Serif SC;
|
|
|
+ font-weight: 600;
|
|
|
+ color: #794A00;
|
|
|
+ line-height: calc(25 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
|
|
|
+ letter-spacing: calc(9 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
|
|
|
+ >img.bg-normal{
|
|
|
+ display: none;
|
|
|
+ }
|
|
|
+ >img.bg-active{
|
|
|
+ display: initial;
|
|
|
+ }
|
|
|
}
|
|
|
}
|
|
|
}
|
任一存
