feat: 临时保存

src/components/exhibitionBox.vue

@@ -0,0 +1,102 @@
+<template>
+  <n-card class="exhibition-box">
+    <div class="box">
+      <img class="cover" :src="cover" />
+      <div class="info">
+        <div class="title">{{ title }}</div>
+        <div class="content—box">{{ content }}</div>
+        <div class="label-box">
+          <div class="label location">{{ location }}</div>
+          <div class="label type">{{ type }}</div>
+          <div v-if="isHasVR" class="vr_button"></div>
+        </div>
+      </div>
+    </div>
+  </n-card>
+</template>
+<script setup>
+defineOptions({
+  name: "exhibition-box",
+});
+
+defineProps({
+  title: {
+    type: String,
+    default: () => "",
+  },
+  cover: {
+    type: String,
+    default: () => "",
+  },
+  content: {
+    type: String,
+    default: () => "",
+  },
+  location: {
+    type: String,
+    default: () => "",
+  },
+  type: {
+    type: String,
+    default: () => "",
+  },
+  isHasVR: {
+    type: [Boolean, undefined],
+    default: () => undefined,
+  },
+});
+</script>
+
+<style lang="scss" scoped>
+.n-card.exhibition-box {
+  --n-title-font-weight: 600 !important;
+  --n-title-font-size: 1.75rem !important;
+  --n-padding-top: 0.625rem !important;
+  --n-padding-bottom: 0.625rem !important;
+  border-radius: 1.875rem;
+}
+.exhibition-box {
+  .box {
+    width: 100%;
+    height: 100%;
+    display: inline-flex;
+    flex-direction: row;
+
+    .cover {
+      height: 13.4375rem;
+      width: auto;
+    }
+    .info {
+      flex: 1;
+      padding-left: 3.125rem;
+      .title {
+        font-size: 1.75rem;
+        font-weight: 700;
+        padding: 0.5rem 0 1rem 0;
+      }
+      .content—box {
+        font-size: 16px;
+        color: #6e6e6e;
+        height: 6.25rem;
+        overflow: hidden;
+      }
+      .label-box {
+        display: inline-flex;
+        height: 2.5rem;
+        align-items: center;
+        gap: 0 10px;
+        width: 100%;
+        color: #6e6e6e;
+        font-size: 1rem;
+        .label {
+          background-image: url("img/dot.png");
+          background-size: 0.9375rem 0.9375rem;
+          background-repeat: no-repeat;
+          padding-left: 1.375rem;
+          background-position: center left;
+        }
+      }
+    }
+  }
+}
+</style>

src/components/infoBox.vue

@@ -11,6 +11,7 @@
         <span> {{ time }}</span>
         <div class="see-more" @click="$router.push(`/info-detail/${id}`)">
           查看
+          <img class="see-more-img" src="img/see_more.png" alt="see more" />
         </div>
       </div>
     </div>
@@ -40,6 +41,12 @@ defineProps({
   },
 });
 </script>
+
+<style>
+.info-box {
+  --box-remark-color: #9b9b9b;
+}
+</style>
 <style lang="scss" scoped>
 .n-card.info-box {
   padding: 10px;
@@ -48,15 +55,17 @@ defineProps({
   // width: 515px;
   // height: 424px;
   background: #f5f5f5;
-  box-shadow: 0px 2px 4px 0px rgba(46, 25, 16, 0.16);
+  box-shadow: 0rem .125rem .25rem 0rem rgba(46,25,16,0.16);
   border-radius: 13px;
+  border-top: .5rem solid var(--main-primary-color);
   .cover {
     background-color: gray;
     overflow: hidden;
     max-height: 284px;
   }
   .title {
-    font-size: 28px;
+    font-size: 26px;
+    margin: 15px 0;
   }
   .info-line {
     display: flex;
@@ -66,8 +75,17 @@ defineProps({
       flex: 1;
       display: flex;
       justify-content: space-between;
+      color: var(--box-remark-color);
       .see-more {
         cursor: pointer;
+        display: inline-flex;
+        justify-content: center;
+        align-items: center;
+        img {
+          max-height: 16px;
+          width: auto;
+          margin-left: 5px;
+        }
       }
     }
   }

src/components/noticeBox.vue

@@ -1,5 +1,5 @@
 <template>
-  <n-card :title="title">
+  <n-card :title="title" class="notice-box">
     {{ content }}
     <template #footer>
       {{ time }}
@@ -26,3 +26,11 @@ defineProps({
   },
 });
 </script>
+
+<style lang="scss" scoped>
+.n-card.notice-box {
+  --n-title-font-weight: 600 !important;
+  --n-title-font-size: 1.75rem !important;
+  border-radius: 1.875rem;
+}
+</style>

src/router/index.js

@@ -19,9 +19,9 @@ const routes = [
   },
 
   {
-    path: "/guide",
-    name: "guide",
-    component: () => import("@/views/guide.vue"),
+    path: "/exhibition",
+    name: "exhibition",
+    component: () => import("@/views/exhibition.vue"),
     meta: {
       title: "展厅导览",
     },

src/style.css

@@ -1,6 +1,6 @@
 :root {
-  /* --n-color: rgba(255, 255, 255, 0.83);
-  --n-text-color: rgba(255, 255, 255, 0.83); */
+  --main-primary-color: #910000;
+  --main-secondary-color: #e2caa3;
 }
 
 html,
@@ -93,3 +93,26 @@ body,
   background-size: cover;
   background-position: left center;
 }
+
+.page:not(.home) .main .content .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;
+}
+.page:not(.home) .main .content .meta-title img {
+  width: auto;
+  height: calc(var(--main-sub-nav-height) - 0.95rem);
+}
+
+.vr_button {
+  background-image: url("img/vr_btn.png");
+  background-repeat: no-repeat;
+  background-size: contain;
+  background-position: center center;
+  width: 6.25rem;
+  height: 1.5rem;
+  cursor: pointer;
+}

src/views/exhibition.vue

@@ -0,0 +1,125 @@
+<template>
+  <div class="main">
+    <div class="content">
+      <sub-header />
+      <div class="left">
+        <n-tabs type="line" pane-class="tab-content">
+          <template #prefix>
+            <span class="meta-title">
+              <img src="img/subtitle_2.png" />
+            </span>
+          </template>
+          <n-tab-pane name="all" tab="全部展览">
+            <n-grid :x-gap="XGap" :y-gap="YGap" :cols="1" class="tab-grid">
+              <template v-for="(_, index) in 16">
+                <n-gi>
+                  <exhibition-box
+                    :id="index + 1"
+                    title="第一部分——高举新旗帜"
+                    cover="https://07akioni.oss-cn-beijing.aliyuncs.com/07akioni.jpeg"
+                    content="这是一段摘要这是一段摘要这是一段摘要这是一段摘要这是一段摘要这是一段摘要这是一段摘要这是一段摘要这是一段摘要这是一段摘要这是一段摘要这是一段摘要这是一段摘要这是一段摘要这是一段摘要这是一段摘要这是一段摘要这是一段摘要这是一段..."
+                    location="2号楼 1号厅"
+                    type="常设展览"
+                    isHasVR
+                  />
+                </n-gi>
+              </template>
+            </n-grid>
+          </n-tab-pane>
+          <n-tab-pane name="normal" tab="常设展览">
+            <n-grid :x-gap="XGap" :y-gap="YGap" :cols="1" class="tab-grid">
+              <template v-for="item in 16">
+                <n-gi>
+                  <exhibition-box
+                    title="卡片"
+                    cover="https://07akioni.oss-cn-beijing.aliyuncs.com/07akioni.jpeg"
+                    content="这是一段摘要这是一段摘要这是一段摘要这是一段摘要这是一段摘要这是一段摘要这是一段摘要这是一段摘要这是一段摘要这是一段摘要这是一段摘要这是一段摘要这是一段摘要这是一段摘要这是一段摘要这是一段摘要这是一段摘要这是一段摘要这是一段..."
+                    location="2号楼 2号厅"
+                    type="常设展览"
+                    isHasVR
+                  />
+                </n-gi>
+              </template>
+            </n-grid>
+          </n-tab-pane>
+          <n-tab-pane name="special" tab="专题展览">
+            <n-grid :x-gap="XGap" :y-gap="YGap" :cols="1" class="tab-grid">
+              <template v-for="item in 16">
+                <n-gi>
+                  <exhibition-box
+                    title="卡片"
+                    cover="https://07akioni.oss-cn-beijing.aliyuncs.com/07akioni.jpeg"
+                    content="这是一段摘要这是一段摘要这是一段摘要这是一段摘要这是一段摘要这是一段摘要这是一段摘要这是一段摘要这是一段摘要这是一段摘要这是一段摘要这是一段摘要这是一段摘要这是一段摘要这是一段摘要这是一段摘要这是一段摘要这是一段摘要这是一段..."
+                    location="2号楼 1号厅"
+                    type="常设展览"
+                    isHasVR
+                  />
+                </n-gi>
+              </template>
+            </n-grid>
+          </n-tab-pane>
+          <n-tab-pane name="temp" tab="临时展览">
+            <n-grid :y-gap="YGap" :cols="1" class="tab-grid">
+              <template v-for="item in 16">
+                <n-gi>
+                  <exhibition-box
+                    title="这是一段标题这是一段标题"
+                    cover="https://07akioni.oss-cn-beijing.aliyuncs.com/07akioni.jpeg"
+                    content="这是一段摘要这是一段摘要这是一段摘要这是一段摘要这是一段摘要这是一段摘要这是一段摘要这是一段摘要这是一段摘要这是一段摘要这是一段摘要这是一段摘要这是一段摘要这是一段摘要这是一段摘要这是一段摘要这是一段摘要这是一段摘要这是一段..."
+                    location="2号楼 2号厅"
+                    type="常设展览"
+                    isHasVR
+                  />
+                </n-gi>
+              </template>
+            </n-grid>
+          </n-tab-pane>
+        </n-tabs>
+      </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 exhibitionBox from "../components/exhibitionBox";
+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/guide.vue

@@ -1,163 +0,0 @@
-<template>
-  <div class="main">
-    <!-- <div class="head"></div> -->
-    <!-- <Teleport to=".n-tabs-nav"> xxx </Teleport> -->
-    <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

@@ -38,7 +38,7 @@
         <n-button class="btn btn_1" @click="push('/info')" text>
           场馆资讯</n-button
         >
-        <n-button class="btn btn_2" @click="push('/guide')" text>
+        <n-button class="btn btn_2" @click="push('/exhibition')" text>
           展厅导览</n-button
         >
         <n-button class="btn btn_3" @click="push('/collect')" text>
@@ -147,7 +147,7 @@ const { isFullscreen, enter, exit, toggle } = useFullscreen();
       background-image: var(--main-right-bg-btn4);
     }
     &.btn_5 {
-      background-image: var(--main-right-bg-btn4);
+      background-image: var(--main-right-bg-btn5);
     }
   }
 }

src/views/info.vue

@@ -10,7 +10,7 @@
             </span>
           </template>
           <n-tab-pane name="展览" tab="展览">
-            <n-grid x-gap="30" y-gap="30" :cols="3" class="tab-grid">
+            <n-grid :x-gap="XGap" :y-gap="YGap" :cols="3" class="tab-grid">
               <template v-for="(_, index) in 16">
                 <n-gi>
                   <infoBox
@@ -24,7 +24,7 @@
             </n-grid>
           </n-tab-pane>
           <n-tab-pane name="活动" tab="活动">
-            <n-grid x-gap="30" y-gap="30" :cols="3" class="tab-grid">
+            <n-grid :x-gap="XGap" :y-gap="YGap" :cols="3" class="tab-grid">
               <template v-for="item in 16">
                 <n-gi>
                   <infoBox
@@ -37,7 +37,7 @@
             </n-grid>
           </n-tab-pane>
           <n-tab-pane name="新闻" tab="新闻">
-            <n-grid x-gap="30" y-gap="30" :cols="3" class="tab-grid">
+            <n-grid :x-gap="XGap" :y-gap="YGap" :cols="3" class="tab-grid">
               <template v-for="item in 16">
                 <n-gi>
                   <infoBox
@@ -50,7 +50,7 @@
             </n-grid>
           </n-tab-pane>
           <n-tab-pane name="通知" tab="通知">
-            <n-grid y-gap="20" :cols="1" class="tab-grid">
+            <n-grid :y-gap="YGap" :cols="1" class="tab-grid">
               <template v-for="item in 16">
                 <n-gi>
                   <notice-box
@@ -78,6 +78,8 @@ import sideMenu from "../components/sideMenu";
 import noticeBox from "../components/noticeBox";
 import { useInfoStore } from "../store/info";
 
+const XGap = ref(50);
+const YGap = ref(50);
 const { isFullscreen, enter, exit, toggle } = useFullscreen();
 const InfoStore = useInfoStore();
 
@@ -87,22 +89,12 @@ onMounted(() => {
 </script>
 
 <style lang="scss" scoped>
-.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.75rem);
-  }
-}
 
 :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 {