refactore: 首页界面调整

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

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;
+      }
     }
   }
 }