up

src/App.vue

@@ -8,7 +8,7 @@
 
 <style lang="less">
 #app {
-  background: url('./assets/img/bodyBac.jpg');
+  background: url("./assets/img/bodyBac.jpg");
   max-width: 480px;
   margin: 0 auto;
 }

src/assets/base.css

@@ -166,23 +166,32 @@ body {
   -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
 }
 
-.sonBj1{
+.sonBj1 {
   margin: 0px auto 80px;
   width: 62px;
   height: 71px;
   background: url('./img/title1.png');
   background-size: 100% 100%;
 }
-.sonBj2{
+
+.sonBj2 {
   margin: 0px auto 80px;
   width: 62px;
   height: 71px;
   background: url('./img/title2.png');
   background-size: 100% 100%;
 }
-.shuming{
+
+.shuming {
   margin: 10px 0 50px;
   text-align: center;
   font-size: 16px;
   color: #fff;
+}
+
+.videoBox>video {
+  max-width: 100%;
+  max-height: 100%;
+  background-color: #1d1e23;
+
 }

src/components/son2.vue

@@ -97,7 +97,7 @@ export default {
       }
     }
     &:nth-of-type(2n+1){
-      justify-content: end;
+      justify-content: flex-end 
     }
   }
   .noPad{

src/components/son3.vue

@@ -4,13 +4,13 @@
     <div class="videoPlayBox" v-if="videoId">
       <video controls autoplay :src="`/data/${videoId}.mp4`"></video>
       <!-- 关闭按钮 -->
-      <div class="close" @click="videoId=null"></div>
+      <div class="close" @click="videoId = null"></div>
     </div>
     <!-- 视频 -->
     <div class="videoBox">
-      <div class="vidPlay" @click="videoId='1'"></div>
-      <video src="/data/1.mp4"></video>
-      <!-- <img src="../assets/img/vid1.png" alt="" /> -->
+      <div class="vidPlay" @click="videoId = '1'"></div>
+      <!-- <video src="/data/1.mp4" autoplay loop muted></video> -->
+      <img src="../assets/img/vid1.png" alt="" />
     </div>
     <div class="shuming">《鸦片成瘾机制》</div>
     <div class="sonBj1"></div>
@@ -31,7 +31,7 @@
     </div>
     <div class="sonBj2"></div>
     <div class="videoBox">
-      <div class="vidPlay" @click="videoId='2'"></div>
+      <div class="vidPlay" @click="videoId = '2'"></div>
       <img src="../assets/img/vid2.png" alt="" />
     </div>
     <div class="shuming">《鸦片走私贸易》</div>
@@ -45,7 +45,7 @@ export default {
   data() {
     //这里存放数据
     return {
-      videoId:null,
+      videoId: null,
       data: [
         {
           id: 9,
@@ -116,7 +116,16 @@ export default {
   //监听属性 类似于data概念
   computed: {},
   //监控data中的数据变化
-  watch: {},
+  watch: {
+    videoId(val) {
+      this.$nextTick(() => {
+        // 获取body，防止滚动
+        let body = document.querySelector("body");
+        if (val === null) body.style.overflow = "auto";
+        else body.style.overflow = "hidden";
+      });
+    },
+  },
   //方法集合
   methods: {
     toInfo(id) {
@@ -138,29 +147,30 @@ export default {
 </script>
 <style lang='less' scoped>
 .son3 {
-  .videoPlayBox{
+  .videoPlayBox {
     position: fixed;
     width: 100vw;
     height: 100vh;
+    overflow: hidden;
     z-index: 999;
     top: 0;
     left: 0;
-    background-color: rgba(0,0,0,.9);
-    video{
+    background-color: rgba(0, 0, 0, 0.9);
+    video {
       position: absolute;
       width: 100%;
       max-height: 60vh;
       top: 50%;
       transform: translateY(-50%);
     }
-    .close{
+    .close {
       position: absolute;
       bottom: 20px;
       left: 50%;
       transform: translateX(-50%);
       width: 32px;
       height: 32px;
-      background: url('../assets/img/close.png');
+      background: url("../assets/img/close.png");
       background-size: 100% 100%;
     }
   }
@@ -169,14 +179,14 @@ export default {
     & > img {
       width: 100%;
     }
-    .vidPlay{
+    .vidPlay {
       position: absolute;
       top: 50%;
       left: 50%;
-      transform: translate(-50%,-50%);
+      transform: translate(-50%, -50%);
       width: 77px;
       height: 77px;
-      background: url('../assets/img/videoPlay.png');
+      background: url("../assets/img/videoPlay.png");
       background-size: 100% 100%;
     }
   }
@@ -198,7 +208,7 @@ export default {
       }
     }
     &:nth-of-type(2n + 1) {
-      justify-content: end;
+      justify-content: flex-end 
     }
   }
   .noPad {

src/components/son4.vue

@@ -81,7 +81,16 @@ export default {
   //监听属性 类似于data概念
   computed: {},
   //监控data中的数据变化
-  watch: {},
+  watch: {
+    videoId(val) {
+      this.$nextTick(() => {
+        // 获取body，防止滚动
+        let body = document.querySelector("body");
+        if (val === null) body.style.overflow = "auto";
+        else body.style.overflow = "hidden";
+      });
+    },
+  },
   //方法集合
   methods: {
     toInfo(id) {
@@ -163,7 +172,7 @@ export default {
       }
     }
     &:nth-of-type(2n + 1) {
-      justify-content: end;
+      justify-content: flex-end 
     }
   }
   .noPad {

src/components/son5.vue

@@ -5,7 +5,7 @@
       class="rowBox"
       v-for="item in data"
       :key="item.id"
-      :class="{ noPad: item.pad,centenAc:item.centen }"
+      :class="{ noPad: item.pad, centenAc: item.centen }"
     >
       <div class="row" @click="toInfo(item.id)" :style="`width: ${item.ww};`">
         <img
@@ -103,7 +103,7 @@ export default {
           ww: "227px",
           hh: "316px",
           pad: true,
-          centen:true
+          centen: true,
         },
         {
           id: 37,
@@ -158,13 +158,13 @@ export default {
       }
     }
     &:nth-of-type(2n + 1) {
-      justify-content: end;
+      justify-content: flex-end 
     }
   }
   .noPad {
     padding: 0;
   }
-  .centenAc{
+  .centenAc {
     justify-content: center !important;
   }
 }

src/components/son6.vue

@@ -82,7 +82,24 @@ export default {
   //监听属性 类似于data概念
   computed: {},
   //监控data中的数据变化
-  watch: {},
+  watch: {
+    videoId(val) {
+      this.$nextTick(() => {
+        // 获取body，防止滚动
+        let body = document.querySelector("body");
+        if (val === null) body.style.overflow = "auto";
+        else body.style.overflow = "hidden";
+      });
+    },
+    modelId(val) {
+      this.$nextTick(() => {
+        // 获取body，防止滚动
+        let body = document.querySelector("body");
+        if (val === null) body.style.overflow = "auto";
+        else body.style.overflow = "hidden";
+      });
+    },
+  },
   //方法集合
   methods: {
     toInfo(id) {
@@ -185,7 +202,7 @@ export default {
       }
     }
     &:nth-of-type(2n) {
-      justify-content: end;
+      justify-content: flex-end 
     }
   }
   .noPad {

src/components/son7.vue

@@ -8,11 +8,7 @@
     </div>
 
     <div class="sonBj1"></div>
-    <div
-      class="rowBox"
-      v-for="item in data"
-      :key="item.id"
-    >
+    <div class="rowBox" v-for="item in data" :key="item.id">
       <div class="row" @click="toInfo(item.id)" :style="`width: ${item.ww};`">
         <img
           :style="`height: ${item.hh};`"
@@ -52,14 +48,22 @@ export default {
           ww: "267px",
           hh: "149px",
         },
-
       ],
     };
   },
   //监听属性 类似于data概念
   computed: {},
   //监控data中的数据变化
-  watch: {},
+  watch: {
+    videoId(val) {
+      this.$nextTick(() => {
+        // 获取body，防止滚动
+        let body = document.querySelector("body");
+        if (val === null) body.style.overflow = "auto";
+        else body.style.overflow = "hidden";
+      });
+    },
+  },
   //方法集合
   methods: {
     toInfo(id) {

src/router/index.js

@@ -12,6 +12,11 @@ const routes = [
     path: '/info/:id',
     name: 'Info',
     component: () => import('../views/info/index.vue')
+  },
+  {
+    path: '/menu',
+    name: 'menu',
+    component: () => import('../views/menu/index.vue')
   }
 
 ]

src/views/Home.vue

@@ -17,7 +17,7 @@
     </div>
 
     <!-- 菜单图片 -->
-    <div class="menu">
+    <div class="menu" @click="$router.push('/menu')">
       <img src="../assets/img/menu.png" alt="" />
     </div>