Merge branch 'master' of http://face3d.4dage.com:7005/shaogen1995/518-JSSWLT

H5场景本地化/public/static/css/main.css

@@ -3930,6 +3930,12 @@ a.tag-link {
     cursor: pointer;
 }
 
+@media only screen and (min-width: 2000px) {
+    #gui-modes-map>div[rel] {
+        width: 100px;
+    }
+}
+
 /* #gui-modes-map>div[rel]:hover,
 .pinBottom.right .rightViewContainer>div:hover,
 #play:hover {} */

H5场景本地化/src/assets/style/myBase.css

@@ -8,6 +8,11 @@
   overflow: visible;
   max-width: 500px;
 }
+@media screen and (min-width: 2000px) {
+  #drawer-container {
+    max-width: 650px;
+  }
+}
 #drawer-container #drawer.open {
   bottom: 88px;
   height: 140px !important;

H5场景本地化/src/assets/style/myBase.less

@@ -10,6 +10,10 @@
   overflow: visible;
   max-width: 500px;
 
+  @media screen and (min-width:2000px) {
+    max-width: 650px;
+  }
+
   #drawer.open {
     bottom: 88px;
     height: 140px !important;
@@ -69,29 +73,32 @@
 #vr {
   display: none !important;
 }
+
 #cad path {
   stroke-width: 0.5;
   // fill:red;
 
 }
-#ele1{
-  circle{
+
+#ele1 {
+  circle {
     // fill:red;
-    r:1;
+    r: 1;
   }
 }
-#gui-loading{
+
+#gui-loading {
   z-index: 9999;
 }
 
-#zhiying{
+#zhiying {
   position: relative;
   z-index: 9999;
 }
 
 @media only screen and (max-width:800px) {
   .model-title {
-      font-size: 16px;
-      top: 80px;
+    font-size: 16px;
+    top: 80px;
   }
 }

H5场景本地化/src/views/gui/menu.vue

@@ -63,8 +63,6 @@
                 rel="tooltip"
                 title=""
                 :src="require('@/assets/images/play.png')"
-                width="24"
-                height="24"
                 data-original-title="播放"
               />
             </a>
@@ -78,11 +76,7 @@
             <!-- icon文字 -->
             <div class="iconTxt">自动漫游</div>
             <a>
-              <img
-                :src="require('@/assets/images/icon/play.png')"
-                width="24"
-                height="24"
-              />
+              <img :src="require('@/assets/images/icon/play.png')" />
             </a>
           </div>
           <div id="pause" class="ui-icon" style="display: none">
@@ -93,8 +87,6 @@
                 rel="tooltip"
                 title=""
                 :src="require('@/assets/images/icon/pause.png')"
-                width="24"
-                height="24"
                 data-original-title="暂停"
               />
             </a>
@@ -346,9 +338,12 @@ export default {
 #hotList {
   display: none !important;
 }
+
 ::-webkit-scrollbar {
-  width: 5px; /*高宽分别对应横竖滚动条的尺寸*/
+  width: 5px;
+  /*高宽分别对应横竖滚动条的尺寸*/
 }
+
 ::-webkit-scrollbar-thumb {
   // box-shadow   : inset 0 0 5px rgba(0, 0, 0, 0.2);
   background: #edd3b0;
@@ -356,13 +351,16 @@ export default {
   color: #edd3b0;
   outline: none;
 }
+
 #gui-modes-inside {
   position: relative;
   display: none !important;
 }
+
 #gui-modes-dollhouse {
   position: relative;
 }
+
 #gui-modes-floorplan {
   position: relative;
 }
@@ -370,34 +368,66 @@ export default {
 // 右侧菜单栏
 @wh: 44px;
 @margin: 0px;
+
 #play,
 #pause {
   margin-right: @margin;
+
   img {
     width: @wh;
     height: @wh;
+
+    @media screen and (min-width: 1000px) and (max-width: 2000px) {
+      width: 60px !important;
+      height: 60px !important;
+    }
+
+    @media screen and (min-width: 2000px) {
+      width: 80px !important;
+      height: 80px !important;
+    }
   }
 }
+
 .rightViewContainer {
   display: flex !important;
   align-items: center !important;
 }
+
 #gui-modes-map {
+  // @media screen and (min-width: 2000px) {
+  //   min-width: 500px;
+  // }
+
   > div {
     margin-right: @margin;
+
     > img {
-      width: @wh;
-      height: @wh;
+      width: 44px;
+      height: 44px;
       display: block !important;
+
+      @media screen and (min-width: 1000px) and (max-width: 2000px) {
+        width: 60px !important;
+        height: 60px !important;
+      }
+
+      @media screen and (min-width: 2000px) {
+        width: 80px !important;
+        height: 80px !important;
+      }
     }
+
     .active {
       display: none !important;
     }
   }
+
   .active {
     > img {
       display: none !important;
     }
+
     .active {
       display: block !important;
     }
@@ -411,19 +441,31 @@ export default {
 #gui-fullscreen img {
   width: 40px;
 }
+
 #volume {
   width: 40px;
+
+  @media screen and (min-width: 1000px) and(max-width: 2000px) {
+    width: 60px;
+  }
+
+  @media screen and (min-width: 2000px) {
+    width: 80px;
+  }
 }
 
 #gui-fullscreen-exit img {
   width: 40px !important;
 }
+
 .bgandshare {
   background: none !important;
+
   // margin-right: 20px!important;
   > div {
     width: 100%;
     cursor: pointer;
+
     img {
       width: 100%;
     }
@@ -442,6 +484,11 @@ export default {
     transform: translateX(-50%);
     width: 100%;
     text-align: center;
+
+    @media screen and (min-width: 2000px) {
+      font-size: 16px;
+    }
+
     &::before {
       content: "";
       position: absolute;
@@ -453,9 +500,11 @@ export default {
       background-size: 100% 100%;
     }
   }
+
   .iconTxtAc {
     color: #0a93cd;
   }
+
   // .active{
   //   .iconTxt{
   //     color: #13709e;
@@ -466,11 +515,13 @@ export default {
       color: #0a93cd;
     }
   }
+
   #gui-modes-floorplan.active {
     .iconTxt {
       color: #0a93cd;
     }
   }
+
   .hotListBox {
     cursor: pointer;
     float: left;
@@ -478,11 +529,31 @@ export default {
     height: 44px;
     position: relative;
     z-index: 100;
+
+    @media screen and (min-width: 1000px) {
+      height: auto;
+    }
+
+    @media screen and (min-width: 2000px) {
+      width: 100px;
+    }
+
     .hotListSon {
       text-align: center;
+
       & > img {
         width: 44px !important;
         height: 44px !important;
+
+        @media screen and (min-width: 1000px) and (max-width: 2000px) {
+          width: 60px !important;
+          height: 60px !important;
+        }
+
+        @media screen and (min-width: 2000px) {
+          width: 80px !important;
+          height: 80px !important;
+        }
       }
     }
   }
@@ -496,6 +567,11 @@ export default {
     justify-content: center;
     display: flex;
     position: relative;
+
+    @media screen and (min-width: 2000px) {
+      max-width: 650px;
+    }
+
     .viewXian {
       padding: 10px 10px 46px 10px;
       position: absolute;
@@ -504,18 +580,33 @@ export default {
       height: 100%;
       left: 0;
       top: 0;
+
+      @media screen and (min-width: 2000px) {
+        max-width: 650px;
+      }
+
       & > img {
         width: 100%;
         height: 100%;
         object-fit: contain;
       }
+
       .viewShowIcon {
         cursor: pointer;
         position: absolute;
         right: 7px;
         top: 4px;
+
         & > img {
           width: 30px;
+
+          @media screen and (min-width: 1000px) and (max-width: 2000px) {
+            width: 40px;
+          }
+
+          @media screen and (min-width: 2000px) {
+            width: 52px;
+          }
         }
       }
     }
@@ -525,13 +616,16 @@ export default {
   @media screen and (max-width: 370px) {
     .viewContainer {
       padding: 10px 0 34px 0;
+
       .viewXian {
         padding: 10px 0px 46px 0px;
+
         .viewShowIcon {
           z-index: 999;
           position: absolute;
           right: 0px;
           top: 4px;
+
           & > img {
             width: 30px;
           }
@@ -549,16 +643,31 @@ export default {
     opacity: 0;
     pointer-events: none;
     transition: all 0.5s;
+
     & > img {
       width: 30px;
+
+      @media screen and (min-width: 1000px) and (max-width: 2000px) {
+        width: 40px;
+      }
+
+      @media screen and (min-width: 2000px) {
+        width: 50px;
+      }
     }
   }
+
   .myViewShowBoxAc {
     opacity: 1;
     pointer-events: auto;
   }
+
   .viewShowAc {
     transform: translateX(-500px);
+
+    @media screen and (min-width: 2000px) {
+      transform: translateX(-650px);
+    }
   }
 
   // 音乐
@@ -569,13 +678,40 @@ export default {
     right: 10px;
     top: 320px;
     width: 40px;
+
+    @media screen and (min-width: 1000px) and(max-width: 2000px) {
+      width: 60px;
+    }
+
+    @media screen and (min-width: 2000px) {
+      width: 80px;
+    }
+
     & > div {
       width: 40px;
+
+      @media screen and (min-width: 1000px) and(max-width: 2000px) {
+        width: 60px;
+      }
+
+      @media screen and (min-width: 2000px) {
+        width: 80px;
+      }
+
       & > img {
         width: 40px;
+
+        @media screen and (min-width: 1000px) and(max-width: 2000px) {
+          width: 60px;
+        }
+
+        @media screen and (min-width: 2000px) {
+          width: 80px;
+        }
       }
     }
   }
+
   .smMapBox {
     position: fixed;
     z-index: 99;
@@ -585,6 +721,7 @@ export default {
     height: 16px;
     transition: all 0.3s;
     transform: rotate(90deg);
+
     .smMapBoxSon {
       border-radius: 0 0 4px 4px;
       height: 16px;
@@ -592,6 +729,7 @@ export default {
       width: 40px;
       margin: 0 auto;
       text-align: center;
+
       & > img {
         position: relative;
         top: -5px;
@@ -599,9 +737,11 @@ export default {
       }
     }
   }
+
   .smMapBoxHide {
     right: -61px;
     transform: rotate(-90deg);
+
     .smMapBoxSon {
       border-radius: 4px 4px 0px 0px;
     }