refactor: 重构首页界面

- 首页界面重新调整
- 新建问卷内容抽离单独 CreateSurvey 组件
- hooks 存放对应标题数据

src/views/Home/Index.vue

@@ -1,42 +1,19 @@
 <script setup>
+// template
 import Survey from './components/Suvrey/Index.vue';
 import Market from './components/Market/Index.vue';
+import CreateSurvey from './components/CreateSurvey/Index.vue';
 
-const func = [
-  {
-    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'
-  },
-  {
-    title: '问卷调查',
-    icon: 'https://files.axshare.com/gsc/DR6075/de/a0/49/dea049d6ad3e4c2c80af44258c6c76d6/images/%E9%A6%96%E9%A1%B5_1/u51.png?pageId=74b3e5b2-848e-4258-8a34-9e220127c8a6'
-  },
-  {
-    title: '活动模板',
-    icon: 'https://files.axshare.com/gsc/DR6075/de/a0/49/dea049d6ad3e4c2c80af44258c6c76d6/images/%E9%A6%96%E9%A1%B5_1/u54.png?pageId=74b3e5b2-848e-4258-8a34-9e220127c8a6'
-  },
-  {
-    title: '活动管理',
-    icon: 'https://files.axshare.com/gsc/DR6075/de/a0/49/dea049d6ad3e4c2c80af44258c6c76d6/images/%E9%A6%96%E9%A1%B5_1/u57.png?pageId=74b3e5b2-848e-4258-8a34-9e220127c8a6'
-  }
-];
 </script>
 
 <template>
   <div class="container">
-    <div>
-      <div v-for="card in func" :key="card.title" class="funcCard">
-        <img
-          width="50px"
-          src="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"
-          alt=" "
-        />
-        <span>title</span>
-      </div>
-    </div>
+    <create-survey />
 
+    <!-- 最新问卷 -->
     <Survey />
 
+    <!-- 模板市场 -->
     <Market />
   </div>
 </template>
@@ -64,16 +41,7 @@ const func = [
       padding: 20px 10px;
     }
 
-    .funcCard {
-      display: flex;
-      flex-direction: column;
-      align-items: center;
-      justify-content: space-around;
 
-      img {
-        margin-bottom: 5px;
-      }
-    }
   }
 }
 </style>

src/views/Home/components/CreateSurvey/Hooks/useRequestHooks.ts

@@ -0,0 +1,31 @@
+export const surveys  = [
+    {
+      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'
+    },
+    {
+      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'
+    },
+    {
+      title: '快速投票',
+      icon: 'https://files.axshare.com/gsc/DR6075/63/4d/77/634d77293a4d41d1b3d145974a8fb6a7/images/首页_1/u29.png?pageId=5cc10b9f-56eb-48dc-943a-bfe7afb18a64'
+    },
+    {
+      title: '打分评估',
+      icon: 'https://files.axshare.com/gsc/DR6075/63/4d/77/634d77293a4d41d1b3d145974a8fb6a7/images/首页_1/u31.png?pageId=5cc10b9f-56eb-48dc-943a-bfe7afb18a64'
+    },
+    {
+      title: 'NPS调研',
+      icon: 'https://files.axshare.com/gsc/DR6075/63/4d/77/634d77293a4d41d1b3d145974a8fb6a7/images/首页_1/u22.png?pageId=5cc10b9f-56eb-48dc-943a-bfe7afb18a64'
+    },{
+      title: '考评测试',
+      icon: 'https://files.axshare.com/gsc/DR6075/63/4d/77/634d77293a4d41d1b3d145974a8fb6a7/images/首页_1/u24.png?pageId=5cc10b9f-56eb-48dc-943a-bfe7afb18a64'
+    },{
+      title: '表单收集',
+      icon: 'https://files.axshare.com/gsc/DR6075/63/4d/77/634d77293a4d41d1b3d145974a8fb6a7/images/首页_1/u16.png?pageId=5cc10b9f-56eb-48dc-943a-bfe7afb18a64'
+    },{
+      title: '消费者测试',
+      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

@@ -0,0 +1,34 @@
+<script setup lang="ts">
+import { surveys } from "./Hooks/useRequestHooks"
+
+</script>
+
+<template>
+    <van-cell>
+        <div style="text-align: left;">新建问卷</div>
+        <van-row>
+            <van-col span="6" v-for="survey in surveys" :key="survey.title" class="survey">
+                <img width="45px" :src="survey.icon" alt=" " />
+                <span>{{ survey.title }}</span>
+            </van-col>
+        </van-row>
+    </van-cell>
+</template>
+
+<style lang="scss" scoped>
+.survey {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: space-around;
+
+  img {
+    margin-bottom: 5px;
+  }
+
+  span {
+    color: black;
+    font-size: 10px;
+  }
+}
+</style>