upp

src/assets/base.css

@@ -12,13 +12,13 @@
 /* Document
    ========================================================================== */
 
-*{
-  margin: 0;
-  padding: 0;
-  box-sizing: border-box;
+* {
+    margin: 0;
+    padding: 0;
+    box-sizing: border-box;
 }
 
-   html {
+html {
     font-family: sans-serif;
     /* 1 */
     line-height: 1.15;
@@ -561,3 +561,29 @@ template {
 [hidden] {
     display: none;
 }
+
+
+input::-webkit-input-placeholder {
+    /* WebKit, Blink, Edge */
+    color: #A0A0A0 !important;
+}
+
+input::-moz-placeholder {
+    /* Mozilla Firefox 4 to 18 */
+    color: #A0A0A0 !important;
+}
+
+input::-moz-placeholder {
+    /* Mozilla Firefox 19+ */
+    color: #A0A0A0 !important;
+}
+
+input:-ms-input-placeholder {
+    /* Internet Explorer 10-11 */
+    color: #A0A0A0 !important;
+}
+
+input::-ms-input-placeholder {
+    /* Microsoft Edge */
+    color: #A0A0A0 !important;
+}

src/components/SearchRedBtn.vue

@@ -36,6 +36,7 @@ export default {
 .search-wrap {
   background: #F4F4F4;
   height: 6.9vw;
+  min-height: 30px;
   border-radius: 1.1vw;
   display: flex;
   align-items: center;

src/router/index.js

@@ -56,6 +56,15 @@ const routes = [{
     },
     component: () => import('../views/Interact/components/InteractIssue.vue')
   },
+    // 悦·互动详情
+    {
+      path: '/layout/interact/info',
+      name: 'InteractInfo',
+      meta: {
+        myTitle: '建筑可对话详情'
+      },
+      component: () => import('../views/Interact/components/InteractInfo.vue')
+    },
   // 定位，位置
   {
     path: '/layout/interact/location',
@@ -78,22 +87,23 @@ const routes = [{
         component: () => import('../views/Construct/index.vue')
       },
       {
-        path: '/layout/goods',
-        name: 'goods',
+        path: '/layout/list',
+        name: 'HomeList',
         meta: {
           myInd: 1,
+          myTitle: '景点建筑'
         },
-        component: () => import('../views/Goods/index.vue')
+        component: () => import('../views/Construct/components/HomeList.vue')
       },
       {
-        path: '/layout/construct',
-        name: 'construct',
+        path: '/layout/goods',
+        name: 'goods',
         meta: {
           myInd: 1,
-          myTitle: '古建一张图'
         },
-        component: () => import('../views/Construct/index.vue')
+        component: () => import('../views/Goods/index.vue')
       },
+
       /**
        * ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
        * 享服务

src/views/Construct/components/HomeList.vue

@@ -0,0 +1,252 @@
+<template>
+  <div class="HomeList">
+    <!-- 输入框 -->
+    <div class="inputBox" @keydown.enter="searchFu()">
+      <div class="searInco">
+        <van-icon name="search" />
+      </div>
+      <div class="searBtn" @click="searchFu()">搜索</div>
+      <van-field
+        maxlength="10"
+        v-model="txt"
+        placeholder="输入您感兴趣的内容"
+      />
+    </div>
+    <!-- 主体内容 -->
+    <div class="mainBoxNull" v-if="dataShow.length===0">暂无内容</div>
+    <div class="mainBox" v-else>
+      <div
+        class="row"
+        @click="handlClick(item.id)"
+        v-for="item in dataShow"
+        :key="item.id"
+      >
+        <img :src="require(`@/assets/img/home/${item.id}.png`)" alt="" />
+        <div class="name">{{ item.name }}</div>
+        <div class="loc">
+          <img src="../../../assets/img/home/loc.png" alt="" />
+          {{ item.loction }}
+        </div>
+      </div>
+    </div>
+
+    <!-- 视频盒子 -->
+    <div class="videoBox" :class="{ videoAc: videoShow }">
+      <video muted src="../../../assets/media/home.mp4"></video>
+      <img
+        v-show="videoBtnShow"
+        class="videoBtn"
+        src="../../../assets/img/home/videoBtn.png"
+        alt=""
+        @click="$router.push('/layout/construct')"
+      />
+    </div>
+  </div>
+</template>
+
+<script>
+import { Toast } from "vant";
+export default {
+  name: "HomeList",
+  components: {},
+  data() {
+    return {
+      txt: "",
+      data: [
+        { id: 1, name: "鸠兹古镇", loction: "芜湖城东政务新区" },
+        { id: 2, name: "芜湖老海关", loction: "芜湖市新芜区滨江北路" },
+        { id: 3, name: "方特梦幻王国万圣夜", loction: "镜湖区银湖北路" },
+        { id: 4, name: "中江塔", loction: "芜湖市镜湖区滨江路桥口" },
+      ],
+      dataShow: [],
+      videoShow: false,
+      videoBtnShow: false,
+    };
+  },
+  computed: {},
+  watch: {
+    videoShow(val) {
+      if (val) {
+        let dom = document.querySelector("video");
+        dom.play();
+        dom.addEventListener(
+          "ended",
+          () => {
+            //结束
+            this.$router.push("/layout/construct");
+          },
+          false
+        );
+        setTimeout(() => {
+          this.videoBtnShow = true;
+        }, 1000);
+      }
+    },
+  },
+  methods: {
+    handlClick(id) {
+      if (id === 2) this.videoShow = true;
+      else return Toast("敬请期待!");
+    },
+    // 获取列表的方法
+    getList() {
+      if (this.txt.trim() === "") this.dataShow = this.data;
+      else this.dataShow = this.data.filter((v) => v.name.includes(this.txt));
+    },
+    searchFu() {
+      this.getList();
+    },
+  },
+  created() {
+    this.getList();
+  },
+  mounted() {},
+  beforeCreate() {}, //生命周期 - 创建之前
+  beforeMount() {}, //生命周期 - 挂载之前
+  beforeUpdate() {}, //生命周期 - 更新之前
+  updated() {}, //生命周期 - 更新之后
+  beforeDestroy() {}, //生命周期 - 销毁之前
+  destroyed() {}, //生命周期 - 销毁完成
+  activated() {}, //如果页面有keep-alive缓存功能，这个函数会触发
+};
+</script>
+<style lang='less' scoped>
+.HomeList {
+  width: 100%;
+  height: calc(100% - 80px);
+  overflow-y: auto;
+  padding: 20px 15px;
+  position: relative;
+  .inputBox {
+    margin: 0px auto;
+    width: 100%;
+    height: 30px;
+    position: relative;
+
+    .searBtn {
+      position: absolute;
+      right: 0;
+      top: 0;
+      width: 40px;
+      height: 30px;
+      border-radius: 3px;
+      z-index: 2;
+      background-color: #fe6e69;
+      font-size: 14px;
+      color: #fff;
+      line-height: 30px;
+      text-align: center;
+    }
+
+    .searInco {
+      color: #a0a0a0;
+      display: flex;
+      justify-content: center;
+      align-items: center;
+      font-size: 16px;
+      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: #f4f4f4;
+      border-radius: 5px;
+    }
+  }
+  .mainBoxNull{
+    width: 100%;
+    height: 300px;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    font-size: 16px;
+  }
+  .mainBox {
+    margin-top: 20px;
+    display: flex;
+    flex-wrap: wrap;
+
+    .row {
+      margin-right: 4%;
+      margin-bottom: 4%;
+      overflow: hidden;
+      width: 48%;
+      height: 250px;
+      background-color: #f7f8fa;
+      border-radius: 4px;
+      color: #333333;
+
+      &:nth-of-type(2n) {
+        margin-right: 0;
+      }
+
+      & > img {
+        width: 100%;
+        height: 180px;
+        object-fit: cover;
+      }
+
+      .name {
+        padding: 10px 10px 5px;
+        font-size: 14px;
+        font-weight: 700;
+      }
+
+      .loc {
+        padding-left: 10px;
+        display: flex;
+        align-items: center;
+        margin-top: 6px;
+        font-size: 12px;
+        & > img {
+          margin-right: 3px;
+          width: 14px;
+        }
+      }
+    }
+  }
+  .videoBox {
+    opacity: 0;
+    pointer-events: none;
+    transition: opacity 0.3s;
+    position: fixed;
+    top: 0;
+    left: 0;
+    z-index: 3;
+    width: 100%;
+    height: 100%;
+    background-color: #fff;
+
+    video {
+      position: absolute;
+      top: 50%;
+      left: 50%;
+      transform: translate(-50%, -50%);
+      width: 100%;
+      // height: 100%;
+    }
+
+    .videoBtn {
+      position: absolute;
+      bottom: 40px;
+      width: 200px;
+      z-index: 2;
+      left: 50%;
+      transform: translateX(-50%);
+    }
+  }
+
+  .videoAc {
+    opacity: 1;
+    pointer-events: auto;
+  }
+}
+</style>

src/views/Construct/components/search.vue

@@ -1,12 +1,12 @@
 <template>
   <div class='ConstructSearch'>
     <!-- 输入框 -->
-    <div class="inputBox" @keydown.enter="searchFu()">
+    <!-- <div class="inputBox" @keydown.enter="searchFu()">
       <div class="searInco" @click="searchFu()">
         <van-icon name="search" />
       </div>
       <van-field maxlength="10" v-model="txt" placeholder="请输入要搜索的内容" />
-    </div>
+    </div> -->
     <!-- 文字介绍 -->
     <div class="searTxt">
       <h3>芜湖市古建一张图</h3>
@@ -45,12 +45,12 @@ export default {
     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: 1, name: '全部', done: false, children: [{ id: 1001, name: '芜湖老海关' }] },
+        { id: 2, name: '镜湖', done: false, children: [] },
+        { id: 3, name: '鸠江', done: false, children: [] },
+        { id: 4, name: '弋江', done: false, children: [] },
         { 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' }] },
+        { id: 6, name: '繁昌', done: false, children: [] },
       ]
     };
   },
@@ -116,7 +116,7 @@ export default {
 
   .searTxt {
     width: 100%;
-    height: 30%;
+    height: 35%;
     overflow-y: auto;
     font-size: 14px;
     padding: 5px 8px;

src/views/Construct/index.vue

@@ -1,16 +1,24 @@
 <template>
-  <div class='Construct'>
+  <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">
-      <img src="../../assets/img/construct/vrChange.png" alt="">
+      <img src="../../assets/img/construct/vrChange.png" alt="" />
       <p>场景选择</p>
     </div>
     <!-- 右下角的搜索按钮 -->
-    <img class="search" @click="searchShow=!searchShow" src="../../assets/img/construct/search.png" alt="">
+    <img
+      class="search"
+      @click="searchShow = !searchShow"
+      src="../../assets/img/construct/search.png"
+      alt=""
+    />
 
     <!-- 点击左上角出来的轮播图 -->
     <div class="vrBox" :class="{ vrBoxAc: vrShow }">
@@ -21,8 +29,13 @@
       <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="">
+            <div
+              class="swiper-slide"
+              @click="handlClick"
+              v-for="i in 5"
+              :key="i"
+            >
+              <img src="../../assets/img/construct/sw1.png" alt="" />
               <p>芜湖老海关{{ i }}</p>
             </div>
           </div>
@@ -35,35 +48,33 @@
       <Search />
     </div>
 
-
-  <!-- 进入景点详情的按钮 -->
-  <div class="toInfo" @click="$router.push('/layout/goods')">
-    <img src="../../assets/img/construct/infoBtn.png" alt="">
-  </div>
-
-
+    <!-- 进入景点详情的按钮 -->
+    <div class="toInfo" @click="$router.push('/layout/goods')">
+      <img src="../../assets/img/construct/infoBtn.png" alt="" />
+    </div>
   </div>
 </template>
 
 <script>
-import Search from './components/search.vue'
+import { Toast } from "vant";
+import Search from "./components/search.vue";
 import Swiper from "../../assets/libs/swiper.js";
 export default {
   components: { Search },
   data() {
     return {
       vrShow: false,
-      searchShow: false
+      searchShow: false,
     };
   },
   computed: {},
   watch: {},
   methods: {
-
-  },
-  created() {
-
+    handlClick() {
+      Toast("敬请期待!");
+    },
   },
+  created() {},
   mounted() {
     new Swiper(".Construct .swiper-container", {
       slidesPerView: 1.4,
@@ -72,14 +83,14 @@ export default {
       initialSlide: 1,
     });
   },
-  beforeCreate() { }, //生命周期 - 创建之前
-  beforeMount() { }, //生命周期 - 挂载之前
-  beforeUpdate() { }, //生命周期 - 更新之前
-  updated() { }, //生命周期 - 更新之后
-  beforeDestroy() { }, //生命周期 - 销毁之前
-  destroyed() { }, //生命周期 - 销毁完成
-  activated() { }, //如果页面有keep-alive缓存功能，这个函数会触发
-}
+  beforeCreate() {}, //生命周期 - 创建之前
+  beforeMount() {}, //生命周期 - 挂载之前
+  beforeUpdate() {}, //生命周期 - 更新之前
+  updated() {}, //生命周期 - 更新之后
+  beforeDestroy() {}, //生命周期 - 销毁之前
+  destroyed() {}, //生命周期 - 销毁完成
+  activated() {}, //如果页面有keep-alive缓存功能，这个函数会触发
+};
 </script>
 <style lang='less' scoped>
 @import "../../assets/libs/swiper.css";
@@ -112,21 +123,21 @@ export default {
     width: 60px;
     text-align: center;
 
-    &>img {
+    & > img {
       width: 40px;
     }
 
-    &>p {
+    & > p {
       font-size: 14px;
     }
   }
-  .toInfo{
+  .toInfo {
     position: absolute;
     bottom: 20px;
     left: 50%;
     transform: translateX(-50%);
     width: 160px;
-    &>img{
+    & > img {
       width: 100%;
     }
   }
@@ -142,12 +153,12 @@ export default {
   .vrBox {
     opacity: 0;
     pointer-events: none;
-    transition: opacity .3s;
+    transition: opacity 0.3s;
     position: absolute;
-    z-index: 3;
+    z-index: 4;
     width: 100%;
     height: 100%;
-    background-color: rgba(0, 0, 0, .6);
+    background-color: rgba(0, 0, 0, 0.6);
 
     .close {
       position: absolute;
@@ -170,14 +181,14 @@ export default {
         height: 100%;
 
         .swiper-slide {
-          &>img {
+          & > img {
             border-radius: 8px 8px 0 0;
             width: 100%;
             height: calc(100% - 40px);
             object-fit: cover;
           }
 
-          &>p {
+          & > p {
             height: 40px;
             line-height: 40px;
             font-size: 18px;
@@ -185,7 +196,6 @@ export default {
           }
         }
       }
-
     }
   }
 
@@ -198,12 +208,12 @@ export default {
     transform: translateX(-300px);
     opacity: 0;
     pointer-events: none;
-    transition: all .3s;
+    transition: all 0.3s;
     position: absolute;
     z-index: 3;
     left: 0;
     width: 100%;
-    background-color: rgba(0, 0, 0, .6);
+    background-color: rgba(0, 0, 0, 0.6);
     height: 100%;
   }
 

src/views/Home/index.vue

@@ -1,62 +1,41 @@
 <template>
-  <div class='Home'>
-    <img class="logo" src="../../assets/img/home/logo.png" alt="">
-    <img class="btn" @click="videoShow = true" src="../../assets/img/home/btn.png" alt="">
+  <div class="Home">
+    <img class="logo" src="../../assets/img/home/logo.png" alt="" />
+    <img
+      class="btn"
+      @click="$router.push('/layout/list')"
+      src="../../assets/img/home/btn.png"
+      alt=""
+    />
     <div class="ifrBox">
-      <iframe src="http://zzbbh.4dage.com/SWKK/show.html?id=WK1592095910366638080" frameborder="0"></iframe>
-    </div>
-
-    <!-- 视频盒子 -->
-    <div class="videoBox" :class="{ videoAc: videoShow }">
-      <video muted src="../../assets/media/home.mp4"></video>
-      <img v-show="videoBtnShow" class="videoBtn" src="../../assets/img/home/videoBtn.png" alt="" @click="$router.push('/layout/construct')">
+      <iframe
+        src="http://zzbbh.4dage.com/SWKK/show.html?id=WK1592095910366638080"
+        frameborder="0"
+      ></iframe>
     </div>
   </div>
 </template>
 
 <script>
-
 export default {
-  name: 'Home',
+  name: "Home",
   components: {},
   data() {
-    return {
-      videoShow: false,
-      videoBtnShow: false
-    };
+    return {};
   },
   computed: {},
-  watch: {
-    videoShow(val) {
-      if (val) {
-        let dom = document.querySelector('video')
-        dom.play()
-        dom.addEventListener('ended', () => { //结束
-          this.$router.push('/layout/construct')
-        }, false);
-        setTimeout(() => {
-          this.videoBtnShow = true
-        }, 1000);
-      }
-    }
-  },
-  methods: {
-
-  },
-  created() {
-
-  },
-  mounted() {
-
-  },
-  beforeCreate() { }, //生命周期 - 创建之前
-  beforeMount() { }, //生命周期 - 挂载之前
-  beforeUpdate() { }, //生命周期 - 更新之前
-  updated() { }, //生命周期 - 更新之后
-  beforeDestroy() { }, //生命周期 - 销毁之前
-  destroyed() { }, //生命周期 - 销毁完成
-  activated() { }, //如果页面有keep-alive缓存功能，这个函数会触发
-}
+  watch: {},
+  methods: {},
+  created() {},
+  mounted() {},
+  beforeCreate() {}, //生命周期 - 创建之前
+  beforeMount() {}, //生命周期 - 挂载之前
+  beforeUpdate() {}, //生命周期 - 更新之前
+  updated() {}, //生命周期 - 更新之后
+  beforeDestroy() {}, //生命周期 - 销毁之前
+  destroyed() {}, //生命周期 - 销毁完成
+  activated() {}, //如果页面有keep-alive缓存功能，这个函数会触发
+};
 </script>
 <style lang='less' scoped>
 .Home {
@@ -94,40 +73,5 @@ export default {
     left: 50%;
     transform: translateX(-50%);
   }
-
-  .videoBox {
-    opacity: 0;
-    pointer-events: none;
-    transition: opacity .3s;
-    position: absolute;
-    top: 0;
-    left: 0;
-    z-index: 3;
-    width: 100%;
-    height: 100%;
-
-    video {
-      position: absolute;
-      top: 50%;
-      left: 50%;
-      transform: translate(-50%, -50%);
-      width: 100%;
-      height: 100%;
-    }
-
-    .videoBtn {
-      position: absolute;
-      bottom: 40px;
-      width: 200px;
-      z-index: 2;
-      left: 50%;
-      transform: translateX(-50%);
-    }
-  }
-
-  .videoAc {
-    opacity: 1;
-    pointer-events: auto;
-  }
 }
 </style>

src/views/Interact/components/InteractInfo.vue

@@ -0,0 +1,174 @@
+<template>
+  <div class="InteractInfo">
+    <!-- 图片盒子 -->
+    <div class="title">
+      <van-swipe class="my-swipe" :autoplay="5000" indicator-color="white">
+        <van-swipe-item
+          @click="lookImg(require(`@/assets/img/interact/1/row${i}.png`))"
+          v-for="i in 4"
+          :key="i"
+        >
+          <img
+            class="bacImg"
+            v-lazy="require(`@/assets/img/interact/1/row${i}.png`)"
+            alt=""
+          />
+        </van-swipe-item>
+      </van-swipe>
+    </div>
+    <!-- 畅游芜湖 -->
+    <div class="titLoc">
+      <div class="ll">
+        <img src="../../../assets/img/interact/user.png" alt="" />
+      </div>
+      <div class="rr">
+        <h3>畅游芜湖</h3>
+        <p><van-icon name="location" />安徽省芜湖市镜湖区北京西路44号</p>
+      </div>
+    </div>
+    <!-- 文字内容 -->
+    <div class="txt">
+      <h3>芜湖虾仔面</h3>
+      <p>
+        芜湖人最爱吃虾籽面，以前在困难时期，能吃上一碗虾籽面绝对是真正的奢侈享受，常有人在生病或生日时慨叹一句：“要是有碗虾籽面吃就好了。”而虾籽面成了人人能吃得起的平价小吃，但质量和细节一如既往的讲究，因此成为江城老百姓心中的代表美食，并且还入选了安徽省非物质文化遗产。
+      </p>
+      <p>
+        虾仔面是采用长江中青虾的籽，配以多种佐料，制成膏汤，再加手工揉制的小刀面，煮制而成。面有韧性，味极鲜美，营养价值高。
+      </p>
+      <div class="lastInfo">
+        <div>#美食</div>
+        <p>2022.11.03 16:13</p>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+import { ImagePreview } from "vant";
+export default {
+  name: "InteractInfo",
+  components: {},
+  data() {
+    return {};
+  },
+  computed: {},
+  watch: {},
+  methods: {
+    lookImg(url) {
+      ImagePreview({
+        images: [url],
+        showIndex: false,
+      });
+    },
+  },
+  created() {},
+  mounted() {},
+  beforeCreate() {}, //生命周期 - 创建之前
+  beforeMount() {}, //生命周期 - 挂载之前
+  beforeUpdate() {}, //生命周期 - 更新之前
+  updated() {}, //生命周期 - 更新之后
+  beforeDestroy() {}, //生命周期 - 销毁之前
+  destroyed() {}, //生命周期 - 销毁完成
+  activated() {}, //如果页面有keep-alive缓存功能，这个函数会触发
+};
+</script>
+<style lang='less' scoped>
+.InteractInfo {
+  width: 100%;
+  height: 100%;
+  overflow-y: auto;
+  padding: 20px 15px;
+  .title {
+    width: 100%;
+    height: 200px;
+    position: relative;
+    .my-swipe {
+      width: 100%;
+      height: 100%;
+    }
+
+    .my-swipe .van-swipe-item {
+      border-radius: 8px;
+    }
+
+    .bacImg {
+      border-radius: 8px;
+      width: 100%;
+      height: 100%;
+      object-fit: cover;
+      pointer-events: none;
+    }
+
+    /deep/.van-swipe__indicators {
+      bottom: 5px;
+    }
+
+    /deep/.van-swipe__indicator {
+      opacity: 0.6;
+    }
+
+    /deep/.van-swipe__indicator--active {
+      opacity: 1;
+    }
+  }
+  .titLoc {
+    display: flex;
+    margin: 20px 0;
+    .ll {
+      margin-right: 10px;
+      width: 40px;
+      height: 40px;
+      border-radius: 50%;
+      overflow: hidden;
+      & > img {
+        width: 100%;
+        height: 100%;
+      }
+    }
+    .rr {
+      display: flex;
+      flex-direction: column;
+      justify-content: space-between;
+      h3 {
+        font-size: 16px;
+      }
+      p {
+        font-size: 14px;
+        color: #868686;
+      }
+    }
+  }
+  .txt {
+    h3 {
+      font-size: 16px;
+      margin-bottom: 12px;
+    }
+    p {
+      font-size: 14px;
+      margin-bottom: 12px;
+      line-height: 24px;
+      color: #5c5c5c;
+    }
+    .lastInfo {
+      margin-top: 22px;
+      color: #868686;
+      display: flex;
+      align-items: center;
+      & > div {
+        margin-right: 8px;
+        font-size: 14px;
+        border-radius: 15px;
+        border: 1px solid #868686;
+        min-width: 60px;
+        padding: 0 10px;
+        height: 30px;
+        line-height: 28px;
+      }
+      & > p {
+        font-size: 12px;
+        margin: 0;
+      }
+    }
+  }
+}
+</style>

src/views/Interact/index.vue

@@ -9,7 +9,7 @@
       <van-field
         maxlength="10"
         v-model="txt"
-        placeholder="请输入要搜索的内容"
+        placeholder="输入您感兴趣的内容"
       />
     </div>
     <!-- 精彩必体验 -->
@@ -18,8 +18,14 @@
       <div v-for="item in bsData" :key="item.id">{{ item.name }}</div>
     </div>
     <!-- 主体内容 -->
-    <div class="mainBox">
-      <div class="row" v-for="item in spotData" :key="item.id">
+    <div class="mainBoxNull" v-if="dataShow.length === 0">暂无内容</div>
+    <div class="mainBox" v-else>
+      <div
+        class="row"
+        @click="$router.push('/layout/interact/info')"
+        v-for="item in dataShow"
+        :key="item.id"
+      >
         <img :src="require(`@/assets/img/interact/row${item.id}.png`)" alt="" />
         <div class="name">{{ item.name }}</div>
         <div class="author">
@@ -36,7 +42,7 @@
       <img
         src="../../assets/img/interact/issue.png"
         alt=""
-        @click="$router.push('/layout/interact/issue')"
+        @click="addInteract"
       />
     </div>
   </div>
@@ -66,16 +72,56 @@ export default {
         { id: 3, name: "中江塔", author: "子墨", time: "2022-11-16" },
         { id: 4, name: "鸠兹古镇", author: "张本钰", time: "2022-11-16" },
       ],
+      dataShow: [],
     };
   },
   computed: {},
   watch: {},
   methods: {
+    // 点击+号
+    addInteract() {
+      this.$router.push("/layout/interact/issue");
+      // let code = this.getQueryString("code");
+      // if (code) this.$router.push("/layout/interact/issue");
+      // else {
+      //   //此处的ID是在文档的开发-基本配置里面
+      //   let appid = "wx779dbafb46bab697";
+      //   let url = "http://192.168.20.48:8080/#/layout/interact";
+      //   window.location.href =
+      //     "https://open.weixin.qq.com/connect/oauth2/authorize?appid=" +
+      //     appid +
+      //     "&redirect_uri=" +
+      //     url +
+      //     "&response_type=code&scope=snsapi_userinfo&state=bc17befd6d5060f16de95e38f6eaf69c&connect_redirect=1#wechat_redirect";
+      // }
+    },
     searchFu() {
-      console.log("---------");
+      this.getList();
+    },
+    // 获取列表的方法
+    getList() {
+      if (this.txt.trim() === "") this.dataShow = this.spotData;
+      else
+        this.dataShow = this.spotData.filter((v) => v.name.includes(this.txt));
+    },
+    // 获取地址栏参数的方法
+    getQueryString(name) {
+      var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)", "i");
+      var r = window.location.search.substr(1).match(reg); //获取url中"?"符后的字符串并正则匹配
+      var context = "";
+      if (r != null) context = r[2];
+      reg = null;
+      r = null;
+      return context == null || context == "" || context == "undefined"
+        ? ""
+        : context;
     },
   },
-  created() {},
+  created() {
+    this.getList();
+    let code = this.getQueryString("code");
+    console.log("---------", code);
+  },
   mounted() {},
   beforeCreate() {}, //生命周期 - 创建之前
   beforeMount() {}, //生命周期 - 挂载之前
@@ -141,7 +187,7 @@ export default {
       line-height: 30px;
       padding: 0px 0 0px 36px;
       background-color: #f4f4f4;
-      border-radius: 15px;
+      border-radius: 5px;
     }
   }
 
@@ -169,7 +215,14 @@ export default {
       color: #333333;
     }
   }
-
+  .mainBoxNull {
+    width: 100%;
+    height: 300px;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    font-size: 16px;
+  }
   .mainBox {
     display: flex;
     flex-wrap: wrap;

src/views/Layout/index.vue

@@ -21,7 +21,7 @@ export default {
   data() {
     return {
       data: [
-        { id: 1, path: '/layout/construct', name: '建筑可阅读' },
+        { id: 1, path: '/layout/list', name: '建筑可阅读' },
         { id: 2, path: '/layout/serve', name: '建筑可游玩' },
         { id: 3, path: '/layout/interact', name: '建筑可对话' },
         { id: 4, path: '/layout/my', name: '我的' },