vue3.x + elementPlus做组件二次封装的初步处理css

最新推荐文章于 2025-03-26 20:36:55 发布

丢，捞仔

最新推荐文章于 2025-03-26 20:36:55 发布

阅读量1.5k

点赞数

文章标签： css css3 前端

本文链接：https://blog.csdn.net/m0_62015496/article/details/125316402

版权

本文详细介绍了如何在Vue3.x项目中结合ElementPlus进行CSS样式定制。首先，创建了styles文件夹并编写了mixins.scss，定义了各种按钮、输入框、时间选择器等组件的样式混合。接着，创建了element-ui.scss，覆盖ElementUI默认样式，实现了一致的蓝色主题。最后，编写了common.scss，包含了通用的动画和布局样式。通过这种方式，实现了项目的整体视觉风格统一和交互体验优化。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

前面说到必须运行起来vue3.x+elementPlus 项目，再往下处理css导入和自定义问题

1.创建styles文件夹在项目中保持跟router 同一层级

创建mixins.scss

/*按钮的三种展示  
btn-mixins-clear-default 灰色边框字体
  btn-mixins-clear 带颜色的边框字体
   btn-depth-mixins 带浅颜色背景的边框字体
   btn-mixins 带深颜色背景的边框字体
   btn-mixins-danger  红色
            
  <el-button type="primary">主要按钮</el-button>
  <el-button type="primary" plain>主要按钮</el-button>
  <el-button plain>朴素按钮</el-button>
            <el-button class="btn-mixins-clear">按钮</el-button>
            <el-button class="btn-mixins-clear-default">按钮</el-button>
            <el-button class="btn-depth-mixins">按钮</el-button>
            <el-button class="btn-mixins">按钮</el-button>
            <el-button class="btn-mixins-danger">按钮</el-button>
            <el-button class="btn-mixins-fff">按钮</el-button>
*/
/*文字的颜色 下划线  hover颜色  按钮的背景颜色*/
$color-text-blue:#007FFF;
$color-text-green:#14B43C;
// $color-text-green:#00b38a;
$color-text-orange:#FF9014;
$text-color-3b: #3B4754;
$text-color-ff19: #ff192d;
/*字体的默认颜色 */
$text-color-default: #848C94;
$text-color-0a: #0A1929;
/*文字  hover   */
$txt-h-blue: #F0F7FF;
$txt-h-green:#fffbe6;
$txt-h-orange:#fff7e6;
/*按钮背景 或者下划线的颜色 或者别的什么背景*/
$bg-blue:$color-text-blue;
$bg-green:$color-text-green;
$bg-orange:$color-text-orange;
/*按钮disabled   */
$btn-d-blue: rgba(51,153,255,.8);
$btn-d-green:rgba(33,201,75,.8);
$btn-d-orange:rgba(242,158,64,.8);

/*按钮hover   */
$btn-h-blue: #3399FF;
$btn-h-green:#21c94b;
$btn-h-orange:#f29e40;
/*按钮active*/
$btn-a-blue: #0059B2;
$btn-a-green: #1e9d3e;
$btn-a-orange: #dd7e14;

/* 按钮或者选择的背景色 */
$bg-color:$txt-h-blue;
$bgHover-color:#F2F6FB;
/*背景*/
$box-bg-color: #F3F3F4;
$icon-color:#B5BABE;
$icon-color-ce:#CED1D4;
/*e5的边框*/
$border-c-e5:#e5e5e5;
/*input  box-shadow*/

$box-shadow-color-blue: 0 0 0 2px #E5F2FF;
$box-shadow-color-green: 0 0 0 2px #E7F7EB;
$box-shadow-color-orange: 0 0 0 2px #FFF3E7;
/*16px*/
$px4: 4px;
$px6:6px;
$px8:8px;
$px10:10px;
$px12:12px;
$px14:14px;
$px16:16px;
$px20:20px;
$px24:24px;
$px32:32px;

/*通过该函数设置字体颜色，后期方便统一管理；*/
@mixin color_primary($color) {
  color: $color !important;

  [data-theme="blue"] & {
    color: $color-text-blue !important;
  }

  [data-theme="green"] & {
    color: $color-text-green !important;
  }

  [data-theme="orange"] & {
    color: $color-text-orange !important;
  }
}

@mixin stroke_primary($color) {
  stroke: $color !important;

  [data-theme="blue"] & {
    stroke: $color-text-blue !important;
  }

  [data-theme="green"] & {
    stroke: $color-text-green !important;
  }

  [data-theme="orange"] & {
    stroke: $color-text-orange !important;
  }
}
/*背景颜色*/
@mixin bg_primary($color) {
  background: $color !important;

  [data-theme="blue"] & {
    background: $bg-blue !important;
  }

  [data-theme="green"] & {
    background: $bg-green !important;
  }

  [data-theme="orange"] & {
    background: $bg-orange !important;
  }
}

/*边框背景颜色*/
@mixin border_primary($color) {
  border-color: $color !important;

  [data-theme="blue"] & {
    border-color: $bg-blue !important;
  }

  [data-theme="green"] & {
    border-color: $bg-green !important;
  }

  [data-theme="orange"] & {
    border-color: $bg-orange !important;
  }
}
@mixin border_b_primary($color) {
  border-bottom-color: $color !important;

  [data-theme="blue"] & {
    border-bottom-color: $bg-blue !important;
  }

  [data-theme="green"] & {
    border-bottom-color: $bg-green !important;
  }

  [data-theme="orange"] & {
    border-bottom-color: $bg-orange !important;
  }
}

@mixin border_t_primary($color) {
  border-top-color: $color !important;

  [data-theme="blue"] & {
    border-top-color: $bg-blue !important;
  }

  [data-theme="green"] & {
    border-top-color: $bg-green !important;
  }

  [data-theme="orange"] & {
    border-top-color: $bg-orange !important;
  }
}


/*input  box-shadow背景颜色*/
@mixin inp_shadow_primary($color) {
  box-shadow: 0 0 0 1px $color-text-blue inset  !important;

  [data-theme="blue"] & {
   
  box-shadow: 0 0 0 1px $color-text-blue inset  !important;
  }

  [data-theme="green"] & {
    box-shadow: 0 0 0 1px $color-text-green inset  !important;
  }

  [data-theme="orange"] & {
    box-shadow: 0 0 0 1px $color-text-orange inset  !important;
  }
}

/*input  box-shadow背景颜色*/
@mixin box_shadow_primary($color) {
  box-shadow: $box-shadow-color-blue !important;

  [data-theme="blue"] & {
    box-shadow: $box-shadow-color-blue !important;
  }

  [data-theme="green"] & {
    box-shadow: $box-shadow-color-green !important;
  }

  [data-theme="orange"] & {
    box-shadow: $box-shadow-color-orange !important;
  }
}

/*input  hover背景颜色*/
@mixin bg_hover_primary($color) {
  background: $color !important;

  [data-theme="blue"] & {
    background: $bg-blue !important;
  }

  [data-theme="green"] & {
    background: $bg-green !important;
  }

  [data-theme="orange"] & {
    background: $bg-orange !important;
  }
}

/*input  car  边框颜色*/
@mixin caret_hover_primary($color) {
  caret-color: $color !important;

  [data-theme="blue"] & {
    caret-color: $bg-blue !important;
  }

  [data-theme="green"] & {
    caret-color: $bg-green !important;
  }

  [data-theme="orange"] & {
    caret-color: $bg-orange !important;
  }
}

/*文字  hover背景颜色*/
@mixin txt_hover_primary($color) {
  background: $txt-h-blue !important;

  [data-theme="blue"] & {
    background: $txt-h-blue !important;
  }

  [data-theme="green"] & {
    background: $txt-h-green !important;
  }

  [data-theme="orange"] & {
    background: $txt-h-orange !important;
  }
}

/*btn  hover背景颜色*/
@mixin btn_hover_primary($color) {
  background: $color !important;

  [data-theme="blue"] & {
    background: $btn-h-blue !important;
  }

  [data-theme="green"] & {
    background: $btn-h-green !important;
  }

  [data-theme="orange"] & {
    background: $btn-h-orange !important;
  }
}
/*btn 浅背景颜色*/
@mixin btn_hover_primary_depth($color) {
  background: $color !important;
  border-color: $color !important;

  [data-theme="blue"] & {
    background: $txt-h-blue !important;
    border-color: $bg-blue !important;
  }

  [data-theme="green"] & {
    background: $txt-h-green !important;
    border-color: $bg-green !important;
  }

  [data-theme="orange"] & {
    background: $txt-h-orange !important;
    border-color: $bg-orange !important;
  }
}
/*btn disabled背景颜色*/
@mixin btn_hover_primary_disabled($color) {
  background: $color !important;
  border-color: $color !important;

  [data-theme="blue"] & {
    background: $btn-d-blue !important;
    border-color: $btn-d-blue !important;
  }

  [data-theme="green"] & {
    background: $btn-d-green !important;
    border-color: $btn-d-green !important;
  }

  [data-theme="orange"] & {
    background: $btn-d-orange !important;
    border-color: $btn-d-orange !important;
  }
}
/*btn  active背景颜色*/
@mixin btn_active_primary($color) {
  background: $color !important;

  [data-theme="blue"] & {
    background: $btn-a-blue !important;
  }

  [data-theme="green"] & {
    background: $btn-a-green !important;
  }

  [data-theme="orange"] & {
    background: $btn-a-orange !important;
  }
}

2. 创建element-ui.scss

@import "./mixins.scss";

/*ele*/
.cac {
  @include caret_hover_primary($color-text-blue);
}

// .el-input__wrapper{
//   padding: 1px 11px;
//   box-shadow: 0 0 0 1px var(--el-input-border-color,var(--el-border-color)) inset;
// }
.el-input__wrapper.is-focus,
.el-input__wrapper:hover {
  @include inp_shadow_primary($color-text-blue);
}

.el-input__wrapper.is-focus input.el-input__inner,
.el-input__wrapper:hover input.el-input__inner {
  border: none;
  box-shadow: none;
}

.el-input__wrapper.is-focus input.el-input__inner:focus,
.el-input__wrapper:hover input.el-input__inner:focus {
  border: none !important;
  box-shadow: none !important;

}

/*时间样式*/
.el-date-editor .el-input__wrapper input.el-input__inner:hover,
.el-date-editor .el-input__wrapper.is-focus input.el-input__inner,
.el-date-editor .el-input__wrapper.is-focus input.el-input__inner:focus {
  border: none !important;
  box-shadow: none !important;
}

.el-date-picker {
  .el-input__wrapper {
    padding: 1px 11px;
    box-shadow: 0 0 0 1px var(--el-input-border-color, var(--el-border-color)) inset;
  }

  .el-input__wrapper.is-focus {
    @include inp_shadow_primary($color-text-blue);
  }

  .el-input__wrapper input.el-input__inner:hover,
  .el-input__wrapper.is-focus input.el-input__inner,
  .el-input__wrapper.is-focus input.el-input__inner:focus {
    border: none !important;
    box-shadow: none !important;
  }

  .el-button {
    padding: 5px 11px !important;
  }

}

// .el-picker-panel.el-date-range-picker:focus{
//   @include inp_shadow_primary($color-text-blue);
// }
.el-date-range-picker__time-picker-wrap {
  .el-input__wrapper {
    padding: 1px 11px;
    box-shadow: 0 0 0 1px var(--el-input-border-color, var(--el-border-color)) inset;
  }

  .el-input__wrapper.is-focus {
    @include inp_shadow_primary($color-text-blue);
  }

  .el-input__wrapper input.el-input__inner {
    width: 120px;
  }

  .el-input__wrapper input.el-input__inner:hover,
  .el-input__wrapper.is-focus input.el-input__inner,
  .el-input__wrapper.is-focus input.el-input__inner:focus {
    border: none !important;
    box-shadow: none !important;
  }
}

.el-picker-panel__footer {

  .el-button {
    padding: 5px 11px !important;
  }
}

/*时间样式结束*/
.border-focus {
  border: none;
  border-style: solid;
  border-width: 1px;
  @include border_primary($color-text-blue);
  // border-color: #007FFF ;
  @include box_shadow_primary($color-text-blue);
}

.border-error {
  border-color: #ff192d;
}

.hover-focus {
  @include border_primary($color-text-blue);
  // border-color: #007FFF ;
}

input.el-input__inner:hover {
  border-style: solid;
  border-width: 1px;
  // border: 1px solid ;
  @include border_primary($color-text-blue);
}

input.el-input__inner:focus {
  outline: none;
  border-style: solid;
  border-width: 1px;
  @include border_primary($color-text-blue);
  @include box_shadow_primary($box-shadow-color-blue);
  // box-shadow: 0 0 0 2px rgba(0, 127, 255, 0.2);
}

input.el-input__inner::-webkit-input-placeholder {
  color: #ccc;
}

input.el-input__inner::-moz-placeholder {
  //不知道为何火狐的placeholder的颜色是粉红色，怎么改都不行，希望有大牛路过帮忙指点
  color: #ccc;
}

input.el-input__inner:-ms-input-placeholder {
  //由于我的IE刚好是IE9，支持不了placeholder，所以也测试不了(⊙﹏⊙)，有IE10以上的娃可以帮我试试
  color: #ccc;
}



.el-cascader .el-input__inner {
  color: #0a1929;
}

/*el  穿梭框*/
.el-transfer {
  .el-transfer__buttons {
    width: 90px;
    box-sizing: content-box;
    padding: 0 $px20;

    .el-button {
      width: 100%;
    }

    .el-button:nth-child(2) {
      margin-left: 0;
    }
  }

  .el-transfer-panel {
    border-color: $icon-color-ce;
    border-radius: $px8;

    .el-transfer-panel__footer {
      text-align: right;
      padding-right: 15px;
    }
  }

  .el-transfer-panel__filter {
    margin: 10px;

    .el-input__inner {
      border-radius: $px8;
      -webkit-border-radius: $px8;
      -moz-border-radius: $px8;
      -ms-border-radius: $px8;
      -o-border-radius: $px8;
    }
  }
}

/*focus*/
.el-cascader .el-input .el-input__inner:focus,
.el-cascader .el-input.is-focus .el-input__inner {
  @include border_primary($bg-blue);
}

.el-input__inner {
  width: 150px;
  @include caret_hover_primary($color-text-blue);

}

.el-date-editor .el-icon-circle-close {
  @include color_primary($color-text-blue);
}

/*单选*/
.el-radio__inner {
  border-radius: 50%;
}

.el-radio__inner:hover {
  @include border_primary($bg-blue);
}

.el-radio__input.is-checked .el-radio__inner {
  @include bg_primary($bg-blue);
  @include border_primary($bg-blue);
  border-radius: 50%;
}

.el-input-number__decrease:hover,
.el-input-number__increase:hover {
  @include color_primary($color-text-blue);

}

.el-input-number__decrease:hover:not(.is-disabled)~.el-input .el-input__inner:not(.is-disabled),
.el-input-number__increase:hover:not(.is-disabled)~.el-input .el-input__inner:not(.is-disabled) {
  @include border_primary($bg-blue);
}

/* // radio选中改为勾勾 */
.el-radio__input.is-checked .el-radio__inner::after {
  content: "";
  width: 6px;
  height: 6px;
  position: absolute;
  top: 6px;
  left: 6px;
  vertical-align: middle;
  border-radius: 50%;
  background: #fff;
}

/*下拉菜单的选中颜色*/
.el-cascader-node.is-selectable.in-active-path {
  @include color_primary($color-text-blue);
}

.el-cascader-node.in-active-path,
.el-cascader-node.is-active,
.el-cascader-node.is-selectable.in-checked-path {
  @include color_primary($color-text-blue);
}

/*时间选中*/
.el-date-picker__header-label.active,
.el-date-picker__header-label:hover,
.el-picker-panel__shortcut:hover,
.el-picker-panel__icon-btn:hover,
.el-date-table td.available:hover {
  @include color_primary($color-text-blue);

}

.el-date-table td.current:not(.disabled) span,
.el-date-table td.end-date span,
.el-date-table td.start-date span {
  @include bg_primary($bg-blue);
  color: #fff !important;
}

.el-date-table td.in-range div {

  @include txt_hover_primary($txt-h-blue);
  @include color_primary($color-text-blue);
}

.el-date-editor .el-range-separator {
  width: auto;
}

.el-input.is-active .el-input__inner,
.el-input__inner:focus {
  @include border_primary($bg-blue);

}

.el-input__inner:hover {
  @include border_primary($bg-blue);
}

/*dialog*/
.el-dialog {

  min-height: 126px;
  background: #FFFFFF;
  border-radius: 8px;
}

.dialog-footer {
  font-size: 0;
}

.el-dialog__header {
  font-size: 16px;
  font-weight: 600;
  color: $text-color-0a;
}

.el-dialog__headerbtn:focus .el-dialog__close,
.el-dialog__headerbtn:hover .el-dialog__close {
  @include color_primary($color-text-blue);
}

.el-loading-spinner .el-loading-text {
  @include color_primary($color-text-blue);

}

/*btn*/
.el-button {
  padding: 8px 12px;
  min-height: 24px;
  border: none;
}

.el-button.el-button-s {
  padding: 3px 6px;
  min-height: 24px;
  font-size: 12px;
}

.el-button--primary.is-disabled,
.el-button--primary.is-disabled:active,
.el-button--primary.is-disabled:focus,
.el-button--primary.is-disabled:hover {
  @include btn_hover_primary_disabled($btn-h-blue);
}

// .el-button--default,
.el-button--default.is-plain,
.btn-mixins-clear-default {
  border-width: 1px;
  border-style: solid;
  border-color: $icon-color-ce;
  color: $text-color-default;
  background-color: #fff;
}

// .el-button--default:hover,
// .el-button--default:focus,
// .el-button--default:active,
.el-button--default.is-plain:hover,
.el-button--default.is-plain:focus,
.el-button--default.is-plain:active,
.btn-mixins-clear-default:hover,
.btn-mixins-clear-default:focus,
.btn-mixins-clear-default:active {
  @include border_primary($bg-blue);
  @include color_primary($color-text-blue);
  background-color: #fff;

}

.el-button--text {
  @include color_primary($color-text-blue);
}

// .el-button--primary {
//   @include border_primary($bg-blue);
//   @include bg_primary($bg-blue);
//   color: #fff ;
// }


// .el-button--primary:hover {
//   @include btn_hover_primary($btn-h-blue);
// }

// .el-button--primary:active {
//   @include btn_active_primary($btn-a-blue);
// }
.el-message-box__btns button:nth-child(2) {
  margin-left: 16px;

}

.btn-mixins-danger {
  background-color: $text-color-ff19;
  border-color: $text-color-ff19;
  color: #fff;
}

.btn-mixins-danger:hover,
.btn-mixins-danger:focus,
.el-button--primary:hover {
  background-color: $text-color-ff19;
  border-color: $text-color-ff19;
  color: #fff;
}

.btn-mixins-fff {
  background: #fff;
  border-color: #fff;
  @include color_primary($color-text-blue);
}

.btn-mixins,
.el-button--primary {
  @include border_primary($bg-blue);
  @include bg_primary($bg-blue);
  color: #fff;
}

.btn-mixins:hover,
.btn-mixins:focus,
.el-button--primary:hover {
  color: #fff;
  @include btn_hover_primary($btn-h-blue);
}

.btn-mixins:active,
.btn-mixins:focus,
.el-button--primary:active {
  color: #fff;
  @include btn_hover_primary($btn-h-blue);
}

.btn-mixins-clear {
  border-width: 1px;
  border-style: solid;
  @include border_primary($bg-blue);
  @include color_primary($color-text-blue);
  background-color: #fff;
}

.btn-mixins-clear:hover,
.btn-mixins-clear:focus,
.btn-mixins-clear:active {
  border-width: 1px;
  border-style: solid;
  @include border_primary($bg-blue);
  @include bg_primary($bg-blue);
  color: #fff !important;
}

.el-button--primary.is-plain,
.btn-depth-mixins {
  border-width: 1px;
  border-style: solid;
  @include btn_hover_primary_depth($txt-h-blue);
  @include color_primary($color-text-blue);
}

.el-button--primary.is-plain:hover,
.el-button--primary.is-plain:active,
.btn-depth-mixins:hover,
.btn-depth-mixins:active {
  @include border_primary($bg-blue);
  @include bg_primary($bg-blue);
  color: #fff !important;
}

/*radio   checkbox*/
.el-radio__input.is-checked+.el-radio__label {
  @include color_primary($color-text-blue);

}

.el-radio-button__orig-radio:checked+.el-radio-button__inner {
  @include border_primary($bg-blue);
  @include bg_primary($bg-blue);

}

.el-time-panel__btn.confirm {
  @include color_primary($color-text-blue);

}

.is-active .el-radio-button__inner:hover {
  color: #fff;

}

.el-radio-group {
  border-radius: 3px;
  padding: 4px;
  border: 1px solid $icon-color-ce;

  .el-radio-button {
    margin-right: 4px;
  }

  .el-radio-button:last-child {
    margin-right: 0;
  }

  .el-radio-button:hover .el-radio-button__inner {

    background: #F3F3F4;

  }

  .el-radio-button__inner {
    display: inline-block;
    border: none;
    border-radius: 2px;
    -webkit-border-radius: 2px;
    -moz-border-radius: 2px;
    -ms-border-radius: 2px;
    -o-border-radius: 2px;
    padding: 2px 8px;
    font-size: 14px;
    color: $text-color-default;
    height: 24px;
    line-height: 20px;
    box-shadow: none !important;
  }

  .el-radio-button:first-child .el-radio-button__inner {
    border-left: none;
    border-radius: 2px;
    -webkit-border-radius: 2px;
    -moz-border-radius: 2px;
    -ms-border-radius: 2px;
    -o-border-radius: 2px;
  }

  .el-radio-button:last-child .el-radio-button__inner {
    border-radius: 2px;

  }

  .el-radio-button:focus:not(.is-focus):not(:active):not(.is-disabled) {
    @include box_shadow_primary($color-text-blue);

  }

  .el-radio-button__orig-radio:checked+.el-radio-button__inner {
    @include box_shadow_primary($color-text-blue);
  }

  .el-radio-button.is-active:hover .el-radio-button__inner {

    @include bg_primary($bg-blue);
  }
}

.el-radio-group-nobtn {
  border: none;

  .el-radio {
    margin-right: 24px;
  }
}

.el-checkbox-group {
  .el-checkbox {
    margin-right: 12px;
    color: $text-color-default;
  }

  .el-checkbox__inner {
    border-color: $text-color-default;
  }

  .el-checkbox__input.is-checked+.el-checkbox__label {
    @include color_primary($color-text-blue);
  }
}

.el-range-editor.is-active,
.el-range-editor.is-active:hover {
  @include border_primary($bg-blue);

}

.el-checkbox__inner:hover {
  @include border_primary($bg-blue);

}

.el-checkbox__input.is-focus .el-checkbox__inner {
  @include border_primary($bg-blue);
}

.el-checkbox__input.is-checked+.el-checkbox__label {
  @include color_primary($color-text-blue);

}

.el-checkbox__input.is-checked .el-checkbox__inner,
.el-checkbox__input.is-indeterminate .el-checkbox__inner {
  @include border_primary($bg-blue);
  @include bg_primary($bg-blue);

}


/*switch*/
.el-switch {
  width: 48px;
  height: 24px;
  // @include bg_primary($bg-blue);
  border-radius: 100px;
}

.el-switch.is-checked .el-switch__core {
  @include border_primary($bg-blue);
  @include bg_primary($bg-blue);

}

.el-switch__label.is-active {
  @include color_primary($color-text-blue);

}

//文字在里面
.el-switch__core {
  width: 48px !important;
  height: 24px;
  border-radius: 100px;
  border: none;
}

.el-switch__core::after {
  width: 20px;
  height: 20px;
  top: 2px;
}

.el-switch.is-checked .el-switch__core::after {
  margin-left: -21px;
}

/*关闭时文字位置设置*/
.el-switch__label--right {
  position: absolute;
  z-index: 1;
  right: 10px;
  margin-left: 0px;
  color: #fff;

  span {
    font-size: 12px;
  }
}

/* 激活时另一个文字消失 */
.el-switch__label.is-active {
  display: none;
}

/*开启时文字位置设置*/
.el-switch__label--left {
  position: absolute;
  z-index: 1;
  left: 10px;
  margin-right: 0px;
  color: #fff;

  span {
    font-size: 12px;
  }
}

//

/*upload*/
.el-upload--picture-card:hover,
.el-upload:focus {
  @include border_primary($bg-blue);
  @include color_primary($color-text-blue);

  .el-icon-plus {
    @include color_primary($color-text-blue);

  }
}

.el-loading-spinner .path {
  @include stroke_primary($color-text-blue);
}

/*table*/
.el-table {
  border-radius: 4px;
}

.el-table__fixed-right-patch {
  background: #F5F5F5;
}

.el-table--border,
.el-table--group {
  border-color: $border-c-e5;
}

.el-table .cell {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  word-break: break-all;
  line-height: 23px;
}

.el-table .el-table__cell {
  padding: $px10 0;
  text-align: center;
}

.el-table th.el-table__cell {

  background: #F5F5F5;
}

.el-table td.el-table__cell,
.el-table th.el-table__cell.is-leaf {

  // @include border_primary($bg-blue);
  border-color: $border-c-e5;
}

.el-table th.el-table__cell>.cell {
  font-size: 14px;
  font-weight: 600;
  color: $text-color-0a;

}

.el-table td.el-table__cell,
.el-table th.el-table__cell.is-leaf {
  border-color: $border-c-e5;
}

.el-table--striped .el-table__body tr.el-table__row--striped td.el-table__cell {
  background-color: $box-bg-color;
}

.el-table__body tr.hover-row.current-row>td.el-table__cell,
.el-table__body tr.hover-row.el-table__row--striped.current-row>td.el-table__cell,
.el-table__body tr.hover-row.el-table__row--striped>td.el-table__cell,
.el-table__body tr.hover-row>td.el-table__cell {

  background-color: $txt-h-blue;
}

.el-table__body tr.row-bg-t td.el-table__cell {
  background: #fff;
}

.el-table__body tr.row-bg-f td.el-table__cell {
  background: $box-bg-color;
}

.el-table .el-table__body tr td.success-row {
  background: #F0F7FF;
}

// .el-table__body tr.row-bg-t:hover td.el-table__cell {
//   background-color: $txt-h-blue; 
// }
// .el-table__body tr.row-bg-f:hover td.el-table__cell {
//   background-color: $txt-h-blue;
// }
.el-dropdown-menu__item:focus,
.el-dropdown-menu__item:not(.is-disabled):hover {

  @include txt_hover_primary($txt-h-blue);
  @include color_primary($color-text-blue);
}

.el-table td.el-table__cell,
.el-table th.el-table__cell.is-leaf {
  border-bottom: 1px solid #e5e5e5;

}

.el-table--border .el-table__cell,
.el-table__body-wrapper .el-table--border.is-scrolling-left~.el-table__fixed {
  border-right: 1px solid #e5e5e5;

}

.el-table .ascending .sort-caret.ascending {
  @include border_b_primary($bg-blue);
}

.el-table .descending .sort-caret.descending {
  @include border_t_primary($bg-blue);

}

/*分页*/
.el-pagination {
  text-align: left;
  padding: 24px 0 16px;
  background-color: #fff;
}

.el-pagination.is-background .el-pager li:not(.disabled):hover {
  @include color_primary($color-text-blue);

}

.el-pagination.is-background .el-pager li:not(.disabled).is-active {

  @include bg_primary($bg-blue);
}

.el-pagination.is-background .el-pager li:not(.disabled).is-active:hover {
  color: #fff !important;
}

.el-select-dropdown__item.selected {
  @include color_primary($color-text-blue);

}

.el-pagination button,
.el-pagination span:not([class*=suffix]) {
  font-size: $px12;
  color: $text-color-default;
}

.el-pagination.is-background .btn-next,
.el-pagination.is-background .btn-prev,
.el-pagination.is-background .el-pager li,
.el-pagination .el-select .el-input .el-input__inner {
  color: $text-color-default;

}

// .el-date-table td.today span {
//   // color: #fff;
//   // @include color_primary($color-text-blue);
// }

.el-pagination__editor.el-input .el-input__inner {
  width: 50px;
}


/*select*/
.el-select-dropdown.is-multiple .el-select-dropdown__item.selected {
  @include color_primary($color-text-blue);

}

.el-select-dropdown.is-multiple .el-select-dropdown__item.selected.hover {
  background-color: $bgHover-color;
}

.el-cascader,
.el-select {
  .el-input__wrapper.is-focus {
    // box-shadow: none !important;

    input.el-input__inner:hover {
      border: none !important;
    }
  }

  input.el-input__inner:hover,
  input.el-input__inner:focus {
    border: none !important;
    box-shadow: none !important;
  }
}

.el-cascader {
  .el-tag {
    border: none;
    margin: 0 0 0 6px;
  }
}

// .el-popper.is-light:focus{
//   border: none;
//   box-shadow: none
// }

.el-cascader__suggestion-item.is-checked {
  @include color_primary($color-text-blue);

}

.time-select-item.selected:not(.disabled) {
  @include color_primary($color-text-blue);

}

3.创建common.scss

//购物车加入商品后弹簧效果

@import "./mixins.scss";

[v-cloak] {
  display: none;
}

@keyframes carmove {
  0% {
    transform: scale(1);
  }

  25% {
    transform: scale(0.8);
  }

  50% {
    transform: scale(1.1);
  }

  75% {
    transform: scale(0.9);
  }

  100% {
    transform: scale(1);
  }
}

@keyframes mymove {
  0% {
    transform: scale(1);
  }

  25% {
    transform: scale(1);
  }

  50% {
    transform: scale(1);
  }

  75% {
    transform: scale(1);
  }

  100% {
    transform: scale(1);
  }
}

// 上下动画
@keyframes upDown {
  0% {
    transform: translateY(0px);
  }

  25% {
    transform: translateY(-2px);
  }

  50% {
    transform: translateY(0px);
  }

  75% {
    transform: translateY(2px);
  }

  100% {
    transform: translateY(0px);
  }
}

//翻转动画

@keyframes y-show {
  0% {
    transform: rotateY(90deg);
    opacity: 0;
  }


  100% {
    transform: rotateY(90deg);
    opacity: 1;
  }
}

@keyframes y-hide {
  0% {
    transform: rotateY(90deg);
    opacity: 1;
  }


  100% {
    transform: rotateY(90deg);
    opacity: 0
  }
}

.moveToCart {
  animation: carmove 0.5s ease-in-out;
}

.img-move {
  animation: .8s mymove ease-in-out;
  //animation: 0.8s mymove linear;
  display: block;
  width: 50px;
  height: 50px;
  background: linear-gradient(135deg, #ffd78c, #ffb92d);
  border-radius: 50%;
  -webkit-animation: .8s mymove ease-in-out;
}

.move_dot {
  position: fixed;
  z-index: 10000;
}

body {
  background-color: #f7f7f7;
  font-family: PingFangSC-Regular, PingFang SC;
  // background-color: darkslategrey;
}

.v-time {
  margin-left: 8px;
  display: flex;
  align-items: center;
}

.more-title {
  font-size: 14px;
  text-align: center;
  color: #818181;
  line-height: 20px;
  padding: 24px 0 0;
}

// #app::-webkit-scrollbar {
//   width: 0 ;
//    display: none;
// }
// #app {
//   -ms-overflow-style: none;
//   scrollbar-width: none; /* Firefox */
// }
// #app {
//   overflow: -moz-scrollbars-none;
// }
* {
  -webkit-tap-highlight-color: transparent; //设置为透明
}

.go-top {
  width: 32px;
  height: 32px;
  background: url("../assets/images/no-top.png") center/100%;
  position: fixed;
  bottom: 106px;
  left: 50%;
  margin-left: 616px;
  z-index: 1000000;
}

.go-top:hover {
  background: url("../assets/images/top.png") center/100%;
}

// }
input {
  outline: none;
}

input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
  -webkit-appearance: none;
}

.createFollowCheck input[type=“number”] {
  -moz-appearance: textfield;
}

// top login 固定动画
.slide-fade-enter-active {
  transform: translateY(0px);
  transition: all .3s ease;
  -webkit-transition: all .3s ease;
  -moz-transition: all .3s ease;
  -ms-transition: all .3s ease;
  -o-transition: all .3s ease;
}

.slide-fade-enter
/* .slide-fade-leave-active 用于 2.1.8 以下版本 */

  {
  transform: translateY(-100px);
  -webkit-transform: translateY(-100px);
  -moz-transform: translateY(-100px);
  -ms-transform: translateY(-100px);
  -o-transform: translateY(-100px);
}

.slide-fade-leave-active {
  opacity: 0;
  transform: translateY(-100px);
  transition: all 0s ease;
  -webkit-transform: translateY(-100px);
  -moz-transform: translateY(-100px);
  -ms-transform: translateY(-100px);
  -o-transform: translateY(-100px);
  -webkit-transition: all 0s ease;
  -moz-transition: all 0s ease;
  -ms-transition: all 0s ease;
  -o-transition: all 0s ease;
}

.slide-fade-leave-to
/* .slide-fade-leave-active 用于 2.1.8 以下版本 */

  {
  transform: translateY(-100px);
  opacity: 0;
  -webkit-transform: translateY(-100px);
  -moz-transform: translateY(-100px);
  -ms-transform: translateY(-100px);
  -o-transform: translateY(-100px);
}



.un {
  user-select: none;
}

.zin100 {
  z-index: 100;
}

.cp {
  cursor: pointer;
}

.fs0 {
  font-size: 0;
}

.posf {
  position: fixed;
}

.posr {
  position: relative;
}

.posr50 {

  position: relative;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.posa {
  position: absolute;
}

.posa50 {

  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.dis-bt {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: justify;
  -ms-flex-pack: justify;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  justify-content: space-between;
}

.dis-bc {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: justify;
  -ms-flex-pack: justify;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  justify-content: center;
}

.justify-flex {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: justify;
  -ms-flex-pack: justify;
  justify-content: space-between;
}

.align-flex {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
}

.flex1 {
  flex: 1;
}

.flex2 {
  flex: 2;
}

.flex3 {
  flex: 3;
}

.flex {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
}

.bdr {
  border-right: 1px solid #e5e5e5;
}

.bdl {
  border-left: 1px solid #e5e5e5;
}

.bdt {
  border-top: 1px solid #e5e5e5;
}

.bdb {
  border-bottom: 1px solid #e5e5e5;
}

.disinb {
  display: inline-block;
}

.lh18 {
  line-height: 18px;
}

.lh20 {
  line-height: 20px;
}

.lh22 {
  line-height: 22px;
}

.lh24 {
  line-height: 24px;
}

.lh26 {
  line-height: 26px;
}

.lh28 {
  line-height: 28px;
}

.t-l {
  text-align: left;
}

.t-r {
  text-align: right;
}

.t-c {
  text-align: center;
}

.hidden-text {
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
  word-break: break-all;
}

.line2 {
  /* -webkit-transform: translateY(-1rem);
    -moz-transform: translateY(-1rem);
    -ms-transform: translateY(-1rem);
    -o-transform: translateY(-1rem); */
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
}

.line-1px-bottom::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 1px;
  background-color: #e5e5e5;
  /* transform: scaleY(0.5); */
}

.line-1px-top::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 1px;
  background-color: #e5e5e5;
  /* transform: scaleY(0.5); */
}

.fl {
  float: left;
}

.fr {
  float: right;
}

.vm {
  vertical-align: middle;
}

.fw400 {
  font-weight: 400;
}

.fw500 {
  font-weight: 500;
}

.fw600 {
  font-weight: 600;
}

.fs14 {
  font-size: 14px;
}

.fs16 {
  font-size: 16px;
}

.fs24 {
  font-size: 24px;
}

.bd4 {
  border-radius: 4px;
  -webkit-border-radius: 4px;
  -moz-border-radius: 4px;
  -ms-border-radius: 4px;
  -o-border-radius: 4px;
}

.bgfff {
  background-color: #fff;
}

.wh100 {
  width: 100%;
  height: 100%;
}

.wh16 {
  display: inline-block;
  width: 16px;
  height: 16px;
}

.w100 {
  width: 100%;
}

.h100 {
  height: 100%;
}

.mb16 {
  margin-bottom: 16px;
}

.ml8 {
  margin-left: 8px;
}
.ml12 {
  margin-left: 12px !important;
}
.ml16 {
  margin-left: 16px !important;
}

.mr12 {
  margin-right: 12px !important;
}
.p16 {
  padding: 16px;
}

.p12 {
  padding: 12px;
}

.plr16 {
  padding: 0 16px;
}

.pl16 {
  padding-left: 16px;
}

.ptb8 {
  padding: 8px 0;
}

.ptb16 {
  padding: 16px 0;
}

.pb0 {
  padding-bottom: 0;
}
.block {
  display: block;
}
.clearfix:before {
  content: '';
  height: 0;
  line-height: 0;
  display: block;
  visibility: hidden;
  clear: both;
}

input[type="number"] {
  -moz-appearance: textfield;
}

input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
  -webkit-appearance: none;
}

.m-bg {
  width: 100%;
  height: 100%;
  position: fixed;
  top: 0;
  left: 0;
  background: rgba(0, 0, 0, 0.3);
  z-index: 11;

}






// .el-table__body tr.current-row>td.el-table__cell,
// .el-table--striped .el-table__body tr.el-table__row--striped.current-row td.el-table__cell{

//   background-color: #ebebff;

// }


// /* 设置滚动条的样式 */
// .el-table--scrollable-x .el-table__body-wrapper::-webkit-scrollbar {
//   height: 17px;
//   background-color: $box-bg-color;
// }

// /* 滚动槽 */
// .el-table--scrollable-x .el-table__body-wrapper::-webkit-scrollbar-track {
//   border-radius: 20px;
// }

// /* 滚动条滑块 */
// .el-table--scrollable-x .el-table__body-wrapper::-webkit-scrollbar-thumb {
//   border-radius: 20px;
// }

// .el-table--scrollable-x .el-table__body-wrapper::-webkit-scrollbar-thumb:hover {
//   background-color: $icon-color;
// }

// /* 设置滚动条的样式 */
// .el-table--scrollable-y .el-table__body-wrapper::-webkit-scrollbar {
//   width: 17px;
// }

// /* 滚动槽 */
// .el-table--scrollable-y .el-table__body-wrapper::-webkit-scrollbar-track {
//   border-radius: 20px;
//   -webkit-border-radius: 20px;
//   -moz-border-radius: 20px;
//   -ms-border-radius: 20px;
//   -o-border-radius: 20px;
// }

// /* 滚动条滑块 */
// .el-table--scrollable-y .el-table__body-wrapper::-webkit-scrollbar-thumb {
//   border-radius: 20px;
//   background: $icon-color-ce;
// }

// .el-table--scrollable-y .el-table__body-wrapper::-webkit-scrollbar-thumb:hover {
//   background-color: $icon-color;
// }

/*select结束*/

.icon-18px {
  display: inline-block;
  min-width: 18px;
  height: 18px;
}

// mjb-horizontal  水平
.mjb-horizontal {
  display: flex;
  margin-top: 12px;

  .mjb-h1 {
    width: 100%;
  }

  .mjb-h2 {
    width: 50%;
  }

  .mjb-h3 {
    width: 33%;
  }

  .mjb-h4 {
    width: 25%;
  }

  .mjb-h5 {
    width: 20%;
    // .mjd-select-input{
    //   .mjd-select{
    //     width: 100px;
    //   }
    // }
  }

  .mjb-h-item {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    margin: 0 16px 0 0;

    .s-title {
      min-width: 88px;
      // max-width: 88px;
      font-size: 14px;
      color: #848C94;
      line-height: 32px;
      text-align: right;
      white-space: nowrap;
      text-overflow: ellipsis;
      overflow: hidden;
      word-break: break-all;

    }


    .el-input {
      width: auto;
    }

    .s-inp {
      width: auto;
      height: 32px;
      border-radius: 3px;
    }

    .el-range-editor.el-input__inner {
      padding: 0 12px;
    }

    .el-checkbox__inner {
      width: 16px;
      height: 16px;
    }

    .el-checkbox__inner::after {

      height: 8px;
      left: 5px;
    }

    .el-input__inner {
      border-color: #CED1D4;
      height: 32px;
    }

    /**
      *修改：在element UI文档上找到默认的清空按钮，
      然后找到默认按钮的content属性，
      直接替换content的值就可以*
      **/
    .el-input__suffix {
      .el-input__suffix-inner {
        border-color: none;

        .el-icon-circle-close:before {
          line-height: 32px !important;
          height: 32px !important;
          position: absolute;
          right: 5px;
        }
      }
    }

    .el-select .el-input .el-select__caret {
      line-height: 32px;
    }
  }
}

.sku-info {
  .s-i-table {
    border-top: 1px solid #f3f3f4;
    margin-top: 32px;

    .s-title {
      font-size: 16px;
      font-weight: 600;
      color: #0a1929;
    }
  }

  .mjb-h-item {
    .s-title {
      // min-width: 150px;
      // max-width: 150px;
      line-height: 22px;
      margin-right: 8px;
    }

    .s-info {
      font-size: 14px;
      color: #3B4754;
      line-height: 20px;
      text-align: left;
    }

  }

  .s-info-btn {
    padding: 4px 8px;
    border-width: 1px;
    font-size: 14px;
    border-style: solid;
    @include border_primary($bg-blue);
    @include color_primary($color-text-blue);
    background: $txt-h-blue;
    color: #fff !important;
    border-radius: 3px;
  }

}

.a-link {
  font-size: 14px;
  color: #007fff !important;
  line-height: 20px;
}

.a-link:hover {
  color: #007fff !important;
  text-decoration: underline;

}

// mjb-vertical  垂直
.mjb-vertical {
  .mjb-h-item {
    margin: 0 16px 0 0;
    text-align: left;

    .s-title {
      font-size: 14px;
      color: #848C94;
      line-height: 32px;
      white-space: nowrap;
      text-overflow: ellipsis;
      overflow: hidden;
      word-break: break-all;

    }

    .s-inp {
      width: auto;
      height: 32px;
      border-radius: 3px;
    }

    .el-range-editor.el-input__inner {
      padding: 0 12px;
    }

    .el-checkbox__inner {
      width: 16px;
      height: 16px;
    }

    .el-checkbox__inner::after {

      height: 8px;
      left: 5px;
    }

    .el-input__inner {
      border-color: #CED1D4;
      height: 32px;
    }

    .el-select .el-input .el-select__caret {
      line-height: 32px;
    }
  }
}

// 标题和管理
.search-top-box {
  padding: 12px 0 16px 8px;
  background: #ffffff;
  border-radius: 4px;
  margin-bottom: 12px;
  overflow-x: scroll;

  .el-date-editor.el-input,
  .el-date-editor.el-input__inner {
    width: auto;
  }

  .el-input__inner {
    height: 32px !important;
    line-height: 32px;
  }

  .el-date-editor.el-input,
  .el-date-editor.el-input__inner {
    .el-input__icon {
      line-height: 32px;
    }
  }

  .el-cascader {
    line-height: 32px;

    .el-input__icon {
      line-height: 32px;

    }
  }
}

.tit-set {
  margin-bottom: $px12;

  .set-t {
    font-size: $px14;
    font-weight: 600;
    color: #0a1929;
  }

  .set-st {
    font-size: $px12;
    @include color_primary($color-text-blue);
  }
}

4.创建index.scss


@import './element-ui.scss';
@import './common.scss';

5.在main.js里面导入


import './styles/index.scss'

到这里css样式处理完了进入js封装