#zwb_upload { padding: 4px 10px; height: 20px; line-height: 20px; position: relative; cursor: pointer; color: #888; background: #fafafa; border: 1px solid #ddd; border-radius: 4px; display: inline-block; *display: inline; *zoom: 1; } #zwb_upload input { position: absolute; /*font-size: 100px; right: 0; top: 0;*/ opacity: 0; height: 130px; width: 370px; margin: -5px 0 0 -75px; /*filter: alpha(opacity=0); cursor: pointer; width: 350px;*/ } #zwb_upload:hover { color: #444; background: #eee; border-color: #ccc; text-decoration: none; } #zwb_upload_status { display: none; position: fixed; left: 0; top: 0; width: 100%; height: 100%; background: rgba(0, 0, 0, 0.1); } #zwb_upload_status .box { position: absolute; top: 30px; left: 10%; width: 80%; height: auto; background: #fff; border: 1px solid #ddd; -webkit-border-radius: 5px; -moz-border-radius: 5px; border-radius: 5px; color: #666; } #zwb_upload_status .box .title { width: 100%; border-bottom: 1px solid #ddd; line-height: 40px; text-align: center; } #zwb_upload_status .box .list { width: 100%; padding-bottom: 10px; max-height: 600px; overflow-x: hidden; overflow-y: auto; } #zwb_upload_status .box .list ul, #zwb_upload_status .box .list li { margin: 0px 0px 0px 20px; padding: 0; list-style: none; } #zwb_upload_status .box .list ul { width: 100%; overflow: hidden; } #zwb_upload_status .box .list ul li { float: left; vertical-align: middle; width: 150px; position: relative; text-align: center; border: 1px solid #ddd; margin: 10px; height: 120px; line-height: 120px; cursor: pointer; background: url("../img/bg.png") no-repeat; background-size: 100% 100%; } #zwb_upload_status .box .list ul li span.success { position: absolute; right: 0; bottom: 0; overflow: hidden; width: 35px; height: 35px; background: url("../img/success.png"); background-size: 100% 100%; -webkit-transition: all 0.5s; -moz-transition: all 0.5s; -ms-transition: all 0.5s; -o-transition: all 0.5s; transition: all 0.5s; opacity: 0; } #zwb_upload_status .box .list ul li span.success2 { opacity: 1; } #zwb_upload_status .box .list ul li span.delete { position: absolute; right: 5px; top: 5px; width: 15px; height: 15px; background: url("../img/delete_white.png"); background-size: 100% 100%; -webkit-transition: all 0.5s; -moz-transition: all 0.5s; -ms-transition: all 0.5s; -o-transition: all 0.5s; transition: all 0.5s; opacity: 0; } #zwb_upload_status .box .list ul li img { display: inline; width: 76%; vertical-align: middle; -webkit-transition: all 0.5s; -moz-transition: all 0.5s; -ms-transition: all 0.5s; -o-transition: all 0.5s; transition: all 0.5s; max-height: 95%; } #zwb_upload_status .box .list ul li a { position: absolute; left: 0; top: 0; width: 100%; height: 100%; opacity: 0; overflow: hidden; background: rgba(0, 0, 0, 0.8); color: #fff; -webkit-transition: all 0.5s; -moz-transition: all 0.5s; -ms-transition: all 0.5s; -o-transition: all 0.5s; transition: all 0.5s; } #zwb_upload_status .box .list ul li a p { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; line-height: 24px; margin: 0; color: #fff; font-size: 12px; } #zwb_upload_status .box .list ul li a .name { margin-top: 20px; padding: 0 10px; } #zwb_upload_status .box .list ul li .progressBox { display: none; position: absolute; width: 100%; height: 9px; left: -1px; border: 1px solid #ddd; border-top: none; background: #f6f6f6; overflow: hidden; } #zwb_upload_status .box .list ul li .progressBox div { width: 0; height: 100%; background: lightgreen; } #zwb_upload_status .box .list ul li .err { position: absolute; left: 0; top: 50%; margin-top: -20px; width: 0; height: 40px; background: #e4393c; color: #fff; text-align: center; line-height: 40px; -webkit-transition: all 0.3s; -moz-transition: all 0.3s; -ms-transition: all 0.3s; -o-transition: all 0.3s; transition: all 0.3s; box-shadow: 1px 1px 1px #f9f9f9; } #zwb_upload_status .box .list ul li:hover a { opacity: 1; } #zwb_upload_status .box .list ul li:hover span.delete { opacity: 1; } #zwb_upload_status .box .list ul li:hover img { width: 100%; } #zwb_upload_status .box .foot { border-top: 1px solid #ddd; height: 50px; } #zwb_upload_status .box .foot span { float: right; margin-right: 15px; width: 180px; height: 30px; background: #00B7EE; color: #fff; line-height: 30px; text-align: center; margin-top: 7.5px; border-shadow: 1px 1px 1px #ddd; border-radius: 5px; cursor: pointer; } #zwb_upload_status .box .foot .off { background: none; border: 1px solid #ddd; color: #666; } #zwb_upload_status .box { /*left: 0;*/ width: 600px; margin-top: -22px; /*left: 50%; margin-left: -150px;*/ } #zwb_upload_status .box .list { height: 300px; overflow-x: hidden; overflow-y: auto; } #zwb_upload_status .box .list ul li { width: 118px; margin: 10px; }