GZ/nwyj/WebContent/css/icing/component.css

@charset "utf-8";
.content { max-width: 700px; margin: 0 auto; text-align: center; }
.component { position: relative; display:inline-block; float:left;
	background: url(/nwyj/images/icing/btn/gridme.png) repeat center center;
	padding: 10px; height: 270px; border: 3px solid #49708A;
	width: 500px; overflow: hidden; margin: 0; }
*, *:after, *:before { -webkit-box-sizing: border-box; box-sizing: border-box; }
.clearfix:before, .clearfix:after { content: ''; display: table; }
.clearfix:after { clear: both; }
.hidden_yes{ display:none; }

.win_img_box{ width:33px; height:33px; display:inline-block; float:right; border:3px solid #49708A; margin:110px 70px 60px 0; }
.a-tip{ clear:both; padding:20px 0;}

/* 图片边框线  */
.resize-container { position: relative; display: inline-block; cursor: move; margin: 0 auto; }
.resize-container img { display: block }
.resize-container:hover img, .resize-container:active img { outline: 2px dashed rgba(222,60,80,.9); }
.resize-handle-ne, .resize-handle-se, .resize-handle-nw, .resize-handle-sw {
    position: absolute; display: block; width: 10px; height: 10px; background: rgba(222,60,80,.9); z-index: 999; }
.resize-handle-nw { top: -5px; left: -5px; cursor: nw-resize; }
.resize-handle-sw { bottom: -5px; left: -5px; cursor: sw-resize; }
.resize-handle-ne { top: -5px; right: -5px; cursor: ne-resize; }
.resize-handle-se { bottom: -5px; right: -5px; cursor: se-resize; }

/* 截图框  */
.overlay { position: absolute; left: 50%; top: 50%; margin-left: -70px; margin-top: -70px; z-index: 999;
		   width: 30px; height: 30px; border: solid 2px rgba(222,60,80,.9); box-sizing: content-box; pointer-events: none; }
		   
/* 截图准线左右  */
.overlay:after, .overlay:before { 
	content: ''; position: absolute; display: block; width:33px; height: 10px;
    border-left: dashed 1px rgba(222,60,80,.9);
	border-right: dashed 1px rgba(222,60,80,.9); }
.overlay:before { top: 0; margin-left: -1px; margin-top: -14px; }
.overlay:after { bottom: 0; margin-left: -1px; margin-bottom: -14px; }

/* 截图准线上下  */
.overlay-inner:after, .overlay-inner:before { 
	content: ''; position: absolute; display: block; width: 30px; height: 32px;
    border-top: dashed 1px rgba(222,60,80,.9); border-bottom: dashed 1px rgba(222,60,80,.9); }
.overlay-inner:before { left:0; margin-left:-14px; margin-top: -1px; }
.overlay-inner:after{ right: 0; margin-right: -14px; margin-top: -1px; }

/* 上传按钮  */
.dis_span{ position:fixed; bottom:200px; }
.upload_img_dis_span{ position:fixed; top:105px; text-shadow: 0.5px 0.5px 0 #6b6969, 0px 0.5px 0 #6b6969, -0.5px -0.5px 0 #6b6969, -0.5px -0.5px 0 #6b6969, -0.5px 0.5px 0 #6b6969, 0.5px -0.5px 0 #6b6969; color: #020202; font-size:17px; }
.file { position: absolute; right: 130px; bottom: 125px; display: inline-block; background: #de3c50; border:none; width: 50px;
    	padding: 4px;
        border-radius: 4px; overflow: hidden; color: #f2f2f2; text-decoration: none; text-indent: 0; line-height: 20px; }
.file input { position: absolute; font-size: 100px; right: 0; top: 0; opacity: 0; }
.file:hover, .btn-crop:hover { color: #ffffff; text-decoration: none; background:#b52638; }

.btn-crop {
	position: absolute;
	vertical-align: bottom;
	right: 67px;
	bottom: 125px;
	padding: 6px 10px;
	z-index: 999;
	background-color: rgb(222,60,80);
	border: none;
	border-radius: 5px;
	color: #FFF;
	width: 55px;
    height: 30px;
}

.js-save{ right: 5px;}

.btn-crop img {
	vertical-align: middle;
	margin-left: 8px;
}