index.scss 1.2 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263
  1. .imgs-row-scroll {
  2. max-width: 100%;
  3. overflow: auto;
  4. ::v-deep .uni-scroll-view {
  5. height: 100% !important;
  6. }
  7. .img-list {
  8. display: flex;
  9. align-items: center;
  10. }
  11. .img-item {
  12. flex-shrink: 0;
  13. border-radius: 12rpx;
  14. overflow: hidden;
  15. background-color: #f5f5f5;
  16. position: relative;
  17. border: 4rpx solid transparent;
  18. transition: border-color 0.3s, transform 0.3s, box-shadow 0.3s;
  19. &.is-active {
  20. border-color: #3c9cff; // uView 的 primary 颜色
  21. box-shadow: 0 0 12rpx rgba(60, 156, 255, 0.5);
  22. }
  23. &.dragging {
  24. opacity: 0.5;
  25. transform: scale(1.05);
  26. box-shadow: 0 4rpx 20rpx rgba(0, 0, 0, 0.2);
  27. }
  28. &:hover {
  29. cursor: move;
  30. }
  31. }
  32. .img-content {
  33. width: 100%;
  34. height: 100%;
  35. border-radius: 12rpx;
  36. object-fit: contain;
  37. }
  38. .delete-icon {
  39. position: absolute;
  40. top: 8rpx;
  41. right: 8rpx;
  42. width: 36rpx;
  43. height: 36rpx;
  44. background-color: rgba(0, 0, 0, 0.5);
  45. border-radius: 50%;
  46. display: flex;
  47. align-items: center;
  48. justify-content: center;
  49. z-index: 10;
  50. ::v-deep .u-icon{
  51. background-color: transparent !important;
  52. }
  53. }
  54. // 使用indicator隐藏滚动条会报错,暂时使用样式隐藏
  55. ::v-deep .u-scroll-list__indicator{
  56. display: none !important;
  57. }
  58. }