up

src/router/index.js

@@ -3,14 +3,21 @@ import VueRouter from 'vue-router'
 
 Vue.use(VueRouter)
 
-const routes = [{
+const routes = [
+  {
     path: '/',
     name: 'home',
     component: () => import('../views/Home/index.vue'),
     meta: {
-      myTitle:'徽韵江城'
+      myTitle: '徽韵江城'
     },
   },
+  // 语音讲解
+  {
+    path: '/goods/audio',
+    name: 'goodsAudio',
+    component: () => import('../views/Goods/components/GoodsAudio.vue')
+  },
   {
     path: '/layout',
     name: 'layout',
@@ -20,7 +27,24 @@ const routes = [{
         name: 'construct',
         meta: {
           myInd: 1,
-          myTitle:'古建一张图'
+          myTitle: '古建一张图'
+        },
+        component: () => import('../views/Construct/index.vue')
+      },
+      {
+        path: '/layout/goods',
+        name: 'goods',
+        meta: {
+          myInd: 1,
+        },
+        component: () => import('../views/Goods/index.vue')
+      },
+      {
+        path: '/layout/construct',
+        name: 'construct',
+        meta: {
+          myInd: 1,
+          myTitle: '古建一张图'
         },
         component: () => import('../views/Construct/index.vue')
       },
@@ -58,7 +82,8 @@ const router = new VueRouter({
 // 全局后置钩子，设置title
 router.afterEach(to => {
   // 设置title
-  window.document.title = to.meta.myTitle;
+  if (to.meta.myTitle) window.document.title = to.meta.myTitle;
+
 })
 
 export default router

src/views/Construct/components/search.vue

@@ -1,25 +1,65 @@
 <template>
   <div class='ConstructSearch'>
-    <div class="inputBox">
-      
+    <!-- 输入框 -->
+    <div class="inputBox" @keydown="searchFu()">
+      <div class="searInco" @click="searchFu()">
+        <van-icon name="search" />
+      </div>
+      <van-field maxlength="10" v-model="txt" placeholder="请输入要搜索的内容" />
+    </div>
+    <!-- 文字介绍 -->
+    <div class="searTxt">
+      <h3>芜湖市古建一张图</h3>
+      <p>&emsp;&emsp;芜湖是全国文明域市、全国创新型试点域市、全国电子商务示范城市、全国信息消费示范域市、全国双拥模范城、国家园林域市等。</p>
+      <p>&emsp;&emsp;辖区内有方特旅游度假区、天门山、镜湖公园、鸠兹古镇、丫山风景区、马仁奇峰、松鼠小镇、广济寺、王稼祥纪念园、繁昌窑遗址等景区。</p>
+    </div>
+    <!-- 底部下拉 -->
+    <div class="searDown">
+      <h3>区域划分</h3>
+      <div class="searDownBox">
+        <div class="searDownBox_row" v-for="item in data" :key="item.id">
+          <div class="one" @click="item.done = !item.done">
+            <div class="ll">{{ item.name }}</div>
+            <div class="rr">
+              <div class="bs">{{ item.children.length }}</div>
+              <div class="arrows">
+                <van-icon name="arrow-up" v-show="item.done" />
+                <van-icon name="arrow-down" v-show="!item.done" />
+              </div>
+            </div>
+          </div>
+          <div class="downInfo" :class="{ downInfoAc: item.done }">
+            <div @click="$router.push('/layout/goods')" v-for="val in item.children" :key="val.id">{{ val.name }}</div>
+          </div>
+        </div>
+      </div>
     </div>
   </div>
 </template>
 
 <script>
-
 export default {
   name: 'ConstructSearch',
   components: {},
   data() {
     return {
-
+      txt: '',
+      data: [
+        { id: 1, name: '全部', done: false, children: [{ id: 1001, name: '全部1' }, { id: 1002, name: '全部2' }, { id: 1003, name: '全部3' }, { id: 1004, name: '全部4' }] },
+        { id: 2, name: '镜湖', done: false, children: [{ id: 2001, name: '镜湖1' }, { id: 2002, name: '镜湖2' }, { id: 2003, name: '镜湖3' }, { id: 2004, name: '镜湖4' }] },
+        { id: 3, name: '鸠江', done: false, children: [{ id: 3001, name: '鸠江1' }, { id: 3002, name: '鸠江2' }, { id: 3003, name: '鸠江3' }, { id: 3004, name: '鸠江4' }] },
+        { id: 4, name: '弋江', done: false, children: [{ id: 4001, name: '弋江1' }, { id: 4002, name: '弋江2' }, { id: 4003, name: '弋江3' }, { id: 4004, name: '弋江4' }] },
+        { id: 5, name: '湾沚', done: false, children: [] },
+        { id: 6, name: '繁昌', done: false, children: [{ id: 6001, name: '繁昌1' }, { id: 6002, name: '繁昌2' }, { id: 6003, name: '繁昌3' }, { id: 6004, name: '繁昌4' }] },
+      ]
     };
   },
   computed: {},
   watch: {},
   methods: {
-
+    searchFu() {
+      console.log('---------');
+    }
   },
   created() {
 
@@ -37,10 +77,131 @@ export default {
 }
 </script>
 <style lang='less' scoped>
-  .ConstructSearch{
+.ConstructSearch {
+  width: 75%;
+  height: 100%;
+  background-image: url('../../../assets/img/construct/searchBac.png');
+  background-size: 100% 100%;
+  padding-top: 10px;
+
+  .inputBox {
+    margin: 0px auto;
+    width: 90%;
+    height: 30px;
+    position: relative;
+
+    .searInco {
+      color: #A0A0A0;
+      display: flex;
+      justify-content: center;
+      align-items: center;
+      font-size: 20px;
+      position: absolute;
+      top: 0;
+      left: 10px;
+      z-index: 3;
+      width: 20px;
+      height: 30px;
+    }
+
+    /deep/.van-cell {
+      width: 100%;
+      height: 30px;
+      line-height: 30px;
+      padding: 0px 0 0px 36px;
+      background-color: #fff;
+      border-radius: 15px;
+    }
+  }
+
+  .searTxt {
     width: 100%;
-    height: 100%;
-    background-image: url('../../../assets/img/construct/searchBac.png');
-    background-size: 100% 100%;
+    height: 30%;
+    overflow-y: auto;
+    font-size: 14px;
+    padding: 5px 8px;
+
+    h3 {
+      text-align: center;
+      margin: 10px 0;
+    }
+
+    p {
+      margin-bottom: 5px;
+      line-height: 18px;
+    }
   }
+
+  .searDown {
+    padding-top: 30px;
+    width: 100%;
+    height: 64%;
+    color: black;
+
+    h3 {
+      text-align: center;
+      font-size: 18px;
+    }
+
+    .searDownBox {
+      padding: 15px 20px 0;
+      margin-top: 10px;
+      width: 100%;
+      height: calc(100% - 34px);
+      overflow-y: auto;
+
+      .searDownBox_row {
+        width: 100%;
+        font-size: 16px;
+        color: #666666;
+        margin-bottom: 20px;
+
+        .one {
+          height: 24px;
+          align-items: center;
+          display: flex;
+          justify-content: space-between;
+
+          .rr {
+            display: flex;
+            align-items: center;
+          }
+
+          .bs {
+            width: 30px;
+            height: 24px;
+            border-radius: 5px;
+            background-color: #ECB1B8;
+            text-align: center;
+            line-height: 24px;
+            color: #fff;
+          }
+
+          .arrows {
+            margin-left: 15px;
+          }
+        }
+
+        .downInfo {
+          &>div {
+            transition: height .3s;
+            padding-left: 40px;
+            height: 0;
+            line-height: 0;
+            overflow: hidden;
+            opacity: 0;
+          }
+        }
+
+        .downInfoAc {
+          &>div {
+            opacity: 1;
+            height: 30px;
+            line-height: 30px;
+          }
+        }
+      }
+    }
+  }
+}
 </style>

src/views/Construct/index.vue

@@ -2,7 +2,7 @@
   <div class='Construct'>
     <!-- 模型的嵌套盒子 -->
     <div class="ifrBox">
-      <!-- <iframe src="http://4dscene.4dage.com/culturalrelics/YFYCModel/index.html#/" frameborder="0"></iframe> -->
+      <iframe src="http://4dscene.4dage.com/culturalrelics/YFYCModel/index.html#/" frameborder="0"></iframe>
     </div>
     <!-- 左上的场景选择 -->
     <div class="vrChange" @click="vrShow = true">
@@ -47,7 +47,7 @@ export default {
   data() {
     return {
       vrShow: false,
-      searchShow: true
+      searchShow: false
     };
   },
   computed: {},
@@ -120,7 +120,7 @@ export default {
     bottom: 20px;
     right: 20px;
     width: 40px;
-    z-index: 2;
+    z-index: 4;
   }
 
   .vrBox {
@@ -186,7 +186,8 @@ export default {
     position: absolute;
     z-index: 3;
     left: 0;
-    width: 75%;
+    width: 100%;
+    background-color: rgba(0, 0, 0, .6);
     height: 100%;
   }
 

src/views/Goods/components/GoodsAudio.vue

@@ -0,0 +1,36 @@
+<template>
+<div class='GoodsAudio'>GoodsAudio</div>
+</template>
+
+<script>
+
+export default {
+components: {},
+data() {
+return {
+
+};
+},
+computed: {},
+watch: {},
+methods: {
+
+},
+created() {
+
+},
+mounted() {
+
+},
+beforeCreate() {}, //生命周期 - 创建之前
+beforeMount() {}, //生命周期 - 挂载之前
+beforeUpdate() {}, //生命周期 - 更新之前
+updated() {}, //生命周期 - 更新之后
+beforeDestroy() {}, //生命周期 - 销毁之前
+destroyed() {}, //生命周期 - 销毁完成
+activated() {}, //如果页面有keep-alive缓存功能，这个函数会触发
+}
+</script>
+<style lang='less' scoped>
+
+</style>