|
|
@@ -86,6 +86,46 @@
|
|
|
>
|
|
|
</button>
|
|
|
</nav>
|
|
|
+
|
|
|
+ <button
|
|
|
+ v-show="!$route.meta.hideNavBar"
|
|
|
+ class="music-switch"
|
|
|
+ :style="{
|
|
|
+ backgroundImage: isShowNavBar ? `url(${require(`@/assets/images/icon_music_2_on.png`)})` : `url(${require(`@/assets/images/icon_music_2_off.png`)})`,
|
|
|
+ }"
|
|
|
+ />
|
|
|
+ <Teleport
|
|
|
+ to="body"
|
|
|
+ >
|
|
|
+ <div
|
|
|
+ v-show="isShowInfoTooltip"
|
|
|
+ ref="infoTooltip"
|
|
|
+ class="info-tooltip"
|
|
|
+ >
|
|
|
+ <p>
|
|
|
+ <span class="key">版本号：</span><span class="value">{{ versionNumber }}</span>
|
|
|
+ </p>
|
|
|
+ <p>
|
|
|
+ <span class="key">联系方式：</span><span class="value">{{ contactMethod }}</span>
|
|
|
+ </p>
|
|
|
+ <p>
|
|
|
+ <span class="key">电子邮箱：</span><span class="value">{{ email }}</span>
|
|
|
+ </p>
|
|
|
+ <div
|
|
|
+ ref="tooltipArrow"
|
|
|
+ class="arrow"
|
|
|
+ />
|
|
|
+ </div>
|
|
|
+ </Teleport>
|
|
|
+ <button
|
|
|
+ v-show="!$route.meta.hideNavBar"
|
|
|
+ ref="infoButton"
|
|
|
+ class="info"
|
|
|
+ :style="{
|
|
|
+ backgroundImage: `url(${require(`@/assets/images/icon_info.png`)})`,
|
|
|
+ }"
|
|
|
+ @click="onClickInfoButton"
|
|
|
+ />
|
|
|
<button
|
|
|
v-show="!$route.meta.hideNavBar"
|
|
|
class="show-hide"
|
|
|
@@ -103,7 +143,7 @@
|
|
|
:progress="progress"
|
|
|
/>
|
|
|
</transition>
|
|
|
- </Teleport>>
|
|
|
+ </Teleport>
|
|
|
|
|
|
<Teleport to="body">
|
|
|
<div class="screen-rotate-tip">
|
|
|
@@ -129,7 +169,10 @@ import {
|
|
|
reactive,
|
|
|
ref,
|
|
|
getCurrentInstance,
|
|
|
+ nextTick,
|
|
|
} from 'vue'
|
|
|
+import { computePosition, offset, shift, arrow } from '@floating-ui/dom'
|
|
|
+import { onClickOutside } from '@vueuse/core'
|
|
|
|
|
|
export default {
|
|
|
components: {
|
|
|
@@ -138,7 +181,7 @@ export default {
|
|
|
setup () {
|
|
|
const internalInstance = getCurrentInstance()
|
|
|
|
|
|
- const isShowFadeInMask = ref(true)
|
|
|
+ const isShowFadeInMask = ref(false)
|
|
|
const progress = ref(0)
|
|
|
|
|
|
onMounted(() => {
|
|
|
@@ -154,11 +197,11 @@ export default {
|
|
|
var canvas = document.querySelector("#unity-canvas")
|
|
|
|
|
|
var buildUrl = "unity/Build"
|
|
|
- var loaderUrl = buildUrl + "/SHIndustryMuseum_2.10.loader.js"
|
|
|
+ var loaderUrl = buildUrl + "/SHIndustryMuseum_2.11.loader.js"
|
|
|
var config = {
|
|
|
- dataUrl: buildUrl + "/SHIndustryMuseum_2.10.data.unityweb",
|
|
|
- frameworkUrl: buildUrl + "/SHIndustryMuseum_2.10.framework.js.unityweb",
|
|
|
- codeUrl: buildUrl + "/SHIndustryMuseum_2.10.wasm.unityweb",
|
|
|
+ dataUrl: buildUrl + "/SHIndustryMuseum_2.11.data.unityweb",
|
|
|
+ frameworkUrl: buildUrl + "/SHIndustryMuseum_2.11.framework.js.unityweb",
|
|
|
+ codeUrl: buildUrl + "/SHIndustryMuseum_2.11.wasm.unityweb",
|
|
|
streamingAssetsUrl: "StreamingAssets",
|
|
|
companyName: "DefaultCompany",
|
|
|
productName: "SHIndustryMuseum",
|
|
|
@@ -220,13 +263,98 @@ export default {
|
|
|
const isShowNavBar = ref(true)
|
|
|
const activeNavItemIdx = ref(0)
|
|
|
const navBarHeight = internalInstance.appContext.config.globalProperties.$isMobile ? `${90 / 1080 * window.innerHeight}px` : '90px'
|
|
|
+
|
|
|
+ /**
|
|
|
+ * 信息展示弹框tooltip相关
|
|
|
+ */
|
|
|
+ const infoButton = ref(null)
|
|
|
+ const infoTooltip = ref(null)
|
|
|
+ const tooltipArrow = ref(null)
|
|
|
+ const isShowInfoTooltip = ref(false)
|
|
|
+ const versionNumber = ref('v1.4.5')
|
|
|
+ const contactMethod = ref('135-7826-7133')
|
|
|
+ const email = ref('y.ddzyyagf@igbp.hk')
|
|
|
+
|
|
|
+ // onMounted(() => {
|
|
|
+ // api.getSiteInfo().then((res) => {
|
|
|
+ // console.log(res, 'salfklsfljsdlf')
|
|
|
+ // versionNumber.value = res.
|
|
|
+ // contactMethod.value = res.phone
|
|
|
+ // email.value = res.email
|
|
|
+
|
|
|
+ // })
|
|
|
+ // })
|
|
|
+
|
|
|
+ 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
|
|
|
+ console.log(arrowX, 'sdfkjsdlkfjl;ksdjf')
|
|
|
+ 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,
|
|
|
+ contactMethod,
|
|
|
+ email,
|
|
|
+ infoButton,
|
|
|
+ infoTooltip,
|
|
|
isShowFadeInMask,
|
|
|
- progress,
|
|
|
-
|
|
|
+ isShowInfoTooltip,
|
|
|
isShowNavBar,
|
|
|
- activeNavItemIdx,
|
|
|
navBarHeight,
|
|
|
+ onClickInfoButton,
|
|
|
+ progress,
|
|
|
+ tooltipArrow,
|
|
|
+ versionNumber,
|
|
|
}
|
|
|
},
|
|
|
}
|
|
|
@@ -317,6 +445,40 @@ html, body {
|
|
|
// 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;
|
|
|
@@ -363,9 +525,6 @@ html, body {
|
|
|
&.higher {
|
|
|
height: 100%;
|
|
|
}
|
|
|
- >.fade-in-mask {
|
|
|
- z-index: 2005;
|
|
|
- }
|
|
|
>#unity-container {
|
|
|
position: absolute;
|
|
|
width: 100%;
|
|
|
@@ -429,6 +588,37 @@ html, body {
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
+
|
|
|
+ >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: fixed;
|
|
|
right: 82px;
|
|
|
@@ -439,7 +629,7 @@ html, body {
|
|
|
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;
|
|
|
}
|
任一存
