feat: 临时保存

src/components/collectBox.vue

@@ -1,28 +1,24 @@
 <template>
-  <n-card class="info-box">
+  <n-card class="collect-box" @click="handleDetail">
     <template #cover>
       <div class="cover">
-        <img :src="cover" />
+        <!-- <img :src="cover" /> -->
       </div>
     </template>
     <div class="info-line">
       <div class="title">{{ title }}</div>
-      <div class="time-line">
-        <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>
   </n-card>
 </template>
 <script setup>
+import { useRouter } from "vue-router";
+
+const router = useRouter();
 defineOptions({
   name: "collect-box",
 });
 
-defineProps({
+const props = defineProps({
   id: {
     type: [Number, String],
     default: () => NaN,
@@ -40,32 +36,62 @@ defineProps({
     default: () => "",
   },
 });
+const handleDetail = () => {
+  if (props.id) {
+    router.push('/collect-detail/' + props.id)
+  }
+};
 </script>
 
 <style>
-.info-box {
-  --box-remark-color: #9b9b9b;
+.collect-box {
+  --collect-box-remark-color: #9b9b9b;
+  --collect-box-background: url("/img/collect-box-bg.png");
+  --collect-box-title-font-size: 1.625rem;
+  --collect-box-title-dot: url("/img/dot.png");
 }
 </style>
 <style lang="scss" scoped>
-.n-card.info-box {
-  padding: 10px;
+.n-card.collect-box {
+  padding: 0.625rem;
   --n-padding-left: 0 !important;
   --n-padding-bottom: 0 !important;
-  // width: 515px;
-  // height: 424px;
   background: #f5f5f5;
-  box-shadow: 0rem .125rem .25rem 0rem rgba(46,25,16,0.16);
-  border-radius: 13px;
-  border-top: .5rem solid var(--main-primary-color);
+  box-shadow: 0px 2px 4px 0px rgba(46, 25, 16, 0.16);
+  border-radius: 0.8125rem;
+  padding: 0;
+  cursor: pointer;
   .cover {
-    background-color: gray;
+    background-color: #c1b2b2;
     overflow: hidden;
-    max-height: 284px;
+    min-height: 20.1875rem;
+    width: 100%;
   }
   .title {
-    font-size: 26px;
-    margin: 15px 0;
+    font-size: var(--collect-box-title-font-size);
+    margin: 0.9375rem;
+    padding-left: 25px;
+    position: relative;
+    line-height: calc(var(--collect-box-title-font-size) * 2);
+    text-overflow: ellipsis;
+    word-break: break-all;
+    max-height: calc(var(--collect-box-title-font-size) * 3 + 0.9375rem * 2);
+    overflow: hidden;
+    display: -webkit-box;
+    -webkit-box-orient: vertical;
+    -webkit-line-clamp: 2;
+    &::before {
+      content: " ";
+      top: calc(var(--collect-box-title-font-size) / 2);
+      left: 0;
+      position: absolute;
+      background-image: var(--collect-box-title-dot);
+      background-size: 20px 20px;
+      width: 20px;
+      height: 20px;
+      background-repeat: no-repeat;
+      background-position: center left;
+    }
   }
   .info-line {
     display: flex;
@@ -75,16 +101,16 @@ defineProps({
       flex: 1;
       display: flex;
       justify-content: space-between;
-      color: var(--box-remark-color);
+      color: var(--collect-box-remark-color);
       .see-more {
         cursor: pointer;
         display: inline-flex;
         justify-content: center;
         align-items: center;
         img {
-          max-height: 16px;
+          max-height: 1rem;
           width: auto;
-          margin-left: 5px;
+          margin-left: 0.3125rem;
         }
       }
     }

src/components/infoBox.vue

@@ -49,23 +49,23 @@ defineProps({
 </style>
 <style lang="scss" scoped>
 .n-card.info-box {
-  padding: 10px;
+  padding: .625rem;
   --n-padding-left: 0 !important;
   --n-padding-bottom: 0 !important;
-  // width: 515px;
-  // height: 424px;
+  // width: 32.1875rem;
+  // height: 26.5rem;
   background: #f5f5f5;
-  box-shadow: 0rem .125rem .25rem 0rem rgba(46,25,16,0.16);
-  border-radius: 13px;
-  border-top: .5rem solid var(--main-primary-color);
+  box-shadow: 0px 2px 4px 0px rgba(46,25,16,0.16);
+  border-radius: .8125rem;
+  border-top: 8px solid var(--main-primary-color);
   .cover {
     background-color: gray;
     overflow: hidden;
-    max-height: 284px;
+    max-height: 17.75rem;
   }
   .title {
-    font-size: 26px;
-    margin: 15px 0;
+    font-size: 1.625rem;
+    margin: .9375rem 0;
   }
   .info-line {
     display: flex;
@@ -76,15 +76,16 @@ defineProps({
       display: flex;
       justify-content: space-between;
       color: var(--box-remark-color);
+      font-size: 1rem;
       .see-more {
         cursor: pointer;
         display: inline-flex;
         justify-content: center;
         align-items: center;
         img {
-          max-height: 16px;
+          max-height: 1rem;
           width: auto;
-          margin-left: 5px;
+          margin-left: .3125rem;
         }
       }
     }

src/components/showCase.vue

@@ -0,0 +1,86 @@
+<template>
+  <div class="show-case-container">
+    <div class="tools">
+      <n-space class="group-type">
+        <n-button type="primary" round>模型</n-button>
+        <n-button type="primary" round>视频</n-button>
+        <n-button type="primary" round>图片</n-button>
+      </n-space>
+      <div class="actions">
+        <div>
+          <img src="/img/zoom-in.png" />
+          <img src="/img/zoom-out.png" />
+          <img src="/img/reload.png" />
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { ref } from "vue";
+
+const type = ref();
+
+defineOptions({
+  name: "show-case",
+});
+
+const props = defineProps({
+  model: {
+    type: String,
+    default: () => "",
+  },
+  video: {
+    type: String,
+    default: () => "",
+  },
+  audio: {
+    type: String,
+    default: () => "",
+  },
+  photos: {
+    type: Array,
+    default: () => [""],
+  },
+});
+</script>
+
+<style>
+.show-case-container {
+  --show-case-width: 66.8125rem;
+  --show-case-height: 34.1875rem;
+  --show-case-background: #c1b2b2;
+  --show-case-tools-padding: 1rem;
+}
+</style>
+
+<style lang="scss" scoped>
+.show-case-container {
+  width: var(--show-case-width);
+  height: var(--show-case-height);
+  position: relative;
+  background-color: var(--show-case-background);
+
+  .tools {
+    display: inline-flex;
+    position: absolute;
+    bottom: 1.25rem;
+    flex-direction: row;
+    justify-content: space-between;
+    width: calc(100% - var(--show-case-tools-padding) * 2);
+    padding: 0 var(--show-case-tools-padding);
+    .group-type,
+    .actions {
+      img {
+        height: 2.5rem;
+        width: auto;
+        margin: 0 0.3125rem;
+        cursor: pointer;
+      }
+    }
+    .group-type {
+    }
+  }
+}
+</style>

src/router/index.js

@@ -83,6 +83,15 @@ const routes = [
       title: "",
     },
   },
+  {
+    path: "/404",
+    name: "404",
+    component: () => import("@/views/404.vue"),
+  },
+  {
+    path: "/:pathMatch(.*)",
+    redirect: "/404",
+  },
 ];
 
 const router = createRouter({

src/views/404.vue

@@ -0,0 +1,85 @@
+<template>
+  <div class="main">
+    <div class="content">
+      <sub-header />
+      <div class="left">
+        <div class="detail">
+          <div class="back" @click="$router.go(-1)"></div>
+          <div class="info">
+            <n-result
+              status="404"
+              title="404 资源不存在"
+              description="404 资源不存在"
+            >
+              <template #footer>
+                <n-button @click="$router.go(-1)">返回</n-button>
+              </template>
+            </n-result>
+          </div>
+        </div>
+      </div>
+      <side-menu />
+    </div>
+  </div>
+</template>
+
+<script setup>
+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");
+
+watchEffect(() => {
+  document.title = title.value;
+});
+</script>
+
+<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/collect-detail.vue

@@ -1,101 +1,117 @@
 <template>
   <div class="main">
     <div class="content">
-      <div class="left"></div>
-      <div class="right">
-        <div class="logo"></div>
-        <div class="back" @click="$router.push('/')"></div>
+      <sub-header />
+      <div class="left">
+        <hero-sub-title :type="3" />
+        <div class="detail">
+          <div class="back" @click="$router.go(-1)"></div>
+
+          <div class="info">
+            <!-- <div class="show-case"></div> -->
+            <show-case />
+            <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>
   </div>
 </template>
 
 <script setup>
-import { onMounted } from "vue";
-import { useFullscreen } from "@vueuse/core";
-import { useInfoStore } from "../store/info";
+import { watchEffect, ref } from "vue";
+import subHeader from "../components/subHeader";
+import sideMenu from "../components/sideMenu";
+import heroSubTitle from "../components/heroSubTitle";
+import showCase from "../components/showCase.vue";
 
-const { isFullscreen, enter, exit, toggle } = useFullscreen();
-const InfoStore = useInfoStore();
+const title = ref("collect-detail");
 
-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 {
-  flex: 1;
-  display: flex;
-  width: 100%;
-  height: 100%;
-  flex-direction: row;
-  overflow: hidden;
-}
-.left {
+.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;
-  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/collect.vue

@@ -25,13 +25,13 @@
               </n-input-group>
             </span>
           </template>
-          <n-tab-pane name="展览" tab="展览">
+          <n-tab-pane name="all" tab="全部">
             <n-grid :x-gap="XGap" :y-gap="YGap" :cols="3" class="tab-grid">
               <template v-for="(_, index) in 16">
                 <n-gi>
                   <collect-box
                     :id="index + 1"
-                    title="卡片"
+                    title="里仁学校学生使用的课本——日本东洋博物学 会编《博物标本图汇》里仁学校学生使用的课本——日本东洋博物学 会编《博物标本图汇》"
                     cover="https://07akioni.oss-cn-beijing.aliyuncs.com/07akioni.jpeg"
                     time="2023-01-02"
                   />
@@ -39,12 +39,13 @@
               </template>
             </n-grid>
           </n-tab-pane>
-          <n-tab-pane name="活动" tab="活动">
+          <n-tab-pane name="one" tab="一级">
             <n-grid :x-gap="XGap" :y-gap="YGap" :cols="3" class="tab-grid">
-              <template v-for="item in 16">
+              <template v-for="(_, index) in 16">
                 <n-gi>
-                  <infoBox
-                    title="卡片"
+                  <collect-box
+                    :id="index + 1"
+                    title="里仁学校学生使用的课本——日本东洋博物学 会编《博物标本图汇》里仁学校学生使用的课本——日本东洋博物学 会编《博物标本图汇》"
                     cover="https://07akioni.oss-cn-beijing.aliyuncs.com/07akioni.jpeg"
                     time="2023-01-02"
                   />
@@ -52,12 +53,13 @@
               </template>
             </n-grid>
           </n-tab-pane>
-          <n-tab-pane name="新闻" tab="新闻">
+          <n-tab-pane name="two" tab="二级">
             <n-grid :x-gap="XGap" :y-gap="YGap" :cols="3" class="tab-grid">
-              <template v-for="item in 16">
+              <template v-for="(_, index) in 16">
                 <n-gi>
-                  <infoBox
-                    title="卡片"
+                  <collect-box
+                    :id="index + 1"
+                    title="里仁学校学生使用的课本——日本东洋博物学 会编《博物标本图汇》里仁学校学生使用的课本——日本东洋博物学 会编《博物标本图汇》"
                     cover="https://07akioni.oss-cn-beijing.aliyuncs.com/07akioni.jpeg"
                     time="2023-01-02"
                   />
@@ -65,14 +67,14 @@
               </template>
             </n-grid>
           </n-tab-pane>
-          <n-tab-pane name="通知" tab="通知">
-            <n-grid :y-gap="YGap" :cols="1" class="tab-grid">
+          <n-tab-pane name="three" tab="三级">
+            <n-grid :x-gap="XGap" :y-gap="YGap" :cols="3" class="tab-grid">
               <template v-for="(_, index) in 16">
                 <n-gi>
-                  <notice-box
-                    :id="`${index + 2}_notice`"
-                    title="这是一段标题这是一段标题"
-                    content="这是一段摘要这是一段摘要这是一段摘要这是一段摘要这是一段摘要这是一段摘要这是一段摘要这是一段摘要这是一段摘要这是一段摘要这是一段摘要这是一段摘要这是一段摘要这是一段摘要这是一段摘要这是一段摘要这是一段摘要这是一段摘要这是一段..."
+                  <collect-box
+                    :id="index + 1"
+                    title="里仁学校学生使用的课本——日本东洋博物学 会编《博物标本图汇》里仁学校学生使用的课本——日本东洋博物学 会编《博物标本图汇》"
+                    cover="https://07akioni.oss-cn-beijing.aliyuncs.com/07akioni.jpeg"
                     time="2023-01-02"
                   />
                 </n-gi>

src/views/home.vue

@@ -11,22 +11,22 @@
         <img
           class="carousel-img"
           style="width: 100%; height: 100%; object-fit: cover"
-          src="https://naive-ui.oss-cn-beijing.aliyuncs.com/carousel-img/carousel1.jpeg"
+          src="/img/show_banner.png"
         />
         <img
           class="carousel-img"
           style="width: 100%; height: 100%; object-fit: cover"
-          src="https://naive-ui.oss-cn-beijing.aliyuncs.com/carousel-img/carousel2.jpeg"
+          src="/img/show_banner.png"
         />
         <img
           class="carousel-img"
           style="width: 100%; height: 100%; object-fit: cover"
-          src="https://naive-ui.oss-cn-beijing.aliyuncs.com/carousel-img/carousel3.jpeg"
+          src="/img/show_banner.png"
         />
         <img
           class="carousel-img"
           style="width: 100%; height: 100%; object-fit: cover"
-          src="https://naive-ui.oss-cn-beijing.aliyuncs.com/carousel-img/carousel4.jpeg"
+          src="/img/show_banner.png"
         />
       </n-carousel>
     </div>
@@ -68,7 +68,8 @@ const { isFullscreen, enter, exit, toggle } = useFullscreen();
 .main {
   --main-home-left-background: #e2caa3;
   --main-home-right-background: #910000;
-  /* --main-right-bg-img: url("img/h_banner_bg.png"); */
+  --main-right-border: 10px;
+  --main-right-bg-img: url("img/h_banner_bg_1.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");
@@ -95,10 +96,14 @@ const { isFullscreen, enter, exit, toggle } = useFullscreen();
 .right {
   flex: 0 0 416px;
   width: 416px;
-  background-color: var(--main-home-right-background);
+  // background-color: var(--main-home-right-background);
+  border-top: var(--main-right-border) solid var(--main-home-right-background);
+  border-bottom: var(--main-right-border) solid
+    var(--main-home-right-background);
   background-image: var(--main-right-bg-img);
-  background-size: contain;
+  background-size: cover;
   background-repeat: no-repeat;
+  background-position: bottom right;
   display: flex;
   align-items: center;
   justify-content: center;