upp

web/src/views/LearnEngage/index.vue

@@ -1,19 +1,25 @@
 <template>
   <div class="LearnEngage">
-    <div class="banWrapper"
+    <div
+      class="banWrapper"
       tabindex="0"
       data-aria-viewport-area
       aria-label
       :aria-description="`You've reached the banner area of the ${currentTabText} page; this section has one image; please use the tab key to go through the content.`"
     >
-      <div class="ban aria-theme-independent"
+      <div
+        class="ban aria-theme-independent"
         tabindex="0"
         aria-label="Image"
         aria-description="Learn & Engage"
       ></div>
     </div>
-    <div class="nav_2" data-aria-viewport-area tabindex="0"
-      aria-label aria-description="You've reached the secondary menu of the Learn & Engage section; this menu has three options; please use the tab key to go through the menu."
+    <div
+      class="nav_2"
+      data-aria-viewport-area
+      tabindex="0"
+      aria-label
+      aria-description="You've reached the secondary menu of the Learn & Engage section; this menu has three options; please use the tab key to go through the menu."
     >
       <ul>
         <li
@@ -29,7 +35,9 @@
           aria-label="Link"
           :aria-description="item.name"
         >
-          <img :src="`/data/LearnEngage/${index + 1}.png`" alt="" />
+          <div class="imgBox">
+            <img :src="`/data/LearnEngage/${index + 1}.png`" alt="" />
+          </div>
           <p
             :class="{
               'aria-inverse-theme': topId === item.url,
@@ -41,8 +49,12 @@
       </ul>
     </div>
     <!-- 面包屑 -->
-    <div class="pos" data-aria-viewport-area tabindex="0"
-      aria-label aria-description="You've reached the path area, please use the tab key to navigate through the content."
+    <div
+      class="pos"
+      data-aria-viewport-area
+      tabindex="0"
+      aria-label
+      aria-description="You've reached the path area, please use the tab key to navigate through the content."
     >
       <span class="pos1" tabindex="0">Your Position:&nbsp;</span>
       <Router-link
@@ -67,12 +79,16 @@
         tabindex="0"
         :aria-description="currentTabText"
       >
-        {{currentTabText}}
+        {{ currentTabText }}
       </Router-link>
     </div>
     <!-- 内容 -->
-    <div class="conten" data-aria-viewport-area tabindex="0"
-      aria-label :aria-description="`You've reached the content area of the ${currentTabText} page, please use the tab key to go through the content.`"
+    <div
+      class="conten"
+      data-aria-viewport-area
+      tabindex="0"
+      aria-label
+      :aria-description="`You've reached the content area of the ${currentTabText} page, please use the tab key to go through the content.`"
     >
       <div
         class="row"
@@ -81,34 +97,41 @@
         @click="toInfo(item.id)"
         @keydown.enter.passive="toInfo(item.id)"
       >
-        <div class="left">
-          <h3 tabindex="0" aria-label="Link">{{ item.h3 }}</h3>
-          <p tabindex="0" aria-label="Link">{{ item.p }}</p>
-          <h4 v-html="item.h4" tabindex="0" aria-label="Link"></h4>
+        <!-- 右下角的更多 -->
+        <div class="rightMoer">
+          <img src="../../assets/images/MORE.png" alt="" />
         </div>
-        <div class="right">
-          <img :src="`/data/LearnEngage/sm/${item.id}.png`"
-            :alt="item.h3" 
-            tabindex="0" aria-label="Image link"
+        <div class="topImg">
+          <img
+            :src="`/data/LearnEngage/sm/${item.id}.png`"
+            :alt="item.h3"
+            tabindex="0"
+            aria-label="Image link"
             :aria-description="item.h3"
           />
         </div>
+        <div class="bottomTxt" v-if="item.info">
+          <h3 tabindex="0" aria-label="Link">{{ item.h3 }}</h3>
+          <p tabindex="0" aria-label="Link">Venue：{{ item.info.loc }}</p>
+          <p tabindex="0" aria-label="Link">Date：{{ item.info.time }}</p>
+          <p tabindex="0" aria-label="Link">Limit：{{ item.info.ren }}</p>
+        </div>
       </div>
-      <!-- 分页 -->
-      <div class="page">
-        <span
-          :class="{ active: pageSize === i }"
-          v-for="i in pageNum"
-          :key="i"
-          @click="pageChange(i)"
-          @keydown.enter.passive="pageChange(i)"
-          tabindex="0"
-          aria-label="Link"
-          :aria-description="`page ${i}`"
-        >
-          {{ i }}
-        </span>
-      </div>
+    </div>
+    <!-- 分页 -->
+    <div class="page">
+      <span
+        :class="{ active: pageSize === i }"
+        v-for="i in pageNum"
+        :key="i"
+        @click="pageChange(i)"
+        @keydown.enter.passive="pageChange(i)"
+        tabindex="0"
+        aria-label="Link"
+        :aria-description="`page ${i}`"
+      >
+        {{ i }}
+      </span>
     </div>
   </div>
 </template>
@@ -133,8 +156,10 @@ export default {
   },
   computed: {
     currentTabText() {
-      return `For ${this.topId === "Families" ? "Families & Children" : this.topId }`
-    }
+      return `For ${
+        this.topId === "Families" ? "Families & Children" : this.topId
+      }`;
+    },
   },
   watch: {
     // 监听地址栏参数变化
@@ -147,7 +172,7 @@ export default {
     toInfo(id) {
       this.$router.push({
         name: "LearnEngageInfo",
-        query: { id, k:this.topId,m:this.pageSize},
+        query: { id, k: this.topId, m: this.pageSize },
       });
     },
     // 切换页码
@@ -172,30 +197,33 @@ export default {
       }
       this.data = tempArrAll;
 
-      let keyword = ''
+      let keyword = "";
       switch (this.topId) {
-        case 'Students':
-          keyword = 'For Students'
+        case "Students":
+          keyword = "For Students";
           break;
-        case 'Adults':
-          keyword = 'For Adults'
+        case "Adults":
+          keyword = "For Adults";
           break;
-        case 'Families':
-          keyword = 'For Families & Children'
+        case "Families":
+          keyword = "For Families & Children";
           break;
         default:
           break;
       }
-      this.$eventBus.$emit('request-read', `You've reached the ${keyword} page of the Learn & Engage section. This page contains one navigation section, six window sections, and one interactive section. To choose a section, please hit the shortcut key.`)
+      this.$eventBus.$emit(
+        "request-read",
+        `You've reached the ${keyword} page of the Learn & Engage section. This page contains one navigation section, six window sections, and one interactive section. To choose a section, please hit the shortcut key.`
+      );
     },
   },
   //生命周期 - 创建完成（可以访问当前this实例）
   created() {
     this.getData();
     // 记录分页
-    let mm =this.$route.query.m
-    if(mm){
-      this.pageSize =Number(mm)
+    let mm = this.$route.query.m;
+    if (mm) {
+      this.pageSize = Number(mm);
     }
   },
   //生命周期 - 挂载完成（可以访问DOM元素）
@@ -211,7 +239,7 @@ export default {
 </script>
 <style lang='less' scoped>
 .LearnEngage {
-  background-color: #fff;
+  background-color: #f1f1f1;
   .ban {
     width: 100%;
     margin: auto;
@@ -219,36 +247,52 @@ export default {
     height: 300px;
   }
   .nav_2 {
+    position: relative;
+    top: -15px;
     width: 100%;
-    padding-bottom: 8px;
-    background: url("../../assets/images/Visit/bg_3.png") left bottom repeat-x
-      #f1f1f1;
     overflow: hidden;
     zoom: 1;
     & > ul {
+      background-color: #fff;
+      padding-top: 5px;
+      width: 1300px;
+      padding: 5px 60px;
       display: flex;
-      width: 1180px;
+      justify-content: space-around;
       margin: 0 auto;
+      border-radius: 5px;
       & > li {
-        background: #f1f1f1;
         cursor: pointer;
         width: 168px;
         height: 108px;
         text-align: center;
-        & > img {
-          margin-top: 25px;
-          // width: 49px;
-          // height: 39px;
+        padding-top: 8px;
+        .imgBox {
+          width: 50px;
+          height: 50px;
+          border-radius: 50%;
+          overflow: hidden;
+          background-color: black;
+          margin: 10px auto;
+          & > img {
+            width: 50px;
+            height: 50px;
+          }
         }
         & > p {
           margin-top: 5px;
           font-size: 14px;
           line-height: 18px;
+          color: black;
         }
       }
       .cur {
-        background: url("../../assets/images/Visit/bg_1.jpg") center top
-          no-repeat #f1f1f1;
+        .imgBox {
+          background-color: #cd1425;
+        }
+        & > p {
+          color: #cd1425;
+        }
       }
     }
   }
@@ -265,57 +309,84 @@ export default {
   .conten {
     width: 1178px;
     margin: 0 auto;
+    display: flex;
+    flex-wrap: wrap;
     .row {
+      width: 31%;
+      height: 350px;
       cursor: pointer;
-      padding: 20px;
-      border: solid 1px #c7c7c7;
-      border-right: 0;
-      height: 295px;
-      margin-bottom: 20px;
-      .left {
-        width: 730px;
-        float: left;
+      border-radius: 5px;
+      overflow: hidden;
+      margin: 0 2% 2% 0;
+      transition: all 0.3s;
+      position: relative;
+      .rightMoer {
+        position: absolute;
+        bottom: 10px;
+        right: 8px;
+        width: 50px;
+        & > img {
+          width: 100%;
+        }
+      }
+      .topImg {
+        width: 100%;
+        height: 220px;
+        & > img {
+          width: 100%;
+          height: 100%;
+          object-fit: cover;
+        }
+      }
+      .bottomTxt {
+        width: 100%;
+        height: 130px;
+        padding: 15px 20px 0;
         & > h3 {
           font-weight: 700;
           font-size: 18px;
           line-height: 22px;
+          overflow: hidden;
+          text-overflow: ellipsis;
+          white-space: nowrap;
         }
         & > p {
-          color: #a5a5a5;
+          overflow: hidden;
+          text-overflow: ellipsis;
+          white-space: nowrap;
+          color: #8b8b8b;
           font-size: 14px;
           line-height: 20px;
           font-weight: normal;
-          padding: 10px 0 40px 0;
-        }
-        & > h4 {
-          font-size: 14px;
-          line-height: 24px;
-          font-weight: 700;
         }
       }
-      .right {
-        width: 375px;
-        float: right;
-        & > img {
-          width: 375px;
-          height: 255px;
-          object-fit: cover;
-        }
+      &:nth-of-type(3n) {
+        margin-right: 0;
       }
-    }
-    .page {
-      display: flex;
-      justify-content: center;
-      padding-bottom: 30px;
-      & > span {
-        margin-right: 8px;
-        cursor: pointer;
-      }
-      .active {
-        color: #bf2323;
-        pointer-events: none;
+      &:hover {
+        box-shadow: 0px 0px 5px 4px #ccc;
+        background-color: #fff;
       }
     }
   }
+  .page {
+    display: flex;
+    justify-content: center;
+    padding-bottom: 30px;
+    & > span {
+      width: 30px;
+      height: 30px;
+      text-align: center;
+      line-height: 30px;
+      margin-right: 15px;
+      border-radius: 50%;
+      cursor: pointer;
+    }
+    .active {
+      background-color: #bf2323;
+      color: #fff;
+      pointer-events: none;
+    }
+  }
 }
 </style>

web/src/views/LearnEngage/info.vue

@@ -7,33 +7,41 @@
       aria-label
       aria-description="You've reached the banner area of the tertiary Learn & Engage page; this area has one image; please use the tab key to go through the content."
     >
-      <div class="ban aria-theme-independent"
+      <div
+        class="ban aria-theme-independent"
         tabindex="0"
         aria-label="Image"
         aria-description="tertiary Learn & Engage"
       ></div>
     </div>
     <!-- 面包屑 -->
-    <div class="pos" data-aria-viewport-area tabindex="0"
-      aria-label aria-description="You've reached the path area; this area has three URLs; please use the tab key to go through the content."
+    <div
+      class="pos"
+      data-aria-viewport-area
+      tabindex="0"
+      aria-label
+      aria-description="You've reached the path area; this area has three URLs; please use the tab key to go through the content."
     >
-      <div >
+      <div>
         <span class="pos1" tabindex="0">Your Position:&nbsp;</span>
-        <Router-link to="/Layout/Home"
+        <Router-link
+          to="/Layout/Home"
           replace
           tabindex="0"
           aria-description="Home"
         >
           Home>
         </Router-link>
-        <Router-link to="/Layout/LearnEngage/Students"
+        <Router-link
+          to="/Layout/LearnEngage/Students"
           replace
           tabindex="0"
           aria-description="Learn & Engage"
         >
           Learn & Engage>
         </Router-link>
-        <Router-link :to="`/Layout/LearnEngage/${mbTxt}?m=${pageSize}`"
+        <Router-link
+          :to="`/Layout/LearnEngage/${mbTxt}?m=${pageSize}`"
           replace
           tabindex="0"
           :aria-description="mbTxt"
@@ -43,52 +51,86 @@
       </div>
     </div>
     <!-- 内容 -->
-    <div class="conten" data-aria-viewport-area tabindex="0"
-      aria-label aria-description="You've reached the content area of the tertiary Learn & Engage page, please use the tab key to navigate through the content."
+    <div
+      class="conten"
+      data-aria-viewport-area
+      tabindex="0"
+      aria-label
+      aria-description="You've reached the content area of the tertiary Learn & Engage page, please use the tab key to navigate through the content."
     >
-      <div class="title" tabindex="0">{{ dataObj.title }}</div>
-      <div class="info" >
-        <span class="info1 aria-theme-independent" tabindex="0">{{ dataObj.time }}</span>
-        <span class="info2 aria-theme-independent" tabindex="0">{{ dataObj.loc }}</span>
-        <span class="info3 aria-theme-independent" tabindex="0">{{ dataObj.ren }}</span>
-      </div>
-      <div class="main" >
-        <p v-html="dataObj.top" v-if="dataObj.top"
-          tabindex="0"
-          :aria-description="dataObj.top.replace(/(<([^>]+)>)/ig, '')"
-        ></p>
-        <img :src="`/data/LearnEngage/in/${id}.jpg`"
+      <div class="left">
+        <img
+          :src="`/data/LearnEngage/in/${id}.jpg`"
           :alt="dataObj.title"
-          v-if="dataObj.imgShow!==0"
+          v-if="dataObj.imgShow !== 0"
           tabindex="0"
           :aria-description="dataObj.title"
         />
-        <div v-html="dataObj.txt"
-          tabindex="0"
-          :aria-description="dataObj.txt.replace(/(<([^>]+)>)/ig, '')"
-        ></div>
+        <p class="info1 aria-theme-independent" tabindex="0">
+          {{ dataObj.time }}
+        </p>
+
+        <p class="info3 aria-theme-independent" tabindex="0">
+          {{ dataObj.ren }}
+        </p>
+        <p class="info2 aria-theme-independent" tabindex="0">
+          {{ dataObj.loc }}
+        </p>
       </div>
-      <div class="main bottom" >
-        <div class="top aria-theme-independent" tabindex="0" aria-description="Online Reservation">
-          <span tabindex="0" class="aria-theme-independent">{{ dataObj.tipTime }}</span>
+
+      <div class="right">
+        <h3 class="title" tabindex="0">{{ dataObj.title }}</h3>
+        <div class="rightMain">
+          <p
+            v-html="dataObj.top"
+            v-if="dataObj.top"
+            tabindex="0"
+            :aria-description="dataObj.top.replace(/(<([^>]+)>)/gi, '')"
+          ></p>
+          <div
+            v-html="dataObj.txt"
+            tabindex="0"
+            :aria-description="dataObj.txt.replace(/(<([^>]+)>)/gi, '')"
+          ></div>
+          <div class="baoMingSta"></div>
+          <div class="Tip" v-if="dataObj.tip">
+            <h3 class="h3xx">Tip</h3>
+            <p v-html="dataObj.tip" tabindex="0"></p>
+          </div>
+        </div>
+      </div>
+
+      <!-- <div class="main bottom">
+        <div
+          class="top aria-theme-independent"
+          tabindex="0"
+          aria-description="Online Reservation"
+        >
+          <span tabindex="0" class="aria-theme-independent">{{
+            dataObj.tipTime
+          }}</span>
         </div>
         <div class="m2">
-          <img src="/data/LearnEngage/m-27.jpg" alt="tip" 
+          <img
+            src="/data/LearnEngage/m-27.jpg"
+            alt="tip"
             tabindex="0"
             aria-description="Tip"
           />
-          <p v-html="dataObj.tip" tabindex="0" ></p>
+          <p v-html="dataObj.tip" tabindex="0"></p>
         </div>
         <div
           class="back"
           @click="$router.push(`/Layout/LearnEngage/${mbTxt}?m=${pageSize}`)"
-          @keydown.enter.passive="$router.push(`/Layout/LearnEngage/${mbTxt}?m=${pageSize}`)"
+          @keydown.enter.passive="
+            $router.push(`/Layout/LearnEngage/${mbTxt}?m=${pageSize}`)
+          "
           tabindex="0"
           aria-label="Link"
         >
           Back
         </div>
-      </div>
+      </div> -->
     </div>
   </div>
 </template>
@@ -133,7 +175,10 @@ export default {
   },
   //生命周期 - 挂载完成（可以访问DOM元素）
   mounted() {
-    this.$eventBus.$emit('request-read', `You've reached the tertiary page of the Learn & Engage section. This page contains one navigation section, five window sections, and one interactive section. To choose a section, please hit the shortcut key.`)
+    this.$eventBus.$emit(
+      "request-read",
+      `You've reached the tertiary page of the Learn & Engage section. This page contains one navigation section, five window sections, and one interactive section. To choose a section, please hit the shortcut key.`
+    );
   },
   beforeCreate() {}, //生命周期 - 创建之前
   beforeMount() {}, //生命周期 - 挂载之前
@@ -146,7 +191,7 @@ export default {
 </script>
 <style lang='less' scoped>
 .LearnEngageInfo {
-  background-color: #fff;
+  background-color: #f1f1f1;
   .ban {
     width: 100%;
     margin: auto;
@@ -155,13 +200,12 @@ export default {
   }
   .pos {
     width: 100%;
-    background: url("../../assets/images/Visit/bg_3.png") left bottom repeat-x
-      #f1f1f1;
     overflow: hidden;
     zoom: 1;
     height: 50px;
     & > div {
-      padding-top: 12px;
+      border-bottom: 1px solid black;
+      padding: 12px 20px 0;
       height: 48px;
       width: 1180px;
       overflow: hidden;
@@ -179,42 +223,125 @@ export default {
     }
   }
   .conten {
-    padding-top: 35px;
     width: 1180px;
     margin: 0 auto;
-    .title {
-      font-size: 30px;
-      line-height: 44px;
-      font-weight: bold;
-      margin-bottom: 10px;
-    }
-    .info {
-      font-size: 14px;
-      line-height: 36px;
-      color: #666;
-      overflow: hidden;
-      zoom: 1;
-      margin-bottom: 20px;
-      & > span {
-        padding: 0 30px;
-        display: block;
-        float: left;
-        background: url("/data/LearnEngage/info1.png") left 8px no-repeat;
+    height: calc(100vh - 395px);
+    padding: 20px 50px 10px;
+    display: flex;
+    .left {
+      width: 260px;
+      height: 100%;
+      & > img {
+        width: 100%;
+        max-height: calc(100% - 80px);
+        object-fit: cover;
+      }
+      & > p {
+        color: #888887;
+        font-size: 14px;
+        padding: 10px 0 10px 30px;
+        background: url("../../assets/images/date.png") left 5px no-repeat;
+        background-size: 25px 25px;
+      }
+      .info1 {
+        margin-top: 10px;
       }
       .info2 {
-        background: url("/data/LearnEngage/info2.png") left 8px no-repeat;
+        background: url("../../assets/images/person.png") left 5px no-repeat;
+        background-size: 25px 25px;
       }
       .info3 {
-        background: url("/data/LearnEngage/info3.png") left 8px no-repeat;
+        background: url("../../assets/images/address.png") left 5px no-repeat;
+        background-size: 25px 25px;
       }
     }
+
+    .right {
+      margin-left: 30px;
+      width: calc(100% - 290px);
+      .title {
+        font-size: 24px;
+        font-weight: bold;
+        line-height: 34px;
+        margin-bottom: 10px;
+      }
+      .rightMain {
+        height: calc(100% - 80px);
+        overflow-y: auto;
+        font-size: 14px;
+        line-height: 26px;
+        .h3xx {
+          font-size: 16px;
+          font-weight: 700;
+        }
+        & > p {
+          /deep/ p {
+            font-size: 14px;
+            line-height: 20px;
+            color: #1f1d1d;
+            margin-bottom: 10px;
+          }
+          /deep/ .centen {
+            text-align: center;
+            font-size: 16px;
+            font-weight: 700;
+          }
+          /deep/ .xx {
+            font-size: 16px;
+            font-weight: 700;
+          }
+        }
+        /deep/img {
+          display: block;
+          margin: 15px auto;
+          max-height: 580px;
+        }
+        & > div {
+          /deep/ .xx {
+            font-size: 16px;
+            font-weight: 700;
+          }
+          /deep/ span {
+            font-style: italic;
+          }
+          /deep/ i {
+            font-size: 16px;
+            font-weight: 700;
+          }
+          /deep/ p {
+            font-size: 14px;
+            line-height: 20px;
+            color: #1f1d1d;
+            margin-bottom: 10px;
+          }
+        }
+      }
+      .rightMain::-webkit-scrollbar {
+        /*滚动条整体样式*/
+        width: 3px; /*高宽分别对应横竖滚动条的尺寸*/
+        height: 1px;
+      }
+      .rightMain::-webkit-scrollbar-thumb {
+        /*滚动条里面小方块*/
+        border-radius: 10px;
+        -webkit-box-shadow: inset 0 0 5px transparent;
+        background: #e0e0e0;
+      }
+      .rightMain::-webkit-scrollbar-track {
+        /*滚动条里面轨道*/
+        -webkit-box-shadow: inset 0 0 5px transparent;
+        border-radius: 10px;
+        background: transparent;
+      }
+    }
+
     .main {
       padding: 30px 0;
       background: url("/data/LearnEngage/xian.png") left top no-repeat;
       font-size: 18px;
       line-height: 26px;
       & > p {
-        /deep/ p{
+        /deep/ p {
           font-size: 18px;
           line-height: 26px;
           color: #1f1d1d;

web/src/views/Visit/index.vue

@@ -1,14 +1,25 @@
 <template>
   <div class="Visit">
-    <div class="ban_wrapper" data-aria-viewport-area tabindex="0"
-      aria-label :aria-description="`You've reached the banner area of the ${$route.meta.nameAll} page; this area has one image; please use the tab key to navigate through the content.`"
+    <div
+      class="ban_wrapper"
+      data-aria-viewport-area
+      tabindex="0"
+      aria-label
+      :aria-description="`You've reached the banner area of the ${$route.meta.nameAll} page; this area has one image; please use the tab key to navigate through the content.`"
     >
-      <div class="ban aria-theme-independent" tabindex="0" aria-label="Image" 
+      <div
+        class="ban aria-theme-independent"
+        tabindex="0"
+        aria-label="Image"
         aria-description="Visit"
       />
     </div>
-    <div class="nav_2" data-aria-viewport-area tabindex="0"
-      aria-label aria-description="You've reached the secondary menu under the Visit section. This menu contains seven options. To browse the content, please use the tab key."
+    <div
+      class="nav_2"
+      data-aria-viewport-area
+      tabindex="0"
+      aria-label
+      aria-description="You've reached the secondary menu under the Visit section. This menu contains seven options. To browse the content, please use the tab key."
     >
       <ul>
         <li
@@ -24,39 +35,48 @@
           aria-label="Link"
           :aria-description="item.name"
         >
-          <img :src="require(`@/assets/images/Visit/${item.img}`)" alt="" />
+          <div class="imgBox">
+            <img :src="require(`@/assets/images/Visit/${item.img}`)" alt="" />
+          </div>
           <p
-            :class="{'aria-inverse-theme': $route.meta.nameAll === item.name,}"
+            :class="{ 'aria-inverse-theme': $route.meta.nameAll === item.name }"
           >
             {{ item.name }}
           </p>
         </li>
       </ul>
     </div>
-    <div class="pos" data-aria-viewport-area tabindex="0"
-       aria-label aria-description="You've reached the path area; this area contains three URLs; please use the tab key to go through the content."
+    <div
+      class="pos"
+      data-aria-viewport-area
+      tabindex="0"
+      aria-label
+      aria-description="You've reached the path area; this area contains three URLs; please use the tab key to go through the content."
     >
       <span class="pos1">Your Position:&nbsp;</span>
-      <Router-link to="/Layout/Home"
+      <Router-link
+        to="/Layout/Home"
         replace
         tabindex="0"
         aria-description="Home"
       >
         Home>
       </Router-link>
-      <Router-link to="/Layout/Visit"
+      <Router-link
+        to="/Layout/Visit"
         replace
         tabindex="0"
         aria-description="Visit"
       >
         Visit>
       </Router-link>
-      <Router-link to=""
+      <Router-link
+        to=""
         replace
         tabindex="0"
         :aria-description="$route.meta.nameAll"
       >
-        {{$route.meta.nameAll}}>
+        {{ $route.meta.nameAll }}>
       </Router-link>
     </div>
     <!-- 二级嵌套路由 -->
@@ -72,13 +92,25 @@ export default {
     //这里存放数据
     return {
       topLi: [
-        { name: "Hours, Direction & Admission", img: "m-9.png", path: "/Layout/Visit/1" },
+        {
+          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: "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" },
+        {
+          name: "Visitor Guidelines",
+          img: "m-15.png",
+          path: "/Layout/Visit/7",
+        },
       ],
     };
   },
@@ -88,9 +120,9 @@ export default {
   watch: {},
   //方法集合
   methods: {
-    skip(url){
+    skip(url) {
       this.$router.push(url).catch(() => {});
-    }
+    },
   },
   //生命周期 - 创建完成（可以访问当前this实例）
   created() {},
@@ -115,45 +147,61 @@ export default {
     height: 300px;
   }
   .nav_2 {
+    position: relative;
+    top: -15px;
     width: 100%;
-    padding-bottom: 8px;
-    background: url("../../assets/images/Visit/bg_3.png") left bottom repeat-x
-      #f1f1f1;
     overflow: hidden;
     zoom: 1;
     & > ul {
+      background-color: #fff;
+      padding-top: 5px;
+      width: 1300px;
+      padding: 5px 60px;
       display: flex;
-      width: 1180px;
       margin: 0 auto;
+      border-radius: 5px;
       & > li {
-        background: #f1f1f1;
         cursor: pointer;
         width: 168px;
         height: 108px;
         text-align: center;
-        & > img {
-          margin-top: 25px;
+        .imgBox {
+          width: 50px;
+          height: 50px;
+          border-radius: 50%;
+          overflow: hidden;
+          background-color: black;
+          margin: 10px auto;
+          & > img {
+            width: 50px;
+            height: 50px;
+          }
         }
         & > p {
           margin-top: 5px;
           font-size: 14px;
           line-height: 18px;
+          color: black;
         }
       }
       .cur {
-        background: url("../../assets/images/Visit/bg_1.jpg") center top
-          no-repeat #f1f1f1;
+        .imgBox {
+          background-color: #cd1425;
+        }
+        & > p {
+          color: #cd1425;
+        }
       }
     }
   }
-  .pos{
+  .pos {
     height: 28px;
     line-height: 28px;
     font-size: 12px;
     margin: 0 auto 10px auto;
     width: 1180px;
-    .pos1{
-     color: #c20e11;
+    .pos1 {
+      color: #c20e11;
     }
   }
 }

web/src/views/layout/index.vue

@@ -616,7 +616,8 @@ export default {
   font-size: 14px;
   color: #fff;
   line-height: 45px;
-  background: url(../../assets/images/footer_bg.png) center top;
+  // background: url(../../assets/images/footer_bg.png) center top;
+  background-color: #0a0a0a;
   div {
     .router-link {
       color: inherit;