<template>
  <div class="header-search">
    <div class="search">
      <span class="iconfont icon-xiazai5"><span></span></span>搜索商品
    </div>
    <div class="qr">
      <img
        src="data:image/png;base64,[encoded data, 4716 characters]"
      />
    </div>
  </div>
</template>

<script>
export default {
}
</script>

<style lang="scss" scoped>
.header-search {
  height: 53px;
  width: 100%;
  padding: 0 16px;
  box-sizing: border-box;

  display: flex;
  flex-wrap: wrap /* 辅助类 */;

  align-items: center;
  justify-content: center;

  height: 53px;
  width: 100%;
  padding: 0 16px;
  box-sizing: border-box;

  transition: all linear 0.3s;
  background: rgb(196, 4, 20);

  .search {
    flex: 1;
    box-sizing: border-box;
    height: 35px;
    background-color: #f7f7f7;
    border-radius: 27px;
    padding: 0 15px;
    font-size: 15px;
    color: #bbb;
    line-height: 35px;
  }

  .qr {
    width: 27px;
    height: 27px;
    font-size: 18px;
    margin-left: 8px;

    img {
      width: 100%;
    }
  }
}
</style>
