feat: 关于-参观

public/staticConfig.js

@@ -68,5 +68,39 @@ var staticConfig = {
     annualReport: '',
     // 计划
     planning: '',
-  }
+  },
+
+  // ## 参观
+  // ### 交通路线
+  trafficList: [
+    {
+      cn: '公交线路',
+      en: 'bus',
+      desc: '可乘无锡712路、721路、710路、708路、732路、鹅湖810路、苏州83路至无锡慈善博物馆(荡口古镇)',
+    },
+    {
+      cn: '周边机场',
+      en: 'plane',
+      desc: `（1）无锡苏南硕放国际机场--机场1号线--火车站712路(鹅湖镇)
+          （2）新桥站无锡苏南硕放国际机场--机场1号线--火车站708路荡口古镇站
+          （3）上海虹桥国际机场--地铁10号线--虹桥火车站--高铁--京沪高铁无锡东站--732路--(鹅湖镇)新桥站
+          （4）上海虹桥国际机场--地铁10号线--虹桥火车站--高铁--京沪高铁无锡东站--708路--荡口古镇站
+        `,
+    }, {
+      cn: '无锡火车站(汽车客运站)',
+      en: 'train',
+      desc: `（1）无锡火车站(汽车客运站)--712路--(鹅湖镇)新桥站
+        （2）无锡火车站(汽车客运站)--708路--荡口古镇站
+        （3）无锡火车站(汽车客运站)--乘坐地铁2号线(往无锡东站方向)--732路--(鹅湖镇)新桥站
+        （4）无锡火车站(汽车客运站)--乘坐地铁2号线(往无锡东站方向)--708路--荡口古镇站
+      `,
+    }, {
+      cn: '京沪高铁无锡东站',
+      en: 'train2',
+      desc: `（1）京沪高铁无锡东站--732路--(鹅湖镇)新桥站
+        （2）京沪高铁无锡东站--708路--荡口古镇站
+        （3）京沪高铁无锡东站--710路--荡口古镇东大门 8:40-17:40
+      `,
+    },
+  ]
 }

src/App.vue

@@ -25,7 +25,7 @@
               active: $route.meta.tabIdx === 0
             }"
             @click="$router.push({
-              name: 'AboutView'
+              name: 'InstitutionView'
             })"
           >
             关于博物馆

src/views/about/InstitutionView.vue

@@ -1,5 +1,7 @@
 <template>
-  <div class="institution-view">
+  <div
+    class="institution-view"
+  >
     <div class="page-1">
       <div class="text-wrap">
         <img
@@ -27,7 +29,9 @@
         text-en="MEMBER"
       />
       <div class="splitter" />
-      <ul class="table">
+      <ul
+        class="table"
+      >
         <li
           v-for="(item, idx) in memberList"
           :key="idx"

src/views/about/VisitView.vue

@@ -1,71 +1,63 @@
 <template>
-  <div class="about-view">
-    <menu
-      class="tab-bar"
-    >
-      <button
-        :class="{
-          active: $route.meta.aboutTabIdx === 0
-        }"
-        @click="$router.push({
-          name: 'InstitutionView'
-        })"
+  <div class="visit">
+    <div class="wrapper">
+      <img
+        class="bg-cloud"
+        src="@/assets/images/about/img_cloud.png"
+        alt=""
+        draggable="false"
       >
-        机构
-      </button>
-      <button
-        :class="{
-          active: $route.meta.aboutTabIdx === 1
-        }"
-        @click="$router.push({
-          name: 'VisitView'
-        })"
+      <TableTitle
+        class="title"
+        text-cn="预约说明"
+        text-en="RESERVATION INSTRUCTIONS"
+      />
+      <img
+        class="ticket"
+        src="@/assets/images/about/visit-ticket.png"
+        alt=""
+        draggable="false"
       >
-        参观
-      </button>
-      <button
-        :class="{
-          active: $route.meta.aboutTabIdx === 2
-        }"
-        @click="$router.push({
-          name: 'ExhibitionView'
-        })"
-      >
-        展览
-      </button>
-      <button
-        :class="{
-          active: $route.meta.aboutTabIdx === 3
-        }"
-        @click="$router.push({
-          name: 'ServiceView'
-        })"
-      >
-        服务
-      </button>
-      <button
-        :class="{
-          active: $route.meta.aboutTabIdx === 4
-        }"
-        @click="$router.push({
-          name: 'ConsultView'
-        })"
-      >
-        咨询
-      </button>
-      <button
-        :class="{
-          active: $route.meta.aboutTabIdx === 5
-        }"
-        @click="$router.push({
-          name: 'CollectionView'
-        })"
-      >
-        典藏
-      </button>
-    </menu>
-
-    <router-view />
+      <TableTitle
+        class="title"
+        text-cn="交通路线"
+        text-en="TRANSPORTATION ROUTES"
+      />
+      <iframe
+        class="map"
+        src="https://uri.amap.com/marker?position=120.553256,31.523042&name=无锡慈善博物馆"
+      />
+      <menu class="traffic-switch">
+        <button
+          v-for="(item, idx) in trafficList"
+          :key="idx"
+          :class="{
+            active: activeTrafficIdx === idx
+          }"
+          @click="activeTrafficIdx = idx"
+        >
+          <img
+            class="icon normal"
+            :src="require(`@/assets/images/about/icon_${item.en}_normal.png`)"
+            alt=""
+            draggable="false"
+          >
+          <img
+            class="icon active"
+            :src="require(`@/assets/images/about/icon_${item.en}_active.png`)"
+            alt=""
+            draggable="false"
+          >
+          <div class="text">
+            {{ item.cn }}
+          </div>
+        </button>
+      </menu>
+      <div class="splitter" />
+      <p class="traffic-desc">
+        {{ trafficList[activeTrafficIdx].desc }}
+      </p>
+    </div>
   </div>
 </template>
 
@@ -79,14 +71,110 @@ const router = useRouter()
 const store = useStore()
 
 const $env = inject('$env')
+
+const trafficList = staticConfig.trafficList
+const activeTrafficIdx = ref(0)
+
 </script>
 
 <style lang="less" scoped>
-.about-view{
+.visit{
   position: absolute;
   left: 0;
   top: 0;
   width: 100%;
   height: 100%;
+  overflow: auto;
+  padding-top: 80px;
+  background: linear-gradient( 180deg, rgba(88,148,152,0) 0%, rgba(88,148,152,0.5) 100%);
+  background-color: #fff;
+  z-index: 0;
+  >.wrapper{
+    position: relative;
+    padding-bottom: ;
+    >img.bg-cloud{
+      position: absolute;
+      bottom: 0;
+      left: 0;
+      width: 100%;
+      z-index: -1;
+    }
+    >.title{
+      margin-left: calc(242 / 1920 * 100vw);
+    }
+    >img.ticket{
+      width: 100%;
+    }
+    >iframe.map{
+      margin-top: 36px;
+      margin-left: calc(233 / 1920 * 100vw);
+      width: calc(1459 / 1920 * 100vw);
+      height: calc(809 / 1920 * 100vw);
+      border: 15px solid #cedede;
+    }
+    >menu.traffic-switch{
+      margin-top: 62px;
+      display: flex;
+      justify-content: center;
+      align-items: center;
+      gap: calc(220 / 1920 * 100vw);
+      >button{
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+        >img.icon{
+          width: calc(100 / 1920 * 100vw);
+          height: calc(100 / 1920 * 100vw);
+        }
+        >img.icon.normal{
+        }
+        >img.icon.active{
+          display: none;
+        }
+        >.text{
+          margin-top: calc(7 / 1920 * 100vw);
+          font-family: Source Han Sans CN, Source Han Sans CN;
+          font-weight: bold;
+          font-size: calc(18 / 1920 * 100vw);
+          color: #589498;
+        }
+      }
+      >button.active, button:hover{
+        >img.icon.normal{
+          display: none;
+        }
+        >img.icon.active{
+          display: initial;
+        }
+        >.text{
+          color: #D7C78E;
+        }
+      }
+    }
+    >.splitter{
+      margin-top: 25px;
+      margin-left: auto;
+      margin-right: auto;
+      width: calc(1261 / 1920 * 100vw);
+      height: 0px;
+      border-top: 1px dashed #589498;
+    }
+    >p.traffic-desc{
+      margin-top: 40px;
+      padding-bottom: 20px;
+      width: calc(1075 / 1920 * 100vw);
+      height: 150px;
+      overflow: auto;
+      margin-left: auto;
+      margin-right: auto;
+      font-family: Source Han Sans CN, Source Han Sans CN;
+      font-weight: 400;
+      font-size: 18px;
+      color: #589498;
+      line-height: 29px;
+      text-align: justified;
+      white-space: pre-line;
+    }
+  }
 }
 </style>