.ui-photo__list { display: flex; flex-wrap: wrap; gap: var(--spacing-2); } .ui-photo__item, .ui-photo__add { width: 200rpx; height: 200rpx; border-radius: var(--radius-md); position: relative; overflow: hidden; } .ui-photo__item { background: var(--color-bg-disabled); } .ui-photo__img { width: 100%; height: 100%; display: block; } .ui-photo__status { position: absolute; top: 8rpx; left: 8rpx; } .ui-photo__remove { position: absolute; top: 8rpx; right: 8rpx; width: 36rpx; height: 36rpx; border-radius: 50%; background: rgba(0, 0, 0, 0.55); color: #FFFFFF; font-size: 24rpx; display: flex; align-items: center; justify-content: center; line-height: 1; } .ui-photo__retry { position: absolute; bottom: 8rpx; left: 50%; transform: translateX(-50%); padding: 4rpx 16rpx; border-radius: var(--radius-full); background: var(--color-danger); color: #FFFFFF; font-size: var(--font-size-xs); } .ui-photo__mask { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0, 0, 0, 0.4); display: flex; align-items: center; justify-content: center; } .ui-photo__spinner { width: 40rpx; height: 40rpx; border: 3rpx solid rgba(255, 255, 255, 0.5); border-top-color: #FFFFFF; border-radius: 50%; animation: ui-photo-spin 0.8s linear infinite; } @keyframes ui-photo-spin { from { transform: rotate(0deg); } to { transform: rotate(360deg); } } .ui-photo__add { background: var(--color-bg-disabled); display: flex; flex-direction: column; align-items: center; justify-content: center; border: 2rpx dashed var(--color-text-disabled); } .ui-photo__add-icon { font-size: var(--font-size-2xl); color: var(--color-text-tertiary); line-height: 1; } .ui-photo__add-text { margin-top: var(--spacing-1); font-size: var(--font-size-xs); color: var(--color-text-tertiary); } .ui-photo__hint { margin-top: var(--spacing-2); font-size: var(--font-size-xs); color: var(--color-text-tertiary); line-height: var(--line-height-normal); }