初步完成静态Visit

web/src/assets/css/base.css

@@ -105,6 +105,8 @@ section {
 
 body {
     line-height: 1;
+    background-color: #f1f1f1;
+    font-family: Arial;
 }
 
 ol,

web/src/router/index.js

@@ -35,6 +35,36 @@ const routes = [
             component: () => import('../views/Visit/Visit2.vue'),
             meta: { myName: 'Visit',nameAll:'Reservation' },
           },
+          {
+            path: '/Layout/Visit/3',
+            name: 'Visit3',
+            component: () => import('../views/Visit/Visit3.vue'),
+            meta: { myName: 'Visit',nameAll:'Floor Plans' },
+          },
+          {
+            path: '/Layout/Visit/4',
+            name: 'Visit4',
+            component: () => import('../views/Visit/Visit4.vue'),
+            meta: { myName: 'Visit',nameAll:'Audio Guide & Tour' },
+          },
+          {
+            path: '/Layout/Visit/5',
+            name: 'Visit5',
+            component: () => import('../views/Visit/Visit5.vue'),
+            meta: { myName: 'Visit',nameAll:'Accessibility' },
+          },
+          {
+            path: '/Layout/Visit/6',
+            name: 'Visit6',
+            component: () => import('../views/Visit/Visit6.vue'),
+            meta: { myName: 'Visit',nameAll:'Café & Shop' },
+          },
+          {
+            path: '/Layout/Visit/7',
+            name: 'Visit7',
+            component: () => import('../views/Visit/Visit7.vue'),
+            meta: { myName: 'Visit',nameAll:'Visitor Guidelines' },
+          },
         ]
       },
     ]

web/src/views/Visit/Visit2.vue

@@ -11,7 +11,529 @@
       </div>
     </div>
     <div class="mm1">
-      <div class="mm1l"></div>
+      <div class="mm1l">
+        <p>
+          <img src="../../assets/images/Visit/pLeft.jpg" alt="" />
+          <span>&nbsp;<strong>How to Make a Reservation?</strong></span>
+        </p>
+        <p><br /></p>
+        <p>Telephone Reservation:</p>
+        <p>•&nbsp; Individual visitors:&nbsp;<span style="color: rgb(255, 0, 0); font-family: arial, helvetica, sans-serif; font-size: 14px;">+86 (10) 63393339</span></p>
+        <p>•&nbsp; Group visitors:&nbsp;<span style="font-size: 14px; color: rgb(255, 0, 0);">+86 (10) 63370458</span></p>
+        <p>From 9:00 to 17:00 every day.</p>
+        <p><br /></p>
+      </div>
+      <div class="mm1r">
+        <p>
+          Either system will issue a confirmation number. Visitors will be
+          required to show the number and valid ID in order to receive free
+          entrance tickets on the day of their visit.
+        </p>
+        <h2>Online Reservation</h2>
+      </div>
+    </div>
+    <div class="sidebar">
+      <ul>
+        <!-- 第一个内容 -->
+        <li class="title">
+          <span>Guidelines for Reservations</span>
+          <span
+            class="arrow"
+            :class="{ 'arrow-up': flag === 'one' }"
+            @click="cutFlag('one')"
+          ></span>
+          <div class="in-sidebar" :class="{ inSidebarOne: flag === 'one' }">
+            <p style="text-align: center"><br /></p>
+            <p><img src="../../assets/images/Visit/pp1.jpg" alt="" /></p>
+            <p><br /></p>
+            <p>
+              <span><strong>Ways of Reservation</strong></span>
+            </p>
+            <p><br /></p>
+            <p>
+              <span
+                style="
+                  font-family: arial, helvetica, sans-serif;
+                  font-size: 14px;
+                "
+                >There are 3,600 daily personal booking places, available
+                through website (3000 places) and telephone (600 places). The
+                website</span
+              >
+              <span
+                style="
+                  font-family: arial, helvetica, sans-serif;
+                  font-size: 14px;
+                  text-decoration: none;
+                "
+                ><a
+                  href="/"
+                  style="color: rgb(255, 0, 0)"
+                  >首页（地址待定）</a
+                ></span
+              >
+              <span
+                style="
+                  font-family: arial, helvetica, sans-serif;
+                  font-size: 14px;
+                "
+                >offers&nbsp;24-hour&nbsp;</span
+              >
+            </p>
+            <p>
+              <span
+                style="
+                  font-family: arial, helvetica, sans-serif;
+                  font-size: 14px;
+                "
+                >service, and the&nbsp;telephone</span
+              >
+              <span
+                style="
+                  font-family: arial, helvetica, sans-serif;
+                  font-size: 14px;
+                  color: rgb(255, 0, 0);
+                "
+                >+86 (10) 63393339</span
+              >
+              <span
+                style="
+                  font-family: arial, helvetica, sans-serif;
+                  font-size: 14px;
+                "
+                >service is available from 09:00 to 17:00. One person is only
+                allowed to book one ticket.</span
+              >
+            </p>
+            <p><br /></p>
+            <p>
+              <span
+                style="
+                  font-family: arial, helvetica, sans-serif;
+                  font-size: 14px;
+                "
+                >For group reservation, we offer 400 tickets a day. Please
+                call<span
+                  style="
+                    font-size: 14px;
+                    font-family: arial, helvetica, sans-serif;
+                    color: rgb(255, 0, 0);
+                  "
+                  >+86 (10) 63370458&nbsp;&nbsp;</span
+                >between 09:00 to 17:00. Identity information of the group
+                leader is required.</span
+              >
+            </p>
+            <p><br /></p>
+            <p>
+              <span
+                style="
+                  font-family: arial, helvetica, sans-serif;
+                  font-size: 14px;
+                "
+                >Reservation should be made at least one day in advance, and at
+                most seven days in advance.</span
+              >
+            </p>
+            <p><br /></p>
+            <table data-sort="sortDisabled">
+              <tbody>
+                <tr class="firstRow">
+                  <td
+                    valign="top"
+                    colspan="2"
+                    rowspan="1"
+                    style="word-break: break-all"
+                  >
+                    <p style="text-align: center; height: 1px">
+                      <img
+                        src="../../assets/images/Visit/pp4.jpg"
+                        style="max-width: 100%"
+                      />
+                    </p>
+                  </td>
+                </tr>
+                <tr>
+                  <td width="420" valign="top" style="word-break: break-all">
+                    <p style="text-align: center">
+                      <img
+                        src="../../assets/images/Visit/pp2.jpg"
+                        style="max-width: 100%"
+                      />
+                    </p>
+                  </td>
+                  <td width="420" valign="top" style="word-break: break-all">
+                    <p>
+                      <span style="font-family: arial, helvetica, sans-serif"
+                        ><strong>&nbsp; &nbsp;&nbsp;</strong></span
+                      >
+                    </p>
+                    <p>
+                      <strong style="font-family: arial, helvetica, sans-serif"
+                        ><span style="font-size: 18px"
+                          >Way to Get Ticket</span
+                        ></strong
+                      >
+                    </p>
+                    <p><br /></p>
+                    <p>
+                      <span
+                        style="
+                          font-size: 14px;
+                          font-family: arial, helvetica, sans-serif;
+                        "
+                        >For personal visitors, please obtain the ticket at the
+                        service center at the north door by&nbsp;</span
+                      >
+                    </p>
+                    <p>
+                      <span
+                        style="
+                          font-size: 14px;
+                          font-family: arial, helvetica, sans-serif;
+                        "
+                        >showing your booking number and the ID card used when
+                        the booking was made.</span
+                      >
+                    </p>
+                    <p><br /></p>
+                    <p>
+                      <span
+                        style="
+                          font-size: 14px;
+                          font-family: arial, helvetica, sans-serif;
+                        "
+                        >For group visitors, the leader can obtain the ticket at
+                        the east door of the ground floor&nbsp;</span
+                      >
+                    </p>
+                    <p>
+                      <span
+                        style="
+                          font-size: 14px;
+                          font-family: arial, helvetica, sans-serif;
+                        "
+                        >with valid documents and introductory letters.</span
+                      >
+                    </p>
+                    <p><br /></p>
+                  </td>
+                </tr>
+              </tbody>
+            </table>
+            <table data-sort="sortDisabled">
+              <tbody>
+                <tr class="firstRow">
+                  <td
+                    valign="top"
+                    colspan="2"
+                    rowspan="1"
+                    style="word-break: break-all"
+                  >
+                    <p style="text-align: center; height: 1px">
+                      <img
+                        src="../../assets/images/Visit/pp4.jpg"
+                        style="max-width: 100%"
+                      />
+                    </p>
+                  </td>
+                </tr>
+                <tr>
+                  <td width="420" valign="top" style="word-break: break-all">
+                    <p>
+                      <strong
+                        style="
+                          font-family: arial, helvetica, sans-serif;
+                          font-size: 18px;
+                        "
+                        ><br
+                      /></strong>
+                    </p>
+                    <p>
+                      <strong
+                        style="
+                          font-family: arial, helvetica, sans-serif;
+                          font-size: 18px;
+                        "
+                        >&nbsp; Entrance Time</strong
+                      ><br />
+                    </p>
+                    <p><br /></p>
+                    <p>
+                      <span
+                        style="
+                          font-family: arial, helvetica, sans-serif;
+                          font-size: 14px;
+                        "
+                        >From 09:00-16:00, Tuesday to Sunday.&nbsp;</span
+                      >
+                    </p>
+                    <p>
+                      <span
+                        style="
+                          font-family: arial, helvetica, sans-serif;
+                          font-size: 14px;
+                        "
+                        >The museum is closed every Monday, except for
+                        holidays.&nbsp;</span
+                      >
+                    </p>
+                    <p>
+                      <span
+                        style="
+                          font-family: arial, helvetica, sans-serif;
+                          font-size: 14px;
+                        "
+                        >Please enter the museum before 16:00.</span
+                      >
+                    </p>
+                  </td>
+                  <td width="420" valign="top" style="word-break: break-all">
+                    <p style="text-align: center">
+                      <img
+                        src="../../assets/images/Visit/pp3.jpg"
+                        style="max-width: 100%"
+                      />
+                    </p>
+                  </td>
+                </tr>
+              </tbody>
+            </table>
+            <p>
+              <span
+                style="
+                  font-family: arial, helvetica, sans-serif;
+                  font-size: 18px;
+                "
+                ><strong>Special Notices</strong></span
+              >
+            </p>
+            <p><br /></p>
+            <p>
+              <span
+                style="
+                  font-family: arial, helvetica, sans-serif;
+                  font-size: 14px;
+                "
+                >1. One ticket is only for one person and the ticket is only
+                valid on the date printed.&nbsp;Please have the ticket checked
+                at the entrance.</span
+              >
+            </p>
+            <p>
+              <span
+                style="
+                  font-family: arial, helvetica, sans-serif;
+                  font-size: 14px;
+                "
+                >2. Senior citizens (above 60) and handicapped persons can enter
+                the exhibition with valid documents even without reservation.
+                Please ask museum personnel for help.</span
+              ><br />
+            </p>
+            <p>
+              <span
+                style="
+                  font-family: arial, helvetica, sans-serif;
+                  font-size: 14px;
+                "
+                >3. Space in the exhibition is limited, so museum may control
+                the visitor numbers at any time to ensure orderly and pleasant
+                viewing. Thanks for your understanding and&nbsp;</span
+              ><br />
+            </p>
+            <p>
+              <span
+                style="
+                  font-family: arial, helvetica, sans-serif;
+                  font-size: 14px;
+                "
+                >&nbsp; &nbsp; cooperation.</span
+              ><br />
+            </p>
+            <p>
+              <span
+                style="
+                  font-family: arial, helvetica, sans-serif;
+                  font-size: 14px;
+                "
+                >4. The exhibition lasts for three months. Please keep this in
+                mind when planning a visit.</span
+              ><br />
+            </p>
+            <p><br /></p>
+          </div>
+        </li>
+        <!-- 第二个内容 -->
+        <li class="title title2">
+          <span>Group Visit</span>
+          <span
+            class="arrow"
+            :class="{ 'arrow-up': flag === 'tow' }"
+            @click="cutFlag('tow')"
+          ></span>
+          <div class="in-sidebar" :class="{ inSidebarTow: flag === 'tow' }">
+            <table data-sort="sortDisabled">
+              <tbody>
+                <tr class="firstRow">
+                  <td
+                    valign="top"
+                    colspan="2"
+                    rowspan="1"
+                    style="word-break: break-all"
+                  >
+                    <p style="text-align: center">
+                      <img
+                        src="../../assets/images/Visit/pp4.jpg"
+                        style="max-width: 100%"
+                      />
+                    </p>
+                  </td>
+                </tr>
+                <tr>
+                  <td width="430" valign="top" style="word-break: break-all">
+                    <p><br /></p>
+                    <p>
+                      <span
+                        style="
+                          font-family: arial, helvetica, sans-serif;
+                          font-size: 14px;
+                        "
+                        >We encourage groups and travel agencies to make
+                        reservations by telephone.</span
+                      >
+                    </p>
+                    <p><br /></p>
+                    <p>
+                      <span
+                        style="
+                          font-family: arial, helvetica, sans-serif;
+                          font-size: 14px;
+                        "
+                        >Requirements: Name of the tour group, full name of the
+                        person making the reservation,&nbsp;</span
+                      >
+                    </p>
+                    <p>
+                      <span
+                        style="
+                          font-family: arial, helvetica, sans-serif;
+                          font-size: 14px;
+                        "
+                        >contact information and number of group members.</span
+                      >
+                    </p>
+                    <p><br /></p>
+                    <p>
+                      <span
+                        style="
+                          font-family: arial, helvetica, sans-serif;
+                          font-size: 14px;
+                        "
+                        >Telephone reservation (group visitors):
+                        <span
+                          style="
+                            font-size: 14px;
+                            font-family: arial, helvetica, sans-serif;
+                            color: rgb(255, 0, 0);
+                          "
+                          >+86 (10) 63370458&nbsp;</span
+                        ></span
+                      >
+                    </p>
+                    <p><br /><br /></p>
+                    <p>
+                      <span
+                        style="
+                          color: rgb(255, 0, 0);
+                          font-family: arial, helvetica, sans-serif;
+                          font-size: 14px;
+                        "
+                        ><br
+                      /></span>
+                    </p>
+                    <p style="text-align: center">
+                      <img
+                        src="../../assets/images/Visit/pp6.jpg"
+                        style="max-width: 100%"
+                      />
+                    </p>
+                  </td>
+                  <td width="430" valign="top" style="word-break: break-all">
+                    <p style="text-align: center"><br /></p>
+                    <p>
+                      <img
+                        src="../../assets/images/Visit/pp5.jpg"
+                        style="max-width: 100%"
+                      /><br />
+                    </p>
+                  </td>
+                </tr>
+              </tbody>
+            </table>
+            <p><br /></p>
+          </div>
+        </li>
+        <!-- 第三个内容 -->
+        <li class="title title3">
+          <span>Relevant Information</span>
+          <span
+            class="arrow"
+            :class="{ 'arrow-up': flag === 'three' }"
+            @click="cutFlag('three')"
+          ></span>
+          <div class="in-sidebar" :class="{ inSidebarThree: flag === 'three' }">
+            <p><br /></p>
+            <p>
+              <span
+                style="
+                  font-family: arial, helvetica, sans-serif;
+                  font-size: 14px;
+                "
+                >Ticket-reservation is subject to change when there is a large
+                museum event or a special opening ceremony for a new exhibition.
+                The Capital Museum will make a public&nbsp;</span
+              >
+            </p>
+            <p>
+              <span
+                style="
+                  font-family: arial, helvetica, sans-serif;
+                  font-size: 14px;
+                "
+                >announcement in advance. Please visit the official website or
+                inquire by telephone for detailed information.</span
+              >
+            </p>
+            <p><br /></p>
+            <p>
+              <span
+                style="
+                  font-family: arial, helvetica, sans-serif;
+                  font-size: 14px;
+                "
+                >Official website:
+                <span
+                  style="
+                    font-size: 14px;
+                    font-family: arial, helvetica, sans-serif;
+                    color: rgb(255, 0, 0);
+                  "
+                  >首页（地址待定）</span
+                >&nbsp; &nbsp; &nbsp; &nbsp;Phone:
+                <span
+                  style="
+                    font-size: 14px;
+                    font-family: arial, helvetica, sans-serif;
+                    color: rgb(255, 0, 0);
+                  "
+                  >+86 (10) 63370491</span
+                ></span
+              >
+            </p>
+          </div>
+        </li>
+      </ul>
     </div>
   </div>
 </template>
@@ -24,6 +546,8 @@ export default {
     //这里存放数据
     return {
       hintShow: false,
+      // 3个栏目的显示和隐藏
+      flag: null,
     };
   },
   //监听属性 类似于data概念
@@ -31,7 +555,12 @@ export default {
   //监控data中的数据变化
   watch: {},
   //方法集合
-  methods: {},
+  methods: {
+    cutFlag(val) {
+      if (this.flag && val === this.flag) this.flag = null;
+      else this.flag = val;
+    },
+  },
   //生命周期 - 创建完成（可以访问当前this实例）
   created() {},
   //生命周期 - 挂载完成（可以访问DOM元素）
@@ -47,6 +576,11 @@ export default {
 </script>
 <style lang='less' scoped>
 .Visit2 {
+  strong {
+    font-weight: 700;
+    font-size: 16px;
+  }
+
   .public {
     overflow: hidden;
     transition: all 0.3s;
@@ -83,6 +617,97 @@ export default {
       float: left;
       font-size: 18px;
       line-height: 28px;
+      & > p {
+        font-size: 14px;
+      }
+    }
+    .mm1r {
+      width: 590px;
+      float: right;
+      padding-top: 43px;
+      & > p {
+        padding: 15px;
+        font-size: 14px;
+        line-height: 28px;
+      }
+      & > h2 {
+        cursor: pointer;
+        clear: both;
+        background-color: #c90006;
+        text-align: center;
+        height: 30px;
+        line-height: 30px;
+        color: #fff;
+        font-weight: normal;
+      }
+    }
+  }
+  .sidebar {
+    img {
+      border: none;
+      vertical-align: top;
+      max-width: 100%;
+    }
+    width: 1180px;
+    font-family: Arial;
+    margin: auto;
+    color: #f4f4f4;
+    clear: both;
+    & > ul {
+      .title {
+        font-size: 24px;
+        line-height: 50px;
+        margin-bottom: 1px;
+        background: url("../../assets/images/Visit/m-28.jpg") no-repeat;
+        span {
+          margin-left: 10px;
+        }
+        .arrow {
+          float: right;
+          cursor: pointer;
+          width: 50px;
+          height: 50px;
+          background: url("../../assets/images/Visit/m-31.png") no-repeat center
+            left;
+        }
+        .arrow-up {
+          background: url("../../assets/images/Visit/m-32.png") no-repeat center
+            left;
+        }
+        div {
+          font-size: 18px;
+          line-height: 28px;
+          color: #000;
+        }
+        .in-sidebar {
+          height: 0px;
+          overflow: hidden;
+          transition: all 0.3s;
+          padding: 0 20px;
+          background-color: rgb(255, 255, 255);
+          display: block;
+        }
+        .inSidebarOne {
+          height: 1495px;
+        }
+        .firstRow {
+           p {
+            height: 1px;
+          }
+        }
+      }
+      .title2 {
+        background: url("../../assets/images/Visit/m-29.jpg") no-repeat;
+        .inSidebarTow {
+          height: 550px;
+        }
+      }
+      .title3 {
+        background: url("../../assets/images/Visit/m-30.jpg") no-repeat;
+        .inSidebarThree {
+          height: 170px;
+        }
+      }
     }
   }
 }

web/src/views/Visit/Visit3.vue

@@ -0,0 +1,89 @@
+<template>
+  <div class="Visit3">
+    <div class="conten">
+      <div class="box5">
+        <ul>
+          <li class="titleon" v-for="(item,index) in topData" :key="index" :class="{titleoff:index===topInd}" @mouseenter='topInd=index'>
+            {{item}}&nbsp;&nbsp;&nbsp;
+          </li>
+        </ul>
+      </div>
+      <div class="box1">
+        <div v-for="i in 7" :key="i">
+          <img :src="require(`@/assets/images/Floor/${i}.jpg`)" alt="" v-show="i===topInd+1"/>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  name: "Visit3",
+  components: {},
+  data() {
+    //这里存放数据
+    return {
+      topData:['B1','F1','F2','F3','F4','F5','F6'],
+      topInd:0
+    };
+  },
+  //监听属性 类似于data概念
+  computed: {},
+  //监控data中的数据变化
+  watch: {},
+  //方法集合
+  methods: {},
+  //生命周期 - 创建完成（可以访问当前this实例）
+  created() {},
+  //生命周期 - 挂载完成（可以访问DOM元素）
+  mounted() {},
+  beforeCreate() {}, //生命周期 - 创建之前
+  beforeMount() {}, //生命周期 - 挂载之前
+  beforeUpdate() {}, //生命周期 - 更新之前
+  updated() {}, //生命周期 - 更新之后
+  beforeDestroy() {}, //生命周期 - 销毁之前
+  destroyed() {}, //生命周期 - 销毁完成
+  activated() {}, //如果页面有keep-alive缓存功能，这个函数会触发
+};
+</script>
+<style lang='less' scoped>
+.conten {
+  width: 100%;
+  background-color: black;
+  height: 570px;
+  .box5 {
+    cursor: pointer;
+    width: 1200px;
+    padding: 15px 0 25px 0;
+    height: 62px;
+    margin: auto;
+    li {
+      color: #fff;
+      float: left;
+      width: 185px;
+      text-align: right;
+      font-size: 20px;
+      font-weight: bold;
+      &:nth-of-type(1){
+        width: 62px;
+      }
+    }
+    .titleon {
+      background: url('../../assets/images/Floor/m-22.jpg')
+        no-repeat right;
+      line-height: 62px;
+    }
+    .titleoff{
+      background: url('../../assets/images/Floor/m-23.jpg')
+        no-repeat right;
+    }
+  }
+  .box1{
+    margin: 50px auto 0px;
+    width: 1200px;
+    font-size: 18px;
+    line-height: 26px;
+  }
+}
+</style>

web/src/views/Visit/Visit4.vue

@@ -0,0 +1,99 @@
+<template>
+  <div class="Visit4">
+    <div class="conten">
+      <div class="row">
+        <div>
+          <h3>Audio Guide</h3>
+          <p>The museum offers free audio guide. Visitors can get the devices from the audio guide</p>
+          <p>cabinets with 200 RMB refundable deposit. The cabinets can be found at several locations</p>
+          <p>in the museum, such as the east of the main entrance. The service is available in Chinese</p>
+          <p>and English. For further questions, please visit the information desk for help.</p>
+        </div>
+        <div>
+          <img src="../../assets/images/Visit/Audio1.jpg" alt="">
+        </div>
+      </div>
+      <div class="row">
+        <div>
+          <img src="../../assets/images/Visit/Audio2.jpg" alt="">
+        </div>
+        <div class="blank">
+          <h3>Free Commentary Service</h3>
+          <p>Commentators provide free services on each open day (Tuesday to Sunday). Please check </p>
+          <p>the specific time and exhibition location in the museum on the day of your visit.</p>
+        </div>
+      </div>
+      <div class="row">
+        <div>
+          <h3>Volunteer Guide</h3>
+          <p>Our museum volunteers offer free explanations and help. </p>
+        </div>
+        <div>
+          <img src="../../assets/images/Visit/Audio3.jpg" alt="">
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  name: "Visit4",
+  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>
+.Visit4{
+  .conten{
+    color: #000;
+    width: 1200px;
+    font-size: 18px;
+    line-height: 26px;
+    margin: auto;
+    .row{
+      width: 866px;
+      display: flex;
+      &>div{
+        width: 50%;
+        &>h3{
+              padding-top: 30px;
+
+          font-size: 18px;
+          font-weight: 700;
+          margin-bottom: 20px;
+        }
+        &>p{
+          font-size: 14px;
+        }
+        &>img{
+          width: 100%;
+        }
+      }
+            .blank{
+        padding-left: 10px;
+      }
+    }
+  }
+}
+</style>

web/src/views/Visit/Visit5.vue

@@ -0,0 +1,104 @@
+<template>
+  <div class="Visit5">
+    <div class="conten">
+      <div class="row">
+        <div>
+          <h3>Facilities for the Handicapped</h3>
+          <p>Wheelchairs are available for visitors with special needs. Professional consultants and guides </p>
+          <p>are on hand to help. </p>
+          <br />
+          <p>In addition to professional commentators in the exhibition halls, 15 advanced self-service </p>
+          <p>screens and six special ones for people in wheelchairs have been installed in the exhibit </p>
+          <p>areas. Visitors can read and download data, or carry out interactive operations via these</p>
+          <p>screens. A total of 18 card-operated telephones, including six for those in wheelchairs,</p>
+          <p>have also been installed.</p>
+        </div>
+        <div>
+          <img src="../../assets/images/Visit/access1.jpg" alt="">
+        </div>
+      </div>
+      <div class="row">
+        <div>
+          <img src="../../assets/images/Visit/access2.jpg" alt="">
+        </div>
+        <div class="blank">
+          <h3>Nursery Room</h3>
+          <p>Nursery room is available on the 5th floor of the museum. Professional consultants</p>
+          <p>and guides are on hand to help. </p>
+        </div>
+      </div>
+      <div class="row">
+        <div>
+          <h3>Lockers</h3>
+          <p>Lockers are available on the 1st floor, the right-hand side of the north entrance. Professional </p>
+          <p>consultants and guides are on hand to help. </p>
+        </div>
+        <div>
+          <img src="../../assets/images/Visit/access3.jpg" alt="">
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  name: "Visit5",
+  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>
+.Visit5{
+  .conten{
+    color: #000;
+    width: 1200px;
+    font-size: 18px;
+    line-height: 26px;
+    margin: auto;
+    .row{
+      width: 866px;
+      display: flex;
+      &>div{
+        width: 50%;
+        &>h3{
+              padding-top: 30px;
+
+          font-size: 18px;
+          font-weight: 700;
+          margin-bottom: 20px;
+        }
+        &>p{
+          font-size: 14px;
+        }
+        &>img{
+          width: 100%;
+        }
+      }
+      .blank{
+        padding-left: 10px;
+      }
+    }
+  }
+}
+</style>

web/src/views/Visit/Visit6.vue

@@ -0,0 +1,99 @@
+<template>
+  <div class="Visit6">
+    <div class="conten">
+      <div class="row">
+        <div>
+          <h3>Cafeteria</h3>
+          <p>he cafeteria is located on the northeast corner of the round exhibition room at basement level. Covering about 200 square meters, it offers coffee, soft drinks and low alcohol beverages.</p>
+        </div>
+        <div>
+          <img src="../../assets/images/Visit/cafe1.jpg" alt="">
+        </div>
+      </div>
+      <div class="row">
+        <div>
+          <img src="../../assets/images/Visit/cafe2.jpg" alt="">
+        </div>
+        <div class="blank">
+          <h3>Shop</h3>
+          <p> Located in the southwest of the museum's basement and with a floor space of about </p>
+          <p>550 square meters, the souvenir shop offers a wide variety of souvenirs including special</p>
+          <p>souvenirs from the museum, books, and audio-visual products. Also on sale here are </p>
+          <p>various arts and crafts with local characteristics, gold and jade ornaments, collotype </p>
+          <p>calligraphic works and paintings of great collecting value, and other arts and crafts with </p>
+          <p>unique features. The thousands of books on sale here mainly have a "Beijing taste" or </p>
+          <p>are books on collecting and connoisseurship.</p>
+        </div>
+      </div>
+      <div class="buy">
+        <img src="../../assets/images/Visit/cafeBuy.jpg" alt="">
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  name: "Visit6",
+  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>
+.Visit6{
+  .conten{
+    color: #000;
+    width: 1200px;
+    font-size: 18px;
+    line-height: 26px;
+    margin: auto;
+    .row{
+      width: 866px;
+      display: flex;
+      &>div{
+        width: 50%;
+        &>h3{
+              padding-top: 30px;
+
+          font-size: 18px;
+          font-weight: 700;
+          margin-bottom: 20px;
+        }
+        &>p{
+          font-size: 14px;
+        }
+        &>img{
+          width: 100%;
+        }
+      }
+      .blank{
+        padding-left: 10px;
+      }
+    }
+    .buy{
+      margin: 30px 0 10px;
+      text-align: center;
+    }
+  }
+}
+</style>

web/src/views/Visit/Visit7.vue

@@ -0,0 +1,138 @@
+<template>
+<div class='Visit7'>
+  <div class="conten">
+    <div class="top">
+      <img src="../../assets/images/Visit/last1.jpg" alt="">
+    </div>
+    <div class="txt">
+      <div>
+        <p><span>01</span>All exhibitions in the museum are free.</p>
+        <p><span>02</span>The museum opens from Tuesday to Sunday, 9:00 - 17:00 (no admission after 16:00), but is closed on Mondays (except for holidays).</p>
+        <p><span>03</span>Please make ticket reservations at least one day before the desired visit and obtain your free ticket with your reservation number.</p>
+        <p><span>04</span>Please keep your valid ID (passport) available for inspection.</p>
+      </div>
+      <div>
+        <p><span>05</span>Inebriated and improperly-dressed persons will be refused entry.</p>
+        <p><span>06</span>Inflammable and explosive materials, knives subject to control and dangerous articles cannot be brought into the museum.</p>
+        <p><span>07</span>Photography is permitted, but flash and tripod is not allowed.</p>
+        <p><span>08</span>In case of an emergency, please follow the directions of our museum staff.</p>
+      </div>
+    </div>
+    <div class="thank">Thank you for your cooperation.</div>
+    <div class="bottom">
+      <p>Official website of Capital Museum <span>首页（地址待定）</span></p>
+      <p>Telephone reservation (individual visitors) <span>+86 (10) 63393339</span></p>
+      <p>Telephone reservation (group visitors) <span>+86 (10) 63370458</span></p>
+      <p>Inquiry Hotline <span>+86 (10) 63370491</span></p>
+    </div>
+  </div>
+</div>
+</template>
+
+<script>
+export default {
+name:'Visit7',
+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>
+.Visit7{
+  .conten{
+    width: 1200px;
+    font-size: 18px;
+    line-height: 26px;
+    margin: auto;
+    .top{
+      margin-bottom: 20px;
+      width: 100%;
+      height: 70px;
+      &>img{
+        width: 100%;
+        height: 100%;
+      }
+    }
+    .txt{
+      display: flex;
+      &>div{
+        padding-top: 20px;
+        width: 50%;
+        &>p{
+          display: flex;
+          align-items: center;
+          font-size: 14px;
+          margin-bottom: 20px;
+          &>span{
+            display: block;
+            font-size: 30px;
+            margin-right: 10px;
+          }
+        }
+        &:nth-of-type(1){
+          border-right: 1px solid #ccc;
+          padding-right: 20px;
+        }
+        &:nth-of-type(2){
+          padding-left: 20px;
+          &>p{
+            margin-bottom: 30px;
+          }
+        }
+        &>p{
+          &:last-child{
+            margin-bottom: 0;
+          }
+        }
+      }
+    }
+    .thank{
+      color: rgb(255, 0, 0);
+      font-size: 14px;
+      text-align: center;
+      margin: 20px 0;
+    }
+    .bottom{
+      margin-bottom: 30px;
+      padding: 20px 0;
+      border: 1px solid black;
+      &>p{
+        text-align: center;
+        font-size: 14px;
+        margin: 20px;
+        &>span{
+      color: rgb(255, 0, 0);
+        }
+      }
+    }
+  }
+}
+
+</style>