.#{$upload-head-prefix-cls} {
     &__header {
       display: flex;
       align-items: center;
     }

     &__body {
       display: flex;
       align-items: stretch;
       padding: 20px 0;

       .#{$upload-head-prefix-cls}__fixed-area {
         display: flex;
         align-items: center;
         justify-content: center;
         width: 480px;
         height: 260px;
         margin-right: 20px;
         background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAwAAAAMCAYAAABWdVznAAAABGdBTUEAALGPC/xhBQAAACBjSFJNAAB6JgAAgIQAAPoAAACA6AAAdTAAAOpgAAA6mAAAF3CculE8AAAABmJLR0QAAAAAAAD5Q7t/AAAACXBIWXMAAAsSAAALEgHS3X78AAAAaklEQVQoz82QOwrAMAxDpdhLzpP7T7lGzhESMLhTC2lModCh2vwRSI+1VkegUgpyzsvOzJDwUj806NPR3beZvfeQUmsNc841TkrQO7pTY4zQEHZwd5Dc9iQ/okRyK3xRMrMwkohARNZnVRyD0ChzaLhTwAAAAABJRU5ErkJggg==);
       }

       .#{$upload-head-prefix-cls}__preview-area {
         display: flex;
         flex-direction: column;
         justify-content: space-between;

         .#{$upload-head-prefix-cls}__size-list {
           list-style: none;
           margin-bottom: 0;
           padding-left: 0;

           .#{$upload-head-prefix-cls}__size-item {
             display: inline-block;
             margin-right: 48px;
             vertical-align: bottom;
             text-align: left;

             .#{$upload-head-prefix-cls}__priview-img {
               width: 100px;
               height: 100px;
               padding: 6px;
               border: 1px solid $gray-lightest;
               background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAwAAAAMCAYAAABWdVznAAAABGdBTUEAALGPC/xhBQAAACBjSFJNAAB6JgAAgIQAAPoAAACA6AAAdTAAAOpgAAA6mAAAF3CculE8AAAABmJLR0QAAAAAAAD5Q7t/AAAACXBIWXMAAAsSAAALEgHS3X78AAAAaklEQVQoz82QOwrAMAxDpdhLzpP7T7lGzhESMLhTC2lModCh2vwRSI+1VkegUgpyzsvOzJDwUj806NPR3beZvfeQUmsNc841TkrQO7pTY4zQEHZwd5Dc9iQ/okRyK3xRMrMwkohARNZnVRyD0ChzaLhTwAAAAABJRU5ErkJggg==);
               background-clip: content-box;
               margin-bottom: 8px;

               img {
                 display: block;
                 width: 100%;
                 height: 100%;
               }

               &--rounded {
                 border-radius: 50%;

                 img {
                   border-radius: 50%;
                 }
               }
             }
           }
         }
       }
     }

     &__footer {
       display: flex;
     }

     &__cropper {
       position: relative;
       width: 100%;
       height: 100%;
       box-sizing: border-box;
       user-select: none;
       -webkit-user-select: none;
       -moz-user-select: none;
       -ms-user-select: none;
       direction: ltr;
       touch-action: none;
       text-align: left;

       &-box,
       &-box-canvas,
       &-drag-box,
       &-crop-box,
       &-face {
         position: absolute;
         top: 0;
         right: 0;
         bottom: 0;
         left: 0;
         user-select: none;
       }

       &-box-canvas img {
         position: relative;
         text-align: left;
         user-select: none;
         transform: none;
         max-width: none;
         max-height: none;
       }

       &-box {
         overflow: hidden;
       }

       &-move {
         cursor: move;
       }

       &-crop {
         cursor: crosshair;
       }

       &-modal {
         background: rgba(0, 0, 0, 0.5);
       }

       &-view-box {
         display: block;
         overflow: hidden;
         width: 100%;
         height: 100%;
         border: 1px solid #0B82FF;
         user-select: none;
       }

       &-view-box img {
         user-select: none;
         text-align: left;
         max-width: none;
         max-height: none;
       }

       &-face {
         top: 0;
         left: 0;
         background-color: #fff;
         opacity: 0.1;
       }

       &-info {
         position: absolute;
         left: 0px;
         min-width: 65px;
         text-align: center;
         color: white;
         line-height: 20px;
         background-color: rgba(0, 0, 0, 0.8);
         font-size: 12px;
       }

       &-line {
         position: absolute;
         display: block;
         width: 100%;
         height: 100%;
         background-color: #0B82FF;
       }

       .line-w {
         top: 0px;
         left: 0;
         height: 1px;
         cursor: n-resize;
       }

       .line-a {
         top: 0;
         left: 0px;
         width: 1px;
         cursor: w-resize;
       }

       .line-s {
         bottom: 0px;
         left: 0;
         height: 1px;
         cursor: s-resize;
       }

       .line-d {
         top: 0;
         right: 0px;
         width: 1px;
         cursor: e-resize;
       }

       &-point {
         position: absolute;
         width: 5px;
         height: 5px;
         background-color: #0B82FF;
       }

       .point1 {
         top: -2px;
         left: -2px;
         cursor: nw-resize;
       }

       .point2 {
         top: -2px;
         left: 50%;
         margin-left: -2px;
         cursor: n-resize;
       }

       .point3 {
         top: -2px;
         right: -2px;
         cursor: ne-resize;
       }

       .point4 {
         top: 50%;
         left: -2px;
         margin-top: -2px;
         cursor: w-resize;
       }

       .point5 {
         top: 50%;
         right: -2px;
         margin-top: -2px;
         cursor: e-resize;
       }

       .point6 {
         bottom: -2px;
         left: -2px;
         cursor: sw-resize;
       }

       .point7 {
         bottom: -2px;
         left: 50%;
         margin-left: -2px;
         cursor: s-resize;
       }

       .point8 {
         bottom: -2px;
         right: -2px;
         cursor: se-resize;
       }
     }
   }