760 lines
13 KiB
CSS
760 lines
13 KiB
CSS
/** 加载动画 */
|
|
.loader-main {
|
|
position: fixed;
|
|
width: 100%;
|
|
height: 100%;
|
|
background-color: whitesmoke;
|
|
z-index: 9999999;
|
|
margin-top: -60px;
|
|
}
|
|
|
|
.loader {
|
|
width: 50px;
|
|
height: 50px;
|
|
margin: 30px auto 40px;
|
|
margin-top: 20%;
|
|
position: relative;
|
|
z-index: 999999;
|
|
background-color: whitesmoke;
|
|
}
|
|
|
|
.loader:before {
|
|
content: "";
|
|
width: 50px;
|
|
height: 7px;
|
|
border-radius: 50%;
|
|
background: #000;
|
|
opacity: 0.1;
|
|
position: absolute;
|
|
top: 59px;
|
|
left: 0;
|
|
animation: shadow .5s linear infinite;
|
|
}
|
|
|
|
.loader:after {
|
|
content: "";
|
|
width: 50px;
|
|
height: 50px;
|
|
border-radius: 3px;
|
|
background-color: #5FB878;
|
|
position: absolute;
|
|
top: 0;
|
|
left: 0;
|
|
animation: loading .5s linear infinite;
|
|
}
|
|
|
|
@-webkit-keyframes loading {
|
|
17% {
|
|
border-bottom-right-radius: 3px;
|
|
}
|
|
|
|
25% {
|
|
transform: translateY(9px) rotate(22.5deg);
|
|
}
|
|
|
|
50% {
|
|
transform: translateY(18px) scale(1, 0.9) rotate(45deg);
|
|
border-bottom-right-radius: 40px;
|
|
}
|
|
|
|
75% {
|
|
transform: translateY(9px) rotate(67.5deg);
|
|
}
|
|
|
|
100% {
|
|
transform: translateY(0) rotate(90deg);
|
|
}
|
|
}
|
|
|
|
@keyframes loading {
|
|
17% {
|
|
border-bottom-right-radius: 3px;
|
|
}
|
|
|
|
25% {
|
|
transform: translateY(9px) rotate(22.5deg);
|
|
}
|
|
|
|
50% {
|
|
transform: translateY(18px) scale(1, 0.9) rotate(45deg);
|
|
border-bottom-right-radius: 40px;
|
|
}
|
|
|
|
75% {
|
|
transform: translateY(9px) rotate(67.5deg);
|
|
}
|
|
|
|
100% {
|
|
transform: translateY(0) rotate(90deg);
|
|
}
|
|
}
|
|
|
|
@-webkit-keyframes shadow {
|
|
|
|
0%,
|
|
100% {
|
|
transform: scale(1, 1);
|
|
}
|
|
|
|
50% {
|
|
transform: scale(1.2, 1);
|
|
}
|
|
}
|
|
|
|
@keyframes shadow {
|
|
|
|
0%,
|
|
100% {
|
|
transform: scale(1, 1);
|
|
}
|
|
|
|
50% {
|
|
transform: scale(1.2, 1);
|
|
}
|
|
}
|
|
|
|
|
|
/** 菜单 */
|
|
.pear-nav-tree {
|
|
width: 220px;
|
|
border-radius: 0px;
|
|
background-color: #28333E;
|
|
}
|
|
|
|
.pear-nav-tree .layui-nav-item>a {
|
|
height: 56px;
|
|
line-height: 56px;
|
|
}
|
|
|
|
.pear-nav-tree .layui-nav-item dd a {
|
|
height: 48px;
|
|
line-height: 48px;
|
|
}
|
|
|
|
.pear-nav-tree .layui-nav-child {
|
|
padding-top: 5px;
|
|
padding-bottom: 5px;
|
|
}
|
|
|
|
.pear-nav-tree .layui-nav-item a i {
|
|
margin-right: 12px;
|
|
}
|
|
|
|
.pear-nav-tree .layui-nav-item a span {
|
|
letter-spacing: 1px;
|
|
font-size: 14px;
|
|
}
|
|
|
|
.pear-nav-tree .layui-nav-item a:hover {
|
|
background-color: transparent;
|
|
}
|
|
|
|
.pear-nav-tree .layui-nav-more {
|
|
margin-right: 5px;
|
|
}
|
|
|
|
.pear-nav-tree .layui-nav-bar {
|
|
display: none;
|
|
}
|
|
|
|
.pear-nav-tree .layui-nav-child dd a span {
|
|
margin-left: 30px !important;
|
|
}
|
|
|
|
.pear-nav-tree .layui-nav-child dd a i {
|
|
display: none;
|
|
}
|
|
|
|
.pear-nav-tree .layui-nav-hover dd a span {
|
|
margin-left: 0px !important;
|
|
}
|
|
|
|
.pear-nav-tree .layui-nav-child dd.layui-this,
|
|
.layui-nav-tree .layui-nav-child dd.layui-this a,
|
|
.layui-nav-tree .layui-this, .layui-nav-tree .layui-this>a,
|
|
.layui-nav-tree .layui-this>a:hover{
|
|
|
|
background-color: #5FB878;
|
|
}
|
|
|
|
|
|
/** 实 现 菜 单 隐 藏 */
|
|
.pear-nav-mini {
|
|
overflow: hidden;
|
|
}
|
|
|
|
.pear-nav-mini .layui-nav-item a span {
|
|
display: none;
|
|
}
|
|
|
|
.pear-nav-mini .layui-nav-child {
|
|
display: none;
|
|
}
|
|
|
|
.pear-nav-mini .layui-nav-more {
|
|
display: none !important;
|
|
}
|
|
|
|
/** 隐 藏 后 子 级 悬 浮 菜 单 */
|
|
.pear-nav-tree .layui-nav-hover {
|
|
border-radius: 4px;
|
|
overflow: hidden;
|
|
background-color: #28333E;
|
|
display: block;
|
|
position: fixed;
|
|
min-width: 130px;
|
|
margin-left: 62px;
|
|
padding-top: 4px !important;
|
|
padding-bottom: 4px !important;
|
|
box-shadow: 0px 0px 3px lightgray;
|
|
}
|
|
|
|
.pear-nav-tree .layui-nav-hover a span {
|
|
display: inline-block !important;
|
|
}
|
|
|
|
.pear-nav-tree .layui-nav-hover a i {
|
|
display: none;
|
|
}
|
|
|
|
/** 下 拉 图 标 */
|
|
.pear-nav-tree.arrow .layui-nav-more {
|
|
font-family: layui-icon !important;
|
|
font-size: 12px;
|
|
font-style: normal;
|
|
-webkit-font-smoothing: antialiased;
|
|
-moz-osx-font-smoothing: grayscale;
|
|
overflow: hidden;
|
|
width: auto;
|
|
height: auto;
|
|
line-height: normal;
|
|
border: none;
|
|
top: 23px;
|
|
margin-right: 5px !important;
|
|
margin: 0;
|
|
padding: 0;
|
|
display: inline-block;
|
|
transition: all .2s;
|
|
-webkit-transition: all .2s;
|
|
}
|
|
|
|
.pear-nav-tree.arrow .layui-nav-child .layui-nav-more {
|
|
top: 17px;
|
|
}
|
|
|
|
.pear-nav-tree.arrow .layui-nav-more:before {
|
|
content: "\e61a";
|
|
}
|
|
|
|
.pear-nav-tree.arrow .layui-nav-itemed>a>.layui-nav-more {
|
|
transform: rotate(180deg);
|
|
-ms-transform: rotate(180deg);
|
|
-moz-transform: rotate(180deg);
|
|
-webkit-transform: rotate(180deg);
|
|
-o-transform: rotate(180deg);
|
|
width: 12px;
|
|
text-align: center;
|
|
}
|
|
|
|
.pear-nav-tree.arrow .layui-nav-itemed>a>.layui-nav-more:before {
|
|
content: '\e61a';
|
|
background-color: transparent;
|
|
display: inline-block;
|
|
vertical-align: middle;
|
|
}
|
|
|
|
/** 滚 动 条 样 式 */
|
|
.layui-side-scroll::-webkit-scrollbar {
|
|
width: 0px;
|
|
height: 0px;
|
|
}
|
|
|
|
/** 选项卡 */
|
|
|
|
.pear-tab {
|
|
margin: 0px;
|
|
overflow: hidden;
|
|
height: 100% !important;
|
|
}
|
|
|
|
.pear-tab .layui-tab-content {
|
|
height: calc(100% - 42px) !important;
|
|
}
|
|
|
|
|
|
.pear-tab .layui-tab-content .layui-tab-item {
|
|
height: 100%;
|
|
}
|
|
|
|
.pear-tab .layui-tab-content {
|
|
padding: 0px;
|
|
}
|
|
|
|
.pear-tab .layui-tab-title {
|
|
border: none;
|
|
border: 1px solid whitesmoke;
|
|
background-color: white;
|
|
}
|
|
|
|
.pear-tab .layui-tab-title li {
|
|
border-right: 1px solid whitesmoke;
|
|
color: dimgray;
|
|
}
|
|
|
|
.pear-tab .layui-tab-title .layui-tab-bar {
|
|
display: none;
|
|
}
|
|
|
|
.pear-tab .layui-tab-title .layui-this:after {
|
|
display: none;
|
|
}
|
|
|
|
.pear-tab .layui-tab-title .pear-tab-active {
|
|
display: inline-block;
|
|
background-color: lightgray;
|
|
width: 9px;
|
|
height: 9px;
|
|
border-radius: 30px;
|
|
margin-right: 12px;
|
|
}
|
|
|
|
.pear-tab .layui-tab-title .layui-this .pear-tab-active {
|
|
background-color: #5FB878;
|
|
}
|
|
|
|
.pear-tab .layui-tab-title .layui-tab-close:hover {
|
|
border-radius: 50px;
|
|
background-color: lightgray;
|
|
line-height: 19px;
|
|
}
|
|
|
|
.pear-tab .layui-tab-title .disable-close+.layui-tab-close {
|
|
display: none;
|
|
}
|
|
|
|
.pear-tab .layui-tab-title .able-close+.layui-tab-close {
|
|
display: inline-block;
|
|
}
|
|
|
|
|
|
.pear-tab .layui-tab-control>li {
|
|
position: absolute;
|
|
top: 0px;
|
|
height: 40px;
|
|
line-height: 40px;
|
|
width: 40px;
|
|
text-align: center;
|
|
background-color: white;
|
|
border-top: whitesmoke 1px solid;
|
|
border-bottom: whitesmoke 1px solid;
|
|
}
|
|
|
|
.pear-tab .layui-tab-prev {
|
|
left: 0px;
|
|
border-right: whitesmoke 1px solid;
|
|
border-left: whitesmoke 1px solid;
|
|
}
|
|
|
|
.pear-tab .layui-tab-next {
|
|
right: 40px;
|
|
border-left: 1px solid whitesmoke;
|
|
}
|
|
|
|
.pear-tab .layui-tab-tool {
|
|
right: 0px;
|
|
border-left: 1px solid whitesmoke;
|
|
}
|
|
|
|
.pear-tab .layui-tab-control .layui-tab-tool,
|
|
.pear-tab .layui-tab-control .layui-tab-prev,
|
|
.pear-tab .layui-tab-control .layui-tab-next {
|
|
display: none;
|
|
}
|
|
|
|
|
|
.pear-tab.layui-tab-roll .layui-tab-control .layui-tab-prev,
|
|
.pear-tab.layui-tab-roll .layui-tab-control .layui-tab-next {
|
|
display: block;
|
|
}
|
|
|
|
.pear-tab.layui-tab-roll .layui-tab-control .layui-tab-next {
|
|
right: 0px;
|
|
border-right: 1px solid whitesmoke;
|
|
}
|
|
|
|
.pear-tab.layui-tab-roll .layui-tab-title {
|
|
padding-left: 40px;
|
|
padding-right: 40px;
|
|
}
|
|
|
|
|
|
.pear-tab.layui-tab-tool .layui-tab-control .layui-tab-tool {
|
|
display: block;
|
|
}
|
|
|
|
.pear-tab.layui-tab-tool .layui-tab-title {
|
|
padding-left: 0px;
|
|
padding-right: 40px;
|
|
}
|
|
|
|
|
|
.pear-tab.layui-tab-rollTool .layui-tab-title {
|
|
padding-left: 40px;
|
|
padding-right: 80px;
|
|
}
|
|
|
|
.pear-tab.layui-tab-rollTool .layui-tab-control .layui-tab-prev,
|
|
.pear-tab.layui-tab-rollTool .layui-tab-control .layui-tab-next,
|
|
.pear-tab.layui-tab-rollTool .layui-tab-control .layui-tab-tool {
|
|
display: block;
|
|
}
|
|
|
|
.pear-tab .layui-tab-tool .layui-nav {
|
|
position: absolute;
|
|
height: 43px !important;
|
|
top: 0;
|
|
width: 100%;
|
|
height: 100%;
|
|
padding: 0;
|
|
background: 0 0;
|
|
}
|
|
|
|
.pear-tab .layui-tab-tool .layui-nav-item {
|
|
height: 40px;
|
|
}
|
|
|
|
.pear-tab .layui-tab-tool .layui-nav-bar {
|
|
display: none;
|
|
}
|
|
|
|
.pear-tab .layui-tab-tool .layui-nav-child {
|
|
left: auto;
|
|
top: 45px;
|
|
right: 3px;
|
|
width: 120px;
|
|
border: 1px solid whitesmoke;
|
|
}
|
|
|
|
.pear-tab .layui-tab-tool .layui-this a {
|
|
background-color: #009688;
|
|
}
|
|
|
|
.pear-tab-loading {
|
|
position: absolute;
|
|
display: none;
|
|
width: 100%;
|
|
height: calc(100% - 42px);
|
|
top: 42px;
|
|
z-index: 19;
|
|
background-color: #fff
|
|
}
|
|
|
|
.pear-tab-loading.close {
|
|
animation: close 1s;
|
|
-webkit-animation: close 1s;
|
|
animation-fill-mode: forwards;
|
|
}
|
|
|
|
.ball-loader {
|
|
position: absolute;
|
|
left: 50%;
|
|
top: 50%;
|
|
transform: translate(-50%, -50%);
|
|
-ms-transform: translate(-50%, -50%);
|
|
-webkit-transform: translate(-50%, -50%)
|
|
}
|
|
|
|
.ball-loader>span,
|
|
.signal-loader>span {
|
|
background-color: #4aca85 !important;
|
|
display: inline-block
|
|
}
|
|
|
|
.ball-loader>span:nth-child(1),
|
|
.ball-loader.sm>span:nth-child(1),
|
|
.signal-loader>span:nth-child(1),
|
|
.signal-loader.sm>span:nth-child(1) {
|
|
-webkit-animation-delay: 0s;
|
|
animation-delay: 0s
|
|
}
|
|
|
|
.ball-loader>span:nth-child(2),
|
|
.ball-loader.sm>span:nth-child(2),
|
|
.signal-loader>span:nth-child(2),
|
|
.signal-loader.sm>span:nth-child(2) {
|
|
-webkit-animation-delay: .1s;
|
|
animation-delay: .1s
|
|
}
|
|
|
|
.ball-loader>span:nth-child(3),
|
|
.ball-loader.sm>span:nth-child(3),
|
|
.signal-loader>span:nth-child(3),
|
|
.signal-loader.sm>span:nth-child(3) {
|
|
-webkit-animation-delay: .15s;
|
|
animation-delay: .15s
|
|
}
|
|
|
|
.ball-loader>span:nth-child(4),
|
|
.ball-loader.sm>span:nth-child(4),
|
|
.signal-loader>span:nth-child(4),
|
|
.signal-loader.sm>span:nth-child(4) {
|
|
-webkit-animation-delay: .2s;
|
|
animation-delay: .2s
|
|
}
|
|
|
|
.ball-loader>span {
|
|
width: 20px;
|
|
height: 20px;
|
|
margin: 0 3px;
|
|
border-radius: 50%;
|
|
transform: scale(0);
|
|
-ms-transform: scale(0);
|
|
-webkit-transform: scale(0);
|
|
animation: ball-load 1s ease-in-out infinite;
|
|
-webkit-animation: 1s ball-load ease-in-out infinite
|
|
}
|
|
|
|
@-webkit-keyframes ball-load {
|
|
0% {
|
|
transform: scale(0);
|
|
-webkit-transform: scale(0)
|
|
}
|
|
|
|
50% {
|
|
transform: scale(1);
|
|
-webkit-transform: scale(1)
|
|
}
|
|
|
|
100% {
|
|
transform: scale(0);
|
|
-webkit-transform: scale(0)
|
|
}
|
|
}
|
|
|
|
@keyframes ball-load {
|
|
0% {
|
|
transform: scale(0);
|
|
-webkit-transform: scale(0)
|
|
}
|
|
|
|
50% {
|
|
transform: scale(1);
|
|
-webkit-transform: scale(1)
|
|
}
|
|
|
|
100% {
|
|
transform: scale(0);
|
|
-webkit-transform: scale(0)
|
|
}
|
|
}
|
|
|
|
@-webkit-keyframes close {
|
|
0% {
|
|
opacity: 1;
|
|
/*display: block;*/
|
|
}
|
|
|
|
100% {
|
|
opacity: 0;
|
|
/*display: none;*/
|
|
}
|
|
}
|
|
|
|
/** frame 组件 */
|
|
.pear-frame {
|
|
width: 100%;
|
|
height: 100%;
|
|
position: relative;
|
|
overflow: hidden;
|
|
}
|
|
|
|
.pear-frame .dot {
|
|
width: 5px;
|
|
height: 24px;
|
|
background-color: #5FB878;
|
|
margin-top: 8px;
|
|
margin-left: 15px;
|
|
border-radius: 2px;
|
|
display: inline-block;
|
|
}
|
|
|
|
.pear-frame .title {
|
|
position: absolute;
|
|
margin-top: 0px;
|
|
margin-left: 12px;
|
|
color: dimgray;
|
|
display: inline-block;
|
|
letter-spacing: 2px;
|
|
}
|
|
|
|
.pear-frame .pear-frame-title {
|
|
height: 40px;
|
|
line-height: 40px;
|
|
background-color: white;
|
|
border: whitesmoke 1px solid;
|
|
}
|
|
|
|
.pear-frame .pear-frame-content {
|
|
width: 100%;
|
|
height: calc(100% - 45px) !important;
|
|
}
|
|
|
|
.pear-frame-loading {
|
|
position: absolute;
|
|
display: none;
|
|
width: 100%;
|
|
height: calc(100% - 42px);
|
|
top: 42px;
|
|
z-index: 19;
|
|
background-color: #fff
|
|
}
|
|
|
|
.pear-frame-loading.close {
|
|
animation: close 1s;
|
|
-webkit-animation: close 1s;
|
|
animation-fill-mode: forwards;
|
|
}
|
|
|
|
.ball-loader {
|
|
position: absolute;
|
|
left: 50%;
|
|
top: 50%;
|
|
transform: translate(-50%, -50%);
|
|
-ms-transform: translate(-50%, -50%);
|
|
-webkit-transform: translate(-50%, -50%)
|
|
}
|
|
|
|
.ball-loader>span,
|
|
.signal-loader>span {
|
|
background-color: #4aca85;
|
|
display: inline-block
|
|
}
|
|
|
|
.ball-loader>span:nth-child(1),
|
|
.ball-loader.sm>span:nth-child(1),
|
|
.signal-loader>span:nth-child(1),
|
|
.signal-loader.sm>span:nth-child(1) {
|
|
-webkit-animation-delay: 0s;
|
|
animation-delay: 0s
|
|
}
|
|
|
|
.ball-loader>span:nth-child(2),
|
|
.ball-loader.sm>span:nth-child(2),
|
|
.signal-loader>span:nth-child(2),
|
|
.signal-loader.sm>span:nth-child(2) {
|
|
-webkit-animation-delay: .1s;
|
|
animation-delay: .1s
|
|
}
|
|
|
|
.ball-loader>span:nth-child(3),
|
|
.ball-loader.sm>span:nth-child(3),
|
|
.signal-loader>span:nth-child(3),
|
|
.signal-loader.sm>span:nth-child(3) {
|
|
-webkit-animation-delay: .15s;
|
|
animation-delay: .15s
|
|
}
|
|
|
|
.ball-loader>span:nth-child(4),
|
|
.ball-loader.sm>span:nth-child(4),
|
|
.signal-loader>span:nth-child(4),
|
|
.signal-loader.sm>span:nth-child(4) {
|
|
-webkit-animation-delay: .2s;
|
|
animation-delay: .2s
|
|
}
|
|
|
|
.ball-loader>span {
|
|
width: 20px;
|
|
height: 20px;
|
|
margin: 0 3px;
|
|
border-radius: 50%;
|
|
transform: scale(0);
|
|
-ms-transform: scale(0);
|
|
-webkit-transform: scale(0);
|
|
animation: ball-load 1s ease-in-out infinite;
|
|
-webkit-animation: 1s ball-load ease-in-out infinite
|
|
}
|
|
|
|
@-webkit-keyframes ball-load {
|
|
0% {
|
|
transform: scale(0);
|
|
-webkit-transform: scale(0)
|
|
}
|
|
|
|
50% {
|
|
transform: scale(1);
|
|
-webkit-transform: scale(1)
|
|
}
|
|
|
|
100% {
|
|
transform: scale(0);
|
|
-webkit-transform: scale(0)
|
|
}
|
|
}
|
|
|
|
@keyframes ball-load {
|
|
0% {
|
|
transform: scale(0);
|
|
-webkit-transform: scale(0)
|
|
}
|
|
|
|
50% {
|
|
transform: scale(1);
|
|
-webkit-transform: scale(1)
|
|
}
|
|
|
|
100% {
|
|
transform: scale(0);
|
|
-webkit-transform: scale(0)
|
|
}
|
|
}
|
|
|
|
@-webkit-keyframes close {
|
|
0% {
|
|
opacity: 1;
|
|
/*display: block;*/
|
|
}
|
|
|
|
100% {
|
|
opacity: 0;
|
|
/*display: none;*/
|
|
}
|
|
}
|
|
|
|
/** 消息框 */
|
|
.pear-notice .layui-this {
|
|
color: #5FB878 !important;
|
|
}
|
|
|
|
.pear-notice li {
|
|
border-right: 1px solid whitesmoke;
|
|
}
|
|
|
|
.pear-notice * {
|
|
color: dimgray !important;
|
|
}
|
|
|
|
.pear-notice span{
|
|
margin-left: 20px;
|
|
font-size: 13px;
|
|
}
|
|
|
|
.pear-notice img{
|
|
margin-left: 8px;
|
|
width: 33px!important;
|
|
height: 33px!important;
|
|
border-radius: 50px;
|
|
}
|
|
|
|
.pear-notice-item{
|
|
height: 45px!important;
|
|
line-height: 45px!important;
|
|
}
|
|
|
|
|
|
/** 滚动条样式 */
|
|
.pear-notice *::-webkit-scrollbar{width:4px;height:4px;}
|
|
.pear-notice *::-webkit-scrollbar-track{background: white;border-radius:2px;}
|
|
.pear-notice *::-webkit-scrollbar-thumb{background: #E6E6E6;border-radius:2px;}
|
|
.pear-notice *::-webkit-scrollbar-thumb:hover{background: #E6E6E6;}
|
|
.pear-notice *::-webkit-scrollbar-corner{background: #f6f6f6;}
|