index.wxss 2.3 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113
  1. .main {
  2. height: var(--thrHeight);
  3. }
  4. .main .zero {
  5. margin: 0 2vw 2vw 2vw;
  6. }
  7. .main .one {
  8. position: relative;
  9. height: 120px;
  10. }
  11. .main .one .one_1 {
  12. height: 80px;
  13. background-color: #216EC7;
  14. border-bottom-left-radius: 10px;
  15. border-bottom-right-radius: 10px;
  16. color: transparent;
  17. }
  18. .main .one .one_2 {
  19. position: absolute;
  20. top: 5vw;
  21. width: 86vw;
  22. height: 86px;
  23. margin: 0 3vw;
  24. padding: 2vw;
  25. background-color: var(--bgColor);
  26. display: flex;
  27. justify-content: space-between;
  28. }
  29. .main .one .one_2 .l {
  30. display: flex;
  31. justify-content: start;
  32. width: 72vw;
  33. }
  34. .main .one .one_2 .l .l_1 {
  35. padding: 3vw 0;
  36. }
  37. .main .one .one_2 .l .l_1 .icon {
  38. width: 60px;
  39. height: 60px;
  40. border-radius: 90px;
  41. }
  42. .main .one .one_2 .l .l_2 {
  43. width: 56vw;
  44. padding: 4vw 0 0 0;
  45. }
  46. .main .one .one_2 .l .l_2 .info {
  47. margin: 0 0 2vw 0;
  48. padding: 0 2vw;
  49. font-size: var(--txtSize);
  50. }
  51. .main .one .one_2 .l .l_2 .info:nth-child(1) {
  52. font-weight: bold;
  53. font-size: var(--titleSize);
  54. }
  55. .main .one .one_2 .l .l_2 .info:nth-child(2) {
  56. color: var(--labelColor);
  57. font-size: 15px;
  58. }
  59. .main .one .one_2 .r {
  60. padding: 8vw 0;
  61. font-size: var(--txtSize);
  62. color: var(--labelColor);
  63. }
  64. .main .two {
  65. flex-grow: 1;
  66. position: relative;
  67. }
  68. .main .two .scroll-view {
  69. position: absolute;
  70. top: 0;
  71. left: 0;
  72. right: 0;
  73. bottom: 0;
  74. }
  75. .main .two .scroll-view .list-scroll-view {
  76. display: flex;
  77. flex-wrap: wrap;
  78. flex-direction: row;
  79. align-content: flex-start;
  80. justify-content: space-between;
  81. }
  82. .main .two .scroll-view .list-scroll-view .list {
  83. background-color: var(--bgColor);
  84. width: 96vw;
  85. margin: 0 0 1.5vw 0;
  86. padding: 2vw;
  87. }
  88. .main .two .scroll-view .list-scroll-view .list .list_1 .icon {
  89. margin: 0 2vw 0 0;
  90. }
  91. .main .two .scroll-view .list-scroll-view .list .list_1 .title {
  92. font-size: var(--txtSize);
  93. }
  94. .main .two .scroll-view .list-scroll-view .list .list_2 {
  95. display: flex;
  96. flex-direction: row;
  97. justify-content: space-between;
  98. flex-wrap: wrap;
  99. }
  100. .main .two .scroll-view .list-scroll-view .list .list_2 .routeList {
  101. width: 26vw;
  102. padding: 2vw;
  103. }
  104. .main .two .scroll-view .list-scroll-view .list .list_2 .routeList .route_1 {
  105. display: flex;
  106. flex-direction: column;
  107. justify-content: center;
  108. }
  109. .main .two .scroll-view .list-scroll-view .list .list_2 .routeList .route_1 .title {
  110. font-size: var(--txtSize);
  111. padding: 1vw 0 0 0;
  112. text-align: center;
  113. }