<template>
  <div class="search-group">
    <el-input v-model="searchValue" placeholder="请输入搜索关键字" class="input-with-select">
      <template #prepend>
        <el-select v-model="selectValue" placeholder="">
          <el-option label="找工作" value="1" />
          <el-option label="找企业" value="2" />
          <el-option label="找人才" value="3" />
        </el-select>
      </template>
      <template #append>
        <el-icon size="25"><i-ep-Search /></el-icon>
      </template>
    </el-input>
  </div>
</template>

<script setup lang="ts">
const searchValue = ref()
const selectValue = ref()
</script>

<style lang="scss" scoped>
.search-group {
  width: 920px;
  border-radius: 20px;
  margin: 40px 0;

  .el-input {
    height: 100%;

    :deep(.el-input__wrapper) {
      height: 60px;
    }
  }

  .el-input__wrapper :deep(.el-input__inner) {
    width: 650px;
    height: 100%;
    border: none;
    font-size: 15px;
  }

  :deep(.input-with-select .el-input-group__prepend) {
    width: 70px;
    height: 100%;
    padding-left: 40px;
    border: none;
    border-bottom-left-radius: 29px;
    border-top-left-radius: 29px;
    background-color: #fff;
    font-weight: 500;
    font-size: 16px;
    line-height: 60px;
    font-family: Source Han Sans CN;
    color: #666;

    .el-input__wrapper {
      box-shadow: none;

      &.is-focus {
        box-shadow: none !important;
      }

      &:hover {
        box-shadow: none !important;
      }
    }

    .el-select {
      border: 0;
    }
  }

  :deep(.input-with-select > .el-input__wrapper) {
    height: 59px;
  }

  :deep(.el-input__wrapper) {
    box-shadow: none;
    padding: 0 11px;
    margin-top: 1px;

    &.is-focus {
      box-shadow: none !important;
    }

    &:hover {
      box-shadow: none !important;
    }
  }

  :deep(.el-input-group__append) {
    padding-right: 45px;
    border: none;
    border-bottom-right-radius: 29px;
    border-top-right-radius: 29px;
    background-color: #fff;
  }
}
</style>
