feat: 临时保存

src/assets/vue.svg

@@ -1 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="iconify iconify--logos" width="37.07" height="36" preserveAspectRatio="xMidYMid meet" viewBox="0 0 256 198"><path fill="#41B883" d="M204.8 0H256L128 220.8L0 0h97.92L128 51.2L157.44 0h47.36Z"></path><path fill="#41B883" d="m0 0l128 220.8L256 0h-51.2L128 132.48L50.56 0H0Z"></path><path fill="#35495E" d="M50.56 0L128 133.12L204.8 0h-47.36L128 51.2L97.92 0H50.56Z"></path></svg>

src/components/heroSubTitle.vue

@@ -0,0 +1,44 @@
+<template>
+  <div class="pure-nav">
+    <span class="meta-title">
+      <img :src="titleSrc" />
+    </span>
+  </div>
+</template>
+<script setup>
+import { computed } from "vue";
+defineOptions({
+  name: "hero-sub-title",
+});
+const props = defineProps({
+  type: {
+    type: Number,
+    default: () => 1,
+  },
+});
+
+const titleSrc = computed(() => `/img/subtitle_${props.type || 1}.png`);
+</script>
+
+<style lang="scss" scoped>
+.pure-nav {
+  height: var(--main-sub-nav-height);
+  width: 100%;
+  background-image: var(--main-sub-nav-background);
+  background-repeat: no-repeat;
+  background-size: cover;
+  background-position: left center;
+  .meta-title {
+    font-size: 1.375rem;
+    text-align: center;
+    width: var(--main-sub-nav-title-width);
+    display: inline-flex;
+    justify-content: center;
+    align-items: center;
+    img {
+      width: auto;
+      height: calc(var(--main-sub-nav-height) - 0.95rem);
+    }
+  }
+}
+</style>

src/components/subHeader.vue

@@ -1,7 +1,7 @@
 <template>
   <div class="header">
     <div class="logo">
-      <img src="img/logo.png" alt="logo" />
+      <img :src="logo" alt="logo" />
     </div>
   </div>
 </template>
@@ -10,6 +10,13 @@
 defineOptions({
   name: "sub-header",
 });
+
+defineProps({
+  logo: {
+    type: String,
+    default: () => "/img/logo.png",
+  },
+});
 </script>
 
 <style lang="scss" scoped>

src/router/index.js

@@ -60,9 +60,9 @@ const routes = [
     },
   },
   {
-    path: "/guide-detail/:id",
-    name: "guideDetail",
-    component: () => import("@/views/guide-detail.vue"),
+    path: "/exhibition-detail/:id",
+    name: "exhibitionDetail",
+    component: () => import("@/views/exhibition-detail.vue"),
     meta: {
       title: "",
     },

src/style.css

@@ -49,19 +49,19 @@ body,
   --main-sub-header-height: 6.3125rem;
   --main-sub-header-logo-height: 4.9375rem;
   --main-sub-header-margin-left: 8.0625rem;
-  --main-sub-header-background: url("img/sub_title_bg.png");
+  --main-sub-header-background: url("/img/sub_title_bg.png");
   --main-sub-menu-width: 5.9375rem;
   --main-sub-menu-border-radius: 2.5rem;
-  --main-sub-logo: url("img/sub_logo.png");
-  --main-right-background: url("img/sub_bg.png");
-  --main-right-back-btn: url("img/sub_back_btn.png");
+  --main-sub-logo: url("/img/sub_logo.png");
+  --main-right-background: url("/img/sub_bg.png");
+  --main-right-back-btn: url("/img/sub_back_btn.png");
 
   --main-left-background: #ffffff;
   --logo-width: 4.9375rem;
   --go-home-width: 3.75rem;
   --logo-background-color: #910000;
 
-  --main-sub-nav-background: url("img/sub_nav_bg.png");
+  --main-sub-nav-background: url("/img/sub_nav_bg.png");
   --main-sub-nav-height: 3.5rem;
   --main-sub-nav-title-width: 21.375rem;
 }
@@ -107,8 +107,32 @@ body,
   height: calc(var(--main-sub-nav-height) - 0.95rem);
 }
 
+.page:not(.home) .main .content .tab-content {
+  width: calc(100% - 10rem);
+  margin: 0 auto;
+  &::-webkit-scrollbar {
+    display: none;
+  }
+}
+/* .tab-content */
+.page:not(.home) .main .content .n-tabs {
+  --n-tab-font-size: 1.25rem !important;
+  --n-tab-gap: 60px !important;
+  --n-pane-padding-top: 3.125rem !important;
+  --n-pane-padding-bottom: 3.125rem !important;
+  height: 100%;
+  overflow: hidden;
+}
+.page:not(.home) .main .content .n-tabs .n-tab-pane {
+  overflow-y: scroll;
+}
+.page:not(.home) .main .content .n-tabs .n-tabs-bar {
+  height: 0.25rem;
+  border-radius: 1.875rem !important;
+}
+
 .vr_button {
-  background-image: url("img/vr_btn.png");
+  background-image: url("/img/vr_btn.png");
   background-repeat: no-repeat;
   background-size: contain;
   background-position: center center;

src/views/exhibition-detail.vue

@@ -0,0 +1,51 @@
+<template>
+  <div class="main">
+    <div class="content">
+      <sub-header />
+      <div class="left"></div>
+      <side-menu />
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { onMounted } from "vue";
+import { useFullscreen } from "@vueuse/core";
+import subHeader from "../components/subHeader";
+import sideMenu from "../components/sideMenu";
+import { useInfoStore } from "../store/info";
+
+const XGap = ref(50);
+const YGap = ref(50);
+const { isFullscreen, enter, exit, toggle } = useFullscreen();
+const InfoStore = useInfoStore();
+
+onMounted(() => {
+  InfoStore.getData();
+});
+</script>
+
+<style lang="scss" scoped>
+:deep(.n-tabs) {
+  --n-tab-font-size: 1.25rem !important;
+  --n-tab-gap: 60px !important;
+  --n-pane-padding-top: 3.125rem !important;
+  --n-pane-padding-bottom: 3.125rem !important;
+  height: 100%;
+  overflow: hidden;
+  .n-tab-pane {
+    overflow-y: scroll;
+  }
+  .n-tabs-bar {
+    height: 0.25rem;
+    border-radius: 1.875rem !important;
+  }
+}
+.tab-content {
+  width: calc(100% - 12rem);
+  margin: 0 auto;
+  &::-webkit-scrollbar {
+    display: none;
+  }
+}
+</style>

src/views/exhibition.vue

@@ -115,11 +115,11 @@ onMounted(() => {
     border-radius: 1.875rem !important;
   }
 }
-.tab-content {
-  width: calc(100% - 12rem);
-  margin: 0 auto;
-  &::-webkit-scrollbar {
-    display: none;
-  }
-}
+// .tab-content {
+//   width: calc(100% - 12rem);
+//   margin: 0 auto;
+//   &::-webkit-scrollbar {
+//     display: none;
+//   }
+// }
 </style>

src/views/guide-detail.vue

@@ -1,161 +0,0 @@
-<template>
-  <div class="main">
-    <div class="content">
-      <div class="left">
-        <n-tabs type="line">
-          <template #prefix><span class="meta-title">场馆资讯</span> </template>
-          <n-tab-pane name="展览" tab="展览">
-            <!-- <n-scrollbar style="height: 100%" trigger="none"> -->
-            <n-grid x-gap="12" y-gap="12" :cols="3" class="tab-grid">
-              <template v-for="(_, index) in 16">
-                <n-gi>
-                  <infoBox
-                    :id="index + 1"
-                    title="卡片"
-                    cover="https://07akioni.oss-cn-beijing.aliyuncs.com/07akioni.jpeg"
-                    time="2023-01-02"
-                  />
-                </n-gi>
-              </template>
-            </n-grid>
-          </n-tab-pane>
-          <n-tab-pane name="活动" tab="活动">
-            <n-grid x-gap="12" y-gap="12" :cols="3" class="tab-grid">
-              <template v-for="item in 16">
-                <n-gi>
-                  <infoBox
-                    title="卡片"
-                    cover="https://07akioni.oss-cn-beijing.aliyuncs.com/07akioni.jpeg"
-                    time="2023-01-02"
-                  />
-                </n-gi>
-              </template>
-            </n-grid>
-          </n-tab-pane>
-          <n-tab-pane name="新闻" tab="新闻">
-            <n-grid x-gap="12" y-gap="12" :cols="3" class="tab-grid">
-              <template v-for="item in 16">
-                <n-gi>
-                  <infoBox
-                    title="卡片"
-                    cover="https://07akioni.oss-cn-beijing.aliyuncs.com/07akioni.jpeg"
-                    time="2023-01-02"
-                  />
-                </n-gi>
-              </template>
-            </n-grid>
-          </n-tab-pane>
-          <n-tab-pane name="通知" tab="通知">
-            <n-grid y-gap="20" :cols="1" class="tab-grid">
-              <template v-for="item in 16">
-                <n-gi>
-                  <notice-box
-                    title="这是一段标题这是一段标题"
-                    content="这是一段摘要这是一段摘要这是一段摘要这是一段摘要这是一段摘要这是一段摘要这是一段摘要这是一段摘要这是一段摘要这是一段摘要这是一段摘要这是一段摘要这是一段摘要这是一段摘要这是一段摘要这是一段摘要这是一段摘要这是一段摘要这是一段..."
-                    time="2023-01-02"
-                  />
-                </n-gi>
-              </template>
-            </n-grid>
-          </n-tab-pane>
-        </n-tabs>
-      </div>
-      <div class="right">
-        <div class="logo"></div>
-        <div class="back" @click="$router.push('/')"></div>
-      </div>
-    </div>
-  </div>
-</template>
-
-<script setup>
-import { onMounted } from "vue";
-import { useFullscreen } from "@vueuse/core";
-import infoBox from "../components/infoBox";
-import noticeBox from "../components/noticeBox";
-import { useInfoStore } from "../store/info";
-
-const { isFullscreen, enter, exit, toggle } = useFullscreen();
-const InfoStore = useInfoStore();
-
-onMounted(() => {
-  InfoStore.getData();
-});
-</script>
-
-<style>
-.main {
-  --main-left-background: grey;
-  --main-right-background: rgba(0, 0, 0, 0.8);
-  --logo-width: 100px;
-  --go-home-width: 60px;
-  --logo-background-color: rgba(0, 0, 0, 0.5);
-  --left-content-padding: 50px;
-  --right-content-padding: 50px;
-}
-</style>
-
-<style lang="scss" scoped>
-.main {
-  width: 100%;
-  height: 100%;
-  display: flex;
-  flex-direction: column;
-  overflow-y: hidden;
-}
-.meta-title {
-  font-size: 34px;
-  padding-right: 50px;
-}
-.head {
-  width: 100%;
-  height: 60px;
-}
-.content {
-  flex: 1;
-  display: flex;
-  width: 100%;
-  height: 100%;
-  flex-direction: row;
-  overflow: hidden;
-}
-.left {
-  flex: 1;
-  background-color: var(--main-left-background);
-  padding: var(--left-content-padding);
-  .n-tabs {
-    height: 100%;
-    overflow: hidden;
-    :deep(.n-tab-pane) {
-      overflow-y: scroll;
-    }
-  }
-}
-.n-tabs {
-  --n-tab-font-size: 26px !important;
-}
-.right {
-  flex: 0 0 10%;
-  min-width: 120px;
-  /* max-width: 120px; */
-  height: calc(100% - var(--right-content-padding) * 2);
-  background-color: var(--main-right-background);
-  display: flex;
-  padding: 50px 0;
-  flex-direction: column;
-  align-items: center;
-  justify-content: space-between;
-  .logo {
-    width: var(--logo-width);
-    height: var(--logo-width);
-    border-radius: 50%;
-    background-color: var(--logo-background-color);
-  }
-  .back {
-    width: var(--go-home-width);
-    height: var(--go-home-width);
-    border-radius: 50%;
-    background-color: var(--logo-background-color);
-  }
-}
-</style>

src/views/home.vue

@@ -69,11 +69,11 @@ const { isFullscreen, enter, exit, toggle } = useFullscreen();
   --main-home-left-background: #e2caa3;
   --main-home-right-background: #910000;
   /* --main-right-bg-img: url("img/h_banner_bg.png"); */
-  --main-right-bg-btn1: url("img/guide_1.png");
-  --main-right-bg-btn2: url("img/guide_2.png");
-  --main-right-bg-btn3: url("img/guide_3.png");
-  --main-right-bg-btn4: url("img/guide_4.png");
-  --main-right-bg-btn5: url("img/guide_5.png");
+  --main-right-bg-btn1: url("/img/guide_1.png");
+  --main-right-bg-btn2: url("/img/guide_2.png");
+  --main-right-bg-btn3: url("/img/guide_3.png");
+  --main-right-bg-btn4: url("/img/guide_4.png");
+  --main-right-bg-btn5: url("/img/guide_5.png");
 
   --main-navigate-btn-width: 11.3125rem;
   --main-navigate-btn-height: 6.3125rem;

src/views/info-detail.vue

@@ -1,96 +1,39 @@
 <template>
   <div class="main">
     <div class="content">
+      <sub-header />
       <div class="left">
-
-      </div>
-      <div class="right">
-        <div class="logo"></div>
-            <div class="back" @click="$router.push('/')"></div>
+        <hero-sub-title />
+        <div class="detail"></div>
       </div>
+      <side-menu />
     </div>
   </div>
 </template>
 
 <script setup>
-import { onMounted } from "vue";
-// import { useFullscreen } from "@vueuse/core";
+import { watchEffect, ref } from "vue";
+import { useFullscreen } from "@vueuse/core";
+import subHeader from "../components/subHeader";
+import sideMenu from "../components/sideMenu";
+import heroSubTitle from "../components/heroSubTitle";
 import { useInfoStore } from "../store/info";
+const title = ref("detail");
 
-const InfoStore = useInfoStore();
-
-onMounted(() => {
-  //   InfoStore.getData();
+watchEffect(() => {
+  document.title = title.value;
 });
 </script>
 
-<style>
-.main {
-  --main-left-background: grey;
-  --main-right-background: rgba(0, 0, 0, 0.8);
-  --logo-width: 100px;
-  --go-home-width: 60px;
-  --logo-background-color: rgba(0, 0, 0, 0.5);
-  --left-content-padding: 50px;
-  --right-content-padding: 50px;
-}
-</style>
-
 <style lang="scss" scoped>
-.main {
-  width: 100%;
-  height: 100%;
-  display: flex;
-  flex-direction: column;
-  overflow-y: hidden;
-}
-.meta-title {
-  font-size: 34px;
-  padding-right: 50px;
-}
-.head {
-  width: 100%;
-  height: 60px;
+.left {
+  background-color: rgba(0, 0, 0, 0.05) !important;
 }
-.content {
+.detail {
+  margin: 1.875rem;
   flex: 1;
-  display: flex;
-  width: 100%;
   height: 100%;
-  flex-direction: row;
-  overflow: hidden;
-}
-.left {
-  flex: 1;
-  background-color: var(--main-left-background);
-  padding: var(--left-content-padding);
-  
-}
-.n-tabs {
-  --n-tab-font-size: 26px !important;
-}
-.right {
-  flex: 0 0 10%;
-  min-width: 120px;
-  /* max-width: 120px; */
-  height: calc(100% - var(--right-content-padding) * 2);
-  background-color: var(--main-right-background);
-  display: flex;
-  padding: 50px 0;
-  flex-direction: column;
-  align-items: center;
-  justify-content: space-between;
-  .logo {
-    width: var(--logo-width);
-    height: var(--logo-width);
-    border-radius: 50%;
-    background-color: var(--logo-background-color);
-  }
-  .back {
-    width: var(--go-home-width);
-    height: var(--go-home-width);
-    border-radius: 50%;
-    background-color: var(--logo-background-color);
-  }
+  border-radius: 0.8125rem;
+  background: #fff;
 }
 </style>

src/views/info.vue

@@ -6,7 +6,7 @@
         <n-tabs type="line" pane-class="tab-content">
           <template #prefix>
             <span class="meta-title">
-              <img src="img/subtitle_1.png" />
+              <img src="/img/subtitle_1.png" />
             </span>
           </template>
           <n-tab-pane name="展览" tab="展览">
@@ -90,26 +90,4 @@ onMounted(() => {
 
 <style lang="scss" scoped>
 
-:deep(.n-tabs) {
-  --n-tab-font-size: 1.25rem !important;
-  --n-tab-gap: 60px !important;
-  --n-pane-padding-top: 3.125rem !important;
-  --n-pane-padding-bottom: 3.125rem !important;
-  height: 100%;
-  overflow: hidden;
-  .n-tab-pane {
-    overflow-y: scroll;
-  }
-  .n-tabs-bar {
-    height: 0.25rem;
-    border-radius: 1.875rem !important;
-  }
-}
-.tab-content {
-  width: calc(100% - 12rem);
-  margin: 0 auto;
-  &::-webkit-scrollbar {
-    display: none;
-  }
-}
 </style>