<!--<template>-->
<!--  <div class="wrap">-->
<!--    <div id="wrapbg" class="bg">-->
<!--      <div class="dateRight" id="dateRight"></div>-->
<!--      <div class="title" id="title">-->
<!--        <div class="title1" id="title1">当月电量走势图</div>-->
<!--        <div class="title2" id="title2">合计电量</div>-->
<!--      </div>-->
<!--      <div class="selectOneButton"></div>-->
<!--      <select class="selectOne" id="selectOne" onchange="selectOneChange()">-->
<!--        <option label="建筑" value="0"></option>-->
<!--        <option label="业态" value="1"></option>-->
<!--        <option label="分项" value="2"></option>-->
<!--      </select>-->

<!--      <div class="selectTwoButton"></div>-->
<!--      <select class="selectTwo" id="selectTwo"></select>-->

<!--      <div class="dataTime" id="dataTime">-->
<!--        <div class="timeOne" id="timeOne">2023-01-01</div>-->
<!--        <div class="span">至</div>-->
<!--        <div class="timeTwo" id="timeTwo">2023-01-01</div>-->
<!--      </div>-->

<!--      <div class="login" id="login" @click="gopage('/report/board/index')">-->
<!--        进入后台-->
<!--      </div>-->
<!--      <div class="topRight" id="topRight">-->
<!--        <div class="toIndex" @click="gopage('/report/index')">首页</div>-->
<!--        <div class="toEnergyPreview"  @click="gopage('/report/LeadershipView/LeadershipViewChearts')">能耗预览</div>-->
<!--        <div class="toState" @click="gopage('/report/LeadershipView/ApparentState')">表具状态</div>-->
<!--      </div>-->
<!--      <div class="totalElectricWaterQuantity" id="totalElectricWaterQuantity">-->
<!--        0-->
<!--      </div>-->
<!--      <div class="totalLineLoss" id="totalLineLoss">0</div>-->
<!--      <div class="kwh">kwh</div>-->
<!--      <div class="kwh" style="top: 85.7%">kwh</div>-->
<!--      <div class="previewElectricWaterButton" id="previewElectricWaterButton">-->
<!--        <div class="electricButton">电量</div>-->
<!--        <div class="waterButton">水量</div>-->
<!--      </div>-->
<!--      <div class="rankingElectricWaterButton" id="rankingElectricWaterButton">-->
<!--        <div class="electricButton">电量</div>-->
<!--        <div class="waterButton">水量</div>-->
<!--      </div>-->
<!--      <div-->
<!--        class="lineLossPreviewElectricWaterButton"-->
<!--        id="lineLossPreviewElectricWaterButton"-->
<!--      >-->
<!--        <div class="electricButton">电量</div>-->
<!--        <div class="waterButton">水量</div>-->
<!--      </div>-->

<!--      <div class="trendChart" id="trendChart"></div>-->
<!--      <div class="linkRelativeRatio" id="linkRelativeRatio"></div>-->
<!--      <div class="onYearOnYearBasis" id="onYearOnYearBasis"></div>-->
<!--      <div class="lineLoss" id="lineLoss"></div>-->
<!--      <div class="EnergyConsumptionRanking" id="EnergyConsumptionRanking"></div>-->
<!--      <div class="LineLossRanking" id="LineLossRanking"></div>-->
<!--    </div>-->
<!--  </div>-->
<!--</template>-->

<!--<script>-->
<!--import {-->
<!--  selectTypeSubset,-->
<!--  previewPolyline,-->
<!--} from "@/api/kanban/LeadershipViewChearts";-->
<!--import { resizeFunc, throttle } from "@/utils/resize.js";-->
<!--export default {-->
<!--  name: "Index",-->
<!--  data() {-->
<!--    return {-->
<!--      version: "3.6.2",-->
<!--      value1: "",-->
<!--      type: "0",-->
<!--      RegionList: [],-->
<!--      dian1: true,-->
<!--      shui1: false,-->
<!--      QueryDataObject: {},-->
<!--      energyType1: "2",-->
<!--    };-->
<!--  },-->
<!--  mounted() {-->
<!--    resizeFunc(1905, 1080, "wrapbg")();-->
<!--    // this.selectTypeSubset(this.type);-->
<!--    // this.QueryDataObject.type = "0";-->
<!--    // this.initTodyChartCharts(2);-->
<!--    // this.initEnergyConsumptionCharts();-->
<!--    // this.initMonthOnMonthCharts();-->
<!--    // this.initYearOnYearCharts();-->
<!--    // this.initRingGraphCharts();-->
<!--    // this.initLineLossRankingCharts();-->
<!--  },-->
<!--  methods: {-->
<!--    gopage(path) {-->
<!--      this.$router.push({ path: path });-->
<!--    },-->
<!--    //左侧第一个选择类型下拉框 回调函数-->
<!--    SeleteType(e) {-->
<!--      this.type = e.target.value;-->
<!--      this.QueryDataObject.type = e.target.value;-->
<!--      this.selectTypeSubset(this.type);-->
<!--    },-->
<!--    //左侧第二个选择区域下拉框 获取数据-->
<!--    selectTypeSubset(type) {-->
<!--      selectTypeSubset(type).then((res) => {-->
<!--        this.RegionList = res.data;-->
<!--        console.log("RegionList", this.RegionList);-->
<!--        this.QueryDataObject.relationId = this.RegionList[0].relationId;-->
<!--        console.log("QueryDataObject", this.QueryDataObject);-->
<!--      });-->
<!--    },-->
<!--    //左侧第二个选择区域下拉框 回调函数-->
<!--    SeleteRegion(e) {-->
<!--      this.QueryDataObject.relationId = e.target.value;-->
<!--      console.log("QueryDataObject", this.QueryDataObject);-->
<!--    },-->
<!--    //左上角选择时间之后 回调函数-->
<!--    SeleteDate(e) {-->
<!--      this.QueryDataObject.beginCollectTime = e[0].slice(0, 10);-->
<!--      this.QueryDataObject.endCollectTime = e[1].slice(0, 10);-->
<!--      console.log("QueryDataObject", this.QueryDataObject);-->
<!--    },-->
<!--    ClickDian1() {-->
<!--      this.dian1 = !this.dian1;-->
<!--      this.shui1 = !this.shui1;-->
<!--      this.energyType1 = "3";-->
<!--    },-->
<!--    initTodyChartCharts(energyType) {-->
<!--      let arr = {-->
<!--        type: this.QueryDataObject.type,-->
<!--        relationId: this.QueryDataObject.relationId,-->
<!--        beginCollectTime: this.QueryDataObject.beginCollectTime,-->
<!--        endCollectTime: this.QueryDataObject.endCollectTime,-->
<!--        energyType,-->
<!--      };-->
<!--      console.log("arr", arr);-->
<!--      previewPolyline(arr).then((res) => {-->
<!--        console.log("res", res);-->
<!--      });-->
<!--      let myChart = this.$echarts.init(this.$refs.TodyChart);-->
<!--      myChart.setOption({-->
<!--        legend: {-->
<!--          lineStyle: {-->
<!--            color: "#808080",-->
<!--          },-->
<!--        },-->
<!--        color: "white",-->
<!--        textStyle: {-->
<!--          color: "white",-->
<!--        },-->
<!--        title: {-->
<!--          show: true,-->
<!--          left: "center",-->
<!--          top: "14px",-->
<!--          text: "当月电量走势图",-->
<!--          textStyle: {-->
<!--            color: "white",-->
<!--            fontSize: "12",-->
<!--          },-->
<!--        },-->
<!--        xAxis: {-->
<!--          type: "category",-->
<!--          data: ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"],-->
<!--        },-->
<!--        yAxis: {-->
<!--          type: "value",-->
<!--        },-->
<!--        series: [-->
<!--          {-->
<!--            data: [820, 932, 901, 934, 1290, 1330, 1320],-->
<!--            type: "line",-->
<!--            smooth: true,-->
<!--          },-->
<!--        ],-->
<!--      });-->
<!--    },-->
<!--    initRingGraphCharts() {-->
<!--      let myChart = this.$echarts.init(this.$refs.RingGraph);-->
<!--      myChart.setOption({-->
<!--        legend: {-->
<!--          lineStyle: {-->
<!--            color: "#808080",-->
<!--          },-->
<!--        },-->
<!--        color: "white",-->
<!--        textStyle: {-->
<!--          color: "white",-->
<!--        },-->
<!--        title: {-->
<!--          show: true,-->
<!--          left: "center",-->
<!--          top: "14px",-->
<!--          textStyle: {-->
<!--            color: "white",-->
<!--            fontSize: "12",-->
<!--          },-->
<!--        },-->
<!--        xAxis: {-->
<!--          type: "category",-->
<!--          data: ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"],-->
<!--        },-->
<!--        yAxis: {-->
<!--          type: "value",-->
<!--        },-->
<!--        series: [-->
<!--          {-->
<!--            data: [20, 60, 90, 130, 120, 110, 100],-->
<!--            type: "line",-->
<!--            smooth: true,-->
<!--          },-->
<!--        ],-->
<!--      });-->
<!--    },-->
<!--    initMonthOnMonthCharts() {-->
<!--      let myChart = this.$echarts.init(this.$refs.MonthOnMonth);-->
<!--      myChart.setOption({-->
<!--        textStyle: {-->
<!--          color: "white",-->
<!--        },-->
<!--        tooltip: {-->
<!--          trigger: "axis",-->
<!--        },-->
<!--        legend: {-->
<!--          data: ["今日", "昨日"],-->
<!--          textStyle: {-->
<!--            color: "white",-->
<!--          },-->
<!--        },-->
<!--        grid: {-->
<!--          left: "3%",-->
<!--          right: "4%",-->
<!--          bottom: "3%",-->
<!--          containLabel: true,-->
<!--        },-->
<!--        xAxis: {-->
<!--          type: "category",-->
<!--          boundaryGap: false,-->
<!--          data: ["Mon", "Tue", "Wed"],-->
<!--        },-->
<!--        yAxis: {-->
<!--          type: "value",-->
<!--        },-->
<!--        series: [-->
<!--          {-->
<!--            name: "今日",-->
<!--            type: "line",-->
<!--            stack: "Total",-->
<!--            data: [120, 132, 101, 134, 90, 230, 210],-->
<!--          },-->
<!--          {-->
<!--            name: "昨日",-->
<!--            type: "line",-->
<!--            stack: "Total",-->
<!--            data: [220, 182, 191, 234, 290, 330, 310],-->
<!--          },-->
<!--        ],-->
<!--      });-->
<!--    },-->
<!--    initYearOnYearCharts() {-->
<!--      let myChart = this.$echarts.init(this.$refs.YearOnYear);-->
<!--      myChart.setOption({-->
<!--        textStyle: {-->
<!--          color: "white",-->
<!--        },-->
<!--        tooltip: {-->
<!--          trigger: "axis",-->
<!--        },-->
<!--        legend: {-->
<!--          data: ["今年", "去年"],-->
<!--          textStyle: {-->
<!--            color: "white",-->
<!--          },-->
<!--        },-->
<!--        grid: {-->
<!--          left: "3%",-->
<!--          right: "4%",-->
<!--          bottom: "3%",-->
<!--          containLabel: true,-->
<!--        },-->
<!--        xAxis: {-->
<!--          type: "category",-->
<!--          boundaryGap: false,-->
<!--          data: ["Mon", "Tue", "Wed"],-->
<!--        },-->
<!--        yAxis: {-->
<!--          type: "value",-->
<!--        },-->
<!--        series: [-->
<!--          {-->
<!--            name: "今年",-->
<!--            type: "line",-->
<!--            stack: "Total",-->
<!--            data: [120, 132, 101, 134, 90, 230, 210],-->
<!--          },-->
<!--          {-->
<!--            name: "去年",-->
<!--            type: "line",-->
<!--            stack: "Total",-->
<!--            data: [220, 182, 191, 234, 290, 330, 310],-->
<!--          },-->
<!--        ],-->
<!--      });-->
<!--    },-->
<!--    initEnergyConsumptionCharts() {-->
<!--      let myChart = this.$echarts.init(this.$refs.EnergyConsumption);-->
<!--      myChart.setOption({-->
<!--        legend: {-->
<!--          lineStyle: {-->
<!--            color: "#808080",-->
<!--          },-->
<!--        },-->
<!--        color: "white",-->
<!--        textStyle: {-->
<!--          color: "white",-->
<!--        },-->
<!--        title: {-->
<!--          show: true,-->
<!--          left: "center",-->
<!--          top: "14px",-->
<!--          textStyle: {-->
<!--            color: "white",-->
<!--            fontSize: "12",-->
<!--          },-->
<!--        },-->
<!--        xAxis: {-->
<!--          type: "value",-->
<!--        },-->
<!--        yAxis: {-->
<!--          type: "category",-->
<!--          data: ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"],-->
<!--        },-->
<!--        series: [-->
<!--          {-->
<!--            data: [120, 200, 150, 80, 70, 110, 130],-->
<!--            type: "bar",-->
<!--            itemStyle: {-->
<!--              color: "blue",-->
<!--            },-->
<!--          },-->
<!--        ],-->
<!--      });-->
<!--    },-->
<!--    initLineLossRankingCharts() {-->
<!--      let myChart = this.$echarts.init(this.$refs.LineLossRanking);-->
<!--      myChart.setOption({-->
<!--        legend: {-->
<!--          lineStyle: {-->
<!--            color: "#808080",-->
<!--          },-->
<!--        },-->
<!--        color: "white",-->
<!--        textStyle: {-->
<!--          color: "white",-->
<!--        },-->
<!--        title: {-->
<!--          show: true,-->
<!--          left: "center",-->
<!--          top: "14px",-->
<!--          textStyle: {-->
<!--            color: "white",-->
<!--            fontSize: "12",-->
<!--          },-->
<!--        },-->
<!--        xAxis: {-->
<!--          type: "value",-->
<!--        },-->
<!--        yAxis: {-->
<!--          type: "category",-->
<!--          data: ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"],-->
<!--        },-->
<!--        series: [-->
<!--          {-->
<!--            data: [120, 200, 150, 80, 70, 110, 130],-->
<!--            type: "bar",-->
<!--            itemStyle: {-->
<!--              color: "blue",-->
<!--            },-->
<!--          },-->
<!--        ],-->
<!--      });-->
<!--    },-->
<!--    genData(count) {-->
<!--      // prettier-ignore-->
<!--      const nameList = [-->
<!--        '赵', '钱', '孙', '姚', '强', '贾', '路', '娄', '危'-->
<!--      ];-->
<!--      const legendData = [];-->
<!--      const seriesData = [];-->
<!--      for (var i = 0; i < count; i++) {-->
<!--        var name =-->
<!--          Math.random() > 0.65-->
<!--            ? makeWord(4, 1) + "·" + makeWord(3, 0)-->
<!--            : makeWord(2, 1);-->
<!--        legendData.push(name);-->
<!--        seriesData.push({-->
<!--          name: name,-->
<!--          value: Math.round(Math.random() * 100000),-->
<!--        });-->
<!--      }-->
<!--      return {-->
<!--        legendData: legendData,-->
<!--        seriesData: seriesData,-->
<!--      };-->
<!--      function makeWord(max, min) {-->
<!--        const nameLen = Math.ceil(Math.random() * max + min);-->
<!--        const name = [];-->
<!--        for (var i = 0; i < nameLen; i++) {-->
<!--          name.push(nameList[Math.round(Math.random() * nameList.length - 1)]);-->
<!--        }-->
<!--        return name.join("");-->
<!--      }-->
<!--    },-->
<!--    goTarget(href) {-->
<!--      window.open(href, "_blank");-->
<!--    },-->
<!--  },-->
<!--};-->
<!--</script>-->

<!--<style scoped lang="scss">-->
<!--.wrap {-->
<!--  width: 100vw;-->
<!--  height: 100vh;-->
<!--  background-color: rgb(12, 21, 78);-->
<!--}-->
<!--.bg {-->
<!--  width: 1920px;-->
<!--  height: 1080px;-->
<!--  background-image: url("~@/img/energyPreview/backgroundImg.jpg");-->
<!--  background-repeat: no-repeat;-->
<!--  background-size: auto auto;-->
<!--  position: absolute;-->
<!--  overflow-y: hidden;-->
<!--}-->

<!--.trendChart {-->
<!--  position: absolute;-->
<!--  width: 46%;-->
<!--  height: 15%;-->
<!--  top: 21%;-->
<!--  left: 17%;-->
<!--}-->

<!--.linkRelativeRatio {-->
<!--  position: absolute;-->
<!--  width: 29%;-->
<!--  height: 25%;-->
<!--  top: 44%;-->
<!--  left: 3%;-->
<!--}-->

<!--.onYearOnYearBasis {-->
<!--  position: absolute;-->
<!--  width: 29%;-->
<!--  height: 25%;-->
<!--  top: 44%;-->
<!--  left: 34%;-->
<!--}-->

<!--.lineLoss {-->
<!--  position: absolute;-->
<!--  width: 46%;-->
<!--  height: 17%;-->
<!--  top: 76%;-->
<!--  left: 17%;-->
<!--}-->

<!--.EnergyConsumptionRanking {-->
<!--  position: absolute;-->
<!--  width: 31%;-->
<!--  height: 35%;-->
<!--  top: 16%;-->
<!--  left: 67%;-->
<!--}-->

<!--.LineLossRanking {-->
<!--  position: absolute;-->
<!--  width: 31%;-->
<!--  height: 35%;-->
<!--  top: 59%;-->
<!--  left: 67%;-->
<!--}-->

<!--.toIndex {-->
<!--  position: absolute;-->
<!--  transform: translate(-50%, -50%);-->
<!--  top: 3%;-->
<!--  right: 80%;-->
<!--  font-size: 1vw;-->
<!--  cursor: pointer;-->
<!--  padding: 0 20px;-->
<!--  color: #ccc;-->
<!--}-->

<!--.toEnergyPreview {-->
<!--  position: absolute;-->
<!--  transform: translate(-50%, -50%);-->
<!--  top: 3%;-->
<!--  right: 68%;-->
<!--  cursor: pointer;-->
<!--  font-size: 1vw;-->
<!--  color: #fff;-->
<!--  padding: 0 20px;-->
<!--  background-image: url("~@/img/common/indexSpanBg.png");-->
<!--  background-size: 100% 50%;-->
<!--  background-repeat: no-repeat;-->
<!--  background-position: bottom;-->
<!--}-->

<!--.toState {-->
<!--  position: absolute;-->
<!--  transform: translate(-50%, -50%);-->
<!--  top: 3%;-->
<!--  right: 16%;-->
<!--  font-size: 1vw;-->
<!--  padding: 0 20px;-->
<!--  color: #ccc;-->
<!--  background-repeat: no-repeat;-->
<!--  background-position: bottom;-->
<!--  cursor: pointer;-->
<!--  background-size: 100% 50%;-->
<!--}-->

<!--.totalElectricWaterQuantity {-->
<!--  position: absolute;-->
<!--  top: 26.8%;-->
<!--  left: 8.7%;-->
<!--  font-size: 28px;-->
<!--  color: #4db3fa;-->
<!--  font-weight: 600;-->
<!--  transform: translate(-50%, -50%);-->
<!--}-->

<!--.totalLineLoss {-->
<!--  position: absolute;-->
<!--  top: 82.8%;-->
<!--  left: 8.7%;-->
<!--  font-size: 28px;-->
<!--  color: #4db3fa;-->
<!--  font-weight: 600;-->
<!--  transform: translate(-50%, -50%);-->
<!--}-->

<!--.kwh {-->
<!--  position: absolute;-->
<!--  top: 29.7%;-->
<!--  left: 8.7%;-->
<!--  font-size: 1vw;-->
<!--  transform: translate(-50%, -50%);-->
<!--  color: #c7c3c4;-->
<!--}-->

<!--.previewElectricWaterButton .electricButton {-->
<!--  position: absolute;-->
<!--  top: 11.9%;-->
<!--  left: 54.8%;-->
<!--  font-size: 0.9vw;-->
<!--  color: #fff;-->
<!--  cursor: pointer;-->
<!--  padding: 0 18px;-->
<!--  background-image: url("~@/img/common/electricityWaterBg.png");-->
<!--  background-size: 100% 100%;-->
<!--  background-repeat: no-repeat;-->
<!--}-->

<!--.previewElectricWaterButton .waterButton {-->
<!--  position: absolute;-->
<!--  top: 11.9%;-->
<!--  left: 58.8%;-->
<!--  font-size: 0.9vw;-->
<!--  color: #ccc;-->
<!--  cursor: pointer;-->
<!--  padding: 0 18px;-->
<!--  background-size: 100% 100%;-->
<!--  background-repeat: no-repeat;-->
<!--}-->

<!--.rankingElectricWaterButton .electricButton {-->
<!--  position: absolute;-->
<!--  top: 11.9%;-->
<!--  left: 88.2%;-->
<!--  font-size: 0.9vw;-->
<!--  color: #fff;-->
<!--  padding: 0 18px;-->
<!--  background-image: url("~@/img/common/electricityWaterBg.png");-->
<!--  background-size: 100% 100%;-->
<!--  cursor: pointer;-->
<!--  background-repeat: no-repeat;-->
<!--}-->

<!--.rankingElectricWaterButton .waterButton {-->
<!--  position: absolute;-->
<!--  top: 11.9%;-->
<!--  left: 92.2%;-->
<!--  font-size: 0.9vw;-->
<!--  color: #ccc;-->
<!--  padding: 0 18px;-->
<!--  background-size: 100% 100%;-->
<!--  cursor: pointer;-->
<!--  background-repeat: no-repeat;-->
<!--}-->

<!--.lineLossPreviewElectricWaterButton .electricButton {-->
<!--  position: absolute;-->
<!--  top: 55.7%;-->
<!--  left: 88.2%;-->
<!--  font-size: 0.9vw;-->
<!--  color: #fff;-->
<!--  padding: 0 18px;-->
<!--  background-image: url("~@/img/common/electricityWaterBg.png");-->
<!--  background-size: 100% 100%;-->
<!--  background-repeat: no-repeat;-->
<!--  cursor: pointer;-->
<!--}-->

<!--.lineLossPreviewElectricWaterButton .waterButton {-->
<!--  position: absolute;-->
<!--  top: 55.7%;-->
<!--  left: 92.2%;-->
<!--  font-size: 0.9vw;-->
<!--  cursor: pointer;-->
<!--  color: #ccc;-->
<!--  padding: 0 18px;-->
<!--  background-size: 100% 100%;-->
<!--  background-repeat: no-repeat;-->
<!--}-->

<!--.selectOne option,-->
<!--.selectTwo option {-->
<!--  color: #000;-->
<!--}-->

<!--.selectOne,-->
<!--.selectTwo {-->
<!--  appearance: none;-->
<!--  -moz-appearance: none;-->
<!--  -webkit-appearance: none;-->
<!--  color: #fff;-->
<!--  border: 0;-->
<!--  position: absolute;-->
<!--  width: 5.4%;-->
<!--  height: 3%;-->
<!--  top: 7.2%;-->
<!--  padding-left: 1.52%;-->
<!--  background: rgba(0, 0, 0, 0);-->
<!--}-->

<!--.selectOne {-->
<!--  left: 1.5%;-->
<!--}-->

<!--.selectTwo {-->
<!--  left: 7%;-->
<!--}-->

<!--.selectOneButton,-->
<!--.selectTwoButton {-->
<!--  position: absolute;-->
<!--  width: 5.4%;-->
<!--  height: 3%;-->
<!--  top: 7.2%;-->
<!--  border: 1px solid #054ea6;-->
<!--  background: url("~@/img/common/selectButton.png") no-repeat scroll 90% center-->
<!--    transparent;-->
<!--}-->

<!--.selectOneButton {-->
<!--  left: 1.5%;-->
<!--}-->

<!--.selectTwoButton {-->
<!--  left: 7%;-->
<!--}-->

<!--.dataTime {-->
<!--  position: absolute;-->
<!--  width: 13%;-->
<!--  height: 3%;-->
<!--  top: 7.2%;-->
<!--  left: 13%;-->
<!--  line-height: 30px;-->
<!--  font-size: 16px;-->
<!--  border: 1px solid #054ea6;-->
<!--  background: url("~@/img/common/time.png") no-repeat scroll 5% center-->
<!--    transparent;-->
<!--  padding-left: 33px;-->
<!--  min-width: 185px;-->
<!--}-->

<!--.timeOne,-->
<!--.timeTwo {-->
<!--  color: #fff;-->
<!--  display: inline-block;-->
<!--  font-size: 16px;-->
<!--  height: 30px;-->
<!--  line-height: 30px;-->
<!--}-->

<!--.span {-->
<!--  color: #fff;-->
<!--  display: inline-block;-->
<!--  line-height: 3vh;-->
<!--  padding: 0 4px;-->
<!--}-->

<!--.dateRight {-->
<!--  position: absolute;-->
<!--  top: 8.8%;-->
<!--  right: 2%;-->
<!--  transform: translateY(-50%);-->
<!--  color: #fff;-->
<!--}-->

<!--.title1 {-->
<!--  transform: translate(-50%, -50%);-->
<!--  position: absolute;-->
<!--  top: 19.1%;-->
<!--  left: 41%;-->
<!--  color: #fff;-->
<!--  font-size: 0.8vw;-->
<!--}-->

<!--.title2 {-->
<!--  transform: translate(-50%, -50%);-->
<!--  position: absolute;-->
<!--  top: 19.1%;-->
<!--  left: 8.6%;-->
<!--  color: #fff;-->
<!--  font-size: 0.8vw;-->
<!--}-->

<!--.login {-->
<!--  position: absolute;-->
<!--  transform: translate(-50%, -50%);-->
<!--  top: 3%;-->
<!--  right: 6%;-->
<!--  text-align: center;-->
<!--  font-size: 1vw;-->
<!--  padding: 0 20px;-->
<!--  background-repeat: no-repeat;-->
<!--  background-position: bottom;-->
<!--  background-size: 100% 50%;-->
<!--  color: #ccc;-->
<!--  cursor: pointer;-->
<!--}-->
<!--</style>-->
