提取带有红色按钮的search组件

src/components/SearchRedBtn.vue

@@ -0,0 +1,64 @@
+<template>
+  <div class="search-wrap">
+    <img class="icon" src="@/assets/img/service/search.png" alt="" draggable="false">
+    <input
+      v-model.trim="keyword"
+      maxlength="30"
+      type="text"
+      placeholder="输入您感兴趣的内容"
+      @keydown.enter="onClickSearch"
+    >
+    <button
+      class="search"
+      @click="onClickSearch"
+    >
+      搜索
+    </button>
+  </div>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      keyword: '',
+    }
+  },
+  methods: {
+    onClickSearch() {
+      this.$emit('search', this.keyword)
+    },
+  }
+}
+</script>
+
+<style lang="less" scoped>
+.search-wrap {
+  margin: 6.1vw 4.4vw 0 4.4vw;
+  background: #F4F4F4;
+  height: 6.9vw;
+  border-radius: 1.1vw;
+  display: flex;
+  align-items: center;
+  font-size: 2.7vw;
+  > img.icon {
+    flex: 0 0 auto;
+    width: 2.8vw;
+    height: 2.8vw;
+    margin-left: 2.1vw;
+  }
+  > input {
+    flex: 1 0 1px;
+    height: 100%;
+    margin-left: 2.1vw;
+  }
+  > button.search {
+    height: 100%;
+    background: linear-gradient(0deg, #FE6E69 0%, #FF7C6E 100%);
+    border-radius: 1.1vw;
+    padding-left: 1.9vw;
+    padding-right: 1.9vw;
+    color: #fff;
+  }
+}
+</style>

src/views/Serve/index.vue

@@ -1,22 +1,7 @@
 <template>
   <div class="service" id="service-first-page">
     <div class="banner">
-      <div class="search-wrap">
-        <img class="icon" src="@/assets/img/service/search.png" alt="" draggable="false">
-        <input
-          v-model.trim="searchKeyword"
-          maxlength="30"
-          type="text"
-          placeholder="输入您感兴趣的内容"
-          @keydown.enter="onClickSearch"
-        >
-        <button
-          class="search"
-          @click="onClickSearch"
-        >
-          搜索
-        </button>
-      </div>
+      <SearchBar @search="onSearch"></SearchBar>
     </div>
     
     <menu>
@@ -155,11 +140,13 @@
 import BackTop from "@/components/BackTop.vue";
 import TabbarSmall from "@/components/TabbarSmall.vue";
 import Swiper from "../../assets/libs/swiper.js";
+import SearchBar from "@/components/SearchRedBtn.vue";
 
 export default {
 components: {
   BackTop,
   TabbarSmall,
+  SearchBar,
 },
 data() {
   return {
@@ -171,8 +158,8 @@ data() {
 computed: {},
 watch: {},
 methods: {
-  onClickSearch() {
-
+  onSearch(v) {
+    console.log('search: ', v);
   },
   onTravelPlageTabbarChange(idx) {
     this.travelPlagueActiveIdx = idx
@@ -217,34 +204,6 @@ activated() {}, //如果页面有keep-alive缓存功能，这个函数会触发
     background-position: center center;
     overflow: hidden;
     margin-bottom: 3.3vw;
-    .search-wrap {
-      margin: 6.1vw 4.4vw 0 4.4vw;
-      background: #F4F4F4;
-      height: 6.9vw;
-      border-radius: 1.1vw;
-      display: flex;
-      align-items: center;
-      font-size: 2.7vw;
-      > img.icon {
-        flex: 0 0 auto;
-        width: 2.8vw;
-        height: 2.8vw;
-        margin-left: 2.1vw;
-      }
-      > input {
-        flex: 1 0 1px;
-        height: 100%;
-        margin-left: 2.1vw;
-      }
-      > button.search {
-        height: 100%;
-        background: linear-gradient(0deg, #FE6E69 0%, #FF7C6E 100%);
-        border-radius: 1.1vw;
-        padding-left: 1.9vw;
-        padding-right: 1.9vw;
-        color: #fff;
-      }
-    }
   }
 
   > menu {