up

webM/src/components/card.vue

@@ -0,0 +1,138 @@
+<!--  -->
+<template>
+  <div :class="`cardCom ${keyval}`">
+    <div
+      class="row"
+      @click="cutInfo"
+      v-for="(item, index) in cardData"
+      :key="index"
+      :style="`top:${index * 15}px;width:${100 - index * 5}%;opacity:${
+        1 - index * 0.2 <= 0 ? 0.1 : 1 - index * 0.2
+      }; z-index: ${cardData.length - index};`"
+    >
+      <img :src="info.cover" alt="" />
+      <div class="txt" v-if="index===0">
+        <h3>{{ info.h3 }}</h3>
+        <p v-html="info.p"></p>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  name: "cardCom",
+  props: {
+    cardData: {
+      type: Array,
+      default: () => [],
+    },
+    keyval:{
+      type:String,
+      default: ''
+    }
+  },
+  components: {},
+  data() {
+    //这里存放数据
+    return {
+      cardInd: 0,
+      info: {},
+    };
+  },
+  //监听属性 类似于data概念
+  computed: {},
+  //监控data中的数据变化
+  watch: {},
+  //方法集合
+  methods: {
+    cutInfo() {
+      let dom = document.querySelector(`.${this.keyval}`);
+      dom.style.opacity = 0;
+      setTimeout(() => {
+        if (this.cardInd < this.cardData.length - 1) this.cardInd++;
+        else this.cardInd = 0;
+        this.info = this.cardData[this.cardInd];
+        dom.style.opacity = 1;
+      }, 300);
+    },
+  },
+  //生命周期 - 创建完成（可以访问当前this实例）
+  created() {},
+  //生命周期 - 挂载完成（可以访问DOM元素）
+  mounted() {
+    // 动态控制cardCom元素的高度
+    this.$nextTick(() => {
+      setTimeout(() => {
+        let dom = document.querySelector(`.${this.keyval}`);
+        dom.style.height = 535 + (this.cardData.length - 1) * 15 + "px";
+      }, 300);
+    });
+    this.info = this.cardData[0];
+  },
+  beforeCreate() {}, //生命周期 - 创建之前
+  beforeMount() {}, //生命周期 - 挂载之前
+  beforeUpdate() {}, //生命周期 - 更新之前
+  updated() {}, //生命周期 - 更新之后
+  beforeDestroy() {}, //生命周期 - 销毁之前
+  destroyed() {}, //生命周期 - 销毁完成
+  activated() {}, //如果页面有keep-alive缓存功能，这个函数会触发
+};
+</script>
+<style lang='less' scoped>
+.txt::-webkit-scrollbar {
+  /*滚动条整体样式*/
+  width: 4px; /*高宽分别对应横竖滚动条的尺寸*/
+  height: 1px;
+}
+.txt::-webkit-scrollbar-thumb {
+  /*滚动条里面小方块*/
+  -webkit-box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
+  background: #d9cdb6;
+}
+.txt::-webkit-scrollbar-track {
+  /*滚动条里面轨道*/
+  width: 0px;
+  background: transparent;
+}
+.cardCom {
+  margin-top: 40px;
+  width: 100%;
+  position: relative;
+  transition: all 0.3s;
+  .row {
+    background-color: #fff;
+    box-shadow: 0px 1px 4px 3px #ccc;
+    position: absolute;
+    top: 0;
+    left: 50%;
+    transform: translateX(-50%);
+    width: 100%;
+    height: 534px;
+    margin: 0 auto;
+    display: flex;
+    flex-direction: column;
+    & > img {
+      width: 100%;
+    }
+    .txt {
+      flex: 1;
+      overflow-y: auto;
+      padding: 20px;
+      & > h3 {
+        background: url("../assets/img/Layout/chosen.png") left center no-repeat;
+        background-size: 22px 18px;
+        padding-left: 30px;
+        font-size: 18px;
+        font-weight: 700;
+        color: #000000;
+        margin-bottom: 10px;
+      }
+      & > p {
+        color: #6a6a6a;
+        font-size: 14px;
+      }
+    }
+  }
+}
+</style>

webM/src/router/index.js

@@ -19,26 +19,10 @@ const routes = [
       },
       // Visit页面
       {
-        path: '/Layout/Visit',
+        path: '/Layout/Visit/:id',
         name: 'Visit',
         component: () => import('../views/Visit/index.vue'),
         meta: { myTitle: 'Visit', topColor: '#c3ac8d' },
-        redirect: { name: 'Visit1' },
-        children: [
-          {
-            path: '/Layout/Visit/1',
-            name: 'Visit1',
-            component: () => import('../views/Visit/Visit1.vue'),
-            meta: { myTitle: 'Visit', sonName: 'Hours, Direction & Admission',topColor: '#c3ac8d' },
-          },
-          {
-            path: '/Layout/Visit/2',
-            name: 'Visit2',
-            component: () => import('../views/Visit/Visit2.vue'),
-            meta: { myTitle: 'Visit', sonName: 'Reservation',topColor: '#c3ac8d' },
-          },
-
-        ]
       },
     ]
   }
@@ -52,7 +36,10 @@ const router = new VueRouter({
 
 // 导航守卫，回到页面顶部
 router.beforeEach((to, from, next) => {
-  document.documentElement.scrollTop = 0
+  setTimeout(() => {
+    let dom = document.querySelector('.Layout')
+    dom.scrollTop = 0
+  }, 100);
   next()
 })
 

webM/src/views/Home/index.vue

@@ -3,7 +3,11 @@
     <div class="one">
       <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
         <van-swipe-item v-for="item in topImg" :key="item.id">
-          <img class="topImg" :src="require(`@/assets/img/Layout/banner${item.id}.png`)" alt="">
+          <img
+            class="topImg"
+            :src="require(`@/assets/img/Layout/banner${item.id}.png`)"
+            alt=""
+          />
         </van-swipe-item>
       </van-swipe>
     </div>
@@ -56,11 +60,11 @@ export default {
   data() {
     //这里存放数据
     return {
-      topImg:[
-        {id:1,path:''},
-        {id:2,path:''},
-        {id:3,path:''},
-        {id:4,path:''},
+      topImg: [
+        { id: 1, path: "" },
+        { id: 2, path: "" },
+        { id: 3, path: "" },
+        { id: 4, path: "" },
       ],
       vData: [
         { id: 1, name: "Hours, Direction & Admission", path: "" },
@@ -104,9 +108,9 @@ export default {
   width: 100%;
   .one {
     width: 100%;
-    .my-swipe{
+    .my-swipe {
       width: 100%;
-      .topImg{
+      .topImg {
         width: 100%;
       }
     }
@@ -194,9 +198,9 @@ export default {
       }
       .more {
         margin: 20px auto 0;
-        width: 130px;
-        height: 40px;
-        background: url("../../assets/img/Layout/frame.png");
+        width: 117px;
+        height: 37px;
+        background: url("../../assets/img/Layout/see.png");
         background-size: 100% 100%;
         color: #c1aa7b;
         line-height: 40px;

webM/src/views/Layout/index.vue

@@ -13,10 +13,14 @@
         <img
           src="@/assets/img/Layout/logo.png"
           alt=""
-          @click="$router.push('/').catch(() => {})"
+          @click="$router.push('/Layout/Home').catch(() => {})"
         />
         <img src="@/assets/img/Layout/zhong.png" alt="" @click="toZhong" />
-        <img src="@/assets/img/Layout/search.png" alt="" @click="searcShow=true"/>
+        <img
+          src="@/assets/img/Layout/search.png"
+          alt=""
+          @click="searcShow = true"
+        />
       </div>
     </div>
     <!-- 子页面 -->
@@ -31,10 +35,14 @@
           <img
             src="@/assets/img/Layout/logo2.png"
             alt=""
-            @click="$router.push('/').catch(() => {})"
+            @click="$router.push('/Layout/Home').catch(() => {})"
           />
           <img src="@/assets/img/Layout/zhong2.png" alt="" @click="toZhong" />
-          <img src="@/assets/img/Layout/search2.png" alt="" @click="searcShow=true"/>
+          <img
+            src="@/assets/img/Layout/search2.png"
+            alt=""
+            @click="searcShow = true"
+          />
         </div>
         <div class="rowAll">
           <div
@@ -74,7 +82,7 @@
       <div class="searcTop" @keyup.enter="searcBtn">
         <div class="inco" @click="searcBtn"></div>
         <input type="text" v-model="txt" placeholder="search......" />
-        <div class="Cancel" @click="searcShow=false">Cancel</div>
+        <div class="Cancel" @click="searcShow = false">Cancel</div>
       </div>
     </div>
     <!-- 回到顶部 -->
@@ -84,7 +92,11 @@
     <!-- 底部 -->
     <div class="bottom">
       <div class="logo">
-        <img src="@/assets/img/Layout/logo.png" alt="" />
+        <img
+          src="@/assets/img/Layout/logo.png"
+          alt=""
+          @click="$router.push('/Layout/Home').catch(() => {})"
+        />
       </div>
       <div class="erwei">
         <img src="@/assets/img/Layout/erwei1.png" alt="" />
@@ -207,24 +219,31 @@ export default {
   //监控data中的数据变化
   watch: {
     $route() {
-      this.menaInd = this.$route.path;
-      this.meanPage = false;
+      this.routeChange();
+    },
+    searcShow() {
+      this.txt = "";
     },
-    searcShow(){
-      this.txt=''
-    }
   },
   //方法集合
   methods: {
-    searcBtn(){
-      console.log('搜索~');
+    // 封装一个地址栏改变监听$route的方法
+    routeChange() {
+      this.menaInd = this.$route.path;
+      this.meanPage = false;
+      this.$nextTick(() => {
+        setTimeout(() => {}, 100);
+      });
+    },
+    searcBtn() {
+      console.log("搜索~");
     },
     menaSonFu(index) {
       if (this.menaSon === index) this.menaSon = null;
       else this.menaSon = index;
     },
     skip(path) {
-      this.$router.push(path).catch(() => {});
+       this.$router.push(path).catch(() => {});
     },
     toTop() {
       let dom = this.$refs.Layout;
@@ -241,12 +260,11 @@ export default {
     },
   },
   //生命周期 - 创建完成（可以访问当前this实例）
-  created() {
-    this.menaInd = this.$route.path;
-    this.meanPage = false;
-  },
+  created() {},
   //生命周期 - 挂载完成（可以访问DOM元素）
-  mounted() {},
+  mounted() {
+    this.routeChange();
+  },
   beforeCreate() {}, //生命周期 - 创建之前
   beforeMount() {}, //生命周期 - 挂载之前
   beforeUpdate() {}, //生命周期 - 更新之前
@@ -357,6 +375,7 @@ export default {
     font-size: 30px;
     right: 10px;
     bottom: 200px;
+    z-index: 99;
   }
   // 搜索页面
   .searchBox {

webM/src/views/Visit/Visit1.vue

@@ -1,5 +1,8 @@
 <template>
-<div class='Visit1'>Visit1</div>
+<div class='Visit1'>
+  <div id="demo">123</div>
+  <h1 v-for="i in 20" :key="i">快乐</h1>
+</div>
 </template>
 
 <script>