horThree.vue 5.1 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190
  1. <template>
  2. <div class="horThree">
  3. <div class="bg">
  4. <img
  5. :src="bgImg"
  6. alt=""
  7. >
  8. </div>
  9. <div class="container">
  10. <div class="hor-head">
  11. <HorHead />
  12. </div>
  13. <div class="hor-nowData-content">
  14. <div class="flexBetween">
  15. <div class="left box">
  16. <div class="left-bg bg1">
  17. <img :src="lastMonthTotal" />
  18. </div>
  19. <div class="left-title car-title">
  20. <div>上月总能耗</div>
  21. <div class="left-title-text">低能耗亲自然</div>
  22. </div>
  23. <div>
  24. <span>比基准能耗</span>
  25. <span>节能50%</span>
  26. <span>总能耗28050KWh</span>
  27. </div>
  28. </div>
  29. <div class="right box">
  30. <div class="right-bg bg1">
  31. <img :src="lastMonthEner" />
  32. </div>
  33. <div class="right-title car-title">
  34. <span>上月节约能耗</span>
  35. </div>
  36. <div class="elect">
  37. <div>节约电</div>
  38. <div> <span>23456</span>度</div>
  39. </div>
  40. <div class="and">
  41. <span>相当于</span>
  42. </div>
  43. <div class="CO2 common">
  44. <span>减排<i class="num">5kg</i>二氧化碳</span>
  45. </div>
  46. <div class="carbon common">
  47. <span>减排<i class="num">5kg</i>碳</span>
  48. </div>
  49. <div class="tree common">
  50. <span>为国家种<i class="num">5</i>棵树</span>
  51. </div>
  52. </div>
  53. </div>
  54. <div class="chart-box box">
  55. 上月总能耗
  56. </div>
  57. </div>
  58. </div>
  59. </div>
  60. </template>
  61. <script lang="ts">
  62. import Vue from "vue";
  63. declare function require(img: string): string;
  64. const hor_big_bg = require("@/assets/horImg/hor_big_bg.png");
  65. const hor_lastMonthEner = require("@/assets/horImg/hor_lastMonthEner.png");
  66. const hor_lastMonthTotal = require("@/assets/horImg/hor_lastMonthTotal.png");
  67. import HorHead from "./valueDelivery/HorHead.vue";
  68. export default Vue.extend({
  69. components: { HorHead },
  70. data() {
  71. return {
  72. bgImg: hor_big_bg,
  73. lastMonthEner: hor_lastMonthEner,
  74. lastMonthTotal: hor_lastMonthTotal,
  75. };
  76. },
  77. });
  78. </script>
  79. <style lang="less" scoped>
  80. .horThree {
  81. color: #3b3558;
  82. .hor-head {
  83. // padding-top: 32px;
  84. display: flex;
  85. justify-content: center;
  86. }
  87. .bg {
  88. position: absolute;
  89. z-index: -2;
  90. }
  91. .bg1 {
  92. position: absolute;
  93. z-index: -1;
  94. }
  95. .flexBetween {
  96. display: flex;
  97. justify-content: space-between;
  98. }
  99. .box {
  100. z-index: -1;
  101. border-radius: 20px;
  102. border: 2px solid #ffffff;
  103. background: #ffffffcc;
  104. display: flex;
  105. align-items: center;
  106. justify-content: center;
  107. }
  108. .car-title {
  109. position: absolute;
  110. top: 20px;
  111. left: 24px;
  112. font-size: 20px;
  113. font-weight: 600;
  114. line-height: 28px;
  115. }
  116. .hor-nowData-content {
  117. padding: 32px 20px;
  118. box-sizing: border-box;
  119. .content-left-next {
  120. padding-top: 27px;
  121. }
  122. }
  123. .left {
  124. position: relative;
  125. height: 556px;
  126. width: 678px;
  127. .left-title-text {
  128. font-size: 14px;
  129. font-weight: 400;
  130. line-height: 20px;
  131. }
  132. }
  133. .right {
  134. position: relative;
  135. height: 556px;
  136. width: 1138px;
  137. .elect {
  138. position: absolute;
  139. left: 180px;
  140. top: 240px;
  141. text-align: center;
  142. font-size: 24px;
  143. font-weight: 600;
  144. line-height: 34px;
  145. color: #ffffff;
  146. }
  147. .and {
  148. position: absolute;
  149. left: 353px;
  150. top: 263px;
  151. font-size: 20px;
  152. font-weight: 500;
  153. line-height: 28px;
  154. }
  155. .common {
  156. position: absolute;
  157. left: 680px;
  158. font-size: 24px;
  159. font-weight: 500;
  160. line-height: 34px;
  161. }
  162. .num {
  163. font-family: Persagy;
  164. font-style: normal;
  165. font-weight: 700;
  166. line-height: 29px;
  167. }
  168. .carbon {
  169. top: 120px;
  170. }
  171. .CO2 {
  172. top: 260px;
  173. }
  174. .tree {
  175. top: 400px;
  176. }
  177. }
  178. .chart-box{
  179. margin-top: 24px;
  180. }
  181. }
  182. </style>