3 years ago · 70619d019d
--- a/pc/.gitignore
+++ b/pc/.gitignore
@@ -0,0 +1,23 @@
 
				+.DS_Store
			
 
				+node_modules
			
 
				+/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/pc/README.md
+++ b/pc/README.md
@@ -0,0 +1,19 @@
 
				+# pc
			
 
				+
			
 
				+## Project setup
			
 
				+```
			
 
				+npm install
			
 
				+```
			
 
				+
			
 
				+### Compiles and hot-reloads for development
			
 
				+```
			
 
				+npm run serve
			
 
				+```
			
 
				+
			
 
				+### Compiles and minifies for production
			
 
				+```
			
 
				+npm run build
			
 
				+```
			
 
				+
			
 
				+### Customize configuration
			
 
				+See [Configuration Reference](https://cli.vuejs.org/config/).
			
--- a/pc/babel.config.js
+++ b/pc/babel.config.js
@@ -0,0 +1,5 @@
 
				+module.exports = {
			
 
				+  presets: [
			
 
				+    '@vue/cli-plugin-babel/preset'
			
 
				+  ]
			
 
				+}
			
--- a/pc/package-lock.json
+++ b/pc/package-lock.json
--- a/pc/package.json
+++ b/pc/package.json
@@ -0,0 +1,28 @@
 
				+{
			
 
				+  "name": "pc",
			
 
				+  "version": "0.1.0",
			
 
				+  "private": true,
			
 
				+  "scripts": {
			
 
				+    "serve": "vue-cli-service serve",
			
 
				+    "build": "vue-cli-service build"
			
 
				+  },
			
 
				+  "dependencies": {
			
 
				+    "core-js": "^3.6.5",
			
 
				+    "element-ui": "^2.15.9",
			
 
				+    "vue": "^2.6.11",
			
 
				+    "vue-router": "^3.2.0"
			
 
				+  },
			
 
				+  "devDependencies": {
			
 
				+    "@vue/cli-plugin-babel": "~4.5.13",
			
 
				+    "@vue/cli-plugin-router": "~4.5.13",
			
 
				+    "@vue/cli-service": "~4.5.13",
			
 
				+    "less": "^3.0.4",
			
 
				+    "less-loader": "^5.0.0",
			
 
				+    "vue-template-compiler": "^2.6.11"
			
 
				+  },
			
 
				+  "browserslist": [
			
 
				+    "> 1%",
			
 
				+    "last 2 versions",
			
 
				+    "not dead"
			
 
				+  ]
			
 
				+}
			
--- a/pc/public/favicon.ico
+++ b/pc/public/favicon.ico
--- a/pc/public/index.html
+++ b/pc/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><%= htmlWebpackPlugin.options.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/pc/src/App.vue
+++ b/pc/src/App.vue
@@ -0,0 +1,16 @@
 
				+<template>
			
 
				+  <div id="app">
			
 
				+    <Router-view/>
			
 
				+  </div>
			
 
				+</template>
			
 
				+
			
 
				+<style lang="less">
			
 
				+#app {
			
 
				+  width: 100vw;
			
 
				+  height: 100vh;
			
 
				+  min-width: 1800px;
			
 
				+  min-height: 900px;
			
 
				+  overflow: hidden;
			
 
				+}
			
 
				+
			
 
				+</style>
			
--- a/pc/src/assets/base.css
+++ b/pc/src/assets/base.css
@@ -0,0 +1,15 @@
 
				+* {
			
 
				+  margin: 0;
			
 
				+  padding: 0;
			
 
				+  box-sizing: border-box;
			
 
				+}
			
 
				+body {
			
 
				+  background-color: transparent;
			
 
				+  user-select: none;
			
 
				+}
			
 
				+ul li {
			
 
				+  list-style: none;
			
 
				+}
			
 
				+a {
			
 
				+  text-decoration:none ;
			
 
				+}
			
--- a/pc/src/assets/bg.mp3
+++ b/pc/src/assets/bg.mp3
--- a/pc/src/assets/img/back.png
+++ b/pc/src/assets/img/back.png
--- a/pc/src/assets/img/bottomBac.png
+++ b/pc/src/assets/img/bottomBac.png
--- a/pc/src/assets/img/bttomIsShow.png
+++ b/pc/src/assets/img/bttomIsShow.png
--- a/pc/src/assets/img/demo.png
+++ b/pc/src/assets/img/demo.png
--- a/pc/src/assets/img/demo2.png
+++ b/pc/src/assets/img/demo2.png
--- a/pc/src/assets/img/fenge.png
+++ b/pc/src/assets/img/fenge.png
--- a/pc/src/assets/img/left1.png
+++ b/pc/src/assets/img/left1.png
--- a/pc/src/assets/img/left1Ac.png
+++ b/pc/src/assets/img/left1Ac.png
--- a/pc/src/assets/img/left2.png
+++ b/pc/src/assets/img/left2.png
--- a/pc/src/assets/img/left2Ac.png
+++ b/pc/src/assets/img/left2Ac.png
--- a/pc/src/assets/img/left3.png
+++ b/pc/src/assets/img/left3.png
--- a/pc/src/assets/img/left3Ac.png
+++ b/pc/src/assets/img/left3Ac.png
--- a/pc/src/assets/img/logo.png
+++ b/pc/src/assets/img/logo.png
--- a/pc/src/assets/img/top1Bac.png
+++ b/pc/src/assets/img/top1Bac.png
--- a/pc/src/assets/img/top3Bac.png
+++ b/pc/src/assets/img/top3Bac.png
--- a/pc/src/assets/img/topClose.png
+++ b/pc/src/assets/img/topClose.png
--- a/pc/src/assets/img/zhan/1_6.png
+++ b/pc/src/assets/img/zhan/1_6.png
--- a/pc/src/assets/img/zhan/1_6Ac.png
+++ b/pc/src/assets/img/zhan/1_6Ac.png
--- a/pc/src/assets/img/zhan/1_7.png
+++ b/pc/src/assets/img/zhan/1_7.png
--- a/pc/src/assets/img/zhan/1_7Ac.png
+++ b/pc/src/assets/img/zhan/1_7Ac.png
--- a/pc/src/assets/img/zhan/leftList.png
+++ b/pc/src/assets/img/zhan/leftList.png
--- a/pc/src/assets/img/zhanBac.png
+++ b/pc/src/assets/img/zhanBac.png
--- a/pc/src/assets/swiper/swiper.css
+++ b/pc/src/assets/swiper/swiper.css
--- a/pc/src/assets/swiper/swiper.js
+++ b/pc/src/assets/swiper/swiper.js
--- a/pc/src/main.js
+++ b/pc/src/main.js
@@ -0,0 +1,13 @@
 
				+import Vue from 'vue'
			
 
				+import App from './App.vue'
			
 
				+import router from './router'
			
 
				+import ElementUI from 'element-ui';
			
 
				+import 'element-ui/lib/theme-chalk/index.css';
			
 
				+Vue.use(ElementUI);
			
 
				+import './assets/base.css'
			
 
				+Vue.config.productionTip = false
			
 
				+
			
 
				+new Vue({
			
 
				+  router,
			
 
				+  render: h => h(App)
			
 
				+}).$mount('#app')
			
--- a/pc/src/router/index.js
+++ b/pc/src/router/index.js
@@ -0,0 +1,19 @@
 
				+import Vue from 'vue'
			
 
				+import VueRouter from 'vue-router'
			
 
				+
			
 
				+Vue.use(VueRouter)
			
 
				+
			
 
				+const routes = [
			
 
				+  {
			
 
				+    path: '/',
			
 
				+    name: 'Home',
			
 
				+    component: () => import('../views/Home.vue')
			
 
				+  },
			
 
				+
			
 
				+]
			
 
				+
			
 
				+const router = new VueRouter({
			
 
				+  routes
			
 
				+})
			
 
				+
			
 
				+export default router
			
--- a/pc/src/views/Bottom.vue
+++ b/pc/src/views/Bottom.vue
@@ -0,0 +1,311 @@
 
				+<template>
			
 
				+  <div class="Bottom">
			
 
				+    <div class="box1">
			
 
				+      <!-- 航拍 -->
			
 
				+      <div :class="{ acShow: towAc === 1 }">
			
 
				+        <div class="swiper-container swiper-container1">
			
 
				+          <div class="swiper-wrapper">
			
 
				+            <div class="swiper-slide">
			
 
				+              <div
			
 
				+                v-for="(item, index) in data1_1"
			
 
				+                :key="index"
			
 
				+                :class="{ active: oneAc === item.code, sm: item.sm }"
			
 
				+                @click="cutVr(item)"
			
 
				+              >
			
 
				+                <img src="../assets/img/demo.png" alt="" />
			
 
				+                <p>{{ item.name + index }}</p>
			
 
				+              </div>
			
 
				+            </div>
			
 
				+            <div class="swiper-slide">
			
 
				+              <div
			
 
				+                v-for="(item, index) in data1_2"
			
 
				+                :key="index"
			
 
				+                :class="{ active: oneAc === item.code, sm: item.sm }"
			
 
				+                @click="cutVr(item)"
			
 
				+              >
			
 
				+                <img src="../assets/img/demo2.png" alt="" />
			
 
				+                <p>{{ item.name + index }}</p>
			
 
				+              </div>
			
 
				+            </div>
			
 
				+          </div>
			
 
				+        </div>
			
 
				+        <div class="swiper-button-next swiper-button-next1"></div>
			
 
				+        <div class="swiper-button-prev swiper-button-prev1"></div>
			
 
				+      </div>
			
 
				+
			
 
				+      <!-- 地面全景 -->
			
 
				+      <div :class="{ acShow: towAc === 2 }">
			
 
				+        <div class="swiper-container swiper-container2">
			
 
				+          <div class="swiper-wrapper">
			
 
				+            <div class="swiper-slide">
			
 
				+              <div
			
 
				+                v-for="(item, index) in data2_1"
			
 
				+                :key="index"
			
 
				+                :class="{ active: oneAc === item.code, sm: item.sm }"
			
 
				+                @click="cutVr(item)"
			
 
				+              >
			
 
				+                <img src="../assets/img/demo.png" alt="" />
			
 
				+                <p>{{ item.name + index }}</p>
			
 
				+              </div>
			
 
				+            </div>
			
 
				+            <div class="swiper-slide">
			
 
				+              <div
			
 
				+                v-for="(item, index) in data2_2"
			
 
				+                :key="index"
			
 
				+                :class="{ active: oneAc === item.code, sm: item.sm }"
			
 
				+                @click="cutVr(item)"
			
 
				+              >
			
 
				+                <img src="../assets/img/demo2.png" alt="" />
			
 
				+                <p>{{ item.name + index }}</p>
			
 
				+              </div>
			
 
				+            </div>
			
 
				+          </div>
			
 
				+        </div>
			
 
				+        <div class="swiper-button-next swiper-button-next2"></div>
			
 
				+        <div class="swiper-button-prev swiper-button-prev2"></div>
			
 
				+      </div>
			
 
				+
			
 
				+      <!-- 室内导览 -->
			
 
				+      <div :class="{ acShow: towAc === 3 }">
			
 
				+        <div class="swiper-container swiper-container3">
			
 
				+          <div class="swiper-wrapper">
			
 
				+            <div class="swiper-slide">
			
 
				+              <div
			
 
				+                v-for="(item, index) in data3_1"
			
 
				+                :key="index"
			
 
				+                :class="{ active: oneAc === item.code, sm: item.sm }"
			
 
				+                @click="cutVr(item)"
			
 
				+              >
			
 
				+                <img src="../assets/img/demo.png" alt="" />
			
 
				+                <p>{{ item.name + index }}</p>
			
 
				+              </div>
			
 
				+            </div>
			
 
				+          </div>
			
 
				+        </div>
			
 
				+      </div>
			
 
				+    </div>
			
 
				+    <div class="box2">
			
 
				+      <div :class="{ active: towAc === 1 }" @click="towAc = 1">航拍</div>
			
 
				+      <img src="../assets/img/fenge.png" alt="" />
			
 
				+      <div :class="{ active: towAc === 2 }" @click="towAc = 2">地面全景</div>
			
 
				+      <img src="../assets/img/fenge.png" alt="" />
			
 
				+      <div :class="{ active: towAc === 3 }" @click="towAc = 3">室内导览</div>
			
 
				+    </div>
			
 
				+  </div>
			
 
				+</template>
			
 
				+
			
 
				+<script>
			
 
				+import Swiper from "@/assets/swiper/swiper.js";
			
 
				+export default {
			
 
				+  name: "Bottom",
			
 
				+  components: {},
			
 
				+  data() {
			
 
				+    return {
			
 
				+      oneAc: "aa",
			
 
				+      towAc: 1,
			
 
				+      data1_1: [
			
 
				+        { sm: true, name: "航拍全景1_", code: "aa", ind: 0 },
			
 
				+        { name: "航拍全景1_", code: "bb", ind: 0 },
			
 
				+        { name: "航拍全景1_", code: "cc", ind: 0 },
			
 
				+        { name: "航拍全景1_", code: "", ind: 0 },
			
 
				+        { name: "航拍全景1_", code: "", ind: 0 },
			
 
				+        { sm: true, name: "航拍全景1_", code: "", ind: 0 },
			
 
				+      ],
			
 
				+      data1_2: [
			
 
				+        { sm: true, name: "航拍全景2_", code: "", ind: 0 },
			
 
				+        { name: "航拍全景2_", code: "", ind: 0 },
			
 
				+        { name: "航拍全景2_", code: "", ind: 0 },
			
 
				+        { name: "航拍全景2_", code: "", ind: 0 },
			
 
				+        { name: "航拍全景2_", code: "", ind: 0 },
			
 
				+        { sm: true, name: "航拍全景2_", code: "", ind: 0 },
			
 
				+      ],
			
 
				+      data2_1: [
			
 
				+        { sm: true, name: "地面全景1_", code: "aa", ind: 0 },
			
 
				+        { name: "地面全景1_", code: "bb", ind: 0 },
			
 
				+        { name: "地面全景1_", code: "cc", ind: 0 },
			
 
				+        { name: "地面全景1_", code: "", ind: 0 },
			
 
				+        { name: "地面全景1_", code: "", ind: 0 },
			
 
				+        { sm: true, name: "地面全景1_", code: "", ind: 0 },
			
 
				+      ],
			
 
				+      data2_2: [
			
 
				+        { sm: true, name: "地面全景2_", code: "aa", ind: 0 },
			
 
				+        { name: "地面全景2_", code: "bb", ind: 0 },
			
 
				+        { name: "地面全景2_", code: "cc", ind: 0 },
			
 
				+        { name: "地面全景2_", code: "", ind: 0 },
			
 
				+        { name: "地面全景2_", code: "", ind: 0 },
			
 
				+        { sm: true, name: "地面全景2_", code: "", ind: 0 },
			
 
				+      ],
			
 
				+      data3_1: [
			
 
				+        { name: "第一展厅", code: "111", ind: 0 },
			
 
				+        { name: "第一展厅", code: "222", ind: 0 },
			
 
				+      ],
			
 
				+    };
			
 
				+  },
			
 
				+  computed: {},
			
 
				+  methods: {
			
 
				+    // 切换VR
			
 
				+    cutVr(item) {
			
 
				+      this.oneAc = item.code;
			
 
				+      this.$emit('zhanChange',item.code)
			
 
				+    },
			
 
				+  },
			
 
				+  watch: {
			
 
				+    towAc(val) {
			
 
				+      // 控制底部容器大小
			
 
				+      this.$emit("botWidth", val);
			
 
				+    },
			
 
				+  },
			
 
				+  //生命周期 - 创建完成（可以访问当前this实例）
			
 
				+  created() {},
			
 
				+  //生命周期 - 挂载完成（可以访问DOM元素）
			
 
				+  mounted() {
			
 
				+    this.$nextTick(() => {
			
 
				+      new Swiper(".box1 .swiper-container1", {
			
 
				+        navigation: {
			
 
				+          nextEl: ".swiper-button-next1",
			
 
				+          prevEl: ".swiper-button-prev1",
			
 
				+        },
			
 
				+        slidesPerView: 1,
			
 
				+        spaceBetween: 0,
			
 
				+      });
			
 
				+      new Swiper(".box1 .swiper-container2", {
			
 
				+        navigation: {
			
 
				+          nextEl: ".swiper-button-next2",
			
 
				+          prevEl: ".swiper-button-prev2",
			
 
				+        },
			
 
				+        slidesPerView: 1,
			
 
				+        spaceBetween: 0,
			
 
				+      });
			
 
				+      new Swiper(".box1 .swiper-container3", {
			
 
				+        slidesPerView: 1,
			
 
				+        spaceBetween: 0,
			
 
				+      });
			
 
				+    });
			
 
				+  },
			
 
				+  beforeCreate() {}, //生命周期 - 创建之前
			
 
				+  beforeMount() {}, //生命周期 - 挂载之前
			
 
				+  beforeUpdate() {}, //生命周期 - 更新之前
			
 
				+  updated() {}, //生命周期 - 更新之后
			
 
				+  beforeDestroy() {}, //生命周期 - 销毁之前
			
 
				+  destroyed() {}, //生命周期 - 销毁完成
			
 
				+  activated() {}, //如果页面有keep-alive缓存功能，这个函数会触发
			
 
				+};
			
 
				+</script>
			
 
				+<style lang='less' scoped>
			
 
				+@import "../assets/swiper/swiper.css";
			
 
				+.Bottom {
			
 
				+  width: 100%;
			
 
				+  height: 100%;
			
 
				+  .box1 {
			
 
				+    position: relative;
			
 
				+    width: 100%;
			
 
				+    height: 152px;
			
 
				+    margin-bottom: 4px;
			
 
				+    background-color: rgba(0, 0, 0, 0.8);
			
 
				+    border-radius: 60px 60px 0 0;
			
 
				+    & > div {
			
 
				+      padding: 8px 50px 5px 50px;
			
 
				+      position: absolute;
			
 
				+      top: 0;
			
 
				+      left: 0;
			
 
				+      width: 100%;
			
 
				+      height: 100%;
			
 
				+      opacity: 0;
			
 
				+      pointer-events: none;
			
 
				+      width: 100%;
			
 
				+      height: 100%;
			
 
				+    }
			
 
				+    .acShow {
			
 
				+      opacity: 1;
			
 
				+      pointer-events: auto;
			
 
				+    }
			
 
				+    .swiper-container {
			
 
				+      width: 100%;
			
 
				+      height: 100%;
			
 
				+      .swiper-slide {
			
 
				+        display: flex;
			
 
				+        & > div {
			
 
				+          border-radius: 20px;
			
 
				+          overflow: hidden;
			
 
				+          position: relative;
			
 
				+          cursor: pointer;
			
 
				+          margin-right: 12px;
			
 
				+          width: 209px;
			
 
				+          height: 100%;
			
 
				+          &:nth-of-type(6) {
			
 
				+            margin-right: 0;
			
 
				+          }
			
 
				+          & > p {
			
 
				+            transition: all 0.3s;
			
 
				+            position: absolute;
			
 
				+            bottom: 0;
			
 
				+            left: 0;
			
 
				+            width: 100%;
			
 
				+            height: 30px;
			
 
				+            line-height: 30px;
			
 
				+            text-align: center;
			
 
				+            background-color: rgba(0, 0, 0, 0.6);
			
 
				+            font-size: 14px;
			
 
				+            color: #fff;
			
 
				+          }
			
 
				+          & > img {
			
 
				+            width: 100%;
			
 
				+            height: 100%;
			
 
				+            object-fit: cover;
			
 
				+          }
			
 
				+          &:hover {
			
 
				+            & > p {
			
 
				+              background-color: rgba(181, 147, 134, 0.8);
			
 
				+            }
			
 
				+          }
			
 
				+        }
			
 
				+        .active {
			
 
				+          pointer-events: none;
			
 
				+          & > p {
			
 
				+            background-color: rgba(181, 147, 134, 0.8);
			
 
				+          }
			
 
				+        }
			
 
				+        .sm {
			
 
				+          width: 170px;
			
 
				+        }
			
 
				+      }
			
 
				+    }
			
 
				+    .swiper-button-next {
			
 
				+      color: #b59386;
			
 
				+    }
			
 
				+    .swiper-button-prev {
			
 
				+      color: #b59386;
			
 
				+    }
			
 
				+  }
			
 
				+  .box2 {
			
 
				+    background-color: rgba(0, 0, 0, 0.8);
			
 
				+    width: 100%;
			
 
				+    height: 65px;
			
 
				+    display: flex;
			
 
				+    align-items: center;
			
 
				+    justify-content: center;
			
 
				+    & > img {
			
 
				+      margin: 0 32px;
			
 
				+      width: 2px;
			
 
				+      height: 40px;
			
 
				+    }
			
 
				+    & > div {
			
 
				+      cursor: pointer;
			
 
				+      font-size: 22px;
			
 
				+      color: #fff;
			
 
				+      padding-bottom: 5px;
			
 
				+      &:hover {
			
 
				+        padding-top: 2px;
			
 
				+        color: #b59386;
			
 
				+        border-bottom: 2px solid #b59386;
			
 
				+      }
			
 
				+    }
			
 
				+    .active {
			
 
				+      padding-top: 2px;
			
 
				+      pointer-events: none;
			
 
				+      color: #b59386;
			
 
				+      border-bottom: 2px solid #b59386;
			
 
				+    }
			
 
				+  }
			
 
				+}
			
 
				+</style>
			
--- a/pc/src/views/Home.vue
+++ b/pc/src/views/Home.vue
--- a/pc/src/views/Onezhan.vue
+++ b/pc/src/views/Onezhan.vue
@@ -0,0 +1,161 @@
 
				+<template>
			
 
				+  <div class="Onezhan">
			
 
				+    <div class="main">
			
 
				+      <p class="botTit">第一展厅</p>
			
 
				+      <div
			
 
				+        :class="item.class"
			
 
				+        v-for="item in data"
			
 
				+        :key="item.id"
			
 
				+        @click="lookTxt(item.id)"
			
 
				+      >
			
 
				+        {{ item.name }}
			
 
				+      </div>
			
 
				+    </div>
			
 
				+  </div>
			
 
				+</template>
			
 
				+
			
 
				+<script>
			
 
				+export default {
			
 
				+  name: "Onezhan",
			
 
				+  components: {},
			
 
				+  data() {
			
 
				+    return {
			
 
				+      data: [
			
 
				+        { name: "分区一", id: 1, class: "box1" },
			
 
				+        { name: "分区二", id: 2, class: "box2" },
			
 
				+        { name: "分区三", id: 3, class: "box3" },
			
 
				+        { name: "分区四", id: 4, class: "box4" },
			
 
				+        { name: "分区五", id: 5, class: "box5" },
			
 
				+        { name: "分区六", id: 6, class: "box6" },
			
 
				+        { name: "分区七", id: 7, class: "box7" },
			
 
				+      ],
			
 
				+      leftData: {
			
 
				+        1: [],
			
 
				+      },
			
 
				+    };
			
 
				+  },
			
 
				+  computed: {},
			
 
				+  methods: {
			
 
				+    lookTxt(id) {
			
 
				+      console.log("---", id);
			
 
				+    },
			
 
				+  },
			
 
				+  //生命周期 - 创建完成（可以访问当前this实例）
			
 
				+  created() {},
			
 
				+  //生命周期 - 挂载完成（可以访问DOM元素）
			
 
				+  mounted() {},
			
 
				+  beforeCreate() {}, //生命周期 - 创建之前
			
 
				+  beforeMount() {}, //生命周期 - 挂载之前
			
 
				+  beforeUpdate() {}, //生命周期 - 更新之前
			
 
				+  updated() {}, //生命周期 - 更新之后
			
 
				+  beforeDestroy() {}, //生命周期 - 销毁之前
			
 
				+  destroyed() {}, //生命周期 - 销毁完成
			
 
				+  activated() {}, //如果页面有keep-alive缓存功能，这个函数会触发
			
 
				+};
			
 
				+</script>
			
 
				+<style lang='less' scoped>
			
 
				+.Onezhan {
			
 
				+  z-index: 10;
			
 
				+  position: absolute;
			
 
				+  width: 1303px;
			
 
				+  height: 560px;
			
 
				+  top: 100px;
			
 
				+  left: 50%;
			
 
				+  transform: translateX(-50%);
			
 
				+  background-image: url("../assets/img/zhanBac.png");
			
 
				+  background-size: 100% 100%;
			
 
				+  .main {
			
 
				+    .botTit {
			
 
				+      position: absolute;
			
 
				+      bottom: 116px;
			
 
				+      left: 490px;
			
 
				+      font-size: 20px;
			
 
				+      color: #fff;
			
 
				+      letter-spacing: 8px;
			
 
				+    }
			
 
				+    & > div {
			
 
				+      z-index: 10;
			
 
				+      cursor: pointer;
			
 
				+      position: absolute;
			
 
				+      background-color: #034c52;
			
 
				+      display: flex;
			
 
				+      justify-content: center;
			
 
				+      align-items: center;
			
 
				+      color: rgba(255, 255, 255, 0.7);
			
 
				+      transition: all 0.3s;
			
 
				+      &:hover {
			
 
				+        background-color: #d07428;
			
 
				+        color: #fff;
			
 
				+      }
			
 
				+    }
			
 
				+    .box1 {
			
 
				+      top: 150px;
			
 
				+      right: 489px;
			
 
				+      width: 184px;
			
 
				+      height: 114px;
			
 
				+    }
			
 
				+    .box2 {
			
 
				+      width: 184px;
			
 
				+      height: 109px;
			
 
				+      top: 26px;
			
 
				+      right: 489px;
			
 
				+    }
			
 
				+    .box3 {
			
 
				+      width: 94px;
			
 
				+      height: 239px;
			
 
				+      top: 26px;
			
 
				+      right: 683px;
			
 
				+    }
			
 
				+    .box4 {
			
 
				+      width: 158px;
			
 
				+      height: 109px;
			
 
				+      top: 26px;
			
 
				+      left: 357px;
			
 
				+    }
			
 
				+    .box5 {
			
 
				+      width: 177px;
			
 
				+      height: 114px;
			
 
				+      top: 150px;
			
 
				+      left: 339px;
			
 
				+    }
			
 
				+    .box6 {
			
 
				+      background-color: transparent;
			
 
				+      z-index: 9;
			
 
				+      width: 165px;
			
 
				+      height: 161px;
			
 
				+      background-image: url("../assets/img/zhan/1_6.png");
			
 
				+      background-size: 100% 100%;
			
 
				+      top: 151px;
			
 
				+      left: 166px;
			
 
				+      padding-left: 20px;
			
 
				+      &::after {
			
 
				+        content: "";
			
 
				+        position: absolute;
			
 
				+        top: -1px;
			
 
				+        right: -8px;
			
 
				+        width: 12px;
			
 
				+        height: 115px;
			
 
				+      }
			
 
				+      &:hover {
			
 
				+        background-color: transparent;
			
 
				+        background-image: url("../assets/img/zhan/1_6Ac.png");
			
 
				+      }
			
 
				+    }
			
 
				+    .box7 {
			
 
				+      z-index: 8;
			
 
				+      width: 272px;
			
 
				+      height: 204px;
			
 
				+      background-color: transparent;
			
 
				+      top: 27px;
			
 
				+      left: 73px;
			
 
				+      background-image: url("../assets/img/zhan/1_7.png");
			
 
				+      background-size: 100% 100%;
			
 
				+      padding-bottom: 20px;
			
 
				+      &:hover {
			
 
				+        background-image: url("../assets/img/zhan/1_7Ac.png");
			
 
				+        background-color: transparent;
			
 
				+      }
			
 
				+    }
			
 
				+  }
			
 
				+}
			
 
				+</style>
			
--- a/pc/vue.config.js
+++ b/pc/vue.config.js
@@ -0,0 +1,3 @@
 
				+module.exports = {
			
 
				+  publicPath: './'
			
 
				+}