selectImgs.wxss 1.5 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687
  1. /* components/selectImgs/selectImgs.wxss */
  2. .imgs-group {
  3. display: flex;
  4. flex-wrap: wrap;
  5. padding: 0;
  6. }
  7. .imgs-group .img-item {
  8. position: relative;
  9. margin: 0 20rpx 0 0;
  10. padding: 0;
  11. }
  12. .imgs-group .img-item:nth-child(3n) {
  13. margin-right: 0;
  14. }
  15. .imgs-group .img-item .close {
  16. position: absolute;
  17. z-index: 10;
  18. right: 20rpx;
  19. top: 33rpx;
  20. width: 32rpx;
  21. height: 32rpx;
  22. }
  23. .imgs-group .img {
  24. position: relative;
  25. width: 216rpx;
  26. height: 216rpx;
  27. margin-top: 20rpx;
  28. vertical-align: bottom;
  29. }
  30. .imgs-group .add-img {
  31. background: rgba(246, 246, 246, 1);
  32. }
  33. .imgs-group .add-img::before {
  34. content: "";
  35. position: absolute;
  36. top: 50%;
  37. left: 50%;
  38. width: 64rpx;
  39. height: 4rpx;
  40. background: #e1e1e1;
  41. transform: translate(-50%, -50%);
  42. }
  43. .imgs-group .add-img::after {
  44. content: "";
  45. position: absolute;
  46. top: 50%;
  47. left: 50%;
  48. width: 4rpx;
  49. height: 64rpx;
  50. background: #e1e1e1;
  51. transform: translate(-50%, -50%);
  52. }
  53. .mask-wrap {
  54. position: absolute;
  55. top: 20rpx;
  56. left: 0;
  57. right: 0;
  58. bottom: 0;
  59. background: rgba(0, 0, 0, 0.6);
  60. display: flex;
  61. align-items: center;
  62. justify-content: center;
  63. flex-direction: column;
  64. }
  65. .bg-color {
  66. background: rgba(255, 94, 94, 0.7);
  67. }
  68. .title {
  69. font-size: 28rpx;
  70. font-family: PingFangSC-Regular, PingFang SC;
  71. font-weight: 400;
  72. color: rgba(255, 255, 255, 1);
  73. }
  74. .sub-title {
  75. font-size: 20rpx;
  76. font-family: PingFangSC-Regular, PingFang SC;
  77. font-weight: 400;
  78. color: rgba(255, 255, 255, 1);
  79. }