yanchengPowerSupply/node_modules/.cache/vue-loader/705b0e162f4998c9994a2807123bc0c3.json

{"remainingRequest":"D:\\林谷智能项目\\yanchengPowerSupply\\node_modules\\vue-loader\\lib\\index.js??vue-loader-options!D:\\林谷智能项目\\yanchengPowerSupply\\src\\App.vue?vue&type=style&index=1&id=7ba5bd90&lang=less&scoped=true&","dependencies":[{"path":"D:\\林谷智能项目\\yanchengPowerSupply\\src\\App.vue","mtime":1689927995523},{"path":"D:\\林谷智能项目\\yanchengPowerSupply\\node_modules\\css-loader\\index.js","mtime":499162500000},{"path":"D:\\林谷智能项目\\yanchengPowerSupply\\node_modules\\vue-loader\\lib\\loaders\\stylePostLoader.js","mtime":1655715156000},{"path":"D:\\林谷智能项目\\yanchengPowerSupply\\node_modules\\postcss-loader\\src\\index.js","mtime":499162500000},{"path":"D:\\林谷智能项目\\yanchengPowerSupply\\node_modules\\less-loader\\dist\\cjs.js","mtime":499162500000},{"path":"D:\\林谷智能项目\\yanchengPowerSupply\\node_modules\\cache-loader\\dist\\cjs.js","mtime":499162500000},{"path":"D:\\林谷智能项目\\yanchengPowerSupply\\node_modules\\vue-loader\\lib\\index.js","mtime":1655715099000}],"contextDependencies":[],"result":["\r\n.top {\r\n  width: 100%;\r\n  height: 100px;\r\n  /* background: rgba(147, 230, 244,0.6); */\r\n  /* background-image: linear-gradient(90deg, rgba(147, 230, 244,0.6),rgba(147, 230, 244,0), rgba(147, 230, 244,0.6)); */\r\n//   background: url(\"./assets/images/topBg.png\") no-repeat;\r\n  background: url(\"./assets/indexN/title.png\") no-repeat;\r\n  background-size: 100% 100%;\r\n  display: flex;\r\n  flex-flow: row nowrap;\r\n  justify-content: space-between;\r\n  .left {\r\n    width: 30%;\r\n    height: 97px;\r\n    // background: url(\"./assets/index/title.png\") no-repeat;\r\n    // background-size: 100% 100%;\r\n    font-size: 44px;\r\n    font-weight: 700;\r\n    letter-spacing: 10px;\r\n    color: #ffffff;\r\n    // line-height: 97px;\r\n    padding-left: 86px;\r\n    text-align: left;\r\n        display: flex;\r\n    margin-left: 1%;\r\n    margin-top: 0.5%;\r\n    box-sizing: border-box;\r\n     .time {\r\n      height: 100%;\r\n      color: #ffffff;\r\n      font-size: 22px;\r\n    //   display: flex;\r\n      flex-flow: column nowrap;\r\n      justify-content: center;\r\n      text-align: left;\r\n    }\r\n    .weather {\r\n    //   display: flex;\r\n    //   flex-flow: row nowrap;\r\n      height: 100%;\r\n      align-items: center;\r\n       color: #ffffff;\r\n      font-size: 22px;\r\n      margin-left: 36px;\r\n      .pic {\r\n        width: 61px;\r\n        height: 61px;\r\n      }\r\n      .date {\r\n        height: 100%;\r\n        color: #ffffff;\r\n        font-size: 18px;\r\n        display: flex;\r\n        flex-flow: column nowrap;\r\n        justify-content: center;\r\n        margin-left: 19px;\r\n        text-align: left;\r\n      }\r\n    }\r\n    \r\n  }\r\n  .left:before {\r\n    content: attr(text);\r\n    position: absolute;\r\n    z-index: 10;\r\n    color: rgb(86, 254, 246);\r\n    -webkit-mask: linear-gradient(to top, rgb(86, 244, 254), transparent);\r\n  }\r\n  .middle {\r\n     width: 27%;\r\n    height: 80px;\r\n    display: -webkit-box;\r\n    display: -ms-flexbox;\r\n    /* display: flex; */\r\n    -webkit-box-orient: horizontal;\r\n    -webkit-box-direction: normal;\r\n    position: absolute;\r\n    left: 38%;\r\n    top: 3%;\r\n   .box{\r\n    width: 100%;\r\n    height: 100%;\r\n    // background: url(\"./assets/indexN/titleText.png\") no-repeat;\r\n   }\r\n    .router {\r\n      width: 244px;\r\n      height: 100%;\r\n      line-height: 78px;\r\n      color: rgb(41, 114, 124);\r\n      font-size: 22px;\r\n      cursor: pointer;\r\n    }\r\n    .active {\r\n      color: #ffffff;\r\n      background: url(\"./assets/images/routerActive.png\") no-repeat;\r\n      background-size: 100% 100%;\r\n    }\r\n    .active:before {\r\n      content: attr(text);\r\n      position: absolute;\r\n      z-index: 10;\r\n      color: rgb(86, 254, 246);\r\n      -webkit-mask: linear-gradient(to top, rgb(86, 244, 254), transparent);\r\n    }\r\n  }\r\n  .right {\r\n    // width: 740px;\r\n    height: 78px;\r\n    display: flex;\r\n    flex-flow: row nowrap;\r\n    justify-content: space-between;\r\n    padding-right: 15px;\r\n      font-size: 44px;\r\n    font-weight: 700;\r\n    letter-spacing: 10px;\r\n    margin-right: 1%;\r\n    .time {\r\n      height: 100%;\r\n      color: #ffffff;\r\n      font-size: 18px;\r\n      display: flex;\r\n      flex-flow: column nowrap;\r\n      justify-content: center;\r\n      text-align: left;\r\n    }\r\n    .weather {\r\n      display: flex;\r\n      flex-flow: row nowrap;\r\n      height: 100%;\r\n      align-items: center;\r\n      margin-left: 36px;\r\n       color: #ffffff;\r\n      font-size: 22px;\r\n      margin-left: 36px;\r\n      .pic {\r\n        width: 61px;\r\n        height: 61px;\r\n      }\r\n      .date {\r\n        height: 100%;\r\n        color: #ffffff;\r\n        font-size: 18px;\r\n        display: flex;\r\n        flex-flow: column nowrap;\r\n        justify-content: center;\r\n        margin-left: 19px;\r\n        text-align: left;\r\n      }\r\n    }\r\n  }\r\n}\r\n.content {\r\n  width: 100%;\r\n  height: calc(100% - 100px);\r\n  display: flex;\r\n  align-items: center;\r\n  justify-content: space-around;\r\n}\r\n",{"version":3,"sources":["App.vue"],"names":[],"mappings":";AAoXA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA","file":"App.vue","sourceRoot":"src","sourcesContent":["<template>\r\n  <div id=\"app\">\r\n    <div class=\"top\">\r\n      <div class=\"left\">\r\n         <div class=\"time\">\r\n          {{this.$moment().format(\"YYYY.MM.DD\")}} {{nowDate}} | {{week}}\r\n        </div>\r\n         \r\n      </div>\r\n      <div class=\"middle\">\r\n        <div class=\"box\">\r\n            \r\n             <img :src=\"middleImg\" alt=\"\" ref=\"switchBtn\"  />   \r\n        </div>\r\n        <!-- <div\r\n          class=\"router\"\r\n          :class=\"{ active: routerActive == index }\"\r\n          v-for=\"(item, index) in routerTitle\"\r\n          @click=\"handleChange(index)\"\r\n          :key=\"index\"\r\n          :text=\"item\"\r\n        >\r\n          {{ item }}\r\n        </div> -->\r\n      </div>\r\n      <div class=\"right\">\r\n        <div  class=\"weather\">\r\n            <div v-if=\"backShow\" @click=\"backBtn\">\r\n              <img src=\"./assets/indexN/back.png\" alt=\"\"  style=\"height: 100%; width: 100%\" />   \r\n            </div>\r\n             <div class=\"pic\">\r\n             <img src=\"./assets/images/union.png\" alt=\"\" style=\"height: 100%; width: 100%\" />\r\n             </div>\r\n            <span>阴转多云</span>|\r\n          <span style=\"font-size: 24px; color:#0B4A6B\">25℃~30℃</span>|\r\n          <span style=\"font-size: 24px; margin-top: 3px\">东风3~4级</span>\r\n        </div>\r\n        <!-- <div class=\"weather\" v-for=\"(item, index) in weatherArr\" :key=\"index\">\r\n          <div class=\"pic\">\r\n            <img :src=\"item.pic\" alt=\"\" style=\"height: 100%; width: 100%\" />\r\n          </div>\r\n          <div class=\"date\">\r\n            <span>{{ item.date }}</span>\r\n            <span style=\"font-size: 24px; margin-top: 3px\">{{\r\n              item.wendu\r\n            }}</span>\r\n          </div>\r\n        </div> -->\r\n      </div>\r\n    </div>\r\n    <div class=\"content\">\r\n      <router-view></router-view>\r\n    </div>\r\n  </div>\r\n</template>\r\n<script>\r\nimport MinxinItem from \"./mixins\";\r\nimport axios from \"axios\";\r\nimport { getWather, Weather, getToken } from \"./api/index.js\";\r\nexport default {\r\n  name: \"home\",\r\n  mixins: [MinxinItem],\r\n  data() {\r\n    return {\r\n      addDay: \"\",\r\n      subDay: \"\",\r\n      backShow: false,\r\n      routerTitle: [\"实时监测\",  \"安全管控\", \"站房智辅\"],\r\n      routerActive: 0,\r\n      middleImg:require(\"./assets/indexN/titleText.png\"),\r\n      weatherArr: [\r\n        {\r\n          day: \"今天\",\r\n          temperature: \"\",\r\n          pic: require(\"./assets/images/sun.png\"),\r\n        },\r\n        {\r\n          day: \"昨天\",\r\n          temperature: \"\",\r\n          pic: require(\"./assets/images/union.png\"),\r\n        },\r\n        {\r\n          day: \"明天\",\r\n          temperature: \"\",\r\n          pic: require(\"./assets/images/windy.png\"),\r\n        },\r\n      ],\r\n      weekList: [\"周日\", \"周一\", \"周二\", \"周三\", \"周四\", \"周五\", \"周六\"],\r\n      week: \"\",\r\n      nowDate:'',\r\n    };\r\n  },\r\n  mounted() {\r\n    // this.handleWather();\r\n    let week = new Date(this.$moment().format(\"YYYY-MM-DD\")).getDay();\r\n    this.week = this.weekList[week];\r\n    this.getLoc()\r\n    //  let params = new URLSearchParams()\r\n    // let params = {\r\n    //   appKey: \"symnzwxdfu1ul8raqrykgbld7zonktga\",\r\n    //   appSecret: \"a3tdb6nxfciekxcgcl94ljvtmw2lsafx\",\r\n    // };\r\n    //  params.append('appKey','symnzwxdfu1ul8raqrykgbld7zonktga')\r\n    //  params.append('appSecret','a3tdb6nxfciekxcgcl94ljvtmw2lsafx')\r\n    // getToken(params).then((res) => {\r\n    //   localStorage.setItem(\"token\", res.data.data.token);\r\n    //   //  console.log(localStorage.getItem('token'),'token');\r\n    // });\r\n    // setInterval(()=>{\r\n    //   this. handleWather()\r\n    // },480000)\r\n    setInterval(()=>{\r\n      this.nowDate =  this.$moment().format(\"HH:mm:ss\")\r\n    },100)\r\n     window.getLoc = this.getLoc;\r\n  },\r\n\r\n  methods: {\r\n    getLoc(){\r\n        var curWwwPath=window.document.location.href;\r\n        console.log(\"curWwwPath\",curWwwPath)\r\n   let paramArr = curWwwPath.split('/');\r\n   let ele = paramArr.pop();\r\n     console.log(\"ele\",ele)\r\n    if(ele=='index'){\r\n         this.backShow = false\r\n         this.middleImg = require(\"./assets/indexN/titleText.png\")\r\n             this.$refs.switchBtn.style.height = \"79%\";\r\n         this.$refs.switchBtn.style.width = \"85%\";\r\n    }else if(ele =='stationBuilding'){\r\n            this.middleImg = require(\"./assets/title/02.png\"),\r\n            this.backShow = true \r\n              this.$refs.switchBtn.style.height = \"72%\";\r\n         this.$refs.switchBtn.style.width = \"36%\";\r\n    }else if(ele =='twentyKV'){\r\n            this.middleImg = require(\"./assets/title/03.png\"),\r\n            this.backShow = true \r\n            this.$refs.switchBtn.style.height = \"79%\";\r\n         this.$refs.switchBtn.style.width = \"85%\";\r\n    }else if(ele =='thirtyFiveKV'){\r\n            this.middleImg = require(\"./assets/title/04.png\"),\r\n            this.backShow = true \r\n            this.$refs.switchBtn.style.height = \"79%\";\r\n         this.$refs.switchBtn.style.width = \"85%\";\r\n    }else if(ele =='powerQualityControl'){\r\n            this.middleImg = require(\"./assets/title/05.png\"),\r\n            this.backShow = true \r\n            this.$refs.switchBtn.style.height = \"79%\";\r\n         this.$refs.switchBtn.style.width = \"85%\";\r\n    }else if(ele =='ruralRevitalizationPower'){\r\n            this.middleImg = require(\"./assets/title/07.png\"),\r\n            this.backShow = true \r\n            this.$refs.switchBtn.style.height = \"79%\";\r\n         this.$refs.switchBtn.style.width = \"85%\";\r\n    }else if(ele =='enterprisePollutionMonitoring'){\r\n            this.middleImg = require(\"./assets/title/08.png\"),\r\n            this.backShow = true \r\n            this.$refs.switchBtn.style.height = \"79%\";\r\n         this.$refs.switchBtn.style.width = \"85%\";\r\n    }else if(ele =='ruralDomesticSewageTreatment'){\r\n            this.middleImg = require(\"./assets/title/07.png\"),\r\n            this.backShow = true \r\n            this.$refs.switchBtn.style.height = \"79%\";\r\n         this.$refs.switchBtn.style.width = \"85%\";\r\n    }else if(ele =='digitalFloodDrainageDroughtRelief'){\r\n            this.middleImg = require(\"./assets/title/09.png\"),\r\n            this.backShow = true \r\n            this.$refs.switchBtn.style.height = \"79%\";\r\n         this.$refs.switchBtn.style.width = \"85%\";\r\n    }\r\n        \r\n    },\r\n    backBtn(){\r\n         this.$router.push(\"/index\");\r\n    },\r\n    getDateSub(n) {\r\n      let day = this.$moment(new Date())\r\n        .subtract(n, \"days\")\r\n        .format(\"YYYY-MM-DD\");\r\n      this.subDay = day;\r\n      return day;\r\n    },\r\n    getDateAdd(n) {\r\n      var dd = new Date();\r\n      dd.setDate(dd.getDate() + n); //获取n天后的日期\r\n      // var y = dd.getFullYear();\r\n      var m = dd.getMonth() + 1; //获取当前月份的日期\r\n      if (m < 10) {\r\n        m = \"0\" + m;\r\n      }\r\n      var d = dd.getDate();\r\n      if (d < 10) {\r\n        d = \"0\" + d;\r\n      }\r\n      let day = m + \"-\" + d;\r\n      // this.addDay = day;\r\n      return day;\r\n    },\r\n    getNewDate() {\r\n      var date = new Date();\r\n      var month = date.getMonth() + 1; //获取当前月份的日期\r\n      if (month < 10) {\r\n        month = \"0\" + month;\r\n      }\r\n      var a = date.getDate();\r\n      if (a < 10) {\r\n        a = \"0\" + a;\r\n      }\r\n      let day = month + \"-\" + a;\r\n      return day;\r\n    },\r\n    //天气\r\n    handleWather() {\r\n      // axios({url:\"http://www.jcznedu.com:5000/weather/prediction/?city=盐都&&limit=3\",methods:'GET'}).then(res=>{\r\n      // })\r\n\r\n      getWather().then((res) => {\r\n        // console.log(res, \"天气情况\");\r\n        for (let i = 0; i < res.data.data.length; i++) {\r\n          let item = res.data.data[i];\r\n          // console.log(item.date);\r\n          if (item.date == this.getNewDate()) {\r\n            item.date = \"今天\";\r\n            item.wendu = item.low + \"℃~\" + item.high + \"℃\";\r\n            item.pic = this.Onweather(item.weather, i);\r\n          } else if (item.date == this.getDateAdd(1)) {\r\n            item.date = \"明天\";\r\n            item.wendu = item.low + \"℃~\" + item.high + \"℃\";\r\n            item.pic = this.Onweather(item.weather, i);\r\n          } else if (item.date == this.getDateAdd(2)) {\r\n            item.date = \"后天\";\r\n            item.wendu = item.low + \"℃~\" + item.high + \"℃\";\r\n            item.pic = this.Onweather(item.weather, i);\r\n          }\r\n        }\r\n        // console.log(res.data.data);\r\n        // 天气\r\n        this.weatherArr = res.data.data;\r\n        // console.log(this.weatherArr);\r\n        // console.log(this.getNewDate(),'获取');\r\n      });\r\n      // Weather({\r\n      //   action: \"one\",\r\n      //   key: \"天气情况\",\r\n      // }).then((res) => {\r\n      //   // console.log(res, \"天气情况\");\r\n      //   let toDay = this.$moment().format(\"D\");\r\n      //   this.getDateSub(1);\r\n      //   this.getDateAdd(1),\r\n      //     res.data.data.forEach((item, index) => {\r\n      //       if (item.第N天 == this.$moment(this.subDay).format(\"D\")) {\r\n      //         this.weatherArr[1].date = \"昨天\";\r\n      //         this.weatherArr[1].temperature =\r\n      //           item.最低温度 + \"℃\" + \"~\" + item.最高温度 + \"℃\";\r\n      //         this.Onweather(item.天气, 1);\r\n      //       } else if (item.第N天 == this.$moment(this.addDay).format(\"D\")) {\r\n      //         this.weatherArr[2].date = \"明天\";\r\n      //         this.weatherArr[2].temperature =\r\n      //           item.最低温度 + \"℃\" + \"~\" + item.最高温度 + \"℃\";\r\n      //         this.Onweather(item.天气, 2);\r\n      //       } else if (item.第N天 == toDay) {\r\n      //         this.weatherArr[0].date = \"今天\";\r\n      //         this.weatherArr[0].temperature =\r\n      //           item.最低温度 + \"℃\" + \"~\" + item.最高温度 + \"℃\";\r\n      //         this.Onweather(item.天气, 0);\r\n      //       }\r\n      //     });\r\n      // });\r\n    },\r\n    //天气\r\n    Onweather(name, index) {\r\n      // console.log(name, \"名字\");\r\n      if(name.includes('阴')||name.includes('多云')){\r\n        if(name.includes('雨')){\r\n          return require(\"./assets/weather/rain.png\");\r\n        }else{\r\n          return require(\"./assets/weather/Cloudy .png\");\r\n        }\r\n      }\r\n      if(name.includes('小雨')){\r\n        \r\n          return require(\"./assets/weather/rain.png\");\r\n        \r\n      }\r\n      // console.log(index);\r\n      switch (name) {\r\n        \r\n        case '风转阴':\r\n          return require(\"./assets/weather/Cloudy .png\");\r\n        case \"多云\":\r\n          return require(\"./assets/weather/Cloudy .png\");\r\n        case \"阴\":\r\n          return require(\"./assets/weather/Cloudy .png\");\r\n        case \"阴转多云\":\r\n          return require(\"./assets/weather/Cloudy .png\");\r\n        case \"暴雨\":\r\n          return require(\"./assets/weather/rainstorm.png\");\r\n        case \"冰雹\":\r\n          return require(\"./assets/weather/hail.png\");\r\n        case \"大风\":\r\n          return require(\"./assets/weather/gale.png\");\r\n        case \"大雪\":\r\n          return require(\"./assets/weather/bigsnow.png\");\r\n        case \"大雨\":\r\n          return require(\"./assets/weather/bigrain.png\");\r\n        case \"雷电\":\r\n          return require(\"./assets/weather/thunder.png\");\r\n        case \"雷阵雨\":\r\n          return require(\"./assets/weather/shower.png\");\r\n        case \"沙尘暴\":\r\n          return require(\"./assets/weather/sand.png\");\r\n        case \"晴\":\r\n          return require(\"./assets/weather/sun.png\");\r\n        case \"雾霾\":\r\n          return require(\"./assets/weather/smog.png\");\r\n        case \"小雪\":\r\n          return require(\"./assets/weather/snow.png\");\r\n        case \"小雨\":\r\n          return require(\"./assets/weather/rain.png\");\r\n        case \"雪\":\r\n          return require(\"./assets/weather/rainlitter.png\");\r\n        case \"多云\":\r\n          return require(\"./assets/weather/night.png\");\r\n        case \"雨夹雪\":\r\n          return require(\"./assets/weather/rainsnow.png\");\r\n        case \"月亮\":\r\n          return require(\"./assets/weather/moon.png\");\r\n        case \"中雪\":\r\n          return require(\"./assets/weather/mieddlesnow.png\");\r\n        case \"中雨\":\r\n          return require(\"./assets/weather/middlerain.png\");\r\n        case \"阴转雨\":\r\n          return require(\"./assets/weather/rain.png\");\r\n        case \"阴转晴\":\r\n          return require(\"./assets/weather/Cloudy .png\");\r\n      }\r\n    },\r\n    handleChange(index) {\r\n      let that = this;\r\n      this.routerActive = index;\r\n      if (this.routerActive == 0) {\r\n        if (this.$route.name != \"index\") {\r\n          that.$router.push({ name: \"index\" });\r\n        }\r\n      } else if (this.routerActive == 2) {\r\n        that.$router.push({ name: \"stationBuilding\" });\r\n      }\r\n      //  else if (this.routerActive == 1) {\r\n      //   that.$router.push({ name: \"twentyKV\" });\r\n      // } \r\n      else if (this.routerActive == 1) {\r\n        that.$router.push({ name: \"thirtyFiveKV\" });\r\n      }\r\n    },\r\n  },\r\n};\r\n</script>\r\n<style >\r\n@import \"./assets/index.css\";\r\n\r\n#app {\r\n  font-family: \"Avenir\", Helvetica, Arial, sans-serif;\r\n  -webkit-font-smoothing: antialiased;\r\n  -moz-osx-font-smoothing: grayscale;\r\n  text-align: center;\r\n  color: #2c3e50;\r\n  background: url(\"./assets/index/bg.png\") no-repeat;\r\n  background-size: 100% 100%;\r\n}\r\n\r\n</style>\r\n<style lang=\"less\" scoped>\r\n.top {\r\n  width: 100%;\r\n  height: 100px;\r\n  /* background: rgba(147, 230, 244,0.6); */\r\n  /* background-image: linear-gradient(90deg, rgba(147, 230, 244,0.6),rgba(147, 230, 244,0), rgba(147, 230, 244,0.6)); */\r\n//   background: url(\"./assets/images/topBg.png\") no-repeat;\r\n  background: url(\"./assets/indexN/title.png\") no-repeat;\r\n  background-size: 100% 100%;\r\n  display: flex;\r\n  flex-flow: row nowrap;\r\n  justify-content: space-between;\r\n  .left {\r\n    width: 30%;\r\n    height: 97px;\r\n    // background: url(\"./assets/index/title.png\") no-repeat;\r\n    // background-size: 100% 100%;\r\n    font-size: 44px;\r\n    font-weight: 700;\r\n    letter-spacing: 10px;\r\n    color: #ffffff;\r\n    // line-height: 97px;\r\n    padding-left: 86px;\r\n    text-align: left;\r\n        display: flex;\r\n    margin-left: 1%;\r\n    margin-top: 0.5%;\r\n    box-sizing: border-box;\r\n     .time {\r\n      height: 100%;\r\n      color: #ffffff;\r\n      font-size: 22px;\r\n    //   display: flex;\r\n      flex-flow: column nowrap;\r\n      justify-content: center;\r\n      text-align: left;\r\n    }\r\n    .weather {\r\n    //   display: flex;\r\n    //   flex-flow: row nowrap;\r\n      height: 100%;\r\n      align-items: center;\r\n       color: #ffffff;\r\n      font-size: 22px;\r\n      margin-left: 36px;\r\n      .pic {\r\n        width: 61px;\r\n        height: 61px;\r\n      }\r\n      .date {\r\n        height: 100%;\r\n        color: #ffffff;\r\n        font-size: 18px;\r\n        display: flex;\r\n        flex-flow: column nowrap;\r\n        justify-content: center;\r\n        margin-left: 19px;\r\n        text-align: left;\r\n      }\r\n    }\r\n    \r\n  }\r\n  .left:before {\r\n    content: attr(text);\r\n    position: absolute;\r\n    z-index: 10;\r\n    color: rgb(86, 254, 246);\r\n    -webkit-mask: linear-gradient(to top, rgb(86, 244, 254), transparent);\r\n  }\r\n  .middle {\r\n     width: 27%;\r\n    height: 80px;\r\n    display: -webkit-box;\r\n    display: -ms-flexbox;\r\n    /* display: flex; */\r\n    -webkit-box-orient: horizontal;\r\n    -webkit-box-direction: normal;\r\n    position: absolute;\r\n    left: 38%;\r\n    top: 3%;\r\n   .box{\r\n    width: 100%;\r\n    height: 100%;\r\n    // background: url(\"./assets/indexN/titleText.png\") no-repeat;\r\n   }\r\n    .router {\r\n      width: 244px;\r\n      height: 100%;\r\n      line-height: 78px;\r\n      color: rgb(41, 114, 124);\r\n      font-size: 22px;\r\n      cursor: pointer;\r\n    }\r\n    .active {\r\n      color: #ffffff;\r\n      background: url(\"./assets/images/routerActive.png\") no-repeat;\r\n      background-size: 100% 100%;\r\n    }\r\n    .active:before {\r\n      content: attr(text);\r\n      position: absolute;\r\n      z-index: 10;\r\n      color: rgb(86, 254, 246);\r\n      -webkit-mask: linear-gradient(to top, rgb(86, 244, 254), transparent);\r\n    }\r\n  }\r\n  .right {\r\n    // width: 740px;\r\n    height: 78px;\r\n    display: flex;\r\n    flex-flow: row nowrap;\r\n    justify-content: space-between;\r\n    padding-right: 15px;\r\n      font-size: 44px;\r\n    font-weight: 700;\r\n    letter-spacing: 10px;\r\n    margin-right: 1%;\r\n    .time {\r\n      height: 100%;\r\n      color: #ffffff;\r\n      font-size: 18px;\r\n      display: flex;\r\n      flex-flow: column nowrap;\r\n      justify-content: center;\r\n      text-align: left;\r\n    }\r\n    .weather {\r\n      display: flex;\r\n      flex-flow: row nowrap;\r\n      height: 100%;\r\n      align-items: center;\r\n      margin-left: 36px;\r\n       color: #ffffff;\r\n      font-size: 22px;\r\n      margin-left: 36px;\r\n      .pic {\r\n        width: 61px;\r\n        height: 61px;\r\n      }\r\n      .date {\r\n        height: 100%;\r\n        color: #ffffff;\r\n        font-size: 18px;\r\n        display: flex;\r\n        flex-flow: column nowrap;\r\n        justify-content: center;\r\n        margin-left: 19px;\r\n        text-align: left;\r\n      }\r\n    }\r\n  }\r\n}\r\n.content {\r\n  width: 100%;\r\n  height: calc(100% - 100px);\r\n  display: flex;\r\n  align-items: center;\r\n  justify-content: space-around;\r\n}\r\n</style>\r\n"]}]}