element 修改样式

1、el-select

// HTML
<el-select v-model="screenStatus.mapCount" popper-class="multi-screen-popper" @change="changes">
   <el-option
       class="custom-option-style"
       v-for="(item, index) in screenList"
       :key="index"
       :label="item.name"
       :value="item.key"
    ></el-option>
</el-select>

// CSS
<style lang="scss">
// 修改下拉框背景颜色等
.el-popper.el-select__popper.multi-screen-popper {
  background: rgba(0, 141, 164, 0.6);
  // box-shadow: 0px 0px 4px 0px rgba(45, 106, 171, 0.5);
  border-radius: 4px 4px 12px 12px;
}
.el-select {
  --el-select-input-focus-border-color: transparent;
}
</style>
<style lang="scss" scoped>
// 修改下拉框子元素
.custom-option-style {
  color: #fff;
  &:hover {
    color: #00e8ff;
  }
}
</style>