horThree.vue 5.9 KB

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