refactore: 首页界面调整

- 内容布局优化
- 路由结构调整

src/layouts/index.vue

@@ -1,15 +1,53 @@
 <template>
   <div class="common-layout">
+    <!-- title 标题和搜索栏 -->
+    <header class="header">
+      <div class="title">{{ $route.meta.title }}</div>
+      <van-search placeholder="请输入搜索关键词" background="#B9F8CF" />
+    </header>
+    <!-- content -->
     <RouterView />
+    <!-- tabbar -->
+    <van-tabbar v-model="active">
+      <van-tabbar-item v-for="tab in table" :key="tab.title" :name="tab.title" :to="tab.path">
+        <span>{{ tab.title }}</span>
+        <!-- <template #icon="props"> -->
+        <template #icon>
+          <!-- <img :src="props.active ? icon.active : icon.inactive" /> -->
+          <img :src="tab.icon" />
+        </template>
+      </van-tabbar-item>
+    </van-tabbar>
   </div>
 </template>
 
 <script setup>
 import { RouterView } from 'vue-router';
+import { ref } from 'vue';
+
+const active = ref();
+const table = [{
+  title: '首页',
+  path: '/',
+  icon: 'https://files.axshare.com/gsc/DR6075/de/a0/49/dea049d6ad3e4c2c80af44258c6c76d6/images/%E9%A6%96%E9%A1%B5_1/u18.png?pageId=74b3e5b2-848e-4258-8a34-9e220127c8a6'
+
+}, {
+  title: '问卷',
+  path: '/survey',
+  icon: 'https://files.axshare.com/gsc/DR6075/de/a0/49/dea049d6ad3e4c2c80af44258c6c76d6/images/%E9%A6%96%E9%A1%B5_1/u21.png?pageId=74b3e5b2-848e-4258-8a34-9e220127c8a6'
+}, {
+  title: '新建问卷',
+  path: '/survey/create',
+  icon: 'https://files.axshare.com/gsc/DR6075/de/a0/49/dea049d6ad3e4c2c80af44258c6c76d6/images/首页_1/u15.png?pageId=74b3e5b2-848e-4258-8a34-9e220127c8a6'
+
+}, {
+  title: '模板',
+  path: '/market',
+  icon: 'https://files.axshare.com/gsc/DR6075/de/a0/49/dea049d6ad3e4c2c80af44258c6c76d6/images/%E9%A6%96%E9%A1%B5_1/u24.png?pageId=74b3e5b2-848e-4258-8a34-9e220127c8a6'
+}];
 </script>
 
 <style scoped lang="scss">
-
 .common-layout {
   min-height: calc(100vh);
   background-color: #E9EEF3;
@@ -17,4 +55,15 @@ import { RouterView } from 'vue-router';
   text-align: center;
 }
 
+.header {
+  position: sticky;
+  top: 0;
+  background-color: #B9F8CF;
+
+  .title {
+    display: flex;
+    align-items: end;
+    justify-content: center;
+  }
+}
 </style>

src/router/index.ts

@@ -7,15 +7,33 @@ const router = createRouter({
     {
       path: '/',
       name: 'home',
-      component: Home
+      component: Home,
+      meta: {
+        title: '首页'
+      }
     },
     {
       path: '/design',
       name: 'design',
+      meta: {},
       // route level code-splitting
       // this generates a separate chunk (About.[hash].js) for this route
       // which is lazy-loaded when the route is visited.
       component: Design
+    }, {
+      path: '/survey',
+      name: 'survey',
+      meta: {
+        title: '问卷'
+      },
+      component: () => import('../views/Survey/Inex.vue')
+    }, {
+      path: '/market',
+      name: 'market',
+      meta: {
+        title: '模板'
+      },
+      component: () => import('../views/Market/Index.vue')
     }
   ]
 });

src/views/Home/Index.vue

@@ -21,14 +21,15 @@ const func = [{
 </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 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>
 
@@ -39,18 +40,8 @@ const func = [{
 </template>
 
 <style scoped lang="scss">
-.header {
-  background-color: #B9F8CF;
-
-  .title {
-    display: flex;
-    align-items: end;
-    justify-content: center;
-  }
-}
-
 .container {
-  padding-top: 20px;
+  padding: 0 10px;
   background: linear-gradient(0deg,
   #f5f5f5 0%,
   #f5f5f5 84%,
@@ -68,7 +59,21 @@ const func = [{
       width: 50px;
       height: 50px;
       margin: 10px;
-      background-color: #B9F8CF;
+
+      // background-color: #B9F8CF;
+
+      padding: 20px 10px;
+    }
+
+    .funcCard {
+      display: flex;
+      flex-direction: column;
+      align-items: center;
+      justify-content: space-around;
+
+      img {
+        margin-bottom: 13px;
+      }
     }
   }
 }

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

@@ -18,10 +18,11 @@
 
 <style scoped>
 .survey {
-  & :first-child {
+  &> :first-child {
     display: flex;
     align-items: end;
     justify-content: space-between;
+    margin: 10px 0;
 
     &>span {
       color: grey;
@@ -37,9 +38,9 @@
     div {
       display: flex;
       overflow: hidden;
-      width: 32vw;
+      width: calc(129px / 1.3);
-      height: 32vw;
+      height: calc(135px / 1.3);
-      border-radius: 10px;
+      border-radius: 6px;
       background-color: white;
     }
   }

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

@@ -17,10 +17,11 @@
 
 <style scoped>
 .market {
-  & :first-child {
+  &> :first-child {
     display: flex;
     align-items: end;
     justify-content: space-between;
+    margin: 10px 0;
 
     span {
       color: grey;
@@ -37,8 +38,8 @@
     div {
       display: flex;
       overflow: hidden;
-      width: 48vw;
+      width: calc(196px / 1.2);
-      height: 48vw;
+      height: calc(193px / 1.2);
       margin-bottom: 10px;
       border-radius: 10px;
       background-color: white;

src/views/Survey/Inex.vue

@@ -0,0 +1,45 @@
+<template>
+  <div class="container">
+    <div v-for="item in 4" :key="item" class="survey-item">
+      <span>
+        <img
+          src="https://files.axshare.com/gsc/DR6075/de/a0/49/dea049d6ad3e4c2c80af44258c6c76d6/images/%E9%97%AE%E5%8D%B7/u35.svg?pageId=04b2dc46-144e-4349-9301-11852899b094"
+          alt="" />
+        已结束 - 100
+      </span>
+      <div>移动端</div>
+
+      <div style="margin: 10px 0 0">报名签到问卷标题</div>
+      <div>问卷描述</div>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts"></script>
+
+<style scoped lang="scss">
+.container {
+  display: flex;
+  flex-flow: row wrap;
+  align-items: start;
+  justify-content: space-around;
+  padding: 0 10px;
+
+  .survey-item {
+    display: flex;
+    flex-direction: column;
+    align-items: start;
+    width: calc(194px / 1.25);
+    height: calc(144px / 1.2);
+    box-shadow: 4px 4px 3px 2px #e0e0e0;
+    margin: 10px 0;
+    padding: 5px;
+    background-color: white;
+    font-size: 12px;
+
+    * {
+      font-size: 12px;
+    }
+  }
+}
+</style>