Merge branch 'james'

src/pages/over-look/index.vue

@@ -4,7 +4,7 @@
     <iframe
       :src="iframeLink"
     ></iframe>
-    <div class="goBack" @click="goBack()">
+    <div v-if="!isMobile" class="goBack" @click="goBack()">
       <img src="../../assets/images/goback.png" alt="" />
     </div>
   </div>
@@ -13,7 +13,7 @@
 <script>
 //这里可以导入其他文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）
 //例如：import 《组件名称》 from '《组件路径》';
-
+import browser from "@/utils/browser.js";
 export default {
   //import引入的组件需要注入到对象中才能使用
   inject: ["reload"],
@@ -21,7 +21,8 @@ export default {
   data() {
     //这里存放数据
     return {
-      iframeLink:""
+      iframeLink:"",
+      isMobile: browser.mobile,
     };
   },
   //监听属性 类似于data概念

src/pages/ruins-detail/index.vue

@@ -6,14 +6,20 @@
       <div class="container">
         <img class="pic" :src="detail.detailImg" alt="" />
         <div class="content">
-          <div class="txt">
-            {{ detail.content }}
+          <div class="txt" v-html="detail.content">
+            <!-- {{ 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">
@@ -34,15 +43,21 @@
           </div>
           <div class="txt">
             <div class="title">{{ detail.name }}</div>
-            <div class="con">
-              {{ detail.content }}
+            <div class="con" v-html="detail.content">
+              <!-- {{ detail.content }} -->
             </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",
@@ -94,12 +109,15 @@ export default {
           });
           break;
         case "intensiveReading":
-          window.open(item.intensiveReading, "_self");
+          window.open(item.intensiveReading, "_target");
           break;
         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,92 @@ 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: 10vw;
+            line-height: 10vw;
+            text-align: center;
+            background-size: 100% 100%;
+            cursor: pointer;
+            font-size: 16px;
+            font-family: Source Han Sans CN;
+            font-weight: 500;
+            color: #6a2121;
+            opacity: 1;
+          }
         }
       }
     }
   }
 }
-}
 </style>

src/pages/ruins/index.vue

@@ -1,7 +1,7 @@
 <!-- 场馆漫游 -->
 <template>
   <div class="layout">
-    <div class="title">珠海市红色革命遗址</div>
+    <div class="title">珠海掌上红色展馆</div>
     <div class="cards">
       <swCard></swCard>
     </div>

src/pages/travel-around/index.vue

@@ -2,14 +2,14 @@
 <template>
 <div class='travel'>
     <iframe :src="iframeLink"></iframe>
-    <div class="goBack" @click="goBack()"><img src="../../assets/images/goback.png" alt=""></div>
+    <div v-if="!isMobile" class="goBack" @click="goBack()"><img src="../../assets/images/goback.png" alt=""></div>
 </div>
 </template>
 
 <script>
 //这里可以导入其他文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）
 //例如：import 《组件名称》 from '《组件路径》';
-
+import browser from "@/utils/browser.js";
 export default {
 //import引入的组件需要注入到对象中才能使用
 inject:['reload'],
@@ -17,7 +17,8 @@ components: {},
 data() {
 //这里存放数据
 return {
-    iframeLink:""
+    iframeLink:"",
+    isMobile: browser.mobile,
 };
 },
 //监听属性 类似于data概念