feat: 保存

src/components/exhibitionBox.vue

@@ -65,11 +65,18 @@ const handleTodetail = () => {
 .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;
+  --n-padding-top: 1rem !important;
+  --n-padding-bottom: 1.25rem !important;
   border-radius: 1.875rem;
-  box-shadow: var(--main-box-shadow);
+  // box-shadow: var(--main-box-shadow);
   cursor: pointer;
+  background-color: transparent;
+  background-image: var(--main-sub-list-bg);
+  background-position: center right;
+  background-size: cover;
+  background-repeat: no-repeat;
+  height: 15.75rem;
+  overflow: hidden;
 }
 .exhibition-box {
   .box {
@@ -79,36 +86,36 @@ const handleTodetail = () => {
     flex-direction: row;
 
     .cover {
-      height: 13.4375rem;
+      height: 215px;
       width: auto;
     }
     .info {
       flex: 1;
-      padding-left: 3.125rem;
+      padding-left: 50px;
       .title {
-        font-size: 1.75rem;
+        font-size: 28px;
         font-weight: 700;
-        padding: 0.5rem 0 1rem 0;
+        padding: 8px 0 16px 0;
       }
       .content—box {
-        font-size: 16px;
+        font-size: 1rem;
         color: #6e6e6e;
-        height: 6.25rem;
+        height: 100px;
         overflow: hidden;
       }
       .label-box {
         display: inline-flex;
-        height: 2.5rem;
+        height: 40px;
         align-items: center;
-        gap: 0 10px;
+        gap: 0 .625rem;
         width: 100%;
         color: #6e6e6e;
-        font-size: 1rem;
+        font-size: 16px;
         .label {
           background-image: url("img/dot.png");
-          background-size: 0.9375rem 0.9375rem;
+          background-size: 15px 15px;
           background-repeat: no-repeat;
-          padding-left: 1.375rem;
+          padding-left: 22px;
           background-position: center left;
         }
       }

src/components/surveyBox.vue

@@ -1,8 +1,12 @@
 <template>
   <n-card :title="title" class="survey-box" @click="handleDetail">
-    {{ content }}
+    <div class="info">
+      {{ content }}
+    </div>
     <template #footer>
-      {{ time }}
+      <div class="time">
+        {{ time }}
+      </div>
     </template>
   </n-card>
 </template>
@@ -45,12 +49,23 @@ const handleDetail = () => {
 .n-card.survey-box {
   --n-title-font-weight: 600 !important;
   --n-title-font-size: 1.75rem !important;
+  --n-padding-top: 1.875rem !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;
+  border: none;
   cursor: pointer;
-  // background-color: transparent;
+  background-color: transparent;
+  background-image: var(--main-sub-list-bg);
+  background-position: top right;
+  background-size: cover;
+  background-repeat: no-repeat;
+  height: 15.75rem;
+  overflow: hidden;
+}
+.time {
+  color: var(--main-sub-text-color);
+}
+.info {
+  font-size: calc(var(--base-font-size) * 1.3);
 }
 </style>

src/style.css

@@ -1,9 +1,11 @@
 :root {
   --main-primary-color: #910000;
   --main-secondary-color: #e2caa3;
+  --main-sub-text-color: #9b9b9b;
   --main-box-shadow: 0px 2px 4px 0px rgba(46, 25, 16, 0.16);
   --main-detail-background-img: url("/img/box_banner_bg.png");
-  font-size: 16px;
+  --base-font-size: 16px;
+  font-size: var(--base-font-size);
 }
 
 html,
@@ -68,6 +70,7 @@ body,
   --main-sub-nav-background: url("/img/sub_nav_bg.png");
   --main-sub-nav-height: 3.5rem;
   --main-sub-nav-title-width: 21.375rem;
+  --main-sub-list-bg: url("/img/notice_list_bg.png");
 }
 .page:not(.home) .main .content {
   display: flex;

src/views/feedback.vue

@@ -37,7 +37,18 @@
               />
             </n-space>
             <n-space align="center" justify="center" style="padding: 20px">
-              <n-button class="submit" size="large" type="primary">
+              <n-button
+                class="submit"
+                size="large"
+                :disabled="
+                  feedBackContent.length === 0 ||
+                  nickName.length === 0 ||
+                  contact.length === 0 ||
+                  verifyCode.length === 0
+                "
+                type="primary"
+                @click="submit"
+              >
                 提交
               </n-button>
             </n-space>
@@ -51,11 +62,13 @@
 
 <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 { useRouter } from "vue-router";
+const router = useRouter();
+
 const title = ref("detail");
 const feedBackContent = ref("");
 const nickName = ref("");
@@ -66,13 +79,22 @@ watchEffect(() => {
 });
 
 const submit = () => {
-
-
-
+  //to submit
+  const data = {
+    name: nickName.value,
+    content: feedBackContent.value,
+    contact: contact.value,
+    code: verifyCode.value,
+  };
+  console.log("data", data);
+  router.go(-1);
 };
 </script>
 
 <style lang="scss" scoped>
+:deep(.n-input) {
+  font-size: 16px;
+}
 .detail {
   --main-show-case-background: #ddd5d5;
   --main-detail-margin: 1.875rem;

src/views/info.vue

@@ -25,9 +25,10 @@
           </n-tab-pane>
           <n-tab-pane name="活动" 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
+                    :id="index + 1"
                     title="卡片"
                     cover="https://07akioni.oss-cn-beijing.aliyuncs.com/07akioni.jpeg"
                     time="2023-01-02"
@@ -89,6 +90,4 @@ onMounted(() => {
 });
 </script>
 
-<style lang="scss" scoped>
-
-</style>
+<style lang="scss" scoped></style>

src/views/survey.vue

@@ -68,7 +68,6 @@ watchEffect(() => {
     margin-bottom: 0.75rem;
   }
   .info {
-    max-width: 66.8125rem;
     margin: 0 auto;
     font-size: 20px;