update

public/SuperTwo/css/main.css

@@ -285,6 +285,10 @@ a:focus {
     border-radius: 50%
 }
 
+.backhome{
+    display: none;
+}
+
 hr {
     margin-top: 20px;
     margin-bottom: 20px;
@@ -834,8 +838,8 @@ hr {
     background: url("../images/narrow_off.png") center top no-repeat;
     background-size: 100%;
     display: inline-block;
-    width: 47px;
-    height: 47px;
+    width: 58px;
+    height: 54px;
 }
 
 .icon-fullscreen:before {
@@ -843,8 +847,8 @@ hr {
     background: url("../images/enlarge_on.png")center top no-repeat;
     background-size: 100%;
     display: inline-block;
-    width: 47px;
-    height: 47px;
+    width: 58px;
+    height: 54px;
 }
 
 .icon-help:before {
@@ -3798,7 +3802,7 @@ a.hasHover:hover, a:active {
 
 #volume>a, #gui-fullscreen>a, #gui-fullscreen-exit>a {
     display: flex;
-    width: 48px;
+    width: 58px;
     height: auto;
     justify-content: center;
     align-items: center;
@@ -7017,6 +7021,7 @@ a.hasHover.tag-link:hover {
     left:30px;
     top:30px;
     margin:auto;
+    cursor: pointer;
 }   
 @media only screen and (max-width: 600px) {
     #gui-modes-map>div[rel]:hover, #play:hover {
@@ -7052,13 +7057,16 @@ a.hasHover.tag-link:hover {
         height: auto;
     }
     .index-icon {
-        width:55px;
-        height:42px;
-        right:10px;
+       display: none;
     }
     .index-icon img{
        width:100%;
     }
+    .backhome{
+        margin-bottom: 4px;
+        display: inline-block;
+        cursor: pointer;
+    }
     .progressbar {
         width: 70%;
     }
@@ -7129,7 +7137,7 @@ a.hasHover.tag-link:hover {
     background-size: 100% 100%;
     padding: 8px 40px;
     display:none;
-    transform: translate(-50%, 50%);
+    transform: translate(-50%, 80%);
 } 
 
 #hot .hotactive{
@@ -7167,6 +7175,10 @@ a.hasHover.tag-link:hover {
     margin-top: 20px;
 }
 
+.isHelp >div .mb{
+    display: none;
+  }
+
 @media only screen and (max-width: 600px) {
     .isHelp >div{
         width: 80%;
@@ -7176,5 +7188,10 @@ a.hasHover.tag-link:hover {
 
     .isHelp >div >div{
         margin: 0 10px;
+        display: none;
+    }
+
+    .isHelp >div .mb{
+        display: block;
     }
 }

public/SuperTwo/index.html

@@ -60,6 +60,15 @@
                 <img src="./images/tips_drag.gif" alt="">
                 <p>鼠标拖拽转向</p>
             </div>
+
+            <div class="mb">
+                <img src="./images/mb_click.gif" alt="">
+                <p>点击即可移动</p>
+            </div>
+            <div class="mb">
+                <img src="./images/mb_move.gif" alt="">
+                <p>左右即可旋转</p>
+            </div>
         </div>
     </div>
     <div id="hot"> 
@@ -229,32 +238,37 @@
                     </div> -->
                 <div class="pinBottom left">
                     <div class="viewContainer">
+                        <div class="ui-icon backhome bch" data-original-title="回到首页" >
+                            <div>
+                                <img src="images/index-icon.png" >
+                            </div>
+                        </div>
                         
                         <div id="previous" class="previous desktop-only ui-icon" style="display: none;">
                             <a>
                                 <img rel="tooltip" src="images/play.png" width="24" height="24"
-                                    data-original-title="播放">
+                                    data-original-title="自动漫游">
                             </a>
                         </div>
-                        <div id="play" class="ui-icon" rel="tooltip" data-original-title="播放" >
+                        <div id="play" class="ui-icon" rel="tooltip" data-original-title="自动漫游" >
                             <a>
                                 <img   src="images/play.png" >
                             </a>
                         </div>
                         <div id="pause" class="ui-icon" style="display: none;"  >
                             <a>
-                                <img rel="tooltip" title="暂停" src="images/pause.png"  >
+                                <img rel="tooltip" title="自动漫游" src="images/pause.png"  >
                             </a>
                         </div>
                         <div id="next" class="next desktop-only ui-icon wide" style="display: none;">
                             <a>
-                                <i rel="tooltip" title="" class="icon icon-dpad-right" data-original-title="下一个"></i>
+                                <i rel="tooltip" title="下一个" class="icon icon-dpad-right" data-original-title="下一个"></i>
                             </a>
                         </div>
                       
                         <div id="gui-modes-map" class="ui-icon double active">
-                            <div data-original-title="导览" id="pullTab" rel="tooltip" title="">
-                                <img class="icon icon-inside" src="images/auto.png" title="导览" />
+                            <div data-original-title="场景导览" id="pullTab" rel="tooltip" title="">
+                                <img class="icon icon-inside" src="images/auto.png" title="场景导览" />
                             </div>
                             <div data-original-title="热点列表" id="hotList" rel="tooltip" title="" style="display: none">
                                 <img class="icon icon-inside" src="images/hotlist.png" title="热点列表" />
@@ -263,13 +277,13 @@
                                 <img class="icon icon-inside" src="images/inside.png" title="全景漫游" />
                                 <img class="icon icon-inside imgactive" src="images/inside_active.png" title="全景漫游" />
                             </div>
-                            <div data-original-title="迷你模型" id="gui-modes-dollhouse" rel="tooltip" title="" class="">
-                                <img class="icon icon-inside" src="images/dollhouse.png" title="迷你模型" />
-                                <img class="icon icon-inside imgactive" src="images/dollhouse_active.png" title="迷你模型" />
+                            <div data-original-title="迷你漫游" id="gui-modes-dollhouse" rel="tooltip" title="" class="">
+                                <img class="icon icon-inside" src="images/dollhouse.png" title="迷你漫游" />
+                                <img class="icon icon-inside imgactive" src="images/dollhouse_active.png" title="迷你漫游" />
                             </div>
-                            <div data-original-title="俯视图" id="gui-modes-floorplan" rel="tooltip" title="">
-                                <img class="icon icon-inside" src="images/floor.png" title="俯视图" />
-                                <img class="icon icon-inside imgactive"  src="images/floor_active.png" title="俯视图" />
+                            <div data-original-title="顶部俯视" id="gui-modes-floorplan" rel="tooltip" title="">
+                                <img class="icon icon-inside" src="images/floor.png" title="顶部俯视" />
+                                <img class="icon icon-inside imgactive"  src="images/floor_active.png" title="顶部俯视" />
                             </div>
                             <div data-original-title="VR" id="vr" rel="tooltip" title="" style="display: none;">
                                 <img class="icon icon-inside" src="images/VR.png" title="VR" />
@@ -289,9 +303,9 @@
                             <!-- <i class="icon icon-dpad-up"></i> -->
                             <div class="container"></div>
                         </div>
-                        <div id="volume" class="ui-icon wide">
+                        <div id="volume" class="ui-icon wide" title="音乐" >
                             <a>
-                                <img src="images/Volume btn_on.png" width="47" height="47">
+                                <img src="images/Volume btn_on.png">
                             </a>
                         </div>
                         <div id="vr" class="ui-icon wide hidden" style="display: none;">
@@ -305,14 +319,14 @@
                             </a>
                         </div>
                         <div id="gui-fullscreen" class="ui-icon wide" data-placement="top" rel="tooltip"
-                            title="{[{ VIEW_FULLSCREEN }]}">
-                            <a>
+                            title="全屏">
+                            <a title="全屏" >
                                 <i class="icon icon-fullscreen"></i>
                             </a>
                         </div>
                         <div id="gui-fullscreen-exit" class="ui-icon wide" data-placement="top" rel="tooltip"
-                            title="{[{ EXIT_FULLSCREEN }]}" style="display: none;">
-                            <a>
+                            title="退出全屏" style="display: none;">
+                            <a title="退出全屏" >
                                 <i class="icon icon-fullscreen-exit"></i>
                             </a>
                         </div>
@@ -768,7 +782,7 @@
                             <img class="keyboard">
                         </div> -->
                     <div class="nav-icon">
-                        <img src="images/pc_step1.png" class="icon" title="导览" data-page="1">
+                        <img src="images/pc_step1.png" class="icon" title="场景导览" data-page="1">
                         <div class="nav-help-button">
                             <div class="next-button nav-help-page" data-id="plus"></div>
                             <div class="prev-button nav-help-page"></div>
@@ -782,7 +796,7 @@
         <div class="cad">
             <div id="cad"></div>
         </div>
-        <a href="../index.html"><div class="index-icon"><img src="images/index-icon.png" alt=""></div></a>
+        <div class="bch"><div class="index-icon"><img src="images/index-icon.png" alt=""></div></div>
     </div>
    
     <script src="js/lib/jquery-2.1.1.min.js" class="build keep"></script>

public/SuperTwo/js/main_2020_show.js

@@ -8058,7 +8058,7 @@ window.Modernizr = function(n, e, t) {
 
                     setTimeout(function() {
                         $('.isHelp').fadeOut()
-                    }, 5000)
+                    }, 8000)
                 }
             }, e)
             //csz 用户引导界面
@@ -14708,6 +14708,15 @@ window.Modernizr = function(n, e, t) {
 							de.warn("Total load time: " + e / 1e3),
 							H.loadComplete(e),
 							de.warn("First render after model load finished.")
+
+                            try{ 
+                                window.parent.postMessage({
+                                    source: "loadComplete",
+                                    data: true,
+                                },'*') 
+                            }catch(e){
+                                console.log(e)
+                            }
 						}),
 						S.on(le.MemoryUsageUpdated, n)
 					}).fail(b.bind(this, e))

public/SuperTwo/js/manage.js

@@ -371,7 +371,7 @@ function showLogo(){
 //czj 添加随机的时间
 function randomTime(){
     return new Date()
-};
+}
 function matcher(data){
     if(!data || !g_version ) return data;
     delete data.model.vision_version;
@@ -529,6 +529,21 @@ var CloneObject = function(copyObj, result, isSimpleCopy) {
 }
 ;
 
+$('.bch').click(()=>{
+    window.parent.postMessage({
+            source: "backhome",
+            data: true,
+    },'*')
+})
+
+window.addEventListener('message',(res)=>{
+if (Object.prototype.toString.call(res.data) == "[object Object]") {
+    if (res.data.source === "palytour") {
+        window.startAndPlay()
+    }
+    }
+})
+
 
 
 //兼容一代的場景

src/App.vue

@@ -1,16 +1,39 @@
 <template>
   <div id="app">
-    <Home/>
+    <router-view @gotoWelcome="changZINDEX = 1,startplay=true"/>
+    <transition name="fade">
+      <welcome class="welcls" :style="{zIndex:changZINDEX}" v-show="isWel" :startplay="startplay"/>
+    </transition>
   </div>
 </template>
 
 <script>
 import '@/assets/style/reset.less'
 import '@/assets/style/public.less'
-import Home from './views/Home.vue';
+import welcome from '@/components/welcome'
 
 export default {
-  components: { Home },
+  data(){
+    return {
+      isWel:true,
+      changZINDEX:-1,
+      startplay:''
+    }
+  },
+  components: {
+    welcome
+  },
+  mounted(){
+    
+    this.$bus.$on('reset', ()=>{
+      window.location.reload()
+    })
+
+    this.$bus.$on('closeWel', ()=>{
+      this.isWel = true
+      this.changZINDEX = -1
+    })
+  }
 };
 </script>
 
@@ -18,6 +41,17 @@ export default {
 #app {
  width: 100%;
  height: 100%;
+ position: relative;
 }
 
+.fade-enter-active,.fade-leave-active {
+  transition: opacity .8s;
+}
+.fade-enter, .fade-leave-to /* .fade-leave-active below version 2.1.8 */ {
+  opacity: 0;
+}
+
+.welcls{
+  transition: zIndex .8s ease;
+}
 </style>

src/components/welcome.vue

@@ -0,0 +1,124 @@
+<template>
+  <div class="welcome">
+    <video ref="welcome" :src="require(`@/assets/videos/OPvss.mp4`)"></video>
+    <div
+      v-if="showJump"
+      @click="handleJump"
+      class="vbtn"
+      :style="{
+        backgroundImage: `url(${require(`@/assets/images/btn_bg.png`)})`,
+      }"
+    >
+      <span>跳过</span>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  props: ["startplay"],
+  data() {
+    return {
+      showJump: "",
+    };
+  },
+  watch: {
+    startplay(newVal) {
+      if (newVal) {
+        this.$refs.welcome.play();
+      }
+    },
+  },
+  methods: {
+    handleJump() {
+      this.$bus.$emit("closeWel", true);
+      this.$refs.welcome.pause();
+    },
+  },
+  mounted() {
+    this.$nextTick(() => {
+      if (this.$refs.welcome) {
+        this.$refs.welcome &&
+          this.$refs.welcome.addEventListener("ended", () => {
+            this.$bus.$emit("closeWel", true);
+          });
+      }
+      window.addEventListener("message", (res) => {
+        if (Object.prototype.toString.call(res.data) == "[object Object]") {
+          if (res.data.source === "loadComplete") {
+            this.showJump = true;
+          }
+        }
+      });
+    });
+  },
+};
+</script>
+
+<style lang="less" scoped>
+.welcome {
+  position: absolute;
+  left: 50%;
+  top: 50%;
+  transform: translate(-50%, -50%);
+  width: 100%;
+  height: 100%;
+  overflow: hidden;
+  > video {
+    width: 100%;
+  }
+  .vbtn {
+    position: absolute;
+    bottom: 50px;
+    right: 5%;
+    min-width: 315px;
+    min-height: 98px;
+    background-repeat: no-repeat;
+    background-size: 100% auto;
+    z-index: 999;
+    cursor: pointer;
+    > span {
+      position: absolute;
+      transform: translate(-50%, -50%);
+      top: 46%;
+      left: 44%;
+      color: #fff;
+      font-size: 24px;
+      letter-spacing: 2px;
+    }
+  }
+}
+
+
+@media screen and (max-width: 800px) {
+    .welcome{
+      background: #000;
+       > video {
+        width: 100%;
+        transform: translateY(-50%);
+        top: 50%;
+        position: absolute;
+        left: 0;
+      }
+        .vbtn{
+          position: absolute;
+          bottom: 32px;
+          left: 50%;
+          transform: translateX(-50%);
+          min-width: calc(315px * 0.8);
+          min-height:  calc(98px * 0.8);
+          z-index: 999;
+          cursor: pointer;
+          >span{
+            position: absolute;
+            transform: translate(-50%,-50%);
+            top: 47%;
+            left: 44%;
+            color: #fff;
+            font-size: 20px;
+            font-weight: bold;
+          }
+        }
+    }
+}
+</style>

src/main.js

@@ -1,11 +1,16 @@
 import Vue from 'vue'
 import App from './App.vue'
+import router from './router'
 import browser from "@/utils/browser";
 
 
 Vue.prototype.$browser = browser
+Vue.prototype.$bus = new Vue()
+
+
 Vue.config.productionTip = false
 
 new Vue({
+  router,
   render: h => h(App)
 }).$mount('#app')

src/router/index.js

@@ -1,7 +1,7 @@
 import Vue from 'vue'
 import VueRouter from 'vue-router'
 import Home from '../views/Home.vue'
-import Model from '../views/model.vue'
+import Scene from '../views/scene.vue'
 
 
 Vue.use(VueRouter)
@@ -13,9 +13,9 @@ const routes = [
     component: Home
   },
   {
-    path: '/model/:id',
-    name: 'model',
-    component: Model
+    path: '/scene',
+    name: 'Scene',
+    component: Scene
   }
 ]
 

src/views/Home.vue

@@ -1,20 +1,33 @@
 <template>
-  <div class="home" :style="{backgroundImage:`url(${require(`@/assets/images/${$browser.mobile?'mbbg.jpg':'bg.jpg'}`)})`}">
-    <div class="title_bar">
+  <div class="home" :style="{backgroundImage:`url(${require(`@/assets/images/${$browser.mobile?(isH?'mbbg_1.jpg':'mbbg.jpg'):'bg.jpg'}`)})`}">
+    <div class="title_bar" v-if="!$browser.mobile">
       <img :src="require(`@/assets/images/title_top.png`)" alt="">
       <img :src="require(`@/assets/images/title_bottom.png`)" alt="">
     </div>
-    <a href="SuperTwo/index.html?m=1030&amp;position=0" class="vbtn" :style="{backgroundImage:`url(${require(`@/assets/images/btn_bg.png`)})`}">
+    <div class="mb_bar" v-else>
+      <img :src="require(`@/assets/images/mb_title_top.png`)" alt="">
+    </div>
+    <div @click="handleGoto" class="vbtn" :style="{backgroundImage:`url(${require(`@/assets/images/btn_bg.png`)})`}">
       <span>点击进入</span>
-    </a>
+    </div>
   </div>
 </template>
 
 
 <script>
+let isH = window.innerHeight/window.innerWidth
 export default {
   data(){
     return {
+      isH: isH>1.8
+    }
+  },
+  methods:{
+    handleGoto(){
+      this.$emit('gotoWelcome',true)
+      setTimeout(() => {
+        this.$router.push({path:'/scene'})
+      });
     }
   }
 }
@@ -25,7 +38,7 @@ export default {
   width: 100%;
   height: 100%;
   position: relative;
-  background-size: cover;
+  background-size: 100% auto;
   background-repeat: no-repeat;
   overflow: hidden;
   .title_bar{
@@ -34,19 +47,22 @@ export default {
     height: 100%;
     background-color: rgba(76, 0, 0, 0.7);
     display: flex;
-    padding: 40px 0 20px;
+    padding: 40px 0 50px;
     flex-direction: column;
     justify-content: space-between;
-    align-items: center;
     >img{
-      max-width: 100%;
+      max-width: 90%;
+      &:last-of-type{
+        margin-left: 40px;
+        max-width: 80%;
+      }
     }
   }
 
   .vbtn{
     position: absolute;
     bottom: 72px;
-    transform: translate(-50%);
+    transform: translateX(-50%);
     left: 65%;
     min-width: 315px;
     min-height: 98px;
@@ -61,13 +77,43 @@ export default {
       left: 44%;
       color: #fff;
       font-size: 24px;
+      letter-spacing: 2px;
     }
   }
 }
 
 @media screen and (max-width: 800px) {
     .home{
-   
+      .mb_bar{
+        width: 100%;
+        text-align: center;
+        display: flex;
+        flex-direction: column;
+        justify-content: space-between;
+        padding-top: 40px;
+        >img{
+          width: 90%;
+          margin: 0 auto;
+        }
+      }
+        .vbtn{
+          position: absolute;
+          bottom: 32px;
+          left: 50%;
+          min-width: calc(315px * 0.8);
+          min-height:  calc(98px * 0.8);
+          z-index: 999;
+          cursor: pointer;
+          >span{
+            position: absolute;
+            transform: translate(-50%,-50%);
+            top: 47%;
+            left: 44%;
+            color: #fff;
+            font-size: 20px;
+            font-weight: bold;
+          }
+        }
     }
 }
 </style>

src/views/scene.vue

@@ -0,0 +1,46 @@
+<template>
+  <div class="scene">
+    <iframe ref="ifr" src="SuperTwo/index.html?m=1030&position=0&qust=1" frameborder="0"></iframe>
+  </div>
+</template>
+
+<script>
+export default {
+  data(){
+    return{
+      wel:true
+    }
+  },
+  mounted(){
+    this.$nextTick(()=>{
+      this.$bus.$on('closeWel',()=>{
+       this.$refs.ifr &&  this.$refs.ifr.contentWindow.postMessage({
+            source: "palytour",
+            data:true,
+        },'*')
+      })
+      window.addEventListener('message',(res)=>{
+        if (Object.prototype.toString.call(res.data) == "[object Object]") {
+          if (res.data.source === "backhome") {
+            this.$router.replace({path:'/'})
+            this.$bus.$emit('reset',true)
+          }
+        }
+      })
+    })
+  }
+}
+</script>
+
+<style lang="less" scoped>
+.scene{
+  position: relative;
+  width: 100%;
+  height: 100%;
+  >iframe{
+    width: 100%;
+    height: 100%;
+
+  }
+}
+</style>