@charset 'utf-8'; .crop-block { position: relative; display: inline-block; } .crop-add-img { position: relative; border: 1px dashed #d9d9d9; width: 96px; height: 96px; border-radius: 4px; background-color: #fbfbfb; text-align: center; cursor: pointer; transition: border-color 0.3s ease; display: inline-block; vertical-align: top; margin-top: 2px; color: #999; } .crop-input{ height: 70px; line-height:70px; } .crop-input button{ float: left; } .selectFile { visibility: hidden; margin-top: -20px; } .crop-add-img:hover{ border-color: #2F86C9; } .crop-add-img>span{ display: inline-block; font-size: 18px; color: #999; margin-top: 16px; } .crop-img-block { position: relative; box-sizing: border-box; display: inline-block; width: 94px; height: 96px; margin:0 5px; padding: 8px; border-radius: 4px; border: 1px solid #d9d9d9; margin-top: 2px; } .crop-img-block:hover{ box-shadow: 0 0 3px #ccc; } .crop-img-block:hover span{ display: block; } .crop-img-block img{ width: 100%; height: 100%; position: absolute; left:0px; padding: 8px; top:0px; } .crop-img-block span{ cursor: pointer; position: absolute; padding: 8px; top:0px; left:0px; display: none; width: 92px; height: 94px; font-size: 24px; background: rgba(0, 0, 0, .3); color: #fff; line-height:84px; text-align: center; } .crop-img-block span .anticon{ color: #fff; } .crop-img-block span .anticon:hover{ color: #f00; } .crop-img { max-width: 100%; max-height: 100%; cursor: pointer; } .crop-box { position: fixed; left: 0; top: 0; width: 100%; height: 100%; z-index: 1000; } .crop-box-bg { position: absolute; left: 0; top: 0; width: 100%; height: 100%; background-color: #000; opacity: 0.5; } .crop-box-content { position: relative; width: 800px; height: 525px; margin: 100px auto 0 auto; background-color: #fff; } .crop-close { position: absolute; right: 10px; top: 10px; font-size: 30px; color: #666; padding: 0 5px; height: 24px; line-height: 24px; cursor: pointer; } .crop-close:hover{ color: #f00; } .crop-input { position: relative; padding: 10px; text-align: center; border-bottom: 1px solid #ccc; } .crop-area { position: relative; padding-left: 200px; border-bottom: 1px solid #ccc; } .btnGrounpCrop{ width: 100%; margin: 0!important; text-align: center; } .btnGrounpCrop button{ margin: 10px ; }