@import "~/app-resources/less/theme.less"; #cit-calculate-data { width: 100%; height: 100%; padding: 0 10px; position: relative; background-color: @color-white; .cit-calculate-data-title { margin: 20px 0; height: 30px; line-height: 30px; vertical-align: middle; /* span { font-weight: bold; } */ button { background-color: @color-deep-red; color: @color-white; } span { float: right; margin: 0 0 20px 0; cursor: pointer; } } .vat-caculate-data-progress { width: 100%; border: 1px solid @color-light-gray; border-radius: 8px; height: 16px; text-align: center; line-height: 16px; font-weight: bold; color: #fff; overflow: hidden; .Bar { width: 50%; height: 16px; background: @color-red; } } .vat-caculate-data-list { height: calc(~"100% - 100px"); width: 100%; margin: 10px 0; padding: 0 5px; overflow-y: auto; font-weight: bold; font-size: 14px; .scroller { /*white-space: pre-line;*/ overflow-y: hidden; position: relative; height: 100%; } .task { width: 100%; height: 40px; line-height: 40px; vertical-align: middle; border-bottom: 1px solid @color-light-gray; > span:first-child { margin-left: 20px; width:auto; float: left; } > span { float: right; margin-right: 20px; width: 80px; height: 39px; line-height: 39px; vertical-align: middle; align-content:center; } } li { list-style: none; img { width: 28px; height: 28px; } } .loader--audioWave { width: 3em; height: 2em; background: linear-gradient(@color-orange, @color-orange) 0 50%, linear-gradient(@color-orange, @color-orange) 0.625em 50%, linear-gradient(@color-orange, @color-orange) 1.25em 50%, linear-gradient(@color-orange, @color-orange) 1.875em 50%, linear-gradient(@color-orange, @color-orange) 2.5em 50%; background-repeat: no-repeat; background-size: 0.5em 0.25em, 0.5em 0.25em, 0.5em 0.25em, 0.5em 0.25em, 0.5em 0.25em; animation: audioWave 1.5s linear infinite; } @keyframes audioWave { 25% { background: linear-gradient(#FFD700, #FFD700) 0 50% 0.5em 2em, linear-gradient(@color-orange, @color-orange) 0.625em 50%, linear-gradient(@color-orange, @color-orange) 1.25em 50%, linear-gradient(@color-orange, @color-orange) 1.875em 50%, linear-gradient(@color-orange, @color-orange) 2.5em 50%; background-repeat: no-repeat; background-size: 0.5em 100%, 0.5em 0.25em, 0.5em 0.25em, 0.5em 0.25em, 0.5em 0.25em; } 37.5% { background: linear-gradient(@color-orange, @color-orange) 0 50%, linear-gradient(#FFD700, #FFD700) 0.625em 50%, linear-gradient(@color-orange, @color-orange) 1.25em 50%, linear-gradient(@color-orange, @color-orange) 1.875em 50%, linear-gradient(@color-orange, @color-orange) 2.5em 50%; background-repeat: no-repeat; background-size: 0.5em 0.25em, 0.5em 100%, 0.5em 0.25em, 0.5em 0.25em, 0.5em 0.25em; } 50% { background: linear-gradient(@color-orange, @color-orange) 0 50%, linear-gradient(@color-orange, @color-orange) 0.625em 50%, linear-gradient(#FFD700, #FFD700) 1.25em 50%, linear-gradient(@color-orange, @color-orange) 1.875em 50%, linear-gradient(@color-orange, @color-orange) 2.5em 50%; background-repeat: no-repeat; background-size: 0.5em 0.25em, 0.5em 0.25em, 0.5em 100%, 0.5em 0.25em, 0.5em 0.25em; } 62.5% { background: linear-gradient(@color-orange, @color-orange) 0 50%, linear-gradient(@color-orange, @color-orange) 0.625em 50%, linear-gradient(@color-orange, @color-orange) 1.25em 50%, linear-gradient(#FFD700, #FFD700) 1.875em 50%, linear-gradient(@color-orange, @color-orange) 2.5em 50%; background-repeat: no-repeat; background-size: 0.5em 0.25em, 0.5em 0.25em, 0.5em 0.25em, 0.5em 100%, 0.5em 0.25em; } 75% { background: linear-gradient(@color-orange, @color-orange) 0 50%, linear-gradient(@color-orange, @color-orange) 0.625em 50%, linear-gradient(@color-orange, @color-orange) 1.25em 50%, linear-gradient(@color-orange, @color-orange) 1.875em 50%, linear-gradient(#FFD700, #FFD700) 2.5em 50%; background-repeat: no-repeat; background-size: 0.5em 0.25em, 0.5em 0.25em, 0.5em 0.25em, 0.5em 0.25em, 0.5em 100%; } } .load { width: 4em; height: 2em; > span { background-color: @color-red; width: 0.5em; height: 2em; display: inline-block; transform: scaleY(0.125); animation: stretchdelay 1.5s linear infinite; } .rect2 { -webkit-animation-delay: 0.4s; animation-delay: 0.4s; } .rect3 { -webkit-animation-delay: 0.6s; animation-delay: 0.6s; } .rect4 { -webkit-animation-delay: 0.8s; animation-delay: 0.8s; } .rect5 { -webkit-animation-delay: 1.0s; animation-delay: 1.0s; } } @keyframes stretchdelay { 20% { transform: scaleY(1.0); -webkit-transform: scaleY(1.0); background-color: @color-yellow; } 0%, 40%, 100% { transform: scaleY(0.125); -webkit-transform: scaleY(0.125); } } } }