lastSaveEnergy.vue 4.9 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166
  1. <template>
  2. <div
  3. class="lastSaveEnergy"
  4. :class="[screenType == 'ver' ? 'verticalClass' : 'horizontalClass']"
  5. >
  6. <div class="head-title">
  7. <span>上月节约能耗</span>
  8. </div>
  9. <div class="bottomCont">
  10. <img src="@/assets/save_energy.png" />
  11. <div class="showData">
  12. <div class="leftsave">
  13. <div class="firstline">节约电</div>
  14. <div class="secondline">
  15. <span class="value">{{ lastAllEnergy.energySaving }}</span
  16. ><span class="unit">度</span>
  17. </div>
  18. </div>
  19. <div class="equalTo">相当于</div>
  20. <div class="rightCont">
  21. <div class="saveCo2">
  22. 减排<span class="value">{{ lastAllEnergy.cdmCo2 }}</span
  23. >kg二氧化碳
  24. </div>
  25. <div class="saveCarbon">
  26. 减排<span class="value">{{ lastAllEnergy.cdmC }}</span
  27. >kg碳
  28. </div>
  29. <div class="plantTree">
  30. 为国家种<span class="value">{{ lastAllEnergy.cdmTree }}</span
  31. >棵树
  32. </div>
  33. </div>
  34. </div>
  35. </div>
  36. </div>
  37. </template>
  38. <script>
  39. import air_close from "@/assets/horImg/air_close.png";
  40. import air_open from "@/assets/horImg/air_open.png";
  41. import { mapState } from "vuex";
  42. export default {
  43. name: "lastSaveEnergy",
  44. props: {
  45. screenType: {
  46. type: String,
  47. default: () => {
  48. return "hor";
  49. }, //hor 横屏 vert 竖屏
  50. },
  51. },
  52. data() {
  53. return {};
  54. },
  55. computed: {
  56. ...mapState({
  57. lastAllEnergy: (state) => state.lastAllEnergy,
  58. }),
  59. },
  60. };
  61. </script>
  62. <style lang="less" scoped>
  63. .lastSaveEnergy {
  64. &.verticalClass {
  65. height: 535px;
  66. }
  67. &.horizontalClass {
  68. height: 100%;
  69. }
  70. .bottomCont {
  71. max-width: 900px;
  72. margin: 40px auto;
  73. position: relative;
  74. img {
  75. width: 100%;
  76. }
  77. .showData {
  78. position: absolute;
  79. top: 0;
  80. left: 0;
  81. right: 0;
  82. bottom: 0;
  83. box-sizing: border-box;
  84. // display: flex;
  85. // // align-items: center;
  86. // // justify-content: center;
  87. // flex-direction: row;
  88. .value{
  89. font-family: Persagy;
  90. }
  91. .leftsave {
  92. // position: absolute;
  93. // left: 12px;
  94. // top: 160px;
  95. color: #fff;
  96. width: 26%;
  97. height: 100%;
  98. display: flex;
  99. align-items: center;
  100. justify-content: center;
  101. float: left;
  102. flex-direction: column;
  103. font-size:24px;
  104. // width: 210px;
  105. // line-height: 34px;
  106. // text-align: center;
  107. .value {
  108. font-size: 32px;
  109. }
  110. }
  111. .equalTo {
  112. // position: absolute;
  113. // left: 249px;
  114. // top: 186px;
  115. float: left;
  116. font-size: 20px;
  117. width: 12%;
  118. height: 100%;
  119. display: flex;
  120. align-items: center;
  121. justify-content: center;
  122. white-space: nowrap;
  123. }
  124. .rightCont {
  125. position: relative;
  126. width: 38%;
  127. height: 100%;
  128. float: right;
  129. display: flex;
  130. flex-direction: column;
  131. justify-content: space-between;
  132. .saveCo2 {
  133. // position: absolute;
  134. // left: 562px;
  135. // top: 32px;
  136. height: 22%;
  137. display: flex;
  138. align-items: center;
  139. white-space: nowrap;
  140. // justify-content: center;
  141. }
  142. .saveCarbon {
  143. // position: absolute;
  144. // left: 562px;
  145. // top: 186px;
  146. height: 30%;
  147. display: flex;
  148. align-items: center;
  149. white-space: nowrap;
  150. //justify-content: center;
  151. }
  152. .plantTree {
  153. // position: absolute;
  154. // left: 562px;
  155. // top: 340px;
  156. height: 25%;
  157. display: flex;
  158. align-items: center;
  159. white-space: nowrap;
  160. // justify-content: center;
  161. }
  162. }
  163. }
  164. }
  165. }
  166. </style>