搞搞搞

public/staticConfig.js

@@ -102,5 +102,42 @@ var staticConfig = {
         （3）京沪高铁无锡东站--710路--荡口古镇东大门 8:40-17:40
       `,
     },
+  ],
+
+  // ## 展览
+  exhibitionList: [
+    {
+      name: '',
+      address: '',
+      date: '',
+      thumb: '',
+      type: '',
+    }
+  ],
+
+  // ## 服务
+  serviceList: [
+    {
+      title: '服务中心',
+      desc: `无锡慈善博物馆服务中心位于正大门入口处西侧，提供咨询、大件行李寄存、童车和轮椅租借、志愿讲解服务等基本服务。`,
+    },
+    {
+      title: '票务',
+      desc: `无锡慈善博物馆周二至周日常年开放，周一闭馆（除法定节假日）。采用“全员预约参观”机制`,
+    },
+    {
+      title: '志愿讲解',
+      desc: `免费讲解（以咨询台当日公布信息为准）：
+      时间：上午10:00 下午14:00
+      地点：基本陈列展厅
+      * 请提前十五分钟持有效证件到提供讲解的场馆咨询台办理相关手续，每场30人。`,
+    },
+    {
+      title: '志愿者',
+      desc: `如果您热爱博物馆事业，热心公益活动，请加入到我们的队伍中来吧！
+      
+      服务中心电话：
+      0510-88525059`,
+    },
   ]
 }

src/views/about/ExhibitionView.vue

@@ -1,71 +1,49 @@
 <template>
-  <div class="about-view">
-    <menu
-      class="tab-bar"
+  <div class="exhibition-view">
+    <img
+      class="banner"
+      src="@/assets/images/about/banner_03.jpg"
+      alt=""
+      draggable="false"
     >
+    <div class="tab-bar">
       <button
+        class="tab-item"
         :class="{
-          active: $route.meta.aboutTabIdx === 0
+          active: activeTabIdx === 0
         }"
-        @click="$router.push({
-          name: 'InstitutionView'
-        })"
+        @click="activeTabIdx = 0"
       >
-        机构
+        全部
       </button>
       <button
+        class="tab-item"
         :class="{
-          active: $route.meta.aboutTabIdx === 1
+          active: activeTabIdx === 1
         }"
-        @click="$router.push({
-          name: 'VisitView'
-        })"
+        @click="activeTabIdx = 1"
       >
-        参观
+        基本陈列
       </button>
       <button
+        class="tab-item"
         :class="{
-          active: $route.meta.aboutTabIdx === 2
+          active: activeTabIdx === 2
         }"
-        @click="$router.push({
-          name: 'ExhibitionView'
-        })"
+        @click="activeTabIdx = 2"
       >
-        展览
+        专题展览
       </button>
       <button
+        class="tab-item"
         :class="{
-          active: $route.meta.aboutTabIdx === 3
+          active: activeTabIdx === 3
         }"
-        @click="$router.push({
-          name: 'ServiceView'
-        })"
+        @click="activeTabIdx = 3"
       >
-        服务
+        主题临展
       </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 />
+    </div>
   </div>
 </template>
 
@@ -79,14 +57,32 @@ const router = useRouter()
 const store = useStore()
 
 const $env = inject('$env')
+
+const activeTabIdx = ref(0)
+
 </script>
 
 <style lang="less" scoped>
-.about-view{
-  position: absolute;
-  left: 0;
-  top: 0;
-  width: 100%;
-  height: 100%;
+.exhibition-view{
+  background-color: #fff;
+  .banner{
+    width: 100%;
+  }
+  .tab-bar{
+    height: 138px;
+    display: flex;
+    justify-content: center;
+    text-align: center;
+    gap: calc(184 / 1920 * 100vw);
+    >.tab-item {
+      font-family: Source Han Sans CN, Source Han Sans CN;
+      font-weight: 400;
+      font-size: 24px;
+      color: #474747;
+    }
+    >.tab-item.active{
+      font-weight: bold;
+    }
+  }
 }
 </style>

src/views/about/ServiceView.vue

@@ -1,71 +1,57 @@
 <template>
-  <div class="about-view">
-    <menu
-      class="tab-bar"
-    >
-      <button
-        :class="{
-          active: $route.meta.aboutTabIdx === 0
-        }"
-        @click="$router.push({
-          name: 'InstitutionView'
-        })"
-      >
-        机构
-      </button>
-      <button
-        :class="{
-          active: $route.meta.aboutTabIdx === 1
-        }"
-        @click="$router.push({
-          name: 'VisitView'
-        })"
-      >
-        参观
-      </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'
-        })"
+  <div class="service-view">
+    <div class="wrapper">
+      <img
+        class="bg-cloud"
+        src="@/assets/images/about/img_cloud.png"
+        alt=""
+        draggable="false"
       >
-        服务
-      </button>
-      <button
-        :class="{
-          active: $route.meta.aboutTabIdx === 4
-        }"
-        @click="$router.push({
-          name: 'ConsultView'
-        })"
+      <TableTitle
+        class="table-title"
+        text-cn="服务说明"
+        text-en="SERVICE DESCRIPTION"
+      />
+      <div class="card-list">
+        <div
+          v-for="(item, index) in serviceList"
+          :key="index"
+          class="card"
+        >
+          <h2 class="title">
+            {{ item.title }}
+          </h2>
+          <img
+            class="icon"
+            :src="require(`@/assets/images/about/${item.title}.png`)"
+            alt=""
+            draggable="false"
+          >
+          <div class="desc">
+            {{ serviceList[index].desc }}
+          </div>
+        </div>
+      </div>
+    </div>
+    <button
+      ref="qrCodeRef"
+      class="qr-code"
+      @click="isShowQrCode = true"
+    >
+      <img
+        class="icon"
+        src="@/assets/images/about/icon-qr-code.png"
+        alt=""
+        draggable="false"
       >
-        咨询
-      </button>
-      <button
-        :class="{
-          active: $route.meta.aboutTabIdx === 5
-        }"
-        @click="$router.push({
-          name: 'CollectionView'
-        })"
+      <img
+        v-show="isShowQrCode"
+        class="qr-code"
+        src="@/assets/images/about/qr-code.png"
+        alt=""
+        draggable="false"
       >
-        典藏
-      </button>
-    </menu>
-
-    <router-view />
+    </button>
   </div>
 </template>
 
@@ -73,20 +59,107 @@
 import { ref, computed, watch, onMounted, onBeforeUnmount, inject } from "vue"
 import { useRoute, useRouter } from "vue-router"
 import { useStore } from "vuex"
+import { onClickOutside } from '@vueuse/core'
 
 const route = useRoute()
 const router = useRouter()
 const store = useStore()
 
 const $env = inject('$env')
+
+const serviceList = staticConfig.serviceList
+
+const qrCodeRef = ref(null)
+const isShowQrCode = ref(false)
+onClickOutside(qrCodeRef, event => {
+  isShowQrCode.value = false
+})
 </script>
 
 <style lang="less" scoped>
-.about-view{
+.service-view{
   position: absolute;
   left: 0;
   top: 0;
   width: 100%;
   height: 100%;
+  background: linear-gradient( 180deg, rgba(88,148,152,0) 0%, rgba(88,148,152,0.3) 100%);
+  background-color: #fff;
+  z-index: 0;
+  >.wrapper{
+    position: relative;
+    height: 100%;
+    padding-top: 80px;
+    >img.bg-cloud{
+      position: absolute;
+      bottom: -72px;
+      left: 0;
+      width: 100%;
+      z-index: -1;
+    }
+    >.table-title{
+      margin-left: calc(220 / 1920 * 100vw);
+    }
+    >.card-list{
+      margin-top: 20px;
+      display: flex;
+      justify-content: center;
+      align-items: center;
+      >.card{
+        display: inline-block;
+        width: calc(387 / 1920 * 100vw);
+        height: calc(548 / 1920 * 100vw);
+        background-image: url(@/assets/images/about/service-card-bg.png);
+        background-size: cover;
+        background-repeat: no-repeat;
+        background-position: center center;
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+        >.title{
+          font-family: Source Han Serif CN, Source Han Serif CN;
+          font-weight: bold;
+          font-size: calc(24 / 1920 * 100vw);
+          color: #FFE49D;
+          margin-top: calc(60 / 1920 * 100vw);
+        }
+        >img.icon{
+          width: calc(100 / 1920 * 100vw);
+          height: calc(100 / 1920 * 100vw);
+          margin-top: calc(76 / 1920 * 100vw);
+        }
+        >.desc{
+          width: calc(231 / 1920 * 100vw);;
+          margin-top: calc(122 / 1920 * 100vw);
+          transform: translateY(-50%);
+          font-family: Source Han Sans CN, Source Han Sans CN;
+          font-weight: 400;
+          font-size: calc(18 / 1920 * 100vw);
+          color: #474747;
+          line-height: calc(29 / 1920 * 100vw);
+          white-space: pre-line;
+        }
+      }
+    }
+  }
+  >button.qr-code{
+    position: absolute;
+    right: 21px;
+    bottom: 139px;
+    width: 60px;
+    height: 60px;
+    background: #589498;
+    border-radius: 50%;
+    >img.icon{
+      width: 65%;
+      height: 65%;
+    }
+    >img.qr-code{
+      position: absolute;
+      right: 100%;
+      top: 0;
+      width: 160px;
+    }
+  }
 }
 </style>

src/views/about/VisitView.vue

@@ -1,5 +1,7 @@
 <template>
-  <div class="visit">
+  <div
+    class="visit"
+  >
     <div class="wrapper">
       <img
         class="bg-cloud"
@@ -24,10 +26,13 @@
         text-en="TRANSPORTATION ROUTES"
       />
       <iframe
+        ref="iframeRef"
         class="map"
-        src="https://uri.amap.com/marker?position=120.553256,31.523042&name=无锡慈善博物馆"
+        :src="iframeSrc"
       />
-      <menu class="traffic-switch">
+      <menu
+        class="traffic-switch"
+      >
         <button
           v-for="(item, idx) in trafficList"
           :key="idx"
@@ -65,6 +70,7 @@
 import { ref, computed, watch, onMounted, onBeforeUnmount, inject } from "vue"
 import { useRoute, useRouter } from "vue-router"
 import { useStore } from "vuex"
+import { useIntersectionObserver } from '@vueuse/core'
 
 const route = useRoute()
 const router = useRouter()
@@ -72,6 +78,23 @@ const store = useStore()
 
 const $env = inject('$env')
 
+const iframeRef = ref(null)
+const isIframeVisible = ref(false)
+const iframeSrc = ref('')
+const { stop } = useIntersectionObserver(
+  iframeRef,
+  (info, observerElement) => {
+    isIframeVisible.value = info[0].isIntersecting
+    if (isIframeVisible.value) {
+      iframeSrc.value = `https://uri.amap.com/marker?position=120.553256,31.523042&name=无锡慈善博物馆`
+      stop()
+    }
+  },
+)
+onBeforeUnmount(() => {
+  stop()
+})
+
 const trafficList = staticConfig.trafficList
 const activeTrafficIdx = ref(0)
 
@@ -86,15 +109,14 @@ const activeTrafficIdx = ref(0)
   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: linear-gradient( 180deg, rgba(88,148,152,0) 0%, rgba(88,148,152,0.3) 100%);
   background-color: #fff;
   z-index: 0;
   >.wrapper{
     position: relative;
-    padding-bottom: ;
     >img.bg-cloud{
       position: absolute;
-      bottom: 0;
+      bottom: -72px;
       left: 0;
       width: 100%;
       z-index: -1;