|
|
@@ -12,10 +12,12 @@ declare global {
|
|
|
handleRobot: (state: string) => void,
|
|
|
handleTopRobot: (state: string) => void,
|
|
|
handleShowFigure: (v: boolean) => void,
|
|
|
+ openGameBoxFu: (v: boolean) => void,
|
|
|
}
|
|
|
}
|
|
|
|
|
|
const route = useRoute()
|
|
|
+const router = useRouter()
|
|
|
const store = useStore()
|
|
|
|
|
|
const isShowHosList = ref(false)
|
|
|
@@ -25,23 +27,55 @@ const currentHot = ref({} as any)
|
|
|
const isReady = ref(false)
|
|
|
const changeUnit = (unit: any) => {
|
|
|
currentUnit.value = unit
|
|
|
+ animalZhenShuNumber.value = currentUnit.value.xuliezhen[animalStat.value].zhenShu
|
|
|
+ duration.value = currentUnit.value.xuliezhen[animalStat.value].duration
|
|
|
isShowHosList.value = false
|
|
|
}
|
|
|
-const hotspots = ref([])
|
|
|
+const hotspots = ref([] as any)
|
|
|
+
|
|
|
+// 用Object.keys 和 reduce 方法过滤空值属性
|
|
|
+const filterEmptyProps = (obj: any) => {
|
|
|
+ return Object.keys(obj).reduce((acc, key) => {
|
|
|
+ if (obj[key].title !== '' && obj[key].title !== ' ') {
|
|
|
+ // @ts-ignore
|
|
|
+ acc[key] = obj[key];
|
|
|
+ }
|
|
|
+ return acc;
|
|
|
+ }, {});
|
|
|
+}
|
|
|
// 获取所有单元的热点列表
|
|
|
const getAllHotspot = () => {
|
|
|
store.dataAll.sceneList.forEach((item: any) => {
|
|
|
axios.get(`https://super.4dage.com/data/${item.code}/data2.js?m=${new Date().getTime()}`).then((res: any) => {
|
|
|
- console.log('热点列表', res.data)
|
|
|
//@ts-ignore
|
|
|
hotspots.value.push({
|
|
|
id: item.id,
|
|
|
unit: item.name,
|
|
|
- hots: res.data.hots,
|
|
|
+ hots: filterEmptyProps(res.data.hots),
|
|
|
code: item.code,
|
|
|
+ xuliezhen: item.xuliezhen
|
|
|
})
|
|
|
+ if (item.code == route.query.code) {
|
|
|
+ currentUnit.value = {
|
|
|
+ id: item.id,
|
|
|
+ unit: item.name,
|
|
|
+ hots: filterEmptyProps(res.data.hots),
|
|
|
+ code: item.code,
|
|
|
+ xuliezhen: item.xuliezhen
|
|
|
+ }
|
|
|
+ }
|
|
|
})
|
|
|
})
|
|
|
+ setTimeout(() => {
|
|
|
+ // let newList = []
|
|
|
+ hotspots.value.forEach((item: any, index: number) => {
|
|
|
+ if (item.id == 1) {
|
|
|
+ hotspots.value.unshift(hotspots.value.splice(index, 1)[0])
|
|
|
+ } else if (item.id == 9) {
|
|
|
+ hotspots.value.push(hotspots.value.splice(index, 1)[0])
|
|
|
+ }
|
|
|
+ })
|
|
|
+ }, 500)
|
|
|
}
|
|
|
watch(hotspots.value, (newVal: any) => {
|
|
|
if (newVal.length == store.dataAll.sceneList.length) {
|
|
|
@@ -49,9 +83,17 @@ watch(hotspots.value, (newVal: any) => {
|
|
|
currentUnit.value = hotspots.value.filter((item: any) => {
|
|
|
return item.code == route.query.code
|
|
|
})[0]
|
|
|
+ animalZhenShuNumber.value = currentUnit.value.xuliezhen[animalStat.value].zhenShu
|
|
|
+ duration.value = currentUnit.value.xuliezhen[animalStat.value].duration
|
|
|
}
|
|
|
}, { immediate: true })
|
|
|
|
|
|
+watch(isShowHosList, (newVal: any) => {
|
|
|
+ if (newVal && browser.mobile) {
|
|
|
+ isShowFigure.value = false
|
|
|
+ }
|
|
|
+})
|
|
|
+
|
|
|
const goHotCamarer = (hot: any) => {
|
|
|
const iframe = document.getElementById('sceneiframe') as HTMLIFrameElement
|
|
|
//@ts-ignore
|
|
|
@@ -62,9 +104,26 @@ const goHotCamarer = (hot: any) => {
|
|
|
|
|
|
// 形象状态 greeting-招呼 idle-静默 talk-说话
|
|
|
const animalStat = ref('greeting')
|
|
|
+const animalZhenShuNumber = ref(48 as number)
|
|
|
+const animalZhenShu = computed(() => {
|
|
|
+ return `steps(${animalZhenShuNumber.value})`
|
|
|
+})
|
|
|
+const translateXNumber = computed(() => {
|
|
|
+ return browser.mobile ? `${-100 * animalZhenShuNumber.value}px` : `${-150 * animalZhenShuNumber.value}px`
|
|
|
+})
|
|
|
+const duration = ref(`3s`)
|
|
|
const xingxiangListShow = ref(false)
|
|
|
const isShowFigure = ref(true)
|
|
|
|
|
|
+
|
|
|
+const isShowGameList = ref(false)
|
|
|
+
|
|
|
+// 内嵌小游戏界面打开
|
|
|
+const openGame = (game: any) => {
|
|
|
+ console.log(game)
|
|
|
+}
|
|
|
+
|
|
|
+
|
|
|
onMounted(() => {
|
|
|
getAllHotspot()
|
|
|
// store.hotspots.length == 0 ? getAllHotspot() : hotspots.value = store.hotspots, currentUnit.value = hotspots.value[0]
|
|
|
@@ -75,28 +134,39 @@ onMounted(() => {
|
|
|
// 机器人状态改变
|
|
|
// greeting-招呼 idle-静默 talk-说话
|
|
|
window.handleRobot = (state: string) => {
|
|
|
- console.log('handleRobot!!!', state);
|
|
|
-
|
|
|
animalStat.value = state
|
|
|
+ animalZhenShuNumber.value = currentUnit.value.xuliezhen[animalStat.value].zhenShu
|
|
|
+ duration.value = currentUnit.value.xuliezhen[animalStat.value].duration
|
|
|
isReady.value = true
|
|
|
}
|
|
|
|
|
|
// 机器人在上面 top:上 bottom:下
|
|
|
+ // @ts-ignore
|
|
|
window.handleTopRobot = (state: string) => {
|
|
|
const xuliezhenDom = document.getElementById('xuliezhenid')
|
|
|
- state == 'top' ? !browser.mobile ? xuliezhenDom!.style.bottom = '200px' : xuliezhenDom!.style.bottom = '120px' : !browser.mobile ? xuliezhenDom!.style.bottom = '100px' : xuliezhenDom!.style.bottom = '10px'
|
|
|
+ state == 'top' ? !browser.mobile ? xuliezhenDom!.style.bottom = '120px' : xuliezhenDom!.style.bottom = '120px' : !browser.mobile ? xuliezhenDom!.style.bottom = '0px' : xuliezhenDom!.style.bottom = '10px'
|
|
|
}
|
|
|
|
|
|
// 机器人隐藏与显示（热点打开时隐藏）
|
|
|
window.handleShowFigure = (state: boolean) => {
|
|
|
isShowFigure.value = state
|
|
|
}
|
|
|
+
|
|
|
+ // 打开游戏界面弹窗
|
|
|
+ window.openGameBoxFu = () => {
|
|
|
+ isShowGameList.value = true
|
|
|
+ }
|
|
|
})
|
|
|
</script>
|
|
|
|
|
|
<template>
|
|
|
<div class='all'>
|
|
|
+ <!-- 返回按钮 -->
|
|
|
+ <img class="backBtn" v-show="isShowFigure" src="@/assets/images/scene/back.png" alt=""
|
|
|
+ @click="() => { router.replace('/home') }">
|
|
|
<iframe id="sceneiframe" :src="`./scene/index.html?m=${currentUnit.code}`"></iframe>
|
|
|
+ <!-- 本地 -->
|
|
|
+ <!-- <iframe id="sceneiframe" :src="`./scene/index.html?m=${currentUnit.code}`"></iframe> -->
|
|
|
<!-- 热点列表 -->
|
|
|
<div v-show="isShowHosList" class="hots-box">
|
|
|
<img v-show="browser.mobile" @click="isShowHosList = false" class="close-icon" src="@/assets/images/close-icon.png"
|
|
|
@@ -111,6 +181,7 @@ onMounted(() => {
|
|
|
<img v-show="!browser.mobile" @click="isShowHosList = false" class="close-icon"
|
|
|
src="@/assets/images/close-icon.png" alt="">
|
|
|
<div class="right-content">
|
|
|
+ <div v-show="JSON.stringify(currentUnit.hots) == '{}'" class="right-item">暂无热点</div>
|
|
|
<div class="right-item" :title="item.title" v-for="(item, index) in currentUnit.hots" :key="index"
|
|
|
@click="goHotCamarer(item)" :style="{ color: currentHot.sid == item.sid ? '#C5A16C' : '' }">{{ item.title
|
|
|
}}
|
|
|
@@ -118,10 +189,23 @@ onMounted(() => {
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
- <div class="xingxiangBox" v-show="isShowFigure">
|
|
|
+ <div id="xuliezhenid" class="xingxiangBox" v-show="isShowFigure">
|
|
|
<!-- 形象人 -->
|
|
|
- <div id="xuliezhenid" class="xuliezhen" v-if="isReady" @click="xingxiangListShow = true"
|
|
|
- :style="{ backgroundImage: `url(${baseUrl}/animation/${currentUnit.id + 1}/${animalStat}.png)`, backgroundSize: 'cover' }">
|
|
|
+ <div class="xuliezhen" v-if="isReady" @click="xingxiangListShow = true"
|
|
|
+ :style="{ backgroundImage: `url(${baseUrl}/animation/${currentUnit.id}/${animalStat}.png)`, backgroundSize: 'cover' }">
|
|
|
+ </div>
|
|
|
+ <!-- 积分牌 -->
|
|
|
+ <div class="score-box" v-if="isReady">
|
|
|
+ <img class="headImg" src="@/assets/images/scene/userHead.png" alt="">
|
|
|
+ <!-- 已登录状态 -->
|
|
|
+ <div>
|
|
|
+ <div class="title">积分</div>
|
|
|
+ <div class="scroll-wrap">
|
|
|
+ <div class="scroll-item" title="56666666">
|
|
|
+ 56666666
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
</div>
|
|
|
<!-- 形象listBox -->
|
|
|
<div class="xulielistBox" v-show="xingxiangListShow">
|
|
|
@@ -131,6 +215,18 @@ onMounted(() => {
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
+
|
|
|
+ <!-- 游戏列表弹窗 -->
|
|
|
+ <div class="game-list-box" v-show="isShowGameList">
|
|
|
+ <div class="game-list">
|
|
|
+ <div class="game-list-item" v-for="(item, index) in store.dataAll.gameList" :key="index" @click="openGame(item)">
|
|
|
+ <img :src="`${baseUrl}/game/${item.id}.png`" alt="">
|
|
|
+ <div>{{ item.name }}</div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <img src="@/assets/images/close-icon.png" class="close-icon" @click="isShowGameList = false" alt="">
|
|
|
+ </div>
|
|
|
+
|
|
|
</div>
|
|
|
</template>
|
|
|
|
|
|
@@ -140,6 +236,13 @@ onMounted(() => {
|
|
|
height: 100%;
|
|
|
overflow: hidden;
|
|
|
|
|
|
+ .backBtn {
|
|
|
+ position: absolute;
|
|
|
+ top: 3%;
|
|
|
+ left: 2%;
|
|
|
+ cursor: pointer;
|
|
|
+ }
|
|
|
+
|
|
|
iframe {
|
|
|
width: 100%;
|
|
|
height: 100%;
|
|
|
@@ -195,7 +298,6 @@ onMounted(() => {
|
|
|
background: #66141885;
|
|
|
}
|
|
|
|
|
|
- ;
|
|
|
}
|
|
|
|
|
|
.left-item:first-child {
|
|
|
@@ -218,6 +320,7 @@ onMounted(() => {
|
|
|
align-items: center;
|
|
|
justify-content: end;
|
|
|
position: relative;
|
|
|
+ padding: 0 10px;
|
|
|
|
|
|
// .close-icon {
|
|
|
// width: 30px;
|
|
|
@@ -261,20 +364,22 @@ onMounted(() => {
|
|
|
|
|
|
.xingxiangBox {
|
|
|
position: absolute;
|
|
|
- right: 100px;
|
|
|
+ right: 1%;
|
|
|
bottom: 0;
|
|
|
+ transition-property: bottom;
|
|
|
+ transition-duration: .5s;
|
|
|
|
|
|
.xuliezhen {
|
|
|
position: absolute;
|
|
|
right: 0;
|
|
|
- bottom: 100px;
|
|
|
+ bottom: 150px;
|
|
|
width: 150px;
|
|
|
height: 150px;
|
|
|
background-position-x: 0;
|
|
|
background-repeat: no-repeat;
|
|
|
animation-name: xuliezhen-animation;
|
|
|
- animation-timing-function: steps(60);
|
|
|
- animation-duration: 3s;
|
|
|
+ animation-timing-function: v-bind('animalZhenShu');
|
|
|
+ animation-duration: v-bind('duration');
|
|
|
animation-iteration-count: infinite;
|
|
|
transition-property: bottom;
|
|
|
transition-duration: 0.4s;
|
|
|
@@ -287,13 +392,124 @@ onMounted(() => {
|
|
|
}
|
|
|
|
|
|
to {
|
|
|
- background-position-x: -9000px;
|
|
|
+ background-position-x: v-bind('translateXNumber');
|
|
|
}
|
|
|
}
|
|
|
|
|
|
.xulielistBox {
|
|
|
display: none;
|
|
|
}
|
|
|
+
|
|
|
+ .score-box {
|
|
|
+ width: 70px;
|
|
|
+ height: 110px;
|
|
|
+ background: url(@/assets/images/scene/userBg.png);
|
|
|
+ background-size: 100% 100%;
|
|
|
+ position: absolute;
|
|
|
+ right: 40px;
|
|
|
+ bottom: 30px;
|
|
|
+ display: flex;
|
|
|
+ flex-direction: column;
|
|
|
+ align-items: center;
|
|
|
+ text-align: center;
|
|
|
+ font-size: 12px;
|
|
|
+ color: #EBC68F;
|
|
|
+ text-shadow: 0 1px 2px 0 #00000091;
|
|
|
+ font-family: 'SourceHanSansCN-Medium';
|
|
|
+
|
|
|
+ img {
|
|
|
+ width: 75%;
|
|
|
+ }
|
|
|
+
|
|
|
+ div:first-child {
|
|
|
+ // margin-top: 2px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .scroll-wrap {
|
|
|
+ max-width: 40%;
|
|
|
+ display: inline-block;
|
|
|
+ vertical-align: top;
|
|
|
+ overflow: hidden;
|
|
|
+ white-space: nowrap;
|
|
|
+ margin-top: -3px;
|
|
|
+
|
|
|
+ .scroll-item {
|
|
|
+ animation: scroll linear 4s alternate infinite;
|
|
|
+ float: left;
|
|
|
+ }
|
|
|
+
|
|
|
+ @keyframes scroll {
|
|
|
+ 0% {
|
|
|
+ margin-left: 0;
|
|
|
+ transform: translateX(0);
|
|
|
+ }
|
|
|
+
|
|
|
+ 10% {
|
|
|
+ margin-left: 0;
|
|
|
+ transform: translateX(0);
|
|
|
+ }
|
|
|
+
|
|
|
+ 90% {
|
|
|
+ margin-left: 100%;
|
|
|
+ transform: translateX(-100%);
|
|
|
+ }
|
|
|
+
|
|
|
+ 100% {
|
|
|
+ margin-left: 100%;
|
|
|
+ transform: translateX(-100%);
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .game-list-box {
|
|
|
+ width: 100%;
|
|
|
+ height: 100%;
|
|
|
+ position: absolute;
|
|
|
+ left: 0;
|
|
|
+ top: 0;
|
|
|
+ display: flex;
|
|
|
+ flex-direction: column;
|
|
|
+ justify-content: center;
|
|
|
+ align-items: center;
|
|
|
+ background: rgba(0, 0, 0, 0.486);
|
|
|
+ backdrop-filter: blur(10px);
|
|
|
+
|
|
|
+ .game-list {
|
|
|
+ width: 80%;
|
|
|
+ height: 80%;
|
|
|
+ background: #ffffff85;
|
|
|
+ border-radius: 15px;
|
|
|
+ padding: 20px;
|
|
|
+ display: grid;
|
|
|
+ grid-template-columns: repeat(4, 1fr);
|
|
|
+ justify-items: center;
|
|
|
+ font-family: 'AlibabaPuHuiTi2.0-105Heavy';
|
|
|
+ color: white;
|
|
|
+
|
|
|
+ .game-list-item {
|
|
|
+ width: 100%;
|
|
|
+ display: flex;
|
|
|
+ flex-direction: column;
|
|
|
+ // justify-content: center;
|
|
|
+ align-items: center;
|
|
|
+
|
|
|
+ img {
|
|
|
+ width: 70%;
|
|
|
+ height: 50%;
|
|
|
+ object-fit: contain;
|
|
|
+ margin-bottom: 10px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ img {
|
|
|
+ width: 44px;
|
|
|
+ height: 44px;
|
|
|
+ margin-top: 20px;
|
|
|
+ cursor: pointer;
|
|
|
+ }
|
|
|
}
|
|
|
|
|
|
|
|
|
@@ -342,7 +558,7 @@ onMounted(() => {
|
|
|
|
|
|
.left-item {
|
|
|
height: 15%;
|
|
|
- font-size: 1.1em;
|
|
|
+ font-size: 1em;
|
|
|
|
|
|
&:hover {
|
|
|
background: #66141885;
|
|
|
@@ -397,14 +613,15 @@ onMounted(() => {
|
|
|
.xuliezhen {
|
|
|
position: absolute;
|
|
|
right: 0;
|
|
|
- bottom: 10px;
|
|
|
+ bottom: 120px;
|
|
|
width: 100px;
|
|
|
height: 100px;
|
|
|
background-position-x: 0;
|
|
|
background-repeat: no-repeat;
|
|
|
- animation: mouse-in 3s;
|
|
|
- animation-timing-function: steps(60);
|
|
|
- animation-iteration-count: forwards;
|
|
|
+ animation: mouse-in;
|
|
|
+ animation-duration: v-bind('duration');
|
|
|
+ animation-timing-function: v-bind('animalZhenShu');
|
|
|
+ animation-iteration-count: infinite;
|
|
|
transition-property: bottom;
|
|
|
transition-duration: 0.4s;
|
|
|
cursor: pointer;
|
|
|
@@ -416,13 +633,18 @@ onMounted(() => {
|
|
|
}
|
|
|
|
|
|
to {
|
|
|
- background-position-x: -6000px;
|
|
|
+ background-position-x: v-bind('translateXNumber');
|
|
|
}
|
|
|
}
|
|
|
|
|
|
.xulielistBox {
|
|
|
display: none;
|
|
|
}
|
|
|
+
|
|
|
+ .score-box {
|
|
|
+ bottom: 13px;
|
|
|
+ right: 15px;
|
|
|
+ }
|
|
|
}
|
|
|
}
|
|
|
|
任一存
