index.less 2.7 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168
  1. /* pages/home/index.less */
  2. .banner {
  3. height: 210px;
  4. .swiper-item, image {
  5. width: 100%;
  6. }
  7. }
  8. .statistics {
  9. display: flex;
  10. flex-direction: row;
  11. justify-content: space-between;
  12. margin: 10px;
  13. background-color: #f0f0f0;
  14. padding: 15px;
  15. border-radius: 10px;
  16. box-shadow: 5px 5px 5px #aaa;
  17. .statistics-item {
  18. display: flex;
  19. flex-direction: column;
  20. justify-content: center;
  21. width: 100%;
  22. text:nth-child(1) {
  23. color: #333;
  24. font-size: 30rpx;
  25. font-weight: bold;
  26. text-align: center;
  27. padding-right: 10px;
  28. }
  29. text:nth-child(2) {
  30. color: #333;
  31. font-size: 24rpx;
  32. text-align: center;
  33. padding-right: 10px;
  34. }
  35. .exchangerate:nth-child(1) {
  36. color: #fff;
  37. font-size: 30rpx;
  38. font-weight: bold;
  39. text-align: center;
  40. padding-left: 10px;
  41. }
  42. .exchangerate:nth-child(2) {
  43. font-size: 22rpx;
  44. color: #fff;
  45. text-align: center;
  46. padding-left: 10px;
  47. }
  48. }
  49. }
  50. .gird-view {
  51. display: flex;
  52. flex-direction: row;
  53. align-items: center;
  54. align-content: center;
  55. justify-content: space-between;
  56. border-radius: 10px;
  57. background-color: #f0f0f0;
  58. padding: 10px 0px;
  59. &__item {
  60. display: flex;
  61. flex-direction: column;
  62. justify-content: center;
  63. align-items: center;
  64. align-content: center;
  65. width: 100%;
  66. &__icon {
  67. width: 60px;
  68. height: 60px;
  69. }
  70. &__title {
  71. color: #4D565D;
  72. font-size: 24rpx;
  73. width: 100%;
  74. text-align: center;
  75. }
  76. }
  77. }
  78. .msg-view {
  79. width: 100%;
  80. display: flex;
  81. flex-direction: column;
  82. align-items: center;
  83. align-content: center;
  84. justify-content: center;
  85. &__top {
  86. display: flex;
  87. flex-direction: row;
  88. justify-content: space-between;
  89. width: 95%;
  90. align-items: center;
  91. align-content: center;
  92. van-tabs {
  93. width: 100px;
  94. }
  95. &__more {
  96. width: 20px;
  97. height: 20px;
  98. }
  99. }
  100. .view_top_content {
  101. display: flex;
  102. flex-direction: row;
  103. justify-content: space-between;
  104. align-items: center;
  105. .msg_date {
  106. font-size: 22rpx;
  107. color: #999999;
  108. text-align: left;
  109. width: 120px;
  110. }
  111. .msg_title {
  112. font-size: 28rpx;
  113. color: #333333;
  114. text-align: left;
  115. }
  116. }
  117. }
  118. .certsearch, .calculator {
  119. display: flex;
  120. align-items: center;
  121. margin: 3px;
  122. border-radius: 5px;
  123. position: fixed;
  124. z-index: 999;
  125. bottom: 10%;
  126. background-image: url('../../images/home-zscx.png');
  127. background-size: 100% 100%;
  128. height: 50px;
  129. width: 50px;
  130. }
  131. .certsearch, .calculator {
  132. background-size: 100% 100%;
  133. width: 50px;
  134. height: 50px;
  135. }
  136. .certsearch {
  137. right: 5px;
  138. bottom: 18%;
  139. }
  140. .calculator {
  141. right: 5px;
  142. }