.img-area{
  display: flex;
  flex-wrap: wrap;
  gap: 16rpx;
  display: flex;
  justify-content: flex-end;
}
.img-area .item{
  width: 100rpx;height:100rpx;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  border-radius: 12rpx;
  position: relative;
  overflow: visible;
}

.img-area .item .progress{
  position: absolute;
  top:0;left:0;
  width:100%;
  z-index: 1;
}
.img-area .item .close-area{
  position: absolute;
  right:-16rpx;top:-16rpx;
  z-index: 2;
  padding:5rpx;
  display: flex;
  align-items: center;
  overflow: visible;
}
.img-area .item .close-area .icon{
  width:28rpx;height:28rpx;
  border-radius: 50%;
  background-color: rgba(153, 153, 153, 0.8);
  -webkit-mask:url("data:image/svg+xml,%3C%3Fxml%20version%3D%221.0%22%20standalone%3D%22no%22%3F%3E%3C%21DOCTYPE%20svg%20PUBLIC%20%22-//W3C//DTD%20SVG%201.1//EN%22%20%22http%3A//www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd%22%3E%3Csvg%20t%3D%221741949551743%22%20class%3D%22icon%22%20viewBox%3D%220%200%201024%201024%22%20version%3D%221.1%22%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20p-id%3D%2225816%22%20xmlns%3Axlink%3D%22http%3A//www.w3.org/1999/xlink%22%20width%3D%22128%22%20height%3D%22128%22%3E%3Cpath%20d%3D%22M512%20992A480.512%20480.512%200%200%201%2032%20512%20480.512%20480.512%200%200%201%20512%2032a480.512%20480.512%200%200%201%20480%20480%20480.512%20480.512%200%200%201-480%20480z%20m0-434.624l135.68%20135.68a32%2032%200%200%200%2022.72%209.344%2032%2032%200%200%200%2022.528-9.344%2032%2032%200%200%200%209.344-22.592%2032%2032%200%200%200-9.344-22.656L557.184%20511.936l135.744-135.68a32%2032%200%200%200%209.472-22.784%2031.488%2031.488%200%200%200-9.472-22.464%2031.552%2031.552%200%200%200-22.656-9.472%2031.552%2031.552%200%200%200-22.656%209.472L511.936%20466.88%20376.064%20331.008a31.552%2031.552%200%200%200-22.656-9.472%2031.488%2031.488%200%200%200-22.592%209.472%2032%2032%200%200%200%200%2045.248l135.872%20135.68-135.872%20135.872a31.168%2031.168%200%200%200-9.344%2022.464%2031.616%2031.616%200%200%200%209.344%2022.72%2032%2032%200%200%200%2022.656%209.344A32%2032%200%200%200%20376%20692.992l135.872-135.68z%22%20p-id%3D%2225817%22%3E%3C/path%3E%3C/svg%3E") center/contain no-repeat;
  background-position:center;
  background-size:contain;
  background-repeat: no-repeat;
  /* center/contain no-repeat */
}
.img-area .item.loading::after{
  content: '';
  position: absolute;
  width:100%;height:100%;
  left:0;top:0;
  background-color: rgba(0, 0, 0, 0.3);
  z-index: 0;
}
.img-area .item .image{
  width:100%;height:100%;
  border-radius: 12rpx;
}


.img-area .take-photo{
  font-size: 20rpx;
  color: rgba(153, 153, 153, 0.5);
  border: 1.2px solid rgba(124, 134, 149, 0.3);
}
.img-area .take-photo .icon{
  width:32rpx;height:32rpx;
  margin-bottom:14rpx;
  background-color: currentColor;
  -webkit-mask: url(data:image/svg+xml,%3C%3Fxml%20version%3D%221.0%22%20standalone%3D%22no%22%3F%3E%3C%21DOCTYPE%20svg%20PUBLIC%20%22-//W3C//DTD%20SVG%201.1//EN%22%20%22http%3A//www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd%22%3E%3Csvg%20t%3D%221741940716303%22%20class%3D%22icon%22%20viewBox%3D%220%200%201024%201024%22%20version%3D%221.1%22%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20p-id%3D%2214235%22%20xmlns%3Axlink%3D%22http%3A//www.w3.org/1999/xlink%22%20width%3D%22128%22%20height%3D%22128%22%3E%3Cpath%20d%3D%22M480%20352c-105.888%200-192%2086.112-192%20192s86.112%20192%20192%20192%20192-86.112%20192-192S585.888%20352%20480%20352zM480%20672c-70.592%200-128-57.408-128-128%200-70.592%2057.408-128%20128-128%2070.592%200%20128%2057.408%20128%20128C608%20614.592%20550.592%20672%20480%20672z%22%20fill%3D%22%235E6570%22%20p-id%3D%2214236%22%3E%3C/path%3E%3Cpath%20d%3D%22M576%20832%20160%20832c-17.632%200-32-14.336-32-32L128%20288c0-17.632%2014.368-32%2032-32l96%200c17.664%200%2032-14.336%2032-32S273.664%20192%20256%20192L160%20192C107.072%20192%2064%20235.072%2064%20288l0%20512c0%2052.928%2043.072%2096%2096%2096l416%200c17.696%200%2032-14.304%2032-32S593.696%20832%20576%20832z%22%20fill%3D%22%235E6570%22%20p-id%3D%2214237%22%3E%3C/path%3E%3Cpath%20d%3D%22M512%20256l320%200c17.664%200%2032%2014.368%2032%2032l0%20256c0%2017.696%2014.304%2032%2032%2032s32-14.304%2032-32L928%20288c0-52.928-43.072-96-96-96L512%20192c-17.664%200-32%2014.336-32%2032S494.336%20256%20512%20256z%22%20fill%3D%22%235E6570%22%20p-id%3D%2214238%22%3E%3C/path%3E%3Cpath%20d%3D%22M784%20336m-48%200a1.5%201.5%200%201%200%2096%200%201.5%201.5%200%201%200-96%200Z%22%20fill%3D%22%235E6570%22%20p-id%3D%2214239%22%3E%3C/path%3E%3Cpath%20d%3D%22M320%20160l128%200c17.696%200%2032-14.304%2032-32s-14.304-32-32-32l-128%200C302.304%2096%20288%20110.304%20288%20128S302.304%20160%20320%20160z%22%20fill%3D%22%235E6570%22%20p-id%3D%2214240%22%3E%3C/path%3E%3Cpath%20d%3D%22M960%20768l-96%200%200-96c0-17.696-14.304-32-32-32s-32%2014.304-32%2032l0%2096-96%200c-17.696%200-32%2014.304-32%2032s14.304%2032%2032%2032l96%200%200%2096c0%2017.696%2014.304%2032%2032%2032s32-14.304%2032-32l0-96%2096%200c17.696%200%2032-14.304%2032-32S977.696%20768%20960%20768z%22%20fill%3D%22%235E6570%22%20p-id%3D%2214241%22%3E%3C/path%3E%3C/svg%3E) center/contain no-repeat;
}