index.module.less 1.3 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778
  1. .container {
  2. display: flex;
  3. flex-direction: column;
  4. background: #FFFFFF;
  5. border-radius: 20Px;
  6. height: 100%;
  7. }
  8. .tools {
  9. padding: 32Px 32px 20px 32px;
  10. display: flex;
  11. align-items: center;
  12. flex-shrink: 0;
  13. :global {
  14. .n-input {
  15. margin-left: auto;
  16. width: 361Px;
  17. }
  18. }
  19. }
  20. .content {
  21. flex: 1;
  22. overflow-y: auto;
  23. padding: 20Px 36Px 36Px 36Px;
  24. }
  25. .item {
  26. position: relative;
  27. width: 214Px;
  28. cursor: pointer;
  29. transition: all .3s;
  30. .cover {
  31. position: relative;
  32. overflow: hidden;
  33. &::before {
  34. content: '';
  35. position: absolute;
  36. top: 107Px;
  37. left: 0;
  38. width: 214Px;
  39. height: 214Px;
  40. background: #DDF2FF;
  41. border-radius: 50%;
  42. }
  43. }
  44. &:hover {
  45. transform: scale(1.1);
  46. }
  47. .itemImg {
  48. position: relative;
  49. width: 158Px;
  50. height: 223Px;
  51. margin: auto;
  52. background-color: antiquewhite;
  53. :global {
  54. .n-image {
  55. width: 100%;
  56. height: 100%;
  57. }
  58. }
  59. }
  60. .itemName{
  61. margin-top: 16Px;
  62. font-size: 16Px;
  63. font-weight: 500;
  64. color: #333;
  65. text-align: center;
  66. }
  67. }