short-video-back/web/public/static/simpleboot/css/index.css

*{
    margin:0;
    padding:0;    
}
ul,li{
    margin:0;
    padding:0;
    list-style:none;
}
body{
    background:#fafafa;
}
.clear{
    clear:both;
}
.clear:after {
    content: " ";
	display: table;
	clear: both
}
.content{
    padding:10px 20px;
}

.tips{
    display:inline-block;
    position:relative;
    z-index:10;
}
.tips img{
    width:18px;
}
.tips .tips_bd{
    display:none;
    position:absolute;
    left:-50px;
    top:35px;
    padding:5px;
    width:350px;
    line-height:20px;
    color:#666666;
    font-size:12px;
    background:#fff;
    border:2px solid rgba(0,0,0,0.15); 
}
.tips .tips_bd:after{
    content: " ";
    display:block;
    position:absolute;
    left:50px;
    top:-8px;
    width:19px;
    height:10px;
    background:url('../images/jiantou2.png') no-repeat center top;
}
.tips:hover .tips_bd{
    display:block;
}

.statistics{
    margin-bottom:10px;
    padding:10px;
    border-radius:10px;
    background:#fff;
    -webkit-box-shadow: 0 0 5px rgba(0,0,0,0.05);
    -moz-box-shadow: 0 0 5px rgba(0,0,0,0.05);
    box-shadow: 0 0 5px rgba(0,0,0,0.05);
}
.statistics.w50{
    float:left;
    width:calc(50% - 5px);
    -moz-box-sizing: border-box;  /*Firefox3.5+*/
	-webkit-box-sizing: border-box; /*Safari3.2+*/
	-o-box-sizing: border-box; /*Opera9.6*/
	-ms-box-sizing: border-box; /*IE8*/
	box-sizing: border-box;
}
.statistics.w33{
    float:left;
    width:calc(33.33% - 7px);
    -moz-box-sizing: border-box;  /*Firefox3.5+*/
	-webkit-box-sizing: border-box; /*Safari3.2+*/
	-o-box-sizing: border-box; /*Opera9.6*/
	-ms-box-sizing: border-box; /*IE8*/
	box-sizing: border-box;
}
.statistics.mr10{
    margin-right:10px;
}
.statistics .title{
    padding:10px 0 10px 5px;
    line-height:30px;
    color:#000;
    font-size:16px;
    border-bottom: 1px solid #eeeeee;
    margin-bottom: 20px;
}
.statistics .title .bd_title{
    float:right;
    height:30px;
    line-height:30px;
}
.statistics .bd{}


/* 下拉选择 */
.dropdown{
    float:left;
    margin-right:10px;
    width: 65px;
    height:50px;
    z-index:10;
}
.dropdown .dropdown_input{
    padding-right:16px;
    color:#323232;
    
    background:url("../images/dropdown.png") no-repeat right center;
    background-size:12px;
    cursor:pointer;
}
.dropdown .dropdown_list{
    display:none;
    background:#fff;
}
.dropdown .dropdown_list ul{}
.dropdown .dropdown_list ul li{
    height:30px;
    line-height:30px;
    color:#323232;
    cursor:pointer;
}
/* 选择时间段 */
.data_select{
    float:left;
    margin-right:10px;
}
.data_select input{
    padding:3px 6px;
}
/* 查询 */
.search{
    float:left;
    margin-right:10px;
    padding:0 20px;
    color:#fff;
    font-size:16px;
    cursor:pointer;
    background:#4da2ff;
    border-radius:5px;
}
/* 导出 */
.export{
    float:left;
    padding:0 20px;
    color:#fff;
    font-size:16px;
    cursor:pointer;
    background:#ffcd30;
    border-radius:5px;
}


/* 基本 */
.basic_list{}
.basic_list ul{}
.basic_list ul li{
    position:relative;
    float:left;
    margin-right:2%;
    margin-bottom:10px;
    padding:10px;
    width:32%;
    line-height:30px;
    text-align:right;
    
    
    
    -moz-box-sizing: border-box;  /*Firefox3.5+*/
	-webkit-box-sizing: border-box; /*Safari3.2+*/
	-o-box-sizing: border-box; /*Opera9.6*/
	-ms-box-sizing: border-box; /*IE8*/
	box-sizing: border-box;
}
.basic_list ul li .basic_list_t{
    color:#fff;
    font-size:20px;
}
.basic_list ul li .basic_list_n{
    color:#fff;
    font-size:22px;
    font-weight:bold;
}

.basic_list ul li.no{
    margin-right:0;
}

.basic_list ul li.newusers{
    background:#fecc2d url('../images/1.png') no-repeat 10px bottom;
    background-size:90px;
}
.basic_list ul li.launches{
    background:#ff7a8b url('../images/2.png') no-repeat 10px bottom;
    background-size:90px;
}
.basic_list ul li.durations{
    background:#83d688 url('../images/3.png') no-repeat 10px bottom;
    background-size:90px;
}
.basic_list ul li.activityusers{
    background:#4da2ff url('../images/4.png') no-repeat 10px bottom;
    background-size:90px;
}
.basic_list ul li.users_total{
    background:#33c7d3 url('../images/5.png') no-repeat 10px bottom;
    background-size:90px;
}

/* 平台数据 */
.plat{}
.plat ul{}
.plat ul li{
    position:relative;
    float:left;
    margin-right:1.33%;
    margin-bottom:10px;
    padding-left:75px;
    width:24%;
    height:90px;

    line-height:30px;
    border:2px solid #eeeeee;
    -moz-box-sizing: border-box;  /*Firefox3.5+*/
	-webkit-box-sizing: border-box; /*Safari3.2+*/
	-o-box-sizing: border-box; /*Opera9.6*/
	-ms-box-sizing: border-box; /*IE8*/
	box-sizing: border-box;
}
.plat ul li.no{
    margin-right:0;
}
.plat ul li .plat_l{
    position:absolute;
    top:0;
    left:0;
    width:75px;
    height:100%;
}
.plat ul li .plat_r{
    padding:20px 0 20px 30px;
    line-height:25px;
}
.plat ul li .plat_r p{
    margin:0;
    color:#333;
    font-size:20px;
}
.plat ul li .plat_r p.plat_t{
    font-size:14px;
}

.plat ul li.plat_li1 .plat_l{
    background:#4da2ff url("../images/01.png") no-repeat center center;
    background-size:50px;
}
.plat ul li.plat_li1 .plat_r p.plat_t{
    color:#4da2ff
}
.plat ul li.plat_li2 .plat_l{
    background:#ffcd30 url("../images/02.png") no-repeat center center;
    background-size:50px;
}
.plat ul li.plat_li2 .plat_r p.plat_t{
    color:#ffcd30
}
.plat ul li.plat_li3 .plat_l{
    background:#83d688 url("../images/03.png") no-repeat center center;
    background-size:50px;
}
.plat ul li.plat_li3 .plat_r p.plat_t{
    color:#83d688
}
.plat ul li.plat_li4 .plat_l{
    background:#ff7a8b url("../images/04.png") no-repeat center center;
    background-size:50px;
}
.plat ul li.plat_li4 .plat_r p.plat_t{
    color:#ff7a8b
}
.plat ul li.plat_li5 .plat_l{
    background:#9e80fc url("../images/05.png") no-repeat center center;
    background-size:50px;
}
.plat ul li.plat_li5 .plat_r p.plat_t{
    color:#9e80fc
}
.plat ul li.plat_li6 .plat_l{
    background:#fe65bb url("../images/06.png") no-repeat center center;
    background-size:50px;
}
.plat ul li.plat_li6 .plat_r p.plat_t{
    color:#fe65bb
}
.plat ul li.plat_li7 .plat_l{
    background:#f0b167 url("../images/07.png") no-repeat center center;
    background-size:50px;
}
.plat ul li.plat_li7 .plat_r p.plat_t{
    color:#f0b167
}
.plat ul li.plat_li8 .plat_l{
    background:#61a5df url("../images/08.png") no-repeat center center;
    background-size:50px;
}
.plat ul li.plat_li8 .plat_r p.plat_t{
    color:#61a5df
}

.plat ul li.plat_li9 .plat_l{
    background:#61a5df url("../images/09.png") no-repeat center center;
    background-size:50px;
}
.plat ul li.plat_li9 .plat_r p.plat_t{
    color:#61a5df
}