万物墙静态页面

package-lock.json

@@ -1755,6 +1755,63 @@
           "integrity": "sha1-/q7SVZc9LndVW4PbwIhRpsY1IPo=",
           "dev": true
         },
+        "ansi-styles": {
+          "version": "4.3.0",
+          "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-4.3.0.tgz",
+          "integrity": "sha512-zbB9rCJAT1rbjiVDb2hqKFHNYLxgtk8NURxZ3IZwD3F6NtxbXZQCnnSi1Lkx+IDohdPlFp222wVALIheZJQSEg==",
+          "dev": true,
+          "optional": true,
+          "requires": {
+            "color-convert": "^2.0.1"
+          }
+        },
+        "chalk": {
+          "version": "4.1.2",
+          "resolved": "https://registry.npmjs.org/chalk/-/chalk-4.1.2.tgz",
+          "integrity": "sha512-oKnbhFyRIXpUuez8iBMmyEa4nbj4IOQyuhc/wy9kY7/WVPcwIO9VA668Pu8RkO7+0G76SLROeyw9CpQ061i4mA==",
+          "dev": true,
+          "optional": true,
+          "requires": {
+            "ansi-styles": "^4.1.0",
+            "supports-color": "^7.1.0"
+          }
+        },
+        "color-convert": {
+          "version": "2.0.1",
+          "resolved": "https://registry.npmjs.org/color-convert/-/color-convert-2.0.1.tgz",
+          "integrity": "sha512-RRECPsj7iu/xb5oKYcsFHSppFNnsj/52OVTRKb4zP5onXwVF3zVmmToNcOfGC+CRDpfK/U584fMg38ZHCaElKQ==",
+          "dev": true,
+          "optional": true,
+          "requires": {
+            "color-name": "~1.1.4"
+          }
+        },
+        "color-name": {
+          "version": "1.1.4",
+          "resolved": "https://registry.npmjs.org/color-name/-/color-name-1.1.4.tgz",
+          "integrity": "sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA==",
+          "dev": true,
+          "optional": true
+        },
+        "has-flag": {
+          "version": "4.0.0",
+          "resolved": "https://registry.npmjs.org/has-flag/-/has-flag-4.0.0.tgz",
+          "integrity": "sha512-EykJT/Q1KjTWctppgIAgfSO0tKVuZUjhgMr17kqTumMl6Afv3EISleU7qZUzoXDFTAHTDC4NOoG/ZxU3EvlMPQ==",
+          "dev": true,
+          "optional": true
+        },
+        "loader-utils": {
+          "version": "2.0.0",
+          "resolved": "https://registry.npmjs.org/loader-utils/-/loader-utils-2.0.0.tgz",
+          "integrity": "sha512-rP4F0h2RaWSvPEkD7BLDFQnvSf+nK+wr3ESUjNTyAGobqrijmW92zc+SO6d4p4B1wh7+B/Jg1mkQe5NYUEHtHQ==",
+          "dev": true,
+          "optional": true,
+          "requires": {
+            "big.js": "^5.2.2",
+            "emojis-list": "^3.0.0",
+            "json5": "^2.1.2"
+          }
+        },
         "ssri": {
           "version": "8.0.1",
           "resolved": "https://registry.nlark.com/ssri/download/ssri-8.0.1.tgz?cache=0&sync_timestamp=1621364735533&other_urls=https%3A%2F%2Fregistry.nlark.com%2Fssri%2Fdownload%2Fssri-8.0.1.tgz",
@@ -1763,6 +1820,28 @@
           "requires": {
             "minipass": "^3.1.1"
           }
+        },
+        "supports-color": {
+          "version": "7.2.0",
+          "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-7.2.0.tgz",
+          "integrity": "sha512-qpCAvRl9stuOHveKsn7HncJRvv501qIacKzQlO/+Lwxc9+0q2wLyv4Dfvt80/DPn2pqOBsJdDiogXGR9+OvwRw==",
+          "dev": true,
+          "optional": true,
+          "requires": {
+            "has-flag": "^4.0.0"
+          }
+        },
+        "vue-loader-v16": {
+          "version": "npm:vue-loader@16.5.0",
+          "resolved": "https://registry.npmjs.org/vue-loader/-/vue-loader-16.5.0.tgz",
+          "integrity": "sha512-WXh+7AgFxGTgb5QAkQtFeUcHNIEq3PGVQ8WskY5ZiFbWBkOwcCPRs4w/2tVyTbh2q6TVRlO3xfvIukUtjsu62A==",
+          "dev": true,
+          "optional": true,
+          "requires": {
+            "chalk": "^4.1.0",
+            "hash-sum": "^2.0.0",
+            "loader-utils": "^2.0.0"
+          }
         }
       }
     },
@@ -11336,87 +11415,6 @@
         }
       }
     },
-    "vue-loader-v16": {
-      "version": "npm:vue-loader@16.5.0",
-      "resolved": "https://registry.nlark.com/vue-loader/download/vue-loader-16.5.0.tgz?cache=0&sync_timestamp=1628666788607&other_urls=https%3A%2F%2Fregistry.nlark.com%2Fvue-loader%2Fdownload%2Fvue-loader-16.5.0.tgz",
-      "integrity": "sha1-CcTgcSRmiZ40uZpoZSTxkWX7KJI=",
-      "dev": true,
-      "optional": true,
-      "requires": {
-        "chalk": "^4.1.0",
-        "hash-sum": "^2.0.0",
-        "loader-utils": "^2.0.0"
-      },
-      "dependencies": {
-        "ansi-styles": {
-          "version": "4.3.0",
-          "resolved": "https://registry.nlark.com/ansi-styles/download/ansi-styles-4.3.0.tgz?cache=0&sync_timestamp=1618995625950&other_urls=https%3A%2F%2Fregistry.nlark.com%2Fansi-styles%2Fdownload%2Fansi-styles-4.3.0.tgz",
-          "integrity": "sha1-7dgDYornHATIWuegkG7a00tkiTc=",
-          "dev": true,
-          "optional": true,
-          "requires": {
-            "color-convert": "^2.0.1"
-          }
-        },
-        "chalk": {
-          "version": "4.1.2",
-          "resolved": "https://registry.nlark.com/chalk/download/chalk-4.1.2.tgz?cache=0&sync_timestamp=1627646614989&other_urls=https%3A%2F%2Fregistry.nlark.com%2Fchalk%2Fdownload%2Fchalk-4.1.2.tgz",
-          "integrity": "sha1-qsTit3NKdAhnrrFr8CqtVWoeegE=",
-          "dev": true,
-          "optional": true,
-          "requires": {
-            "ansi-styles": "^4.1.0",
-            "supports-color": "^7.1.0"
-          }
-        },
-        "color-convert": {
-          "version": "2.0.1",
-          "resolved": "https://registry.npm.taobao.org/color-convert/download/color-convert-2.0.1.tgz",
-          "integrity": "sha1-ctOmjVmMm9s68q0ehPIdiWq9TeM=",
-          "dev": true,
-          "optional": true,
-          "requires": {
-            "color-name": "~1.1.4"
-          }
-        },
-        "color-name": {
-          "version": "1.1.4",
-          "resolved": "https://registry.npm.taobao.org/color-name/download/color-name-1.1.4.tgz",
-          "integrity": "sha1-wqCah6y95pVD3m9j+jmVyCbFNqI=",
-          "dev": true,
-          "optional": true
-        },
-        "has-flag": {
-          "version": "4.0.0",
-          "resolved": "https://registry.nlark.com/has-flag/download/has-flag-4.0.0.tgz",
-          "integrity": "sha1-lEdx/ZyByBJlxNaUGGDaBrtZR5s=",
-          "dev": true,
-          "optional": true
-        },
-        "loader-utils": {
-          "version": "2.0.0",
-          "resolved": "https://registry.npm.taobao.org/loader-utils/download/loader-utils-2.0.0.tgz",
-          "integrity": "sha1-5MrOW4FtQloWa18JfhDNErNgZLA=",
-          "dev": true,
-          "optional": true,
-          "requires": {
-            "big.js": "^5.2.2",
-            "emojis-list": "^3.0.0",
-            "json5": "^2.1.2"
-          }
-        },
-        "supports-color": {
-          "version": "7.2.0",
-          "resolved": "https://registry.nlark.com/supports-color/download/supports-color-7.2.0.tgz?cache=0&sync_timestamp=1626703400240&other_urls=https%3A%2F%2Fregistry.nlark.com%2Fsupports-color%2Fdownload%2Fsupports-color-7.2.0.tgz",
-          "integrity": "sha1-G33NyzK4E4gBs+R4umpRyqiWSNo=",
-          "dev": true,
-          "optional": true,
-          "requires": {
-            "has-flag": "^4.0.0"
-          }
-        }
-      }
-    },
     "vue-style-loader": {
       "version": "4.1.3",
       "resolved": "https://registry.npm.taobao.org/vue-style-loader/download/vue-style-loader-4.1.3.tgz",

src/App.vue

@@ -14,6 +14,11 @@ export default {
 </script>
 
 <style>
+* {
+  margin: 0;
+  padding: 0;
+  box-sizing: border-box;
+}
 body{
   margin:0;
   text-align: center;

src/components/AllWall.vue

@@ -0,0 +1,74 @@
+<!--  -->
+<template>
+  <div class="AllWall">
+    <div class="size">
+      <img src="../assets/images/AllWall/size.png" alt="" />
+      <img src="../assets/images/AllWall/sizebac.png" alt="" />
+    </div>
+    <GuideButton :titles="titles" :jumpUrl="jumpUrl" />
+  </div>
+</template>
+
+<script>
+import GuideButton from "./GuideButton.vue";
+
+export default {
+  name: "AllWall",
+  components: {
+    GuideButton,
+  },
+  data() {
+    //这里存放数据
+    return {
+      titles: ["高淳博物馆", "德国博物馆", "南京博物馆","南通博物馆", "广东省博物馆"],
+      jumpUrl: [
+        "javascript:;","javascript:;","javascript:;",'javascript:;','javascript:;'
+      ],
+    };
+  },
+  //监听属性 类似于data概念
+  computed: {},
+  //监控data中的数据变化
+  watch: {},
+  //方法集合
+  methods: {},
+  //生命周期 - 创建完成（可以访问当前this实例）
+  created() {},
+  //生命周期 - 挂载完成（可以访问DOM元素）
+  mounted() {},
+  beforeCreate() {}, //生命周期 - 创建之前
+  beforeMount() {}, //生命周期 - 挂载之前
+  beforeUpdate() {}, //生命周期 - 更新之前
+  updated() {}, //生命周期 - 更新之后
+  beforeUnmount() {}, //生命周期 - 销毁之前
+  unmounted() {}, //生命周期 - 销毁完成
+  activated() {}, //如果页面有keep-alive缓存功能，这个函数会触发
+};
+</script>
+<style  scoped>
+.AllWall {
+  position: relative;
+  width: 100vw;
+  height: 100vh;
+  background: url("../assets/images/AllWall/bac.png") no-repeat;
+}
+.size {
+  display: flex;
+  align-items: center;
+  flex-direction: column;
+  height: 118px;
+  width: 100%;
+}
+.size img:nth-of-type(1) {
+  margin-top: 27px;
+}
+#guide-button {
+  position: absolute;
+  bottom: 185px;
+  left: 50%;
+  transform: translateX(-50%);
+}
+
+
+
+</style>

src/components/GuideButton.vue

@@ -1,6 +1,26 @@
 <template>
     <div id="guide-button">
         <template v-if="showButtonList">
+
+        <div id="old-exhibition1" v-if="titles[3]">
+            <img class="exbutton" 
+                :class="[btnIndex == 3?'hit':'']"
+                src="@/assets/images/exbutton.png"/>
+            <div class="button-text black-text">
+                <a :href="jumpUrl[3]"  
+                    :class="[btnIndex == 3?'hit':'']">
+                    {{titles[3]}}</a></div></div>
+
+        <div id="old-exhibition2" v-if="titles[4]">
+            <img class="exbutton" 
+                :class="[btnIndex == 4?'hit':'']"
+                src="@/assets/images/exbutton.png"/>
+            <div class="button-text black-text">
+                <a :href="jumpUrl[4]"  
+                    :class="[btnIndex == 4?'hit':'']">
+                    {{titles[4]}}</a></div></div>
+
+
         <div id="old-exhibition">
             <img class="exbutton" 
                 :class="[btnIndex == 2?'hit':'']"
@@ -40,6 +60,14 @@
 
 <script>
 export default {
+    props:{
+        titles:{
+            type:Array
+        },
+        jumpUrl:{
+            type:Array
+        }
+    },
     name:'GuideButton',
     data(){
         return{
@@ -48,11 +76,11 @@ export default {
             timeOutEvent: 0, // 长按事件定时器
             startPageY:0,
             currentPageY:0,
-            btnHeight:40,
-            titles:['点击看展','参加云展','往届博博会'],
-            jumpUrl:['',
-              'http://www.expo-museums.com/Index/history/column/143',
-              'http://www.expo-museums.com/Index/column/id/162'],
+            btnHeight:40
+            // titles:['点击看展','参加云展','往届博博会'],
+            // jumpUrl:['',
+            //   'http://www.expo-museums.com/Index/history/column/143',
+            //   'http://www.expo-museums.com/Index/column/id/162'],
         }
     },
     methods:{
@@ -76,7 +104,7 @@ export default {
                 _this.timeOutEvent = 0
                 console.log('处理长按事件');
                 this.showButtonList = true;
-            },1500)
+            },1000)
         },
         goMove(event) {
             event.preventDefault();
@@ -186,6 +214,18 @@ div.black-text{
     height: 4.3rem;
     z-index:999;
 }
+#old-exhibition1,#old-exhibition2 {
+    position: absolute;
+    top:-6vh;
+    left: 50%;
+    transform: translateX(-50%);
+    width: 18.9rem;
+    height: 4.3rem;
+    z-index:999;
+}
+#old-exhibition2 {
+    top: -12vh;
+}
 a{
     text-decoration: none;
     color:inherit;

src/components/GuidePage.vue

@@ -34,11 +34,13 @@
             <img class="img-contact" src="@/assets/images/wechatIcon.png" />
             商务合作微信：
           </div>
-          <div class="qrcode"><img class="img-qrcode" src="@/assets/images/qrcode.png" /></div>
+          <div class="qrcode">
+            <img class="img-qrcode" src="@/assets/images/qrcode.png" />
+          </div>
         </div>
       </div>
     </div>
-    <guide-button></guide-button>
+    <GuideButton :titles='titles' :jumpUrl='jumpUrl'/>
   </div>
 </template>
 
@@ -49,6 +51,12 @@ export default {
   name: "GuidePage",
   data() {
     return {
+      titles: ["点击看展", "参加云展", "往届博博会"],
+      jumpUrl: [
+        "javascript:;",
+        "http://www.expo-museums.com/Index/history/column/143",
+        "http://www.expo-museums.com/Index/column/id/162",
+      ],
       isShowContact: false,
       phones: ["13581625033（黎先生）", "15733737800（刘小姐）"],
       email: "sales@4dage.com",
@@ -69,7 +77,7 @@ export default {
       if (
         !contactId.includes(event.target.id) &&
         ![].slice.call(event.target.classList).includes("contact-content") &&
-        ![].slice.call(event.target.classList).includes("contact-title") && 
+        ![].slice.call(event.target.classList).includes("contact-title") &&
         ![].slice.call(event.target.classList).includes("img-qrcode")
       ) {
         this.isShowContact = false;
@@ -84,6 +92,9 @@ export default {
 <!-- Add "scoped" attribute to limit CSS to this component only -->
 <style scoped>
 #guide {
+  width: 100vw;
+  height: 100vh;
+  background-color: aqua;
   position: relative;
   font-size: 16px;
 }
@@ -92,6 +103,7 @@ export default {
   opacity: 0.5;
 }
 #contact {
+  z-index: 999;
   position: fixed;
   right: 0.5rem;
   top: 1rem;
@@ -189,7 +201,7 @@ img.img-contact {
 
 #guide-button {
   position: absolute;
-  top: 38.1rem;
+  top: 33rem;
   left: 50%;
   width: 18.9rem;
   height: 9.4rem;

src/view/Home.vue

@@ -1,18 +1,21 @@
 <template>
-    <GuidePage></GuidePage>
+    <GuidePage />
+    <AllWall />
     <div id="posters">
-        <tradition></tradition>
+        <Tradition />
     </div>
 </template>
 
 <script>
 import Tradition from '@/components/Tradition.vue'
 import GuidePage from '@/components/GuidePage.vue'
+import AllWall from '@/components/AllWall.vue'
 export default {
     name:'Home',
     components: {
         GuidePage,
         Tradition,
+        AllWall
     }
 }
 </script>