ipp

src/assets/style/public.css

@@ -0,0 +1,68 @@
+html {
+  background: #fff;
+  font-family: 'Microsoft YaHei';
+}
+* {
+  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
+  tap-highlight-color: rgba(0, 0, 0, 0);
+  font-size: 16px;
+}
+@font-face {
+  font-family: "Source Han Serif CN";
+  src: url(font/SourceHanSerifCN-Regular.otf);
+}
+@font-face {
+  font-family: "Source Han Serif CN Light";
+  src: url(font/SourceHanSerifCN-Light.otf);
+}
+@font-face {
+  font-family: "foChange1";
+  src: url(font/foChange1.ttf);
+}
+@font-face {
+  font-family: "foChange2";
+  src: url(font/foChange2.ttf);
+}
+.changeList {
+  align-items: center;
+  color: #6d564d;
+  overflow: visible !important;
+}
+.changeList .changeRow {
+  margin-right: 240px;
+  cursor: pointer;
+  writing-mode: vertical-lr;
+  position: relative;
+}
+.changeList .changeRow > span {
+  letter-spacing: 5px;
+  font-family: 'foChange1';
+  font-size: 14px;
+  padding-top: 18px;
+}
+.changeList .changeRow > p {
+  margin-left: -10px;
+  letter-spacing: 6px;
+  font-family: 'foChange2';
+  font-size: 50px;
+}
+.changeList .changeRow .fivep {
+  letter-spacing: -10px;
+}
+.changeList .changeRow .changeXian {
+  width: 125px;
+  height: 434px;
+  background: url('../images/changeXian.png');
+  background-size: 100% 100%;
+  position: absolute;
+  top: -37px;
+  left: -70px;
+  opacity: 0;
+  transition: opacity 1s;
+}
+.changeList .changeRow:hover .changeXian {
+  opacity: 1;
+}
+.changeList .changeRow:last-child {
+  margin-right: 0;
+}

src/assets/style/public.less

@@ -1,17 +1,80 @@
-html{
-    background: #fff;
-    font-family: 'Microsoft YaHei';
-  }
-*{
+html {
+  background: #fff;
+  font-family: 'Microsoft YaHei';
+}
+
+* {
   -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
   tap-highlight-color: rgba(0, 0, 0, 0);
   font-size: 16px;
 }
+
 @font-face {
   font-family: "Source Han Serif CN";
   src: url(font/SourceHanSerifCN-Regular.otf);
 }
+
 @font-face {
   font-family: "Source Han Serif CN Light";
   src: url(font/SourceHanSerifCN-Light.otf);
 }
+
+@font-face {
+  font-family: "foChange1";
+  src: url(font/foChange1.ttf);
+}
+
+@font-face {
+  font-family: "foChange2";
+  src: url(font/foChange2.ttf);
+}
+
+.changeList {
+  align-items: center;
+  color: #6d564d;
+  overflow: visible !important;
+  .changeRow {
+    margin-right: 240px;
+    cursor: pointer;
+    writing-mode: vertical-lr;
+    position: relative;
+
+    &>span {
+      letter-spacing: 5px;
+      font-family: 'foChange1';
+      font-size: 14px;
+      padding-top: 18px;
+    }
+
+    &>p {
+      margin-left: -10px;
+      letter-spacing: 6px;
+      font-family: 'foChange2';
+      font-size: 50px;
+    }
+    .fivep{
+      letter-spacing: -10px;
+    }
+
+    .changeXian {
+      width: 125px;
+      height: 434px;
+      background: url('../images/changeXian.png');
+      background-size: 100% 100%;
+      position: absolute;
+      top: -37px;
+      left: -70px;
+      opacity: 0;
+      transition: opacity 1s;
+    }
+
+    &:hover {
+      .changeXian {
+        opacity: 1;
+      }
+    }
+    &:last-child{
+      margin-right: 0;
+    }
+  }
+}

src/assets/style/reset.css

@@ -0,0 +1,176 @@
+/* reset */
+html,
+body,
+h1,
+h2,
+h3,
+h4,
+h5,
+h6,
+div,
+dl,
+dt,
+dd,
+ul,
+ol,
+li,
+p,
+blockquote,
+pre,
+hr,
+figure,
+table,
+caption,
+th,
+td,
+form,
+fieldset,
+legend,
+input,
+button,
+textarea,
+menu {
+  margin: 0;
+  padding: 0;
+}
+header,
+footer,
+section,
+article,
+aside,
+nav,
+hgroup,
+address,
+figure,
+figcaption,
+menu,
+details {
+  display: block;
+}
+table {
+  border-collapse: collapse;
+  border-spacing: 0;
+}
+caption,
+th {
+  text-align: left;
+  font-weight: normal;
+}
+html,
+body,
+fieldset,
+img,
+iframe,
+abbr {
+  border: 0;
+}
+i,
+cite,
+em,
+var,
+address,
+dfn {
+  font-style: normal;
+}
+[hidefocus],
+summary {
+  outline: 0;
+}
+li {
+  list-style: none;
+}
+h1,
+h2,
+h3,
+h4,
+h5,
+h6,
+small {
+  font-size: 100%;
+}
+sup,
+sub {
+  font-size: 83%;
+}
+pre,
+code,
+kbd,
+samp {
+  font-family: inherit;
+}
+q:before,
+q:after {
+  content: none;
+}
+textarea {
+  overflow: auto;
+  resize: none;
+}
+label,
+summary {
+  cursor: default;
+}
+a,
+button {
+  cursor: pointer;
+}
+h1,
+h2,
+h3,
+h4,
+h5,
+h6,
+em,
+strong,
+b {
+  font-weight: bold;
+}
+del,
+ins,
+u,
+s,
+a,
+a:hover {
+  text-decoration: none;
+}
+body,
+textarea,
+input,
+button,
+select,
+keygen,
+legend {
+  font: 14px/1.14;
+  outline: 0;
+}
+* {
+  box-sizing: border-box;
+}
+a {
+  text-decoration: none;
+}
+::-webkit-scrollbar {
+  width: 8px;
+  height: 8px;
+}
+::-webkit-scrollbar-thumb {
+  height: 50px;
+  background-color: #ddd;
+  -webkit-border-radius: 4px;
+  outline: 2px solid #fff;
+  outline-offset: -2px;
+}
+::-webkit-scrollbar-thumb:hover {
+  height: 50px;
+  background-color: #9f9f9f;
+  -webkit-border-radius: 4px;
+}
+.survey {
+  background: url('');
+  background-size: 100% 100%;
+}
+.detail-con p {
+  word-wrap: break-word;
+  word-break: break-all;
+  overflow: hidden;
+}

src/common/http.js

@@ -1,9 +1,6 @@
 import axios from 'axios'
 
-var isProduction = process.env.NODE_ENV === 'production'
-
-// const serverName = isProduction ? 'http://8.135.106.227:8001/' : 'http://8.135.106.227:8001/'
-const serverName = isProduction ? 'http://8.135.106.227:8001/' : 'http://8.135.106.227:8001/'
+const serverName = process.env.NODE_ENV === 'development' ? 'http://8.135.106.227:8001/' : '/'
 
 axios.defaults.baseURL = serverName
 axios.defaults.headers['X-Requested-with'] = 'XMLHttpRequest'
@@ -70,4 +67,6 @@ axios.interceptors.response.use(
     return Promise.reject(error)
   }
 )
-export { axios }
+export {
+  axios
+}

src/main.js

@@ -39,7 +39,6 @@ Vue.filter('dateFormat2', function (value, formatStr = 'yyyy-MM-yy HH:mm:ss') {
   let reg = /(\d{4})\-(\d{2})\-(\d{2})/
   return newVale.replace(reg, '$1年$2月$3日').slice(5)
 })
-
 /* eslint-disable no-new */
 new Vue({
   el: '#app',

src/pages/activity/activity.vue

@@ -3,22 +3,53 @@
   <div class="survey">
     <img class="bg" :src="require('@/assets/images/bg2.png')" alt="" />
     <div class="content">
-      <div class="title">
+      <!-- <div class="title">
         <span>活动</span>
-      </div>      
-      <div class="list">
-        <div :class="['item1','item',{'cur':cur==0}]" @mouseover="open(0)" @mouseout="close()" @click="toType('onLine')">
-         <p class="Ztit">线 上 活 动</p>
-         <p class="Etit">ONLINE EVENTS</p>
+      </div> -->
+      <div class="list changeList" style="padding: 46px 0 0 70px">
+        <div class="changeRow" @click="toType('onLine')">
+          <span>ONLINE&emsp;EVENTS</span>
+          <p>线上活动</p>
+          <div class="changeXian"></div>
         </div>
-        <div :class="['item2','item',{'cur':cur==1}]" @mouseover="open(1)" @mouseout="close()" @click="toType('volunteer')">
+        <div class="changeRow" @click="toType('volunteer')">
+          <span>VOLUNTEER&emsp;SERVICE</span>
+          <p class="fivep">志愿者服务</p>
+          <div class="changeXian"></div>
+        </div>
+        <div class="changeRow" @click="toType('satisfaction')">
+          <span>SATISFACTION&emsp;SURVEY</span>
+          <p class="fivep">满意度调查</p>
+          <div class="changeXian"></div>
+        </div>
+
+        <!-- <div
+          :class="['item1', 'item', { cur: cur == 0 }]"
+          @mouseover="open(0)"
+          @mouseout="close()"
+          @click="toType('onLine')"
+        >
+          <p class="Ztit">线 上 活 动</p>
+          <p class="Etit">ONLINE EVENTS</p>
+        </div>
+        <div
+          :class="['item2', 'item', { cur: cur == 1 }]"
+          @mouseover="open(1)"
+          @mouseout="close()"
+          @click="toType('volunteer')"
+        >
           <p class="Ztit">志 愿 者 服 务</p>
-         <p class="Etit">VOLUNTEER SERVICE</p>
+          <p class="Etit">VOLUNTEER SERVICE</p>
         </div>
-        <div :class="['item3','item',{'cur':cur==2}]" @mouseover="open(2)" @mouseout="close()" @click="toType('satisfaction')">
+        <div
+          :class="['item3', 'item', { cur: cur == 2 }]"
+          @mouseover="open(2)"
+          @mouseout="close()"
+          @click="toType('satisfaction')"
+        >
           <p class="Ztit">满 意 度 调 查</p>
-         <p class="Etit">SATISFACTION SURVEY</p>
-        </div>
+          <p class="Etit">SATISFACTION SURVEY</p>
+        </div> -->
       </div>
     </div>
   </div>
@@ -35,7 +66,7 @@ export default {
   data () {
     // 这里存放数据
     return {
-      cur:-1,
+      cur: -1,
       select: '',
       onLineHover: false,
       volunteerHover: false,
@@ -48,14 +79,14 @@ export default {
   watch: {},
   // 方法集合
   methods: {
-    open(num) {
-      this.cur = num;
+    open (num) {
+      this.cur = num
     },
-    close() {
-      this.cur = -1;
+    close () {
+      this.cur = -1
     },
     toType (type) {
-      this.$router.push({path: '/activity-type', query: {type}})
+      this.$router.push({ path: '/activity-type', query: { type } })
     },
     mouseOver (type) {
       this.select = type
@@ -113,103 +144,108 @@ export default {
     z-index: -1;
   }
   .content {
-    width:100%;
-    margin:0 auto;
-     .title {
-      width:100%;
-      text-align:center;
-      margin:107px auto 80px;
+    width: 100%;
+    margin: 0 auto;
+    .title {
+      width: 100%;
+      text-align: center;
+      margin: 107px auto 80px;
       span {
-        font-size:36px;
+        font-size: 36px;
         font-family: "Source Han Serif CN";
-        color:rgba(148, 83, 53, 1);
+        color: rgba(148, 83, 53, 1);
         font-weight: bold;
         display: flex;
         justify-content: center;
         align-items: center;
         &:before {
-          content:'';
-          display:inline-block;
-          width:27px;
-          height:36px;
-          background:url(../../assets/images/icon-tit-left.png)center/100% no-repeat;
-          margin-right:20px;
+          content: "";
+          display: inline-block;
+          width: 27px;
+          height: 36px;
+          background: url(../../assets/images/icon-tit-left.png) center/100%
+            no-repeat;
+          margin-right: 20px;
         }
         &:after {
-          content:'';
-          display:inline-block;
-          width:27px;
-          height:36px;
-          background:url(../../assets/images/icon-tit-right.png)center/100% no-repeat;
-          margin-left:20px;
-        }       
+          content: "";
+          display: inline-block;
+          width: 27px;
+          height: 36px;
+          background: url(../../assets/images/icon-tit-right.png) center/100%
+            no-repeat;
+          margin-left: 20px;
+        }
       }
     }
     .list {
-      display:flex;
+      display: flex;
       justify-content: center;
-      margin-bottom:100px;
-      height:571px;
+      margin-bottom: 100px;
+      height: 571px;
       overflow: hidden;
       .item {
-        position:relative;
-        width:253px;
-        height:571px;
+        position: relative;
+        width: 253px;
+        height: 571px;
         transition: all 0.2s ease-in;
-        float:left;
+        float: left;
         &.item1 {
-          background:url(../../assets/images/13.png)center center/571px no-repeat;
+          background: url(../../assets/images/13.png) center center/571px
+            no-repeat;
         }
         &.item2 {
-          background:url(../../assets/images/14.png)center center/571px no-repeat;
+          background: url(../../assets/images/14.png) center center/571px
+            no-repeat;
         }
         &.item3 {
-          background:url(../../assets/images/15.png)center center/571px no-repeat;
+          background: url(../../assets/images/15.png) center center/571px
+            no-repeat;
         }
         &.cur {
-          width:571px;
+          width: 571px;
           &:after {
-            position:absolute;
-            display:block;
-            content:"";
-            width:100%;
-            height:100%;
-            background:rgba(0,0,0,0.5);
+            position: absolute;
+            display: block;
+            content: "";
+            width: 100%;
+            height: 100%;
+            background: rgba(0, 0, 0, 0.5);
           }
           .Ztit {
-            left:80px;
-            z-index:2;
-             &:after {
-              content:"";
-              display:inline-block;
-              width:40px;
-              height:40px;
-              background:url(../../assets/images/btn.png)center/100% no-repeat;
-              margin-top:22px;
+            left: 80px;
+            z-index: 2;
+            &:after {
+              content: "";
+              display: inline-block;
+              width: 40px;
+              height: 40px;
+              background: url(../../assets/images/btn.png) center/100% no-repeat;
+              margin-top: 22px;
             }
           }
           .Etit {
-            left:58px;
-            z-index:2;
+            left: 58px;
+            z-index: 2;
           }
         }
         .Ztit {
-          position:absolute;
-          left:56px;
-          top:50px;
-          font-size:40px;
-          writing-mode:tb-rl;
-          color:rgba(243, 238, 230, 1);
+          position: absolute;
+          left: 56px;
+          top: 50px;
+          font-size: 40px;
+          writing-mode: tb-rl;
+          color: rgba(243, 238, 230, 1);
           transition: all 0.2s ease-in;
           font-family: "Source Han Serif CN";
           font-weight: bold;
         }
         .Etit {
-          position:absolute;
-          top:54px;
-          left:28px;
-          color:rgba(243, 238, 230, 1);
-          font-size:12px;
+          position: absolute;
+          top: 54px;
+          left: 28px;
+          color: rgba(243, 238, 230, 1);
+          font-size: 12px;
           writing-mode: tb-rl;
           transition: all 0.2s ease-in;
           font-family: "Source Han Serif CN";

src/pages/collection/collection.vue

@@ -3,11 +3,22 @@
   <div class="collection">
     <img class="bg" :src="require('@/assets/images/bg2.png')" alt="" />
     <div class="content">
-      <div class="title">
+      <!-- <div class="title">
         <span>典藏</span>
-      </div>
-      <div class="list">
-        <div
+      </div> -->
+      <div class="list changeList" style="padding: 46px 0 0 70px">
+        <div class="changeRow" @click="toType('boutique')" style="margin-right: 286px;">
+          <span>BOUTIQUE&emsp;COLLECTION</span>
+          <p>精品典藏</p>
+          <div class="changeXian"></div>
+        </div>
+        <div class="changeRow" @click="toType('threeDimensional')">
+          <span>3D&emsp;COLLECTION</span>
+          <p>三维藏品</p>
+          <div class="changeXian"></div>
+        </div>
+
+        <!-- <div
           :class="['item1', 'item', { cur: cur == 0 }]"
           @mouseover="open(0)"
           @mouseout="close()"
@@ -24,7 +35,7 @@
         >
           <p class="Ztit">三 维 藏 品</p>
           <p class="Etit">3D COLLECTION</p>
-        </div>
+        </div> -->
       </div>
     </div>
   </div>
@@ -195,12 +206,10 @@ export default {
         transition: all 0.2s ease-in;
         float: left;
         &.item1 {
-          background: url(../../assets/images/11.png) -245px center/644px
-            no-repeat;
+          background: url(../../assets/images/11.png) -245px center/644px no-repeat;
         }
         &.item2 {
-          background: url(../../assets/images/12.png) -245px center/644px
-            no-repeat;
+          background: url(../../assets/images/12.png) -245px center/644px no-repeat;
         }
 
         &.cur {
@@ -229,11 +238,13 @@ export default {
             left: 58px;
           }
         }
-        &.item1.cur{
-          background:url(../../assets/images/11.png)center center/644px no-repeat;
+        &.item1.cur {
+          background: url(../../assets/images/11.png) center center/644px
+            no-repeat;
         }
-        &.item2.cur{
-          background:url(../../assets/images/12.png)center center/644px no-repeat;
+        &.item2.cur {
+          background: url(../../assets/images/12.png) center center/644px
+            no-repeat;
         }
         .Ztit {
           position: absolute;

src/pages/exhibition/exhibition.vue

@@ -3,12 +3,28 @@
   <div class="survey">
     <img class="bg" :src="require('@/assets/images/bg2.png')" alt="" />
     <div class="content">
-      <div class="title">
+      <!-- <div class="title">
         <span>展览</span>
-      </div>
+      </div> -->
+
+      <div class="list changeList" style="padding: 46px 0 0 70px">
+        <div class="changeRow" @click="toType('hot')">
+          <span>ON&emsp;DISPLAY</span>
+          <p>正在热展</p>
+          <div class="changeXian"></div>
+        </div>
+        <div class="changeRow" @click="toType('preview')">
+          <span>FIXED&emsp;EXHITBITON</span>
+          <p>固定展览</p>
+          <div class="changeXian"></div>
+        </div>
+        <div class="changeRow" @click="toType('review')">
+          <span>EXHITBITON&emsp;REVIEW</span>
+          <p>展览回顾</p>
+          <div class="changeXian"></div>
+        </div>
 
-      <div class="list">
-        <div :class="['item1','item',{'cur':cur==0}]" @mouseover="open(0)" @mouseout="close()" @click="toType('hot')">
+        <!-- <div :class="['item1','item',{'cur':cur==0}]" @mouseover="open(0)" @mouseout="close()" @click="toType('hot')">
          <p class="Ztit">正 在 热 展</p>
          <p class="Etit">ON DISPLAY</p>
         </div>
@@ -19,8 +35,7 @@
         <div :class="['item3','item',{'cur':cur==2}]" @mouseover="open(2)" @mouseout="close()" @click="toType('review')">
           <p class="Ztit">展 览 回 顾</p>
          <p class="Etit">EXHITBITON REVIEW</p>
-        </div>
-
+        </div> -->
       </div>
     </div>
   </div>
@@ -120,32 +135,34 @@ export default {
     width: 100%;
     margin: 0 auto;
     .title {
-      width:100%;
-      text-align:center;
-      margin:107px auto 80px;
+      width: 100%;
+      text-align: center;
+      margin: 107px auto 80px;
       span {
-        font-size:36px;
+        font-size: 36px;
         font-family: "Source Han Serif CN";
-        color:rgba(148, 83, 53, 1);
+        color: rgba(148, 83, 53, 1);
         font-weight: bold;
         display: flex;
         justify-content: center;
         align-items: center;
         &:before {
-          content:'';
-          display:inline-block;
-          width:27px;
-          height:36px;
-          background:url(../../assets/images/icon-tit-left.png)center/100% no-repeat;
-          margin-right:20px;
+          content: "";
+          display: inline-block;
+          width: 27px;
+          height: 36px;
+          background: url(../../assets/images/icon-tit-left.png) center/100%
+            no-repeat;
+          margin-right: 20px;
         }
         &:after {
-          content:'';
-          display:inline-block;
-          width:27px;
-          height:36px;
-          background:url(../../assets/images/icon-tit-right.png)center/100% no-repeat;
-          margin-left:20px;
+          content: "";
+          display: inline-block;
+          width: 27px;
+          height: 36px;
+          background: url(../../assets/images/icon-tit-right.png) center/100%
+            no-repeat;
+          margin-left: 20px;
         }
       }
     }
@@ -185,80 +202,83 @@ export default {
       // }
     }
     .list {
-      display:flex;
+      display: flex;
       justify-content: center;
-      margin-bottom:100px;
-      height:571px;
+      margin-bottom: 100px;
+      height: 571px;
       overflow: hidden;
       .item {
-        position:relative;
-        width:253px;
-        height:571px;
+        position: relative;
+        width: 253px;
+        height: 571px;
         transition: all 0.2s ease-in;
-        float:left;
+        float: left;
         &.item1 {
-          background:url(../../assets/images/8.png)-245px center/571px ;
+          background: url(../../assets/images/8.png)-245px center/571px;
         }
         &.item2 {
-          background:url(../../assets/images/9.png)-245px center/571px ;
+          background: url(../../assets/images/9.png)-245px center/571px;
         }
         &.item3 {
-          background:url(../../assets/images/10.png)-245px center/571px ;
+          background: url(../../assets/images/10.png)-245px center/571px;
         }
 
         &.cur {
-          width:571px;
+          width: 571px;
           &:after {
-            position:absolute;
-            display:block;
-            content:"";
-            width:100%;
-            height:100%;
-            background:rgba(0,0,0,0.5);
+            position: absolute;
+            display: block;
+            content: "";
+            width: 100%;
+            height: 100%;
+            background: rgba(0, 0, 0, 0.5);
           }
           .Ztit {
-            left:80px;
-            z-index:2;
+            left: 80px;
+            z-index: 2;
             &:after {
-              content:"";
-              display:inline-block;
-              width:40px;
-              height:40px;
-              background:url(../../assets/images/btn.png)center/100% no-repeat;
-              margin-top:22px;
+              content: "";
+              display: inline-block;
+              width: 40px;
+              height: 40px;
+              background: url(../../assets/images/btn.png) center/100% no-repeat;
+              margin-top: 22px;
             }
           }
           .Etit {
-            left:58px;
-            z-index:2;
+            left: 58px;
+            z-index: 2;
           }
         }
-        &.item1.cur{
-          background:url(../../assets/images/8.png)center center/571px no-repeat;
+        &.item1.cur {
+          background: url(../../assets/images/8.png) center center/571px
+            no-repeat;
         }
-        &.item2.cur{
-          background:url(../../assets/images/9.png)center center/571px no-repeat;
+        &.item2.cur {
+          background: url(../../assets/images/9.png) center center/571px
+            no-repeat;
         }
-        &.item3.cur{
-          background:url(../../assets/images/10.png)center center/571px no-repeat;
+        &.item3.cur {
+          background: url(../../assets/images/10.png) center center/571px
+            no-repeat;
         }
         .Ztit {
-          position:absolute;
-          left:56px;
-          top:50px;
-          font-size:40px;
-          writing-mode:tb-rl;
-          color:rgba(243, 238, 230, 1);
+          position: absolute;
+          left: 56px;
+          top: 50px;
+          font-size: 40px;
+          writing-mode: tb-rl;
+          color: rgba(243, 238, 230, 1);
           transition: all 0.2s ease-in;
           font-family: "Source Han Serif CN";
           font-weight: bold;
         }
         .Etit {
-          position:absolute;
-          top:54px;
-          left:28px;
-          color:rgba(243, 238, 230, 1);
-          font-size:12px;
+          position: absolute;
+          top: 54px;
+          left: 28px;
+          color: rgba(243, 238, 230, 1);
+          font-size: 12px;
           writing-mode: tb-rl;
           transition: all 0.2s ease-in;
           font-family: "Source Han Serif CN";

src/pages/information/information.vue

@@ -3,9 +3,9 @@
   <div class="survey">
     <img class="bg" :src="require('@/assets/images/bg2.png')" alt="" />
     <div class="content">
-      <div class="title">
+      <!-- <div class="title">
         <span>资讯</span>
-      </div>
+      </div> -->
       <!-- <ul>
         <li
           @click="toType('introduction')"
@@ -53,8 +53,28 @@
           <div class="txt" :class="{ active: select==='mechanism' }"></div>
         </li>
       </ul> -->
-      <div class="list">
-        <div :class="['item1','item',{'cur':cur==0}]" @mouseover="open(0)" @mouseout="close()" @click="toType('recentNews')">
+      <div class="list changeList" style="padding: 46px 0 0 70px;">
+        <div class="changeRow" @click="toType('recentNews')">
+          <span>RECENT&emsp;NEWS</span>
+          <p>近期新闻</p>
+          <div class="changeXian"></div>
+        </div>
+        <div class="changeRow" @click="toType('activity')">
+          <span>SPECIAL&emsp;ACTIVITIES</span>
+          <p>专项活动</p>
+          <div class="changeXian"></div>
+        </div>
+        <div class="changeRow" @click="toType('infor')">
+          <span>INFORMATION</span>
+          <p>信息公开</p>
+          <div class="changeXian"></div>
+        </div>
+        <div class="changeRow" @click="toType('book')">
+          <span>PUBLISHING&emsp;BOOKS</span>
+          <p>出版书籍</p>
+          <div class="changeXian"></div>
+        </div>
+        <!-- <div :class="['item1','item',{'cur':cur==0}]" @mouseover="open(0)" @mouseout="close()" @click="toType('recentNews')">
          <p class="Ztit">近 期 新 闻</p>
          <p class="Etit">RECENT NEWS</p>
         </div>
@@ -69,7 +89,7 @@
         <div :class="['item4','item',{'cur':cur==3}]" @mouseover="open(3)" @mouseout="close()" @click="toType('book')">
           <p class="Ztit">出 版 书 籍</p>
          <p class="Etit">PUBLISHING BOOKS</p>
-        </div>
+        </div> -->
       </div>
     </div>
   </div>

src/pages/service/service.vue

@@ -3,19 +3,28 @@
   <div class="service">
     <img class="bg" :src="require('@/assets/images/bg2.png')" alt="" />
     <div class="content">
-      <div class="title">
+      <!-- <div class="title">
         <span>服务</span>
-      </div>
-       <div class="list">
-        <div :class="['item1','item',{'cur':cur==0}]" @mouseover="open(0)" @mouseout="close()" @click="toType('guide')">
+      </div> -->
+      <div class="list changeList" style="padding: 46px 0 0 70px">
+        <div class="changeRow" @click="toType('guide')" style="margin-right: 286px;">
+          <span>VISITOR&emsp;GUIDE</span>
+          <p>参观指南</p>
+          <div class="changeXian"></div>
+        </div>
+        <div class="changeRow" @click="toType('message')">
+          <span>PASSENGER&emsp;MESSAGE</span>
+          <p>观众留言</p>
+          <div class="changeXian"></div>
+        </div>
+        <!-- <div :class="['item1','item',{'cur':cur==0}]" @mouseover="open(0)" @mouseout="close()" @click="toType('guide')">
          <p class="Ztit">参 观 指 南</p>
          <p class="Etit">VISITOR GUIDE</p>
         </div>
         <div :class="['item2','item',{'cur':cur==1}]" @mouseover="open(1)" @mouseout="close()" @click="toType('message')">
           <p class="Ztit">观 众 留 言</p>
          <p class="Etit">PASSENGER MESSAGE</p>
-        </div>
-
+        </div> -->
       </div>
     </div>
   </div>
@@ -107,101 +116,105 @@ export default {
     z-index: -1;
   }
   .content {
-    width:100%;
-    margin:0 auto;
-     .title {
-      width:100%;
-      text-align:center;
-      margin:107px auto 80px;
+    width: 100%;
+    margin: 0 auto;
+    .title {
+      width: 100%;
+      text-align: center;
+      margin: 107px auto 80px;
       span {
-        font-size:36px;
+        font-size: 36px;
         font-family: "Source Han Serif CN";
-        color:rgba(148, 83, 53, 1);
+        color: rgba(148, 83, 53, 1);
         font-weight: bold;
         display: flex;
         justify-content: center;
         align-items: center;
         &:before {
-          content:'';
-          display:inline-block;
-          width:27px;
-          height:36px;
-          background:url(../../assets/images/icon-tit-left.png)center/100% no-repeat;
-          margin-right:20px;
+          content: "";
+          display: inline-block;
+          width: 27px;
+          height: 36px;
+          background: url(../../assets/images/icon-tit-left.png) center/100%
+            no-repeat;
+          margin-right: 20px;
         }
         &:after {
-          content:'';
-          display:inline-block;
-          width:27px;
-          height:36px;
-          background:url(../../assets/images/icon-tit-right.png)center/100% no-repeat;
-          margin-left:20px;
+          content: "";
+          display: inline-block;
+          width: 27px;
+          height: 36px;
+          background: url(../../assets/images/icon-tit-right.png) center/100%
+            no-repeat;
+          margin-left: 20px;
         }
       }
     }
     .list {
-      display:flex;
+      display: flex;
       justify-content: center;
-      margin-bottom:100px;
-      height:571px;
+      margin-bottom: 100px;
+      height: 571px;
       overflow: hidden;
       .item {
-        position:relative;
-        width:253px;
-        height:571px;
+        position: relative;
+        width: 253px;
+        height: 571px;
         transition: all 0.2s ease-in;
-        float:left;
+        float: left;
         &.item1 {
-          background:url(../../assets/images/16.png)center center/644px no-repeat;
+          background: url(../../assets/images/16.png) center center/644px
+            no-repeat;
         }
         &.item2 {
-          background:url(../../assets/images/17.png)center center/644px no-repeat;
+          background: url(../../assets/images/17.png) center center/644px
+            no-repeat;
         }
 
         &.cur {
-          width:644px;
+          width: 644px;
           &:after {
-            position:absolute;
-            display:block;
-            content:"";
-            width:100%;
-            height:100%;
-            background:rgba(0,0,0,0.5);
+            position: absolute;
+            display: block;
+            content: "";
+            width: 100%;
+            height: 100%;
+            background: rgba(0, 0, 0, 0.5);
           }
           .Ztit {
-            left:80px;
-            z-index:2;
+            left: 80px;
+            z-index: 2;
             &:after {
-              content:"";
-              display:inline-block;
-              width:40px;
-              height:40px;
-              background:url(../../assets/images/btn.png)center/100% no-repeat;
-              margin-top:22px;
+              content: "";
+              display: inline-block;
+              width: 40px;
+              height: 40px;
+              background: url(../../assets/images/btn.png) center/100% no-repeat;
+              margin-top: 22px;
             }
           }
           .Etit {
-            left:58px;
-            z-index:2;
+            left: 58px;
+            z-index: 2;
           }
         }
         .Ztit {
-          position:absolute;
-          left:56px;
-          top:50px;
-          font-size:40px;
-          writing-mode:tb-rl;
-          color:rgba(243, 238, 230, 1);
+          position: absolute;
+          left: 56px;
+          top: 50px;
+          font-size: 40px;
+          writing-mode: tb-rl;
+          color: rgba(243, 238, 230, 1);
           transition: all 0.2s ease-in;
           font-family: "Source Han Serif CN";
           font-weight: bold;
         }
         .Etit {
-          position:absolute;
-          top:54px;
-          left:28px;
-          color:rgba(243, 238, 230, 1);
-          font-size:12px;
+          position: absolute;
+          top: 54px;
+          left: 28px;
+          color: rgba(243, 238, 230, 1);
+          font-size: 12px;
           writing-mode: tb-rl;
           transition: all 0.2s ease-in;
           font-family: "Source Han Serif CN";

src/pages/survey/survey.vue

@@ -3,23 +3,53 @@
   <div class="survey">
     <img class="bg" :src="require('@/assets/images/bg2.png')" alt="" />
     <div class="content">
-      <div class="title">
+      <!-- <div class="title">
         <span>概况</span>
-      </div>
-      
-      <div class="list">
-        <div :class="['item1','item',{'cur':cur==0}]" @mouseover="open(0)" @mouseout="close" @click="toType('introduction')">
-         <p class="Ztit">本 馆 介 绍</p>
-         <p class="Etit">THE INTRODUCTION</p>
+      </div> -->
+
+      <div class="list changeList" style="padding: 46px 0 0 70px;">
+        <div class="changeRow" @click="toType('introduction')">
+          <span>THE&emsp;INTRODUCTION</span>
+          <p>本馆介绍</p>
+          <div class="changeXian"></div>
+        </div>
+        <div class="changeRow" @click="toType('history')">
+          <span>THE&emsp;HISTORY</span>
+          <p>历史沿革</p>
+          <div class="changeXian"></div>
+        </div>
+        <div class="changeRow" @click="toType('mechanism')">
+          <span>THE&emsp;FUNCTIONS</span>
+          <p>机构职能</p>
+          <div class="changeXian"></div>
+        </div>
+        <!-- <div
+          :class="['item1', 'item', { cur: cur == 0 }]"
+          @mouseover="open(0)"
+          @mouseout="close"
+          @click="toType('introduction')"
+        >
+          <p class="Ztit">本 馆 介 绍</p>
+          <p class="Etit">THE INTRODUCTION</p>
         </div>
-        <div :class="['item2','item',{'cur':cur==1}]" @mouseover="open(1)" @mouseout="close"  @click="toType('history')">
+        <div
+          :class="['item2', 'item', { cur: cur == 1 }]"
+          @mouseover="open(1)"
+          @mouseout="close"
+          @click="toType('history')"
+        >
           <p class="Ztit">历 史 沿 革</p>
-         <p class="Etit">THE HISTORY</p>
+          <p class="Etit">THE HISTORY</p>
         </div>
-        <div :class="['item3','item',{'cur':cur==2}]" @mouseover="open(2)" @mouseout="close" @click="toType('mechanism')">
+        <div
+          :class="['item3', 'item', { cur: cur == 2 }]"
+          @mouseover="open(2)"
+          @mouseout="close"
+          @click="toType('mechanism')"
+        >
           <p class="Ztit">机 构 职 能</p>
-         <p class="Etit">THE FUNCTIONS</p>
-        </div>
+          <p class="Etit">THE FUNCTIONS</p>
+        </div> -->
       </div>
     </div>
   </div>
@@ -37,7 +67,7 @@ export default {
     // 这里存放数据
     return {
       // 控制选中的文字的颜色
-      cur:-1,
+      cur: -1,
       select: '',
       introductionHover: false,
       historyHover: false,
@@ -53,11 +83,11 @@ export default {
     toType (type) {
       this.$router.push({ path: '/survey-type', query: { type } })
     },
-    open(num) {
-      this.cur = num;
+    open (num) {
+      this.cur = num
     },
-    close() {
-      this.cur = -1;
+    close () {
+      this.cur = -1
     },
     mouseOver (type) {
       // 鼠标移动文字的颜色改变
@@ -119,107 +149,113 @@ export default {
     width: 100%;
     margin: 0 auto;
     .title {
-      width:100%;
-      text-align:center;
-      margin:107px auto 80px;
+      width: 100%;
+      text-align: center;
+      margin: 107px auto 80px;
       span {
-        font-size:36px;
+        font-size: 36px;
         font-family: "Source Han Serif CN";
-        color:rgba(148, 83, 53, 1);
+        color: rgba(148, 83, 53, 1);
         font-weight: bold;
         display: flex;
         justify-content: center;
         align-items: center;
         &:before {
-          content:'';
-          display:inline-block;
-          width:27px;
-          height:36px;
-          background:url(../../assets/images/icon-tit-left.png)center/100% no-repeat;
-          margin-right:20px;
+          content: "";
+          display: inline-block;
+          width: 27px;
+          height: 36px;
+          background: url(../../assets/images/icon-tit-left.png) center/100%
+            no-repeat;
+          margin-right: 20px;
         }
         &:after {
-          content:'';
-          display:inline-block;
-          width:27px;
-          height:36px;
-          background:url(../../assets/images/icon-tit-right.png)center/100% no-repeat;
-          margin-left:20px;
-        }       
+          content: "";
+          display: inline-block;
+          width: 27px;
+          height: 36px;
+          background: url(../../assets/images/icon-tit-right.png) center/100%
+            no-repeat;
+          margin-left: 20px;
+        }
       }
     }
     .list {
-      display:flex;
+      display: flex;
       justify-content: center;
-      margin-bottom:100px;
-      height:571px;
+      margin-bottom: 100px;
+      height: 571px;
       overflow: hidden;
       .item {
-        position:relative;
-        width:253px;
-        height:571px;
+        position: relative;
+        width: 253px;
+        height: 571px;
         transition: all 0.2s ease-in;
-        float:left;
+        float: left;
         &.item1 {
-          background:url(../../assets/images/1-on.png)left center/571px no-repeat;
+          background: url(../../assets/images/1-on.png) left center/571px
+            no-repeat;
         }
         &.item2 {
-          background:url(../../assets/images/2-on.png)right center/571px no-repeat;
+          background: url(../../assets/images/2-on.png) right center/571px
+            no-repeat;
         }
         &.item3 {
-          background:url(../../assets/images/3-on.png)center center/571px no-repeat;
+          background: url(../../assets/images/3-on.png) center center/571px
+            no-repeat;
         }
-        
+
         &.cur {
-          width:571px;
+          width: 571px;
           &:after {
-            position:absolute;
-            display:block;
-            content:"";
-            width:100%;
-            height:100%;
-            background:rgba(0,0,0,0.5);
+            position: absolute;
+            display: block;
+            content: "";
+            width: 100%;
+            height: 100%;
+            background: rgba(0, 0, 0, 0.5);
           }
           .Ztit {
-            left:80px;
-            z-index:2;
+            left: 80px;
+            z-index: 2;
             &:after {
-              content:"";
-              display:inline-block;
-              width:40px;
-              height:40px;
-              background:url(../../assets/images/btn.png)center/100% no-repeat;
-              margin-top:22px;
+              content: "";
+              display: inline-block;
+              width: 40px;
+              height: 40px;
+              background: url(../../assets/images/btn.png) center/100% no-repeat;
+              margin-top: 22px;
             }
           }
           .Etit {
-            left:58px;
-            z-index:2;
+            left: 58px;
+            z-index: 2;
           }
         }
         .Ztit {
-          position:absolute;
-          left:56px;
-          top:50px;
-          font-size:40px;
-          writing-mode:tb-rl;
-          color:rgba(243, 238, 230, 1);
+          position: absolute;
+          left: 56px;
+          top: 50px;
+          font-size: 40px;
+          writing-mode: tb-rl;
+          color: rgba(243, 238, 230, 1);
           transition: all 0.2s ease-in;
           font-family: "Source Han Serif CN";
           font-weight: bold;
         }
         .Etit {
-          position:absolute;
-          top:54px;
-          left:28px;
-          color:rgba(243, 238, 230, 1);
-          font-size:12px;
+          position: absolute;
+          top: 54px;
+          left: 28px;
+          color: rgba(243, 238, 230, 1);
+          font-size: 12px;
           writing-mode: tb-rl;
           transition: all 0.2s ease-in;
           font-family: "Source Han Serif CN";
         }
       }
     }
+
   }
 }
 </style>