UNPKG

loit-web-component-gx

Version:

广西时代凌宇前端组件库

1,214 lines (1,019 loc) 27 kB
.el-fade-in-enter, .el-fade-in-leave-active, .el-fade-in-linear-enter, .el-fade-in-linear-leave, .el-fade-in-linear-leave-active, .fade-in-linear-enter, .fade-in-linear-leave, .fade-in-linear-leave-active { opacity: 0 } .fade-in-linear-enter-active, .fade-in-linear-leave-active { -webkit-transition: opacity .2s linear; transition: opacity .2s linear } .el-fade-in-linear-enter-active, .el-fade-in-linear-leave-active { -webkit-transition: opacity .2s linear; transition: opacity .2s linear } .el-fade-in-enter-active, .el-fade-in-leave-active { -webkit-transition: all .3s cubic-bezier(.55, 0, .1, 1); transition: all .3s cubic-bezier(.55, 0, .1, 1) } .el-zoom-in-center-enter-active, .el-zoom-in-center-leave-active { -webkit-transition: all .3s cubic-bezier(.55, 0, .1, 1); transition: all .3s cubic-bezier(.55, 0, .1, 1) } .el-zoom-in-center-enter, .el-zoom-in-center-leave-active { opacity: 0; -webkit-transform: scaleX(0); transform: scaleX(0) } .el-zoom-in-top-enter-active, .el-zoom-in-top-leave-active { opacity: 1; -webkit-transform: scaleY(1); transform: scaleY(1); -webkit-transition: opacity .3s cubic-bezier(.23, 1, .32, 1), -webkit-transform .3s cubic-bezier(.23, 1, .32, 1); transition: opacity .3s cubic-bezier(.23, 1, .32, 1), -webkit-transform .3s cubic-bezier(.23, 1, .32, 1); transition: transform .3s cubic-bezier(.23, 1, .32, 1), opacity .3s cubic-bezier(.23, 1, .32, 1); transition: transform .3s cubic-bezier(.23, 1, .32, 1), opacity .3s cubic-bezier(.23, 1, .32, 1), -webkit-transform .3s cubic-bezier(.23, 1, .32, 1); -webkit-transform-origin: center top; transform-origin: center top } .el-zoom-in-top-enter, .el-zoom-in-top-leave-active { opacity: 0; -webkit-transform: scaleY(0); transform: scaleY(0) } .el-zoom-in-bottom-enter-active, .el-zoom-in-bottom-leave-active { opacity: 1; -webkit-transform: scaleY(1); transform: scaleY(1); -webkit-transition: opacity .3s cubic-bezier(.23, 1, .32, 1), -webkit-transform .3s cubic-bezier(.23, 1, .32, 1); transition: opacity .3s cubic-bezier(.23, 1, .32, 1), -webkit-transform .3s cubic-bezier(.23, 1, .32, 1); transition: transform .3s cubic-bezier(.23, 1, .32, 1), opacity .3s cubic-bezier(.23, 1, .32, 1); transition: transform .3s cubic-bezier(.23, 1, .32, 1), opacity .3s cubic-bezier(.23, 1, .32, 1), -webkit-transform .3s cubic-bezier(.23, 1, .32, 1); -webkit-transform-origin: center bottom; transform-origin: center bottom } .el-zoom-in-bottom-enter, .el-zoom-in-bottom-leave-active { opacity: 0; -webkit-transform: scaleY(0); transform: scaleY(0) } .el-zoom-in-left-enter-active, .el-zoom-in-left-leave-active { opacity: 1; -webkit-transform: scale(1, 1); transform: scale(1, 1); -webkit-transition: opacity .3s cubic-bezier(.23, 1, .32, 1), -webkit-transform .3s cubic-bezier(.23, 1, .32, 1); transition: opacity .3s cubic-bezier(.23, 1, .32, 1), -webkit-transform .3s cubic-bezier(.23, 1, .32, 1); transition: transform .3s cubic-bezier(.23, 1, .32, 1), opacity .3s cubic-bezier(.23, 1, .32, 1); transition: transform .3s cubic-bezier(.23, 1, .32, 1), opacity .3s cubic-bezier(.23, 1, .32, 1), -webkit-transform .3s cubic-bezier(.23, 1, .32, 1); -webkit-transform-origin: top left; transform-origin: top left } .el-zoom-in-left-enter, .el-zoom-in-left-leave-active { opacity: 0; -webkit-transform: scale(.45, .45); transform: scale(.45, .45) } .collapse-transition { -webkit-transition: .3s height ease-in-out, .3s padding-top ease-in-out, .3s padding-bottom ease-in-out; transition: .3s height ease-in-out, .3s padding-top ease-in-out, .3s padding-bottom ease-in-out } .horizontal-collapse-transition { -webkit-transition: .3s width ease-in-out, .3s padding-left ease-in-out, .3s padding-right ease-in-out; transition: .3s width ease-in-out, .3s padding-left ease-in-out, .3s padding-right ease-in-out } .el-list-enter-active, .el-list-leave-active { -webkit-transition: all 1s; transition: all 1s } .el-list-enter, .el-list-leave-active { opacity: 0; -webkit-transform: translateY(-0.3rem); transform: translateY(-0.3rem) } .el-opacity-transition { -webkit-transition: opacity .3s cubic-bezier(.55, 0, .1, 1); transition: opacity .3s cubic-bezier(.55, 0, .1, 1) } .el-date-editor { position: relative; display: inline-block; text-align: left } .el-date-editor.el-input, .el-date-editor.el-input__inner { width: 2.2rem } .miniInput .el-date-editor.el-input, .miniInput .el-date-editor.el-input__inner { width: 100%; } .mini .el-date-editor--daterange.el-input, .el-date-editor--daterange.el-input__inner, .el-date-editor--timerange.el-input, .el-date-editor--timerange.el-input__inner { width: 1.9rem } /* .region-distribution .el-date-editor--timerange.el-input__inner { width: 2rem!important; } */ .el-date-editor--datetimerange.el-input, .el-date-editor--datetimerange.el-input__inner { width: 4rem } .el-date-editor--dates .el-input__inner { text-overflow: ellipsis; white-space: nowrap } .el-date-editor .el-icon-circle-close { cursor: pointer } .el-date-editor .el-range__icon { font-size: 0.14rem; margin-left: -0.05rem; color: #c0c4cc; float: left; line-height: 0.32rem } .el-date-editor .el-range-input, .el-date-editor .el-range-separator { height: 100%; margin: 0; text-align: center; display: inline-block; font-size: 0.14rem } .el-date-editor .el-range-input { -webkit-appearance: none; -moz-appearance: none; appearance: none; border: none; outline: 0; padding: 0; width: 39%; color: #606266 } .region-distribution .el-date-editor .el-range-input { width: 33%; } .el-date-editor .el-range-input::-webkit-input-placeholder { color: #c0c4cc } .el-date-editor .el-range-input:-ms-input-placeholder { color: #c0c4cc } .el-date-editor .el-range-input::placeholder { color: #c0c4cc } .el-date-editor .el-range-separator { padding: 0 0.05rem; line-height: 0.32rem; width: 5%; color: #303133 } .high-incidence .el-date-editor .el-range-separator, .region-distribution .el-date-editor .el-range-separator { width: 14%; } .el-date-editor .el-range__close-icon { font-size: 0.14rem; color: #c0c4cc; width: 0.25rem; display: inline-block; float: right; line-height: 0.32rem } .el-range-editor.el-input__inner { display: -webkit-inline-box; display: -ms-inline-flexbox; display: inline-flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; padding: 0.03rem 0.1rem } .region-distribution .el-range-editor.el-input__inner { padding: 0.03rem 0.05rem; } .el-range-editor .el-range-input { line-height: 1 } .el-range-editor.is-active, .el-range-editor.is-active:hover { border-color: #2153c0 } .el-range-editor--medium.el-input__inner { height: 0.36rem } .el-range-editor--medium .el-range-separator { line-height: 0.28rem; font-size: 0.14rem } .el-range-editor--medium .el-range-input { font-size: 0.14rem } .el-range-editor--medium .el-range__close-icon, .el-range-editor--medium .el-range__icon { line-height: 0.28rem } .el-range-editor--small.el-input__inner { height: 0.32rem } .el-range-editor--small .el-range-separator { line-height: 0.24rem; font-size: 0.13rem } .el-range-editor--small .el-range-input { font-size: 0.13rem } .el-range-editor--small .el-range__close-icon, .el-range-editor--small .el-range__icon { line-height: 0.24rem } .el-range-editor--mini.el-input__inner { height: 0.28rem } .el-range-editor--mini .el-range-separator { line-height: 0.2rem; font-size: 0.12rem } .el-range-editor--mini .el-range-input { font-size: 0.12rem } .el-range-editor--mini .el-range__close-icon, .el-range-editor--mini .el-range__icon { line-height: 0.2rem } .el-range-editor.is-disabled { background-color: #f5f7fa; border-color: #e4e7ed; color: #c0c4cc; cursor: not-allowed } .el-range-editor.is-disabled:focus, .el-range-editor.is-disabled:hover { border-color: #e4e7ed } .el-range-editor.is-disabled input { background-color: #f5f7fa; color: #c0c4cc; cursor: not-allowed } .el-range-editor.is-disabled input::-webkit-input-placeholder { color: #c0c4cc } .el-range-editor.is-disabled input:-ms-input-placeholder { color: #c0c4cc } .el-range-editor.is-disabled input::placeholder { color: #c0c4cc } .el-range-editor.is-disabled .el-range-separator { color: #c0c4cc } .el-picker-panel { color: #606266; border: 1px solid #e4e7ed; -webkit-box-shadow: 0 0.02rem 0.12rem 0 rgba(0, 0, 0, .1); box-shadow: 0 0.02rem 0.12rem 0 rgba(0, 0, 0, .1); background: #fff; border-radius: 0.04rem; line-height: 0.3rem; margin: 0.05rem 0 } .el-picker-panel__body-wrapper::after, .el-picker-panel__body::after { content: ""; display: table; clear: both } .el-picker-panel__content { position: relative; margin: 0.15rem } .el-picker-panel__footer { border-top: 0.01rem solid #e4e4e4; padding: 0.04rem; text-align: right; background-color: #fff; position: relative; font-size: 0 } .el-picker-panel__shortcut { display: block; width: 100%; border: 0; background-color: transparent; line-height: 0.28rem; font-size: 0.14rem; color: #606266; padding-left: 0.12rem; text-align: left; outline: 0; cursor: pointer } .el-picker-panel__shortcut:hover { color: #2153c0 } .el-picker-panel__shortcut.active { background-color: #e6f1fe; color: #2153c0 } .el-picker-panel__btn { border: 1px solid #dcdcdc; color: #333; line-height: 0.24rem; border-radius: 0.02rem; padding: 0 0.2rem; cursor: pointer; background-color: transparent; outline: 0; font-size: 0.12rem } .el-picker-panel__btn[disabled] { color: #ccc; cursor: not-allowed } .el-picker-panel__icon-btn { font-size: 0.12rem; color: #303133; border: 0; background: 0 0; cursor: pointer; outline: 0; margin-top: 0.08rem } .el-picker-panel__icon-btn:hover { color: #2153c0 } .el-picker-panel__icon-btn.is-disabled { color: #bbb } .el-picker-panel__icon-btn.is-disabled:hover { cursor: not-allowed } .el-picker-panel__link-btn { vertical-align: middle } .el-picker-panel [slot=sidebar], .el-picker-panel__sidebar { position: absolute; top: 0; bottom: 0; width: 1.1rem; border-right: 0.01rem solid #e4e4e4; -webkit-box-sizing: border-box; box-sizing: border-box; padding-top: 0.06rem; background-color: #fff; overflow: auto } .el-picker-panel [slot=sidebar]+.el-picker-panel__body, .el-picker-panel__sidebar+.el-picker-panel__body { margin-left: 1.1rem } .el-time-spinner.has-seconds .el-time-spinner__wrapper { width: 33.3% } .el-time-spinner__wrapper { max-height: 1.9rem; overflow: auto; display: inline-block; width: 50%; vertical-align: top; position: relative } .el-time-spinner__wrapper .el-scrollbar__wrap:not(.el-scrollbar__wrap--hidden-default) { padding-bottom: 0.15rem } .el-time-spinner__input.el-input .el-input__inner, .el-time-spinner__list { padding: 0; text-align: center } .el-time-spinner__wrapper.is-arrow { -webkit-box-sizing: border-box; box-sizing: border-box; text-align: center; overflow: hidden } .el-time-spinner__wrapper.is-arrow .el-time-spinner__list { -webkit-transform: translateY(-0.32rem); transform: translateY(-0.32rem) } .el-time-spinner__wrapper.is-arrow .el-time-spinner__item:hover:not(.disabled):not(.active) { background: #fff; cursor: default } .el-time-spinner__arrow { font-size: 0.12rem; color: #909399; position: absolute; left: 0; width: 100%; z-index: 1; text-align: center; height: 0.3rem; line-height: 0.3rem; cursor: pointer } .el-time-spinner__arrow:hover { color: #2153c0 } .el-time-spinner__arrow.el-icon-arrow-up { top: 0.1rem } .el-time-spinner__arrow.el-icon-arrow-down { bottom: 0.1rem } .el-time-spinner__input.el-input { width: 70% } .el-time-spinner__list { margin: 0; list-style: none } .el-time-spinner__list::after, .el-time-spinner__list::before { content: ''; display: block; width: 100%; height: 0.8rem } .el-time-spinner__item { height: 0.32rem; line-height: 0.32rem; font-size: 0.12rem; color: #606266 } .el-time-spinner__item:hover:not(.disabled):not(.active) { background: #f5f7fa; cursor: pointer } .el-time-spinner__item.active:not(.disabled) { color: #303133; font-weight: 700 } .el-time-spinner__item.disabled { color: #c0c4cc; cursor: not-allowed } .el-time-panel { margin: 0.05rem 0; border: 1px solid #e4e7ed; background-color: #fff; -webkit-box-shadow: 0 0.02rem 0.12rem 0 rgba(0, 0, 0, .1); box-shadow: 0 0.02rem 0.12rem 0 rgba(0, 0, 0, .1); border-radius: 0.02rem; position: absolute; width: 1.8rem; left: 0; z-index: 1000; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none } .el-time-panel__content { font-size: 0; position: relative; overflow: hidden } .el-time-panel__content::after, .el-time-panel__content::before { content: ""; top: 50%; position: absolute; margin-top: -0.15rem; height: 0.32rem; z-index: -1; left: 0; right: 0; -webkit-box-sizing: border-box; box-sizing: border-box; padding-top: 0.06rem; text-align: left; border-top: 0.01rem solid #e4e7ed; border-bottom: 0.01rem solid #e4e7ed } .el-time-panel__content::after { left: 50%; margin-left: 12%; margin-right: 12% } .el-time-panel__content::before { padding-left: 50%; margin-right: 12%; margin-left: 12% } .el-time-panel__content.has-seconds::after { left: calc(100% / 3 * 2) } .el-time-panel__content.has-seconds::before { padding-left: calc(100% / 3) } .el-time-panel__footer { border-top: 0.01rem solid #e4e4e4; padding: 0.04rem; height: 0.36rem; line-height: 0.25rem; text-align: right; -webkit-box-sizing: border-box; box-sizing: border-box } .el-time-panel__btn { border: none; line-height: 0.28rem; padding: 0 0.05rem; margin: 0 0.05rem; cursor: pointer; background-color: transparent; outline: 0; font-size: 0.12rem; color: #303133 } .el-time-panel__btn.confirm { font-weight: 800; color: #2153c0 } .el-time-range-picker { width: 3.54rem; overflow: visible } .el-time-range-picker__content { position: relative; text-align: center; padding: 0.1rem } .el-time-range-picker__cell { -webkit-box-sizing: border-box; box-sizing: border-box; margin: 0; padding: 0.04rem 0.07rem 0.07rem; width: 50%; display: inline-block } .el-time-range-picker__header { margin-bottom: 0.05rem; text-align: center; font-size: 0.14rem } .el-time-range-picker__body { border-radius: 0.02rem; border: 1px solid #e4e7ed } .el-textarea { display: inline-block; width: 100%; vertical-align: bottom; font-size: 0.14rem } .el-textarea__inner { display: block; resize: vertical; padding: 0.05rem 0.15rem; line-height: 1.5; -webkit-box-sizing: border-box; box-sizing: border-box; width: 100%; font-size: inherit; color: #606266; background-color: #fff; background-image: none; border: 1px solid #dcdfe6; border-radius: 0.04rem; -webkit-transition: border-color .2s cubic-bezier(.645, .045, .355, 1); transition: border-color .2s cubic-bezier(.645, .045, .355, 1) } .el-textarea__inner::-webkit-input-placeholder { color: #c0c4cc } .el-textarea__inner:-ms-input-placeholder { color: #c0c4cc } .el-textarea__inner::placeholder { color: #c0c4cc } .el-textarea__inner:hover { border-color: #c0c4cc } .el-textarea__inner:focus { outline: 0; border-color: #2153c0 } .el-textarea.is-disabled .el-textarea__inner { background-color: #f5f7fa; border-color: #e4e7ed; color: #c0c4cc; cursor: not-allowed } .el-textarea.is-disabled .el-textarea__inner::-webkit-input-placeholder { color: #c0c4cc } .el-textarea.is-disabled .el-textarea__inner:-ms-input-placeholder { color: #c0c4cc } .el-textarea.is-disabled .el-textarea__inner::placeholder { color: #c0c4cc } .el-input { position: relative; font-size: 0.14rem; display: inline-block; width: 100% } .el-input::-webkit-scrollbar { z-index: 11; width: 0.06rem } .el-input::-webkit-scrollbar:horizontal { height: 0.06rem } .el-input::-webkit-scrollbar-thumb { border-radius: 0.05rem; width: 0.06rem; background: #b4bccc } .el-input::-webkit-scrollbar-corner { background: #fff } .el-input::-webkit-scrollbar-track { background: #fff } .el-input::-webkit-scrollbar-track-piece { background: #fff; width: 0.06rem } .el-input .el-input__clear { color: #c0c4cc; font-size: 0.14rem; line-height: 0.16rem; cursor: pointer; -webkit-transition: color .2s cubic-bezier(.645, .045, .355, 1); transition: color .2s cubic-bezier(.645, .045, .355, 1) } .el-input .el-input__clear:hover { color: #909399 } .el-input__inner { -webkit-appearance: none; background-color: #fff; background-image: none; border-radius: 0.04rem; border: 1px solid #dcdfe6; -webkit-box-sizing: border-box; box-sizing: border-box; color: #606266; display: inline-block; font-size: inherit; height: 0.4rem; line-height: 0.4rem; outline: 0; padding: 0 0.15rem; -webkit-transition: border-color .2s cubic-bezier(.645, .045, .355, 1); transition: border-color .2s cubic-bezier(.645, .045, .355, 1); width: 100% } .el-input__prefix, .el-input__suffix { position: absolute; top: 0; -webkit-transition: all .3s; text-align: center; height: 100%; color: #c0c4cc } .el-input__inner::-webkit-input-placeholder { color: #c0c4cc } .el-input__inner:-ms-input-placeholder { color: #c0c4cc } .el-input__inner::placeholder { color: #c0c4cc } .el-input__inner:hover { border-color: #c0c4cc } .el-input.is-active .el-input__inner, .el-input__inner:focus { border-color: #2153c0; outline: 0 } .el-input__suffix { right: 0.05rem; transition: all .3s; pointer-events: none } .el-input__suffix-inner { pointer-events: all } .el-input__prefix { left: 0.05rem; transition: all .3s } .el-input__icon { height: 100%; width: 0.25rem; text-align: center; -webkit-transition: all .3s; transition: all .3s; line-height: 0.4rem } .el-input__icon:after { content: ''; height: 100%; width: 0; display: inline-block; vertical-align: middle } .el-input__validateIcon { pointer-events: none } .el-input.is-disabled .el-input__inner { background-color: #f5f7fa; border-color: #e4e7ed; color: #c0c4cc; cursor: not-allowed } .el-input.is-disabled .el-input__inner::-webkit-input-placeholder { color: #c0c4cc } .el-input.is-disabled .el-input__inner:-ms-input-placeholder { color: #c0c4cc } .el-input.is-disabled .el-input__inner::placeholder { color: #c0c4cc } .el-input.is-disabled .el-input__icon { cursor: not-allowed } .el-input--suffix .el-input__inner { padding-right: 0.3rem } .el-input--prefix .el-input__inner { padding-left: 0.3rem } .el-input--medium { font-size: 0.14rem } .el-input--medium .el-input__inner { height: 0.36rem; line-height: 0.36rem } .el-input--medium .el-input__icon { line-height: 0.36rem } .el-input--small { font-size: 0.13rem } .el-input--small .el-input__inner { height: 0.32rem; line-height: 0.32rem } .el-input--small .el-input__icon { line-height: 0.32rem } .el-input--mini { font-size: 0.12rem } .el-input--mini .el-input__inner { height: 0.28rem; line-height: 0.28rem } .el-input--mini .el-input__icon { line-height: 0.28rem } .el-input-group { line-height: normal; display: inline-table; width: 100%; border-collapse: separate } .el-input-group>.el-input__inner { vertical-align: middle; display: table-cell } .el-input-group__append, .el-input-group__prepend { background-color: #f5f7fa; color: #909399; vertical-align: middle; display: table-cell; position: relative; border: 1px solid #dcdfe6; border-radius: 0.04rem; padding: 0 0.2rem; width: 0.01rem; white-space: nowrap } .el-input-group--prepend .el-input__inner, .el-input-group__append { border-top-left-radius: 0; border-bottom-left-radius: 0 } .el-input-group--append .el-input__inner, .el-input-group__prepend { border-top-right-radius: 0; border-bottom-right-radius: 0 } .el-input-group__append:focus, .el-input-group__prepend:focus { outline: 0 } .el-input-group__append .el-button, .el-input-group__append .el-select, .el-input-group__prepend .el-button, .el-input-group__prepend .el-select { display: inline-block; margin: -0.1rem -0.2rem } .el-input-group__append button.el-button, .el-input-group__append div.el-select .el-input__inner, .el-input-group__append div.el-select:hover .el-input__inner, .el-input-group__prepend button.el-button, .el-input-group__prepend div.el-select .el-input__inner, .el-input-group__prepend div.el-select:hover .el-input__inner { border-color: transparent; background-color: transparent; color: inherit; border-top: 0; border-bottom: 0 } .el-input-group__append .el-button, .el-input-group__append .el-input, .el-input-group__prepend .el-button, .el-input-group__prepend .el-input { font-size: inherit } .el-input-group__prepend { border-right: 0 } .el-input-group__append { border-left: 0 } .el-input-group--append .el-select .el-input.is-focus .el-input__inner, .el-input-group--prepend .el-select .el-input.is-focus .el-input__inner { border-color: transparent } .el-input__inner::-ms-clear { display: none; width: 0; height: 0 } .el-scrollbar { overflow: hidden; position: relative } .el-scrollbar:active>.el-scrollbar__bar, .el-scrollbar:focus>.el-scrollbar__bar, .el-scrollbar:hover>.el-scrollbar__bar { opacity: 1; -webkit-transition: opacity 340ms ease-out; transition: opacity 340ms ease-out } .el-scrollbar__wrap { overflow: scroll; height: 100% } .el-scrollbar__wrap--hidden-default::-webkit-scrollbar { width: 0; height: 0 } .el-scrollbar__thumb { position: relative; display: block; width: 0; height: 0; cursor: pointer; border-radius: inherit; background-color: rgba(144, 147, 153, .3); -webkit-transition: .3s background-color; transition: .3s background-color } .el-scrollbar__thumb:hover { background-color: rgba(144, 147, 153, .5) } .el-scrollbar__bar { position: absolute; right: 0.02rem; bottom: 0.02rem; z-index: 1; border-radius: 0.04rem; opacity: 0; -webkit-transition: opacity 120ms ease-out; transition: opacity 120ms ease-out } .el-scrollbar__bar.is-vertical { width: 0.06rem; top: 0.02rem } .el-scrollbar__bar.is-vertical>div { width: 100% } .el-scrollbar__bar.is-horizontal { height: 0.06rem; left: 0.02rem } .el-scrollbar__bar.is-horizontal>div { height: 100% } .el-popper .popper__arrow, .el-popper .popper__arrow::after { position: absolute; display: block; width: 0; height: 0; border-color: transparent; border-style: solid } .el-popper .popper__arrow { border-width: 0.06rem; -webkit-filter: drop-shadow(0 0.02rem 0.12rem rgba(0, 0, 0, .03)); filter: drop-shadow(0 0.02rem 0.12rem rgba(0, 0, 0, .03)) } .el-popper .popper__arrow::after { content: " "; border-width: 0.06rem } .el-popper[x-placement^=top] { margin-bottom: 0.12rem } .el-popper[x-placement^=top] .popper__arrow { bottom: -0.06rem; left: 50%; margin-right: 0.03rem; border-top-color: #ebeef5; border-bottom-width: 0 } .el-popper[x-placement^=top] .popper__arrow::after { bottom: 0.01rem; margin-left: -0.06rem; border-top-color: #fff; border-bottom-width: 0 } .el-popper[x-placement^=bottom] { margin-top: 0.12rem } .el-popper[x-placement^=bottom] .popper__arrow { top: -0.06rem; left: 50%; margin-right: 0.03rem; border-top-width: 0; border-bottom-color: #ebeef5 } .el-popper[x-placement^=bottom] .popper__arrow::after { top: 0.01rem; margin-left: -0.06rem; border-top-width: 0; border-bottom-color: #fff } .el-popper[x-placement^=right] { margin-left: 0.12rem } .el-popper[x-placement^=right] .popper__arrow { top: 50%; left: -0.06rem; margin-bottom: 0.03rem; border-right-color: #ebeef5; border-left-width: 0 } .el-popper[x-placement^=right] .popper__arrow::after { bottom: -0.06rem; left: 0.01rem; border-right-color: #fff; border-left-width: 0 } .el-popper[x-placement^=left] { margin-right: 0.12rem } .el-popper[x-placement^=left] .popper__arrow { top: 50%; right: -0.06rem; margin-bottom: 0.03rem; border-right-width: 0; border-left-color: #ebeef5 } .el-popper[x-placement^=left] .popper__arrow::after { right: 0.01rem; bottom: -0.06rem; margin-left: -0.06rem; border-right-width: 0; border-left-color: #fff }