index.css 2.5 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159
  1. page {
  2. background-color: #F5F5F5;
  3. }
  4. .index-bg {
  5. width: 100%;
  6. height: 445rpx;
  7. }
  8. .index-bg image{
  9. width: 100%;
  10. height: 100%;
  11. }
  12. /* 数据 */
  13. .data-box{
  14. position: absolute;
  15. top: 67rpx;
  16. left: 71rpx;
  17. right: 51rpx;
  18. color: #fff;
  19. }
  20. .ljsy{
  21. line-height: 95rpx;
  22. font-size: 68rpx;
  23. font-weight: 800;
  24. }
  25. .ljsy-label{
  26. font-size: 28rpx;
  27. font-weight: 500;
  28. line-height: 40rpx;
  29. }
  30. .jy{
  31. margin-top: 50rpx;
  32. }
  33. .jy-data{
  34. line-height: 50rpx;
  35. font-weight: bold;
  36. font-size: 36rpx;
  37. }
  38. .jy-label{
  39. margin-top: 12rpx;
  40. line-height: 33rpx;
  41. opacity: 0.7;
  42. }
  43. .jy-line{
  44. width: 1rpx;
  45. height: 78rpx;
  46. opacity: 0.3;
  47. background-color: #FFFFFF;
  48. margin: auto 40rpx;
  49. }
  50. /* 总数 */
  51. .total-box{
  52. padding: 36rpx 40rpx;
  53. overflow: hidden;
  54. background: #FFFFFF;
  55. border-radius: 20rpx 20rpx 20rpx 20rpx;
  56. opacity: 1;
  57. margin: -60rpx 30rpx 30rpx;
  58. justify-content: center;
  59. }
  60. .total-label{
  61. font-size: 24rpx;
  62. font-weight: 400;
  63. color: #666464;
  64. line-height: 36rpx;
  65. text-align: center;
  66. }
  67. .total-data{
  68. line-height: 50rpx;
  69. font-size: 36rpx;
  70. font-weight: bold;
  71. color: #EB5C20;
  72. text-align: center;
  73. }
  74. .total-data-line{
  75. width: 1rpx;
  76. height: 88rpx;
  77. opacity: 1;
  78. background-color: #E6E6E6;
  79. margin: auto 38rpx;
  80. }
  81. /* 导航 */
  82. .nav-box{
  83. background: #FFFFFF;
  84. border-radius: 20rpx 20rpx 20rpx 20rpx;
  85. opacity: 1;
  86. padding: 22rpx 60rpx;
  87. justify-content: space-between;
  88. margin: 30rpx;
  89. }
  90. .nav-item-icon{
  91. width: 100rpx;
  92. height: 100rpx;
  93. }
  94. .nav-item-title{
  95. font-size: 28rpx;
  96. font-weight: 500;
  97. color: #666464;
  98. line-height: 41rpx;
  99. }
  100. /* 图表 */
  101. .echart-box{
  102. padding: 30rpx;
  103. background: #FFFFFF;
  104. border-radius: 16rpx 16rpx 16rpx 16rpx;
  105. opacity: 1;
  106. margin: 30rpx;
  107. }
  108. .echart-box-header{
  109. justify-content: space-between;
  110. }
  111. .echart-box-title{
  112. line-height: 45rpx;
  113. font-size: 30rpx;
  114. font-weight: 500;
  115. color: #333333;
  116. margin-left: 12rpx;
  117. position: relative;
  118. }
  119. .echart-box-title::before{
  120. content: '';
  121. position: absolute;
  122. top: 50%;
  123. transform: translateY(-50%);
  124. left: -12rpx;
  125. width: 6rpx;
  126. height: 32rpx;
  127. background: #EB5C20;
  128. border-radius: 10rpx 10rpx 10rpx 10rpx;
  129. opacity: 1;
  130. }
  131. .echart-box-timeType{
  132. background: #E6E6E6;
  133. border-radius: 26rpx 26rpx 26rpx 26rpx;
  134. opacity: 1;
  135. padding: 4rpx;
  136. }
  137. .echart-box-timeType-item{
  138. width: 92rpx;
  139. height: 44rpx;
  140. line-height: 44rpx;
  141. border-radius: 26rpx 26rpx 26rpx 26rpx;
  142. opacity: 1;
  143. text-align: center;
  144. font-size: 24rpx;
  145. }
  146. .echart-box-timeType-item-acitve{
  147. background: #FFFFFF;
  148. }
  149. .echart-line{
  150. width: 610rpx;
  151. height: 1rpx;
  152. opacity: 1;
  153. background-color: #E6E6E6;
  154. margin: 30rpx auto;
  155. }