colexiu-project/src/components/searchInput/index.module.less

@img: './images';

.wrap {
  // margin-bottom: 20px;
  display: flex;
  flex-direction: row;
  align-items: center;
  border: 1px solid #2dc7aa;
  padding: 0 6px 0 20px;
  line-height: 60px;
  height: 60px;
  background: #fff;
  border-radius: 30px;
  overflow: hidden;
  cursor: pointer;
  &:hover,
  &.active {
    box-shadow: 0px 2px 8px 0px rgba(0, 0, 0, 0.1);
    .searchline,
    .searchBtn {
      visibility: visible;
    }
  }
  .selectWrap {
    :global {
      // .hasVal {
      //   .el-input__wrapper {
      //     &:hover {
      //       .el-input__suffix-inner {
      //         position: relative;
      //         .el-select__caret {
      //           //箭头样式
      //           appearance: none;
      //           background: url('@{img}/closeIcon.png') no-repeat; //自定义图片
      //           background-size: 16px 16px;
      //           top: -1px;
      //           right: -1px;
      //         }
      //       }
      //     }
      //   }
      // }
      .el-input__wrapper {
        padding-right: 25px;
        font-size: 16px;
        box-shadow: none !important;
        line-height: 60px;
        height: 60px;
        position: relative;
      }
      .el-input__wrapper.is-focus {
        // font-size: 16px;
        box-shadow: none !important;
      }
      .el-input.is-focus .el-input__wrapper {
        box-shadow: none !important;
        background-color: #fff;
      }
      // select 那层
      // .el-input__suffix {
      //   .el-input__suffix-inner {
      //     color: #2dc7aa;
      //     font-size: 20px;
      //     font-weight: bold;
      //   }
      // }
      // .el-select__caret {
      //   color: #2dc7aa !important;
      //   font-size: 20px !important;
      //   font-weight: bold;
      //   //  更换箭头

      // }
      .el-select__caret {
        //箭头样式

        // transform: rotateZ(0deg); //转动图片
        appearance: none;
        background: url('@{img}/selectArrow.png') no-repeat; //自定义图片
        background-size: 16px 16px;
        width: 16px;
        height: 16px !important;
        position: absolute; //图片定位
        top: -1px;
        right: -1px;
      }
      .el-icon svg {
        //隐藏原来箭头

        display: none;
      }
      .el-select .el-input.is-focus .el-input__wrapper {
        font-size: 16px;
        .el-input {
          font-size: 18px;
          .el-input.is-focus {
            .el-input__wrapper {
              box-shadow: none !important;
              background-color: #fff;
            }
          }
          .el-input__wrapper.is-focus {
            box-shadow: none !important;
            background-color: #fff;
          }
        }

        // .el-input.is-focus {
        //   .el-input__wrapper.is-focus {
        //     box-shadow: none !important;
        //     background-color: #fff;
        //   }
        // }
      }
    }
  }

  .selectWrap {
    display: flex;
    flex-direction: row;
    position: relative;
    align-items: center;
    .line {
      width: 1px;
      height: 36px;
      background: #2dc7aa !important;
      //   position: absolute;
      //   right: -13px;
      //   top: 2px;
      //   z-index: 1000;
    }
  }
  .inputSelect {
    width: 600px;
    :global {
      .el-input__wrapper {
        width: 600px;
        padding-right: 0;
        font-size: 16px;
        box-shadow: none !important;
        line-height: 60px;
        height: 60px;
        position: relative;
      }
      .el-icon {
        position: relative;
        top: -5px;
        left: -18px;
        display: block;
        font-size: 30px !important;
        width: 16px;
        height: 16px;
        opacity: 0;
        // visibility: hidden;
        // svg {
        //   //隐藏原来箭头

        // }
      }
      .el-input__suffix {
        cursor: pointer;
        background: url('@{img}/closeIcon.png') no-repeat; //自定义图片
        background-size: 16px 16px;
        width: 16px;
        height: 16px;
        position: absolute; //图片定位
        top: 20px;
        right: 22px;
      }

      .el-input__wrapper.is-focus {
        // font-size: 16px;
        box-shadow: none !important;
      }
      .el-input.is-focus .el-input__wrapper {
        box-shadow: none !important;
        background-color: #fff;
      }
      .el-input__wrapper {
        padding-left: 0;
        .el-input__inner {
          font-size: 18px !important;
        }
      }
      .el-select .el-input.is-focus .el-input__wrapper {
        font-size: 16px;
        .el-input {
          font-size: 18px;
          .el-input.is-focus {
            .el-input__wrapper {
              box-shadow: none !important;
              background-color: #fff;
            }
          }
          .el-input__wrapper.is-focus {
            box-shadow: none !important;
            background-color: #fff;
          }
        }

        // .el-input.is-focus {
        //   .el-input__wrapper.is-focus {
        //     box-shadow: none !important;
        //     background-color: #fff;
        //   }
        // }
      }
    }
  }
  .searchIcon {
    font-size: 20px !important;
  }
  .searchWrap {
    cursor: pointer;
    width: 97px;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    img {
      width: 24px;
      height: 25px;
    }
  }
  .searchBtn {
    width: 90px;
    height: 50px;
    background: #2dc7aa;
    border-radius: 25px;
    color: #fff;
    text-align: center;
    line-height: 50px;
    cursor: pointer;
    visibility: hidden;
    &:active {
      opacity: 0.9;
    }
  }
  .searchline {
    visibility: hidden;
    width: 1px;
    height: 36px;
    background-color: #eee;
    margin-right: 15px;
  }
}