Kezdőlap Felfedezés Súgó
Regisztráció Bejelentkezés
renyicun
/
WuxiCharityMuseum
1
0
Másolás 0
Fájlok Problémák 0 Beolvasztási kérések 0 Wiki
Forráskód Böngészése

feat: 关于博物馆-机构

任一存 1 éve
szülő
69a993b754
commit
39fc77ad1f
18 módosított fájl, 1112 hozzáadás és 1 törlés
Osztott Nézet Diff Statisztika Mutatása
  1. 1 0
      .eslintrc.js
  2. 2 0
      public/index.html
  3. 72 0
      public/staticConfig.js
  4. 10 0
      src/App.vue
  5. BIN
      src/assets/images/about/banner_01.jpg
  6. BIN
      src/assets/images/about/institu-p3-bg.jpg
  7. BIN
      src/assets/images/about/institu-p3-button-active-deco.png
  8. BIN
      src/assets/images/about/title_museum.png
  9. 65 0
      src/components/TableTitle.vue
  10. 3 1
      src/main.js
  11. 66 0
      src/router/index.js
  12. 121 0
      src/views/about/AboutView.vue
  13. 92 0
      src/views/about/CollectionView.vue
  14. 92 0
      src/views/about/ConsultView.vue
  15. 92 0
      src/views/about/ExhibitionView.vue
  16. 312 0
      src/views/about/InstitutionView.vue
  17. 92 0
      src/views/about/ServiceView.vue
  18. 92 0
      src/views/about/VisitView.vue

+ 1 - 0
.eslintrc.js
Fájl Megtekintése 

@@ -52,5 +52,6 @@ module.exports = {
 
     useSizeAdapt: true,
 
     defineProps: true,
 
     defineEmits: true,
 
+    staticConfig: true,
 
   }
 
 }

+ 2 - 0
public/index.html
Fájl Megtekintése 

@@ -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 különbségek nem kerülnek megjelenítésre, a fájl túl nagy
+ 72 - 0
public/staticConfig.js


+ 10 - 0
src/App.vue
Fájl Megtekintése 

@@ -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({

BIN
src/assets/images/about/banner_01.jpg
Fájl Megtekintése


BIN
src/assets/images/about/institu-p3-bg.jpg
Fájl Megtekintése


BIN
src/assets/images/about/institu-p3-button-active-deco.png
Fájl Megtekintése


BIN
src/assets/images/about/title_museum.png
Fájl Megtekintése


+ 65 - 0
src/components/TableTitle.vue
Fájl Megtekintése 

@@ -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>

+ 3 - 1
src/main.js
Fájl Megtekintése 

@@ -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

+ 66 - 0
src/router/index.js
Fájl Megtekintése 

@@ -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,

+ 121 - 0
src/views/about/AboutView.vue
Fájl Megtekintése 

@@ -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>

+ 92 - 0
src/views/about/CollectionView.vue
Fájl Megtekintése 

@@ -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>

+ 92 - 0
src/views/about/ConsultView.vue
Fájl Megtekintése 

@@ -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>

+ 92 - 0
src/views/about/ExhibitionView.vue
Fájl Megtekintése 

@@ -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>

+ 312 - 0
src/views/about/InstitutionView.vue
Fájl Megtekintése 

@@ -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>

+ 92 - 0
src/views/about/ServiceView.vue
Fájl Megtekintése 

@@ -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>

+ 92 - 0
src/views/about/VisitView.vue
Fájl Megtekintése 

@@ -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>