Merge branch 'james'

src/pages/index/index.vue

@@ -35,11 +35,11 @@ export default {
     });
   },
   mounted() {},
-  methods:{
+  methods: {
     enter() {
-      this.$router.push('/ruins')
-    }
-  }
+      this.$router.push("/ruins");
+    },
+  },
 };
 </script>
 
@@ -47,51 +47,6 @@ export default {
 .wrapper {
   width: 100%;
   height: 100%;
-}
-.mobileLayout {
-  width: 100vw;
-  height: 100vh;
-  position: fixed;
-  left: 0;
-  bottom: 10vh;
-  .bg {
-    width: 100%;
-    height: 100%;
-  }
-  .logo {
-    position: fixed;
-    top: 5vw;
-    left: 5vw;
-    width: 40%;
-    z-index: 100;
-  }
-  .search-bar {
-    position: fixed;
-    top: 5vw;
-    right: 5vw;
-    width: 30%;
-    z-index: 100;
-  }
-}
-.layout {
-  position: relative;
-  z-index: 9;
-  width: 100%;
-  height: 100%;
-  .xlz-bg {
-    position: absolute;
-    top: 50%;
-    z-index: 89;
-    transform: translateY(-50%);
-  }
-  .bg {
-    position: absolute;
-    z-index: 999;
-    width: 100%;
-    height: 100%;
-    object-fit: fill;
-    left: 0;
-  }
   .bgimg {
     position: absolute;
     z-index: 99;
@@ -99,7 +54,7 @@ export default {
     left: 0;
     height: 100%;
     background: url("../../assets/images/index-bg.png") no-repeat center center;
-    background-size: cover;
+    background-size: 100% 100%;
     .con {
       left: 50%;
       top: 25%;
@@ -109,12 +64,12 @@ export default {
       position: relative;
       .btn {
         margin: 0 auto;
-        margin-top: 26px;
+        margin-top: 5vw;
         width: 100%;
         height: 74px;
         line-height: 74px;
         text-align: center;
-        background: url(../../assets/images/btn-bg.png) no-repeat;
+        background: url(../../assets/images/index-btn-bg.png) no-repeat;
         background-size: 100% 100%;
         cursor: pointer;
         .btn-txt {
@@ -129,4 +84,33 @@ export default {
     }
   }
 }
+@media screen and (max-width: 1024px) {
+  .wrapper {
+    .bgimg {
+      background: url("../../assets/images/mobile-index-bg.png") no-repeat
+        center center;
+      .con {
+        width: 80%;
+        left: 50%;
+        top:0;
+        margin-left: -40%;
+        margin-top:50%;
+        .btn {
+          background: url(../../assets/images/mobile-btn-bg.png) no-repeat center center;
+          background-size: 100% 100%;
+          margin-left: 0px;
+          height: 17vw;
+          line-height: 17vw;
+          .btn-txt {
+            font-size: 5vw;
+            font-family: Source Han Sans CN;
+            font-weight: bold;
+            color: #6a2121;
+            opacity: 1;
+          }
+        }
+      }
+    }
+  }
+}
 </style>

src/pages/ruins-detail/index.vue

@@ -1,17 +1,57 @@
 <!-- 场馆漫游 -->
 <template>
-  <div class="layout">
-    <div class="title">{{detail.name}}</div>
-    <div class="container">
-      <img class="pic" :src="detail.detailImg" alt="" />
-      <div class="content">
-        <div class="txt">
-          {{detail.content}}
+  <div class="root">
+    <div class="layout" v-if="!isMobile">
+      <div class="title">{{ detail.name }}</div>
+      <div class="container">
+        <img class="pic" :src="detail.detailImg" alt="" />
+        <div class="content">
+          <div class="txt">
+            {{ detail.content }}
+          </div>
+          <div class="btns">
+            <div class="btn" @click="handleClickEvent('travelAround', detail)">
+              VR云游
+            </div>
+            <div class="btn" @click="handleClickEvent('overLook', detail)">
+              VR俯瞰
+            </div>
+            <div
+              class="btn"
+              @click="handleClickEvent('intensiveReading', detail)"
+            >
+              党史精读
+            </div>
+          </div>
         </div>
-        <div class="btns">
-          <div class="btn" @click="handleClickEvent('travelAround',detail)">VR云游</div>
-          <div class="btn" @click="handleClickEvent('overLook',detail)">VR俯瞰</div>
-          <div class="btn" @click="handleClickEvent('intensiveReading',detail)">党史精读</div>
+      </div>
+    </div>
+    <div v-if="isMobile" class="mobile-layout">
+      <div class="mobile-card">
+        <div class="mobile-content">
+          <div class="pic">
+            <img :src="detail.detailImg" alt="" />
+          </div>
+          <div class="txt">
+            <div class="title">{{ detail.name }}</div>
+            <div class="con">
+              {{ detail.content }}
+            </div>
+          </div>
+          <div class="btns">
+            <div class="btn left-btn" @click="handleClickEvent('travelAround', detail)">
+              VR云游
+            </div>
+            <div class="btn center-btn" @click="handleClickEvent('overLook', detail)">
+              VR俯瞰
+            </div>
+            <div
+              class="btn right-btn"
+              @click="handleClickEvent('intensiveReading', detail)"
+            >
+              党史精读
+            </div>
+          </div>
         </div>
       </div>
     </div>
@@ -19,13 +59,14 @@
 </template>
 
 <script>
+import browser from "@/utils/browser.js";
 export default {
-  components: {
-  },
+  components: {},
   data() {
     //这里存放数据
     return {
-      detail:null
+      detail: null,
+      isMobile: browser.mobile,
     };
   },
   //监听属性 类似于data概念
@@ -34,26 +75,32 @@ export default {
   watch: {},
   //方法集合
   methods: {
-    handleClickEvent(type,item){
-
+    handleClickEvent(type, item) {
       switch (type) {
-        case 'travelAround':
-          this.$router.push({path:'/travel-around',query:{travelAround:item.travelAround}})
+        case "travelAround":
+          this.$router.push({
+            path: "/travel-around",
+            query: { travelAround: item.travelAround },
+          });
           break;
-        case 'overLook':
-          this.$router.push({path:'/over-look',query:{overLook:item.overLook}})
+        case "overLook":
+          this.$router.push({
+            path: "/over-look",
+            query: { overLook: item.overLook },
+          });
           break;
-        case 'intensiveReading':
-          window.open(item.intensiveReading,"_self")
+        case "intensiveReading":
+          window.open(item.intensiveReading, "_self");
           break;
         default:
           break;
       }
-    }
+    },
   },
   //生命周期 - 创建完成（可以访问当前this实例）
   created() {
     this.detail = this.$route.query || {};
+    console.log("isMobile", this.isMobile);
   },
   //生命周期 - 挂载完成（可以访问DOM元素）
   mounted() {},
@@ -68,13 +115,17 @@ export default {
 </script>
 <style lang='less' scoped>
 //@import url(); 引入公共css类
+.root {
+  width: 100%;
+  height: 100%;
+}
+// pc端样式
 .layout {
   width: 100%;
   height: 100%;
-  background: url("../../assets/images/inner-bg.png");
-  background-size: cover;
+  background: url("../../assets/images/cards-bg.png") center center no-repeat;
+  background-size: 100% 100%;
   overflow: hidden;
-  background-clip: 100% 100%;
   .title {
     width: 1264px;
     text-align: center;
@@ -95,7 +146,7 @@ export default {
     background: url("../../assets/images/detail-con-bg.png") center center
       no-repeat;
     background-clip: 100% 100%;
-    margin: 100px auto;
+    margin: 50px auto;
     box-sizing: border-box;
     padding: 10px;
     font-size: 0;
@@ -142,4 +193,87 @@ 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 {
+    width: 100%;
+    height: 100%;
+    padding: 3vw;
+    .mobile-content {
+      width: 100%;
+      background: url('../../assets/images/mobile-detail-card-bg.png') no-repeat center center;
+      height: 100%;
+      display: flex;
+      flex-direction: column;
+      .pic {
+        width: 100%;
+        height: 40%;
+        img {
+          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;
+        }
+        .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;
+        }
+      }
+    }
+  }
+}
+}
 </style>

src/pages/ruins/index.vue

@@ -1,67 +1,77 @@
 <!-- 场馆漫游 -->
 <template>
-<div class='layout'>
+  <div class="layout">
+    <div class="title">珠海市红色革命遗址</div>
     <div class="cards">
-        <swCard></swCard>
+      <swCard></swCard>
     </div>
-</div>
+  </div>
 </template>
 
 <script>
-import swCard from '@/components/swCard'
+import swCard from "@/components/swCard";
 export default {
-components:{
-    swCard
-},
-data() {
-//这里存放数据
-return {
-
+  components: {
+    swCard,
+  },
+  data() {
+    //这里存放数据
+    return {};
+  },
+  //监听属性 类似于data概念
+  computed: {},
+  //监控data中的数据变化
+  watch: {},
+  //方法集合
+  methods: {},
+  //生命周期 - 创建完成（可以访问当前this实例）
+  created() {},
+  //生命周期 - 挂载完成（可以访问DOM元素）
+  mounted() {},
+  beforeCreate() {}, //生命周期 - 创建之前
+  beforeMount() {}, //生命周期 - 挂载之前
+  beforeUpdate() {}, //生命周期 - 更新之前
+  updated() {}, //生命周期 - 更新之后
+  beforeDestroy() {}, //生命周期 - 销毁之前
+  destroyed() {}, //生命周期 - 销毁完成
+  activated() {}, //如果页面有keep-alive缓存功能，这个函数会触发
 };
-},
-//监听属性 类似于data概念
-computed: {},
-//监控data中的数据变化
-watch: {},
-//方法集合
-methods: {
-
-},
-//生命周期 - 创建完成（可以访问当前this实例）
-created() {
-
-},
-//生命周期 - 挂载完成（可以访问DOM元素）
-mounted() {
-
-},
-beforeCreate() {}, //生命周期 - 创建之前
-beforeMount() {}, //生命周期 - 挂载之前
-beforeUpdate() {}, //生命周期 - 更新之前
-updated() {}, //生命周期 - 更新之后
-beforeDestroy() {}, //生命周期 - 销毁之前
-destroyed() {}, //生命周期 - 销毁完成
-activated() {}, //如果页面有keep-alive缓存功能，这个函数会触发
-}
 </script>
 <style lang='less' scoped>
 //@import url(); 引入公共css类
 .layout {
+  width: 100%;
+  height: 100%;
+  background: url("../../assets/images/cards-bg.png") center center no-repeat;
+  background-size: 100% 100%;
+  overflow: hidden;
+  .title {
+    font-size: 2vw;
+    text-align: center;
+    font-family: Source Han Sans CN;
+    font-weight: bold;
+    color: #9c0012;
+    opacity: 1;
+    margin-top:5vw;
+  }
+  .cards {
+    margin: 2vw auto;
+  }
+}
+
+@media screen and (max-width: 1024px) {
+  .layout {
     width: 100%;
     height: 100%;
-    background: url('../../assets/images/inner-bg.png');
-    background-size: cover;
-    overflow: hidden;
-    background-clip: 100% 100%;
-    &::before {
-        content:url('../../assets/images/bottom_icon2.png');
-        position:absolute;
-        bottom:0;
-        right:0;
+    background: url("../../assets/images/mobile-card-bg.png") center center no-repeat;
+    background-size: 100% 100%;
+    .title {
+        margin-top:20vw;
+        font-size: 5vw;
     }
     .cards {
-        margin:180px auto;
+      margin: 2vw auto;
     }
+  }
 }
-    
 </style>

src/router/index.js

@@ -13,8 +13,8 @@ VueRouter.prototype.push = function push (location) {
   },
   {
     path: '/index',
-    name: 'Main',
-    component: () => import('../pages/Main/index.vue')
+    name: 'Index',
+    component: () => import('../pages/index/index.vue')
   },
   {
     path: '/ruins',