修改优化

src/views/Home.vue

@@ -20,7 +20,7 @@
       <div class="search" @keyup.enter="onSearch">
         <div class="searchBtn" @click="onSearch"></div>
         <el-input
-          placeholder="搜索文物名称..."
+          placeholder="搜索"
           suffix-icon="el-icon-search"
           v-model="searchInput"
         >
@@ -28,7 +28,10 @@
       </div>
       <!-- 下面内容 -->
       <div class="main">
-          <div class="village-item" v-for="village in villageListForShow" :key="village.id"
+          <div
+            class="village-item"
+            v-for="village in villageListForShow"
+            :key="village.id"
             @click="flyToVillage(village)"
           >
             {{ village.name }}
@@ -67,26 +70,26 @@ export default {
       // 各个村的坐标
       villageList: [
         {
-          id: 1,
-          name: "中共鄂西特务旧址",
-          position: [109.487355895127, 30.255616455883],
-          url: 'https://laser.4dkankan.com/4pc/index.html?m=SG-6KqcFGb0z6K#/',
+          id: 1, // id为0的时候opacity会是0
+          name: "施州城墙",
+          position: [109.471345476266, 30.264908395999],
+          url: 'https://laser.4dkankan.com/4pc/index.html?m=SG-5IzoAc92GQ5#/',
         },
         {
           id: 2,
-          name: "窑湾医院旧址",
-          position: [109.490757403451, 30.274690006014],
-          url: 'https://laser.4dkankan.com/4pc/index.html?m=SG-aMGJobc3Xrb#/',
+          name: "连珠塔",
+          position: [109.477083135606, 30.256295997146],
+          url: 'https://laser.4dkankan.com/4pc/index.html?m=SG-JxZKhK4V4gC',
         },
         {
           id: 3,
-          name: "连珠寺",
-          position: [109.477083135606, 30.256295997146],
-          url: 'https://laser.4dkankan.com/4pc/index.html?m=SG-JxZKhK4V4gC',
+          name: "文昌祠",
+          position: [109.47544759156, 30.265243689181],
+          url: 'https://laser.4dkankan.com/4pc/index.html?m=SG-9JqSJcJsUJD#/',
         },
         {
           id: 4,
-          name: "叶挺故居",
+          name: "叶挺将军囚居旧址",
           position: [109.469196935811, 30.266042273551],
           url: 'https://laser.4dkankan.com/4pc/index.html?m=SG-04XoFHzSjtj',
         },
@@ -98,30 +101,23 @@ export default {
         },
         {
           id: 6,
-          name: "文昌祠",
-          position: [109.47544759156, 30.265243689181],
-          url: 'https://laser.4dkankan.com/4pc/index.html?m=SG-9JqSJcJsUJD#/',
+          name: "恩施地委、县委办公楼旧址",
+          position: [109.472746593168, 30.2640848577],
+          url: 'https://laser.4dkankan.com/4pc/index.html?m=SG-B5c1qD4RKrF#/',
         },
         {
           id: 7,
-          name: "恩施博物馆展馆",
-          position: [109.472909451758, 30.265229412234],
-          url: 'https://laser.4dkankan.com/4pc/index.html?m=SG-B5c1qD4RKrF#/',
+          name: "窑湾医院旧址",
+          position: [109.490757403451, 30.274690006014],
+          url: 'https://laser.4dkankan.com/4pc/index.html?m=SG-aMGJobc3Xrb#/',
         },
         {
           id: 8,
-          name: "恩施城墙",
-          position: [109.471345476266, 30.264908395999],
-          url: 'https://laser.4dkankan.com/4pc/index.html?m=SG-5IzoAc92GQ5#/',
-        },
-        {
-          id: 9,
-          name: "恩施地委、县委办公楼旧址",
-          position: [109.472746593168, 30.2640848577],
-          url: 'https://laser.4dkankan.com/4pc/index.html?m=SG-JN7fBe36Bp6#/',
+          name: "中共鄂西特务旧址",
+          position: [109.487338918924, 30.255632116004],
+          url: 'https://laser.4dkankan.com/4pc/index.html?m=SG-6KqcFGb0z6K#/',
         },
       ],
-
       // 模型图层
       // tilesetLayer: null,
     };
@@ -367,7 +363,7 @@ export default {
     transition: all 0.3s;
     color: #fff;
     padding: 20px;
-    z-index: 99;
+    z-index: 200;
     position: absolute;
     top: 0;
     right: 0;
@@ -533,6 +529,10 @@ export default {
   z-index: 100 !important;
 }
 
+// 不这样写的话，在移动端就不会显示底部栏，从而露出火星科技的logo
+/deep/.mars3d-locationbar {
+  display: block !important;
+}
 
 /deep/.lableContent {
   width: 170px;
@@ -571,4 +571,33 @@ export default {
   margin-top: -10px;
   border: 1px solid rgb(226, 204, 163);
 }
+
+
+@media screen and (orientation: portrait) {
+  .right-panel {
+    top: initial !important;
+    right: 0 !important;
+    bottom: 0 !important;
+    left: 0 !important;
+    width: 100% !important;
+    height: 50% !important;
+    .arrows {
+      border-radius: 20px 20px 0 0 !important;
+      overflow: hidden;
+      position: absolute;
+      top: -20px !important;
+      left: 20% !important;
+      transform: translateX(-50%) !important;
+      width: 80px !important;
+      height: 20px !important;
+      >i {
+        transform: rotate(90deg);
+      }
+    }
+  }
+  .right-panel.meanShow {
+    transform: translateY(100%) !important;
+  }
+}
+
 </style>