123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215 |
- <template>
- <div class="horThree">
- <div class="bg">
- <img
- :src="bgImg"
- alt=""
- >
- </div>
- <div class="container">
- <div class="hor-head">
- <pageHead />
- </div>
- <div class="hor-nowData-content">
- <div class="flexBetween">
- <div class="left box">
- <div class="left-bg bg1">
- <img :src="lastMonthTotal" />
- </div>
- <div class="left-title car-title">
- <div>上月总能耗</div>
- <div class="left-title-text">低能耗亲自然</div>
- </div>
- <div class="left-content">
- <div class="left-content-first">比基准能耗</div>
- <div class="left-content-next">
- 节能<span class="next-num">50%</span>
- </div>
- <div class="left-content-first blue">总能耗28050KWh</div>
- </div>
- </div>
- <div class="right box">
- <div class="right-bg bg1">
- <img :src="lastMonthEner" />
- </div>
- <div class="right-title car-title">
- <span>上月节约能耗</span>
- </div>
- <div class="elect">
- <div>节约电</div>
- <div> <span>23456</span>度</div>
- </div>
- <div class="and">
- <span>相当于</span>
- </div>
- <div class="CO2 common">
- <span>减排<i class="num">5kg</i>二氧化碳</span>
- </div>
- <div class="carbon common">
- <span>减排<i class="num">5kg</i>碳</span>
- </div>
- <div class="tree common">
- <span>为国家种<i class="num">5</i>棵树</span>
- </div>
- </div>
- </div>
- <div class="chart-box box">
- 上月总能耗
- </div>
- </div>
- </div>
- </div>
- </template>
- <script lang="ts">
- import Vue from "vue";
- declare function require(img: string): string;
- const hor_big_bg = require("@/assets/horImg/hor_big_bg.png");
- const hor_lastMonthEner = require("@/assets/horImg/hor_lastMonthEner.png");
- const hor_lastMonthTotal = require("@/assets/horImg/hor_lastMonthTotal.png");
- import pageHead from "./valueDelivery/pageHead.vue";
- export default Vue.extend({
- components: { pageHead },
- data() {
- return {
- bgImg: hor_big_bg,
- lastMonthEner: hor_lastMonthEner,
- lastMonthTotal: hor_lastMonthTotal,
- };
- },
- });
- </script>
- <style lang="less" scoped>
- .horThree {
- color: #3b3558;
- .hor-head {
- // padding-top: 32px;
- display: flex;
- justify-content: center;
- }
- .bg {
- position: absolute;
- z-index: -2;
- }
- .bg1 {
- position: absolute;
- z-index: -1;
- }
- .flexBetween {
- display: flex;
- justify-content: space-between;
- }
- .box {
- z-index: -1;
- border-radius: 20px;
- border: 2px solid #ffffff;
- background: #ffffffcc;
- display: flex;
- align-items: center;
- justify-content: center;
- }
- .car-title {
- position: absolute;
- top: 20px;
- left: 24px;
- font-size: 20px;
- font-weight: 600;
- line-height: 28px;
- }
- .hor-nowData-content {
- padding: 32px 20px;
- box-sizing: border-box;
- .content-left-next {
- padding-top: 27px;
- }
- }
- .left {
- position: relative;
- height: 556px;
- width: 678px;
- .left-title-text {
- font-size: 14px;
- font-weight: 400;
- line-height: 20px;
- }
- .left-content {
- text-align: center;
- .left-content-first {
- font-size: 20px;
- font-weight: 500;
- line-height: 28px;
- &.blue {
- color: #2ec5f5;
- padding-top: 12px;
- }
- }
- .left-content-next {
- padding-top: 12px;
- font-size: 46px;
- font-weight: 600;
- line-height: 64px;
- .next-num {
- font-size: 48px;
- font-weight: 700;
- line-height: 58px;
- }
- }
- }
- }
- .right {
- position: relative;
- height: 556px;
- width: 1138px;
- .elect {
- position: absolute;
- left: 180px;
- top: 240px;
- text-align: center;
- font-size: 24px;
- font-weight: 600;
- line-height: 34px;
- color: #ffffff;
- }
- .and {
- position: absolute;
- left: 353px;
- top: 263px;
- font-size: 20px;
- font-weight: 500;
- line-height: 28px;
- }
- .common {
- position: absolute;
- left: 680px;
- font-size: 24px;
- font-weight: 500;
- line-height: 34px;
- }
- .num {
- font-family: Persagy;
- font-style: normal;
- font-weight: 700;
- line-height: 29px;
- }
- .carbon {
- top: 120px;
- }
- .CO2 {
- top: 260px;
- }
- .tree {
- top: 400px;
- }
- }
- .chart-box {
- margin-top: 24px;
- }
- }
- </style>
|