<!--  -->
<template>
  <div class="Exhibitions">
    <div class="ban"></div>
    <div class="nav_2">
      <ul>
        <li
          :class="{ cur: topId === item.id }"
          v-for="(item, index) in topLi"
          :key="index"
          @click="skip(item.path)"
        >
          <img
            :src="require(`@/assets/images/Exhibitions/${item.img}`)"
            alt=""
          />
          <p>{{ item.name }}</p>
        </li>
      </ul>
    </div>
    <div class="pos">
      <span class="pos1">Your Position:&nbsp;</span>
      <Router-link to="/Layout/Home">Home></Router-link>
      <Router-link to="/Layout/Exhibitions/1">Exhibitions></Router-link>
      <span>{{ topLi[topId - 1].name }}></span>
    </div>
    <div class="title">
      <img src="../../assets/images/Visit/pLeft.jpg" alt="" />
      <span>{{ topLi[topId - 1].name }}</span>
      <div class="xian"></div>
    </div>
    <!-- 列表页面 -->
    <ExhibitionsList />
  </div>
</template>

<script>
import ExhibitionsList from "./component/List";
export default {
  name: "Exhibitions",
  components: { ExhibitionsList },
  data() {
    //这里存放数据
    return {
      topLi: [
        {
          id: 1,
          name: "Current Exhibitions",
          img: "t_1.png",
          path: "/Layout/Exhibitions/1",
        },
        {
          id: 2,
          name: "Permanent Exhibitions",
          img: "t_2.png",
          path: "/Layout/Exhibitions/2",
        },
        {
          id: 3,
          name: "Past Exhibitions",
          img: "t_3.png",
          path: "/Layout/Exhibitions/3",
        },
        {
          id: 4,
          name: "Overseas Exhibitions",
          img: "t_4.png",
          path: "/Layout/Exhibitions/4",
        },
      ],
      topId: null,
    };
  },
  //监听属性 类似于data概念
  computed: {},
  //监控data中的数据变化
  watch: {
    // 监听地址栏参数变化
    $route() {
      // 拿到路由参数id
      let temp = this.$route.params.id;
      this.topId = Number(temp);
    },
  },
  //方法集合
  methods: {
    skip(url) {
      this.$router.push(url).catch(() => {});
    },
  },
  //生命周期 - 创建完成（可以访问当前this实例）
  created() {
    // 拿到路由参数id
    let temp = this.$route.params.id;
    this.topId = Number(temp);
  },
  //生命周期 - 挂载完成（可以访问DOM元素）
  mounted() {},
  beforeCreate() {}, //生命周期 - 创建之前
  beforeMount() {}, //生命周期 - 挂载之前
  beforeUpdate() {}, //生命周期 - 更新之前
  updated() {}, //生命周期 - 更新之后
  beforeDestroy() {}, //生命周期 - 销毁之前
  destroyed() {}, //生命周期 - 销毁完成
  activated() {}, //如果页面有keep-alive缓存功能，这个函数会触发
};
</script>
<style lang='less' scoped>
.Exhibitions {
  .ban {
    width: 100%;
    margin: auto;
    background: url("../../assets/images/Exhibitions/banner_1.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;
          width: 37px;
          height: 37px;
        }
        & > 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;
    }
  }
  .title {
    position: relative;
    display: flex;
    height: 65px;
    align-items: center;
    margin: 0px auto 20px;
    width: 1180px;
    font-size: 24px;
    font-weight: bold;
    text-indent: 5px;
    border-bottom: 1px solid black;
    .xian {
      position: absolute;
      bottom: -1px;
      left: 0;
      width: 80px;
      height: 2px;
      background-color: #c7000b;
    }
  }
}
</style>