|
|
@@ -15,6 +15,7 @@ declare global {
|
|
|
handleTopRobot: (state: string) => void,
|
|
|
handleShowFigure: (v: boolean) => void,
|
|
|
openGameBoxFu: (v: boolean) => void,
|
|
|
+ openPricePageFu: () => void,
|
|
|
addScoreFu: (v: string) => void
|
|
|
changeUnitByHot: (v: string, point: string) => void
|
|
|
}
|
|
|
@@ -40,12 +41,17 @@ const changeUnit = (unit: any) => {
|
|
|
store.currentUnit = unit
|
|
|
localStorage.setItem('currentUnit', JSON.stringify(unit))
|
|
|
currentUnit.value = unit
|
|
|
- animalZhenShuNumber.value = currentUnit.value.xuliezhen[animalStat.value].zhenShu
|
|
|
- duration.value = currentUnit.value.xuliezhen[animalStat.value].duration
|
|
|
+ if (store.customThemeId) {
|
|
|
+ changeThemeFu()
|
|
|
+ } else {
|
|
|
+ animalZhenShuNumber.value = currentUnit.value.xuliezhen[animalStat.value].zhenShu
|
|
|
+ duration.value = currentUnit.value.xuliezhen[animalStat.value].duration
|
|
|
+ }
|
|
|
+
|
|
|
// if (currentUnit.value.unit == '尾厅') {
|
|
|
// pointInfo.value = '&firstView=pano:42,qua:0.009218044457158925,0.8470543054294898,-0.01469850441003682,0.5312231071060547&qs=1'
|
|
|
// }
|
|
|
- isShowHosList.value = false
|
|
|
+ clostHotListFu()
|
|
|
isShowExperienceGame.value = true
|
|
|
}
|
|
|
const hotspots = ref([] as any)
|
|
|
@@ -78,30 +84,6 @@ const sortHotspots = (hotspots: any) => {
|
|
|
return Number(a.sort) - Number(b.sort)
|
|
|
})
|
|
|
}
|
|
|
-
|
|
|
-// // 批量去掉序号
|
|
|
-// const sortHotspots = (hotspots: any) => {
|
|
|
-// const newHot = {}
|
|
|
-// for (let key in hotspots) {
|
|
|
-// let index = hotspots[key].title.indexOf('.')
|
|
|
-
|
|
|
-// if (index != -1) {
|
|
|
-// hotspots[key].title = hotspots[key].title.substring(index + 1)
|
|
|
-// // @ts-ignore
|
|
|
-// newHot[key] = hotspots[key]
|
|
|
-
|
|
|
-// } else if (hotspots[key].title.indexOf(' ')) {
|
|
|
-// index = hotspots[key].title.indexOf(' ')
|
|
|
-// hotspots[key].title = hotspots[key].title.substring(index + 1)
|
|
|
-// // @ts-ignore
|
|
|
-// newHot[key] = hotspots[key]
|
|
|
-// } else {
|
|
|
-// // @ts-ignore
|
|
|
-// newHot[key] = hotspots[key]
|
|
|
-// }
|
|
|
-// }
|
|
|
-// return newHot
|
|
|
-// }
|
|
|
// 获取所有单元的热点列表
|
|
|
const getAllHotspot = () => {
|
|
|
store.dataAll.sceneList.forEach((item: any) => {
|
|
|
@@ -150,8 +132,13 @@ 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
|
|
|
+ if (store.customThemeId) {
|
|
|
+ changeThemeFu()
|
|
|
+ } else {
|
|
|
+ animalZhenShuNumber.value = currentUnit.value.xuliezhen[animalStat.value].zhenShu
|
|
|
+ duration.value = currentUnit.value.xuliezhen[animalStat.value].duration
|
|
|
+ }
|
|
|
+
|
|
|
}
|
|
|
}, { immediate: true })
|
|
|
|
|
|
@@ -174,11 +161,19 @@ const goHotCamarer = (hot: any) => {
|
|
|
|
|
|
currentHot.value = hot
|
|
|
console.log(currentHot.value)
|
|
|
- isShowHosList.value = false
|
|
|
+
|
|
|
+ clostHotListFu()
|
|
|
isShowFigure.value = true
|
|
|
}, 1500)
|
|
|
}
|
|
|
|
|
|
+const clostHotListFu = () => {
|
|
|
+ isShowHosList.value = false
|
|
|
+ const iframe = document.getElementById('sceneiframe') as HTMLIFrameElement
|
|
|
+ //@ts-ignore
|
|
|
+ iframe.contentWindow.closeHotListIcon()
|
|
|
+}
|
|
|
+
|
|
|
// 形象状态 greeting-招呼 idle-静默 talk-说话
|
|
|
const animalStat = ref('greeting')
|
|
|
const animalZhenShuNumber = ref(48 as number)
|
|
|
@@ -188,6 +183,10 @@ const animalZhenShu = computed(() => {
|
|
|
const translateXNumber = computed(() => {
|
|
|
return browser.mobile ? `${-100 * animalZhenShuNumber.value}px` : `${-200 * animalZhenShuNumber.value}px`
|
|
|
})
|
|
|
+
|
|
|
+const translateXNumberChange = computed(() => {
|
|
|
+ return `${-200 * animalZhenShuNumber.value}px`
|
|
|
+})
|
|
|
const duration = ref(`3s`)
|
|
|
const xingxiangListShow = ref(false)
|
|
|
const isShowFigure = ref(true)
|
|
|
@@ -235,7 +234,7 @@ const checkLoginStatus = async () => {
|
|
|
}
|
|
|
|
|
|
// 内嵌小游戏界面打开
|
|
|
-const openGame = (index: number) => {
|
|
|
+const openGame = (index: any) => {
|
|
|
router.push({
|
|
|
path: '/game',
|
|
|
query: {
|
|
|
@@ -320,6 +319,29 @@ const goBack = () => {
|
|
|
}
|
|
|
}
|
|
|
|
|
|
+// 切换主题
|
|
|
+const changeThemeFu = () => {
|
|
|
+ const newTheme = store.dataAll.sceneList.find((item: any) => {
|
|
|
+ return item.id == store.customThemeId
|
|
|
+ })
|
|
|
+ if (newTheme) {
|
|
|
+ animalZhenShuNumber.value = newTheme.xuliezhen[animalStat.value].zhenShu
|
|
|
+ duration.value = newTheme.xuliezhen[animalStat.value].duration
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
+// 当自主变换主题时候,帧数也对应发生改变
|
|
|
+watch(() => store.customThemeId, () => {
|
|
|
+ console.log('主题发生改变')
|
|
|
+ const newTheme = store.dataAll.sceneList.find((item: any) => {
|
|
|
+ return item.id == store.customThemeId
|
|
|
+ })
|
|
|
+ if (newTheme) {
|
|
|
+ animalZhenShuNumber.value = newTheme.xuliezhen[animalStat.value].zhenShu
|
|
|
+ duration.value = newTheme.xuliezhen[animalStat.value].duration
|
|
|
+ }
|
|
|
+})
|
|
|
+
|
|
|
|
|
|
onMounted(() => {
|
|
|
getAllHotspot()
|
|
|
@@ -336,8 +358,13 @@ onMounted(() => {
|
|
|
// greeting-招呼 idle-静默 talk-说话
|
|
|
window.handleRobot = (state: string) => {
|
|
|
animalStat.value = state
|
|
|
- animalZhenShuNumber.value = currentUnit.value.xuliezhen[animalStat.value].zhenShu
|
|
|
- duration.value = currentUnit.value.xuliezhen[animalStat.value].duration
|
|
|
+ if (store.customThemeId) {
|
|
|
+ // 如果有切换过,序列帧换成所选主题
|
|
|
+ changeThemeFu()
|
|
|
+ } else {
|
|
|
+ animalZhenShuNumber.value = currentUnit.value.xuliezhen[animalStat.value].zhenShu
|
|
|
+ duration.value = currentUnit.value.xuliezhen[animalStat.value].duration
|
|
|
+ }
|
|
|
setTimeout(() => {
|
|
|
isReady.value = true
|
|
|
}, 500)
|
|
|
@@ -376,6 +403,16 @@ onMounted(() => {
|
|
|
})
|
|
|
}
|
|
|
|
|
|
+ // 跳转到游戏兑换页面
|
|
|
+ window.openPricePageFu = () => {
|
|
|
+ router.push({
|
|
|
+ path: 'homePageMo',
|
|
|
+ query: {
|
|
|
+ src: '/game/index.html#/shop-view?no-redirect=1'
|
|
|
+ }
|
|
|
+ })
|
|
|
+ }
|
|
|
+
|
|
|
checkLoginStatus()
|
|
|
|
|
|
// 监听是否登录
|
|
|
@@ -431,15 +468,19 @@ onMounted(() => {
|
|
|
|
|
|
}
|
|
|
|
|
|
- // 热点跳转展厅
|
|
|
+ // 热点跳转展厅/游戏
|
|
|
window.changeUnitByHot = (v: string, point: string) => {
|
|
|
- const unit = store.hotspots.find((item: any) => {
|
|
|
- return item.code == v
|
|
|
- })
|
|
|
+ if (v === 'game') {
|
|
|
+ openGame(parseInt(point) - 1)
|
|
|
+ } else {
|
|
|
+ const unit = store.hotspots.find((item: any) => {
|
|
|
+ return item.code == v
|
|
|
+ })
|
|
|
|
|
|
- if (unit) {
|
|
|
- changeUnit(unit)
|
|
|
- pointInfo.value = point
|
|
|
+ if (unit) {
|
|
|
+ changeUnit(unit)
|
|
|
+ pointInfo.value = point
|
|
|
+ }
|
|
|
}
|
|
|
}
|
|
|
|
|
|
@@ -484,9 +525,9 @@ const changePassFu = () => {
|
|
|
<!-- <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; isShowFigure = true }" class="close-icon"
|
|
|
- src="@/assets/images/close-icon.png" alt="">
|
|
|
- <div v-show="browser.mobile" class="show-title">行业公益力量展</div>
|
|
|
+ <img v-show="browser.mobile" @click="() => { clostHotListFu(); isShowFigure = true }" class="close-icon"
|
|
|
+ src="@/assets/images/close-icon-red.png" alt="">
|
|
|
+ <!-- <div v-show="browser.mobile" class="show-title">行业公益力量展</div> -->
|
|
|
<div class="hots-box-left">
|
|
|
<div class="left-item" :style="{ background: currentHotsUnit.unit == item.unit ? '#66141885' : '' }"
|
|
|
v-for="(item, index) in store.hotspots" :key="index" @click="() => { currentHotsUnit = item }">{{
|
|
|
@@ -494,13 +535,13 @@ const changePassFu = () => {
|
|
|
}}</div>
|
|
|
</div>
|
|
|
<div class="hots-box-right">
|
|
|
- <img v-show="!browser.mobile" @click="isShowHosList = false" class="close-icon"
|
|
|
- src="@/assets/images/close-icon.png" alt="">
|
|
|
+ <img v-show="!browser.mobile" @click="clostHotListFu()" 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 currentHotsUnit.hots" :key="index"
|
|
|
@click="goHotCamarer(item)" :style="{ color: currentHot.sid == item.sid ? '#C5A16C' : '' }">
|
|
|
- <div :class="item.title.length > 8 ? 'gundong' : ''">{{ item.title }}</div>
|
|
|
+ <div :class="!browser.mobile ? item.title.length > 8 ? 'gundong' : '' : 'mobileMo'">{{ item.title }}</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
@@ -509,10 +550,10 @@ const changePassFu = () => {
|
|
|
<!-- 形象人 -->
|
|
|
<!-- 招呼状态 -->
|
|
|
<div class="xuliezhen-greeting" v-show="isReady && animalStat == 'greeting'" @click="xingxiangListShow = true"
|
|
|
- :style="{ backgroundImage: `url(${baseResourceUrl}/animation/${currentUnit.id}/greeting.png)`, backgroundSize: 'cover' }">
|
|
|
+ :style="{ backgroundImage: `url(${baseResourceUrl}/animation/${store.customThemeId != null ? store.customThemeId : currentUnit.id}/greeting.png)`, backgroundSize: 'cover' }">
|
|
|
</div>
|
|
|
<div class="xuliezhen-talk" v-show="isReady && animalStat == 'talk'" @click="xingxiangListShow = true"
|
|
|
- :style="{ backgroundImage: `url(${baseResourceUrl}/animation/${currentUnit.id}/talk.png)`, backgroundSize: 'cover' }">
|
|
|
+ :style="{ backgroundImage: `url(${baseResourceUrl}/animation/${store.customThemeId != null ? store.customThemeId : currentUnit.id}/talk.png)`, backgroundSize: 'cover' }">
|
|
|
</div>
|
|
|
<!-- 积分牌 -->
|
|
|
<div class="score-box" v-if="isReady" @click="goDetail()">
|
|
|
@@ -530,14 +571,6 @@ const changePassFu = () => {
|
|
|
<!-- 退出登录 -->
|
|
|
<div class="user-box" v-if="isShowUserBox">
|
|
|
<div @click="logout()">退出登录</div>
|
|
|
- <!-- <div @click="!browser.mobile ? () => { isPassChange = true; oldPass = ''; newPass = ''; affirmPass = '' } : () => {
|
|
|
- router.push({
|
|
|
- path: 'homePageMo',
|
|
|
- query: {
|
|
|
- src: '/game/index.html#/change-password?no-redirect=1'
|
|
|
- }
|
|
|
- })
|
|
|
- }">修改密码</div> -->
|
|
|
<div @click="changePassFu()">修改密码</div>
|
|
|
<div @click="() => {
|
|
|
router.push({
|
|
|
@@ -547,16 +580,31 @@ const changePassFu = () => {
|
|
|
}
|
|
|
})
|
|
|
}">奖品兑换</div>
|
|
|
-
|
|
|
</div>
|
|
|
</div>
|
|
|
- <!-- 形象listBox -->
|
|
|
- <div class="xulielistBox" v-show="xingxiangListShow">
|
|
|
- <img v-show="browser.mobile" @click="isShowHosList = false" class="close-icon"
|
|
|
- src="@/assets/images/close-icon.png" alt="">
|
|
|
- <div class="item" v-for="(item, index) in store.hotspots" :key="index" @click="changeUnit(item)">{{ item.unit }}
|
|
|
+ <!-- 形象切换listBox -->
|
|
|
+ <div class="xulielistBox" v-show="xingxiangListShow && !browser.mobile">
|
|
|
+ <img @click="xingxiangListShow = false" class="close-icon" src="@/assets/images/close-icon.png" alt="">
|
|
|
+ <div class="item" v-for="(item, index) in store.dataAll.themeList" :key="index"
|
|
|
+ @click="() => { store.customThemeId = item.id; xingxiangListShow = false }">{{
|
|
|
+ item.unit }}
|
|
|
</div>
|
|
|
</div>
|
|
|
+
|
|
|
+ <div class="xulielistBox" v-show="xingxiangListShow && browser.mobile">
|
|
|
+ <div class="content-box">
|
|
|
+ <img @click="xingxiangListShow = false" class="close-icon" src="@/assets/images/close-icon.png" alt="">
|
|
|
+ <div class="item" v-for="(item, index) in store.dataAll.themeList" :key="index"
|
|
|
+ @click="() => { store.customThemeId = item.id }">{{
|
|
|
+ item.unit }}
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <!-- 形象切换序列帧 -->
|
|
|
+ <div class="xuliezhen-greeting changing"
|
|
|
+ :style="{ backgroundImage: `url(${baseResourceUrl}/animation/${store.customThemeId != null ? store.customThemeId : currentUnit.id}/greeting.png)`, backgroundSize: 'cover' }">
|
|
|
+ </div>
|
|
|
+ <div></div>
|
|
|
+ </div>
|
|
|
</div>
|
|
|
|
|
|
<!-- 游戏列表弹窗 -->
|
|
|
@@ -571,7 +619,7 @@ const changePassFu = () => {
|
|
|
</div>
|
|
|
|
|
|
<!-- 游戏体验弹窗 -->
|
|
|
- <div class="game-list-box" v-if="isShowExperienceGame && currentUnit.gameId !== null">
|
|
|
+ <!-- <div class="game-list-box" v-if="isShowExperienceGame && currentUnit.gameId !== null">
|
|
|
<img class="game-ex-themb"
|
|
|
:src="`${baseResourceUrl}/game/${browser.mobile ? 'mobile/' : 'pc/'}${!browser.mobile ? currentUnit.gameId : currentUnit.gameId + 'g'}.png`"
|
|
|
alt="">
|
|
|
@@ -579,7 +627,7 @@ const changePassFu = () => {
|
|
|
<div>立即体验</div>
|
|
|
</div>
|
|
|
<img src="@/assets/images/close-icon.png" class="close-icon" @click="isShowExperienceGame = false" alt="">
|
|
|
- </div>
|
|
|
+ </div> -->
|
|
|
|
|
|
<!-- 登录iframe -->
|
|
|
<div v-if="isShowLogon" class="game-page">
|
|
|
@@ -765,6 +813,10 @@ const changePassFu = () => {
|
|
|
backdrop-filter: blur(10px);
|
|
|
border-radius: 15px 0 0 0;
|
|
|
|
|
|
+ @media screen and (max-width:700) {
|
|
|
+ border-radius: 0 0 0 0;
|
|
|
+ }
|
|
|
+
|
|
|
|
|
|
&::-webkit-scrollbar {
|
|
|
display: none;
|
|
|
@@ -790,6 +842,10 @@ const changePassFu = () => {
|
|
|
|
|
|
.left-item:first-child {
|
|
|
border-radius: 15px 0 0 0;
|
|
|
+
|
|
|
+ @media screen and (max-width:700) {
|
|
|
+ border-radius: 0 0 0 0;
|
|
|
+ }
|
|
|
}
|
|
|
}
|
|
|
|
|
|
@@ -931,7 +987,38 @@ const changePassFu = () => {
|
|
|
}
|
|
|
|
|
|
.xulielistBox {
|
|
|
- display: none;
|
|
|
+ position: fixed;
|
|
|
+ bottom: 160px;
|
|
|
+ right: 200px;
|
|
|
+ background: #BC121A;
|
|
|
+ border-radius: 10px;
|
|
|
+ padding: 20px 0;
|
|
|
+
|
|
|
+ .item {
|
|
|
+ // width: 100%;
|
|
|
+ height: 5vh;
|
|
|
+ display: flex;
|
|
|
+ justify-content: center;
|
|
|
+ align-items: center;
|
|
|
+ font-size: 14px;
|
|
|
+ color: #ffffff;
|
|
|
+ font-family: 'AlibabaPuHuiTi2.0-105Heavy';
|
|
|
+ text-shadow: 0px 4px 4px rgba(0, 0, 0, 0.6);
|
|
|
+ cursor: pointer;
|
|
|
+ padding: 0 20px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .item:hover {
|
|
|
+ background: #7c0e14;
|
|
|
+ }
|
|
|
+
|
|
|
+ .close-icon {
|
|
|
+ position: absolute;
|
|
|
+ right: -20px;
|
|
|
+ top: -20px;
|
|
|
+ cursor: pointer;
|
|
|
+ }
|
|
|
+
|
|
|
}
|
|
|
|
|
|
.score-box {
|
|
|
@@ -956,9 +1043,6 @@ const changePassFu = () => {
|
|
|
width: 75%;
|
|
|
}
|
|
|
|
|
|
- div:first-child {
|
|
|
- // margin-top: 2px;
|
|
|
- }
|
|
|
|
|
|
.user-box {
|
|
|
width: 100px;
|
|
|
@@ -1138,6 +1222,11 @@ const changePassFu = () => {
|
|
|
justify-content: flex-end;
|
|
|
align-items: flex-end;
|
|
|
|
|
|
+ .close-icon {
|
|
|
+ width: 40px;
|
|
|
+ height: 40px;
|
|
|
+ }
|
|
|
+
|
|
|
.show-title {
|
|
|
width: 100%;
|
|
|
height: 15vh;
|
|
|
@@ -1157,8 +1246,13 @@ const changePassFu = () => {
|
|
|
}
|
|
|
|
|
|
&-left {
|
|
|
- height: 80%;
|
|
|
+ height: 100%;
|
|
|
background: #BC121A;
|
|
|
+ border-radius: 0 0 0 0;
|
|
|
+
|
|
|
+ display: flex;
|
|
|
+ flex-direction: column;
|
|
|
+ justify-content: space-around;
|
|
|
|
|
|
|
|
|
|
|
|
@@ -1167,9 +1261,10 @@ const changePassFu = () => {
|
|
|
}
|
|
|
|
|
|
.left-item {
|
|
|
- height: 15%;
|
|
|
+ // height: 15%;
|
|
|
font-size: 1em;
|
|
|
|
|
|
+
|
|
|
&:hover {
|
|
|
background: #66141885;
|
|
|
}
|
|
|
@@ -1178,14 +1273,15 @@ const changePassFu = () => {
|
|
|
}
|
|
|
|
|
|
.left-item:first-child {
|
|
|
- border-radius: 15px 0 0 0;
|
|
|
+ border-radius: 0 0 0 0;
|
|
|
+
|
|
|
}
|
|
|
}
|
|
|
|
|
|
&-right {
|
|
|
- width: 65%;
|
|
|
- height: 80%;
|
|
|
- padding: 0 20px;
|
|
|
+ width: 70%;
|
|
|
+ height: 100%;
|
|
|
+ padding: 0 10px;
|
|
|
box-sizing: border-box;
|
|
|
|
|
|
// .close-icon {}
|
|
|
@@ -1199,28 +1295,42 @@ const changePassFu = () => {
|
|
|
display: flex;
|
|
|
justify-content: left;
|
|
|
align-items: center;
|
|
|
- white-space: nowrap;
|
|
|
+ white-space: inherit;
|
|
|
overflow: hidden;
|
|
|
text-overflow: ellipsis;
|
|
|
- font-size: 1em;
|
|
|
+ font-size: 0.9em;
|
|
|
cursor: pointer;
|
|
|
font-family: 'Courier New';
|
|
|
|
|
|
- .gundong {
|
|
|
+ .mobileMo {
|
|
|
width: 100%;
|
|
|
- animation: identifier 8s linear infinite;
|
|
|
+ display: -webkit-box;
|
|
|
+ -webkit-box-orient: vertical;
|
|
|
+ overflow: hidden;
|
|
|
+ text-overflow: ellipsis;
|
|
|
+ -webkit-line-clamp: 2;
|
|
|
+ /* 显示两行 */
|
|
|
+ line-height: 1.2;
|
|
|
+ /* 设置行高,根据需要调整 */
|
|
|
+ max-height: 2.4em;
|
|
|
+ /* 设置最大高度,根据需要调整 */
|
|
|
}
|
|
|
|
|
|
- @keyframes identifier {
|
|
|
+ // .gundong {
|
|
|
+ // width: 100%;
|
|
|
+ // animation: identifier 8s linear infinite;
|
|
|
+ // }
|
|
|
|
|
|
- 0% {
|
|
|
- transform: translateX(100%);
|
|
|
- }
|
|
|
+ // @keyframes identifier {
|
|
|
|
|
|
- 100% {
|
|
|
- transform: translateX(-100%);
|
|
|
- }
|
|
|
- }
|
|
|
+ // 0% {
|
|
|
+ // transform: translateX(100%);
|
|
|
+ // }
|
|
|
+
|
|
|
+ // 100% {
|
|
|
+ // transform: translateX(-100%);
|
|
|
+ // }
|
|
|
+ // }
|
|
|
|
|
|
&:hover {
|
|
|
color: #C5A16C;
|
|
|
@@ -1320,7 +1430,59 @@ const changePassFu = () => {
|
|
|
}
|
|
|
|
|
|
.xulielistBox {
|
|
|
- display: none;
|
|
|
+ width: 100%;
|
|
|
+ height: 100%;
|
|
|
+ position: fixed;
|
|
|
+ top: 0;
|
|
|
+ left: 0;
|
|
|
+ background: rgba(0, 0, 0, 0.692);
|
|
|
+ backdrop-filter: blur(10px);
|
|
|
+
|
|
|
+ .content-box {
|
|
|
+ position: absolute;
|
|
|
+ top: 40%;
|
|
|
+ left: 50%;
|
|
|
+ transform: translate(-50%, -50%);
|
|
|
+ background: #bc121ba9;
|
|
|
+ border-radius: 10px;
|
|
|
+ padding: 20px 0;
|
|
|
+ box-shadow: 0px 2px 10px 0px rgba(0, 0, 0, 0.6);
|
|
|
+ // opacity: 0.7;
|
|
|
+
|
|
|
+ .item {
|
|
|
+ height: 8vh;
|
|
|
+ font-size: 1em;
|
|
|
+ padding: 0 40px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+
|
|
|
+ .changing {
|
|
|
+ position: absolute;
|
|
|
+ right: -10px;
|
|
|
+ bottom: 100px;
|
|
|
+ width: 200px;
|
|
|
+ height: 200px;
|
|
|
+ background-position-x: 0;
|
|
|
+ background-repeat: no-repeat;
|
|
|
+ // animation-name: xuliezhen-animation;
|
|
|
+ animation-name: xuliezhen-animation-mo;
|
|
|
+ animation-timing-function: v-bind('animalZhenShu');
|
|
|
+ animation-duration: v-bind('duration');
|
|
|
+ animation-iteration-count: infinite;
|
|
|
+ transition-property: bottom;
|
|
|
+ cursor: pointer;
|
|
|
+ }
|
|
|
+
|
|
|
+ @keyframes xuliezhen-animation-mo {
|
|
|
+ 50% {
|
|
|
+ background-position-x: 0;
|
|
|
+ }
|
|
|
+
|
|
|
+ 100% {
|
|
|
+ background-position-x: v-bind('translateXNumberChange');
|
|
|
+ }
|
|
|
+ }
|
|
|
}
|
|
|
|
|
|
.score-box {
|
|
|
@@ -1352,5 +1514,4 @@ const changePassFu = () => {
|
|
|
}
|
|
|
}
|
|
|
|
|
|
-}
|
|
|
-</style>
|
|
|
+}</style>
|