feat: 临时保存

src/components/exhibitionBox.vue

@@ -1,5 +1,5 @@
 <template>
-  <n-card class="exhibition-box">
+  <n-card class="exhibition-box" @click="handleTodetail">
     <div class="box">
       <img class="cover" :src="cover" />
       <div class="info">
@@ -15,11 +15,18 @@
   </n-card>
 </template>
 <script setup>
+import { useRouter } from "vue-router";
+const router = useRouter();
+
 defineOptions({
   name: "exhibition-box",
 });
 
-defineProps({
+const props = defineProps({
+  id: {
+    type: [String, Number],
+    default: () => "",
+  },
   title: {
     type: String,
     default: () => "",
@@ -45,6 +52,13 @@ defineProps({
     default: () => undefined,
   },
 });
+const handleTodetail = () => {
+  if (props.id) {
+    console.log("router", router);
+    router.push("/exhibition-detail/" + props.id);
+    console.log("111", props.id);
+  }
+};
 </script>
 
 <style lang="scss" scoped>
@@ -54,6 +68,8 @@ defineProps({
   --n-padding-top: 0.625rem !important;
   --n-padding-bottom: 0.625rem !important;
   border-radius: 1.875rem;
+  box-shadow: var(--main-box-shadow);
+  cursor: pointer;
 }
 .exhibition-box {
   .box {

src/components/sideMenu.vue

@@ -16,8 +16,8 @@ defineOptions({
   width: var(--main-sub-menu-width);
   height: 100%;
   background-image: var(--main-right-background);
-  background-position: top right;
-  background-size: contain;
+  background-position: left top;
+  background-size: cover;
   background-repeat: no-repeat;
   background-color: var(--logo-background-color);
   display: flex;
@@ -27,6 +27,7 @@ defineOptions({
   border-top-left-radius: var(--main-sub-menu-border-radius);
   border-bottom-left-radius: var(--main-sub-menu-border-radius);
   position: absolute;
+  overflow: hidden;
   z-index: 1;
   top: 0;
   right: 0;

src/style.css

@@ -1,12 +1,15 @@
 :root {
   --main-primary-color: #910000;
   --main-secondary-color: #e2caa3;
+  --main-box-shadow: 0px 2px 4px 0px rgba(46, 25, 16, 0.16);
+  font-size: 16px;
 }
 
 html,
 body,
 #app,
 .page {
+  font-family: SimSun;
   width: 100%;
   height: 100%;
   margin: 0;
@@ -56,7 +59,7 @@ body,
   --main-right-background: url("/img/sub_bg.png");
   --main-right-back-btn: url("/img/sub_back_btn.png");
 
-  --main-left-background: #ffffff;
+  --main-background: #eaeaea;
   --logo-width: 4.9375rem;
   --go-home-width: 3.75rem;
   --logo-background-color: #910000;
@@ -71,12 +74,14 @@ body,
   width: 100%;
   height: 100%;
   justify-content: flex-start;
+  background-color: var(--main-background);
 }
 .page:not(.home) .main .content .left {
   flex-grow: 0;
   margin-right: var(--main-sub-menu-width);
-  background-color: var(--main-left-background);
   height: calc(100% - var(--main-sub-header-height));
+  display: inline-flex;
+  flex-direction: column;
 }
 
 .page:not(.home) .main .content .right {
@@ -88,6 +93,7 @@ body,
 .page:not(.home) .main .n-tabs .n-tabs-nav {
   height: var(--main-sub-nav-height);
   width: 100%;
+  flex: 0 0 auto;
   background-image: var(--main-sub-nav-background);
   background-repeat: no-repeat;
   background-size: cover;
@@ -95,12 +101,12 @@ body,
 }
 
 .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;
+  height: 100%;
 }
 .page:not(.home) .main .content .meta-title img {
   width: auto;
@@ -123,6 +129,10 @@ body,
   height: 100%;
   overflow: hidden;
 }
+.page:not(.home) .main .content .n-tabs .v-x-scroll,
+.page:not(.home) .main .content .n-tabs .v-x-scroll * {
+  height: 100%;
+}
 .page:not(.home) .main .content .n-tabs .n-tab-pane {
   overflow-y: scroll;
 }
@@ -136,7 +146,7 @@ body,
   background-repeat: no-repeat;
   background-size: contain;
   background-position: center center;
-  width: 6.25rem;
-  height: 1.5rem;
+  width: 100px;
+  height: 24px;
   cursor: pointer;
 }

src/views/collect.vue

@@ -1,15 +1,20 @@
 <template>
   <div class="main">
     <div class="content">
+      <sub-header />
       <div class="left">
-        <n-tabs type="line">
-          <template #prefix><span class="meta-title">场馆资讯</span> </template>
+        <n-tabs type="line" pane-class="tab-content">
+          <template #prefix>
+            <span class="meta-title">
+              <img src="/img/subtitle_1.png" />
+            </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="item in 16">
+            <n-grid :x-gap="XGap" :y-gap="YGap" :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"
@@ -19,7 +24,7 @@
             </n-grid>
           </n-tab-pane>
           <n-tab-pane name="活动" tab="活动">
-            <n-grid x-gap="12" y-gap="12" :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
@@ -32,7 +37,7 @@
             </n-grid>
           </n-tab-pane>
           <n-tab-pane name="新闻" tab="新闻">
-            <n-grid x-gap="12" y-gap="12" :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
@@ -45,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
@@ -59,10 +64,7 @@
           </n-tab-pane>
         </n-tabs>
       </div>
-      <div class="right">
-        <div class="logo"></div>
-        <div class="back" @click="$router.push('/')"></div>
-      </div>
+      <side-menu />
     </div>
   </div>
 </template>
@@ -71,9 +73,13 @@
 import { onMounted } from "vue";
 import { useFullscreen } from "@vueuse/core";
 import infoBox from "../components/infoBox";
+import subHeader from "../components/subHeader";
+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();
 
@@ -82,79 +88,6 @@ onMounted(() => {
 });
 </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/exhibition-detail.vue

@@ -2,7 +2,35 @@
   <div class="main">
     <div class="content">
       <sub-header />
-      <div class="left"></div>
+      <hero-sub-title :type="2" />
+      <div class="left">
+        <div class="container">
+          <div class="top_banner">
+            <div class="go-back">
+              <img src="/img/ex_back.png" @click="$router.go(-1)" />
+            </div>
+            <div class="vr-btn-container">
+              <img src="/img/vr_button.png" />
+            </div>
+          </div>
+
+          <div class="info">
+            <div class="show-case"></div>
+            <h3 class="title">第一部分——高举新旗帜</h3>
+            <div class="label-container">
+              <div class="label-list">
+                <span>2号楼 1号厅 </span>
+                <span>临时展览</span>
+                <span>11.11-12.12</span>
+              </div>
+            </div>
+
+            <div class="text">
+              为服务好广大党员干部，浏阳秋收起义纪念馆充分发挥红色场馆、党性教育基地功能，结合“一月一课一片一实践”主题党日线路，主动谋划、精心策划，丰富载体和内容，特推出为期一天的“我的秋收起义学习之旅”五个一活动，致力于为广大基层党组织和党员营造良好氛围，凝聚党员干部服务经济社会发展的强大动能。
+            </div>
+          </div>
+        </div>
+      </div>
       <side-menu />
     </div>
   </div>
@@ -10,42 +38,97 @@
 
 <script setup>
 import { onMounted } from "vue";
-import { useFullscreen } from "@vueuse/core";
+import heroSubTitle from "../components/heroSubTitle";
 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>
+.main {
+  --main-ex-top-banner: url("/img/ex_banner.png");
+}
+</style>
+
 <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;
+.container {
+  flex: 1;
+  overflow-y: scroll;
+  padding-bottom: 200px;
+  &::-webkit-scrollbar {
+    display: none;
   }
-  .n-tabs-bar {
-    height: 0.25rem;
-    border-radius: 1.875rem !important;
+}
+.top_banner {
+  width: 100%;
+  background-image: var(--main-ex-top-banner);
+  height: 29.375rem;
+  background-position: center center;
+  background-size: cover;
+  position: relative;
+  .go-back {
+    display: inline-flex;
+    position: absolute;
+    top: 1.25rem;
+    left: 0;
+    width: 100%;
+    height: 1.75rem;
+    justify-content: flex-start;
+    padding: 0 1.25rem;
+    img {
+      height: 100%;
+      cursor: pointer;
+    }
+  }
+  .vr-btn-container {
+    display: inline-flex;
+    position: absolute;
+    bottom: 1.25rem;
+    left: 0;
+    width: 100%;
+    height: 1.875rem;
+    justify-content: center;
+    img {
+      height: 100%;
+      cursor: pointer;
+    }
   }
 }
-.tab-content {
-  width: calc(100% - 12rem);
+
+.info {
+  max-width: 66.8125rem;
   margin: 0 auto;
-  &::-webkit-scrollbar {
-    display: none;
+  font-size: 20px;
+  .title {
+    font-size: 1.875rem;
+    line-height: 3.75rem;
+    margin: 1.2rem 0;
+    text-align: center;
+  }
+  .label-container{
+    display: flex;
+    justify-content: center;
+  }
+  .label-list {
+    margin: 1.5rem auto;
+    // margin-bottom: ;
+    display: inline-flex;
+    flex-direction: row;
+    justify-content: space-between;
+    gap: 0 1.875rem;
+
+    span {
+      padding-left: 1.5625rem;
+      background-image: url("/img/dot.png");
+      background-repeat: no-repeat;
+      background-size: 1.25rem 1.25rem;
+      background-position: left center;
+    }
+  }
+  .text {
+    font-weight: 400;
+    color: #6e6e6e;
+    line-height: 2.125rem;
+    font-size: 1.25rem;
   }
 }
 </style>

src/views/exhibition.vue

@@ -28,9 +28,10 @@
           </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">
+              <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="这是一段摘要这是一段摘要这是一段摘要这是一段摘要这是一段摘要这是一段摘要这是一段摘要这是一段摘要这是一段摘要这是一段摘要这是一段摘要这是一段摘要这是一段摘要这是一段摘要这是一段摘要这是一段摘要这是一段摘要这是一段摘要这是一段..."
@@ -44,9 +45,10 @@
           </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">
+              <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="这是一段摘要这是一段摘要这是一段摘要这是一段摘要这是一段摘要这是一段摘要这是一段摘要这是一段摘要这是一段摘要这是一段摘要这是一段摘要这是一段摘要这是一段摘要这是一段摘要这是一段摘要这是一段摘要这是一段摘要这是一段摘要这是一段..."
@@ -60,9 +62,10 @@
           </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">
+              <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="这是一段摘要这是一段摘要这是一段摘要这是一段摘要这是一段摘要这是一段摘要这是一段摘要这是一段摘要这是一段摘要这是一段摘要这是一段摘要这是一段摘要这是一段摘要这是一段摘要这是一段摘要这是一段摘要这是一段摘要这是一段摘要这是一段..."

src/views/feedback.vue

@@ -1,111 +1,112 @@
 <template>
   <div class="main">
     <div class="content">
+      <sub-header />
       <div class="left">
-        
-        <n-input
-          v-model:value="feedBackContent"
-          type="textarea"
-          autosize
-          placeholder="请填入内容，5-500字"
-          style="min-height: 400px"
-        />
+        <hero-sub-title />
+        <div class="detail">
+          <div class="back" @click="$router.go(-1)"></div>
 
-        <n-space align="center" style="padding: 20px" justify="center">
-          <n-input type="text" placeholder="昵称" />
-          <n-input type="text" placeholder="联系方式" />
-          <n-input type="text" placeholder="请填入图形验证码" />
-        </n-space>
-        <n-space align="center" justify="center" style="padding: 20px">
-          <n-button type="primary"> 提交</n-button>
-        </n-space>
-      </div>
-      <div class="right">
-        <div class="logo"></div>
-        <div class="back" @click="$router.push('/')"></div>
+          <div class="info">
+            <n-input
+              v-model:value="feedBackContent"
+              type="textarea"
+              autosize
+              placeholder="请填入内容，5-500字"
+              style="min-height: 400px"
+            />
+
+            <n-space align="center" style="padding: 20px" justify="center">
+              <n-input type="text" placeholder="昵称" />
+              <n-input type="text" placeholder="联系方式" />
+              <n-input type="text" placeholder="请填入图形验证码" />
+            </n-space>
+            <n-space align="center" justify="center" style="padding: 20px">
+              <n-button type="primary"> 提交</n-button>
+            </n-space>
+          </div>
+        </div>
       </div>
+      <side-menu />
     </div>
   </div>
 </template>
 
 <script setup>
-import { ref } from "vue";
-const feedBackContent = ref();
-</script>
+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");
 
-<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>
+watchEffect(() => {
+  document.title = title.value;
+});
+</script>
 
 <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 {
+.detail {
+  --main-show-case-background: #ddd5d5;
+  --main-detail-margin: 1.875rem;
+  --main-detail-padding: 1.875rem;
+  box-shadow: var(--main-box-shadow);
+  margin: var(--main-detail-margin);
+  margin-bottom: 0;
   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);
+  border-radius: 0.8125rem;
+  background: #fff;
+  padding: 2rem 3rem 4rem 3rem;
+
+  overflow-y: scroll;
+  &::-webkit-scrollbar {
+    display: none;
   }
+
   .back {
-    width: var(--go-home-width);
-    height: var(--go-home-width);
-    border-radius: 50%;
-    background-color: var(--logo-background-color);
+    background-image: url("/img/back_arrow.png");
+    width: 7.5rem;
+    height: 1.875rem;
+    background-repeat: no-repeat;
+    background-size: contain;
+    margin-bottom: 0.75rem;
+  }
+  .info {
+    max-width: 66.8125rem;
+    margin: 0 auto;
+    font-size: 20px;
+
+    .title {
+      font-size: 1.875rem;
+      line-height: 3.75rem;
+      margin: 1.2rem 0;
+    }
+    .label-list {
+      margin-bottom: 1.5rem;
+      display: inline-flex;
+      flex-direction: row;
+      justify-content: space-between;
+      gap: 0 1.875rem;
+      span {
+        padding-left: 1.5625rem;
+        background-image: url("/img/dot.png");
+        background-repeat: no-repeat;
+        background-size: 1.25rem 1.25rem;
+        background-position: left center;
+      }
+    }
+    .text {
+      font-weight: 400;
+      color: #6e6e6e;
+      line-height: 2.125rem;
+      font-size: 1.25rem;
+    }
+  }
+  .show-case {
+    max-width: 66.8125rem;
+    height: 34.1875rem;
+    background: var(--main-show-case-background);
   }
 }
 </style>

src/views/info-detail.vue

@@ -4,7 +4,32 @@
       <sub-header />
       <div class="left">
         <hero-sub-title />
-        <div class="detail"></div>
+        <div class="detail">
+          <div class="back" @click="$router.go(-1)"></div>
+
+          <div class="info">
+            <div class="show-case"></div>
+            <h3 class="title">湘鄂赣省工农银行洋银叁角纸币</h3>
+            <div class="label-list">
+              <span>时代：土地革命时期</span>
+              <span>来源：澄潭三星</span>
+              <span>质地：纸质</span>
+              <span>级别：二级</span>
+            </div>
+            <div class="text">
+              这是一段简介这是一段简介这是一段简介这是一段简介这是一段简介这是一段简介这是一段简介这是一段简介这是一段简介这是一段简
+              这是一段简介这是一段简介这是一段简介这是一段简介这是一段简介这是一段简介这是一段简介这是一段简介这是一段简介这是一段简
+              这是一段简介这是一段简介这是一段简介这是一段简介这是一段简介这是一段简介这是一段简介这是一段简介这是一段简介这是一段简
+              这是一段简介这是一段简介这是一段简介这是一段简介这是一段简介这是一段简介这是一段简介这是一段简介这是一段简介这是一段简
+              这是一段简介这是一段简介这是一段简介这是一段简介这是一段简介这是一段简介这是一段简介这是一段简介这是一段简介这是一段简
+              这是一段简介这是一段简介这是一段简介这是一段简介这是一段简介这是一段简介这是一段简介这是一段简介这是一段简介这是一段简
+              这是一段简介这是一段简介这是一段简介这是一段简介这是一段简介这是一段简介这是一段简介这是一段简介这是一段简介这是一段简
+              这是一段简介这是一段简介这是一段简介这是一段简介这是一段简介这是一段简介这是一段简介这是一段简介这是一段简介这是一段简
+              这是一段简介这是一段简介这是一段简介这是一段简介这是一段简介这是一段简介这是一段简介这是一段简介这是一段简介这是一段简
+              这是一段简介这是一段简介这是一段简介这是一段简介这是一段简介这是一段简介这是一段简介这是一段简介这是一段简介这是一段简
+            </div>
+          </div>
+        </div>
       </div>
       <side-menu />
     </div>
@@ -26,14 +51,66 @@ watchEffect(() => {
 </script>
 
 <style lang="scss" scoped>
-.left {
-  background-color: rgba(0, 0, 0, 0.05) !important;
-}
 .detail {
-  margin: 1.875rem;
+  --main-show-case-background: #ddd5d5;
+  --main-detail-margin: 1.875rem;
+  --main-detail-padding: 1.875rem;
+  box-shadow: var(--main-box-shadow);
+  margin: var(--main-detail-margin);
+  margin-bottom: 0;
   flex: 1;
-  height: 100%;
   border-radius: 0.8125rem;
   background: #fff;
+  padding: 2rem 3rem 4rem 3rem;
+
+  overflow-y: scroll;
+  &::-webkit-scrollbar {
+    display: none;
+  }
+
+  .back {
+    background-image: url("/img/back_arrow.png");
+    width: 7.5rem;
+    height: 1.875rem;
+    background-repeat: no-repeat;
+    background-size: contain;
+    margin-bottom: 0.75rem;
+  }
+  .info {
+    max-width: 66.8125rem;
+    margin: 0 auto;
+    font-size: 20px;
+
+    .title {
+      font-size: 1.875rem;
+      line-height: 3.75rem;
+      margin: 1.2rem 0;
+    }
+    .label-list {
+      margin-bottom: 1.5rem;
+      display: inline-flex;
+      flex-direction: row;
+      justify-content: space-between;
+      gap: 0 1.875rem;
+      span {
+        padding-left: 1.5625rem;
+        background-image: url("/img/dot.png");
+        background-repeat: no-repeat;
+        background-size: 1.25rem 1.25rem;
+        background-position: left center;
+      }
+    }
+    .text {
+      font-weight: 400;
+      color: #6e6e6e;
+      line-height: 2.125rem;
+      font-size: 1.25rem;
+    }
+  }
+  .show-case {
+    max-width: 66.8125rem;
+    height: 34.1875rem;
+    background: var(--main-show-case-background);
+  }
 }
 </style>

src/views/info.vue

@@ -15,7 +15,7 @@
                 <n-gi>
                   <infoBox
                     :id="index + 1"
-                    title="卡片"
+                    :title="`湘鄂赣省工农银行洋银叁角纸币-${index + 1}`"
                     cover="https://07akioni.oss-cn-beijing.aliyuncs.com/07akioni.jpeg"
                     time="2023-01-02"
                   />

src/views/survey-detail.vue

@@ -1,34 +1,93 @@
 <template>
   <div class="main">
-    
+    <div class="content">
+      <sub-header />
+      <div class="left">
+        <hero-sub-title />
+        <div class="detail">
+          <div class="back" @click="$router.go(-1)"></div>
+
+          <div class="info">
+            <div class="show-case"></div>
+            <h3 class="title">湘鄂赣省工农银行洋银叁角纸币</h3>
+            <div class="label"></div>
+            <div class="text">
+              这是一段简介这是一段简介这是一段简介这是一段简介这是一段简介这是一段简介这是一段简介这是一段简介这是一段简介这是一段简
+              这是一段简介这是一段简介这是一段简介这是一段简介这是一段简介这是一段简介这是一段简介这是一段简介这是一段简介这是一段简
+              这是一段简介这是一段简介这是一段简介这是一段简介这是一段简介这是一段简介这是一段简介这是一段简介这是一段简介这是一段简
+              这是一段简介这是一段简介这是一段简介这是一段简介这是一段简介这是一段简介这是一段简介这是一段简介这是一段简介这是一段简
+              这是一段简介这是一段简介这是一段简介这是一段简介这是一段简介这是一段简介这是一段简介这是一段简介这是一段简介这是一段简
+              这是一段简介这是一段简介这是一段简介这是一段简介这是一段简介这是一段简介这是一段简介这是一段简介这是一段简介这是一段简
+              这是一段简介这是一段简介这是一段简介这是一段简介这是一段简介这是一段简介这是一段简介这是一段简介这是一段简介这是一段简
+              这是一段简介这是一段简介这是一段简介这是一段简介这是一段简介这是一段简介这是一段简介这是一段简介这是一段简介这是一段简
+              这是一段简介这是一段简介这是一段简介这是一段简介这是一段简介这是一段简介这是一段简介这是一段简介这是一段简介这是一段简
+              这是一段简介这是一段简介这是一段简介这是一段简介这是一段简介这是一段简介这是一段简介这是一段简介这是一段简介这是一段简
+            </div>
+          </div>
+        </div>
+      </div>
+      <side-menu />
+    </div>
   </div>
 </template>
 
 <script setup>
+import { watchEffect, ref } from "vue";
 import { useFullscreen } from "@vueuse/core";
-const { isFullscreen, enter, exit, toggle } = useFullscreen();
-console.log("isFullscreen", isFullscreen);
+import subHeader from "../components/subHeader";
+import sideMenu from "../components/sideMenu";
+import heroSubTitle from "../components/heroSubTitle";
+import { useInfoStore } from "../store/info";
+const title = ref("detail");
+
+watchEffect(() => {
+  document.title = title.value;
+});
 </script>
-<style>
-.main {
-  --main-left-background: #e2caa3;
-  --main-right-background: #910000;
-}
-</style>
 
-<style scoped>
-.main {
-  width: 100%;
-  height: 100%;
-  display: flex;
-  flex-direction: row;
-}
-.left {
-  flex: 0 0 70%;
-  background-color: var(--main-left-background);
-}
-.right {
-  flex: 0 0 30%;
-  background-color: var(--main-right-background);
+<style lang="scss" scoped>
+.detail {
+  --main-show-case-background: #ddd5d5;
+  --main-detail-margin: 1.875rem;
+  --main-detail-padding: 1.875rem;
+  box-shadow: var(--main-box-shadow);
+  margin: var(--main-detail-margin);
+  margin-bottom: 0;
+  flex: 1;
+  border-radius: 0.8125rem;
+  background: #fff;
+  padding: 2rem 3rem 4rem 3rem;
+  overflow-y: scroll;
+
+  .back {
+    background-image: url("/img/back_arrow.png");
+    width: 7.5rem;
+    height: 1.875rem;
+    background-repeat: no-repeat;
+    background-size: contain;
+    margin-bottom: 0.75rem;
+  }
+  .info {
+    max-width: 66.8125rem;
+    margin: 0 auto;
+    font-size: 20px;
+
+    .title {
+      font-size: 1.875rem;
+      line-height: 3.75rem;
+      margin: 1.2rem 0;
+    }
+    .text {
+      font-weight: 400;
+      color: #6e6e6e;
+      line-height: 2.125rem;
+      font-size: 1.25rem;
+    }
+  }
+  .show-case {
+    max-width: 66.8125rem;
+    height: 34.1875rem;
+    background: var(--main-show-case-background);
+  }
 }
 </style>

src/views/survey.vue

@@ -1,106 +1,95 @@
 <template>
   <div class="main">
     <div class="content">
+      <sub-header />
       <div class="left">
+        <hero-sub-title />
+        <div class="detail">
+          <div class="back" @click="$router.go(-1)"></div>
 
-        
-      </div>
-      <div class="right">
-        <div class="logo"></div>
-        <div class="back" @click="$router.push('/')"></div>
+          <div class="info"></div>
+        </div>
       </div>
+      <side-menu />
     </div>
   </div>
 </template>
 
 <script setup>
-import { onMounted } from "vue";
+import { watchEffect, ref } from "vue";
 import { useFullscreen } from "@vueuse/core";
-// import infoBox from "../components/infoBox";
-// import noticeBox from "../components/noticeBox";
+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 { isFullscreen, enter, exit, toggle } = useFullscreen();
-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;
-}
-.content {
+.detail {
+  --main-show-case-background: #ddd5d5;
+  --main-detail-margin: 1.875rem;
+  --main-detail-padding: 1.875rem;
+  box-shadow: var(--main-box-shadow);
+  margin: var(--main-detail-margin);
+  margin-bottom: 0;
   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);
+  border-radius: 0.8125rem;
+  background: #fff;
+  padding: 2rem 3rem 4rem 3rem;
+
+  overflow-y: scroll;
+  &::-webkit-scrollbar {
+    display: none;
   }
+
   .back {
-    width: var(--go-home-width);
-    height: var(--go-home-width);
-    border-radius: 50%;
-    background-color: var(--logo-background-color);
+    background-image: url("/img/back_arrow.png");
+    width: 7.5rem;
+    height: 1.875rem;
+    background-repeat: no-repeat;
+    background-size: contain;
+    margin-bottom: 0.75rem;
+  }
+  .info {
+    max-width: 66.8125rem;
+    margin: 0 auto;
+    font-size: 20px;
+
+    .title {
+      font-size: 1.875rem;
+      line-height: 3.75rem;
+      margin: 1.2rem 0;
+    }
+    .label-list {
+      margin-bottom: 1.5rem;
+      display: inline-flex;
+      flex-direction: row;
+      justify-content: space-between;
+      gap: 0 1.875rem;
+      span {
+        padding-left: 1.5625rem;
+        background-image: url("/img/dot.png");
+        background-repeat: no-repeat;
+        background-size: 1.25rem 1.25rem;
+        background-position: left center;
+      }
+    }
+    .text {
+      font-weight: 400;
+      color: #6e6e6e;
+      line-height: 2.125rem;
+      font-size: 1.25rem;
+    }
+  }
+  .show-case {
+    max-width: 66.8125rem;
+    height: 34.1875rem;
+    background: var(--main-show-case-background);
   }
 }
 </style>