up

package-lock.json

@@ -10,6 +10,7 @@
       "dependencies": {
         "core-js": "^3.6.5",
         "vue": "^2.6.11",
+        "vue-awesome-swiper": "^4.1.1",
         "vue-router": "^3.2.0"
       },
       "devDependencies": {
@@ -5500,6 +5501,15 @@
         "entities": "^2.0.0"
       }
     },
+    "node_modules/dom7": {
+      "version": "2.1.5",
+      "resolved": "https://registry.npmmirror.com/dom7/-/dom7-2.1.5.tgz",
+      "integrity": "sha512-xnhwVgyOh3eD++/XGtH+5qBwYTgCm0aW91GFgPJ3XG+jlsRLyJivnbP0QmUBFhI+Oaz9FV0s7cxgXHezwOEBYA==",
+      "peer": true,
+      "dependencies": {
+        "ssr-window": "^2.0.0"
+      }
+    },
     "node_modules/domain-browser": {
       "version": "1.2.0",
       "resolved": "https://registry.npmmirror.com/domain-browser/-/domain-browser-1.2.0.tgz",
@@ -11792,6 +11802,12 @@
         "node": ">=0.10.0"
       }
     },
+    "node_modules/ssr-window": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmmirror.com/ssr-window/-/ssr-window-2.0.0.tgz",
+      "integrity": "sha512-NXzN+/HPObKAx191H3zKlYomE5WrVIkoCB5IaSdvKokxTpjBdWfr0RaP+1Z5KOfDT0ZVz+2tdtiBkhsEQ9p+0A==",
+      "peer": true
+    },
     "node_modules/ssri": {
       "version": "8.0.1",
       "resolved": "https://registry.npmmirror.com/ssri/-/ssri-8.0.1.tgz",
@@ -12184,6 +12200,20 @@
         "boolbase": "~1.0.0"
       }
     },
+    "node_modules/swiper": {
+      "version": "5.4.5",
+      "resolved": "https://registry.npmmirror.com/swiper/-/swiper-5.4.5.tgz",
+      "integrity": "sha512-7QjA0XpdOmiMoClfaZ2lYN6ICHcMm72LXiY+NF4fQLFidigameaofvpjEEiTQuw3xm5eksG5hzkaRsjQX57vtA==",
+      "hasInstallScript": true,
+      "peer": true,
+      "dependencies": {
+        "dom7": "^2.1.5",
+        "ssr-window": "^2.0.0"
+      },
+      "engines": {
+        "node": ">= 4.7.0"
+      }
+    },
     "node_modules/tapable": {
       "version": "1.1.3",
       "resolved": "https://registry.npmmirror.com/tapable/-/tapable-1.1.3.tgz",
@@ -13077,6 +13107,18 @@
       "resolved": "https://registry.npmmirror.com/vue/-/vue-2.6.14.tgz",
       "integrity": "sha512-x2284lgYvjOMj3Za7kqzRcUSxBboHqtgRE2zlos1qWaOye5yUmHn42LB1250NJBLRwEcdrB0JRwyPTEPhfQjiQ=="
     },
+    "node_modules/vue-awesome-swiper": {
+      "version": "4.1.1",
+      "resolved": "https://registry.npmmirror.com/vue-awesome-swiper/-/vue-awesome-swiper-4.1.1.tgz",
+      "integrity": "sha512-50um10t6N+lJaORkpwSi1wWuMmBI1sgFc9Znsi5oUykw2cO5DzLaBHcO2JNX21R+Ue4TGoIJDhhxjBHtkFrTEQ==",
+      "engines": {
+        "node": ">=8"
+      },
+      "peerDependencies": {
+        "swiper": "^5.2.0",
+        "vue": "2.x"
+      }
+    },
     "node_modules/vue-hot-reload-api": {
       "version": "2.3.4",
       "resolved": "https://registry.npmmirror.com/vue-hot-reload-api/-/vue-hot-reload-api-2.3.4.tgz",
@@ -16044,7 +16086,8 @@
       "version": "4.5.19",
       "resolved": "https://registry.npmmirror.com/@vue/cli-plugin-vuex/-/cli-plugin-vuex-4.5.19.tgz",
       "integrity": "sha512-DUmfdkG3pCdkP7Iznd87RfE9Qm42mgp2hcrNcYQYSru1W1gX2dG/JcW8bxmeGSa06lsxi9LEIc/QD1yPajSCZw==",
-      "dev": true
+      "dev": true,
+      "requires": {}
     },
     "@vue/cli-service": {
       "version": "4.5.19",
@@ -16175,7 +16218,8 @@
       "version": "1.1.2",
       "resolved": "https://registry.npmmirror.com/@vue/preload-webpack-plugin/-/preload-webpack-plugin-1.1.2.tgz",
       "integrity": "sha512-LIZMuJk38pk9U9Ur4YzHjlIyMuxPlACdBIHH9/nGYVTsaGKOSnSuELiE8vS9wa+dJpIYspYUOqk+L1Q4pgHQHQ==",
-      "dev": true
+      "dev": true,
+      "requires": {}
     },
     "@vue/web-component-wrapper": {
       "version": "1.3.0",
@@ -16414,13 +16458,15 @@
       "version": "1.0.1",
       "resolved": "https://registry.npmmirror.com/ajv-errors/-/ajv-errors-1.0.1.tgz",
       "integrity": "sha512-DCRfO/4nQ+89p/RK43i8Ezd41EqdGIU4ld7nGF8OQ14oc/we5rEntLCUa7+jrn3nn83BosfwZA0wb4pon2o8iQ==",
-      "dev": true
+      "dev": true,
+      "requires": {}
     },
     "ajv-keywords": {
       "version": "3.5.2",
       "resolved": "https://registry.npmmirror.com/ajv-keywords/-/ajv-keywords-3.5.2.tgz",
       "integrity": "sha512-5p6WTN0DdTGVQk6VjcEju19IgaHudalcfabD7yhDGeA6bcQnmL+CpveLJq/3hvfwd1aof6L386Ougkx6RfyMIQ==",
-      "dev": true
+      "dev": true,
+      "requires": {}
     },
     "alphanum-sort": {
       "version": "1.0.2",
@@ -18672,6 +18718,15 @@
         "entities": "^2.0.0"
       }
     },
+    "dom7": {
+      "version": "2.1.5",
+      "resolved": "https://registry.npmmirror.com/dom7/-/dom7-2.1.5.tgz",
+      "integrity": "sha512-xnhwVgyOh3eD++/XGtH+5qBwYTgCm0aW91GFgPJ3XG+jlsRLyJivnbP0QmUBFhI+Oaz9FV0s7cxgXHezwOEBYA==",
+      "peer": true,
+      "requires": {
+        "ssr-window": "^2.0.0"
+      }
+    },
     "domain-browser": {
       "version": "1.2.0",
       "resolved": "https://registry.npmmirror.com/domain-browser/-/domain-browser-1.2.0.tgz",
@@ -23925,6 +23980,12 @@
         "tweetnacl": "~0.14.0"
       }
     },
+    "ssr-window": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmmirror.com/ssr-window/-/ssr-window-2.0.0.tgz",
+      "integrity": "sha512-NXzN+/HPObKAx191H3zKlYomE5WrVIkoCB5IaSdvKokxTpjBdWfr0RaP+1Z5KOfDT0ZVz+2tdtiBkhsEQ9p+0A==",
+      "peer": true
+    },
     "ssri": {
       "version": "8.0.1",
       "resolved": "https://registry.npmmirror.com/ssri/-/ssri-8.0.1.tgz",
@@ -24261,6 +24322,16 @@
         }
       }
     },
+    "swiper": {
+      "version": "5.4.5",
+      "resolved": "https://registry.npmmirror.com/swiper/-/swiper-5.4.5.tgz",
+      "integrity": "sha512-7QjA0XpdOmiMoClfaZ2lYN6ICHcMm72LXiY+NF4fQLFidigameaofvpjEEiTQuw3xm5eksG5hzkaRsjQX57vtA==",
+      "peer": true,
+      "requires": {
+        "dom7": "^2.1.5",
+        "ssr-window": "^2.0.0"
+      }
+    },
     "tapable": {
       "version": "1.1.3",
       "resolved": "https://registry.npmmirror.com/tapable/-/tapable-1.1.3.tgz",
@@ -24992,6 +25063,12 @@
       "resolved": "https://registry.npmmirror.com/vue/-/vue-2.6.14.tgz",
       "integrity": "sha512-x2284lgYvjOMj3Za7kqzRcUSxBboHqtgRE2zlos1qWaOye5yUmHn42LB1250NJBLRwEcdrB0JRwyPTEPhfQjiQ=="
     },
+    "vue-awesome-swiper": {
+      "version": "4.1.1",
+      "resolved": "https://registry.npmmirror.com/vue-awesome-swiper/-/vue-awesome-swiper-4.1.1.tgz",
+      "integrity": "sha512-50um10t6N+lJaORkpwSi1wWuMmBI1sgFc9Znsi5oUykw2cO5DzLaBHcO2JNX21R+Ue4TGoIJDhhxjBHtkFrTEQ==",
+      "requires": {}
+    },
     "vue-hot-reload-api": {
       "version": "2.3.4",
       "resolved": "https://registry.npmmirror.com/vue-hot-reload-api/-/vue-hot-reload-api-2.3.4.tgz",

package.json

@@ -9,7 +9,8 @@
   "dependencies": {
     "core-js": "^3.6.5",
     "vue": "^2.6.11",
-    "vue-router": "^3.2.0"
+    "vue-router": "^3.2.0",
+    "vue-awesome-swiper": "^4.1.1"
   },
   "devDependencies": {
     "@vue/cli-plugin-babel": "~4.5.13",

src/router/index.js

@@ -12,11 +12,6 @@ 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

@@ -7,7 +7,7 @@
     </div>
 
     <!-- 中间内容---使用动态组件 -->
-    <div class="main">
+    <div class="main" :class="{ mainAc: myMenucShow }">
       <keep-alive>
         <component
           v-if="topImgInd !== 1 && topImgInd !== 8"
@@ -17,7 +17,7 @@
     </div>
 
     <!-- 菜单图片 -->
-    <div class="menu" @click="$router.push('/menu')">
+    <div class="menu" @click="myMenucShow = true">
       <img src="../assets/img/menu.png" alt="" />
     </div>
 
@@ -38,10 +38,15 @@
     <div class="next" v-if="topImgInd < data.length" @click="topImgInd++">
       下一章节
     </div>
+    <!-- 卡片 -->
+    <div class="myMenuc" :class="{ myMenucAc: myMenucShow }">
+      <Menuc @upInfo="upInfo" />
+    </div>
   </div>
 </template>
 
 <script>
+import Menuc from "./menuc/index.vue";
 import Son2 from "../components/son2.vue";
 import Son3 from "../components/son3.vue";
 import Son4 from "../components/son4.vue";
@@ -50,10 +55,11 @@ import Son6 from "../components/son6.vue";
 import Son7 from "../components/son7.vue";
 export default {
   name: "Home",
-  components: { Son2, Son3, Son4, Son5, Son6, Son7 },
+  components: { Son2, Son3, Son4, Son5, Son6, Son7, Menuc },
   data() {
     //这里存放数据
     return {
+      myMenucShow: false,
       data: [
         { id: 1, name: "序言" },
         { id: 2, name: "中西贸易" },
@@ -77,7 +83,14 @@ export default {
     },
   },
   //方法集合
-  methods: {},
+  methods: {
+    upInfo(id) {
+      this.myMenucShow = false;
+      this.topImgInd = id;
+      if (id === this.topImgInd)
+        window.scrollTo({ top: 0, behavior: "smooth" });
+    },
+  },
   //生命周期 - 创建完成（可以访问当前this实例）
   created() {},
   //生命周期 - 挂载完成（可以访问DOM元素）
@@ -102,9 +115,14 @@ export default {
       vertical-align: middle;
     }
   }
-  .main{
-    background: url('../assets/img/bg.jpg');
+  .main {
+    background: url("../assets/img/bg.jpg");
     background-size: cover;
+    opacity: 1;
+    transition: opacity 0.5s;
+  }
+  .mainAc {
+    opacity: 0;
   }
   .menu {
     text-align: right;
@@ -170,6 +188,22 @@ export default {
     background: url("../assets/img/next.png") left center no-repeat;
     background-size: 20px 20px;
   }
+  .myMenuc {
+    transition: opacity 1s;
+    z-index: 999;
+    opacity: 0;
+    background: url("../assets/img/bodyBac.jpg");
+    pointer-events: none;
+    position: fixed;
+    width: 100vw;
+    height: 100vh;
+    top: 0;
+    left: 0;
+  }
+  .myMenucAc {
+    opacity: 1;
+    pointer-events: auto;
+  }
 }
 .last {
   padding-bottom: 80px;

src/views/menu/index.vue

@@ -1,51 +0,0 @@
-<!--  -->
-<template>
-<div class='menu'>
-  <div class="conten"></div>
-</div>
-</template>
-
-<script>
-export default {
-name:'menu',
-components: {},
-data() {
-//这里存放数据
-return {
-
-};
-},
-//监听属性 类似于data概念
-computed: {},
-//监控data中的数据变化
-watch: {},
-//方法集合
-methods: {
-
-},
-//生命周期 - 创建完成（可以访问当前this实例）
-created() {
-
-},
-//生命周期 - 挂载完成（可以访问DOM元素）
-mounted() {
-
-},
-beforeCreate() {}, //生命周期 - 创建之前
-beforeMount() {}, //生命周期 - 挂载之前
-beforeUpdate() {}, //生命周期 - 更新之前
-updated() {}, //生命周期 - 更新之后
-beforeDestroy() {}, //生命周期 - 销毁之前
-destroyed() {}, //生命周期 - 销毁完成
-activated() {}, //如果页面有keep-alive缓存功能，这个函数会触发
-}
-</script>
-<style lang='less' scoped>
-.menu{
-  min-height: 100vh;
-  .conten{
-    
-  }
-}
-
-</style>

src/views/menuc/index.vue

@@ -0,0 +1,160 @@
+<!--  -->
+<template>
+  <div class="mymenu">
+    <div class="conten" ref="bgsw" v-swiper:mySwiper="swiperOptions">
+      <ul class="swiper-wrapper">
+        <li class="bacMh"></li>
+        <li class="swiper-slide" v-for="item in data" :key="item.id">
+          <div class="img"  @click="$emit('upInfo',item.id)">
+            <img :src="require(`@/assets/img/${item.id}.png`)" alt="" />
+          </div>
+        </li>
+      </ul>
+    </div>
+  </div>
+</template>
+
+<script>
+import { directive } from "vue-awesome-swiper";
+import "swiper/css/swiper.css";
+export default {
+  name: "menuc",
+  components: {},
+  data() {
+    //这里存放数据
+    return {
+      data: [
+        { id: 1, name: "序言" },
+        { id: 2, name: "中西贸易" },
+        { id: 3, name: "鸦片贸易" },
+        { id: 4, name: "鸦片生产" },
+        { id: 5, name: "鸦片祸害" },
+        { id: 6, name: "林则徐禁烟" },
+        { id: 7, name: "虎门销烟" },
+        { id: 8, name: "结束语" },
+      ],
+    };
+  },
+  directives: {
+    swiper: directive,
+  },
+  //监听属性 类似于data概念
+  computed: {
+    swiper() {
+      return this.$refs.bgsw.swiper;
+    },
+    swiperOptions() {
+      let that = this;
+      return {
+        watchSlidesProgress: true,
+        effect: that.g_isLandscape ? "coverflow" : "slide",
+        slidesPerView: "auto",
+        centeredSlides: true,
+        coverflowEffect: {
+          rotate: 0,
+          stretch: 124,
+          depth: 50,
+          modifier: 2.6,
+          slideShadows: false,
+        },
+        loop: false,
+        on: that.g_isLandscape
+          ? {}
+          : {
+              progress: function () {
+                for (let i = 0; i < this.slides.length; i++) {
+                  var slide = this.slides.eq(i);
+                  var slideProgress = this.slides[i].progress;
+                  let modify = 1;
+                  let fixY = 0;
+
+                  if (Math.abs(slideProgress) > 1) {
+                    modify = (Math.abs(slideProgress) - 1) * 0.3 + 1;
+                  }
+                  let translateX = slideProgress * modify * 120 + "px";
+                  let translateY =
+                    fixY +
+                    (that.g_isLandscape
+                      ? Math.abs(slideProgress)
+                      : -Math.abs(slideProgress)) *
+                      35 +
+                    "px";
+
+                  let zIndex = 999 - Math.abs(Math.round(10 * slideProgress));
+                  let opacity = 1 - Math.abs(slideProgress) / 10;
+
+                  slide.transform(
+                    `translateX(${translateX}) translateY(${translateY})`
+                  );
+                  slide.css("zIndex", zIndex);
+                  slide.css("opacity", opacity);
+                  if (Math.abs(slideProgress) > 3) {
+                    slide.css("opacity", 0);
+                  }
+                }
+              },
+              setTransition: function (transition) {
+                for (var i = 0; i < this.slides.length; i++) {
+                  var slide = this.slides.eq(i);
+                  slide.transition(transition);
+                }
+              },
+            },
+      };
+    },
+  },
+  //监控data中的数据变化
+  watch: {},
+  //方法集合
+  methods: {},
+  //生命周期 - 创建完成（可以访问当前this实例）
+  created() {},
+  //生命周期 - 挂载完成（可以访问DOM元素）
+  mounted() {},
+  beforeCreate() {}, //生命周期 - 创建之前
+  beforeMount() {}, //生命周期 - 挂载之前
+  beforeUpdate() {}, //生命周期 - 更新之前
+  updated() {}, //生命周期 - 更新之后
+  beforeDestroy() {}, //生命周期 - 销毁之前
+  destroyed() {}, //生命周期 - 销毁完成
+  activated() {}, //如果页面有keep-alive缓存功能，这个函数会触发
+};
+</script>
+<style lang='less' scoped>
+.mymenu {
+  min-height: 100vh;
+  .conten {
+    width: 100%;
+    position: relative;
+    height: 100vh;
+    padding-bottom: 50px;
+    > ul {
+      width: 100%;
+      align-items: flex-end;
+      > li {
+        width: 80vw;
+        height: auto;
+        // max-height: 56vh;
+        border-radius: 5px 5px 5px 5px;
+        .img {
+          width: 100%;
+          margin-top: 0;
+
+          > img {
+            width: 100%;
+          }
+        }
+      }
+      .bacMh{
+        z-index: 998;
+        position: absolute;
+        top: 0;
+        left: 0;
+        width: 3000px;
+        height: 100vh;
+        backdrop-filter: blur(4px);
+      }
+    }
+  }
+}
+</style>