ShouBo/web/src/views/Visit/index.vue

<template>
  <div class="Visit">
    <div class="ban"></div>
    <div class="nav_2">
      <ul>
        <li
          :class="{ cur: $route.meta.nameAll === item.name }"
          v-for="(item, index) in topLi"
          :key="index"
          @click="skip(item.path)"
        >
          <img :src="require(`@/assets/images/Visit/${item.img}`)" alt="" />
          <p>{{ item.name }}</p>
        </li>
      </ul>
    </div>
    <div class="pos">
      <span class="pos1">Your Position:</span>
      <Router-link to="/Layout/Home">Home></Router-link>
      <Router-link to="/Layout/Visit">Visit></Router-link>
      <span>{{$route.meta.nameAll}}></span>
    </div>
    <!-- 二级嵌套路由 -->
    <Router-view />
  </div>
</template>

<script>
export default {
  name: "Visit",
  components: {},
  data() {
    //这里存放数据
    return {
      topLi: [
        { name: "Hours, Direction & Admission", img: "m-9.png", path: "/Layout/Visit/1" },
        { name: "Reservation", img: "m-10.png", path: "/Layout/Visit/2" },
        { name: "Floor Plans", img: "m-11.png", path: "/Layout/Visit/3" },
        { name: "Audio Guide & Tour", img: "m-12.png", path: "/Layout/Visit/4" },
        { name: "Accessibility", img: "m-13.png", path: "/Layout/Visit/5" },
        { name: "Café & Shop", img: "m-14.png", path: "/Layout/Visit/6" },
        { name: "Visitor Guidelines", img: "m-15.png", path: "/Layout/Visit/7" },
      ],
    };
  },
  //监听属性 类似于data概念
  computed: {},
  //监控data中的数据变化
  watch: {},
  //方法集合
  methods: {
    skip(url){
      this.$router.push(url).catch(() => {});
    }
  },
  //生命周期 - 创建完成（可以访问当前this实例）
  created() {},
  //生命周期 - 挂载完成（可以访问DOM元素）
  mounted() {},
  beforeCreate() {}, //生命周期 - 创建之前
  beforeMount() {}, //生命周期 - 挂载之前
  beforeUpdate() {}, //生命周期 - 更新之前
  updated() {}, //生命周期 - 更新之后
  beforeDestroy() {}, //生命周期 - 销毁之前
  destroyed() {}, //生命周期 - 销毁完成
  activated() {}, //如果页面有keep-alive缓存功能，这个函数会触发
};
</script>
<style lang='less' scoped>
.Visit {
  .ban {
    width: 100%;
    margin: auto;
    background: url("../../assets/images/Visit/m-4.jpg") no-repeat center top
      #000000;
    height: 300px;
  }
  .nav_2 {
    width: 100%;
    padding-bottom: 8px;
    background: url("../../assets/images/Visit/bg_3.png") left bottom repeat-x
      #f1f1f1;
    overflow: hidden;
    zoom: 1;
    & > ul {
      display: flex;
      width: 1180px;
      margin: 0 auto;
      & > li {
        background: #f1f1f1;
        cursor: pointer;
        width: 168px;
        height: 108px;
        text-align: center;
        & > img {
          margin-top: 25px;
        }
        & > p {
          margin-top: 5px;
          font-size: 14px;
          line-height: 18px;
        }
      }
      .cur {
        background: url("../../assets/images/Visit/bg_1.jpg") center top
          no-repeat #f1f1f1;
      }
    }
  }
  .pos{
    height: 28px;
    line-height: 28px;
    font-size: 12px;
    margin: 0 auto 10px auto;
    width: 1180px;
    .pos1{
     color: #c20e11;
    }
  }
}
</style>