index.less 1.6 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596
  1. .mediaPic {
  2. position: relative;
  3. display: inline-flex;
  4. width: 64px;
  5. height: 36px;
  6. background: #eef1f4;
  7. color: #c4c7cc;
  8. border-radius: 4px;
  9. overflow: hidden;
  10. justify-content: center;
  11. >img {
  12. max-width: 100%;
  13. max-height: 100%;
  14. vertical-align: middle;
  15. display: inline-block;
  16. object-fit: contain;
  17. }
  18. .mediaPicVideo {
  19. position: absolute;
  20. width: 100%;
  21. height: 100%;
  22. top: 0;
  23. left: 0;
  24. background-color: rgba(0, 0, 0, .1);
  25. display: flex;
  26. justify-content: center;
  27. align-items: center;
  28. &>img {
  29. width: 20px;
  30. height: 20px;
  31. display: inline-block;
  32. cursor: pointer;
  33. }
  34. }
  35. }
  36. .mediaPic-imgList {
  37. display: flex;
  38. flex-wrap: wrap;
  39. width: 36px;
  40. height: 36px;
  41. justify-content: center;
  42. align-items: center;
  43. gap: 1px;
  44. >img {
  45. max-width: 100%;
  46. box-sizing: border-box;
  47. max-height: 100%;
  48. object-fit: contain;
  49. }
  50. }
  51. .mediaPicPopover {
  52. width: 280px;
  53. height: auto;
  54. >img {
  55. width: 100%;
  56. }
  57. .mediaPic-imgList {
  58. width: 100%;
  59. height: auto;
  60. }
  61. }
  62. .mediaPicPopoverContent {
  63. .ant-popover-inner {
  64. border-radius: 6px;
  65. }
  66. .ant-popover-inner-content {
  67. padding: 4px 6px;
  68. }
  69. }
  70. .video {
  71. width: 100%;
  72. max-width: 320px;
  73. max-height: 600px;
  74. display: block;
  75. margin: auto;
  76. }
  77. .mediaPic-C {
  78. .mediaPic-imgList {
  79. width: 100%;
  80. height: 100%;
  81. }
  82. }