feat: 增加首页组件

- 添加 Survry 和 Template 组件

src/router/index.ts

@@ -1,14 +1,14 @@
 import { createRouter, createWebHistory } from 'vue-router';
-// import HomeView from '../views/HomeView.vue';
+import Home from '../views/Home/Index.vue';
 import Design from '@/views/Design/Index.vue';
 const router = createRouter({
   history: createWebHistory(import.meta.env.BASE_URL),
   routes: [
-    // {
+    {
-    //   path: '/',
+      path: '/',
-    //   name: 'home',
+      name: 'home',
-    //   component: HomeView
+      component: Home
-    // },
+    },
     {
       path: '/design',
       name: 'design',

src/views/Home/Index.vue

@@ -0,0 +1,75 @@
+<script setup>
+import Survey from './components/Suvrey/Index.vue';
+import Template from './components/Template/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>
+  <!-- title 标题和搜索栏 -->
+  <div class="header">
+    <div class="title">首页</div>
+    <van-search placeholder="请输入搜索关键词" background="#B9F8CF" />
+  </div>
+  <div class="container">
+    <div>
+      <div v-for="card in func" :key="card.title">
+      </div>
+    </div>
+
+    <Survey />
+
+    <Template />
+  </div>
+</template>
+
+<style scoped lang="scss">
+.header {
+  background-color: #B9F8CF;
+
+  .title {
+    display: flex;
+    align-items: end;
+    justify-content: center;
+  }
+}
+
+.container {
+  padding-top: 20px;
+  background: linear-gradient(0deg,
+  #f5f5f5 0%,
+  #f5f5f5 84%,
+  rgba(185, 248, 207, 1) 100%);
+
+  &>:first-child {
+    display: flex;
+    justify-content: space-around;
+    border-radius: 6px;
+    background-color: white;
+
+    &>div {
+      display: flex;
+      flex-direction: column;
+      width: 50px;
+      height: 50px;
+      margin: 10px;
+      background-color: #B9F8CF;
+    }
+  }
+}
+</style>

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

@@ -0,0 +1,48 @@
+<template>
+  <!-- 问卷 -->
+  <div class="survey">
+    <div>
+      <h4>问卷</h4>
+      <span @click="$router.push('/survey')">全部问卷></span>
+    </div>
+    <div class="survey_items">
+      <div v-for="survey in 3" :key="survey">
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+
+</script>
+
+<style scoped>
+.survey {
+  & :first-child {
+    display: flex;
+    align-items: end;
+    justify-content: space-between;
+
+    &>span {
+      color: grey;
+      font-size: 10px;
+    }
+  }
+
+  .survey_items {
+    display: flex;
+    flex-flow: row wrap;
+    justify-content: space-around;
+
+    div {
+      display: flex;
+      overflow: hidden;
+      width: 32vw;
+      height: 32vw;
+      border-radius: 10px;
+      background-color: white;
+    }
+  }
+
+}
+</style>

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

@@ -0,0 +1,48 @@
+<template>
+  <!-- 模板 -->
+  <div class="market">
+    <div>
+      <h4>模板</h4>
+      <span @click="$router.push('/market')">全部模板></span>
+    </div>
+    <div class="market_items">
+      <div v-for="item in 8" :key="item"></div>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+
+</script>
+
+<style scoped>
+.market {
+  & :first-child {
+    display: flex;
+    align-items: end;
+    justify-content: space-between;
+
+    span {
+      color: grey;
+      font-size: 10px;
+
+    }
+  }
+
+  .market_items {
+    display: flex;
+    flex-flow: row wrap;
+    justify-content: space-around;
+
+    div {
+      display: flex;
+      overflow: hidden;
+      width: 48vw;
+      height: 48vw;
+      margin-bottom: 10px;
+      border-radius: 10px;
+      background-color: white;
+    }
+  }
+}
+</style>