更新游戏

web/src/views/scene/gui/menu.vue

@@ -188,6 +188,9 @@
               :src="require(`@/assets/images/btnlist/${item.id}${btnlistActive==item.id?`_${theme}`:''}.png`)"
             />
           </li>
+          <li @click="$emit('update:gameIsShow',true)">
+            <img title="游戏" :src="require(`@/assets/images/btnlist/game.png`)"/>
+          </li>
           <li @click="isBgm=!isBgm">
             <img
               title="音乐"
@@ -277,6 +280,7 @@
         </div>
       </div>
     </div>
+
   </div>
 </template>
 
@@ -427,6 +431,7 @@ export default {
 </script>
 
 <style lang="less" scoped>
+
 #gui-modes-map {
   > div {
     > img {
@@ -477,7 +482,7 @@ export default {
 }
 
 .shouqi.active {
-  max-width: 800px;
+  max-width: 840px;
 }
 
 .drawbtn {
@@ -654,4 +659,7 @@ export default {
     text-shadow: 0 0 10px rgba(0, 0, 0, 1);
   }
 }
+
+
+
 </style>

web/src/views/scene/scene.vue

@@ -1,119 +1,140 @@
 <template>
   <div class="parent-body">
     <!-- 热点 -->
-    <hot/>
+    <hot />
     <!-- 热点弹出框 -->
-    <popup/>
+    <popup />
     <!-- 加载初始页面 -->
     <div id="gui-thumb"></div>
     <!-- cad -->
-    <cad/>
+    <cad />
     <!-- 主容器 -->
-    <div id="player"></div>
+    <div id="player">
+      <!-- 游戏的盒子 -->
+      <div class="gameBox" v-if="gameIsShow">
+        <div class="btnX" @click="gameIsShow = false">
+          <img src="@/assets/images/btnlist/close.png" alt="" />
+        </div>
+        <iframe
+          src="http://192.168.0.245:8003/game/index.html#/"
+          frameborder="0"
+        ></iframe>
+      </div>
+    </div>
     <div id="gui-parent">
-        <!-- 进度条加载 -->
-        <gui-loading/>
-        <div id="gui" style="display: none;">
+      <!-- 进度条加载 -->
+      <gui-loading />
+      <div id="gui" style="display: none">
+        <!-- 退出VR模式按钮 -->
+        <div id="vrOff">
+          <img id="vrOffImg" src="images/vrOffImg.png" alt="" />
+        </div>
 
-            <!-- 退出VR模式按钮 -->
-            <div id="vrOff">
-                <img id="vrOffImg" src="images/vrOffImg.png" alt="">
-            </div>
+        <!-- 热点列表 -->
+        <hotspot-list />
 
-            <!-- 热点列表 -->
-            <hotspot-list/>
+        <!-- 标题 -->
+        <v-title />
 
-            <!-- 标题 -->
-            <v-title/>
+        <!-- 底部菜单 -->
+        <v-menu @btnactive="handleActive" :gameIsShow.sync='gameIsShow'/>
 
-            <!-- 底部菜单 -->
-            <v-menu @btnactive="handleActive"/>
-            
-            <!-- 导览 -->
-            <v-guide/>
+        <!-- 导览 -->
+        <v-guide />
 
-            <!-- logo -->
-            <div id="myCompany"
-                style="width:100%;position:absolute;bottom:20px;text-align:center;font-size:14px;font-family: '微软雅黑';font-weight:580;color: rgba(255, 255, 255, 0.8);">
-                四维时代提供技术支持
-            </div>
+        <!-- logo -->
+        <div
+          id="myCompany"
+          style="
+            width: 100%;
+            position: absolute;
+            bottom: 20px;
+            text-align: center;
+            font-size: 14px;
+            font-family: '微软雅黑';
+            font-weight: 580;
+            color: rgba(255, 255, 255, 0.8);
+          "
+        >
+          四维时代提供技术支持
         </div>
+      </div>
 
-        <!-- vr -->
-        <web-vr/>
+      <!-- vr -->
+      <web-vr />
 
-        <!-- loading -->
-        <div id="gui-spinner" style="display: none;">
-            <div class="gui-spinner-icon"></div>
-        </div>
+      <!-- loading -->
+      <div id="gui-spinner" style="display: none">
+        <div class="gui-spinner-icon"></div>
+      </div>
+
+      <!-- guimsg -->
+      <guimsg />
 
-        <!-- guimsg -->
-        <guimsg/>
+      <!-- 错误提示 -->
+      <v-error />
 
-        <!-- 错误提示 -->
-        <v-error/>
+      <vr-con />
 
-        <vr-con/>
-        
-        <v-other/>
-        
+      <v-other />
     </div>
-    <exhibition class="exhibition"/>
+    <exhibition class="exhibition" />
 
-      <Danmaku
-        class="danmaku"
-        :quotes="quotes"
-        :danmuArr="danmu"
-        :showIcon="require(`@/assets/images/icon/danmu_open_${theme}.png`)"
-        :closeIcon="require('@/assets/images/icon/danmu_close.png')"
-        :arrowIcon="require('@/assets/images/icon/danmu_top.png')"
-      />
-      <vpopup @close="handlepopClose" :cp="cp" v-if="cp"/>
+    <Danmaku
+      class="danmaku"
+      :quotes="quotes"
+      :danmuArr="danmu"
+      :showIcon="require(`@/assets/images/icon/danmu_open_${theme}.png`)"
+      :closeIcon="require('@/assets/images/icon/danmu_close.png')"
+      :arrowIcon="require('@/assets/images/icon/danmu_top.png')"
+    />
+    <vpopup @close="handlepopClose" :cp="cp" v-if="cp" />
   </div>
 </template>
 
 <script>
-import hot from './hot';
-import popup from './popup';
-import cad from './cad';
-import guiLoading from './gui/loading';
-import hotspotList from './gui/hotspotlist';
-import vTitle from './gui/title';
-import vMenu from './gui/menu';
-import vGuide from './gui/guide';
-import webVr from './gui/webvr';
-import guimsg from './gui/guimsg';
-import vError from './gui/error';
-import vrCon from './gui/vrcon';
-import vOther from './gui/other';
-import exhibition from '@/components/exhibition';
+import hot from "./hot";
+import popup from "./popup";
+import cad from "./cad";
+import guiLoading from "./gui/loading";
+import hotspotList from "./gui/hotspotlist";
+import vTitle from "./gui/title";
+import vMenu from "./gui/menu";
+import vGuide from "./gui/guide";
+import webVr from "./gui/webvr";
+import guimsg from "./gui/guimsg";
+import vError from "./gui/error";
+import vrCon from "./gui/vrcon";
+import vOther from "./gui/other";
+import exhibition from "@/components/exhibition";
 
-import vpopup from './components/popup.vue'
+import vpopup from "./components/popup.vue";
 
-import { checkLogin, getUserInfo,getList  } from "@/config/api";
+import { checkLogin, getUserInfo, getList } from "@/config/api";
 
 export default {
-  name: 'Home',
+  name: "Home",
   components: {
-      hot,
-      popup,
-      cad,
-      guiLoading,
-      hotspotList,
-      vTitle,
-      vMenu,
-      vGuide,
-      webVr,
-      guimsg,
-      vError,
-      vrCon,
-      vOther,
-      exhibition,
-      vpopup
+    hot,
+    popup,
+    cad,
+    guiLoading,
+    hotspotList,
+    vTitle,
+    vMenu,
+    vGuide,
+    webVr,
+    guimsg,
+    vError,
+    vrCon,
+    vOther,
+    exhibition,
+    vpopup,
   },
-  mounted(){
-     window.addEventListener('message',(res)=>{
-       if (Object.prototype.toString.call(res.data) == "[object Object]") {
+
+  mounted() {
+    window.addEventListener("message", (res) => {
+      if (Object.prototype.toString.call(res.data) == "[object Object]") {
         if (res.data.source === "changeTheme") {
           this.$store.dispatch("changeTheme", res.data.data);
         }
@@ -122,69 +143,69 @@ export default {
           console.log(res.data.data);
           this.$store.dispatch("setUserInfo", res.data.data);
         }
-
-        
       }
-     })
+    });
 
     this.$nextTick(() => {
       if (!window.evt) {
         window.evt = document.createEvent("HTMLEvents");
         window.evt.initEvent("loadfinish", false, false);
       }
-      window.addEventListener("loadfinish", ()=>{}, false);
+      window.addEventListener("loadfinish", () => {}, false);
+    });
+
+    this.$bus.$on("opendaolan", () => {
+      this.showExhibition = true;
     });
-    
-    this.$bus.$on('opendaolan',()=>{
-      this.showExhibition = true
-    })
-    this.starLoad()
-    this.getUserInfo()
-    this.getData()
+    this.starLoad();
+    this.getUserInfo();
+    this.getData();
   },
-  methods:{
+  methods: {
     getUserInfo() {
       let userId = window.localStorage.getItem("webuserId");
       let token = window.localStorage.getItem("webtoken");
 
-      if (!userId||!token) return;
-      getUserInfo({id:userId},res=>{
+      if (!userId || !token) return;
+      getUserInfo({ id: userId }, (res) => {
         this.$store.dispatch("setUserInfo", res.data);
-        this.$refs.ifr.contentWindow.postMessage({
+        this.$refs.ifr.contentWindow.postMessage(
+          {
             source: "userInfo",
-            data:res.data,
-        },'*')
-      })
+            data: res.data,
+          },
+          "*"
+        );
+      });
     },
-    starLoad(){
-      window.loadMainJs()
-      window.loadMange()
-      window.loadScene()
+    starLoad() {
+      window.loadMainJs();
+      window.loadMange();
+      window.loadScene();
     },
-    handleClose(){
-      $('.cad').css('transform', 'translate(-150%,-50%)')
-      this.showExhibition=false
+    handleClose() {
+      $(".cad").css("transform", "translate(-150%,-50%)");
+      this.showExhibition = false;
     },
-    handlepopClose(){
-      this.cp = ''
-      this.$bus.$emit('resetbtnactive')
+    handlepopClose() {
+      this.cp = "";
+      this.$bus.$emit("resetbtnactive");
     },
-    handleActive(data){
-      if (data=='question') {
-        checkLogin(res=>{
+    handleActive(data) {
+      if (data == "question") {
+        checkLogin((res) => {
           if (res.data) {
-            this.cp = 'question'
-          }
-          else{
-            alert('请登录后操作')
-            this.$bus.$emit('resetbtnactive')
+            this.cp = "question";
+          } else {
+            alert("请登录后操作");
+            this.$bus.$emit("resetbtnactive");
           }
-        })
+        });
       }
-      if (data=='comment') {
-        this.cp = 'comment'
+      if (data == "comment") {
+        this.cp = "comment";
       }
-      console.log(data)
+      console.log(data);
     },
     destroy() {
       window.hadLoad = true;
@@ -193,8 +214,8 @@ export default {
         window.player = "";
         $(".parent-body").remove();
         $("#player").remove();
-        $(document).unbind('keydown')
-        $(document).off('keydown')
+        $(document).unbind("keydown");
+        $(document).off("keydown");
       }
     },
     async getData() {
@@ -203,43 +224,70 @@ export default {
         pageSize: 1000,
       };
       getList("barrage", params, (res) => {
-        this.danmu = res.data.list.map(item=>item.content)
+        this.danmu = res.data.list.map((item) => item.content);
       });
-    }
+    },
   },
-  beforeDestroy(){
+  beforeDestroy() {
     this.destroy();
   },
-  data(){
-      return {
-        quotes:[
-          "很漂亮的线上展馆，支持！",
-          "足不出户就能浏览参观，太棒了！",
-          "期待能有机会到实体馆参观。",
-          "请问英模在第几展区？",
-          "向革命先烈们致敬。",
-          "展馆的信息介绍很详细，干货满满！",
-          "向人民解放军致敬"
-          ],
-        danmu:[],
-        showExhibition: false,
-        cp:''
-      }
-  }
-}
+  data() {
+    return {
+      // 控制游戏图标
+      gameIsShow: false,
+      quotes: [
+        "很漂亮的线上展馆，支持！",
+        "足不出户就能浏览参观，太棒了！",
+        "期待能有机会到实体馆参观。",
+        "请问英模在第几展区？",
+        "向革命先烈们致敬。",
+        "展馆的信息介绍很详细，干货满满！",
+        "向人民解放军致敬",
+      ],
+      danmu: [],
+      showExhibition: false,
+      cp: "",
+    };
+  },
+};
 </script>
 
 <style lang="less" scoped>
-
-.parent-body{
+.gameBox {
+  z-index: 9999999;
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 100vw;
+  height: 100vh;
+  background-color: rgba(0, 0, 0, 0.7);
+  iframe {
     width: 100%;
     height: 100%;
-    padding-top: 0;
-    position: relative;
-    overflow: hidden;
+    z-index: 999999;
+  }
+  .btnX {
+    cursor: pointer;
+    position: absolute;
+    right: 10px;
+    top: 10px;
+    width: 30px;
+    height: 30px;
+    & > img {
+      width: 100%;
+      height: 100%;
+    }
+  }
+}
+.parent-body {
+  width: 100%;
+  height: 100%;
+  padding-top: 0;
+  position: relative;
+  overflow: hidden;
 }
 
-.danmaku{
+.danmaku {
   position: absolute;
   bottom: 10px;
   left: 34px;
@@ -247,11 +295,10 @@ export default {
   width: 340px;
 }
 
-.exhibition{
+.exhibition {
   position: absolute;
   top: 50px;
   right: 0;
   z-index: 99;
 }
-
 </style>