refactor: 重构最新问卷组件

- 最新问卷组件样式更新
- 内容调整
- 增加 hooks 内容支持

src/views/Home/Index.vue

@@ -41,7 +41,6 @@ import CreateSurvey from './components/CreateSurvey/Index.vue';
       padding: 20px 10px;
     }
 
-
   }
 }
 </style>

src/views/Home/components/CreateSurvey/Index.vue

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { surveys } from "./Hooks/useRequestHooks"
+import { surveys } from './Hooks/useRequestHooks';
 
 </script>
 
@@ -7,7 +7,7 @@ import { surveys } from "./Hooks/useRequestHooks"
   <van-cell>
     <div style="text-align: left;">新建问卷</div>
     <van-row>
-            <van-col span="6" v-for="survey in surveys" :key="survey.title" class="survey">
+      <van-col v-for="survey in surveys" :key="survey.title" span="6" class="survey">
         <img width="45px" :src="survey.icon" alt=" " />
         <span>{{ survey.title }}</span>
       </van-col>

src/views/Home/components/Suvrey/Index.vue

@@ -1,20 +1,40 @@
+<script setup lang="ts">
+import { lastSurveys } from './hooks/useLastSurveyHooks';
+
+</script>
+
 <template>
   <!-- 问卷 -->
-  <div class="survey">
+  <div class="last-survey">
     <div>
-      <h4>问卷</h4>
+      <small>最新问卷</small>
       <span @click="$router.push('/survey')">全部问卷></span>
     </div>
-    <div class="survey_items">
-      <div v-for="survey in 3" :key="survey"></div>
+    <!-- 问卷列表容器 -->
+    <div class="last-survey_items">
+      <!-- 问卷列表项 -->
+      <div v-for="survey in lastSurveys" :key="survey">
+        <div class="last-survey_items_status">
+          <img
+            src="https://files.axshare.com/gsc/DR6075/63/4d/77/634d77293a4d41d1b3d145974a8fb6a7/images/首页_1/u249.svg?pageId=5cc10b9f-56eb-48dc-943a-bfe7afb18a64"
+            alt=" " width="10px" height="10px" />
+          <small> {{ survey.status }} - 100</small>
+        </div>
+        <div class="last-survey_items_info">
+          <small> 报名签到</small> <small>| {{ survey.platform }} | 创建时间: {{ survey.createTime }}</small>
+        </div>
+
+        <div class="last-survey_items_content">
+          <p><small>{{ survey.title }}</small></p>
+          <p><small>{{ survey.describe }}</small></p>
+        </div>
+      </div>
     </div>
   </div>
 </template>
 
-<script setup lang="ts"></script>
-
-<style scoped>
-.survey {
+<style scoped lang="scss">
+.last-survey {
   &> :first-child {
     display: flex;
     align-items: end;
@@ -27,19 +47,43 @@
     }
   }
 
-  .survey_items {
+  .last-survey_items {
     display: flex;
-    flex-flow: row wrap;
+    flex-flow: column nowrap;
     justify-content: space-around;
 
-    div {
+    &>div {
       display: flex;
+      flex-direction: column;
       overflow: hidden;
-      width: calc(129px / 1.3);
-      height: calc(135px / 1.3);
+      width: 100%;
+
+      /* width: calc(129px / 1.3); */
+
+      /* height: calc(135px / 1.3); */
+      margin: 5px 0;
+      padding: 5px 0 5px 5px;
       border-radius: 6px;
       background-color: white;
+
+      .last-survey_items_status {
+        &>small {
+          color: red;
+          font-size: 10px;
         }
       }
+
+      .last-survey_items_info {
+        color: #999;
+        font-size: 10px;
+      }
+
+      .last-survey_items_content {
+        font-size: 12px;
+
+      }
+    }
+
+  }
 }
 </style>

src/views/Home/components/Suvrey/hooks/useLastSurveyHooks.ts

@@ -0,0 +1,22 @@
+
+export const lastSurveys = [
+  {
+    status: '已结束',
+    platform: '移动端',
+    createTime: '2025-03-04',
+    title: '签到报名问卷标题',
+    describe: '问卷描述'
+  }, {
+    status: '已结束',
+    platform: '移动端',
+    createTime: '2025-03-04',
+    title: '签到报名问卷标题',
+    describe: '问卷描述'
+  }, {
+    status: '已结束',
+    platform: '移动端',
+    createTime: '2025-03-04',
+    title: '签到报名问卷标题',
+    describe: '问卷描述'
+  }
+];