feat: 初步完成顶部部分

src/page/home/Head.vue

@@ -0,0 +1,110 @@
+<!--
+ * @description: 
+ * @Author: uray(1109489444@qq.com)
+ * @date: 2022-04-14 14:33:39
+ * @lastEditors: uray(1109489444@qq.com)
+ * @lastEditTime: 2022-04-14 15:04:55
+ * @FilePath: \toy_box_website\src\page\home\Head.vue
+-->
+<template class="head">
+    <div class="head">
+        <img class="logo" src="/src/assets/logo.png" />
+        <span class="item">商店</span>
+        <span class="item">福袋</span>
+        <span class="item">福利</span>
+        <span class="item">邀请</span>
+        <span class="item">账户充值</span>
+
+        <div class="inputArea" @click="onBtnSearchClick">
+            <input placeholder="搜索您想要的商品" :value="inputStr" :oninput="onInputChange" />
+            <div class="searchBtn">
+                <img class="icon" src="/src/assets/btnSearch.png" />
+            </div>
+        </div>
+    </div>
+</template>
+
+<script lang="ts">
+import { defineComponent } from "@vue/runtime-core";
+
+export default defineComponent({
+    name: "Head",
+    data() {
+        return {
+            inputStr: "", // 接受输入的值
+        };
+    },
+    methods: {
+        /**
+         * 当输入改变
+         */
+        onInputChange(e: { target: { value: string } }) {
+            console.log(e.target.value);
+            this.inputStr = e.target.value;
+        },
+
+        /**
+         * 点击搜索按钮
+         */
+        onBtnSearchClick() {
+            console.log("点击搜索按钮:", this.inputStr);
+        },
+    },
+});
+</script>
+
+<style lang="less" scoped>
+.head {
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    justify-content: center;
+    height: 60px;
+    // border: solid 1px red;
+    background-color: #0f0f0f;
+
+    .logo {
+        width: 253px;
+        height: 60px;
+    }
+
+    .item {
+        margin-left: 20px;
+        margin-right: 20px;
+    }
+
+    span {
+        color: #fff;
+    }
+    .inputArea {
+        display: flex;
+        align-items: center;
+        width: 300px;
+        height: 40px;
+        border-radius: 5px;
+        background-color: #fff;
+
+        input {
+            height: 38px;
+            background-color: transparent;
+            width: 100%;
+            &::placeholder {
+                margin-left: 30px;
+            }
+        }
+
+        .searchBtn {
+            display: flex;
+            justify-content: center;
+            align-items: center;
+            background: linear-gradient(315deg, #f53932, #ff6a50);
+            border-radius: 0 5px 5px 0;
+            width: 52px;
+            height: 40px;
+            &:hover {
+                cursor: pointer;
+            }
+        }
+    }
+}
+</style>

src/page/home/index.vue

@@ -3,7 +3,7 @@
  * @Author: uray(1109489444@qq.com)
  * @date: 2022-04-13 18:00:09
  * @lastEditors: uray(1109489444@qq.com)
- * @lastEditTime: 2022-04-14 14:23:18
+ * @lastEditTime: 2022-04-14 14:46:17
  * @FilePath: \toy_box_website\src\page\home\index.vue
 -->
 
@@ -13,16 +13,20 @@
         <div @click="onBtnClick">点击跳转详情页面</div>
     </div> -->
 
-    <div class="head"></div>
+    <HeadVue />
     <div class="tabs"></div>
     <div class="goods"></div>
 </template>
 
 <script lang="ts">
 import { defineComponent } from "@vue/runtime-core";
+import HeadVue from "./Head.vue";
 
 export default defineComponent({
     name: "Home",
+    components: {
+        HeadVue,
+    },
     methods: {
         onBtnClick() {
             this.$router.push({ path: "/page/detail" });
@@ -32,11 +36,6 @@ export default defineComponent({
 </script>
 
 <style lang="less" scoped>
-.head {
-    height: 60px;
-    border: solid 1px red;
-    background-color: #0f0f0f;
-}
 .tabs {
     height: 420px;
     border: solid 1px green;