Merge branch 'master' of http://face3d.4dage.com:7005/chenzimin2/ZGZQBWG

scene/public/static/css/css/main.css

@@ -1870,7 +1870,7 @@ hr {
     }
 }
 
-@media only screen and (max-width: 487px), (max-height:450px) {
+@media only screen and (max-width: 487px), (max-height:450px),(orientation: portrait) {
     .vr-popup.desktop {
         width: 100%;
         height: 100%;
@@ -3095,7 +3095,7 @@ ul{
     font-size: 13px
 }
 
-@media only screen and (max-width: 487px), (max-height:487px) {
+@media only screen and (max-width: 487px), (max-height:487px),(orientation: portrait) {
     #terms-modal {
         z-index: 100;
         left: 0;
@@ -3222,7 +3222,7 @@ ul{
     height: auto
 }
 
-@media only screen and (max-width: 600px), (max-height:600px) {
+@media only screen and (max-width: 600px),(orientation: portrait), (max-height:600px) {
     #quick-logo img {
         width: 150px;
         height: auto
@@ -4340,7 +4340,7 @@ a.hasHover:hover, a:active {
     }
 }
 
-@media only screen and (max-width: 487px), (max-height:487px) {
+@media only screen and (max-width: 487px), (max-height:487px),(orientation: portrait) {
     #thumb-container .thumbImg img, .frame {
         height: 77px
     }
@@ -6198,7 +6198,7 @@ a.hasHover.tag-link:hover {
     display: none
 }
 
-@media only screen and (max-width: 487px), (max-height:360px) {
+@media only screen and (max-width: 487px), (max-height:360px),(orientation: portrait) {
     #share-modal {
         position: fixed;
         top: 0;
@@ -6955,7 +6955,7 @@ a.hasHover.tag-link:hover {
     background-color: rgba(0, 0, 0, 0.5);
 }
 
-@media only screen and (max-width: 1000px) {
+@media only screen and (max-width: 1000px),(orientation: portrait) {
     .progressbar {
         width: 60%;
     }
@@ -6989,7 +6989,7 @@ a.hasHover.tag-link:hover {
     }
 }
 
-@media only screen and (max-width: 600px) {
+@media only screen and (max-width: 600px),(orientation: portrait) {
     #gui-modes-map>div[rel]:hover, #play:hover {
         background: transparent;
     }

scene/public/static/css/css/sceen2.css

@@ -1868,7 +1868,7 @@ hr {
   }
 }
 
-@media only screen and (max-width: 487px),(max-height:450px) {
+@media only screen and (max-width: 487px),(max-height:450px),(orientation: portrait) {
   .vr-popup.desktop {
       width:100%;
       height: 100%;
@@ -3034,7 +3034,7 @@ body,html {
   font-size: 13px
 }
 
-@media only screen and (max-width: 487px),(max-height:487px) {
+@media only screen and (max-width: 487px),(max-height:487px),(orientation: portrait) {
   #terms-modal {
       z-index:100;
       left: 0;
@@ -3161,7 +3161,7 @@ body,html {
   height: auto
 }
 
-@media only screen and (max-width: 600px),(max-height:600px) {
+@media only screen and (max-width: 600px),(orientation: portrait),(max-height:600px) {
   #quick-logo img {
       width:150px;
       height: auto
@@ -4261,7 +4261,7 @@ a.hasHover:hover,a:active {
   }
 }
 
-@media only screen and (max-width: 487px),(max-height:487px) {
+@media only screen and (max-width: 487px),(max-height:487px),(orientation: portrait) {
   #thumb-container .thumbImg img,.frame {
       height:77px
   }
@@ -6142,7 +6142,7 @@ a.hasHover.tag-link:hover {
   display: none
 }
 
-@media only screen and (max-width: 487px),(max-height:360px) {
+@media only screen and (max-width: 487px),(max-height:360px),(orientation: portrait) {
   #share-modal {
       position:fixed;
       top: 0;
@@ -6995,7 +6995,7 @@ background-size: 100% 100%;
       justify-content:center;
   }
 }
-@media only screen and (max-width: 600px) {
+@media only screen and (max-width: 600px),(orientation: portrait) {
   /* #gui-modes-map >div[rel]:hover,#play:hover{ background:transparent;  } */
   .pinBottom.right .ui-icon{ margin-right: 5px; }
   .pinBottom.right,.pinBottom.left{bottom: 5px;}

scene/public/static/css/main.css

@@ -2175,7 +2175,7 @@ j .vr-popup.tinier.supported.landscape.details-page .inner {
 }
 
 @media only screen and (max-width: 487px),
-(max-height:450px) {
+(max-height:450px),(orientation: portrait) {
     .vr-popup.desktop {
         width: 100%;
         height: 100%;
@@ -3535,7 +3535,7 @@ ul {
 }
 
 @media only screen and (max-width: 487px),
-(max-height:487px) {
+(max-height:487px),(orientation: portrait) {
     #terms-modal {
         z-index: 100;
         left: 0;
@@ -3667,6 +3667,7 @@ ul {
 }
 
 @media only screen and (max-width: 600px),
+(orientation: portrait),
 (max-height:600px) {
     #quick-logo img {
         width: 150px;
@@ -4847,7 +4848,7 @@ a.tag-link {
 }
 
 @media only screen and (max-width: 487px),
-(max-height:487px) {
+(max-height:487px),(orientation: portrait) {
     .frame {
         height: 107px;
         display: block;
@@ -6941,7 +6942,7 @@ a.hasHover.tag-link:hover {
 }
 
 @media only screen and (max-width: 487px),
-(max-height:360px) {
+(max-height:360px),(orientation: portrait) {
     #share-modal {
         position: fixed;
         top: 0;
@@ -7754,7 +7755,7 @@ a.hasHover.tag-link:hover {
     background-color: rgba(0, 0, 0, 0.5);
 }
 
-@media only screen and (max-width: 1000px) {
+@media only screen and (max-width: 1000px),(orientation: portrait) {
     .progressbar {
         width: 60%;
     }
@@ -7797,7 +7798,7 @@ a.hasHover.tag-link:hover {
     }
 }
 
-@media only screen and (max-width: 600px) {
+@media only screen and (max-width: 600px),(orientation: portrait) {
 
     #gui-modes-map>div[rel]:hover,
     #play:hover {

scene/public/static/css/sceen2.css

@@ -2184,7 +2184,7 @@ j .vr-popup.tinier.supported.landscape.details-page .inner {
 }
 
 @media only screen and (max-width: 487px),
-(max-height:450px) {
+(max-height:450px),(orientation: portrait) {
   .vr-popup.desktop {
     width: 100%;
     height: 100%;
@@ -3434,7 +3434,7 @@ html {
 }
 
 @media only screen and (max-width: 487px),
-(max-height:487px) {
+(max-height:487px),(orientation: portrait) {
   #terms-modal {
     z-index: 100;
     left: 0;
@@ -3566,6 +3566,7 @@ html {
 }
 
 @media only screen and (max-width: 600px),
+(orientation: portrait),
 (max-height:600px) {
   #quick-logo img {
     width: 150px;
@@ -4777,7 +4778,7 @@ a.tag-link {
 }
 
 @media only screen and (max-width: 487px),
-(max-height:487px) {
+(max-height:487px),(orientation: portrait) {
 
   #thumb-container .thumbImg img,
   .frame {
@@ -6773,7 +6774,7 @@ a.hasHover.tag-link:hover {
 }
 
 @media only screen and (max-width: 487px),
-(max-height:360px) {
+(max-height:360px),(orientation: portrait) {
   #share-modal {
     position: fixed;
     top: 0;
@@ -7747,7 +7748,7 @@ span.nav-icon-name {
   }
 }
 
-@media only screen and (max-width: 600px) {
+@media only screen and (max-width: 600px),(orientation: portrait) {
 
   /* #gui-modes-map >div[rel]:hover,#play:hover{ background:transparent;  } */
   .pinBottom.right .ui-icon {

scene/public/static/js/loadCAD.js

@@ -31,7 +31,7 @@ window.grendCAD = (function grendCAD() {
     let $name = document.createElement("div");
 
     $name.className = "name";
-    $name.textContent = "当前位置：元大都展";
+    $name.textContent = "";
     $layer.appendChild($name);
 
     $layer.className = "cad";
@@ -43,7 +43,7 @@ window.grendCAD = (function grendCAD() {
       .cad {
         position: absolute;
         right: 20px;
-        top: 20px;
+        top: 10%;
         width: 180px;
         height: 180px;
         background:  rgba(56,56,56,0.56);
@@ -66,13 +66,13 @@ window.grendCAD = (function grendCAD() {
 
      
 
-      @media only screen and (max-width: 1000px) { 
+      @media only screen and (max-width: 1000px),(orientation: portrait) { 
         .cad {
           position: absolute;
           left:auto;
           transform: translate(0, 0);
           right: 10px;
-          top: 10px;
+          top: 10%;
           width: 120px;
           height: 120px;
           background:  rgba(56,56,56,0.56);

scene/src/assets/style/myBase.css

@@ -18,7 +18,7 @@
 }
 
 #thumb-container {
-  width: auto !important;
+  /* width: auto !important; */
 }
 
 #thumb-container .thumbImg .overlay {
@@ -71,7 +71,7 @@
   display: none !important;
 }
 
-@media screen and (max-width: 1000px) {
+@media screen and (max-width: 1000px),(orientation: portrait) {
   #drawer.open.noScroll {
     height: 118px !important;
   }
@@ -97,7 +97,7 @@
   }
 
   #thumb-container {
-    width: 590px !important;
+    /* width: 590px !important; */
   }
 
 }

scene/src/assets/style/public.css

@@ -79,7 +79,7 @@ input:-ms-input-placeholder {
   height: 100%;
   margin-top: -20px;
 }
-@media only screen and (max-width: 487px), (max-height: 487px) {
+@media only screen and (max-width: 487px), (max-height: 487px),(orientation: portrait) {
   .cad {
     position: fixed;
     top: 38%;

scene/src/components/info/index.vue

@@ -106,7 +106,7 @@ export default {
   }
 }
 
-@media screen and (max-width: 1000px) {
+@media screen and (max-width: 1000px),(orientation: portrait) {
   .info-box {
     // height: 58px;
     width: 70%;

scene/src/views/gui/components/hotList.vue

@@ -127,7 +127,7 @@ export default {
     }
   }
 }
-@media screen and (max-width: 1000px) {
+@media screen and (max-width: 1000px),(orientation: portrait) {
   .hotList {
     width: 100vw;
     height: 60%;

scene/src/views/gui/components/share.vue

@@ -7,8 +7,7 @@
     <div class="main" id="canvsBox" v-else>
       <!-- 数字 -->
       <div class="txt">
-        第&nbsp;&nbsp;<span>{{ num }}</span
-        >&nbsp;&nbsp;位参与者
+        第&nbsp;&nbsp;<span>{{ num }}</span>&nbsp;&nbsp;位参与者
       </div>
       <!-- 二维码 -->
       <div class="code">
@@ -16,12 +15,8 @@
       </div>
     </div>
     <!-- 加载中 -->
-    <div
-      class="logingBox"
-      v-loading="!isOk"
-      element-loading-text="生成海报中"
-      element-loading-background="rgba(0, 0, 0, 0.8)"
-    ></div>
+    <div class="logingBox" v-loading="!isOk" element-loading-text="生成海报中" element-loading-background="rgba(0, 0, 0, 0.8)">
+    </div>
     <div class="close" @click="$emit('close')">
       <img src="../../../assets/img/close.png" alt="" />
     </div>
@@ -73,14 +68,14 @@ export default {
       console.log(e);
     }
   },
-  mounted() {},
-  beforeCreate() {}, //生命周期 - 创建之前
-  beforeMount() {}, //生命周期 - 挂载之前
-  beforeUpdate() {}, //生命周期 - 更新之前
-  updated() {}, //生命周期 - 更新之后
-  beforeDestroy() {}, //生命周期 - 销毁之前
-  destroyed() {}, //生命周期 - 销毁完成
-  activated() {}, //如果页面有keep-alive缓存功能，这个函数会触发
+  mounted() { },
+  beforeCreate() { }, //生命周期 - 创建之前
+  beforeMount() { }, //生命周期 - 挂载之前
+  beforeUpdate() { }, //生命周期 - 更新之前
+  updated() { }, //生命周期 - 更新之后
+  beforeDestroy() { }, //生命周期 - 销毁之前
+  destroyed() { }, //生命周期 - 销毁完成
+  activated() { }, //如果页面有keep-alive缓存功能，这个函数会触发
 };
 </script>
 <style lang='less' scoped>
@@ -91,15 +86,18 @@ export default {
   transform: translate(-50%, -50%);
   width: 542px;
   height: 820px;
+
   .imgBox {
     width: 100%;
     height: 100%;
     position: relative;
-    & > img {
+
+    &>img {
       width: 100%;
       height: 100%;
     }
-    & > p {
+
+    &>p {
       position: absolute;
       bottom: 10px;
       right: 34px;
@@ -109,6 +107,7 @@ export default {
       text-align: center;
     }
   }
+
   .logingBox {
     position: absolute;
     top: 0;
@@ -117,33 +116,39 @@ export default {
     height: 100%;
     z-index: 99;
   }
+
   .main {
     width: 100%;
     height: 100%;
     background-image: url("../../../assets/img/open/bg-share.jpg");
     background-size: 100% 100%;
     position: relative;
+
     .txt {
       position: absolute;
       bottom: 185px;
       right: 30px;
       color: #d6b970;
-      & > span {
+
+      &>span {
         font-size: 36px;
         font-weight: 700;
       }
     }
+
     .code {
       position: absolute;
       bottom: 60px;
       right: 34px;
       width: 80px;
-      & > img {
+
+      &>img {
         border-radius: 6px;
         width: 80px;
       }
     }
   }
+
   .close {
     z-index: 99;
     position: absolute;
@@ -152,14 +157,17 @@ export default {
     cursor: pointer;
   }
 }
+
 // 移动端
-@media screen and (max-width: 1000px) {
+@media screen and (max-width: 1000px),
+(orientation: portrait) {
   .share {
     max-width: 500px;
     width: 90%;
     height: 90%;
+
     .imgBox {
-      & > p {
+      &>p {
         font-size: 12px;
         bottom: 10px;
         width: 120px;
@@ -167,6 +175,7 @@ export default {
         text-align: right;
       }
     }
+
     .main {
       // background-image: url("../../../assets/img/open/bg-shareM.jpg");
       // background-size: 100% 100%;
@@ -174,19 +183,23 @@ export default {
       .txt {
         bottom: 24%;
         right: 14px;
-        & > span {
+
+        &>span {
           font-size: 24px;
         }
       }
+
       .code {
         width: 84px;
         bottom: 30px;
         right: 14px;
-        & > img {
+
+        &>img {
           width: 84px;
         }
       }
     }
+
     .close {
       position: absolute;
       right: -14px;
@@ -195,16 +208,17 @@ export default {
     }
   }
 }
+
 @media screen and (max-width: 370px) {
   .share {
     .main {
       .txt {
         font-size: 12px;
-        & > span {
+
+        &>span {
           font-size: 18px;
         }
       }
     }
   }
-}
-</style>
+}</style>

scene/src/views/gui/menu.vue

@@ -28,7 +28,7 @@
             <a>
               <img rel="tooltip" title="" :src="require('@/assets/images/icon/pause.png')" width="24" height="24"
                 data-original-title="暂停" />
-              <div class="btmText" :style="{ marginLeft: screenWidth < 700 ? '0px' : '-12px' }">自动漫游</div>
+              <div class="btmText" :style="{ marginLeft: screenWidth < 1280 ? '0px' : '-12px' }">自动漫游</div>
             </a>
           </div>
           <div id="next" class="next desktop-only ui-icon wide" style="display: none">
@@ -477,7 +477,7 @@ export default {
   >div {
     margin-right: @margin;
 
-    @media screen and (max-width: 700px) {
+    @media screen and (max-width: 700px),(orientation: portrait) {
       margin-bottom: @margin;
     }
 
@@ -544,7 +544,7 @@ export default {
   display: flex;
   justify-content: center;
 
-  @media screen and (max-width: 700px) {
+  @media screen and (max-width: 700px),(orientation: portrait) {
     width: 50px;
   }
 
@@ -552,7 +552,7 @@ export default {
     width: @wh;
     margin-bottom: 5px;
 
-    @media screen and (max-width: 700px) {
+    @media screen and (max-width: 700px),(orientation: portrait) {
       margin-bottom: 10px !important;
     }
   }
@@ -565,7 +565,7 @@ export default {
 }
 
 .toHomeBox2 {
-  @media screen and (max-width: 700px) {
+  @media screen and (max-width: 700px),(orientation: portrait) {
     margin: 10px 0;
   }
 }
@@ -602,7 +602,7 @@ export default {
 }
 
 // 移动端
-@media screen and (max-width: 1000px) {
+@media screen and (max-width: 1000px),(orientation: portrait) {
   .hoverTit {
     opacity: 0 !important;
   }

zhengquan/public/scene/static/css/css/main.css

@@ -1870,7 +1870,7 @@ hr {
     }
 }
 
-@media only screen and (max-width: 487px), (max-height:450px) {
+@media only screen and (max-width: 487px), (max-height:450px),(orientation: portrait) {
     .vr-popup.desktop {
         width: 100%;
         height: 100%;
@@ -3095,7 +3095,7 @@ ul{
     font-size: 13px
 }
 
-@media only screen and (max-width: 487px), (max-height:487px) {
+@media only screen and (max-width: 487px), (max-height:487px),(orientation: portrait) {
     #terms-modal {
         z-index: 100;
         left: 0;
@@ -3222,7 +3222,7 @@ ul{
     height: auto
 }
 
-@media only screen and (max-width: 600px), (max-height:600px) {
+@media only screen and (max-width: 600px),(orientation: portrait), (max-height:600px) {
     #quick-logo img {
         width: 150px;
         height: auto
@@ -4340,7 +4340,7 @@ a.hasHover:hover, a:active {
     }
 }
 
-@media only screen and (max-width: 487px), (max-height:487px) {
+@media only screen and (max-width: 487px), (max-height:487px),(orientation: portrait) {
     #thumb-container .thumbImg img, .frame {
         height: 77px
     }
@@ -6198,7 +6198,7 @@ a.hasHover.tag-link:hover {
     display: none
 }
 
-@media only screen and (max-width: 487px), (max-height:360px) {
+@media only screen and (max-width: 487px), (max-height:360px),(orientation: portrait) {
     #share-modal {
         position: fixed;
         top: 0;
@@ -6955,7 +6955,7 @@ a.hasHover.tag-link:hover {
     background-color: rgba(0, 0, 0, 0.5);
 }
 
-@media only screen and (max-width: 1000px) {
+@media only screen and (max-width: 1000px),(orientation: portrait) {
     .progressbar {
         width: 60%;
     }
@@ -6989,7 +6989,7 @@ a.hasHover.tag-link:hover {
     }
 }
 
-@media only screen and (max-width: 600px) {
+@media only screen and (max-width: 600px),(orientation: portrait) {
     #gui-modes-map>div[rel]:hover, #play:hover {
         background: transparent;
     }

zhengquan/public/scene/static/css/css/oldVer/main0.css

@@ -151,8 +151,8 @@ iframe{
 }
 @media screen and  (max-width:667px){
 	#closepop{
-		width: 36px;
-		height: 36px;
+		width: 40px;
+		height: 40px;
 		top: 0px;
 		right: 0px;
 	}

zhengquan/public/scene/static/css/css/sceen2.css

@@ -1868,7 +1868,7 @@ hr {
   }
 }
 
-@media only screen and (max-width: 487px),(max-height:450px) {
+@media only screen and (max-width: 487px),(max-height:450px),(orientation: portrait) {
   .vr-popup.desktop {
       width:100%;
       height: 100%;
@@ -3034,7 +3034,7 @@ body,html {
   font-size: 13px
 }
 
-@media only screen and (max-width: 487px),(max-height:487px) {
+@media only screen and (max-width: 487px),(max-height:487px),(orientation: portrait) {
   #terms-modal {
       z-index:100;
       left: 0;
@@ -3161,7 +3161,7 @@ body,html {
   height: auto
 }
 
-@media only screen and (max-width: 600px),(max-height:600px) {
+@media only screen and (max-width: 600px),(orientation: portrait),(max-height:600px) {
   #quick-logo img {
       width:150px;
       height: auto
@@ -4261,7 +4261,7 @@ a.hasHover:hover,a:active {
   }
 }
 
-@media only screen and (max-width: 487px),(max-height:487px) {
+@media only screen and (max-width: 487px),(max-height:487px),(orientation: portrait) {
   #thumb-container .thumbImg img,.frame {
       height:77px
   }
@@ -6142,7 +6142,7 @@ a.hasHover.tag-link:hover {
   display: none
 }
 
-@media only screen and (max-width: 487px),(max-height:360px) {
+@media only screen and (max-width: 487px),(max-height:360px),(orientation: portrait) {
   #share-modal {
       position:fixed;
       top: 0;
@@ -6995,7 +6995,7 @@ background-size: 100% 100%;
       justify-content:center;
   }
 }
-@media only screen and (max-width: 600px) {
+@media only screen and (max-width: 600px),(orientation: portrait) {
   /* #gui-modes-map >div[rel]:hover,#play:hover{ background:transparent;  } */
   .pinBottom.right .ui-icon{ margin-right: 5px; }
   .pinBottom.right,.pinBottom.left{bottom: 5px;}

zhengquan/public/scene/static/css/main.css

@@ -2175,7 +2175,7 @@ j .vr-popup.tinier.supported.landscape.details-page .inner {
 }
 
 @media only screen and (max-width: 487px),
-(max-height:450px) {
+(max-height:450px),(orientation: portrait) {
     .vr-popup.desktop {
         width: 100%;
         height: 100%;
@@ -3535,7 +3535,7 @@ ul {
 }
 
 @media only screen and (max-width: 487px),
-(max-height:487px) {
+(max-height:487px),(orientation: portrait) {
     #terms-modal {
         z-index: 100;
         left: 0;
@@ -3667,6 +3667,7 @@ ul {
 }
 
 @media only screen and (max-width: 600px),
+(orientation: portrait),
 (max-height:600px) {
     #quick-logo img {
         width: 150px;
@@ -4847,7 +4848,7 @@ a.tag-link {
 }
 
 @media only screen and (max-width: 487px),
-(max-height:487px) {
+(max-height:487px),(orientation: portrait) {
     .frame {
         height: 107px;
         display: block;
@@ -6941,7 +6942,7 @@ a.hasHover.tag-link:hover {
 }
 
 @media only screen and (max-width: 487px),
-(max-height:360px) {
+(max-height:360px),(orientation: portrait) {
     #share-modal {
         position: fixed;
         top: 0;
@@ -7754,7 +7755,7 @@ a.hasHover.tag-link:hover {
     background-color: rgba(0, 0, 0, 0.5);
 }
 
-@media only screen and (max-width: 1000px) {
+@media only screen and (max-width: 1000px),(orientation: portrait) {
     .progressbar {
         width: 60%;
     }
@@ -7797,7 +7798,7 @@ a.hasHover.tag-link:hover {
     }
 }
 
-@media only screen and (max-width: 600px) {
+@media only screen and (max-width: 600px),(orientation: portrait) {
 
     #gui-modes-map>div[rel]:hover,
     #play:hover {

zhengquan/public/scene/static/css/sceen2.css

@@ -2184,7 +2184,7 @@ j .vr-popup.tinier.supported.landscape.details-page .inner {
 }
 
 @media only screen and (max-width: 487px),
-(max-height:450px) {
+(max-height:450px),(orientation: portrait) {
   .vr-popup.desktop {
     width: 100%;
     height: 100%;
@@ -3434,7 +3434,7 @@ html {
 }
 
 @media only screen and (max-width: 487px),
-(max-height:487px) {
+(max-height:487px),(orientation: portrait) {
   #terms-modal {
     z-index: 100;
     left: 0;
@@ -3566,6 +3566,7 @@ html {
 }
 
 @media only screen and (max-width: 600px),
+(orientation: portrait),
 (max-height:600px) {
   #quick-logo img {
     width: 150px;
@@ -4777,7 +4778,7 @@ a.tag-link {
 }
 
 @media only screen and (max-width: 487px),
-(max-height:487px) {
+(max-height:487px),(orientation: portrait) {
 
   #thumb-container .thumbImg img,
   .frame {
@@ -6773,7 +6774,7 @@ a.hasHover.tag-link:hover {
 }
 
 @media only screen and (max-width: 487px),
-(max-height:360px) {
+(max-height:360px),(orientation: portrait) {
   #share-modal {
     position: fixed;
     top: 0;
@@ -7747,7 +7748,7 @@ span.nav-icon-name {
   }
 }
 
-@media only screen and (max-width: 600px) {
+@media only screen and (max-width: 600px),(orientation: portrait) {
 
   /* #gui-modes-map >div[rel]:hover,#play:hover{ background:transparent;  } */
   .pinBottom.right .ui-icon {

zhengquan/public/scene/static/js/Hot.js

@@ -14,7 +14,7 @@ let playVideoMax = window.isEdit ? 3  :   browser.isMobile() ? 1 : 2;
 let playAniMax = window.isEdit ? 6 :   browser.isMobile() ? 3 : 5;
 
 if(number == 'SHANGJJ'){
-    playSyncGroup = ['okh1UR466371',  'LGmLHP2615503' ,  'VNyBI6614896'] //中,左,右 
+    playSyncGroup = [['okh1UR466371',  'LGmLHP2615503' ,  'VNyBI6614896']] //中,左,右 
     playVideoMax = 3
 }
 

zhengquan/public/scene/static/js/loadCAD.js

@@ -31,7 +31,7 @@ window.grendCAD = (function grendCAD() {
     let $name = document.createElement("div");
 
     $name.className = "name";
-    $name.textContent = "当前位置：元大都展";
+    $name.textContent = "";
     $layer.appendChild($name);
 
     $layer.className = "cad";
@@ -43,7 +43,7 @@ window.grendCAD = (function grendCAD() {
       .cad {
         position: absolute;
         right: 20px;
-        top: 20px;
+        top: 10%;
         width: 180px;
         height: 180px;
         background:  rgba(56,56,56,0.56);
@@ -66,13 +66,13 @@ window.grendCAD = (function grendCAD() {
 
      
 
-      @media only screen and (max-width: 1000px) { 
+      @media only screen and (max-width: 1000px),(orientation: portrait) { 
         .cad {
           position: absolute;
           left:auto;
           transform: translate(0, 0);
           right: 10px;
-          top: 10px;
+          top: 10%;
           width: 120px;
           height: 120px;
           background:  rgba(56,56,56,0.56);

zhengquan/src/App.vue

@@ -60,6 +60,10 @@ onMounted(() => {
   font-family: 'AlibabaPuHuiTi2.0-105Heavy';
   src: url('./assets/fonts/AlibabaPuHuiTi2.0-105Heavy.ttf');
 }
+@font-face {
+  font-family: 'AlibabaPuHuiTi2.0-75SemiBold';
+  src: url('./assets/fonts/AlibabaPuHuiTi2.0-75SemiBold.ttf');
+}
 
 @font-face {
   font-family: 'SourceHanSansCN-Medium';

zhengquan/src/router/index.ts

@@ -27,6 +27,13 @@ const routes = [
     //使用import可以路由懒加载，如果不使用，太多组件一起加载会造成白屏
     component: () => import('@/views/Game/gamePage.vue')
   },
+  // 照片墙
+  {
+    path: '/wall',
+    name: 'wall',
+    //使用import可以路由懒加载，如果不使用，太多组件一起加载会造成白屏
+    component: () => import('@/views/UnitWall/UnitWall.vue')
+  },
   // 其他页面
   {
     path: '/homePageMo',

zhengquan/src/utils/browser.ts

@@ -14,7 +14,7 @@ function versions () {
     // 火狐内核
     gecko: u.indexOf('Gecko') > -1 && u.indexOf('KHTML') === -1,
     // 是否为移动终端
-    mobile: /Android|webOS|iPhone|iPod|BlackBerry/i.test(navigator.userAgent),
+    mobile: /Android|webOS|iPhone|iPod|BlackBerry|SM-T|GT-P|Note|Tab|Nexus|Pixel|Tablet|Mi-Tab|Mi-Box|Huawei|Redmi|Mobile|XiaoMi/i.test(navigator.userAgent),
     // ios终端
     ios: !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/),
     // android终端或者uc浏览器

zhengquan/src/views/Game/gamePage.vue

@@ -65,10 +65,16 @@ onMounted(() => {
     width: 100%;
     height: 100%;
 
-    @media screen and (max-width: 700px) {
+    @media screen and (max-width: 700px),
+    (orientation: portrait) {
       width: 100%;
       // height: 100%;
     }
+
+    // @media screen and (orientation: portrait) {
+    //   width: 100%;
+    // }
+
   }
 }
 </style>

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

@@ -26,12 +26,18 @@ const openUnit = () => {
   isOpenSceneList.value = false
 };
 
+// 判断是否为平板横屏
+const isFlatLandscape = computed(() => {
+  return browser.mobile && window.innerWidth > 1000 && window.innerHeight  < window.innerWidth
+})
+
 const openMo = ref(false)
 
 </script>
 
 <template>
-  <div class='tabbar-box' v-if="!browser.mobile">
+  <!-- 不是移动端或者是平板端的横屏 -->
+  <div class='tabbar-box' v-if="!browser.mobile || isFlatLandscape">
     <img class="line-up" src="@/assets/images/home/line-up.png" alt="" @click="openScene">
     <!-- 公益单位 -->
     <div class="item-box gonyi">
@@ -273,7 +279,8 @@ const openMo = ref(false)
   }
 }
 
-@media screen and (max-width: 700px) {
+@media screen and (max-width: 700px),
+(orientation: portrait) {
 
   .up-icon {
     position: absolute;
@@ -434,6 +441,8 @@ const openMo = ref(false)
     position: absolute;
     bottom: 42vh;
     left: 50%;
+    transform: translateX(-50%);
+    margin-left: 5%;
   }
 
   .open {
@@ -507,4 +516,15 @@ const openMo = ref(false)
     }
   }
 }
+
+@media screen and (min-width: 700px),
+(orientation: portrait) {
+  .item-bg {
+    width: 30vw;
+    height: 94%;
+  }
+  .item-numbser {
+    bottom: 22% !important;
+  }
+}
 </style>

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

@@ -139,12 +139,18 @@ watch(curProject, (newValue: string) => {
   console.log(newValue)
 })
 
+// 判断是否为平板横屏
+const isFlatLandscape = computed(() => {
+  return browser.mobile && window.innerWidth > 1000 && window.innerHeight < window.innerWidth
+})
+
 </script>
 
 <template>
   <div class='scene-list-box'>
     <!-- 信息展示 -->
-    <div class="info-shade" v-show="curUnit && isShowInfoBox && !browser.mobile">
+    <div class="info-shade"
+      v-show="(curUnit && isShowInfoBox && !browser.mobile) || (isFlatLandscape && curUnit && isShowInfoBox)">
       <div id="infoBoxPc" class="info-box">
         <img class="close-icon" @click="isShowInfoBox = false" src="@/assets/images/close-icon.png" alt="">
         <div class="info-box-top"></div>
@@ -179,7 +185,7 @@ watch(curProject, (newValue: string) => {
 
     </div>
     <!-- 信息展示移动端 -->
-    <div class="info-box-mo" v-show="isShowInfoBox && browser.mobile">
+    <div class="info-box-mo" v-show="isShowInfoBox && browser.mobile && !isFlatLandscape">
       <!-- 返回按钮 -->
       <img class="back-icon" src="@/assets/images/scene/back.png" @click="isShowInfoBox = false" alt="">
       <div class="content-info">
@@ -198,7 +204,7 @@ watch(curProject, (newValue: string) => {
       </div>
 
     </div>
-    <div class="content" v-if="!browser.mobile">
+    <div class="content" v-if="!browser.mobile || isFlatLandscape">
       <!-- 左箭头 -->
       <div class="arrows-left" :style="{ opacity: startItem != 0 ? '1' : '0' }"
         @click="() => { startItem != 0 ? startItem -= 21 : '' }">
@@ -223,7 +229,7 @@ watch(curProject, (newValue: string) => {
           </div>
           <div v-if="startItem + item - 1 < store.dataAll.welfareList.length"
             :class="store.dataAll.welfareList[startItem + item - 1].title.length > 8 ? 'item-name' : ''"
-            :style="{ whiteSpace: 'nowrap', marginTop: '-0.2vh' }"> {{ store.dataAll.welfareList[startItem + item -
+            :style="{ whiteSpace: 'nowrap' }"> {{ store.dataAll.welfareList[startItem + item -
               1] ? store.dataAll.welfareList[startItem + item - 1].title : '' }}</div>
         </div>
       </div>
@@ -249,8 +255,10 @@ watch(curProject, (newValue: string) => {
         </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">
+    <img v-show="browser.mobile && !isFlatLandscape" class="icon-down" src="@/assets/images/home/icon-down.png" alt=""
+      @click="close">
+    <img v-show="!browser.mobile || isFlatLandscape" class="line-down" src="@/assets/images/home/line-down.png" alt=""
+      @click="close">
   </div>
 </template>
 
@@ -293,6 +301,7 @@ watch(curProject, (newValue: string) => {
       top: 3%;
       right: 1%;
       cursor: pointer;
+      z-index: 100;
     }
   }
 
@@ -390,7 +399,7 @@ watch(curProject, (newValue: string) => {
             .option-list {
               min-width: 80%;
               max-width: 100%;
-              max-height: 150px;
+              max-height: 10vh;
               overflow-y: auto;
               // position: absolute;
               top: 100%;
@@ -523,8 +532,12 @@ watch(curProject, (newValue: string) => {
 
         .list-item-con {
           width: 100%;
-          height: 90%;
-          // box-shadow: 0px 4px 18px 0px rgba(0, 0, 0, 0.6);
+          min-height: 85%;
+          max-height: 90%;
+          background: white;
+          display: flex;
+          justify-content: center;
+          align-items: center;
 
 
           // object-fit: cover;
@@ -583,12 +596,14 @@ watch(curProject, (newValue: string) => {
   .icon-down {
     position: absolute;
     bottom: 80%;
-    left: 45%;
-
+    left: 50%;
+    transform: translateX(-50%);
+    margin-left: 2%;
   }
 }
 
-@media screen and (max-width: 700px) {
+@media screen and (max-width: 700px),
+(orientation: portrait) {
   .scene-list-box {
     justify-content: end;
     height: 100%;
@@ -886,5 +901,4 @@ watch(curProject, (newValue: string) => {
     }
 
   }
-}
-</style>
+}</style>

zhengquan/src/views/Home/homePage.vue

@@ -20,6 +20,7 @@ const openUnitList = () => {
 const closeUnitList = () => {
   isShowUnitList.value = false
 }
+
 </script>
 
 <template>
@@ -45,7 +46,23 @@ const closeUnitList = () => {
   }
 }
 
-@media screen and (max-width: 700px)  {
+@media screen and (max-width: 700px),
+(orientation: portrait) {
+  .homePage {
+    background: url(../../assets/images/home/bgMo.jpg);
+    background-size: cover;
+    background-position: center center;
+    overflow: hidden;
+
+    .logo {
+      position: absolute;
+      right: 3%;
+      top: 5%;
+    }
+  }
+}
+
+@media screen and (orientation: portrait) {
   .homePage {
     background: url(../../assets/images/home/bgMo.jpg);
     background-size: cover;

zhengquan/src/views/HomeMo/homePageMo.vue

@@ -66,7 +66,8 @@ onMounted(() => {
     width: 100%;
     height: 100%;
 
-    @media screen and (max-width: 700px) {
+    @media screen and (max-width: 700px),
+    (orientation: portrait) {
       width: 100%;
       // height: 100%;
     }

zhengquan/src/views/Scene/ScenePage.vue

@@ -117,7 +117,9 @@ const getAllHotspot = () => {
         currentHotsUnit.value = currentUnit.value
         store.currentUnit = currentUnit.value
         localStorage.setItem('currentUnit', JSON.stringify(currentUnit.value))
-        if (route.query.name == '尾厅') pointInfo.value = '&firstView=pano:42,qua:0.009218044457158925,0.8470543054294898,-0.01469850441003682,0.5312231071060547&qs=1'
+        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'
+        }
       }
     })
   })
@@ -184,9 +186,9 @@ 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 translateXNumber = computed(() => {
+//   return browser.mobile ? `${-100 * animalZhenShuNumber.value}px` : `${-200 * animalZhenShuNumber.value}px`
+// })
 
 // const translateXNumberChange = computed(() => {
 //   return `${-200 * animalZhenShuNumber.value}px`
@@ -548,8 +550,11 @@ onMounted(() => {
 
   // 热点跳转展厅/游戏
   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
@@ -774,7 +779,8 @@ const changePassFu = () => {
       width: 100%;
       height: 100%;
 
-      @media screen and (max-width: 700px) {
+      @media screen and (max-width: 700px),
+      (orientation: portrait) {
         width: 100%;
         // height: 100%;
       }
@@ -795,7 +801,7 @@ const changePassFu = () => {
     .conttent {
       width: 30%;
       height: 40%;
-      background: rgba(255, 0, 0, 0.562);
+      background: rgba(0, 0, 0, 0.7);
       border-radius: 15px;
       display: flex;
       flex-direction: column;
@@ -872,7 +878,8 @@ const changePassFu = () => {
 
     .box-content {
       padding: 30px;
-      background: rgba(0, 0, 0, 0.5);
+      background: rgba(0, 0, 0, 0.7);
+      backdrop-filter: blur(15px);
       border-radius: 10px;
       color: white;
       line-height: 35px;
@@ -880,34 +887,47 @@ const changePassFu = () => {
       flex-direction: column;
       justify-content: center;
       align-items: center;
+      max-width: 90%;
+      box-sizing: border-box;
+      box-shadow: 0px 4px 18px 0px rgba(0, 0, 0, 0.6);
+      // font-family: 'AlibabaPuHuiTi2.0-75SemiBold';
 
       .text {
         display: -webkit-inline-box;
+        text-align: center;
         // align-items: center;
 
         bottom {
-          padding: 5px 20px;
-          font-size: 14px;
+          padding: 3px 15px;
+          font-size: 16px;
           border: white solid 1px;
           border-radius: 10px;
           height: 30px;
           cursor: pointer;
           height: 20px;
           margin: 0 5px;
+          font-family: 'AlibabaPuHuiTi2.0-75SemiBold';
+          background: #bc121b4b ;
+          border: 1.2px #b3312abe solid;
+          box-shadow: 0px 4px 4px 0px rgba(0, 0, 0, 0.5);
+
         }
 
       }
 
       .i-know {
         width: 200px;
-        color: black;
-        background: white;
+        color: white;
+        background: #bc121bbb;
         border-radius: 10px;
         border: 1px solid rgba(0, 0, 0, 0.5);
         cursor: pointer;
         display: flex;
         justify-content: center;
         margin-top: 20px;
+        font-family: 'AlibabaPuHuiTi2.0-105Heavy';
+        box-shadow: 0px 4px 18px 0px rgba(0, 0, 0, 0.5);
+
       }
 
 
@@ -966,7 +986,8 @@ const changePassFu = () => {
       backdrop-filter: blur(10px);
       border-radius: 15px 0 0 0;
 
-      @media screen and (max-width:700) {
+      @media screen and (max-width:700),
+      (orientation: portrait) {
         border-radius: 0 0 0 0;
       }
 
@@ -996,7 +1017,8 @@ const changePassFu = () => {
       .left-item:first-child {
         border-radius: 15px 0 0 0;
 
-        @media screen and (max-width:700) {
+        @media screen and (max-width:700),
+        (orientation: portrait) {
           border-radius: 0 0 0 0;
         }
       }
@@ -1107,7 +1129,8 @@ const changePassFu = () => {
       }
 
       100% {
-        background-position-x: v-bind('translateXNumber');
+        // background-position-x: v-bind('translateXNumber');
+        background-position-x: calc(100% - 200px);
       }
     }
 
@@ -1135,7 +1158,8 @@ const changePassFu = () => {
       }
 
       100% {
-        background-position-x: v-bind('translateXNumber');
+        // background-position-x: v-bind('translateXNumber');
+        background-position-x: calc(100% - 200px);
       }
     }
 
@@ -1285,7 +1309,8 @@ const changePassFu = () => {
       font-family: 'AlibabaPuHuiTi2.0-105Heavy';
       color: white;
 
-      @media screen and (max-width: 700px) {
+      @media screen and (max-width: 700px),
+      (orientation: portrait) {
         display: flex;
         flex-direction: column;
         overflow: auto;
@@ -1309,7 +1334,8 @@ const changePassFu = () => {
           margin-bottom: 10px;
           border-radius: 15px;
 
-          @media screen and (max-width: 700px) {
+          @media screen and (max-width: 700px),
+          (orientation: portrait) {
             width: 100%;
             height: 100%;
             margin-bottom: 0;
@@ -1362,7 +1388,8 @@ const changePassFu = () => {
 
 
 
-  @media screen and (max-width: 700px) {
+  @media screen and (max-width: 700px),
+  (orientation: portrait) {
     .hots-box {
       width: 100%;
       height: 100%;
@@ -1523,7 +1550,8 @@ const changePassFu = () => {
         }
 
         100% {
-          background-position-x: v-bind('translateXNumber');
+          // background-position-x: v-bind('translateXNumber');
+          background-position-x: calc(100% - 200px);
         }
       }
 

zhengquan/src/views/UnitWall/UnitWall.vue

@@ -0,0 +1,28 @@
+<script setup lang='ts'>
+import UnitList from './components/unitList.vue';
+
+</script>
+
+<template>
+  <div class='wall'>
+    <UnitList />
+  </div>
+</template>
+
+<style lang='less' scoped>
+.wall {
+  width: 100%;
+  height: 100%;
+  background: url(../../assets/images/home/bg.png);
+  background-size: 100% 100%;
+}
+
+@media screen and (max-width: 700px),
+(orientation: portrait) {
+  .wall {
+    background: url(../../assets/images/home/bgMo.jpg);
+    background-size: cover;
+
+  }
+}
+</style>

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

@@ -0,0 +1,938 @@
+<script setup lang='ts'>
+import browser from '@/utils/browser'
+import { useStore } from '@/stores';
+import baseResourceUrl from '@/utils/https';
+import Swiper from 'swiper'
+import 'swiper/swiper-bundle.css'
+import IconDown from '@/assets/images/home/down.png'
+import IconUp from '@/assets/images/home/up.png'
+import { nextTick, onMounted, ref, watch } from 'vue';
+import { useRouter } from 'vue-router';
+
+
+const store = useStore()
+const router = useRouter()
+
+// 分页
+const startItem = ref(0)
+
+// 当前单位显示
+const curUnit = ref({} as any)
+
+const isShowInfoBox = ref(false)
+
+
+
+const hoverDiv = ref(null)
+const hoverIndex = ref(-1)
+
+
+
+watch(hoverIndex, () => {
+
+
+}, { immediate: true })
+
+
+// 判断是否为平板横屏
+const isFlatLandscape = computed(() => {
+  return browser.mobile && window.innerWidth > 1000 && window.innerHeight < window.innerWidth
+})
+
+
+
+const goBack = () => {
+  router.replace({
+    path: '/scene',
+    query: {
+      code: 'SHANGJJ',
+      name: '尾厅',
+      pano: '&firstView=pano:43,qua:0.6820978937219361,0.05183622250679035,-0.7273241007475139,0.05527320016286095&qs=1'
+    }
+  })
+}
+
+// @ts-ignore
+let swiper2 = null as any
+const swiper2Index = ref(0)
+// @ts-ignore
+let swiper = null as any
+onMounted(() => {
+  swiper = new Swiper(".mySwiper", {
+    slidesPerView: 1,
+    loop: false,
+    navigation: {
+      nextEl: ".swiper-button-next",
+      prevEl: ".swiper-button-prev",
+    },
+    pagination: {
+      el: ".swiper-pagination",
+    },
+  });
+  swiper2 = new Swiper(".mySwiper2", {
+    slidesPerView: 1,
+    loop: false,
+    navigation: {
+      nextEl: ".swiper-button-next",
+      prevEl: ".swiper-button-prev",
+    },
+    pagination: {
+      el: ".swiper-pagination2",
+    },
+    on: {
+      slideChange: function (swiper2: any) {
+        nextTick(() => {
+          swiper2Index.value = swiper2.activeIndex
+        });
+      },
+    },
+  });
+
+  curUnit.value = store.dataAll.welfareList[0]
+})
+
+const goWebSite = (path: string) => {
+  window.location.href = path
+}
+
+
+const isOpenProject = ref(true)
+
+const curProject = ref('')
+
+const isShowProject = ref(false)
+
+watch(curProject, (newValue: string) => {
+  console.log(newValue)
+})
+
+</script>
+
+<template>
+  <div class='scene-list-box'>
+    <img class="backBtn" src="@/assets/images/scene/back.png" alt="" @click="goBack()">
+    <!-- 信息展示 -->
+    <div class="info-shade"
+      v-show="(curUnit && isShowInfoBox && !browser.mobile) || (isFlatLandscape && curUnit && isShowInfoBox)">
+      <div id="infoBoxPc" class="info-box">
+        <img class="close-icon" @click="isShowInfoBox = false" src="@/assets/images/close-icon.png" alt="">
+        <div class="info-box-top"></div>
+        <div class="info-box-bottom">
+          <div class="bottom-left">
+            <div class="left-top">
+              <h2>{{ curUnit ? curUnit.title : '' }}</h2>
+              <div class="website-btn" @click="goWebSite(curUnit.websitePath)"><img
+                  src="@/assets/images/scene/website.png" alt="">查看官网</div>
+            </div>
+            <div class="left-disc">{{ curUnit ? curUnit.disc : '' }}</div>
+            <!-- 项目案例 -->
+            <div class="project-list">
+              <div class="selected-box" v-show="curUnit.projects && curUnit.projects.length > 0"
+                @click="isOpenProject = !isOpenProject">项目案例
+                <img :src="isOpenProject ? IconUp : IconDown" alt="">
+              </div>
+              <div class="option-list" v-show="isOpenProject">
+                <div class="list-item" v-for="(item, index) in curUnit.projects" :key="index"
+                  @click="() => { curProject = item.split('&')[1]; isShowProject = true }">{{ item.split("&")[0] }} <img
+                    src="@/assets/images/home/icon-right.png" alt=""></div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+    <!-- 项目详情显示 -->
+    <div class="project-box" v-if="curProject && isShowProject">
+      <img class="close-icon" src="@/assets/images/close-icon.png" @click="isShowProject = false" />
+      <video v-show="curProject.includes('.mp4')" :src="curProject" controls autoplay></video>
+      <!-- 查看图片 -->
+      <viewer class="viewerCla" ref="viewer">
+        <img v-show="curProject.includes('.jpg') || curProject.includes('.png')" :src="curProject" alt="">
+      </viewer>
+
+    </div>
+    <!-- 信息展示移动端 -->
+    <div class="info-box-mo" v-show="isShowInfoBox && browser.mobile && !isFlatLandscape">
+      <!-- 返回按钮 -->
+      <img class="back-icon" src="@/assets/images/scene/back.png" @click="isShowInfoBox = false" alt="">
+      <div class="content-info">
+        <div class="left-top">
+          <h4>{{ curUnit ? curUnit.title : '' }}</h4>
+          <div class="website-btn" @click="goWebSite(curUnit.websitePath)"><img src="@/assets/images/scene/website.png"
+              alt="">查看官网</div>
+        </div>
+        <!-- <h4>{{ curUnit ? curUnit.title : '' }}</h4> -->
+        <div class="info-disc">{{ curUnit ? curUnit.disc : '' }}</div>
+        <!-- 项目案例 -->
+        <div class="selected" @click="isOpenProject = !isOpenProject"
+          v-show="curUnit.projects && curUnit.projects.length > 0">项目案例 <img :src="isOpenProject ? IconUp : IconDown"
+            alt=""></div>
+        <div class="option-list" v-show="isOpenProject">
+          <div class="list-item" v-for="(item, index) in curUnit.projects" :key="index"
+            @click="() => { curProject = item.split('&')[1]; isShowProject = true }">{{ item.split("&")[0] }} <img
+              src="@/assets/images/home/icon-right.png" alt=""></div>
+        </div>
+      </div>
+
+    </div>
+    <div class="content" v-if="!browser.mobile || isFlatLandscape">
+      <!-- 左箭头 -->
+      <div class="arrows-left" :style="{ opacity: startItem != 0 ? '1' : '0' }"
+        @click="() => { startItem != 0 ? startItem -= 21 : '' }">
+        <img src="@/assets/images/home/icon-left.png" alt="">
+      </div>
+      <div class="content-list">
+        <div class="list-item" v-for="(item, index) in 21" :key="index"
+          @click="curUnit = store.dataAll.welfareList[startItem + item - 1], isShowInfoBox = true"
+          :style="{ boxShadow: startItem + item - 1 < store.dataAll.welfareList.length ? '' : 'none' }"
+          @mouseover="hoverIndex = item">
+          <div class="list-item-con" v-if="startItem + item - 1 < store.dataAll.welfareList.length">
+            <!-- 默认图片--无logo情况下显示 -->
+            <div
+              v-if="store.dataAll.welfareList[startItem + item - 1].title == '鹏华基金管理有限公司' || store.dataAll.welfareList[startItem + item - 1].title == '北京中金公益基金会'"
+              class="defaultLogo"
+              :style="{ backgroundImage: `url(${baseResourceUrl}/logo/logo-default${hoverIndex == item ? 'Ac' : ''}.png)`, backgroundSize: 'cover' }">
+              {{
+                store.dataAll.welfareList[startItem + item - 1].title }}</div>
+            <img v-else ref="hoverDiv"
+              :src="`${baseResourceUrl}/logo/${store.dataAll.welfareList[startItem + item - 1].title}${hoverIndex == item ? ' 1' : ''}.png`"
+              alt="">
+          </div>
+          <div v-if="startItem + item - 1 < store.dataAll.welfareList.length"
+            :class="store.dataAll.welfareList[startItem + item - 1].title.length > 8 ? 'item-name' : ''"
+            :style="{ whiteSpace: 'nowrap' }"> {{ store.dataAll.welfareList[startItem + item -
+              1] ? store.dataAll.welfareList[startItem + item - 1].title : '' }}</div>
+        </div>
+      </div>
+      <!-- 右箭头 -->
+      <div class="arrows-left arrows-right"
+        @click="() => { startItem + 21 < store.dataAll.welfareList.length ? startItem += 21 : '' }"
+        :style="{ opacity: startItem + 21 < store.dataAll.welfareList.length ? '1' : '0' }">
+        <img src="@/assets/images/home/icon-right.png" alt="">
+      </div>
+    </div>
+    <div class="content" v-else>
+      <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">
+          <!-- 默认图片--无logo情况下显示 -->
+          <div v-if="item.title == '鹏华基金管理有限公司' || item.title == '北京中金公益基金会'" class="defaultLogo"
+            :style="{ backgroundImage: `url(${baseResourceUrl}/logo/logo-default${hoverIndex == item ? 'Ac' : ''}.png)`, backgroundSize: 'cover' }">
+            {{
+              item.title }}</div>
+          <img v-else :src="`${baseResourceUrl}/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>
+
+<style lang='less' scoped>
+.scene-list-box {
+  width: 100%;
+  height: 100%;
+  position: absolute;
+  bottom: 0;
+  display: flex;
+  justify-content: center;
+  // align-items: end;
+  z-index: 2;
+  overflow: hidden;
+
+  .backBtn {
+    position: fixed;
+    left: 3%;
+    top: 3%;
+    z-index: 1;
+    cursor: pointer;
+  }
+
+  .project-box {
+    width: 100%;
+    height: 100%;
+    position: fixed;
+    top: 0;
+    left: 0;
+    z-index: 99;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    background: rgba(0, 0, 0, 0.478);
+
+    video {
+      height: 100%;
+    }
+
+    img {
+      height: 100%;
+    }
+
+    .close-icon {
+      width: 40px;
+      height: 40px;
+      position: absolute;
+      top: 3%;
+      right: 1%;
+      cursor: pointer;
+      z-index: 100;
+    }
+  }
+
+  .info-shade {
+    width: 100%;
+    height: 100%;
+    background: rgba(0, 0, 0, 0.349);
+    position: fixed;
+    top: 0;
+    left: 0;
+    z-index: 1;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+
+    .info-box {
+      position: absolute;
+      // top: 10%;
+      // left: 10%;
+      width: 45%;
+      height: 60%;
+      z-index: 2;
+      // box-shadow: 0px 4px 18px 0px rgba(0, 0, 0, 0.6);
+      border-radius: 25px 25px 0 0;
+
+      .close-icon {
+        width: 40px;
+        position: absolute;
+        right: 3%;
+        top: 4%;
+        cursor: pointer;
+      }
+
+      &-top {
+        width: 100%;
+        height: 20%;
+        background: url(@/assets/images/home/info-top.png);
+        background-size: cover;
+        background-position: center;
+        border-radius: 20px 20px 0 0;
+      }
+
+      &-bottom {
+        width: 100%;
+        min-height: 70%;
+        // max-height: 90%;
+        background: url(@/assets/images/home/info-bottom.png);
+        background-size: 110% 110%;
+        // background-size: auto;
+        background-position: center center;
+        padding: 30px 20px;
+        box-sizing: border-box;
+        display: flex;
+        justify-content: space-around;
+        overflow-y: auto;
+
+        .bottom-left {
+          width: 90%;
+
+          .left-top {
+            display: flex;
+            justify-content: left;
+            align-items: center;
+
+            .website-btn {
+              display: flex;
+              justify-content: center;
+              align-items: center;
+              padding: 2px 10px;
+              color: white;
+              font-weight: 500;
+              border-radius: 5px;
+              border: 1px solid white;
+              margin-left: 25px;
+              height: 30px;
+              cursor: pointer;
+
+              img {
+                width: 20px;
+                height: 20px;
+                margin-right: 5px;
+              }
+            }
+          }
+
+          .left-disc {
+            font-size: 16px;
+            text-indent: 2em;
+            text-align: justify;
+            margin-top: 10px;
+            max-height: 26vh;
+            overflow: auto;
+            line-height: 24px;
+
+            &::-webkit-scrollbar {
+              width: 0;
+            }
+          }
+
+          .project-list {
+            margin-top: 10px;
+            width: auto;
+            position: relative;
+
+            .selected-box {
+              min-width: 80%;
+              max-width: 100%;
+              background: #BC121A;
+              padding: 10px;
+              color: white;
+              display: flex;
+              justify-content: space-between;
+              box-sizing: border-box;
+
+              img {
+                height: 20px;
+              }
+
+            }
+
+            .option-list {
+              min-width: 80%;
+              max-width: 100%;
+              max-height: 10vh;
+              overflow-y: auto;
+              // position: absolute;
+              top: 100%;
+              background: rgba(0, 0, 0, 0.342);
+
+              &::-webkit-scrollbar {
+                width: 0px;
+              }
+
+              .list-item {
+                padding: 3px 10px;
+                cursor: pointer;
+                color: white;
+                display: flex;
+                justify-content: space-between;
+                align-items: center;
+
+                img {
+                  opacity: 0;
+                  width: 13px;
+                }
+              }
+
+              .list-item:hover {
+                background-color: #bc121bb0;
+
+                img {
+                  opacity: 1;
+                }
+              }
+            }
+          }
+
+
+        }
+
+        .bottom-right {
+          width: 60%;
+          height: 100%;
+
+          .swiper-vertical {
+            touch-action: none !important;
+          }
+
+          .swiper-horizontal {
+            touch-action: none !important;
+          }
+
+
+          .swiper {
+            width: 100%;
+            height: 50%;
+
+            .swiper-wrapper {
+              width: 100%;
+              height: 100%;
+
+              .swiper-slide {
+                width: 100%;
+                height: 100%;
+
+                img {
+                  width: 100%;
+                  height: 100%;
+                  object-fit: contain;
+                  cursor: pointer;
+                  object-fit: cover;
+                }
+              }
+            }
+
+            .swiper-pagination {
+              width: 100%;
+              height: .2rem;
+              text-align: center;
+              position: absolute;
+              bottom: 0 !important;
+              line-height: .2rem;
+              box-sizing: border-box;
+              padding: 0 .3rem;
+              font-size: 0;
+              z-index: 1;
+            }
+          }
+        }
+      }
+
+    }
+
+  }
+
+
+  .content {
+    width: 100%;
+    // height: 100%;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    overflow: auto;
+    background: #ffffff7c;
+    // border-radius: 40px 40px 0 0;
+    backdrop-filter: blur(10px);
+    // padding: 10% 5%;
+    box-sizing: border-box;
+    padding: 3% 0;
+
+    .arrows-left {
+      cursor: pointer;
+      margin-right: 1.5%;
+    }
+
+    .arrows-right {
+      margin-left: 1.5%;
+    }
+
+    .content-list {
+      width: 100%;
+      // height: 80%;
+      display: grid;
+      grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr 1fr;
+      grid-template-rows: 1fr 1fr 1fr;
+      gap: 10px 10px;
+
+      .list-item {
+        width: 90%;
+        height: 100%;
+        position: relative;
+        cursor: pointer;
+        overflow: hidden;
+
+        .list-item-con {
+          width: 100%;
+          min-height: 85%;
+          max-height: 90%;
+          background: white;
+          display: flex;
+          justify-content: center;
+          align-items: center;
+
+
+          // object-fit: cover;
+          img {
+            width: 100%;
+            // height: 0%;
+            object-fit: cover;
+          }
+
+          .defaultLogo {
+            width: 100%;
+            height: 100%;
+            display: flex;
+            justify-content: center;
+            align-items: center;
+          }
+
+          .number {
+            position: absolute;
+            left: 50%;
+            top: 50%;
+            transform: translate(-50%, -50%);
+            color: red;
+            font-size: 40px;
+          }
+        }
+
+        .item-name {
+          width: 100%;
+          animation: identifier1 8s linear infinite;
+          white-space: nowrap;
+
+        }
+
+        @keyframes identifier1 {
+          0% {
+            transform: translate(100%);
+          }
+
+          100% {
+            transform: translate(-100%);
+          }
+        }
+
+      }
+    }
+  }
+
+  .line-down {
+    position: absolute;
+    width: 70%;
+    bottom: 1%;
+    cursor: pointer;
+  }
+
+  .icon-down {
+    position: absolute;
+    bottom: 80%;
+    left: 50%;
+    transform: translateX(-50%);
+    margin-left: 2%;
+  }
+}
+
+@media screen and (max-width: 700px),
+(orientation: portrait) {
+  .scene-list-box {
+    justify-content: end;
+    height: 100%;
+    // position: relative;
+
+    .project-box {
+      width: 100%;
+      height: 100%;
+      position: fixed;
+      top: 0;
+      left: 0;
+      z-index: 99;
+      display: flex;
+      justify-content: center;
+      align-items: center;
+      background: rgba(0, 0, 0, 0.788);
+
+      video {
+        width: 100%;
+        height: auto;
+      }
+
+      img {
+        width: 100%;
+        height: auto;
+      }
+
+      .close-icon {
+        width: 40px;
+        height: 40px;
+        position: absolute;
+        top: 3%;
+        right: 1%;
+        cursor: pointer;
+      }
+    }
+
+    .info-box-mo {
+      width: 100%;
+      height: 100%;
+      position: absolute;
+      left: 0;
+      top: 0;
+      background: #C5A16C;
+      z-index: 3;
+      font-family: 'AlibabaPuHuiTi2.0-75SemiBold';
+
+      .back-icon {
+        margin-left: 5%;
+        margin-top: 5%;
+      }
+
+      .content-info {
+        padding: 8%;
+        max-height: 80%;
+        overflow: auto;
+
+        .left-top {
+          display: flex;
+          justify-content: left;
+          align-items: center;
+
+          .website-btn {
+            display: flex;
+            justify-content: center;
+            align-items: center;
+            padding: 2px 10px;
+            color: white;
+            font-weight: 500;
+            border-radius: 5px;
+            border: 1px solid white;
+            margin-left: 10px;
+            height: 25px;
+            font-size: .8em;
+            cursor: pointer;
+
+            img {
+              width: 15px;
+              height: 15px;
+              margin-right: 3px;
+            }
+          }
+        }
+
+        .info-disc {
+          margin-top: 10px;
+          font-size: 14px;
+          letter-spacing: .3em;
+          line-height: 24px;
+        }
+
+        .selected {
+          // width: 100%;
+          background: #BC121A;
+          color: white;
+          padding: 10px;
+          display: flex;
+          justify-content: space-between;
+          align-items: center;
+
+          img {
+            width: 10px;
+          }
+
+          .option-list {
+            width: 100%;
+            top: 100%;
+            background: rgba(0, 0, 0, 0.342);
+
+            .list-item {
+              padding: 5px 10px;
+              cursor: pointer;
+              color: white;
+              display: flex;
+              justify-content: space-between;
+              align-items: center;
+
+              img {
+                opacity: 0;
+                width: 13px;
+              }
+            }
+
+            .list-item:hover {
+              background-color: #bc121bb0;
+
+              img {
+                opacity: 1;
+              }
+            }
+          }
+        }
+
+        .option-list {
+          width: 100%;
+          top: 100%;
+          background: rgba(0, 0, 0, 0.342);
+
+          .list-item {
+            padding: 5px 10px;
+            cursor: pointer;
+            color: white;
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+
+            img {
+              opacity: 0;
+              width: 13px;
+            }
+          }
+
+          .list-item:hover {
+            background-color: #bc121bb0;
+
+            img {
+              opacity: 1;
+            }
+          }
+        }
+      }
+
+
+
+      .swiper-vertical {
+        touch-action: none !important;
+      }
+
+      .swiper {
+        width: 100%;
+        height: 30%;
+
+
+        .swiper-wrapper {
+          flex-direction: row;
+
+          .swiper-slide {
+            text-align: center;
+            font-size: 18px;
+            background: #fff;
+            display: flex;
+            justify-content: center;
+            align-items: center;
+
+            img {
+              display: block;
+              width: 100%;
+              object-fit: cover;
+            }
+          }
+        }
+
+        .swiper-button-next:after {
+          font-size: 14px;
+          color: #fff;
+          text-shadow: 3px 3px 5px black;
+        }
+
+        .swiper-button-prev:after {
+          font-size: 14px;
+          color: #fff;
+          text-shadow: 3px 3px 5px black;
+        }
+
+        .pagination2 {
+          width: 100%;
+          display: flex;
+          justify-content: center;
+          align-items: center;
+          position: absolute;
+          bottom: 10px;
+          z-index: 3;
+
+          .pagination2-item {
+            width: 5px;
+            height: 5px;
+            border-radius: 50px;
+            margin-right: 10px;
+            background: gray;
+
+          }
+
+          .pagination2-item:last-child {
+            margin-right: 0;
+          }
+
+          .active {
+            width: 7px;
+            height: 7px;
+            background: #fff;
+          }
+        }
+
+      }
+    }
+
+    .content {
+      width: 100%;
+      height: 100%;
+      background: linear-gradient(#bc121b93, rgba(0, 0, 0, 0.26));
+      backdrop-filter: blur(2px);
+      box-sizing: border-box;
+      padding: 20px 10px;
+      font-size: 14px;
+      color: white;
+      flex-direction: column;
+      font-family: 'SourceHanSansCN-Medium';
+      position: absolute;
+      bottom: 0;
+      right: 0;
+      overflow: inherit;
+
+      .icon-down {
+        position: absolute;
+        top: 0;
+        transform: translateY(-100%);
+      }
+
+      &::-webkit-scrollbar {
+        width: 0;
+        height: 0;
+      }
+
+      .title-box {
+        color: white;
+        font-weight: bold;
+        font-size: 14px;
+        margin-bottom: 10px;
+      }
+
+      .grid-box {
+        width: 100%;
+        height: 100%;
+        display: grid;
+        grid-template-columns: repeat(2, minmax(0, 1fr));
+        gap: 10px;
+        overflow: auto;
+        margin: auto;
+        padding: 15px;
+        box-sizing: border-box;
+
+
+        &::-webkit-scrollbar {
+          width: 0;
+          height: 0;
+        }
+
+        .content-item {
+          display: flex;
+          flex-direction: column;
+          // 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 {
+            margin-top: 5px;
+            text-align: left;
+          }
+        }
+      }
+
+
+
+    }
+
+    .backBtn {
+      top: 2%;
+    }
+
+  }
+}
+</style>

zhengquan/src/views/WelcomePage/WelcomePage.vue

@@ -13,8 +13,13 @@ const router = useRouter()
 
 const countDownNumber = ref(5)
 
+// 判断是否为平板横屏
+const isFlatLandscape = computed(() => {
+  return browser.mobile && window.innerWidth > 1000 && window.innerHeight  < window.innerWidth
+})
+
 onMounted(() => {
-  
+
   let timer = setInterval(() => {
     if (countDownNumber.value > 0) {
       countDownNumber.value--;
@@ -30,18 +35,13 @@ onMounted(() => {
 
 <template>
   <div class='welcome-page'
-    :style="{ background: `url(${browser.mobile ? bgImgMo : bgImg})`, backgroundSize: `${browser.mobile ? 'cover' : '100% 100%'}`, backgroundPosition: browser.mobile ? 'center' : '' }">
+    :style="{ background: `url(${browser.mobile && !isFlatLandscape ? bgImgMo : bgImg})`, backgroundSize: `${browser.mobile && !isFlatLandscape ? 'cover' : '100% 100%'}`, backgroundPosition: browser.mobile && !isFlatLandscape ? 'center' : '' }">
     <img class="logo" src="@/assets/images/logo.png" alt="">
     <div class="center-box"
-      :style="{ background: `url(${browser.mobile ? centerImgMo : centerImg})`, backgroundSize: '100% 100%' }">
+      :style="{ background: `url(${browser.mobile && !isFlatLandscape ? centerImgMo : centerImg})`, backgroundSize: '100% 100%' }">
     </div>
     <div class="title-box"
-      :style="{ background: `url(${browser.mobile ? sponsorImgMo : sponsorImg})`, backgroundSize: '100% 100%' }"></div>
-    <!-- <div class="sponsor-box">
-      <span style="margin-right: 10px;"><strong>主办单位：</strong>中国证券博物馆</span>|
-      <strong style="margin-left: 10px;">支持单位：</strong>上海证券期货文化发展基金会
-    </div> -->
-
+      :style="{ background: `url(${browser.mobile && !isFlatLandscape ? sponsorImgMo : sponsorImg})`, backgroundSize: '100% 100%' }"></div>
     <!-- 倒数进入主页 -->
     <div class="count-down">
       {{ countDownNumber }}s
@@ -96,7 +96,8 @@ onMounted(() => {
   }
 }
 
-@media screen and (max-width: 700px) {
+@media screen and (max-width: 700px),
+(orientation: portrait) {
   .welcome-page {
     .logo {
       position: absolute;