样式参考

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,font,img,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,i,var,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td{margin:0;padding:0;border:0;outline:0;font-weight:inherit;font-style:inherit;font-size:100%;font-family:inherit;vertical-align:baseline;}
h1,h2,h3,h4,h5,h6{font-size:100%;}
ul,ol,li{list-style:none;}
img,video{max-width:100%;height:auto;}
blockquote,q{quotes:none;}
blockquote:before,blockquote:after,q:before,q:after{content:'';content:none;}
:focus{outline:0;}
.clearfix:before,.clearfix:after{content:"";display:table;}
.clearfix:after{clear:both;}
.clearfix{zoom:1;}
strong{font-weight:bold;}
table{border-collapse:collapse;border-spacing:0;width:100%;}

html{-webkit-text-size-adjust:100%;-ms-text-size-adjust:100%;text-size-adjust:100%;}
body{font:400 12px/1.5 "Titillium Web", Helvetica,Arial,sans-serif;color:#666;}
a{text-decoration: none;color:#666;}
a.org{color:#fbb03b;}
.red{color:#f00;}
.gray{color:#999;}
.bold{font-weight:700;}
.fl{float:left;}
.fr{float:right;}
.mr20{margin-right:20px;}
.mb5{margin-bottom:5px;}
.hide{display:none;}
.btn{font-size:14px;color:#fff;height:28px;line-height:28px;padding:2px 15px;border:0;cursor:pointer;border-radius:5px;display:inline-block;}
.btn-org{background:#f90;}
.btn-green{background:#8cc63f;}
.btn-red{background:#ed1c24;}
.btn-gray{background:#bdccd4;color:#666;}
.btn-darkGrey{background:#807d77;color:#fff;box-shadow:0 0 0;}
.btn-wathet{background:#b9c9cd;color:#666;}
.btn-deongaree{background:#586976;}
.header{width:100%;position:relative;z-index:900;}
.header .inner{height:62px;border-bottom:2px solid #fbb03b;background:#f5f5f5;}
.header .flag{cursor: pointer;width:35px;height:28px;float:left;display:block;margin:15px 10px 0 5px;background:url('bgimg/sprites.png') no-repeat;}
.header .logo{display:block;float:left;margin-top:5px;cursor:pointer}
.search .filed{float:left;position:relative;z-index:10;left:2px;border:1px solid #f90;height:28px;padding:1px;margin:0;border-radius: 5px 0 0 5px;}
.search .btn-search{box-shadow:0 0 0;float:left;position:relative;z-index:9;padding:0;width:32px;height:32px;border-radius:0 5px 5px 0;background:#fbb03b;}
.search .btn-search i{display:inline-block;width:23px;height:29px;background:url('bgimg/sprites.png') no-repeat 0 -46px;}
.header .search{position:absolute;right:200px;top:13px;}
.header .explain{display:block;width:34px;height:33px;position:absolute;top:56px;right:30px;text-indent:-999em;background:url('bgimg/sprites.png') no-repeat 0 -190px;}
.explain-box img{display:block;}
.top-menu{float:right;margin:10px 10px 5px 10px;position:relative;}
.top-menu .user{width:110px\9;float:left;margin-right:20px;position:relative;display:block;color:#f7931e;}
.top-menu .blueBg{background:#9ec7e3;}
.top-menu .user i{display:block;position:absolute;top:0;left:32px;width:8px;height:8px;border:1px solid #fff;border-radius:50%;background:#f9ab55;}
.top-menu .user .name{line-height:40px;display:inline-block;background:#f5f5f5;}
.top-menu  img{float:left;width:40px;height:40px;vertical-align: middle;margin-right:5px;border-radius: 50%;}
.top-menu .logout{display:block;float:left;width:40px;height:40px;text-align:center;border-radius:50%;background:#8cc63f;}
.top-menu .logout i{display:inline-block;width:21px;height:25px;margin-top:8px;background:url('bgimg/sprites.png') no-repeat 0 -89px;}
.top-menu .msg-list{display:none;width:150px;position:absolute;top:40px;left:-105px;background:#9ec7e3;}
.top-menu .msg-list li{z-index:10;line-height:25px;border-bottom:1px solid #fff;padding:5px;color:#000;text-align:center;}
.top-menu .msg-list li:last-child{border-bottom:0;}
.header .nav{z-index:101;display:none;padding-top:5px;width:100%;position:absolute;left:0;top:62px;
    background:#111214;
    background:-webkit-radial-gradient(#2d383a 0%,#111214 100%);
    background:-moz-radial-gradient(#2d383a 0%,#111214 100%);
    background:-o-radial-gradient(#2d383a 0%,#111214 100%);
    background:-ms-radial-gradient(#2d383a 0%,#111214 100%);
    background:radial-gradient(#2d383a 0%,#111214 100%);}
.header .text{color:#fbb054;font-size:20px;font-weight: 700;margin:15px 0 0 15px;}
.header .text .i{margin-left:10px;text-align:center;display:inline-block;font-weight: 400;border:1px solid #fbb054;border-radius: 50%;width:20px;height:20px;line-height: 20px;}
.header .nav li{float:left;width:24%;margin:0 0.5%;}
.header .nav li.n1{width:20%;}
.header .nav li.n2{width:28%;}
.header .nav h2{font-weight:700;font-size:16px;margin-bottom:12px;line-height:28px;border-bottom:1px solid rgb(255,126,20);color:rgb(255,126,20);}
.header .nav a{font-size:16px;color:#fff;display:block;text-decoration: none;line-height:25px;margin-bottom:15px;}
.header .nav a:hover{text-decoration: underline;}
.header .nav .up-btn{display:block;position:absolute;bottom:-9px;left:50%;margin-left:-10px;width:20px;height:20px;border: rgb(255,126,20) solid;border-width: 3px 3px 0 0;-webkit-transform: rotate(-45deg);-moz-transform: rotate(-45deg);transform: rotate(-45deg);}
.content{padding:20px 15px;}
.tp-box{margin-bottom:10px;}
.tp-box .num{margin-bottom:5px;font-weight: 700;}
.tp-box .num span{display:inline-block;margin-right:20px;}
.tp-box .search{float:left;margin-right:10px;}
.tp-box .field{float:left;border-right:0;border-radius: 5px 0 0 5px;height:30px;}
.tp-box .btn-search{display:inline-block;border:1px solid #f90;border-left:0;float:left;width:35px;height:32px;border-radius:0 5px 5px 0;background:#f90;}
.tp-box .btn-search i{display:inline-block;width:28px;height:28px;background: url('bgimg/sprites.png') no-repeat 5px -45px;}
.tp-box .btn .icon{float:left;margin:0 5px 0 -5px;}
.tp-box .btn .icon-upload{border-right:0;margin:2px 0 0 0;}
.tp-box .pd{padding:2px 5px;}
.tp-box span.btn{margin-right:10px;float:left;}
.icon{width:30px;height:30px;display:inline-block;background:url('bgimg/sprites.png') no-repeat;}
.icon-add{background-position: 0 -234px;}
.icon-filter{background-position: 0 -266px;}
.icon-export{width:23px;height:22px;background-position: 0 -300px;}
.icon-del{width:21px;height:22px;background-position: 0 -501px;vertical-align: -5px;}
.icon-upload{width:23px;height:21px;background-position: 0 -526px;}
.icon-set{width:23px;height:23px;background-position: 0 -551px;}
.icon-remove{width:22px;height:24px;background-position: 0 -610px;}
.icon-edit{width:22px;height:24px;background-position: 0 -637px;}
.icon-link{vertical-align:middle;width:28px;height:24px;background-position: 0 -672px;}
.export{height:26px;padding:0 3px;display:inline-block;border-radius:5px;background:#8cc63f;box-shadow: 0 2px 1px #666 ;}
.browse{position: relative;}
.file-btn{position: absolute;-moz-opacity: 0;filter: alpha(opacity=0);opacity: 0;background: none;border: none;width:80px;height: 32px;top: 0;_top: 2px;left:0;}
.field{border:1px solid #ccc;height:28px;border-radius: 5px;width:180px;padding-left:3px;}
.select{border:1px solid #ccc;height:28px;border-radius: 5px;width:183px;}

.data-list{width:100%;}
.data-list th{text-align:center;line-height:24px;padding:5px;color:#fff;font-weight:700;border:1px solid #fff;vertical-align: middle;
    background:#3f5f7f;
    background:-webkit-linear-gradient(#15354e 0%,#3f5f7f 100%);
    background:-moz-linear-gradient(#15354e 0%,#3f5f7f 100%);
    background:-o-linear-gradient(#15354e 0%,#3f5f7f 100%);
    background:-ms-linear-gradient(#15354e 0%,#3f5f7f 100%);}
.data-list td{padding:6px 10px;border:1px solid #fff;font-size:12px;vertical-align: middle;text-align:center;}
.data-list tr{background:#dff1f9;}
.data-list tr:nth-child(2n){background:#dbe4ef;}
.data-list tr.y{background:#FFFF33;}
.data-list a.blue{display:inline-block;width:120px;float:left;white-space:nowrap; overflow:hidden; text-overflow:ellipsis;}
.data-list span{display:inline-block;vertical-align: middle;}
.data-list .btn{min-width:50px;height:18px;line-height:18px;margin:0 5px 3px 0;text-align:center;box-shadow: 0 0 0;padding:2px 5px;font-weight: 400;}
.data-list .btn.w140{width:120px;margin-right:0;}
.data-list .btn-black{background:#5b5a55;color:#6b9d47;border:1px solid #666;}
.data-list .btn-black.other{color:#f7931e;}
.data-list .field{height:20px;width:130px;color:#586976;text-align: center;}
.data-list .btn-lightGray{
    background:#ecebe9;color:#586976;border:1px solid #ccc;
    background:-webkit-linear-gradient(#f9f8f8 0%,#ecebe9 100%);
    background:-moz-linear-gradient(#f9f8f8 0%,#ecebe9 100%);
    background:-o-linear-gradient(#f9f8f8 0%,#ecebe9 100%);
    background:-ms-linear-gradient(#f9f8f8 0%,#ecebe9 100%);}
.data-list .remove{height:25px;line-height:25px;}
.data-list .test-report{width:180px;height:70px;position:relative;}
.data-list .test-report .btn{min-width:25px;height:26px;line-height:26px;vertical-align: middle;background:#ff8716;margin:0 0 5px 0;}
.data-list .test-report .extra{width:35px;height:60px;position:absolute;right:5px;top:4px;}
.data-list .nums i{display:inline-block;width:18px;height:18px;line-height:18px;border-radius: 50%;background:#87bcb9;color:#fff;text-align: center;}
.data-list .edition span{margin-right:10px;}
.circle{display:inline-block;width:8px;height:8px;margin-right:5px;border-radius: 50%;}
.circle.org{background:#ff8716}
.circle.green{background:#00b34e;}
.form-list li{margin-bottom:10px;}
.form-list li label{display:inline-block;width:100px;text-align:right;margin-right:5px;float:left;line-height:30px;}
.form-list li .textarea{border:1px solid #ccc;width:320px;height:80px;border-radius: 5px;}
.form-list .choose{float:left;width:330px;margin-top:5px;}
.form-list .choose span{display:inline-block;width:100px;margin-bottom:3px;}
.checkbox{vertical-align: -2px;}
.submit{padding-top:20px;text-align:right;clear: both;}
.upload-content li{margin-bottom:10px;position:relative;height:30px;}
.upload-content .export{margin-right:10px;float:left;}
.upload-content .text{display:inline-block;width:220px;float:left;line-height:30px;}
.link{width:30px;height:30px;border-radius: 5px;background:#b9c9cd;display:inline-block;float:left;margin-right:10px;}
.link i{margin-left:4px;width:20px;height:26px;display:inline-block;background:url("bgimg/sprites.png") no-repeat 0 -579px;}
.upload-content .browse{position:absolute;right:20px;top:0;}
.upload-content .link{float:right;margin:2px 105px 0 0;}

/*popup*/
.popBox{width:500px;position:absolute;z-index:1000;background:#fff;display:none;}
.popBox .hd{height:35px;line-height:35px;position:relative;padding-left:10px;background:#ff8912;}
.popBox .hd h2{color:#fff;font-size:16px;font-weight: 700;}
.popBox .bd{padding:10px;max-height:500px;overflow: auto;}
.popBox .bottom{text-align:right;}
.popBox .bottom .btn{margin-left:10px;}
a.closeBtn,a.closeBtn:hover{width: 30px; height: 30px;border-radius: 3px; position: absolute; right: 0; top:0; background:#ff8912 url("bgimg/popCloseBg.gif") no-repeat center;}
.shade-div{background-color: #000; left: 0; opacity: 0.2; filter:alpha(opacity=20); position: fixed!important; position:absolute;top: 0; width: 100%; height: 100%!important; height: 0; overflow: hidden; z-index: 999;}

#set-box{width:980px;}
#set-box li{margin:0 5px 20px 0;position:relative;height:30px;float:left;width:465px;}
#set-box .browse{position:absolute;right:20px;top:0;}
#set-box .link{float:right;margin:2px 105px 0 0;}
#set-box .field{height:26px;width:150px;color:#586976;}
#set-box .export{vertical-align: middle;float:left;margin-right:10px;}
#set-box .text{float:left;width:270px;display:inline-block;}

.chart-box .hd{margin-bottom:10px;padding:15px 10px;font-size:14px;}
.chart-box .hd .dc{margin-bottom:20px;padding-bottom:15px;border-bottom:1px solid #ccc;position:relative;}
.chart-box .hd .dc .name{padding:0 15px;height:30px;line-height: 30px;border:1px solid #ccc;border-radius:5px;box-shadow: 0 0 12px #ccc;position:absolute;bottom:-15px;left:50%;transform:translateX(-50%);background:#fff;}
.chart-box .hd label{margin-right:3px;display: inline-block;font-weight: 700;float:left;}
.chart-box .hd .textarea{border:0;padding:3px;width:630px;height:50px;font-family: arial, helvetica, sans-serif;}
.chart-box .hd .btn{margin-left:10px;}
/*.chart-box .hd .icon-link{display:inline-block;width:10px;height:22px;vertical-align:middle;margin-right:5px;background:url('bgimg/icon_link.png') no-repeat;background-size: contain;}*/
.chart-box .hd .choose li{margin-right:10px;float:left;margin-top: 15px;margin-left: 10px;}
.chart-box .hd .pic{position:relative;width:40px;height:40px;border-radius: 5px;}
.chart-box .hd .pic img{width:40px;height:40px;border-radius: 5px;}
.icon-delete{position:relative;cursor:pointer;display:inline-block;width:12px;height:12px;}
.icon-delete:before,.icon-delete:after{content:" ";background:#999;position:absolute;top:50%;width:100%;height:2px;}
.icon-delete:before{
    -webkit-transform: rotate(135deg);
    -moz-transform: rotate(135deg);
    transform: rotate(135deg);}
.icon-delete:after{
    -webkit-transform: rotate(45deg);
    -moz-transform: rotate(45deg);
    transform: rotate(45deg);}
.chart-box .hd .cover{position:absolute;left:0;top:0;width:100%;height:100%;background:rgba(197,196,194,0.5);border-radius: 5px;}
.chart-box .hd .cover .icon-delete{width:18px;height:18px;position:absolute;left:50%;top:50%;transform: translate(-50%,-50%);}
.chart-box .hd .cover .icon-delete:before,.chart-box .hd .cover .icon-delete:after{background:#fff;}
.chart-box .hd .btn-white{border:1px solid #ccc;background: #fff;padding:0 10px;height:30px;line-height: 30px;display:inline-block;border-radius: 5px;}
.chart-box .hd .btn-white .icon-delete{margin-left:10px;}
.comments-list{padding-left:130px;background:url('bgimg/line.gif') repeat-y 110px 0;font-size:14px;}
.comments-list li{position:relative;margin-bottom:20px;}
.comments-list li:before{content:" ";display:block;width:14px;height:14px;border:1px solid #fff;border-radius: 50%;position:absolute;left:-27px;top:15px;background:#f90;}
.comments-list .date{position:absolute;left:-110px;top:8px;display:block;text-align: center;}
.comments{padding:5px 0 0 10px;}
.comments .avatar{display: block;float:left;margin-right:10px;}
.comments .avatar img{width:35px;height:35px;border-radius: 50%;border: 1px solid #ccc;}
.comments .txt{width:calc(100% - 50px);float:left;}
.comments .name{font-weight: 700;margin-top:3px;position:relative;min-height: 30px;}
.comments .name .tips{display:none;position:absolute;top:25px;left:20px;z-index:10;font-weight:400;border-radius: 5px;width:180px;height:60px;padding:10px;box-shadow: 0 0 6px #999;background:#fff;}
.icon-open,.icon-close{width:20px;height:20px;position:relative;display:inline-block;vertical-align: middle;border:1px solid #ccc;border-radius:5px;margin-right:5px;}
.icon-open:after,.icon-close:after{content:'';width:15px;height:15px;position:absolute;left:50%;top:50%;transform: translate(-50%,-50%);}
.icon-open:after{background:url('bgimg/icon_open.png') no-repeat center;background-size: contain;}
.icon-close:after{background:url('bgimg/icon_close.png') no-repeat center;background-size: contain;}
.comments .see{float:left;margin-right:5px;}
.comments .see:hover .tips{display:block;}
.comments p{margin-bottom:8px;}
.comments .tp{overflow: hidden;margin-bottom:5px;}
.comments .tp h3{float:left;}
.comments .tp span{display:block;float:left;margin:3px 0 0 10px;}
.comments .pic img{border-radius: 5px;width:50px;height:50px;}
.comments .pic a{text-decoration: underline;}
.comments .call{display:inline-block;margin-right:10px;color:#245ee4;}

.report-box{font-size:14px;padding:20px;}
.report-box li{width:calc(100% - 5px);float:left;padding-right:5px;margin-bottom:10px;}
.report-box .checkbox{float:left;}
.report-box li .field{border:0;border-bottom:1px solid #ccc;border-radius:0;height:22px;float:left;}
.report-box .bottom{text-align: right;padding:20px 10px;}
.report-box .bottom .btn{width:140px;text-align: center;}


.test-report{padding:15px;}
.test-report li .upload-ctrl{float:left;width:100px;}
.test-report li .text{float:left;line-height: 34px;}
.test-report li .browse{margin-right:15px;}
.test-report li .btn-v{margin:5px 10px 5px 0px;border:1px solid #ccc;height:28px;line-height:28px;padding:0 10px;display:inline-block;position:relative;}
.icon-delete{position:relative;cursor:pointer;display:inline-block;width:12px;height:12px;margin-left:10px;top:1px;}
.icon-delete:before,.icon-delete:after{content:" ";background:#999;position:absolute;top:50%;width:100%;height:2px;}
.icon-delete:before{
    -webkit-transform: rotate(-135deg);
    -moz-transform: rotate(-135deg);
    transform: rotate(-135deg);}
.icon-delete:after{
    -webkit-transform: rotate(-45deg);
    -moz