UNPKG

deer-ui

Version:

React.js UI components for PC Web

2,118 lines (2,101 loc) 237 kB
/** deer-ui 默认主题配置 */ .text-center { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: center; -ms-flex-align: center; align-items: center; } @-webkit-keyframes deer-ui-spin { 0% { -webkit-transform: rotate(0deg); transform: rotate(0deg); } 100% { -webkit-transform: rotate(360deg); transform: rotate(360deg); } } @keyframes deer-ui-spin { 0% { -webkit-transform: rotate(0deg); transform: rotate(0deg); } 100% { -webkit-transform: rotate(360deg); transform: rotate(360deg); } } @-webkit-keyframes deer-fade-in { from { opacity: 0; -webkit-transform: translate3d(0, -40px, 0); transform: translate3d(0, -40px, 0); } to { opacity: 1; -webkit-transform: scale(1) translate3d(0, 20px, 0); transform: scale(1) translate3d(0, 20px, 0); } } @keyframes deer-fade-in { from { opacity: 0; -webkit-transform: translate3d(0, -40px, 0); transform: translate3d(0, -40px, 0); } to { opacity: 1; -webkit-transform: scale(1) translate3d(0, 20px, 0); transform: scale(1) translate3d(0, 20px, 0); } } @-webkit-keyframes deer-fade-out { from { opacity: 1; -webkit-transform: translate3d(0, 20px, 0); transform: translate3d(0, 20px, 0); } to { opacity: 0; -webkit-transform: translate3d(0, -40px, 0); transform: translate3d(0, -40px, 0); } } @keyframes deer-fade-out { from { opacity: 1; -webkit-transform: translate3d(0, 20px, 0); transform: translate3d(0, 20px, 0); } to { opacity: 0; -webkit-transform: translate3d(0, -40px, 0); transform: translate3d(0, -40px, 0); } } @-webkit-keyframes deer-ui-select-open { from { opacity: 0; -webkit-transform: translate3d(0, -30px, 0); transform: translate3d(0, -30px, 0); } to { opacity: 1; -webkit-transform: scale(1) translate3d(0, 0, 0); transform: scale(1) translate3d(0, 0, 0); } } @keyframes deer-ui-select-open { from { opacity: 0; -webkit-transform: translate3d(0, -30px, 0); transform: translate3d(0, -30px, 0); } to { opacity: 1; -webkit-transform: scale(1) translate3d(0, 0, 0); transform: scale(1) translate3d(0, 0, 0); } } @-webkit-keyframes deer-ui-select-close { from { opacity: 1; -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } to { opacity: 0; -webkit-transform: translate3d(0, -15px, 0); transform: translate3d(0, -15px, 0); } } @keyframes deer-ui-select-close { from { opacity: 1; -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } to { opacity: 0; -webkit-transform: translate3d(0, -15px, 0); transform: translate3d(0, -15px, 0); } } .deer-ui-button { display: inline-block; } .deer-ui-button-btn { border: none; outline: none; cursor: pointer; padding: 0 30px; font-size: 14px; height: 40px; -ms-touch-action: manipulation; touch-action: manipulation; white-space: nowrap; background-image: none; text-align: center; border-radius: 5px; text-shadow: none; vertical-align: middle; } .deer-ui-button-btn.btn-size-small { font-size: 12px; padding: 0 10px; height: 30px; } .deer-ui-button-btn.btn-size-large { font-size: 16px; padding: 0 40px; height: 50px; } .deer-ui-button-btn-default { color: rgba(0, 0, 0, 0.65); background-color: #fff; border: 1px solid #d9d9d9; text-shadow: none; } .deer-ui-button-btn-default-circle { border-radius: 50%; padding: 0; width: 40px; height: 40px; } .deer-ui-button-btn-primary { border: 1px solid #31c27c; background-color: #3ece89; color: #ffffff; } .deer-ui-button-btn-primary.deer-ui-button-btn-default:active, .deer-ui-button-btn-primary.deer-ui-button-btn-default:focus { border: 1px solid #31c27c; color: #3ece89; } .deer-ui-button-btn-primary.btn-hollow { color: #31c27c; background-color: transparent; text-shadow: unset; } .deer-ui-button-btn-primary.btn-hollow.btn-dashed { border: 1px dashed #31c27c; } .deer-ui-button-btn-primary.btn-circle { border-radius: 50%; padding: 0; width: 40px; height: 40px; } .deer-ui-button-btn-link { background-color: transparent; height: auto; padding: 0 5px; white-space: nowrap; text-align: center; text-decoration: none; color: #31c27c; } .deer-ui-button-btn-link.btn-hollow { color: #31c27c; } .deer-ui-button-btn-link.btn-circle { border-radius: 50%; padding: 0; width: 40px; height: 40px; } .deer-ui-button-btn-warning { border: 1px solid #fca130; background-color: #fcac49; color: #ffffff; } .deer-ui-button-btn-warning.deer-ui-button-btn-default:active, .deer-ui-button-btn-warning.deer-ui-button-btn-default:focus { border: 1px solid #31c27c; color: #3ece89; } .deer-ui-button-btn-warning.btn-hollow { color: #fca130; background-color: transparent; text-shadow: unset; } .deer-ui-button-btn-warning.btn-hollow.btn-dashed { border: 1px dashed #fca130; } .deer-ui-button-btn-warning.btn-circle { border-radius: 50%; padding: 0; width: 40px; height: 40px; } .deer-ui-button-btn-info { border: 1px solid #61affe; background-color: #7abcfe; color: #ffffff; } .deer-ui-button-btn-info.deer-ui-button-btn-default:active, .deer-ui-button-btn-info.deer-ui-button-btn-default:focus { border: 1px solid #31c27c; color: #3ece89; } .deer-ui-button-btn-info.btn-hollow { color: #61affe; background-color: transparent; text-shadow: unset; } .deer-ui-button-btn-info.btn-hollow.btn-dashed { border: 1px dashed #61affe; } .deer-ui-button-btn-info.btn-circle { border-radius: 50%; padding: 0; width: 40px; height: 40px; } .deer-ui-button-btn-error { border: 1px solid #f93e3e; background-color: #fa5757; color: #ffffff; } .deer-ui-button-btn-error.deer-ui-button-btn-default:active, .deer-ui-button-btn-error.deer-ui-button-btn-default:focus { border: 1px solid #31c27c; color: #3ece89; } .deer-ui-button-btn-error.btn-hollow { color: #f93e3e; background-color: transparent; text-shadow: unset; } .deer-ui-button-btn-error.btn-hollow.btn-dashed { border: 1px dashed #f93e3e; } .deer-ui-button-btn-error.btn-circle { border-radius: 50%; padding: 0; width: 40px; height: 40px; } .deer-ui-button-btn-success { border: 1px solid #35C613; background-color: #3bdd15; color: #ffffff; } .deer-ui-button-btn-success.deer-ui-button-btn-default:active, .deer-ui-button-btn-success.deer-ui-button-btn-default:focus { border: 1px solid #31c27c; color: #3ece89; } .deer-ui-button-btn-success.btn-hollow { color: #35C613; background-color: transparent; text-shadow: unset; } .deer-ui-button-btn-success.btn-hollow.btn-dashed { border: 1px dashed #35C613; } .deer-ui-button-btn-success.btn-circle { border-radius: 50%; padding: 0; width: 40px; height: 40px; } .deer-ui-button-btn.btn-disabled { cursor: not-allowed; opacity: 0.7; } .deer-ui-button-btn.btn-disabled.btn-circle { border-radius: 50%; padding: 0; width: 40px; height: 40px; } .deer-ui-button-btn.btn-block { width: 100%; } .deer-ui-button-btn.btn-dashed { border: 1px dashed #e8e8e8; } .deer-ui-button-btn.btn-dashed.btn-circle { border-radius: 50%; padding: 0; width: 40px; height: 40px; } .deer-ui-button-btn.btn-loading { opacity: 0.7; cursor: not-allowed; } .deer-ui-button-btn.btn-hollow { background: transparent; text-shadow: unset; } .deer-ui-button-block { width: 100%; } .deer-ui-button-loading { margin-right: 10px; vertical-align: -1px; -webkit-animation: deer-ui-spin 1.5s linear infinite; animation: deer-ui-spin 1.5s linear infinite; } .deer-ui-button-link { padding: 0 5px; font-size: 14px; white-space: nowrap; text-align: center; text-decoration: none; color: #31c27c !important; } .deer-ui-button-link-disabled { cursor: not-allowed; color: rgba(0, 0, 0, 0.2) !important; } /** deer-ui 默认主题配置 */ .deer-ui-checkbox-wrapper { cursor: pointer; padding: 0px 10px; } .deer-ui-checkbox-wrapper-content { position: relative; } .deer-ui-checkbox-wrapper-content .deer-ui-checkbox-checkbox { position: absolute; top: 0; left: 0; opacity: 0; } .deer-ui-checkbox-wrapper-content .deer-ui-checkbox-inner { display: inline-block; -webkit-transition: all 0.5s cubic-bezier(0.165, 0.84, 0.44, 1); transition: all 0.5s cubic-bezier(0.165, 0.84, 0.44, 1); position: relative; left: 0; top: 2px; border-radius: 4px; width: 16px; height: 16px; background: #fff; border: 1px solid #e8e8e8; margin-right: 10px; } .deer-ui-checkbox-wrapper-content .deer-ui-checkbox-inner::after { -webkit-transform: rotate(45deg) scale(0); transform: rotate(45deg) scale(0); position: absolute; left: 4px; top: 1px; display: table; width: 5px; height: 8px; border: 2px solid #fff; border-top: 0; border-left: 0; content: ' '; -webkit-transition: all 0.1s cubic-bezier(0.71, -0.46, 0.88, 0.6); transition: all 0.1s cubic-bezier(0.71, -0.46, 0.88, 0.6); } .deer-ui-checkbox-wrapper-content-checked .deer-ui-checkbox-inner { border-color: #31c27c; background-color: #31c27c; } .deer-ui-checkbox-wrapper-content-checked .deer-ui-checkbox-inner::after { -webkit-transform: rotate(45deg) scale(1); transform: rotate(45deg) scale(1); } .deer-ui-checkbox-wrapper-content-indeterminate .deer-ui-checkbox-inner { border-color: #31c27c; } .deer-ui-checkbox-wrapper-content-indeterminate .deer-ui-checkbox-inner::after { width: 0; -webkit-transform: rotate(90deg) scale(1) translate(1px, -2px); transform: rotate(90deg) scale(1) translate(1px, -2px); } .deer-ui-checkbox-wrapper-disabled { cursor: not-allowed; } .deer-ui-checkbox-wrapper-disabled .deer-ui-checkbox-wrapper-content-checked .deer-ui-checkbox-inner { background-color: #fff !important; } .deer-ui-checkbox-wrapper-disabled .deer-ui-checkbox-wrapper-content-checked .deer-ui-checkbox-inner::after { border-color: #e8e8e8; } .deer-ui-checkbox-wrapper-disabled .deer-ui-checkbox-inner { border-color: #e8e8e8 !important; background-color: #fff !important; } .checkboxGroup { display: -webkit-box; display: -ms-flexbox; display: flex; } /** deer-ui 默认主题配置 */ .deer-ui-code-view { font-size: 14px; white-space: pre; position: relative; } .deer-ui-code-view .toggle { border: 1px solid #31c27c; cursor: pointer; padding: 10px 0px; text-align: center; border-radius: 10px; } .deer-ui-code-view .toggle .codeView-icon { font-size: 24px; vertical-align: -7px; margin-left: 10px; } .deer-ui-code-view .copy { position: absolute; right: 20px; top: 15px; font-size: 12px; color: hsla(0, 0%, 54.9%, 0.8); } .deer-ui-code-view .copy:hover { color: #31c27c; } .hljs { line-height: 1.8; font-family: Menlo,Monaco,Consolas,Courier,monospace; font-size: 12px; padding: 18px 24px; background-color: #fafafa; border: 1px solid #eaeefb; margin-bottom: 25px; border-radius: 4px; -webkit-font-smoothing: auto; } /** deer-ui 默认主题配置 */ .text-center { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: center; -ms-flex-align: center; align-items: center; } .deer-ui-col { -webkit-box-sizing: border-box; box-sizing: border-box; } .deer-ui-col-24 { width: 100%; } .deer-ui-col-offset-24 { margin-left: 100%; } .deer-ui-col-23 { width: 95.83333333%; } .deer-ui-col-offset-23 { margin-left: 95.83333333%; } .deer-ui-col-22 { width: 91.66666667%; } .deer-ui-col-offset-22 { margin-left: 91.66666667%; } .deer-ui-col-21 { width: 87.5%; } .deer-ui-col-offset-21 { margin-left: 87.5%; } .deer-ui-col-20 { width: 83.33333333%; } .deer-ui-col-offset-20 { margin-left: 83.33333333%; } .deer-ui-col-19 { width: 79.16666667%; } .deer-ui-col-offset-19 { margin-left: 79.16666667%; } .deer-ui-col-18 { width: 75%; } .deer-ui-col-offset-18 { margin-left: 75%; } .deer-ui-col-17 { width: 70.83333333%; } .deer-ui-col-offset-17 { margin-left: 70.83333333%; } .deer-ui-col-16 { width: 66.66666667%; } .deer-ui-col-offset-16 { margin-left: 66.66666667%; } .deer-ui-col-15 { width: 62.5%; } .deer-ui-col-offset-15 { margin-left: 62.5%; } .deer-ui-col-14 { width: 58.33333333%; } .deer-ui-col-offset-14 { margin-left: 58.33333333%; } .deer-ui-col-13 { width: 54.16666667%; } .deer-ui-col-offset-13 { margin-left: 54.16666667%; } .deer-ui-col-12 { width: 50%; } .deer-ui-col-offset-12 { margin-left: 50%; } .deer-ui-col-11 { width: 45.83333333%; } .deer-ui-col-offset-11 { margin-left: 45.83333333%; } .deer-ui-col-10 { width: 41.66666667%; } .deer-ui-col-offset-10 { margin-left: 41.66666667%; } .deer-ui-col-9 { width: 37.5%; } .deer-ui-col-offset-9 { margin-left: 37.5%; } .deer-ui-col-8 { width: 33.33333333%; } .deer-ui-col-offset-8 { margin-left: 33.33333333%; } .deer-ui-col-7 { width: 29.16666667%; } .deer-ui-col-offset-7 { margin-left: 29.16666667%; } .deer-ui-col-6 { width: 25%; } .deer-ui-col-offset-6 { margin-left: 25%; } .deer-ui-col-5 { width: 20.83333333%; } .deer-ui-col-offset-5 { margin-left: 20.83333333%; } .deer-ui-col-4 { width: 16.66666667%; } .deer-ui-col-offset-4 { margin-left: 16.66666667%; } .deer-ui-col-3 { width: 12.5%; } .deer-ui-col-offset-3 { margin-left: 12.5%; } .deer-ui-col-2 { width: 8.33333333%; } .deer-ui-col-offset-2 { margin-left: 8.33333333%; } .deer-ui-col-1 { width: 4.16666667%; } .deer-ui-col-offset-1 { margin-left: 4.16666667%; } /** deer-ui 默认主题配置 */ .deer-ui-collapse { border: 1px solid #e8e8e8; border-radius: 4px; font-size: 14px; position: relative; } .deer-ui-collapse-item:not(:last-child) { border-bottom: 1px solid #e8e8e8; } .deer-ui-collapse-item-header { padding: 15px 20px; cursor: pointer; color: rgba(0, 0, 0, 0.8); background-color: #FAFAFA; border-bottom-left-radius: 4px; border-bottom-right-radius: 4px; } .deer-ui-collapse-item-header-disabled { color: rgba(0, 0, 0, 0.2); cursor: not-allowed; } .deer-ui-collapse-item-title { margin-left: 10px; display: inline-block; } .deer-ui-collapse-item-icon { display: inline-block; } .deer-ui-collapse-item-icon svg { -webkit-transition: 0.5s cubic-bezier(0.165, 0.84, 0.44, 1); transition: 0.5s cubic-bezier(0.165, 0.84, 0.44, 1); } .deer-ui-collapse-item-icon-right { float: right; } .deer-ui-collapse-item-icon-active svg { -webkit-transform: rotate(90deg); transform: rotate(90deg); } .deer-ui-collapse-item-content { padding: 20px; color: rgba(0, 0, 0, 0.65); border-bottom-left-radius: 4px; border-bottom-right-radius: 4px; background: white; overflow: hidden; -webkit-transition: all 0.4s; transition: all 0.4s; } .deer-ui-collapse-item-content-hide { padding-bottom: 0; padding-top: 0; height: 0; } /** deer-ui 默认主题配置 */ @-webkit-keyframes deer-ui-spin { 0% { -webkit-transform: rotate(0deg); transform: rotate(0deg); } 100% { -webkit-transform: rotate(360deg); transform: rotate(360deg); } } @keyframes deer-ui-spin { 0% { -webkit-transform: rotate(0deg); transform: rotate(0deg); } 100% { -webkit-transform: rotate(360deg); transform: rotate(360deg); } } @-webkit-keyframes deer-fade-in { from { opacity: 0; -webkit-transform: translate3d(0, -40px, 0); transform: translate3d(0, -40px, 0); } to { opacity: 1; -webkit-transform: scale(1) translate3d(0, 20px, 0); transform: scale(1) translate3d(0, 20px, 0); } } @keyframes deer-fade-in { from { opacity: 0; -webkit-transform: translate3d(0, -40px, 0); transform: translate3d(0, -40px, 0); } to { opacity: 1; -webkit-transform: scale(1) translate3d(0, 20px, 0); transform: scale(1) translate3d(0, 20px, 0); } } @-webkit-keyframes deer-fade-out { from { opacity: 1; -webkit-transform: translate3d(0, 20px, 0); transform: translate3d(0, 20px, 0); } to { opacity: 0; -webkit-transform: translate3d(0, -40px, 0); transform: translate3d(0, -40px, 0); } } @keyframes deer-fade-out { from { opacity: 1; -webkit-transform: translate3d(0, 20px, 0); transform: translate3d(0, 20px, 0); } to { opacity: 0; -webkit-transform: translate3d(0, -40px, 0); transform: translate3d(0, -40px, 0); } } @-webkit-keyframes deer-ui-select-open { from { opacity: 0; -webkit-transform: translate3d(0, -30px, 0); transform: translate3d(0, -30px, 0); } to { opacity: 1; -webkit-transform: scale(1) translate3d(0, 0, 0); transform: scale(1) translate3d(0, 0, 0); } } @keyframes deer-ui-select-open { from { opacity: 0; -webkit-transform: translate3d(0, -30px, 0); transform: translate3d(0, -30px, 0); } to { opacity: 1; -webkit-transform: scale(1) translate3d(0, 0, 0); transform: scale(1) translate3d(0, 0, 0); } } @-webkit-keyframes deer-ui-select-close { from { opacity: 1; -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } to { opacity: 0; -webkit-transform: translate3d(0, -15px, 0); transform: translate3d(0, -15px, 0); } } @keyframes deer-ui-select-close { from { opacity: 1; -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } to { opacity: 0; -webkit-transform: translate3d(0, -15px, 0); transform: translate3d(0, -15px, 0); } } .deer-ui-date-picker { position: relative; display: inline-block; width: 300px; } .deer-ui-date-picker-inner { position: relative; display: inline-block; width: 100%; } .deer-ui-date-picker-inner svg { -webkit-transform: rotate(0deg); transform: rotate(0deg); -webkit-transition: 0.5s cubic-bezier(0.165, 0.84, 0.44, 1); transition: 0.5s cubic-bezier(0.165, 0.84, 0.44, 1); } .deer-ui-date-picker-active .deer-ui-date-picker-arrow { -webkit-transform: rotate(180deg); transform: rotate(180deg); -webkit-transition: 0.5s cubic-bezier(0.165, 0.84, 0.44, 1); transition: 0.5s cubic-bezier(0.165, 0.84, 0.44, 1); } .deer-ui-date-picker-content { position: absolute; width: 300px; z-index: 10; height: auto; left: 0; top: 0; background: #fff; border: 1px solid #e8e8e8; -webkit-box-shadow: 0 4px 22px 0 rgba(15, 35, 95, 0.12); box-shadow: 0 4px 22px 0 rgba(15, 35, 95, 0.12); border-radius: 4px; -webkit-transform: scale(0); transform: scale(0); overflow-x: hidden; overflow-y: auto; margin-top: 8px; } .deer-ui-date-picker-open { -webkit-animation: deer-ui-select-open 0.5s cubic-bezier(0.165, 0.84, 0.44, 1) forwards; animation: deer-ui-select-open 0.5s cubic-bezier(0.165, 0.84, 0.44, 1) forwards; } .deer-ui-date-picker-close { -webkit-animation: deer-ui-select-close 0.5s cubic-bezier(0.165, 0.84, 0.44, 1) forwards; animation: deer-ui-select-close 0.5s cubic-bezier(0.165, 0.84, 0.44, 1) forwards; pointer-events: none; } .deer-ui-date-picker-header { padding: 15px 20px; color: #31c27c; font-weight: bold; } .deer-ui-date-picker-date { font-size: 16px; letter-spacing: 1px; margin-right: 10px; } .deer-ui-date-picker-switch { float: right; } .deer-ui-date-picker-switch > .deer-ui-date-picker-switch-group { cursor: pointer; margin: 0 5px; border: 1px solid #e8e8e8; border-radius: 50%; background-color: #FAFAFA; text-align: center; width: 25px; height: 25px; line-height: 25px; display: inline-block; -webkit-transition: all 0.5s cubic-bezier(0.165, 0.84, 0.44, 1); transition: all 0.5s cubic-bezier(0.165, 0.84, 0.44, 1); } .deer-ui-date-picker-switch > .deer-ui-date-picker-switch-group:hover { background-color: #31c27c; border-color: #31c27c; color: #fff; text-shadow: 0 1px 0 rgba(0, 0, 0, 0.1); } .deer-ui-date-picker-items { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -ms-flex-line-pack: center; align-content: center; -ms-flex-wrap: wrap; flex-wrap: wrap; } .deer-ui-date-picker-items .deer-ui-date-picker-item { -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; text-align: center; display: inline-block; width: 36px; height: 36px; line-height: 36px; border-radius: 50%; margin: 0 4px 4px 0; cursor: pointer; border: 1px solid transparent; -webkit-transition: all 0.5s cubic-bezier(0.165, 0.84, 0.44, 1); transition: all 0.5s cubic-bezier(0.165, 0.84, 0.44, 1); } .deer-ui-date-picker-items .deer-ui-date-picker-item:not(.deer-ui-date-picker-day-title):not(.deer-ui-date-picker-last-month):not(.deer-ui-date-picker-next-month):not(.deer-ui-date-picker-disabled-date):hover { border: 1px solid #31c27c; } .deer-ui-date-picker-button { width: 22px; height: 22px; line-height: 22px; border-radius: 50%; background-color: #f5f5f5; display: inline-block; text-align: center; cursor: pointer; } .deer-ui-date-picker-button-icon { color: #31c27c; } .deer-ui-date-picker-disabled-date { background-color: #f5f5f5; color: rgba(0, 0, 0, 0.2); } .deer-ui-date-picker-disabled-date.deer-ui-date-picker-item { cursor: not-allowed; border-radius: 4px; -webkit-transition: none !important; transition: none !important; } .deer-ui-date-picker-last-month, .deer-ui-date-picker-next-month { color: rgba(0, 0, 0, 0.2); } .deer-ui-date-picker-current-month { border: 1px solid transparent; border-radius: 4px; } .deer-ui-date-picker-selected-date { border-color: #31c27c; background-color: #31c27c; color: #fff; text-shadow: 0 1px 0 rgba(0, 0, 0, 0.1); } .deer-ui-date-picker-footer { margin-right: 20px; padding: 10px 0px; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: end; -ms-flex-pack: end; justify-content: flex-end; } .deer-ui-date-picker-footer-today, .deer-ui-date-picker-footer-clear { cursor: pointer; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; } .deer-ui-date-picker-footer-today { color: #31c27c; -webkit-transition: color 0.5s cubic-bezier(0.165, 0.84, 0.44, 1); transition: color 0.5s cubic-bezier(0.165, 0.84, 0.44, 1); } .deer-ui-date-picker-footer-today:hover { color: #53d395; } .deer-ui-date-picker-footer-clear { color: #31c27c; -webkit-transition: color 0.5s cubic-bezier(0.165, 0.84, 0.44, 1); transition: color 0.5s cubic-bezier(0.165, 0.84, 0.44, 1); margin-left: 10px; } .deer-ui-date-picker-footer-clear:hover { color: #53d395; } .deer-ui-date-picker-footer-extra { margin-top: 10px; } .deer-ui-date-picker-footer.deer-ui-date-picker-has-border { border-top: 1px solid #e8e8e8; } /** deer-ui 默认主题配置 */ .deer-ui-divider-vertical { height: 12px; display: inline-block; border-right: 1px solid #e8e8e8; vertical-align: middle; } .deer-ui-divider-vertical.dashed { border-right-style: dashed; } .deer-ui-divider-horizontal { margin: 10px 0px; width: 100%; border-bottom: 1px solid #e8e8e8; } .deer-ui-divider-horizontal.dashed { border-bottom-style: dashed; } .deer-ui-divider-orientation { width: 100%; padding: 10px 20px; font-size: 16px; white-space: nowrap; font-weight: 500; display: table; } .deer-ui-divider-orientation b { height: 1px; width: 50%; display: table-cell; border-top: 1px solid #e8e8e8; position: relative; top: 50%; -webkit-transform: translateY(50%); transform: translateY(50%); } .deer-ui-divider-orientation-center { text-align: center; } .deer-ui-divider-orientation-left b:first-child { width: 10%; } .deer-ui-divider-orientation-left b:last-child { width: 90%; } .deer-ui-divider-orientation-right b:first-child { width: 90%; } .deer-ui-divider-orientation-right b:last-child { width: 10%; } .deer-ui-divider-orientation-content { text-align: center; padding: 0 20px; font-size: 16px; white-space: nowrap; font-weight: bold; } /** deer-ui 默认主题配置 */ .deer-ui-empty { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: center; -ms-flex-align: center; align-items: center; border: 1px solid #d9d9d9; border-radius: 4px; background-color: #fff; } .deer-ui-empty-icon { margin-bottom: 12px; font-size: 50px; height: 55px; } .deer-ui-empty-des { font-size: 14px; color: rgba(0, 0, 0, 0.65); margin-bottom: 12px; } .deer-ui-empty svg { stroke-width: 1px; } .icon { width: 1em; height: 1em; vertical-align: -0.15em; fill: currentColor; overflow: hidden; } /** deer-ui 默认主题配置 */ .text-center { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: center; -ms-flex-align: center; align-items: center; } .deer-ui-input { font-variant: tabular-nums; -webkit-box-sizing: border-box; box-sizing: border-box; margin: 0; list-style: none; position: relative; display: inline-block; padding: 10px; width: 100%; height: 40px; font-size: 14px; line-height: 1.5; color: rgba(0, 0, 0, 0.65); background-color: #fff; background-image: none; border: 1px solid #e8e8e8; border-radius: 4px; -webkit-transition: all 0.5s; transition: all 0.5s; outline: none; } .deer-ui-input:active, .deer-ui-input:hover, .deer-ui-input:focus { border-color: #31c27c; outline: none; -webkit-box-shadow: 0 0 0 2px rgba(49, 194, 124, 0.2); box-shadow: 0 0 0 2px rgba(49, 194, 124, 0.2); } .deer-ui-input-disabled { cursor: not-allowed; color: rgba(0, 0, 0, 0.2); background-color: #f5f5f5; } .deer-ui-input-disabled:active, .deer-ui-input-disabled:hover, .deer-ui-input-disabled:focus { border-color: #e8e8e8; outline: none; -webkit-box-shadow: none; box-shadow: none; } .deer-ui-input-small { height: 30px; } .deer-ui-input-large { height: 50px; } .deer-ui-input-wrapper { position: relative; } .deer-ui-input-wrapper.deer-ui-input-has-prefix .deer-ui-input { padding-left: 30px; } .deer-ui-input-wrapper.deer-ui-input-has-suffix .deer-ui-input { padding-right: 30px; } .deer-ui-input-prefix, .deer-ui-input-suffix { position: absolute; top: 50%; -webkit-transform: translateY(-50%); transform: translateY(-50%); z-index: 10; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: center; -ms-flex-align: center; align-items: center; cursor: pointer; } .deer-ui-input-prefix, .deer-ui-input-suffix, .deer-ui-input-prefix svg, .deer-ui-input-suffix svg { color: rgba(0, 0, 0, 0.2); font-size: 14px; } .deer-ui-input-prefix { left: 10px; } .deer-ui-input-suffix { right: 10px; } .deer-ui-input-password-suffix svg { color: rgba(0, 0, 0, 0.65); } /** deer-ui 默认主题配置 */ .text-center { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: center; -ms-flex-align: center; align-items: center; } .deer-ui-layout { border: 1px solid #e8e8e8; width: 1200px; padding: 15px; margin: 0 auto; } .deer-ui-layout::before, .deer-ui-layout::after { content: ''; clear: both; zoom: 1; } .deer-ui-layout-center { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: center; -ms-flex-align: center; align-items: center; } /** deer-ui 默认主题配置 */ @-webkit-keyframes deer-ui-spin { 0% { -webkit-transform: rotate(0deg); transform: rotate(0deg); } 100% { -webkit-transform: rotate(360deg); transform: rotate(360deg); } } @keyframes deer-ui-spin { 0% { -webkit-transform: rotate(0deg); transform: rotate(0deg); } 100% { -webkit-transform: rotate(360deg); transform: rotate(360deg); } } @-webkit-keyframes deer-fade-in { from { opacity: 0; -webkit-transform: translate3d(0, -40px, 0); transform: translate3d(0, -40px, 0); } to { opacity: 1; -webkit-transform: scale(1) translate3d(0, 20px, 0); transform: scale(1) translate3d(0, 20px, 0); } } @keyframes deer-fade-in { from { opacity: 0; -webkit-transform: translate3d(0, -40px, 0); transform: translate3d(0, -40px, 0); } to { opacity: 1; -webkit-transform: scale(1) translate3d(0, 20px, 0); transform: scale(1) translate3d(0, 20px, 0); } } @-webkit-keyframes deer-fade-out { from { opacity: 1; -webkit-transform: translate3d(0, 20px, 0); transform: translate3d(0, 20px, 0); } to { opacity: 0; -webkit-transform: translate3d(0, -40px, 0); transform: translate3d(0, -40px, 0); } } @keyframes deer-fade-out { from { opacity: 1; -webkit-transform: translate3d(0, 20px, 0); transform: translate3d(0, 20px, 0); } to { opacity: 0; -webkit-transform: translate3d(0, -40px, 0); transform: translate3d(0, -40px, 0); } } @-webkit-keyframes deer-ui-select-open { from { opacity: 0; -webkit-transform: translate3d(0, -30px, 0); transform: translate3d(0, -30px, 0); } to { opacity: 1; -webkit-transform: scale(1) translate3d(0, 0, 0); transform: scale(1) translate3d(0, 0, 0); } } @keyframes deer-ui-select-open { from { opacity: 0; -webkit-transform: translate3d(0, -30px, 0); transform: translate3d(0, -30px, 0); } to { opacity: 1; -webkit-transform: scale(1) translate3d(0, 0, 0); transform: scale(1) translate3d(0, 0, 0); } } @-webkit-keyframes deer-ui-select-close { from { opacity: 1; -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } to { opacity: 0; -webkit-transform: translate3d(0, -15px, 0); transform: translate3d(0, -15px, 0); } } @keyframes deer-ui-select-close { from { opacity: 1; -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } to { opacity: 0; -webkit-transform: translate3d(0, -15px, 0); transform: translate3d(0, -15px, 0); } } .text-center { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: center; -ms-flex-align: center; align-items: center; } .deer-ui-message { position: fixed; top: 0; left: 0; right: 0; bottom: 0; margin: 0 auto; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-sizing: content-box; box-sizing: content-box; z-index: 1000; cursor: pointer; text-align: center; font-size: 14px; padding: 4px; -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); border-radius: 6px; width: 200px; height: 30px; } .deer-ui-message.message-open { pointer-events: none; -webkit-animation: deer-fade-in 0.5s cubic-bezier(0.165, 0.84, 0.44, 1) forwards; animation: deer-fade-in 0.5s cubic-bezier(0.165, 0.84, 0.44, 1) forwards; } .deer-ui-message.message-close { -webkit-animation: deer-fade-out 0.5s cubic-bezier(0.165, 0.84, 0.44, 1) forwards; animation: deer-fade-out 0.5s cubic-bezier(0.165, 0.84, 0.44, 1) forwards; pointer-events: none; } .deer-ui-message.deer-ui-message-success { color: #fff; background-color: #3bdd15; border: 1px solid #3bdd15; } .deer-ui-message.deer-ui-message-error { color: #fff; background-color: #fa5757; border: 1px solid #fa5757; } .deer-ui-message.deer-ui-message-warning { color: #fff; background-color: #fcac49; border: 1px solid #fcac49; } .deer-ui-message.deer-ui-message-info { color: #fff; background-color: #7abcfe; border: 1px solid #7abcfe; } .deer-ui-message.deer-ui-message-primary { color: #fff; background-color: #3ece89; border: 1px solid #3ece89; } .deer-ui-message.deer-ui-message-primary svg { -webkit-animation: deer-ui-spin 1.5s linear infinite; animation: deer-ui-spin 1.5s linear infinite; } .deer-ui-message.deer-ui-message-theme-dark { background: rgba(0, 0, 0, 0.5); color: #fff; border: none; } .deer-ui-message-icon { margin-right: 10px; font-size: 14px; vertical-align: middle; margin-top: 2px; } .NotFound { height: 100%; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: center; -ms-flex-align: center; align-items: center; color: #7AABDF; } .NotFound .NotFound-title { font-size: 100px; } .NotFound .NotFound-item { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: horizontal; -webkit-box-direction: normal; -ms-flex-direction: row; flex-direction: row; width: 20px; height: 80px; margin-left: 40px; font-size: 20px; font-family: '宋体'; } .NotFound .NotFound-item :first-child { margin-top: -60px; font-weight: bold; } .NotFound .NotFound-item :last-child { margin-top: 130px; font-weight: bold; } .NotFound .NotFound-item .NotFound-item-first { margin-right: 20px; margin-top: -40px; } .NotFound .NotFound-item .NotFound-item-second { margin-right: 20px; margin-top: 20px; } /** deer-ui 默认主题配置 */ @-webkit-keyframes deer-ui-spin { 0% { -webkit-transform: rotate(0deg); transform: rotate(0deg); } 100% { -webkit-transform: rotate(360deg); transform: rotate(360deg); } } @keyframes deer-ui-spin { 0% { -webkit-transform: rotate(0deg); transform: rotate(0deg); } 100% { -webkit-transform: rotate(360deg); transform: rotate(360deg); } } @-webkit-keyframes deer-fade-in { from { opacity: 0; -webkit-transform: translate3d(0, -40px, 0); transform: translate3d(0, -40px, 0); } to { opacity: 1; -webkit-transform: scale(1) translate3d(0, 20px, 0); transform: scale(1) translate3d(0, 20px, 0); } } @keyframes deer-fade-in { from { opacity: 0; -webkit-transform: translate3d(0, -40px, 0); transform: translate3d(0, -40px, 0); } to { opacity: 1; -webkit-transform: scale(1) translate3d(0, 20px, 0); transform: scale(1) translate3d(0, 20px, 0); } } @-webkit-keyframes deer-fade-out { from { opacity: 1; -webkit-transform: translate3d(0, 20px, 0); transform: translate3d(0, 20px, 0); } to { opacity: 0; -webkit-transform: translate3d(0, -40px, 0); transform: translate3d(0, -40px, 0); } } @keyframes deer-fade-out { from { opacity: 1; -webkit-transform: translate3d(0, 20px, 0); transform: translate3d(0, 20px, 0); } to { opacity: 0; -webkit-transform: translate3d(0, -40px, 0); transform: translate3d(0, -40px, 0); } } @-webkit-keyframes deer-ui-select-open { from { opacity: 0; -webkit-transform: translate3d(0, -30px, 0); transform: translate3d(0, -30px, 0); } to { opacity: 1; -webkit-transform: scale(1) translate3d(0, 0, 0); transform: scale(1) translate3d(0, 0, 0); } } @keyframes deer-ui-select-open { from { opacity: 0; -webkit-transform: translate3d(0, -30px, 0); transform: translate3d(0, -30px, 0); } to { opacity: 1; -webkit-transform: scale(1) translate3d(0, 0, 0); transform: scale(1) translate3d(0, 0, 0); } } @-webkit-keyframes deer-ui-select-close { from { opacity: 1; -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } to { opacity: 0; -webkit-transform: translate3d(0, -15px, 0); transform: translate3d(0, -15px, 0); } } @keyframes deer-ui-select-close { from { opacity: 1; -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } to { opacity: 0; -webkit-transform: translate3d(0, -15px, 0); transform: translate3d(0, -15px, 0); } } .text-center { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: center; -ms-flex-align: center; align-items: center; } .deer-ui-progress { width: 100%; height: 10px; border-radius: 20px; overflow: hidden; position: relative; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; -webkit-box-align: center; -ms-flex-align: center; align-items: center; } .deer-ui-progress-enter { width: 100%; height: inherit; background: #FAFAFA; overflow: hidden; border-radius: 20px; } .deer-ui-progress-num { margin-left: 10px; font-size: 12px; color: rgba(0, 0, 0, 0.65); } .deer-ui-progress-bg { height: inherit; border-radius: 20px; background-color: #31c27c; -webkit-transition: width 0.5s cubic-bezier(0.165, 0.84, 0.44, 1); transition: width 0.5s cubic-bezier(0.165, 0.84, 0.44, 1); } .deer-ui-progress-bg-animation { background-size: 15px 15px; -webkit-animation: panoramic 15s linear infinite; animation: panoramic 15s linear infinite; } .deer-ui-progress-default .deer-ui-progress-bg { background-color: #31c27c; } .deer-ui-progress-default .deer-ui-progress-bg-animation { background: -webkit-repeating-linear-gradient(135deg, #FAFAFA 25%, #31c27c 0, #31c27c 50%, #FAFAFA 0, #FAFAFA 75%, #31c27c 0); background: repeating-linear-gradient(-45deg, #FAFAFA 25%, #31c27c 0, #31c27c 50%, #FAFAFA 0, #FAFAFA 75%, #31c27c 0); background-size: 15px 15px; } .deer-ui-progress-success .deer-ui-progress-bg { background-color: #35C613; } .deer-ui-progress-success .deer-ui-progress-bg-animation { background: -webkit-repeating-linear-gradient(135deg, #FAFAFA 25%, #35C613 0, #35C613 50%, #FAFAFA 0, #FAFAFA 75%, #35C613 0); background: repeating-linear-gradient(-45deg, #FAFAFA 25%, #35C613 0, #35C613 50%, #FAFAFA 0, #FAFAFA 75%, #35C613 0); background-size: 15px 15px; } .deer-ui-progress-progress .deer-ui-progress-bg { background-color: #61affe; } .deer-ui-progress-progress .deer-ui-progress-bg-animation { background: -webkit-repeating-linear-gradient(135deg, #FAFAFA 25%, #61affe 0, #61affe 50%, #FAFAFA 0, #FAFAFA 75%, #61affe 0); background: repeating-linear-gradient(-45deg, #FAFAFA 25%, #61affe 0, #61affe 50%, #FAFAFA 0, #FAFAFA 75%, #61affe 0); background-size: 15px 15px; } .deer-ui-progress-warning .deer-ui-progress-bg { background-color: #fca130; } .deer-ui-progress-warning .deer-ui-progress-bg-animation { background: -webkit-repeating-linear-gradient(135deg, #FAFAFA 25%, #fca130 0, #fca130 50%, #FAFAFA 0, #FAFAFA 75%, #fca130 0); background: repeating-linear-gradient(-45deg, #FAFAFA 25%, #fca130 0, #fca130 50%, #FAFAFA 0, #FAFAFA 75%, #fca130 0); background-size: 15px 15px; } .deer-ui-progress-error .deer-ui-progress-bg { background-color: #f93e3e; } .deer-ui-progress-error .deer-ui-progress-bg-animation { background: -webkit-repeating-linear-gradient(135deg, #FAFAFA 25%, #f93e3e 0, #f93e3e 50%, #FAFAFA 0, #FAFAFA 75%, #f93e3e 0); background: repeating-linear-gradient(-45deg, #FAFAFA 25%, #f93e3e 0, #f93e3e 50%, #FAFAFA 0, #FAFAFA 75%, #f93e3e 0); background-size: 15px 15px; } .deer-ui-progress-circle circle { -webkit-transition: stroke-dasharray 0.5s cubic-bezier(0.165, 0.84, 0.44, 1); transition: stroke-dasharray 0.5s cubic-bezier(0.165, 0.84, 0.44, 1); stroke-width: 6px; fill: none; stroke-linecap: round; stroke-linejoin: round; } .deer-ui-progress-circle-wrapper { position: relative; display: inline-block; overflow: hidden; } .deer-ui-progress-circle-percent { position: absolute; left: 50%; top: 50%; -webkit-transform: translate3d(-50%, -50%, 0); transform: translate3d(-50%, -50%, 0); font-size: 20px; z-index: 1; color: rgba(0, 0, 0, 0.65); } .deer-ui-progress-circle-bg { stroke: #FAFAFA; } .deer-ui-progress-circle-stroke-default { stroke: #31c27c; } .deer-ui-progress-circle-stroke-error { stroke: #f93e3e; } .deer-ui-progress-circle-stroke-warning { stroke: #fca130; } .deer-ui-progress-circle-stroke-success { stroke: #35C613; } .deer-ui-progress-circle-stroke-progress { stroke: #61affe; } @-webkit-keyframes panoramic { to { background-position: 200%; } } @keyframes panoramic { to { background-position: 200%; } } /** deer-ui 默认主题配置 */ .deer-ui-radio { font-size: 14px; color: rgba(0, 0, 0, 0.65); outline: none; display: inline-block; line-height: 1; vertical-align: sub; white-space: nowrap; } .deer-ui-radio-input { -webkit-box-sizing: border-box; box-sizing: border-box; padding: 0; position: absolute; top: 0; left: 0; bottom: 0; right: 0; opacity: 0; z-index: 1; } .deer-ui-radio-inner { display: block; width: 15px; height: 15px; border: 1px solid #e8e8e8; border-radius: 50%; margin-right: 8px; -webkit-transition: all 0.5s cubic-bezier(0.165, 0.84, 0.44, 1); transition: all 0.5s cubic-bezier(0.165, 0.84, 0.44, 1); position: relative; } .deer-ui-radio-inner::after { content: " "; position: absolute; width: 9px; height: 9px; border-radius: 50%; background-color: #31c27c; top: 3px; left: 3px; opacity: 0; -webkit-transition: all 0.5s cubic-bezier(0.165, 0.84, 0.44, 1); transition: all 0.5s cubic-bezier(0.165, 0.84, 0.44, 1); -webkit-transform: scale(0); transform: scale(0); } .deer-ui-radio-disabled .deer-ui-radio-inner { border-color: #e8e8e8 !important; background-color: #f5f5f5 !important; } .deer-ui-radio-disabled .deer-ui-radio-inner::after { background-color: rgba(0, 0, 0, 0.2); } .deer-ui-radio-disabled .deer-ui-radio-input { cursor: not-allowed; } .deer-ui-radio-disabled > span { cursor: not-allowed; color: rgba(0, 0, 0, 0.2); } .deer-ui-radio-checked .deer-ui-radio-inner { border-color: #31c27c; } .deer-ui-radio-checked .deer-ui-radio-inner::after { opacity: 1; -webkit-transform: scale(1); transform: scale(1); } .deer-ui-radio-children { vertical-align: middle; } .deer-ui-radio-wrapper { color: rgba(0, 0, 0, 0.65); font-size: 14px; -webkit-box-sizing: border-box; box-sizing: border-box; margin: 0px 10px 0px 0px; padding: 0; display: inline-block; position: relative; cursor: pointer; -webkit-transition: all 0.5s cubic-bezier(0.165, 0.84, 0.44, 1); transition: all 0.5s cubic-bezier(0.165, 0.84, 0.44, 1); } /** deer-ui 默认主题配置 */ .deer-ui-row { display: -webkit-box; display: -ms-flexbox; display: flex; -ms-flex-wrap: wrap; flex-wrap: wrap; } /** deer-ui 默认主题配置 */ @-webkit-keyframes deer-ui-spin { 0% { -webkit-transform: rotate(0deg); transform: rotate(0deg); } 100% { -webkit-transform: rotate(360deg); transform: rotate(360deg); } } @keyframes deer-ui-spin { 0% { -webkit-transform: rotate(0deg); transform: rotate(0deg); } 100% { -webkit-transform: rotate(360deg); transform: rotate(360deg); } } @-webkit-keyframes deer-fade-in { from { opacity: 0; -webkit-transform: translate3d(0, -40px, 0); transform: translate3d(0, -40px, 0); } to { opacity: 1; -webkit-transform: scale(1) translate3d(0, 20px, 0); transform: scale(1) translate3d(0, 20px, 0); } } @keyframes deer-fade-in { from { opacity: 0; -webkit-transform: translate3d(0, -40px, 0); transform: translate3d(0, -40px, 0); } to { opacity: 1; -webkit-transform: scale(1) translate3d(0, 20px, 0); transform: scale(1) translate3d(0, 20px, 0); } } @-webkit-keyframes deer-fade-out { from { opacity: 1; -webkit-transform: translate3d(0, 20px, 0); transform: translate3d(0, 20px, 0); } to { opacity: 0; -webkit-transform: translate3d(0, -40px, 0); transform: translate3d(0, -40px, 0); } } @keyframes deer-fade-out { from { opacity: 1; -webkit-transform: translate3d(0, 20px, 0); transform: translate3d(0, 20px, 0); } to { opacity: 0; -webkit-transform: translate3d(0, -40px, 0); transform: translate3d(0, -40px, 0); } } @-webkit-keyframes deer-ui-select-open { from { opacity: 0; -webkit-transform: translate3d(0, -30px, 0); transform: translate3d(0, -30px, 0); } to { opacity: 1; -webkit-transform: scale(1) translate3d(0, 0, 0); transform: scale(1) translate3d(0, 0, 0); } } @keyframes deer-ui-select-open { from { opacity: 0; -webkit-transform: translate3d(0, -30px, 0); transform: translate3d(0, -30px, 0); } to { opacity: 1; -webkit-transform: scale(1) translate3d(0, 0, 0); transform: scale(1) translate3d(0, 0, 0); } } @-webkit-keyframes deer-ui-select-close { from { opacity: 1; -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } to { opacity: 0; -webkit-transform: translate3d(0, -15px, 0); transform: translate3d(0, -15px, 0); } } @keyframes deer-ui-select-close { from { opacity: 1; -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } to { opacity: 0; -webkit-transform: translate3d(0, -15px, 0); transform: translate3d(0, -15px, 0); } } .deer-ui-select { position: relative; display: inline-block; width: 200px; } .deer-ui-select-inner { position: relative; display: inline-block; width: 100%; } .deer-ui-select-inner svg { -webkit-transform: rotate(0deg); transform: rotate(0deg); -webkit-transition: 0.5s cubic-bezier(0.165, 0.84, 0.44, 1); transition: 0.5s cubic-bezier(0.165, 0.84, 0.44, 1); } .deer-ui-select-open { -webkit-animation: deer-ui-select-open 0.5s cubic-bezier(0.165, 0.84, 0.44, 1) forwards; animation: deer-ui-select-open 0.5s cubic-bezier(0.165, 0.84, 0.44, 1) forwards; } .deer-ui-select-close { -webkit-animation: deer-ui-select-close 0.5s cubic-bezier(0.165, 0.84, 0.44, 1) forwards; animation: deer-ui-select-close 0.5s cubic-bezier(0.165, 0.84, 0.44, 1) forwards; pointer-events: none; } .deer-ui-select-active .deer-ui-select-arrow { -webkit-transform: rotate(180deg); transform: rotate(180deg); -webkit-transition: 0.5s cubic-bezier(0.165, 0.84, 0.44, 1); transition: 0.5s cubic-bezier(0.165, 0.84, 0.44, 1); } .deer-ui-select-loading { -webkit-animation: deer-ui-spin 1.5s linear infinite; animation: deer-ui-spin 1.5s linear infinite; } .deer-ui-select-content { width: 100%; max-height: 200px; overflow-x: hidden; overflow-y: auto; position: absolute; z-index: 10; left: 0; top: 0; margin-top: 5px; -webkit-transform: scale(0); transform: scale(0); background: #fff; border: 1px solid #e8e8e8; -webkit-box-shadow: 0 4px 22px 0 rgba(15, 35, 95, 0.12); box-shadow: 0 4px 22px 0 rgba(15, 35, 95, 0.12); border-radius: 4px; } .deer-ui-select-option { width: 100%; border-bottom: 1px solid #e8e8e8; background: #fff; -webkit-transition: all 0.5s cubic-bezier(0.165, 0.84, 0.44, 1); transition: all 0.5s cubic-bezier(0.165, 0.84, 0.44, 1); cursor: pointer; text-align: left; overflow: hidden; padding: 8px 5px; color: rgba(0, 0, 0, 0.65); font-size: 14px; } .deer-ui-select-option:hover { border-color: transparent; background-color: rgba(49, 194, 124, 0.2); } .deer-ui-select-option:last-child { border-bottom: none; } .deer-ui-select-option-selected { color: #fff; background-color: #31c27c; border-color: #31c27c; border-bottom: 1px solid #31c27c; text-shadow: 0 1px 0 rgba(0, 0, 0, 0.1); } .deer-ui-select-option-selected:hover { border-color: transparent; background-color: #31c27c; } .deer-ui-select-option-disabled { background-color: #f5f5f5; cursor: not-allowed; color: rgba(0, 0, 0, 0.2); } .deer-ui-select-option-disabled:hover { border-color: transparent; background-color: #f5f5f5; } /** deer-ui 默认主题配置 */ @-webkit-keyframes deer-ui-spin { 0% { -webkit-transform: rotate(0deg); transform: rotate(0deg); } 100% { -webkit-transform: rotate(360deg); transform: rotate(360deg); } } @keyframes deer-ui-spin { 0% { -webkit-transform: rotate(0deg); transform: rotate(0deg); } 100% { -w