update0617

public/static/css/main.css

@@ -4282,10 +4282,9 @@ a.hasHover:hover, a:active {
 
 @media only screen and (max-width: 487px), (max-height:487px) {
     #thumb-container .thumbImg img, .frame {
-        height: 77px
     }
     .frame .slidee li, .frame .slidee li .overlay {
-        width: 103px
+        width: 100%;
     }
     #drawer-container{
         left: unset;

public/static/js/main_2020_show.js

@@ -15151,7 +15151,7 @@ window.Modernizr = function(n, e, t) {
                     $("#player").css({
                         'background-image': "url("+(browser.isMobile()?settings.mobileBgImg:settings.bgImg)+")",
                         "background-position": "bottom center",
-                        "background-size": "100% auto",
+                        "background-size": "100% 23%",
                         "background-repeat": "no-repeat",
                         "background-color": settings.bgColor,
                     })

src/assets/theme/color.less

@@ -5,7 +5,7 @@
 }
 
 .themexuting{
-  .theme(#298ADF,#298ADF)
+  .theme(#b368d8,#b368d8)
 }
 
 .themeone{

src/assets/theme/theme.less

@@ -6,6 +6,10 @@
     background-color: @backcolor;
   }
 
+  .primarytxt {
+    color: @backcolor;
+  }
+
   .hoverTheme,
   .activeTheme {
     // border: 3px solid @backcolor!important;
@@ -13,10 +17,13 @@
 
   .biankuang {
     position: relative;
-    &.active,&:hover{
+
+    &.active,
+    &:hover {
+
       &::before,
       &::after {
-        background: linear-gradient(186deg, @backcolor 0%, rgba(0, 144, 255, 0) 100%);
+        background-image: linear-gradient(186deg, @backcolor 0%, rgba(0, 144, 255, 0) 100%);
         content: "";
         width: 100%;
         height: 4px;
@@ -25,7 +32,7 @@
         right: 0;
         z-index: 99;
       }
-  
+
       &::after {
         content: "";
         top: 4px;
@@ -34,17 +41,25 @@
       }
     }
 
-   
+
   }
 
+
+  .fandb {
+    background-color: rgba(@backcolor, 0.39);
+  }
+
+
   .slidee {
     .active {
       position: relative;
       transition: .3s ease all;
-      border-right: 4px solid @backcolor!important;;
+      border-right: 4px solid @backcolor  !important;
+      ;
+
       &::before,
       &::after {
-        background: linear-gradient(186deg, @backcolor 0%, rgba(0, 144, 255, 0) 100%);
+        background-image: linear-gradient(186deg, @backcolor 0%, rgba(0, 144, 255, 0) 100%);
         content: "";
         width: 100%;
         height: 4px;
@@ -62,28 +77,31 @@
     }
   }
 
-  
+
   .strmactive {
     position: relative;
 
-    &::before,
-    &::after {
-      position: absolute;
-      bottom: 0;
-      content: '';
-      width: 56px;
-      left: 0;
-      height: 1px;
-      background-color: @backcolor;
-    }
+    >div {
+      position: relative;
+      &::before,
+      &::after {
+        position: absolute;
+        bottom: 0;
+        content: '';
+        width: 56px;
+        left: -10px;
+        height: 1px;
+        background-color: @backcolor;
+      }
 
-    &::after {
-      width: 2px;
-      height: 18px;
-      transform: rotate(40deg);
-      left: unset;
-      right: 4px;
-      bottom: -2px;
+      &::after {
+        width: 2px;
+        height: 18px;
+        transform: rotate(40deg);
+        left: unset;
+        right: 4px;
+        bottom: -2px;
+      }
     }
   }
 
@@ -155,24 +173,40 @@
   }
 
   #drawer-container {
-    height: 220px;
+    height: 290px;
+
     #drawer {
       height: 130px;
+
       .frame-container {
-        background: linear-gradient(90deg, rgba(@backcolor,0.3) 0%, rgba(@backcolor, 0.56) 100%);
+        background-image: linear-gradient(90deg, rgba(@backcolor, 0.3) 0%, rgba(@backcolor, 0.56) 100%);
+
         &::before {
           content: "";
           top: 0;
           left: 0;
           width: 100%;
           height: 4px;
-          background: linear-gradient(211deg, @backcolor 0%,  rgba(@backcolor,0) 100%);
+          background-image: linear-gradient(211deg, @backcolor 0%, rgba(@backcolor, 0) 100%);
           position: absolute;
         }
       }
     }
   }
 
+  .sign {
+    >circle {
+      fill: @backcolor  !important;
+    }
+
+    #orange_red1 {
+      stop {
+        stop-color: @backcolor  !important;
+      }
+    }
+  }
+
+
   ::-webkit-scrollbar {
     width: 2px;
     height: 8px;
@@ -191,5 +225,30 @@
     -webkit-border-radius: 4px;
   }
 
+  @media screen and (max-width: 600px) {
+    .slidee {
+      .active {
+        position: relative;
+        transition: .3s ease all;
+        border-right: none !important;
+
+        &::after {
+          background-image: linear-gradient(90deg, rgba(0, 144, 255, 0) 0%, @backcolor 50%, rgba(0, 144, 255, 0) 100%);
+          content: "";
+          width: 100%;
+          height: 4px;
+          position: absolute;
+          bottom: 0;
+          top: unset;
+          left: 50%;
+          transform: translateX(-50%);
+          z-index: 99;
+        }
 
+        &::before {
+          display: none;
+        }
+      }
+    }
+  }
 }

src/clients/mobile.vue

@@ -51,21 +51,17 @@ export default {
             wx.ready(function() {
               wx.onMenuShareTimeline({
                 title: "2022年全国大众创业万众创新活动周云展览",
-                desc:
-                  "云上展厅分为序厅及五个主题展区，展出了144个项目，打造永不落幕的云端展览。",
+                desc: "云上展厅分为序厅及五个主题展区，展出了144个项目，打造永不落幕的云端展览。",
                 link: url,
-                imgUrl:
-                  "https://img-yunzhanlan.kczg.org.cn/yunzhanlan/images/logo.jpg",
+                imgUrl: "https://img-yunzhanlan.kczg.org.cn/yunzhanlan/images/logo.jpg",
                 success: function() {},
                 cancel: function() {},
               });
               wx.onMenuShareAppMessage({
                 title: "2022年全国大众创业万众创新活动周云展览",
-                desc:
-                  "云上展厅分为序厅及五个主题展区，展出了144个项目，打造永不落幕的云端展览。",
+                desc: "云上展厅分为序厅及五个主题展区，展出了144个项目，打造永不落幕的云端展览。",
                 link: url,
-                imgUrl:
-                  "https://img-yunzhanlan.kczg.org.cn/yunzhanlan/images/logo.jpg",
+                imgUrl: "https://img-yunzhanlan.kczg.org.cn/yunzhanlan/images/logo.jpg",
                 type: "",
                 dataUrl: "",
                 success: function() {},
@@ -80,10 +76,7 @@ export default {
     tongji(event) {
       if (event) {
         $.ajax({
-          url:
-            tongjiurl +
-            `?Area=yunzhanlan&incident=${event}&rnd=` +
-            Math.random(),
+          url: tongjiurl + `?Area=yunzhanlan&incident=${event}&rnd=` + Math.random(),
           type: "get",
           dataType: "json",
           contentType: "application/json",
@@ -92,34 +85,27 @@ export default {
       }
     },
   },
-  watch:{
-    '$route.name':function (newVal) {
-      console.log(newVal == 'scene');
-      console.log(newVal,'newValnewValnewValnewVal');
-      this.$bus.$emit("toggleBGM",newVal =='scene')
+  watch: {
+    "$route.name": function(newVal) {
+      console.log(newVal == "scene");
+      console.log(newVal, "newValnewValnewValnewVal");
+      this.$bus.$emit("toggleBGM", newVal == "scene");
       // newVal !='scene' ? this.$refs.vgbgm.pause() : this.$refs.vgbgm.play();
-    }
+    },
   },
   mounted() {
-  
-
     if (!this.isMobile) {
-      window.location.href = window.location.href.replace(
-        "mobile.html",
-        "index.html"
-      );
+      window.location.href = window.location.href.replace("mobile.html", "index.html");
     }
 
-    this.$nextTick(()=>{
-      document.addEventListener('WeixinJSBridgeReady', ()=>{
-      }, false);
+    this.$nextTick(() => {
+      document.addEventListener("WeixinJSBridgeReady", () => {}, false);
 
       // this.$bus.$on('toggleHomeBgm',newVal=>{
       //   console.log(newVal);
       //   !newVal ? this.$refs.vgbgm.pause() : this.$refs.vgbgm.play();
       // })
-    })
-
+    });
 
     $(document)
       .off("click touchstart")
@@ -133,6 +119,8 @@ export default {
         this.tongji("keydown");
       });
     this.wxShare();
+
+    
   },
 };
 </script>
@@ -191,7 +179,7 @@ body,
 /*横屏*/
 @media screen and (orientation: landscape) {
   .orientation-tip {
-    display: block;
+    display: none;
   }
 }
 </style>

src/data/raw.js

@@ -12,7 +12,7 @@ let region = [
   {
     id: "xuting",
     name: "序厅",
-    theme: "rgba(41, 138, 223, 1)",
+    theme: "rgba(179, 104, 216, 1)",
     desc: "大众创业万众创新",
     short: "序厅",
     company: [1, 2, 3], //序厅展位ID

src/mixins/index.js

@@ -1,67 +1,80 @@
-import Vue from 'vue'
-import browser from '@/utils/browser'
-import {u_extend} from '@/utils'
+import Vue from "vue";
+import browser from "@/utils/browser";
+import { u_extend } from "@/utils";
 
-import {
-  $showTips,$showLoading,$hideLoading
-} from '@/components/popupLayout'
+import { $showTips, $showLoading, $hideLoading } from "@/components/popupLayout";
 
+import { $showBirdView, $hideBirdView } from "@/components/bird_view/build.js";
 
-import {
-  $showBirdView,$hideBirdView
-} from '@/components/bird_view/build.js'
-
-
-Vue.prototype.$bus = new Vue()
+Vue.prototype.$bus = new Vue();
 import clickoutside from "./v-clickoutside";
 import clickwindow from "./v-clickwindow";
 
-import pagination  from '@/components/pagination'
+import pagination from "@/components/pagination";
 
-import {region} from '@/data/raw'
-window.g_lock = false
+import { region } from "@/data/raw";
+window.g_lock = false;
 
-let hotUrl = 'https://super.4dage.com/'
+let hotUrl = "https://super.4dage.com/";
 // let hotUrl = 'https://shuangchuangyunzhanlan.bj.bcebos.com/'
 
+Vue.mixin({
+  data() {
+    return {
+      isMobile: browser.mobile,
+      themes: region,
+      g_isLandscape: window.orientation === 90 || window.orientation === -90,
+    };
+  },
+  computed: {
+    theme() {
+      return this.$route.params.type;
+    }
+  },
+  mounted() {
+    if (this.isMobile) {
+    
+      // window.orientation：获取屏幕旋转方向
+      window.addEventListener("resize", () => {
+        // 正常方向或屏幕旋转180度
+        if (window.orientation === 180 || window.orientation === 0) {
+          this.g_isLandscape = false;
+        }
 
+        // 屏幕顺时钟旋转90度或屏幕逆时针旋转90度
+        if (window.orientation === 90 || window.orientation === -90) {
+          this.g_isLandscape = true;
+          this.$bus.$emit("changeShowfunc", false)
+
+          console.log(this.g_isLandscape);
 
-Vue.mixin({
-    data() {
-        return {
-          isMobile: browser.mobile,
-          themes:region,
         }
+      });
+    }
+  },
+  components: {
+    pagination,
+  },
+  directives: {
+    clickoutside: clickoutside,
+    clickwindow: clickwindow,
+  },
+  methods: {
+    $showTips,
+    $showLoading,
+    $hideLoading,
+    $showBirdView,
+    $hideBirdView,
+    u_extend,
+    g_fixUrl(url) {
+      return url.replace("https://super.4dage.com/", hotUrl);
     },
-    computed:{
-      theme(){
-        return this.$route.params.type
+    handleContent(content, fontsize = 16) {
+      if (!content) {
+        return "";
       }
+      var reg = new RegExp(" {4}", "g"); //g就是代表全部
+      return content.replace(reg, `<span style="display:inline-block;width:${fontsize * 2}px;"></span>`);
     },
-    components:{
-      pagination
-    },
-    directives: {
-      clickoutside: clickoutside,
-      clickwindow: clickwindow
-    },
-    methods: {
-      $showTips,
-      $showLoading,
-      $hideLoading,
-      $showBirdView,
-      $hideBirdView,
-      u_extend,
-      g_fixUrl(url){
-        return url.replace('https://super.4dage.com/',hotUrl)
-      },
-      handleContent(content,fontsize=16){
-        if (!content) {
-          return ''
-        }
-        var reg = new RegExp(' {4}', 'g');//g就是代表全部
-        return content.replace(reg , `<span style="display:inline-block;width:${fontsize*2}px;"></span>`);
-      }
-    }
-})
-
+  },
+});

src/pages/mobilescene/birdview/ViewOperation.vue

@@ -13,7 +13,7 @@ import browser from '@/utils/browser'
 const MAXSCALE = 1
 const MINSCALE = 1
 const RANGE = 0.1
-const wh = {width: window.innerHeight * (1920 / 1080), height: window.innerHeight}
+const wh = {width: window.innerHeight * (1335 / 1080), height: window.innerHeight}
 
 export default {
   data () {

src/pages/mobilescene/birdview/index.vue

@@ -2,13 +2,13 @@
   <div class="birdview">
     <ViewOperation>
       <div class="birdcon">
-        <img class="bd_bg" :src="require(`@/assets/images/proj2022/pc/birdviewbg.jpg`)" alt="" />
+        <img class="bd_bg" :src="require(`@/assets/images/proj2022/mobile/mobile_bg.jpg`)" alt="" />
         <div class="tag" v-for="(item, i) in themes" :key="i" :class="item.id">
-          <img @click="onClick(item)" :src="require(`@/assets/images/proj2022/bird_view/${item.id}.png`)" alt="" />
+          <img @click="onClick(item)" :src="require(`@/assets/images/proj2022/bird_view/${item.id}@2x.png`)" alt="" />
         </div>
       </div>
     </ViewOperation>
-    <img v-if="!hideClose" class="close" @click="close" :src="require('@/assets/images/proj2022/pc/cancel.png')" alt="" />
+    <!-- <img v-if="!hideClose" class="close" @click="close" :src="require('@/assets/images/proj2022/pc/cancel.png')" alt="" /> -->
   </div>
 </template>
 
@@ -50,6 +50,7 @@ export default {
   width: 100%;
   height: 100%;
   z-index: 9;
+  background-color: #7e8d62;
   .close {
     position: absolute;
     right: 20px;

src/pages/mobilescene/index.vue

@@ -6,7 +6,7 @@
     <div class="scene-con">
       <scene :tourStatus="tourStatus" />
 
-      <div v-if="showViewMode">
+      <div v-if="showViewMode && !tourStatus">
         <div :class="{ disabled: flying }" class="tab-layer">
           <div class="tabs">
             <div :class="{ active: mode === 'floorplan' }" @click="changeMode('floorplan', $event)">
@@ -25,16 +25,16 @@
         </div>
       </div>
 
-      <template v-else>
+      <template v-if="!showViewMode && !tourStatus">
         <vside :isShow="!tourStatus && showAside" @close="showAside = false" />
         <zhanxiang @showSearch="showSearch = true" v-if="isShowZL" @close="isShowZL = false" :tourStatus="tourStatus" />
         <rmenu :currentPanoid="currentPanoid" :isShowfunc="isShowfunc" :menuType="menuType" :tourStatus="tourStatus" @opencp="handlecp" />
-        <vmenu :tourStatus="tourStatus" @opencp="handlecp" />
+        <vmenu :tourStatus="tourStatus" @play="startTour" />
         <vsearch :currentPanoid="currentPanoid" @closeSearch="closeSearch" v-if="showSearch" />
       </template>
     </div>
 
-    <birdview :hideClose="true" @close="mode='',showViewMode=false" v-if="mode=='birdview'"/>
+    <birdview :hideClose="true" @close="(mode = ''), (showViewMode = false)" v-if="mode == 'birdview'" />
 
     <vhotspot v-if="hotspot" @close="hotspot = ''" :hotspot="hotspot" />
     <vpopup v-if="showpopup && cp" v-clickoutside="handleoutside">
@@ -60,7 +60,6 @@ import zhanxiang from "./zhanxiang/index.vue";
 
 import birdview from "./birdview/index.vue";
 
-
 import popup from "./popup.vue";
 import vsearch from "./search";
 import vmap from "./map";
@@ -89,7 +88,7 @@ export default {
     vhotspot,
     vbar,
     vmap,
-    birdview
+    birdview,
   },
   computed: {
     currentItem() {
@@ -118,8 +117,8 @@ export default {
       currentTheme: "",
       booth: Booth,
       showViewMode: false,
-      flying:false,
-      mode:'floorplan'
+      flying: false,
+      mode: "floorplan",
     };
   },
 
@@ -192,7 +191,7 @@ export default {
             if (data == "floorplan" || data == "dollhouse") {
               this.showViewMode = true;
               this.flying = false;
-              this.mode = data
+              this.mode = data;
               document.querySelector("#ifr").contentWindow.postMessage(
                 {
                   source: "toggleClear",
@@ -238,9 +237,15 @@ export default {
   },
 
   methods: {
+    startTour() {
+      this.$bus.$emit("ifrMessage", {
+        events: "toggleTour",
+        data: "startAndPlay",
+      });
+    },
     changeMode(data) {
-      this.mode = data
-      document.querySelector('#ifr').contentWindow.player.director.changeMode(data);
+      this.mode = data;
+      document.querySelector("#ifr").contentWindow.player.director.changeMode(data);
     },
     closeSearch(data) {
       if (data == "closeAll") {
@@ -288,7 +293,7 @@ export default {
       border-radius: 6px;
       padding: 0px 2px;
       backdrop-filter: blur(20px);
-      >div {
+      > div {
         color: #fff;
         border-radius: 6px;
         font-size: 16px;
@@ -301,7 +306,7 @@ export default {
         img {
           width: 30px;
         }
-        >span{
+        > span {
           font-size: 14px;
         }
 
@@ -310,11 +315,10 @@ export default {
           border-radius: 4px;
         }
       }
-
     }
   }
 
-  .disabled{
+  .disabled {
     opacity: 0.5;
     pointer-events: none;
   }

src/pages/mobilescene/map.vue

@@ -35,7 +35,7 @@ export default {
   overflow: hidden;
   z-index: 999;
   .mapshow {
-    width: 40vw;
+    width: 166px;
     height: 120px;
     background: rgba(0, 0, 0, 0.2);
     border-radius: 1px;
@@ -77,5 +77,6 @@ export default {
       height: 100%;
     }
   }
+
 }
-</style>
+</style>

src/pages/mobilescene/menu.vue

@@ -1,6 +1,6 @@
 <template>
   <div class="smenu">
-    <components :is="cp"/>
+    <components @play="$emit('play')" :is="cp"/>
   </div>
 </template>
 

src/pages/mobilescene/menu/exhibition.vue

@@ -8,7 +8,7 @@
         </div>
       </li>
     </ul>
-    <div class="eb-next">
+    <div v-if="!g_isLandscape" class="eb-next">
       <img @click="isFirstPage = !isFirstPage" :src="require(`@/assets/images/proj2022/mobile/zhanxiang/${isFirstPage ? 'next' : 'next_left'}.png`)" alt="" />
     </div>
   </div>
@@ -24,6 +24,9 @@ export default {
   },
   computed: {
     list() {
+      if (this.g_isLandscape) {
+        return this.themes
+      }
       return this.isFirstPage ? [...this.themes.slice(0, 5)] : [...this.themes.slice(5, 7)];
     },
   },
@@ -166,6 +169,89 @@ export default {
   }
 }
 
+/*横屏*/
+@media screen and (orientation: landscape) {
+  .smenu {
+    width: 100%;
+    .ebtm-menu {
+      position: fixed;
+      bottom: 0%;
+      left: 0%;
+      z-index: 999;
+      width: 100%;
+      height: 110px !important;
+      background-image: url("~@/assets/images/proj2022/mobile/hengping@2x.png") !important;
+      background-size: 100% auto;
+      background-repeat: no-repeat;
+      background-position: bottom left;
+      > img {
+        position: absolute;
+        top: 0;
+        left: 10px;
+        width: 60px!important;
+      }
+      .brightness {
+        &::before {
+          backdrop-filter: blur(10px) brightness(60%);
+        }
+      }
+      > ul {
+        width: 76%!important;
+        height: 50%;
+        display: flex;
+        justify-content: center;
+        align-items: flex-end!important;
+        text-align: center;
+        z-index: 9999;
+        position: absolute;
+        bottom: 6px!important;
+        left: 50%;
+        transform: translateX(-50%)!important;
+        > li {
+          display: inline-block;
+          padding: 0 0;
+          width: 44px;
+          margin: 0 20px;
+          > div {
+            > img {
+              width: 100%;
+              opacity: 0.6;
+            }
+            > span {
+              font-size: 12px;
+              color: rgba(255, 255, 255, 0.6);
+              transform: scale(0.9) translateY(-10px);
+              display: inline-block;
+            }
+          }
+          .active {
+            position: relative;
+            &::after {
+              content: "";
+              width: 20px;
+              height: 20px;
+              display: inline-block;
+              position: absolute;
+              background-color: #fff;
+              border-radius: 50%;
+              top: 10%;
+              left: 50%;
+              transform: translateX(-50%);
+              filter: blur(7px);
+            }
+            > img {
+              opacity: 1;
+            }
+            > span {
+              color: rgba(255, 255, 255, 1);
+            }
+          }
+        }
+      }
+    }
+  }
+}
+
 .likeAddAnimate-enter-active,
 .likeAddAnimate-leave-active {
   transition: all 2.5s ease;

src/pages/mobilescene/menu/func.vue

@@ -2,8 +2,8 @@
   <div class="btm-menu">
     <img @click.stop="$bus.$emit('changeMenu', 'exhibition')" :src="require(`@/assets/images/proj2022/mobile/menu@2x.png`)" alt="" />
     <ul>
-      <li v-for="(item, i) in menu" :key="i">
-        <div :class="{ active: (i == 3&&isShowHuDong) || (item.id == 'bgm' && isBgm) }" @click="onClick(item)">
+      <li v-for="(item, i) in fixMenu" :key="i">
+        <div :class="{ active: (i == 3 && isShowHuDong) || (item.id == 'bgm' && isBgm) }" @click="onClick(item)">
           <img :src="require(`@/assets/images/proj2022/mobile/menu/${item.img}.png`)" alt="" />
           <span>{{ item.name }}</span>
         </div>
@@ -40,6 +40,48 @@ let menu = [
     cp: "hudong",
   },
 ];
+let landmenu = [
+  {
+    id: "xiangmu",
+    name: "项目",
+    img: "project",
+    cp: "zhanxiang",
+  },
+  {
+    id: "daolan",
+    name: "导览",
+    img: "play",
+    cp: "daolan",
+  },
+  {
+    id: "bgm",
+    img: "music",
+    name: "音乐",
+  },
+  {
+    id: "daka",
+    name: "打卡",
+    img: "record",
+    cp: "daka",
+  },
+  {
+    id: "content",
+    name: "评论",
+    img: "message",
+    cp: "vcontent",
+  },
+  {
+    id: "zan",
+    img: "like",
+    name: "点赞",
+  },
+  {
+    id: "qrcode",
+    name: "分享",
+    img: "share",
+    cp: "qrcode",
+  },
+];
 export default {
   props: ["tourStatus"],
   data() {
@@ -56,6 +98,11 @@ export default {
       isShowHuDong: false,
     };
   },
+  computed: {
+    fixMenu() {
+      return this.g_isLandscape ? landmenu : menu;
+    },
+  },
   watch: {
     isBgm: {
       immediate: true,
@@ -63,32 +110,32 @@ export default {
         !newVal ? this.bgmAudio.pause() : this.bgmAudio.play();
       },
     },
-    isShowHuDong(newVal){
-        this.$bus.$emit("changeShowfunc", newVal);
+    isShowHuDong(newVal) {
+      this.$bus.$emit("changeShowfunc", newVal);
     },
     tourStatus(newVal) {
       if (newVal) {
-          this.isBgm = true;
+        this.isBgm = true;
       } else {
         let status = localStorage.getItem("g_bgmstatus");
         if (status === "open") {
           this.isBgm = true;
-        }else{
-        this.isBgm = false;
-
+        } else {
+          this.isBgm = false;
         }
       }
     },
   },
   beforeDestroy() {
-    this.bgmAudio.pause() 
-    this.bgmAudio = null
+    this.bgmAudio.pause();
+    this.bgmAudio = null;
   },
   methods: {
     onClick(item) {
-
-      if (item.id=='daolan') {
-        return
+      if (item.id == "daolan") {
+        this.$emit("play");
+        console.log(11111);
+        return;
       }
       if (item.id == "xiangmu") {
         this.$bus.$emit("emitShowZX", {
@@ -98,7 +145,7 @@ export default {
       }
 
       if (item.id == "interaction") {
-        this.isShowHuDong = !this.isShowHuDong
+        this.isShowHuDong = !this.isShowHuDong;
         return;
       }
 
@@ -130,7 +177,7 @@ export default {
     },
   },
   mounted() {
-     this.isBgm = true;
+    this.isBgm = false;
     localStorage.setItem("g_bgmstatus", this.isBgm ? "open" : "close");
 
     this.$nextTick(() => {
@@ -140,7 +187,7 @@ export default {
           localStorage.setItem("g_bgmstatus", this.isBgm ? "open" : "close");
         }
         this.$bus.$on("toggleBGM", (data) => {
-          console.log(data,'datadatadatadatadatadatadatadata');
+          console.log(data, "datadatadatadatadatadatadatadata");
           if (!data) {
             this.isBgm = data;
           } else {
@@ -314,4 +361,126 @@ export default {
   opacity: 0;
   visibility: hidden;
 }
+
+/*横屏*/
+@media screen and (orientation: landscape) {
+  .smenu {
+    width: 100%;
+
+    .sdaolan,
+    .stoptour {
+      position: fixed;
+      cursor: pointer;
+      bottom: 113px;
+      width: 45px;
+      height: 45px;
+      left: 14px;
+      border-radius: 50%;
+      overflow: hidden;
+      background: rgba(0, 0, 0, 0.4);
+      &::before {
+        backdrop-filter: blur(10px) brightness(60%);
+      }
+      .daolan {
+        position: absolute;
+        top: 52%;
+        left: 50%;
+        transform: translate(-50%, -50%);
+        text-align: center;
+        > img {
+          width: 20px;
+        }
+      }
+    }
+    .stoptour {
+      .daolan {
+        position: absolute;
+        top: 54%;
+        left: 50%;
+        transform: translate(-50%, -50%);
+        text-align: center;
+        > img {
+          width: 24px;
+        }
+      }
+    }
+
+    .btm-menu {
+      position: fixed;
+      bottom: 0%;
+      left: 0%;
+      z-index: 999;
+      width: 100%;
+      height: 110px !important;
+      background-image: url("~@/assets/images/proj2022/mobile/hengping@2x.png") !important;
+      background-size: 100% auto;
+      background-repeat: no-repeat;
+      background-position: bottom left;
+      > img {
+        position: absolute;
+        top: 0;
+        left: 10px;
+        width: 60px!important;
+      }
+      .brightness {
+        &::before {
+          backdrop-filter: blur(10px) brightness(60%);
+        }
+      }
+      > ul {
+        width: 76%!important;
+        height: 50%;
+        display: flex;
+        justify-content: flex-end;
+        align-items: flex-end!important;
+        text-align: center;
+        z-index: 9999;
+        position: absolute;
+        bottom: 0!important;
+        left: 50%;
+        transform: translateX(-50%)!important;
+        > li {
+          display: inline-block;
+          padding: 0 0;
+          width: 10%;
+          margin: 0 5%;
+          > div {
+            > img {
+              width: 100%;
+              opacity: 0.6;
+            }
+            > span {
+              font-size: 12px;
+              color: rgba(255, 255, 255, 0.6);
+              transform: scale(0.9) translateY(-10px);
+              display: inline-block;
+            }
+          }
+          .active {
+            position: relative;
+            &::after {
+              content: "";
+              width: 20px;
+              height: 20px;
+              display: inline-block;
+              position: absolute;
+              background-color: #fff;
+              border-radius: 50%;
+              top: 10%;
+              left: 50%;
+              transform: translateX(-50%);
+              filter: blur(7px);
+            }
+            > img {
+              opacity: 1;
+            }
+            > span {
+              color: rgba(255, 255, 255, 1);
+            }
+          }
+        }
+      }
+    }
+  }
+}
 </style>

src/pages/mobilescene/raside/menu.vue

@@ -178,4 +178,12 @@ export default {
     }
   }
 }
+
+@media screen and (orientation: landscape) {
+.rmenu {
+  bottom: 110px;
+  .control {
+  }
+}
+}
 </style>

src/pages/mobilescene/scene.vue

@@ -68,6 +68,13 @@ export default {
   watch: {
     theme(newVal) {
       let currentRegion = region.find((item) => item.id == newVal);
+      this.$refs.ifr.contentWindow.postMessage(
+        {
+          source: "changeTheme",
+          data: newVal,
+        },
+        "*"
+      );
       window.g_lock = true;
       if (this.$route.params.isjump == "yes") {
         this.$refs.ifr.contentWindow.postMessage(

src/pages/mobilescene/zhanxiang/index.vue

@@ -9,9 +9,11 @@
     <div class="zhan-con" ref="bgsw" v-swiper:mySwiper="swiperOptions">
       <ul class="swiper-wrapper">
         <li @click="onClick(item)" class="swiper-slide" v-for="(item, i) in zhanxiangData.company" :key="i">
-          <img :src="`zhanxiang/images/${theme}/${item.img}`" alt="" />
+          <div class="img">
+            <img :src="`zhanxiang/images/${theme}/${item.img}`" alt="" />
+          </div>
           <div>
-            <h3>{{ zhanxiangData.name }}</h3>
+            <h3 class="primarytxt">{{ zhanxiangData.name }}</h3>
             <span v-html="item.name"></span>
           </div>
         </li>
@@ -27,10 +29,10 @@ import "swiper/css/swiper.css";
 import { Booth } from "@/data/booth.js";
 
 export default {
-  data(){
-    return{
-      searchkey:''
-    }
+  data() {
+    return {
+      searchkey: "",
+    };
   },
   methods: {
     nextsw() {
@@ -38,18 +40,18 @@ export default {
     },
     back() {
       this.$bus.$emit("emitShowZX", {
-          show: false,
-        });
+        show: false,
+      });
     },
-    onClick(data){
-      this.$bus.$emit('ifrMessage',{
-        events:'flyToPano',
-        data:data
-      })
-      this.$emit('close')
+    onClick(data) {
+      this.$bus.$emit("ifrMessage", {
+        events: "flyToPano",
+        data: data,
+      });
+      this.$emit("close");
     },
     search() {
-      this.$emit('showSearch',true)
+      this.$emit("showSearch", true);
       // let idx = this.zhanxiangData.company.findIndex((item) => item.name.indexOf(this.searchkey) > -1)
       // this.swiper.slideToLoop(idx);
     },
@@ -65,43 +67,54 @@ export default {
       return Booth.find((item) => item.id == this.theme);
     },
     swiperOptions() {
+      let that = this;
       return {
         watchSlidesProgress: true,
+        effect: that.g_isLandscape ? "coverflow" : "slide",
         slidesPerView: "auto",
         centeredSlides: true,
+        coverflowEffect: {
+          rotate: 0,
+          stretch: 124,
+          depth: 50,
+          modifier: 2.6,
+          slideShadows: false,
+        },
         loop: false,
-        on: {
-          progress: function() {
-            for (let i = 0; i < this.slides.length; i++) {
-              var slide = this.slides.eq(i);
-              var slideProgress = this.slides[i].progress;
-              let modify = 1;
-              let fixY = 0;
+        on: that.g_isLandscape
+          ? {}
+          : {
+              progress: function() {
+                for (let i = 0; i < this.slides.length; i++) {
+                  var slide = this.slides.eq(i);
+                  var slideProgress = this.slides[i].progress;
+                  let modify = 1;
+                  let fixY = 0;
 
-              if (Math.abs(slideProgress) > 1) {
-                modify = (Math.abs(slideProgress) - 1) * 0.3 + 1;
-              }
-              let translateX = slideProgress * modify * 120 + "px";
-              let translateY = fixY + -Math.abs(slideProgress) * 35 + "px";
+                  if (Math.abs(slideProgress) > 1) {
+                    modify = (Math.abs(slideProgress) - 1) * 0.3 + 1;
+                  }
+                  let translateX = slideProgress * modify * 120 + "px";
+                  let translateY = fixY + (that.g_isLandscape ? Math.abs(slideProgress) : -Math.abs(slideProgress)) * 35 + "px";
 
-              let zIndex = 999 - Math.abs(Math.round(10 * slideProgress));
-              let opacity = 1 - Math.abs(slideProgress) / 10;
+                  let zIndex = 999 - Math.abs(Math.round(10 * slideProgress));
+                  let opacity = 1 - Math.abs(slideProgress) / 10;
 
-              slide.transform(`translateX(${translateX}) translateY(${translateY})`);
-              slide.css("zIndex", zIndex);
-              slide.css("opacity", opacity);
-              if (Math.abs(slideProgress) > 3) {
-                slide.css("opacity", 0);
-              }
-            }
-          },
-          setTransition: function(transition) {
-            for (var i = 0; i < this.slides.length; i++) {
-              var slide = this.slides.eq(i);
-              slide.transition(transition);
-            }
-          },
-        },
+                  slide.transform(`translateX(${translateX}) translateY(${translateY})`);
+                  slide.css("zIndex", zIndex);
+                  slide.css("opacity", opacity);
+                  if (Math.abs(slideProgress) > 3) {
+                    slide.css("opacity", 0);
+                  }
+                }
+              },
+              setTransition: function(transition) {
+                for (var i = 0; i < this.slides.length; i++) {
+                  var slide = this.slides.eq(i);
+                  slide.transition(transition);
+                }
+              },
+            },
       };
     },
   },
@@ -161,9 +174,15 @@ export default {
         background-size: 100% auto;
         background-position: bottom left;
         background-repeat: no-repeat;
-        > img {
+        .img {
           width: 100%;
+          margin-top: 0;
+
+          > img {
+            width: 100%;
+          }
         }
+
         > div {
           color: #000;
           text-align: center;
@@ -183,4 +202,109 @@ export default {
     }
   }
 }
+
+@media screen and (orientation: landscape) {
+  .zhanxiang {
+    position: fixed;
+    z-index: 999999;
+    width: 100%;
+    height: 100%;
+    top: 0;
+    right: 0;
+    bottom: 0;
+    left: 0;
+    background-color: rgba(255, 255, 255, 0.5);
+    backdrop-filter: blur(20px);
+    .z-bar {
+      height: 60px;
+      width: 100%;
+      background-color: rgba(0, 0, 0, 0.6);
+      backdrop-filter: blur(12px) brightness(100%);
+      display: flex;
+      justify-content: space-between;
+      align-items: center;
+      padding: 0 10px;
+      > img {
+        width: 50px;
+        flex-shrink: 0;
+      }
+      > span {
+        text-align: left;
+        display: inline-block;
+        flex: auto;
+        font-size: 20px;
+        color: rgba(255, 255, 255, 0.5);
+      }
+    }
+
+    .zhan-con {
+      width: 100%;
+      position: relative;
+      height: calc(100vh - 60px);
+      padding-bottom: 0;
+      > ul {
+        width: 100%;
+        align-items: center;
+        > li {
+          width: 58%;
+          max-height: 90%;
+          padding: 16px;
+          background-color: rgba(255, 255, 255, 1);
+          box-shadow: 0px 3px 6px 1px rgba(0, 0, 0, 0.16);
+          background-image: url("~@/assets/images/proj2022/mobile/bg_shu.png");
+          background-size: 100% auto;
+          background-position: bottom left;
+          background-repeat: no-repeat;
+          display: flex;
+          .img {
+            flex: 2;
+            width: auto;
+            text-align: center;
+            position: relative;
+            overflow: hidden;
+            > img {
+              position: absolute;
+              left: 50%;
+              transform: translateX(-50%);
+              width: auto;
+              height: 100%;
+            }
+          }
+
+          > div {
+            color: #000;
+            text-align: center;
+            margin-top: 0;
+            width: 24%;
+            flex-shrink: 0;
+            margin-left: 16px;
+            > h3 {
+              position: absolute;
+              top: 16px;
+              right: 16px;
+              margin-left: 20px;
+              font-size: 20px;
+              writing-mode: vertical-lr;
+              margin-bottom: 10px;
+              display: inline-block;
+              text-align: left;
+              height: 100%;
+            }
+            > span {
+              font-size: 18px;
+              line-height: 1.2;
+              margin-left: 10px;
+              writing-mode: vertical-lr;
+              text-align: left;
+              display: inline-block;
+              height: 100%;
+              width: 100%;
+              letter-spacing: 2px;
+            }
+          }
+        }
+      }
+    }
+  }
+}
 </style>

src/pages/scene/index.vue

@@ -6,20 +6,20 @@
     </div>
 
     <div class="scene-con" :class="{ showscene: showAll }">
-      <template v-if="!showViewMode&&!tourStatus">
-      <vside
-        @currentPano="
-          (data) => {
-            currentPano = data;
-          }
-        "
-        v-show="!tourStatus && !isClear"
-        :currentPanoid="currentPanoid"
-      />
-      <vmenu :currentPanoid="currentPanoid" v-show="!tourStatus && !isClear" :tourStatus="tourStatus" @opencp="handlecp" />
-      <zhanxiang :currentPanoid="currentPanoid" v-show="!tourStatus && !isClear" :zxdata="zhanxiangData" :class="{ zxshow: isShowZX }" />
+      <template v-if="!showViewMode && !tourStatus">
+        <vside
+          @currentPano="
+            (data) => {
+              currentPano = data;
+            }
+          "
+          v-show="!tourStatus && !isClear"
+          :currentPanoid="currentPanoid"
+        />
+        <vmenu :currentPanoid="currentPanoid" v-show="!tourStatus && !isClear" :tourStatus="tourStatus" @opencp="handlecp" />
+        <zhanxiang :currentPanoid="currentPanoid" v-show="!tourStatus && !isClear" :zxdata="zhanxiangData" :class="{ zxshow: isShowZX }" />
 
-      <img v-if="isClear" @click.stop="clicktoClear" class="isClear" :src="require('@/assets/images/proj2022/pc/reset@2x.png')" alt="" />
+        <img v-if="isClear" @click.stop="clicktoClear" class="isClear" :src="require('@/assets/images/proj2022/pc/reset@2x.png')" alt="" />
       </template>
 
       <scene v-if="showScene" />

src/pages/scene/menu.vue

@@ -4,14 +4,19 @@
     <div v-show="!showsearch">
       <rmenu :tourStatus="tourStatus" @play="toggle" />
 
-      <div class="fandb">
-        <img @click.stop="onClickNavigate('up')" :src="require(`@/assets/images/proj2022/pc/up.png`)" alt="" />
-        <img :src="require(`@/assets/images/proj2022/pc/line.png`)" alt="" />
-        <img @click.stop="onClickNavigate('down')" :src="require(`@/assets/images/proj2022/pc/down.png`)" alt="" />
-      </div>
-
       <div class="smenu" :class="{ smtop: isShowZX }">
         <template>
+          <div class="fandb">
+            <div @click.stop="onClickNavigate('up')" >
+              <img :src="require(`@/assets/images/proj2022/pc/last.png`)" alt="" />
+              <span>查看上一展项</span>
+            </div>
+            <span class="line"></span>
+            <div @click.stop="onClickNavigate('down')">
+              <span>查看下一展项</span>
+              <img  :src="require(`@/assets/images/proj2022/pc/next.png`)" alt="" />
+            </div>
+          </div>
           <ul>
             <li v-for="(item, i) in menu" :key="i">
               <div @click="onClick(item)">
@@ -131,7 +136,7 @@ export default {
       if (currentIdx > -1) {
         if (currentIdx == 0) {
           zhanqu = findPrevItem(Booth, zhanqu);
-          prevPanoItem = zhanqu.company[zhanqu.company.length-1];
+          prevPanoItem = zhanqu.company[zhanqu.company.length - 1];
         } else {
           currentIdx -= 1;
           prevPanoItem = zhanqu.company[currentIdx];
@@ -160,7 +165,6 @@ export default {
       this.currentActive = item;
     },
     onClickNavigate(type) {
-      
       if (type == "up") {
         this.$bus.$emit("ifrMessage", {
           events: "flyToPano",
@@ -215,28 +219,41 @@ export default {
   flex-direction: column;
   align-items: flex-end;
 
-  .fandb {
-    margin-top: 30px;
-    margin-right: 6px;
-    border-radius: 60px;
-    widows: 60px;
-    height: 134px;
-    backdrop-filter: blur(15px) brightness(60%);
-    display: flex;
-    flex-direction: column;
-    justify-content: space-around;
-    padding: 0 10px;
-    box-shadow: -1px -2px 2px rgba(255, 255, 255, 0.9);
-    > img {
-      cursor: pointer;
-    }
-  }
-
   .smenu {
     bottom: 22px;
-    right: 15px;
+    left: 0;
     position: fixed;
     transition: 0.3s ease all;
+    width: 100%;
+    .fandb {
+      border-radius: 60px;
+      width: 285px;
+      height: 45px;
+      position: absolute;
+      left: 50%;
+      bottom: 0;
+      transform: translateX(-50%);
+      border-radius: 31px;
+      backdrop-filter: blur(6px);
+      display: flex;
+      justify-content: center;
+      align-items: center;
+      .line {
+        display: inline-block;
+        width: 1px;
+        height: 45px;
+        background: linear-gradient(180deg, rgba(255, 255, 255, 0.5) 0%, #ffffff 48%, rgba(255, 255, 255, 0.5) 100%);
+      }
+      > div {
+        display: flex;
+        cursor: pointer;
+        width: 49%;
+        justify-content: center;
+        align-items: center;
+        cursor: pointer;
+      }
+    }
+
     > ul {
       background-repeat: no-repeat;
       background-size: 100% 100%;
@@ -245,6 +262,9 @@ export default {
       justify-content: center;
       align-items: center;
       text-align: center;
+      position: absolute;
+      right: 10px;
+      bottom: 0;
       > li {
         display: inline-block;
         padding: 0 8px;

src/pages/scene/raside/rmenu.vue

@@ -67,7 +67,7 @@ export default {
     },
   },
   mounted() {
-    this.isBgm = true;
+    this.isBgm = false;
     localStorage.setItem("g_bgmstatus", this.isBgm ? "open" : "close");
 
     this.$nextTick(() => {

src/pages/scenePage/index.vue

@@ -28,7 +28,7 @@
         <v-menu class="disable" />
 
         <!-- 导览 -->
-        <v-guide :class="{ showGuide: isTour }" />
+        <v-guide  :themescene="themescene" :isTour="isTour" :class="{ showGuide: isTour }" />
 
         <!-- logo -->
         <div
@@ -59,7 +59,7 @@
       <v-other />
     </div>
 
-    <vmap v-if="!toggleClear" :flying="flying" :themescene="themescene" />
+    <vmap v-show="!toggleClear" :flying="flying" :themescene="themescene" />
   </div>
 </template>
 
@@ -321,4 +321,9 @@ export default {
 .showGuide {
   bottom: 0 !important;
 }
+
+
+.hiddenzhangxiang{
+  bottom: -160px!important;
+}
 </style>

src/pages/scenePage/views/gui/guide.vue

@@ -1,12 +1,20 @@
 <template>
-  <div id="drawer-container">
-    <div title="暂停" @click="stop()" class="stoptour strmactive">
-      <img :src="require(`@/assets/images/proj2022/pc/pause.png`)" />
+  <div id="drawer-container" :class="{hiddenzhangxiang:!isZhankai&&isTour}" @touchstart.stop @click.stop>
+    <div title="暂停" class="stoptour strmactive">
+      <template v-if="!isMobile">
+        <div  @click.stop="stop()">
+          <img :src="require(`@/assets/images/proj2022/pc/pause.png`)" />
+        </div>
+        <div >
+          <img @click.stop="isZhankai=!isZhankai" :src="require(`@/assets/images/proj2022/pc/${!isZhankai?'zhankai_1':'shouqi'}.png`)" />
+        </div>
+      </template>
+      <img v-else  @click.stop="stop()" :src="require(`@/assets/images/proj2022/mobile/pause_${themescene}.png`)" />
     </div>
     <div id="drawer" class="fullWidth open">
       <div class="frame-container">
         <div id="scrollFrame" class="frame">
-          <ul id="thumb-container" class="slidee"></ul>
+          <ul id="thumb-container" class="slidee"  @touchstart.stop @click.stop ></ul>
         </div>
         <div class="scrollbar" id="scroller">
           <div class="handle"></div>
@@ -25,9 +33,16 @@
 
 <script>
 export default {
+  props: ["themescene",'isTour'],
+  data(){
+    return {
+     isZhankai:true,
+    }
+  },
   methods: {
     stop() {
-      window.player.director.stopTour()
+      window.player.director.stopTour();
+      this.isZhankai=true
     },
   },
 };
@@ -35,11 +50,11 @@ export default {
 
 <style lang="less">
 #drawer-container {
-  height: 220px;
+  height: 290px;
   #drawer {
     height: 130px;
     .frame-container {
-      background: linear-gradient(90deg, rgba(216, 66, 66, 0.3) 0%, rgba(206, 76, 76, 0.56) 100%);
+      background-image: linear-gradient(90deg, rgba(216, 66, 66, 0.3) 0%, rgba(206, 76, 76, 0.56) 100%);
       position: relative;
       &::before {
         content: "";
@@ -47,7 +62,7 @@ export default {
         left: 0;
         width: 100%;
         height: 4px;
-        background: linear-gradient(211deg, #bb2727 0%, rgba(255, 46, 45, 0) 100%);
+        background-image: linear-gradient(211deg, #bb2727 0%, rgba(255, 46, 45, 0) 100%);
         position: absolute;
       }
       .frame {
@@ -117,10 +132,116 @@ export default {
     cursor: pointer;
     pointer-events: auto;
     display: inline-block;
-    >img{
+    > div {
       margin-left: 10px;
       width: 58px;
       height: 58px;
+      margin-bottom: 10px;
+
+      > img {
+        width: 100%;
+        height: 100%;
+      }
+    }
+  }
+}
+
+
+@media screen and (max-width: 600px) {
+  #drawer-container {
+    height: auto !important;
+    overflow: inherit !important;
+    #drawer {
+      height: auto !important;
+      .frame-container {
+        background-image: url("~@/assets/images/proj2022/mobile/daolan_shu@2x.png") !important;
+        position: relative;
+        background-size: 100% 100%;
+        background-repeat: no-repeat;
+        background-position: bottom center;
+        &::after,
+        &::before {
+          display: none !important;
+        }
+        .frame {
+          transform: translateX(20vw);
+          border-top-left-radius: 24px;
+          width: 80vw !important;
+          .slidee {
+            > li {
+              display: inline-block;
+              width: 100px;
+              height: 60px;
+              border-radius: 5px;
+              position: relative;
+              margin: 0 4px;
+              cursor: pointer;
+              border-right: 4px solid transparent;
+              border-radius: 5px;
+              > img {
+                width: 100%;
+                height: 100%;
+              }
+              &::after {
+                content: "";
+                position: absolute;
+                width: 100%;
+                height: 100%;
+                left: 0;
+                top: 0;
+                z-index: 8;
+                pointer-events: none;
+                background: linear-gradient(0, rgba(0, 0, 0, 0.7) 0%, rgba(0, 0, 0, 0.3) 100%);
+              }
+              &.active {
+                &::after {
+                  display: none;
+                }
+                .overlay {
+                  color: rgba(255, 255, 255, 1);
+                }
+              }
+              .overlay {
+                color: rgba(255, 255, 255, 0.5);
+                z-index: 9;
+                font-size: 12px !important;
+                padding: 0;
+              }
+              i {
+                font-size: 12px;
+                position: absolute;
+                top: -6%;
+                right: -18%;
+                background-color: rgba(0, 0, 0, 0.4);
+                display: block;
+                transform: rotate(45deg);
+                width: 80px;
+                height: 34px;
+                line-height: 40px;
+                text-align: center;
+                padding-top: 4px;
+                z-index: 9;
+              }
+            }
+          }
+        }
+      }
+      .scrollbar {
+        background: rgba(0, 0, 0, 0);
+        height: 4px;
+      }
+    }
+    .stoptour {
+      cursor: pointer;
+      pointer-events: auto;
+      display: inline-block;
+      position: absolute;
+      bottom: 58px;
+      left: 0;
+      &::before,
+      &::after {
+        display: none !important;
+      }
     }
   }
 }