upp

zhengquan/src/router/index.ts

@@ -19,6 +19,13 @@ const routes = [
     name: 'scene',
     //使用import可以路由懒加载，如果不使用，太多组件一起加载会造成白屏
     component: () => import('@/views/Scene/ScenePage.vue')
+  },
+  // 小游戏
+  {
+    path: '/game',
+    name: 'game',
+    //使用import可以路由懒加载，如果不使用，太多组件一起加载会造成白屏
+    component: () => import('@/views/Game/gamePage.vue')
   }
 ]
 // 路由

zhengquan/src/views/Game/gamePage.vue

@@ -0,0 +1,31 @@
+<script setup lang='ts'>
+import { useRoute } from 'vue-router';
+
+const route = useRoute()
+</script>
+
+<template>
+  <div class='game-page'>
+    <iframe
+      :src="`https://houseoss.4dkankan.com/project/ZQBWG/game/index.html#/redirect-view?gameIdx=${route.query.code}`"
+      frameborder="0"></iframe>
+  </div>
+</template>
+
+<style lang='less' scoped>
+.game-page {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  justify-content: center;
+
+  iframe {
+    width: 30%;
+    height: 100%;
+    @media screen and (max-width: 440px) {
+      width: 100%;
+      // height: 100%;
+    }
+  }
+}
+</style>

zhengquan/src/views/Home/components/unitList.vue

@@ -125,7 +125,6 @@ onMounted(() => {
   curUnit.value = store.dataAll.welfareList[0]
 })
 
-const noLogo = ref(false)
 
 
 </script>
@@ -146,6 +145,8 @@ const noLogo = ref(false)
     </div>
     <!-- 信息展示移动端 -->
     <div class="info-box-mo" v-show="isShowInfoBox && browser.mobile">
+      <!-- 返回按钮 -->
+      <img class="back-icon" src="@/assets/images/scene/back.png" @click="isShowInfoBox = false" alt="">
       <div class="content-info">
         <h4>{{ curUnit ? curUnit.title : '' }}</h4>
         <div>{{ curUnit ? curUnit.disc : '' }}</div>
@@ -184,18 +185,21 @@ const noLogo = ref(false)
       </div>
     </div>
     <div class="content" v-else>
-      <img class="icon-down" src="@/assets/images/home/icon-down.png" alt="" @click="close">
       <div class="title-box">公益单位</div>
       <div class="grid-box">
         <div class="content-item" v-for="(item, index) in store.dataAll.welfareList" :key="index"
           @click="curUnit = item, isShowInfoBox = true">
-          <img v-show="!noLogo" @error="noLogo = true" :src="`${baseUrl}/logo/${item.title}.png`" alt="">
           <!-- 默认图片--无logo情况下显示 -->
-          <div v-show="noLogo" class="">{{ item.title }}</div>
+          <div v-if="item.title == '鹏华基金管理有限公司' || item.title == '北京中金公益基金会'" class="defaultLogo"
+            :style="{ backgroundImage: `url(${baseUrl}/logo/logo-default${hoverIndex == item ? 'Ac' : ''}.png)`, backgroundSize: 'cover' }">
+            {{
+              item.title }}</div>
+          <img v-else :src="`${baseUrl}/logo/${item.title}.png`" alt="">
           <div class="name-box">{{ item.title }}</div>
         </div>
       </div>
     </div>
+    <img v-show="browser.mobile" class="icon-down" src="@/assets/images/home/icon-down.png" alt="" @click="close">
     <img v-show="!browser.mobile" class="line-down" src="@/assets/images/home/line-down.png" alt="" @click="close">
   </div>
 </template>
@@ -210,6 +214,7 @@ const noLogo = ref(false)
   justify-content: center;
   align-items: end;
   z-index: 2;
+  overflow: hidden;
 
   .info-box {
     position: absolute;
@@ -395,6 +400,12 @@ const noLogo = ref(false)
     bottom: 15px;
     cursor: pointer;
   }
+  .icon-down{
+    position: absolute;
+    bottom: 80%;
+    left: 45%;
+
+  }
 }
 
 @media screen and(max-width: 400px) {
@@ -412,10 +423,15 @@ const noLogo = ref(false)
       background: #C5A16C;
       z-index: 3;
       font-family: 'AlibabaPuHuiTi2.0-75SemiBold';
+      .back-icon{
+        margin-left: 5%;
+        margin-top: 5%;
+      }
 
       .content-info {
         padding: 8%;
-        max-height: 60%;
+        max-height: 80%;
+        overflow: auto;
 
         div {
           margin-top: 10px;
@@ -551,13 +567,25 @@ const noLogo = ref(false)
         .content-item {
           display: flex;
           flex-direction: column;
-          justify-content: center;
+          // justify-content: center;
           align-items: flex-start;
 
+          .defaultLogo {
+            width: 40vw;
+            height: 40vw;
+            border-radius: 10px;
+            display: flex;
+            justify-content: center;
+            align-items: center;
+            color: black;
+          }
+
+
           img {
             width: 40vw;
             height: 40vw;
             object-fit: cover;
+            border-radius: 10px;
           }
 
           .name-box {

zhengquan/src/views/Scene/ScenePage.vue

@@ -71,6 +71,8 @@ const getAllHotspot = () => {
     hotspots.value.forEach((item: any, index: number) => {
       if (item.id == 1) {
         hotspots.value.unshift(hotspots.value.splice(index, 1)[0])
+      } else if (item.id == 0) {
+        hotspots.value.unshift(hotspots.value.splice(index, 1)[0])
       } else if (item.id == 9) {
         hotspots.value.push(hotspots.value.splice(index, 1)[0])
       }
@@ -121,8 +123,13 @@ const isShowGameList = ref(false)
 const isLogin = ref(false)
 
 // 内嵌小游戏界面打开
-const openGame = (game: any) => {
-  console.log(game)
+const openGame = (index: number) => {
+  router.push({
+    path: '/game',
+    query: {
+      code: index
+    }
+  })
 }
 
 // 点击登录
@@ -143,7 +150,6 @@ onMounted(() => {
   window.handleRobot = (state: string) => {
     animalStat.value = state
     animalZhenShuNumber.value = currentUnit.value.xuliezhen[animalStat.value].zhenShu
-    alert(currentUnit.value.xuliezhen[animalStat.value].duration)
     duration.value = currentUnit.value.xuliezhen[animalStat.value].duration
     isReady.value = true
   }
@@ -232,9 +238,9 @@ onMounted(() => {
     <!-- 游戏列表弹窗 -->
     <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 class="game-list-item" v-for="(item, index) in store.dataAll.gameList" :key="index" @click="openGame(index)">
+          <img :src="`${baseUrl}/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="">
@@ -419,7 +425,7 @@ onMounted(() => {
       background: url(@/assets/images/scene/userBg.png);
       background-size: 100% 100%;
       position: absolute;
-      right: 40px;
+      right: 60px;
       bottom: 30px;
       display: flex;
       flex-direction: column;
@@ -505,6 +511,17 @@ onMounted(() => {
       font-family: 'AlibabaPuHuiTi2.0-105Heavy';
       color: white;
 
+      @media screen and (max-width: 440px) {
+        display: flex;
+        flex-direction: column;
+        overflow: auto;
+
+        &::-webkit-scrollbar {
+          width: 0;
+          height: 0;
+        }
+      }
+
       .game-list-item {
         width: 100%;
         display: flex;
@@ -513,10 +530,17 @@ onMounted(() => {
         align-items: center;
 
         img {
-          width: 70%;
-          height: 50%;
-          object-fit: contain;
+          width: 90%;
+          height: 60%;
           margin-bottom: 10px;
+          border-radius: 15px;
+
+          @media screen and (max-width: 440px) {
+            width: 100%;
+            height: 100%;
+            margin-bottom: 0;
+            object-fit: none;
+          }
         }
       }
     }

zhengquan/src/views/WelcomePage/WelcomePage.vue

@@ -15,6 +15,21 @@ const goExport = () => {
     path: '/home'
   })
 }
+
+const countDownNumber = ref(5)
+
+onMounted(() => {
+  let timer = setInterval(() => {
+    if (countDownNumber.value > 0) {
+      countDownNumber.value--;
+    } else {
+      clearInterval(timer);
+      router.push({
+        path: '/home'
+      })
+    }
+  }, 1000)
+})
 </script>
 
 <template>
@@ -30,6 +45,11 @@ const goExport = () => {
       <span style="margin-right: 10px;"><strong>主办单位：</strong>中国证券博物馆</span>|
       <strong style="margin-left: 10px;">支持单位：</strong>上海证券期货文化发展基金会
     </div> -->
+
+    <!-- 倒数进入主页 -->
+    <div class="count-down">
+      {{ countDownNumber }}s
+    </div>
   </div>
 </template>
 
@@ -44,6 +64,16 @@ const goExport = () => {
   justify-content: center;
   align-items: center;
 
+  .count-down {
+    background: rgba(0, 0, 0, 0.37);
+    border-radius: 50px;
+    padding: 3px 20px;
+    color: white;
+    position: absolute;
+    top: 5%;
+    right: 3%;
+  }
+
   .logo {
     position: absolute;
     left: 3%;