reset.css
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
margin: 0;
padding: 0;
border: 0;
font-size: 100%;
font: inherit;
vertical-align: baseline;
box-sizing: border-box;
}
article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
display: block;
}
body {
line-height: 1;
}
ol, ul {
list-style: none;
}
blockquote, q {
quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
content: '';
content: none;
}
a, a:hover{
color: inherit;
text-decoration: none;
}
table {
border-collapse: collapse;
border-spacing: 0;
}
html, body {
width: 100%;
height: 100%;
background-color: #f5f5f5;
font-family: 'PingFangSC-Light', 'PingFang SC', 'STHeitiSC-Light', 'Helvetica-Light', 'Arial', 'sans-serif';
}
.fl{
float: left;
}
.fr{
float: right;
}
.fr .button-group-item{
padding-left: 3px;
}
.clearfix{
zoom:1;
}
.clearfix:after{
display:block;
clear:both;
content:"";
visibility: hidden;
height:0;
}
common.css
#app {
width: 100%;
height: 100%;
}
.container {
max-width: 1200px;
width: 100%;
margin-right: auto;
margin-left: auto;
}
.flex-layout {
display: flex;
}
.flex-center {
display: flex;
justify-content: center;
align-items: center;
}
.flex-between {
display: flex;
align-items: center;
justify-content: space-between;
}
.flex-column {
display: flex;
flex-direction: column;
align-items: center;
}
.flex-row {
display: flex;
flex-direction: row;
align-items: center;
}
.flex-shrink {
flex-shrink: 0;
}
.transition {
transition: all 0.15s ease-in-out;
-moz-transition: all 0.15s ease-in-out;
-webkit-transition: all 0.15s ease-in-out;
-o-transition: all 0.15s ease-in-out;
}
.mr5 {
margin-right: 5px;
}
.ellipsis {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.ellipsis-two {
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 2;
overflow: hidden;
font-weight: 700;
line-height: 18px;
}
.shadow {
background-color: #FFFFFF;
-webkit-box-shadow: 0px 5px 40px -1px rgba(2, 10, 18, 0.1);
box-shadow: 0px 5px 40px -1px rgba(2, 10, 18, 0.1);
}
.layer {
position: relative;
}
.layer:before {
content: "";
width: 100%;
height: 100%;
background: #8A2387;
background: -webkit-linear-gradient(to left, #F27121, #E94057, #8A2387);
background: linear-gradient(to left, #F27121, #E94057, #8A2387);
opacity: 0.3;
display: block;
position: absolute;
top: 0;
left: 0;
}
.el-image {
width: 100%;
height: 100%;
}
.el-pagination.is-background .el-pager li:not(.disabled).active {
background-color: #fa2800;
color: #FFF;
}
.el-pagination.is-background .el-pager li:not(.disabled).active:hover {
color: #fff;
}
.el-pagination.is-background .el-pager li:not(.disabled):hover {
color: #fa2800;
}
.el-slider__runway {
height: 3px;
margin: 0;
background: rgba(0,0,0,0.05);
}
.el-slider__bar {
height: 3px;
border-radius: 3px;
background-color: #fa2800;
}
.el-slider__button-wrapper {
width: 12px;
height: 12px;
top: -9.5px;
}
.el-slider__button {
width: 12px;
height: 12px;
border: 2px solid #fa2800;
}
.el-slider__button:hover {
cursor: pointer;
}
.image-slot {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 100%;
color: #999999;
}
.image-slot i {
font-size: 20px;
font-weight: bold;
}
.image-slot p {
margin-top: 10px;
}
.image-slot .dot {
margin-top: -8px;
margin-left: 5px;
}
.load-bottom {
padding-bottom: 20px;
}
.page-wrap {
text-align: center;
}
.el-message-box__headerbtn:focus .el-message-box__close, .el-message-box__headerbtn:hover .el-message-box__close {
color: #fa2800;
}
.el-message-box__message p {
margin: 0;
line-height: 24px;
overflow-y: scroll;
max-height: 600px;
}
.el-loading-mask {
background-color: #ffffff;
}
.el-loading-spinner .path {
stroke: #4a4a4a;
}
.el-loading-spinner .el-loading-text {
color: #4a4a4a;
}
.el-dropdown-menu__item .el-icon-user {
margin-right: 2px;
}
.el-dropdown-menu__item .el-icon-switch-button {
margin-right: 2px;
}
.el-dropdown-menu__item:focus, .el-dropdown-menu__item:not(.is-disabled):hover {
background-color: #ffffff;
color: #fa2800;
}
.no-data-text {
padding-bottom: 10px;
}
.ant-slider {
width: 100%;
padding: 0;
margin: 0;
}
.ant-slider-rail {
height: 2px;
}
.ant-slider-track {
border-radius: 1px;
background: -webkit-gradient(linear,left top,right top,from(transparent),color-stop(20%,#fa2800));
background: -o-linear-gradient(left,transparent,#fa2800 20%);
background: linear-gradient(90deg,transparent,#fa2800 20%);
background-origin: content-box;
height: 2px;
}
.ant-slider:hover .ant-slider-track {
border-radius: 1px;
background: -webkit-gradient(linear,left top,right top,from(transparent),color-stop(20%,#fa2800));
background: -o-linear-gradient(left,transparent,#fa2800 20%);
background: linear-gradient(90deg,transparent,#fa2800 20%);
background-origin: content-box;
}
.ant-slider-step {
height: 2px;
}
.ant-slider-handle {
width: 12px;
height: 12px;
border: solid 2px #fa2800;
margin-top: -5px;
}
.ant-slider-handle.ant-tooltip-open,
.ant-slider:hover .ant-slider-handle:not(.ant-tooltip-open),
.ant-slider-handle:focus {
border-color: #fa2800;
box-shadow: 0 0 0 5px rgba(250, 40, 0, 0.2);
}
@keyframes play {
0% {
-webkit-transform: translateY(0);
transform: translateY(0)
}
to {
-webkit-transform: translateY(85%);
transform: translateY(85%)
}
}
@keyframes turn{
0%{-webkit-transform:rotate(0deg);}
25%{-webkit-transform:rotate(90deg);}
50%{-webkit-transform:rotate(180deg);}
75%{-webkit-transform:rotate(270deg);}
100%{-webkit-transform:rotate(360deg);}
}
@keyframes rotate {
0% {
transform: rotateZ(-360deg)
}
100% {
transform: rotateZ(0deg)
}
}