vor 4 Jahren · a1b833eee4
--- a/.gitignore
+++ b/.gitignore
@@ -0,0 +1,23 @@
 
				+.DS_Store
			
 
				+node_modules
			
 
				+/dist
			
 
				+dist
			
 
				+
			
 
				+# local env files
			
 
				+.env.local
			
 
				+.env.*.local
			
 
				+
			
 
				+# Log files
			
 
				+npm-debug.log*
			
 
				+yarn-debug.log*
			
 
				+yarn-error.log*
			
 
				+pnpm-debug.log*
			
 
				+
			
 
				+# Editor directories and files
			
 
				+.idea
			
 
				+.vscode
			
 
				+*.suo
			
 
				+*.ntvs*
			
 
				+*.njsproj
			
 
				+*.sln
			
 
				+*.sw?
			
--- a/README.md
+++ b/README.md
@@ -0,0 +1,24 @@
 
				+# bbhmoblie
			
 
				+
			
 
				+## Project setup
			
 
				+```
			
 
				+npm install
			
 
				+```
			
 
				+
			
 
				+### Compiles and hot-reloads for development
			
 
				+```
			
 
				+npm run serve
			
 
				+```
			
 
				+
			
 
				+### Compiles and minifies for production
			
 
				+```
			
 
				+npm run build
			
 
				+```
			
 
				+
			
 
				+### Lints and fixes files
			
 
				+```
			
 
				+npm run lint
			
 
				+```
			
 
				+
			
 
				+### Customize configuration
			
 
				+See [Configuration Reference](https://cli.vuejs.org/config/).
			
--- a/babel.config.js
+++ b/babel.config.js
@@ -0,0 +1,5 @@
 
				+module.exports = {
			
 
				+  presets: [
			
 
				+    '@vue/cli-plugin-babel/preset'
			
 
				+  ]
			
 
				+}
			
--- a/bbhMobile.7z
+++ b/bbhMobile.7z
--- a/package-lock.json
+++ b/package-lock.json
--- a/package.json
+++ b/package.json
@@ -0,0 +1,44 @@
 
				+{
			
 
				+  "name": "bbhmoblie",
			
 
				+  "version": "0.1.0",
			
 
				+  "private": true,
			
 
				+  "scripts": {
			
 
				+    "serve": "vue-cli-service serve",
			
 
				+    "build": "vue-cli-service build",
			
 
				+    "lint": "vue-cli-service lint"
			
 
				+  },
			
 
				+  "dependencies": {
			
 
				+    "core-js": "^3.6.5",
			
 
				+    "swiper": "^5.4.5",
			
 
				+    "vue": "^3.0.0",
			
 
				+    "vue-awesome-swiper": "^4.1.1"
			
 
				+  },
			
 
				+  "devDependencies": {
			
 
				+    "@vue/cli-plugin-babel": "~4.5.0",
			
 
				+    "@vue/cli-plugin-eslint": "~4.5.0",
			
 
				+    "@vue/cli-service": "~4.5.0",
			
 
				+    "@vue/compiler-sfc": "^3.0.0",
			
 
				+    "babel-eslint": "^10.1.0",
			
 
				+    "eslint": "^6.7.2",
			
 
				+    "eslint-plugin-vue": "^7.0.0"
			
 
				+  },
			
 
				+  "eslintConfig": {
			
 
				+    "root": true,
			
 
				+    "env": {
			
 
				+      "node": true
			
 
				+    },
			
 
				+    "extends": [
			
 
				+      "plugin:vue/vue3-essential",
			
 
				+      "eslint:recommended"
			
 
				+    ],
			
 
				+    "parserOptions": {
			
 
				+      "parser": "babel-eslint"
			
 
				+    },
			
 
				+    "rules": {}
			
 
				+  },
			
 
				+  "browserslist": [
			
 
				+    "> 1%",
			
 
				+    "last 2 versions",
			
 
				+    "not dead"
			
 
				+  ]
			
 
				+}
			
--- a/public/favicon.ico
+++ b/public/favicon.ico
--- a/public/index.html
+++ b/public/index.html
@@ -0,0 +1,17 @@
 
				+<!DOCTYPE html>
			
 
				+<html lang="">
			
 
				+  <head>
			
 
				+    <meta charset="utf-8">
			
 
				+    <meta http-equiv="X-UA-Compatible" content="IE=edge">
			
 
				+    <meta name="viewport" content="width=device-width,initial-scale=1.0">
			
 
				+    <link rel="icon" href="<%= BASE_URL %>favicon.ico">
			
 
				+    <title>永不落幕的博博会</title>
			
 
				+  </head>
			
 
				+  <body>
			
 
				+    <noscript>
			
 
				+      <strong>We're sorry but <%= htmlWebpackPlugin.options.title %> doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
			
 
				+    </noscript>
			
 
				+    <div id="app"></div>
			
 
				+    <!-- built files will be auto injected -->
			
 
				+  </body>
			
 
				+</html>
			
--- a/src/App.vue
+++ b/src/App.vue
@@ -0,0 +1,35 @@
 
				+<template>
			
 
				+  <Home></Home>
			
 
				+</template>
			
 
				+
			
 
				+<script>
			
 
				+import Home from '@/view/Home.vue'
			
 
				+
			
 
				+export default {
			
 
				+  name: 'App',
			
 
				+  components: {
			
 
				+    Home
			
 
				+  }
			
 
				+}
			
 
				+</script>
			
 
				+
			
 
				+<style>
			
 
				+* {
			
 
				+  margin: 0;
			
 
				+  padding: 0;
			
 
				+  box-sizing: border-box;
			
 
				+}
			
 
				+body{
			
 
				+  margin:0;
			
 
				+  text-align: center;
			
 
				+}
			
 
				+#app {
			
 
				+  font-family: Avenir, Helvetica, Arial, sans-serif;
			
 
				+  -webkit-font-smoothing: antialiased;
			
 
				+  -moz-osx-font-smoothing: grayscale;
			
 
				+  text-align: center;
			
 
				+  margin: 0 auto;
			
 
				+  overflow: hidden;
			
 
				+  position: relative;
			
 
				+}
			
 
				+</style>
			
--- a/src/assets/images/AllWall/bac.png
+++ b/src/assets/images/AllWall/bac.png
--- a/src/assets/images/AllWall/ctwh.png
+++ b/src/assets/images/AllWall/ctwh.png
--- a/src/assets/images/AllWall/ctwhbac.png
+++ b/src/assets/images/AllWall/ctwhbac.png
--- a/src/assets/images/AllWall/gjzc.png
+++ b/src/assets/images/AllWall/gjzc.png
--- a/src/assets/images/AllWall/gjzc1.png
+++ b/src/assets/images/AllWall/gjzc1.png
--- a/src/assets/images/AllWall/gjzc2.png
+++ b/src/assets/images/AllWall/gjzc2.png
--- a/src/assets/images/AllWall/gjzc3.png
+++ b/src/assets/images/AllWall/gjzc3.png
--- a/src/assets/images/AllWall/gjzc4.png
+++ b/src/assets/images/AllWall/gjzc4.png
--- a/src/assets/images/AllWall/gjzcbac.png
+++ b/src/assets/images/AllWall/gjzcbac.png
--- a/src/assets/images/AllWall/hswh.png
+++ b/src/assets/images/AllWall/hswh.png
--- a/src/assets/images/AllWall/hswh1.png
+++ b/src/assets/images/AllWall/hswh1.png
--- a/src/assets/images/AllWall/hswh2.png
+++ b/src/assets/images/AllWall/hswh2.png
--- a/src/assets/images/AllWall/hswh3.png
+++ b/src/assets/images/AllWall/hswh3.png
--- a/src/assets/images/AllWall/hswh4.png
+++ b/src/assets/images/AllWall/hswh4.png
--- a/src/assets/images/AllWall/hswh5.png
+++ b/src/assets/images/AllWall/hswh5.png
--- a/src/assets/images/AllWall/hswh6.png
+++ b/src/assets/images/AllWall/hswh6.png
--- a/src/assets/images/AllWall/hswh7.png
+++ b/src/assets/images/AllWall/hswh7.png
--- a/src/assets/images/AllWall/hswh8.png
+++ b/src/assets/images/AllWall/hswh8.png
--- a/src/assets/images/AllWall/hswhbac.png
+++ b/src/assets/images/AllWall/hswhbac.png
--- a/src/assets/images/AllWall/page.jpg
+++ b/src/assets/images/AllWall/page.jpg
--- a/src/assets/images/AllWall/size.png
+++ b/src/assets/images/AllWall/size.png
--- a/src/assets/images/AllWall/sizebac.png
+++ b/src/assets/images/AllWall/sizebac.png
--- a/src/assets/images/about.png
+++ b/src/assets/images/about.png
--- a/src/assets/images/about1.png
+++ b/src/assets/images/about1.png
--- a/src/assets/images/arrow.png
+++ b/src/assets/images/arrow.png
--- a/src/assets/images/back.png
+++ b/src/assets/images/back.png
--- a/src/assets/images/background.png
+++ b/src/assets/images/background.png
--- a/src/assets/images/bigbac.jpg
+++ b/src/assets/images/bigbac.jpg
--- a/src/assets/images/close.png
+++ b/src/assets/images/close.png
--- a/src/assets/images/contactbutton.png
+++ b/src/assets/images/contactbutton.png
--- a/src/assets/images/contactinfo.png
+++ b/src/assets/images/contactinfo.png
--- a/src/assets/images/emailIcon.png
+++ b/src/assets/images/emailIcon.png
--- a/src/assets/images/exbutton.png
+++ b/src/assets/images/exbutton.png
--- a/src/assets/images/front.png
+++ b/src/assets/images/front.png
--- a/src/assets/images/full.mp4
+++ b/src/assets/images/full.mp4
--- a/src/assets/images/loop.mp4
+++ b/src/assets/images/loop.mp4
--- a/src/assets/images/mainbutton.png
+++ b/src/assets/images/mainbutton.png
--- a/src/assets/images/once.mp4
+++ b/src/assets/images/once.mp4
--- a/src/assets/images/page1.png
+++ b/src/assets/images/page1.png
--- a/src/assets/images/page2.png
+++ b/src/assets/images/page2.png
--- a/src/assets/images/page3.png
+++ b/src/assets/images/page3.png
--- a/src/assets/images/phoneIcon.png
+++ b/src/assets/images/phoneIcon.png
--- a/src/assets/images/play.png
+++ b/src/assets/images/play.png
--- a/src/assets/images/play2.png
+++ b/src/assets/images/play2.png
--- a/src/assets/images/posters-background.png
+++ b/src/assets/images/posters-background.png
--- a/src/assets/images/posters/national
+++ b/src/assets/images/posters/national
--- a/src/assets/images/posters/national
+++ b/src/assets/images/posters/national
--- a/src/assets/images/posters/national
+++ b/src/assets/images/posters/national
--- a/src/assets/images/posters/revolution
+++ b/src/assets/images/posters/revolution
--- a/src/assets/images/posters/revolution
+++ b/src/assets/images/posters/revolution
--- a/src/assets/images/posters/revolution
+++ b/src/assets/images/posters/revolution
--- a/src/assets/images/posters/revolution
+++ b/src/assets/images/posters/revolution
--- a/src/assets/images/posters/revolution
+++ b/src/assets/images/posters/revolution
--- a/src/assets/images/posters/revolution
+++ b/src/assets/images/posters/revolution
--- a/src/assets/images/posters/revolution
+++ b/src/assets/images/posters/revolution
--- a/src/assets/images/posters/revolution
+++ b/src/assets/images/posters/revolution
--- a/src/assets/images/posters/trandition
+++ b/src/assets/images/posters/trandition
--- a/src/assets/images/posters/trandition
+++ b/src/assets/images/posters/trandition
--- a/src/assets/images/posters/trandition
+++ b/src/assets/images/posters/trandition
--- a/src/assets/images/posters/trandition
+++ b/src/assets/images/posters/trandition
--- a/src/assets/images/posters/trandition
+++ b/src/assets/images/posters/trandition
--- a/src/assets/images/posters/trandition
+++ b/src/assets/images/posters/trandition
--- a/src/assets/images/posters/trandition
+++ b/src/assets/images/posters/trandition
--- a/src/assets/images/posters/trandition
+++ b/src/assets/images/posters/trandition
--- a/src/assets/images/posters/trandition
+++ b/src/assets/images/posters/trandition
--- a/src/assets/images/posters/trandition
+++ b/src/assets/images/posters/trandition
--- a/src/assets/images/qrcode.png
+++ b/src/assets/images/qrcode.png
--- a/src/assets/images/rightside.png
+++ b/src/assets/images/rightside.png
--- a/src/assets/images/wechatIcon.png
+++ b/src/assets/images/wechatIcon.png
--- a/src/assets/video/once.mp4
+++ b/src/assets/video/once.mp4
--- a/src/components/About.vue
+++ b/src/components/About.vue
@@ -0,0 +1,127 @@
 
				+<template>
			
 
				+  <div class="About">
			
 
				+    <div class="bac"></div>
			
 
				+    <div class="contact">
			
 
				+      <p class="title">联系我们</p>
			
 
				+      <div class="xian"></div>
			
 
				+      <a href="http://www.4dage.com" class="txt">四维时代官网</a>
			
 
				+      <p>商务合作：sales@4dage.com</p>
			
 
				+      <p>媒体合作：pr@4dage.com</p>
			
 
				+      <p>联系电话：400-699-8025</p>
			
 
				+      <p>地址：广东省珠海市高新区港湾大道港湾1号港11栋</p>
			
 
				+      <p style="text-indent: 3em">北京市朝阳区三丰北里悠唐国际A座</p>
			
 
				+      <p class="title">合作单位</p>
			
 
				+      <div class="xian"></div>
			
 
				+      <a href="http://www.ncha.gov.cn/" class="txt">中国国家文物局</a>
			
 
				+      <a href="https://www.chinamuseum.org.cn/index.html" class="txt"
			
 
				+        >中国博物馆协会</a
			
 
				+      >
			
 
				+      <a href="http://www.expo-museums.com/" class="txt"
			
 
				+        >中国博物馆及相关产品与技术博览会</a
			
 
				+      >
			
 
				+      <p class="title">探索四维</p>
			
 
				+      <div class="xian"></div>
			
 
				+      <a href="https://www.4dkankan.com/index.html?lang=zh" class="txt"
			
 
				+        >四维看看</a
			
 
				+      >
			
 
				+      <a href="https://www.cgaii.com/#/" class="txt">中德人工智能研究院</a>
			
 
				+            <div style="margin-top: 60px" class="xian"></div>
			
 
				+    </div>
			
 
				+
			
 
				+    <div class="logo">
			
 
				+      <img src="../assets/images/about1.png" alt="" />
			
 
				+      <img src="../assets/images/about.png" alt="" />
			
 
				+    </div>
			
 
				+  </div>
			
 
				+</template>
			
 
				+
			
 
				+<script>
			
 
				+//这里可以导入其他文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）
			
 
				+//例如：import 《组件名称》 from '《组件路径》';
			
 
				+
			
 
				+export default {
			
 
				+  //import引入的组件需要注入到对象中才能使用
			
 
				+  components: {},
			
 
				+  data() {
			
 
				+    //这里存放数据
			
 
				+    return {};
			
 
				+  },
			
 
				+  //监听属性 类似于data概念
			
 
				+  computed: {},
			
 
				+  //监控data中的数据变化
			
 
				+  watch: {},
			
 
				+  //方法集合
			
 
				+  methods: {},
			
 
				+  //生命周期 - 创建完成（可以访问当前this实例）
			
 
				+  created() {},
			
 
				+  //生命周期 - 挂载完成（可以访问DOM元素）
			
 
				+  mounted() {},
			
 
				+  beforeCreate() {}, //生命周期 - 创建之前
			
 
				+  beforeMount() {}, //生命周期 - 挂载之前
			
 
				+  beforeUpdate() {}, //生命周期 - 更新之前
			
 
				+  updated() {}, //生命周期 - 更新之后
			
 
				+  beforeUnmount() {}, //生命周期 - 销毁之前
			
 
				+  unmounted() {}, //生命周期 - 销毁完成
			
 
				+  activated() {}, //如果页面有keep-alive缓存功能，这个函数会触发
			
 
				+};
			
 
				+</script>
			
 
				+<style  scoped>
			
 
				+.xian {
			
 
				+  width: 100%;
			
 
				+  height: 2px;
			
 
				+  background-color: #153034;
			
 
				+}
			
 
				+.bac {
			
 
				+  position: absolute;
			
 
				+  top: -97px;
			
 
				+  width: 100%;
			
 
				+  height: 97px;
			
 
				+  background-color: rgba(0, 0, 0, 0.9);
			
 
				+}
			
 
				+.About {
			
 
				+  position: relative;
			
 
				+  width: 100vw;
			
 
				+  background-color: rgba(0, 0, 0, 0.9);
			
 
				+  padding-top: 30px;
			
 
				+}
			
 
				+.contact {
			
 
				+  width: 80%;
			
 
				+  margin: 0 auto;
			
 
				+}
			
 
				+.contact .title {
			
 
				+  margin-top: 30px;
			
 
				+  font-size: 18px;
			
 
				+  color: #fff;
			
 
				+}
			
 
				+.contact p {
			
 
				+  text-align: left;
			
 
				+  margin: 10px 0;
			
 
				+  font-size: 14px;
			
 
				+  color: #999;
			
 
				+}
			
 
				+.contact .txt {
			
 
				+  margin: 10px 0;
			
 
				+  text-decoration: none;
			
 
				+  display: block;
			
 
				+  font-size: 16px;
			
 
				+  color: #a0a1a2;
			
 
				+  text-align: left;
			
 
				+}
			
 
				+.logo {
			
 
				+  width: 80%;
			
 
				+  margin: 0 auto;
			
 
				+  margin-top: 10px;
			
 
				+  height: 17vh;
			
 
				+  display: flex;
			
 
				+  justify-content: space-between;
			
 
				+  align-items: center;
			
 
				+}
			
 
				+.logo img:nth-of-type(1) {
			
 
				+  width: 157px;
			
 
				+  height: 64px;
			
 
				+}
			
 
				+.logo img:nth-of-type(2) {
			
 
				+  width: 132px;
			
 
				+  height: 56px;
			
 
				+}
			
 
				+</style>
			
--- a/src/components/AllWall.vue
+++ b/src/components/AllWall.vue
@@ -0,0 +1,68 @@
 
				+<!--  -->
			
 
				+<template>
			
 
				+  <div class="AllWall">
			
 
				+    <div class="size">
			
 
				+      <img src="../assets/images/AllWall/size.png" alt="" />
			
 
				+      <img src="../assets/images/AllWall/sizebac.png" alt="" />
			
 
				+    </div>
			
 
				+    <AllWallbut :titles="titles" :jumpUrl="jumpUrl" />
			
 
				+  </div>
			
 
				+</template>
			
 
				+
			
 
				+<script>
			
 
				+import AllWallbut from "./AllWallbut.vue";
			
 
				+
			
 
				+export default {
			
 
				+  name: "AllWall",
			
 
				+  components: {
			
 
				+    AllWallbut,
			
 
				+  },
			
 
				+  data() {
			
 
				+    return {
			
 
				+      titles: [
			
 
				+        "高淳博物馆",
			
 
				+        "德国博物馆",
			
 
				+        "南京博物馆",
			
 
				+        "南通博物馆",
			
 
				+        "广东省博物馆",
			
 
				+      ],
			
 
				+      jumpUrl: [
			
 
				+        "javascript:;",
			
 
				+        "javascript:;",
			
 
				+        "javascript:;",
			
 
				+        "javascript:;",
			
 
				+        "javascript:;",
			
 
				+      ],
			
 
				+    };
			
 
				+  },
			
 
				+  methods: {
			
 
				+  },
			
 
				+};
			
 
				+</script>
			
 
				+<style  scoped>
			
 
				+.AllWall {
			
 
				+  position: relative;
			
 
				+  width: 100vw;
			
 
				+  height: 100vh;
			
 
				+  background: url("../assets/images/AllWall/bac.png") no-repeat;
			
 
				+  background-size: 100% 100%;
			
 
				+}
			
 
				+.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: 11rem;
			
 
				+  left: 50%;
			
 
				+  transform: translateX(-50%);
			
 
				+}
			
 
				+
			
 
				+
			
 
				+</style>
			
--- a/src/components/AllWallbut.vue
+++ b/src/components/AllWallbut.vue
@@ -0,0 +1,335 @@
 
				+<template>
			
 
				+  <div id="guide-button">
			
 
				+    <template v-if="showButtonList">
			
 
				+      <div id="old-exhibition1" v-if="titles[4]" @click="isShow(e)">
			
 
				+        <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[e] }}</a
			
 
				+          >
			
 
				+        </div>
			
 
				+      </div>
			
 
				+
			
 
				+      <div id="old-exhibition2" v-if="titles[3]" @click="isShow(d)">
			
 
				+        <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[d] }}</a
			
 
				+          >
			
 
				+        </div>
			
 
				+      </div>
			
 
				+
			
 
				+      <div id="old-exhibition" @click="isShow(c)">
			
 
				+        <img
			
 
				+          class="exbutton"
			
 
				+          :class="[btnIndex == 2 ? 'hit' : '']"
			
 
				+          src="@/assets/images/exbutton.png"
			
 
				+        />
			
 
				+        <div class="button-text black-text">
			
 
				+          <a :href="jumpUrl[2]" :class="[btnIndex == 2 ? 'hit' : '']">
			
 
				+            {{ titles[c] }}</a
			
 
				+          >
			
 
				+        </div>
			
 
				+      </div>
			
 
				+
			
 
				+      <div id="cloud-exhibition" @click="isShow(b)">
			
 
				+        <img
			
 
				+          class="exbutton"
			
 
				+          :class="[btnIndex == 1 ? 'hit' : '']"
			
 
				+          src="@/assets/images/exbutton.png"
			
 
				+        />
			
 
				+        <div class="button-text black-text">
			
 
				+          <a :href="jumpUrl[1]" :class="[btnIndex == 1 ? 'hit' : '']">
			
 
				+            {{ titles[b] }}</a
			
 
				+          >
			
 
				+        </div>
			
 
				+      </div>
			
 
				+    </template>
			
 
				+    <template v-else>
			
 
				+      <div id="front"><img src="@/assets/images/front.png" /></div>
			
 
				+      <div id="back"><img src="@/assets/images/back.png" /></div>
			
 
				+    </template>
			
 
				+
			
 
				+    <div id="mainbutton">
			
 
				+      <img
			
 
				+        class="exbutton"
			
 
				+        @touchstart="goStart"
			
 
				+        @touchmove="goMove"
			
 
				+        @touchend="goEnd"
			
 
				+        src="@/assets/images/mainbutton.png"
			
 
				+      />
			
 
				+      <div class="button-text">
			
 
				+        <a :href="jumpUrl[0]">{{ titles[a] }}</a>
			
 
				+      </div>
			
 
				+      <img
			
 
				+        :class="[showButtonList ? '' : 'arrowDown', 'arrow']"
			
 
				+        src="@/assets/images/arrow.png"
			
 
				+        @click.self="buttonList"
			
 
				+      />
			
 
				+    </div>
			
 
				+  </div>
			
 
				+</template>
			
 
				+
			
 
				+<script>
			
 
				+export default {
			
 
				+  props: {
			
 
				+    titles: {
			
 
				+      type: Array,
			
 
				+    },
			
 
				+    jumpUrl: {
			
 
				+      type: Array,
			
 
				+    },
			
 
				+  },
			
 
				+  name: "GuideButton",
			
 
				+  data() {
			
 
				+    return {
			
 
				+      a: 0,
			
 
				+      b: 1,
			
 
				+      c: 2,
			
 
				+      d: 3,
			
 
				+      e: 4,
			
 
				+      showButtonList: false,
			
 
				+      hit: false,
			
 
				+      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'],
			
 
				+    };
			
 
				+  },
			
 
				+  methods: {
			
 
				+    change(val) {
			
 
				+      if (val===undefined) return;
			
 
				+      console.log(val);
			
 
				+      // if(val===1) val='德国博物馆'
			
 
				+      // else if(val===2) val='南京博物馆'
			
 
				+      // else if(val===3) val='南通博物馆'
			
 
				+      // else if(val===4) val='广东省博物馆'
			
 
				+      // else val='高淳博物馆'
			
 
				+      if (val === 0) {
			
 
				+        this.a = val;
			
 
				+        this.b = val + 1;
			
 
				+        this.c = val + 2;
			
 
				+        this.d = val + 3;
			
 
				+        this.e = val + 4;
			
 
				+      }
			
 
				+      if (val === 1) {
			
 
				+        this.a = val;
			
 
				+        this.b = val + 1;
			
 
				+        this.c = val + 2;
			
 
				+        this.d = val + 3;
			
 
				+        this.e = val - 1;
			
 
				+      }
			
 
				+      if (val === 2) {
			
 
				+        this.a = val;
			
 
				+        this.b = val + 1;
			
 
				+        this.c = val + 2;
			
 
				+        this.d = val - 1;
			
 
				+        this.e = val - 2;
			
 
				+      }
			
 
				+      if (val === 3) {
			
 
				+        this.a = val;
			
 
				+        this.b = val + 1;
			
 
				+        this.c = val - 1;
			
 
				+        this.d = val - 2;
			
 
				+        this.e = val - 3;
			
 
				+      }
			
 
				+      if (val === 4) {
			
 
				+        this.a = val;
			
 
				+        this.b = val - 1;
			
 
				+        this.c = val - 2;
			
 
				+        this.d = val - 3;
			
 
				+        this.e = val - 4;
			
 
				+      }
			
 
				+    },
			
 
				+    isShow(val) {
			
 
				+      this.buttonList();
			
 
				+      this.change(val);
			
 
				+    },
			
 
				+    pageJump(url) {
			
 
				+      window.location.href = url;
			
 
				+      // console.log('jump');
			
 
				+    },
			
 
				+    buttonList() {
			
 
				+      this.showButtonList = !this.showButtonList;
			
 
				+      // console.log('buttonlist',this.showButtonList);
			
 
				+    },
			
 
				+    goStart(event) {
			
 
				+      let _this = this;
			
 
				+      event.preventDefault();
			
 
				+      clearTimeout(_this.timeOutEvent);
			
 
				+      let touch = event.targetTouches[0];
			
 
				+      // console.log('起点',touch.pageY);
			
 
				+      this.startPageY = touch.pageY;
			
 
				+      // 开始触摸
			
 
				+      _this.timeOutEvent = setTimeout(() => {
			
 
				+        _this.timeOutEvent = 0;
			
 
				+        // console.log('处理长按事件');
			
 
				+        this.showButtonList = true;
			
 
				+      }, 1000);
			
 
				+    },
			
 
				+    goMove(event) {
			
 
				+      event.preventDefault();
			
 
				+      let touch = event.targetTouches[0];
			
 
				+    //   console.log('移动中',touch.pageY);
			
 
				+      //1379-1440
			
 
				+      this.currentPageY = touch.pageY;
			
 
				+    },
			
 
				+    goEnd() {
			
 
				+      // 触发切换事件
			
 
				+      let temp;
			
 
				+      if (this.btnIndex === 4) temp = this.e;
			
 
				+      if (this.btnIndex === 3) temp = this.d;
			
 
				+      if (this.btnIndex === 2) temp = this.c;
			
 
				+      if (this.btnIndex === 1) temp = this.b;
			
 
				+      if (this.btnIndex === 0) temp = this.a;
			
 
				+      this.change(temp);
			
 
				+// 1228 1260
			
 
				+    //   let _this = this;
			
 
				+      clearTimeout(this.timeOutEvent);
			
 
				+    //   _this.timeOutEvent !== 0
			
 
				+
			
 
				+        // console.log('处理长按结束事件');
			
 
				+        if (this.btnIndex < this.titles.length && this.btnIndex >= 0) {
			
 
				+          this.pageJump(this.jumpUrl[this.btnIndex]);
			
 
				+        }
			
 
				+        this.showButtonList = false;
			
 
				+        this.startPageY = this.currentPageY = 0; //因为computed会缓存btnIndex，而需要在切换页面之后恢复原状，所以要改变
			
 
				+      
			
 
				+    },
			
 
				+  },
			
 
				+  computed: {
			
 
				+    btnIndex: function () {
			
 
				+      let index;
			
 
				+      let relativeY = this.startPageY - this.currentPageY;
			
 
				+      index = Math.floor(relativeY / this.btnHeight);
			
 
				+      // console.log(index);
			
 
				+      return index;
			
 
				+    },
			
 
				+  },
			
 
				+  beforeUpdate() {
			
 
				+    this.btnHeight = document.getElementById("mainbutton").clientHeight / 1.7;
			
 
				+    // console.log('btnheight',this.btnHeight);
			
 
				+  },
			
 
				+};
			
 
				+</script>
			
 
				+
			
 
				+
			
 
				+<style scoped>
			
 
				+/* #guide-button>div:henter .button-text{
			
 
				+    color:#ffffff;
			
 
				+} */
			
 
				+.hit {
			
 
				+  transform: scale(1.03);
			
 
				+  color: #ffffff;
			
 
				+  opacity: 1;
			
 
				+  transition: all 1s ease;
			
 
				+}
			
 
				+#mainbutton {
			
 
				+  position: absolute;
			
 
				+  top: 5.6rem;
			
 
				+  left: 50%;
			
 
				+  transform: translateX(-50%);
			
 
				+  width: 18.9rem;
			
 
				+  height: 4.3rem;
			
 
				+  /* background: linear-gradient(180deg, #D16914, transparent);
			
 
				+  border-radius: 6px;*/
			
 
				+}
			
 
				+.arrow {
			
 
				+  position: inherit;
			
 
				+  top: 30%;
			
 
				+  right: 1.7rem;
			
 
				+  width: 1.2rem;
			
 
				+}
			
 
				+.arrow.arrowDown {
			
 
				+  transform-origin: center;
			
 
				+  transform: rotate(180deg);
			
 
				+}
			
 
				+.exbutton {
			
 
				+  width: 18.9rem;
			
 
				+  opacity: 0.8;
			
 
				+}
			
 
				+div.button-text {
			
 
				+  position: absolute;
			
 
				+  top: 40%;
			
 
				+  left: 50%;
			
 
				+  transform: translate(-50%, -50%);
			
 
				+  display: block;
			
 
				+  text-align: center;
			
 
				+  font-weight: normal;
			
 
				+  color: #ffffff;
			
 
				+  font-size: 1rem;
			
 
				+  font-family: "Microsoft YaHei", "serif";
			
 
				+  opacity: 1;
			
 
				+}
			
 
				+div.black-text {
			
 
				+  color: #000000;
			
 
				+}
			
 
				+#cloud-exhibition {
			
 
				+  position: absolute;
			
 
				+  top: 2.8rem;
			
 
				+  left: 50%;
			
 
				+  transform: translateX(-50%);
			
 
				+  width: 18.9rem;
			
 
				+  height: 4.3rem;
			
 
				+  z-index: 999;
			
 
				+}
			
 
				+#old-exhibition {
			
 
				+  position: absolute;
			
 
				+  top: 0;
			
 
				+  left: 50%;
			
 
				+  transform: translateX(-50%);
			
 
				+  width: 18.9rem;
			
 
				+  height: 4.3rem;
			
 
				+  z-index: 999;
			
 
				+}
			
 
				+#old-exhibition1,
			
 
				+#old-exhibition2 {
			
 
				+  position: absolute;
			
 
				+  top: -5.6rem;
			
 
				+  left: 50%;
			
 
				+  transform: translateX(-50%);
			
 
				+  width: 18.9rem;
			
 
				+  height: 4.3rem;
			
 
				+  z-index: 999;
			
 
				+}
			
 
				+#old-exhibition2 {
			
 
				+  top: -2.8rem;
			
 
				+}
			
 
				+a {
			
 
				+  text-decoration: none;
			
 
				+  color: inherit;
			
 
				+}
			
 
				+
			
 
				+#front {
			
 
				+  position: absolute;
			
 
				+  top: 4.9rem;
			
 
				+  left: 50%;
			
 
				+  transform: translateX(-50%);
			
 
				+  width: 18.1rem;
			
 
				+}
			
 
				+#front img {
			
 
				+  width: 100%;
			
 
				+}
			
 
				+#back {
			
 
				+  position: absolute;
			
 
				+  top: 4.25rem;
			
 
				+  left: 50%;
			
 
				+  transform: translateX(-50%);
			
 
				+  width: 16.2rem;
			
 
				+}
			
 
				+#back img {
			
 
				+  width: 100%;
			
 
				+}
			
 
				+</style>
			
--- a/src/components/GuideButton.vue
+++ b/src/components/GuideButton.vue
@@ -0,0 +1,261 @@
 
				+<template>
			
 
				+    <div id="guide-button">
			
 
				+        <template v-if="showButtonList">
			
 
				+
			
 
				+        <div id="old-exhibition1" 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-exhibition2" 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-exhibition" >
			
 
				+            <img class="exbutton" 
			
 
				+                :class="[btnIndex == 2?'hit':'']"
			
 
				+                src="@/assets/images/exbutton.png"/>
			
 
				+            <div class="button-text black-text">
			
 
				+                <a :href="jumpUrl[2]"  
			
 
				+                    :class="[btnIndex == 2?'hit':'']">
			
 
				+                    {{titles[2]}}</a></div></div>
			
 
				+
			
 
				+        <div id="cloud-exhibition" >
			
 
				+            <img class="exbutton" 
			
 
				+                :class="[btnIndex == 1?'hit':'']"
			
 
				+                src="@/assets/images/exbutton.png"/>
			
 
				+            <div class="button-text black-text">
			
 
				+                <a :href="jumpUrl[1]"
			
 
				+                @click="hint(1)"
			
 
				+                     :class="[btnIndex == 1?'hit':'']">
			
 
				+                    {{titles[1]}}</a></div></div>
			
 
				+        </template>
			
 
				+        <template v-else>
			
 
				+            <div id='front'><img src='@/assets/images/front.png'/></div>
			
 
				+            <div id="back"><img src='@/assets/images/back.png'/></div>
			
 
				+        </template>
			
 
				+
			
 
				+        <div id="mainbutton">
			
 
				+                <img class="exbutton" 
			
 
				+                @touchstart='goStart' 
			
 
				+                @touchmove='goMove'
			
 
				+                @touchend='goEnd'
			
 
				+                src="@/assets/images/mainbutton.png"/>
			
 
				+            <div class="button-text">
			
 
				+                <a :href="jumpUrl[0]">{{titles[0]}}</a></div>
			
 
				+            <img :class="[showButtonList?'':'arrowDown','arrow']"
			
 
				+                src="@/assets/images/arrow.png"
			
 
				+                @click.self="buttonList"></div>
			
 
				+    </div>
			
 
				+</template>
			
 
				+
			
 
				+<script>
			
 
				+export default {
			
 
				+    props:{
			
 
				+        titles:{
			
 
				+            type:Array
			
 
				+        },
			
 
				+        jumpUrl:{
			
 
				+            type:Array
			
 
				+        }
			
 
				+    },
			
 
				+    name:'GuideButton',
			
 
				+    data(){
			
 
				+        return{
			
 
				+            showButtonList:false,
			
 
				+            hit:false,
			
 
				+            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'],
			
 
				+        }
			
 
				+    },
			
 
				+    methods:{
			
 
				+        hint(val){
			
 
				+            if(val!==1) return
			
 
				+        },
			
 
				+        pageJump(url){
			
 
				+            window.location.href = url;
			
 
				+            // console.log('jump');
			
 
				+        },
			
 
				+        buttonList(){
			
 
				+            this.showButtonList = !this.showButtonList;
			
 
				+            // console.log('buttonlist',this.showButtonList);
			
 
				+        },
			
 
				+        goStart(event) {
			
 
				+            let _this = this;
			
 
				+            event.preventDefault();
			
 
				+            clearTimeout(_this.timeOutEvent);
			
 
				+            let touch = event.targetTouches[0];
			
 
				+            // console.log('起点',touch.pageY);
			
 
				+            this.startPageY = touch.pageY;
			
 
				+            // 开始触摸
			
 
				+            _this.timeOutEvent = setTimeout(() => {
			
 
				+                _this.timeOutEvent = 0
			
 
				+                // console.log('处理长按事件');
			
 
				+                this.showButtonList = true;
			
 
				+            },1000)
			
 
				+        },
			
 
				+        goMove(event) {
			
 
				+            event.preventDefault();
			
 
				+            let touch = event.targetTouches[0];
			
 
				+            // console.log('移动中',touch.pageY);
			
 
				+            //1379-1440
			
 
				+            this.currentPageY = touch.pageY;
			
 
				+        },
			
 
				+        goEnd(){
			
 
				+            let _this = this;
			
 
				+                        this.hint(this.btnIndex)
			
 
				+
			
 
				+            clearTimeout(this.timeOutEvent)
			
 
				+            if(_this.timeOutEvent !== 0){
			
 
				+                // console.log('处理单击事件');
			
 
				+                // this.pageJump(this.jumpUrl[0]);
			
 
				+            }else{
			
 
				+                // console.log('处理长按结束事件');
			
 
				+                if(this.btnIndex < this.titles.length
			
 
				+                    && this.btnIndex >= 0){
			
 
				+                    this.pageJump(this.jumpUrl[this.btnIndex]);
			
 
				+                }
			
 
				+                this.showButtonList = false;
			
 
				+                this.startPageY = this.currentPageY = 0; //因为computed会缓存btnIndex，而需要在切换页面之后恢复原状，所以要改变
			
 
				+            }
			
 
				+        }
			
 
				+    },
			
 
				+    computed:{
			
 
				+        btnIndex:function(){
			
 
				+            let index;
			
 
				+            let relativeY = this.startPageY - this.currentPageY;
			
 
				+            index = Math.floor(relativeY / this.btnHeight);
			
 
				+            // console.log(index);
			
 
				+            return index;
			
 
				+        },
			
 
				+    }, 
			
 
				+    beforeUpdate(){
			
 
				+        this.btnHeight = document.getElementById('mainbutton').clientHeight / 1.7;
			
 
				+        // console.log('btnheight',this.btnHeight);
			
 
				+    },
			
 
				+}
			
 
				+</script>
			
 
				+
			
 
				+
			
 
				+<style scoped>
			
 
				+/* #guide-button>div:henter .button-text{
			
 
				+    color:#ffffff;
			
 
				+} */
			
 
				+.hit{
			
 
				+    transform: scale(1.03);
			
 
				+    color:#ffffff;
			
 
				+    opacity:1;
			
 
				+    transition: all 1s ease;
			
 
				+}
			
 
				+#mainbutton {
			
 
				+  position: absolute;
			
 
				+  top:5.6rem;
			
 
				+  left: 50%;
			
 
				+  transform: translateX(-50%);
			
 
				+  width: 18.9rem;
			
 
				+  height: 4.3rem;
			
 
				+  /* background: linear-gradient(180deg, #D16914, transparent);
			
 
				+  border-radius: 6px;*/
			
 
				+}
			
 
				+.arrow{
			
 
				+    position: inherit;
			
 
				+    top:30%;
			
 
				+    right:1.7rem;
			
 
				+    width:1.2rem;
			
 
				+}
			
 
				+.arrow.arrowDown{
			
 
				+    transform-origin: center;
			
 
				+    transform:rotate(180deg);
			
 
				+
			
 
				+}
			
 
				+.exbutton{
			
 
				+    width:18.9rem;
			
 
				+    opacity: 0.8;
			
 
				+}
			
 
				+div.button-text{
			
 
				+    position:absolute;
			
 
				+    top:40%; left:50%;
			
 
				+    transform:translate(-50%,-50%);
			
 
				+    display: block;
			
 
				+    text-align: center;
			
 
				+    font-weight: normal;
			
 
				+    color: #ffffff;
			
 
				+    font-size: 1rem;
			
 
				+    font-family: "Microsoft YaHei", "serif";
			
 
				+    opacity: 1;
			
 
				+}
			
 
				+div.black-text{
			
 
				+    color:#000000;
			
 
				+}
			
 
				+#cloud-exhibition{
			
 
				+    position: absolute;
			
 
				+    top:2.8rem;
			
 
				+    left: 50%;
			
 
				+    transform: translateX(-50%);
			
 
				+    width: 18.9rem;
			
 
				+    height: 4.3rem;
			
 
				+    z-index:999;
			
 
				+}
			
 
				+#old-exhibition{
			
 
				+    position: absolute;
			
 
				+    top:0;
			
 
				+    left: 50%;
			
 
				+    transform: translateX(-50%);
			
 
				+    width: 18.9rem;
			
 
				+    height: 4.3rem;
			
 
				+    z-index:999;
			
 
				+}
			
 
				+#old-exhibition1,#old-exhibition2 {
			
 
				+    position: absolute;
			
 
				+    top:-5.6rem;
			
 
				+    left: 50%;
			
 
				+    transform: translateX(-50%);
			
 
				+    width: 18.9rem;
			
 
				+    height: 4.3rem;
			
 
				+    z-index:999;
			
 
				+}
			
 
				+#old-exhibition2 {
			
 
				+    top: -2.8rem;
			
 
				+}
			
 
				+a{
			
 
				+    text-decoration: none;
			
 
				+    color:inherit;
			
 
				+}
			
 
				+
			
 
				+#front{
			
 
				+    position: absolute;
			
 
				+    top:4.9rem;
			
 
				+    left: 50%;
			
 
				+    transform: translateX(-50%);
			
 
				+    width:18.1rem;
			
 
				+}
			
 
				+#front img{
			
 
				+    width:100%;
			
 
				+}
			
 
				+#back{
			
 
				+    position: absolute;
			
 
				+    top:4.25rem;
			
 
				+    left: 50%;
			
 
				+    transform: translateX(-50%);
			
 
				+    width:16.2rem;
			
 
				+}
			
 
				+#back img{
			
 
				+    width:100%;
			
 
				+}
			
 
				+</style>
			
--- a/src/components/GuidePage.vue
+++ b/src/components/GuidePage.vue
@@ -0,0 +1,310 @@
 
				+<template>
			
 
				+  <div id="guide" @click="openContactInfo">
			
 
				+    <!-- 点击播放视频出现的弹窗 -->
			
 
				+    <div class="video" v-if="isShow">
			
 
				+      <div class="bac">
			
 
				+        <div class="one" >
			
 
				+          <img src="../assets/images/page1.png" alt="" />
			
 
				+        </div>
			
 
				+      </div>
			
 
				+      <video src="../assets/video/once.mp4" autoplay muted loop controls></video>
			
 
				+      <div class="close" @click="play">
			
 
				+        <img src="../assets/images/close.png" alt="" >
			
 
				+      </div>
			
 
				+    </div>
			
 
				+    <div class="paly" @click="play" :class="{cative:change}">
			
 
				+      <img src="../assets/images/play.png" alt="" />
			
 
				+    </div>
			
 
				+    <div class="paly" @click="play" :class="{cative:!change}">
			
 
				+      <img src="../assets/images/play2.png" alt="" />
			
 
				+    </div>
			
 
				+    <div class="bac">
			
 
				+      <div class="one">
			
 
				+        <img src="../assets/images/page1.png" alt="" />
			
 
				+      </div>
			
 
				+      <div class="tow">
			
 
				+        <img src="../assets/images/page2.png" alt="" />
			
 
				+      </div>
			
 
				+      <div class="three">
			
 
				+        <img src="../assets/images/page3.png" alt="" />
			
 
				+      </div>
			
 
				+    </div>
			
 
				+    <!-- <img id="background1" src="@/assets/images/background.png" /> -->
			
 
				+    <div id="contact">
			
 
				+      <img
			
 
				+        id="contactButton"
			
 
				+        @click="isShowContact = !isShowContact"
			
 
				+        src="@/assets/images/contactbutton.png"
			
 
				+      />
			
 
				+      <div id="info" v-show="isShowContact">
			
 
				+        <img id="contactInfo" src="@/assets/images/contactinfo.png" />
			
 
				+        <div id="phone">
			
 
				+          <div class="contact-title">
			
 
				+            <img class="img-contact" src="@/assets/images/phoneIcon.png" />
			
 
				+            商务合作电话：
			
 
				+          </div>
			
 
				+          <div
			
 
				+            class="contact-content"
			
 
				+            v-for="(phoneNumber, index) of phones"
			
 
				+            :key="index"
			
 
				+          >
			
 
				+            {{ phoneNumber }}
			
 
				+          </div>
			
 
				+        </div>
			
 
				+        <div id="email">
			
 
				+          <div class="contact-title">
			
 
				+            <img class="img-contact" src="@/assets/images/emailIcon.png" />
			
 
				+            商务合作邮箱：
			
 
				+          </div>
			
 
				+          <div class="contact-content">{{ email }}</div>
			
 
				+        </div>
			
 
				+        <div id="weChat">
			
 
				+          <div class="contact-title">
			
 
				+            <img class="img-contact" src="@/assets/images/wechatIcon.png" />
			
 
				+            商务合作微信：
			
 
				+          </div>
			
 
				+          <div class="qrcode">
			
 
				+            <img class="img-qrcode" src="@/assets/images/qrcode.png" />
			
 
				+          </div>
			
 
				+        </div>
			
 
				+      </div>
			
 
				+    </div>
			
 
				+    <GuideButton :titles="titles" :jumpUrl="jumpUrl" />
			
 
				+  </div>
			
 
				+</template>
			
 
				+
			
 
				+<script>
			
 
				+import GuideButton from "./GuideButton.vue";
			
 
				+export default {
			
 
				+  components: { GuideButton },
			
 
				+  name: "GuidePage",
			
 
				+  data() {
			
 
				+    return {
			
 
				+      // 控制播放按钮的转换
			
 
				+      change:false,
			
 
				+      // 控制页面视频弹窗的显示
			
 
				+      isShow:false,
			
 
				+      titles: ["参加云展","点击看展", "往届博博会"],
			
 
				+      jumpUrl: [
			
 
				+        "http://www.expo-museums.com/Index/column/id/162",
			
 
				+        "javascript:;",
			
 
				+        "http://www.expo-museums.com/Index/history/column/143",
			
 
				+      ],
			
 
				+      isShowContact: false,
			
 
				+      phones: ["13798998979（沈小姐）","13581625033（黎先生）", "15733737800（刘小姐）"],
			
 
				+      email: "sales@4dage.com",
			
 
				+      buttoInGuidePage: {
			
 
				+        titles: ["参加云展","点击看展", "往届博博会"],
			
 
				+      },
			
 
				+    };
			
 
				+  },
			
 
				+  methods: {
			
 
				+    // 点击第一个页面的播放视频按钮
			
 
				+    play() {
			
 
				+      this.isShow=!this.isShow
			
 
				+    },
			
 
				+    openContactInfo(event) {
			
 
				+      let contactId = [
			
 
				+        "contactButton",
			
 
				+        "contactInfo",
			
 
				+        "phone",
			
 
				+        "email",
			
 
				+        "weChat",
			
 
				+      ];
			
 
				+      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("img-qrcode")
			
 
				+      ) {
			
 
				+        this.isShowContact = false;
			
 
				+      }
			
 
				+    },
			
 
				+  },
			
 
				+  mounted(){
			
 
				+   setInterval(() => {
			
 
				+      this.change=!this.change
			
 
				+    }, 3000);
			
 
				+  }
			
 
				+};
			
 
				+</script>
			
 
				+
			
 
				+<!-- Add "scoped" attribute to limit CSS to this component only -->
			
 
				+<style scoped>
			
 
				+.close {
			
 
				+  position: absolute;
			
 
				+  bottom: 150px;
			
 
				+  left: 50%;
			
 
				+  transform: translateX(-50%);
			
 
				+  width: 58px;
			
 
				+  height: 58px;
			
 
				+}
			
 
				+.close img {
			
 
				+  width: 100%;
			
 
				+  height: 100%;
			
 
				+}
			
 
				+.video {
			
 
				+  z-index: 9999;
			
 
				+  position: absolute;
			
 
				+  bottom: 0;
			
 
				+  width: 100vw;
			
 
				+  height: 100%;
			
 
				+  background-color: rgba(0, 0, 0, 0.93);
			
 
				+}
			
 
				+.video video {
			
 
				+  margin-top: 40px;
			
 
				+  width: 100%;
			
 
				+  max-height: 300px;
			
 
				+}
			
 
				+.paly {
			
 
				+  opacity: 1;
			
 
				+  transition: all 2s;
			
 
				+  position: absolute;
			
 
				+  width: 223px;
			
 
				+  height: 223px;
			
 
				+  left: 50%;
			
 
				+  top: 50%;
			
 
				+  transform: translate(-50%, -50%);
			
 
				+}
			
 
				+.cative {
			
 
				+  opacity: 0;
			
 
				+}
			
 
				+.paly img {
			
 
				+  width: 100%;
			
 
				+  height: 100%;
			
 
				+}
			
 
				+.bac {
			
 
				+  padding-top: 5.75rem;
			
 
				+}
			
 
				+.bac > div {
			
 
				+  display: flex;
			
 
				+  justify-content: center;
			
 
				+}
			
 
				+.one > img {
			
 
				+  width: 80%;
			
 
				+  max-height:38px ;
			
 
				+}
			
 
				+.tow > img {
			
 
				+  width: 70%;
			
 
				+}
			
 
				+.three > img {
			
 
				+  width: 90%;
			
 
				+}
			
 
				+#guide {
			
 
				+  width: 100vw;
			
 
				+  height: 100vh;
			
 
				+  background: url("../assets/images/AllWall/page.jpg") no-repeat;
			
 
				+  background-size: 100% 100%;
			
 
				+  position: relative;
			
 
				+  font-size: 16px;
			
 
				+}
			
 
				+#background1 {
			
 
				+  width: 100%;
			
 
				+  opacity: 0.5;
			
 
				+}
			
 
				+#contact {
			
 
				+  z-index: 999;
			
 
				+  position: fixed;
			
 
				+  right: 0.5rem;
			
 
				+  top: 1rem;
			
 
				+  width: 3.6rem;
			
 
				+  height: 3.6rem;
			
 
				+}
			
 
				+@media screen and (min-width: 780px) {
			
 
				+  #contact {
			
 
				+    position: absolute;
			
 
				+    right: 0.5rem;
			
 
				+    top: 1rem;
			
 
				+    width: 3.6rem;
			
 
				+    height: 3.6rem;
			
 
				+  }
			
 
				+}
			
 
				+#contactButton {
			
 
				+  width: 3.6rem;
			
 
				+  height: 3.6rem;
			
 
				+}
			
 
				+#info {
			
 
				+  position: absolute;
			
 
				+  right: 1rem;
			
 
				+  top: 3.6rem;
			
 
				+  width: 20.7rem;
			
 
				+  height: 27.3rem;
			
 
				+}
			
 
				+#contactInfo {
			
 
				+  width: 100%;
			
 
				+  height: 100%;
			
 
				+  opacity: 1;
			
 
				+}
			
 
				+#phone {
			
 
				+  position: absolute;
			
 
				+  top: 2rem;
			
 
				+  left: 50%;
			
 
				+  transform: translateX(-50%);
			
 
				+  width: 13.3rem;
			
 
				+  height: 4.4rem;
			
 
				+  display: flex;
			
 
				+  flex-direction: column;
			
 
				+  justify-content: space-between;
			
 
				+}
			
 
				+#info .contact-title {
			
 
				+  width: 9.8rem;
			
 
				+  height: 1.3rem;
			
 
				+  font-size: 1rem;
			
 
				+  font-family: Microsoft YaHei;
			
 
				+  font-weight: 400;
			
 
				+  color: #d06814;
			
 
				+  opacity: 1;
			
 
				+}
			
 
				+.contact-content {
			
 
				+  position: relative;
			
 
				+  left: 2.5rem;
			
 
				+  color: #ffffff;
			
 
				+  font-size: 0.9rem;
			
 
				+  text-align: left;
			
 
				+}
			
 
				+#email {
			
 
				+  position: absolute;
			
 
				+  top: 11rem;
			
 
				+  left: 50%;
			
 
				+  transform: translateX(-50%);
			
 
				+  width: 13.3rem;
			
 
				+  height: 3.1rem;
			
 
				+  display: flex;
			
 
				+  flex-direction: column;
			
 
				+  justify-content: space-between;
			
 
				+}
			
 
				+div.qrcode {
			
 
				+  width: 4.6rem;
			
 
				+  height: 4.6rem;
			
 
				+}
			
 
				+.qrcode > img {
			
 
				+  position: relative;
			
 
				+  width: 100%;
			
 
				+  left: 2.5rem;
			
 
				+  top: 1.3rem;
			
 
				+}
			
 
				+
			
 
				+#weChat {
			
 
				+  position: absolute;
			
 
				+  top: 18rem;
			
 
				+  left: 50%;
			
 
				+  transform: translateX(-50%);
			
 
				+  width: 13.3rem;
			
 
				+}
			
 
				+img.img-contact {
			
 
				+  width: 1.4rem;
			
 
				+  height: 1.4rem;
			
 
				+  vertical-align: sub;
			
 
				+  margin-right: 0.3rem;
			
 
				+  pointer-events: none;
			
 
				+}
			
 
				+
			
 
				+#guide-button {
			
 
				+  position: absolute;
			
 
				+  bottom: 2rem;
			
 
				+  left: 50%;
			
 
				+  width: 18.9rem;
			
 
				+  height: 9.4rem;
			
 
				+  transform: translateX(-50%);
			
 
				+}
			
 
				+</style>
			
--- a/src/components/International.vue
+++ b/src/components/International.vue
@@ -0,0 +1,82 @@
 
				+
			
 
				+<template>
			
 
				+<div class='International'>
			
 
				+        <div class="txt">
			
 
				+      <img src="../assets/images/AllWall/gjzc.png" alt="" />
			
 
				+      <img src="../assets/images/AllWall/gjzcbac.png" alt="" />
			
 
				+    </div>
			
 
				+    <div class="conten">
			
 
				+        <a href="https://4dscene.4dage.com/culturalrelics/Ger2/index.html">
			
 
				+            <img src="../assets/images/AllWall/gjzc1.png" alt="">
			
 
				+        </a>
			
 
				+        <a href="http://model3d.4dage.com/3D/2018/model/sh/index.html">
			
 
				+            <img src="../assets/images/AllWall/gjzc2.png" alt="">
			
 
				+        </a>
			
 
				+        <a href="https://www.4dkankan.com/showProPC.html?m=8PDQbODms&amp;open=wx_friend">
			
 
				+            <img src="../assets/images/AllWall/gjzc3.png" alt="">
			
 
				+        </a>
			
 
				+    </div>
			
 
				+</div>
			
 
				+</template>
			
 
				+
			
 
				+<script>
			
 
				+//这里可以导入其他文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）
			
 
				+//例如：import 《组件名称》 from '《组件路径》';
			
 
				+
			
 
				+export default {
			
 
				+    name:"International",
			
 
				+//import引入的组件需要注入到对象中才能使用
			
 
				+components: {},
			
 
				+data() {
			
 
				+//这里存放数据
			
 
				+return {
			
 
				+
			
 
				+};
			
 
				+},
			
 
				+//监听属性 类似于data概念
			
 
				+computed: {},
			
 
				+//监控data中的数据变化
			
 
				+watch: {},
			
 
				+//方法集合
			
 
				+methods: {
			
 
				+
			
 
				+},
			
 
				+//生命周期 - 创建完成（可以访问当前this实例）
			
 
				+created() {
			
 
				+
			
 
				+},
			
 
				+//生命周期 - 挂载完成（可以访问DOM元素）
			
 
				+mounted() {
			
 
				+
			
 
				+},
			
 
				+beforeCreate() {}, //生命周期 - 创建之前
			
 
				+beforeMount() {}, //生命周期 - 挂载之前
			
 
				+beforeUpdate() {}, //生命周期 - 更新之前
			
 
				+updated() {}, //生命周期 - 更新之后
			
 
				+beforeUnmount() {}, //生命周期 - 销毁之前
			
 
				+unmounted() {}, //生命周期 - 销毁完成
			
 
				+activated() {}, //如果页面有keep-alive缓存功能，这个函数会触发
			
 
				+}
			
 
				+</script>
			
 
				+<style  scoped>
			
 
				+.International {
			
 
				+    width: 100vw;
			
 
				+    height: 100vh;
			
 
				+}
			
 
				+.txt {
			
 
				+    margin-top: 150px;
			
 
				+}
			
 
				+.conten {
			
 
				+    margin-top: 15px;
			
 
				+}
			
 
				+.conten a {
			
 
				+    display: inline-block;
			
 
				+    width: 88%;
			
 
				+    height: 180px;
			
 
				+    margin: 5px auto;
			
 
				+}
			
 
				+.conten a img{
			
 
				+    width: 100%;
			
 
				+    height: 100%;
			
 
				+}
			
 
				+</style>
			
--- a/src/components/RenCulture.vue
+++ b/src/components/RenCulture.vue
@@ -0,0 +1,132 @@
 
				+<template>
			
 
				+  <div class="RenCulture">
			
 
				+    <div class="txt">
			
 
				+      <img src="../assets/images/AllWall/hswh.png" alt="" />
			
 
				+      <img src="../assets/images/AllWall/hswhbac.png" alt="" />
			
 
				+    </div>
			
 
				+    <div class="conten">
			
 
				+      <div class="left">
			
 
				+        <a
			
 
				+          href="https://culture.4dage.com/twoBase/LiangJiaHe/index.html"
			
 
				+          class="one"
			
 
				+        >
			
 
				+          <img src="../assets/images/AllWall/hswh1.png" alt="" />
			
 
				+        </a>
			
 
				+        <a
			
 
				+        style="width:94%"
			
 
				+          href="http://www.4dmodel.com/SuperTwo/index.html?m=794_f"
			
 
				+          class="tow"
			
 
				+        >
			
 
				+          <img src="../assets/images/AllWall/hswh2.png" alt="" />
			
 
				+        </a>
			
 
				+        <a
			
 
				+          href="https://admin.4dmuseum.cn/showPC.html?m=118&amp;bigScene=&amp;novr="
			
 
				+          class="one"
			
 
				+        >
			
 
				+          <img src="../assets/images/AllWall/hswh6.png" alt="" />
			
 
				+        </a>
			
 
				+      </div>
			
 
				+      <div class="right">
			
 
				+        <a
			
 
				+          href="http://www.4dmodel.com/SuperTwoCustom/shaoshan/index.html#/"
			
 
				+          class="tow"
			
 
				+        >
			
 
				+          <img src="../assets/images/AllWall/hswh3.png" alt="" />
			
 
				+        </a>
			
 
				+        <a
			
 
				+          href="http://www.4dmodel.com/SuperTwo/index.html?m=770_f"
			
 
				+          class="tow"
			
 
				+        >
			
 
				+          <img src="../assets/images/AllWall/hswh4.png" alt="" />
			
 
				+        </a>
			
 
				+        <a
			
 
				+          href="http://www.4dmodel.com/SuperTwo/index.html?m=775_f"
			
 
				+          class="tow"
			
 
				+        >
			
 
				+          <img src="../assets/images/AllWall/hswh5.png" alt="" />
			
 
				+        </a>
			
 
				+        <a
			
 
				+          href="http://www.4dmodel.com/SuperTwoCustom/SuperTwo710_711/index/home.html"
			
 
				+          class="tow"
			
 
				+        >
			
 
				+          <img src="../assets/images/AllWall/hswh8.png" alt="" />
			
 
				+        </a>
			
 
				+      </div>
			
 
				+    </div>
			
 
				+    <div class="conten" style="margin: 0px auto 0">
			
 
				+      <div class="right"></div>
			
 
				+      <div class="left"></div>
			
 
				+    </div>
			
 
				+  </div>
			
 
				+</template>
			
 
				+
			
 
				+<script>
			
 
				+//这里可以导入其他文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）
			
 
				+//例如：import 《组件名称》 from '《组件路径》';
			
 
				+
			
 
				+export default {
			
 
				+  //import引入的组件需要注入到对象中才能使用
			
 
				+  components: {},
			
 
				+  data() {
			
 
				+    //这里存放数据
			
 
				+    return {};
			
 
				+  },
			
 
				+  //监听属性 类似于data概念
			
 
				+  computed: {},
			
 
				+  //监控data中的数据变化
			
 
				+  watch: {},
			
 
				+  //方法集合
			
 
				+  methods: {},
			
 
				+  //生命周期 - 创建完成（可以访问当前this实例）
			
 
				+  created() {},
			
 
				+  //生命周期 - 挂载完成（可以访问DOM元素）
			
 
				+  mounted() {},
			
 
				+  beforeCreate() {}, //生命周期 - 创建之前
			
 
				+  beforeMount() {}, //生命周期 - 挂载之前
			
 
				+  beforeUpdate() {}, //生命周期 - 更新之前
			
 
				+  updated() {}, //生命周期 - 更新之后
			
 
				+  beforeUnmount() {}, //生命周期 - 销毁之前
			
 
				+  unmounted() {}, //生命周期 - 销毁完成
			
 
				+  activated() {}, //如果页面有keep-alive缓存功能，这个函数会触发
			
 
				+};
			
 
				+</script>
			
 
				+<style scoped>
			
 
				+.RenCulture {
			
 
				+  width: 100vw;
			
 
				+}
			
 
				+.txt {
			
 
				+  margin-top: 60px;
			
 
				+}
			
 
				+.txt img {
			
 
				+  max-width: 98%;
			
 
				+}
			
 
				+.conten {
			
 
				+  width: 90%;
			
 
				+  margin: 28px auto 0;
			
 
				+  display: flex;
			
 
				+  justify-content: space-around;
			
 
				+}
			
 
				+.conten a {
			
 
				+  display: inline-block;
			
 
				+}
			
 
				+.conten img {
			
 
				+  width: 100%;
			
 
				+  height: 100%;
			
 
				+}
			
 
				+.left {
			
 
				+  height: 100%;
			
 
				+  width: 50%;
			
 
				+}
			
 
				+.right {
			
 
				+  height: 100%;
			
 
				+  width: 48%;
			
 
				+}
			
 
				+.one {
			
 
				+  width: 100%;
			
 
				+  height: 317px;
			
 
				+}
			
 
				+.tow {
			
 
				+  width: 100%;
			
 
				+  height: 210px;
			
 
				+}
			
 
				+</style>
			
--- a/src/components/Tradition.vue
+++ b/src/components/Tradition.vue
@@ -0,0 +1,105 @@
 
				+<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 {
			
 
				+  max-width: 400px;
			
 
				+  max-height: 550px;
			
 
				+  position: absolute;
			
 
				+  top: 60%;
			
 
				+  left: 50%;
			
 
				+  transform: translate(-50%,-50%);
			
 
				+  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 {
			
 
				+    max-width: 350px;
			
 
				+  max-height: 500px;
			
 
				+
			
 
				+  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>
			
--- a/src/data/posters.js
+++ b/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};
			
--- a/src/main.js
+++ b/src/main.js
@@ -0,0 +1,5 @@
 
				+import { createApp } from 'vue'
			
 
				+import App from './App.vue'
			
 
				+
			
 
				+import '../utils/rem.js'
			
 
				+createApp(App).mount('#app')
			
--- a/src/view/Home.vue
+++ b/src/view/Home.vue
@@ -0,0 +1,80 @@
 
				+<template>
			
 
				+  <GuidePage />
			
 
				+  <!-- <AllWall /> -->
			
 
				+      <!-- 万物墙 -->
			
 
				+    <div id="iframe-container">
			
 
				+      <iframe id="wanwuqiang" src="dist/index.html"></iframe>
			
 
				+    </div>
			
 
				+
			
 
				+  <div class="bigbac">
			
 
				+    <div id="posters">
			
 
				+      <div class="txt">
			
 
				+        <img src="../assets/images/AllWall/ctwh.png" alt="" />
			
 
				+        <img src="../assets/images/AllWall/ctwhbac.png" alt="" />
			
 
				+      </div>
			
 
				+      <Tradition />
			
 
				+    </div>
			
 
				+    <RenCulture />
			
 
				+    <International />
			
 
				+  </div>
			
 
				+  <About />
			
 
				+</template>
			
 
				+
			
 
				+<script>
			
 
				+import Tradition from "@/components/Tradition.vue";
			
 
				+import GuidePage from "@/components/GuidePage.vue";
			
 
				+// import AllWall from "@/components/AllWall.vue";
			
 
				+import RenCulture from "@/components/RenCulture.vue";
			
 
				+import International from "@/components/International.vue";
			
 
				+import About from "@/components/About.vue";
			
 
				+export default {
			
 
				+  name: "Home",
			
 
				+  components: {
			
 
				+    GuidePage,
			
 
				+    Tradition,
			
 
				+    // AllWall,
			
 
				+    RenCulture,
			
 
				+    International,
			
 
				+    About,
			
 
				+  },
			
 
				+  // created(){
			
 
				+  //           // 判断浏览器函数
			
 
				+  //       function isMobile() {
			
 
				+  //           if (window.navigator.userAgent.match(/(phone|pad|pod|iPhone|iPod|ios|iPad|Android|Mobile|BlackBerry|IEMobile|MQQBrowser|JUC|Fennec|wOSBrowser|BrowserNG|WebOS|Symbian|Windows Phone)/i)) {
			
 
				+  //               return true; // 移动端
			
 
				+  //           } else {
			
 
				+  //               return false; // PC端
			
 
				+  //           }
			
 
				+  //       }
			
 
				+  //       if(!isMobile()){
			
 
				+  //           window.location.replace('https://zzbbh.4dage.com/web/index.html')
			
 
				+  //       }
			
 
				+  // }
			
 
				+};
			
 
				+</script>
			
 
				+
			
 
				+<style scoped>
			
 
				+#posters {
			
 
				+    position: relative;
			
 
				+  width: 100vw;
			
 
				+  height: 100vh;
			
 
				+  padding-top: 80px;
			
 
				+}
			
 
				+.bigbac {
			
 
				+  width: 100vw;
			
 
				+  height: 2920px;
			
 
				+  background: url("../assets/images/bigbac.jpg") no-repeat;
			
 
				+  background-size: 100% 100%;
			
 
				+}
			
 
				+#iframe-container {
			
 
				+  width: 100vw;
			
 
				+  height: 100vh;
			
 
				+  overflow: hidden;
			
 
				+}
			
 
				+#wanwuqiang {
			
 
				+  width: 100%;
			
 
				+  height: 102%;
			
 
				+  border: none;
			
 
				+  overflow: hidden;
			
 
				+}
			
 
				+</style>
			
--- a/utils/rem.js
+++ b/utils/rem.js
@@ -0,0 +1,12 @@
 
				+// 设置基准大小
			
 
				+const baseSize =16;
			
 
				+function setRem () {
			
 
				+  // 当前页面宽度相对于 414 宽的缩放比例
			
 
				+  const scale = document.documentElement.clientWidth / 414
			
 
				+  document.documentElement.style.fontSize = Math.min(29.6,(baseSize * Math.min(scale, 2))) + 'px'
			
 
				+}
			
 
				+// 初始化
			
 
				+setRem()
			
 
				+window.onresize = function () {
			
 
				+  setRem()
			
 
				+}
			
--- a/vue.config.js
+++ b/vue.config.js
@@ -0,0 +1,8 @@
 
				+// vue.config.js
			
 
				+
			
 
				+/**
			
 
				+ * @type {import('@vue/cli-service').ProjectOptions}
			
 
				+ */
			
 
				+ module.exports = {
			
 
				+    publicPath:'./'
			
 
				+  }