/*
 * @Author: fegq
 * @Date: 2021-09-29 14:14:45
 * @LastEditors: fegq
 * @LastEditTime: 2021-09-29 14:47:18
 * @Description: This is a file comment!
 * @Version: v0.0.1
 */
.clip-box{position:relative;box-sizing:border-box;width:100%;height:100%;overflow:hidden}.clip-bg{background:#eee;background-image:linear-gradient(45deg,#ccc 25%,transparent 0),linear-gradient(45deg,transparent 75%,#ccc 0),linear-gradient(45deg,#ccc 25%,transparent 0),linear-gradient(45deg,transparent 75%,#ccc 0);background-size:30px 30px;background-position:0 0,15px 15px,15px 15px,30px 30px}#clip-img{position:absolute;top:0;left:0;width:100%;height:100%}#clip-temp{opacity:0}.clip-img-shadow{position:absolute;background:rgba(0,0,0,.5)}.clip-img-area{position:absolute;box-sizing:border-box;background:0 0;border:2px dashed #fff;cursor:move}.clip-img-area::before{content:attr(data-pos);position:absolute;top:-24px;left:0;color:#fff;font-size:12px}.clip-img-area::after{content:attr(data-size);position:absolute;bottom:-24px;right:0;color:#fff;font-size:12px}.no-pos::after,.no-pos::before{display:none}.clip-img-area span{position:absolute;box-sizing:border-box;width:33%;height:33%;border-right:1px dashed rgba(255,255,255,.6);border-bottom:1px dashed rgba(255,255,255,.6)}.clip-img-area span:nth-child(1){left:0;top:0}.clip-img-area span:nth-child(2){left:33%;top:0}.clip-img-area span:nth-child(3){left:66.6%;top:0;border-right:none}.clip-img-area span:nth-child(4){left:0;top:33.3%}.clip-img-area span:nth-child(5){left:33.3%;top:33.3%}.clip-img-area span:nth-child(6){left:66.6%;top:33.3%}.clip-img-area span:nth-child(7){left:0;top:66.6%}.clip-img-area span:nth-child(8){left:33.3%;top:66.6%}.clip-img-area span:nth-child(9){left:66.6%;top:66.6%}.clip-img-area small{position:absolute;bottom:-1px;right:-1px;display:inline-block;width:8%;height:8%;background:#0511fc;cursor:nw-resize;z-index:2}.preview{position:relative;box-sizing:border-box;margin-top:20px;width:150px;height:150px;background:#eee;border:2px solid #ccc}