html {
font-size: 62.5%;
height: 100%;
-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
-webkit-text-size-adjust: 100%;
-ms-text-size-adjust: 100%;
}
body {
font-family: @f-family;
line-height: @lh;
color: @global-color;
font-size: @global-font-size;
font-size: 14px\9;
margin: @s-none;
padding: @s-none;
position: relative;
height: 100%;
background: @bg-white;
}
* {
margin: @s-none;
padding: @s-none;
text-decoration: none;
.box-sizing(border-box);
}
*::-webkit-scrollbar {/*滚动条整体样式,高宽分别对应横竖滚动条的尺寸*/
width: 6px;
height: 6px;
}
*::-webkit-scrollbar-thumb {/*滚动条里面小方块*/
border-radius: 3px;
-webkit-box-shadow: inset 0 0 5px rgba(0,0,0,0.7);
background: rgba(0,0,0,0.7);
}
*::-webkit-scrollbar-track {/*滚动条里面轨道*/
-webkit-box-shadow: inset 0 0 5px rgba(0,0,0,0.2);
border-radius: 0;
background: rgba(0,0,0,0.1);
}
xmp, pre, plaintext {
white-space: pre-wrap;
word-wrap: break-word;
}
html,
body,
.M_main > .main-content {
&::-webkit-scrollbar {/*滚动条整体样式,高宽分别对应横竖滚动条的尺寸*/
width: 10px;
height: 10px;
}
&::-webkit-scrollbar-thumb {/*滚动条里面小方块*/
border-radius: 5px;
-webkit-box-shadow: inset 0 0 5px rgba(0,0,0,0.5);
background: rgba(0,0,0,0.5);
}
&::-webkit-scrollbar-track {/*滚动条里面轨道*/
-webkit-box-shadow: inset 0 0 5px rgba(0,0,0,0.2);
border-radius: 0;
background: rgba(0,0,0,0.1);
}
}
.clear,
.container,
.row {
&:before,
&:after {
content: "";
display: table;
}
&:after {
clear: both;
}
}
.position-r {
position: relative;
}
.position-a {
position: absolute;
}
#wrapper {
position: relative;
height: 100%;
padding-top: 50px;
min-width: 960px;
}
.@{ns}main {
position: relative;
height: 100%;
background: #e5ecf2;
overflow: hidden;
> .main-content {
height: 100%;
margin-left: 50px;
padding: 20px;
overflow-x: hidden;
overflow-y: auto;
.transition(margin .3s ease-out 0s);
&.mini {
margin-left: 190px;
}
}
&.mini-menu {
> .main-content {
margin-left: 50px !important;
}
.M_navigation .sub-nav {
width: 0px !important;
}
}
.section-block {
background: #fff;
box-shadow: 0 0 10px rgba(41, 109, 236, .2);
> .section-head {
padding: 20px;
> .title {
height: 16px;
padding-left: 10px;
border-left: 2px solid #333;
font-size: 14px;
line-height: 16px;
font-weight: bold;
color: #333;
}
}
> .section-body {
padding: 0 20px 20px;
}
+ .section-block {
margin-top: 20px;
}
}
}
.ajax-input-coat {
position: relative;
> .list {
position: absolute;
top: 100%;
left: 0;
width: 100%;
max-height: 250px;
margin-top: -2px;
background: #fff;
border: 1px solid #ccc;
overflow-x: hidden;
overflow-y: auto;
z-index: 99999;
> li {
padding: 0 12px;
cursor: pointer;
color: #666;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
line-height: 36px;
&.hover {
background: #f5f5f5;
color: #00a918;
}
}
}
}
*:before,
*:after {
.box-sizing(border-box);
}
main {
display: block;
}
[hidden] {
display: none;
}
// 定义头部
h1 {
font-size: @f-size + 0.1;
font-size: 15px\9;
}
h2 {
font-size: @f-size - 0.1;
font-size: 13px\9;
}
// 定义列表
ul {
list-style: outside none none;
margin: @s-none;
padding: @s-none;
}
ul > li > ul,
ul > li > ol,
ol > li > ol,
ol > li > ul {
margin: 8px/2 0;
}
//左右宽度100%
.fill {
width: 100%;
}
//信息报错或为空
.shift {
text-align: center;
padding: @s-sm;
/*background: darken(@bg-gray, 5%);*/
margin-bottom: @s-sm;
}
.list-none {
padding: @s-xl;
text-align: center;
}
//文字浮动
.pull-left {
float: left;
}
.pull-right {
float: right;
}
//闪停效果
.tips {
background: @bg-blue;
padding: 15px;
color: @c-gray-dark;
> a {
color: #c4c4c4;
}
}
//错误提示
.error {
color: @c-red;
margin-left: 10px;
&:before {
content: "\e6e9";
margin-right: 5px;
font-size: 18px;
position: relative;
top: 1px;
font-weight: 700;
.iconfont();
}
}
//背景颜色定义
.bg-white { background-color: @bg-white; }
.bg-global { background-color: @bg-global; }
.bg-gray { background-color: @bg-gray; }
.bg-gray-light { background-color: @bg-gray-light}
.bg-white { background-color: @bg-white; }
.bg-blue { background-color: @bg-blue; }
.bg-black-blue { background-color: @bg-black-blue; }
.bg-black-green { background-color: @bg-black-green; }
.bg-blue-light { background-color: @bg-blue-light; }
.bg-blue-dark { background-color: @bg-blue-dark; }
.bg-red { background-color: @bg-red; }
.bg-none { background-color: @bg-none; }
.bg-tran { background-color: @bg-transparent; }
//定义字体
.f-normal { font-size: @f-size}
.f-xs { font-size: @f-size-xs; }
.f-sm { font-size: @f-size-sm; }
.f-md { font-size: @f-size-md; }
.f-lg { font-size: @f-size-lg; }
.f-xl { font-size: @f-size-xl; }
.f-xxl { font-size: @f-size-xxl; }
.f-xxxl { font-size: @f-size-xxxl; }
.fw-blod { font-weight: blod; }
.fw-normal { font-weight: normal; }
.fs-blod { font-style: italic; }
.fs-normal { font-style: normal; }
//定义文字颜色
.c-gray { color: @c-gray !important; }
.c-gray-dark { color: @c-gray-dark !important; }
.c-gray-light { color: @c-gray-light !important; }
.c-gray-lighter { color: @c-gray-lighter !important; }
.c-white { color: @c-white !important; }
.c-black { color: @c-black !important; }
.c-red { color: #ff6868 !important; }
.c-red-light { color: @c-red-light !important; }
.c-red-lighter { color: @c-red-lighter !important; }
.c-red-dark { color: @c-red-dark !important; }
.c-blue { color: @c-blue !important; }
.c-blue-light { color: @c-blue-light !important; }
.c-yellow { color: @c-yellow !important; }
.c-black-yellow { color: @c-black-yellow !important; }
.c-green { color: #7ccb87 !important; }
.c-black-green { color: @c-black-green !important; }
.c-orange { color: @c-orange !important; }
// 定义间距边距
// ========================================================================
.m-none { margin: 0 !important; }
.m-normal { margin: @s-sm; }
.m-xs { margin: @s-xs; }
.m-lg { margin: @s-lg; }
.m-xl { margin: @s-xl; }
.m-xxl { margin: @s-xxl; }
.mt-normal { margin-top: @s-sm; }
.mt-xs { margin-top: @s-xs; }
.mt-lg { margin-top: @s-lg; }
.mt-xl { margin-top: @s-xl; }
.mt-xxl { margin-top: @s-xxl; }
.mr-normal { margin-right: @s-sm; }
.mr-xs { margin-right: @s-xs; }
.mr-lg { margin-right: @s-lg; }
.mr-xl { margin-right: @s-xl; }
.mr-xxl { margin-right: @s-xxl; }
.mb-normal { margin-bottom: @s-sm; }
.mb-xs { margin-bottom: @s-xs; }
.mb-lg { margin-bottom: @s-lg; }
.mb-xl { margin-bottom: @s-xl; }
.mb-xxl { margin-bottom: @s-xxl; }
.ml-normal { margin-left: @s-sm; }
.ml-xs { margin-left: @s-xs; }
.ml-lg { margin-left: @s-lg; }
.ml-xl { margin-left: @s-xl; }
.ml-xxl { margin-left: @s-xxl; }
.p-none { padding: 0 !important; }
.p-normal { padding: @s-sm; }
.p-xs { padding: @s-xs; }
.p-lg { padding: @s-lg; }
.p-xl { padding: @s-xl; }
.p-xxl { padding: @s-xxl; }
.pt-none { padding-top: 0 !important; }
.pt-normal { padding-top: @s-sm !important; }
.pt-xs { padding-top: @s-xs !important; }
.pt-lg { padding-top: @s-lg !important; }
.pt-xl { padding-top: @s-xl !important; }
.pt-xxl { padding-top: @s-xxl !important; }
.pr-none { padding-right: 0 !important; }
.pr-normal { padding-right: @s-sm !important; }
.pr-xs { padding-right: @s-xs !important; }
.pr-lg { padding-right: @s-lg !important; }
.pr-xl { padding-right: @s-xl !important; }
.pr-xxl { padding-right: @s-xxl !important; }
.pb-none { padding-bottom: 0 !important; }
.pb-normal { padding-bottom: @s-sm !important; }
.pb-xs { padding-bottom: @s-xs !important; }
.pb-lg { padding-bottom: @s-lg !important; }
.pb-xl { padding-bottom: @s-xl !important; }
.pb-xxl { padding-bottom: @s-xxl !important; }
.pl-none { padding-left: 0 !important; }
.pl-normal { padding-left: @s-sm !important; }
.pl-xs { padding-left: @s-xs !important; }
.pl-lg { padding-left: @s-lg !important; }
.pl-xl { padding-left: @s-xl !important; }
.pl-xxl { padding-left: @s-xxl !important; }
.top-none { top: 0 !important; }
//定义滚动条
.scroll-y { overflow-y:scroll; }
.scroll-x { overflow-y:scroll; }
.scroll { overflow:scroll; }
.scroll-none { overflow: none; }
//定义对齐方式
.ta-center { text-align: center !important; }
.ta-left { text-align: left !important; }
.ta-right { text-align: right !important; }
.va-middle { vertical-align: middle; }
.va-top { vertical-align: top; }
.va-bottom { vertical-align: bottom; }
//定义显隐
.block { display: block !important;}
.none { display: none !important;}
.inline { display: inline !important;}
.inblock { display: inline-block !important;}
//定义链接
a {
text-decoration: none;
cursor: pointer;
&:active,
&:hover,
&:focus {
outline: none;
}
.link-color-setting(@c-blue-light, darken(@c-blue-light, 10%));
&.l-red {
.link-color-setting(@c-red-light, darken(@c-red-light, 10%));
}
&.l-blue {
.link-color-setting(@c-blue-light, darken(@c-blue-light, 10%));
}
&.l-gray {
.link-color-setting(@c-gray-light, darken(@c-gray-light, 10%));
}
&.l-yellow {
.link-color-setting(@c-yellow, darken(@c-yellow, 10%));
}
}
// 其它公用样式
#@{ns}main {
z-index: @z-main;
padding-top: @s-xxl;
padding-bottom: @s-xl;
}
img {
box-sizing: border-box;
max-width: 100%;
height: auto;
vertical-align: middle;
border: none;
}
.contact-modal {
padding: @s-xl;
text-align: center;
height: 160px;
.name {
font-size: @f-size-sm;
font-size: 16px\9;
color: @c-gray;
margin-bottom: 15px;
}
.close {
position: absolute;
right: 0;
top: 0;
font-size: 0;
cursor: pointer;
padding: 5px;
&:after {
content: "\e611";
font-size: 3rem;
font-size: 30px\9;
padding: 0px 10px;
padding-top: 13px\9;
display: inline-block;
.iconfont();
}
}
.notice {
font-size: @f-size-sm;
font-size: 16px\9;
color: @c-gray;
padding-top: 10px;
.icon {
&:before {
font-size: 36px;
position: relative;
top: 8px;
margin-right: 10px;
color: @c-black-green;
}
}
}
.contact > .icon {
font-size: @f-size-sm;
font-size: 16px\9;
color: @c-gray;
margin: 0 40px;
&:before {
color: @c-white-blue;
font-size: 36px;
position: relative;
top: 2px;
left: -5px;
}
&.icon-phone {
&:before {
color: @c-blue-darker;
font-size: 42px;
position: relative;
top: 10px;
}
}
}
}
.progress {
max-width: 400px;
overflow: hidden;
height: 22px;
background-color: #eee;
.border-radius(4PX);
border: none;
position: relative;
&.inline-show {
width: 200px;
display: inline-block;
vertical-align: middle;
}
> .bar {
width: 0%;
height: 100%;
padding: 2px 14px;
padding-left: 0;
padding-right: 0;
color: #ffffff;
float: left;
font-size: 12px;
text-align: center;
text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25);
background-color: #43cd6e;
}
}
[type="file"] {
.opacity(0);
}
//文字溢出变...
.overflow-dot {
white-space:nowrap;
text-overflow:ellipsis;
-o-text-overflow:ellipsis;
overflow:hidden;
}
//禁止选中
.user-no-select {
.user-select(none);
}
.fade-in-up {
.animation(fadeInUp 0.5s 0.2s ease both);
}
.fade-in-down {
animation: fadeInDown 0.5s 0.2s ease both;
}
.alertModal {
position: fixed;
width: 100%;
height: 100%;
left: 0;
top: 0;
z-index: 9999;
.frame {
position: fixed;
left: 50%;
top: 50%;
width: 440px;
background: #555555;
box-shadow: 0px 8px 13px rgba(0, 0, 0, 0.39);
margin-left: -220px;
margin-top: -90px;
padding: 10px;
text-align: center;
display: inline-block;
.message {
color: #fff;
padding: 35px;
padding-bottom: 15px;
font-size: 16px;
display: inline-block;
}
a.done {
background: #00cdcb;
padding: 8px 40px;
color: #fff;
font-size: 16px;
display: inline-block;
margin: 25px 5px;
}
a.cancel {
background: #6a6a6a;
padding: 8px 40px;
color: #fff;
font-size: 16px;
display: inline-block;
margin: 25px 5px;
}
a.close {
position: absolute;
right: 10px;
top: 10px;
width: 31px;
height: 31px;
overflow: hidden;
&:before {
font-size: 36px;
color: #999;
position: relative;
left: -2px;
top: -9px;
}
}
}
}
.tab-block-head {
position: relative;
height: 43px;
padding-top: 0 !important;
padding-bottom: 0 !important;
background: url(/static/image/sideLine.png) 0 bottom repeat-x;
overflow-x: hidden;
a {
position: relative;
display: inline-block;
max-width: 120px;
min-width: 100px;
height: 100%;
padding: 8px 0 0;
line-height: 30px;
color: #999;
font-weight: bold;
+ a {
margin-left: 20px;
}
> span {
display: inline-block;
position: relative;
z-index: 1;
max-width: 100%;
padding: 0 10px;
text-align: left;
word-break: keep-all;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
&.active {
cursor: default;
color: #333;
> span {
&:before {
position: absolute;
top: 50%;
left: 0;
z-index: 2;
width: 0;
height: 14px;
margin-top: -7px;
border-left: 2px solid #333;
content: '';
}
}
&:after {
position: absolute;
bottom: 0;
left: 50%;
width: 205px;
height: 50px;
margin-left: -108px;
background: url(/static/image/tab-check.png) center bottom no-repeat;
content: '';
}
}
&:first-child {
&.active:after {
background-image: url(/static/image/tab-check-first.png);
}
}
}
}
.loading-animation {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(255, 255, 255, .7);
.box {
position: absolute;
top: 50%;
left: 50%;
width: 150px;
height: 20px;
margin-top: -15px;
margin-left: -75px;
text-align: center;
> span,
&:before,
&:after {
width: 20px;
height: 20px;
margin: 0 5px;
background-color: #296dec;
border-radius: 100%;
display: inline-block;
-webkit-animation: bouncedelay 1.4s infinite ease-in-out;
animation: bouncedelay 1.4s infinite ease-in-out;
-webkit-animation-fill-mode: both;
animation-fill-mode: both;
content: '';
}
&:before {
-webkit-animation-delay: -0.32s;
animation-delay: -0.32s;
}
> span {
-webkit-animation-delay: -0.16s;
animation-delay: -0.16s;
}
}
}
@-webkit-keyframes bouncedelay {
0%, 80%, 100% { -webkit-transform: scale(0.0) }
40% { -webkit-transform: scale(1.0) }
}
@keyframes bouncedelay {
0%, 80%, 100% {
transform: scale(0.0);
-webkit-transform: scale(0.0);
} 40% {
transform: scale(1.0);
-webkit-transform: scale(1.0);
}
}