index.less 3.6 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139
  1. .header-title{
  2. justify-content: space-between;
  3. // padding:0 34rpx;
  4. padding:0 26rpx;
  5. width: 100%;
  6. .goback{
  7. width:30px;
  8. text-align: center;
  9. }
  10. .righttext{
  11. width: 30px;
  12. }
  13. .titlename{
  14. font-size: 17px;
  15. }
  16. }
  17. .nodate{
  18. height: 360rpx;
  19. color:var(--nodateColor);
  20. font-size: 13px;
  21. }
  22. .chartlenged{
  23. margin: 32rpx 32rpx 0;
  24. justify-content: flex-end;
  25. &>view{
  26. margin-left: 24rpx;
  27. font-size: 26rpx;
  28. color: #8D9399;
  29. line-height: 14px;
  30. image{
  31. width: 13px;
  32. height: 5px;
  33. margin-right: 8rpx;
  34. }
  35. &>view{
  36. width: 20rpx;
  37. height: 20rpx;
  38. margin-right: 8rpx;
  39. background: #B2E6F2;
  40. }
  41. .circle{
  42. background:#04B49C;
  43. border-radius: 50%;
  44. }
  45. }
  46. .tips{
  47. width: 40rpx;
  48. height: 40rpx;
  49. border-radius: 50%;
  50. background: #EAFAF8;
  51. color:#04B49C;
  52. }
  53. }
  54. .chart_contant{
  55. height: 360rpx;
  56. width: 100%;
  57. }
  58. .param_mian{
  59. margin: 32rpx 32rpx 0;
  60. .param_txt{
  61. font-size: 15px;
  62. color: #2B3036;
  63. }
  64. .param_list{
  65. // overflow: hidden;
  66. margin-top: 36rpx;
  67. .param_line{
  68. width: 12rpx;
  69. height: 100%;
  70. margin-right: 28rpx;
  71. position: relative;
  72. background: linear-gradient(180deg, #34C724 0%, #B3D600 25%, #FFC60A 50%, #F54E45 75%, #F01D94 100%);
  73. border-radius: 4px;
  74. transition: all 0.3s ease;
  75. .pointer{
  76. position: absolute;
  77. top: 0;
  78. left: -30rpx;
  79. transition: all 0.4s ease;
  80. image{
  81. width: 20rpx;
  82. height: 24rpx;
  83. }
  84. }
  85. }
  86. .temperature_line{
  87. background: linear-gradient(180deg, #1054f4 0%, #34C724 60%, #FFC60A 80%, #F01D94 100%);
  88. }
  89. .temperature_line4{
  90. background: linear-gradient(180deg, #34C724 0%, #34C724 20%, #1054f4 100%,);
  91. }
  92. .temperature_line3{
  93. background: linear-gradient(180deg, #1054f4 0%, #1054f4 20%, #34C724 100%,);
  94. }
  95. .humidity_line{
  96. background: linear-gradient(180deg,#F01D94 0%, #FFC60A 20%, #34C724 60%,#1054f4 100%, );
  97. }
  98. .co2_line{
  99. background: linear-gradient(180deg, #34C724 43%, #FFC60A 80%,#F01D94 100%);
  100. }
  101. .hcho_line{
  102. background: linear-gradient(180deg, #34C724 43%, #FFC60A 80%,#F01D94 100%);
  103. }
  104. .param_table{
  105. width: 624rpx;
  106. &>view{
  107. display: flex;
  108. font-size: 13px;
  109. .header_title_one{
  110. width: 40%;
  111. padding-left: 10rpx;
  112. border-bottom:1px solid transparent;
  113. }
  114. .header_title_one_active{
  115. border-bottom:1px solid #EFF0F1;
  116. }
  117. .header_title_two{
  118. width: 60%;
  119. border-bottom:1px solid #EFF0F1;
  120. }
  121. }
  122. .table_header{
  123. height: 64rpx;
  124. line-height: 64rpx;
  125. font-weight: 500;
  126. color: #2B3036;
  127. background: #F8F9FA;
  128. }
  129. .table_body{
  130. height: 74rpx;
  131. line-height: 74rpx;
  132. color: #2B3036;
  133. // border-bottom:1px solid #EFF0F1;
  134. }
  135. }
  136. }
  137. }