|
|
@@ -0,0 +1,161 @@
|
|
|
+<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 class=""></li>
|
|
|
+ </ul>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <!-- 嵌套路由 -->
|
|
|
+ <Router-view />
|
|
|
+ </div>
|
|
|
+</template>
|
|
|
+
|
|
|
+<script>
|
|
|
+export default {
|
|
|
+ name: "Layout",
|
|
|
+ components: {},
|
|
|
+ data() {
|
|
|
+ //这里存放数据
|
|
|
+ return {
|
|
|
+ topData: [
|
|
|
+ { id: 1, name: "Home", url: "Home" },
|
|
|
+ {
|
|
|
+ id: 2,
|
|
|
+ name: "Visit",
|
|
|
+ url: "Visit",
|
|
|
+ children: [
|
|
|
+ { id: 2.1, name: "Hours, Direction & Admission" },
|
|
|
+ { id: 2.2, name: "Reservation" },
|
|
|
+ { id: 2.3, name: "Floor Plans" },
|
|
|
+ { id: 2.4, name: "Audio Guide & Tour" },
|
|
|
+ { id: 2.5, name: "Accessibility" },
|
|
|
+ { id: 2.6, name: "Café & Shop" },
|
|
|
+ { id: 2.7, name: "Visitor Guidelines" },
|
|
|
+ ],
|
|
|
+ },
|
|
|
+ {
|
|
|
+ id: 3,
|
|
|
+ name: "Exhibitions",
|
|
|
+ url: "Exhibitions",
|
|
|
+ children: [
|
|
|
+ { id: 3.1, name: "Current Exhibitions" },
|
|
|
+ { id: 3.2, name: "Permanent Exhibitions" },
|
|
|
+ { id: 3.3, name: "Past Exhibitions" },
|
|
|
+ { id: 3.4, name: "Overseas Exhibitions" },
|
|
|
+ ],
|
|
|
+ },
|
|
|
+ {
|
|
|
+ id: 4,
|
|
|
+ name: "Collections",
|
|
|
+ url: "Collections",
|
|
|
+ children: [
|
|
|
+ { id: 4.1, name: "Bronzes" },
|
|
|
+ { id: 4.2, name: "Ceramics" },
|
|
|
+ { id: 4.3, name: "Buddhist Statues" },
|
|
|
+ { id: 4.4, name: "Jadewares" },
|
|
|
+ { id: 4.5, name: "Calligraphies" },
|
|
|
+ { id: 4.6, name: "Paintings" },
|
|
|
+ { id: 4.7, name: "Gold & Silverwares" },
|
|
|
+ { id: 4.8, name: "Coins & Banknotes" },
|
|
|
+ { id: 4.9, name: "Brocades & Embroideries" },
|
|
|
+ { id: 4.1, name: "Cultural Supplies" },
|
|
|
+ { id: 4.11, name: "Miscellaneous" },
|
|
|
+ ],
|
|
|
+ },
|
|
|
+ {
|
|
|
+ id: 5,
|
|
|
+ name: "Learn & Engage",
|
|
|
+ url: "LearnEngage",
|
|
|
+ children: [
|
|
|
+ { id: 5.1, name: "For Students" },
|
|
|
+ { id: 5.2, name: "For Adults" },
|
|
|
+ { id: 5.3, name: "For Families & Children" },
|
|
|
+ ],
|
|
|
+ },
|
|
|
+ {
|
|
|
+ id: 6,
|
|
|
+ name: "Publications",
|
|
|
+ url: "Publications",
|
|
|
+ children: [
|
|
|
+ { id: 6.1, name: "Magazines" },
|
|
|
+ { id: 6.2, name: "Exhibition Catalogues" },
|
|
|
+ { id: 6.3, name: "Exhibition Brochures" },
|
|
|
+ ],
|
|
|
+ },
|
|
|
+ {
|
|
|
+ id: 7,
|
|
|
+ name: "Join & Support",
|
|
|
+ url: "JoinSupport",
|
|
|
+ children: [
|
|
|
+ { id: 7.1, name: "Ways to Volunteer" },
|
|
|
+ { id: 7.2, name: "Ways to Give" },
|
|
|
+ ],
|
|
|
+ },
|
|
|
+ {
|
|
|
+ id: 8,
|
|
|
+ name: "About",
|
|
|
+ url: "About",
|
|
|
+ children: [
|
|
|
+ { id: 8.1, name: "From the Director" },
|
|
|
+ { id: 8.2, name: "History" },
|
|
|
+ { id: 8.3, name: "Partners & Connections" },
|
|
|
+ { id: 8.4, name: "Contact" },
|
|
|
+ ],
|
|
|
+ },
|
|
|
+ ],
|
|
|
+ };
|
|
|
+ },
|
|
|
+ //监听属性 类似于data概念
|
|
|
+ computed: {},
|
|
|
+ //监控data中的数据变化
|
|
|
+ watch: {},
|
|
|
+ //方法集合
|
|
|
+ methods: {},
|
|
|
+ //生命周期 - 创建完成（可以访问当前this实例）
|
|
|
+ created() {},
|
|
|
+ //生命周期 - 挂载完成（可以访问DOM元素）
|
|
|
+ mounted() {},
|
|
|
+ beforeCreate() {}, //生命周期 - 创建之前
|
|
|
+ beforeMount() {}, //生命周期 - 挂载之前
|
|
|
+ beforeUpdate() {}, //生命周期 - 更新之前
|
|
|
+ updated() {}, //生命周期 - 更新之后
|
|
|
+ beforeDestroy() {}, //生命周期 - 销毁之前
|
|
|
+ destroyed() {}, //生命周期 - 销毁完成
|
|
|
+ activated() {}, //如果页面有keep-alive缓存功能，这个函数会触发
|
|
|
+};
|
|
|
+</script>
|
|
|
+<style lang='less' scoped>
|
|
|
+.Layout {
|
|
|
+ position: relative;
|
|
|
+ width: 100%;
|
|
|
+ height: 100%;
|
|
|
+}
|
|
|
+.topNav {
|
|
|
+ background-color: rgba(0, 0, 0, 0.8);
|
|
|
+ width: 100%;
|
|
|
+ height: 60px;
|
|
|
+ position: absolute;
|
|
|
+ top: 0;
|
|
|
+ left: 0;
|
|
|
+ z-index: 999;
|
|
|
+ .mainbav_wrap {
|
|
|
+ width: 1200px;
|
|
|
+ margin: 0 auto;
|
|
|
+ & > h1 {
|
|
|
+ float: left;
|
|
|
+ display: inherit;
|
|
|
+ margin: 10px 70px 0 0;
|
|
|
+ & > img {
|
|
|
+ border: none;
|
|
|
+ vertical-align: top;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+}
|
|
|
+</style>
|
