index.module.less 2.4 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128
  1. .woringBook {
  2. position: relative;
  3. min-height: 100vh;
  4. background: url('./images/wroing-bg.png') no-repeat top center;
  5. background-size: contain;
  6. overflow: hidden;
  7. background-color: #fff;
  8. }
  9. .woringHeader {
  10. display: flex;
  11. align-items: center;
  12. height: var(--van-nav-bar-height);
  13. .leftArrow {
  14. padding: 0 var(--k-padding-md);
  15. }
  16. .title {
  17. position: relative;
  18. z-index: 1;
  19. i {
  20. width: 100px;
  21. height: 20px;
  22. display: inline-block;
  23. background: url('./images/wroing-title.png') no-repeat center;
  24. background-size: contain;
  25. }
  26. &::after {
  27. content: ' ';
  28. display: inline-block;
  29. position: absolute;
  30. left: 0;
  31. bottom: -2px;
  32. width: 48px;
  33. height: 6px;
  34. background: linear-gradient(270deg, rgba(119, 255, 239, 0.59) 0%, #42CDFF 100%);
  35. opacity: 0.5;
  36. z-index: -1;
  37. }
  38. }
  39. }
  40. .woringSecgtion {
  41. height: calc(100vh - var(--header-height) - var(--bottom-height) - 36px);
  42. overflow-y: auto;
  43. margin-top: 36px;
  44. background: #FFFFFF;
  45. border-radius: 16px 16px 0 0;
  46. padding: 0 15px 12px;
  47. .emptyContainer {
  48. height: calc(100vh - var(--header-height) - var(--bottom-height) - 92px);
  49. }
  50. .title {
  51. display: flex;
  52. align-items: center;
  53. font-size: 17px;
  54. font-weight: 600;
  55. color: #333333;
  56. line-height: 24px;
  57. position: sticky;
  58. top: 0;
  59. left: 0;
  60. z-index: 99;
  61. padding-top: 12px;
  62. padding-bottom: 8px;
  63. background-color: #fff;
  64. &::before {
  65. content: ' ';
  66. display: inline-block;
  67. margin-right: 6px;
  68. width: 4px;
  69. height: 14px;
  70. border-radius: 4px;
  71. background: linear-gradient(128deg, #259CFE 0%, #5BECFF 100%);
  72. }
  73. }
  74. .cell {
  75. padding: 18px 0;
  76. .iconImg {
  77. width: 39px;
  78. height: 39px;
  79. margin-right: 14px;
  80. }
  81. .cellTitle {
  82. font-size: 17px;
  83. font-weight: 600;
  84. color: #333333;
  85. line-height: 24px;
  86. max-width: 220px;
  87. white-space: nowrap;
  88. overflow: hidden;
  89. text-overflow: ellipsis;
  90. }
  91. .cellContent {
  92. font-size: 14px;
  93. color: #777777;
  94. line-height: 20px;
  95. span {
  96. color: #FF5A56;
  97. padding-right: 5px;
  98. }
  99. }
  100. :global {
  101. .van-cell__label {
  102. margin-top: 0;
  103. }
  104. }
  105. }
  106. }
  107. // .groupButtom {
  108. // position: fixed;
  109. // bottom: 0;
  110. // left: 0;
  111. // width: 100%;
  112. // }