up

web/src/router/index.js

@@ -204,6 +204,25 @@ const routes = [
         component: () => import('../views/Events/info.vue'),
         meta: { myName: 'Events' },
       },
+      // 底部导航页面
+      {
+        path: '/Layout/Index',
+        name: 'bottomIndex',
+        component: () => import('../views/bottom/Index.vue'),
+        meta: { myName: 'bottomIndex' },
+      },
+      {
+        path: '/Layout/Use',
+        name: 'bottomUse',
+        component: () => import('../views/bottom/Use.vue'),
+        meta: { myName: 'bottomUse' },
+      },
+      {
+        path: '/Layout/Employment',
+        name: 'bottomEmployment',
+        component: () => import('../views/bottom/Employment.vue'),
+        meta: { myName: 'bottomEmployment' },
+      },
     ]
   }
 ]

web/src/views/Events/index.vue

@@ -14,17 +14,20 @@
           <img :src="`/data/About/Events/${index + 1}.jpg`" alt="" />
           <div class="item">
             <h2 v-html="item.h3"></h2>
-            <div class="s" v-html="item.txt"></div>
+            <div class="s">
+              <p @click.stop="skip(val.path)"  v-for="(val,index) in item.txt" :key="index">{{val.name}}</p>
+            </div>
             <i class="d">Date:{{ item.i }}</i>
           </div>
         </li>
       </ul>
     </div>
+    <!-- <a href="#/Layout/EventsInfo/1"></a> -->
   </div>
 </template>
 
 <script>
-import { About } from "../dataAll";
+import { AboutOne } from "../dataAll";
 export default {
   //import引入的组件需要注入到对象中才能使用
   components: {},
@@ -46,7 +49,8 @@ export default {
   },
   //生命周期 - 创建完成（可以访问当前this实例）
   created() {
-    this.data = About.Events;
+    this.data = AboutOne
+
   },
   //生命周期 - 挂载完成（可以访问DOM元素）
   mounted() {},

web/src/views/Events/info.vue

@@ -6,7 +6,7 @@
       <img src="/data/About/Events/toTop.jpg" alt="" />
     </div>
     <div class="conten">
-      <img class="topBan" :src="`/data/About/Events/${info.id}.jpg`" alt="" />
+      <img class="topBan" :src="`/data/About/Events/${imgInd}Ac.jpg`" alt="" />
       <div class="main">
         <div class="pos">
           <span>Your Position:&nbsp;</span>
@@ -16,7 +16,15 @@
         <div class="title">
           <div class="left">
             <h3 v-html="info.h3"></h3>
-            <div class="txt" v-html="info.txt"></div>
+            <div class="txt">
+              <p
+                @click="skip(val.path)"
+                v-for="(val, index) in info.txt"
+                :key="index"
+              >
+                {{ val.name }}
+              </p>
+            </div>
           </div>
           <div class="right">
             <div>Date:</div>
@@ -33,7 +41,7 @@
         <li
           v-for="(item, index) in other"
           :key="index"
-          @click="cutOther(item.id)"
+          @click="skip(item.id)"
         >
           <img :src="`/data/About/Events/${item.id}.jpg`" alt="" />
           <div class="txt" v-html="item.h3"></div>
@@ -45,7 +53,8 @@
 
 <script>
 // <p class='xx'>111111111</p> <p>111111111</p> <img src='/data/About/Events/in/00.png'/>
-import { About } from "../dataAll";
+// <p><i>111111111</i></p>
+import { About, AboutOne } from "../dataAll";
 
 export default {
   name: "EventsInfo",
@@ -55,18 +64,22 @@ export default {
     return {
       info: {},
       other: [],
+      // 控制顶部的图片
+      imgInd: 1,
     };
   },
   //监听属性 类似于data概念
   computed: {},
   //监控data中的数据变化
-  watch: {},
+  watch: {
+    $route() {
+      this.getData();
+    },
+  },
   //方法集合
   methods: {
-    // 点击其他更多
-    cutOther(id) {
-      this.$router.push(`/Layout/EventsInfo/${id}`);
-      this.getData();
+    skip(id) {
+      this.$router.push(`/Layout/EventsInfo/${id}`).catch(()=>{});
     },
     // 点击回到顶部
     toTop() {
@@ -74,15 +87,36 @@ export default {
     },
     // 封装获取id和改变数据的方法
     getData() {
+      this.info = {};
       let id = this.$route.params.id;
       id = Number(id);
+      // 控制顶部的图片
+      if (id < 2) this.imgInd = 1;
+      else if (id < 3) this.imgInd = 2;
+      else if (id < 4) this.imgInd = 3;
+      else if (id < 5) this.imgInd = 4;
+      else this.imgInd = 5;
       About.Events.forEach((v) => {
         if (v.id === id) this.info = v;
       });
       // 底部更多模块
-      this.other = About.Events.filter((v) => {
-        return v.id !== id;
-      });
+      let temp = [];
+      if (id < 2) {
+        temp.push(AboutOne[1]);
+        temp.push(AboutOne[2]);
+        temp.push(AboutOne[3]);
+        temp.push(AboutOne[4]);
+      } else if (id < 3) {
+        temp.push(AboutOne[2]);
+        temp.push(AboutOne[3]);
+        temp.push(AboutOne[4]);
+      } else if (id < 4) {
+        temp.push(AboutOne[3]);
+        temp.push(AboutOne[4]);
+      } else if(id<5) temp.push(AboutOne[4])
+      else temp.push(AboutOne[3]);
+
+      this.other = temp;
     },
   },
   //生命周期 - 创建完成（可以访问当前this实例）
@@ -155,6 +189,7 @@ export default {
             line-height: 20px;
             padding: 0 30px 20px 30px;
             /deep/ p {
+              cursor: pointer;
               width: 350px;
               text-align: left;
               color: #000;
@@ -187,6 +222,9 @@ export default {
         box-shadow: 0 5px 5px rgba(0, 0, 0, 0.5);
         clear: both;
         padding: 40px 30px;
+        /deep/ i {
+          font-weight: 700;
+        }
         /deep/ p {
           margin-bottom: 30px;
         }
@@ -198,6 +236,15 @@ export default {
           display: block;
           margin: 0px auto 30px;
         }
+        /deep/ video {
+          width: 600px;
+          display: block;
+          margin: 0px auto 30px;
+        }
+        /deep/ a {
+          font-weight: 700;
+          text-decoration: underline;
+        }
       }
     }
   }

web/src/views/bottom/Employment.vue

@@ -0,0 +1,268 @@
+<template>
+  <div class="bottomEmployment">
+    <div class="ban"></div>
+    <div class="pos">
+      <div>
+        <span class="pos1">Your Position:&nbsp;</span>
+        <Router-link to="/Layout/Home">Home></Router-link>
+      </div>
+    </div>
+    <div class="conten">
+      <!-- Exhibition Overview -->
+      <div class="y_box">
+        <div class="title_2">
+          2017 Second-Half Public Recruitment Notice of the Capital Museum
+        </div>
+        <div class="info">
+          <span class="info_1">2018</span>
+          <span class="info_3">Capital Museum</span>
+        </div>
+        <div class="content_2">
+          <div class="title_3">——<span>Exhibition Overview</span>——</div>
+          <div>
+            <p>
+              In accordance with the regulations covering open recruitment of
+              public institutions issued by the Beijing Municipal Human
+              Resources and Social Security Bureau and the Beijing Municipal
+              Administration of Cultural Heritage, and considering the growing
+              work demands of the Museum, 12 job vacancies have now become
+              available. The details are as follows:
+            </p>
+            <p>
+              <span>ⅠRequirements: </span>
+              1. Chinese nationality; support the leadership of the Communist
+              Party of China <br />
+              2. Have a passion for museum work; healthy, honest, law-abiding<br />
+              3. Have permanent residence and personal files lodged in Beijing
+              <br />
+              4. For requirements of each position, please refer to the “2017
+              Second-Half Public Recruitment Notice of the Capital Museum
+              (Attachment 1)”<br />
+              5. “35 and under” refers to people born after October 13, 1981;
+              “40 and under” refers to people born after October 13, 1976.
+            </p>
+            <p>
+              <span>ⅡApplication and Eligibility Assessment </span>
+              All applicants will have to undergo a through eligibility
+              assessment on the spot. Please fill out and print the application
+              form (Attachment 2) beforehand and take it with you to the
+              assessment.
+            </p>
+            <p>
+              1. Time and Location of Assessment <br />
+              September 26 to 27 <br />
+              A.M. : 9:30—11:30 P.M. : 13:30—16:30 <br />
+              Location: Management Office of the White Dagoba Temple in Beijing
+              (No. 171 Funei Street, Xicheng District. Please show your
+              application form when entering.)
+            </p>
+            <p>
+              2. Materials to Be Submitted <br />
+              1). Application form, ID card, details of household registration
+              <br />
+              2). Diploma, stamped materials showing your work experience or
+              labor contract supplemented by payment records of social
+              insurance, and required certificates of title. <br />
+              3). Other certificates and materials to be stipulated as needed.
+              <br />
+              All materials above should be presented in the original.
+            </p>
+            <p>
+              <span>Ⅲ Admission Card</span>
+              For candidates who pass the initial eligibility assessment, please
+              collect your admission card at the Management Office of the White
+              Dagoba Temple on October 11 (9:30—11:30 A.M. 13:30—16:30 P.M.)
+              with assessment card, original ID card and a recent one-inch
+              certified personal photo.
+            </p>
+            <p>
+              <span>Ⅳ Written Examination </span>
+              The written examination will be conducted in the form of a
+              comprehensive capacity test and organized by the Beijing Talent
+              Service Center and the Beijing Municipal Administration of
+              Cultural Heritage. <br />Time: 9:00—11:30 A.M. on October 14<br />Location：please
+              refer to the admission card
+            </p>
+            <p>
+              <span>Ⅴ Interview</span>
+              One-fifth of candidates scoring over 60 will be interviewed. The
+              list of interviewees will be uploaded onto the website of the
+              Beijing Municipal Administration of Cultural Heritage 20 days
+              after the written test.
+            </p>
+            <p>
+              <span>Ⅵ Total Score</span>The pass mark for the interview is 60.
+              The total score will comprise of the written test (60%) and the
+              interview score (40%).
+            </p>
+            <p>
+              <span>Ⅶ Physical Examination </span>All the candidates who sored
+              over 60 at the final stage will be subjected to a physical
+              examination. This will be organized and conducted by the
+              recruiting organization.
+            </p>
+            <p>
+              <span>Ⅷ Completion of Employment Formalities </span>Personnel to
+              be recruited will be chosen from candidates who emerged as the
+              best in the written exam and interview and qualified through the
+              physical examination. The list will be uploaded onto the website
+              of Beijing Municipal Administration of Cultural Heritage for seven
+              working days, after which we will inform chosen personnel to
+              complete employment formalities.
+            </p>
+            <p>
+              <span>Ⅸ Notes </span>Eligibility assessment will be conducted
+              throughout the entire recruitment process. At any stage, any
+              candidates believed to have violated the recruitment regulations,
+              provided false information or forged certificates, deemed to have
+              cheated in the examination, etc., will be dealt with seriously and
+              be disqualified from consideration for the advertised position.
+              From the eligibility assessment to the end of the recruitment
+              process, candidates should ensure they are always available by
+              phone. If not, the candidate will take full responsibility of our
+              failing to inform them.
+            </p>
+          </div>
+        </div>
+      </div>
+    </div>
+    <div class="back_btn" @click="$router.go(-1)">Back to top</div>
+  </div>
+</template>
+
+<script>
+export default {
+  name: "bottomEmployment",
+  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>
+.bottomEmployment {
+  .ban {
+    width: 100%;
+    margin: auto;
+    background: url("/data/About/banner.jpg") no-repeat center top #000000;
+    height: 300px;
+  }
+  .pos {
+    height: 56px;
+    width: 100%;
+    font-size: 12px;
+    background: url("../../assets/images/Visit/bg_3.png") left bottom repeat-x
+      #f1f1f1;
+    overflow: hidden;
+    zoom: 1;
+    & > div {
+      height: 56px;
+      line-height: 50px;
+      width: 1180px;
+      overflow: hidden;
+      zoom: 1;
+      margin: 0 auto;
+      .pos1 {
+        color: #c20e11;
+      }
+      & > i {
+        cursor: pointer;
+      }
+    }
+  }
+  .conten {
+    padding-top: 35px;
+    width: 1180px;
+    margin: 0 auto;
+    .y_box {
+      background: #fff;
+      border: 1px solid #e0e0e0;
+      .title_2 {
+        font-size: 22px;
+        line-height: 44px;
+        font-weight: bold;
+        margin-bottom: 10px;
+        padding: 40px 210px 0 40px;
+      }
+      .info {
+        font-size: 14px;
+        line-height: 36px;
+        color: #666;
+        overflow: hidden;
+        zoom: 1;
+        margin-bottom: 20px;
+        padding-left: 40px;
+        & > span {
+          padding: 0 30px;
+          display: block;
+          float: left;
+        }
+        .info_1 {
+          background: url("../../assets/images/bg_5.png") left 8px no-repeat;
+        }
+        .info_3 {
+          background: url("../../assets/images/bg_7.png") left 8px no-repeat;
+        }
+      }
+      .content_2 {
+        background: none;
+        border-top: 1px solid #e0e0e0;
+        padding: 30px 40px;
+        p {
+          font-size: 18px;
+          line-height: 26px;
+          color: #1f1d1d;
+          margin-top: 24px;
+          span {
+            font-weight: 700;
+            display: block;
+          }
+        }
+        .title_3 {
+          font-size: 12px;
+          color: #939393;
+          text-align: center;
+          & > span {
+            font-weight: 700;
+            font-size: 24px;
+            color: #bf2323;
+            text-align: center;
+            padding: 0 20px;
+          }
+        }
+      }
+    }
+  }
+  .back_btn {
+    height: 38px;
+    width: 160px;
+    margin: 30px auto;
+    border: 1px solid #000;
+    font-size: 16px;
+    line-height: 38px;
+    text-align: center;
+    font-weight: bold;
+    cursor: pointer;
+    display: block;
+    background: #f1f1f1;
+  }
+}
+</style>

web/src/views/bottom/Index.vue

@@ -0,0 +1,44 @@
+<template>
+<div class='bottomIndex'>bottomIndex</div>
+</template>
+
+<script>
+
+export default {
+name:'bottomIndex',
+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>

web/src/views/bottom/Use.vue

@@ -0,0 +1,231 @@
+<template>
+  <div class="bottomUse">
+    <div class="ban"></div>
+    <div class="pos">
+      <div>
+        <span class="pos1">Your Position:&nbsp;</span>
+        <Router-link to="/Layout/Home">Home></Router-link>
+      </div>
+    </div>
+    <div class="conten">
+      <!-- Exhibition Overview -->
+      <div class="y_box">
+        <div class="title_2">Terms of Use</div>
+        <div class="info">
+          <span class="info_1">2018</span>
+          <span class="info_3">Capital Museum</span>
+        </div>
+        <div class="content_2">
+          <div class="title_3">——<span>Exhibition Overview</span>——</div>
+          <div>
+            <p>Legal Notice</p>
+            <p>
+              Welcome to www.capitalmuseum.org.cn (hereinafter referred to as
+              "this website"). You are expected to comply with following terms
+              while using this website:
+            </p>
+            <p>
+              Copyright of all contents on this website, including but not
+              limited to the website design, texts, pictures, audio and video
+              works, etc., belong to the Capital Museum and all the parties
+              concerned. All media, websites, organizations or individuals are
+              allowed to read these contents, but cannot use them in the ways
+              including but not limited to reprinting, excerpting, linking,
+              reposting, publication, transfer, distribution, etc. And
+              unauthorized use of this website and its contents for commercial
+              purposes is also prohibited.
+            </p>
+            <p>
+              If you download materials you consider you need from this website
+              for non-commercial use (except for information with copyrights and
+              proprietary rights), please contact us for permission.
+            </p>
+            <p>
+              Any reprints and quotes of any copyrighted articles on this
+              website should conform to following requirements:
+            </p>
+            <p>
+              (1) For non-commercial, non-profit and non-advertising uses,
+              author's name and source of the used article or picture,
+              "首都博物馆网站" or "首页（地址待定）", should be attached.
+            </p>
+            <p>
+              (2) For business, profit-making and advertising use, you should
+              obtain consent of the original author, and attach the name of that
+              author, limits of authority and the source, "首都博物馆网站"or
+              "首页（地址待定）".
+            </p>
+            <p>
+              (3) Any modification and cancellation of any articles or pictures
+              should be approved by the author, with the limits of authority
+              attached.
+            </p>
+            <p>
+              This website and the Capital Museum are not liable for any direct
+              or indirect incidental damage resulting from the use or inability
+              to use the information on this website. This website also does not
+              assume any criminal or civil liability arising from any violation
+              of the provisions of this website or the laws of the People's
+              Republic of China.
+            </p>
+            <p>
+              This website will make announcement in advance if services are to
+              be suspended due to system maintenance or upgrading. The website
+              and the Capital Museum are not be liable for any inconvenience or
+              losses caused by the suspension of services due to hardware
+              failure or force majeure.
+            </p>
+            <p>
+              The right of final interpretation of all contents of this website
+              is owned by the Capital Museum.
+            </p>
+            <p>
+              To safeguard rights and interests of this website and respect for
+              the authors' copyrights, we entrust Lyu Xiaojing of the Beijing
+              Realizer Law Firm as the legal adviser to this website. Anyone
+              violating the terms of this notice and laws will be held
+              accountable. If any contents published and reposted on this
+              website violate your copyrights, please contact our lawyer within
+              two weeks.
+            </p>
+            <p>The Capital Museum</p>
+          </div>
+        </div>
+      </div>
+    </div>
+    <div class="back_btn" @click="$router.go(-1)">Back to top</div>
+  </div>
+</template>
+
+<script>
+export default {
+  name: "bottomUse",
+  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>
+.bottomUse {
+  .ban {
+    width: 100%;
+    margin: auto;
+    background: url("/data/About/banner.jpg") no-repeat center top #000000;
+    height: 300px;
+  }
+  .pos {
+    height: 56px;
+    width: 100%;
+    font-size: 12px;
+    background: url("../../assets/images/Visit/bg_3.png") left bottom repeat-x
+      #f1f1f1;
+    overflow: hidden;
+    zoom: 1;
+    & > div {
+      height: 56px;
+      line-height: 50px;
+      width: 1180px;
+      overflow: hidden;
+      zoom: 1;
+      margin: 0 auto;
+      .pos1 {
+        color: #c20e11;
+      }
+      & > i {
+        cursor: pointer;
+      }
+    }
+  }
+  .conten {
+    padding-top: 35px;
+    width: 1180px;
+    margin: 0 auto;
+    .y_box {
+      background: #fff;
+      border: 1px solid #e0e0e0;
+      .title_2 {
+        font-size: 22px;
+        line-height: 44px;
+        font-weight: bold;
+        margin-bottom: 10px;
+        padding: 40px 210px 0 40px;
+      }
+      .info {
+        font-size: 14px;
+        line-height: 36px;
+        color: #666;
+        overflow: hidden;
+        zoom: 1;
+        margin-bottom: 20px;
+        padding-left: 40px;
+        & > span {
+          padding: 0 30px;
+          display: block;
+          float: left;
+        }
+        .info_1 {
+          background: url("../../assets/images/bg_5.png") left 8px no-repeat;
+        }
+        .info_3 {
+          background: url("../../assets/images/bg_7.png") left 8px no-repeat;
+        }
+      }
+      .content_2 {
+        background: none;
+        border-top: 1px solid #e0e0e0;
+        padding: 30px 40px;
+        p {
+          font-size: 18px;
+          line-height: 26px;
+          color: #1f1d1d;
+          margin-top: 24px;
+        }
+        .title_3 {
+          font-size: 12px;
+          color: #939393;
+          text-align: center;
+          & > span {
+            font-weight: 700;
+            font-size: 24px;
+            color: #bf2323;
+            text-align: center;
+            padding: 0 20px;
+          }
+        }
+      }
+    }
+  }
+  .back_btn {
+    height: 38px;
+    width: 160px;
+    margin: 30px auto;
+    border: 1px solid #000;
+    font-size: 16px;
+    line-height: 38px;
+    text-align: center;
+    font-weight: bold;
+    cursor: pointer;
+    display: block;
+    background: #f1f1f1;
+  }
+}
+</style>

web/src/views/layout/index.vue

@@ -67,6 +67,7 @@
     <div class="footer">
       <div>
         <span
+          @click="footTo(item.path)"
           v-for="item in footerData"
           :key="item.name"
           v-html="item.name"
@@ -92,10 +93,10 @@ export default {
       loveFalg: false,
       searchTxt: "",
       footerData: [
-        { name: "|&emsp; Site Index", path: "" },
-        { name: "|&emsp; Terms of Use", path: "" },
-        { name: "|&emsp; Events", path: "" },
-        { name: "|&emsp; Employment", path: "" },
+        { name: "|&emsp; Site Index", path: "/Layout/Index" },
+        { name: "|&emsp; Terms of Use", path: "/Layout/Use" },
+        { name: "|&emsp; Events", path: "/Layout/Events" },
+        { name: "|&emsp; Employment", path: "/Layout/Employment" },
       ],
       // 控制二级菜单的高亮
       menaInd: null,
@@ -112,6 +113,10 @@ export default {
   },
   //方法集合
   methods: {
+    // 底部的跳转
+    footTo(path) {
+      this.$router.push(path).catch(() => {});
+    },
     // 第一级的跳转
     skipOne(url) {
       this.$router.push("/Layout/" + url).catch(() => {});