index.wxss 1.4 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081
  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. background-color: var(--f9Color);
  38. }
  39. .content .thr .thr_1 {
  40. display: flex;
  41. justify-content: space-between;
  42. flex-wrap: wrap;
  43. padding: 2vw;
  44. }
  45. .content .thr .thr_1 .list {
  46. width: 43vw;
  47. padding: 2vw;
  48. margin: 0 0 2vw 0;
  49. border-radius: 10px;
  50. background-color: var(--mainColor);
  51. }
  52. .content .thr .thr_1 .list .image {
  53. width: 100%;
  54. height: 40vw;
  55. border-top-right-radius: 10px;
  56. border-top-left-radius: 10px;
  57. }
  58. .content .thr .thr_1 .list .name {
  59. font-size: var(--font14Size);
  60. }
  61. .scroll-view {
  62. position: absolute;
  63. top: 0;
  64. left: 0;
  65. right: 0;
  66. bottom: 0;
  67. }
  68. .scroll-view .list-scroll-view {
  69. display: flex;
  70. flex-direction: column;
  71. }
  72. .is_bottom {
  73. text-align: center;
  74. }
  75. .is_bottom text {
  76. padding: 2vw 0;
  77. display: inline-block;
  78. color: var(--f85Color);
  79. font-size: var(--font14Size);
  80. }