/*圆角*/ /*阴影*/ /*字体*/ /*动画属性*/ /*清楚浮动*/ /*2.1 栅格系统 Name: style_span Example:
……
……
Explain: 栅格系统 */ /*2.1 响应式栅格系统*/ .container { padding-right: 15px; padding-left: 15px; margin-right: auto; margin-left: auto; } .container-fluid { padding-right: 15px; padding-left: 15px; margin-right: auto; margin-left: auto; } @media (min-width: 992px) { .container { width: 960px; } } @media (min-width: 1200px) { .container { width: 1170px; } } @media (min-width: 1300px) { .container { width: 1270px; } } @media print { .container { width: auto; } } .row { box-sizing: border-box; margin-left: -15px; margin-right: -15px; } .col-1, .col-2, .col-3, .col-4, .col-5, .col-6, .col-7, .col-8, .col-9, .col-10, .col-11, .col-12, .col-xs-1, .col-sm-1, .col-md-1, .col-lg-1, .col-xs-2, .col-sm-2, .col-md-2, .col-lg-2, .col-xs-3, .col-sm-3, .col-md-3, .col-lg-3, .col-xs-4, .col-sm-4, .col-md-4, .col-lg-4, .col-xs-5, .col-sm-5, .col-md-5, .col-lg-5, .col-xs-6, .col-sm-6, .col-md-6, .col-lg-6, .col-xs-7, .col-sm-7, .col-md-7, .col-lg-7, .col-xs-8, .col-sm-8, .col-md-8, .col-lg-8, .col-xs-9, .col-sm-9, .col-md-9, .col-lg-9, .col-xs-10, .col-sm-10, .col-md-10, .col-lg-10, .col-xs-11, .col-sm-11, .col-md-11, .col-lg-11, .col-xs-12, .col-sm-12, .col-md-12, .col-lg-12 { min-height: 1px; position: relative; padding-left: 15px; padding-right: 15px; box-sizing: border-box; -webkit-transition: all 0.3s ease-in; -moz-transition: all 0.3s ease-in; -o-transition: all 0.3s ease-in; transition: all 0.3s ease-in; } .col-1 { width: 8.33333%; } .col-2 { width: 16.66667%; } .col-3 { width: 25%; } .col-4 { width: 33.33333%; } .col-5 { width: 41.66667%; } .col-6 { width: 50%; } .col-7 { width: 58.33333%; } .col-8 { width: 66.66667%; } .col-9 { width: 75%; } .col-10 { width: 83.33333%; } .col-11 { width: 91.66667%; } .col-12 { width: 100%; } .col-offset-0 { margin-left: 0; } .col-offset-1 { margin-left: 8.33333%; } .col-offset-2 { margin-left: 16.66667%; } .col-offset-3 { margin-left: 25%; } .col-offset-4 { margin-left: 33.33333%; } .col-offset-5 { margin-left: 41.66667%; } .col-offset-6 { margin-left: 50%; } .col-offset-7 { margin-left: 58.33333%; } .col-offset-8 { margin-left: 66.66667%; } .col-offset-9 { margin-left: 75%; } .col-offset-10 { margin-left: 83.33333%; } .col-offset-11 { margin-left: 91.66667%; } .col-push-0 { position: relative; left: 0; right: auto; } .col-pull-0 { right: 0; left: auto; } .col-push-1 { left: 8.33333%; right: auto; } .col-pull-1 { right: 8.33333%; left: auto; } .col-push-2 { left: 16.66667%; right: auto; } .col-pull-2 { right: 16.66667%; left: auto; } .col-push-3 { left: 25%; right: auto; } .col-pull-3 { right: 25%; left: auto; } .col-push-4 { left: 33.33333%; right: auto; } .col-pull-4 { right: 33.33333%; left: auto; } .col-push-5 { left: 41.66667%; right: auto; } .col-pull-5 { right: 41.66667%; left: auto; } .col-push-6 { left: 50%; right: auto; } .col-pull-6 { right: 50%; left: auto; } .col-push-7 { left: 58.33333%; right: auto; } .col-pull-7 { right: 58.33333%; left: auto; } .col-push-8 { left: 66.66667%; right: auto; } .col-pull-8 { right: 66.66667%; left: auto; } .col-push-9 { left: 75%; right: auto; } .col-pull-9 { right: 75%; left: auto; } .col-push-10 { left: 83.33333%; right: auto; } .col-pull-10 { right: 83.33333%; left: auto; } .col-push-11 { left: 91.66667%; right: auto; } .col-pull-11 { right: 91.66667%; left: auto; } /*局部模块平分*/ .col-1-1 { width: 100%; } .col-2-1 { width: 50%; } .col-3-1 { width: 33.333333%; } .col-3-2 { width: 66.666667%; } .col-4-1 { width: 25%; } .col-4-3 { width: 75%; } .col-5-1 { width: 20%; } .col-5-2 { width: 40%; } .col-5-3 { width: 60%; } .col-5-4 { width: 80%; } .col-6-1 { width: 16.666667%; } .col-6-5 { width: 83.333333%; } .col-xs-1, .col-xs-2, .col-xs-3, .col-xs-4, .col-xs-5, .col-xs-6, .col-xs-7, .col-xs-8, .col-xs-9, .col-xs-10, .col-xs-11, .col-xs-12 { float: left; } .col-xs-12 { width: 100%; } .col-xs-11 { width: 91.66666667%; } .col-xs-10 { width: 83.33333333%; } .col-xs-9 { width: 75%; } .col-xs-8 { width: 66.66666667%; } .col-xs-7 { width: 58.33333333%; } .col-xs-6 { width: 50%; } .col-xs-5 { width: 41.66666667%; } .col-xs-4 { width: 33.33333333%; } .col-xs-3 { width: 25%; } .col-xs-2 { width: 16.66666667%; } .col-xs-1 { width: 8.33333333%; } .col-xs-pull-12 { right: 100%; } .col-xs-pull-11 { right: 91.66666667%; } .col-xs-pull-10 { right: 83.33333333%; } .col-xs-pull-9 { right: 75%; } .col-xs-pull-8 { right: 66.66666667%; } .col-xs-pull-7 { right: 58.33333333%; } .col-xs-pull-6 { right: 50%; } .col-xs-pull-5 { right: 41.66666667%; } .col-xs-pull-4 { right: 33.33333333%; } .col-xs-pull-3 { right: 25%; } .col-xs-pull-2 { right: 16.66666667%; } .col-xs-pull-1 { right: 8.33333333%; } .col-xs-pull-0 { right: auto; } .col-xs-push-12 { left: 100%; } .col-xs-push-11 { left: 91.66666667%; } .col-xs-push-10 { left: 83.33333333%; } .col-xs-push-9 { left: 75%; } .col-xs-push-8 { left: 66.66666667%; } .col-xs-push-7 { left: 58.33333333%; } .col-xs-push-6 { left: 50%; } .col-xs-push-5 { left: 41.66666667%; } .col-xs-push-4 { left: 33.33333333%; } .col-xs-push-3 { left: 25%; } .col-xs-push-2 { left: 16.66666667%; } .col-xs-push-1 { left: 8.33333333%; } .col-xs-push-0 { left: auto; } .col-xs-offset-12 { margin-left: 100%; } .col-xs-offset-11 { margin-left: 91.66666667%; } .col-xs-offset-10 { margin-left: 83.33333333%; } .col-xs-offset-9 { margin-left: 75%; } .col-xs-offset-8 { margin-left: 66.66666667%; } .col-xs-offset-7 { margin-left: 58.33333333%; } .col-xs-offset-6 { margin-left: 50%; } .col-xs-offset-5 { margin-left: 41.66666667%; } .col-xs-offset-4 { margin-left: 33.33333333%; } .col-xs-offset-3 { margin-left: 25%; } .col-xs-offset-2 { margin-left: 16.66666667%; } .col-xs-offset-1 { margin-left: 8.33333333%; } .col-xs-offset-0 { margin-left: 0; } @media (max-width: 767px) { .responsive [class^="col-"], .responsive [class*=" col-"] { float: none!important; width: auto !important; } .responsive [class^="col-offset-"], .responsive [class*=" col-offset-"] { margin-left: 0px !important; } } @media (min-width: 768px) { .col-sm-1, .col-sm-10, .col-sm-11, .col-sm-12, .col-sm-2, .col-sm-3, .col-sm-4, .col-sm-5, .col-sm-6, .col-sm-7, .col-sm-8, .col-sm-9 { float: left; } .col-sm-12 { width: 100%; } .col-sm-11 { width: 91.66666667%; } .col-sm-10 { width: 83.33333333%; } .col-sm-9 { width: 75%; } .col-sm-8 { width: 66.66666667%; } .col-sm-7 { width: 58.33333333%; } .col-sm-6 { width: 50%; } .col-sm-5 { width: 41.66666667%; } .col-sm-4 { width: 33.33333333%; } .col-sm-3 { width: 25%; } .col-sm-2 { width: 16.66666667%; } .col-sm-1 { width: 8.33333333%; } .col-sm-pull-12 { right: 100%; } .col-sm-pull-11 { right: 91.66666667%; } .col-sm-pull-10 { right: 83.33333333%; } .col-sm-pull-9 { right: 75%; } .col-sm-pull-8 { right: 66.66666667%; } .col-sm-pull-7 { right: 58.33333333%; } .col-sm-pull-6 { right: 50%; } .col-sm-pull-5 { right: 41.66666667%; } .col-sm-pull-4 { right: 33.33333333%; } .col-sm-pull-3 { right: 25%; } .col-sm-pull-2 { right: 16.66666667%; } .col-sm-pull-1 { right: 8.33333333%; } .col-sm-pull-0 { right: 0; } .col-sm-push-12 { left: 100%; } .col-sm-push-11 { left: 91.66666667%; } .col-sm-push-10 { left: 83.33333333%; } .col-sm-push-9 { left: 75%; } .col-sm-push-8 { left: 66.66666667%; } .col-sm-push-7 { left: 58.33333333%; } .col-sm-push-6 { left: 50%; } .col-sm-push-5 { left: 41.66666667%; } .col-sm-push-4 { left: 33.33333333%; } .col-sm-push-3 { left: 25%; } .col-sm-push-2 { left: 16.66666667%; } .col-sm-push-1 { left: 8.33333333%; } .col-sm-push-0 { left: 0; } .col-sm-offset-12 { margin-left: 100%; } .col-sm-offset-11 { margin-left: 91.66666667%; } .col-sm-offset-10 { margin-left: 83.33333333%; } .col-sm-offset-9 { margin-left: 75%; } .col-sm-offset-8 { margin-left: 66.66666667%; } .col-sm-offset-7 { margin-left: 58.33333333%; } .col-sm-offset-6 { margin-left: 50%; } .col-sm-offset-5 { margin-left: 41.66666667%; } .col-sm-offset-4 { margin-left: 33.33333333%; } .col-sm-offset-3 { margin-left: 25%; } .col-sm-offset-2 { margin-left: 16.66666667%; } .col-sm-offset-1 { margin-left: 8.33333333%; } .col-sm-offset-0 { margin-left: 0; } } @media (min-width: 992px) { .col-md-1, .col-md-10, .col-md-11, .col-md-12, .col-md-2, .col-md-3, .col-md-4, .col-md-5, .col-md-6, .col-md-7, .col-md-8, .col-md-9 { float: left; } .col-md-12 { width: 100%; } .col-md-11 { width: 91.66666667%; } .col-md-10 { width: 83.33333333%; } .col-md-9 { width: 75%; } .col-md-8 { width: 66.66666667%; } .col-md-7 { width: 58.33333333%; } .col-md-6 { width: 50%; } .col-md-5 { width: 41.66666667%; } .col-md-4 { width: 33.33333333%; } .col-md-3 { width: 25%; } .col-md-2 { width: 16.66666667%; } .col-md-1 { width: 8.33333333%; } .col-md-pull-12 { right: 100%; } .col-md-pull-11 { right: 91.66666667%; } .col-md-pull-10 { right: 83.33333333%; } .col-md-pull-9 { right: 75%; } .col-md-pull-8 { right: 66.66666667%; } .col-md-pull-7 { right: 58.33333333%; } .col-md-pull-6 { right: 50%; } .col-md-pull-5 { right: 41.66666667%; } .col-md-pull-4 { right: 33.33333333%; } .col-md-pull-3 { right: 25%; } .col-md-pull-2 { right: 16.66666667%; } .col-md-pull-1 { right: 8.33333333%; } .col-md-pull-0 { right: 0; } .col-md-push-12 { left: 100%; } .col-md-push-11 { left: 91.66666667%; } .col-md-push-10 { left: 83.33333333%; } .col-md-push-9 { left: 75%; } .col-md-push-8 { left: 66.66666667%; } .col-md-push-7 { left: 58.33333333%; } .col-md-push-6 { left: 50%; } .col-md-push-5 { left: 41.66666667%; } .col-md-push-4 { left: 33.33333333%; } .col-md-push-3 { left: 25%; } .col-md-push-2 { left: 16.66666667%; } .col-md-push-1 { left: 8.33333333%; } .col-md-push-0 { left: 0; } .col-md-offset-12 { margin-left: 100%; } .col-md-offset-11 { margin-left: 91.66666667%; } .col-md-offset-10 { margin-left: 83.33333333%; } .col-md-offset-9 { margin-left: 75%; } .col-md-offset-8 { margin-left: 66.66666667%; } .col-md-offset-7 { margin-left: 58.33333333%; } .col-md-offset-6 { margin-left: 50%; } .col-md-offset-5 { margin-left: 41.66666667%; } .col-md-offset-4 { margin-left: 33.33333333%; } .col-md-offset-3 { margin-left: 25%; } .col-md-offset-2 { margin-left: 16.66666667%; } .col-md-offset-1 { margin-left: 8.33333333%; } .col-md-offset-0 { margin-left: 0; } } @media (min-width: 1200px) { .col-lg-1, .col-lg-10, .col-lg-11, .col-lg-12, .col-lg-2, .col-lg-3, .col-lg-4, .col-lg-5, .col-lg-6, .col-lg-7, .col-lg-8, .col-lg-9 { float: left; } .col-lg-12 { width: 100%; } .col-lg-11 { width: 91.66666667%; } .col-lg-10 { width: 83.33333333%; } .col-lg-9 { width: 75%; } .col-lg-8 { width: 66.66666667%; } .col-lg-7 { width: 58.33333333%; } .col-lg-6 { width: 50%; } .col-lg-5 { width: 41.66666667%; } .col-lg-4 { width: 33.33333333%; } .col-lg-3 { width: 25%; } .col-lg-2 { width: 16.66666667%; } .col-lg-1 { width: 8.33333333%; } .col-lg-pull-12 { right: 100%; } .col-lg-pull-11 { right: 91.66666667%; } .col-lg-pull-10 { right: 83.33333333%; } .col-lg-pull-9 { right: 75%; } .col-lg-pull-8 { right: 66.66666667%; } .col-lg-pull-7 { right: 58.33333333%; } .col-lg-pull-6 { right: 50%; } .col-lg-pull-5 { right: 41.66666667%; } .col-lg-pull-4 { right: 33.33333333%; } .col-lg-pull-3 { right: 25%; } .col-lg-pull-2 { right: 16.66666667%; } .col-lg-pull-1 { right: 8.33333333%; } .col-lg-pull-0 { right: 0; } .col-lg-push-12 { left: 100%; } .col-lg-push-11 { left: 91.66666667%; } .col-lg-push-10 { left: 83.33333333%; } .col-lg-push-9 { left: 75%; } .col-lg-push-8 { left: 66.66666667%; } .col-lg-push-7 { left: 58.33333333%; } .col-lg-push-6 { left: 50%; } .col-lg-push-5 { left: 41.66666667%; } .col-lg-push-4 { left: 33.33333333%; } .col-lg-push-3 { left: 25%; } .col-lg-push-2 { left: 16.66666667%; } .col-lg-push-1 { left: 8.33333333%; } .col-lg-push-0 { left: 0; } .col-lg-offset-12 { margin-left: 100%; } .col-lg-offset-11 { margin-left: 91.66666667%; } .col-lg-offset-10 { margin-left: 83.33333333%; } .col-lg-offset-9 { margin-left: 75%; } .col-lg-offset-8 { margin-left: 66.66666667%; } .col-lg-offset-7 { margin-left: 58.33333333%; } .col-lg-offset-6 { margin-left: 50%; } .col-lg-offset-5 { margin-left: 41.66666667%; } .col-lg-offset-4 { margin-left: 33.33333333%; } .col-lg-offset-3 { margin-left: 25%; } .col-lg-offset-2 { margin-left: 16.66666667%; } .col-lg-offset-1 { margin-left: 8.33333333%; } .col-lg-offset-0 { margin-left: 0; } } /*2.2 响应式隐藏显示 Name: style_Layout Explain: 左右两栏|左中右三栏|上中下 Last Modify: guojunhui */ .visible-xs, .visible-sm, .visible-md, .visible-lg, .visible-xs-block, .visible-xs-inline, .visible-xs-inline-block, .visible-sm-block, .visible-sm-inline, .visible-sm-inline-block, .visible-md-block, .visible-md-inline, .visible-md-inline-block, .visible-lg-block, .visible-lg-inline, .visible-lg-inline-block { display: none !important; } @media (max-width: 767px) { .visible-xs { display: block !important; } table.visible-xs { display: table; } tr.visible-xs { display: table-row !important; } th.visible-xs, td.visible-xs { display: table-cell !important; } .hidden-xs { display: none !important; } .visible-xs-block { display: block !important; } .visible-xs-inline { display: inline !important; } .visible-xs-inline-block { display: inline-block !important; } } @media (min-width: 768px) and (max-width: 991px) { .visible-sm { display: block !important; } table.visible-sm { display: table; } tr.visible-sm { display: table-row !important; } th.visible-sm, td.visible-sm { display: table-cell !important; } .hidden-sm { display: none !important; } .visible-sm-block { display: block !important; } .visible-sm-inline { display: inline !important; } .visible-sm-inline-block { display: inline-block !important; } } @media (min-width: 992px) and (max-width: 1199px) { .visible-md { display: block !important; } table.visible-md { display: table; } tr.visible-md { display: table-row !important; } th.visible-md, td.visible-md { display: table-cell !important; } .hidden-md { display: none !important; } .visible-md-block { display: block !important; } .visible-md-inline { display: inline !important; } .visible-md-inline-block { display: inline-block !important; } } @media (min-width: 1200px) { .visible-lg { display: block !important; } table.visible-lg { display: table; } tr.visible-lg { display: table-row !important; } th.visible-lg, td.visible-lg { display: table-cell !important; } .hidden-lg { display: none !important; } .visible-lg-block { display: block !important; } .visible-lg-inline { display: inline !important; } .visible-lg-inline-block { display: inline-block !important; } } .visible-print { display: none !important; } .visible-print-block { display: none !important; } .visible-print-inline { display: none !important; } .visible-print-inline-block { display: none !important; } @media print { .visible-print { display: block !important; } table.visible-print { display: table; } tr.visible-print { display: table-row !important; } th.visible-print, td.visible-print { display: table-cell !important; } .visible-print-block { display: block !important; } .visible-print-inline { display: inline !important; } .visible-print-inline-block { display: inline-block !important; } .hidden-print { display: none !important; } } .panel { background-color: #fff; border: solid 1px transparent; } .panel-header { border-bottom: solid 1px transparent; padding: 8px 15px; font-size: 14px; font-weight: 700; } /*面板标题*/ .panel-body { padding: 15px; } /*面板内容*/ .panel-footer { background-color: #f5f5f5; border-top: 1px solid #ddd; padding: 5px 20px; } /*面板页脚*/ /*默认面板*/ .panel-default { border-color: #dddddd; } .panel-default > .panel-header { border-color: #ddd; background-color: #f5f5f5; color: #444444; } /*主要面板*/ .panel-primary { border-color: #5a98de; } .panel-primary > .panel-header { border-color: #5a98de; background-color: #5a98de; color: #ffffff; } /*次要面板*/ .panel-secondary { border-color: #3bb4f2; } .panel-secondary > .panel-header { border-color: #3bb4f2; background-color: #3bb4f2; color: #ffffff; } /*成功面板*/ .panel-success { border-color: #5eb95e; } .panel-success > .panel-header { border-color: #5eb95e; background-color: #5eb95e; color: #ffffff; } /*警告面板*/ .panel-warning { border-color: #f37b1d; } .panel-warning > .panel-header { border-color: #f37b1d; background-color: #f37b1d; color: #ffffff; } /*危险面板*/ .panel-danger { border-color: #dd514c; } .panel-danger > .panel-header { border-color: #dd514c; background-color: #dd514c; color: #ffffff; } .f-l { float: left; } .f-r { float: right; } @font-face { font-family: 'iconfont'; src: url('../fonts//iconfont.eot'); src: url('../fonts//iconfont.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */ url('../fonts//iconfont.woff') format('woff'), /* Modern Browsers */ url('../fonts//iconfont.ttf') format('truetype'), /* Safari, Android, iOS */ url('../fonts//iconfont.svg#svgFontName') format('svg'); /* IE9 Compat Modes */ /* Legacy iOS */ } @font-face { font-family: 'iconfont'; src: url('../fonts_2//iconfont.eot'); src: url('../fonts_2//iconfont.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */ url('../fonts_2//iconfont.woff') format('woff'), /* Modern Browsers */ url('../fonts_2//iconfont.ttf') format('truetype'), /* Safari, Android, iOS */ url('../fonts_2//iconfont.svg#svgFontName') format('svg'); /* IE9 Compat Modes */ /* Legacy iOS */ } .iconfont { font-family: "iconfont" !important; font-size: 16px; font-style: normal; -webkit-font-smoothing: antialiased; -webkit-text-stroke-width: 0.2px; -moz-osx-font-smoothing: grayscale; } .panel-default { border-color: #ebeaea; } .panel-default .panel-header { border-color: transparent; background-color: #fff; color: #555555; } .panel-header { border-bottom: solid 1px transparent; padding: 8px 15px; font-size: 16px; font-weight: normal; } .layui-form-select dl dd.layui-this { background: #f2f2f2; color: #333; } .layui-btn-primary:hover { border-color: #00b5f9; color: #333; } .layui-tab-bar { position: absolute; right: 3px; top: 3px; z-index: 10; width: 30px; height: 30px; line-height: 30px; border: 1px solid #e2e2e2; border-radius: 2px; background-color: #fff; } .layui-elem-quote { border-left: 5px solid #00b5f9; } /*清楚浮动*/ .clearfix { zoom: 1; } .clearfix:after { display: block; content: ''; clear: both; } .layui-nav-no-bg { background: transparent; width: auto; } .layui-nav-no-bg.layui-nav-tree .layui-nav-item a:hover { background-color: transparent; color: #00b5f9; } .layui-nav-no-bg.layui-nav .layui-nav-item a { color: #333; } .layui-nav-no-bg .layui-nav-itemed > a, .layui-nav-no-bg .layui-nav-tree .layui-nav-title a, .layui-nav-no-bg .layui-nav-tree .layui-nav-title a:hover { background: transparent!important; color: #333!important; } .layui-nav-no-bg.layui-nav-tree .layui-nav-child a { height: 40px; line-height: 40px; text-indent: 10px; color: #666; } .layui-nav-no-bg.layui-nav-tree .layui-nav-child dd.layui-this, .layui-nav-no-bg.layui-nav-tree .layui-this, .layui-nav-no-bg.layui-nav-tree .layui-this > a:hover { background-color: #fff; color: #00b5f9; } .layui-nav-no-bg.layui-nav-tree .layui-this > a { background-color: #fff; color: #00b5f9; border-left: 3px solid #00b5f9; margin-right: -20px; } .layui-nav-no-bg .layui-nav-bar { display: none; } .showSubBtn { width: 16px; height: 16px; line-height: 16px; margin-left: 5px; } .commentList .item { list-style: none outside none; margin: 1.6rem 0 0; } .commentList .avatar { border: 1px solid transparent; float: left; } .comment-main { position: relative; margin-left: 64px; border: 1px solid #dedede; border-radius: 2px; } .comment-main:after, .comment-main:before { position: absolute; top: 11px; left: -16px; right: 100%; width: 0; height: 0; display: block; content: " "; border-color: transparent; border-style: solid solid outset; pointer-events: none; } .comment-main:before { border-right-color: #dedede; border-width: 8px; } .comment-main:after { border-width: 7px; border-right-color: #f8f8f8; margin-top: 1px; margin-left: 2px; } .comment-header { padding: 10px 15px; background: #f8f8f8; border-bottom: 1px solid #eee; } .comment-title { margin: 0 0 8px; font-size: 1.6rem; line-height: 1.2; } .comment-meta { font-size: 13px; color: #999; line-height: 1.2; } .comment-meta a { color: #999; } .comment-author { font-weight: 700; color: #999; } .comment-body { padding: 15px; overflow: hidden; } .comment-body > :last-child { margin-bottom: 0; } .commentList .comment-flip .avatar { float: right; } .comment-flip .comment-main { margin-left: 0; margin-right: 64px; } .comment-flip .comment-main:before { border-left-color: #dedede; border-right-color: transparent; } .comment-flip .comment-main:after, .comment-flip .comment-main:before { left: 100%; position: absolute; right: -16px; } .comment-flip .comment-main:after { border-left-color: #f8f8f8; border-right-color: transparent; margin-left: auto; margin-right: 2px; } /*3.6.3 头像 Name: mod_avatar Example: */ .avatar { display: inline-block; position: relative; overflow: hidden; } .avatar img { display: block; } .avatar.radius, .avatar.radius img { border-radius: 50%; } .avatar, .avatar img { width: 32px; height: 32px; } .avatar.size-MINI { width: 16px; height: 16px; } .avatar.size-S, .avatar.size-S img { width: 24px; height: 24px; } .avatar.size-M, .avatar.size-M img { width: 32px; height: 32px; } /*默认为中,可以不写,可以理解为:均码*/ .avatar.size-L, .avatar.size-L img { width: 40px; height: 40px; } .avatar.size-XL, .avatar.size-XL img { width: 64px; height: 64px; } .avatar.size-XXL, .avatar.size-XXL img { width: 100px; height: 100px; } .avatar.size-XXXL, .avatar.size-XXXL img { width: 128px; height: 128px; } .page-wrap { text-align: center; } .pagination { display: inline-block; *display: inline; *zoom: 1; text-align: center; margin: 10px 0; font-size: 0; } .pagination li { position: relative; display: inline-block; *display: inline; *zoom: 1; border: 1px solid #e2e2e2; width: 28px; height: 28px; line-height: 28px; margin: 0 -1px 5px 0; background-color: #fff; color: #333; font-size: 12px; text-align: center; } .pagination li a { display: block; width: 100%; height: 100%; } .pagination li.active { border: 1px solid #1E9FFF; } .pagination li.active span { display: block; width: 100%; height: 100%; background-color: #1E9FFF; color: #fff; } .pagination li.disabled { background: #f2f2f2; } .main-layout { overflow: hidden; width: 100%; height: 100%; } .main-layout.hide-side .main-layout-side { left: -200px; } .main-layout.hide-side .main-layout-container { left: 0; } .main-layout-side { width: 200px; height: 100%; background: #444c63; position: absolute; left: 0; top: 0; bottom: 0; overflow: auto; z-index: 1; -webkit-transition: left 0.3s; -moz-transition: left 0.3s; -ms-transition: left 0.3s; transition: left 0.3s; } .main-layout-side .m-logo { width: 100%; height: 60px; padding-left: 15px; box-sizing: border-box; } .main-layout-side .layui-nav { background: #444c63; } .main-layout-side .layui-nav .iconfont { padding-right: 10px; font-size: 18px; color: #333333; position: relative; top: 2px; } /* .main-layout-side .layui-nav-itemed > a { background: #444c63 !important; } */ .main-layout-side .layui-nav-tree .layui-nav-child a { height: 40px; line-height: 40px; color: #77829f; } .main-layout-side .layui-nav-tree .layui-nav-child a:hover { color: #00b5f9; } .main-layout-side .layui-nav-tree .layui-nav-child a .l-line { width: 12px; display: inline-block; line-height: 40px; height: 40px; float: left; margin-right: 10px; margin-left: 30px; } .main-layout-side .layui-nav-tree .layui-nav-child dd.layui-this, .main-layout-side .layui-nav-tree .layui-this { background-color: #444c63; } .main-layout-side .layui-nav-tree .layui-nav-child .layui-this > a { background-color: #444c63; color: #00b5f9; } .main-layout-side .layui-nav-tree .layui-this > a { background-color: rgba(0, 181, 249, 0.8); color: #fff; } .main-layout-side .layui-nav-tree .layui-this > a .iconfont { color: #fff; } .main-layout-side .layui-nav-tree .layui-nav-bar { background-color: #12AD92; } .main-layout-container { position: absolute; left: 200px; right: 0; top: 0; bottom: 0; background: #EDEEF1; -webkit-transition: left 0.3s; -moz-transition: left 0.3s; -ms-transition: left 0.3s; transition: left 0.3s; } .main-layout-header { height: 60px; border-bottom: 1px solid #f0f0f0; background: #fff; } .main-layout-header a { text-decoration: none; } .main-layout-header .menu-btn { float: left; width: 60px; height: 60px; line-height: 60px; text-align: center; } .main-layout-header .menu-btn .iconfont { font-size: 20px; color: #444c63; } .main-layout-header .layui-nav { float: right; padding: 0; background: transparent; } /* .main-layout-header .layui-nav li { border-left: 1px solid #f2f3f5; } */ .main-layout-header .layui-nav li a{ color: #FFFFFF!important; } .main-layout-header .layui-nav li dd a{ color: #333333!important; } .main-layout-header .layui-nav .layui-nav-more { border-top-color: #FFFFFF; } .main-layout-header .layui-nav .layui-nav-mored,.main-layout-header .layui-nav-itemed>a .layui-nav-more { border-color: transparent transparent #fff; } .main-layout-header .layui-nav .layui-nav-item > a:hover { color: #999; } .main-layout-header .layui-nav > .layui-this a { color: #00b5f9; } .main-layout-header .layui-nav .layui-nav-bar { display: none; } .main-layout-header .layui-nav .layui-this:after { height: 0; } .main-layout-header .layui-nav .layui-nav-child dd.layui-this a { color: #333; } .main-layout-header .layui-nav .layui-nav-child dd.layui-this { color: #333; background: #f2f2f2; } .main-layout-body { position: absolute; left: 0; right: 0; bottom: 0; top: 61px; overflow: hidden; margin-left: 15px; } .main-layout-tab { margin-top: 0; } .main-layout-tab .layui-tab-title { border-bottom: 1px solid #f0f0f0; z-index: 98; background: #fff; } .main-layout-tab.layui-tab-brief > .layui-tab-title .layui-this { color: #12AD92; } .main-layout-tab.layui-tab-brief > .layui-tab-more li.layui-this:after, .main-layout-tab.layui-tab-brief > .layui-tab-title .layui-this:after { border: none; border-radius: 0; border-bottom: 3px solid #12AD92; } .main-layout-tab .welcome .layui-tab-close { display: none; } .main-layout-tab .layui-tab-content { position: absolute; right: 0; left: 0; bottom: 0; top: 41px; padding: 0; z-index: 97; background: #f5f5f5; padding: 0px; box-sizing: border-box; margin-top: 15px; } .main-layout-tab .layui-tab-content .layui-tab-item { width: 100%; height: 100%; background: #fff; } .wrap-container { width: 100%; height: 100%; overflow-x: hidden; overflow-y: auto; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; } .iframe { border: 0; } .main-mask { display: none; position: fixed; z-index: 99; left: 0; right: 0; top: 0; bottom: 0; background: rgba(0, 0, 0, 0.3); } @media (max-width: 768px) { .main-layout-side { position: fixed; left: -200px; overflow: auto; overflow-x: hidden; z-index: 100; } .main-layout-container { position: absolute; left: 0px; right: 0; top: 0; bottom: 0; } .main-layout.hide-side .main-layout-side { left: 0; } .main-layout.hide-side .main-mask { display: block; } ::-webkit-scrollbar { /* width: 2px; height: 10px; */ } } .email-wrap { -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; height: 100%; width: 100%; padding: 15px; background: #f5f5f5; overflow-x: hidden; overflow-y: auto; } .email-wrap .email-write-btn { width: 100%; } .email-wrap .email-folder { padding-top: 20px; } .email-wrap .email-folder dt { font-size: 14px; font-weight: bold; color: #333; line-height: 32px; } .email-wrap .email-folder dd { font-size: 12px; color: #545454; line-height: 32px; border-bottom: 1px solid #eee; } .email-wrap .email-folder dd button { margin-top: 4px; } .email-wrap .email-folder dd .iconfont, .email-wrap .email-folder dd .layui-icon { float: left; padding-right: 10px; font-size: 16px; } .email-wrap .email-classify { padding-top: 20px; } .email-wrap .email-classify dt { font-size: 14px; font-weight: bold; color: #333; line-height: 32px; } .email-wrap .email-classify dd { font-size: 12px; color: #545454; line-height: 32px; } .email-wrap .email-classify dd .iconfont, .email-wrap .email-classify dd .layui-icon { float: left; padding-right: 10px; font-size: 14px; } .email-wrap .email-classify dd .icon-blue { color: #01AAED; } .email-wrap .email-classify dd .icon-green { color: #009688; } .email-wrap .email-classify dd .icon-wran { color: #F7B824; } .email-wrap .email-classify dd .icon-red { color: #FF5722; } .email-wrap .email-classify dd .icon-gray { color: #2F4056; } .email-wrap .email-label { padding-top: 20px; padding-bottom: 20px; } .email-wrap .email-label dt { font-size: 14px; font-weight: bold; color: #333; line-height: 32px; } .email-wrap .email-label .layui-btn { margin-bottom: 10px; } .email-wrap .email-label .layui-btn + .layui-btn { margin-left: 0; margin-right: 0; } .email-wrap .email-content { -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; background: #fff; height: 100%; width: 100%; overflow: auto; padding: 15px; overflow: hidden; } .iframe-h { height: 100%; } .email-write { padding: 15px; } .email-write .layui-btn { margin-bottom: 10px; } .email-content-title { padding: 15px; } .email-content-title .write-title { font-size: 20px; } .email-tool-btn { margin-top: 3px; } .email-tool-btn .layui-form-item { margin: 0; } .email-tool-btn .layui-form-item .layui-inline { margin-bottom: 0; } .email-tool-btn .email-tool-btn-right { text-align: right; } .email-list { padding: 0 15px; } @media (max-width: 768px) { .email-wrap .email-content { padding: 0; } .email-write { padding: 15px; } .email-write .layui-btn { width: 100%; margin: 0 0 10px; } .email-tool-btn .email-tool-btn-right { text-align: left; } .email-tool-btn-left, .email-tool-btn-right { padding-bottom: 10px; } .email-tool-btn-left .layui-inline, .email-tool-btn-right .layui-inline { padding-bottom: 10px; } } .welcome-container { width: 100%; height: 100%; overflow: hidden; overflow-y: auto; -webkit-overflow-scrolling: touch; padding: 15px 0; } /***********welcome***********/ .welcome-left-container .data-show li { height: 95px; margin-bottom: 15px; } .welcome-left-container .data-show a { display: block; background: #fff; padding: 10px; border: 1px solid #ebeaea; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; } .welcome-left-container .data-show .icon-bg { width: 68px; height: 68px; text-align: center; -webkit-border-radius: 70px; -moz-border-radius: 70px; -ms-border-radius: 70px; border-radius: 70px; } .welcome-left-container .data-show .icon-bg .iconfont { color: #fff; font-size: 36px; position: relative; top: 15px; } .welcome-left-container .data-show .bg-org { background: #f8bb74; } .welcome-left-container .data-show .bg-blue { background: #86d2ee; } .welcome-left-container .data-show .bg-green { background: #94e0e1; } .welcome-left-container .data-show .right-text-con { padding-left: 78px; } .welcome-left-container .data-show p { margin: 0; color: #a0a8b4; } .welcome-left-container .data-show .color-org, .welcome-left-container .data-show .color-blue, .welcome-left-container .data-show .color-green { font-size: 28px; padding-right: 10px; font-family: "arial"; } .welcome-left-container .data-show .color-org { color: #f8bb74; } .welcome-left-container .data-show .color-blue { color: #86d2ee; } .welcome-left-container .data-show .color-green { color: #94e0e1; } .welcome-left-container .data-show .name { margin-bottom: 10px; font-size: 16px; color: #555555; } .welcome-left-container .chart-panel { margin: 0px 15px 15px; } .welcome-left-container .server-panel { margin: 15px; } .welcome-left-container .server-panel .panel-header { padding-bottom: 0; } .welcome-left-container .server-panel .panel-body div { padding: 0; } .welcome-left-container .server-panel .title { background: #f2f2f2; height: 40px; line-height: 40px; padding-left: 15px; margin: 0; } .welcome-left-container .server-panel span { height: 30px; padding-top: 10px; padding-left: 15px; display: block; background: #fafafa; } .welcome-edge { padding: 0 30px 15px 0; } .welcome-edge .commentbox { background: #fff; } .welcome-edge .comment-panel .panel-body { padding-top: 10px; } .welcome-edge .comment-panel .commentList .item { margin: 0 0 20px; } .welcome-edge .contact-panel { margin-top: 15px; } .welcome-edge .contact-panel .panel-header { padding-bottom: 0; } @media all and (max-width: 1200px) { .welcome-edge { padding: 0 30px 15px 30px; } } .column-wrap { -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; height: 100%; width: 100%; padding: 0px; background: #f5f5f5; overflow-x: hidden; overflow-y: auto; } .iframe-h { height: 100%; } .column-edge { float: left; padding-top: 16px; width: 150px; height: 100%; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; } .column-content { -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; padding: 15px; background: #f5f5f5; height: 100%; overflow-x: hidden; margin-left: 0px; } .column-content-detail { background: #fff; padding: 20px; margin: 0; } .page-content { padding: 0px; } .page-content-wrap { background: #fff; padding: 20px; margin: 0; } @media (max-width: 600px) { .layui-nav-no-bg { background: #fff; } .layui-nav-no-bg .layui-nav-item { border-bottom: 1px solid #f8f8f8; } .column-edge { float: none; width: 100%; height: auto; padding-bottom: 10px; } .column-content { background: #fff; height: auto; margin-left: 0px; } .layui-tab-content { padding: 15px 0; } .layui-form-label { padding: 9px 0px; } .layui-input-block { margin-left: 80px; } }