elementui el-date-picker分页选择弹出框样式及分页样式

:popper-class="'popperClass'"

复制代码
<el-pagination
      class="pagination"
      :popper-class="'popperClass'"
      v-show="total > 0"
      v-model:current-page="currentPage"
      v-model:page-size="pageSize"
      :page-sizes="[5, 10, 20, 30, 50]"
      :total="total"
      layout="total, sizes, prev, pager, next, jumper"
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
    />

<style lang="scss">
/*分页样式**/
.pagination {
  .el-select__wrapper,
  .el-pagination.is-background .btn-prev:disabled,
  .el-pagination.is-background .btn-next:disabled,
  .btn-prev,
  .el-pagination.is-background .el-pager li,
  .el-button--danger.is-plain {
    box-shadow: #377fc7 0px 0px 0px 1px inset !important;
    background: #001939 !important;
  }

  .el-checkbox__inner {
    background: transparent;
  }
  .el-checkbox__inner::after {
    color: #00e4ff;
  }

  .el-range-input,
  .el-pagination__jump {
    color: #fff;
  }
  .el-tag {
    background-color: transparent;
    border: none;
    color: #fff;
  }
  .btn-prev,
  .btn-next {
    box-shadow: #377fc7 0px 0px 0px 1px inset !important;
    background: #001939 !important;
    color: #fff;
  }
  .el-button--primary,
  .el-button + .el-button,
  .el-select,
  .el-pagination .el-select,
  .el-select__wrapper {
    background: #05379b;
  }
  .el-pagination.is-background .el-pager li.is-active {
    color: #00e4ff;
  }
  .el-input__wrapper,
  .el-select__wrapper,
  .el-form-item__content,
  .el-input {
    box-shadow: #377fc7 0px 0px 0px 1px inset;
    background: #062a4c;
  }
  .el-input__inner,
  .el-pager li,
  .el-pagination__total,
  .el-select__suffix,
  .el-select__placeholder {
    color: #fff;
  }
  .el-select-dropdown__item.is-selected {
    color: #00e4ff;
    background: #062a4c;
  }
  .el-select-dropdown__item {
    color: #fff;
  }
  .el-select-dropdown__item.hover {
    background: #062a4c;
  }
}
//分页下拉框样式
.popperClass {
  background: #062a4c;
  color: #fff;
  box-shadow: #377fc7 0px 0px 0px 1px inset !important;
  border: transparent !important;
  //选中
  .el-select-dropdown__item.is-hovering {
    // color: #00e4ff;
    color: #fff;
    background: rgba(0, 0, 0, 0.3);
  }
  .el-select__popper.el-popper .el-popper__arrow::before {
    border: 1px solid #001939;
  }
  .el-select-dropdown__item.is-selected{
    color: #00e4ff;
  }
}
</style>
相关推荐
EstherNi1 小时前
vue3仿照elementui样式的写法,并进行校验,并且有默认值的设置
javascript·elementui
卡梅德生物小喇叭5 小时前
卡梅德生物技术快报|基于 CHO 细胞的百日咳毒素中和抗体检测方法构建与验证
人工智能·经验分享·elementui·微信公众平台·facebook
蜡台10 小时前
Vue2 elementui2 中 el-switch 实现先判断改变状态
前端·vue.js·elementui·el-switch
周不凢10 小时前
elementui 表格行选择:通过 toggleRowSelection 方法控制表格行的选中状态
前端·javascript·elementui
小雨cc5566ru1 天前
基于Nodejs+vue+ElementUI的大学生课程排课管理系统设计
前端·vue.js·elementui
qq_8406122331 天前
Nodejs+vue+ElementUI框架的家政服务评价系统 保洁员预约系统的设计与实现
前端·vue.js·elementui
永恒毕设程序1 天前
基于ssm+vue基于elementui的工厂物料管理系统设计与实现【开题+程序+论文】
前端·vue.js·elementui
说给风听.1 天前
零基础吃透 ElementUI:Vue 开发者必备组件库手册
前端·vue.js·elementui
BillKu1 天前
Element Plus对话框样式设置指南
前端·vue.js·elementui
Q_Q5110082851 天前
vue+nodejs+ElementUi的仓库库存管理系统的设计与实现
前端·vue.js·elementui