1

src/assets/css/index.scss

@@ -458,13 +458,6 @@ body {
         cursor: pointer;
       }
     }
-    .footer {
-      height: 60px;
-      position: absolute;
-      bottom: 0;
-      left: 50%;
-      transform: translateX(-50%);
-    }
   }
 }
 .mars3d-popup-background {

src/views/contentData/Footer/index.vue

@@ -1,24 +1,93 @@
 <!-- src/components/Footer/Footer.vue -->
 <template>
   <div class="footer">
-    <button>三维地图</button>
-    <button>三维热图</button>
+    <div
+      :class="{ 'footer-left': true, active: is2DActive === 1 }"
+      @click="switchMap(1)"
+      ref="leftBtn"
+    >
+      <div class="text">二维地图</div>
+    </div>
+    <div
+      :class="{ 'footer-right': true, active: is2DActive === 2 }"
+      @click="switchMap(2)"
+      ref="rightBtn"
+    >
+      <div class="text">三维地图</div>
+    </div>
   </div>
 </template>
 
 <script>
 export default {
-  name: "footer-bottom"
+  name: "my-Footer",
+  data() {
+    return {
+      is2DActive: 2 // 这个值可以是根据其他逻辑来动态改变的
+    };
+  },
+  mounted() {},
+  methods: {
+    switchMap(value) {
+      console.log(value);
+      if (value === 1) {
+        window.marsMap.scene.morphTo2D();
+        this.$refs.leftBtn.style.background = `url(${require("@/assets/img/left-hover.png")})`;
+        this.$refs.rightBtn.style.background = `url(${require("@/assets/img/right-nohover.png")})`;
+      } else {
+        window.marsMap.scene.morphTo3D();
+        this.$refs.leftBtn.style.background = `url(${require("@/assets/img/left-nohover.png")})`;
+        this.$refs.rightBtn.style.background = `url(${require("@/assets/img/right-hover.png")})`;
+      }
+    }
+  }
 };
 </script>
 
-<style scoped>
+<style lang="scss" scoped>
 .footer {
   display: flex;
   justify-content: center;
-  padding: 10px;
-  background-color: #003087;
-  border-top: 1px solid #00aaff;
+  position: absolute;
+  bottom: 1%;
+  width: 360px;
+  left: 50%;
+  transform: translateX(-50%);
+  pointer-events: auto;
+  .footer-left {
+    width: 180px;
+    height: 40px;
+    line-height: 40px;
+    color: #fff;
+    background: url(../../../assets/img/left-nohover.png);
+    background-size: 130% 230% !important;
+    background-repeat: no-repeat !important;
+    background-position: center !important;
+    position: relative;
+    cursor: pointer;
+    .text {
+      position: absolute;
+      right: 20%;
+      top: 17%;
+    }
+  }
+  .footer-right {
+    width: 180px;
+    height: 40px;
+    line-height: 40px;
+    color: #fff;
+    background: url(../../../assets/img/right-hover.png);
+    background-size: 130% 230% !important;
+    background-repeat: no-repeat !important;
+    background-position: center !important;
+    position: relative;
+    cursor: pointer;
+    .text {
+      position: absolute;
+      left: 20%;
+      top: 17%;
+    }
+  }
 }
 
 button {

src/views/contentData/index.vue

@@ -4,7 +4,7 @@
     <headerTop :homeData="homeView" />
     <LeftSidebar :homeData="homeView" />
     <RightSidebar :homeData="homeView" />
-    <!-- <Footer /> -->
+    <Footer />
   </div>
 </template>
 
@@ -12,15 +12,15 @@
 import headerTop from "./headerTop/index.vue";
 import LeftSidebar from "./LeftSidebar/index.vue";
 import RightSidebar from "./RightSidebar/index.vue";
-// import Footer from "./Footer/index.vue";
+import Footer from "./Footer/index.vue";
 
 export default {
   name: "App",
   components: {
     headerTop,
     LeftSidebar,
-    RightSidebar
-    // Footer
+    RightSidebar,
+    Footer
   },
   props: {
     homeData: {