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/Hooks/useRequestHooks.ts

@@ -1,31 +1,31 @@
-export const surveys  = [
+export const surveys = [
-    {
+  {
-      title: '报名签到',
+    title: '报名签到',
-      icon: 'https://files.axshare.com/gsc/DR6075/de/a0/49/dea049d6ad3e4c2c80af44258c6c76d6/images/%E9%A6%96%E9%A1%B5_1/u48.png?pageId=74b3e5b2-848e-4258-8a34-9e220127c8a6'
+    icon: 'https://files.axshare.com/gsc/DR6075/de/a0/49/dea049d6ad3e4c2c80af44258c6c76d6/images/%E9%A6%96%E9%A1%B5_1/u48.png?pageId=74b3e5b2-848e-4258-8a34-9e220127c8a6'
-    },
+  },
-    {
+  {
-      title: '满意度调研',
+    title: '满意度调研',
-      icon: 'https://files.axshare.com/gsc/DR6075/63/4d/77/634d77293a4d41d1b3d145974a8fb6a7/images/%E9%A6%96%E9%A1%B5_1/u27.png?pageId=5cc10b9f-56eb-48dc-943a-bfe7afb18a64'
+    icon: 'https://files.axshare.com/gsc/DR6075/63/4d/77/634d77293a4d41d1b3d145974a8fb6a7/images/%E9%A6%96%E9%A1%B5_1/u27.png?pageId=5cc10b9f-56eb-48dc-943a-bfe7afb18a64'
-    },
+  },
-    {
+  {
-      title: '快速投票',
+    title: '快速投票',
-      icon: 'https://files.axshare.com/gsc/DR6075/63/4d/77/634d77293a4d41d1b3d145974a8fb6a7/images/首页_1/u29.png?pageId=5cc10b9f-56eb-48dc-943a-bfe7afb18a64'
+    icon: 'https://files.axshare.com/gsc/DR6075/63/4d/77/634d77293a4d41d1b3d145974a8fb6a7/images/首页_1/u29.png?pageId=5cc10b9f-56eb-48dc-943a-bfe7afb18a64'
-    },
+  },
-    {
+  {
-      title: '打分评估',
+    title: '打分评估',
-      icon: 'https://files.axshare.com/gsc/DR6075/63/4d/77/634d77293a4d41d1b3d145974a8fb6a7/images/首页_1/u31.png?pageId=5cc10b9f-56eb-48dc-943a-bfe7afb18a64'
+    icon: 'https://files.axshare.com/gsc/DR6075/63/4d/77/634d77293a4d41d1b3d145974a8fb6a7/images/首页_1/u31.png?pageId=5cc10b9f-56eb-48dc-943a-bfe7afb18a64'
-    },
+  },
-    {
+  {
-      title: 'NPS调研',
+    title: 'NPS调研',
-      icon: 'https://files.axshare.com/gsc/DR6075/63/4d/77/634d77293a4d41d1b3d145974a8fb6a7/images/首页_1/u22.png?pageId=5cc10b9f-56eb-48dc-943a-bfe7afb18a64'
+    icon: 'https://files.axshare.com/gsc/DR6075/63/4d/77/634d77293a4d41d1b3d145974a8fb6a7/images/首页_1/u22.png?pageId=5cc10b9f-56eb-48dc-943a-bfe7afb18a64'
-    },{
+  }, {
-      title: '考评测试',
+    title: '考评测试',
-      icon: 'https://files.axshare.com/gsc/DR6075/63/4d/77/634d77293a4d41d1b3d145974a8fb6a7/images/首页_1/u24.png?pageId=5cc10b9f-56eb-48dc-943a-bfe7afb18a64'
+    icon: 'https://files.axshare.com/gsc/DR6075/63/4d/77/634d77293a4d41d1b3d145974a8fb6a7/images/首页_1/u24.png?pageId=5cc10b9f-56eb-48dc-943a-bfe7afb18a64'
-    },{
+  }, {
-      title: '表单收集',
+    title: '表单收集',
-      icon: 'https://files.axshare.com/gsc/DR6075/63/4d/77/634d77293a4d41d1b3d145974a8fb6a7/images/首页_1/u16.png?pageId=5cc10b9f-56eb-48dc-943a-bfe7afb18a64'
+    icon: 'https://files.axshare.com/gsc/DR6075/63/4d/77/634d77293a4d41d1b3d145974a8fb6a7/images/首页_1/u16.png?pageId=5cc10b9f-56eb-48dc-943a-bfe7afb18a64'
-    },{
+  }, {
-      title: '消费者测试',
+    title: '消费者测试',
-      icon: 'https://files.axshare.com/gsc/DR6075/63/4d/77/634d77293a4d41d1b3d145974a8fb6a7/images/首页_1/u18.png?pageId=5cc10b9f-56eb-48dc-943a-bfe7afb18a64'
+    icon: 'https://files.axshare.com/gsc/DR6075/63/4d/77/634d77293a4d41d1b3d145974a8fb6a7/images/首页_1/u18.png?pageId=5cc10b9f-56eb-48dc-943a-bfe7afb18a64'
-    }
+  }
-  ];
+];

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

@@ -1,18 +1,18 @@
 <script setup lang="ts">
-import { surveys } from "./Hooks/useRequestHooks"
+import { surveys } from './Hooks/useRequestHooks';
 
 </script>
 
 <template>
-    <van-cell>
+  <van-cell>
-        <div style="text-align: left;">新建问卷</div>
+    <div style="text-align: left;">新建问卷</div>
-        <van-row>
+    <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=" " />
+        <img width="45px" :src="survey.icon" alt=" " />
-                <span>{{ survey.title }}</span>
+        <span>{{ survey.title }}</span>
-            </van-col>
+      </van-col>
-        </van-row>
+    </van-row>
-    </van-cell>
+  </van-cell>
 </template>
 
 <style lang="scss" scoped>

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

@@ -1,45 +1,89 @@
+<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 lang="scss">
-
+.last-survey {
-<style scoped>
+  &> :first-child {
-.survey {
-  & > :first-child {
     display: flex;
     align-items: end;
     justify-content: space-between;
     margin: 10px 0;
 
-    & > span {
+    &>span {
       color: grey;
       font-size: 10px;
     }
   }
 
-  .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);
+      width: 100%;
-      height: calc(135px / 1.3);
+
+      /* 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: '问卷描述'
+  }
+];