@charset 'utf-8'; .crop-block { position: relative; display: inline-block; } .crop-add-img { position: relative; display: inline-block; width: 80px; height: 24px; line-height: 24px; text-align: center; font-size: 12px; border: 1px solid #2F86C9; color: #2F86C9; cursor: pointer; } .crop-img-block { display: inline-block; width: 50px; height: 50px; margin: 5px; } .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: 500px; margin: 50px auto 0 auto; background-color: #fff; } .crop-close { position: absolute; right: 10px; top: 10px; border: 1px solid #2F86C9; color: #2F86C9; font-size: 12px; padding: 0 5px; height: 24px; line-height: 24px; cursor: pointer; } .crop-input { position: relative; padding: 10px; text-align: center; border-bottom: 1px solid #2F86C9; } .crop-area { position: relative; padding-left: 200px; border-bottom: 1px solid #2F86C9; } .crop-sure-btn { margin: 10px 0 0 350px; }