address-book-shell 0.0.1

package/src/theme/element-ui-theme/element-ui-common.scss

@@ -0,0 +1,1394 @@
+.el-input__inner[type="number"]::-webkit-outer-spin-button,
+.el-input__inner[type="number"]::-webkit-inner-spin-button {
+    -webkit-appearance: none !important;
+    margin: 0;
+  }
+
+// 按钮
+$button-default-text-color:#606266;
+$button-default-text-grba:rgba(255, 255, 255, 0.65);
+$border-default-rgba: rgba(0, 0, 0, 0.15);
+
+// 按钮
+.el-button+.el-button {
+    margin-left: 12px
+}
+
+.el-button {
+    border-radius: 2px;
+
+    &.el-button--mini {
+        height: 24px;
+        line-height: 1;
+        min-width: auto;
+        padding: 0 8px !important;
+        
+    }
+
+    &.el-button--info {
+        border: 1px solid rgba($color: #000000, $alpha: 0.15);
+
+        &:focus {
+            border: 1px solid rgba($color: #000000, $alpha: 0.15) !important;
+        }
+    }
+
+    &.el-button--default:not(.ghost-button):not(.is-disabled) {
+
+        &:focus,
+        &:hover {
+            // border-color: $hr-red;
+            border: 1px solid $hr-red;
+            background: #fff;
+            color: $hr-red;
+        }
+
+        &:active {
+            background-color: #feeceb;
+        }
+    }
+
+    &.el-button--primary {
+        border: 1px solid;
+        color: #fff !important;
+        background-color: #f44336 !important;
+        border-color: #f44336 !important;
+
+        &:focus {
+            border: 1px solid #f6695e;
+        }
+    }
+
+    &.is-plain {
+        background-color: #fff;
+    }
+
+    &.el-button--info.is-disabled {
+        color: #8a8a8a;
+    }
+
+    &.el-button--info.dashed {
+        border: 1px dashed rgba(0, 0, 0, 0.15);
+    }
+
+    &.danger-text-button.el-button--text {
+        color: $hr-danger-color !important;
+    }
+
+    // 危险按钮
+    &.el-button--danger {
+        &.is-plain {
+
+            &:hover,
+            &:focus {
+                color: #ff9800;
+                border-color: #ffd699;
+                background-color: #fff;
+            }
+
+            &:active {
+                background-color: rgba(255, 214, 153, .3)
+            }
+        }
+    }
+
+    //幽灵按钮
+    &.ghost-button {
+        border-color: #fff;
+        background-color: #000;
+        color: $button-default-text-grba;
+
+        &:hover,
+        &:focus {
+            color: $button-default-text-grba;
+        }
+
+        &:active {
+            background: rgba(#ccc, .3);
+        }
+    }
+
+    // 文字按钮
+    &.el-button--text:not(.is-disabled) {
+        // color: #1890FF;
+
+        &:active {
+            opacity: .6;
+        }
+    }
+
+    i.iconfont {
+        font-size: 100%;
+        margin-right: 8px;
+    }
+}
+
+// 单选框组合
+.el-radio-group {
+    .el-radio-button:first-child {
+        .el-radio-button__inner {
+            border-radius: 2px 0 0 2px;
+        }
+    }
+
+    .el-radio-button:last-child {
+        .el-radio-button__inner {
+            border-radius: 0 2px 2px 0;
+        }
+    }
+
+    // 去除选中时的阴影
+    .el-radio-button:focus:not(.is-focus):not(:active):not(.is-disabled) {
+        box-shadow: none;
+    }
+}
+
+// 分页
+.el-pagination {
+    $font-size: 14px;
+    $width-heignt: 32px;
+    $line-height: 32px;
+
+    %el-pagination-default-style {
+        height: $width-heignt;
+        min-width: $width-heignt !important;
+        border-radius: 3px !important;
+    }
+
+    font-size: $font-size;
+    font-weight: 400;
+    color: $hr-color65;
+
+    .el-pagination__jump {
+        .el-pagination__editor.is-in-pagination {
+            .el-input__inner {
+                padding: 0;
+                font-size: $font-size;
+                height: $line-height;
+            }
+        }
+    }
+
+    .btn-prev,
+    .btn-next {
+        @extend %el-pagination-default-style;
+        background-color: #fff !important;
+        // border: 1px solid $border-default-rgba;
+        margin: 0 8px;
+        padding: 0;
+
+        &:hover {
+            color: $hr-red;
+        }
+
+        .el-icon {
+            font-size: $font-size;
+        }
+    }
+
+    .el-pager {
+        li {
+            line-height: $line-height;
+            margin: 0 !important;
+            margin-right: 8px !important;
+            @extend %el-pagination-default-style;
+            padding: 0 5px !important;
+            font-size: 14px;
+
+            &:last-child {
+                margin-right: 0 !important;
+            }
+
+            &:hover,
+            &.active {
+                border: 1px solid $hr-red !important;
+            }
+        }
+
+        .number {
+            // line-height: 30px !important;
+            // font-size: 11px;
+            border: 1px solid transparent;
+            // border-radius: 1px;
+        }
+
+        .more::before {
+            line-height: $width-heignt
+        }
+    }
+
+    &.is-background {
+        .el-pager {
+            li:not(.active) {
+                background-color: #fff;
+                border-color: $border-default-rgba;
+                color: #303133
+            }
+
+            .number {
+                line-height: $line-height;
+            }
+        }
+
+        .btn-prev,
+        .btn-next {
+            border: 1px solid $border-default-rgba;
+            margin: 0 8px;
+
+            &:hover:not([disabled="disabled"]) {
+                border-color: $hr-red;
+            }
+        }
+    }
+
+    &.small {
+        transform: scale(.75);
+        margin-left: -14%;
+    }
+
+    &.minimalism {
+        .el-pagination__jump {
+            height: $line-height;
+            line-height: $line-height;
+            vertical-align: middle
+        }
+    }
+
+    &.onlyBorder {
+        .el-pager {
+            li {
+                border: 1px solid rgba($color: #000000, $alpha: 0.15);
+            }
+        }
+    }
+
+    span.el-pagination__total {
+        font-size: $font-size;
+    }
+
+    .el-pagination__sizes {
+        height: $line-height !important;
+        line-height: $line-height !important;
+        margin-top: -1px;
+
+        .el-input__inner {
+            font-size: $font-size;
+            height: $line-height;
+            line-height: $line-height;
+        }
+    }
+}
+
+// 单选框
+$radio-background-pink:#FFE6E6;
+
+.el-radio {
+    .el-radio__inner {
+        width: 16px;
+        height: 16px;
+
+        &:hover {
+            background: $radio-background-pink;
+            color: $button-default-text-grba;
+        }
+    }
+
+    .el-radio__input.is-checked {
+        .el-radio__inner {
+            border: 1px solid rgba(244, 67, 54, 0.5);
+            background: $radio-background-pink;
+
+            &::after {
+                width: 8px;
+                height: 8px;
+                background-color: $hr-red;
+            }
+        }
+    }
+
+    .is-disabled {
+        .el-radio__inner {
+            border-color: #f44336 !important;
+            opacity: .5;
+
+            &::after {
+                background-color: #f44336 !important;
+            }
+        }
+    }
+}
+
+// 复选框
+.el-checkbox {
+    &:not(.is-checked) {
+        .el-checkbox__input:not(.is-disabled) {
+            .el-checkbox__inner {
+                &:hover {
+                    background-color: $radio-background-pink;
+                }
+            }
+        }
+    }
+
+    .el-checkbox__inner {
+        width: 16px;
+        height: 16px;
+
+        &::after {
+            left: 5px;
+            top: 2px;
+            height: 6px;
+            width: 3px;
+        }
+    }
+}
+
+// 下拉框
+.el-dropdown-menu {
+    .el-dropdown-menu__item {
+        border: 1px solid transparent;
+        border-radius: 3px;
+
+        &:focus {
+            border-color: $hr-red;
+        }
+    }
+}
+
+// 输入框
+.el-input {
+    $default-height: 40px;
+    $medium-height: 32px;
+    $small-height: 24px;
+    $color: rgba(0, 0, 0, 0.25);
+    font-size: 16px;
+
+    &.el-input--medium,
+    &.el-input--small {
+        font-size: 14px;
+    }
+
+    %placeholder {
+        &::-webkit-input-placeholder {
+            font-size: 14px;
+            color: $color
+        }
+
+        font-size: 14px;
+        color: $color
+    }
+
+    &.el-input--prefix {
+        .el-input__inner {
+            padding-left: 35px;
+        }
+    }
+
+    &.el-input--suffix {
+        .el-input__inner {
+            padding-right: 35px;
+        }
+    }
+
+    .el-input__inner {
+        color: rgba(0, 0, 0, 0.65);
+        border-color: rgba($color: #000000, $alpha: 0.09);
+
+        &:focus {
+            border-color: $hr-red;
+        }
+
+        @extend %placeholder
+    }
+
+    &.is-disabled {
+        .el-input__inner {
+            background-color: rgba(0, 0, 0, 0.04);
+        }
+    }
+
+    .el-input__suffix,
+    .el-input__prefix {
+        // .el-input__suffix-inner {
+        //     line-height: 40px;
+        // }
+        color: rgba($color: #000000, $alpha: .25);
+        font-size: 16px;
+
+        .el-input__icon {
+            color: rgba($color: #000000, $alpha: .25);
+            cursor: pointer;
+        }
+    }
+
+    .el-input__suffix {
+        right: 12px;
+
+        .iconfont {
+            // margin-right: 8px;
+        }
+    }
+
+    .el-input__prefix {
+        left: 12px;
+    }
+
+    // 下拉框
+    .el-input-group__prepend,
+    .el-input-group__append {
+        $color: rgba(0, 0, 0, 0.65);
+        color: $color;
+        background: #F5F5F5;
+
+        .el-select {
+            .el-input--suffix {
+
+                //修改placeholder的默认颜色：
+                .el-input__inner {
+                    &::-webkit-input-placeholder {
+                        color: $color
+                    }
+
+                    &::-moz-placeholder {
+                        /* Mozilla Firefox 19+ */
+                        color: $color
+                    }
+
+                    &:-moz-placeholder {
+                        /* Mozilla Firefox 4 to 18 */
+                        color: $color
+                    }
+
+                    &:-ms-input-placeholder {
+                        /* Internet Explorer 10-11 */
+                        color: $color
+                    }
+
+                    color: $color
+                }
+            }
+        }
+    }
+
+    .el-input-group__prepend {
+        min-width: 100px;
+    }
+
+    &.el-input--medium {
+        .el-input__suffix {
+            .el-input__suffix-inner {
+                line-height: $medium-height;
+            }
+        }
+    }
+
+    &.el-input--small {
+        .el-input__suffix {
+            .el-input__suffix-inner {
+                line-height: $small-height;
+            }
+        }
+    }
+}
+
+// InputNumber 计数器
+.el-input-number {
+
+    .el-input-number__decrease,
+    .el-input-number__increase {
+        background: transparent;
+    }
+}
+
+// tag 标签
+.el-tag {
+    border-radius: 2px;
+    height: 22px;
+    line-height: 20px;
+    padding: 0 8px;
+
+    // font-size: 12px;
+    &.green {
+        $tag-color: #52C41A;
+        background: #F6FFED;
+        border: 1px solid #B7EB8F;
+        color: $tag-color;
+
+        .el-tag__close.el-icon-close {
+            color: $tag-color;
+
+            &:hover {
+                background-color: $tag-color;
+                color: #fff;
+            }
+        }
+    }
+
+    &.blue {
+        $tag-color: #1890FF;
+        background: #E6F7FF;
+        border: 1px solid #91D5FF;
+        color: $tag-color;
+
+        .el-tag__close.el-icon-close {
+            color: $tag-color;
+
+            &:hover {
+                background-color: $tag-color;
+                color: #fff;
+            }
+        }
+    }
+
+    &.yellow {
+        $tag-color: #FAAD14;
+        background: #FFFBE6;
+        border: 1px solid #FFE58F;
+        color: $tag-color;
+
+        .el-tag__close.el-icon-close {
+            color: $tag-color;
+
+            &:hover {
+                background-color: $tag-color;
+                color: #fff;
+            }
+        }
+    }
+
+    &.red {
+        $tag-color: #FF4D4F;
+        background: #FFF1F0;
+        border: 1px solid #FFA39E;
+        color: $tag-color;
+
+        .el-tag__close.el-icon-close {
+            color: $tag-color;
+
+            &:hover {
+                background-color: $tag-color;
+                color: #fff;
+            }
+        }
+    }
+
+    &.pink {
+        $tag-color: #EB2F96;
+        background: #FFF0F6;
+        border: 1px solid #FFADD2;
+        color: $tag-color;
+
+        .el-tag__close.el-icon-close {
+            color: $tag-color;
+
+            &:hover {
+                background-color: $tag-color;
+                color: #fff;
+            }
+        }
+    }
+
+    &.orange {
+        $tag-color: #FA541C;
+        background: #FFF2E8;
+        border: 1px solid #FFBB96;
+        color: $tag-color;
+
+        .el-tag__close.el-icon-close {
+            color: $tag-color;
+
+            &:hover {
+                background-color: $tag-color;
+                color: #fff;
+            }
+        }
+    }
+
+    &.purple {
+        $tag-color: #722ED1;
+        background: #F9F0FF;
+        border: 1px solid #D3ADF7;
+        color: $tag-color;
+
+        .el-tag__close.el-icon-close {
+            color: $tag-color;
+
+            &:hover {
+                background-color: $tag-color;
+                color: #fff;
+            }
+        }
+    }
+}
+
+// 步骤条 steps
+.el-steps {
+    &.big {
+        transform: scale(1.3333333);
+
+        &.el-steps--horizontal {
+            margin-left: 14.4%;
+        }
+
+        &.el-steps--vertical {
+            margin-top: 10.5%;
+        }
+    }
+
+    .el-step__head {
+        .el-step__icon {
+            &.is-text {
+                border: 1px solid $hr-red
+            }
+
+            .el-step__icon-inner {
+                font-weight: 400;
+                font-size: 12px;
+                line-height: 24px;
+            }
+        }
+
+        &.is-success {
+            color: $hr-red;
+            border-color: $hr-red;
+        }
+
+        &.is-process {
+            color: #fff;
+            border-color: $hr-red;
+
+            // background-color: $hr-red;
+            .el-step__icon.is-text {
+                background-color: $hr-red;
+            }
+        }
+
+        &.is-wait {
+            .el-step__icon {
+                &.is-text {
+                    border: 1px solid
+                }
+            }
+        }
+    }
+
+    .el-step__main {
+        .el-step__title {
+            line-height: 24px;
+            font-size: 14px;
+            font-weight: 400;
+
+            &.is-success {
+                color: rgba(0, 0, 0, 0.65);
+            }
+
+            &.is-process {
+                color: rgba(0, 0, 0, 0.85);
+            }
+
+            &.is-wait {
+                color: rgba(0, 0, 0, 0.45);
+            }
+        }
+
+        .el-step__description {
+            width: 200px;
+
+            &.is-success,
+            &.is-wait {
+                color: rgba(0, 0, 0, 0.45);
+            }
+
+            &.is-process {
+                color: rgba(0, 0, 0, 0.85);
+            }
+        }
+    }
+
+    &.el-steps--horizontal {
+        .el-step {
+            height: 24px;
+
+            &.is-horizontal {
+                .el-step__line {
+                    border-color: rgba(0, 0, 0, .15);
+                    width: calc(100% - 8px);
+                    height: 1px;
+                }
+
+                .el-step__line-inner {
+                    border-color: transparent;
+                }
+
+                position: relative;
+
+                .el-step__main {
+                    position: absolute;
+                    left: 16px;
+                    top: 0;
+                    padding: 0 8px;
+
+                    .el-step__title {
+                        .steps-title {
+                            padding: 0 8px;
+                            background-color: #fff;
+                        }
+                    }
+
+                    .el-step__description {
+                        padding: 5px 8px;
+                    }
+                }
+            }
+        }
+    }
+
+    &.el-steps--vertical {
+        .el-step {
+            &.is-vertical {
+                min-height: 72px;
+
+                .el-step__head {
+                    .el-step__line {
+                        width: 1px;
+                        margin-top: 32px;
+                        margin-bottom: 8px;
+                    }
+
+                    .el-step__line-inner {
+                        border-color: transparent
+                    }
+                }
+            }
+        }
+    }
+}
+
+// Slider 滑块
+.el-slider {
+    .el-slider__runway {
+        .el-slider__button-wrapper {
+
+            &:hover,
+            &.dragging {
+
+                .el-slider__button.hover,
+                .el-slider__button {
+                    border-color: #20A943 !important;
+                }
+            }
+        }
+
+        .el-slider__marks {
+            .el-slider__marks-text:last-child {
+                width: 25%;
+                text-align: center;
+            }
+        }
+    }
+}
+
+// Tabs 标签页
+.el-tabs {
+    .el-tabs__header {
+        &.is-top {
+            .el-tabs__nav-wrap {
+                &::after {
+                    content: '';
+                    background-color: transparent
+                }
+
+                .el-tabs__item {
+                    font-size: 16px;
+
+                    &.small {
+                        font-size: 14px;
+                    }
+
+                    // 失效标签
+                    &.is-disabled {
+                        cursor: not-allowed;
+                        color: rgba(0, 0, 0, .25)
+                    }
+                }
+            }
+        }
+    }
+
+    &.small {
+        .el-tabs__item {
+            font-size: 14px !important;
+        }
+    }
+
+    &.el-tabs--top:not(.el-tabs--border-card):not(.el-tabs--card) {
+        .el-tabs__nav-wrap {
+            .el-tabs__nav-scroll {
+                .el-tabs__nav {
+                    .el-tabs__item {
+                        padding: 0 33px 0 0;
+
+                        &:last-child {
+                            padding: 0
+                        }
+                    }
+                }
+            }
+        }
+    }
+
+    &.el-tabs--border-card {
+        border: 1px solid transparent;
+        box-shadow: none;
+
+        .el-tabs__header {
+            background-color: transparent;
+            border-bottom: 1px solid transparent;
+
+            .el-tabs__item {
+                color: rgba(0, 0, 0, .65);
+                margin-right: 2px;
+                background-color: rgba(0, 0, 0, 0.04);
+                border: 1px solid rgba(0, 0, 0, .15);
+                border-radius: 3px 3px 0 0;
+                margin-top: 0;
+
+                &:first-child {
+                    margin-left: 0;
+                }
+
+                &.is-active {
+                    border-bottom: 1px solid transparent;
+                    background-color: #fff;
+                }
+
+                &:hover,
+                &.is-active {
+                    color: #F44336;
+                }
+            }
+        }
+    }
+
+    // 增加标按钮
+    .el-tabs__new-tab {
+        height: 40px;
+        line-height: 40px;
+        width: 40px;
+        margin: 0;
+        background-color: rgba(0, 0, 0, 0.04);
+        border: 1px solid rgba(0, 0, 0, 0.15);
+        border-radius: 3px 3px 0 0;
+        color: rgba(0, 0, 0, 0.65);
+
+        i {
+            font-size: 18px;
+        }
+    }
+}
+
+// 联级选择器
+.el-cascader {}
+
+.el-cascader__dropdown {
+    .el-cascader-panel {
+        .el-cascader-node {
+            &:not(.is-disabled):not(.in-active-path) {
+                &:hover {
+                    background: #F5F5F5;
+                }
+            }
+
+            &.in-active-path,
+            &.is-active {
+                background: #FFF2F0;
+                font-weight: 400;
+            }
+        }
+    }
+}
+
+// 穿梭框
+.el-transfer {
+    .el-transfer-panel__header {
+        background: #fff
+    }
+}
+
+// 评分
+.el-rate {
+    .el-rate__icon {
+        font-size: 20px;
+    }
+}
+
+// 日期/时间选择框
+.el-popper {
+    .el-picker-panel__body {
+        .el-picker-panel__content {
+            .el-date-table {
+                td {
+                    &:hover {
+                        >div {
+                            >span {
+                                border-color: $hr-red;
+                            }
+                        }
+                    }
+
+                    >div {
+                        >span {
+                            border: 1px solid transparent;
+                            border-radius: 2px;
+                            line-height: 23px;
+                        }
+                    }
+                }
+            }
+        }
+    }
+
+    .el-year-table,
+    .el-month-table {
+        .cell {
+            height: 22px;
+            line-height: 22px;
+            width: 46px;
+            padding: 0 5px;
+        }
+
+        .current {
+            .cell {
+                color: #fff !important;
+                background-color: $hr-red;
+                border-radius: 2px;
+            }
+        }
+    }
+}
+
+.el-date-editor {
+    .el-range-separator {
+        width: auto;
+    }
+}
+
+// 上传
+.el-upload {
+    position: relative;
+
+    .el-upload-dragger {
+        width: 384px;
+        height: 192px;
+
+        .drag-upload {
+            position: absolute;
+            width: 100%;
+            left: 50%;
+            top: 22.3%;
+            transform: translateX(-50%);
+        }
+
+        i {
+            font-size: 42px;
+            color: $hr-red;
+        }
+
+        .el-upload__text {
+            font-size: 14px;
+            color: rgba(0, 0, 0, 0.65);
+            margin-top: 20px;
+        }
+
+        .el-upload__tip {
+            font-size: 12px;
+            color: rgba(0, 0, 0, 0.45);
+        }
+    }
+}
+
+// 头像上传
+.avatar-uploader .el-upload {
+    border: 1px dashed #d9d9d9;
+    border-radius: 6px;
+    cursor: pointer;
+    position: relative;
+    overflow: hidden;
+}
+
+.avatar-uploader .el-upload:hover {
+    border-color: $hr-red;
+}
+
+.avatar-icon-box {
+    font-size: 28px;
+    color: #8c939d;
+    width: 104px;
+    height: 104px;
+    line-height: 104px;
+    text-align: center;
+    background-color: rgba(0, 0, 0, 0.04);
+    ;
+
+    .avatar-icon,
+    .avatar-icon-text {
+        width: 104px;
+        position: absolute;
+        text-align: center;
+        left: 50%;
+        transform: translateX(-50%);
+    }
+
+    .avatar-icon-text {
+        font-size: 14px;
+        color: rgba(0, 0, 0, 0.65);
+        // margin-top: -25px;
+        line-height: 0;
+        bottom: 30px;
+    }
+
+    .avatar-icon {
+        color: #666666;
+        top: 28px;
+        font-size: 20px;
+    }
+}
+
+.avatar {
+    width: 104px;
+    height: 104px;
+    display: block;
+    padding: 8px;
+}
+
+// 徽标数
+.el-badge {
+    .el-badge__content {
+        line-height: 17px;
+
+        &.is-dot {
+            width: 10px;
+            height: 10px;
+        }
+    }
+}
+
+// 文字提示
+.el-tooltip__popper {
+    &.is-dark {
+        background: rgba(0, 0, 0, 0.75);
+        color: #fff;
+        box-shadow: 0px 3px 6px -4px rgba(0, 0, 0, 0.12);
+        border-radius: 2px;
+        // font-size: 14px;
+    }
+}
+
+// table
+.el-table {
+    tbody {
+        .el-table__row {
+            td {
+                border-bottom: 1px solid rgba($color: #000000, $alpha: 0.09);
+
+            }
+        }
+    }
+
+    &.selectionHover {
+        .el-table__body {
+            .el-table-column--selection {
+                .el-checkbox__input:not(.is-checked) {
+                    display: none;
+                }
+            }
+
+            tr:hover,
+            .current-row {
+                >td.el-table-column--selection {
+                    .el-checkbox__input {
+                        display: inline-block !important;
+                    }
+                }
+            }
+        }
+    }
+
+    .el-table__header-wrapper {
+        tr {
+            th {
+                padding: 4px 0 ;
+                background-color: rgba(0, 0, 0, 0.02);
+
+                &.el-table-column--selection {
+                    .cell {
+                        padding-left: 16px;
+                        padding-right: 8px;
+                    }
+                }
+                &.is-left {
+                    text-align: left;
+                }
+                &.is-right {
+                    text-align: right;
+                }
+                &.is-center {
+                    text-align: center;
+                }
+            }
+        }
+    }
+
+    .el-table__body-wrapper {
+        tr {
+            td {
+                padding: 10px 0;
+                &.is-left {
+                    text-align: left;
+                }
+                &.is-right {
+                    text-align: right;
+                }
+                &.is-center {
+                    text-align: center;
+                }
+            }
+            &.el-table__row {
+                &:hover {
+                    td {
+                        background-color: $hr-select-pink;
+                    }
+                }
+            }
+        }
+
+        .el-table-column--selection {
+            .cell {
+                padding-left: 16px;
+                padding-right: 8px;
+            }
+        }
+    }
+
+
+
+    // table 设置滚动条的宽度
+    .el-table__body-wrapper::-webkit-scrollbar {
+        width: 6px;
+    }
+
+    // table 设置滚动条的背景色和圆角
+    .el-table__body-wrapper::-webkit-scrollbar-thumb {
+        background-color: rgba(0, 0, 0, 0.09);
+        border-radius: 8px;
+    }
+}
+
+// 对话框
+.el-dialog {
+    $border: 1px solid rgba(0, 0, 0, 0.09);
+
+    .el-dialog__header {
+        padding: 0 24px;
+        // padding-bottom: 8px;
+        height: 56px;
+        line-height: 56px;
+
+        &.default {
+            border-bottom: $border
+        }
+
+        .el-dialog__headerbtn {
+            top: 20px;
+        }
+    }
+
+    .el-dialog__body {
+
+        line-height: 22px;
+    }
+
+    .el-dialog__footer {
+        padding: 10px 24px;
+
+        &.default {
+            border-top: $border;
+        }
+    }
+
+    &.default {
+        .el-dialog__header {
+            border-bottom: $border
+        }
+
+        .el-dialog__footer {
+            border-top: $border;
+        }
+    }
+}
+
+
+// 气泡卡片
+.el-popover {
+    min-width: 100px;
+    &.meeting-popover {
+        padding: 0 !important;
+    }
+}
+
+.el-popover--plain {
+    padding: 8px;
+    $border: 1px solid rgba(0, 0, 0, 0.06);
+
+    .el-popover__title {
+        height: 32px;
+        line-height: 32px;
+        margin-bottom: 0;
+        border-bottom: $border;
+        margin-bottom: 5px;
+    }
+}
+
+// Alert 警告
+.el-alert {
+    border-radius: 6px;
+    padding: 7px;
+    font-size: 14px;
+
+    &.el-alert--warning.is-light {
+        background: #fffbe6;
+        border: 1px solid #ffe58f;
+
+        &:not(.big) {
+            .el-alert__icon {
+                width: 16px;
+                height: 16px;
+                font-size: 16px;
+            }
+        }
+    }
+
+    &:not(.big) {
+        .el-alert__description {
+            margin: 0
+        }
+    }
+
+    &.big {
+        .el-alert__icon {
+            width: 24px;
+            height: 24px;
+            font-size: 24px;
+        }
+
+        .el-alert__title {
+            font-size: 16px;
+            color: rgba(0, 0, 0, 0.85);
+        }
+    }
+
+    .el-alert__description {
+        color: rgba(0, 0, 0, 0.65);
+    }
+
+    .el-alert__icon {
+        align-self: flex-start;
+    }
+
+    .el-alert__content .el-alert__description,
+    .el-alert__title {
+        color: rgba(0, 0, 0, 0.65);
+    }
+}
+
+// 抽屉
+.el-drawer {
+    .el-drawer__header {
+        margin-bottom: 0;
+        padding: 16px 24px;
+        font-size: 16px;
+        color: rgba(0, 0, 0, 0.85);
+        border-bottom: 1px solid rgba(0, 0, 0, 0.06);
+    }
+
+    .el-drawer__body {
+        position: relative;
+
+        .el-drawer-content {
+            padding: 24px;
+        }
+
+        .el-drawer-content {
+            height: 100%;
+        }
+
+        .el-drawer__foot {
+            width: 100%;
+            position: absolute;
+            bottom: 0;
+            height: 52px;
+            // padding: 0 24px;
+            border-top: 1px solid rgba(0, 0, 0, 0.06);
+
+            .foot-btns {
+                position: absolute;
+                right: 32px;
+                top: 10px;
+            }
+        }
+    }
+
+    &.showFoot {
+        .el-drawer__body {
+            padding-bottom: 52px;
+        }
+    }
+}
+
+.el-drawer__wrapper {
+    -webkit-app-region: no-drag;
+}
+
+// message
+.el-message {
+    box-shadow: 0 2px 4px rgba(0, 0, 0, .12);
+    border: none;
+    background-color: #fff;
+
+    .el-message__content {
+        color: rgba(0, 0, 0, 0.65);
+    }
+}
+
+// 表单
+.el-form {
+    .el-form-item {
+        .el-form-item__content {
+            .el-input {
+                .el-input-group__prepend {
+                    background-color: #fff;
+                }
+            }
+        }
+
+        .el-range-editor.el-input__inner {
+            padding: 3px 16px;
+        }
+    }
+
+    &.el-form--inline {
+        .el-form-item {
+            margin-right: 23px;
+
+            .el-form-item__label {
+                padding: 0;
+            }
+        }
+    }
+}
+
+.v-modal {
+    opacity: 0.15 !important;
+    z-index: 1777;
+}
+