feat: 增加中部区域

src/page/home/Tabs.vue

@@ -0,0 +1,35 @@
+<!--
+ * @description: 
+ * @Author: uray(1109489444@qq.com)
+ * @date: 2022-04-14 14:33:39
+ * @lastEditors: uray(1109489444@qq.com)
+ * @lastEditTime: 2022-04-14 15:25:43
+ * @FilePath: \toy_box_website\src\page\home\Tabs.vue
+-->
+<template>
+    <div class="tabs" style=""></div>
+</template>
+
+<script lang="ts">
+import { defineComponent } from "@vue/runtime-core";
+
+export default defineComponent({
+    name: "Tabs",
+    data() {
+        return {};
+    },
+    methods: {},
+});
+</script>
+
+<style lang="less" scoped>
+.tabs {
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    justify-content: center;
+    height: 420px;
+    background: url("/src/assets/poster.png") no-repeat;
+    background-size: 100vw, 420px;
+}
+</style>

src/page/home/index.vue

@@ -3,43 +3,31 @@
  * @Author: uray(1109489444@qq.com)
  * @date: 2022-04-13 18:00:09
  * @lastEditors: uray(1109489444@qq.com)
- * @lastEditTime: 2022-04-14 14:46:17
+ * @lastEditTime: 2022-04-14 15:18:08
  * @FilePath: \toy_box_website\src\page\home\index.vue
 -->
 
 <template>
-    <!-- <div @click="onBtnClick">
-        <h1>首页</h1>
-        <div @click="onBtnClick">点击跳转详情页面</div>
-    </div> -->
-
     <HeadVue />
-    <div class="tabs"></div>
+    <TabsVue />
     <div class="goods"></div>
 </template>
 
 <script lang="ts">
 import { defineComponent } from "@vue/runtime-core";
 import HeadVue from "./Head.vue";
+import TabsVue from "./Tabs.vue";
 
 export default defineComponent({
     name: "Home",
     components: {
         HeadVue,
-    },
-    methods: {
-        onBtnClick() {
-            this.$router.push({ path: "/page/detail" });
-        },
+        TabsVue,
     },
 });
 </script>
 
 <style lang="less" scoped>
-.tabs {
-    height: 420px;
-    border: solid 1px green;
-}
 .goods {
     height: calc(~"100vh - 400px");
     background-color: #f5f5f5;