vue-select-avatar/dist/vue-select-avatar.css

基于 vue 选择头像

.preview[data-v-ea39dbca]{overflow:hidden;position:relative;background:var(--bg)}.preview.backing .image[data-v-ea39dbca]{transition:transform .3s ease}.preview.round[data-v-ea39dbca]{border-radius:50%}.preview .image[data-v-ea39dbca]{position:absolute;left:0;top:0;transform-origin:left top;max-width:unset}.viewport[data-v-79ced8d8]{--line-color: #fff;--point-size: 10px;--mask-color: rgba(0, 0, 0, .5);--bg-color: #000;position:relative;overflow:hidden;background-color:var(--bg-color)}.viewport[data-v-79ced8d8],.viewport[data-v-79ced8d8] *,.viewport[data-v-79ced8d8] *:before,.viewport[data-v-79ced8d8] *:after{margin:0;padding:0;box-sizing:border-box}.viewport[data-v-79ced8d8]:not(.fixed-image){cursor:grab}.viewport.image-moving[data-v-79ced8d8]{cursor:grabbing}.viewport:not(.view-resizing) .consoles[data-v-79ced8d8]{cursor:grab}.viewport.view-moving[data-v-79ced8d8],.viewport.view-moving .consoles[data-v-79ced8d8]{cursor:grabbing}.viewport.view-resizing.top-left[data-v-79ced8d8]{cursor:nwse-resize}.viewport.view-resizing.top-right[data-v-79ced8d8],.viewport.view-resizing.bottom-left[data-v-79ced8d8]{cursor:nesw-resize}.viewport.view-resizing.bottom-right[data-v-79ced8d8]{cursor:nwse-resize}.viewport.grid[data-v-79ced8d8]{background-image:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQAQMAAAAlPW0iAAAAA3NCSVQICAjb4U/gAAAABlBMVEXMzMz////TjRV2AAAACXBIWXMAAArrAAAK6wGCiw1aAAAAHHRFWHRTb2Z0d2FyZQBBZG9iZSBGaXJld29ya3MgQ1M26LyyjAAAABFJREFUCJlj+M/AgBVhF/0PAH6/D/HkDxOGAAAAAElFTkSuQmCC)}.viewport.backing .image[data-v-79ced8d8],.viewport.backing .inner-image[data-v-79ced8d8]{transition:transform .3s ease}.viewport .image[data-v-79ced8d8]{position:absolute;left:0;top:0;transform-origin:left top;pointer-events:none;-webkit-user-select:none;user-select:none;max-width:unset}.viewport .mask[data-v-79ced8d8]{position:absolute;left:0;top:0;width:101%;height:101%;background-color:var(--mask-color);pointer-events:none}.viewport .view[data-v-79ced8d8]{position:absolute;left:0;top:0;overflow:hidden;transform-origin:left top}.viewport .inner-image[data-v-79ced8d8]{position:absolute;left:0;top:0;transform-origin:left top;pointer-events:none;-webkit-user-select:none;user-select:none;max-width:unset}.viewport .consoles[data-v-79ced8d8]{position:absolute;left:0;top:0;transform-origin:left top;border:1px solid var(--line-color)}.viewport .consoles .point[data-v-79ced8d8]{position:absolute;width:var(--point-size);height:var(--point-size);border:1px solid var(--line-color)}.viewport .consoles .point.top-left[data-v-79ced8d8]{left:calc(0px - var(--point-size));top:calc(0px - var(--point-size));cursor:nwse-resize}.viewport .consoles .point.top-right[data-v-79ced8d8]{right:calc(0px - var(--point-size));top:calc(0px - var(--point-size));cursor:nesw-resize}.viewport .consoles .point.bottom-left[data-v-79ced8d8]{left:calc(0px - var(--point-size));bottom:calc(0px - var(--point-size));cursor:nesw-resize}.viewport .consoles .point.bottom-right[data-v-79ced8d8]{right:calc(0px - var(--point-size));bottom:calc(0px - var(--point-size));cursor:nwse-resize}