添加首页头部

src/views/home/index.vue

 <template>
 <template>
   <div>
   <div>
+    <nafm-header :leftArrow="false">
+      <div class="head-custom-container">
+        <div class="search-input-box" @click="handleSearch">
+          <div src="" alt="" class="search-icon" />
+          <span class="search-placeholder">请输入您想搜索的内容</span>
+        </div>
+        <div class="head-message-box">
+        </div>
+      </div>
+    </nafm-header>
     <span @click="jumpLogin">跳转登录页面</span>
     <span @click="jumpLogin">跳转登录页面</span>
     <FooterBottom />
     <FooterBottom />
   </div>
   </div>
 </template>
 </template>
 <script>
 <script>
 export default {
 export default {
-  name: 'Home',
-  components: {
-
-  },
+  name: "Home",
+  components: {},
   data() {
   data() {
-    return {}
+    return {};
   },
   },
   methods: {
   methods: {
     jumpLogin() {
     jumpLogin() {
       this.$router.push({
       this.$router.push({
-        name: 'Login'
-      })
+        name: "Login",
+      });
+    },
+
+    handleSearch() {},
+  },
+};
+</script>
+
+
+<style lang="less" scoped>
+@PaddingSize: 15px;
+@HeadHeight: 33px;
+.head-custom-container {
+  width: 100%;
+  height: @HeadHeight;
+  padding: 0 @PaddingSize;
+  display: flex;
+  align-items: center;
+  .search-input-box {
+    width: 100%;
+    height: 100%;
+    border-radius: calc(@HeadHeight / 2);
+    background-color: rgba(255, 255, 255, 0.2);
+    padding: 0 @PaddingSize;
+    display: flex;
+    align-items: center;
+
+    @SearchIconSize: 12px;
+    .search-icon {
+      background: white;
+      width: @SearchIconSize;
+      height: @SearchIconSize;
     }
     }
+    .search-placeholder {
+      color: white;
+      font-size: 12px;
+      padding-left: 22px;
+    }
+  }
+  @MessageBoxSize: 23px;
+  .head-message-box {
+    width: @MessageBoxSize;
+    height: @MessageBoxSize;
+    margin-left: @PaddingSize;
+    background: white;
   }
   }
 }
 }
-</script>
\ No newline at end of file
+</style>
\ No newline at end of file