feat: 临时保存

src/components/collectBox.vue

@@ -0,0 +1,93 @@
+<template>
+  <n-card class="info-box">
+    <template #cover>
+      <div class="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>
+defineOptions({
+  name: "collect-box",
+});
+
+defineProps({
+  id: {
+    type: [Number, String],
+    default: () => NaN,
+  },
+  title: {
+    type: [String, undefined],
+    default: () => "",
+  },
+  cover: {
+    type: [String, undefined],
+    default: () => "",
+  },
+  time: {
+    type: [String, undefined],
+    default: () => "",
+  },
+});
+</script>
+
+<style>
+.info-box {
+  --box-remark-color: #9b9b9b;
+}
+</style>
+<style lang="scss" scoped>
+.n-card.info-box {
+  padding: 10px;
+  --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);
+  .cover {
+    background-color: gray;
+    overflow: hidden;
+    max-height: 284px;
+  }
+  .title {
+    font-size: 26px;
+    margin: 15px 0;
+  }
+  .info-line {
+    display: flex;
+    flex-direction: column;
+    .time-line {
+      width: 100%;
+      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;
+        }
+      }
+    }
+  }
+}
+</style>

src/components/surveyBox.vue

@@ -1,5 +1,5 @@
 <template>
-  <n-card :title="title">
+  <n-card :title="title" class="survey-box" @click="handleDetail">
     {{ content }}
     <template #footer>
       {{ time }}
@@ -7,11 +7,17 @@
   </n-card>
 </template>
 <script setup>
+import { useRouter } from "vue-router";
+const router = useRouter();
 defineOptions({
   name: "survey-box",
 });
 
-defineProps({
+const props = defineProps({
+  id: {
+    type: [String, Number],
+    default: () => "",
+  },
   title: {
     type: String,
     default: () => "",
@@ -25,4 +31,26 @@ defineProps({
     default: () => "",
   },
 });
+
+const handleDetail = () => {
+  if (props.id) {
+    router.push("/survey-detail/" + props.id);
+  } else {
+    console.warn("missing id");
+  }
+};
 </script>
+
+<style lang="scss" scoped>
+.n-card.survey-box {
+  --n-title-font-weight: 600 !important;
+  --n-title-font-size: 1.75rem !important;
+  border-radius: 1.875rem;
+  box-shadow: var(--main-box-shadow);
+  // background-image: url("/img/notice_list_bg.png");
+  background-size: contain;
+  background-repeat: no-repeat;
+  cursor: pointer;
+  // background-color: transparent;
+}
+</style>

src/router/index.js

@@ -75,6 +75,14 @@ const routes = [
       title: "",
     },
   },
+  {
+    path: "/survey-detail/:id",
+    name: "surveyDetail",
+    component: () => import("@/views/survey-detail.vue"),
+    meta: {
+      title: "",
+    },
+  },
 ];
 
 const router = createRouter({

src/views/collect.vue

@@ -6,14 +6,30 @@
         <n-tabs type="line" pane-class="tab-content">
           <template #prefix>
             <span class="meta-title">
-              <img src="/img/subtitle_1.png" />
+              <img src="/img/subtitle_3.png" />
+            </span>
+          </template>
+          <template #suffix>
+            <span class="input-container">
+              <!-- <n-input
+                v-model:value="inputValue"
+                placeholder="请输入要搜索的藏品"
+              /> -->
+              <n-input-group round>
+                <n-input
+                  round
+                  v-model:value="inputValue"
+                  placeholder="请输入要搜索的藏品"
+                />
+                <n-button round type="primary" > 搜索 </n-button>
+              </n-input-group>
             </span>
           </template>
           <n-tab-pane name="展览" tab="展览">
             <n-grid :x-gap="XGap" :y-gap="YGap" :cols="3" class="tab-grid">
               <template v-for="(_, index) in 16">
                 <n-gi>
-                  <infoBox
+                  <collect-box
                     :id="index + 1"
                     title="卡片"
                     cover="https://07akioni.oss-cn-beijing.aliyuncs.com/07akioni.jpeg"
@@ -71,9 +87,9 @@
 </template>
 
 <script setup>
-import { onMounted } from "vue";
+import { onMounted, ref } from "vue";
 import { useFullscreen } from "@vueuse/core";
-import infoBox from "../components/infoBox";
+import collectBox from "../components/collectBox";
 import subHeader from "../components/subHeader";
 import sideMenu from "../components/sideMenu";
 import noticeBox from "../components/noticeBox";
@@ -81,6 +97,7 @@ import { useInfoStore } from "../store/info";
 
 const XGap = ref(50);
 const YGap = ref(50);
+const inputValue = ref("");
 const { isFullscreen, enter, exit, toggle } = useFullscreen();
 const InfoStore = useInfoStore();
 
@@ -89,4 +106,13 @@ onMounted(() => {
 });
 </script>
 
-<style lang="scss" scoped></style>
+<style lang="scss" scoped>
+:deep(.n-tabs-nav__suffix) {
+  min-width: 100px;
+  flex: 1;
+  .input-container {
+    width: 100%;
+    padding: 0 20px;
+  }
+}
+</style>

src/views/survey-detail.vue

@@ -6,24 +6,7 @@
         <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 class="info"></div>
         </div>
       </div>
       <side-menu />

src/views/survey.vue

@@ -3,15 +3,16 @@
     <div class="content">
       <sub-header />
       <div class="left">
-        <hero-sub-title />
+        <hero-sub-title :type="4"/>
         <div class="detail">
           <!-- <div class="back" @click="$router.go(-1)"></div> -->
 
           <div class="info">
             <n-grid :y-gap="YGap" :cols="1" class="tab-grid">
-              <template v-for="item in 16">
+              <template v-for="(_, index) in 16">
                 <n-gi>
-                  <notice-box
+                  <survey-box
+                    :id="`${index + 1}`"
                     title="这是一段标题这是一段标题"
                     content="这是一段摘要这是一段摘要这是一段摘要这是一段摘要这是一段摘要这是一段摘要这是一段摘要这是一段摘要这是一段摘要这是一段摘要这是一段摘要这是一段摘要这是一段摘要这是一段摘要这是一段摘要这是一段摘要这是一段摘要这是一段摘要这是一段..."
                     time="2023-01-02"
@@ -29,13 +30,14 @@
 
 <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";
+import surveyBox from "../components/surveyBox";
 const title = ref("detail");
 const YGap = ref(50);
+
 watchEffect(() => {
   document.title = title.value;
 });