index.less 2.5 KB

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071727374757677787980818283848586878889909192939495
  1. page{
  2. font-family: "Microsoft YaHei", "PingFang SC", "Helvetica Neue", sans-serif;
  3. }
  4. .wangbox{
  5. width: 100%;
  6. display: flex;
  7. justify-content: center;
  8. align-items: center;
  9. flex-direction: column;
  10. margin-top: 60rpx;
  11. margin-bottom: 28rpx;
  12. .wang{
  13. width: 206rpx;
  14. height: 46rpx;
  15. font-size: 32rpx;
  16. color: #67806A;
  17. background-image: url(https://file-cloud.fmode.cn/EbxZUK5lBI/20241126/dm1jj2032446503.png?imageView2/1/w/200/h/200);
  18. background-position: center; /* 背景图片居中 */
  19. // background-size: cover; /* 背景图片覆盖整个元素 */
  20. background-repeat: no-repeat; /* 不重复背景图片 */
  21. display: flex;
  22. justify-content: center;
  23. align-items: center;
  24. }
  25. .wang2{
  26. font-size: 24rpx;
  27. color: #969696;
  28. }
  29. }
  30. .wang-cardbox{
  31. margin-top: 40rpx;
  32. width: 100%;
  33. background-color: white;
  34. overflow-y: hidden;
  35. padding-bottom: 40rpx;
  36. column-count: 2; /* 设置列数 */
  37. column-gap: 16rpx; /* 设置列间距 */
  38. .wang-card{
  39. break-inside: avoid; /* 防止卡片在列之间断裂 */
  40. margin-bottom: 20rpx; /* 设置卡片底部间距 */
  41. width: 100%; /* 确保卡片宽度为100% */
  42. image{
  43. width: 100%;
  44. height: 204rpx;
  45. border-radius: 10rpx;
  46. }
  47. .wang-catex{
  48. font-size: 26rpx;
  49. font-weight: 400;
  50. height: 76rpx;
  51. }
  52. .wang-numbox{
  53. width: 100%;
  54. display: flex;
  55. align-items: center;
  56. .wang-num{
  57. display: flex;
  58. justify-content: flex-end;
  59. align-items: flex-end;
  60. color: #C5262Ced;
  61. font-size: 30rpx;
  62. .wang-num1{
  63. font-size: 32rpx;
  64. }
  65. .wang-num2{
  66. font-size: 40rpx;
  67. }
  68. }
  69. .wang-submit{
  70. width: 102rpx;
  71. height: 48rpx;
  72. font-size: 28rpx;
  73. color: white;
  74. background-color: #F8DA7F;
  75. border-radius: 15rpx;
  76. display: flex;
  77. justify-content: center;
  78. align-items: center;
  79. margin-left: auto;
  80. }
  81. }
  82. }
  83. }
  84. .more{
  85. width: 100%;
  86. display: flex;
  87. align-items: center;
  88. justify-content: center;
  89. .more-tex{
  90. font-size: 28rpx;
  91. color: #969696;
  92. }
  93. }