upp

scene/public/static/js/loadCAD.js

@@ -44,7 +44,7 @@ window.grendCAD = (function grendCAD() {
         height: 180px;
         background: rgba(81, 32, 32, 0.4);
         border-radius: 5px;
-        border: 1px solid #d1b198;
+        border: 2px solid #D6B970;
         pointer-events: none;
       }
 
@@ -53,18 +53,19 @@ window.grendCAD = (function grendCAD() {
         height: 100%;
       }
 
-      @media only screen and (max-width: 600px) { 
+      @media only screen and (max-width: 1000px) { 
         .cad {
-            position: absolute;
-            right: 15px;
-            top: 50px;
-            width: 100px;
-            height: 100px;
-            background: rgba(81, 32, 32, 0.4);
-            border-radius: 5px;
-            border: 1px solid #d1b198;
-            pointer-events: none;
-        }
+          position: absolute;
+          left:auto;
+          transform: translate(0, 0);
+          right: 10px;
+          top: 10px;
+          width: 120px;
+          height: 120px;
+          background: rgba(81, 32, 32, 0.4);
+          border-radius: 5px;
+          border: 2px solid #D6B970;
+          }
       }
     `
 

scene/src/assets/style/myBase.css

@@ -47,3 +47,14 @@
   fill: rgba(185, 12, 12, 0.8);
   r: 1;
 }
+@media screen and (max-width: 1000px) {
+  #drawer.open.noScroll {
+    height: 118px !important;
+  }
+  #scrollFrame {
+    padding: 8px 15px 0;
+  }
+  #scrollFrame .thumbImg .overlay {
+    font-size: 12px;
+  }
+}

scene/src/assets/style/myBase.less

@@ -68,4 +68,21 @@
     fill: rgba(185, 12, 12, 0.80);
     r: 1;
   }
+}
+
+// 移动端
+@media screen and (max-width: 1000px) {
+  #drawer.open.noScroll {
+    height: 118px !important;
+  }
+
+  #scrollFrame {
+    padding: 8px 15px 0;
+
+    .thumbImg {
+      .overlay {
+        font-size: 12px;
+      }
+    }
+  }
 }

scene/src/components/welcome/index.vue

@@ -1,10 +1,13 @@
 <template>
   <div class="welcome">
     <iframe
-      src="https://zzbbh.4dage.com/SWKK/show.html?id=WK1564638850838523904&vr=fd720_JMzTknCLP"
+      src="https://zzbbh.4dage.com/SWKK/show.html?id=WK1661253728205799424&vr=fd720_Nl2axMPTY"
       frameborder="0"
     ></iframe>
-    <div class="btn" @click.stop="$emit('close')">探索场景</div>
+    <div class="btn" @click.stop="$emit('close')">
+      <img src="../../assets/img/home/homeBtn.png" alt="" />
+      <p>探索场景</p>
+    </div>
   </div>
 </template>
 
@@ -36,22 +39,41 @@ export default {
   }
 
   .btn {
-    width: 246px;
-    height: 77px;
-    background-image: url("../../assets/img/home/homeBtn.png");
-    background-size: 100% 100%;
-    color: #d6b970;
-    font-size: 24px;
-    font-weight: 700;
     position: absolute;
     z-index: 10;
     bottom: 15%;
     left: 50%;
     transform: translateX(-50%);
     cursor: pointer;
-    display: flex;
-    justify-content: center;
-    align-items: center;
+    & > img {
+      width: 246px;
+    }
+    & > p {
+      color: #d6b970;
+      font-size: 24px;
+      font-weight: 700;
+      position: absolute;
+      width: 100%;
+      height: 100%;
+      top: 0;
+      left: 0;
+      display: flex;
+      justify-content: center;
+      align-items: center;
+    }
+  }
+
+  // 移动端
+  @media screen and (max-width: 1000px) {
+    .btn {
+      bottom: 6%;
+      & > img {
+        width: 140px;
+      }
+      & > p {
+        font-size: 16px;
+      }
+    }
   }
 }
 </style>

scene/src/pages/Home.vue

@@ -77,7 +77,7 @@
     </div>
 
     <!-- 左上方logo -->
-    <div class="leftTopLogo">
+    <div class="leftTopLogo" v-show="!isMobile">
       <img src="../assets/img/home/logo.png" alt="" />
     </div>
   </div>

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

@@ -122,4 +122,32 @@ export default {
     }
   }
 }
+@media screen and (max-width: 1000px) {
+  .hotList {
+    width: 94%;
+    height: 90%;
+    padding: 30px 10px 30px 30px;
+    .title {
+      .titleLL {
+        font-size: 18px;
+      }
+      .titleRR {
+        position: absolute;
+        right: -5px;
+        top: 5px;
+      }
+    }
+    .main {
+      margin-top: 10px;
+      .txt {
+        font-size: 14px;
+        & > span {
+          &:hover {
+            color: #fff;
+          }
+        }
+      }
+    }
+  }
+}
 </style>

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

@@ -2,7 +2,7 @@
   <div class="share">
     <div class="imgBox" v-if="isOk">
       <img :src="isOk" alt="" />
-      <p>可点击鼠标右键保存图片</p>
+      <p>{{ isMobile ? "可长按图片保存" : "可点击鼠标右键保存图片" }}</p>
     </div>
     <div class="main" id="canvsBox" v-else>
       <!-- 数字 -->
@@ -95,6 +95,10 @@ export default {
     width: 100%;
     height: 100%;
     position: relative;
+    & > img {
+      width: 100%;
+      height: 100%;
+    }
     & > p {
       position: absolute;
       bottom: 10px;
@@ -141,10 +145,52 @@ export default {
     }
   }
   .close {
+    z-index: 99;
     position: absolute;
     right: -40px;
     top: 10px;
     cursor: pointer;
   }
 }
+// 移动端
+@media screen and (max-width: 1000px) {
+  .share {
+    width: 90%;
+    height: 90%;
+    .imgBox {
+      & > p {
+        font-size: 12px;
+        bottom: 10px;
+        width: 84px;
+        right: 14px;
+      }
+    }
+    .main {
+      background-image: url("../../../assets/img/open/bg-shareM.jpg");
+      background-size: 100% 100%;
+
+      .txt {
+        bottom: 30px;
+        left: 16px;
+        & > span {
+          font-size: 30px;
+        }
+      }
+      .code {
+        width: 84px;
+        bottom: 30px;
+        right: 14px;
+        & > img {
+          width: 84px;
+        }
+      }
+    }
+    .close {
+      position: absolute;
+      right: -14px;
+      top: -14px;
+      cursor: pointer;
+    }
+  }
+}
 </style>

scene/src/views/gui/menu.vue

@@ -255,7 +255,7 @@
 
     <div class="openBox" :class="{ openBoxAc: openInd }">
       <HotList v-if="openInd === 1" @close="openInd = 0" />
-      <Share v-show="openInd === 2" @close="openInd = 0" :openInd='openInd'/>
+      <Share v-show="openInd === 2" @close="openInd = 0" :openInd="openInd" />
     </div>
   </div>
 </template>
@@ -435,67 +435,7 @@ export default {
     }
   }
 }
-@media only screen and (max-width: 487px) {
-  #myMoMu {
-    display: block !important;
-  }
-  #myMoMu img {
-    margin-left: 12px;
-  }
-  .viewContainer {
-    background-color: rgba(0, 0, 0, 0.5);
-    padding: 15px 0 10px;
-    border-radius: 50px;
-  }
-
-  @wh: 22px;
-  @margin: 10px;
-  #play,
-  #pause {
-    margin-bottom: @margin;
-    img {
-      width: @wh;
-      height: @wh;
-    }
-  }
-  #gui-modes-map {
-    > div {
-      margin-bottom: @margin;
-      > img {
-        width: @wh;
-        height: @wh;
-        display: block;
-      }
-      .active {
-        display: none;
-      }
-    }
-    .active {
-      > img {
-        display: none;
-      }
-      .active {
-        display: block;
-      }
-    }
-  }
 
-  .bgandshare {
-    display: none !important;
-    display: flex;
-    position: fixed;
-    left: 50px;
-    bottom: 25px;
-    flex-direction: column;
-    margin-right: 10px !important;
-    > div {
-      width: @wh!important;
-      img {
-        width: 100%;
-      }
-    }
-  }
-}
 .toHomeBox {
   margin-right: 20px;
   cursor: pointer;
@@ -539,4 +479,49 @@ export default {
     pointer-events: auto;
   }
 }
+
+// 移动端
+@media screen and (max-width: 1000px) {
+  .hoverTit {
+    opacity: 0 !important;
+  }
+  .viewContainer {
+    & > div {
+      img {
+        width: 33px !important;
+        height: 33px !important;
+      }
+    }
+  }
+  .pinBottom-container #hotList {
+    width: 50px;
+    margin-bottom: 15px;
+  }
+
+  .pinBottom-container {
+    .pinBottom.right.hideTarget {
+      position: fixed;
+      top: 200px;
+      right: 10px;
+      .rightViewContainer {
+        flex-direction: column;
+        & > div,
+        #volume {
+          width: 50px !important;
+          text-align: right;
+          margin-right: 0;
+          margin-bottom: 10px;
+          & > div {
+            display: flex;
+            justify-content: flex-end;
+          }
+          img {
+            width: 33px;
+            height: 33px;
+          }
+        }
+      }
+    }
+  }
+}
 </style>