.fav-box { width: 100%; height: 370px; } .input-box { width: 100%; height: 40px; line-height: 40px; margin-bottom: 8px; } .input-box > div, .img-box > div, .img-box-right > div { float: left; } .img-box { width: 100%; height: 320px; } .img-box-left { width: 120px; height: 100%; } .img-box-right { width: 720px; height: 100%; margin-left: 10px; } .img-box-left > div { cursor: pointer; width: 100px; margin-bottom: 10px; padding: 5px 0px; text-align: center; margin-left: 10px; } .img-content { width: 680px; height: 100%; background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQAQMAAAAlPW0iAAAAA3NCSVQICAjb4U/gAAAABlBMVEXMzMz////TjRV2AAAACXBIWXMAAArrAAAK6wGCiw1aAAAAHHRFWHRTb2Z0d2FyZQBBZG9iZSBGaXJld29ya3MgQ1M26LyyjAAAABFJREFUCJlj+M/AgBVhF/0PAH6/D/HkDxOGAAAAAElFTkSuQmCC); } .img-action { width: 40px; height: 100%; } #imgUpload { position: absolute; top: 0; right: 0; opacity: 0; height: 100%; width: 100%; cursor: pointer; } .file-btn { width: 30px; height: 30px; line-height: 30px; text-align: center; color: #fff; background: #1c84c6; cursor: pointer; border-radius: 3px; background-repeat: no-repeat; background-size: 20px 20px; background-position: center center; } .img-btn { width: 30px; height: 30px; margin-left: 5px; position: relative; cursor: pointer; margin-bottom: 15px; } .file-open{ background-image: url("../../../AFrontEnd/plugins/cropper/icon/upload.png"); } .file-copy{ background-image: url("../../../AFrontEnd/plugins/cropper/icon/copy.png"); } .file-reset{ background-image: url("../../../AFrontEnd/plugins/cropper/icon/reset.png"); } .file-out{ background-image: url("../../../AFrontEnd/plugins/cropper/icon/zoomOut.png"); } .file-in{ background-image: url("../../../AFrontEnd/plugins/cropper/icon/zoomIn.png"); } .file-delete{ background-image: url("../../../AFrontEnd/plugins/cropper/icon/delete.png"); } .img-tips{ width: 100%; height: 320px; line-height: 320px; text-align: center; font-size: 36px; color: #aaaaaa; z-index: 9999; }