ZGZQBWG/zhengquan/src/views/Scene/ScenePage.vue

<script setup lang='ts'>
import browser from '@/utils/browser'
import { useStore } from '@/stores';
import baseResourceUrl from "@/utils/https";
import axios from 'axios'
import { Base64 } from "js-base64"
import encodeStr from "@/utils/pass"
// import { Toast } from 'vant';


// 为 window 添加属性ts类型
// gei window 增加函数，让子页面去触发
declare global {
  interface Window {
    hotListShowChangeFu: (v: boolean) => void,
    handleRobot: (state: string) => void,
    handleTopRobot: (state: string) => void,
    handleShowFigure: (v: boolean) => void,
    openGameBoxFu: (v: boolean) => void,
    openPricePageFu: () => void,
    addScoreFu: (v: string) => void
    changeUnitByHot: (v: string, point: string) => void
  }
}

const baseAPIUrl = ref('')
// const baseAPIUrl = ref('http://192.168.20.61:8063')
// const baseAPIUrl = ref('https://sit-cnzhengquan.4dage.com')

const route = useRoute()
const router = useRouter()
const store = useStore()

const isShowHosList = ref(false)

const currentUnit = ref({} as any)
const currentHot = ref({} as any)
const currentHotsUnit = ref({} as any)
const isReady = ref(false)
const pointInfo = ref('')

const changeUnit = (unit: any) => {
  store.currentUnit = unit
  localStorage.setItem('currentUnit', JSON.stringify(unit))
  currentUnit.value = unit
  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'
  // }
  clostHotListFu()
  isShowExperienceGame.value = true
}
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 sortHotspots = (hotspots: any) => {
  // 将数据对象转换成数组
  let newHotspots = Object.values(hotspots)
  let newShowHotspots = [] as any
  newHotspots.forEach((item: any) => {
    const nameArr = item.title.split('&')
    if (nameArr[1] == 'show') {
      newShowHotspots.push({
        ...item,
        title: nameArr[2],
        sort: nameArr[0]
      })
    }
  })

  return newShowHotspots.sort((a: any, b: any) => {
    return Number(a.sort) - Number(b.sort)
  })
}
// 获取所有单元的热点列表
const getAllHotspot = () => {
  store.dataAll.sceneList.forEach((item: any) => {
    // https://super.4dage.com
    axios.get(`https://super.4dage.com/data/${item.code}/data2.js?m=${new Date().getTime()}`).then((res: any) => {
      console.log(sortHotspots)
      //@ts-ignore
      hotspots.value.push({
        id: item.id,
        unit: item.name,
        hots: sortHotspots(filterEmptyProps(res.data.hots)),
        code: item.code,
        xuliezhen: item.xuliezhen,
        gameId: item.gameId,
        backPoint: item.backPoint,
        sort: item.sort,
      })
      if (item.code == route.query.code) {
        currentUnit.value = {
          id: item.id,
          unit: route.query.name == '尾厅' ? '尾厅' : item.name,
          hots: sortHotspots(filterEmptyProps(res.data.hots)),
          code: item.code,
          xuliezhen: item.xuliezhen,
          gameId: item.gameId,
          backPoint: item.backPoint
        }
        currentHotsUnit.value = currentUnit.value
        store.currentUnit = currentUnit.value
        localStorage.setItem('currentUnit', JSON.stringify(currentUnit.value))
        if (route.query.name == '尾厅') {
          pointInfo.value = route.query.pano ? route.query.pano.toString() : '&firstView=pano:42,qua:0.009218044457158925,0.8470543054294898,-0.01469850441003682,0.5312231071060547&qs=1'
        }
      }
    })
  })
  setTimeout(() => {
    // let newList = []
    // 场景排序
    hotspots.value.sort((a: any, b: any) => {
      return Number(a.sort) - Number(b.sort)
    })
  }, 500)
}
watch(hotspots.value, (newVal: any) => {

  if (newVal.length == store.dataAll.sceneList.length) {
    store.hotspots = hotspots.value
    currentUnit.value = hotspots.value.filter((item: any) => {
      return item.code == route.query.code
    })[0]
    if (store.customThemeId) {
      changeThemeFu()
    } else {
      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) => {
  currentUnit.value = currentHotsUnit.value
  store.currentUnit = currentHotsUnit.value
  localStorage.setItem('currentUnit', JSON.stringify(currentHotsUnit.value))
  pointInfo.value = ''
  // isShowExperienceGame.value = true
  isShowHosList.value = false
  setTimeout(() => {
    const iframe = document.getElementById('sceneiframe') as HTMLIFrameElement
    //@ts-ignore
    iframe.contentWindow.initCamera(hot.sid)
    currentHot.value = hot
    console.log(currentHot.value)
    //@ts-ignore
    iframe.contentWindow.closeHotListIcon()
    isShowFigure.value = true
  }, 1000)
}

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)
const animalZhenShu = computed(() => {
  return `steps(${animalZhenShuNumber.value})`
})
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)


const isShowGameList = ref(false)

const isShowExperienceGame = ref(false)

const isLogin = ref(false)

// 检查token是否生效
const checkLoginStatus = async () => {
  const lastToken = localStorage.getItem('token')
  const lastUserInfoStr = localStorage.getItem('useInfo')
  if (lastToken && lastUserInfoStr) {
    const res = await axios({
      method: 'get',
      url: `${baseAPIUrl.value}/api/show/checkLogin`,
      headers: {
        token: lastToken
      }
    })
    if (res?.data?.code === 0 && res?.data?.data) {
      store.token = lastToken
      store.userInfo = JSON.parse(lastUserInfoStr)
      // 请求积分
      axios({
        method: 'get',
        url: `${baseAPIUrl.value}/api/cms/game/getPoint`,
        headers: {
          token: store.token
        }
      }).then((res: any) => {
        userScore.value = res.data.data.total
        isLogin.value = true
      })
    } else {
      store.token = ""
      store.userInfo = {}
      localStorage.removeItem('token')
      localStorage.removeItem('userInfo')
    }
  }
}

const Toast = (text: string, type?: string) => {
  let toastDom: HTMLElement = document.createElement('div')
  toastDom.innerText = text
  toastDom.style.padding = '5px 15px'
  toastDom.style.display = 'flex'
  toastDom.style.justifyItems = 'center'
  toastDom.style.alignItems = 'center'
  toastDom.style.position = 'fixed'
  toastDom.style.left = '50%'
  toastDom.style.top = '5%'
  toastDom.style.transform = 'translateX(-50%)'
  toastDom.style.background = '#fff'
  toastDom.style.zIndex = '99'
  toastDom.style.borderRadius = '50px'
  toastDom.style.boxShadow = '0px 4px 16px 0px rgba(0, 0, 0, 0.5)'
  toastDom.style.fontSize = '15px'
  toastDom.style.color = type == 'error' ? 'red' : 'black'
  document.body.appendChild(toastDom);

  setTimeout(() => {
    document.body.removeChild(toastDom);
  }, 2000)
}

// 内嵌小游戏界面打开
const openGame = (index: any) => {
  router.push({
    path: '/game',
    query: {
      code: index
    }
  })
}

const isShowLogon = ref(false)
// 点击登录
const goLogin = () => {
  // 跳转到手机端登录界面
  // router.push({
  //   path: '/homePageMo',
  // })
  isShowLogon.value = true
}

const isShowUserBox = ref(false)

const goDetail = () => {
  !isLogin.value ? goLogin() : isShowUserBox.value = !isShowUserBox.value
}

const userScore = ref(0)

const logout = () => {
  axios({
    method: 'get',
    url: `${baseAPIUrl.value}/api/cms/game/logout`,
    headers: {
      token: store.token
    }
  }).then(() => {
    store.token = ""
    store.userInfo = {}
    localStorage.removeItem('token')
    localStorage.removeItem('userInfo')
    isLogin.value = false
  })
}

const oldPass = ref('')
const newPass = ref('')
const affirmPass = ref('')
const isPassChange = ref(false)


const changePassword = () => {

  if (oldPass.value == '' || newPass.value == '' || affirmPass.value == '') {
    Toast('密码不能为空', 'error');
  } else if (!/^[a-zA-Z0-9]{6,12}$/.test(oldPass.value) || !/^[a-zA-Z0-9]{6,12}$/.test(newPass.value) || !/^[a-zA-Z0-9]{6,12}$/.test(affirmPass.value)) {
    Toast('密码格式不正确', 'error')
  } else if (newPass.value != affirmPass.value) {
    Toast('两次密码不一致', 'error')
  } else {
    console.log(oldPass.value, newPass.value, affirmPass.value)
    const pwdNewEncrypted = encodeStr(Base64.encode(newPass.value))
    const pwdOldEncrypted = encodeStr(Base64.encode(oldPass.value))
    axios({
      method: 'post',
      url: `${baseAPIUrl.value}/api/cms/game/update/pass`,
      headers: {
        token: store.token
      },
      data: {
        newPassword: pwdNewEncrypted,
        oldPassword: pwdOldEncrypted
      }
    }).then((res: any) => {
      if (res.data.code == 0) {
        Toast('修改成功,请重新进行登录')
        // Toast)
        logout()
        isLogin.value = false
        isPassChange.value = false
      } else {
        Toast(res.data.msg, 'error')
      }
    })
  }
}


const goBack = () => {
  if (currentUnit.value.backPoint != '') {
    // pointInfo.value = currentUnit.value.backPoint
    window.changeUnitByHot('SHANGJJ', currentUnit.value.backPoint)
  }
}

// 切换主题
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
  }
}

const changeXuLeiReady = ref(true)

// 当自主变换主题时候,帧数也对应发生改变
watch(() => store.customThemeId, () => {
  console.log('主题发生改变')
  isReady.value = false
  changeXuLeiReady.value = false
  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
  }
  // alert(animalZhenShuNumber.value)
  // alert(duration.value)

  setTimeout(() => {
    isReady.value = true
    changeXuLeiReady.value = true
  }, 200)


})

// 首次进入且没有登录
const isFirstEnterScene = ref(false)

const changeFirstEnterScene = () => {
  isFirstEnterScene.value = false
  localStorage.setItem('isFirstEnterScene', 'false')
}




onMounted(() => {
  getAllHotspot()

  // 首次打开场景且没有登录打开弹窗
  if (localStorage.getItem('isFirstEnterScene') === 'true' && !localStorage.getItem('token') && !localStorage.getItem('userInfo')) {
    setTimeout(() => {
      isFirstEnterScene.value = true
    }, 1000)
  }

  setTimeout(() => {
    store.isShowGameThumb ? isShowExperienceGame.value = true : store.isShowGameThumb = true
  }, 500)
  // store.hotspots.length == 0 ? getAllHotspot() : hotspots.value = store.hotspots, currentUnit.value = hotspots.value[0]
  window.hotListShowChangeFu = () => {
    isShowHosList.value = !isShowHosList.value
  }

  // 机器人状态改变
  // greeting-招呼 idle-静默 talk-说话
  window.handleRobot = (state: string) => {
    animalStat.value = state
    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)
  }

  // 机器人在上面  top:上  bottom:下
  // @ts-ignore
  window.handleTopRobot = (state: string) => {
    const xuliezhenDom = document.getElementById('xuliezhenid')
    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
    if (state) {
      axios({
        method: 'get',
        url: `${baseAPIUrl.value}/api/cms/game/getPoint`,
        headers: {
          token: store.token
        }
      }).then((res: any) => {
        userScore.value = res.data.data.total
      })
    }
  }

  // 打开游戏界面弹窗
  window.openGameBoxFu = () => {
    !browser.mobile ? isShowGameList.value = true : router.push({
      path: 'homePageMo',
      query: {
        src: '/game/index.html#/?no-redirect=1'
      }
    })
  }

  // 跳转到游戏兑换页面
  window.openPricePageFu = () => {
    // 未登录状态
    if (!isLogin.value) {
      router.push({
        path: 'homePageMo',
        query: {
          src: '/game/index.html#/shop-for-visitor'
        }
      })
    } else {
      // 登录状态
      router.push({
        path: 'homePageMo',
        query: {
          src: '/game/index.html#/shop-view?no-redirect=1'
        }
      })
    }

  }

  checkLoginStatus()

  // 监听是否登录
  window.addEventListener('storage', () => {
    const token = localStorage.getItem('token')
    const userInfo = localStorage.getItem('userInfo')
    if (token && userInfo) {
      store.token = token
      store.userInfo = JSON.parse(userInfo)
      isShowLogon.value = false
      // 请求积分
      axios({
        method: 'get',
        url: `${baseAPIUrl.value}/api/cms/game/getPoint`,
        headers: {
          token: store.token
        }
      }).then((res: any) => {
        userScore.value = res.data.data.total
        isLogin.value = true
      })
    }
  })

  // 查看视频记录积分
  window.addScoreFu = (v: string) => {
    // 获取游戏规则
    axios({
      method: 'get',
      url: `${baseAPIUrl.value}/api/show/rule/getList?type=online`,
      headers: {
        token: store.token
      }
    }).then((res: any) => {

      const score = res.data.data.find((item: any) => { return item.name == v }).score
      axios({
        method: 'post',
        url: `${baseAPIUrl.value}/api/cms/game/point/add`,
        headers: {
          token: store.token
        },
        data: {
          description: "",
          score: encodeStr(Base64.encode(score)),
          type: v,
          userId: store.userInfo.id
        }
      }).then(() => {
        // alert('观看完成')
      })
    })

  }

  // 热点跳转展厅/游戏
  window.changeUnitByHot = (v: string, point: string) => {
    console.log(v, point)
    if (v === 'game') {
      openGame(parseInt(point) - 1)
    } else if (v === 'zhaopianqiang') {
      router.replace('wall')
    } else {
      const unit = store.hotspots.find((item: any) => {
        return item.code == v
      })

      if (unit) {
        changeUnit(unit)
        pointInfo.value = point
      }
    }
  }

})
const changePassFu = () => {
  if (!browser.mobile) {
    isPassChange.value = true; oldPass.value = ''; newPass.value = ''; affirmPass.value = ''
  } else {
    router.push({
      path: '/homePageMo',
      query: {
        src: '/game/index.html#/change-password?no-redirect=1'
      }
    })
  }
}
</script>

<template>
  <div class='all'>
    <!-- 返回按钮 -->
    <img class="backBtn" v-show="isShowFigure && currentUnit.code != 'SHANGJJ' && currentUnit.code != 'FFF'"
      src="@/assets/images/scene/back.png" alt="" @click="goBack()">

    <!-- 首次进入场景且未登录时，显示弹窗 -->
    <div class="first-box" v-show="isFirstEnterScene">
      <div class="box-content">
        <div class="text">完成<bottom @click="() => {
          router.push({
            path: 'homePageMo',
            query: {
              src: '/game/index.html#/sign-up'
            }
          })
          changeFirstEnterScene()
        }">注册</bottom>或<bottom @click="() => { goLogin(); changeFirstEnterScene() }">登陆</bottom>
          后，体验互动游戏，可以获得积分。<br v-show="browser.mobile" />积分可以在
          <bottom @click="() => {
            router.push({
              path: 'homePageMo',
              query: {
                src: '/game/index.html#/shop-for-visitor'
              }
            })
            changeFirstEnterScene()
          }">商城</bottom>中兑换奖品。
        </div>
        <div class="i-know" @click="changeFirstEnterScene()">我知道了</div>
      </div>
    </div>

    <!-- 回到主页按钮 -->
    <div class="backHome" v-show="isShowFigure" @click="() => { router.replace('/home') }">
      <img src="@/assets/images/scene/backHome.png" alt="">
    </div>
    <iframe v-if="currentUnit && currentUnit.code" id="sceneiframe"
      :src="`/scene/index.html?m=${currentUnit.code}${currentUnit.unit == '尾厅' ? '&firstView=pano:42,qua:0.009218044457158925,0.8470543054294898,-0.01469850441003682,0.5312231071060547&qs=1' : pointInfo}`"></iframe>
    <!-- <iframe id="sceneiframe"
      :src="`/web/index.html#/scene?code=KJ-mTSkFdm273x`"></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="() => { 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 }">{{
            item.unit
          }}</div>
      </div>
      <div class="hots-box-right">
        <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="!browser.mobile ? item.title.length > 8 ? 'gundong' : '' : 'mobileMo'">{{ item.title }}</div>
          </div>
        </div>
      </div>
    </div>
    <div id="xuliezhenid" class="xingxiangBox" v-show="isShowFigure">
      <!-- 形象人 -->
      <!-- 招呼状态 -->
      <div class="xuliezhen-greeting" v-show="isReady && animalStat == 'greeting'" @click="xingxiangListShow = true"
        :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/${store.customThemeId != null ? store.customThemeId : currentUnit.id}/talk.png)`, backgroundSize: 'cover' }">
      </div>
      <!-- 积分牌 -->
      <div class="score-box" v-if="isReady" @click="goDetail()">
        <img class="headImg" src="@/assets/images/scene/userHead.png" alt="">
        <!-- 已登录状态 -->
        <div>
          <div class="title" :style="{ marginTop: !isLogin ? '5px' : '' }">{{
            isLogin ? '积分' : "未登录" }}</div>
          <div class="scroll-wrap" v-show="isLogin">
            <div class="scroll-item" :title="String(userScore)">
              {{ userScore }}
            </div>
          </div>
        </div>
        <!-- 退出登录 -->
        <div class="user-box" v-if="isShowUserBox">
          <div @click="logout()">退出登录</div>
          <div @click="changePassFu()">修改密码</div>
          <div @click="() => {
            router.push({
              path: 'homePageMo',
              query: {
                src: '/game/index.html#/shop-view?no-redirect=1'
              }
            })
          }">奖品兑换</div>
        </div>
      </div>
      <!-- 形象切换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" v-show="changeXuLeiReady"
          :style="{ backgroundImage: `url(${baseResourceUrl}/animation/${store.customThemeId != null ? store.customThemeId : currentUnit.id}/greeting.png)`, backgroundSize: 'cover' }">
        </div>
        <div></div>
      </div>
    </div>

    <!-- 游戏列表弹窗 -->
    <div class="game-list-box" v-show="isShowGameList && !browser.mobile">
      <div class="game-list">
        <div class="game-list-item" v-for="(item, index) in store.dataAll.gameList" :key="index" @click="openGame(index)">
          <img :src="`${baseResourceUrl}/game/${browser.mobile ? 'mobile/' : 'pc/'}${item.id}.png`" alt="">
          <div v-show="!browser.mobile">{{ item.name }}</div>
        </div>
      </div>
      <img src="@/assets/images/close-icon.png" class="close-icon" @click="isShowGameList = false" alt="">
    </div>

    <!-- 游戏体验弹窗 -->
    <!-- <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="">
      <div class="btn" @click="openGame(currentUnit.gameId - 1)">
        <div>立即体验</div>
      </div>
      <img src="@/assets/images/close-icon.png" class="close-icon" @click="isShowExperienceGame = false" alt="">
    </div> -->

    <!-- 登录iframe -->
    <div v-if="isShowLogon" class="game-page">
      <iframe :src="`/game/index.html#/login-view?no-redirect=1`" frameborder="0"></iframe>
    </div>

    <!-- 修改密码弹窗 -->
    <div class="passChangeBox" v-if="isPassChange">
      <div class="conttent">
        <div><span style="margin-right: 20px;">旧密码：</span><input v-model="oldPass" type="password"
            placeholder="请输入6-10个数字或字母">
        </div>
        <div><span style="margin-right: 20px;">新密码：</span><input v-model="newPass" type="password"
            placeholder="请输入6-10个数字或字母">
        </div>
        <div><span style="margin-right: 5px;">确认密码：</span><input v-model="affirmPass" type="password"
            placeholder="请输入6-10个数字或字母">
        </div>
        <div class="btns">
          <div @click="changePassword">修改密码</div>
          <div @click="isPassChange = false">返回</div>
        </div>
      </div>
    </div>

  </div>
</template>

<style lang='less' scoped>
.all {
  width: 100%;
  height: 100%;
  overflow: hidden;

  .game-page {
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    position: absolute;
    top: 0;
    left: 0;
    background: white;


    iframe {
      width: 100%;
      height: 100%;

      @media screen and (max-width: 700px),
      (orientation: portrait) {
        width: 100%;
        // height: 100%;
      }
    }
  }

  .passChangeBox {
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.404);
    position: absolute;
    top: 0;
    left: 0;
    display: flex;
    justify-content: center;
    align-items: center;

    .conttent {
      width: 30%;
      height: 40%;
      background: rgba(255, 0, 0, 0.562);
      border-radius: 15px;
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      color: white;

      div {
        height: 15%;
        width: 80%;
        font-size: 16px;
        font-size: 18px;

        input {
          border: none;
          background: none;
          border-bottom: 1px solid #C5A16C;
          width: 70%;
          height: 50%;
          outline: none;
          font-size: 16px;
          color: white;
        }

        input::placeholder {
          color: rgba(255, 255, 255, .7) !important;
        }

        input:focus {
          outline: none;
        }
      }

      .btns {
        width: 80%;
        display: flex;
        flex-direction: row;
        justify-content: space-between;

        div {
          max-width: 30%;
          height: 30px;
          text-align: center;
          line-height: 30px;
          padding: 5px 20px;
          border-radius: 50px;
          background: rgba(255, 255, 255, 0.555);
          cursor: pointer;
          margin-top: 20px;
        }

        div:hover {
          color: #C5A16C;
        }
      }
    }
  }

  .backBtn {
    position: absolute;
    top: 3%;
    left: 2%;
    cursor: pointer;
  }

  .first-box {
    width: 100%;
    height: 100%;
    position: fixed;
    z-index: 99;
    display: flex;
    justify-content: center;
    align-items: center;

    .box-content {
      padding: 30px;
      background: rgba(0, 0, 0, 0.5);
      border-radius: 10px;
      color: white;
      line-height: 35px;
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;

      .text {
        display: -webkit-inline-box;
        // align-items: center;

        bottom {
          padding: 5px 20px;
          font-size: 14px;
          border: white solid 1px;
          border-radius: 10px;
          height: 30px;
          cursor: pointer;
          height: 20px;
          margin: 0 5px;
        }

      }

      .i-know {
        width: 200px;
        color: black;
        background: white;
        border-radius: 10px;
        border: 1px solid rgba(0, 0, 0, 0.5);
        cursor: pointer;
        display: flex;
        justify-content: center;
        margin-top: 20px;
      }


    }

  }

  .backHome {
    width: 40px;
    height: 40px;
    position: absolute;
    top: 3%;
    right: 2%;
    cursor: pointer;
    padding: 10px;
    background: rgba(255, 255, 255, 0.418);
    border-radius: 50px;
    box-sizing: border-box;

    img {
      width: 100%;
    }
  }

  iframe {
    width: 100%;
    height: 100%;
  }

  .hots-box {
    width: 25vw;
    height: 70vh;
    // background: red;
    position: absolute;
    bottom: 10%;
    left: 1%;
    display: flex;
    overflow: hidden;

    // justify-content: left;
    .close-icon {
      width: 30px;
      height: 30px;
      position: absolute;
      right: 10px;
      top: 10px;
      cursor: pointer;
      z-index: 2;
    }

    &-left {
      width: 30%;
      height: 100%;
      overflow: auto;
      background: #bc121b75;
      backdrop-filter: blur(10px);
      border-radius: 15px 0 0 0;

      @media screen and (max-width:700),
      (orientation: portrait) {
        border-radius: 0 0 0 0;
      }


      &::-webkit-scrollbar {
        display: none;
      }

      .left-item {
        width: 100%;
        height: 9vh;
        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;

        &:hover {
          background: #66141885;
        }

      }

      .left-item:first-child {
        border-radius: 15px 0 0 0;

        @media screen and (max-width:700),
        (orientation: portrait) {
          border-radius: 0 0 0 0;
        }
      }
    }

    &-right {
      width: 70%;
      height: 100%;
      overflow: auto;
      // padding: 20px 0 0;
      background: rgb(0, 0, 0);
      backdrop-filter: blur(10px);
      color: #ffffff;
      font-family: 'AlibabaPuHuiTi2.0-105Heavy';
      box-sizing: border-box;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: end;
      position: relative;
      padding: 0 10px;

      // .close-icon {
      //   width: 30px;
      //   height: 30px;
      //   position: absolute;
      //   right: 10px;
      //   top: 10px;
      //   cursor: pointer;
      // }


      .right-content {
        width: 100%;
        height: 95%;
        // background: red;
        overflow: auto;

        &::-webkit-scrollbar {
          display: none;
        }
      }

      .right-item {
        width: 100%;
        height: 5vh;
        display: flex;
        justify-content: left;
        align-items: center;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        cursor: pointer;

        .gundong {
          width: 100%;
          animation: identifier 8s linear infinite;
        }

        @keyframes identifier {

          30% {
            transform: translateX(0%);
          }



          100% {
            transform: translateX(-100%);
          }
        }

        &:hover {
          color: #C5A16C;
          background: rgba(114, 37, 37, 0.74);
        }
      }
    }
  }

  .xingxiangBox {
    position: absolute;
    right: 1%;
    bottom: 0;
    transition-property: bottom;
    transition-duration: .5s;

    .xuliezhen-greeting {
      position: absolute;
      right: 0;
      bottom: 150px;
      width: 200px;
      height: 200px;
      background-position-x: 0;
      background-repeat: no-repeat;
      // animation-name: xuliezhen-animation;
      animation-name: xuliezhen-animation;
      animation-timing-function: v-bind('animalZhenShu');
      animation-duration: v-bind('duration');
      animation-iteration-count: infinite;
      transition-property: bottom;
      cursor: pointer;
    }

    @keyframes xuliezhen-animation {
      50% {
        background-position-x: 0;
      }

      100% {
        background-position-x: v-bind('translateXNumber');
      }
    }

    .xuliezhen-talk {
      position: absolute;
      right: 0;
      bottom: 150px;
      width: 200px;
      height: 200px;
      background-position-x: 0;
      background-repeat: no-repeat;
      // animation-name: xuliezhen-animation;
      animation-name: xuliezhen-talk;
      animation-timing-function: v-bind('animalZhenShu');
      animation-duration: v-bind('duration');
      animation-iteration-count: infinite;
      transition-property: bottom;
      cursor: pointer;
    }


    @keyframes xuliezhen-talk {
      0% {
        background-position-x: 0;
      }

      100% {
        background-position-x: v-bind('translateXNumber');
      }
    }

    .xulielistBox {
      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 {
      width: 70px;
      height: 110px;
      background: url(@/assets/images/scene/userBg.png);
      background-size: 100% 100%;
      position: absolute;
      right: 60px;
      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%;
      }


      .user-box {
        width: 100px;
        height: 80px;
        background: rgba(255, 0, 0, 0.562);
        border-radius: 10px;
        color: white;
        text-align: center;
        position: absolute;
        top: 15%;
        left: -150%;
        display: flex;
        flex-direction: column;
        justify-content: center;
        font-size: 16px;
        cursor: pointer;

        div:hover {
          color: #EBC68F;
        }
      }

      .title {
        cursor: pointer;
      }

      .scroll-wrap {
        max-width: 70%;
        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;

      @media screen and (max-width: 700px),
      (orientation: portrait) {
        display: flex;
        flex-direction: column;
        overflow: auto;

        &::-webkit-scrollbar {
          width: 0;
          height: 0;
        }
      }

      .game-list-item {
        width: 100%;
        display: flex;
        flex-direction: column;
        // justify-content: center;
        align-items: center;

        img {
          width: 90%;
          height: 60%;
          margin-bottom: 10px;
          border-radius: 15px;

          @media screen and (max-width: 700px),
          (orientation: portrait) {
            width: 100%;
            height: 100%;
            margin-bottom: 0;
            object-fit: none;
          }
        }
      }
    }

    img {
      width: 44px;
      height: 44px;
      margin-top: 20px;
      cursor: pointer;
    }

    .game-ex-themb {
      width: 70%;
      height: 75%;
      // background: #ffffff85;
      border-radius: 15px;
      object-fit: cover;
      border-radius: 15px;
    }

    .btn {
      width: 200px;
      padding: 10px 10px;
      background: url('../../assets/images/scene/goExBtn.png');
      border-radius: 10px;
      background-size: cover;
      cursor: pointer;
      position: absolute;
      bottom: 20%;

      div {
        font-family: 'SourceHanSerifCN-Heavy';
        font-weight: 800;
        color: #FFFFFF;
        line-height: 28px;
        -webkit-text-stroke: 2px #4E3933;
        font-size: 30px;
        text-align: center;
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
      }
    }
  }




  @media screen and (max-width: 700px),
  (orientation: portrait) {
    .hots-box {
      width: 100%;
      height: 100%;
      background: rgba(226, 226, 226, 0.068);
      backdrop-filter: blur(10px);
      position: absolute;
      bottom: 0;
      left: 0;
      display: flex;
      justify-content: flex-end;
      align-items: flex-end;

      .close-icon {
        width: 40px;
        height: 40px;
      }

      .show-title {
        width: 100%;
        height: 15vh;
        overflow: auto;
        display: flex;
        justify-content: center;
        align-items: center;
        padding: 5%;
        color: white;
        position: absolute;
        left: 50%;
        transform: translateX(-50%);
        top: 10px;
        font-size: 1.2em;
        font-family: 'AlibabaPuHuiTi2.0-105Heavy';
        text-shadow: 0px 2px 8px rgba(0, 0, 0, 0.8);
      }

      &-left {
        height: 100%;
        background: #BC121A;
        border-radius: 0 0 0 0;

        display: flex;
        flex-direction: column;
        justify-content: space-around;



        &::-webkit-scrollbar {
          display: none;
        }

        .left-item {
          // height: 15%;
          font-size: 1em;


          &:hover {
            background: #66141885;
          }

          ;
        }

        .left-item:first-child {
          border-radius: 0 0 0 0;

        }
      }

      &-right {
        width: 70%;
        height: 100%;
        padding: 0 10px;
        box-sizing: border-box;

        // .close-icon {}


        // .right-content {}

        .right-item {
          width: 100%;
          height: 10vh;
          display: flex;
          justify-content: left;
          align-items: center;
          white-space: inherit;
          overflow: hidden;
          text-overflow: ellipsis;
          font-size: 0.9em;
          cursor: pointer;
          font-family: 'Courier New';

          .mobileMo {
            width: 100%;
            display: -webkit-box;
            -webkit-box-orient: vertical;
            overflow: hidden;
            text-overflow: ellipsis;
            -webkit-line-clamp: 2;
            /* 显示两行 */
            line-height: 1.2;
            /* 设置行高，根据需要调整 */
            max-height: 2.4em;
            /* 设置最大高度，根据需要调整 */
          }

          // .gundong {
          //   width: 100%;
          //   animation: identifier 8s linear infinite;
          // }

          // @keyframes identifier {

          //   0% {
          //     transform: translateX(100%);
          //   }

          //   100% {
          //     transform: translateX(-100%);
          //   }
          // }

          &:hover {
            color: #C5A16C;
            background: rgba(114, 37, 37, 0.74);
          }
        }
      }
    }


    .xingxiangBox {
      position: absolute;
      right: 0px;
      bottom: 0;

      .xuliezhen {
        position: absolute;
        right: 0;
        bottom: 120px;
        width: 100px;
        height: 100px;
        background-position-x: 0;
        background-repeat: no-repeat;
        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;
        will-change: transform, background-position-x;
      }

      @keyframes mouse-in {
        50% {
          background-position-x: 0;
        }

        100% {
          background-position-x: v-bind('translateXNumber');
        }
      }

      .xuliezhen-greeting {
        position: absolute;
        right: 0;
        bottom: 120px;
        width: 100px;
        height: 100px;
        background-position-x: 0;
        background-repeat: no-repeat;
        animation: xuliezhen-animation;
        animation-duration: v-bind('duration');
        animation-timing-function: v-bind('animalZhenShu');
        animation-iteration-count: infinite;
        transition-property: bottom;
        // transition-duration: 0.4s;
        cursor: pointer;
        will-change: transform, background-position-x;
      }

      @keyframes xuliezhen-animation {
        50% {
          background-position-x: 0;
        }

        100% {
          // background-position-x: v-bind('translateXNumber');
          background-position-x: calc(100% - 100px);
        }
      }

      .xuliezhen-talk {
        position: absolute;
        right: 0;
        bottom: 120px;
        width: 100px;
        height: 100px;
        background-position-x: 0;
        background-repeat: no-repeat;
        animation: xuliezhen-talk;
        animation-duration: v-bind('duration');
        animation-timing-function: v-bind('animalZhenShu');
        animation-iteration-count: infinite;
        transition-property: bottom;
        // transition-duration: 0.4s;
        cursor: pointer;
        will-change: transform, background-position-x;

      }


      @keyframes xuliezhen-talk {
        0% {
          background-position-x: 0;
        }

        100% {
          // background-position-x: v-bind('translateXNumber');
          background-position-x: calc(100% - 100px);

        }
      }

      .xulielistBox {
        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');
            background-position-x: calc(100% - 200px);

          }
        }
      }

      .score-box {
        bottom: 13px;
        right: 15px;
      }


    }

    .game-list-box {
      .game-ex-themb {
        width: 80%;
        height: 80%;
        // background: #ffffff85;
        border-radius: 15px;
        object-fit: cover;
        border-radius: 15px;
      }

      .btn {
        width: 150px;
        bottom: 17%;

        div {
          font-size: 22px;
        }
      }
    }
  }

}
</style>