<template>
  <article class="search-wrapper">
    <section class="search-wrapper-input">
      <img src='../../images/search-grey.png'>
      <input value="搜索疾病、课程、讲师"/>
    </section>
    <section class="search-wrapper-cancle">
      <span>取消</span>
    </section>
  </article>
</template>
<script>
export default {
  methods: {
    cancel() {

    }
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style lang="scss" scoped>
@import '../../style/mixin.scss';
// @import '../../style/global.scss';
.search-wrapper {
  display: flex;
  position: relative;
  top: 0;
  left: 0;
  flex-direction: row;
  padding: px2rem(20px) px2rem(10px) px2rem(10px) px2rem(15px);
  text-align: center;
  align-items: center;
  &-input {
    width: px2rem(290px);
    height: px2rem(30px);
    border: 1px solid #efefef;
    border-radius: px2rem(18px);
    background: rgba(245, 246, 246, 1);
    img {
      position: relative;
      top: px2rem(-18px);
      left: px2rem(0px);
      width: px2rem(14px);
      height: px2rem(14px);
    }
    input {
      position: relative;
      top: px2rem(-20px);
      left: px2rem(-8px);
      width: px2rem(240px);
      text-decoration-color: #bbb;
      color: #bbb;
      font-size: px2rem(13px);
      font-weight: 400;
      background: rgba(245, 246, 246, 1);
    }
  }
  &-cancle {
    position: relative;
    top: 0;
    left: px2rem(15px);
    // width: px2rem(60px);
    font-size: px2rem(14px);
    color: #999;
    span {
      padding: px2rem(4px);
    }
  }
}
</style>
