康凯
2021-12-14 85195adec8c3acc68eb65431211c24e1fcef717e
src/components/CustomSearch1.vue
@@ -2,12 +2,7 @@
  <div class="custom-search1">
    <input class="input-inner" type="text" autocapitalize="off" placeholder="请输入检索词" v-model="searchName"/>
    <div class="input-append" v-on:click="$emit('search',searchName)">
      <svg t="1638943404588" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg"
           p-id="6664" width="200" height="200">
        <path
            d="M469.333 192c153.174 0 277.334 124.16 277.334 277.333 0 68.054-24.534 130.411-65.216 178.688L846.336 818.24l-48.341 49.877L630.4 695.125a276.053 276.053 0 0 1-161.067 51.542C316.16 746.667 192 622.507 192 469.333S316.16 192 469.333 192z m0 64C351.51 256 256 351.51 256 469.333s95.51 213.334 213.333 213.334 213.334-95.51 213.334-213.334S587.157 256 469.333 256z"
            p-id="6665"></path>
      </svg>
      <span class="iconfont">&#xe82e;</span>
    </div>
  </div>
</template>
@@ -24,15 +19,26 @@
</script>
<style scoped>
.icon {
  fill: currentColor;
@font-face {
  font-family: 'iconfont';
  src: url('../assets/icon/iconfont.woff2') format('woff2'),
  url('../assets/icon/iconfont.woff') format('woff'),
  url('../assets/icon/iconfont.ttf') format('truetype');
}
.iconfont {
  font-family: "iconfont" !important;
  font-size: 2.68rem;
  color: #EFC587;
  font-style: normal;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
.custom-search1 {
  width: 99%;
  height: 8vh;
  border: 4px solid #EFC587;
  border: 0.25rem solid #EFC587;
  box-sizing: border-box;
  border-radius: 200px;
  background-color: rgba(0, 0, 0, 0.23);
@@ -65,7 +71,6 @@
.custom-search1 .input-append {
  width: 9%;
  height: 95%;
  cursor: pointer;
}