up

web/src/App.vue

@@ -6,7 +6,7 @@
 
 <style lang='less' scoped>
 #app{
-  width: 100vw;
+  width: 100%;
   height: 100vh;
   min-width: 1900px;
   min-height: 900px;

web/src/assets/css/base.css

@@ -152,4 +152,25 @@ a:hover {
 
 .el-input.is-active .el-input__inner, .el-input__inner:focus{
     border-color:#ca000a;
-}
+}
+/* 轮播图样式 */
+.el-carousel--horizontal {
+    height: 100%;
+  }
+  .el-carousel__container {
+    height: 100%;
+  }
+  .el-carousel__arrow{
+    display: none !important;
+  }
+  .el-carousel__button{
+      height: 4px;
+      background-color: #918784;
+      opacity: 1;
+  }
+  .el-carousel__indicator.is-active button{
+    background-color: #c7000b;
+  }
+  .el-carousel__indicators--horizontal{
+      bottom: 80px;
+  }

web/src/main.js

@@ -7,8 +7,23 @@ import 'element-ui/lib/theme-chalk/index.css';
 import './assets/css/base.css'
 Vue.use(ElementUI);
 
+// 封装一个mixin，用来为所有dom添加一个 accessible 的类
+const addClass = {
+  mounted() {
+    let nodes = document.all;
+    for (let i = 0; i < nodes.length; i++) {
+      let o = nodes[i];
+      o.classList.add('accessible')
+    }
+  }
+}
+Vue.mixin(addClass)
+
+
 Vue.config.productionTip = false
 new Vue({
   router,
   render: h => h(App)
 }).$mount('#app')
+
+

web/src/router/index.js

@@ -7,15 +7,36 @@ const routes = [
   {
     path: '/',
     name: 'Layout',
-    component: () => import( '../views/layout/index.vue'),
+    component: () => import('../views/layout/index.vue'),
     redirect: { name: 'Home' },
     children: [
       {
-        path:'Home',
-        name:'Home',
-        component: () => import( '../views/Home/index.vue'),
+        path: '/Layout/Home',
+        name: 'Home',
+        component: () => import('../views/Home/index.vue'),
         meta: { myName: 'Home' },
-      }
+      },
+      {
+        path: '/Layout/Visit',
+        name: 'Visit',
+        component: () => import('../views/Visit/index.vue'),
+        meta: { myName: 'Visit' },
+        redirect: { name: 'Visit1' },
+        children: [
+          {
+            path: '/Layout/Visit/1',
+            name: 'Visit1',
+            component: () => import('../views/Visit/Visit1.vue'),
+            meta: { myName: 'Visit',nameAll:'Hours, Direction & Admission' },
+          },
+          {
+            path: '/Layout/Visit/2',
+            name: 'Visit2',
+            component: () => import('../views/Visit/Visit2.vue'),
+            meta: { myName: 'Visit',nameAll:'Reservation' },
+          },
+        ]
+      },
     ]
   }
 ]

web/src/views/Home/index.vue

@@ -1,49 +1,294 @@
 <template>
-<div class='Home'>
-
-</div>
+  <div class="Home">
+    <!-- 轮播组件 -->
+    <el-carousel>
+      <el-carousel-item v-for="item in 4" :key="item">
+        <img :src="require(`@/assets/images/swiper${item}.jpg`)" alt="" />
+      </el-carousel-item>
+    </el-carousel>
+    <!-- 底部 -->
+    <div class="bottomNav">
+      <div class="t1">
+        <div class="title">
+          <span>Reservation</span>
+        </div>
+        <div class="info">
+          <div class="p">
+            <img src="../../assets/images/bott1.jpg" alt="" />
+          </div>
+          <div class="d">
+            <p class="n1">
+              Online Reservation
+              <a
+                href="http://www.capitalmuseum.org.cn/capitalmuseum/englishwsyy/wsyy.jsp"
+                target="_blank"
+                >Click Here</a
+              >
+            </p>
+            <p class="n2">Telephone Reservation</p>
+            <p class="n3">Individual <span>+86 (10) 63393339</span></p>
+            <p class="n3">Group <span>+86 (10) 63370458</span></p>
+          </div>
+        </div>
+      </div>
+      <div class="t2">
+        <div class="title">
+          <span>Visit Info</span>
+        </div>
+        <div class="info">
+          <div class="p">
+            <img src="../../assets/images/bott2.jpg" alt="" />
+          </div>
+          <div class="d">
+            <p class="n4">Opening Hours 09:00-17:00</p>
+            <p class="n5">No admission after 16:00</p>
+            <p class="n5">Closed on Monday</p>
+            <p class="n6">Phone</p>
+            <p>+86 (10) 63370491</p>
+          </div>
+        </div>
+      </div>
+      <div class="t3">
+        <div class="title">
+          <span>Partners & Connections</span>
+        </div>
+        <div class="info">
+          <div class="p">
+            <img src="../../assets/images/bott3.jpg" alt="" />
+          </div>
+          <div class="d">
+            <p class="n7">Partners & Connections</p>
+          </div>
+        </div>
+      </div>
+      <div class="t4">
+        <div class="title">
+          <span>Events</span>
+        </div>
+        <div class="info">
+          <div class="p">
+            <img src="../../assets/images/bott4.jpg" alt="" />
+          </div>
+          <div class="d">
+            <p class="n8">Partners & Connections</p>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
 </template>
 
 <script>
 export default {
-name:'Home',
-components: {},
-data() {
-//这里存放数据
-return {
-
+  name: "Home",
+  components: {},
+  data() {
+    //这里存放数据
+    return {};
+  },
+  //监听属性 类似于data概念
+  computed: {},
+  //监控data中的数据变化
+  watch: {},
+  //方法集合
+  methods: {},
+  //生命周期 - 创建完成（可以访问当前this实例）
+  created() {},
+  //生命周期 - 挂载完成（可以访问DOM元素）
+  mounted() {},
+  beforeCreate() {}, //生命周期 - 创建之前
+  beforeMount() {}, //生命周期 - 挂载之前
+  beforeUpdate() {}, //生命周期 - 更新之前
+  updated() {}, //生命周期 - 更新之后
+  beforeDestroy() {}, //生命周期 - 销毁之前
+  destroyed() {}, //生命周期 - 销毁完成
+  activated() {}, //如果页面有keep-alive缓存功能，这个函数会触发
 };
-},
-//监听属性 类似于data概念
-computed: {},
-//监控data中的数据变化
-watch: {},
-//方法集合
-methods: {
-
-},
-//生命周期 - 创建完成（可以访问当前this实例）
-created() {
-
-},
-//生命周期 - 挂载完成（可以访问DOM元素）
-mounted() {
-
-},
-beforeCreate() {}, //生命周期 - 创建之前
-beforeMount() {}, //生命周期 - 挂载之前
-beforeUpdate() {}, //生命周期 - 更新之前
-updated() {}, //生命周期 - 更新之后
-beforeDestroy() {}, //生命周期 - 销毁之前
-destroyed() {}, //生命周期 - 销毁完成
-activated() {}, //如果页面有keep-alive缓存功能，这个函数会触发
-}
 </script>
 <style lang='less' scoped>
-.Home{
+.Home {
+  position: relative;
   width: 100%;
   height: calc(100% - 45px);
   background-color: black;
-}
 
+  img {
+    width: 100%;
+    height: 100%;
+    object-fit: cover;
+  }
+  .bottomNav {
+    padding: 0 100px;
+    background-color: rgba(0, 0, 0, 0.8);
+    width: 100%;
+    height: 55px;
+    position: absolute;
+    left: 0;
+    bottom: 0;
+    z-index: 999;
+    display: flex;
+    & > div {
+      cursor: pointer;
+      width: 25%;
+      height: 58px;
+      position: relative;
+      transform: translateY(-3px);
+      .title {
+        font-size: 14px;
+        color: #fff;
+        line-height: 55px;
+        text-align: center;
+        width: 100%;
+        span {
+          padding-left: 30px;
+        }
+      }
+      .info {
+        transition: all 0.3s;
+        height: 0;
+        overflow: hidden;
+        width: 100%;
+        position: absolute;
+        left: 0;
+        bottom: 0;
+        z-index: 99;
+        .d {
+          font-size: 14px;
+          color: #ccc;
+          background: #000;
+          padding: 20px;
+        }
+        .p {
+          img {
+            vertical-align: bottom;
+          }
+        }
+      }
+    }
+    .t1:hover .info {
+      height: 320px;
+    }
+    .t2:hover .info {
+      height: 320px;
+    }
+    .t3:hover .info {
+      height: 270px;
+    }
+    .t4:hover .info {
+      height: 270px;
+    }
+    .t1 {
+      .title {
+        span {
+          background: url("../../assets/images/bottom_ico1.png") no-repeat left
+            center;
+        }
+      }
+      .p {
+        border-bottom: 3px solid #1116e5;
+      }
+      border-top: 3px solid #1116e5;
+    }
+    .t2 {
+      .title {
+        span {
+          background: url("../../assets/images/bottom_ico2.png") no-repeat left
+            center;
+        }
+      }
+      .p {
+        border-bottom: 3px solid #a211e5;
+      }
+      border-top: 3px solid #a211e5;
+    }
+    .t3 {
+      .title {
+        span {
+          background: url("../../assets/images/bottom_ico3.png") no-repeat left
+            center;
+        }
+      }
+      .p {
+        border-bottom: 3px solid #229382;
+      }
+      .d {
+        padding-top: 40px !important;
+        padding-bottom: 40px !important;
+      }
+      border-top: 3px solid #229382;
+    }
+    .t4 {
+      .title {
+        span {
+          background: url("../../assets/images/bottom_ico4.png") no-repeat left
+            center;
+        }
+      }
+      .p {
+        border-bottom: 3px solid #7a9322;
+      }
+      .d {
+        padding-top: 40px !important;
+        padding-bottom: 40px !important;
+      }
+
+      border-top: 3px solid #7a9322;
+    }
+    p {
+      margin-bottom: 5px;
+    }
+    .n1 {
+      line-height: 30px;
+      background: url(../../assets/images/bottom_sub_ico1.png) no-repeat left
+        center;
+      text-indent: 25px;
+      & > a {
+        color: #ff0000;
+        text-decoration: underline;
+        margin-left: 20px;
+      }
+    }
+    .n2 {
+      line-height: 30px;
+      background: url(../../assets/images/bottom_sub_ico2.png) no-repeat left
+        center;
+      text-indent: 25px;
+      margin-bottom: 10px;
+    }
+    .n3 {
+      width: 200px;
+      margin-bottom: 5px;
+      & > span {
+        float: right;
+      }
+    }
+    .n4 {
+      line-height: 30px;
+      background: url(../../assets/images/bottom_sub_ico3.png) no-repeat left
+        center;
+      text-indent: 25px;
+    }
+    .n5 {
+      font-size: 12px;
+      color: #828282;
+      margin-bottom: 0;
+    }
+    .n6 {
+      line-height: 30px;
+      background: url(../../assets/images/bottom_sub_ico2.png) no-repeat left
+        center;
+      text-indent: 25px;
+    }
+    .n7 {
+      font-size: 18px;
+      background: url(../../assets/images/bottom_ico3.png) no-repeat left center;
+      padding-left: 30px;
+    }
+    .n8 {
+      font-size: 18px;
+      background: url(../../assets/images/bottom_ico4.png) no-repeat left center;
+      padding-left: 30px;
+    }
+  }
+}
 </style>

web/src/views/Visit/Visit1.vue

@@ -0,0 +1,57 @@
+<template>
+<div class='Visit1'>
+  <div class="box1">
+    <img src="../../assets/images/Visit/Visit1.jpg" alt="">
+  </div>
+</div>
+</template>
+
+<script>
+
+export default {
+name:'Visit1',
+components: {},
+data() {
+//这里存放数据
+return {
+
+};
+},
+//监听属性 类似于data概念
+computed: {},
+//监控data中的数据变化
+watch: {},
+//方法集合
+methods: {
+
+},
+//生命周期 - 创建完成（可以访问当前this实例）
+created() {
+
+},
+//生命周期 - 挂载完成（可以访问DOM元素）
+mounted() {
+
+},
+beforeCreate() {}, //生命周期 - 创建之前
+beforeMount() {}, //生命周期 - 挂载之前
+beforeUpdate() {}, //生命周期 - 更新之前
+updated() {}, //生命周期 - 更新之后
+beforeDestroy() {}, //生命周期 - 销毁之前
+destroyed() {}, //生命周期 - 销毁完成
+activated() {}, //如果页面有keep-alive缓存功能，这个函数会触发
+}
+</script>
+<style lang='less' scoped>
+.Visit1{
+  .box1{
+    width: 1200px;
+    height: 556px;
+    margin: auto;
+    &>img{
+      max-width: 100%;
+    }
+  }
+}
+
+</style>

web/src/views/Visit/Visit2.vue

@@ -0,0 +1,89 @@
+<template>
+  <div class="Visit2">
+    <div
+      class="public"
+      :class="{ hintShow: hintShow }"
+      @click="hintShow = true"
+    >
+      <div>
+        The reservation service is now under maintenance. Please go to Capital
+        Museum's WeChat account for reservation.<span>X</span>
+      </div>
+    </div>
+    <div class="mm1">
+      <div class="mm1l"></div>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  name: "Visit2",
+  components: {},
+  data() {
+    //这里存放数据
+    return {
+      hintShow: false,
+    };
+  },
+  //监听属性 类似于data概念
+  computed: {},
+  //监控data中的数据变化
+  watch: {},
+  //方法集合
+  methods: {},
+  //生命周期 - 创建完成（可以访问当前this实例）
+  created() {},
+  //生命周期 - 挂载完成（可以访问DOM元素）
+  mounted() {},
+  beforeCreate() {}, //生命周期 - 创建之前
+  beforeMount() {}, //生命周期 - 挂载之前
+  beforeUpdate() {}, //生命周期 - 更新之前
+  updated() {}, //生命周期 - 更新之后
+  beforeDestroy() {}, //生命周期 - 销毁之前
+  destroyed() {}, //生命周期 - 销毁完成
+  activated() {}, //如果页面有keep-alive缓存功能，这个函数会触发
+};
+</script>
+<style lang='less' scoped>
+.Visit2 {
+  .public {
+    overflow: hidden;
+    transition: all 0.3s;
+    height: 39px;
+    background-color: rgba(206, 36, 69, 0.97);
+    width: 100%;
+    cursor: pointer;
+    position: absolute;
+    left: 0;
+    top: 60px;
+    & > div {
+      width: 1180px;
+      margin: 0 auto;
+      padding: 5px 0;
+      font-size: 18px;
+      line-height: 1.6;
+      color: #fff;
+      & > span {
+        float: right;
+      }
+    }
+  }
+  .hintShow {
+    height: 0px;
+  }
+  .mm1 {
+    width: 1180px;
+    margin: auto;
+    height: 1%;
+    overflow: hidden;
+    padding-bottom: 30px;
+    .mm1l {
+      width: 550px;
+      float: left;
+      font-size: 18px;
+      line-height: 28px;
+    }
+  }
+}
+</style>

web/src/views/Visit/index.vue

@@ -0,0 +1,121 @@
+<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>

web/src/views/layout/data.js

@@ -5,13 +5,13 @@ export const topData = [
     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" },
+      { url:'/Layout/Visit/1',id: 2.1, name: "Hours, Direction & Admission" },
+      { url:'/Layout/Visit/2',id: 2.2, name: "Reservation" },
+      { url:'/Layout/Visit/3',id: 2.3, name: "Floor Plans" },
+      { url:'/Layout/Visit/4',id: 2.4, name: "Audio Guide & Tour" },
+      { url:'/Layout/Visit/5',id: 2.5, name: "Accessibility" },
+      { url:'/Layout/Visit/6',id: 2.6, name: "Café & Shop" },
+      { url:'/Layout/Visit/7',id: 2.7, name: "Visitor Guidelines" },
     ],
   },
   {

web/src/views/layout/index.vue

@@ -8,13 +8,14 @@
         </h1>
         <ul class="mainbav">
           <li
+            @click="skipOne(item.name)"
             :class="{ active: $route.meta.myName === item.name }"
             v-for="item in topData"
             :key="item.id"
           >
             <span>{{ item.name }}</span>
             <ul class="mainbav_sub">
-              <li v-for="(val, index) in item.children" :key="index">
+              <li v-for="(val, index) in item.children" :key="index" @click.stop="skipTow(val.url)">
                 {{ val.name }}
               </li>
             </ul>
@@ -60,9 +61,16 @@
     <!-- 底部固定栏 -->
     <div class="footer">
       <div>
-        <span v-for="item in footerData" :key="item.name" v-html="item.name"></span>
+        <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>
+      <p>
+        Capital Museum. China 16 Fuxingmenwai Street, Xicheng District, Beijing
+        100045, P.R.China.
+      </p>
     </div>
   </div>
 </template>
@@ -78,12 +86,12 @@ export default {
       topData,
       loveFalg: false,
       searchTxt: "",
-      footerData:[
-        {name:'|&emsp; Site Index',path:''},
-        {name:'|&emsp; Terms of Use',path:''},
-        {name:'|&emsp; Events',path:''},
-        {name:'|&emsp; Employment',path:''},
-      ]
+      footerData: [
+        { name: "|&emsp; Site Index", path: "" },
+        { name: "|&emsp; Terms of Use", path: "" },
+        { name: "|&emsp; Events", path: "" },
+        { name: "|&emsp; Employment", path: "" },
+      ],
     };
   },
   //监听属性 类似于data概念
@@ -91,11 +99,21 @@ export default {
   //监控data中的数据变化
   watch: {},
   //方法集合
-  methods: {},
+  methods: {
+    // 第一级的跳转
+    skipOne(name) {
+      this.$router.push("/Layout/" + name).catch(() => {});
+    },
+    // 第二级的跳转
+    skipTow(url){
+      this.$router.push(url).catch(() => {});
+    }
+  },
   //生命周期 - 创建完成（可以访问当前this实例）
   created() {},
   //生命周期 - 挂载完成（可以访问DOM元素）
-  mounted() {},
+  mounted() {
+  },
   beforeCreate() {}, //生命周期 - 创建之前
   beforeMount() {}, //生命周期 - 挂载之前
   beforeUpdate() {}, //生命周期 - 更新之前
@@ -261,8 +279,8 @@ export default {
   color: #fff;
   line-height: 45px;
   background: url(../../assets/images/footer_bg.png) center top;
-  &>div{
-    &>span{
+  & > div {
+    & > span {
       cursor: pointer;
       margin-right: 15px;
     }