进入到子场景界面，左上角设置一个返回按钮

src/pages/ruins-detail/index.vue

@@ -10,10 +10,16 @@
             {{ detail.content }}
           </div>
           <div class="btns">
-            <div class="btn left-btn" @click="handleClickEvent('travelAround', detail)">
+            <div
+              class="btn left-btn"
+              @click="handleClickEvent('travelAround', detail)"
+            >
               VR云游
             </div>
-            <div class="btn center-btn" @click="handleClickEvent('overLook', detail)">
+            <div
+              class="btn center-btn"
+              @click="handleClickEvent('overLook', detail)"
+            >
               VR俯瞰
             </div>
             <div
@@ -25,6 +31,9 @@
           </div>
         </div>
       </div>
+      <div class="goBack" @click="goBack()">
+        <img src="../../assets/images/goback.png" alt="" />
+      </div>
     </div>
     <div v-if="isMobile" class="mobile-layout">
       <div class="mobile-card">
@@ -39,10 +48,16 @@
             </div>
           </div>
           <div class="btns">
-            <div class="btn left-btn" @click="handleClickEvent('travelAround', detail)">
+            <div
+              class="btn left-btn"
+              @click="handleClickEvent('travelAround', detail)"
+            >
               VR云游
             </div>
-            <div class="btn center-btn" @click="handleClickEvent('overLook', detail)">
+            <div
+              class="btn center-btn"
+              @click="handleClickEvent('overLook', detail)"
+            >
               VR俯瞰
             </div>
             <div
@@ -84,9 +99,9 @@ export default {
           });
           break;
         case "overLook":
-          if(item.id == "2") {
-            window.alert('该历史遗迹没有VR俯瞰')
-             break;
+          if (item.id == "2") {
+            window.alert("该历史遗迹没有VR俯瞰");
+            break;
           }
           this.$router.push({
             path: "/over-look",
@@ -100,6 +115,9 @@ export default {
           break;
       }
     },
+    goBack() {
+        history.go(-1)
+    }
   },
   //生命周期 - 创建完成（可以访问当前this实例）
   created() {
@@ -130,6 +148,12 @@ export default {
   background: url("../../assets/images/cards-bg.png") center center no-repeat;
   background-size: 100% 100%;
   overflow: hidden;
+  .goBack {
+    position: absolute;
+    top: 26px;
+    left: 20px;
+    cursor: pointer;
+  }
   .title {
     width: 1264px;
     text-align: center;
@@ -179,9 +203,18 @@ export default {
         padding: 2vw 6vw;
         display: flex;
         justify-content: space-around;
-        .left-btn{background: url(../../assets/images/left-btn.png) no-repeat center center;}
-        .center-btn{background: url(../../assets/images/center-btn.png) no-repeat center center;}
-        .right-btn{background: url(../../assets/images/right-btn.png) no-repeat center center;}
+        .left-btn {
+          background: url(../../assets/images/left-btn.png) no-repeat center
+            center;
+        }
+        .center-btn {
+          background: url(../../assets/images/center-btn.png) no-repeat center
+            center;
+        }
+        .right-btn {
+          background: url(../../assets/images/right-btn.png) no-repeat center
+            center;
+        }
         .btn {
           width: 160px;
           height: 36px;
@@ -200,86 +233,93 @@ export default {
   }
 }
 //移动端样式
-@media screen and (max-width: 1024px) { 
-.mobile-layout {
-  width: 100%;
-  height: 100%;
-  background: #615310;
-  background-size: cover;
-  overflow: hidden;
-  background-clip: 100% 100%;
-  .mobile-card {
+@media screen and (max-width: 1024px) {
+  .mobile-layout {
     width: 100%;
     height: 100%;
-    padding: 3vw;
-    .mobile-content {
+    background: #615310;
+    background-size: cover;
+    overflow: hidden;
+    background-clip: 100% 100%;
+    .mobile-card {
       width: 100%;
-      background: url('../../assets/images/mobile-detail-card-bg.png') no-repeat center center;
       height: 100%;
-      display: flex;
-      flex-direction: column;
-      .pic {
+      padding: 3vw;
+      .mobile-content {
         width: 100%;
-        height: 40%;
-        img {
+        background: url("../../assets/images/mobile-detail-card-bg.png")
+          no-repeat center center;
+        height: 100%;
+        display: flex;
+        flex-direction: column;
+        .pic {
           width: 100%;
-          height: 100%;
-        }
-      }
-      .txt {
-        width: 100%;
-        height: 45%;
-        padding: 3vw;
-        // background: blue;
-        .title {
-          height: 15%;
-          text-align: center;
-          font-size: 5vw;
-          font-family: Source Han Sans CN;
-          font-weight: bold;
-          line-height: 10vw;
-          color: #fcd67b;
-          opacity: 1;
-          // margin: 4vw 0;
+          height: 40%;
+          img {
+            width: 100%;
+            height: 100%;
+          }
         }
-        .con {
+        .txt {
+          width: 100%;
+          height: 45%;
           padding: 3vw;
-          height: 85%;
-          font-size: 3.5vw;
-          font-family: Source Han Sans CN;
-          font-weight: 300;
-          line-height: 5.5vw;
-          color: #ffffff;
-          opacity: 1;
-          overflow: auto;
+          // background: blue;
+          .title {
+            height: 15%;
+            text-align: center;
+            font-size: 5vw;
+            font-family: Source Han Sans CN;
+            font-weight: bold;
+            line-height: 10vw;
+            color: #fcd67b;
+            opacity: 1;
+            // margin: 4vw 0;
+          }
+          .con {
+            padding: 3vw;
+            height: 85%;
+            font-size: 3.5vw;
+            font-family: Source Han Sans CN;
+            font-weight: 300;
+            line-height: 5.5vw;
+            color: #ffffff;
+            opacity: 1;
+            overflow: auto;
+          }
         }
-      }
-      .btns {
-        width: 100%;
-        height: 15%;
-        padding: 6vw;
-        display: flex;
-        justify-content: space-between;
-        .left-btn{background: url(../../assets/images/left-btn.png) no-repeat;}
-        .center-btn{background: url(../../assets/images/center-btn.png) no-repeat;}
-        .right-btn{background: url(../../assets/images/right-btn.png) no-repeat;}
-        .btn {
-          width: 32%;
-          height: 80%;
-          line-height:2.5rem;
-          text-align: center;
-          // background: url(../../assets/images/btn-bg.png) no-repeat;
-          background-size: 100% 100%;
-          cursor: pointer;
-          font-size: 16px;
-          font-family: Source Han Sans CN;
-          font-weight: 500;
-          color: #6A2121;
-          opacity: 1;
+        .btns {
+          width: 100%;
+          height: 15%;
+          padding: 6vw;
+          display: flex;
+          justify-content: space-between;
+          .left-btn {
+            background: url(../../assets/images/left-btn.png) no-repeat;
+          }
+          .center-btn {
+            background: url(../../assets/images/center-btn.png) no-repeat;
+          }
+          .right-btn {
+            background: url(../../assets/images/right-btn.png) no-repeat;
+          }
+          .btn {
+            width: 32%;
+            height: 80%;
+            line-height: 2.5rem;
+            text-align: center;
+            // background: url(../../assets/images/btn-bg.png) no-repeat;
+            background-size: 100% 100%;
+            cursor: pointer;
+            font-size: 16px;
+            font-family: Source Han Sans CN;
+            font-weight: 500;
+            color: #6a2121;
+            opacity: 1;
+          }
         }
       }
     }
   }
 }
-}
 </style>