JG-CLIENT-TEMP/src/components/ScanCodeInput/index.vue

<template>
  <el-input class="scanInput" clearable v-bind="$attrs">
    <template #prefix>
      <img style="width: 30px; height: 30px" src="@/assets/icons/shaoma.svg" />
    </template>
    <template v-if="$attrs.showSuffix" #suffix>
      <i-ep-search @click.self="$emit('keydown')" />
    </template>
  </el-input>
</template>

<script lang="ts" setup></script>

<style lang="scss" scoped>
.scanInput {
  height: 50px;
  border-radius: 76px;
  overflow: hidden;
  border: 1px solid #00000025;
  font-size: $f24;
  color: #00000080;

  :deep(.el-input__wrapper) {
    background-color: #d5dade;
    box-shadow: 0 0 0 0px var(--el-input-border-color, var(--el-border-color))
      inset;
    cursor: default;

    .el-input__inner {
      cursor: default !important;
    }
  }

  :deep(.el-input-group__prepend) {
    border: 0px;
    background-color: white;
  }
}
</style>