1 年之前 · 39fc77ad1f
--- a/.eslintrc.js
+++ b/.eslintrc.js
@@ -52,5 +52,6 @@ module.exports = {
 
				     useSizeAdapt: true,
			
 
				     defineProps: true,
			
 
				     defineEmits: true,
			
 
				+    staticConfig: true,
			
 
				   }
			
 
				 }
			
--- a/public/index.html
+++ b/public/index.html
@@ -8,6 +8,8 @@
 
				     <title>锡善云城</title>
			
 
				   </head>
			
 
				   <body>
			
 
				+    <script src="./staticConfig.js"></script>
			
 
				+
			
 
				     <!-- <script src="https://cdn.bootcss.com/vConsole/3.2.0/vconsole.min.js"></script> -->
			
 
				     <noscript>
			
 
				       <strong>We're sorry but <%= htmlWebpackPlugin.options.title %> doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
			
--- a/public/staticConfig.js
+++ b/public/staticConfig.js
--- a/src/App.vue
+++ b/src/App.vue
@@ -22,6 +22,16 @@
 
				         >
			
 
				           <button
			
 
				             :class="{
			
 
				+              active: $route.meta.tabIdx === 0
			
 
				+            }"
			
 
				+            @click="$router.push({
			
 
				+              name: 'AboutView'
			
 
				+            })"
			
 
				+          >
			
 
				+            关于博物馆
			
 
				+          </button>
			
 
				+          <button
			
 
				+            :class="{
			
 
				               active: $route.meta.tabIdx === 1
			
 
				             }"
			
 
				             @click="$router.push({
			
--- a/src/assets/images/about/banner_01.jpg
+++ b/src/assets/images/about/banner_01.jpg
--- a/src/assets/images/about/institu-p3-bg.jpg
+++ b/src/assets/images/about/institu-p3-bg.jpg
--- a/src/assets/images/about/institu-p3-button-active-deco.png
+++ b/src/assets/images/about/institu-p3-button-active-deco.png
--- a/src/assets/images/about/title_museum.png
+++ b/src/assets/images/about/title_museum.png
--- a/src/components/TableTitle.vue
+++ b/src/components/TableTitle.vue
@@ -0,0 +1,65 @@
 
				+<template>

			
 
				+  <div class="table-title">

			
 
				+    <h1 class="cn">

			
 
				+      {{ props.textCn }}

			
 
				+      <div class="deco" />

			
 
				+    </h1>

			
 
				+    <h1 class="en">

			
 
				+      {{ props.textEn }}

			
 
				+    </h1>

			
 
				+  </div>

			
 
				+</template>

			
 
				+

			
 
				+<script setup>

			
 
				+// import { ref, computed, watch, onMounted, onBeforeUnmount, inject } from "vue"

			
 
				+// import { useRoute, useRouter } from "vue-router"

			
 
				+// import { useStore } from "vuex"

			
 
				+

			
 
				+// const route = useRoute()

			
 
				+// const router = useRouter()

			
 
				+// const store = useStore()

			
 
				+

			
 
				+// const $env = inject('$env')

			
 
				+

			
 
				+const props = defineProps({

			
 
				+  textCn: {

			
 
				+    type: String,

			
 
				+    required: true,

			
 
				+  },

			
 
				+  textEn: {

			
 
				+    type: String,

			
 
				+    required: true,

			
 
				+  },

			
 
				+})

			
 
				+</script>

			
 
				+

			
 
				+<style lang="less" scoped>

			
 
				+.table-title{

			
 
				+  display: inline-block;

			
 
				+  >h1.cn{

			
 
				+    font-family: Source Han Sans CN, Source Han Sans CN;

			
 
				+    font-weight: bold;

			
 
				+    font-size: 40px;

			
 
				+    color: #474747;

			
 
				+    position: relative;

			
 
				+    >.deco{

			
 
				+      position: absolute;

			
 
				+      right: -15px;

			
 
				+      bottom: -4px;

			
 
				+      width: 95px;

			
 
				+      height: 14px;

			
 
				+      background: #FFE794;

			
 
				+      z-index: -1;

			
 
				+    }

			
 
				+  }

			
 
				+  >h1.en{

			
 
				+    font-family: Source Han Serif CN, Source Han Serif CN;

			
 
				+    font-weight: bold;

			
 
				+    font-size: 24px;

			
 
				+    color: #474747;

			
 
				+    line-height: 38px;

			
 
				+    opacity: 0.5;

			
 
				+    margin-left: 80px;

			
 
				+  }

			
 
				+}

			
 
				+</style>
			
--- a/src/main.js
+++ b/src/main.js
@@ -12,6 +12,8 @@ import VueViewer from 'v-viewer'
 
				 import ElementPlus from 'element-plus'

			
 
				 import 'element-plus/dist/index.css'

			
 
				 

			
 
				+import TableTitle from '@/components/TableTitle.vue'

			
 
				+

			
 
				 console.log(`version: ${process.env.VUE_APP_VERSION}`)

			
 
				 console.log(`Build time: ${process.env.VUE_APP_UPDATE_TIME}`)

			
 
				 

			
@@ -62,7 +64,7 @@ app.use(store)
 
				   .use(clickOutside)

			
 
				   .use(VueViewer)

			
 
				   .use(ElementPlus)

			
 
				-  // .component('HotSpot', HotSpot)

			
 
				+  .component('TableTitle', TableTitle)

			
 
				   .mount('#app')

			
 
				 

			
 
				 //  you can reset the default options at any other time

			
--- a/src/router/index.js
+++ b/src/router/index.js
@@ -1,5 +1,6 @@
 
				 import { createRouter, createWebHashHistory } from 'vue-router'
			
 
				 import LoginTemp from '../views/LoginTemp.vue'
			
 
				+import AboutView from '../views/about/AboutView.vue'
			
 
				 import HomeView from '../views/HomeView.vue'
			
 
				 import CityOfXishan from '../views/CityOfXishan.vue'
			
 
				 import MuseumView from '../views/MuseumView.vue'
			
@@ -9,6 +10,13 @@ import LoveForest from '../views/LoveForest.vue'
 
				 import CharityHall from '../views/CharityHall.vue'
			
 
				 import ShopView from '@/views/ShopView.vue'
			
 
				 import BannerView from '@/views/BannerView.vue'
			
 
				+import InstitutionView from '@/views/about/InstitutionView.vue'
			
 
				+import VisitView from '@/views/about/VisitView.vue'
			
 
				+import ExhibitionView from '@/views/about/ExhibitionView.vue'
			
 
				+import ServiceView from '@/views/about/ServiceView.vue'
			
 
				+import ConsultView from '@/views/about/ConsultView.vue'
			
 
				+import CollectionView from '@/views/about/CollectionView.vue'
			
 
				+
			
 
				 // import store from '@/store/index.js'
			
 
				 
			
 
				 const routes = [
			
@@ -27,6 +35,64 @@ const routes = [
 
				     component: LoginTemp,
			
 
				   },
			
 
				   {
			
 
				+    path: '/about',
			
 
				+    name: 'AboutView',
			
 
				+    component: AboutView,
			
 
				+    meta: {
			
 
				+      tabIdx: 0
			
 
				+    },
			
 
				+    children: [
			
 
				+      {
			
 
				+        path: 'institution',
			
 
				+        name: 'InstitutionView',
			
 
				+        component: InstitutionView,
			
 
				+        meta: {
			
 
				+          aboutTabIdx: 0
			
 
				+        },
			
 
				+      },
			
 
				+      {
			
 
				+        path: 'visit',
			
 
				+        name: 'VisitView',
			
 
				+        component: VisitView,
			
 
				+        meta: {
			
 
				+          aboutTabIdx: 1
			
 
				+        },
			
 
				+      },
			
 
				+      {
			
 
				+        path: 'exhibition',
			
 
				+        name: 'ExhibitionView',
			
 
				+        component: ExhibitionView,
			
 
				+        meta: {
			
 
				+          aboutTabIdx: 2
			
 
				+        },
			
 
				+      },
			
 
				+      {
			
 
				+        path: 'service',
			
 
				+        name: 'ServiceView',
			
 
				+        component: ServiceView,
			
 
				+        meta: {
			
 
				+          aboutTabIdx: 3
			
 
				+        },
			
 
				+      },
			
 
				+      {
			
 
				+        path: 'consult',
			
 
				+        name: 'ConsultView',
			
 
				+        component: ConsultView,
			
 
				+        meta: {
			
 
				+          aboutTabIdx: 4
			
 
				+        },
			
 
				+      },
			
 
				+      {
			
 
				+        path: 'collection',
			
 
				+        name: 'CollectionView',
			
 
				+        component: CollectionView,
			
 
				+        meta: {
			
 
				+          aboutTabIdx: 5
			
 
				+        },
			
 
				+      },
			
 
				+    ]
			
 
				+  },
			
 
				+  {
			
 
				     path: '/home',
			
 
				     name: 'HomeView',
			
 
				     component: HomeView,
			
--- a/src/views/about/AboutView.vue
+++ b/src/views/about/AboutView.vue
@@ -0,0 +1,121 @@
 
				+<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'

			
 
				+        })"

			
 
				+      >

			
 
				+        服务

			
 
				+      </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>

			
 
				+</template>

			
 
				+

			
 
				+<script setup>

			
 
				+import { ref, computed, watch, onMounted, onBeforeUnmount, inject } from "vue"

			
 
				+import { useRoute, useRouter } from "vue-router"

			
 
				+import { useStore } from "vuex"

			
 
				+

			
 
				+const route = useRoute()

			
 
				+const router = useRouter()

			
 
				+const store = useStore()

			
 
				+

			
 
				+const $env = inject('$env')

			
 
				+</script>

			
 
				+

			
 
				+<style lang="less" scoped>

			
 
				+.about-view{

			
 
				+  position: absolute;

			
 
				+  left: 0;

			
 
				+  top: 0;

			
 
				+  width: 100%;

			
 
				+  height: 100%;

			
 
				+  >menu.tab-bar{

			
 
				+    position: absolute;

			
 
				+    top: 5px;

			
 
				+    left: 0;

			
 
				+    width: 100%;

			
 
				+    height: 51px;

			
 
				+    background: linear-gradient( 90deg, rgba(88,148,152,0.2) 0%, #589498 50%, rgba(88,148,152,0.2) 100%);

			
 
				+    display: flex;

			
 
				+    justify-content: center;

			
 
				+    align-items: center;

			
 
				+    gap: 78px;

			
 
				+    z-index: 1;

			
 
				+    >button{

			
 
				+      flex: 0 0 auto;

			
 
				+      font-family: Source Han Sans CN, Source Han Sans CN;

			
 
				+      font-weight: 400;

			
 
				+      font-size: 18px;

			
 
				+      color: #FFFFFF;

			
 
				+      line-height: 21px;

			
 
				+    }

			
 
				+    >button.active{

			
 
				+      font-family: Source Han Sans CN, Source Han Sans CN;

			
 
				+      font-weight: bold;

			
 
				+      font-size: 18px;

			
 
				+      color: #FFE794;

			
 
				+      line-height: 21px;

			
 
				+      text-shadow: 0px 1px 2px rgba(0,0,0,0.25);

			
 
				+    }

			
 
				+  }

			
 
				+}

			
 
				+</style>
			
--- a/src/views/about/CollectionView.vue
+++ b/src/views/about/CollectionView.vue
@@ -0,0 +1,92 @@
 
				+<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'

			
 
				+        })"

			
 
				+      >

			
 
				+        服务

			
 
				+      </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>

			
 
				+</template>

			
 
				+

			
 
				+<script setup>

			
 
				+import { ref, computed, watch, onMounted, onBeforeUnmount, inject } from "vue"

			
 
				+import { useRoute, useRouter } from "vue-router"

			
 
				+import { useStore } from "vuex"

			
 
				+

			
 
				+const route = useRoute()

			
 
				+const router = useRouter()

			
 
				+const store = useStore()

			
 
				+

			
 
				+const $env = inject('$env')

			
 
				+</script>

			
 
				+

			
 
				+<style lang="less" scoped>

			
 
				+.about-view{

			
 
				+  position: absolute;

			
 
				+  left: 0;

			
 
				+  top: 0;

			
 
				+  width: 100%;

			
 
				+  height: 100%;

			
 
				+}

			
 
				+</style>
			
--- a/src/views/about/ConsultView.vue
+++ b/src/views/about/ConsultView.vue
@@ -0,0 +1,92 @@
 
				+<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'

			
 
				+        })"

			
 
				+      >

			
 
				+        服务

			
 
				+      </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>

			
 
				+</template>

			
 
				+

			
 
				+<script setup>

			
 
				+import { ref, computed, watch, onMounted, onBeforeUnmount, inject } from "vue"

			
 
				+import { useRoute, useRouter } from "vue-router"

			
 
				+import { useStore } from "vuex"

			
 
				+

			
 
				+const route = useRoute()

			
 
				+const router = useRouter()

			
 
				+const store = useStore()

			
 
				+

			
 
				+const $env = inject('$env')

			
 
				+</script>

			
 
				+

			
 
				+<style lang="less" scoped>

			
 
				+.about-view{

			
 
				+  position: absolute;

			
 
				+  left: 0;

			
 
				+  top: 0;

			
 
				+  width: 100%;

			
 
				+  height: 100%;

			
 
				+}

			
 
				+</style>
			
--- a/src/views/about/ExhibitionView.vue
+++ b/src/views/about/ExhibitionView.vue
@@ -0,0 +1,92 @@
 
				+<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'

			
 
				+        })"

			
 
				+      >

			
 
				+        服务

			
 
				+      </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>

			
 
				+</template>

			
 
				+

			
 
				+<script setup>

			
 
				+import { ref, computed, watch, onMounted, onBeforeUnmount, inject } from "vue"

			
 
				+import { useRoute, useRouter } from "vue-router"

			
 
				+import { useStore } from "vuex"

			
 
				+

			
 
				+const route = useRoute()

			
 
				+const router = useRouter()

			
 
				+const store = useStore()

			
 
				+

			
 
				+const $env = inject('$env')

			
 
				+</script>

			
 
				+

			
 
				+<style lang="less" scoped>

			
 
				+.about-view{

			
 
				+  position: absolute;

			
 
				+  left: 0;

			
 
				+  top: 0;

			
 
				+  width: 100%;

			
 
				+  height: 100%;

			
 
				+}

			
 
				+</style>
			
--- a/src/views/about/InstitutionView.vue
+++ b/src/views/about/InstitutionView.vue
@@ -0,0 +1,312 @@
 
				+<template>

			
 
				+  <div class="institution-view">

			
 
				+    <div class="page-1">

			
 
				+      <div class="text-wrap">

			
 
				+        <img

			
 
				+          class="title"

			
 
				+          src="@/assets/images/about/title_museum.png"

			
 
				+          alt=""

			
 
				+          draggable="false"

			
 
				+        >

			
 
				+        <div class="desc-wrap">

			
 
				+          <div class="deco-bar" />

			
 
				+          <div class="desc">

			
 
				+            <p

			
 
				+              v-for="(paragraph, idx) in museumDesc.split('\n')"

			
 
				+              :key="idx"

			
 
				+            >

			
 
				+              {{ paragraph }}

			
 
				+            </p>

			
 
				+          </div>

			
 
				+        </div>

			
 
				+      </div>

			
 
				+    </div>

			
 
				+    <div class="page-2">

			
 
				+      <TableTitle

			
 
				+        text-cn="领导成员"

			
 
				+        text-en="MEMBER"

			
 
				+      />

			
 
				+      <div class="splitter" />

			
 
				+      <ul class="table">

			
 
				+        <li

			
 
				+          v-for="(item, idx) in memberList"

			
 
				+          :key="idx"

			
 
				+        >

			
 
				+          <div class="line">

			
 
				+            <span class="key">{{ item.name }}</span>

			
 
				+            <span

			
 
				+              class="value"

			
 
				+              :title="item.desc"

			
 
				+            >{{ item.desc }}</span>

			
 
				+          </div>

			
 
				+          <div class="line-splitter" />

			
 
				+        </li>

			
 
				+      </ul>

			
 
				+    </div>

			
 
				+    <div class="page-3">

			
 
				+      <TableTitle

			
 
				+        text-cn="管理信息"

			
 
				+        text-en="Management Information"

			
 
				+      />

			
 
				+      <div class="wrapper">

			
 
				+        <menu class="tab-bar">

			
 
				+          <button

			
 
				+            class="tab-item"

			
 
				+            :class="{

			
 
				+              active: p3ActiveTabIdx === 0

			
 
				+            }"

			
 
				+            @click="p3ActiveTabIdx = 0"

			
 
				+          >

			
 
				+            机构

			
 
				+          </button>

			
 
				+          <div class="splitter" />

			
 
				+          <button

			
 
				+            class="tab-item"

			
 
				+            :class="{

			
 
				+              active: p3ActiveTabIdx === 1

			
 
				+            }"

			
 
				+            @click="p3ActiveTabIdx = 1"

			
 
				+          >

			
 
				+            章程

			
 
				+          </button>

			
 
				+          <div class="splitter" />

			
 
				+          <button

			
 
				+            class="tab-item"

			
 
				+            :class="{

			
 
				+              active: p3ActiveTabIdx === 2

			
 
				+            }"

			
 
				+            @click="p3ActiveTabIdx = 2"

			
 
				+          >

			
 
				+            规划

			
 
				+          </button>

			
 
				+          <div class="splitter" />

			
 
				+          <button

			
 
				+            class="tab-item"

			
 
				+            :class="{

			
 
				+              active: p3ActiveTabIdx === 3

			
 
				+            }"

			
 
				+            @click="p3ActiveTabIdx = 3"

			
 
				+          >

			
 
				+            年报

			
 
				+          </button>

			
 
				+          <div class="splitter" />

			
 
				+          <button

			
 
				+            class="tab-item"

			
 
				+            :class="{

			
 
				+              active: p3ActiveTabIdx === 4

			
 
				+            }"

			
 
				+            @click="p3ActiveTabIdx = 4"

			
 
				+          >

			
 
				+            计划

			
 
				+          </button>

			
 
				+        </menu>

			
 
				+        <div class="detail-area">

			
 
				+          <div

			
 
				+            class="inner-wrap"

			
 
				+            v-html="managementInfo[p3ActiveTabIdx]"

			
 
				+          />

			
 
				+        </div>

			
 
				+      </div>

			
 
				+    </div>

			
 
				+  </div>

			
 
				+</template>

			
 
				+

			
 
				+<script setup>

			
 
				+import { ref, computed, watch, onMounted, onBeforeUnmount, inject } from "vue"

			
 
				+import { useRoute, useRouter } from "vue-router"

			
 
				+import { useStore } from "vuex"

			
 
				+

			
 
				+const route = useRoute()

			
 
				+const router = useRouter()

			
 
				+const store = useStore()

			
 
				+

			
 
				+const $env = inject('$env')

			
 
				+

			
 
				+const museumDesc = staticConfig.museumDesc

			
 
				+const memberList = staticConfig.memberList

			
 
				+const managementInfo = [

			
 
				+  staticConfig.managementInfo.institution,

			
 
				+  staticConfig.managementInfo.constitution,

			
 
				+  staticConfig.managementInfo.schedule,

			
 
				+  staticConfig.managementInfo.annualReport,

			
 
				+  staticConfig.managementInfo.planning,

			
 
				+]

			
 
				+

			
 
				+const p3ActiveTabIdx = ref(0)

			
 
				+</script>

			
 
				+

			
 
				+<style lang="less" scoped>

			
 
				+.institution-view{

			
 
				+  position: absolute;

			
 
				+  left: 0;

			
 
				+  top: 0;

			
 
				+  width: 100%;

			
 
				+  height: 100%;

			
 
				+  overflow: auto;

			
 
				+  >.page-1{

			
 
				+    height: 100%;

			
 
				+    background-image: url(@/assets/images/about/banner_01.jpg);

			
 
				+    background-size: cover;

			
 
				+    background-repeat: no-repeat;

			
 
				+    background-position: center center;

			
 
				+    >.text-wrap{

			
 
				+      position: absolute;

			
 
				+      top: 0;

			
 
				+      left: calc(644 / 1920 * 100vw);

			
 
				+      width: 984px;

			
 
				+      height: 100%;

			
 
				+      background: rgba(255,255,255,0.85);

			
 
				+      transform: translate(-50%, 0);

			
 
				+      >img.title{

			
 
				+        position: absolute;

			
 
				+        top: 123px;

			
 
				+        right: 69px;

			
 
				+        width: 77px;

			
 
				+      }

			
 
				+      >.desc-wrap{

			
 
				+        position: absolute;

			
 
				+        top: 291px;

			
 
				+        left: 111px;

			
 
				+        width: 639px;

			
 
				+        height: 100px;

			
 
				+        >.deco-bar{

			
 
				+          width: 88px;

			
 
				+          height: 5px;

			
 
				+          background: #D7C78E;

			
 
				+          margin-bottom: 51px;

			
 
				+        }

			
 
				+        >.desc{

			
 
				+          white-space: pre-line;

			
 
				+          text-indent: 2em;

			
 
				+          font-family: Source Han Sans CN, Source Han Sans CN;

			
 
				+          font-weight: 400;

			
 
				+          font-size: 18px;

			
 
				+          color: #474747;

			
 
				+          line-height: 29px;

			
 
				+        }

			
 
				+      }

			
 
				+    }

			
 
				+  }

			
 
				+  >.page-2{

			
 
				+    background-color: #fff;

			
 
				+    height: 100%;

			
 
				+    padding: 108px 243px;

			
 
				+    >.splitter{

			
 
				+      height: 1px;

			
 
				+      background: #589498;

			
 
				+    }

			
 
				+    >ul.table{

			
 
				+      height: 580px;

			
 
				+      overflow: auto;

			
 
				+      padding-right: 15px;

			
 
				+      >li{

			
 
				+        width: 100%;

			
 
				+        >.line{

			
 
				+          width: 100%;

			
 
				+          display: flex;

			
 
				+          justify-content: space-between;

			
 
				+          align-items: center;

			
 
				+          height: 88px;

			
 
				+          >span.key{

			
 
				+            margin-left: 80px;

			
 
				+            width: 250px;

			
 
				+            display: inline-block;

			
 
				+            flex: 0 0 auto;

			
 
				+            font-family: Source Han Sans CN, Source Han Sans CN;

			
 
				+            font-weight: 400;

			
 
				+            font-size: 24px;

			
 
				+            color: #474747;

			
 
				+          }

			
 
				+          >span.value{

			
 
				+            width: 750px;

			
 
				+            display: inline-block;

			
 
				+            flex: 0 0 auto;

			
 
				+            font-family: Source Han Sans CN, Source Han Sans CN;

			
 
				+            font-weight: 400;

			
 
				+            font-size: 24px;

			
 
				+            color: #474747;

			
 
				+            overflow: hidden;

			
 
				+            white-space: pre;

			
 
				+            text-overflow: ellipsis;

			
 
				+          }

			
 
				+        }

			
 
				+        >.line-splitter{

			
 
				+          height: 1px;

			
 
				+          border: 1px dashed rgba(88,148,152,0.5);

			
 
				+        }

			
 
				+      }

			
 
				+      >li:last-of-type{

			
 
				+        >.line-splitter{

			
 
				+          display: none;

			
 
				+        }

			
 
				+      }

			
 
				+    }

			
 
				+  }

			
 
				+  >.page-3{

			
 
				+    height: 100%;

			
 
				+    background-color: green;

			
 
				+    padding: 108px 243px;

			
 
				+    background-image: url(@/assets/images/about/institu-p3-bg.jpg);

			
 
				+    background-size: cover;

			
 
				+    background-repeat: no-repeat;

			
 
				+    background-position: center center;

			
 
				+    >.wrapper{

			
 
				+      margin-top: 79px;

			
 
				+      width: 100%;

			
 
				+      display: flex;

			
 
				+      >menu.tab-bar{

			
 
				+        flex: 0 0 auto;

			
 
				+        margin-left: calc(30 / 1920 * 100vw);

			
 
				+        >button.tab-item{

			
 
				+          width: 200px;

			
 
				+          height: 100px;

			
 
				+          font-family: Source Han Serif CN, Source Han Serif CN;

			
 
				+          font-weight: bold;

			
 
				+          font-size: 24px;

			
 
				+          color: #589498;

			
 
				+        }

			
 
				+        >button.tab-item.active{

			
 
				+          color: #AAA282;

			
 
				+          background-image: url(@/assets/images/about/institu-p3-button-active-deco.png);

			
 
				+          background-size: 60%;

			
 
				+          background-repeat: no-repeat;

			
 
				+          background-position: center center;

			
 
				+        }

			
 
				+        > button.tab-item:hover{

			
 
				+          color: #AAA282;

			
 
				+        }

			
 
				+        >.splitter{

			
 
				+          flex: 0 0 auto;

			
 
				+          height: 1Px;

			
 
				+          background: linear-gradient(90deg, rgba(88,148,152,0) 0%, rgba(88,148,152,0.2) 35%, rgba(88,148,152,0.2) 65%, rgba(88,148,152,0) 100%);

			
 
				+        }

			
 
				+      }

			
 
				+      >.detail-area{

			
 
				+        flex: 0 0 auto;

			
 
				+        display: flex;

			
 
				+        justify-content: center;

			
 
				+        align-items: center;

			
 
				+        height: 520px;

			
 
				+        >.inner-wrap{

			
 
				+          margin-left: calc(100 / 1920 * 100vw);

			
 
				+          width: 900px;

			
 
				+          max-height: 100%;

			
 
				+          overflow: auto;

			
 
				+          padding-right: 0.5em;

			
 
				+          font-family: Source Han Sans CN, Source Han Sans CN;

			
 
				+          font-weight: 400;

			
 
				+          font-size: 18px;

			
 
				+          color: #474747;

			
 
				+          line-height: 22px;

			
 
				+          white-space: pre-line;

			
 
				+          ::v-deep{

			
 
				+            >b{

			
 
				+              font-weight: bold;

			
 
				+            }

			
 
				+          }

			
 
				+        }

			
 
				+      }

			
 
				+    }

			
 
				+  }

			
 
				+}

			
 
				+</style>
			
--- a/src/views/about/ServiceView.vue
+++ b/src/views/about/ServiceView.vue
@@ -0,0 +1,92 @@
 
				+<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'

			
 
				+        })"

			
 
				+      >

			
 
				+        服务

			
 
				+      </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>

			
 
				+</template>

			
 
				+

			
 
				+<script setup>

			
 
				+import { ref, computed, watch, onMounted, onBeforeUnmount, inject } from "vue"

			
 
				+import { useRoute, useRouter } from "vue-router"

			
 
				+import { useStore } from "vuex"

			
 
				+

			
 
				+const route = useRoute()

			
 
				+const router = useRouter()

			
 
				+const store = useStore()

			
 
				+

			
 
				+const $env = inject('$env')

			
 
				+</script>

			
 
				+

			
 
				+<style lang="less" scoped>

			
 
				+.about-view{

			
 
				+  position: absolute;

			
 
				+  left: 0;

			
 
				+  top: 0;

			
 
				+  width: 100%;

			
 
				+  height: 100%;

			
 
				+}

			
 
				+</style>
			
--- a/src/views/about/VisitView.vue
+++ b/src/views/about/VisitView.vue
@@ -0,0 +1,92 @@
 
				+<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'

			
 
				+        })"

			
 
				+      >

			
 
				+        服务

			
 
				+      </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>

			
 
				+</template>

			
 
				+

			
 
				+<script setup>

			
 
				+import { ref, computed, watch, onMounted, onBeforeUnmount, inject } from "vue"

			
 
				+import { useRoute, useRouter } from "vue-router"

			
 
				+import { useStore } from "vuex"

			
 
				+

			
 
				+const route = useRoute()

			
 
				+const router = useRouter()

			
 
				+const store = useStore()

			
 
				+

			
 
				+const $env = inject('$env')

			
 
				+</script>

			
 
				+

			
 
				+<style lang="less" scoped>

			
 
				+.about-view{

			
 
				+  position: absolute;

			
 
				+  left: 0;

			
 
				+  top: 0;

			
 
				+  width: 100%;

			
 
				+  height: 100%;

			
 
				+}

			
 
				+</style>