Merge branch 'master' of http://face3d.4dage.com:7005/shaogen1995/YFYC-H5 into master

src/App.vue

@@ -11,6 +11,18 @@ export default {
 };
 </script>
 <style lang="less">
+// // 滚动条整体部分，其中的属性有width,height,background,border等。
+// ::-webkit-scrollbar { width: 1.3vw; height: 1.3vw; } /*宽度是对垂直滚动条而言，高度是对水平滚动条而言*/
+// // 滚动条两端的按钮。可以用display:none让其不显示，也可以添加背景图片，改变颜色。
+// ::-webkit-scrollbar-button { display: none; }
+// // 滑动轨道。可以用display:none让其不显示，也可以添加背景图片，改变颜色。另外还有::webkit-scrollbar-track-piece这个是内层轨道？有吗？
+// ::-webkit-scrollbar-track { background: rgba(84, 84, 84, 0.11); border-radius: 0.5vw; }
+// // 滑块
+// ::-webkit-scrollbar-thumb { background: linear-gradient(0deg, #FF615C 0%, #FF9877 100%); border-radius: 0.5vw; }
+// // 横竖滚动条轨道交汇处
+// ::-webkit-scrollbar-corner { display: none; }
+// ::-webkit-scrollbar-resizer { display: none; }
+
 #app {
   width: 100vw;
   max-width: 500px;

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 {
@@ -315,7 +274,10 @@ activated() {}, //如果页面有keep-alive缓存功能，这个函数会触发
     }
     .grid-wrap {
       margin-top: 3.1rem;
+      display: flex;
+      align-items: center;
       .left-wrap {
+        flex: 0 1 auto;
         display: inline-block;
         position: relative;
         width: 41.9vw;
@@ -343,9 +305,11 @@ activated() {}, //如果页面有keep-alive缓存功能，这个函数会触发
       }
       .right-wrap {
         display: inline-block;
+        flex: 0 1 auto;
+        width: 47.5vw;
         > .card {
           position: relative;
-          width: 47.5vw;
+          width: 100%;
           height: 18.4vw;
           margin-bottom: 0.8vw;
           &:last-of-type {
@@ -431,6 +395,17 @@ activated() {}, //如果页面有keep-alive缓存功能，这个函数会触发
     position: relative;
     padding: 1.9vw 3.5vw 4.5vw;
     background: #fff;
+    // 滚动条整体部分，其中的属性有width,height,background,border等。
+    ::-webkit-scrollbar { width: 1.3vw; height: 1.3vw; } /*宽度是对垂直滚动条而言，高度是对水平滚动条而言*/
+    // 滚动条两端的按钮。可以用display:none让其不显示，也可以添加背景图片，改变颜色。
+    ::-webkit-scrollbar-button { display: none; }
+    // 滑动轨道。可以用display:none让其不显示，也可以添加背景图片，改变颜色。另外还有::webkit-scrollbar-track-piece这个是内层轨道？有吗？
+    ::-webkit-scrollbar-track { background: rgba(84, 84, 84, 0.11); border-radius: 0.5vw; }
+    // 滑块
+    ::-webkit-scrollbar-thumb { background: linear-gradient(0deg, #FF615C 0%, #FF9877 100%); border-radius: 0.5vw; }
+    // 横竖滚动条轨道交汇处
+    ::-webkit-scrollbar-corner { display: none; }
+    ::-webkit-scrollbar-resizer { display: none; }
     > h3 {
       font-size: 3.5vw;
       font-weight: bold;