up

webM/src/assets/base.css

@@ -16,7 +16,9 @@
     padding: 0;
     box-sizing: border-box;
 }
-
+img{
+    vertical-align: top;
+}
 p {
     line-height: 24px;
 }

webM/src/router/index.js

@@ -15,14 +15,30 @@ const routes = [
         path: '/Layout/Home',
         name: 'Home',
         component: () => import('../views/Home/index.vue'),
-        meta: { myTitle: 'Capital Museum.China',topColor:'#74120b' },
+        meta: { myTitle: 'Capital Museum.China', topColor: '#74120b' },
       },
       // Visit页面
       {
         path: '/Layout/Visit',
         name: 'Visit',
         component: () => import('../views/Visit/index.vue'),
-        meta: { myTitle: 'Visit' },
+        meta: { myTitle: 'Visit', topColor: '#c3ac8d' },
+        redirect: { name: 'Visit1' },
+        children: [
+          {
+            path: '/Layout/Visit/1',
+            name: 'Visit1',
+            component: () => import('../views/Visit/Visit1.vue'),
+            meta: { myTitle: 'Visit', sonName: 'Hours, Direction & Admission',topColor: '#c3ac8d' },
+          },
+          {
+            path: '/Layout/Visit/2',
+            name: 'Visit2',
+            component: () => import('../views/Visit/Visit2.vue'),
+            meta: { myTitle: 'Visit', sonName: 'Reservation',topColor: '#c3ac8d' },
+          },
+
+        ]
       },
     ]
   }
@@ -43,8 +59,8 @@ router.beforeEach((to, from, next) => {
 
 // 全局后置钩子，设置title
 router.afterEach(to => {
-	// 设置title
-	document.title = to.meta.myTitle;
+  // 设置title
+  document.title = to.meta.myTitle;
 })
 
 

webM/src/views/Home/index.vue

@@ -1,49 +1,219 @@
 <template>
-<div class='Home'>
-  <h1 v-for="i in 20" :key="i">Home</h1>
-</div>
+  <div class="Home">
+    <div class="one">
+      <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
+        <van-swipe-item v-for="item in topImg" :key="item.id">
+          <img class="topImg" :src="require(`@/assets/img/Layout/banner${item.id}.png`)" alt="">
+        </van-swipe-item>
+      </van-swipe>
+    </div>
+    <div class="main">
+      <div class="tow">
+        <div class="towTop">
+          <img src="../../assets/img/Layout/title.png" alt="" />
+          <h3>Visit Info.</h3>
+        </div>
+        <div class="towTxt">
+          <h3>Opening Hours 09:00-17:00</h3>
+          <p>No admission after 16:00 <br />Closed on Monday</p>
+        </div>
+        <div class="towTxt">
+          <h3>Phone</h3>
+          <p>+86 (10) 63370491</p>
+        </div>
+        <ul class="row">
+          <li v-for="item in vData" :key="item.id">
+            <img :src="require(`@/assets/img/Layout/v${item.id}.png`)" alt="" />
+            <p>{{ item.name }}</p>
+          </li>
+        </ul>
+      </div>
+      <div class="three">
+        <div class="towTop">
+          <img src="../../assets/img/Layout/title.png" alt="" />
+          <h3>Partners & Connections</h3>
+        </div>
+        <ul class="row">
+          <li v-for="(item, index) in link" :key="index">
+            <a :href="item" target="_blank">
+              <img
+                :src="require(`@/assets/img/Layout/link${index + 1}.jpg`)"
+                alt=""
+              />
+            </a>
+          </li>
+        </ul>
+        <div class="more">See More</div>
+      </div>
+    </div>
+  </div>
 </template>
 
 <script>
 export default {
-name:'Home',
-components: {},
-data() {
-//这里存放数据
-return {
-
+  name: "Home",
+  components: {},
+  data() {
+    //这里存放数据
+    return {
+      topImg:[
+        {id:1,path:''},
+        {id:2,path:''},
+        {id:3,path:''},
+        {id:4,path:''},
+      ],
+      vData: [
+        { id: 1, name: "Hours, Direction & Admission", path: "" },
+        { id: 2, name: "Floor Plans", path: "" },
+        { id: 3, name: "Audio Guide & Tour", path: "" },
+        { id: 4, name: "Accessibility", path: "" },
+        { id: 5, name: "Café & Shop", path: "" },
+        { id: 6, name: "Visitor Guidelines", path: "" },
+      ],
+      link: [
+        "http://www.edo-tokyo-museum.or.jp/en/",
+        "https://en.shm.ru/",
+        "https://www.rom.on.ca/en",
+        "https://museum.seoul.go.kr/eng/index.do",
+        "https://museumsvictoria.com.au/",
+        "https://www.vmfa.museum/",
+      ],
+    };
+  },
+  //监听属性 类似于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{
-  h1{
-    font-size: 30px;
+.Home {
+  width: 100%;
+  .one {
+    width: 100%;
+    .my-swipe{
+      width: 100%;
+      .topImg{
+        width: 100%;
+      }
+    }
+  }
+  .main {
+    padding: 0 15px;
+    padding-bottom: 40px;
+    background: url("../../assets/img/Layout/bg.png");
+    background-size: 100% 100%;
+    .towTop {
+      display: flex;
+      align-items: center;
+      margin-bottom: 24px;
+      & > img {
+        width: 41px;
+        height: 29px;
+        margin-right: 20px;
+      }
+      & > h3 {
+        color: #c1aa7b;
+        font-size: 22px;
+      }
+    }
+    .tow {
+      padding: 40px 0;
+      border-bottom: 1px solid #ccc;
+      .towTxt {
+        padding: 0 0px 0 61px;
+        margin-bottom: 24px;
+        & > h3 {
+          font-weight: 400;
+          color: #bc1c24;
+          font-size: 18px;
+          margin-bottom: 5px;
+        }
+        & > p {
+          color: #6a6a6a;
+          font-size: 14px;
+          line-height: 16px;
+        }
+      }
+      .row {
+        display: flex;
+        flex-wrap: wrap;
+        justify-content: space-between;
+        & > li {
+          padding-top: 5px;
+          background: url("../../assets/img/Layout/frame.png");
+          background-size: 100% 100%;
+          width: 161px;
+          height: 70px;
+          text-align: center;
+          margin-bottom: 10px;
+          color: #c1aa7b;
+          &:nth-of-type(1) {
+            color: #bc1c24;
+          }
+          & > p {
+            font-size: 12px;
+            line-height: 12px;
+          }
+        }
+      }
+    }
+    .three {
+      border-bottom: 1px solid #ccc;
+      padding: 40px 0;
+      .row {
+        display: flex;
+        flex-wrap: wrap;
+        justify-content: space-between;
+        & > li {
+          width: 168px;
+          height: 62px;
+          margin-bottom: 10px;
+          & > a {
+            display: block;
+            width: 100%;
+            height: 100%;
+            & > img {
+              width: 100%;
+            }
+          }
+        }
+      }
+      .more {
+        margin: 20px auto 0;
+        width: 130px;
+        height: 40px;
+        background: url("../../assets/img/Layout/frame.png");
+        background-size: 100% 100%;
+        color: #c1aa7b;
+        line-height: 40px;
+        text-align: center;
+      }
+    }
+  }
+}
+@media screen and (max-width: 370px) {
+  .main {
+    padding: 0 8px 40px !important;
+  }
+  .row {
+    display: block !important;
+    & > li {
+      margin: 0 auto 10px !important;
+    }
   }
 }
-
 </style>

webM/src/views/Layout/index.vue

@@ -3,27 +3,80 @@
     <!-- 顶部top -->
     <div class="top" :style="`background-color:${$route.meta.topColor}`">
       <div class="left">
-        <img src="@/assets/img/Layout/mean.png" alt="" @click="searchPage=true"/>
+        <img
+          src="@/assets/img/Layout/mean.png"
+          alt=""
+          @click="meanPage = true"
+        />
       </div>
       <div class="right">
-        <img src="@/assets/img/Layout/logo.png" alt="" />
+        <img
+          src="@/assets/img/Layout/logo.png"
+          alt=""
+          @click="$router.push('/').catch(() => {})"
+        />
         <img src="@/assets/img/Layout/zhong.png" alt="" @click="toZhong" />
-        <img src="@/assets/img/Layout/search.png" alt="" />
+        <img src="@/assets/img/Layout/search.png" alt="" @click="searcShow=true"/>
       </div>
     </div>
     <!-- 子页面 -->
     <Router-view />
-    <!-- 点击搜索 -->
-    <div class="searchPage" v-show="searchPage">
+    <!-- 点击菜单 -->
+    <div class="meanPage" v-show="meanPage">
       <div class="conten">
         <div class="searchTop">
-          <div class="back"><van-icon name="arrow-left" @click="searchPage=false"/></div>
-          <img src="@/assets/img/Layout/logo2.png" alt="" />
+          <div class="back">
+            <van-icon name="arrow-left" @click="meanPage = false" />
+          </div>
+          <img
+            src="@/assets/img/Layout/logo2.png"
+            alt=""
+            @click="$router.push('/').catch(() => {})"
+          />
           <img src="@/assets/img/Layout/zhong2.png" alt="" @click="toZhong" />
-          <img src="@/assets/img/Layout/search2.png" alt="" />
+          <img src="@/assets/img/Layout/search2.png" alt="" @click="searcShow=true"/>
+        </div>
+        <div class="rowAll">
+          <div
+            :class="{
+              active: index === 4 || index === 6,
+              accOne: $route.meta.myTitle === item.acc,
+            }"
+            @click="menaSonFu(index)"
+            class="row"
+            v-for="(item, index) in menaData"
+            :key="index"
+          >
+            <span>{{ item.name }}</span>
+            <template
+              v-if="menaSon === index || $route.meta.myTitle === item.acc"
+            >
+              <div
+                class="rowSon"
+                v-for="(val, valInd) in item.son"
+                :key="valInd"
+                :class="{ acc: menaInd === val.path }"
+                @click="skip(val.path)"
+              >
+                {{ val.name }}
+              </div>
+            </template>
+          </div>
+        </div>
+        <div class="erwei">
+          <img src="@/assets/img/Layout/erwei1.png" alt="" />
+          <img src="@/assets/img/Layout/erwei2.png" alt="" />
         </div>
       </div>
     </div>
+    <!-- 点击搜索 -->
+    <div class="searchBox" v-if="searcShow">
+      <div class="searcTop" @keyup.enter="searcBtn">
+        <div class="inco" @click="searcBtn"></div>
+        <input type="text" v-model="txt" placeholder="search......" />
+        <div class="Cancel" @click="searcShow=false">Cancel</div>
+      </div>
+    </div>
     <!-- 回到顶部 -->
     <div class="toTop" v-show="srocllShow" @click="toTop">
       <van-icon name="back-top" />
@@ -59,16 +112,120 @@ export default {
   data() {
     //这里存放数据
     return {
+      // 搜索的变量
+      searcShow: false,
+      txt: "",
+      // 控制二级菜单的高亮
+      menaInd: null,
+      // 控制二级菜单的显示
+      menaSon: null,
       srocllShow: false,
-      searchPage: false,
+      meanPage: true,
+      menaData: [
+        {
+          acc: "Visit",
+          name: "Visit",
+          path: "",
+          son: [
+            { name: "Hours, Direction & Admission", path: "/Layout/Visit/1" },
+            { name: "Reservation", path: "/Layout/Visit/2" },
+            { name: "Floor Plans", path: "/Layout/Visit/3" },
+            { name: "Audio Guide & Tour", path: "/Layout/Visit/4" },
+            { name: "Accessibility", path: "/Layout/Visit/5" },
+            { name: "Café & Shop", path: "/Layout/Visit/6" },
+            { name: "Visitor Guidelines", path: "/Layout/Visit/7" },
+          ],
+        },
+        {
+          name: "Exhibitions",
+          path: "",
+          son: [
+            { name: "Current Exhibitions", path: "" },
+            { name: "Permanent Exhibitions", path: "" },
+            { name: "Past Exhibitions", path: "" },
+            { name: "Overseas Exhibitions", path: "" },
+          ],
+        },
+        {
+          name: "Collections",
+          path: "",
+          son: [
+            { name: "Bronzes", path: "" },
+            { name: "Ceramics", path: "" },
+            { name: "Buddhist Statues", path: "" },
+            { name: "Jadewares", path: "" },
+            { name: "Calligraphies", path: "" },
+            { name: "Paintings", path: "" },
+            { name: "Gold & Silverwares", path: "" },
+            { name: "Coins & Banknotes", path: "" },
+            { name: "Brocades & Embroideries", path: "" },
+            { name: "Cultural Supplies", path: "" },
+            { name: "Miscellaneous", path: "" },
+          ],
+        },
+        {
+          name: "Learn & Engage",
+          path: "",
+          son: [
+            { name: "For Students", path: "" },
+            { name: "For Adults", path: "" },
+            { name: "For Families & Children", path: "" },
+          ],
+        },
+        {
+          name: "Publications",
+          path: "",
+          son: [
+            { name: "Magazines", path: "" },
+            { name: "Exhibition Catalogues", path: "" },
+            { name: "Research", path: "" },
+          ],
+        },
+        {
+          name: "Join & Support",
+          path: "",
+          son: [
+            { name: "Ways to Volunteer", path: "" },
+            { name: "Ways to Give", path: "" },
+          ],
+        },
+        {
+          name: "About",
+          path: "",
+          son: [
+            { name: "From the Director", path: "" },
+            { name: "History", path: "" },
+            { name: "Partners & Connections", path: "" },
+            { name: "Contact", path: "" },
+          ],
+        },
+      ],
     };
   },
   //监听属性 类似于data概念
   computed: {},
   //监控data中的数据变化
-  watch: {},
+  watch: {
+    $route() {
+      this.menaInd = this.$route.path;
+      this.meanPage = false;
+    },
+    searcShow(){
+      this.txt=''
+    }
+  },
   //方法集合
   methods: {
+    searcBtn(){
+      console.log('搜索~');
+    },
+    menaSonFu(index) {
+      if (this.menaSon === index) this.menaSon = null;
+      else this.menaSon = index;
+    },
+    skip(path) {
+      this.$router.push(path).catch(() => {});
+    },
     toTop() {
       let dom = this.$refs.Layout;
       dom.scrollTo({ top: 0, behavior: "smooth" });
@@ -84,7 +241,10 @@ export default {
     },
   },
   //生命周期 - 创建完成（可以访问当前this实例）
-  created() {},
+  created() {
+    this.menaInd = this.$route.path;
+    this.meanPage = false;
+  },
   //生命周期 - 挂载完成（可以访问DOM元素）
   mounted() {},
   beforeCreate() {}, //生命周期 - 创建之前
@@ -109,6 +269,7 @@ export default {
   height: 100vh;
   overflow-y: auto;
   .top {
+    z-index: 990;
     display: flex;
     justify-content: space-between;
     padding: 0 10px;
@@ -143,21 +304,22 @@ export default {
       }
     }
   }
+  .erwei {
+    margin-top: 30px;
+    margin-bottom: 20px;
+    display: flex;
+    padding: 0 10px;
+    justify-content: space-between;
+    & > img {
+      width: 40%;
+    }
+  }
+
   .bottom {
     padding: 20px;
     padding-bottom: 0;
     width: 100%;
     background-color: #c1aa7b;
-    .erwei {
-      margin-top: 30px;
-      margin-bottom: 20px;
-      display: flex;
-      padding: 0 10px;
-      justify-content: space-between;
-      & > img {
-        width: 40%;
-      }
-    }
     .txt {
       padding: 0 10px 20px;
       font-size: 14px;
@@ -197,17 +359,61 @@ export default {
     bottom: 200px;
   }
   // 搜索页面
-  .searchPage {
+  .searchBox {
+    padding: 10px;
     position: fixed;
     top: 0;
     left: 0;
-    z-index: 999;
+    z-index: 992;
     width: 100vw;
     height: 100vh;
+    background-color: #f9f8f5;
+    .searcTop {
+      position: relative;
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+      height: 40px;
+      .inco {
+        position: absolute;
+        z-index: 10;
+        content: "";
+        display: block;
+        position: absolute;
+        top: 9px;
+        left: 10px;
+        background: url("../../assets/img/Layout/search2.png");
+        background-size: 20px, 20px;
+        width: 20px;
+        height: 20px;
+      }
+      & > input {
+        width: 80%;
+        height: 38px;
+        border-radius: 19px;
+        padding-left: 40px;
+        border: 1px solid #d2b986;
+        background-color: transparent;
+      }
+      .Cancel {
+        font-weight: 700;
+        min-width: 50px;
+        width: 15%;
+      }
+    }
+  }
+  // 菜单页面
+  .meanPage {
+    position: fixed;
+    top: 0;
+    left: 0;
+    z-index: 991;
+    width: 100vw;
+    height: 100vh;
+    overflow-y: auto;
     background-color: rgba(255, 255, 255, 0.9);
     .conten {
       width: 90%;
-      height: 100%;
       background-color: #f6f4f1;
       .searchTop {
         width: 100%;
@@ -215,7 +421,7 @@ export default {
         align-items: center;
         justify-content: space-around;
         height: 50px;
-        .back{
+        .back {
           margin-right: 15px;
           font-size: 28px;
         }
@@ -229,6 +435,42 @@ export default {
           }
         }
       }
+      .rowAll {
+        margin-top: 20px;
+        padding: 0 30px;
+        .row {
+          font-weight: 700;
+          color: #c1aa7b;
+          font-size: 20px;
+          padding-bottom: 20px;
+          .rowSon {
+            padding-left: 30px;
+            font-size: 16px;
+            margin-top: 20px;
+            color: #c1aa7b;
+            font-weight: 400;
+          }
+          .acc {
+            color: #bc1c24;
+            background: url("../../assets/img/Layout/chosen.png") no-repeat left
+              top;
+            background-size: 22px 18px;
+          }
+        }
+        .active {
+          border-bottom: 1px solid #c1aa7b;
+          margin-bottom: 20px;
+        }
+        .accOne {
+          color: #bc1c24;
+        }
+      }
+    }
+    .erwei {
+      margin-bottom: 0;
+      padding-bottom: 20px;
+      padding-left: 30px;
+      padding-right: 30px;
     }
   }
 }

webM/src/views/Visit/Visit1.vue

@@ -0,0 +1,43 @@
+<template>
+<div class='Visit1'>Visit1</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>
+//@import url(); 引入公共css类
+
+</style>

webM/src/views/Visit/Visit2.vue

@@ -0,0 +1,43 @@
+<template>
+<div class='Visit2'>Visit2</div>
+</template>
+
+<script>
+export default {
+name:'Visit2',
+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>
+//@import url(); 引入公共css类
+
+</style>

webM/src/views/Visit/index.vue

@@ -1,43 +1,108 @@
 <template>
-<div class='Visit'>Visit</div>
+  <div class="Visit">
+    <div class="ban">
+      <img src="@/assets/img/Visit/ban.png" alt="" />
+    </div>
+    <div class="main">
+      <div class="mainBox">
+        <div class="rowAll">
+          <div
+            @click="cutTab(item.path)"
+            class="row"
+            v-for="(item, index) in tabData"
+            :key="index"
+            :class="{ active: $route.meta.sonName === item.name }"
+          >
+            {{ item.name }}
+          </div>
+        </div>
+      </div>
+      <Router-view />
+    </div>
+  </div>
 </template>
 
 <script>
 export default {
-name:'Visit',
-components: {},
-data() {
-//这里存放数据
-return {
-
+  name: "Visit",
+  components: {},
+  data() {
+    //这里存放数据
+    return {
+      tabData: [
+        { name: "Hours, Direction & Admission", path: "/Layout/Visit/1" },
+        { name: "Reservation", path: "/Layout/Visit/2" },
+        { name: "Floor Plans", path: "/Layout/Visit/3" },
+        { name: "Audio Guide & Tour", path: "/Layout/Visit/4" },
+        { name: "Accessibility", path: "/Layout/Visit/5" },
+        { name: "Café & Shop", path: "/Layout/Visit/6" },
+        { name: "Visitor Guidelines", path: "/Layout/Visit/7" },
+      ],
+    };
+  },
+  //监听属性 类似于data概念
+  computed: {},
+  //监控data中的数据变化
+  watch: {},
+  //方法集合
+  methods: {
+    cutTab(path){
+      this.$router.push(path).catch(() => {});
+    }
+  },
+  //生命周期 - 创建完成（可以访问当前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>
-//@import url(); 引入公共css类
+::-webkit-scrollbar {
+  height: 0;
+  width: 0;
+  color: transparent;
+}
 
+.Visit {
+  width: 100%;
+  .ban {
+    width: 100%;
+    & > img {
+      width: 100%;
+    }
+  }
+  .main {
+    background: url("../../assets/img/Visit/bg.png");
+    background-size: 100%, 100%;
+    .mainBox {
+      width: 100%;
+      overflow-x: auto;
+      .rowAll {
+        width: 1045px;
+        padding: 20px;
+        background-color: #f7f6f3;
+        .row {
+          display: inline-block;
+          font-size: 16px;
+          height: 30px;
+          line-height: 30px;
+          margin-right: 10px;
+          padding: 0 8px;
+        }
+        .active {
+          background-color: #c1aa7b;
+          border-radius: 15px;
+          color: #fff;
+        }
+      }
+    }
+  }
+}
 </style>