.area-zoom-in-top-enter-active, .area-zoom-in-top-leave-active { opacity: 1; transform: scaleY(1); } .area-zoom-in-top-enter, .area-zoom-in-top-leave-active { opacity: 0; transform: scaleY(0); } .area-select { box-sizing: border-box; margin: 0; padding: 0; color: rgba(0, 0, 0, 0.65); font-size: 14px; font-variant: tabular-nums; line-height: 1.5; list-style: none; font-feature-settings: 'tnum'; position: relative; outline: 0; display: block; background-color: #fff; border: 1px solid #d9d9d9; border-top-width: 1.02px; border-radius: 4px; outline: none; transition: all 0.3s cubic-bezier(0.645, 0.045, 0.355, 1); -webkit-user-select: none; -ms-user-select: none; user-select: none; } .area-select-wrap .area-select { display: inline-block; } .area-select * { box-sizing: border-box; } .area-select:hover { border-color: #40a9ff; border-right-width: 1px !important; outline: 0; } .area-select:active { box-shadow: 0 0 0 2px rgba(24, 144, 255, 0.2); } .area-select.small { width: 126px; } .area-select.medium { width: 160px; } .area-select.large { width: 194px; } .area-select.is-disabled { background: #eceff5; cursor: not-allowed; } .area-select.is-disabled:hover { border-color: #e1e2e6; } .area-select.is-disabled .area-selected-trigger { cursor: not-allowed; } .area-select .area-selected-trigger { position: relative; display: block; font-size: 14px; cursor: pointer; margin: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; height: 100%; padding: 8px 20px 7px 12px; } .area-select .area-select-icon { position: absolute; top: 50%; margin-top: -2px; right: 6px; content: ""; width: 0; height: 0; border: 6px solid transparent; border-top-color: rgba(0, 0, 0, 0.25); transition: all .3s linear; transform-origin: center; } .area-select .area-select-icon.active { margin-top: -8px; transform: rotate(180deg); } .area-selectable-list-wrap { position: absolute; width: 100%; max-height: 275px; z-index: 15000; background-color: #fff; box-sizing: border-box; overflow-x: auto; margin: 2px 0; border-radius: 4px; outline: none; box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15); transition: opacity 0.15s, transform 0.3s !important; transform-origin: center top !important; } .area-selectable-list { position: relative; margin: 0; padding: 6px 0; width: 100%; font-size: 14px; color: #565656; list-style: none; } .area-selectable-list .area-select-option { position: relative; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; cursor: pointer; padding: 0 15px 0 10px; height: 32px; line-height: 32px; } .area-selectable-list .area-select-option.hover { background-color: #e6f7ff; } .area-selectable-list .area-select-option.selected { color: rgba(0, 0, 0, 0.65); font-weight: 600; background-color: #efefef; } .cascader-menu-list-wrap { position: absolute; white-space: nowrap; z-index: 15000; background-color: #fff; box-sizing: border-box; overflow: hidden; font-size: 0; margin: 2px 0; border-radius: 4px; outline: none; box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15); transition: opacity 0.15s, transform 0.3s !important; transform-origin: center top !important; } .cascader-menu-list { position: relative; margin: 0; font-size: 14px; color: #565656; padding: 6px 0; list-style: none; display: inline-block; height: 204px; overflow-x: hidden; overflow-y: auto; min-width: 160px; vertical-align: top; background-color: #fff; border-right: 1px solid #e4e7ed; } .cascader-menu-list:last-child { border-right: none; } .cascader-menu-list .cascader-menu-option { position: relative; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; cursor: pointer; padding: 0 15px 0 10px; height: 32px; line-height: 32px; } .cascader-menu-list .cascader-menu-option.hover, .cascader-menu-list .cascader-menu-option:hover { background-color: #e6f7ff; } .cascader-menu-list .cascader-menu-option.selected { color: rgba(0, 0, 0, 0.65); font-weight: 600; background-color: #efefef; } .cascader-menu-list .cascader-menu-option.cascader-menu-extensible:after { position: absolute; top: 50%; margin-top: -4px; right: 5px; content: ""; width: 0; height: 0; border: 4px solid transparent; border-left-color: #a1a4ad; } .cascader-menu-list::-webkit-scrollbar, .area-selectable-list-wrap::-webkit-scrollbar { width: 8px; background: transparent; } .area-selectable-list-wrap::-webkit-scrollbar-button:vertical:decremen, .area-selectable-list-wrap::-webkit-scrollbar-button:vertical:end:decrement, .area-selectable-list-wrap::-webkit-scrollbar-button:vertical:increment, .area-selectable-list-wrap::-webkit-scrollbar-button:vertical:start:increment, .cascader-menu-list::-webkit-scrollbar-button:vertical:decremen, .cascader-menu-list::-webkit-scrollbar-button:vertical:end:decrement, .cascader-menu-list::-webkit-scrollbar-button:vertical:increment, .cascader-menu-list::-webkit-scrollbar-button:vertical:start:increment { display: none; } .cascader-menu-list::-webkit-scrollbar-thumb:vertical, .area-selectable-list-wrap::-webkit-scrollbar-thumb:vertical { background-color: #b8b8b8; border-radius: 4px; } .cascader-menu-list::-webkit-scrollbar-thumb:vertical:hover, .area-selectable-list-wrap::-webkit-scrollbar-thumb:vertical:hover { background-color: #777; }