|
@@ -1,15 +1,12 @@
|
|
|
<template>
|
|
|
- <div id="app">
|
|
|
- <transition name="fade-out">
|
|
|
- <HomeFadeIn
|
|
|
- v-if="isShowFadeInMask"
|
|
|
- class="fade-in-mask"
|
|
|
- :progress="progress"
|
|
|
- />
|
|
|
- </transition>
|
|
|
-
|
|
|
+ <div
|
|
|
+ class="app-view"
|
|
|
+ :class="{
|
|
|
+ higher: !isShowNavBar,
|
|
|
+ }"
|
|
|
+ >
|
|
|
<div
|
|
|
- v-show="$route.meta.isShow3DMap"
|
|
|
+ v-show="$route.meta.isShowUnityModel"
|
|
|
id="unity-container"
|
|
|
>
|
|
|
<canvas
|
|
@@ -25,7 +22,7 @@
|
|
|
<nav
|
|
|
v-show="!$route.meta.hideNavBar"
|
|
|
:style="{
|
|
|
- bottom: isShowNavBar ? '0' : '-112px',
|
|
|
+ bottom: isShowNavBar ? '0' : `-${navBarHeight}`,
|
|
|
}"
|
|
|
>
|
|
|
<button
|
|
@@ -88,7 +85,67 @@
|
|
|
draggable="false"
|
|
|
>
|
|
|
</button>
|
|
|
+ <button
|
|
|
+ class="tab-item"
|
|
|
+ :class="{
|
|
|
+ active: $route.meta.belongNavGroup === 4
|
|
|
+ }"
|
|
|
+ @click="$router.push({name: 'VirtualMuseum'})"
|
|
|
+ >
|
|
|
+ 虚拟展厅
|
|
|
+ <img
|
|
|
+ class="decorator"
|
|
|
+ src="@/assets/images/nav-item-active-decorator.png"
|
|
|
+ alt=""
|
|
|
+ draggable="false"
|
|
|
+ >
|
|
|
+ </button>
|
|
|
</nav>
|
|
|
+
|
|
|
+ <Teleport to="body">
|
|
|
+ <audio
|
|
|
+ ref="bgAudio"
|
|
|
+ loop
|
|
|
+ :src="`${$env.VUE_APP_API_ORIGIN}${bgMusicUrl}`"
|
|
|
+ />
|
|
|
+ </Teleport>
|
|
|
+ <button
|
|
|
+ v-show="!$route.meta.hideNavBar && bgMusicUrl"
|
|
|
+ class="music-switch"
|
|
|
+ :style="{
|
|
|
+ backgroundImage: bgMusicStatus ? `url(${require(`@/assets/images/icon_music_2_on.png`)})` : `url(${require(`@/assets/images/icon_music_2_off.png`)})`,
|
|
|
+ }"
|
|
|
+ @click="onClickBgMusicBtn"
|
|
|
+ />
|
|
|
+ <Teleport
|
|
|
+ to="body"
|
|
|
+ >
|
|
|
+ <div
|
|
|
+ v-show="isShowInfoTooltip"
|
|
|
+ ref="infoTooltip"
|
|
|
+ class="info-tooltip"
|
|
|
+ >
|
|
|
+ <p v-show="contactMethod">
|
|
|
+ <span class="key">联系方式:</span><span class="value">{{ contactMethod }}</span>
|
|
|
+ </p>
|
|
|
+ <p v-show="email">
|
|
|
+ <span class="key">电子邮箱:</span><span class="value">{{ email }}</span>
|
|
|
+ </p>
|
|
|
+ <div
|
|
|
+ ref="tooltipArrow"
|
|
|
+ class="arrow"
|
|
|
+ />
|
|
|
+ </div>
|
|
|
+ </Teleport>
|
|
|
+ <button
|
|
|
+ v-show="!$route.meta.hideNavBar && (contactMethod || email)"
|
|
|
+ ref="infoButton"
|
|
|
+ class="info"
|
|
|
+ :style="{
|
|
|
+ backgroundImage: `url(${require(`@/assets/images/icon_info.png`)})`,
|
|
|
+ }"
|
|
|
+ @click="onClickInfoButton"
|
|
|
+ />
|
|
|
<button
|
|
|
v-show="!$route.meta.hideNavBar"
|
|
|
class="show-hide"
|
|
@@ -97,6 +154,30 @@
|
|
|
}"
|
|
|
@click="isShowNavBar = !isShowNavBar"
|
|
|
/>
|
|
|
+
|
|
|
+ <Teleport to="body">
|
|
|
+ <transition name="fade-out">
|
|
|
+ <HomeFadeIn
|
|
|
+ v-if="isShowFadeInMask"
|
|
|
+ class="fade-in-mask"
|
|
|
+ :progress="progress"
|
|
|
+ />
|
|
|
+ </transition>
|
|
|
+ </Teleport>
|
|
|
+
|
|
|
+ <Teleport to="body">
|
|
|
+ <div class="screen-rotate-tip">
|
|
|
+ <div class="inner-wrapper">
|
|
|
+ <img
|
|
|
+ class=""
|
|
|
+ src="@/assets/images/tip-screen-rotate.png"
|
|
|
+ alt=""
|
|
|
+ draggable="false"
|
|
|
+ >
|
|
|
+ <span>请横屏浏览</span>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </Teleport>
|
|
|
</div>
|
|
|
</template>
|
|
|
|
|
@@ -104,23 +185,34 @@
|
|
|
import HomeFadeIn from "@/components/HomeFadeIn.vue"
|
|
|
import {
|
|
|
computed,
|
|
|
+ getCurrentInstance,
|
|
|
+ nextTick,
|
|
|
onMounted,
|
|
|
reactive,
|
|
|
ref,
|
|
|
+ watch,
|
|
|
} from 'vue'
|
|
|
+import { useStore } from "vuex"
|
|
|
+import { computePosition, offset, shift, arrow } from '@floating-ui/dom'
|
|
|
+import { onClickOutside } from '@vueuse/core'
|
|
|
|
|
|
export default {
|
|
|
components: {
|
|
|
HomeFadeIn,
|
|
|
},
|
|
|
setup () {
|
|
|
- const isShowFadeInMask = ref(process.env.VUE_APP_CLI_MODE === 'dev' ? false : true)
|
|
|
+ const internalInstance = getCurrentInstance()
|
|
|
+ const store = useStore()
|
|
|
+
|
|
|
+ const isShowFadeInMask = ref(true)
|
|
|
const progress = ref(0)
|
|
|
- onMounted(() => {
|
|
|
- // this.$mitt.on('test', e => {
|
|
|
- // console.log('test', e)
|
|
|
- // })
|
|
|
|
|
|
+ onMounted(async () => {
|
|
|
+ window.G4AllList = await api.getMetaverseList()
|
|
|
+ })
|
|
|
+
|
|
|
+
|
|
|
+ onMounted(() => {
|
|
|
/**
|
|
|
* 加载unity
|
|
|
*/
|
|
@@ -133,11 +225,11 @@ export default {
|
|
|
var canvas = document.querySelector("#unity-canvas")
|
|
|
|
|
|
var buildUrl = "unity/Build"
|
|
|
- var loaderUrl = buildUrl + "/SHIndustryMuseum_2.0.loader.js"
|
|
|
+ var loaderUrl = buildUrl + "/SHIndustryMuseum_2.13.loader.js"
|
|
|
var config = {
|
|
|
- dataUrl: buildUrl + "/SHIndustryMuseum_2.0.data.unityweb",
|
|
|
- frameworkUrl: buildUrl + "/SHIndustryMuseum_2.0.framework.js.unityweb",
|
|
|
- codeUrl: buildUrl + "/SHIndustryMuseum_2.0.wasm.unityweb",
|
|
|
+ dataUrl: buildUrl + "/SHIndustryMuseum_2.13.data.unityweb",
|
|
|
+ frameworkUrl: buildUrl + "/SHIndustryMuseum_2.13.framework.js.unityweb",
|
|
|
+ codeUrl: buildUrl + "/SHIndustryMuseum_2.13.wasm.unityweb",
|
|
|
streamingAssetsUrl: "StreamingAssets",
|
|
|
companyName: "DefaultCompany",
|
|
|
productName: "SHIndustryMuseum",
|
|
@@ -170,19 +262,24 @@ export default {
|
|
|
}
|
|
|
}).then((unityInstance) => {
|
|
|
window.gUnityInst = unityInstance
|
|
|
-
|
|
|
- for (let index = 1; index <= 36; index++) {
|
|
|
- unityInstance.SendMessage('Panel1', 'ShowEnterprise', index) //显示id为index的企业
|
|
|
- // unityInstance.SendMessage('Panel1', 'HideEnterprise', index); //隐藏id为index的企业
|
|
|
- }
|
|
|
-
|
|
|
+ utils.loadUnitySceneGeneral()
|
|
|
}).catch((message) => {
|
|
|
- alert(message)
|
|
|
+ console.error('shabi', message)
|
|
|
})
|
|
|
}
|
|
|
window.onClickEnterprise = function (id) {
|
|
|
- if (window.onCorpOnMapClicked) {
|
|
|
- window.onCorpOnMapClicked(id)
|
|
|
+ if (window.handleClickEnterprise) {
|
|
|
+ window.handleClickEnterprise(id)
|
|
|
+ }
|
|
|
+ }
|
|
|
+ window.onClickPlanet = function (id) {
|
|
|
+ if (window.handleClickPlanet) {
|
|
|
+ window.handleClickPlanet(id)
|
|
|
+ }
|
|
|
+ }
|
|
|
+ window.onMovedPlanet = function (id) {
|
|
|
+ if (window.handleMovedPlanet) {
|
|
|
+ window.handleMovedPlanet(id)
|
|
|
}
|
|
|
}
|
|
|
document.body.appendChild(script)
|
|
@@ -191,16 +288,137 @@ export default {
|
|
|
*/
|
|
|
})
|
|
|
|
|
|
-
|
|
|
const isShowNavBar = ref(true)
|
|
|
const activeNavItemIdx = ref(0)
|
|
|
+ const navBarHeight = internalInstance.appContext.config.globalProperties.$isMobile ? `${90 / 1080 * window.innerHeight}px` : '90px'
|
|
|
+
|
|
|
+ /**
|
|
|
+ * 背景音乐按钮相关
|
|
|
+ */
|
|
|
+ function onClickBgMusicBtn() {
|
|
|
+ store.commit('switchBgMusic')
|
|
|
+ }
|
|
|
+ const bgMusicStatus = computed(() => {
|
|
|
+ return store.state.bgMusicStatus
|
|
|
+ })
|
|
|
+ const bgAudio = ref(null)
|
|
|
+ const bgMusicUrl = computed(() => {
|
|
|
+ return store.state.bgMusicUrl
|
|
|
+ })
|
|
|
+ watch(bgMusicStatus, (v) => {
|
|
|
+ if (v) {
|
|
|
+ bgAudio.value.play()
|
|
|
+ } else {
|
|
|
+ bgAudio.value.pause()
|
|
|
+ }
|
|
|
+ })
|
|
|
+ watch(bgMusicUrl, (v) => {
|
|
|
+ if (v && bgMusicStatus.value) {
|
|
|
+ console.log('sdkfjlsfllsflsfljsdfl')
|
|
|
+ nextTick(() => {
|
|
|
+ bgAudio.value.play()
|
|
|
+ })
|
|
|
+ }
|
|
|
+ })
|
|
|
+
|
|
|
+ document.addEventListener('click', function onFirstClick() {
|
|
|
+ if (bgMusicUrl.value) {
|
|
|
+ bgAudio.value.play()
|
|
|
+ store.commit('switchBgMusic')
|
|
|
+ document.removeEventListener('click', onFirstClick)
|
|
|
+ }
|
|
|
+ })
|
|
|
+
|
|
|
+ /**
|
|
|
+ * 信息展示弹框tooltip相关
|
|
|
+ */
|
|
|
+ const infoButton = ref(null)
|
|
|
+ const infoTooltip = ref(null)
|
|
|
+ const tooltipArrow = ref(null)
|
|
|
+ const isShowInfoTooltip = ref(false)
|
|
|
+ const contactMethod = ref('')
|
|
|
+ const email = ref('')
|
|
|
+
|
|
|
+ onMounted(() => {
|
|
|
+ api.getSiteInfo().then((res) => {
|
|
|
+ contactMethod.value = res.phone
|
|
|
+ email.value = res.email
|
|
|
+ store.commit('initBgMusicUrl', res.filePath)
|
|
|
+ })
|
|
|
+ })
|
|
|
+
|
|
|
+ function onClickInfoButton() {
|
|
|
+ isShowInfoTooltip.value = true
|
|
|
+ nextTick(() => {
|
|
|
+ computePosition(infoButton.value, infoTooltip.value, {
|
|
|
+ placement: 'top',
|
|
|
+ middleware: [
|
|
|
+ offset(10),
|
|
|
+ shift({
|
|
|
+ padding: 10,
|
|
|
+ }),
|
|
|
+ arrow({
|
|
|
+ element: tooltipArrow.value,
|
|
|
+ padding: 3,
|
|
|
+ }),
|
|
|
+ ],
|
|
|
+ }).then(({ x, y, placement, middlewareData }) => {
|
|
|
+ Object.assign(infoTooltip.value.style, {
|
|
|
+ left: `${x}px`,
|
|
|
+ top: `${y}px`,
|
|
|
+ })
|
|
|
+
|
|
|
+ const { x: arrowX, y: arrowY } = middlewareData.arrow
|
|
|
+ const arrowPlacement = {
|
|
|
+ top: 'bottom',
|
|
|
+ right: 'left',
|
|
|
+ bottom: 'top',
|
|
|
+ left: 'right',
|
|
|
+ }[placement.split('-')[0]]
|
|
|
+ const dialogPlacement2arrowRotate = {
|
|
|
+ top: '-135deg',
|
|
|
+ right: '-45deg',
|
|
|
+ bottom: '45deg',
|
|
|
+ left: '135deg',
|
|
|
+ }
|
|
|
+ Object.assign(tooltipArrow.value.style, {
|
|
|
+ top: 'initial',
|
|
|
+ bottom: 'initial',
|
|
|
+ left: 'initial',
|
|
|
+ right: 'initial',
|
|
|
+ })
|
|
|
+ Object.assign(tooltipArrow.value.style, {
|
|
|
+ left: arrowX != null ? `${arrowX}px` : '',
|
|
|
+ [arrowPlacement]: '0',
|
|
|
+ transform: ` translateY(50%) rotate(${dialogPlacement2arrowRotate[placement]})`,
|
|
|
+ })
|
|
|
+ })
|
|
|
+ })
|
|
|
+ }
|
|
|
+
|
|
|
+ onClickOutside(infoTooltip, (event) => {
|
|
|
+ if (isShowInfoTooltip.value) {
|
|
|
+ isShowInfoTooltip.value = false
|
|
|
+ }
|
|
|
+ })
|
|
|
|
|
|
return {
|
|
|
+ activeNavItemIdx,
|
|
|
+ bgAudio,
|
|
|
+ bgMusicUrl,
|
|
|
+ bgMusicStatus,
|
|
|
+ contactMethod,
|
|
|
+ email,
|
|
|
+ infoButton,
|
|
|
+ infoTooltip,
|
|
|
isShowFadeInMask,
|
|
|
- progress,
|
|
|
-
|
|
|
+ isShowInfoTooltip,
|
|
|
isShowNavBar,
|
|
|
- activeNavItemIdx,
|
|
|
+ navBarHeight,
|
|
|
+ onClickBgMusicBtn,
|
|
|
+ onClickInfoButton,
|
|
|
+ progress,
|
|
|
+ tooltipArrow,
|
|
|
}
|
|
|
},
|
|
|
}
|
|
@@ -216,7 +434,6 @@ html, body {
|
|
|
#app {
|
|
|
height: 100%;
|
|
|
width: 100%;
|
|
|
- height: 100%;
|
|
|
background-image: url(@/assets/images/main-bg.jpg);
|
|
|
background-size: cover;
|
|
|
background-repeat: no-repeat;
|
|
@@ -235,11 +452,19 @@ html, body {
|
|
|
|
|
|
// 字体
|
|
|
@font-face {
|
|
|
- font-family: 'Source Han Serif CN-Regular';
|
|
|
+ font-family: 'Source Han Sans CN-Light';
|
|
|
+ src: url('@/assets/style/SOURCEHANSANSCN-LIGHT.OTF');
|
|
|
+}
|
|
|
+@font-face {
|
|
|
+ font-family: 'Source Han Sans CN-Regular';
|
|
|
+ src: url('@/assets/style/SOURCEHANSANSCN-REGULAR.OTF');
|
|
|
+}
|
|
|
+@font-face {
|
|
|
+ font-family: 'Source Han Sans CN';
|
|
|
src: url('@/assets/style/SOURCEHANSANSCN-REGULAR.OTF');
|
|
|
}
|
|
|
@font-face {
|
|
|
- font-family: 'Source Han Serif CN-Bold';
|
|
|
+ font-family: 'Source Han Sans CN-Bold';
|
|
|
src: url('@/assets/style/SOURCEHANSANSCN-BOLD.OTF');
|
|
|
}
|
|
|
// i {
|
|
@@ -259,21 +484,21 @@ html, body {
|
|
|
opacity: 0;
|
|
|
}
|
|
|
|
|
|
-// // 不断渐变显隐 animation
|
|
|
-// .animation-show-hide {
|
|
|
-// animation: show-hide 1.8s infinite;
|
|
|
-// }
|
|
|
-// @keyframes show-hide {
|
|
|
-// 0% {
|
|
|
-// opacity: 0;
|
|
|
-// }
|
|
|
-// 50% {
|
|
|
-// opacity: 1;
|
|
|
-// }
|
|
|
-// 100% {
|
|
|
-// opacity: 0;
|
|
|
-// }
|
|
|
-// }
|
|
|
+// 不断渐变显隐 animation
|
|
|
+.animation-show-hide {
|
|
|
+ animation: show-hide 1.8s infinite;
|
|
|
+}
|
|
|
+@keyframes show-hide {
|
|
|
+ 0% {
|
|
|
+ opacity: 0;
|
|
|
+ }
|
|
|
+ 50% {
|
|
|
+ opacity: 1;
|
|
|
+ }
|
|
|
+ 100% {
|
|
|
+ opacity: 0;
|
|
|
+ }
|
|
|
+}
|
|
|
|
|
|
// // vue-viewer
|
|
|
// .viewer-container {
|
|
@@ -283,31 +508,122 @@ html, body {
|
|
|
// .viewer-backdrop {
|
|
|
// background-color: rgba(0, 0, 0, 90%) !important;
|
|
|
// }
|
|
|
+
|
|
|
+.info-tooltip {
|
|
|
+ position: absolute;
|
|
|
+ padding: 8px;
|
|
|
+ z-index: 50;
|
|
|
+ background: rgba(32,52,75,0.3);
|
|
|
+ box-shadow: inset 1px 0px 1px 0px rgba(255,236,188,0.5);
|
|
|
+ backdrop-filter: blur(10px);
|
|
|
+ padding: 8px;
|
|
|
+ font-size: 11px;
|
|
|
+ font-family: Source Han Sans CN-Regular, Source Han Sans CN;
|
|
|
+ font-weight: 400;
|
|
|
+ color: #FFFFFF;
|
|
|
+ line-height: 1.5;
|
|
|
+ white-space: pre;
|
|
|
+ opacity: 0.8;
|
|
|
+ >p{
|
|
|
+ >.key{
|
|
|
+
|
|
|
+ }
|
|
|
+ >.value{
|
|
|
+
|
|
|
+ }
|
|
|
+ }
|
|
|
+ >.arrow {
|
|
|
+ position: absolute;
|
|
|
+ background-color: inherit;
|
|
|
+ width: 10px;
|
|
|
+ height: 10px;
|
|
|
+ border: 1px solid transparent;
|
|
|
+ border-left: inherit;
|
|
|
+ border-top: inherit;
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
+.screen-rotate-tip {
|
|
|
+ position: fixed;
|
|
|
+ left: 0;
|
|
|
+ top: 0;
|
|
|
+ width: 100%;
|
|
|
+ height: 100%;
|
|
|
+ background: rgba(0, 0, 0, 0.8);
|
|
|
+ display: none;
|
|
|
+ z-index: 100;
|
|
|
+ @media (max-aspect-ratio: 1/1) {
|
|
|
+ display: initial;
|
|
|
+ }
|
|
|
+ >.inner-wrapper {
|
|
|
+ position: absolute;
|
|
|
+ left: 50%;
|
|
|
+ top: 50%;
|
|
|
+ transform: translate(-50%, -50%);
|
|
|
+ width: 126px;
|
|
|
+ height: 126px;
|
|
|
+ >img {
|
|
|
+ width: 100%;
|
|
|
+ height: 100%;
|
|
|
+ }
|
|
|
+ >span {
|
|
|
+ position: absolute;
|
|
|
+ left: 50%;
|
|
|
+ bottom: -8px;
|
|
|
+ transform: translate(-50%, 100%);
|
|
|
+ font-size: 16px;
|
|
|
+ font-family: Source Han Sans-Regular, Source Han Sans;
|
|
|
+ font-weight: 400;
|
|
|
+ color: #FFFFFF;
|
|
|
+ white-space: pre;
|
|
|
+ }
|
|
|
+ }
|
|
|
+}
|
|
|
</style>
|
|
|
+
|
|
|
<style scoped lang="less">
|
|
|
-#app {
|
|
|
- >.fade-in-mask {
|
|
|
- z-index: 5;
|
|
|
+.app-view {
|
|
|
+ width: 100%;
|
|
|
+ height: calc(100% - v-bind('navBarHeight'));
|
|
|
+ position: relative;
|
|
|
+ &.higher {
|
|
|
+ height: 100%;
|
|
|
}
|
|
|
- >nav {
|
|
|
+ >#unity-container {
|
|
|
position: absolute;
|
|
|
+ width: 100%;
|
|
|
+ height: 100%;
|
|
|
+ >#unity-canvas {
|
|
|
+ height: 100%;
|
|
|
+ width: 100%;
|
|
|
+ background: #231F20;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ >nav {
|
|
|
+ position: fixed;
|
|
|
left: 0;
|
|
|
width: 100%;
|
|
|
- height: 112px;
|
|
|
+ height: v-bind('navBarHeight');
|
|
|
border-radius: 5px 5px 0 0;
|
|
|
- border-top: solid 1px #D2BD84;
|
|
|
+ border-top: rgba(210, 189, 132, 0.7);
|
|
|
box-shadow: inset 0px 2px 2px 0px rgba(210,189,132,0.45), 0px -9px 24px 0px rgba(183,162,109,0.25);
|
|
|
display: flex;
|
|
|
justify-content: center;
|
|
|
align-items: center;
|
|
|
transition: all 0.5s;
|
|
|
- backdrop-filter: blur(5px);
|
|
|
+ // backdrop-filter: blur(10px);
|
|
|
+ background-image: url(@/assets/images/bg-bottom-bar.jpg);
|
|
|
+ background-size: cover;
|
|
|
+ background-repeat: no-repeat;
|
|
|
+ background-position: center center;
|
|
|
+ // background-color: #0c0d12;
|
|
|
>button.tab-item {
|
|
|
font-size: 30px;
|
|
|
font-family: Source Han Sans CN-Regular, Source Han Sans CN;
|
|
|
font-weight: 400;
|
|
|
color: #FFFFFF;
|
|
|
- margin-left: 200px;
|
|
|
+ margin-left: 150px;
|
|
|
opacity: 0.5;
|
|
|
position: relative;
|
|
|
user-select: none;
|
|
@@ -319,6 +635,7 @@ html, body {
|
|
|
}
|
|
|
&.active {
|
|
|
opacity: initial;
|
|
|
+ font-weight: bold;
|
|
|
>img.decorator {
|
|
|
display: initial;
|
|
|
position: absolute;
|
|
@@ -329,26 +646,165 @@ html, body {
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
- @media only screen and (max-width: 1400px) {
|
|
|
+ @media only screen and (max-width: 1468px) {
|
|
|
>button.tab-item {
|
|
|
- margin-left: 100px;
|
|
|
+ margin-left: 50px;
|
|
|
}
|
|
|
}
|
|
|
+ @media only screen and (max-width: 1075px) {
|
|
|
+ >button.tab-item {
|
|
|
+ margin-left: 10px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ >button.music-switch {
|
|
|
+ position: fixed;
|
|
|
+ right: calc(82px + (36px + 30px) * 2);
|
|
|
+ bottom: 28px;
|
|
|
+ width: 36px;
|
|
|
+ height: 36px;
|
|
|
+ background-size: cover;
|
|
|
+ background-repeat: no-repeat;
|
|
|
+ background-position: center center;
|
|
|
+ }
|
|
|
+ @media only screen and (max-width: 1670px) {
|
|
|
+ >button.music-switch {
|
|
|
+ right: calc(10px + (36px + 10px) * 2);
|
|
|
+ }
|
|
|
+ }
|
|
|
+ >button.info {
|
|
|
+ position: fixed;
|
|
|
+ right: calc(82px + (36px + 30px) * 1);
|
|
|
+ bottom: 28px;
|
|
|
+ width: 36px;
|
|
|
+ height: 36px;
|
|
|
+ background-size: cover;
|
|
|
+ background-repeat: no-repeat;
|
|
|
+ background-position: center center;
|
|
|
+ }
|
|
|
+ @media only screen and (max-width: 1670px) {
|
|
|
+ >button.info {
|
|
|
+ right: calc(10px + (36px + 10px) * 1);
|
|
|
+ }
|
|
|
}
|
|
|
>button.show-hide {
|
|
|
- position: absolute;
|
|
|
+ position: fixed;
|
|
|
right: 82px;
|
|
|
- bottom: 34px;
|
|
|
+ bottom: 28px;
|
|
|
width: 36px;
|
|
|
height: 36px;
|
|
|
background-size: cover;
|
|
|
background-repeat: no-repeat;
|
|
|
background-position: center center;
|
|
|
}
|
|
|
- @media only screen and (max-width: 1400px) {
|
|
|
+ @media only screen and (max-width: 1670px) {
|
|
|
>button.show-hide {
|
|
|
right: 10px;
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
+
|
|
|
+.mobile {
|
|
|
+ .app-view {
|
|
|
+ width: 100%;
|
|
|
+ height: calc(100% - v-bind('navBarHeight'));
|
|
|
+ position: relative;
|
|
|
+ &.higher {
|
|
|
+ height: 100%;
|
|
|
+ }
|
|
|
+ >.fade-in-mask {
|
|
|
+ z-index: 2005;
|
|
|
+ }
|
|
|
+ >#unity-container {
|
|
|
+ position: absolute;
|
|
|
+ width: 100%;
|
|
|
+ height: 100%;
|
|
|
+ >#unity-canvas {
|
|
|
+ height: 100%;
|
|
|
+ width: 100%;
|
|
|
+ background: #231F20;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ >nav {
|
|
|
+ position: fixed;
|
|
|
+ left: 0;
|
|
|
+ width: 100%;
|
|
|
+ height: v-bind('navBarHeight');
|
|
|
+ border-radius: 5px 5px 0 0;
|
|
|
+ border-top: rgba(210, 189, 132, 0.7);
|
|
|
+ box-shadow: inset 0px 2px 2px 0px rgba(210,189,132,0.45), 0px -9px 24px 0px rgba(183,162,109,0.25);
|
|
|
+ display: flex;
|
|
|
+ justify-content: center;
|
|
|
+ align-items: center;
|
|
|
+ transition: all 0.5s;
|
|
|
+ // backdrop-filter: blur(10px);
|
|
|
+ background-image: url(@/assets/images/bg-bottom-bar.jpg);
|
|
|
+ background-size: cover;
|
|
|
+ background-repeat: no-repeat;
|
|
|
+ background-position: center center;
|
|
|
+ // background-color: #0c0d12;
|
|
|
+ >button.tab-item {
|
|
|
+ font-size: calc(30 / 1080 * 83vh);
|
|
|
+ font-family: Source Han Sans CN-Regular, Source Han Sans CN;
|
|
|
+ font-weight: 400;
|
|
|
+ color: #FFFFFF;
|
|
|
+ margin-left: calc(200 / 1080 * 83vh);
|
|
|
+ opacity: 0.5;
|
|
|
+ position: relative;
|
|
|
+ user-select: none;
|
|
|
+ >img.decorator {
|
|
|
+ display: none;
|
|
|
+ }
|
|
|
+ &:first-of-type {
|
|
|
+ margin-left: initial;
|
|
|
+ }
|
|
|
+ &.active {
|
|
|
+ opacity: initial;
|
|
|
+ font-weight: bold;
|
|
|
+ >img.decorator {
|
|
|
+ display: none;
|
|
|
+ // display: initial;
|
|
|
+ // position: absolute;
|
|
|
+ // left: 50%;
|
|
|
+ // bottom: -calc(15 / 1080 * 83vh);
|
|
|
+ // transform: translateX(-50%);
|
|
|
+ // width: 150%;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ >button.music-switch {
|
|
|
+ position: fixed;
|
|
|
+ right: calc((82 + (36 + 80) * 2) / 1080 * 83vh);
|
|
|
+ bottom: calc(28 / 1080 * 83vh);
|
|
|
+ width: calc(36 / 1080 * 83vh);
|
|
|
+ height: calc(36 / 1080 * 83vh);
|
|
|
+ background-size: cover;
|
|
|
+ background-repeat: no-repeat;
|
|
|
+ background-position: center center;
|
|
|
+ }
|
|
|
+ >button.info {
|
|
|
+ position: fixed;
|
|
|
+ right: calc((82 + (36 + 80) * 1) / 1080 * 83vh);
|
|
|
+ bottom: calc(28 / 1080 * 83vh);
|
|
|
+ width: calc(36 / 1080 * 83vh);
|
|
|
+ height: calc(36 / 1080 * 83vh);
|
|
|
+ background-size: cover;
|
|
|
+ background-repeat: no-repeat;
|
|
|
+ background-position: center center;
|
|
|
+ }
|
|
|
+ >button.show-hide {
|
|
|
+ position: fixed;
|
|
|
+ right: calc(82 / 1080 * 83vh);
|
|
|
+ bottom: calc(28 / 1080 * 83vh);
|
|
|
+ width: calc(36 / 1080 * 83vh);
|
|
|
+ height: calc(36 / 1080 * 83vh);
|
|
|
+ background-size: cover;
|
|
|
+ background-repeat: no-repeat;
|
|
|
+ background-position: center center;
|
|
|
+ }
|
|
|
+ }
|
|
|
+}
|
|
|
</style>
|