first commit

src/components/goodCmp/Search/search-btn.vue

@@ -0,0 +1,38 @@
+<template>
+  <div class="zy-search-btn" :class="{'showBtn':isShowBtn===true}" @click="handleClick" :style="{background: background, color: color}">
+    <div class="zy-search-btn" >
+      <div class="icon"></div>
+      <div class="placeholder" >{{name}}</div>
+    </div>
+    <div v-if="isShowBtn" class="searchBtn" >搜索</div>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'ZySearchBtn',
+  props: {
+    name: {
+      default: '请输入商品名称'
+    },
+    background: {
+      default: '#f5f5f5'
+    },
+    color: {
+      default: '#cccccc'
+    },
+    isShowBtn: {
+      default:false
+    }
+  },
+  methods: {
+    handleClick () {
+      this.$emit('click')
+    }
+  }
+}
+</script>
+
+<style lang="scss">
+ @use "./search.scss";
+</style>

src/components/goodCmp/Search/search.scss

@@ -0,0 +1,31 @@
+ @use '@/assets/bundle.scss';
+
+.zy-search-btn {
+  height: 70rpx;
+  @extend %flex-center;
+  font-size: 30rpx;
+  border-radius: 70rpx;
+  .icon {
+    // 放大镜
+    // @include svg_icon(search, a8a8a8);
+    @extend %icon-search;
+    @extend %bg-no-repeat-center;
+    @extend %bg-size-100;
+    width: 36rpx;
+    height: 36rpx;
+    margin-right: 10rpx;
+    margin-left:10rpx;
+  }
+}
+.showBtn{
+  display: flex;
+  justify-content: space-between;
+}
+.searchBtn{
+  // 搜索按钮
+  padding:10rpx 20rpx;
+  border-radius: 25rpx;
+  margin-right: 10rpx;
+  background: rgb(129, 190, 78);
+  color:#fff;
+}