NowData.vue 5.1 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186
  1. <template>
  2. <div
  3. class="NowData"
  4. :class="[screenType==='hor' ? 'hor-nowData-contain' : 'ver-nowData-contain' ]"
  5. >
  6. <div class="nowData-title">
  7. <span class="hor-nowData-title-text">实时数据</span>
  8. <div class="normal-explain">
  9. <span class="content_level title-right-icon"></span>
  10. <span class="title-right">正常范围</span>
  11. </div>
  12. </div>
  13. <span class="hor-nowData-title-slogan">主动式空调,会呼吸的写字楼</span>
  14. <div
  15. class="contain"
  16. >
  17. <div
  18. class="item"
  19. v-for="(item, index) in horScreenImg"
  20. :key="index"
  21. >
  22. <div class="item_content">
  23. <img
  24. :class="[screenType==='hor' ? '' : 'vert' ]"
  25. :src="item.img"
  26. alt=""
  27. >
  28. <div class="content_value">
  29. <span>{{item.value}}</span><span>{{item.unit}}</span>
  30. </div>
  31. <div class="content_name">
  32. <span>{{item.name}}</span>
  33. </div>
  34. <div
  35. class="content_level"
  36. :class="item.level"
  37. >
  38. </div>
  39. </div>
  40. </div>
  41. </div>
  42. </div>
  43. </template>
  44. <script>
  45. import icon_temp from '@/assets/icon_temp.png'
  46. import icon_humidity from '@/assets/icon_humidity.png'
  47. import icon_CO2 from '@/assets/icon_CO2.png'
  48. import icon_formaldehyde from '@/assets/icon_formaldehyde.png'
  49. import icon_PM2d5 from '@/assets/icon_PM2d5.png'
  50. export default {
  51. props: {
  52. screenType: {
  53. type: String,
  54. default: () => { return 'hor' } //hor 横屏 vert 竖屏
  55. }
  56. },
  57. data() {
  58. return {
  59. horScreenImg: [
  60. { id: 1, name: '温度', img:icon_temp, value: 24.5, unit: '℃', level: 'low' },
  61. { id: 2, name: '湿度', img: icon_humidity, value: 33, unit: '%', level: 'middle' },
  62. { id: 3, name: 'CO2', img:icon_CO2, value: 399, unit: 'ppm', level: 'low' },
  63. { id: 4, name: '甲醛', img: icon_formaldehyde, value: 0.03, unit: 'mg/m³', level: 'low' },
  64. { id: 5, name: 'PM2.5', img: icon_PM2d5, value: 6, unit: 'ug/m³', level: 'low' }
  65. ]
  66. }
  67. }
  68. }
  69. </script>
  70. <style lang="less" scoped>
  71. .NowData {
  72. &.hor-nowData-contain {
  73. width: 1508px;
  74. height: 498px;
  75. }
  76. border-radius: 20px;
  77. background: #ffffff;
  78. color: rgba(87, 82, 113, 1);
  79. .nowData-title {
  80. display: flex;
  81. justify-content: space-between;
  82. padding: 24px 32px 0 32px;
  83. }
  84. .hor-nowData-title-text {
  85. font-family: PingFang SC;
  86. font-size: 20px;
  87. font-style: normal;
  88. font-weight: 600;
  89. line-height: 28px;
  90. letter-spacing: 0px;
  91. text-align: left;
  92. }
  93. .hor-nowData-title-slogan {
  94. padding: 6px 0 0px 32px;
  95. }
  96. .contain {
  97. display: flex;
  98. // width: 1306px;
  99. // margin-left: 101px;
  100. height: 280px;
  101. padding-top: 46px;
  102. }
  103. .item {
  104. width: calc(100% / 5);
  105. .item_content {
  106. height: 100%;
  107. display: flex;
  108. flex-direction: column;
  109. justify-content: center;
  110. align-items: center;
  111. text-align: center;
  112. img {
  113. width: 150px;
  114. height: 150px;
  115. &.vert {
  116. width: 130px;
  117. height: 130px;
  118. }
  119. }
  120. .content_value {
  121. font-family: Persagy;
  122. font-size: 42px;
  123. font-weight: 700;
  124. margin-top: 20px;
  125. color: rgba(59, 53, 88, 1);
  126. }
  127. .content_name {
  128. margin-top: 12px;
  129. font-family: PingFang SC;
  130. font-size: 24px;
  131. font-weight: 400;
  132. line-height: 34px;
  133. }
  134. }
  135. }
  136. .content_level {
  137. margin-top: 8px;
  138. box-sizing: border-box;
  139. width: 16px;
  140. height: 16px;
  141. border-radius: 50%;
  142. background: rgba(126, 216, 116, 1);
  143. &.middle {
  144. background: rgba(239, 214, 46, 1);
  145. }
  146. &.title-right-icon {
  147. display: inline-block;
  148. padding: 0;
  149. width: 12px;
  150. height: 12px;
  151. }
  152. &.title-right {
  153. height: 20px;
  154. width: 56px;
  155. }
  156. }
  157. .normal-explain {
  158. display: flex;
  159. align-items: center;
  160. }
  161. &.ver-nowData-contain{
  162. height: 460px;
  163. width: 1000px;
  164. margin:0 auto;
  165. .item{
  166. .item_content{
  167. .content_value{
  168. font-size: 32px;
  169. }
  170. .content_name{
  171. font-size: 20px;
  172. }
  173. }
  174. }
  175. }
  176. }
  177. </style>