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

<template>
  <div class="Layout">
    <!-- 公共头部 -->
    <div class="topNav">
      <div class="mainbav_wrap">
        <h1 class="logo">
          <img src="@/assets/images/logo.png" alt="" />
        </h1>
        <ul class="mainbav">
          <li
            @click="skipOne(item.url)"
            :class="{ active: $route.meta.myName === item.name }"
            v-for="item in topData"
            :key="item.id"
          >
            <span>{{ item.name }}</span>
            <ul class="mainbav_sub">
              <li
                :class="{ active2: menaInd === val.url }"
                v-for="(val, index) in item.children"
                :key="index"
                @click.stop="skipTow(val.url)"
              >
                {{ val.name }}
              </li>
            </ul>
          </li>
          <!-- 中文网 -->
          <li class="language">
            <a href="http://www.capitalmuseum.org.cn/" target="_blank">中文</a>
          </li>
          <!-- 爱心模式 -->
          <li class="love">
            <span>Caring Mode</span>&nbsp;
            <el-switch v-model="loveFalg" active-color="#AB3434"> </el-switch>
          </li>
        </ul>
      </div>
      <!-- 右侧的输入框 -->
      <div class="search">
        <el-input
          placeholder="search..."
          suffix-icon="el-icon-search"
          v-model="searchTxt"
        >
        </el-input>
      </div>
    </div>
    <!-- 固定的二维码和游戏 -->
    <div class="rightNav">
      <ul class="rightIco">
        <li title="game">
          <img src="@/assets/images/game.png" alt="" />
        </li>
        <li>
          <img src="@/assets/images/code.png" alt="" />
          <div>
            <img src="@/assets/images/index_ewm1.png" alt="" />
            <img src="@/assets/images/index_ewm.jpg" alt="" />
          </div>
        </li>
      </ul>
    </div>
    <!-- 嵌套路由 -->
    <Router-view />
    <!-- 底部固定栏 -->
    <div class="footer">
      <div>
        <span
          v-for="item in footerData"
          :key="item.name"
          v-html="item.name"
        ></span>
      </div>
      <p>
        Capital Museum. China 16 Fuxingmenwai Street, Xicheng District, Beijing
        100045, P.R.China.
      </p>
    </div>
  </div>
</template>

<script>
import { topData } from "./data";
export default {
  name: "Layout",
  components: {},
  data() {
    //这里存放数据
    return {
      topData,
      loveFalg: false,
      searchTxt: "",
      footerData: [
        { name: "|&emsp; Site Index", path: "" },
        { name: "|&emsp; Terms of Use", path: "" },
        { name: "|&emsp; Events", path: "" },
        { name: "|&emsp; Employment", path: "" },
      ],
      // 控制二级菜单的高亮
      menaInd: null,
    };
  },
  //监听属性 类似于data概念
  computed: {},
  //监控data中的数据变化
  watch: {
    $route() {
      this.menaInd = this.$route.path;
      // console.log('------',this.menaInd);
    },
  },
  //方法集合
  methods: {
    // 第一级的跳转
    skipOne(url) {
      this.$router.push("/Layout/" + url).catch(() => {});
    },
    // 第二级的跳转
    skipTow(url) {
      this.$router.push(url).catch(() => {});
    },
  },
  //生命周期 - 创建完成（可以访问当前this实例）
  created() {
    this.menaInd = this.$route.path;
  },
  //生命周期 - 挂载完成（可以访问DOM元素）
  mounted() {},
  beforeCreate() {}, //生命周期 - 创建之前
  beforeMount() {}, //生命周期 - 挂载之前
  beforeUpdate() {}, //生命周期 - 更新之前
  updated() {}, //生命周期 - 更新之后
  beforeDestroy() {}, //生命周期 - 销毁之前
  destroyed() {}, //生命周期 - 销毁完成
  activated() {}, //如果页面有keep-alive缓存功能，这个函数会触发
};
</script>
<style lang='less' scoped>
.Layout {
  position: relative;
  width: 100%;
}
.topNav {
  background-color: rgba(0, 0, 0, 0.8);
  width: 100%;
  height: 60px;
  position: absolute;
  top: 0;
  left: 0;
  z-index: 990;
  .mainbav_wrap {
    width: 1300px;
    margin: 0 auto;
    & > h1 {
      float: left;
      display: inherit;
      margin: 10px 70px 0 0;
      & > img {
        border: none;
        vertical-align: top;
      }
    }
    .mainbav {
      font-size: 14px;
      color: #fff;
      line-height: 60px;
      & > li {
        cursor: pointer;
        float: left;
        display: inline;
        margin-right: 25px;
        position: relative;
        &:hover {
          & > span {
            border-bottom: 2px solid #ca000a;
          }
          .mainbav_sub {
            display: block;
          }
        }
        .mainbav_sub {
          display: none;
          position: absolute;

          & > li {
            border-left: 2px solid #660005;
            font-size: 14px;
            color: #fff;
            line-height: 40px;
            background-color: rgba(0, 0, 0, 0.8);
            white-space: nowrap;
            float: none;
            display: block;
            margin: 0;
            padding: 0 20px 0 10px;
            &:hover {
              background-color: rgba(204, 0, 3, 0.8);
              border-left: 2px solid #cc0003;
            }
          }
          .active2 {
            background-color: rgba(204, 0, 3, 0.8);
            border-left: 2px solid #cc0003;
          }
        }
      }
      .language {
        background: url("../../assets/images/dh1.png") no-repeat 0 18px;
        width: 73px;
        text-indent: 41px;
        & > a {
          color: #fff;
          text-decoration: none;
          &:hover {
            border-bottom: 2px solid #ca000a;
          }
        }
      }
      .love {
        margin-right: 0;
        &:hover {
          & > span {
            border-bottom: none;
          }
        }
      }
      .active {
        & > span {
          border-bottom: 2px solid #ca000a;
        }
      }
    }
  }
  .search {
    width: 240px;
    height: 30px;
    position: absolute;
    top: 50%;
    right: 40px;
    transform: translateY(-50%);
    ::-webkit-input-placeholder {
      color: #000000;
    }
    /deep/.el-input__icon {
      font-size: 20px;
      line-height: 30px;
      color: #ca000a;
    }
  }
}
.rightNav {
  width: 60px;
  height: 164px;
  position: fixed;
  bottom: 150px;
  right: 0;
  z-index: 990;
  .rightIco {
    width: 100%;
    height: 100%;
    & > li {
      background-color: rgba(0, 0, 0, 0.8);
      text-align: center;
      width: 60px;
      padding: 10px 0;
      position: relative;
      cursor: pointer;
      & > div {
        display: none;
        width: 252px;
        position: absolute;
        top: 0;
        right: 0;
        & > img {
          float: left;
        }
      }
      &:hover {
        background-color: #c20e11;
        & > div {
          display: block;
        }
      }
    }
  }
}
.footer {
  padding: 0 100px;
  display: flex;
  justify-content: space-between;
  width: 100%;
  height: 45px;
  font-size: 14px;
  color: #fff;
  line-height: 45px;
  background: url(../../assets/images/footer_bg.png) center top;
  & > div {
    & > span {
      cursor: pointer;
      margin-right: 15px;
    }
  }
}
</style>