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); } }