yu.css.ui
Version:
纯CSS通用UI模块和组件
6,271 lines • 188 kB
CSS
@charset "UTF-8";
@font-face {
font-family: "iconfont";
src: url("/dist/iconfont/iconfont.eot?t=1545884521797");
/* IE9*/
src: url("/dist/iconfont/iconfont.eot?t=1545884521797#iefix") format("embedded-opentype"), url("data:application/x-font-woff;charset=utf-8;base64,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") format("woff"), url("/dist/iconfont/iconfont.ttf?t=1545884521797") format("truetype"), url("/dist/iconfont/iconfont.svg?t=1545884521797#iconfont") format("svg");
/* iOS 4.1- */ }
.iconfont {
font-family: "iconfont" !important;
font-size: 16px;
font-style: normal;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale; }
.icon-add:before {
content: "\e601"; }
.icon-add-circle:before {
content: "\e602"; }
.icon-accessory:before {
content: "\e603"; }
.icon-add-circle-o:before {
content: "\e604"; }
.icon-angle-down:before {
content: "\e607"; }
.icon-angle-right:before {
content: "\e608"; }
.icon-angle-left:before {
content: "\e609"; }
.icon-angle-up:before {
content: "\e60a"; }
.icon-camera:before {
content: "\e619"; }
.icon-calender:before {
content: "\e61a"; }
.icon-check-circle:before {
content: "\e61e"; }
.icon-check:before {
content: "\e61f"; }
.icon-close:before {
content: "\e622"; }
.icon-close-circle:before {
content: "\e623"; }
.icon-clock:before {
content: "\e624"; }
.icon-comment:before {
content: "\e627"; }
.icon-cog-o:before {
content: "\e628"; }
.icon-comment-o:before {
content: "\e629"; }
.icon-download:before {
content: "\e631"; }
.icon-edit:before {
content: "\e634"; }
.icon-eye:before {
content: "\e635"; }
.icon-filter:before {
content: "\e639"; }
.icon-heart:before {
content: "\e644"; }
.icon-heart-o:before {
content: "\e645"; }
.icon-home:before {
content: "\e646"; }
.icon-home-o:before {
content: "\e647"; }
.icon-information:before {
content: "\e648"; }
.icon-information-o:before {
content: "\e649"; }
.icon-link:before {
content: "\e64a"; }
.icon-location:before {
content: "\e64b"; }
.icon-minus-circle:before {
content: "\e650"; }
.icon-minus-circle-o:before {
content: "\e652"; }
.icon-picture:before {
content: "\e65a"; }
.icon-search:before {
content: "\e660"; }
.icon-search-o:before {
content: "\e661"; }
.icon-star:before {
content: "\e666"; }
.icon-star-o:before {
content: "\e667"; }
.icon-tag:before {
content: "\e669"; }
.icon-update:before {
content: "\e66e"; }
.icon-user:before {
content: "\e66f"; }
.icon-user-o:before {
content: "\e670"; }
.icon-trash:before {
content: "\e672"; }
.icon-warning-circle-o:before {
content: "\e674"; }
.icon-warning-circle:before {
content: "\e675"; }
.icon-warning-triangel:before {
content: "\e676"; }
.icon-angle-double-down:before {
content: "\e67d"; }
.icon-angle-double-right:before {
content: "\e67e"; }
.icon-angle-double-left:before {
content: "\e67f"; }
.icon-angle-double-up:before {
content: "\e680"; }
.icon-download2:before {
content: "\e68a"; }
.icon-female:before {
content: "\e68c"; }
.icon-link1:before {
content: "\e697"; }
.icon-option:before {
content: "\e69c"; }
.icon-rank:before {
content: "\e6a2"; }
.icon-upload:before {
content: "\e6ae"; }
.icon-yuren:before {
content: "\e6b7"; }
.icon-eye-close:before {
content: "\e6b8"; }
.icon-f-audio:before {
content: "\e6be"; }
.icon-f-archive:before {
content: "\e6bf"; }
.icon-f-file:before {
content: "\e6c0"; }
.icon-f-image:before {
content: "\e6c1"; }
.icon-f-pdf:before {
content: "\e6c2"; }
.icon-f-excel:before {
content: "\e6c3"; }
.icon-f-powerpoint:before {
content: "\e6c4"; }
.icon-f-word:before {
content: "\e6c5"; }
.icon-f-text:before {
content: "\e6c6"; }
.icon-loading:before {
content: "\e6c7"; }
.icon-circle-loading:before {
content: "\e6c8"; }
div.yu-button {
vertical-align: top;
line-height: 32px; }
div.yu-button.large {
line-height: 40px; }
div.yu-button.small {
line-height: 24px; }
.yu-button {
font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica Neue, Helvetica, PingFang SC, Hiragino Sans GB, Microsoft YaHei, SimSun, sans-serif;
height: 32px;
font-size: 14px;
padding: 0 14px;
margin: 0 8px 14px 0;
display: inline-block;
color: #606266;
box-sizing: border-box;
border-radius: 4px;
background-color: #fff;
border: 1px solid #E4E7ED;
cursor: pointer;
transition: border 0.4s, color 0.4s;
outline: none;
position: relative;
overflow: hidden; }
.yu-button:not(.disabled):hover {
border: 1px solid #409EFF;
color: #409EFF;
z-index: 1; }
.yu-button:not(.disabled):focus {
color: #409EFF;
border: 1px solid #409EFF; }
.yu-button.disabled {
color: #C0C4CC;
background: #f5f5f9;
cursor: not-allowed; }
.yu-button.primary {
color: #fff;
border: 1px solid #409EFF;
background-color: #409EFF;
transition: all .3s ease; }
.yu-button.primary.disabled {
border: 1px solid #c0dfff;
background-color: #c0dfff;
cursor: not-allowed; }
.yu-button.primary:hover:not(.disabled), .yu-button.primary:focus:not(.disabled) {
color: #fff;
border: 1px solid #73b8ff;
background-color: #73b8ff; }
.yu-button.success {
color: #fff;
border: 1px solid #67C23A;
background-color: #67C23A;
transition: all .3s ease; }
.yu-button.success.disabled {
border: 1px solid #b2e19b;
background-color: #b2e19b;
cursor: not-allowed; }
.yu-button.success:hover:not(.disabled), .yu-button.success:focus:not(.disabled) {
color: #fff;
border: 1px solid #85cf60;
background-color: #85cf60; }
.yu-button.warning {
color: #fff;
border: 1px solid #fecf20;
background-color: #fecf20;
transition: all .3s ease; }
.yu-button.warning.disabled {
border: 1px solid #ffea9f;
background-color: #ffea9f;
cursor: not-allowed; }
.yu-button.warning:hover:not(.disabled), .yu-button.warning:focus:not(.disabled) {
color: #fff;
border: 1px solid #feda53;
background-color: #feda53; }
.yu-button.info {
color: #fff;
border: 1px solid #909399;
background-color: #909399;
transition: all .3s ease; }
.yu-button.info.disabled {
border: 1px solid #d2d4d6;
background-color: #d2d4d6;
cursor: not-allowed; }
.yu-button.info:hover:not(.disabled), .yu-button.info:focus:not(.disabled) {
color: #fff;
border: 1px solid #abadb1;
background-color: #abadb1; }
.yu-button.danger {
color: #fff;
border: 1px solid #F56C6C;
background-color: #F56C6C;
transition: all .3s ease; }
.yu-button.danger.disabled {
border: 1px solid #fde3e3;
background-color: #fde3e3;
cursor: not-allowed; }
.yu-button.danger:hover:not(.disabled), .yu-button.danger:focus:not(.disabled) {
color: #fff;
border: 1px solid #f89c9c;
background-color: #f89c9c; }
.yu-button.circle {
padding: 0;
width: 32px;
height: 32px;
border-radius: 50%; }
.yu-button.plain:hover:not(.disabled), .yu-button.plain:focus:not(.disabled) {
border: 1px solid #409EFF;
color: #409EFF;
background: #fff; }
.yu-button.plain.primary {
color: #409EFF;
border: 1px solid #409EFF;
background-color: #f3f9ff;
transition: all .3s ease; }
.yu-button.plain.primary.disabled {
color: #a6d2ff;
border: 1px solid #c0dfff;
background-color: #fdfeff;
cursor: not-allowed; }
.yu-button.plain.primary:hover:not(.disabled), .yu-button.plain.primary:focus:not(.disabled) {
border: 1px solid #409EFF;
background-color: #409EFF;
color: #fff; }
.yu-button.plain.success {
color: #67C23A;
border: 1px solid #67C23A;
background-color: #eef8e9;
transition: all .3s ease; }
.yu-button.plain.success.disabled {
color: #a3db87;
border: 1px solid #b2e19b;
background-color: #f4fbf1;
cursor: not-allowed; }
.yu-button.plain.success:hover:not(.disabled), .yu-button.plain.success:focus:not(.disabled) {
border: 1px solid #67C23A;
background-color: #67C23A;
color: #fff; }
.yu-button.plain.warning {
color: #fecf20;
border: 1px solid #fecf20;
background-color: #fffbeb;
transition: all .3s ease; }
.yu-button.plain.warning.disabled {
color: #fee586;
border: 1px solid #ffea9f;
background-color: #fffdf5;
cursor: not-allowed; }
.yu-button.plain.warning:hover:not(.disabled), .yu-button.plain.warning:focus:not(.disabled) {
border: 1px solid #fecf20;
background-color: #fecf20;
color: #fff; }
.yu-button.plain.info {
color: #909399;
border: 1px solid #909399;
background-color: #f2f3f3;
transition: all .3s ease; }
.yu-button.plain.info.disabled {
color: #c5c7ca;
border: 1px solid #d2d4d6;
background-color: #f8f8f8;
cursor: not-allowed; }
.yu-button.plain.info:hover:not(.disabled), .yu-button.plain.info:focus:not(.disabled) {
border: 1px solid #909399;
background-color: #909399;
color: #fff; }
.yu-button.plain.danger {
color: #F56C6C;
border: 1px solid #F56C6C;
background-color: #feeded;
transition: all .3s ease; }
.yu-button.plain.danger.disabled {
color: #fbcccc;
border: 1px solid #fde3e3;
background-color: #fef6f6;
cursor: not-allowed; }
.yu-button.plain.danger:hover:not(.disabled), .yu-button.plain.danger:focus:not(.disabled) {
border: 1px solid #F56C6C;
background-color: #F56C6C;
color: #fff; }
.yu-button.large {
padding: 0 22px;
font-size: 16px;
height: 40px; }
.yu-button.large.circle {
padding: 0;
width: 40px;
height: 40px; }
.yu-button.small {
height: 24px; }
.yu-button.small.circle {
padding: 0;
width: 24px;
height: 24px; }
.yu-button:not(.disabled):after {
content: "";
display: block;
position: absolute;
width: 100%;
height: 100%;
top: 0;
left: 0;
pointer-events: none;
background-image: radial-gradient(circle, #999 10%, transparent 10.01%);
background-repeat: no-repeat;
background-position: 50%;
transform: scale(10, 10);
opacity: 0;
transition: transform .4s, opacity .5s; }
.yu-button:not(.disabled):active:after {
transform: scale(0, 0);
opacity: .3;
transition: 0s; }
.yu-button-group {
font-size: 0;
display: inline-block;
margin-right: 8px; }
.yu-button-group > .yu-button {
margin-right: -1px;
float: left;
position: relative;
border-radius: 0; }
.yu-button-group > .yu-button:first-child {
border-radius: 4px 0 0 4px; }
.yu-button-group > .yu-button:last-child {
border-radius: 0 4px 4px 0; }
.yu-radio {
font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica Neue, Helvetica, PingFang SC, Hiragino Sans GB, Microsoft YaHei, SimSun, sans-serif;
font-size: 0;
color: #606266;
cursor: pointer;
margin-right: 8px; }
.yu-radio > span {
font-size: 14px;
-moz-user-select: none;
-webkit-user-select: none;
-ms-user-select: none;
user-select: none; }
.yu-radio > .radio {
font-size: 14px;
transition: border .1s;
margin-right: 6px;
margin-bottom: -2px;
display: inline-block;
box-sizing: border-box;
width: 16px;
height: 16px;
border: 1px solid #DCDFE6;
border-radius: 50%;
background-color: #fff; }
.yu-radio > .radio > input {
display: none; }
.yu-radio > .radio:hover {
border: 1px solid #409EFF; }
.yu-radio.vertical {
display: block !important; }
.yu-radio.checked > .radio {
width: 16px;
height: 16px;
border: 5px solid #409EFF; }
.yu-radio.disabled {
color: #C0C4CC; }
.yu-radio.disabled > .radio:hover {
border: 1px solid #e7eaef; }
.yu-radio.checked.disabled > .radio {
width: 16px;
height: 16px;
border: 5px solid #e7eaef; }
.yu-radio.checked.disabled > .radio + span {
color: #C0C4CC; }
.yu-radio.checked.disabled > .radio:hover {
border: 5px solid #e7eaef; }
.yu-radio-group {
margin-bottom: 14px; }
.yu-radio-group.vertical > .yu-radio {
display: block;
margin-bottom: 14px; }
.yu-checkbox {
font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica Neue, Helvetica, PingFang SC, Hiragino Sans GB, Microsoft YaHei, SimSun, sans-serif;
font-size: 14px;
color: #606266;
cursor: pointer;
margin-right: 14px; }
.yu-checkbox > span {
-moz-user-select: none;
-webkit-user-select: none;
-ms-user-select: none;
user-select: none; }
.yu-checkbox > .checkbox {
transition: background-color 0.4s;
margin-right: 4px;
margin-bottom: -2px;
display: inline-block;
width: 14px;
height: 14px;
border: 1px solid #DCDFE6;
border-radius: 2px;
background-color: #fff; }
.yu-checkbox > .checkbox:hover {
border: 1px solid #409EFF; }
.yu-checkbox > .checkbox > input {
display: none; }
.yu-checkbox.checked > .checkbox {
position: relative;
border: 1px solid #409EFF;
border-radius: 2px;
background-color: #409EFF; }
.yu-checkbox.checked > .checkbox:after {
content: '\00a0';
display: inline-block;
border: 2px solid #fff;
border-top-width: 0;
border-right-width: 0;
width: 8px;
height: 4px;
-webkit-transform: rotate(-50deg);
position: absolute;
top: 3px;
left: 2px; }
.yu-checkbox.checked.disabled > .checkbox {
border: 1px solid #C0C4CC;
background-color: #C0C4CC; }
.yu-checkbox.checked.disabled > .checkbox + span {
color: #C0C4CC; }
.yu-checkbox.disabled {
color: #C0C4CC; }
.yu-checkbox.disabled > .checkbox:hover {
border: 1px solid #DCDFE6; }
.yu-checkbox.control {
display: block;
margin-bottom: 8px; }
.yu-checkbox.control.part > .checkbox {
position: relative;
border: 1px solid #409EFF;
border-radius: 2px;
background-color: #409EFF; }
.yu-checkbox.control.part > .checkbox + span {
color: #409EFF; }
.yu-checkbox.control.part > .checkbox:after {
content: '\00a0';
display: inline-block;
border: 2px solid #fff;
border-top-width: 0;
border-right-width: 0;
border-left-width: 0;
width: 10px;
height: 5px;
-webkit-transform: rotate(180deg);
position: absolute;
top: 6px;
left: 2px; }
.yu-checkbox-group {
margin-bottom: 14px; }
.yu-checkbox-group.vertical > .yu-checkbox {
display: block;
margin-bottom: 14px; }
.yu-option {
font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica Neue, Helvetica, PingFang SC, Hiragino Sans GB, Microsoft YaHei, SimSun, sans-serif;
background-color: #fff;
min-width: 175px;
border: 1px solid #E4E7ED;
border-radius: 4px;
color: #606266;
box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
display: inline-block;
padding-inline-start: 0;
padding: 0; }
.yu-option > li {
list-style: none; }
.yu-option.overflow {
overflow: auto;
max-height: 175px; }
.yu-option > li {
box-sizing: border-box;
font-size: 14px;
padding: 8px 14px; }
.yu-option > li:hover:not(.disabled) {
background-color: #f5f5f9; }
.yu-option > li.active {
background-color: #f5f5f9;
font-weight: bold;
color: #409EFF; }
.yu-option > li.hide {
display: none; }
.yu-option > li.disabled {
color: #C0C4CC;
cursor: not-allowed; }
.yu-input {
font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica Neue, Helvetica, PingFang SC, Hiragino Sans GB, Microsoft YaHei, SimSun, sans-serif;
position: relative;
display: block;
margin: 0 8px 14px 0;
font-size: 0; }
.yu-input .transition {
transform: scaleY(0);
opacity: 0;
transform-origin: center top;
transition: transform .3s ease, opacity .3s ease; }
.yu-input .transition.transition-enter {
transform: scaleY(1);
opacity: 1; }
.yu-input .transition.transition-leave {
transform: scaleY(0);
opacity: 0; }
.yu-input > input {
width: 175px;
padding: 4px 14px;
outline: none;
font-size: 14px;
color: #606266;
font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica Neue, Helvetica, PingFang SC, Hiragino Sans GB, Microsoft YaHei, SimSun, sans-serif;
box-sizing: border-box;
height: 32px;
border: 1px solid #E4E7ED;
border-radius: 4px;
transition: all ease 0.4s; }
.yu-input > input::placeholder {
color: #C0C4CC; }
.yu-input > input:hover {
border: 1px solid #C0C4CC; }
.yu-input > input:focus {
border: 1px solid #409EFF; }
.yu-input > input.prefix {
padding-left: 32px; }
.yu-input > input.suffix {
padding-right: 32px; }
.yu-input > input.large {
height: 40px; }
.yu-input > input.small {
height: 24px; }
.yu-input > input.full {
width: 100%; }
.yu-input.textarea {
height: auto; }
.yu-input.disabled > input {
color: #C0C4CC;
background-color: #f5f5f9; }
.yu-input.disabled > input:hover {
border: 1px solid #E4E7ED;
cursor: not-allowed; }
.yu-input.disabled > input:focus {
border: 1px solid #E4E7ED; }
.yu-input > span.prefix {
position: relative;
color: #C0C4CC; }
.yu-input > span.prefix > i {
position: absolute;
left: 10px;
top: -14px; }
.yu-input > span.suffix {
position: relative;
color: #C0C4CC; }
.yu-input > span.suffix > i {
position: absolute;
left: -25px;
top: -14px; }
.yu-input > span.suffix.clearable > i {
transition: color .1s;
cursor: pointer; }
.yu-input > span.suffix.clearable > i:hover {
color: #909399; }
.yu-input > textarea {
padding: 8px;
border-color: #E4E7ED;
border-radius: 4px;
font-size: 14px;
outline: none;
box-sizing: border-box;
transition: all ease .4s; }
.yu-input > textarea:hover {
border: 1px solid #C0C4CC; }
.yu-input > textarea:focus {
border: 1px solid #409EFF; }
.yu-input > textarea::placeholder {
color: #DCDFE6;
font-weight: lighter; }
.yu-input > input.append {
border-radius: 4px 0 0 4px; }
.yu-input > input.prepend {
border-radius: 0 4px 4px 0; }
.yu-input > input.number {
padding-right: 0; }
.yu-input > .yu-button.prepend {
margin: 0;
border-radius: 4px 0 0 4px;
vertical-align: top; }
.yu-input > .yu-button.append {
margin: 0;
border-radius: 0 4px 4px 0;
vertical-align: top; }
.yu-input > .yu-option {
margin-top: 8px;
position: absolute;
top: 30px;
left: 0;
z-index: 1000; }
div.yu-button {
vertical-align: top;
line-height: 32px; }
div.yu-button.large {
line-height: 40px; }
div.yu-button.small {
line-height: 24px; }
.yu-button {
font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica Neue, Helvetica, PingFang SC, Hiragino Sans GB, Microsoft YaHei, SimSun, sans-serif;
height: 32px;
font-size: 14px;
padding: 0 14px;
margin: 0 8px 14px 0;
display: inline-block;
color: #606266;
box-sizing: border-box;
border-radius: 4px;
background-color: #fff;
border: 1px solid #E4E7ED;
cursor: pointer;
transition: border 0.4s, color 0.4s;
outline: none;
position: relative;
overflow: hidden; }
.yu-button:not(.disabled):hover {
border: 1px solid #409EFF;
color: #409EFF;
z-index: 1; }
.yu-button:not(.disabled):focus {
color: #409EFF;
border: 1px solid #409EFF; }
.yu-button.disabled {
color: #C0C4CC;
background: #f5f5f9;
cursor: not-allowed; }
.yu-button.primary {
color: #fff;
border: 1px solid #409EFF;
background-color: #409EFF;
transition: all .3s ease; }
.yu-button.primary.disabled {
border: 1px solid #c0dfff;
background-color: #c0dfff;
cursor: not-allowed; }
.yu-button.primary:hover:not(.disabled), .yu-button.primary:focus:not(.disabled) {
color: #fff;
border: 1px solid #73b8ff;
background-color: #73b8ff; }
.yu-button.success {
color: #fff;
border: 1px solid #67C23A;
background-color: #67C23A;
transition: all .3s ease; }
.yu-button.success.disabled {
border: 1px solid #b2e19b;
background-color: #b2e19b;
cursor: not-allowed; }
.yu-button.success:hover:not(.disabled), .yu-button.success:focus:not(.disabled) {
color: #fff;
border: 1px solid #85cf60;
background-color: #85cf60; }
.yu-button.warning {
color: #fff;
border: 1px solid #fecf20;
background-color: #fecf20;
transition: all .3s ease; }
.yu-button.warning.disabled {
border: 1px solid #ffea9f;
background-color: #ffea9f;
cursor: not-allowed; }
.yu-button.warning:hover:not(.disabled), .yu-button.warning:focus:not(.disabled) {
color: #fff;
border: 1px solid #feda53;
background-color: #feda53; }
.yu-button.info {
color: #fff;
border: 1px solid #909399;
background-color: #909399;
transition: all .3s ease; }
.yu-button.info.disabled {
border: 1px solid #d2d4d6;
background-color: #d2d4d6;
cursor: not-allowed; }
.yu-button.info:hover:not(.disabled), .yu-button.info:focus:not(.disabled) {
color: #fff;
border: 1px solid #abadb1;
background-color: #abadb1; }
.yu-button.danger {
color: #fff;
border: 1px solid #F56C6C;
background-color: #F56C6C;
transition: all .3s ease; }
.yu-button.danger.disabled {
border: 1px solid #fde3e3;
background-color: #fde3e3;
cursor: not-allowed; }
.yu-button.danger:hover:not(.disabled), .yu-button.danger:focus:not(.disabled) {
color: #fff;
border: 1px solid #f89c9c;
background-color: #f89c9c; }
.yu-button.circle {
padding: 0;
width: 32px;
height: 32px;
border-radius: 50%; }
.yu-button.plain:hover:not(.disabled), .yu-button.plain:focus:not(.disabled) {
border: 1px solid #409EFF;
color: #409EFF;
background: #fff; }
.yu-button.plain.primary {
color: #409EFF;
border: 1px solid #409EFF;
background-color: #f3f9ff;
transition: all .3s ease; }
.yu-button.plain.primary.disabled {
color: #a6d2ff;
border: 1px solid #c0dfff;
background-color: #fdfeff;
cursor: not-allowed; }
.yu-button.plain.primary:hover:not(.disabled), .yu-button.plain.primary:focus:not(.disabled) {
border: 1px solid #409EFF;
background-color: #409EFF;
color: #fff; }
.yu-button.plain.success {
color: #67C23A;
border: 1px solid #67C23A;
background-color: #eef8e9;
transition: all .3s ease; }
.yu-button.plain.success.disabled {
color: #a3db87;
border: 1px solid #b2e19b;
background-color: #f4fbf1;
cursor: not-allowed; }
.yu-button.plain.success:hover:not(.disabled), .yu-button.plain.success:focus:not(.disabled) {
border: 1px solid #67C23A;
background-color: #67C23A;
color: #fff; }
.yu-button.plain.warning {
color: #fecf20;
border: 1px solid #fecf20;
background-color: #fffbeb;
transition: all .3s ease; }
.yu-button.plain.warning.disabled {
color: #fee586;
border: 1px solid #ffea9f;
background-color: #fffdf5;
cursor: not-allowed; }
.yu-button.plain.warning:hover:not(.disabled), .yu-button.plain.warning:focus:not(.disabled) {
border: 1px solid #fecf20;
background-color: #fecf20;
color: #fff; }
.yu-button.plain.info {
color: #909399;
border: 1px solid #909399;
background-color: #f2f3f3;
transition: all .3s ease; }
.yu-button.plain.info.disabled {
color: #c5c7ca;
border: 1px solid #d2d4d6;
background-color: #f8f8f8;
cursor: not-allowed; }
.yu-button.plain.info:hover:not(.disabled), .yu-button.plain.info:focus:not(.disabled) {
border: 1px solid #909399;
background-color: #909399;
color: #fff; }
.yu-button.plain.danger {
color: #F56C6C;
border: 1px solid #F56C6C;
background-color: #feeded;
transition: all .3s ease; }
.yu-button.plain.danger.disabled {
color: #fbcccc;
border: 1px solid #fde3e3;
background-color: #fef6f6;
cursor: not-allowed; }
.yu-button.plain.danger:hover:not(.disabled), .yu-button.plain.danger:focus:not(.disabled) {
border: 1px solid #F56C6C;
background-color: #F56C6C;
color: #fff; }
.yu-button.large {
padding: 0 22px;
font-size: 16px;
height: 40px; }
.yu-button.large.circle {
padding: 0;
width: 40px;
height: 40px; }
.yu-button.small {
height: 24px; }
.yu-button.small.circle {
padding: 0;
width: 24px;
height: 24px; }
.yu-button:not(.disabled):after {
content: "";
display: block;
position: absolute;
width: 100%;
height: 100%;
top: 0;
left: 0;
pointer-events: none;
background-image: radial-gradient(circle, #999 10%, transparent 10.01%);
background-repeat: no-repeat;
background-position: 50%;
transform: scale(10, 10);
opacity: 0;
transition: transform .4s, opacity .5s; }
.yu-button:not(.disabled):active:after {
transform: scale(0, 0);
opacity: .3;
transition: 0s; }
.yu-button-group {
font-size: 0;
display: inline-block;
margin-right: 8px; }
.yu-button-group > .yu-button {
margin-right: -1px;
float: left;
position: relative;
border-radius: 0; }
.yu-button-group > .yu-button:first-child {
border-radius: 4px 0 0 4px; }
.yu-button-group > .yu-button:last-child {
border-radius: 0 4px 4px 0; }
.yu-option {
font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica Neue, Helvetica, PingFang SC, Hiragino Sans GB, Microsoft YaHei, SimSun, sans-serif;
background-color: #fff;
min-width: 175px;
border: 1px solid #E4E7ED;
border-radius: 4px;
color: #606266;
box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
display: inline-block;
padding-inline-start: 0;
padding: 0; }
.yu-option > li {
list-style: none; }
.yu-option.overflow {
overflow: auto;
max-height: 175px; }
.yu-option > li {
box-sizing: border-box;
font-size: 14px;
padding: 8px 14px; }
.yu-option > li:hover:not(.disabled) {
background-color: #f5f5f9; }
.yu-option > li.active {
background-color: #f5f5f9;
font-weight: bold;
color: #409EFF; }
.yu-option > li.hide {
display: none; }
.yu-option > li.disabled {
color: #C0C4CC;
cursor: not-allowed; }
.yu-input {
font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica Neue, Helvetica, PingFang SC, Hiragino Sans GB, Microsoft YaHei, SimSun, sans-serif;
position: relative;
display: block;
margin: 0 8px 14px 0;
font-size: 0; }
.yu-input .transition {
transform: scaleY(0);
opacity: 0;
transform-origin: center top;
transition: transform .3s ease, opacity .3s ease; }
.yu-input .transition.transition-enter {
transform: scaleY(1);
opacity: 1; }
.yu-input .transition.transition-leave {
transform: scaleY(0);
opacity: 0; }
.yu-input > input {
width: 175px;
padding: 4px 14px;
outline: none;
font-size: 14px;
color: #606266;
font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica Neue, Helvetica, PingFang SC, Hiragino Sans GB, Microsoft YaHei, SimSun, sans-serif;
box-sizing: border-box;
height: 32px;
border: 1px solid #E4E7ED;
border-radius: 4px;
transition: all ease 0.4s; }
.yu-input > input::placeholder {
color: #C0C4CC; }
.yu-input > input:hover {
border: 1px solid #C0C4CC; }
.yu-input > input:focus {
border: 1px solid #409EFF; }
.yu-input > input.prefix {
padding-left: 32px; }
.yu-input > input.suffix {
padding-right: 32px; }
.yu-input > input.large {
height: 40px; }
.yu-input > input.small {
height: 24px; }
.yu-input > input.full {
width: 100%; }
.yu-input.textarea {
height: auto; }
.yu-input.disabled > input {
color: #C0C4CC;
background-color: #f5f5f9; }
.yu-input.disabled > input:hover {
border: 1px solid #E4E7ED;
cursor: not-allowed; }
.yu-input.disabled > input:focus {
border: 1px solid #E4E7ED; }
.yu-input > span.prefix {
position: relative;
color: #C0C4CC; }
.yu-input > span.prefix > i {
position: absolute;
left: 10px;
top: -14px; }
.yu-input > span.suffix {
position: relative;
color: #C0C4CC; }
.yu-input > span.suffix > i {
position: absolute;
left: -25px;
top: -14px; }
.yu-input > span.suffix.clearable > i {
transition: color .1s;
cursor: pointer; }
.yu-input > span.suffix.clearable > i:hover {
color: #909399; }
.yu-input > textarea {
padding: 8px;
border-color: #E4E7ED;
border-radius: 4px;
font-size: 14px;
outline: none;
box-sizing: border-box;
transition: all ease .4s; }
.yu-input > textarea:hover {
border: 1px solid #C0C4CC; }
.yu-input > textarea:focus {
border: 1px solid #409EFF; }
.yu-input > textarea::placeholder {
color: #DCDFE6;
font-weight: lighter; }
.yu-input > input.append {
border-radius: 4px 0 0 4px; }
.yu-input > input.prepend {
border-radius: 0 4px 4px 0; }
.yu-input > input.number {
padding-right: 0; }
.yu-input > .yu-button.prepend {
margin: 0;
border-radius: 4px 0 0 4px;
vertical-align: top; }
.yu-input > .yu-button.append {
margin: 0;
border-radius: 0 4px 4px 0;
vertical-align: top; }
.yu-input > .yu-option {
margin-top: 8px;
position: absolute;
top: 30px;
left: 0;
z-index: 1000; }
.yu-counter {
font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica Neue, Helvetica, PingFang SC, Hiragino Sans GB, Microsoft YaHei, SimSun, sans-serif;
display: inline-block;
font-size: 0;
margin: 0 8px 14px 0; }
.yu-counter > .yu-input {
vertical-align: top;
display: inline-block;
box-sizing: border-box;
margin: 0; }
.yu-counter > .yu-input > input {
width: 80px;
border-radius: 0;
text-align: center; }
.yu-counter > .yu-button {
margin: 0;
font-size: 16px;
line-height: 16px;
background: #f5f5f9; }
.yu-counter > .yu-button:first-child {
border-radius: 4px 0 0 4px; }
.yu-counter > .yu-button:last-child {
border-radius: 0 4px 4px 0; }
.yu-counter-side {
display: inline-block;
font-size: 0;
vertical-align: top;
margin: 0 8px 14px 0; }
.yu-counter-side > .yu-input {
display: inline-block;
box-sizing: border-box;
margin-right: 0; }
.yu-counter-side > .yu-input > input {
width: 80px;
text-align: center; }
.yu-counter-side > div.right {
height: 32px;
vertical-align: top;
display: inline-block; }
.yu-counter-side > div.right > button {
height: 50%;
border: 1px solid #E4E7ED;
color: #606266;
padding: 0 14px;
text-align: center;
font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica Neue, Helvetica, PingFang SC, Hiragino Sans GB, Microsoft YaHei, SimSun, sans-serif;
transition: all 0.4s ease;
outline: none;
display: block;
vertical-align: top;
background: #f5f5f9;
margin: 0;
line-height: 16px; }
.yu-counter-side > div.right > button > i {
margin-left: -2px;
font-size: 14px; }
.yu-counter-side > div.right > button:hover:not(.disabled), .yu-counter-side > div.right > button:focus:not(.disabled) {
color: #409EFF;
border: 1px solid #73b8ff;
background-color: #f3f9ff; }
.yu-counter-side > div.right > button.disabled {
color: #C0C4CC;
cursor: not-allowed; }
.yu-counter-side > div.right > button:first-child {
border-top-right-radius: 4px; }
.yu-counter-side > div.right > button:last-child {
border-bottom-right-radius: 4px; }
.yu-counter-side > div.button {
height: 32px;
vertical-align: top;
display: inline-block; }
.yu-counter-side > div.button.large {
height: 40px; }
.yu-counter-side > div.button.small {
height: 24px; }
.yu-counter-side > div.button.small > button > i:before {
display: block;
margin-top: -19px; }
.yu-counter-side > div.button > button {
cursor: pointer;
height: 50%;
background-color: #fff;
border: 1px solid #E4E7ED;
color: #606266;
padding: 0 14px;
text-align: center;
font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica Neue, Helvetica, PingFang SC, Hiragino Sans GB, Microsoft YaHei, SimSun, sans-serif;
transition: all 0.4s ease;
outline: none;
display: block;
vertical-align: top;
background: #f5f5f9;
margin: 0;
line-height: 16px; }
.yu-counter-side > div.button > button > i {
margin-left: -2px;
font-size: 14px; }
.yu-counter-side > div.button > button:hover:not(.disabled), .yu-counter-side > div.button > button:focus:not(.disabled) {
color: #409EFF;
border: 1px solid #73b8ff;
background-color: #f3f9ff; }
.yu-counter-side > div.button > button.disabled {
color: #C0C4CC;
background: #f5f5f9;
cursor: not-allowed; }
.yu-counter-side.right > .button > button:first-child {
border-top-right-radius: 4px; }
.yu-counter-side.right > .button > button:last-child {
border-bottom-right-radius: 4px; }
.yu-counter-side.right > .yu-input > input {
border-radius: 4px 0 0 4px; }
.yu-counter-side.left > .button > button:first-child {
border-top-left-radius: 4px; }
.yu-counter-side.left > .button > button:last-child {
border-bottom-left-radius: 4px; }
.yu-counter-side.left > .yu-input > input {
border-radius: 0 4px 4px 0; }
.yu-option {
font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica Neue, Helvetica, PingFang SC, Hiragino Sans GB, Microsoft YaHei, SimSun, sans-serif;
background-color: #fff;
min-width: 175px;
border: 1px solid #E4E7ED;
border-radius: 4px;
color: #606266;
box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
display: inline-block;
padding-inline-start: 0;
padding: 0; }
.yu-option > li {
list-style: none; }
.yu-option.overflow {
overflow: auto;
max-height: 175px; }
.yu-option > li {
box-sizing: border-box;
font-size: 14px;
padding: 8px 14px; }
.yu-option > li:hover:not(.disabled) {
background-color: #f5f5f9; }
.yu-option > li.active {
background-color: #f5f5f9;
font-weight: bold;
color: #409EFF; }
.yu-option > li.hide {
display: none; }
.yu-option > li.disabled {
color: #C0C4CC;
cursor: not-allowed; }
.yu-input {
font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica Neue, Helvetica, PingFang SC, Hiragino Sans GB, Microsoft YaHei, SimSun, sans-serif;
position: relative;
display: block;
margin: 0 8px 14px 0;
font-size: 0; }
.yu-input .transition {
transform: scaleY(0);
opacity: 0;
transform-origin: center top;
transition: transform .3s ease, opacity .3s ease; }
.yu-input .transition.transition-enter {
transform: scaleY(1);
opacity: 1; }
.yu-input .transition.transition-leave {
transform: scaleY(0);
opacity: 0; }
.yu-input > input {
width: 175px;
padding: 4px 14px;
outline: none;
font-size: 14px;
color: #606266;
font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica Neue, Helvetica, PingFang SC, Hiragino Sans GB, Microsoft YaHei, SimSun, sans-serif;
box-sizing: border-box;
height: 32px;
border: 1px solid #E4E7ED;
border-radius: 4px;
transition: all ease 0.4s; }
.yu-input > input::placeholder {
color: #C0C4CC; }
.yu-input > input:hover {
border: 1px solid #C0C4CC; }
.yu-input > input:focus {
border: 1px solid #409EFF; }
.yu-input > input.prefix {
padding-left: 32px; }
.yu-input > input.suffix {
padding-right: 32px; }
.yu-input > input.large {
height: 40px; }
.yu-input > input.small {
height: 24px; }
.yu-input > input.full {
width: 100%; }
.yu-input.textarea {
height: auto; }
.yu-input.disabled > input {
color: #C0C4CC;
background-color: #f5f5f9; }
.yu-input.disabled > input:hover {
border: 1px solid #E4E7ED;
cursor: not-allowed; }
.yu-input.disabled > input:focus {
border: 1px solid #E4E7ED; }
.yu-input > span.prefix {
position: relative;
color: #C0C4CC; }
.yu-input > span.prefix > i {
position: absolute;
left: 10px;
top: -14px; }
.yu-input > span.suffix {
position: relative;
color: #C0C4CC; }
.yu-input > span.suffix > i {
position: absolute;
left: -25px;
top: -14px; }
.yu-input > span.suffix.clearable > i {
transition: color .1s;
cursor: pointer; }
.yu-input > span.suffix.clearable > i:hover {
color: #909399; }
.yu-input > textarea {
padding: 8px;
border-color: #E4E7ED;
border-radius: 4px;
font-size: 14px;
outline: none;
box-sizing: border-box;
transition: all ease .4s; }
.yu-input > textarea:hover {
border: 1px solid #C0C4CC; }
.yu-input > textarea:focus {
border: 1px solid #409EFF; }
.yu-input > textarea::placeholder {
color: #DCDFE6;
font-weight: lighter; }
.yu-input > input.append {
border-radius: 4px 0 0 4px; }
.yu-input > input.prepend {
border-radius: 0 4px 4px 0; }
.yu-input > input.number {
padding-right: 0; }
.yu-input > .yu-button.prepend {
margin: 0;
border-radius: 4px 0 0 4px;
vertical-align: top; }
.yu-input > .yu-button.append {
margin: 0;
border-radius: 0 4px 4px 0;
vertical-align: top; }
.yu-input > .yu-option {
margin-top: 8px;
position: absolute;
top: 30px;
left: 0;
z-index: 1000; }
.yu-option {
font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica Neue, Helvetica, PingFang SC, Hiragino Sans GB, Microsoft YaHei, SimSun, sans-serif;
background-color: #fff;
min-width: 175px;
border: 1px solid #E4E7ED;
border-radius: 4px;
color: #606266;
box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
display: inline-block;
padding-inline-start: 0;
padding: 0; }
.yu-option > li {
list-style: none; }
.yu-option.overflow {
overflow: auto;
max-height: 175px; }
.yu-option > li {
box-sizing: border-box;
font-size: 14px;
padding: 8px 14px; }
.yu-option > li:hover:not(.disabled) {
background-color: #f5f5f9; }
.yu-option > li.active {
background-color: #f5f5f9;
font-weight: bold;
color: #409EFF; }
.yu-option > li.hide {
display: none; }
.yu-option > li.disabled {
color: #C0C4CC;
cursor: not-allowed; }
.yu-select {
font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica Neue, Helvetica, PingFang SC, Hiragino Sans GB, Microsoft YaHei, SimSun, sans-serif;
position: relative; }
.yu-select input {
transition: all ease .4s; }
.yu-select input + span.suffix > i.icon-angle-down {
transition: all ease .4s; }
.yu-select input:hover {
cursor: pointer; }
.yu-select input:focus:not([readonly]) {
border: 1px solid #409EFF; }
.yu-select input:focus:not([readonly]) + span.suffix > i.icon-angle-down {
transform: rotate(-180deg); }
.yu-select .transition {
transform: scaleY(0);
opacity: 0;
transform-origin: center top;
transition: transform .3s ease, opacity .3s ease; }
.yu-select .transition.transition-enter {
transform: scaleY(1);
opacity: 1; }
.yu-select .transition.transition-leave {
transform: scaleY(0);
opacity: 0; }
.yu-select.prepend {
display: inline-block;
vertical-align: top;
margin: 0; }
.yu-select.prepend > .yu-input {
margin: 0; }
.yu-select.prepend > .yu-input > input {
border-radius: 4px 0 0 4px; }
.yu-select.append {
display: inline-block;
vertical-align: top; }
.yu-select.append > .yu-input {
margin: 0; }
.yu-select.append > .yu-input > input {
border-radius: 0 4px 4px 0; }
.yu-select > .yu-option {
margin-top: 8px;
position: absolute;
top: 30px;
z-index: 1000; }
.yu-option {
font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica Neue, Helvetica, PingFang SC, Hiragino Sans GB, Microsoft YaHei, SimSun, sans-serif;
background-color: #fff;
min-width: 175px;
border: 1px solid #E4E7ED;
border-radius: 4px;
color: #606266;
box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
display: inline-block;
padding-inline-start: 0;
padding: 0; }
.yu-option > li {
list-style: none; }
.yu-option.overflow {
overflow: auto;
max-height: 175px; }
.yu-option > li {
box-sizing: border-box;
font-size: 14px;
padding: 8px 14px; }
.yu-option > li:hover:not(.disabled) {
background-color: #f5f5f9; }
.yu-option > li.active {
background-color: #f5f5f9;
font-weight: bold;
color: #409EFF; }
.yu-option > li.hide {
display: none; }
.yu-option > li.disabled {
color: #C0C4CC;
cursor: not-allowed; }
.yu-cascader-option {
font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica Neue, Helvetica, PingFang SC, Hiragino Sans GB, Microsoft YaHei, SimSun, sans-serif;
border-radius: 4px;
box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
border: 1px solid #E4E7ED;
display: inline-block;
font-size: 0; }
.yu-cascader-option > .yu-option {
overflow: auto;
max-height: 175px;
height: 210px;
vertical-align: top;
display: inline-block;
max-height: 210px;
border: none;
border-right: 1px solid #E4E7ED;
border-radius: 0;
box-shadow: none; }
.yu-cascader-option > .yu-option:first-child {
border-radius: 4px 0 0 4px; }
.yu-cascader-option > .yu-option:last-child {
border-radius: 0 4px 4px 0; }
.yu-cascader-option > .yu-option > li:not(.last):after {
font-family: "iconfont" !important;
font-size: 16px;
font-style: normal;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
content: "";
float: right;
color: #C0C4CC; }
.yu-option {
font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica Neue, Helvetica, PingFang SC, Hiragino Sans GB, Microsoft YaHei, SimSun, sans-serif;
background-color: #fff;
min-width: 175px;
border: 1px solid #E4E7ED;
border-radius: 4px;
color: #606266;
box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
display: inline-block;
padding-inline-start: 0;
padding: 0; }
.yu-option > li {
list-style: none; }
.yu-option.overflow {
overflow: auto;
max-height: 175px; }
.yu-option > li {
box-sizing: border-box;
font-size: 14px;
padding: 8px 14px; }
.yu-option > li:hover:not(.disabled) {
background-color: #f5f5f9; }
.yu-option > li.active {
background-color: #f5f5f9;
font-weight: bold;
color: #409EFF; }
.yu-option > li.hide {
display: none; }
.yu-option > li.disabled {
color: #C0C4CC;
cursor: not-allowed; }
.yu-input {
font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica Neue, Helvetica, PingFang SC, Hiragino Sans GB, Microsoft YaHei, SimSun, sans-serif;
position: relative;
display: block;
margin: 0 8px 14px 0;
font-size: 0; }
.yu-input .transition {
transform: scaleY(0);
opacity: 0;
transform-origin: center top;
transition: transform .3s ease, opacity .3s ease; }
.yu-input .transition.transition-enter {
transform: scaleY(1);
opacity: 1; }
.yu-input .transition.transition-leave {
transform: scaleY(0);
opacity: 0; }
.yu-input > input {
width: 175px;
padding: 4px 14px;
outline: none;
font-size: 14px;
color: #606266;
font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica Neue, Helvetica, PingFang SC, Hiragino Sans GB, Microsoft YaHei, SimSun, sans-serif;
box-sizing: border-box;
height: 32px;
border: 1px solid #E4E7ED;
border-radius: 4px;
transition: all ease 0.4s; }
.yu-input > input::placeholder {
color: #C0C4CC; }
.yu-input > input:hover {
border: 1px solid #C0C4CC; }
.yu-input > input:focus {
border: 1px solid #409EFF; }
.yu-input > input.prefix {
padding-left: 32px; }
.yu-input > input.suffix {
padding-right: 32px; }
.yu-input > input.large {
height: 40px; }
.yu-input > input.small {
height: 24px; }
.yu-input > input.full {
width: 100%; }
.yu-input.textarea {
height: auto; }
.yu-input.disabled > input {
color: #C0C4CC;
background-color: #f5f5f9; }
.yu-input.disabled > input:hover {
border: 1px solid #E4E7ED;
cursor: not-allowed; }
.yu-input.disabled > input:focus {
border: 1px solid #E4E7ED; }
.yu-input > span.prefix {
position: relative;
color: #C0C4CC; }
.yu-input > span.prefix > i {
position: absolute;
left: 10px;
top: -14px; }
.yu-input > span.suffix {
position: relative;
color: #C0C4CC; }
.yu-input > span.suffix > i {
position: absolute;
left: -25px;
top: -14px; }
.yu-input > span.suffix.clearable > i {
transition: color .1s;
cursor: pointer; }
.yu-input > span.suffix.clearable > i:hover {
color: #909399; }
.yu-input > textarea {
padding: 8px;
border-color: #E4E7ED;
border-radius: 4px;
font-size: 14px;
outline: none;
box-sizing: border-box;
transition: all ease .4s; }
.yu-input > textarea:hover {
border: 1px solid #C0C4CC; }
.yu-input > textarea:focus {
border: 1px solid #409EFF; }
.yu-input > textarea::placeholder {
color: #DCDFE6;
font-weight: lighter; }
.yu-input > input.append {
border-radius: 4px 0 0 4px; }
.yu-input > input.prepend {
border-radius: 0 4px 4px 0; }
.yu-input > input.number {
padding-right: 0; }
.yu-input > .yu-button.prepend {
margin: 0;
border-radius: 4px 0 0 4px;
vertical-align: top; }
.yu-input > .yu-button.append {
margin: 0;
border-radius: 0 4px 4px 0;
vertical-align: top; }
.yu-input > .yu-option {
margin-top: 8px;
position: absolute;
top: 30px;
left: 0;
z-index: 1000; }
.yu-option {
font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica Neue, Helvetica, PingFang SC, Hiragino Sans GB, Microsoft YaHei, SimSun, sans-serif;
background-color: #fff;
min-width: 175px;
border: 1px solid #E4E7ED;
border-radius: 4px;
color: #606266;
box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
display: inline-block;
padding-inline-start: 0;
padding: 0; }
.yu-option > li {
list-style: none; }
.yu-option.overflow {
overflow: auto;
max-height: 175px; }
.yu-option > li {
box-sizing: border-box;
font-size: 14px;
padding: 8px 14px; }
.yu-option > li:hover:not(.disabled) {
background-color: #f5f5f9; }
.yu-option > li.active {
background-color: #f5f5f9;
font-weight: bold;
color: #409EFF; }
.yu-option > li.hide {
display: none; }
.yu-option > li.disabled {
color: #C0C4CC;
cursor: not-allowed; }
.yu-cascader-option {
font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica Neue, Helvetica, PingFang SC, Hiragino Sans GB, Microsoft YaHei, SimSun, sans-serif;
border-radius: 4px;
box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
border: 1px solid #E4E7ED;
display: inline-block;
font-size: 0; }
.yu-cascader-option > .yu-option {
overflow: auto;
max-height: 175px;
height: 210px;
vertical-align: top;
display: inline-block;
max-height: 210px;
border: none;
border-right: 1px solid #E4E7ED;
border-radius: 0;
box-shadow: none; }
.yu-cascader-option > .yu-option:first-child {
border-radius: 4px 0 0 4px; }
.yu-cascader-option > .yu-option:last-child {
border-radius: 0 4px 4px 0; }
.yu-cascader-option > .yu-option > li:not(.last):after {
font-family: "iconfont" !important;
font-size: 16px;
font-style: normal;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
content: "";
float: right;
color: #C0C4CC; }
.yu-cascader {
font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica Neue, Helvetica, PingFang SC, Hiragino Sans GB, Microsoft YaHei, SimSun, sans-serif;
font-size: 0;
position: relative; }
.yu-cascader input {
transition: all ease .4s; }
.yu-cascader input + span.suffix > i.icon-angle-down {
transition: all ease .4s; }
.yu-cascader input:hover {
cursor: pointer; }
.yu-cascader input:focus:not([readonly]) {
border: 1px solid #409EFF; }
.yu-cascader input:focus:not([readonly]) + span.suffix > i.icon-angle-down {
transform: rotate(-180deg); }
.yu-cascader .transition {
transform: scaleY(0);
opacity: 0;
transform-origin: center top;
transition: transform .3s ease, opacity .3s ease; }
.yu-cascader .transition.transition-enter {
transform: scaleY(1);
opacity: 1; }
.yu-cascader .transition.transition-leave {
transform: scaleY(0);
opacity: 0; }
.yu-cascader .yu-cascader-option {
position: absolute;
z-index: 1000; }
.yu-cascader.prepend {
display: inline-block;
vertical-align: top;
margin: 0; }
.yu-cascader.prepend > .yu-input {
margin: 0; }
.yu-cascader.prepend > .yu-input > input {
border-radius: 4px 0 0 4px; }
.yu-cascader.append {
display: inline-block;
vertical-align: top; }
.yu-cascader.append > .yu-input {
margin: 0; }
.yu-cascader.append > .yu-input > input {
border-radius: 0 4px 4px 0; }
.yu-switch {
font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica Neue, Helvetica, PingFang SC, Hiragino Sans GB, Microsoft YaHei, SimSun, sans-serif;
font-size: 0;
color: #606266;
display: inline-block;
margin: 0 8px 14px 0; }
.yu-switch > input {
display: none; }
.yu-switch > span {
font-size: 14px;
vertical-align: middle; }
.yu-switch > label {
-moz-user-select: none;
-webkit-user-select: none;
-ms-user-select: none;
user-select: none;
font-size: 14px;
vertical-align: middle;
margin-right: 8px; }
.yu-switch > .switch {
font-size: 14px;
display: inline-block;
width: 40px;
height: 20px;
background: #DCDFE6;
border-radius: 10px;
padding: 2px;
box-sizing: border-box;
cursor: pointer;
margin-right: 8px;
transition: background-color 0.4s ease; }
.yu-switch > .switch > .circle {
box-sizing: border-box;
display: inline-block;
width: 16px;
height: 16px;
background: #fff;
border-radius: 8px;
transition: all 0.4s ease;
transform: translateX(0px); }
.yu-switch > .switch.on > .circle {
transform: translateX(20px); }
.yu-switch > .switch.on.primary {
background-color: #409EFF;
transition: all .3s ease; }
.yu-switch > .switch.on.success {
background-color: #67C23A;
transition: all .3s ease; }
.yu-switch > .switch.on.warning {
background-color: #fecf20;
transition: all .3s ease; }
.yu-switch > .switch.on.info {
background-color: #909399;
transition: all .3s ease; }
.yu-switch > .switch.on.danger {
background-color: #F56C6C;
transition: all .3s ease; }
.yu-switch.disabled {
color: #a0a2a6;
cursor: not-allowed; }
.yu-switch.disabled .switch.on.primary {
background-color: #c0dfff; }
.yu-switch.disabled .switch.on.success {
background-color: #b2e19b; }
.yu-switch.disabled .switch.on.warning {
background-color: #ffea9f; }
.yu-switch.disabled .switch.on.info {
background-color: #d2d4d6; }
.yu-switch.disabled .switch.on.danger {
background-color: #fde3e3; }
.yu-slider {
font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica Neue, Helvetica, PingFang SC, Hiragino Sans GB, Microsoft YaHei, SimSun, sans-serif;
margin: 0 8px 14px 0; }
.yu-slider.disabled > .bottom-bar > .top-bar {
background-color: #c5c7ca; }
.yu-slider.disabled > .bottom-bar > .top-bar > .circle {
border-color: #c5c7ca; }
.yu-slider > .bottom-bar {
position: relative;
width: 100%;
height: 4px;
border-radius: 2px;
background-color: #E4E7ED; }
.yu-slider > .bottom-bar > .top-bar {
height: 4px;
border-radius: 2px;
background-color: #409EFF; }
.yu-slider > .bottom-bar > .top-bar > .circle {
transform: translateX(-8px);
position: absolute;
top: -6px;
box-sizing: border-box;
line-height: 14px;
vertical-align: middle;
display: inline-block;
width: 14px;
height: 14px;
background-color: #fff;
border: 2px solid #409EFF;
border-radius: 14px; }
.yu-slider > .bottom-bar > .top-bar > .circle > .tooltip {
box-sizing: content-box;
position: absolute;
top: -36px;
height: 20px;
padding: 2px 7px;
line-height: 20px;
background: #373737;
border-radius: 4px;
color: #fff;
font-size: 14px;
margin-left: -12px;
text-align: center;
min-width: 20px;
display: none; }
.yu-slider > .bottom-bar > .top-bar > .circle > .tooltip:after {
content: '';
display: inline-block;
height: 8px;
width: 8px;
background-color: #373737;
position: absolute;
bottom: -4px;
left: 14px;
transform: rotate(45deg); }
.yu-slider > .bottom-bar > .top-bar > .circle.hover {
width: 16px;
height: 16px; }
.yu-slider > .bottom-bar > .top-bar > .circle.hover > .tooltip {
display: inline-block; }
.yu-slider > .bottom-bar > .top-bar > .circle:hover {
width: 16px;
height: 16px; }
.yu-slider > .bottom-bar > .top-bar > .circle:hover > .tooltip {
display: inline-block; }
.yu-slider > .bottom-bar > .top-bar > .point {
position: absolute;
width: 4px;
height: 4px;
background-color: #fff;
border-radius: 2px; }
.yu-slider > .bottom-bar:hover {
cursor: pointer; }
.yu-slider input {
display: none; }
.yu-date-picker-option {
font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica Neue, Helvetica, PingFang SC, Hiragino Sans GB, Microsoft YaHei, SimSun, sans-serif;
display: inline-block;
width: 330px;
background-color: #fff;
border: 1px solid #E4E7ED;
padding: 14px;
border-radius: 4px;
color: #606266;
box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1); }
.yu-date-picker-option > .head {
text-align: center; }
.yu-date-picker-option > .head > a {
display: inline-block;
padding: 8px; }
.yu-date-picker-option > .head > a:hover {
color: #409EFF;
cursor: pointer; }
.yu-date-picker-option > .head > div {
display: inline-block;
padding: 8px;
font-size: 14px; }
.yu-date-picker-option > .head > div > span:hover {
color: #409EFF;
cursor: pointer; }
.yu-date-picker-option > .head > .left {
float: left; }
.yu-date-picker-option > .head > .right {
float: right; }
.yu-date-picker-option > table.date {
width: 100%;
margin: 0 auto; }
.yu-date-picker-option > table.date > thead > tr > th {
border-bottom: 1px solid #E4E7ED;
font-size: 14px;
width: 40px;
height: 40px;
font-weight: normal;
color: #606266; }
.yu-date-picker-option > table.date > tbody > tr td {
text-align: center;
font-size: 14px;
width: 40px;
height: 40px;
font-weight: normal;
color: #606266;
vertical-align: middle; }
.yu-date-picker-option > table.date > tbody > tr td:hover:not(.other-month):not(.disabled) {
color: #409EFF;
cursor: pointer; }
.yu-date-picker-option > table.date > tbody > tr td.other-month {
color: #C0C4CC; }
.yu-date-picker-option > table.date > tbody > tr td.current-day {
color: #409EFF;
font-weight: bold; }
.yu-date-picker-option > table.date > tbody > tr td.active:not(.disabled) > div {
display: inline-block;
text-align: center;
line-height: 24px;
width: 24px;
height: 24px;
background-color: #409EFF;
border-radius: 100%;
color: #fff; }
.yu-date-picker-option > table.date > tbody > tr td.disabled {
color: #C0C4CC;
cursor: not-allowed; }
.yu-date-picker-option > table.date.month > tbody > tr td, .yu-date-picker-option > table.date.year > tbody > tr td {
width: 80px;
height: 60px; }
.yu-date-picker-option > table.date.month > tbody > tr td.active:not(.disabled) > div, .yu-date-picker-option > table.date.year > tbody > tr td.active:not(.disabled) > div {
width: 80px;
height: 60px;
border-radius: 0;
background-color: #fff;
line-height: 60px;
font-weight: bold;
color: #409EFF; }
.yu-date-picker-option > table.date.month > tbody > tr td.disabled, .yu-date-picker-option > table.date.year > tbody > tr td.disabled {
color: #C0C4CC;
cursor: not-allowed; }
.yu-option {
font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica Neue, Helvetica, PingFang SC, Hiragino Sans GB, Microsoft YaHei, SimSun, sans-serif;
background-color: #fff;
min-width: 175px;
border: 1px solid #E4E7ED;
border-radius: 4px;
color: #606266;
box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
display: inline-block;
padding-inline-start: 0;
padding: 0; }
.yu-option > li {
list-style: none; }
.yu-option.overflow {
overflow: auto;
max-height: 175px; }
.yu-option > li {
box-sizing: border-box;
font-size: 14px;
padding: 8px 14px; }
.yu-option > li:hover:not(.disabled) {
background-color: #f5f5f9; }
.yu-option > li.active {
background-color: #f5f5f9;
font-weight: bold;
color: #409EFF; }
.yu-option > li.hide {
display: none; }
.yu-option > li.disabled {
color: #C0C4CC;
cursor: not-allowed; }
.yu-input {
font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica Neue, Helvetica, PingFang SC, Hiragino Sans GB, Microsoft YaHei, SimSun, sans-serif;
position: relative;
display: block;
margin: 0 8px 14px 0;
font-size: 0; }
.yu-input .transition {
transform: scaleY(0);
opacity: 0;
transform-origin: center top;
transition: transform .3s ease, opacity .3s ease; }
.yu-input .transition.transition-enter {
transform: scaleY(1);
opacity: 1; }
.yu-input .transition.transition-leave {
transform: scaleY(0);
opacity: 0; }
.yu-input > input {
width: 175px;
padding: 4px 14px;
outline: none;
font-size: 14px;
color: #606266;
font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica Neue, Helvetica, PingFang SC, Hiragino Sans GB, Microsoft YaHei, SimSun, sans-serif;
box-sizing: border-box;
height: 32px;
border: 1px solid #E4E7ED;
border-radius: 4px;
transition: all ease 0.4s; }
.yu-input > input::placeholder {
color: #C0C4CC; }
.yu-input > input:hover {
border: 1px solid #C0C4CC; }
.yu-input > input:focus {
border: 1px solid #409EFF; }
.yu-input > input.prefix {
padding-left: 32px; }
.yu-input > input.suffix {
padding-right: 32px; }
.yu-input > input.large {
height: 40px; }
.yu-input > input.small {
height: 24px; }
.yu-input > input.full {
width: 100%; }
.yu-input.textarea {
height: auto; }
.yu-input.disabled > input {
color: #C0C4CC;
background-color: #f5f5f9; }
.yu-input.disabled > input:hover {
border: 1px solid #E4E7ED;
cursor: not-allowed; }
.yu-input.disabled > input:focus {
border: 1px solid #E4E7ED; }
.yu-input > span.prefix {
position: relative;
color: #C0C4CC; }
.yu-input > span.prefix > i {
position: absolute;
left: 10px;
top: -14px; }
.yu-input > span.suffix {
position: relative;
color: #C0C4CC; }
.yu-input > span.suffix > i {
position: absolute;
left: -25px;
top: -14px; }
.yu-input > span.suffix.clearable > i {
transition: color .1s;
cursor: pointer; }
.yu-input > span.suffix.clearable > i:hover {
color: #909399; }
.yu-input > textarea {
padding: 8px;
border-color: #E4E7ED;
border-radius: 4px;
font-size: 14px;
outline: none;
box-sizing: border-box;
transition: all ease .4s; }
.yu-input > textarea:hover {
border: 1px solid #C0C4CC; }
.yu-input > textarea:focus {
border: 1px solid #409EFF; }
.yu-input > textarea::placeholder {
color: #DCDFE6;
font-weight: lighter; }
.yu-input > input.append {
border-radius: 4px 0 0 4px; }
.yu-input > input.prepend {
border-radius: 0 4px 4px 0; }
.yu-input > input.number {
padding-right: 0; }
.yu-input > .yu-button.prepend {
margin: 0;
border-radius: 4px 0 0 4px;
vertical-align: top; }
.yu-input > .yu-button.append {
margin: 0;
border-radius: 0 4px 4px 0;
vertical-align: top; }
.yu-input > .yu-option {
margin-top: 8px;
position: absolute;
top: 30px;
left: 0;
z-index: 1000; }
.yu-date-picker-option {
font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica Neue, Helvetica, PingFang SC, Hiragino Sans GB, Microsoft YaHei, SimSun, sans-serif;
display: inline-block;
width: 330px;
background-color: #fff;
border: 1px solid #E4E7ED;
padding: 14px;
border-radius: 4px;
color: #606266;
box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1); }
.yu-date-picker-option > .head {
text-align: center; }
.yu-date-picker-option > .head > a {
display: inline-block;
padding: 8px; }
.yu-date-picker-option > .head > a:hover {
color: #409EFF;
cursor: pointer; }
.yu-date-picker-option > .head > div {
display: inline-block;
padding: 8px;
font-size: 14px; }
.yu-date-picker-option > .head > div > span:hover {
color: #409EFF;
cursor: pointer; }
.yu-date-picker-option > .head > .left {
float: left; }
.yu-date-picker-option > .head > .right {
float: right; }
.yu-date-picker-option > table.date {
width: 100%;
margin: 0 auto; }
.yu-date-picker-option > table.date > thead > tr > th {
border-bottom: 1px solid #E4E7ED;
font-size: 14px;
width: 40px;
height: 40px;
font-weight: normal;
color: #606266; }
.yu-date-picker-option > table.date > tbody > tr td {
text-align: center;
font-size: 14px;
width: 40px;
height: 40px;
font-weight: normal;
color: #606266;
vertical-align: middle; }
.yu-date-picker-option > table.date > tbody > tr td:hover:not(.other-month):not(.disabled) {
color: #409EFF;
cursor: pointer; }
.yu-date-picker-option > table.date > tbody > tr td.other-month {
color: #C0C4CC; }
.yu-date-picker-option > table.date > tbody > tr td.current-day {
color: #409EFF;
font-weight: bold; }
.yu-date-picker-option > table.date > tbody > tr td.active:not(.disabled) > div {
display: inline-block;
text-align: center;
line-height: 24px;
width: 24px;
height: 24px;
background-color: #409EFF;
border-radius: 100%;
color: #fff; }
.yu-date-picker-option > table.date > tbody > tr td.disabled {
color: #C0C4CC;
cursor: not-allowed; }
.yu-date-picker-option > table.date.month > tbody > tr td, .yu-date-picker-option > table.date.year > tbody > tr td {
width: 80px;
height: 60px; }
.yu-date-picker-option > table.date.month > tbody > tr td.active:not(.disabled) > div, .yu-date-picker-option > table.date.year > tbody > tr td.active:not(.disabled) > div {
width: 80px;
height: 60px;
border-radius: 0;
background-color: #fff;
line-height: 60px;
font-weight: bold;
color: #409EFF; }
.yu-date-picker-option > table.date.month > tbody > tr td.disabled, .yu-date-picker-option > table.date.year > tbody > tr td.disabled {
color: #C0C4CC;
cursor: not-allowed; }
.yu-date-picker {
font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica Neue, Helvetica, PingFang SC, Hiragino Sans GB, Microsoft YaHei, SimSun, sans-serif; }
.yu-date-picker .transition {
transform: scaleY(0);
opacity: 0;
transform-origin: center top;
transition: transform .3s ease, opacity .3s ease; }
.yu-date-picker .transition.transition-enter {
transform: scaleY(1);
opacity: 1; }
.yu-date-picker .transition.transition-leave {
transform: scaleY(0);
opacity: 0; }
.yu-date-picker > .yu-date-picker-option {
position: absolute;
z-index: 1000; }
ul.yu-file-list {
font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica Neue, Helvetica, PingFang SC, Hiragino Sans GB, Microsoft YaHei, SimSun, sans-serif;
font-size: 14px;
color: #606266;
padding-inline-start: 0;
padding: 0; }
ul.yu-file-list > li {
list-style: none; }
ul.yu-file-list > li {
font-size: 0; }
ul.yu-file-list > li > span {
vertical-align: middle;
font-size: 14px; }
ul.yu-file-list > li > i {
vertical-align: middle;
font-size: 14px; }
ul.yu-file-list.simple > li {
transition: background-color 0.4s ease;
padding: 4px; }
ul.yu-file-list.simple > li.primary > i:first-child {
color: #409EFF; }
ul.yu-file-list.simple > li.primary > span {
color: #409EFF; }
ul.yu-file-list.simple > li.success > i:first-child {
color: #67C23A; }
ul.yu-file-list.simple > li.success > span {
color: #67C23A; }
ul.yu-file-list.simple > li.warning > i:first-child {
color: #fecf20; }
ul.yu-file-list.simple > li.warning > span {
color: #fecf20; }
ul.yu-file-list.simple > li.info > i:first-child {
color: #909399; }
ul.yu-file-list.simple > li.info > span {
color: #909399; }
ul.yu-file-list.simple > li.danger > i:first-child {
color: #F56C6C; }
ul.yu-file-list.simple > li.danger > span {
color: #F56C6C; }
ul.yu-file-list.simple > li:hover {
background-color: #f5f5f9; }
ul.yu-file-list.simple > li:hover > i.icon-close {
opacity: 1; }
ul.yu-file-list.simple > li:hover > i.icon-close:hover {
color: #767980; }
ul.yu-file-list.simple > li > i {
font-size: 14px; }
ul.yu-file-list.simple > li > i.icon-close {
cursor: pointer;
color: #909399;
transition: opacity 0.4s ease;
float: right;
opacity: 0;
padding: 4px; }
ul.yu-file-list.picture > li {
width: 100px;
height: 100px;
box-sizing: border-box;
border: 1px solid #E4E7ED;
border-radius: 4px;
display: inline-block;
margin: 0 8px 14px 0; }
ul.yu-file-list.picture > li > .wrap {
font-size: 0;
position: relative;
height: 100%;
line-height: 98px;
text-align: center; }
ul.yu-file-list.picture > li > .wrap > img {
vertical-align: middle;
max-width: 98px;
max-height: 98px; }
ul.yu-file-list.picture > li > .wrap > .mask {
position: absolute;
opacity: 0;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, 0.4);
color: #fff;
text-align: center;
transition: opacity 0.4s ease; }
ul.yu-file-list.picture > li > .wrap > .mask > i {
opacity: 0.8;
margin: 0 4px;
cursor: pointer;
transition: opacity 0.4s ease; }
ul.yu-file-list.picture > li > .wrap > .mask > i:hover {
opacity: 1; }
ul.yu-file-list.picture > li > .wrap:hover > .mask {
opacity: 1; }
ul.yu-file-list.title-picture > li {
position: relative;
height: 60px;
box-sizing: border-box;
border: 1px solid #E4E7ED;
border-radius: 4px;
margin: 0 8px 14px 0;
display: flex; }
ul.yu-file-list.title-picture > li > .wrap {
font-size: 0;
width: 58px;
height: 58px;
line-height: 58px;
text-align: center;
display: inline-block;
align-items: center; }
ul.yu-file-list.title-picture > li > .wrap > img {
vertical-align: middle;
max-width: 58px;
max-height: 58px; }
ul.yu-file-list.title-picture > li > span {
align-items: center;
vertical-align: middle;
line-height: 58px;
word-break: break-all;
padding: 0 8px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis; }
ul.yu-file-list.title-picture > li i.icon-close {
position: absolute;
top: 0;
right: 0; }
ul.yu-file-list.title-picture > li:hover > i.icon-close {
opacity: 1; }
ul.yu-file-list.title-picture > li:hover > i.icon-close:hover {
color: #767980; }
ul.yu-file-list.title-picture > li > i {
font-size: 14px;
vertical-align: middle; }
ul.yu-file-list.title-picture > li > i.icon-close {
cursor: pointer;
color: #909399;
transition: opacity 0.4s ease;
float: right;
opacity: 0;
padding: 4px; }
ul.yu-file-list.inline {
display: flex; }
ul.yu-file-list.inline > li {
width: 200px; }
ul.yu-file-list.block > li {
width: 100%; }
.yu-rate {
font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica Neue, Helvetica, PingFang SC, Hiragino Sans GB, Microsoft YaHei, SimSun, sans-serif;
height: 40px;
font-size: 0;
line-height: 40px; }
.yu-rate > i {
transition: all 0.4s ease;
display: inline-block;
width: 32px;
height: 18px;
box-sizing: border-box;
font-size: 18px;
color: #C0C4CC; }
.yu-rate > .icon-star {
color: #f8c422;
transform: scale(1.1); }
.yu-rate:hover {
cursor: pointer; }
.yu-rate > span {
font-size: 14px;
color: #606266;
display: inline-block; }
.yu-rate > input {
display: none; }
.yu-field {
font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica Neue, Helvetica, PingFang SC, Hiragino Sans GB, Microsoft YaHei, SimSun, sans-serif;
color: #606266;
font-size: 0;
margin: 0 8px 14px 0;
vertical-align: top;
display: block; }
.yu-field.flex {
display: flex; }
.yu-field.inline {
display: inline-block; }
.yu-field.inline > .field {
width: auto; }
.yu-field.inline > .field > .yu-input {
width: auto; }
.yu-field.inline > .field > .yu-input > textarea {
width: auto; }
.yu-field > label {
font-size: 14px;
width: 80px;
height: 32px;
line-height: 32px;
box-sizing: border-box;
padding-right: 14px; }
.yu-field > label.top {
flex-wrap: nowrap;
display: block;
margin-bottom: 14px; }
.yu-field > label.left {
display: inline-block;
text-align: left; }
.yu-field > label.right {
display: inline-block;
text-align: right; }
.yu-field > .field {
vertical-align: top;
display: inline-block;
box-sizing: border-box;
width: 100%; }
.yu-field > .field > .yu-input {
margin: 0; }
.yu-field > .field > .yu-input > input {
width: 100%; }
.yu-field > .field > .yu-input > textarea {
width: 100%; }
.yu-field > .field > .yu-switch {
margin-top: 14px; }
.yu-field > .field.cascader {
min-width: 500px; }
.yu-field .three.field {
min-width: 370px; }
.yu-field.error > .field {
text-align: left; }
.yu-field.error > .field > .yu-input > input {
border: 1px solid #F56C6C; }
.yu-field.error > .field > .yu-input > textarea {
border: 1px solid #F56C6C; }
.yu-field.error > .field > .error {
margin: 0;
font-size: 14px;
line-height: 32px;
color: #F56C6C; }
.yu-loading {
font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica Neue, Helvetica, PingFang SC, Hiragino Sans GB, Microsoft YaHei, SimSun, sans-serif;
font-size: 12px;
color: #606266;
margin-right: 8px;
text-align: center; }
.yu-loading.primary {
color: #409EFF; }
.yu-loading.success {
color: #67C23A; }
.yu-loading.warning {
color: #fecf20; }
.yu-loading.info {
color: #909399; }
.yu-loading.danger {
color: #F56C6C; }
.yu-loading.inline {
display: inline-block; }
.yu-loading.inline > p {
display: inline-block;
font-size: 14px; }
.yu-loading.large {
height: 32px;
font-size: 16px; }
.yu-loading.large i {
font-size: 22px; }
.yu-loading.big {
height: 36px;
font-size: 18px; }
.yu-loading.big i {
font-size: 24px; }
.yu-loading i.loading {
display: inline-block;
animation: loading 2s linear infinite; }
@keyframes loading {
0% {
transform: rotate(0); }
100% {
transform: rotate(360deg); } }
.yu-loading i.icon-circle-loading.loading {
animation: loading 1s linear infinite; }
.yu-loading.left {
text-align: left; }
.yu-loading.right {
text-align: right; }
.yu-loading.center {
text-align: center; }
.yu-alert {
font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica Neue, Helvetica, PingFang SC, Hiragino Sans GB, Microsoft YaHei, SimSun, sans-serif;
padding: 8px;
border-radius: 4px;
width: 100%;
font-size: 14px;
margin-bottom: 14px;
position: relative;
box-sizing: border-box;
background-color: #f2f3f3; }
.yu-alert > i {
vertical-align: middle;
margin-right: 4px;
font-size: 14px; }
.yu-alert > i.icon-close {
vertical-align: middle;
line-height: 20px;
position: absolute;
right: 8px;
top: 8px;
color: #909399;
cursor: pointer;
margin: 0; }
.yu-alert > i.icon-close:hover {
color: #767980; }
.yu-alert.primary {
background-color: #f3f9ff;
color: #409EFF;
border-color: #a6d2ff; }
.yu-alert.success {
background-color: #eef8e9;
color: #67C23A;
border-color: #a3db87; }
.yu-alert.warning {
background-color: #fffbeb;
color: #fecf20;
border-color: #fee586; }
.yu-alert.info {
background-color: #f2f3f3;
color: #909399;
border-color: #c5c7ca; }
.yu-alert.danger {
background-color: #feeded;
color: #F56C6C;
border-color: #fbcccc; }
.yu-alert.center {
text-align: center; }
.yu-alert > .title {
margin: 0;
font-size: 14px;
font-weight: bold; }
.yu-alert > .title > i {
margin-right: 4px; }
.yu-alert > .description {
margin: 0;
padding-top: 8px;
font-size: 12px; }
.yu-steps-item {
font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica Neue, Helvetica, PingFang SC, Hiragino Sans GB, Microsoft YaHei, SimSun, sans-serif;
position: relative;
font-size: 0;
color: #909399;
display: inline-block;
z-index: 100; }
.yu-steps-item > .line {
position: absolute;
top: 13px;
width: 100%;
z-index: -1; }
.yu-steps-item > .line > i {
background: #f5f5f9;
display: block;
height: 1px;
border-radius: 1px;
width: 100%; }
.yu-steps-item > .line > i::after {
top: 0;
width: 0;
height: 0;
background: #409EFF;
position: absolute;
content: "";
display: block; }
.yu-steps-item > .head {
background: #fff;
display: inline-block;
font-size: 14px; }
.yu-steps-item > .head > .inner {
box-sizing: content-box;
display: inline-block;
height: 26px;
width: 26px;
border-radius: 26px;
border: 1px solid #E4E7ED;
line-height: 26px;
text-align: center;
color: #909399;
transition: background-color .4s linear; }
.yu-steps-item > .main {
padding: 0 14px;
font-size: 14px;
background: #fff;
display: inline-block;
line-height: 26px;
vertical-align: top; }
.yu-steps-item > .main > .title {
font-size: 14px;
font-weight: normal;
margin: 0;
padding: 0;
border: none; }
.yu-steps-item > .main > .description {
font-size: 12px;
margin: 0; }
.yu-steps-item.active > .head > .inner {
background-color: #409EFF;
color: #fff;
border-color: #409EFF; }
.yu-steps-item.active > .main {
color: #303133; }
.yu-steps-item.finished > .line > i::after {
width: 100%;
height: 1px;
transition: width 1s ease; }
.yu-steps-item.finished > .head > .inner {
border-color: #409EFF;
color: #409EFF; }
.yu-steps-item.small > .line {
top: 9px; }
.yu-steps-item.small > .head > .inner {
height: 18px;
width: 18px;
border-radius: 18px;
line-height: 18px;
font-size: 12px; }
.yu-steps-item.small > .head > .inner i {
font-size: 12px; }
.yu-steps-item.small > .main {
padding: 0 14px;
font-size: 12px;
background: #fff;
display: inline-block;
line-height: 18px;
vertical-align: top; }
.yu-steps-item.small > .main > .description {
font-size: 10px; }
.yu-steps.vertical > .yu-steps-item {
display: block;
height: 60px; }
.yu-steps.vertical > .yu-steps-item > .head {
padding-bottom: 4px; }
.yu-steps.vertical > .yu-steps-item > .head:nth-child(n+2) {
padding-left: 0; }
.yu-steps.vertical > .yu-steps-item > .head > .inner {
transition: background-color .4s linear; }
.yu-steps.vertical > .yu-steps-item > .line {
top: 26px;
left: 13px;
height: 30px; }
.yu-steps.vertical > .yu-steps-item > .line > i {
width: 1px;
height: 100%; }
.yu-steps.vertical > .yu-steps-item > .line > i::after {
width: 0;
height: 0; }
.yu-steps.vertical > .yu-steps-item.small > .line {
left: 9px; }
.yu-steps.vertical > .yu-steps-item.finished > .line > i::after {
width: 1px;
height: 100%;
transition: height 0.4s ease; }
.yu-steps > .yu-steps-item:nth-child(n+2) > .head {
padding-left: 14px; }
.yu-steps > .yu-steps-item:last-child > .line {
display: none; }
.yu-notification {
font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica Neue, Helvetica, PingFang SC, Hiragino Sans GB, Microsoft YaHei, SimSun, sans-serif;
display: inline-block;
position: fixed;
z-index: 1000; }
.yu-notification > .notice {
width: 300px;
display: block;
background-color: #fff;
box-sizing: border-box;
padding: 14px;
box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
margin-bottom: 14px;
transition: all 0.4s ease;
border-radius: 4px; }
.yu-notification > .notice > .content {
display: inline-block;
vertical-align: top;
position: relative; }
.yu-notification > .notice > .content > .message {
font-size: 16px;
margin-bottom: 8px; }
.yu-notification > .notice > .content > .description {
margin-bottom: 8px;
font-size: 14px;
color: #606266; }
.yu-notification > .notice > i.icon-close {
position: absolute;
right: 14px;
top: 14px; }
.yu-notification > .notice > i:not(.icon-close) {
vertical-align: top;
display: inline-block;
font-size: 30px;
color: #909399;
margin-right: 8px; }
.yu-notification > .notice > i:not(.icon-close).icon-check-circle {
color: #67C23A; }
.yu-notification > .notice > i:not(.icon-close).icon-warning-circle {
color: #fecf20; }
.yu-notification > .notice > i:not(.icon-close).icon-close-circle {
color: #F56C6C; }
.yu-notification > .notice > i:not(.icon-close).icon-information {
color: #909399; }
.yu-notification.top-right {
top: 22px;
right: 0; }
.yu-notification.top-right > .notice {
transform: translateX(300px); }
.yu-notification.top-right > .notice.active {
transform: translateX(-22px); }
.yu-notification.top-left {
top: 22px;
left: 0; }
.yu-notification.top-left > .notice {
transform: translateX(-300px); }
.yu-notification.top-left > .notice.active {
transform: translateX(22px); }
.yu-notification.bottom-right {
bottom: 22px;
right: 0; }
.yu-notification.bottom-right > .notice {
transform: translateX(300px); }
.yu-notification.bottom-right > .notice.active {
transform: translateX(-22px); }
.yu-notification.bottom-left {
bottom: 22px;
left: 0; }
.yu-notification.bottom-left > .notice {
transform: translateX(-300px); }
.yu-notification.bottom-left > .notice.active {
transform: translateX(22px); }
.fade-enter, .fade-leave-active, .fade-linear-enter, .fade-linear-leave, .fade-linear-leave-active, .fade-linear-enter, .fade-linear-leave, .fade-linear-leave-active {
opacity: 0; }
.fade-enter-active, .fade-leave-active {
-webkit-transition: all 0.3s cubic-bezier(0.55, 0, 0.1, 1);
transition: all 0.3s cubic-bezier(0.55, 0, 0.1, 1); }
.yu-tag {
font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica Neue, Helvetica, PingFang SC, Hiragino Sans GB, Microsoft YaHei, SimSun, sans-serif;
margin: 0 8px 14px 0;
padding: 0 8px;
background-color: #f3f9ff;
border: 1px solid #a6d2ff;
display: inline-block;
height: 32px;
font-size: 14px;
line-height: 32px;
color: #409EFF;
border-radius: 4px;
white-space: nowrap; }
.yu-tag i.icon-close {
font-size: 14px;
margin-left: 4px;
cursor: pointer;
color: #73b8ff; }
.yu-tag i.icon-close:hover {
color: #409EFF; }
.yu-tag.primary {
background-color: #f3f9ff;
color: #409EFF;
border: 1px solid #409EFF; }
.yu-tag.primary i.icon-close {
color: #73b8ff; }
.yu-tag.primary i.icon-close:hover {
color: #409EFF; }
.yu-tag.success {
background-color: #eef8e9;
color: #67C23A;
border: 1px solid #67C23A; }
.yu-tag.success i.icon-close {
color: #85cf60; }
.yu-tag.success i.icon-close:hover {
color: #67C23A; }
.yu-tag.warning {
background-color: #fffbeb;
color: #fecf20;
border: 1px solid #fecf20; }
.yu-tag.warning i.icon-close {
color: #feda53; }
.yu-tag.warning i.icon-close:hover {
color: #fecf20; }
.yu-tag.info {
background-color: #f2f3f3;
color: #909399;
border: 1px solid #909399; }
.yu-tag.info i.icon-close {
color: #abadb1; }
.yu-tag.info i.icon-close:hover {
color: #909399; }
.yu-tag.danger {
background-color: #feeded;
color: #F56C6C;
border: 1px solid #F56C6C; }
.yu-tag.danger i.icon-close {
color: #f89c9c; }
.yu-tag.danger i.icon-close:hover {
color: #F56C6C; }
.yu-tag.small {
height: 24px;
font-size: 12px;
line-height: 24px; }
.yu-tag.small i.icon-close {
font-size: 12px; }
.yu-tag.large {
height: 40px;
font-size: 16px;
line-height: 40px; }
.yu-tag.large i.icon-close {
font-size: 16px; }
.yu-tag.border-none {
border: none; }
.yu-progress {
font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica Neue, Helvetica, PingFang SC, Hiragino Sans GB, Microsoft YaHei, SimSun, sans-serif;
display: flex; }
@keyframes progress-active {
0% {
opacity: 0.1;
width: 0; }
20% {
opacity: 0.5;
width: 0; }
100% {
opacity: 0;
width: 100%; } }
.yu-progress .line-outer {
width: 100%;
border-radius: 5px;
height: 10px;
background-color: #f5f5f9; }
.yu-progress .line-outer .line-inner {
width: 0;
height: 10px;
border-radius: 5px;
background-color: #409EFF;
position: relative; }
.yu-progress .line-outer .line-inner.active::before {
content: "";
opacity: 0;
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: #fff;
border-radius: 10px;
animation: progress-active 2s ease infinite; }
.yu-progress .text {
font-size: 14px;
text-align: right;
margin-top: -6px;
width: 45px; }
.yu-progress .text i {
font-size: 20px;
color: #67C23A; }
.yu-progress .circle-outer {
position: relative;
display: inline-block; }
.yu-progress .circle-outer .text-warp {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%); }
.yu-badge {
font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica Neue, Helvetica, PingFang SC, Hiragino Sans GB, Microsoft YaHei, SimSun, sans-serif;
position: relative;
display: inline-block;
margin-right: 14px;
font-size: 0; }
.yu-badge .transition {
transform: scale(0);
opacity: 0;
transition: transform .3s ease, opacity .3s ease; }
.yu-badge .transition.transition-enter {
transform: scale(1);
opacity: 1; }
.yu-badge .transition.transition-leave {
transform: scale(0);
opacity: 0; }
.yu-badge > .badge {
position: absolute;
right: -10px;
top: -10px;
z-index: 1000;
height: 20px;
line-height: 20px;
border-radius: 10px;
min-width: 20px;
padding: 0 6px;
box-sizing: border-box;
text-align: center;
background-color: #F56C6C;
display: inline-block;
color: #fff;
font-size: 12px; }
.yu-badge > .badge.hide {
display: none; }
.yu-badge > .badge.primary {
background-color: #409EFF; }
.yu-badge > .badge.success {
background-color: #67C23A; }
.yu-badge > .badge.warning {
background-color: #fecf20; }
.yu-badge > .badge.info {
background-color: #909399; }
.yu-badge > .badge.danger {
background-color: #F56C6C; }
.yu-badge > .dot {
position: absolute;
right: -4px;
top: -4px;
z-index: 1000;
background-color: #F56C6C;
width: 8px;
height: 8px;
border-radius: 4px; }
.yu-badge > .dot.hide {
display: none; }
.yu-badge > .dot.primary {
background-color: #409EFF; }
.yu-badge > .dot.success {
background-color: #67C23A; }
.yu-badge > .dot.warning {
background-color: #fecf20; }
.yu-badge > .dot.info {
background-color: #909399; }
.yu-badge > .dot.danger {
background-color: #F56C6C; }
.yu-option {
font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica Neue, Helvetica, PingFang SC, Hiragino Sans GB, Microsoft YaHei, SimSun, sans-serif;
background-color: #fff;
min-width: 175px;
border: 1px solid #E4E7ED;
border-radius: 4px;
color: #606266;
box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
display: inline-block;
padding-inline-start: 0;
padding: 0; }
.yu-option > li {
list-style: none; }
.yu-option.overflow {
overflow: auto;
max-height: 175px; }
.yu-option > li {
box-sizing: border-box;
font-size: 14px;
padding: 8px 14px; }
.yu-option > li:hover:not(.disabled) {
background-color: #f5f5f9; }
.yu-option > li.active {
background-color: #f5f5f9;
font-weight: bold;
color: #409EFF; }
.yu-option > li.hide {
display: none; }
.yu-option > li.disabled {
color: #C0C4CC;
cursor: not-allowed; }
.yu-input {
font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica Neue, Helvetica, PingFang SC, Hiragino Sans GB, Microsoft YaHei, SimSun, sans-serif;
position: relative;
display: block;
margin: 0 8px 14px 0;
font-size: 0; }
.yu-input .transition {
transform: scaleY(0);
opacity: 0;
transform-origin: center top;
transition: transform .3s ease, opacity .3s ease; }
.yu-input .transition.transition-enter {
transform: scaleY(1);
opacity: 1; }
.yu-input .transition.transition-leave {
transform: scaleY(0);
opacity: 0; }
.yu-input > input {
width: 175px;
padding: 4px 14px;
outline: none;
font-size: 14px;
color: #606266;
font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica Neue, Helvetica, PingFang SC, Hiragino Sans GB, Microsoft YaHei, SimSun, sans-serif;
box-sizing: border-box;
height: 32px;
border: 1px solid #E4E7ED;
border-radius: 4px;
transition: all ease 0.4s; }
.yu-input > input::placeholder {
color: #C0C4CC; }
.yu-input > input:hover {
border: 1px solid #C0C4CC; }
.yu-input > input:focus {
border: 1px solid #409EFF; }
.yu-input > input.prefix {
padding-left: 32px; }
.yu-input > input.suffix {
padding-right: 32px; }
.yu-input > input.large {
height: 40px; }
.yu-input > input.small {
height: 24px; }
.yu-input > input.full {
width: 100%; }
.yu-input.textarea {
height: auto; }
.yu-input.disabled > input {
color: #C0C4CC;
background-color: #f5f5f9; }
.yu-input.disabled > input:hover {
border: 1px solid #E4E7ED;
cursor: not-allowed; }
.yu-input.disabled > input:focus {
border: 1px solid #E4E7ED; }
.yu-input > span.prefix {
position: relative;
color: #C0C4CC; }
.yu-input > span.prefix > i {
position: absolute;
left: 10px;
top: -14px; }
.yu-input > span.suffix {
position: relative;
color: #C0C4CC; }
.yu-input > span.suffix > i {
position: absolute;
left: -25px;
top: -14px; }
.yu-input > span.suffix.clearable > i {
transition: color .1s;
cursor: pointer; }
.yu-input > span.suffix.clearable > i:hover {
color: #909399; }
.yu-input > textarea {
padding: 8px;
border-color: #E4E7ED;
border-radius: 4px;
font-size: 14px;
outline: none;
box-sizing: border-box;
transition: all ease .4s; }
.yu-input > textarea:hover {
border: 1px solid #C0C4CC; }
.yu-input > textarea:focus {
border: 1px solid #409EFF; }
.yu-input > textarea::placeholder {
color: #DCDFE6;
font-weight: lighter; }
.yu-input > input.append {
border-radius: 4px 0 0 4px; }
.yu-input > input.prepend {
border-radius: 0 4px 4px 0; }
.yu-input > input.number {
padding-right: 0; }
.yu-input > .yu-button.prepend {
margin: 0;
border-radius: 4px 0 0 4px;
vertical-align: top; }
.yu-input > .yu-button.append {
margin: 0;
border-radius: 0 4px 4px 0;
vertical-align: top; }
.yu-input > .yu-option {
margin-top: 8px;
position: absolute;
top: 30px;
left: 0;
z-index: 1000; }
.yu-option {
font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica Neue, Helvetica, PingFang SC, Hiragino Sans GB, Microsoft YaHei, SimSun, sans-serif;
background-color: #fff;
min-width: 175px;
border: 1px solid #E4E7ED;
border-radius: 4px;
color: #606266;
box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
display: inline-block;
padding-inline-start: 0;
padding: 0; }
.yu-option > li {
list-style: none; }
.yu-option.overflow {
overflow: auto;
max-height: 175px; }
.yu-option > li {
box-sizing: border-box;
font-size: 14px;
padding: 8px 14px; }
.yu-option > li:hover:not(.disabled) {
background-color: #f5f5f9; }
.yu-option > li.active {
background-color: #f5f5f9;
font-weight: bold;
color: #409EFF; }
.yu-option > li.hide {
display: none; }
.yu-option > li.disabled {
color: #C0C4CC;
cursor: not-allowed; }
.yu-select {
font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica Neue, Helvetica, PingFang SC, Hiragino Sans GB, Microsoft YaHei, SimSun, sans-serif;
position: relative; }
.yu-select input {
transition: all ease .4s; }
.yu-select input + span.suffix > i.icon-angle-down {
transition: all ease .4s; }
.yu-select input:hover {
cursor: pointer; }
.yu-select input:focus:not([readonly]) {
border: 1px solid #409EFF; }
.yu-select input:focus:not([readonly]) + span.suffix > i.icon-angle-down {
transform: rotate(-180deg); }
.yu-select .transition {
transform: scaleY(0);
opacity: 0;
transform-origin: center top;
transition: transform .3s ease, opacity .3s ease; }
.yu-select .transition.transition-enter {
transform: scaleY(1);
opacity: 1; }
.yu-select .transition.transition-leave {
transform: scaleY(0);
opacity: 0; }
.yu-select.prepend {
display: inline-block;
vertical-align: top;
margin: 0; }
.yu-select.prepend > .yu-input {
margin: 0; }
.yu-select.prepend > .yu-input > input {
border-radius: 4px 0 0 4px; }
.yu-select.append {
display: inline-block;
vertical-align: top; }
.yu-select.append > .yu-input {
margin: 0; }
.yu-select.append > .yu-input > input {
border-radius: 0 4px 4px 0; }
.yu-select > .yu-option {
margin-top: 8px;
position: absolute;
top: 30px;
z-index: 1000; }
.yu-option {
font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica Neue, Helvetica, PingFang SC, Hiragino Sans GB, Microsoft YaHei, SimSun, sans-serif;
background-color: #fff;
min-width: 175px;
border: 1px solid #E4E7ED;
border-radius: 4px;
color: #606266;
box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
display: inline-block;
padding-inline-start: 0;
padding: 0; }
.yu-option > li {
list-style: none; }
.yu-option.overflow {
overflow: auto;
max-height: 175px; }
.yu-option > li {
box-sizing: border-box;
font-size: 14px;
padding: 8px 14px; }
.yu-option > li:hover:not(.disabled) {
background-color: #f5f5f9; }
.yu-option > li.active {
background-color: #f5f5f9;
font-weight: bold;
color: #409EFF; }
.yu-option > li.hide {
display: none; }
.yu-option > li.disabled {
color: #C0C4CC;
cursor: not-allowed; }
.yu-input {
font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica Neue, Helvetica, PingFang SC, Hiragino Sans GB, Microsoft YaHei, SimSun, sans-serif;
position: relative;
display: block;
margin: 0 8px 14px 0;
font-size: 0; }
.yu-input .transition {
transform: scaleY(0);
opacity: 0;
transform-origin: center top;
transition: transform .3s ease, opacity .3s ease; }
.yu-input .transition.transition-enter {
transform: scaleY(1);
opacity: 1; }
.yu-input .transition.transition-leave {
transform: scaleY(0);
opacity: 0; }
.yu-input > input {
width: 175px;
padding: 4px 14px;
outline: none;
font-size: 14px;
color: #606266;
font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica Neue, Helvetica, PingFang SC, Hiragino Sans GB, Microsoft YaHei, SimSun, sans-serif;
box-sizing: border-box;
height: 32px;
border: 1px solid #E4E7ED;
border-radius: 4px;
transition: all ease 0.4s; }
.yu-input > input::placeholder {
color: #C0C4CC; }
.yu-input > input:hover {
border: 1px solid #C0C4CC; }
.yu-input > input:focus {
border: 1px solid #409EFF; }
.yu-input > input.prefix {
padding-left: 32px; }
.yu-input > input.suffix {
padding-right: 32px; }
.yu-input > input.large {
height: 40px; }
.yu-input > input.small {
height: 24px; }
.yu-input > input.full {
width: 100%; }
.yu-input.textarea {
height: auto; }
.yu-input.disabled > input {
color: #C0C4CC;
background-color: #f5f5f9; }
.yu-input.disabled > input:hover {
border: 1px solid #E4E7ED;
cursor: not-allowed; }
.yu-input.disabled > input:focus {
border: 1px solid #E4E7ED; }
.yu-input > span.prefix {
position: relative;
color: #C0C4CC; }
.yu-input > span.prefix > i {
position: absolute;
left: 10px;
top: -14px; }
.yu-input > span.suffix {
position: relative;
color: #C0C4CC; }
.yu-input > span.suffix > i {
position: absolute;
left: -25px;
top: -14px; }
.yu-input > span.suffix.clearable > i {
transition: color .1s;
cursor: pointer; }
.yu-input > span.suffix.clearable > i:hover {
color: #909399; }
.yu-input > textarea {
padding: 8px;
border-color: #E4E7ED;
border-radius: 4px;
font-size: 14px;
outline: none;
box-sizing: border-box;
transition: all ease .4s; }
.yu-input > textarea:hover {
border: 1px solid #C0C4CC; }
.yu-input > textarea:focus {
border: 1px solid #409EFF; }
.yu-input > textarea::placeholder {
color: #DCDFE6;
font-weight: lighter; }
.yu-input > input.append {
border-radius: 4px 0 0 4px; }
.yu-input > input.prepend {
border-radius: 0 4px 4px 0; }
.yu-input > input.number {
padding-right: 0; }
.yu-input > .yu-button.prepend {
margin: 0;
border-radius: 4px 0 0 4px;
vertical-align: top; }
.yu-input > .yu-button.append {
margin: 0;
border-radius: 0 4px 4px 0;
vertical-align: top; }
.yu-input > .yu-option {
margin-top: 8px;
position: absolute;
top: 30px;
left: 0;
z-index: 1000; }
.yu-pagination {
font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica Neue, Helvetica, PingFang SC, Hiragino Sans GB, Microsoft YaHei, SimSun, sans-serif;
font-size: 14px; }
.yu-pagination > ul {
padding-inline-start: 0;
padding: 0;
display: inline-block;
user-select: none; }
.yu-pagination > ul > li {
list-style: none; }
.yu-pagination > ul > li {
font-size: 14px;
padding: 0 12px;
display: inline-block;
height: 32px;
line-height: 32px;
cursor: pointer;
color: #606266;
transition: all 0.4s; }
.yu-pagination > ul > li:hover:not(.disabled) {
color: #409EFF; }
.yu-pagination > ul > li.disabled {
cursor: not-allowed;
background-color: #fff;
color: #C0C4CC; }
.yu-pagination > ul > li.more span {
display: inline; }
.yu-pagination > ul > li.more i {
display: none; }
.yu-pagination > ul > li.more:hover i {
display: inline-block; }
.yu-pagination > ul > li.more:hover span {
display: none; }
.yu-pagination > ul > li.current {
cursor: default;
background-color: #409EFF;
border-radius: 4px;
color: #fff; }
.yu-pagination.border > ul > li {
background-color: #fff;
margin-right: 8px;
border-radius: 4px;
border: 1px solid #E4E7ED; }
.yu-pagination.border > ul > li:hover:not(.disabled) {
color: #409EFF;
border-color: #409EFF; }
.yu-pagination.border > ul > li.current {
background-color: #409EFF;
border-color: #409EFF;
color: white; }
.yu-pagination > span {
margin-right: 8px; }
.yu-pagination > label {
margin-right: 8px; }
.yu-pagination > .yu-select.page-size {
display: inline-block; }
.yu-pagination > .yu-select.page-size input {
width: 100px; }
.yu-pagination > .yu-select.page-size .yu-option {
width: 100px; }
.yu-pagination > .yu-input.goto {
display: inline-block; }
.yu-pagination > .yu-input.goto input {
width: 50px; }
.yu-collapse {
font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica Neue, Helvetica, PingFang SC, Hiragino Sans GB, Microsoft YaHei, SimSun, sans-serif;
color: #606266;
font-size: 0; }
.yu-collapse > .yu-collapse-item:last-child {
border-bottom: 1px solid #E4E7ED; }
.yu-collapse-item {
width: 100%; }
.yu-collapse-item > .wrap {
font-size: 14px;
box-sizing: border-box;
width: 100%;
overflow: hidden;
margin-bottom: -1px;
display: inline-block; }
.yu-collapse-item > .wrap > .header {
border-top: 1px solid #E4E7ED;
height: 40px;
cursor: pointer;
line-height: 40px; }
.yu-collapse-item > .wrap > .header:not(.hide-icon):after {
font-family: "iconfont" !important;
font-size: 16px;
font-style: normal;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
content: "";
float: right;
color: #C0C4CC;
transition: all 0.4s ease; }
.yu-collapse-item > .wrap > .content {
width: 100%;
height: 0;
overflow: hidden;
transition: height 0.4s ease; }
.yu-collapse-item > .wrap.active > .header:after {
transform: rotate(90deg); }
.yu-breadcrumb {
font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica Neue, Helvetica, PingFang SC, Hiragino Sans GB, Microsoft YaHei, SimSun, sans-serif;
font-size: 0;
color: #606266; }
.yu-breadcrumb-item {
font-size: 14px;
cursor: pointer; }
.yu-breadcrumb-item.current {
font-weight: bold;
color: #303133; }
.yu-breadcrumb-item > i {
color: #909399;
padding: 0 4px; }
.yu-tabs {
font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica Neue, Helvetica, PingFang SC, Hiragino Sans GB, Microsoft YaHei, SimSun, sans-serif;
color: #606266;
display: flex;
flex-direction: column; }
.yu-tabs ul {
padding-inline-start: 0;
padding: 0;
font-size: 0;
width: 100%;
border-bottom: 1px solid #E4E7ED;
box-sizing: border-box;
margin: 0;
position: relative; }
.yu-tabs ul > li {
list-style: none; }
.yu-tabs ul .line {
display: block;
height: 2px;
width: 84px;
background-color: #409EFF;
position: absolute;
transition: all 0.4s ease;
bottom: 0;
margin: 0; }
.yu-tabs ul li {
font-size: 14px;
border-bottom: 2px solid #fff;
transition: background-color 0.4s, color 0.4s;
display: inline-block;
height: 40px;
line-height: 40px;
padding: 0 14px;
text-align: center;
cursor: pointer; }
.yu-tabs ul li.active {
color: #409EFF;
border-color: #409EFF;
border-bottom: none; }
.yu-tabs ul li.active i.icon-close {
font-size: 14px;
color: #73b8ff; }
.yu-tabs ul li.active i.icon-close:hover {
color: #409EFF; }
.yu-tabs.card ul {
height: 40px;
border-left: none;
border-right: none; }
.yu-tabs.card ul li {
background-color: #fff;
border-right: 1px solid #E4E7ED;
border-top: 1px solid #E4E7ED;
border-bottom: 1px solid #E4E7ED; }
.yu-tabs.card ul li:first-child {
border-left: 1px solid #E4E7ED;
border-top-left-radius: 4px; }
.yu-tabs.card ul li:last-child {
border-top-right-radius: 4px; }
.yu-tabs.card ul li.active {
border-bottom: 1px solid #fff;
color: #409EFF; }
.yu-tabs.card ul .line {
display: none; }
.yu-tabs.border-card ul {
height: 40px;
background-color: #edeeee;
border: 1px solid #E4E7ED; }
.yu-tabs.border-card ul li {
display: inline-block;
box-sizing: border-box;
border-bottom: none; }
.yu-tabs.border-card ul .line {
display: none; }
.yu-tabs.border-card ul li.active {
background-color: #fff;
border-bottom: 2px solid #fff;
border-left: 1px solid #E4E7ED;
border-right: 1px solid #E4E7ED;
color: #409EFF; }
.yu-tabs.border-card ul li.active:first-child {
border-left: none; }
.yu-tabs.default.bottom {
display: flex;
flex-direction: column-reverse; }
.yu-tabs.default.bottom ul {
margin: 0;
position: relative;
border-top: 1px solid #E4E7ED;
border-bottom: none; }
.yu-tabs.default.bottom ul .line {
display: block;
height: 2px;
width: 84px;
background-color: #409EFF;
position: absolute;
transition: all 0.4s ease;
left: 0;
top: 0;
margin: 0; }
.yu-tabs.default.bottom ul li {
border-top: 2px solid #fff; }
.yu-tabs.default.bottom ul li.active {
border-bottom: none; }
.yu-tabs.default.left {
display: flex; }
.yu-tabs.default.left ul {
max-width: 150px;
border: none;
text-align: center;
position: relative; }
.yu-tabs.default.left ul .line {
display: block;
height: 40px;
width: 2px;
background-color: #409EFF;
position: absolute;
transition: all 0.4s ease;
left: 0;
top: 0;
margin: 0; }
.yu-tabs.default.left ul li {
display: block;
border-bottom: none;
border-right: 2px solid #EBEEF5; }
.yu-tabs.default.left ul li.active {
color: #409EFF; }
.yu-tabs.default.right {
display: flex;
flex-direction: row-reverse; }
.yu-tabs.default.right ul {
max-width: 150px;
border: none;
text-align: center;
position: relative; }
.yu-tabs.default.right ul .line {
display: block;
height: 40px;
width: 2px;
background-color: #409EFF;
position: absolute;
transition: all 0.4s ease;
left: 0;
top: 0;
margin: 0; }
.yu-tabs.default.right ul li {
display: block;
border-bottom: none;
border-left: 2px solid #EBEEF5; }
.yu-tabs.default.right ul li.active {
color: #409EFF; }
.yu-table {
font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica Neue, Helvetica, PingFang SC, Hiragino Sans GB, Microsoft YaHei, SimSun, sans-serif;
border-collapse: collapse; }
.yu-table thead tr th {
font-size: 14px;
color: #606266;
box-sizing: border-box;
padding: 14px 0;
border-bottom: 1px solid #E4E7ED; }
.yu-table thead tr th .cell {
padding: 0 8px;
text-align: left; }
.yu-table tfoot tr {
background-color: #f5f5f9; }
.yu-table tfoot tr td {
font-size: 14px;
color: #606266;
box-sizing: border-box;
padding: 14px 0;
border-bottom: 1px solid #E4E7ED; }
.yu-table tfoot tr td .cell {
padding: 0 8px;
text-align: left; }
.yu-table tbody tr {
transition: background-color .4s; }
.yu-table tbody tr td {
font-size: 14px;
color: #606266;
box-sizing: border-box;
padding: 14px 0;
border-bottom: 1px solid #E4E7ED; }
.yu-table tbody tr td .cell {
padding: 0 8px; }
.yu-table tbody tr td a {
color: #409EFF;
cursor: pointer; }
.yu-table tbody tr td a:hover {
color: #73b8ff; }
.yu-table tbody tr.primary {
background-color: #f3f9ff; }
.yu-table tbody tr.primary:hover {
background-color: #fff; }
.yu-table tbody tr.success {
background-color: #eef8e9; }
.yu-table tbody tr.success:hover {
background-color: #fff; }
.yu-table tbody tr.warning {
background-color: #fffbeb; }
.yu-table tbody tr.warning:hover {
background-color: #fff; }
.yu-table tbody tr.info {
background-color: #f2f3f3; }
.yu-table tbody tr.info:hover {
background-color: #fff; }
.yu-table tbody tr.danger {
background-color: #feeded; }
.yu-table tbody tr.danger:hover {
background-color: #fff; }
.yu-table tbody tr:hover {
background-color: #f5f5f9; }
.yu-table.celled {
border: 1px solid #E4E7ED; }
.yu-table.celled td, .yu-table.celled th {
border-right: 1px solid #E4E7ED; }
.yu-table.stripe tbody tr:nth-child(2n) {
background-color: #fafafa; }
.yu-table.stripe tbody tr:nth-child(2n):hover {
background-color: #f5f5f9; }
.yu-table {
font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica Neue, Helvetica, PingFang SC, Hiragino Sans GB, Microsoft YaHei, SimSun, sans-serif;
border-collapse: collapse; }
.yu-table thead tr th {
font-size: 14px;
color: #606266;
box-sizing: border-box;
padding: 14px 0;
border-bottom: 1px solid #E4E7ED; }
.yu-table thead tr th .cell {
padding: 0 8px;
text-align: left; }
.yu-table tfoot tr {
background-color: #f5f5f9; }
.yu-table tfoot tr td {
font-size: 14px;
color: #606266;
box-sizing: border-box;
padding: 14px 0;
border-bottom: 1px solid #E4E7ED; }
.yu-table tfoot tr td .cell {
padding: 0 8px;
text-align: left; }
.yu-table tbody tr {
transition: background-color .4s; }
.yu-table tbody tr td {
font-size: 14px;
color: #606266;
box-sizing: border-box;
padding: 14px 0;
border-bottom: 1px solid #E4E7ED; }
.yu-table tbody tr td .cell {
padding: 0 8px; }
.yu-table tbody tr td a {
color: #409EFF;
cursor: pointer; }
.yu-table tbody tr td a:hover {
color: #73b8ff; }
.yu-table tbody tr.primary {
background-color: #f3f9ff; }
.yu-table tbody tr.primary:hover {
background-color: #fff; }
.yu-table tbody tr.success {
background-color: #eef8e9; }
.yu-table tbody tr.success:hover {
background-color: #fff; }
.yu-table tbody tr.warning {
background-color: #fffbeb; }
.yu-table tbody tr.warning:hover {
background-color: #fff; }
.yu-table tbody tr.info {
background-color: #f2f3f3; }
.yu-table tbody tr.info:hover {
background-color: #fff; }
.yu-table tbody tr.danger {
background-color: #feeded; }
.yu-table tbody tr.danger:hover {
background-color: #fff; }
.yu-table tbody tr:hover {
background-color: #f5f5f9; }
.yu-table.celled {
border: 1px solid #E4E7ED; }
.yu-table.celled td, .yu-table.celled th {
border-right: 1px solid #E4E7ED; }
.yu-table.stripe tbody tr:nth-child(2n) {
background-color: #fafafa; }
.yu-table.stripe tbody tr:nth-child(2n):hover {
background-color: #f5f5f9; }
.yu-fixed-table {
font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica Neue, Helvetica, PingFang SC, Hiragino Sans GB, Microsoft YaHei, SimSun, sans-serif; }
.yu-fixed-table .fixed-box {
overflow-y: scroll;
overflow-x: hidden;
border-bottom: 1px solid #E4E7ED;
border-top: 1px solid #E4E7ED; }
.yu-fixed-table .yu-table tbody tr:last-child td {
border-bottom: none; }
div.yu-button {
vertical-align: top;
line-height: 32px; }
div.yu-button.large {
line-height: 40px; }
div.yu-button.small {
line-height: 24px; }
.yu-button {
font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica Neue, Helvetica, PingFang SC, Hiragino Sans GB, Microsoft YaHei, SimSun, sans-serif;
height: 32px;
font-size: 14px;
padding: 0 14px;
margin: 0 8px 14px 0;
display: inline-block;
color: #606266;
box-sizing: border-box;
border-radius: 4px;
background-color: #fff;
border: 1px solid #E4E7ED;
cursor: pointer;
transition: border 0.4s, color 0.4s;
outline: none;
position: relative;
overflow: hidden; }
.yu-button:not(.disabled):hover {
border: 1px solid #409EFF;
color: #409EFF;
z-index: 1; }
.yu-button:not(.disabled):focus {
color: #409EFF;
border: 1px solid #409EFF; }
.yu-button.disabled {
color: #C0C4CC;
background: #f5f5f9;
cursor: not-allowed; }
.yu-button.primary {
color: #fff;
border: 1px solid #409EFF;
background-color: #409EFF;
transition: all .3s ease; }
.yu-button.primary.disabled {
border: 1px solid #c0dfff;
background-color: #c0dfff;
cursor: not-allowed; }
.yu-button.primary:hover:not(.disabled), .yu-button.primary:focus:not(.disabled) {
color: #fff;
border: 1px solid #73b8ff;
background-color: #73b8ff; }
.yu-button.success {
color: #fff;
border: 1px solid #67C23A;
background-color: #67C23A;
transition: all .3s ease; }
.yu-button.success.disabled {
border: 1px solid #b2e19b;
background-color: #b2e19b;
cursor: not-allowed; }
.yu-button.success:hover:not(.disabled), .yu-button.success:focus:not(.disabled) {
color: #fff;
border: 1px solid #85cf60;
background-color: #85cf60; }
.yu-button.warning {
color: #fff;
border: 1px solid #fecf20;
background-color: #fecf20;
transition: all .3s ease; }
.yu-button.warning.disabled {
border: 1px solid #ffea9f;
background-color: #ffea9f;
cursor: not-allowed; }
.yu-button.warning:hover:not(.disabled), .yu-button.warning:focus:not(.disabled) {
color: #fff;
border: 1px solid #feda53;
background-color: #feda53; }
.yu-button.info {
color: #fff;
border: 1px solid #909399;
background-color: #909399;
transition: all .3s ease; }
.yu-button.info.disabled {
border: 1px solid #d2d4d6;
background-color: #d2d4d6;
cursor: not-allowed; }
.yu-button.info:hover:not(.disabled), .yu-button.info:focus:not(.disabled) {
color: #fff;
border: 1px solid #abadb1;
background-color: #abadb1; }
.yu-button.danger {
color: #fff;
border: 1px solid #F56C6C;
background-color: #F56C6C;
transition: all .3s ease; }
.yu-button.danger.disabled {
border: 1px solid #fde3e3;
background-color: #fde3e3;
cursor: not-allowed; }
.yu-button.danger:hover:not(.disabled), .yu-button.danger:focus:not(.disabled) {
color: #fff;
border: 1px solid #f89c9c;
background-color: #f89c9c; }
.yu-button.circle {
padding: 0;
width: 32px;
height: 32px;
border-radius: 50%; }
.yu-button.plain:hover:not(.disabled), .yu-button.plain:focus:not(.disabled) {
border: 1px solid #409EFF;
color: #409EFF;
background: #fff; }
.yu-button.plain.primary {
color: #409EFF;
border: 1px solid #409EFF;
background-color: #f3f9ff;
transition: all .3s ease; }
.yu-button.plain.primary.disabled {
color: #a6d2ff;
border: 1px solid #c0dfff;
background-color: #fdfeff;
cursor: not-allowed; }
.yu-button.plain.primary:hover:not(.disabled), .yu-button.plain.primary:focus:not(.disabled) {
border: 1px solid #409EFF;
background-color: #409EFF;
color: #fff; }
.yu-button.plain.success {
color: #67C23A;
border: 1px solid #67C23A;
background-color: #eef8e9;
transition: all .3s ease; }
.yu-button.plain.success.disabled {
color: #a3db87;
border: 1px solid #b2e19b;
background-color: #f4fbf1;
cursor: not-allowed; }
.yu-button.plain.success:hover:not(.disabled), .yu-button.plain.success:focus:not(.disabled) {
border: 1px solid #67C23A;
background-color: #67C23A;
color: #fff; }
.yu-button.plain.warning {
color: #fecf20;
border: 1px solid #fecf20;
background-color: #fffbeb;
transition: all .3s ease; }
.yu-button.plain.warning.disabled {
color: #fee586;
border: 1px solid #ffea9f;
background-color: #fffdf5;
cursor: not-allowed; }
.yu-button.plain.warning:hover:not(.disabled), .yu-button.plain.warning:focus:not(.disabled) {
border: 1px solid #fecf20;
background-color: #fecf20;
color: #fff; }
.yu-button.plain.info {
color: #909399;
border: 1px solid #909399;
background-color: #f2f3f3;
transition: all .3s ease; }
.yu-button.plain.info.disabled {
color: #c5c7ca;
border: 1px solid #d2d4d6;
background-color: #f8f8f8;
cursor: not-allowed; }
.yu-button.plain.info:hover:not(.disabled), .yu-button.plain.info:focus:not(.disabled) {
border: 1px solid #909399;
background-color: #909399;
color: #fff; }
.yu-button.plain.danger {
color: #F56C6C;
border: 1px solid #F56C6C;
background-color: #feeded;
transition: all .3s ease; }
.yu-button.plain.danger.disabled {
color: #fbcccc;
border: 1px solid #fde3e3;
background-color: #fef6f6;
cursor: not-allowed; }
.yu-button.plain.danger:hover:not(.disabled), .yu-button.plain.danger:focus:not(.disabled) {
border: 1px solid #F56C6C;
background-color: #F56C6C;
color: #fff; }
.yu-button.large {
padding: 0 22px;
font-size: 16px;
height: 40px; }
.yu-button.large.circle {
padding: 0;
width: 40px;
height: 40px; }
.yu-button.small {
height: 24px; }
.yu-button.small.circle {
padding: 0;
width: 24px;
height: 24px; }
.yu-button:not(.disabled):after {
content: "";
display: block;
position: absolute;
width: 100%;
height: 100%;
top: 0;
left: 0;
pointer-events: none;
background-image: radial-gradient(circle, #999 10%, transparent 10.01%);
background-repeat: no-repeat;
background-position: 50%;
transform: scale(10, 10);
opacity: 0;
transition: transform .4s, opacity .5s; }
.yu-button:not(.disabled):active:after {
transform: scale(0, 0);
opacity: .3;
transition: 0s; }
.yu-button-group {
font-size: 0;
display: inline-block;
margin-right: 8px; }
.yu-button-group > .yu-button {
margin-right: -1px;
float: left;
position: relative;
border-radius: 0; }
.yu-button-group > .yu-button:first-child {
border-radius: 4px 0 0 4px; }
.yu-button-group > .yu-button:last-child {
border-radius: 0 4px 4px 0; }
.yu-dialog {
font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica Neue, Helvetica, PingFang SC, Hiragino Sans GB, Microsoft YaHei, SimSun, sans-serif;
font-size: 14px;
width: 100%;
height: 100%;
position: fixed;
background-color: rgba(0, 0, 0, 0.4);
top: 0;
left: 0;
z-index: 1000; }
.yu-dialog .wrapper {
position: absolute;
transform: translate(-50%, -50%);
width: 30%;
top: 50%;
left: 50%;
border-radius: 2px;
padding: 22px;
background-color: #fff;
opacity: 1; }
.yu-dialog .wrapper.small {
width: 15%;
top: 50%;
left: 50%; }
.yu-dialog .wrapper.large {
width: 50%;
top: 50%;
left: 50%; }
.yu-dialog .wrapper.full {
width: 100%;
top: 0;
left: 50%;
height: 100%;
margin: 0;
box-sizing: border-box;
transform: translate(-50%, 0); }
.yu-dialog .wrapper.center {
text-align: center; }
.yu-dialog .wrapper.center .button {
float: none; }
.yu-dialog .wrapper .header {
margin-bottom: 14px;
font-size: 16px;
color: #303133; }
.yu-dialog .wrapper .header i {
float: right;
cursor: pointer;
transition: color 0.4s ease; }
.yu-dialog .wrapper .header i:hover {
color: #409EFF; }
.yu-dialog .wrapper .content {
color: #606266;
margin: 14px 0; }
.yu-dialog .wrapper .other {
color: #606266;
margin: 14px 0; }
.yu-dialog .wrapper .button {
float: right; }
.yu-dialog .wrapper .button .yu-button {
margin-bottom: 0; }
body.lock {
height: 100%;
overflow: hidden; }
.yu-tooltip {
font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica Neue, Helvetica, PingFang SC, Hiragino Sans GB, Microsoft YaHei, SimSun, sans-serif;
position: relative;
display: inline-block; }
.yu-tooltip.light > [data-tooltip]:before {
background-color: #fff;
color: #606266;
border: 1px solid #E4E7ED; }
.yu-tooltip.light > [data-tooltip]:after {
background-color: #fff;
border-right: 1px solid #E4E7ED;
border-bottom: 1px solid #E4E7ED; }
.yu-tooltip > [data-tooltip]:before {
content: attr(data-tooltip);
position: absolute;
display: block;
padding: 0 14px;
height: 32px;
line-height: 32px;
background-color: #373737;
color: #fff;
border-radius: 4px;
box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
visibility: hidden;
z-index: 1000;
white-space: nowrap; }
.yu-tooltip > [data-tooltip]:after {
content: '';
display: block;
height: 8px;
width: 8px;
background-color: #373737;
position: absolute;
transform: rotate(45deg);
visibility: hidden;
z-index: 1000; }
.yu-tooltip:hover:not(.active-control) > [data-tooltip]:before, .yu-tooltip.active > [data-tooltip]:before {
visibility: visible; }
.yu-tooltip:hover:not(.active-control) > [data-tooltip]:after, .yu-tooltip.active > [data-tooltip]:after {
visibility: visible; }
.yu-tooltip.top-left > [data-tooltip]:before {
top: -46px;
left: 0; }
.yu-tooltip.top-left > [data-tooltip]:after {
top: -18px;
left: 14px; }
.yu-tooltip.top-center > [data-tooltip]:before {
top: -46px;
left: 50%;
transform: translate(-50%, 0); }
.yu-tooltip.top-center > [data-tooltip]:after {
top: -18px;
left: 50%;
transform: translate(-4px, 0) rotate(45deg); }
.yu-tooltip.top-right > [data-tooltip]:before {
top: -46px;
right: 0; }
.yu-tooltip.top-right > [data-tooltip]:after {
top: -18px;
right: 22px; }
.yu-tooltip.right-top > [data-tooltip]:before {
top: 0;
left: 100%;
transform: translate(14px, 0); }
.yu-tooltip.right-top > [data-tooltip]:after {
top: 6px;
left: 100%;
transform: translate(10px, 0) rotate(45deg); }
.yu-tooltip.right-center > [data-tooltip]:before {
top: 50%;
left: 100%;
transform: translate(14px, -50%); }
.yu-tooltip.right-center > [data-tooltip]:after {
top: 50%;
left: 100%;
transform: translate(10px, -4px) rotate(45deg); }
.yu-tooltip.right-bottom > [data-tooltip]:before {
top: 100%;
left: 100%;
transform: translate(14px, -32px); }
.yu-tooltip.right-bottom > [data-tooltip]:after {
top: 100%;
left: 100%;
transform: translate(10px, -14px) rotate(45deg); }
.yu-tooltip.bottom-left > [data-tooltip]:before {
bottom: -46px;
left: 0; }
.yu-tooltip.bottom-left > [data-tooltip]:after {
bottom: -18px;
left: 14px; }
.yu-tooltip.bottom-center > [data-tooltip]:before {
bottom: -46px;
left: 50%;
transform: translate(-50%, 0); }
.yu-tooltip.bottom-center > [data-tooltip]:after {
bottom: -18px;
left: 50%;
transform: translate(-4px, 0) rotate(45deg); }
.yu-tooltip.bottom-right > [data-tooltip]:before {
bottom: -46px;
right: 0; }
.yu-tooltip.bottom-right > [data-tooltip]:after {
bottom: -18px;
right: 22px; }
.yu-tooltip.left-top > [data-tooltip]:before {
top: 0;
right: 100%;
transform: translate(-14px, 0); }
.yu-tooltip.left-top > [data-tooltip]:after {
top: 6px;
right: 100%;
transform: translate(-10px, 0) rotate(45deg); }
.yu-tooltip.left-center > [data-tooltip]:before {
top: 50%;
right: 100%;
transform: translate(-14px, -50%); }
.yu-tooltip.left-center > [data-tooltip]:after {
top: 50%;
right: 100%;
transform: translate(-10px, -4px) rotate(45deg); }
.yu-tooltip.left-bottom > [data-tooltip]:before {
top: 100%;
right: 100%;
transform: translate(-14px, -32px); }
.yu-tooltip.left-bottom > [data-tooltip]:after {
top: 100%;
right: 100%;
transform: translate(-10px, -14px) rotate(45deg); }
.yu-message {
font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica Neue, Helvetica, PingFang SC, Hiragino Sans GB, Microsoft YaHei, SimSun, sans-serif;
padding: 8px 14px;
width: 300px;
border-radius: 4px;
font-size: 14px;
position: fixed;
left: 50%;
transform: translateX(-150px);
top: 0;
z-index: 1000;
box-sizing: border-box;
background-color: #edeeee;
color: #909399;
border: 1px solid #e0e1e2; }
.yu-message.transition {
opacity: 0;
transform: translate(-150px, -100%);
transition: transform .3s ease, opacity .3s ease; }
.yu-message.transition.transition-enter {
opacity: 1;
transform: translate(-150px, 22px); }
.yu-message.transition.transition-leave {
opacity: 0;
transform: translate(-150px, -100%); }
.yu-message i.iconfont:not(.icon-close) {
font-size: 18px;
margin-right: 5px;
vertical-align: top; }
.yu-message .content {
vertical-align: top;
display: inline-block; }
.yu-message .icon-close {
margin-top: 2px;
float: right;
cursor: pointer; }
.yu-message.primary {
background-color: #f3f9ff;
color: #409EFF;
border: 1px solid #d9ecff; }
.yu-message.success {
background-color: #eef8e9;
color: #67C23A;
border: 1px solid #c1e7ae; }
.yu-message.warning {
background-color: #fffbeb;
color: #fecf20;
border: 1px solid #fff0b8; }
.yu-message.info {
background-color: #f2f3f3;
color: #909399;
border: 1px solid #e0e1e2; }
.yu-message.danger {
background-color: #feeded;
color: #F56C6C;
border: 1px solid #fffbfb; }
.yu-message.center {
text-align: center; }
.yu-divider {
width: 100%;
height: 0;
border-bottom: 1px solid #E4E7ED;
margin: 14px 0;
display: inline-block;
color: #303133; }
.yu-divider.horizontal {
border-bottom: none;
height: auto;
text-align: center;
width: 100%;
display: table; }
.yu-divider.horizontal:before {
position: relative;
top: 50%;
width: 50%;
transform: translateY(50%);
border-top: 1px solid #E4E7ED;
content: "";
display: table-cell; }
.yu-divider.horizontal:after {
position: relative;
top: 50%;
width: 50%;
transform: translateY(50%);
border-top: 1px solid #E4E7ED;
content: "";
display: table-cell; }
.yu-divider.horizontal > span {
word-break: keep-all;
display: table-cell;
padding: 0 14px; }
.yu-divider.horizontal.left:before {
width: 5%; }
.yu-divider.horizontal.left:after {
width: 95%; }
.yu-divider.horizontal.right:before {
width: 95%; }
.yu-divider.horizontal.right:after {
width: 5%; }
.yu-divider.vertical {
width: 1px;
height: 14px;
display: inline-block;
vertical-align: middle;
border-right: 1px solid #E4E7ED;
margin: 0 4px; }
.yu-list.horizontal {
display: flex; }
.yu-list.horizontal > .item {
align-items: center;
margin-right: 14px; }
.yu-list.divided .item {
align-items: center;
padding-bottom: 8px;
border-bottom: 1px solid #E4E7ED; }
.yu-list > .item {
margin: 8px 0;
display: flex;
align-items: normal; }
.yu-list > .item > i {
margin-right: 8px; }
.yu-list > .item > img {
width: 30px;
height: 30px;
border-radius: 15px;
margin-right: 8px; }
.yu-list > .item > .content > .header {
font-weight: bold;
font-size: 14px; }
.yu-list > .item > .content > .description {
font-size: 14px;
color: #909399; }
.yu-checkbox {
font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica Neue, Helvetica, PingFang SC, Hiragino Sans GB, Microsoft YaHei, SimSun, sans-serif;
font-size: 14px;
color: #606266;
cursor: pointer;
margin-right: 14px; }
.yu-checkbox > span {
-moz-user-select: none;
-webkit-user-select: none;
-ms-user-select: none;
user-select: none; }
.yu-checkbox > .checkbox {
transition: background-color 0.4s;
margin-right: 4px;
margin-bottom: -2px;
display: inline-block;
width: 14px;
height: 14px;
border: 1px solid #DCDFE6;
border-radius: 2px;
background-color: #fff; }
.yu-checkbox > .checkbox:hover {
border: 1px solid #409EFF; }
.yu-checkbox > .checkbox > input {
display: none; }
.yu-checkbox.checked > .checkbox {
position: relative;
border: 1px solid #409EFF;
border-radius: 2px;
background-color: #409EFF; }
.yu-checkbox.checked > .checkbox:after {
content: '\00a0';
display: inline-block;
border: 2px solid #fff;
border-top-width: 0;
border-right-width: 0;
width: 8px;
height: 4px;
-webkit-transform: rotate(-50deg);
position: absolute;
top: 3px;
left: 2px; }
.yu-checkbox.checked.disabled > .checkbox {
border: 1px solid #C0C4CC;
background-color: #C0C4CC; }
.yu-checkbox.checked.disabled > .checkbox + span {
color: #C0C4CC; }
.yu-checkbox.disabled {
color: #C0C4CC; }
.yu-checkbox.disabled > .checkbox:hover {
border: 1px solid #DCDFE6; }
.yu-checkbox.control {
display: block;
margin-bottom: 8px; }
.yu-checkbox.control.part > .checkbox {
position: relative;
border: 1px solid #409EFF;
border-radius: 2px;
background-color: #409EFF; }
.yu-checkbox.control.part > .checkbox + span {
color: #409EFF; }
.yu-checkbox.control.part > .checkbox:after {
content: '\00a0';
display: inline-block;
border: 2px solid #fff;
border-top-width: 0;
border-right-width: 0;
border-left-width: 0;
width: 10px;
height: 5px;
-webkit-transform: rotate(180deg);
position: absolute;
top: 6px;
left: 2px; }
.yu-checkbox-group {
margin-bottom: 14px; }
.yu-checkbox-group.vertical > .yu-checkbox {
display: block;
margin-bottom: 14px; }
.yu-tree {
font-size: 0;
padding-inline-start: 0;
padding: 0;
line-height: 26px; }
.yu-tree > li {
list-style: none; }
.yu-tree .child-tree {
transition: height 0.4s ease;
height: 0;
overflow: hidden;
padding-inline-start: 0;
padding: 0;
display: block;
margin-left: 16px; }
.yu-tree .child-tree > li {
list-style: none; }
.yu-tree .child-tree.last {
margin-left: 32px; }
.yu-tree .yu-checkbox {
display: block; }
.yu-tree .leaf.active {
display: inline-block;
background-color: #e3f1ff; }
.yu-tree .leaf > i {
display: inline-block;
vertical-align: top; }
.yu-tree .leaf > .yu-checkbox {
display: inline-block; }
.yu-tree .leaf label {
font-size: 14px;
display: block;
padding: 0 4px; }
.yu-tree .leaf span {
font-size: 14px; }
.yu-tree .tree-title {
display: flex; }
.yu-checkbox {
font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica Neue, Helvetica, PingFang SC, Hiragino Sans GB, Microsoft YaHei, SimSun, sans-serif;
font-size: 14px;
color: #606266;
cursor: pointer;
margin-right: 14px; }
.yu-checkbox > span {
-moz-user-select: none;
-webkit-user-select: none;
-ms-user-select: none;
user-select: none; }
.yu-checkbox > .checkbox {
transition: background-color 0.4s;
margin-right: 4px;
margin-bottom: -2px;
display: inline-block;
width: 14px;
height: 14px;
border: 1px solid #DCDFE6;
border-radius: 2px;
background-color: #fff; }
.yu-checkbox > .checkbox:hover {
border: 1px solid #409EFF; }
.yu-checkbox > .checkbox > input {
display: none; }
.yu-checkbox.checked > .checkbox {
position: relative;
border: 1px solid #409EFF;
border-radius: 2px;
background-color: #409EFF; }
.yu-checkbox.checked > .checkbox:after {
content: '\00a0';
display: inline-block;
border: 2px solid #fff;
border-top-width: 0;
border-right-width: 0;
width: 8px;
height: 4px;
-webkit-transform: rotate(-50deg);
position: absolute;
top: 3px;
left: 2px; }
.yu-checkbox.checked.disabled > .checkbox {
border: 1px solid #C0C4CC;
background-color: #C0C4CC; }
.yu-checkbox.checked.disabled > .checkbox + span {
color: #C0C4CC; }
.yu-checkbox.disabled {
color: #C0C4CC; }
.yu-checkbox.disabled > .checkbox:hover {
border: 1px solid #DCDFE6; }
.yu-checkbox.control {
display: block;
margin-bottom: 8px; }
.yu-checkbox.control.part > .checkbox {
position: relative;
border: 1px solid #409EFF;
border-radius: 2px;
background-color: #409EFF; }
.yu-checkbox.control.part > .checkbox + span {
color: #409EFF; }
.yu-checkbox.control.part > .checkbox:after {
content: '\00a0';
display: inline-block;
border: 2px solid #fff;
border-top-width: 0;
border-right-width: 0;
border-left-width: 0;
width: 10px;
height: 5px;
-webkit-transform: rotate(180deg);
position: absolute;
top: 6px;
left: 2px; }
.yu-checkbox-group {
margin-bottom: 14px; }
.yu-checkbox-group.vertical > .yu-checkbox {
display: block;
margin-bottom: 14px; }
div.yu-button {
vertical-align: top;
line-height: 32px; }
div.yu-button.large {
line-height: 40px; }
div.yu-button.small {
line-height: 24px; }
.yu-button {
font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica Neue, Helvetica, PingFang SC, Hiragino Sans GB, Microsoft YaHei, SimSun, sans-serif;
height: 32px;
font-size: 14px;
padding: 0 14px;
margin: 0 8px 14px 0;
display: inline-block;
color: #606266;
box-sizing: border-box;
border-radius: 4px;
background-color: #fff;
border: 1px solid #E4E7ED;
cursor: pointer;
transition: border 0.4s, color 0.4s;
outline: none;
position: relative;
overflow: hidden; }
.yu-button:not(.disabled):hover {
border: 1px solid #409EFF;
color: #409EFF;
z-index: 1; }
.yu-button:not(.disabled):focus {
color: #409EFF;
border: 1px solid #409EFF; }
.yu-button.disabled {
color: #C0C4CC;
background: #f5f5f9;
cursor: not-allowed; }
.yu-button.primary {
color: #fff;
border: 1px solid #409EFF;
background-color: #409EFF;
transition: all .3s ease; }
.yu-button.primary.disabled {
border: 1px solid #c0dfff;
background-color: #c0dfff;
cursor: not-allowed; }
.yu-button.primary:hover:not(.disabled), .yu-button.primary:focus:not(.disabled) {
color: #fff;
border: 1px solid #73b8ff;
background-color: #73b8ff; }
.yu-button.success {
color: #fff;
border: 1px solid #67C23A;
background-color: #67C23A;
transition: all .3s ease; }
.yu-button.success.disabled {
border: 1px solid #b2e19b;
background-color: #b2e19b;
cursor: not-allowed; }
.yu-button.success:hover:not(.disabled), .yu-button.success:focus:not(.disabled) {
color: #fff;
border: 1px solid #85cf60;
background-color: #85cf60; }
.yu-button.warning {
color: #fff;
border: 1px solid #fecf20;
background-color: #fecf20;
transition: all .3s ease; }
.yu-button.warning.disabled {
border: 1px solid #ffea9f;
background-color: #ffea9f;
cursor: not-allowed; }
.yu-button.warning:hover:not(.disabled), .yu-button.warning:focus:not(.disabled) {
color: #fff;
border: 1px solid #feda53;
background-color: #feda53; }
.yu-button.info {
color: #fff;
border: 1px solid #909399;
background-color: #909399;
transition: all .3s ease; }
.yu-button.info.disabled {
border: 1px solid #d2d4d6;
background-color: #d2d4d6;
cursor: not-allowed; }
.yu-button.info:hover:not(.disabled), .yu-button.info:focus:not(.disabled) {
color: #fff;
border: 1px solid #abadb1;
background-color: #abadb1; }
.yu-button.danger {
color: #fff;
border: 1px solid #F56C6C;
background-color: #F56C6C;
transition: all .3s ease; }
.yu-button.danger.disabled {
border: 1px solid #fde3e3;
background-color: #fde3e3;
cursor: not-allowed; }
.yu-button.danger:hover:not(.disabled), .yu-button.danger:focus:not(.disabled) {
color: #fff;
border: 1px solid #f89c9c;
background-color: #f89c9c; }
.yu-button.circle {
padding: 0;
width: 32px;
height: 32px;
border-radius: 50%; }
.yu-button.plain:hover:not(.disabled), .yu-button.plain:focus:not(.disabled) {
border: 1px solid #409EFF;
color: #409EFF;
background: #fff; }
.yu-button.plain.primary {
color: #409EFF;
border: 1px solid #409EFF;
background-color: #f3f9ff;
transition: all .3s ease; }
.yu-button.plain.primary.disabled {
color: #a6d2ff;
border: 1px solid #c0dfff;
background-color: #fdfeff;
cursor: not-allowed; }
.yu-button.plain.primary:hover:not(.disabled), .yu-button.plain.primary:focus:not(.disabled) {
border: 1px solid #409EFF;
background-color: #409EFF;
color: #fff; }
.yu-button.plain.success {
color: #67C23A;
border: 1px solid #67C23A;
background-color: #eef8e9;
transition: all .3s ease; }
.yu-button.plain.success.disabled {
color: #a3db87;
border: 1px solid #b2e19b;
background-color: #f4fbf1;
cursor: not-allowed; }
.yu-button.plain.success:hover:not(.disabled), .yu-button.plain.success:focus:not(.disabled) {
border: 1px solid #67C23A;
background-color: #67C23A;
color: #fff; }
.yu-button.plain.warning {
color: #fecf20;
border: 1px solid #fecf20;
background-color: #fffbeb;
transition: all .3s ease; }
.yu-button.plain.warning.disabled {
color: #fee586;
border: 1px solid #ffea9f;
background-color: #fffdf5;
cursor: not-allowed; }
.yu-button.plain.warning:hover:not(.disabled), .yu-button.plain.warning:focus:not(.disabled) {
border: 1px solid #fecf20;
background-color: #fecf20;
color: #fff; }
.yu-button.plain.info {
color: #909399;
border: 1px solid #909399;
background-color: #f2f3f3;
transition: all .3s ease; }
.yu-button.plain.info.disabled {
color: #c5c7ca;
border: 1px solid #d2d4d6;
background-color: #f8f8f8;
cursor: not-allowed; }
.yu-button.plain.info:hover:not(.disabled), .yu-button.plain.info:focus:not(.disabled) {
border: 1px solid #909399;
background-color: #909399;
color: #fff; }
.yu-button.plain.danger {
color: #F56C6C;
border: 1px solid #F56C6C;
background-color: #feeded;
transition: all .3s ease; }
.yu-button.plain.danger.disabled {
color: #fbcccc;
border: 1px solid #fde3e3;
background-color: #fef6f6;
cursor: not-allowed; }
.yu-button.plain.danger:hover:not(.disabled), .yu-button.plain.danger:focus:not(.disabled) {
border: 1px solid #F56C6C;
background-color: #F56C6C;
color: #fff; }
.yu-button.large {
padding: 0 22px;
font-size: 16px;
height: 40px; }
.yu-button.large.circle {
padding: 0;
width: 40px;
height: 40px; }
.yu-button.small {
height: 24px; }
.yu-button.small.circle {
padding: 0;
width: 24px;
height: 24px; }
.yu-button:not(.disabled):after {
content: "";
display: block;
position: absolute;
width: 100%;
height: 100%;
top: 0;
left: 0;
pointer-events: none;
background-image: radial-gradient(circle, #999 10%, transparent 10.01%);
background-repeat: no-repeat;
background-position: 50%;
transform: scale(10, 10);
opacity: 0;
transition: transform .4s, opacity .5s; }
.yu-button:not(.disabled):active:after {
transform: scale(0, 0);
opacity: .3;
transition: 0s; }
.yu-button-group {
font-size: 0;
display: inline-block;
margin-right: 8px; }
.yu-button-group > .yu-button {
margin-right: -1px;
float: left;
position: relative;
border-radius: 0; }
.yu-button-group > .yu-button:first-child {
border-radius: 4px 0 0 4px; }
.yu-button-group > .yu-button:last-child {
border-radius: 0 4px 4px 0; }
.yu-transfer {
display: flex;
align-items: center;
font-size: 0; }
.yu-transfer ul {
min-width: 120px;
padding-inline-start: 0;
padding: 0;
padding: 8px;
height: 180px;
margin: 0;
overflow-y: scroll; }
.yu-transfer ul > li {
list-style: none; }
.yu-transfer ul li {
margin: 8px 0; }
.yu-transfer ul li span:last-child {
vertical-align: middle;
display: inline-block;
width: 120px;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap; }
.yu-transfer .yu-button {
display: block;
margin: 8px; }
.yu-transfer .option {
border: 1px solid #E4E7ED;
border-radius: 4px; }
.yu-transfer .head {
padding: 8px;
border-bottom: 1px solid #E4E7ED; }
.yu-transfer .head span.tag {
float: right;
font-size: 14px; }
.yu-transfer .head .yu-checkbox {
margin: 0;
display: inline-block; }
.yu-placeholder {
display: flex; }
@keyframes progress-active {
0% {
opacity: 0;
width: 0; }
20% {
opacity: 0.5;
width: 0; }
100% {
opacity: 0;
width: 100%; } }
.yu-placeholder .image {
flex-shrink: 0;
vertical-align: top;
display: inline-block;
width: 60px;
height: 60px;
background: #f5f5f9;
position: relative;
box-sizing: content-box;
margin-right: 14px;
margin-bottom: 14px; }
.yu-placeholder ul {
vertical-align: top;
width: 100%;
margin: 0;
padding-inline-start: 0;
padding: 0; }
.yu-placeholder ul > li {
list-style: none; }
.yu-placeholder ul li {
width: 100%;
height: 16px;
background-color: #f5f5f9;
position: relative;
margin-bottom: 14px; }
.yu-placeholder ul li.short {
width: 60%; }
.yu-placeholder ul li.normal {
width: 70%; }
.yu-placeholder ul li.long {
width: 80%; }
.yu-placeholder.active .image:before {
content: "";
opacity: 0;
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: #ccc;
animation: progress-active 1.5s ease infinite; }
.yu-placeholder.active ul li:before {
content: "";
opacity: 0;
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: #ccc;
animation: progress-active 1.5s ease infinite; }
.yu-card {
border: 1px solid #E4E7ED;
border-radius: 4px; }
.yu-card.card {
width: 300px;
display: inline-block;
margin-right: 14px; }
.yu-card.hoverable {
transition: box-shadow 0.4s ease; }
.yu-card.hoverable:hover {
box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1); }
.yu-card .image {
width: 100%; }
.yu-card .header {
font-size: 16px;
font-weight: bold;
padding: 14px;
border-bottom: 1px solid #E4E7ED;
color: #303133; }
.yu-card .header .float.right {
float: right; }
.yu-card .content {
padding: 14px; }
.yu-card .content .header {
padding: 0;
padding-bottom: 14px;
border: none; }
.yu-card .footer {
padding: 14px;
border-top: 1px solid #E4E7ED; }
.yu-card .description {
font-weight: normal;
font-size: 14px;
color: #909399;
padding-top: 8px; }
.yu-carousel {
position: relative; }
.yu-carousel .container {
width: 100%;
overflow: hidden;
position: relative;
height: 200px; }
.yu-carousel .container .item {
position: absolute;
height: 200px;
width: 100%;
background: #409EFF;
transition: all 0.8s ease; }
.yu-carousel .navigation {
padding-inline-start: 0;
padding: 0;
display: flex;
align-items: center;
position: absolute;
bottom: 10px;
left: 50%;
transform: translateX(-50%); }
.yu-carousel .navigation > li {
list-style: none; }
.yu-carousel .navigation.line li {
width: 20px;
height: 4px;
border-radius: 2px;
background-color: #E4E7ED;
margin: 0 4px;
transition: all 0.4s linear; }
.yu-carousel .navigation.line li.active {
width: 30px;
background-color: #fff; }
.yu-carousel .navigation.circle li {
width: 6px;
height: 6px;
border-radius: 6px;
background-color: #E4E7ED;
margin: 0 4px;
transition: all 0.4s linear; }
.yu-carousel .navigation.circle li.active {
width: 8px;
height: 8px;
border-radius: 8px;
background-color: #fff; }
.yu-carousel .left-button, .yu-carousel .right-button {
position: absolute;
width: 30px;
height: 30px;
border-radius: 30px;
background-color: #E4E7ED;
color: #409EFF;
line-height: 30px;
text-align: center; }
.yu-carousel .left-button {
top: 50%;
transform: translateY(-50%);
left: 20px; }
.yu-carousel .right-button {
top: 50%;
transform: translateY(-50%);
right: 20px; }
.yu-carousel.vertical .navigation {
display: block;
width: 10px;
margin: 0;
padding-inline-start: 0;
padding: 0;
position: absolute;
left: 100%;
top: 50%;
transform: translate(-30px, -50%); }
.yu-carousel.vertical .navigation > li {
list-style: none; }
.yu-carousel.vertical .navigation.line li {
display: block;
width: 4px;
height: 20px;
border-radius: 2px;
background-color: #E4E7ED;
margin: 4px 0;
transition: all 0.4s linear; }
.yu-carousel.vertical .navigation.line li.active {
height: 30px;
background-color: #fff; }
.yu-carousel.vertical .navigation.circle li {
width: 6px;
height: 6px;
border-radius: 6px;
background-color: #E4E7ED;
margin: 4px 0;
transition: all 0.4s linear; }
.yu-carousel.vertical .navigation.circle li.active {
width: 8px;
height: 8px;
border-radius: 8px;
background-color: #fff; }
.yu-menu {
width: 200px;
font-size: 0; }
.yu-menu .sub-menu {
transition: height 0.4s ease;
line-height: 40px; }
.yu-menu .sub-menu i {
padding: 0 8px; }
.yu-menu .sub-menu .menu-title {
font-size: 14px;
cursor: pointer;
transition: color 0.4s ease;
height: 40px; }
.yu-menu .sub-menu .menu-title i.icon-angle-down {
float: right;
transition: all 0.4s ease; }
.yu-menu .sub-menu .menu-title i.icon-angle-right {
float: right; }
.yu-menu .sub-menu .menu-title.active i.icon-angle-down {
transform: rotate(-180deg); }
.yu-menu .sub-menu .menu-item {
font-size: 14px;
cursor: pointer;
transition: color 0.4s ease;
height: 40px; }
.yu-menu.dark {
color: #ccc;
background-color: #001528; }
.yu-menu.dark .sub-menu .menu-title:hover {
color: #fff; }
.yu-menu.dark .sub-menu .menu-item:hover {
color: #fff; }
.yu-menu.dark .sub-menu .menu-item.active {
background-color: #409EFF;
color: #fff; }
.yu-menu.light {
border-right: 1px solid #E4E7ED; }
.yu-menu.light .sub-menu {
background-color: #fff; }
.yu-menu.light .sub-menu .menu-title:hover {
color: #409EFF; }
.yu-menu.light .sub-menu .menu-item:hover {
color: #409EFF; }
.yu-menu.light .sub-menu .menu-item.active {
background-color: #e8f3ff;
color: #409EFF;
border-right: 3px solid #409EFF; }
.yu-menu.popup .transition {
transform: scaleY(0);
opacity: 0;
transform-origin: center top;
transition: transform .3s ease, opacity .3s ease; }
.yu-menu.popup .transition.transition-enter {
transform: scaleY(1);
opacity: 1; }
.yu-menu.popup .transition.transition-leave {
transform: scaleY(0);
opacity: 0; }
.yu-menu.popup > .sub-menu {
position: relative; }
.yu-menu.popup > .sub-menu .menu-title + .sub-menu {
box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
margin-left: 8px;
position: absolute;
top: 0;
left: 100%; }
.yu-menu.popup > .sub-menu .sub-menu {
min-width: 120px;
position: absolute;
z-index: 1000;
border-radius: 4px; }
.yu-menu.popup > .sub-menu .sub-menu + .menu-item {
margin-top: 40px; }
.yu-menu.popup > .sub-menu .sub-menu .menu-item {
word-break: keep-all;
width: auto;
border-right: none;
padding-right: 14px; }
.yu-menu.horizontal {
width: 100%;
display: flex;
border-right: none;
border-bottom: 1px solid #E4E7ED; }
.yu-menu.horizontal > .sub-menu > .menu-title {
padding: 0 14px;
transition: color 0.4s ease; }
.yu-menu.horizontal > .sub-menu > .menu-title.active {
border-bottom: 2px solid #409EFF;
color: #409EFF; }
.yu-menu.horizontal.popup > .sub-menu > .menu-title + .sub-menu {
margin-left: 0;
margin-top: 8px; }
.yu-menu.horizontal.popup > .sub-menu > .sub-menu {
margin-left: 0;
position: absolute;
top: 100%;
left: 0; }
.yu-row {
width: 100%;
display: flex;
flex-wrap: wrap; }
.yu-row.align-top {
align-items: flex-start; }
.yu-row.align-middle {
align-items: center; }
.yu-row.align-bottom {
align-items: flex-end; }
.yu-row.justify-start {
justify-content: flex-start; }
.yu-row.justify-center {
justify-content: center; }
.yu-row.justify-end {
justify-content: flex-end; }
.yu-row.justify-space-between {
justify-content: space-between; }
.yu-row.justify-space-around {
justify-content: space-around; }
.yu-col {
position: relative;
box-sizing: border-box; }
.yu-col.col-1 {
width: 4.16667%; }
.yu-col.offset-1 {
margin-left: 4.16667%; }
.yu-col.push-1 {
left: 4.16667%; }
.yu-col.pull-1 {
right: 4.16667%; }
.yu-col.col-2 {
width: 8.33333%; }
.yu-col.offset-2 {
margin-left: 8.33333%; }
.yu-col.push-2 {
left: 8.33333%; }
.yu-col.pull-2 {
right: 8.33333%; }
.yu-col.col-3 {
width: 12.5%; }
.yu-col.offset-3 {
margin-left: 12.5%; }
.yu-col.push-3 {
left: 12.5%; }
.yu-col.pull-3 {
right: 12.5%; }
.yu-col.col-4 {
width: 16.66667%; }
.yu-col.offset-4 {
margin-left: 16.66667%; }
.yu-col.push-4 {
left: 16.66667%; }
.yu-col.pull-4 {
right: 16.66667%; }
.yu-col.col-5 {
width: 20.83333%; }
.yu-col.offset-5 {
margin-left: 20.83333%; }
.yu-col.push-5 {
left: 20.83333%; }
.yu-col.pull-5 {
right: 20.83333%; }
.yu-col.col-6 {
width: 25%; }
.yu-col.offset-6 {
margin-left: 25%; }
.yu-col.push-6 {
left: 25%; }
.yu-col.pull-6 {
right: 25%; }
.yu-col.col-7 {
width: 29.16667%; }
.yu-col.offset-7 {
margin-left: 29.16667%; }
.yu-col.push-7 {
left: 29.16667%; }
.yu-col.pull-7 {
right: 29.16667%; }
.yu-col.col-8 {
width: 33.33333%; }
.yu-col.offset-8 {
margin-left: 33.33333%; }
.yu-col.push-8 {
left: 33.33333%; }
.yu-col.pull-8 {
right: 33.33333%; }
.yu-col.col-9 {
width: 37.5%; }
.yu-col.offset-9 {
margin-left: 37.5%; }
.yu-col.push-9 {
left: 37.5%; }
.yu-col.pull-9 {
right: 37.5%; }
.yu-col.col-10 {
width: 41.66667%; }
.yu-col.offset-10 {
margin-left: 41.66667%; }
.yu-col.push-10 {
left: 41.66667%; }
.yu-col.pull-10 {
right: 41.66667%; }
.yu-col.col-11 {
width: 45.83333%; }
.yu-col.offset-11 {
margin-left: 45.83333%; }
.yu-col.push-11 {
left: 45.83333%; }
.yu-col.pull-11 {
right: 45.83333%; }
.yu-col.col-12 {
width: 50%; }
.yu-col.offset-12 {
margin-left: 50%; }
.yu-col.push-12 {
left: 50%; }
.yu-col.pull-12 {
right: 50%; }
.yu-col.col-13 {
width: 54.16667%; }
.yu-col.offset-13 {
margin-left: 54.16667%; }
.yu-col.push-13 {
left: 54.16667%; }
.yu-col.pull-13 {
right: 54.16667%; }
.yu-col.col-14 {
width: 58.33333%; }
.yu-col.offset-14 {
margin-left: 58.33333%; }
.yu-col.push-14 {
left: 58.33333%; }
.yu-col.pull-14 {
right: 58.33333%; }
.yu-col.col-15 {
width: 62.5%; }
.yu-col.offset-15 {
margin-left: 62.5%; }
.yu-col.push-15 {
left: 62.5%; }
.yu-col.pull-15 {
right: 62.5%; }
.yu-col.col-16 {
width: 66.66667%; }
.yu-col.offset-16 {
margin-left: 66.66667%; }
.yu-col.push-16 {
left: 66.66667%; }
.yu-col.pull-16 {
right: 66.66667%; }
.yu-col.col-17 {
width: 70.83333%; }
.yu-col.offset-17 {
margin-left: 70.83333%; }
.yu-col.push-17 {
left: 70.83333%; }
.yu-col.pull-17 {
right: 70.83333%; }
.yu-col.col-18 {
width: 75%; }
.yu-col.offset-18 {
margin-left: 75%; }
.yu-col.push-18 {
left: 75%; }
.yu-col.pull-18 {
right: 75%; }
.yu-col.col-19 {
width: 79.16667%; }
.yu-col.offset-19 {
margin-left: 79.16667%; }
.yu-col.push-19 {
left: 79.16667%; }
.yu-col.pull-19 {
right: 79.16667%; }
.yu-col.col-20 {
width: 83.33333%; }
.yu-col.offset-20 {
margin-left: 83.33333%; }
.yu-col.push-20 {
left: 83.33333%; }
.yu-col.pull-20 {
right: 83.33333%; }
.yu-col.col-21 {
width: 87.5%; }
.yu-col.offset-21 {
margin-left: 87.5%; }
.yu-col.push-21 {
left: 87.5%; }
.yu-col.pull-21 {
right: 87.5%; }
.yu-col.col-22 {
width: 91.66667%; }
.yu-col.offset-22 {
margin-left: 91.66667%; }
.yu-col.push-22 {
left: 91.66667%; }
.yu-col.pull-22 {
right: 91.66667%; }
.yu-col.col-23 {
width: 95.83333%; }
.yu-col.offset-23 {
margin-left: 95.83333%; }
.yu-col.push-23 {
left: 95.83333%; }
.yu-col.pull-23 {
right: 95.83333%; }
.yu-col.col-24 {
width: 100%; }
.yu-col.offset-24 {
margin-left: 100%; }
.yu-col.push-24 {
left: 100%; }
.yu-col.pull-24 {
right: 100%; }
@media screen and (max-width: 576px) {
.yu-col.col-xs-1 {
width: 4.16667%; }
.yu-col.col-xs-2 {
width: 8.33333%; }
.yu-col.col-xs-3 {
width: 12.5%; }
.yu-col.col-xs-4 {
width: 16.66667%; }
.yu-col.col-xs-5 {
width: 20.83333%; }
.yu-col.col-xs-6 {
width: 25%; }
.yu-col.col-xs-7 {
width: 29.16667%; }
.yu-col.col-xs-8 {
width: 33.33333%; }
.yu-col.col-xs-9 {
width: 37.5%; }
.yu-col.col-xs-10 {
width: 41.66667%; }
.yu-col.col-xs-11 {
width: 45.83333%; }
.yu-col.col-xs-12 {
width: 50%; }
.yu-col.col-xs-13 {
width: 54.16667%; }
.yu-col.col-xs-14 {
width: 58.33333%; }
.yu-col.col-xs-15 {
width: 62.5%; }
.yu-col.col-xs-16 {
width: 66.66667%; }
.yu-col.col-xs-17 {
width: 70.83333%; }
.yu-col.col-xs-18 {
width: 75%; }
.yu-col.col-xs-19 {
width: 79.16667%; }
.yu-col.col-xs-20 {
width: 83.33333%; }
.yu-col.col-xs-21 {
width: 87.5%; }
.yu-col.col-xs-22 {
width: 91.66667%; }
.yu-col.col-xs-23 {
width: 95.83333%; }
.yu-col.col-xs-24 {
width: 100%; } }
@media screen and (min-width: 576px) {
.col-sm-1 {
width: 4.16667%; }
.col-sm-2 {
width: 8.33333%; }
.col-sm-3 {
width: 12.5%; }
.col-sm-4 {
width: 16.66667%; }
.col-sm-5 {
width: 20.83333%; }
.col-sm-6 {
width: 25%; }
.col-sm-7 {
width: 29.16667%; }
.col-sm-8 {
width: 33.33333%; }
.col-sm-9 {
width: 37.5%; }
.col-sm-10 {
width: 41.66667%; }
.col-sm-11 {
width: 45.83333%; }
.col-sm-12 {
width: 50%; }
.col-sm-13 {
width: 54.16667%; }
.col-sm-14 {
width: 58.33333%; }
.col-sm-15 {
width: 62.5%; }
.col-sm-16 {
width: 66.66667%; }
.col-sm-17 {
width: 70.83333%; }
.col-sm-18 {
width: 75%; }
.col-sm-19 {
width: 79.16667%; }
.col-sm-20 {
width: 83.33333%; }
.col-sm-21 {
width: 87.5%; }
.col-sm-22 {
width: 91.66667%; }
.col-sm-23 {
width: 95.83333%; }
.col-sm-24 {
width: 100%; } }
@media screen and (min-width: 768px) {
.yu-col.col-md-1 {
width: 4.16667%; }
.yu-col.col-md-2 {
width: 8.33333%; }
.yu-col.col-md-3 {
width: 12.5%; }
.yu-col.col-md-4 {
width: 16.66667%; }
.yu-col.col-md-5 {
width: 20.83333%; }
.yu-col.col-md-6 {
width: 25%; }
.yu-col.col-md-7 {
width: 29.16667%; }
.yu-col.col-md-8 {
width: 33.33333%; }
.yu-col.col-md-9 {
width: 37.5%; }
.yu-col.col-md-10 {
width: 41.66667%; }
.yu-col.col-md-11 {
width: 45.83333%; }
.yu-col.col-md-12 {
width: 50%; }
.yu-col.col-md-13 {
width: 54.16667%; }
.yu-col.col-md-14 {
width: 58.33333%; }
.yu-col.col-md-15 {
width: 62.5%; }
.yu-col.col-md-16 {
width: 66.66667%; }
.yu-col.col-md-17 {
width: 70.83333%; }
.yu-col.col-md-18 {
width: 75%; }
.yu-col.col-md-19 {
width: 79.16667%; }
.yu-col.col-md-20 {
width: 83.33333%; }
.yu-col.col-md-21 {
width: 87.5%; }
.yu-col.col-md-22 {
width: 91.66667%; }
.yu-col.col-md-23 {
width: 95.83333%; }
.yu-col.col-md-24 {
width: 100%; } }
@media screen and (min-width: 992px) {
.yu-col.col-lg-1 {
width: 4.16667%; }
.yu-col.col-lg-2 {
width: 8.33333%; }
.yu-col.col-lg-3 {
width: 12.5%; }
.yu-col.col-lg-4 {
width: 16.66667%; }
.yu-col.col-lg-5 {
width: 20.83333%; }
.yu-col.col-lg-6 {
width: 25%; }
.yu-col.col-lg-7 {
width: 29.16667%; }
.yu-col.col-lg-8 {
width: 33.33333%; }
.yu-col.col-lg-9 {
width: 37.5%; }
.yu-col.col-lg-10 {
width: 41.66667%; }
.yu-col.col-lg-11 {
width: 45.83333%; }
.yu-col.col-lg-12 {
width: 50%; }
.yu-col.col-lg-13 {
width: 54.16667%; }
.yu-col.col-lg-14 {
width: 58.33333%; }
.yu-col.col-lg-15 {
width: 62.5%; }
.yu-col.col-lg-16 {
width: 66.66667%; }
.yu-col.col-lg-17 {
width: 70.83333%; }
.yu-col.col-lg-18 {
width: 75%; }
.yu-col.col-lg-19 {
width: 79.16667%; }
.yu-col.col-lg-20 {
width: 83.33333%; }
.yu-col.col-lg-21 {
width: 87.5%; }
.yu-col.col-lg-22 {
width: 91.66667%; }
.yu-col.col-lg-23 {
width: 95.83333%; }
.yu-col.col-lg-24 {
width: 100%; } }
@media screen and (min-width: 1200px) {
.yu-col.col-xl-1 {
width: 4.16667%; }
.yu-col.col-xl-2 {
width: 8.33333%; }
.yu-col.col-xl-3 {
width: 12.5%; }
.yu-col.col-xl-4 {
width: 16.66667%; }
.yu-col.col-xl-5 {
width: 20.83333%; }
.yu-col.col-xl-6 {
width: 25%; }
.yu-col.col-xl-7 {
width: 29.16667%; }
.yu-col.col-xl-8 {
width: 33.33333%; }
.yu-col.col-xl-9 {
width: 37.5%; }
.yu-col.col-xl-10 {
width: 41.66667%; }
.yu-col.col-xl-11 {
width: 45.83333%; }
.yu-col.col-xl-12 {
width: 50%; }
.yu-col.col-xl-13 {
width: 54.16667%; }
.yu-col.col-xl-14 {
width: 58.33333%; }
.yu-col.col-xl-15 {
width: 62.5%; }
.yu-col.col-xl-16 {
width: 66.66667%; }
.yu-col.col-xl-17 {
width: 70.83333%; }
.yu-col.col-xl-18 {
width: 75%; }
.yu-col.col-xl-19 {
width: 79.16667%; }
.yu-col.col-xl-20 {
width: 83.33333%; }
.yu-col.col-xl-21 {
width: 87.5%; }
.yu-col.col-xl-22 {
width: 91.66667%; }
.yu-col.col-xl-23 {
width: 95.83333%; }
.yu-col.col-xl-24 {
width: 100%; } }
@media screen and (min-width: 1600px) {
.yu-col.col-xxl-1 {
width: 4.16667%; }
.yu-col.col-xxl-2 {
width: 8.33333%; }
.yu-col.col-xxl-3 {
width: 12.5%; }
.yu-col.col-xxl-4 {
width: 16.66667%; }
.yu-col.col-xxl-5 {
width: 20.83333%; }
.yu-col.col-xxl-6 {
width: 25%; }
.yu-col.col-xxl-7 {
width: 29.16667%; }
.yu-col.col-xxl-8 {
width: 33.33333%; }
.yu-col.col-xxl-9 {
width: 37.5%; }
.yu-col.col-xxl-10 {
width: 41.66667%; }
.yu-col.col-xxl-11 {
width: 45.83333%; }
.yu-col.col-xxl-12 {
width: 50%; }
.yu-col.col-xxl-13 {
width: 54.16667%; }
.yu-col.col-xxl-14 {
width: 58.33333%; }
.yu-col.col-xxl-15 {
width: 62.5%; }
.yu-col.col-xxl-16 {
width: 66.66667%; }
.yu-col.col-xxl-17 {
width: 70.83333%; }
.yu-col.col-xxl-18 {
width: 75%; }
.yu-col.col-xxl-19 {
width: 79.16667%; }
.yu-col.col-xxl-20 {
width: 83.33333%; }
.yu-col.col-xxl-21 {
width: 87.5%; }
.yu-col.col-xxl-22 {
width: 91.66667%; }
.yu-col.col-xxl-23 {
width: 95.83333%; }
.yu-col.col-xxl-24 {
width: 100%; } }
.yu-row {
width: 100%;
display: flex;
flex-wrap: wrap; }
.yu-row.align-top {
align-items: flex-start; }
.yu-row.align-middle {
align-items: center; }
.yu-row.align-bottom {
align-items: flex-end; }
.yu-row.justify-start {
justify-content: flex-start; }
.yu-row.justify-center {
justify-content: center; }
.yu-row.justify-end {
justify-content: flex-end; }
.yu-row.justify-space-between {
justify-content: space-between; }
.yu-row.justify-space-around {
justify-content: space-around; }
.yu-col {
position: relative;
box-sizing: border-box; }
.yu-col.col-1 {
width: 4.16667%; }
.yu-col.offset-1 {
margin-left: 4.16667%; }
.yu-col.push-1 {
left: 4.16667%; }
.yu-col.pull-1 {
right: 4.16667%; }
.yu-col.col-2 {
width: 8.33333%; }
.yu-col.offset-2 {
margin-left: 8.33333%; }
.yu-col.push-2 {
left: 8.33333%; }
.yu-col.pull-2 {
right: 8.33333%; }
.yu-col.col-3 {
width: 12.5%; }
.yu-col.offset-3 {
margin-left: 12.5%; }
.yu-col.push-3 {
left: 12.5%; }
.yu-col.pull-3 {
right: 12.5%; }
.yu-col.col-4 {
width: 16.66667%; }
.yu-col.offset-4 {
margin-left: 16.66667%; }
.yu-col.push-4 {
left: 16.66667%; }
.yu-col.pull-4 {
right: 16.66667%; }
.yu-col.col-5 {
width: 20.83333%; }
.yu-col.offset-5 {
margin-left: 20.83333%; }
.yu-col.push-5 {
left: 20.83333%; }
.yu-col.pull-5 {
right: 20.83333%; }
.yu-col.col-6 {
width: 25%; }
.yu-col.offset-6 {
margin-left: 25%; }
.yu-col.push-6 {
left: 25%; }
.yu-col.pull-6 {
right: 25%; }
.yu-col.col-7 {
width: 29.16667%; }
.yu-col.offset-7 {
margin-left: 29.16667%; }
.yu-col.push-7 {
left: 29.16667%; }
.yu-col.pull-7 {
right: 29.16667%; }
.yu-col.col-8 {
width: 33.33333%; }
.yu-col.offset-8 {
margin-left: 33.33333%; }
.yu-col.push-8 {
left: 33.33333%; }
.yu-col.pull-8 {
right: 33.33333%; }
.yu-col.col-9 {
width: 37.5%; }
.yu-col.offset-9 {
margin-left: 37.5%; }
.yu-col.push-9 {
left: 37.5%; }
.yu-col.pull-9 {
right: 37.5%; }
.yu-col.col-10 {
width: 41.66667%; }
.yu-col.offset-10 {
margin-left: 41.66667%; }
.yu-col.push-10 {
left: 41.66667%; }
.yu-col.pull-10 {
right: 41.66667%; }
.yu-col.col-11 {
width: 45.83333%; }
.yu-col.offset-11 {
margin-left: 45.83333%; }
.yu-col.push-11 {
left: 45.83333%; }
.yu-col.pull-11 {
right: 45.83333%; }
.yu-col.col-12 {
width: 50%; }
.yu-col.offset-12 {
margin-left: 50%; }
.yu-col.push-12 {
left: 50%; }
.yu-col.pull-12 {
right: 50%; }
.yu-col.col-13 {
width: 54.16667%; }
.yu-col.offset-13 {
margin-left: 54.16667%; }
.yu-col.push-13 {
left: 54.16667%; }
.yu-col.pull-13 {
right: 54.16667%; }
.yu-col.col-14 {
width: 58.33333%; }
.yu-col.offset-14 {
margin-left: 58.33333%; }
.yu-col.push-14 {
left: 58.33333%; }
.yu-col.pull-14 {
right: 58.33333%; }
.yu-col.col-15 {
width: 62.5%; }
.yu-col.offset-15 {
margin-left: 62.5%; }
.yu-col.push-15 {
left: 62.5%; }
.yu-col.pull-15 {
right: 62.5%; }
.yu-col.col-16 {
width: 66.66667%; }
.yu-col.offset-16 {
margin-left: 66.66667%; }
.yu-col.push-16 {
left: 66.66667%; }
.yu-col.pull-16 {
right: 66.66667%; }
.yu-col.col-17 {
width: 70.83333%; }
.yu-col.offset-17 {
margin-left: 70.83333%; }
.yu-col.push-17 {
left: 70.83333%; }
.yu-col.pull-17 {
right: 70.83333%; }
.yu-col.col-18 {
width: 75%; }
.yu-col.offset-18 {
margin-left: 75%; }
.yu-col.push-18 {
left: 75%; }
.yu-col.pull-18 {
right: 75%; }
.yu-col.col-19 {
width: 79.16667%; }
.yu-col.offset-19 {
margin-left: 79.16667%; }
.yu-col.push-19 {
left: 79.16667%; }
.yu-col.pull-19 {
right: 79.16667%; }
.yu-col.col-20 {
width: 83.33333%; }
.yu-col.offset-20 {
margin-left: 83.33333%; }
.yu-col.push-20 {
left: 83.33333%; }
.yu-col.pull-20 {
right: 83.33333%; }
.yu-col.col-21 {
width: 87.5%; }
.yu-col.offset-21 {
margin-left: 87.5%; }
.yu-col.push-21 {
left: 87.5%; }
.yu-col.pull-21 {
right: 87.5%; }
.yu-col.col-22 {
width: 91.66667%; }
.yu-col.offset-22 {
margin-left: 91.66667%; }
.yu-col.push-22 {
left: 91.66667%; }
.yu-col.pull-22 {
right: 91.66667%; }
.yu-col.col-23 {
width: 95.83333%; }
.yu-col.offset-23 {
margin-left: 95.83333%; }
.yu-col.push-23 {
left: 95.83333%; }
.yu-col.pull-23 {
right: 95.83333%; }
.yu-col.col-24 {
width: 100%; }
.yu-col.offset-24 {
margin-left: 100%; }
.yu-col.push-24 {
left: 100%; }
.yu-col.pull-24 {
right: 100%; }
@media screen and (max-width: 576px) {
.yu-col.col-xs-1 {
width: 4.16667%; }
.yu-col.col-xs-2 {
width: 8.33333%; }
.yu-col.col-xs-3 {
width: 12.5%; }
.yu-col.col-xs-4 {
width: 16.66667%; }
.yu-col.col-xs-5 {
width: 20.83333%; }
.yu-col.col-xs-6 {
width: 25%; }
.yu-col.col-xs-7 {
width: 29.16667%; }
.yu-col.col-xs-8 {
width: 33.33333%; }
.yu-col.col-xs-9 {
width: 37.5%; }
.yu-col.col-xs-10 {
width: 41.66667%; }
.yu-col.col-xs-11 {
width: 45.83333%; }
.yu-col.col-xs-12 {
width: 50%; }
.yu-col.col-xs-13 {
width: 54.16667%; }
.yu-col.col-xs-14 {
width: 58.33333%; }
.yu-col.col-xs-15 {
width: 62.5%; }
.yu-col.col-xs-16 {
width: 66.66667%; }
.yu-col.col-xs-17 {
width: 70.83333%; }
.yu-col.col-xs-18 {
width: 75%; }
.yu-col.col-xs-19 {
width: 79.16667%; }
.yu-col.col-xs-20 {
width: 83.33333%; }
.yu-col.col-xs-21 {
width: 87.5%; }
.yu-col.col-xs-22 {
width: 91.66667%; }
.yu-col.col-xs-23 {
width: 95.83333%; }
.yu-col.col-xs-24 {
width: 100%; } }
@media screen and (min-width: 576px) {
.col-sm-1 {
width: 4.16667%; }
.col-sm-2 {
width: 8.33333%; }
.col-sm-3 {
width: 12.5%; }
.col-sm-4 {
width: 16.66667%; }
.col-sm-5 {
width: 20.83333%; }
.col-sm-6 {
width: 25%; }
.col-sm-7 {
width: 29.16667%; }
.col-sm-8 {
width: 33.33333%; }
.col-sm-9 {
width: 37.5%; }
.col-sm-10 {
width: 41.66667%; }
.col-sm-11 {
width: 45.83333%; }
.col-sm-12 {
width: 50%; }
.col-sm-13 {
width: 54.16667%; }
.col-sm-14 {
width: 58.33333%; }
.col-sm-15 {
width: 62.5%; }
.col-sm-16 {
width: 66.66667%; }
.col-sm-17 {
width: 70.83333%; }
.col-sm-18 {
width: 75%; }
.col-sm-19 {
width: 79.16667%; }
.col-sm-20 {
width: 83.33333%; }
.col-sm-21 {
width: 87.5%; }
.col-sm-22 {
width: 91.66667%; }
.col-sm-23 {
width: 95.83333%; }
.col-sm-24 {
width: 100%; } }
@media screen and (min-width: 768px) {
.yu-col.col-md-1 {
width: 4.16667%; }
.yu-col.col-md-2 {
width: 8.33333%; }
.yu-col.col-md-3 {
width: 12.5%; }
.yu-col.col-md-4 {
width: 16.66667%; }
.yu-col.col-md-5 {
width: 20.83333%; }
.yu-col.col-md-6 {
width: 25%; }
.yu-col.col-md-7 {
width: 29.16667%; }
.yu-col.col-md-8 {
width: 33.33333%; }
.yu-col.col-md-9 {
width: 37.5%; }
.yu-col.col-md-10 {
width: 41.66667%; }
.yu-col.col-md-11 {
width: 45.83333%; }
.yu-col.col-md-12 {
width: 50%; }
.yu-col.col-md-13 {
width: 54.16667%; }
.yu-col.col-md-14 {
width: 58.33333%; }
.yu-col.col-md-15 {
width: 62.5%; }
.yu-col.col-md-16 {
width: 66.66667%; }
.yu-col.col-md-17 {
width: 70.83333%; }
.yu-col.col-md-18 {
width: 75%; }
.yu-col.col-md-19 {
width: 79.16667%; }
.yu-col.col-md-20 {
width: 83.33333%; }
.yu-col.col-md-21 {
width: 87.5%; }
.yu-col.col-md-22 {
width: 91.66667%; }
.yu-col.col-md-23 {
width: 95.83333%; }
.yu-col.col-md-24 {
width: 100%; } }
@media screen and (min-width: 992px) {
.yu-col.col-lg-1 {
width: 4.16667%; }
.yu-col.col-lg-2 {
width: 8.33333%; }
.yu-col.col-lg-3 {
width: 12.5%; }
.yu-col.col-lg-4 {
width: 16.66667%; }
.yu-col.col-lg-5 {
width: 20.83333%; }
.yu-col.col-lg-6 {
width: 25%; }
.yu-col.col-lg-7 {
width: 29.16667%; }
.yu-col.col-lg-8 {
width: 33.33333%; }
.yu-col.col-lg-9 {
width: 37.5%; }
.yu-col.col-lg-10 {
width: 41.66667%; }
.yu-col.col-lg-11 {
width: 45.83333%; }
.yu-col.col-lg-12 {
width: 50%; }
.yu-col.col-lg-13 {
width: 54.16667%; }
.yu-col.col-lg-14 {
width: 58.33333%; }
.yu-col.col-lg-15 {
width: 62.5%; }
.yu-col.col-lg-16 {
width: 66.66667%; }
.yu-col.col-lg-17 {
width: 70.83333%; }
.yu-col.col-lg-18 {
width: 75%; }
.yu-col.col-lg-19 {
width: 79.16667%; }
.yu-col.col-lg-20 {
width: 83.33333%; }
.yu-col.col-lg-21 {
width: 87.5%; }
.yu-col.col-lg-22 {
width: 91.66667%; }
.yu-col.col-lg-23 {
width: 95.83333%; }
.yu-col.col-lg-24 {
width: 100%; } }
@media screen and (min-width: 1200px) {
.yu-col.col-xl-1 {
width: 4.16667%; }
.yu-col.col-xl-2 {
width: 8.33333%; }
.yu-col.col-xl-3 {
width: 12.5%; }
.yu-col.col-xl-4 {
width: 16.66667%; }
.yu-col.col-xl-5 {
width: 20.83333%; }
.yu-col.col-xl-6 {
width: 25%; }
.yu-col.col-xl-7 {
width: 29.16667%; }
.yu-col.col-xl-8 {
width: 33.33333%; }
.yu-col.col-xl-9 {
width: 37.5%; }
.yu-col.col-xl-10 {
width: 41.66667%; }
.yu-col.col-xl-11 {
width: 45.83333%; }
.yu-col.col-xl-12 {
width: 50%; }
.yu-col.col-xl-13 {
width: 54.16667%; }
.yu-col.col-xl-14 {
width: 58.33333%; }
.yu-col.col-xl-15 {
width: 62.5%; }
.yu-col.col-xl-16 {
width: 66.66667%; }
.yu-col.col-xl-17 {
width: 70.83333%; }
.yu-col.col-xl-18 {
width: 75%; }
.yu-col.col-xl-19 {
width: 79.16667%; }
.yu-col.col-xl-20 {
width: 83.33333%; }
.yu-col.col-xl-21 {
width: 87.5%; }
.yu-col.col-xl-22 {
width: 91.66667%; }
.yu-col.col-xl-23 {
width: 95.83333%; }
.yu-col.col-xl-24 {
width: 100%; } }
@media screen and (min-width: 1600px) {
.yu-col.col-xxl-1 {
width: 4.16667%; }
.yu-col.col-xxl-2 {
width: 8.33333%; }
.yu-col.col-xxl-3 {
width: 12.5%; }
.yu-col.col-xxl-4 {
width: 16.66667%; }
.yu-col.col-xxl-5 {
width: 20.83333%; }
.yu-col.col-xxl-6 {
width: 25%; }
.yu-col.col-xxl-7 {
width: 29.16667%; }
.yu-col.col-xxl-8 {
width: 33.33333%; }
.yu-col.col-xxl-9 {
width: 37.5%; }
.yu-col.col-xxl-10 {
width: 41.66667%; }
.yu-col.col-xxl-11 {
width: 45.83333%; }
.yu-col.col-xxl-12 {
width: 50%; }
.yu-col.col-xxl-13 {
width: 54.16667%; }
.yu-col.col-xxl-14 {
width: 58.33333%; }
.yu-col.col-xxl-15 {
width: 62.5%; }
.yu-col.col-xxl-16 {
width: 66.66667%; }
.yu-col.col-xxl-17 {
width: 70.83333%; }
.yu-col.col-xxl-18 {
width: 75%; }
.yu-col.col-xxl-19 {
width: 79.16667%; }
.yu-col.col-xxl-20 {
width: 83.33333%; }
.yu-col.col-xxl-21 {
width: 87.5%; }
.yu-col.col-xxl-22 {
width: 91.66667%; }
.yu-col.col-xxl-23 {
width: 95.83333%; }
.yu-col.col-xxl-24 {
width: 100%; } }
.yu-header {
flex-shrink: 0;
width: 100%;
height: 60px;
line-height: 60px;
overflow: hidden;
padding: 0 14px;
box-sizing: border-box; }
.yu-header.align-left {
text-align: left; }
.yu-header.align-center {
text-align: center; }
.yu-header.align-right {
text-align: right; }
.yu-header > .float-right {
float: right; }
.yu-header > .float-left {
float: left; }
.yu-header.small {
height: 50px;
line-height: 50px; }
.yu-header.tiny {
height: 40px;
line-height: 40px; }
.yu-content {
padding: 14px;
width: 100%;
height: 100%;
box-sizing: border-box; }
.yu-footer {
flex-shrink: 0;
width: 100%;
height: 60px;
line-height: 60px;
overflow: hidden;
padding: 0 14px;
box-sizing: border-box; }
.yu-footer.align-left {
text-align: left; }
.yu-footer.align-center {
text-align: center; }
.yu-footer.align-right {
text-align: right; }
.yu-footer > .float-right {
float: right; }
.yu-footer > .float-left {
float: left; }
.yu-footer.small {
height: 50px;
line-height: 50px; }
.yu-footer.tiny {
height: 40px;
line-height: 40px; }
.yu-sidebar {
display: inline-block;
width: 200px;
height: 100%;
box-sizing: border-box; }
.yu-center {
position: relative;
width: 100%;
height: 100%; }
.yu-center .center {
width: 300px;
height: 300px;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%); }
.yu-center .center.large {
width: 400px;
height: 400px; }
.yu-center .center.big {
width: 500px;
height: 500px; }
.yu-header {
flex-shrink: 0;
width: 100%;
height: 60px;
line-height: 60px;
overflow: hidden;
padding: 0 14px;
box-sizing: border-box; }
.yu-header.align-left {
text-align: left; }
.yu-header.align-center {
text-align: center; }
.yu-header.align-right {
text-align: right; }
.yu-header > .float-right {
float: right; }
.yu-header > .float-left {
float: left; }
.yu-header.small {
height: 50px;
line-height: 50px; }
.yu-header.tiny {
height: 40px;
line-height: 40px; }
.yu-content {
padding: 14px;
width: 100%;
height: 100%;
box-sizing: border-box; }
.yu-footer {
flex-shrink: 0;
width: 100%;
height: 60px;
line-height: 60px;
overflow: hidden;
padding: 0 14px;
box-sizing: border-box; }
.yu-footer.align-left {
text-align: left; }
.yu-footer.align-center {
text-align: center; }
.yu-footer.align-right {
text-align: right; }
.yu-footer > .float-right {
float: right; }
.yu-footer > .float-left {
float: left; }
.yu-footer.small {
height: 50px;
line-height: 50px; }
.yu-footer.tiny {
height: 40px;
line-height: 40px; }
.yu-sidebar {
display: inline-block;
width: 200px;
height: 100%;
box-sizing: border-box; }
.yu-center {
position: relative;
width: 100%;
height: 100%; }
.yu-center .center {
width: 300px;
height: 300px;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%); }
.yu-center .center.large {
width: 400px;
height: 400px; }
.yu-center .center.big {
width: 500px;
height: 500px; }
.yu-layout, .yu-layout-block {
font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica Neue, Helvetica, PingFang SC, Hiragino Sans GB, Microsoft YaHei, SimSun, sans-serif;
display: flex;
flex-direction: column;
width: 100%;
height: 100%; }
.yu-layout-inline {
display: flex;
width: 100%;
height: 100%; }
.yu-layout-inline .yu-sidebar {
flex-shrink: 0; }
.yu-layout-block {
box-sizing: border-box; }
.yu-layout-block.padding {
padding: 30px 30px 0 30px; }