@charset "UTF-8";
.drag-wrapper-box[data-v-04900735] {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}
.drag-container[data-v-04900735] {
  transform-origin: 0 0;
  transition: transform 0.05s ease-out;
  user-select: none; /* 防止拖拽时选中文字 */
  position: relative;
}
.drag-container img[data-v-04900735] {
  user-drag: none; /* 标准写法 */
  -webkit-user-drag: none; /* Safari/Chrome */
  pointer-events: none; /* 可选：防止鼠标事件干扰 */
}.upload-img[data-v-c21ff441] {
  width: 100%;
  height: 100%;
  position: relative;
  --normal-bg-color: #2a2f3a;
  --hover-bg-color: #404652;
  background-color: var(--normal-bg-color);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.2s;
}
.upload-img > .loading-mask[data-v-c21ff441] {
  position: absolute;
  left: 0;
  top: 0;
  background: #2a2f3a;
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}
.upload-img > .loading-mask > .ali-icon[data-v-c21ff441] {
  font-size: 24px;
  margin-bottom: 12px;
  animation: rotate 1.5s linear infinite;
}
.upload-img > .loading-mask > .tips[data-v-c21ff441] {
  font-weight: 400;
  font-size: 14px;
  color: #a6acb8;
  line-height: 16px;
}
.upload-img > .trigger-area[data-v-c21ff441] {
  cursor: pointer;
  width: 100%;
  height: 100%;
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}
.upload-img > .trigger-area > .upload-input[data-v-c21ff441] {
  opacity: 0;
  width: 100%;
  height: 100%;
  position: absolute;
  left: 0;
  top: 0;
  cursor: pointer;
}
.upload-img > .trigger-area > .ali-icon[data-v-c21ff441] {
  color: #a6acb8;
  font-size: 32px;
  margin-bottom: 16px;
}
.upload-img > .trigger-area .tips > .row[data-v-c21ff441] {
  font-size: 14px;
  color: #a6acb8;
  line-height: 20px;
  text-align: center;
}
.upload-img > .trigger-area .tips > .row[data-v-c21ff441]:not(:last-child) {
  margin-bottom: 4px;
}
.upload-img > .trigger-area[data-v-c21ff441]:hover, .upload-img > .trigger-area.drag[data-v-c21ff441] {
  background-color: var(--hover-bg-color);
}
.upload-img > .trigger-area:hover > .ali-icon[data-v-c21ff441], .upload-img > .trigger-area.drag > .ali-icon[data-v-c21ff441] {
  color: #4dfec1;
}
.upload-img > .pic[data-v-c21ff441] {
  object-fit: cover;
  cursor: pointer;
}
.upload-img > .del-btn[data-v-c21ff441] {
  border-radius: 4px;
  font-size: 16px;
  position: absolute;
  bottom: 14px;
  right: 14px;
  display: none;
}
.upload-img:hover > .del-btn[data-v-c21ff441] {
  display: block;
}
/* 图片上传区域 */
.upload-container[data-v-15986c89] {
  height: 390px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #0f1218;
  border-radius: 8px;
}

/* 画布 */
.canvas-container[data-v-15986c89] {
  background: #0f1218;
  border-radius: 8px;
  overflow: hidden;
  height: 462px;
  position: relative;
  /* 功能按钮 */
}
.canvas-container .draw-area[data-v-15986c89] {
  display: flex;
  align-items: center;
  justify-content: center;
}
.canvas-container .img-box[data-v-15986c89] {
  display: flex;
  margin: 0 auto;
  position: relative;
}
.canvas-container .img-box > img[data-v-15986c89] {
  width: 100%;
  height: 100%;
  /* object-fit: contain; */
}
.canvas-container .img-box > .canvas-mask[data-v-15986c89] {
  position: absolute;
  width: 100%;
  height: 100%;
  opacity: 0.6;
}
.canvas-container > .tools-box[data-v-15986c89] {
  position: absolute;
  bottom: 12px;
  width: 100%;
  padding: 0 12px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  pointer-events: none;
  /* 绘画路径尺寸控制器 */
  /* 缩放控件 */
}
.canvas-container > .tools-box[data-v-15986c89] * {
  pointer-events: auto;
}
.canvas-container > .tools-box > .draw-path-size-controller[data-v-15986c89] {
  cursor: auto;
  overflow: hidden;
  transition: all 0.2s;
  position: absolute;
  top: -10px;
  left: 12px;
  transform: translateY(-100%);
  padding: 12px;
  background: #2a2f3a;
  border-radius: 4px;
  width: 280px;
}
.canvas-container > .tools-box > .draw-path-size-controller > .wrapper[data-v-15986c89] {
  display: flex;
  align-items: center;
  /* 画笔 */
  /* 橡皮擦 */
}
.canvas-container > .tools-box > .draw-path-size-controller > .wrapper[data-v-15986c89] .el-slider {
  margin: 0 12px;
  --el-slider-main-bg-color: #7e8593;
  --el-slider-runway-bg-color: rgba(255, 255, 255, 0.1);
  --el-slider-height: 12px;
  --el-slider-border-radius: 2px;
}
.canvas-container > .tools-box > .draw-path-size-controller > .wrapper[data-v-15986c89] .el-slider .el-slider__runway {
  overflow: hidden;
}
.canvas-container > .tools-box > .draw-path-size-controller > .wrapper[data-v-15986c89] .el-slider .el-slider__button-wrapper {
  opacity: 0;
}
.canvas-container > .tools-box > .draw-path-size-controller > .wrapper.brush .ali-icon[data-v-15986c89] {
  font-size: 16px;
}
.canvas-container > .tools-box > .draw-path-size-controller > .wrapper.rubber .ali-icon.small[data-v-15986c89] {
  font-size: 16px;
}
.canvas-container > .tools-box > .draw-path-size-controller > .wrapper.rubber .ali-icon.big[data-v-15986c89] {
  font-size: 20px;
}
.canvas-container > .tools-box > .draw-path-size-controller.hide[data-v-15986c89] {
  width: 0;
  padding: 0;
}
.canvas-container > .tools-box > .left[data-v-15986c89] {
  display: flex;
  align-items: center;
  gap: 8px;
}
.canvas-container > .tools-box .items-box[data-v-15986c89] {
  background: #2a2f3a;
  border-radius: 4px;
  display: flex;
  align-items: center;
  cursor: auto;
}
.canvas-container > .tools-box .items-box > .line[data-v-15986c89] {
  width: 1px;
  height: 10px;
  background-color: rgba(255, 255, 255, 0.2);
}
.canvas-container > .tools-box .item[data-v-15986c89] {
  width: 36px;
  height: 36px;
  border-radius: 4px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}
.canvas-container > .tools-box .item > .ali-icon[data-v-15986c89] {
  opacity: 0.6;
  font-size: 20px;
}
.canvas-container > .tools-box .item[data-v-15986c89]:hover, .canvas-container > .tools-box .item.active[data-v-15986c89] {
  background: #59606e;
}
.canvas-container > .tools-box .item:hover > .ali-icon[data-v-15986c89], .canvas-container > .tools-box .item.active > .ali-icon[data-v-15986c89] {
  opacity: 1;
}
.canvas-container > .tools-box .item.disable[data-v-15986c89] {
  cursor: not-allowed;
}
.canvas-container > .tools-box .item.disable > .ali-icon[data-v-15986c89] {
  opacity: 0.2;
}
.canvas-container > .tools-box > .scale-controller[data-v-15986c89] {
  /* 缩放选择器 */
}
.canvas-container > .tools-box > .scale-controller .item[data-v-15986c89] {
  width: 36px;
  height: 36px;
}
.canvas-container > .tools-box > .scale-controller .item > .ali-icon[data-v-15986c89] {
  opacity: 1;
  font-size: 16px;
}
.canvas-container > .tools-box > .scale-controller .item[data-v-15986c89]:hover {
  background: #59606e;
}
.canvas-container > .tools-box > .scale-controller .item:hover.disabled[data-v-15986c89] {
  pointer-events: none;
  cursor: not-allowed;
}
.canvas-container > .tools-box > .scale-controller .item:hover.disabled > .ali-icon[data-v-15986c89] {
  opacity: 0.2;
}
.canvas-container > .tools-box > .scale-controller[data-v-15986c89] .scale-select {
  width: 50px;
  margin: 0 2px;
  --el-fill-color-blank: #2a2f3a;
}
.canvas-container > .tools-box > .scale-controller[data-v-15986c89] .scale-select .el-select__wrapper {
  --el-text-color-regular: #fff;
  --el-text-color-placeholder: #fff;
  box-shadow: none;
  min-height: 36px;
  padding: 0;
  /* 获取焦点 */
}
.canvas-container > .tools-box > .scale-controller[data-v-15986c89] .scale-select .el-select__wrapper .el-select__selection {
  justify-content: center;
  text-align: center;
}
.canvas-container > .tools-box > .scale-controller[data-v-15986c89] .scale-select .el-select__wrapper.is-focused {
  --el-fill-color-blank: #59606e;
}
.canvas-container > .tools-box > .scale-controller[data-v-15986c89] .scale-select .el-select__suffix {
  display: none;
}
/* 预览图画布区域 */
.canvas-box[data-v-fc4c1b9f] {
  background: #0f1218;
  border-radius: 8px;
  height: 390px;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  user-select: none;
}
.canvas-box .max-canvas[data-v-fc4c1b9f] {
  position: relative;
  width: 0;
  height: 0;
}
.canvas-box .max-canvas > .canvas-container[data-v-fc4c1b9f] {
  position: absolute;
  background-image: url("data:image/jpeg;base64,/9j/4AAQSkZJRgABAQAAAQABAAD/4gHYSUNDX1BST0ZJTEUAAQEAAAHIAAAAAAQwAABtbnRyUkdCIFhZWiAH4AABAAEAAAAAAABhY3NwAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAQAA9tYAAQAAAADTLQAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAlkZXNjAAAA8AAAACRyWFlaAAABFAAAABRnWFlaAAABKAAAABRiWFlaAAABPAAAABR3dHB0AAABUAAAABRyVFJDAAABZAAAAChnVFJDAAABZAAAAChiVFJDAAABZAAAAChjcHJ0AAABjAAAADxtbHVjAAAAAAAAAAEAAAAMZW5VUwAAAAgAAAAcAHMAUgBHAEJYWVogAAAAAAAAb6IAADj1AAADkFhZWiAAAAAAAABimQAAt4UAABjaWFlaIAAAAAAAACSgAAAPhAAAts9YWVogAAAAAAAA9tYAAQAAAADTLXBhcmEAAAAAAAQAAAACZmYAAPKnAAANWQAAE9AAAApbAAAAAAAAAABtbHVjAAAAAAAAAAEAAAAMZW5VUwAAACAAAAAcAEcAbwBvAGcAbABlACAASQBuAGMALgAgADIAMAAxADb/2wBDAAEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQH/2wBDAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQH/wAARCABIAEsDASIAAhEBAxEB/8QAGwABAQEBAQADAAAAAAAAAAAAAAYICQUEBwr/xAAwEAABAQQFCwUBAQAAAAAAAAAABgMFERIBBAc3tQITFBY0ZHR2pLPjMTZxcrYVMv/EABoBAAIDAQEAAAAAAAAAAAAAAAIEAAEDBQb/xAAvEQACAQAHBAkFAAAAAAAAAAAAAQIEMTJxcrHBAzNRsgUREmFzgaHC0SFBQkNS/9oADAMBAAIRAxEAPwD8q1nd36F5OTGCVEsSOs7u/QvJyYwSoliel2e72eCPKjkSrd7zAADKPCUOws+JZ9tsRhZqHYWfEs+22IwxnaflkiAAAkBha2W8lR/DmwB1G6TC1st5Kj+HNgDqEqdu4Y/axqi25YdUdCLO7v0LycmMEqJYkdZ3d+heTkxglRLE6Wz3ezwR5ULSrd7zAADKPCUOws+JZ9tsRhZqHYWfEs+22IwxnaflkiAAAkBha2W8lR/DmwB1G6TC1st5Kj+HNgDqEqdu4Y/axqi25YdUbkQKgzKFRbHRJs0k06ym0iE2bdFTyJoZmmE0sYRphGEafUrdZNy6nwH1eiPZaR5ZcWF1UqB2EpKEF1/jH7Lgu4WlW73mVGsm5dT4BrJuXU+AlwF25cfRfBRUaV/ejU5NEzdGk5ybPxkpoZySSsYRz0001MJYS0xjQ1b33pvOfFTu2teFy+8wLIKKUk2/q+vRcCEvq3vvTecat7703nKgBdiPD1fyQl9W996bznPa3Cr6LaiqKvPnM1S5aJ5ZZop505UZZsqHrD/VJ0xOa9vd7St+zk/OOcQ6QilsodS/Z3/zIaotuWHVGsER7LSPLLiwuqlQS6I9lpHllxYXVSoN4WI4Y5IWlW73mAAEUe8ndta8Ll95gWRGp3bWvC5feYFkawqd+iIAAGQHNe3u9pW/ZyfnHOdKDmvb3e0rfs5PzjnOf0juoeIuWQ1RbcsOqNYIj2WkeWXFhdVKgA2hYjhjkhaVbveYAARR7yd21rwuX3mBZAGsKnfoiAABkBzXt7vaVv2cn5xzgHP6R3UPEXLIaotuWHVH/9k=");
  background-size: 16px;
  border: 1px solid rgba(255, 255, 255, 0.3);
  width: 0;
  height: 0;
  box-sizing: border-box;
  left: 0;
  top: 0;
  bottom: 0;
  right: 0;
  margin: auto;
  z-index: 999;
  /* 边框装饰元素 */
}
.canvas-box .max-canvas > .canvas-container > .decorate[data-v-fc4c1b9f] {
  position: absolute;
  /* 角 */
  /* 块 */
}
.canvas-box .max-canvas > .canvas-container > .decorate.angle[data-v-fc4c1b9f] {
  width: 8px;
  height: 8px;
  border: 2px solid #dce1eb;
}
.canvas-box .max-canvas > .canvas-container > .decorate.chunk[data-v-fc4c1b9f] {
  background: #c6ccd7;
}
.canvas-box .max-canvas > .canvas-container > .decorate.top-left[data-v-fc4c1b9f] {
  left: -2px;
  top: -2px;
  border-right: none;
  border-bottom: none;
  cursor: nwse-resize;
}
.canvas-box .max-canvas > .canvas-container > .decorate.top-center[data-v-fc4c1b9f] {
  left: 50%;
  transform: translateX(-50%);
  top: -2px;
  border-right: none;
  border-bottom: none;
  width: 14px;
  height: 2px;
  cursor: ns-resize;
}
.canvas-box .max-canvas > .canvas-container > .decorate.top-right[data-v-fc4c1b9f] {
  right: -2px;
  top: -2px;
  border-left: none;
  border-bottom: none;
  cursor: nesw-resize;
}
.canvas-box .max-canvas > .canvas-container > .decorate.center-left[data-v-fc4c1b9f] {
  left: -2px;
  top: 50%;
  transform: translateY(-50%);
  width: 2px;
  height: 14px;
  cursor: ew-resize;
}
.canvas-box .max-canvas > .canvas-container > .decorate.center-right[data-v-fc4c1b9f] {
  right: -2px;
  top: 50%;
  transform: translateY(-50%);
  width: 2px;
  height: 14px;
  cursor: ew-resize;
  z-index: 100;
}
.canvas-box .max-canvas > .canvas-container > .decorate.bottom-left[data-v-fc4c1b9f] {
  left: -2px;
  bottom: -2px;
  border-top: none;
  border-right: none;
  cursor: nesw-resize;
}
.canvas-box .max-canvas > .canvas-container > .decorate.bottom-center[data-v-fc4c1b9f] {
  bottom: -2px;
  left: 50%;
  transform: translateX(-50%);
  width: 14px;
  height: 2px;
  cursor: ns-resize;
}
.canvas-box .max-canvas > .canvas-container > .decorate.bottom-right[data-v-fc4c1b9f] {
  right: -2px;
  bottom: -2px;
  border-top: none;
  border-left: none;
  cursor: nwse-resize;
  z-index: 100;
}
.canvas-box .max-canvas .preview-content[data-v-fc4c1b9f] {
  position: absolute;
  transform-origin: 0 0;
  height: 0;
  width: 0;
  user-select: none;
  z-index: 999;
}
.canvas-box .max-canvas .preview-content .cover-img[data-v-fc4c1b9f] {
  width: 100%;
  height: 100%;
}
.canvas-box .scale-des[data-v-fc4c1b9f] {
  font-weight: 500;
  font-size: 12px;
  color: #a6acb8;
  position: absolute;
  top: 12px;
  left: 12px;
  z-index: 9999;
}
.canvas-box .clear[data-v-fc4c1b9f] {
  width: 20px;
  height: 20px;
  position: absolute;
  right: 12px;
  top: 12px;
  cursor: pointer;
  user-select: none;
  z-index: 9999;
}
.canvas-box .clear > img[data-v-fc4c1b9f] {
  width: 20px;
  height: 20px;
}
.canvas-box .scale-box[data-v-fc4c1b9f] {
  display: flex;
  align-items: center;
  position: absolute;
  bottom: 8px;
  gap: 8px;
  z-index: 9999;
}
.canvas-box .scale-box .scale-item[data-v-fc4c1b9f] {
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  user-select: none;
  backdrop-filter: blur(10px);
  width: 40px;
  height: 24px;
  background: rgba(64, 70, 82, 0.4);
  border-radius: 4px;
  font-weight: 500;
  font-size: 12px;
  color: #c6ccd7;
}
.canvas-box .scale-box .active[data-v-fc4c1b9f] {
  background: #404652;
}

/* 图片上传 */
[data-v-fc4c1b9f] .upload-img {
  margin: 0 auto;
}

/* 比例选择 */
.proportion-options[data-v-fc4c1b9f] {
  user-select: none;
  margin-top: 20px;
  display: flex;
  width: fit-content;
  gap: 24px;
  height: 52px;
  padding: 0 20px 8px;
  background: #2a2f3a;
  border-radius: 8px;
  border: 1px solid rgba(255, 255, 255, 0.15);
  margin-bottom: 20px;
}
.proportion-options > .item[data-v-fc4c1b9f] {
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  cursor: pointer;
}
.proportion-options > .item > .ico-box[data-v-fc4c1b9f] {
  flex-grow: 1;
  display: flex;
  justify-content: center;
  align-items: center;
}
.proportion-options > .item > .ico-box > .ico[data-v-fc4c1b9f] {
  border: 1px solid rgba(255, 255, 255, 0.3);
  border-radius: 2px;
}
.proportion-options > .item > .label[data-v-fc4c1b9f] {
  font-weight: 400;
  font-size: 12px;
  color: #a6acb8;
  line-height: 12px;
}
.proportion-options > .item.active > .ico-box > .ico[data-v-fc4c1b9f] {
  border: 1px solid #ffffff;
}
.proportion-options > .item.active > .label[data-v-fc4c1b9f] {
  color: #ffffff;
}

/* 扩出内容描述输入 */
.desc-inp[data-v-fc4c1b9f] {
  min-height: 60px;
  --el-border-radius-base: 8px;
}
.desc-inp[data-v-fc4c1b9f] .el-textarea__inner {
  --el-input-text-color: #a6acb8;
  border: 1px solid rgba(255, 255, 255, 0.15);
  padding: 22px 20px;
  background-color: #2a2f3a;
  color: #ffffff;
  box-shadow: none;
  font-weight: 400;
  font-size: 16px;
  line-height: 16px;
  transition: all 0.2s;
}
.desc-inp[data-v-fc4c1b9f] .el-textarea__inner.is-focus {
  background-color: transparent;
}