导入海报图片，完成部分”传统文化“

package-lock.json

@@ -4540,6 +4540,14 @@
         }
       }
     },
+    "dom7": {
+      "version": "2.1.5",
+      "resolved": "https://registry.npmjs.org/dom7/-/dom7-2.1.5.tgz",
+      "integrity": "sha512-xnhwVgyOh3eD++/XGtH+5qBwYTgCm0aW91GFgPJ3XG+jlsRLyJivnbP0QmUBFhI+Oaz9FV0s7cxgXHezwOEBYA==",
+      "requires": {
+        "ssr-window": "^2.0.0"
+      }
+    },
     "domain-browser": {
       "version": "1.2.0",
       "resolved": "https://registry.nlark.com/domain-browser/download/domain-browser-1.2.0.tgz",
@@ -10268,6 +10276,11 @@
         "tweetnacl": "~0.14.0"
       }
     },
+    "ssr-window": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/ssr-window/-/ssr-window-2.0.0.tgz",
+      "integrity": "sha512-NXzN+/HPObKAx191H3zKlYomE5WrVIkoCB5IaSdvKokxTpjBdWfr0RaP+1Z5KOfDT0ZVz+2tdtiBkhsEQ9p+0A=="
+    },
     "ssri": {
       "version": "6.0.2",
       "resolved": "https://registry.nlark.com/ssri/download/ssri-6.0.2.tgz?cache=0&sync_timestamp=1621364735533&other_urls=https%3A%2F%2Fregistry.nlark.com%2Fssri%2Fdownload%2Fssri-6.0.2.tgz",
@@ -10508,6 +10521,15 @@
         "util.promisify": "~1.0.0"
       }
     },
+    "swiper": {
+      "version": "5.4.5",
+      "resolved": "https://registry.npmjs.org/swiper/-/swiper-5.4.5.tgz",
+      "integrity": "sha512-7QjA0XpdOmiMoClfaZ2lYN6ICHcMm72LXiY+NF4fQLFidigameaofvpjEEiTQuw3xm5eksG5hzkaRsjQX57vtA==",
+      "requires": {
+        "dom7": "^2.1.5",
+        "ssr-window": "^2.0.0"
+      }
+    },
     "table": {
       "version": "5.4.6",
       "resolved": "https://registry.nlark.com/table/download/table-5.4.6.tgz",
@@ -11255,6 +11277,11 @@
         "@vue/shared": "3.2.6"
       }
     },
+    "vue-awesome-swiper": {
+      "version": "4.1.1",
+      "resolved": "https://registry.npmjs.org/vue-awesome-swiper/-/vue-awesome-swiper-4.1.1.tgz",
+      "integrity": "sha512-50um10t6N+lJaORkpwSi1wWuMmBI1sgFc9Znsi5oUykw2cO5DzLaBHcO2JNX21R+Ue4TGoIJDhhxjBHtkFrTEQ=="
+    },
     "vue-eslint-parser": {
       "version": "7.10.0",
       "resolved": "https://registry.nlark.com/vue-eslint-parser/download/vue-eslint-parser-7.10.0.tgz?cache=0&sync_timestamp=1627452685676&other_urls=https%3A%2F%2Fregistry.nlark.com%2Fvue-eslint-parser%2Fdownload%2Fvue-eslint-parser-7.10.0.tgz",

package.json

@@ -9,7 +9,9 @@
   },
   "dependencies": {
     "core-js": "^3.6.5",
-    "vue": "^3.0.0"
+    "swiper": "^5.4.5",
+    "vue": "^3.0.0",
+    "vue-awesome-swiper": "^4.1.1"
   },
   "devDependencies": {
     "@vue/cli-plugin-babel": "~4.5.0",

src/App.vue

@@ -1,14 +1,14 @@
 <template>
-  <GuidePage></GuidePage>
+  <Home></Home>
 </template>
 
 <script>
-import GuidePage from '@/components/GuidePage.vue'
+import Home from '@/view/Home.vue'
 
 export default {
   name: 'App',
   components: {
-    GuidePage
+    Home
   }
 }
 </script>
@@ -16,7 +16,6 @@ export default {
 <style>
 body{
   margin:0;
-  /* max-width: 768px; */
   text-align: center;
 }
 #app {
@@ -24,10 +23,8 @@ body{
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
   text-align: center;
-  color: #2c3e50;
   width:25.8rem;
   height:100%;
   margin: 0 auto;
-  background-color:cadetblue;
 }
 </style>

src/components/GuidePage.vue

@@ -1,6 +1,6 @@
 <template>
   <div id="guide" @click="openContactInfo">
-    <img id="background1" src="@/assets/images/background.png" />
+    <!-- <img id="background1" src="@/assets/images/background.png" /> -->
     <div id="contact">
       <img
         id="contactButton"

src/components/Tradition.vue

@@ -0,0 +1,96 @@
+<template>
+  <div class="swiper-container">
+    <div class="swiper-wrapper">
+      <div
+        class="swiper-slide"
+        v-for="(item, index) in postersData"
+        :key="index"
+      >
+        <!-- <img id="rightside" :src="require(`@/assets/images/rightside.png`)"/> -->
+        
+        <a :href="item.href"><img id="imgt" :src="require(`@/assets/images/posters/${item.src}`)" /></a>
+      </div>
+    </div>
+    <div class="swiper-pagination"></div>
+  </div>
+</template>
+
+<script>
+import Swiper from "swiper/js/swiper.esm.bundle";
+import "swiper/css/swiper.css";
+import { traditionPosters } from "@/data/posters";
+export default {
+  name: "Tradition",
+  data() {
+    return {
+      mySwiper: null,
+    };
+  },
+  computed: {
+    postersData() {
+      return traditionPosters;
+    },
+  },
+  mounted() {
+    //   console.log(traditionPosters[0]);
+    this.$nextTick(() => {
+      this.mySwiper = new Swiper(".swiper-container", {
+          loop : true,
+        pagination: {
+          el: ".swiper-pagination",
+          dynamicBullets: true,
+          clickable :true,
+        },
+        effect: "coverflow",
+        slidesPerView: 3,
+        centeredSlides: true,
+        coverflowEffect: {
+          rotate: 30,
+          stretch: 0,
+          depth: 160,
+          modifier: 2,
+          slideShadows: true,
+        },
+        on:{
+            click:function(){
+                
+            }
+        }
+      });
+    });
+  },
+};
+</script>
+
+<style scoped>
+.swiper-container {
+  width: 20.4rem;
+  height: 27.6rem;
+  display: flex;
+  justify-content: center;
+  align-content: center;
+}
+.swiper-slide {
+  width: 20.4rem;
+  height: 23.7rem;
+  display: flex;
+  justify-content: center;
+  align-content: center;
+}
+.swiper-slide  img {
+  width: 16.7rem;
+  height: 23.7rem;
+}
+#rightside{
+    position:absolute;
+    left:5rem;
+    width:9rem;
+}
+#imgt{
+    box-shadow: 0 6px 10px;
+}
+a{
+    text-decoration: none;
+    color:inherit;
+}
+</style>

src/data/posters.js

@@ -0,0 +1,49 @@
+let traditionPosters = [
+    {
+        name :'雍正故宫文物大展',
+        href:"https://www.4dkankan.com/showPC.html?m=JPoqsQXL" ,
+        src:"trandition (9).jpg",
+    },
+    {
+        name :'上海历史博物馆',
+        href:"https://shmuseum.4dage.com/web/#/" ,
+        src:"trandition (7).jpg",
+    },
+    {
+        name :'广东省博物馆',
+        href:"http://culture.4dage.com/guangdong_museum/web/index.html#/?m=1050" ,
+        src:"trandition (2).jpg",
+    },
+    {
+        name :'河南博物馆',
+        href:"https://www.4dkankan.com/spc.html?m=3FLQO0cwv" ,
+        src:"trandition (4).jpg",
+    },
+    {
+        name :'四川博物馆',
+        href:"http://www.4dmodel.com/SuperTwo/index.html?m=838" ,
+        src:"trandition (8).jpg",
+    },
+    {
+        name :'山东省博物馆',
+        href:"http://www.4dmodel.com/SuperTwo/index.html?m=782" ,
+        src:"trandition (6).jpg",
+    },
+    {
+        name :'中国民族博物馆',
+        href:"https://mp.weixin.qq.com/s/F49onVVc-XfJ0_uJ0_ujmA" ,
+        src:"trandition (10).jpg",
+    },
+    {
+        name :'河北博物馆',
+        href:"http://www.4dage.com/SuperPanoramic/index.html?m=19" ,
+        src:"trandition (3).jpg",
+    },
+    {
+        name :'内蒙古博物馆',
+        href:"http://www.4dage.com/SuperPanoramic/index.html?m=115" ,
+        src:"trandition (5).jpg",
+    },
+];
+
+export {traditionPosters};

src/main.js

@@ -1,4 +1,5 @@
 import { createApp } from 'vue'
 import App from './App.vue'
+
 import '../utils/rem.js'
 createApp(App).mount('#app')

src/view/Home.vue

@@ -0,0 +1,28 @@
+<template>
+    <GuidePage></GuidePage>
+    <div id="posters">
+        <tradition></tradition>
+    </div>
+</template>
+
+<script>
+import Tradition from '@/components/Tradition.vue'
+import GuidePage from '@/components/GuidePage.vue'
+export default {
+    name:'Home',
+    components: {
+        GuidePage,
+        Tradition,
+    }
+}
+</script>
+
+<style scoped>
+#posters{
+    position: relative;
+    top:50rem;
+    width:25.8rem;
+    overflow: hidden;
+}
+
+</style>