You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
160 lines
4.4 KiB
160 lines
4.4 KiB
|
|
.upload_choose{}
|
|
.upload_drag_area{display:inline-block; width:63%; padding:4em 0; margin-left:.5em; border:1px dashed #ddd; background:#fff no-repeat 20px center; color:#999; text-align:center; vertical-align:middle;}
|
|
.upload_drag_hover{border-color:#069; box-shadow:inset 2px 2px 4px rgba(0, 0, 0, .5); color:#333;}
|
|
.upload_preview{height:6rem; _zoom:1;}
|
|
.upload_append_list{height:6rem; margin-right:1rem; margin-bottom:1rem; display:inline-block; position:relative;}
|
|
.upload_delete{margin-left:2em;}
|
|
.upload_image{max-width: 100%; max-height:100%; padding:0px;}
|
|
.upload_submit{margin-top:1rem; overflow: hidden;}
|
|
.upload_submit_btn{height:32px; font-size:14px;display:none;}
|
|
.upload_progress{padding:5px; border-radius:10px; color:#fff; background-color:rgba(0,0,0,.6); position:absolute; left:25px; top:45px;}
|
|
|
|
.andArea{width:auto;}
|
|
.filePicker{
|
|
position:relative;
|
|
width:12rem;
|
|
height:12rem;
|
|
border:1px solid #dfdfdf;
|
|
}
|
|
.filePicker:before,.filePicker:after{content: " "; height:2px; left:2rem; right:2rem; top:50%; position: absolute; background:#dfdfdf}
|
|
.filePicker:after{-moz-transform: rotate(-90deg);-webkit-transform: rotate(-90deg);-ms-transform: rotate(-90deg);-o-transform: rotate(-90deg);transform: rotate(-90deg);}
|
|
.demo{
|
|
margin: auto;
|
|
}
|
|
.convent_choice{
|
|
}
|
|
|
|
#fileImage{
|
|
display: none;
|
|
}
|
|
|
|
|
|
/* 每个图片上的操作bar */
|
|
|
|
.uploadImg{
|
|
padding:.3rem;
|
|
box-sizing: border-box;
|
|
}
|
|
.file_progress{
|
|
display: none;
|
|
margin: 0;
|
|
position: absolute;
|
|
bottom:0px;
|
|
height:8px;
|
|
left:0px;
|
|
right:0px;
|
|
background: none repeat scroll 0 0 #00B7EE;
|
|
text-align:center;
|
|
width: 0%;
|
|
}
|
|
.file_failure{
|
|
display: none;
|
|
margin: 0;
|
|
position: absolute;
|
|
bottom:0px;
|
|
height:24px;
|
|
left:0px;
|
|
right:0px;
|
|
background: none repeat scroll 0 0 red;
|
|
color:#fff;
|
|
text-align:center;
|
|
}
|
|
.file_success{
|
|
display: none;
|
|
margin: 0;
|
|
position: absolute;
|
|
bottom:0px;
|
|
height:40px;
|
|
left:0px;
|
|
right:0px;
|
|
background: url("../img/success.png") no-repeat scroll right bottom transparent;
|
|
}
|
|
.file_name{
|
|
margin:0px;
|
|
white-space: nowrap;
|
|
width: 66%; /* IE6 需要定义宽度 */
|
|
overflow: hidden;
|
|
-o-text-overflow: ellipsis; /* Opera */
|
|
text-overflow: ellipsis; /* IE, Safari (WebKit) */
|
|
float: left;
|
|
}
|
|
.file_edit{
|
|
background: url("../img/edit_white.png") no-repeat scroll 0 0 transparent;
|
|
width:18px;
|
|
height:18px;
|
|
display: inline;
|
|
-moz-user-select: none;
|
|
position: absolute;
|
|
right:22px;
|
|
margin-top:4px;
|
|
}
|
|
.file_del{
|
|
height:1.6rem;
|
|
width: 1.6rem;
|
|
border-radius: 100%;
|
|
position: absolute;
|
|
right: -.8rem;
|
|
top: -.8rem;
|
|
padding:0px;
|
|
margin: 0;
|
|
opacity: 0.9;
|
|
color:#fff;
|
|
background:#EC5151;
|
|
transition: all 0.5s;
|
|
-moz-transition: all 0.5s;
|
|
-webkit-transition: all 0.5s;
|
|
-o-transition: all 0.5s;
|
|
overflow: hidden;
|
|
z-index: 1;
|
|
}
|
|
.file_del:before,.file_del:after{content:" "; left:.3rem; right:.3rem; top:50%; position:absolute; height:1px; background:#fff;
|
|
-moz-transform: rotate(-45deg);-webkit-transform: rotate(-45deg);-ms-transform: rotate(-45deg);-o-transform: rotate(-45deg);transform: rotate(-45deg);
|
|
}
|
|
.file_del:after{-moz-transform: rotate(-135deg);-webkit-transform: rotate(-135deg);-ms-transform: rotate(-135deg);-o-transform: rotate(-135deg);transform: rotate(-135deg);}
|
|
/* 设置图片等比例缩放 并且垂直居中*/
|
|
.upload_append_list a {
|
|
display: table-cell;
|
|
text-align: center;
|
|
vertical-align: middle;
|
|
border: 1px solid #DFDFDF;
|
|
}
|
|
.upload_append_list img {
|
|
vertical-align: middle; /*图片垂直居中*/
|
|
}
|
|
.uploadImg {
|
|
position:relative;
|
|
width:6rem;
|
|
height:6rem;
|
|
display:table-cell;
|
|
vertical-align: middle;
|
|
}
|
|
|
|
.add_upload .uploadImg:before,.add_upload .uploadImg:after{content:" "; position: absolute; left:1rem; right:1rem; height:2px; background:#d1d1d1; top:50%; margin-top:-1px; }
|
|
.add_upload .uploadImg:after{-moz-transform: rotate(-90deg);-webkit-transform: rotate(-90deg);-ms-transform: rotate(-90deg);-o-transform: rotate(-90deg);transform: rotate(-90deg);}
|
|
/* 不带有拖拽的样式 */
|
|
.add_upload{
|
|
border: 1px solid #DFDFDF;
|
|
width:6rem;
|
|
height:6rem;
|
|
margin-bottom:1rem;
|
|
display: inline-block;
|
|
position:relative;
|
|
}
|
|
.add_upload:hover{
|
|
cursor:pointer;
|
|
}
|
|
.add_imgBox{
|
|
|
|
width:100%;
|
|
height:100%;
|
|
display: block;
|
|
}
|
|
.single_main{
|
|
border-top:0px;
|
|
}
|
|
.info{color:#888; padding-top:1rem; font-size:1.2rem;}
|
|
|
|
|
|
|
|
|
|
|