UNPKG

@jiaozhiye/qm-design-vue

Version:

A Component Library for Vue3.0

1,739 lines (1,619 loc) 524 kB
@charset "UTF-8"; /* * @Author: 焦质晔 * @Date: 2021-02-09 15:40:46 * @Last Modified by: 焦质晔 * @Last Modified time: 2024-11-05 19:28:38 */ /* http://meyerweb.com/eric/tools/css/reset/ v2.0 | 20110126 License: none (public domain) */ html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video { margin: 0; padding: 0; } /* HTML5 display-role reset for older browsers */ article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section { display: block; } ol, ul { list-style: none; } blockquote, q { quotes: none; } blockquote:before, blockquote:after, q:before, q:after { content: ""; content: none; } table { border-collapse: collapse; border-spacing: 0; } .svgicon { display: inline-block; color: inherit; font-style: normal; line-height: 0; text-align: center; text-transform: none; vertical-align: -0.125em; text-rendering: optimizeLegibility; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } /* * @Author: 焦质晔 * @Date: 2022-04-12 10:36:49 * @Last Modified by: 焦质晔 * @Last Modified time: 2024-11-05 19:32:54 */ /* * @Author: 焦质晔 * @Date: 2020-05-23 13:15:51 * @Last Modified by: 焦质晔 * @Last Modified time: 2024-11-05 18:43:28 */ :root { --qm-primary-color: #1890ff; } /* ElementPlus */ /* * @Author: 焦质晔 * @Date: 2022-04-12 10:36:49 * @Last Modified by: 焦质晔 * @Last Modified time: 2024-11-05 19:32:54 */ /* * @Author: 焦质晔 * @Date: 2021-02-09 14:11:02 * @Last Modified by: 焦质晔 * @Last Modified time: 2024-11-05 18:45:01 */ /* Element Chalk Variables */ /* * @Author: 焦质晔 * @Date: 2021-02-09 14:11:02 * @Last Modified by: 焦质晔 * @Last Modified time: 2024-11-05 18:45:01 */ /* Element Chalk Variables */ /* * @Author: 焦质晔 * @Date: 2021-02-09 14:11:02 * @Last Modified by: 焦质晔 * @Last Modified time: 2024-11-05 18:45:01 */ /* Element Chalk Variables */ /* * @Author: 焦质晔 * @Date: 2021-02-09 14:11:02 * @Last Modified by: 焦质晔 * @Last Modified time: 2024-11-05 18:45:01 */ /* Element Chalk Variables */ :root { --el-color-white: #ffffff; --el-color-black: #000000; --el-color-primary-rgb: 24, 144, 255; --el-color-success-rgb: 82, 196, 26; --el-color-warning-rgb: 250, 173, 20; --el-color-danger-rgb: 255, 77, 79; --el-color-error-rgb: 255, 77, 79; --el-color-info-rgb: 0, 0, 0; --el-font-size-extra-large: 18px; --el-font-size-large: 16px; --el-font-size-medium: 14px; --el-font-size-base: 14px; --el-font-size-small: 14px; --el-font-size-extra-small: 12px; --el-font-family: 'Helvetica Neue', Helvetica, 'PingFang SC', 'Hiragino Sans GB', 'Microsoft YaHei', '微软雅黑', Arial, sans-serif; --el-font-weight-primary: 500; --el-font-line-height-primary: 24px; --el-index-normal: 1; --el-index-top: 1000; --el-index-popper: 2000; --el-border-radius-base: 2px; --el-border-radius-small: 2px; --el-border-radius-round: 20px; --el-border-radius-circle: 100%; --el-transition-duration: 0.3s; --el-transition-duration-fast: 0.2s; --el-transition-function-ease-in-out-bezier: cubic-bezier(0.645, 0.045, 0.355, 1); --el-transition-function-fast-bezier: cubic-bezier(0.23, 1, 0.32, 1); --el-transition-all: all var(--el-transition-duration) var(--el-transition-function-ease-in-out-bezier); --el-transition-fade: opacity var(--el-transition-duration) var(--el-transition-function-fast-bezier); --el-transition-md-fade: transform var(--el-transition-duration) var(--el-transition-function-fast-bezier), opacity var(--el-transition-duration) var(--el-transition-function-fast-bezier); --el-transition-fade-linear: opacity var(--el-transition-duration-fast) linear; --el-transition-border: border-color var(--el-transition-duration-fast) var(--el-transition-function-ease-in-out-bezier); --el-transition-box-shadow: box-shadow var(--el-transition-duration-fast) var(--el-transition-function-ease-in-out-bezier); --el-transition-color: color var(--el-transition-duration-fast) var(--el-transition-function-ease-in-out-bezier); --el-component-size-large: 40px; --el-component-size: 32px; --el-component-size-small: 24px; } :root { color-scheme: light; --el-color-primary: #1890ff; --el-color-primary-light-3: rgb(93, 177, 255); --el-color-primary-light-5: rgb(140, 200, 255); --el-color-primary-light-7: rgb(186, 222, 255); --el-color-primary-light-8: rgb(209, 233, 255); --el-color-primary-light-9: rgb(232, 244, 255); --el-color-primary-dark-2: rgb(19, 115, 204); --el-color-success: #52c41a; --el-color-success-light-3: rgb(134, 214, 95); --el-color-success-light-5: rgb(169, 226, 141); --el-color-success-light-7: rgb(203, 237, 186); --el-color-success-light-8: rgb(220, 243, 209); --el-color-success-light-9: rgb(238, 249, 232); --el-color-success-dark-2: rgb(66, 157, 21); --el-color-warning: #faad14; --el-color-warning-light-3: rgb(252, 198, 91); --el-color-warning-light-5: rgb(253, 214, 138); --el-color-warning-light-7: rgb(254, 230, 185); --el-color-warning-light-8: rgb(254, 239, 208); --el-color-warning-light-9: rgb(255, 247, 232); --el-color-warning-dark-2: rgb(200, 138, 16); --el-color-danger: #ff4d4f; --el-color-danger-light-3: rgb(255, 130, 132); --el-color-danger-light-5: rgb(255, 166, 167); --el-color-danger-light-7: rgb(255, 202, 202); --el-color-danger-light-8: rgb(255, 219, 220); --el-color-danger-light-9: rgb(255, 237, 237); --el-color-danger-dark-2: rgb(204, 62, 63); --el-color-error: #ff4d4f; --el-color-error-light-3: rgb(255, 130, 132); --el-color-error-light-5: rgb(255, 166, 167); --el-color-error-light-7: rgb(255, 202, 202); --el-color-error-light-8: rgb(255, 219, 220); --el-color-error-light-9: rgb(255, 237, 237); --el-color-error-dark-2: rgb(204, 62, 63); --el-color-info: rgba(0, 0, 0, 0.45); --el-color-info-light-3: rgba(152, 152, 152, 0.615); --el-color-info-light-5: rgba(198, 198, 198, 0.725); --el-color-info-light-7: rgba(227, 227, 227, 0.835); --el-color-info-light-8: rgba(238, 238, 238, 0.89); --el-color-info-light-9: rgba(247, 247, 247, 0.945); --el-color-info-dark-2: rgba(0, 0, 0, 0.56); --el-bg-color: #ffffff; --el-bg-color-page: #f2f3f5; --el-bg-color-overlay: #ffffff; --el-text-color-primary: rgba(0, 0, 0, 0.85); --el-text-color-regular: rgba(0, 0, 0, 0.85); --el-text-color-secondary: #808080; --el-text-color-placeholder: #afafaf; --el-text-color-disabled: #c0c4cc; --el-border-color: #dcdfe6; --el-border-color-light: #d9d9d9; --el-border-color-lighter: #e8e8e8; --el-border-color-extra-light: #f0f0f0; --el-border-color-dark: #d4d7de; --el-border-color-darker: #cdd0d6; --el-border-color-base: #d9d9d9; --el-fill-color: #f0f2f5; --el-fill-color-light: #f5f7fa; --el-fill-color-lighter: #fafafa; --el-fill-color-extra-light: #fafcff; --el-fill-color-dark: #ebedf0; --el-fill-color-darker: #e6e8eb; --el-fill-color-blank: #ffffff; --el-box-shadow: 0px 12px 32px 4px rgba(0, 0, 0, 0.04), 0px 8px 20px rgba(0, 0, 0, 0.08); --el-box-shadow-light: 0px 0px 12px rgba(0, 0, 0, 0.12); --el-box-shadow-lighter: 0px 0px 6px rgba(0, 0, 0, 0.12); --el-box-shadow-dark: 0px 16px 48px 16px rgba(0, 0, 0, 0.08), 0px 12px 32px rgba(0, 0, 0, 0.12), 0px 8px 16px -8px rgba(0, 0, 0, 0.16); --el-disabled-bg-color: var(--el-fill-color-light); --el-disabled-text-color: var(--el-text-color-placeholder); --el-disabled-border-color: var(--el-border-color-light); --el-overlay-color: rgba(0, 0, 0, 0.8); --el-overlay-color-light: rgba(0, 0, 0, 0.7); --el-overlay-color-lighter: rgba(0, 0, 0, 0.5); --el-mask-color: rgba(255, 255, 255, 0.9); --el-mask-color-extra-light: rgba(255, 255, 255, 0.3); --el-border-width: 1px; --el-border-style: solid; --el-border-color-hover: #1890ff; --el-border: var(--el-border-width) var(--el-border-style) var(--el-border-color); --el-svg-monochrome-grey: var(--el-border-color); } .fade-in-linear-enter-active, .fade-in-linear-leave-active { transition: var(--el-transition-fade-linear); } .fade-in-linear-enter-from, .fade-in-linear-leave-to { opacity: 0; } .el-fade-in-linear-enter-active, .el-fade-in-linear-leave-active { transition: var(--el-transition-fade-linear); } .el-fade-in-linear-enter-from, .el-fade-in-linear-leave-to { opacity: 0; } .el-fade-in-enter-active, .el-fade-in-leave-active { transition: all var(--el-transition-duration) cubic-bezier(0.55, 0, 0.1, 1); } .el-fade-in-enter-from, .el-fade-in-leave-active { opacity: 0; } .el-zoom-in-center-enter-active, .el-zoom-in-center-leave-active { transition: all var(--el-transition-duration) cubic-bezier(0.55, 0, 0.1, 1); } .el-zoom-in-center-enter-from, .el-zoom-in-center-leave-active { opacity: 0; transform: scaleX(0); } .el-zoom-in-top-enter-active, .el-zoom-in-top-leave-active { opacity: 1; transform: scaleY(1); transition: var(--el-transition-md-fade); transform-origin: center top; } .el-zoom-in-top-enter-active[data-popper-placement^=top], .el-zoom-in-top-leave-active[data-popper-placement^=top] { transform-origin: center bottom; } .el-zoom-in-top-enter-from, .el-zoom-in-top-leave-active { opacity: 0; transform: scaleY(0); } .el-zoom-in-bottom-enter-active, .el-zoom-in-bottom-leave-active { opacity: 1; transform: scaleY(1); transition: var(--el-transition-md-fade); transform-origin: center bottom; } .el-zoom-in-bottom-enter-from, .el-zoom-in-bottom-leave-active { opacity: 0; transform: scaleY(0); } .el-zoom-in-left-enter-active, .el-zoom-in-left-leave-active { opacity: 1; transform: scale(1, 1); transition: var(--el-transition-md-fade); transform-origin: top left; } .el-zoom-in-left-enter-from, .el-zoom-in-left-leave-active { opacity: 0; transform: scale(0.45, 0.45); } .collapse-transition { transition: var(--el-transition-duration) height ease-in-out, var(--el-transition-duration) padding-top ease-in-out, var(--el-transition-duration) padding-bottom ease-in-out; } .el-collapse-transition-leave-active, .el-collapse-transition-enter-active { transition: var(--el-transition-duration) max-height ease-in-out, var(--el-transition-duration) padding-top ease-in-out, var(--el-transition-duration) padding-bottom ease-in-out; } .horizontal-collapse-transition { transition: var(--el-transition-duration) width ease-in-out, var(--el-transition-duration) padding-left ease-in-out, var(--el-transition-duration) padding-right ease-in-out; } .el-list-enter-active, .el-list-leave-active { transition: all 1s; } .el-list-enter-from, .el-list-leave-to { opacity: 0; transform: translateY(-30px); } .el-list-leave-active { position: absolute !important; } .el-opacity-transition { transition: opacity var(--el-transition-duration) cubic-bezier(0.55, 0, 0.1, 1); } /* * @Author: 焦质晔 * @Date: 2021-02-09 14:11:02 * @Last Modified by: 焦质晔 * @Last Modified time: 2024-11-05 18:45:01 */ .el-icon--right { margin-left: 5px; } .el-icon--left { margin-right: 5px; } @-webkit-keyframes rotating { 0% { transform: rotateZ(0deg); } 100% { transform: rotateZ(360deg); } } @keyframes rotating { 0% { transform: rotateZ(0deg); } 100% { transform: rotateZ(360deg); } } .el-icon { --color: inherit; height: 1em; width: 1em; line-height: 1em; display: inline-flex; justify-content: center; align-items: center; position: relative; fill: currentColor; color: var(--color); font-size: inherit; } .el-icon.is-loading { -webkit-animation: rotating 2s linear infinite; animation: rotating 2s linear infinite; } .el-icon svg { height: 1em; width: 1em; } .el-affix--fixed { position: fixed; } /* * @Author: 焦质晔 * @Date: 2021-02-09 14:11:02 * @Last Modified by: 焦质晔 * @Last Modified time: 2024-11-05 18:45:01 */ .el-alert { --el-alert-padding: 8px 16px; --el-alert-border-radius-base: var(--el-border-radius-base); --el-alert-title-font-size: 14px; --el-alert-title-with-description-font-size: 16px; --el-alert-description-font-size: 14px; --el-alert-close-font-size: 16px; --el-alert-close-customed-font-size: 14px; --el-alert-icon-size: 16px; --el-alert-icon-large-size: 28px; width: 100%; padding: var(--el-alert-padding); margin: 0; box-sizing: border-box; border-radius: var(--el-alert-border-radius-base); position: relative; background-color: var(--el-color-white); overflow: hidden; opacity: 1; display: flex; align-items: center; transition: opacity var(--el-transition-duration-fast); } .el-alert.is-light .el-alert__close-btn { color: var(--el-text-color-placeholder); } .el-alert.is-dark .el-alert__close-btn { color: var(--el-color-white); } .el-alert.is-dark .el-alert__description { color: var(--el-color-white); } .el-alert.is-center { justify-content: center; } .el-alert--primary { --el-alert-bg-color: var(--el-color-primary-light-9); } .el-alert--primary.is-light { background-color: var(--el-alert-bg-color); color: var(--el-color-primary); } .el-alert--primary.is-light .el-alert__description { color: var(--el-color-primary); } .el-alert--primary.is-dark { background-color: var(--el-color-primary); color: var(--el-color-white); } .el-alert--success { --el-alert-bg-color: var(--el-color-success-light-9); } .el-alert--success.is-light { background-color: var(--el-alert-bg-color); color: var(--el-color-success); } .el-alert--success.is-light .el-alert__description { color: var(--el-color-success); } .el-alert--success.is-dark { background-color: var(--el-color-success); color: var(--el-color-white); } .el-alert--info { --el-alert-bg-color: var(--el-color-info-light-9); } .el-alert--info.is-light { background-color: var(--el-alert-bg-color); color: var(--el-color-info); } .el-alert--info.is-light .el-alert__description { color: var(--el-color-info); } .el-alert--info.is-dark { background-color: var(--el-color-info); color: var(--el-color-white); } .el-alert--warning { --el-alert-bg-color: var(--el-color-warning-light-9); } .el-alert--warning.is-light { background-color: var(--el-alert-bg-color); color: var(--el-color-warning); } .el-alert--warning.is-light .el-alert__description { color: var(--el-color-warning); } .el-alert--warning.is-dark { background-color: var(--el-color-warning); color: var(--el-color-white); } .el-alert--error { --el-alert-bg-color: var(--el-color-error-light-9); } .el-alert--error.is-light { background-color: var(--el-alert-bg-color); color: var(--el-color-error); } .el-alert--error.is-light .el-alert__description { color: var(--el-color-error); } .el-alert--error.is-dark { background-color: var(--el-color-error); color: var(--el-color-white); } .el-alert__content { display: flex; flex-direction: column; gap: 4px; } .el-alert .el-alert__icon { font-size: var(--el-alert-icon-size); width: var(--el-alert-icon-size); margin-right: 8px; } .el-alert .el-alert__icon.is-big { font-size: var(--el-alert-icon-large-size); width: var(--el-alert-icon-large-size); margin-right: 12px; } .el-alert__title { font-size: var(--el-alert-title-font-size); line-height: 24px; } .el-alert__title.with-description { font-size: var(--el-alert-title-with-description-font-size); } .el-alert .el-alert__description { font-size: var(--el-alert-description-font-size); margin: 0; } .el-alert .el-alert__close-btn { font-size: var(--el-alert-close-font-size); opacity: 1; position: absolute; top: 12px; right: 16px; cursor: pointer; } .el-alert .el-alert__close-btn.is-customed { font-style: normal; font-size: var(--el-alert-close-customed-font-size); line-height: 24px; top: 8px; } .el-alert-fade-enter-from, .el-alert-fade-leave-active { opacity: 0; } .el-aside { overflow: auto; box-sizing: border-box; flex-shrink: 0; width: var(--el-aside-width, 300px); } /* * @Author: 焦质晔 * @Date: 2021-02-09 14:11:02 * @Last Modified by: 焦质晔 * @Last Modified time: 2024-11-05 18:45:01 */ .el-autocomplete { --el-input-text-color: var(--el-text-color-regular); --el-input-border: var(--el-border); --el-input-hover-border: #1890ff; --el-input-focus-border: var(--el-color-primary); --el-input-transparent-border: 0 0 0 1px transparent inset; --el-input-border-color: var(--el-border-color); --el-input-border-radius: var(--el-border-radius-base); --el-input-bg-color: var(--el-fill-color-blank); --el-input-icon-color: var(--el-text-color-placeholder); --el-input-placeholder-color: var(--el-text-color-placeholder); --el-input-hover-border-color: var(--el-border-color-hover); --el-input-clear-hover-color: var(--el-text-color-secondary); --el-input-focus-border-color: var(--el-color-primary); --el-input-width: 100%; } .el-autocomplete { width: var(--el-input-width); position: relative; display: inline-block; } .el-autocomplete__popper.el-popper { background: var(--el-bg-color-overlay); border: 1px solid var(--el-border-color-light); box-shadow: var(--el-box-shadow-light); } .el-autocomplete__popper.el-popper .el-popper__arrow::before { border: 1px solid var(--el-border-color-light); } .el-autocomplete__popper.el-popper[data-popper-placement^=top] .el-popper__arrow::before { border-top-color: transparent; border-left-color: transparent; } .el-autocomplete__popper.el-popper[data-popper-placement^=bottom] .el-popper__arrow::before { border-bottom-color: transparent; border-right-color: transparent; } .el-autocomplete__popper.el-popper[data-popper-placement^=left] .el-popper__arrow::before { border-left-color: transparent; border-bottom-color: transparent; } .el-autocomplete__popper.el-popper[data-popper-placement^=right] .el-popper__arrow::before { border-right-color: transparent; border-top-color: transparent; } .el-autocomplete-suggestion { border-radius: var(--el-border-radius-base); box-sizing: border-box; } .el-autocomplete-suggestion__header { padding: 10px; border-bottom: 1px solid var(--el-border-color-lighter); } .el-autocomplete-suggestion__footer { padding: 10px; border-top: 1px solid var(--el-border-color-lighter); } .el-autocomplete-suggestion__wrap { max-height: 280px; padding: 10px 0; box-sizing: border-box; } .el-autocomplete-suggestion__list { margin: 0; padding: 0; } .el-autocomplete-suggestion li { padding: 0 20px; margin: 0; line-height: 34px; cursor: pointer; color: var(--el-text-color-regular); font-size: var(--el-font-size-base); list-style: none; text-align: left; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .el-autocomplete-suggestion li:hover { background-color: var(--el-fill-color-light); } .el-autocomplete-suggestion li.highlighted { background-color: var(--el-fill-color-light); } .el-autocomplete-suggestion li.divider { margin-top: 6px; border-top: 1px solid var(--el-color-black); } .el-autocomplete-suggestion li.divider:last-child { margin-bottom: -6px; } .el-autocomplete-suggestion.is-loading li { text-align: center; cursor: default; height: 100px; line-height: 100px; font-size: 20px; color: var(--el-text-color-secondary); } .el-autocomplete-suggestion.is-loading li::after { display: inline-block; content: ""; height: 100%; vertical-align: middle; } .el-autocomplete-suggestion.is-loading li:hover { background-color: var(--el-bg-color-overlay); } /* * @Author: 焦质晔 * @Date: 2021-02-09 14:11:02 * @Last Modified by: 焦质晔 * @Last Modified time: 2024-11-05 18:45:01 */ .el-avatar { --el-avatar-text-color: var(--el-color-white); --el-avatar-bg-color: var(--el-text-color-disabled); --el-avatar-text-size: 14px; --el-avatar-icon-size: 18px; --el-avatar-border-radius: var(--el-border-radius-base); --el-avatar-size-large: 56px; --el-avatar-size: 40px; --el-avatar-size-small: 24px; --el-avatar-size: 40px; display: inline-flex; justify-content: center; align-items: center; box-sizing: border-box; text-align: center; overflow: hidden; outline: none; color: var(--el-avatar-text-color); background: var(--el-avatar-bg-color); width: var(--el-avatar-size); height: var(--el-avatar-size); font-size: var(--el-avatar-text-size); } .el-avatar > img { display: block; width: 100%; height: 100%; } .el-avatar--circle { border-radius: 50%; } .el-avatar--square { border-radius: var(--el-avatar-border-radius); } .el-avatar--icon { font-size: var(--el-avatar-icon-size); } .el-avatar--small { --el-avatar-size: 24px; } .el-avatar--large { --el-avatar-size: 56px; } /* * @Author: 焦质晔 * @Date: 2021-02-09 14:11:02 * @Last Modified by: 焦质晔 * @Last Modified time: 2024-11-05 18:45:01 */ .el-backtop { --el-backtop-bg-color: var(--el-bg-color-overlay); --el-backtop-text-color: var(--el-color-primary); --el-backtop-hover-bg-color: var(--el-border-color-extra-light); position: fixed; background-color: var(--el-backtop-bg-color); width: 40px; height: 40px; border-radius: 50%; color: var(--el-backtop-text-color); display: flex; align-items: center; justify-content: center; font-size: 20px; box-shadow: var(--el-box-shadow-lighter); cursor: pointer; z-index: 5; } .el-backtop:hover { background-color: var(--el-backtop-hover-bg-color); } .el-backtop__icon { font-size: 20px; } /* * @Author: 焦质晔 * @Date: 2021-02-09 14:11:02 * @Last Modified by: 焦质晔 * @Last Modified time: 2024-11-05 18:45:01 */ .el-badge { --el-badge-bg-color: var(--el-color-danger); --el-badge-radius: 10px; --el-badge-font-size: 12px; --el-badge-padding: 6px; --el-badge-size: 18px; position: relative; vertical-align: middle; display: inline-block; width: -webkit-fit-content; width: -moz-fit-content; width: fit-content; } .el-badge__content { background-color: var(--el-badge-bg-color); border-radius: var(--el-badge-radius); color: var(--el-color-white); display: inline-flex; justify-content: center; align-items: center; font-size: var(--el-badge-font-size); height: var(--el-badge-size); padding: 0 var(--el-badge-padding); white-space: nowrap; border: 1px solid var(--el-bg-color); } .el-badge__content.is-fixed { position: absolute; top: 0; right: calc(1px + var(--el-badge-size) / 2); transform: translateY(-50%) translateX(100%); z-index: var(--el-index-normal); } .el-badge__content.is-fixed.is-dot { right: 5px; } .el-badge__content.is-dot { height: 8px; width: 8px; padding: 0; right: 0; border-radius: 50%; } .el-badge__content.is-hide-zero { display: none; } .el-badge__content--primary { background-color: var(--el-color-primary); } .el-badge__content--success { background-color: var(--el-color-success); } .el-badge__content--warning { background-color: var(--el-color-warning); } .el-badge__content--info { background-color: var(--el-color-info); } .el-badge__content--danger { background-color: var(--el-color-danger); } /* * @Author: 焦质晔 * @Date: 2021-02-09 14:11:02 * @Last Modified by: 焦质晔 * @Last Modified time: 2024-11-05 18:45:01 */ .el-breadcrumb { font-size: 14px; line-height: 1; } .el-breadcrumb::before, .el-breadcrumb::after { display: table; content: ""; } .el-breadcrumb::after { clear: both; } .el-breadcrumb__separator { margin: 0 9px; font-weight: bold; color: var(--el-text-color-placeholder); } .el-breadcrumb__separator.el-icon { margin: 0 6px; font-weight: normal; } .el-breadcrumb__separator.el-icon svg { vertical-align: middle; } .el-breadcrumb__item { float: left; display: inline-flex; align-items: center; } .el-breadcrumb__inner { color: var(--el-text-color-regular); } .el-breadcrumb__inner.is-link, .el-breadcrumb__inner a { font-weight: bold; text-decoration: none; transition: var(--el-transition-color); color: var(--el-text-color-primary); } .el-breadcrumb__inner.is-link:hover, .el-breadcrumb__inner a:hover { color: var(--el-color-primary); cursor: pointer; } .el-breadcrumb__item:last-child .el-breadcrumb__inner, .el-breadcrumb__item:last-child .el-breadcrumb__inner:hover, .el-breadcrumb__item:last-child .el-breadcrumb__inner a, .el-breadcrumb__item:last-child .el-breadcrumb__inner a:hover { font-weight: normal; color: var(--el-text-color-regular); cursor: text; } .el-breadcrumb__item:last-child .el-breadcrumb__separator { display: none; } /* * @Author: 焦质晔 * @Date: 2021-02-09 14:11:02 * @Last Modified by: 焦质晔 * @Last Modified time: 2024-11-05 18:45:01 */ .el-button-group { display: inline-block; vertical-align: middle; } .el-button-group::before, .el-button-group::after { display: table; content: ""; } .el-button-group::after { clear: both; } .el-button-group > .el-button { float: left; position: relative; } .el-button-group > .el-button + .el-button { margin-left: 0; } .el-button-group > .el-button:first-child { border-top-right-radius: 0; border-bottom-right-radius: 0; } .el-button-group > .el-button:last-child { border-top-left-radius: 0; border-bottom-left-radius: 0; } .el-button-group > .el-button:first-child:last-child { border-top-right-radius: var(--el-border-radius-base); border-bottom-right-radius: var(--el-border-radius-base); border-top-left-radius: var(--el-border-radius-base); border-bottom-left-radius: var(--el-border-radius-base); } .el-button-group > .el-button:first-child:last-child.is-round { border-radius: var(--el-border-radius-round); } .el-button-group > .el-button:first-child:last-child.is-circle { border-radius: 50%; } .el-button-group > .el-button:not(:first-child):not(:last-child) { border-radius: 0; } .el-button-group > .el-button:not(:last-child) { margin-right: -1px; } .el-button-group > .el-button:hover, .el-button-group > .el-button:focus, .el-button-group > .el-button:active { z-index: 1; } .el-button-group > .el-button.is-active { z-index: 1; } .el-button-group > .el-dropdown > .el-button { border-top-left-radius: 0; border-bottom-left-radius: 0; border-left-color: var(--el-button-divide-border-color); } .el-button-group .el-button--primary:first-child { border-right-color: var(--el-button-divide-border-color); } .el-button-group .el-button--primary:last-child { border-left-color: var(--el-button-divide-border-color); } .el-button-group .el-button--primary:not(:first-child):not(:last-child) { border-left-color: var(--el-button-divide-border-color); border-right-color: var(--el-button-divide-border-color); } .el-button-group .el-button--success:first-child { border-right-color: var(--el-button-divide-border-color); } .el-button-group .el-button--success:last-child { border-left-color: var(--el-button-divide-border-color); } .el-button-group .el-button--success:not(:first-child):not(:last-child) { border-left-color: var(--el-button-divide-border-color); border-right-color: var(--el-button-divide-border-color); } .el-button-group .el-button--warning:first-child { border-right-color: var(--el-button-divide-border-color); } .el-button-group .el-button--warning:last-child { border-left-color: var(--el-button-divide-border-color); } .el-button-group .el-button--warning:not(:first-child):not(:last-child) { border-left-color: var(--el-button-divide-border-color); border-right-color: var(--el-button-divide-border-color); } .el-button-group .el-button--danger:first-child { border-right-color: var(--el-button-divide-border-color); } .el-button-group .el-button--danger:last-child { border-left-color: var(--el-button-divide-border-color); } .el-button-group .el-button--danger:not(:first-child):not(:last-child) { border-left-color: var(--el-button-divide-border-color); border-right-color: var(--el-button-divide-border-color); } .el-button-group .el-button--info:first-child { border-right-color: var(--el-button-divide-border-color); } .el-button-group .el-button--info:last-child { border-left-color: var(--el-button-divide-border-color); } .el-button-group .el-button--info:not(:first-child):not(:last-child) { border-left-color: var(--el-button-divide-border-color); border-right-color: var(--el-button-divide-border-color); } /* * @Author: 焦质晔 * @Date: 2021-02-09 14:11:02 * @Last Modified by: 焦质晔 * @Last Modified time: 2024-11-05 18:45:01 */ /* Element Chalk Variables */ /* * @Author: 焦质晔 * @Date: 2021-02-09 14:11:02 * @Last Modified by: 焦质晔 * @Last Modified time: 2024-11-05 18:45:01 */ .el-button { --el-button-font-weight: var(--el-font-weight-primary); --el-button-border-color: var(--el-border-color); --el-button-bg-color: var(--el-fill-color-blank); --el-button-text-color: var(--el-text-color-regular); --el-button-disabled-text-color: var(--el-disabled-text-color); --el-button-disabled-bg-color: var(--el-fill-color-blank); --el-button-disabled-border-color: var(--el-border-color-light); --el-button-divide-border-color: rgba(255, 255, 255, 0.5); --el-button-hover-text-color: var(--el-color-primary); --el-button-hover-bg-color: var(--el-color-primary-light-9); --el-button-hover-border-color: var(--el-color-primary-light-7); --el-button-active-text-color: var(--el-button-hover-text-color); --el-button-active-border-color: var(--el-color-primary); --el-button-active-bg-color: var(--el-button-hover-bg-color); --el-button-outline-color: var(--el-color-primary-light-5); --el-button-hover-link-text-color: var(--el-text-color-secondary); --el-button-active-color: var(--el-text-color-primary); } .el-button { display: inline-flex; justify-content: center; align-items: center; line-height: 1; height: 32px; white-space: nowrap; cursor: pointer; color: var(--el-button-text-color); text-align: center; box-sizing: border-box; outline: none; transition: 0.1s; font-weight: var(--el-button-font-weight); -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; vertical-align: middle; -webkit-appearance: none; background-color: var(--el-button-bg-color); border: var(--el-border); border-color: var(--el-button-border-color); } .el-button:hover { color: var(--el-button-hover-text-color); border-color: var(--el-button-hover-border-color); background-color: var(--el-button-hover-bg-color); outline: none; } .el-button:active { color: var(--el-button-active-text-color); border-color: var(--el-button-active-border-color); background-color: var(--el-button-active-bg-color); outline: none; } .el-button:focus-visible { outline: 2px solid var(--el-button-outline-color); outline-offset: 1px; transition: outline-offset 0s, outline 0s; } .el-button > span { display: inline-flex; align-items: center; } .el-button + .el-button { margin-left: 12px; } .el-button { padding: 8px 15px; font-size: var(--el-font-size-base); border-radius: var(--el-border-radius-base); } .el-button.is-round { padding: 8px 15px; } .el-button::-moz-focus-inner { border: 0; } .el-button [class*=el-icon] + span { margin-left: 6px; } .el-button [class*=el-icon] svg { vertical-align: bottom; } .el-button.is-plain { --el-button-hover-text-color: var(--el-color-primary); --el-button-hover-bg-color: var(--el-fill-color-blank); --el-button-hover-border-color: var(--el-color-primary); } .el-button.is-active { color: var(--el-button-active-text-color); border-color: var(--el-button-active-border-color); background-color: var(--el-button-active-bg-color); outline: none; } .el-button.is-disabled, .el-button.is-disabled:hover { color: var(--el-button-disabled-text-color); cursor: not-allowed; background-image: none; background-color: var(--el-button-disabled-bg-color); border-color: var(--el-button-disabled-border-color); } .el-button.is-loading { position: relative; pointer-events: none; } .el-button.is-loading:before { z-index: 1; pointer-events: none; content: ""; position: absolute; left: -1px; top: -1px; right: -1px; bottom: -1px; border-radius: inherit; background-color: var(--el-mask-color-extra-light); } .el-button.is-round { border-radius: var(--el-border-radius-round); } .el-button.is-circle { width: 32px; border-radius: 50%; padding: 8px; } .el-button.is-text { color: var(--el-button-text-color); border: 0 solid transparent; background-color: transparent; } .el-button.is-text.is-disabled { color: var(--el-button-disabled-text-color); background-color: transparent !important; } .el-button.is-text:not(.is-disabled):hover { background-color: var(--el-fill-color-light); } .el-button.is-text:not(.is-disabled):focus-visible { outline: 2px solid var(--el-button-outline-color); outline-offset: 1px; transition: outline-offset 0s, outline 0s; } .el-button.is-text:not(.is-disabled):active { background-color: var(--el-fill-color); } .el-button.is-text:not(.is-disabled).is-has-bg { background-color: var(--el-fill-color-light); } .el-button.is-text:not(.is-disabled).is-has-bg:hover { background-color: var(--el-fill-color); } .el-button.is-text:not(.is-disabled).is-has-bg:active { background-color: var(--el-fill-color-dark); } .el-button__text--expand { letter-spacing: 0.3em; margin-right: -0.3em; } .el-button.is-link { border-color: transparent; color: var(--el-button-text-color); background: transparent; padding: 2px; height: auto; } .el-button.is-link:hover { color: var(--el-button-hover-link-text-color); } .el-button.is-link.is-disabled { color: var(--el-button-disabled-text-color); background-color: transparent !important; border-color: transparent !important; } .el-button.is-link:not(.is-disabled):hover { border-color: transparent; background-color: transparent; } .el-button.is-link:not(.is-disabled):active { color: var(--el-button-active-color); border-color: transparent; background-color: transparent; } .el-button--text { border-color: transparent; background: transparent; color: var(--el-color-primary); padding-left: 0; padding-right: 0; } .el-button--text.is-disabled { color: var(--el-button-disabled-text-color); background-color: transparent !important; border-color: transparent !important; } .el-button--text:not(.is-disabled):hover { color: var(--el-color-primary-light-3); border-color: transparent; background-color: transparent; } .el-button--text:not(.is-disabled):active { color: var(--el-color-primary-dark-2); border-color: transparent; background-color: transparent; } .el-button__link--expand { letter-spacing: 0.3em; margin-right: -0.3em; } .el-button--primary { --el-button-text-color: var(--el-color-white); --el-button-bg-color: var(--el-color-primary); --el-button-border-color: var(--el-color-primary); --el-button-outline-color: var(--el-color-primary-light-5); --el-button-active-color: var(--el-color-primary-dark-2); --el-button-hover-text-color: var(--el-color-white); --el-button-hover-link-text-color: var(--el-color-primary-light-5); --el-button-hover-bg-color: var(--el-color-primary-light-3); --el-button-hover-border-color: var(--el-color-primary-light-3); --el-button-active-bg-color: var(--el-color-primary-dark-2); --el-button-active-border-color: var(--el-color-primary-dark-2); --el-button-disabled-text-color: var(--el-color-white); --el-button-disabled-bg-color: var(--el-color-primary-light-5); --el-button-disabled-border-color: var(--el-color-primary-light-5); } .el-button--primary.is-plain, .el-button--primary.is-text, .el-button--primary.is-link { --el-button-text-color: var(--el-color-primary); --el-button-bg-color: var(--el-color-primary-light-9); --el-button-border-color: var(--el-color-primary-light-5); --el-button-hover-text-color: var(--el-color-white); --el-button-hover-bg-color: var(--el-color-primary); --el-button-hover-border-color: var(--el-color-primary); --el-button-active-text-color: var(--el-color-white); } .el-button--primary.is-plain.is-disabled, .el-button--primary.is-plain.is-disabled:hover, .el-button--primary.is-plain.is-disabled:focus, .el-button--primary.is-plain.is-disabled:active, .el-button--primary.is-text.is-disabled, .el-button--primary.is-text.is-disabled:hover, .el-button--primary.is-text.is-disabled:focus, .el-button--primary.is-text.is-disabled:active, .el-button--primary.is-link.is-disabled, .el-button--primary.is-link.is-disabled:hover, .el-button--primary.is-link.is-disabled:focus, .el-button--primary.is-link.is-disabled:active { color: var(--el-color-primary-light-5); background-color: var(--el-color-primary-light-9); border-color: var(--el-color-primary-light-8); } .el-button--success { --el-button-text-color: var(--el-color-white); --el-button-bg-color: var(--el-color-success); --el-button-border-color: var(--el-color-success); --el-button-outline-color: var(--el-color-success-light-5); --el-button-active-color: var(--el-color-success-dark-2); --el-button-hover-text-color: var(--el-color-white); --el-button-hover-link-text-color: var(--el-color-success-light-5); --el-button-hover-bg-color: var(--el-color-success-light-3); --el-button-hover-border-color: var(--el-color-success-light-3); --el-button-active-bg-color: var(--el-color-success-dark-2); --el-button-active-border-color: var(--el-color-success-dark-2); --el-button-disabled-text-color: var(--el-color-white); --el-button-disabled-bg-color: var(--el-color-success-light-5); --el-button-disabled-border-color: var(--el-color-success-light-5); } .el-button--success.is-plain, .el-button--success.is-text, .el-button--success.is-link { --el-button-text-color: var(--el-color-success); --el-button-bg-color: var(--el-color-success-light-9); --el-button-border-color: var(--el-color-success-light-5); --el-button-hover-text-color: var(--el-color-white); --el-button-hover-bg-color: var(--el-color-success); --el-button-hover-border-color: var(--el-color-success); --el-button-active-text-color: var(--el-color-white); } .el-button--success.is-plain.is-disabled, .el-button--success.is-plain.is-disabled:hover, .el-button--success.is-plain.is-disabled:focus, .el-button--success.is-plain.is-disabled:active, .el-button--success.is-text.is-disabled, .el-button--success.is-text.is-disabled:hover, .el-button--success.is-text.is-disabled:focus, .el-button--success.is-text.is-disabled:active, .el-button--success.is-link.is-disabled, .el-button--success.is-link.is-disabled:hover, .el-button--success.is-link.is-disabled:focus, .el-button--success.is-link.is-disabled:active { color: var(--el-color-success-light-5); background-color: var(--el-color-success-light-9); border-color: var(--el-color-success-light-8); } .el-button--warning { --el-button-text-color: var(--el-color-white); --el-button-bg-color: var(--el-color-warning); --el-button-border-color: var(--el-color-warning); --el-button-outline-color: var(--el-color-warning-light-5); --el-button-active-color: var(--el-color-warning-dark-2); --el-button-hover-text-color: var(--el-color-white); --el-button-hover-link-text-color: var(--el-color-warning-light-5); --el-button-hover-bg-color: var(--el-color-warning-light-3); --el-button-hover-border-color: var(--el-color-warning-light-3); --el-button-active-bg-color: var(--el-color-warning-dark-2); --el-button-active-border-color: var(--el-color-warning-dark-2); --el-button-disabled-text-color: var(--el-color-white); --el-button-disabled-bg-color: var(--el-color-warning-light-5); --el-button-disabled-border-color: var(--el-color-warning-light-5); } .el-button--warning.is-plain, .el-button--warning.is-text, .el-button--warning.is-link { --el-button-text-color: var(--el-color-warning); --el-button-bg-color: var(--el-color-warning-light-9); --el-button-border-color: var(--el-color-warning-light-5); --el-button-hover-text-color: var(--el-color-white); --el-button-hover-bg-color: var(--el-color-warning); --el-button-hover-border-color: var(--el-color-warning); --el-button-active-text-color: var(--el-color-white); } .el-button--warning.is-plain.is-disabled, .el-button--warning.is-plain.is-disabled:hover, .el-button--warning.is-plain.is-disabled:focus, .el-button--warning.is-plain.is-disabled:active, .el-button--warning.is-text.is-disabled, .el-button--warning.is-text.is-disabled:hover, .el-button--warning.is-text.is-disabled:focus, .el-button--warning.is-text.is-disabled:active, .el-button--warning.is-link.is-disabled, .el-button--warning.is-link.is-disabled:hover, .el-button--warning.is-link.is-disabled:focus, .el-button--warning.is-link.is-disabled:active { color: var(--el-color-warning-light-5); background-color: var(--el-color-warning-light-9); border-color: var(--el-color-warning-light-8); } .el-button--danger { --el-button-text-color: var(--el-color-white); --el-button-bg-color: var(--el-color-danger); --el-button-border-color: var(--el-color-danger); --el-button-outline-color: var(--el-color-danger-light-5); --el-button-active-color: var(--el-color-danger-dark-2); --el-button-hover-text-color: var(--el-color-white); --el-button-hover-link-text-color: var(--el-color-danger-light-5); --el-button-hover-bg-color: var(--el-color-danger-light-3); --el-button-hover-border-color: var(--el-color-danger-light-3); --el-button-active-bg-color: var(--el-color-danger-dark-2); --el-button-active-border-color: var(--el-color-danger-dark-2); --el-button-disabled-text-color: var(--el-color-white); --el-button-disabled-bg-color: var(--el-color-danger-light-5); --el-button-disabled-border-color: var(--el-color-danger-light-5); } .el-button--danger.is-plain, .el-button--danger.is-text, .el-button--danger.is-link { --el-button-text-color: var(--el-color-danger); --el-button-bg-color: var(--el-color-danger-light-9); --el-button-border-color: var(--el-color-danger-light-5); --el-button-hover-text-color: var(--el-color-white); --el-button-hover-bg-color: var(--el-color-danger); --el-button-hover-border-color: var(--el-color-danger); --el-button-active-text-color: var(--el-color-white); } .el-button--danger.is-plain.is-disabled, .el-button--danger.is-plain.is-disabled:hover, .el-button--danger.is-plain.is-disabled:focus, .el-button--danger.is-plain.is-disabled:active, .el-button--danger.is-text.is-disabled, .el-button--danger.is-text.is-disabled:hover, .el-button--danger.is-text.is-disabled:focus, .el-button--danger.is-text.is-disabled:active, .el-button--danger.is-link.is-disabled, .el-button--danger.is-link.is-disabled:hover, .el-button--danger.is-link.is-disabled:focus, .el-button--danger.is-link.is-disabled:active { color: var(--el-color-danger-light-5); background-color: var(--el-color-danger-light-9); border-color: var(--el-color-danger-light-8); } .el-button--info { --el-button-text-color: var(--el-color-white); --el-button-bg-color: var(--el-color-info); --el-button-border-color: var(--el-color-info); --el-button-outline-color: var(--el-color-info-light-5); --el-button-active-color: var(--el-color-info-dark-2); --el-button-hover-text-color: var(--el-color-white); --el-button-hover-link-text-color: var(--el-color-info-light-5); --el-button-hover-bg-color: var(--el-color-info-light-3); --el-button-hover-border-color: var(--el-color-info-light-3); --el-button-active-bg-color: var(--el-color-info-dark-2); --el-button-active-border-color: var(--el-color-info-dark-2); --el-button-disabled-text-color: var(--el-color-white); --el-button-disabled-bg-color: var(--el-color-info-light-5); --el-button-disabled-border-color: var(--el-color-info-light-5); } .el-button--info.is-plain, .el-button--info.is-text, .el-button--info.is-link { --el-button-text-color: var(--el-color-info); --el-button-bg-color: var(--el-color-info-light-9); --el-button-border-color: var(--el-color-info-light-5); --el-button-hover-text-color: var(--el-color-white); --el-button-hover-bg-color: var(--el-color-info); --el-button-hover-border-color: var(--el-color-info); --el-button-active-text-color: var(--el-color-white); } .el-button--info.is-plain.is-disabled, .el-button--info.is-plain.is-disabled:hover, .el-button--info.is-plain.is-disabled:focus, .el-button--info.is-plain.is-disabled:active, .el-button--info.is-text.is-disabled, .el-button--info.is-text.is-disabled:hover, .el-button--info.is-text.is-disabled:focus, .el-button--info.is-text.is-disabled:active, .el-button--info.is-link.is-disabled, .el-button--info.is-link.is-disabled:hover, .el-button--info.is-link.is-disabled:focus, .el-button--info.is-link.is-disabled:active { color: var(--el-color-info-light-5); background-color: var(--el-color-info-light-9); border-color: var(--el-color-info-light-8); } .el-button--large { --el-button-size: 40px; height: var(--el-button-size); } .el-button--large [class*=el-icon] + span { margin-left: 8px; } .el-button--large { padding: 12px 19px; font-size: var(--el-font-size-base); border-radius: var(--el-border-radius-base); } .el-button--large.is-round { padding: 12px 19px; } .el-button--large.is-circle { width: var(--el-button-size); padding: 12px; } .el-button--small { --el-button-size: 24px; height: var(--el-button-size); } .el-button--small [class*=el-icon] + span { margin-left: 4px; } .el-button--small { padding: 5px 11px; font-size: 12px; border-radius: 2px; } .el-button--small.is-round { padding: 5px 11px; } .el-button--small.is-circle { width: var(--el-button-size); padding: 5px; } /* * @Author: 焦质晔 * @Date: 2021-02-09 14:11:02 * @Last Modified by: 焦质晔 * @Last Modified time: 2024-11-05 18:45:01 */ .el-calendar { --el-calendar-border: var(--el-table-border, 1px solid var(--el-border-color-lighter)); --el-calendar-header-border-bottom: var(--el-calendar-border); --el-calendar-selected-bg-color: var(--el-color-primary-light-9); --el-calendar-cell-width: 85px; background-color: var(--el-fill-color-blank); } .el-calendar__header { display: flex; justify-content: space-between; padding: 12px 20px; border-bottom: var(--el-calendar-header-border-bottom); } .el-calendar__title { color: var(--el-text-color); align-self: center; } .el-calendar__body { padding: 12px 20px 35px; } .el-calendar-table { table-layout: fixed; width: 100%; } .el-calendar-table thead th { padding: 12px 0; color: var(--el-text-color-regular); font-weight: normal; } .el-calendar-table:not(.is-range) td.prev, .el-calendar-table:not(.is-range) td.next { color: var(--el-text-color-placeholder); } .el-calendar-table td { border-bottom: var(--el-calendar-border); border-right: var(--el-calendar-border); vertical-align: top; transition: background-color var(--el-transition-duration-fast) ease; } .el-calendar-table td.is-selected { background-color: var(--el-calendar-selected-bg-color); } .el-calendar-table td.is-today { color: var(--el-color-primary); } .el-calendar-table tr:first-child td { border-top: var(--el-calendar-border); } .el-calendar-table tr td:first-child { border-left: var(--el-calendar-border); } .el-calendar-table tr.el-calendar-table__row--hide-border td { border-top: none; } .el-calendar-table .el-calendar-day { box-sizing: border-box; padding: 8px; height: var(--el-calendar-cell-width); } .el-calendar-table .el-calendar-day:hover { cursor: pointer; background-color: var(--el-calendar-selected-bg-color); } /* * @Author: 焦质晔 * @Date: 2021-02-09 14:11:02 * @Last Modified by: 焦质晔 * @Last Modified time: 2024-11-05 18:45:01 */ .el-card { --el-card-border-color: var(--el-border-color-light); --el-card-border-radius: 4px; --el-card-padding: 20px; --el-card-bg-color: var(--el-fill-color-blank); } .el-card { border-radius: var(--el-card-border-radius); border: 1px solid var(--el-card-border-color); background-color: var(--el-card-bg-color); overflow: hidden; color: var(--el-text-color-primary); transition: var(--el-transition-duration); } .el-card.is-always-shadow { box-shadow: var(--el-box-shadow-light); } .el-card.is-hover-shadow:hover, .el-card.is-hover-shadow:focus { box-shadow: var(--el-box-shadow-light); } .el-card__header { padding: calc(var(--el-card-padding) - 2px) var(--el-card-padding); border-bottom: 1px solid var(--el-card-border-color); box-sizing: border-box; } .el-card__body { padding: var(--el-card-padding); } .el-card__footer { padding: calc(var(--el-card-padding) - 2px) var(--el-card-padding); border-top: 1px solid var(--el-card-border-color); box-sizing: border-box; } /* * @Author: 焦质晔 * @Date: 2021-02-09 14:11:02 * @Last Modified by: 焦质晔 * @Last Modified time: 2024-11-05 18:45:01 */ .el-carousel__item { position: absolute; top: 0; left: 0; width: 100%; height: 100%; display: inline-block; overflow: hidden; z-index: calc(var(--el-index-normal) - 1); } .el-carousel__item.is-active { z-index: calc(var(--el-index-normal) - 1); } .el-carousel__item.is-animating { transition: transform 0.4s ease-in-out; } .el-carousel__item--card { width: 50%; transition: transform 0.4s ease-in-out; } .el-carousel__item--card.is-in-stage { cursor: pointer; z-index: var(--el-index-normal); } .el-carousel__item--card.is-in-stage:hover .el-carousel__mask, .el-carousel__item--card.is-in-stage.is-hover .el-carousel__mask { opacity: 0.12; } .el-carousel__item--card.is-active { z-index: calc(var(--el-index-normal) + 1); } .el-carousel__item--card-vertical { width: 100%; height: 50%; } .el-carousel__mask { position: absolute; width: 100%; height: 100%; t