up

package-lock.json

@@ -12,6 +12,7 @@
         "core-js": "^3.6.5",
         "swiper": "^8.4.4",
         "v-viewer": "^1.6.4",
+        "vant": "^2.12.52",
         "vue": "^2.6.11",
         "vue-infinite-scroll": "^2.0.2",
         "vue-lazyload": "^1.3.3",
@@ -1630,7 +1631,6 @@
       "version": "7.20.1",
       "resolved": "https://r.cnpmjs.org/@babel/runtime/-/runtime-7.20.1.tgz",
       "integrity": "sha512-mrzLkl6U9YLF8qpqI7TB82PESyEGjm/0Ly91jG575eVxMMlb8fYfOXFZIJ8XfLrJZQbm7dlKry2bJmXBUEkdFg==",
-      "dev": true,
       "dependencies": {
         "regenerator-runtime": "^0.13.10"
       },
@@ -2133,11 +2133,20 @@
         "node": ">= 8"
       }
     },
+    "node_modules/@vant/icons": {
+      "version": "1.8.0",
+      "resolved": "https://registry.npmmirror.com/@vant/icons/-/icons-1.8.0.tgz",
+      "integrity": "sha512-sKfEUo2/CkQFuERxvkuF6mGQZDKu3IQdj5rV9Fm0weJXtchDSSQ+zt8qPCNUEhh9Y8shy5PzxbvAfOOkCwlCXg=="
+    },
+    "node_modules/@vant/popperjs": {
+      "version": "1.3.0",
+      "resolved": "https://registry.npmmirror.com/@vant/popperjs/-/popperjs-1.3.0.tgz",
+      "integrity": "sha512-hB+czUG+aHtjhaEmCJDuXOep0YTZjdlRR+4MSmIFnkCQIxJaXLQdSsR90XWvAI2yvKUI7TCGqR8pQg2RtvkMHw=="
+    },
     "node_modules/@vue/babel-helper-vue-jsx-merge-props": {
       "version": "1.4.0",
       "resolved": "https://r.cnpmjs.org/@vue/babel-helper-vue-jsx-merge-props/-/babel-helper-vue-jsx-merge-props-1.4.0.tgz",
-      "integrity": "sha512-JkqXfCkUDp4PIlFdDQ0TdXoIejMtTHP67/pvxlgeY+u5k3LEdKuWZ3LK6xkxo52uDoABIVyRwqVkfLQJhk7VBA==",
-      "dev": true
+      "integrity": "sha512-JkqXfCkUDp4PIlFdDQ0TdXoIejMtTHP67/pvxlgeY+u5k3LEdKuWZ3LK6xkxo52uDoABIVyRwqVkfLQJhk7VBA=="
     },
     "node_modules/@vue/babel-helper-vue-transform-on": {
       "version": "1.0.2",
@@ -12015,8 +12024,7 @@
     "node_modules/regenerator-runtime": {
       "version": "0.13.10",
       "resolved": "https://r.cnpmjs.org/regenerator-runtime/-/regenerator-runtime-0.13.10.tgz",
-      "integrity": "sha512-KepLsg4dU12hryUO7bp/axHAKvwGOCV0sGloQtpagJ12ai+ojVDqkeGSiRX1zlq+kjIMZ1t7gpze+26QqtdGqw==",
-      "dev": true
+      "integrity": "sha512-KepLsg4dU12hryUO7bp/axHAKvwGOCV0sGloQtpagJ12ai+ojVDqkeGSiRX1zlq+kjIMZ1t7gpze+26QqtdGqw=="
     },
     "node_modules/regenerator-transform": {
       "version": "0.15.0",
@@ -14461,6 +14469,26 @@
         "spdx-expression-parse": "^3.0.0"
       }
     },
+    "node_modules/vant": {
+      "version": "2.12.52",
+      "resolved": "https://registry.npmmirror.com/vant/-/vant-2.12.52.tgz",
+      "integrity": "sha512-Y0gjJ9C+IQ/fNf6N3SSwzKjItiKBazdqRM7+eBijpBb0uO4F7WlN1bhX0J5ulOaAzdOn+VCkoE4w3qVL70M0Cg==",
+      "dependencies": {
+        "@babel/runtime": "7.x",
+        "@vant/icons": "^1.7.1",
+        "@vant/popperjs": "^1.1.0",
+        "@vue/babel-helper-vue-jsx-merge-props": "^1.0.0",
+        "vue-lazyload": "1.2.3"
+      },
+      "peerDependencies": {
+        "vue": ">= 2.6.0"
+      }
+    },
+    "node_modules/vant/node_modules/vue-lazyload": {
+      "version": "1.2.3",
+      "resolved": "https://registry.npmmirror.com/vue-lazyload/-/vue-lazyload-1.2.3.tgz",
+      "integrity": "sha512-DC0ZwxanbRhx79tlA3zY5OYJkH8FYp3WBAnAJbrcuoS8eye1P73rcgAZhyxFSPUluJUTelMB+i/+VkNU/qVm7g=="
+    },
     "node_modules/vary": {
       "version": "1.1.2",
       "resolved": "https://r2.cnpmjs.org/vary/-/vary-1.1.2.tgz",
@@ -16844,7 +16872,6 @@
       "version": "7.20.1",
       "resolved": "https://r.cnpmjs.org/@babel/runtime/-/runtime-7.20.1.tgz",
       "integrity": "sha512-mrzLkl6U9YLF8qpqI7TB82PESyEGjm/0Ly91jG575eVxMMlb8fYfOXFZIJ8XfLrJZQbm7dlKry2bJmXBUEkdFg==",
-      "dev": true,
       "requires": {
         "regenerator-runtime": "^0.13.10"
       }
@@ -17295,11 +17322,20 @@
         }
       }
     },
+    "@vant/icons": {
+      "version": "1.8.0",
+      "resolved": "https://registry.npmmirror.com/@vant/icons/-/icons-1.8.0.tgz",
+      "integrity": "sha512-sKfEUo2/CkQFuERxvkuF6mGQZDKu3IQdj5rV9Fm0weJXtchDSSQ+zt8qPCNUEhh9Y8shy5PzxbvAfOOkCwlCXg=="
+    },
+    "@vant/popperjs": {
+      "version": "1.3.0",
+      "resolved": "https://registry.npmmirror.com/@vant/popperjs/-/popperjs-1.3.0.tgz",
+      "integrity": "sha512-hB+czUG+aHtjhaEmCJDuXOep0YTZjdlRR+4MSmIFnkCQIxJaXLQdSsR90XWvAI2yvKUI7TCGqR8pQg2RtvkMHw=="
+    },
     "@vue/babel-helper-vue-jsx-merge-props": {
       "version": "1.4.0",
       "resolved": "https://r.cnpmjs.org/@vue/babel-helper-vue-jsx-merge-props/-/babel-helper-vue-jsx-merge-props-1.4.0.tgz",
-      "integrity": "sha512-JkqXfCkUDp4PIlFdDQ0TdXoIejMtTHP67/pvxlgeY+u5k3LEdKuWZ3LK6xkxo52uDoABIVyRwqVkfLQJhk7VBA==",
-      "dev": true
+      "integrity": "sha512-JkqXfCkUDp4PIlFdDQ0TdXoIejMtTHP67/pvxlgeY+u5k3LEdKuWZ3LK6xkxo52uDoABIVyRwqVkfLQJhk7VBA=="
     },
     "@vue/babel-helper-vue-transform-on": {
       "version": "1.0.2",
@@ -25578,8 +25614,7 @@
     "regenerator-runtime": {
       "version": "0.13.10",
       "resolved": "https://r.cnpmjs.org/regenerator-runtime/-/regenerator-runtime-0.13.10.tgz",
-      "integrity": "sha512-KepLsg4dU12hryUO7bp/axHAKvwGOCV0sGloQtpagJ12ai+ojVDqkeGSiRX1zlq+kjIMZ1t7gpze+26QqtdGqw==",
-      "dev": true
+      "integrity": "sha512-KepLsg4dU12hryUO7bp/axHAKvwGOCV0sGloQtpagJ12ai+ojVDqkeGSiRX1zlq+kjIMZ1t7gpze+26QqtdGqw=="
     },
     "regenerator-transform": {
       "version": "0.15.0",
@@ -27633,6 +27668,25 @@
         "spdx-expression-parse": "^3.0.0"
       }
     },
+    "vant": {
+      "version": "2.12.52",
+      "resolved": "https://registry.npmmirror.com/vant/-/vant-2.12.52.tgz",
+      "integrity": "sha512-Y0gjJ9C+IQ/fNf6N3SSwzKjItiKBazdqRM7+eBijpBb0uO4F7WlN1bhX0J5ulOaAzdOn+VCkoE4w3qVL70M0Cg==",
+      "requires": {
+        "@babel/runtime": "7.x",
+        "@vant/icons": "^1.7.1",
+        "@vant/popperjs": "^1.1.0",
+        "@vue/babel-helper-vue-jsx-merge-props": "^1.0.0",
+        "vue-lazyload": "1.2.3"
+      },
+      "dependencies": {
+        "vue-lazyload": {
+          "version": "1.2.3",
+          "resolved": "https://registry.npmmirror.com/vue-lazyload/-/vue-lazyload-1.2.3.tgz",
+          "integrity": "sha512-DC0ZwxanbRhx79tlA3zY5OYJkH8FYp3WBAnAJbrcuoS8eye1P73rcgAZhyxFSPUluJUTelMB+i/+VkNU/qVm7g=="
+        }
+      }
+    },
     "vary": {
       "version": "1.1.2",
       "resolved": "https://r2.cnpmjs.org/vary/-/vary-1.1.2.tgz",

package.json

@@ -7,14 +7,15 @@
     "build": "vue-cli-service build"
   },
   "dependencies": {
-    "core-js": "^3.6.5",
-    "vue": "^2.6.11",
-    "vue-router": "^3.2.0",
     "axios": "^1.1.3",
+    "core-js": "^3.6.5",
     "swiper": "^8.4.4",
     "v-viewer": "^1.6.4",
+    "vant": "^2.12.52",
+    "vue": "^2.6.11",
     "vue-infinite-scroll": "^2.0.2",
     "vue-lazyload": "^1.3.3",
+    "vue-router": "^3.2.0",
     "vuex": "^3.6.2"
   },
   "devDependencies": {

src/main.js

@@ -9,6 +9,9 @@ import Viewer from 'v-viewer'
 import VueLazyload from 'vue-lazyload'
 import infiniteScroll from 'vue-infinite-scroll'
 
+import Vant from 'vant';
+import 'vant/lib/index.css';
+Vue.use(Vant);
 // 初始样式
 import './assets/base.css'
 import "@/assets/my-reset.css"

src/router/index.js

@@ -19,7 +19,8 @@ const routes = [{
         path: '/layout/construct',
         name: 'construct',
         meta: {
-          myInd: 1
+          myInd: 1,
+          myTitle:'古建一张图'
         },
         component: () => import('../views/Construct/index.vue')
       },

src/views/Construct/components/search.vue

@@ -0,0 +1,46 @@
+<template>
+  <div class='ConstructSearch'>
+    <div class="inputBox">
+      
+    </div>
+  </div>
+</template>
+
+<script>
+
+export default {
+  name: 'ConstructSearch',
+  components: {},
+  data() {
+    return {
+
+    };
+  },
+  computed: {},
+  watch: {},
+  methods: {
+
+  },
+  created() {
+
+  },
+  mounted() {
+
+  },
+  beforeCreate() { }, //生命周期 - 创建之前
+  beforeMount() { }, //生命周期 - 挂载之前
+  beforeUpdate() { }, //生命周期 - 更新之前
+  updated() { }, //生命周期 - 更新之后
+  beforeDestroy() { }, //生命周期 - 销毁之前
+  destroyed() { }, //生命周期 - 销毁完成
+  activated() { }, //如果页面有keep-alive缓存功能，这个函数会触发
+}
+</script>
+<style lang='less' scoped>
+  .ConstructSearch{
+    width: 100%;
+    height: 100%;
+    background-image: url('../../../assets/img/construct/searchBac.png');
+    background-size: 100% 100%;
+  }
+</style>

src/views/Construct/index.vue

@@ -1,36 +1,199 @@
 <template>
-<div class='Construct'>览古建</div>
+  <div class='Construct'>
+    <!-- 模型的嵌套盒子 -->
+    <div class="ifrBox">
+      <!-- <iframe src="http://4dscene.4dage.com/culturalrelics/YFYCModel/index.html#/" frameborder="0"></iframe> -->
+    </div>
+    <!-- 左上的场景选择 -->
+    <div class="vrChange" @click="vrShow = true">
+      <img src="../../assets/img/construct/vrChange.png" alt="">
+      <p>场景选择</p>
+    </div>
+    <!-- 右下角的搜索按钮 -->
+    <img class="search" @click="searchShow=!searchShow" src="../../assets/img/construct/search.png" alt="">
+
+    <!-- 点击左上角出来的轮播图 -->
+    <div class="vrBox" :class="{ vrBoxAc: vrShow }">
+      <!-- 关闭按钮 -->
+      <div class="close" @click="vrShow = false">
+        <van-icon name="cross" />
+      </div>
+      <div class="vrBoxSwi">
+        <div class="swiper-container">
+          <div class="swiper-wrapper">
+            <div class="swiper-slide" v-for="i in 5" :key="i">
+              <img src="../../assets/img/construct/sw1.png" alt="">
+              <p>芜湖老海关{{ i }}</p>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+
+    <!-- 点击右下角的搜索出来的页面 -->
+    <div class="searcBox" :class="{ searcBoxAc: searchShow }">
+      <Search />
+    </div>
+
+
+  </div>
 </template>
 
 <script>
-
+import Search from './components/search.vue'
+import Swiper from "../../assets/libs/swiper.js";
 export default {
-components: {},
-data() {
-return {
-
-};
-},
-computed: {},
-watch: {},
-methods: {
-
-},
-created() {
-
-},
-mounted() {
-
-},
-beforeCreate() {}, //生命周期 - 创建之前
-beforeMount() {}, //生命周期 - 挂载之前
-beforeUpdate() {}, //生命周期 - 更新之前
-updated() {}, //生命周期 - 更新之后
-beforeDestroy() {}, //生命周期 - 销毁之前
-destroyed() {}, //生命周期 - 销毁完成
-activated() {}, //如果页面有keep-alive缓存功能，这个函数会触发
+  components: { Search },
+  data() {
+    return {
+      vrShow: false,
+      searchShow: true
+    };
+  },
+  computed: {},
+  watch: {},
+  methods: {
+
+  },
+  created() {
+
+  },
+  mounted() {
+    new Swiper(".Construct .swiper-container", {
+      slidesPerView: 1.4,
+      spaceBetween: 30,
+      centeredSlides: true,
+      initialSlide: 4,
+    });
+  },
+  beforeCreate() { }, //生命周期 - 创建之前
+  beforeMount() { }, //生命周期 - 挂载之前
+  beforeUpdate() { }, //生命周期 - 更新之前
+  updated() { }, //生命周期 - 更新之后
+  beforeDestroy() { }, //生命周期 - 销毁之前
+  destroyed() { }, //生命周期 - 销毁完成
+  activated() { }, //如果页面有keep-alive缓存功能，这个函数会触发
 }
 </script>
 <style lang='less' scoped>
+@import "../../assets/libs/swiper.css";
+
+.Construct {
+  font-size: 16px;
+  color: #fff;
+  width: 100%;
+  height: calc(100% - 80px);
+  position: relative;
+
+  .ifrBox {
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+
+    iframe {
+      width: 100%;
+      height: 100%;
+    }
+  }
+
+  .vrChange {
+    position: absolute;
+    top: 20px;
+    left: 20px;
+    z-index: 2;
+    width: 60px;
+    text-align: center;
+
+    &>img {
+      width: 40px;
+    }
 
+    &>p {
+      font-size: 14px;
+    }
+  }
+
+  .search {
+    position: absolute;
+    bottom: 20px;
+    right: 20px;
+    width: 40px;
+    z-index: 2;
+  }
+
+  .vrBox {
+    opacity: 0;
+    pointer-events: none;
+    transition: opacity .3s;
+    position: absolute;
+    z-index: 3;
+    width: 100%;
+    height: 100%;
+    background-color: rgba(0, 0, 0, .6);
+
+    .close {
+      position: absolute;
+      z-index: 3;
+      top: 20px;
+      right: 20px;
+      font-size: 24px;
+      color: #fff;
+    }
+
+    .vrBoxSwi {
+      position: absolute;
+      top: 50%;
+      transform: translateY(-50%);
+      width: 100%;
+      height: 55vh;
+
+      .swiper-container {
+        width: 100%;
+        height: 100%;
+
+        .swiper-slide {
+          &>img {
+            border-radius: 8px 8px 0 0;
+            width: 100%;
+            height: calc(100% - 40px);
+            object-fit: cover;
+          }
+
+          &>p {
+            height: 40px;
+            line-height: 40px;
+            font-size: 18px;
+            text-align: center;
+          }
+        }
+      }
+
+    }
+  }
+
+  .vrBoxAc {
+    opacity: 1;
+    pointer-events: auto;
+  }
+
+  .searcBox {
+    transform: translateX(-300px);
+    opacity: 0;
+    pointer-events: none;
+    transition: all .3s;
+    position: absolute;
+    z-index: 3;
+    left: 0;
+    width: 75%;
+    height: 100%;
+  }
+
+  .searcBoxAc {
+    transform: translateX(0);
+    opacity: 1;
+    pointer-events: auto;
+  }
+}
 </style>

src/views/Home/index.vue

@@ -9,7 +9,7 @@
     <!-- 视频盒子 -->
     <div class="videoBox" :class="{ videoAc: videoShow }">
       <video muted src="../../assets/media/home.mp4"></video>
-      <div v-show="videoBtnShow" class="videoBtn" @click="$router.push('/layout/construct')">点击跳过视频</div>
+      <img v-show="videoBtnShow" class="videoBtn" src="../../assets/img/home/videoBtn.png" alt="" @click="$router.push('/layout/construct')">
     </div>
   </div>
 </template>
@@ -116,17 +116,9 @@ export default {
     }
 
     .videoBtn {
-      background-color: rgba(255, 89, 89, .6);
-      font-size: 20px;
-      color: #fff;
-      display: flex;
-      justify-content: center;
-      align-items: center;
       position: absolute;
       bottom: 40px;
       width: 200px;
-      height: 48px;
-      border-radius: 24px;
       z-index: 2;
       left: 50%;
       transform: translateX(-50%);

src/views/Layout/index.vue

@@ -1,9 +1,12 @@
 <template>
   <div class='Layout'>
 
+    <!-- 底部固定栏 -->
     <div class="bottom">
-      <div class="row" @click="$router.push(item.path).catch(() => { })"
-        :class="{ active: item.id === $route.meta.myInd }" v-for="item in data" :key="item.id">{{ item.name }}
+      <div class="row" @click="$router.push(item.path).catch(() => { })" v-for="item in data" :key="item.id">
+        <img :src="require(`@/assets/img/layout/inco${item.id}${item.id === $route.meta.myInd ? 'Ac' : ''}.png`)" alt="">
+        <p>{{ item.name }}</p>
+        
       </div>
     </div>
 
@@ -18,10 +21,10 @@ export default {
   data() {
     return {
       data: [
-        { id: 1, path: '/layout/construct', name: '览·古建', inco: '' },
-        { id: 2, path: '/layout/serve', name: '享·服务', inco: '' },
-        { id: 3, path: '/layout/interact', name: '悦·互动', inco: '' },
-        { id: 4, path: '/layout/my', name: '我的', inco: '' },
+        { id: 1, path: '/layout/construct', name: '览·古建' },
+        { id: 2, path: '/layout/serve', name: '享·服务' },
+        { id: 3, path: '/layout/interact', name: '悦·互动' },
+        { id: 4, path: '/layout/my', name: '我的' },
       ]
     };
   },
@@ -52,21 +55,28 @@ export default {
   position: relative;
 
   .bottom {
+    max-width: 500px;
     position: fixed;
     bottom: 0;
-    left: 0;
+    left: 50%;
+    transform: translateX(-50%);
     width: 100%;
-    height: 40px;
+    height: 80px;
+    background-color: #fff;
     display: flex;
-    justify-content: space-around;
-
-    &>div {
-      font-size: 16px;
+    align-items: center;
+    .row{
+      width: 25%;
+      text-align: center;
+      &>img{
+        width: 30px;
+      }
+      &>p{
+        margin-top: 5px;
+        font-size: 14px;
+      }
     }
 
-    .active {
-      color: red;
-    }
   }
 }
 </style>