index.wxss 1.4 KB

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071727374757677787980
  1. @charset "UTF-8";
  2. /* 水平间距 */
  3. /* 水平间距 */
  4. .content {
  5. display: flex;
  6. flex-direction: column;
  7. width: 100vw;
  8. height: 100vh;
  9. }
  10. .content .one {
  11. width: 100%;
  12. }
  13. .content .two {
  14. padding: 1vw 2vw;
  15. background-color: var(--f9Color);
  16. }
  17. .content .two .grid {
  18. display: flex;
  19. flex-direction: column;
  20. align-items: center;
  21. padding: 5px 0 0 0;
  22. margin: 5px;
  23. background-color: var(--mainColor);
  24. border-radius: 10px;
  25. }
  26. .content .two .grid .image {
  27. width: 25px;
  28. height: 25px;
  29. }
  30. .content .two .grid .text {
  31. font-size: var(--font14Size);
  32. margin-top: 5px;
  33. }
  34. .content .thr {
  35. position: relative;
  36. flex-grow: 1;
  37. display: flex;
  38. justify-content: space-between;
  39. flex-wrap: wrap;
  40. padding: 2vw;
  41. background-color: var(--f9Color);
  42. }
  43. .content .thr .list {
  44. position: relative;
  45. width: 43vw;
  46. padding: 2vw;
  47. margin: 0 0 2vw 0;
  48. border-radius: 10px;
  49. background-color: var(--mainColor);
  50. }
  51. .content .thr .list .image {
  52. width: 100%;
  53. height: 40vw;
  54. border-top-right-radius: 10px;
  55. border-top-left-radius: 10px;
  56. }
  57. .content .thr .list .name {
  58. font-size: var(--font14Size);
  59. }
  60. .scroll-view {
  61. position: absolute;
  62. top: 0;
  63. left: 0;
  64. right: 0;
  65. bottom: 0;
  66. }
  67. .scroll-view .list-scroll-view {
  68. display: flex;
  69. flex-direction: column;
  70. }
  71. .is_bottom {
  72. text-align: center;
  73. }
  74. .is_bottom text {
  75. padding: 2vw 0;
  76. display: inline-block;
  77. color: var(--f85Color);
  78. font-size: var(--font14Size);
  79. }