zhny_ui/ems-ui/src/views/largeScreen/index.vue

<template>
  <div class="large-screen" id="largeScreen">
    <div class="header">
      <span class="header-name">常泰大桥服务区智慧能源管理平台</span>
    </div>
    <div class="left-sidebar-container">
      <div class="top-info-area">
        <div class="info-block">
          <img src="@/assets/images/home/tianqi.svg" alt="">
          <span>{{weather.text}}</span>
          <span>{{weather.temperature}}</span>
        </div>
      </div>
      <router-view class="sidebar-router-view" name="left"></router-view>
    </div>
    <router-view class="center"></router-view>
    <div class="right-sidebar-container">
      <div class="top-info-area">
        <div class="info-block ">
          <span class="date-info">
            <span>{{nowDay.currentTime}}</span>
            <span>{{nowDay.week}}</span>
          </span>
        </div>
      </div>
      <router-view class="sidebar-router-view" name="right"></router-view>
    </div>
    <div class="footer-container">
      <Footer></Footer>
    </div>

  </div>
</template>
<script>
import autofit from 'autofit.js'
import Footer from './footer.vue';
import {dateFormat} from '@/utils/index.js'
import axios from 'axios';
export default {
  name: 'LargeScreen',
  data () {
    return {
      nowDay: {
        currentTime: '',
        week: '',
      },
      timer: null,
      weather: {
        text: '',
        temperature:''
      }
    };
  },
  components: {
    Footer
  },
  computed: {},
  mounted () {
    autofit.init({
      designHeight: 1080,
      designWidth: 1920,
      renderDom: "#largeScreen",
      resize: true
    })
    this.getDate();
    this.getWeather()
    this.timer = setInterval(() => {
      this.getDate();
    }, 1000);
  },
  beforeDestroy () {
    clearInterval(this.timer)
    this.timer=null
  },
  methods: {
    getDate () {
      let nowTime = new Date();
      this.nowDay.week = "星期" + "日一二三四五六".charAt(nowTime.getDay());
      this.nowDay.currentTime =dateFormat(nowTime,'yyyy-MM-dd HH:mm:ss')
    },
    getWeather () {
      axios.get('https://api.seniverse.com/v3/weather/now.json?key=SoZVeNXSD1AlWok1V&location=nanjing&language=zh-Hans&unit=c').then(({data: { results}}) => {
        if (results && results.length) {
          this.weather.text = results[0].now.text
          this.weather.temperature = `${results[0].now.temperature}°C`
        }
      })
    }
  }
}
</script>
<style lang='scss' scoped>
.large-screen {
  background: #000;
  width: 100%;
  height: 100%;
  color: #fff;
  font-size: 18px;
  display: flex;
}

.header {
  width: 100%;
  z-index: 40;
  position: absolute;
  top: 0;
  height: 230px;
  text-align: center;
  background-image: url('~@/assets/images/layout/head.png');
  background-position: center;
  background-repeat: no-repeat;

  .header-name {
    font-size: 32px;
    font-weight: bold;
    letter-spacing: 0.1em;
    background-clip: text;
    color: transparent;
    line-height: 70px;
    background-image: linear-gradient(to bottom,
        white 30%,
        #75bfe9 100%);
  }

}

// 左侧栏的容器样式
.left-sidebar-container {
  position: absolute;
  z-index: 50;
  top: 0;
  left: 0;
  width: 403px;
  height: 1081px;
  background-image: url('~@/assets/images/layout/left.png');
  background-repeat: no-repeat;
  padding-left: 7px;
  padding-right: 6px;
  padding-top: 4px;
  padding-bottom: 20px;
  pointer-events: auto;

  // 顶部信息区域样式
  .top-info-area {
    height: 10%;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    font-size: 18px;
  }

  // 信息块样式
  .info-block {
    display: flex;
    align-items: center;
    padding-left: 25px;
    color: #B3E3E8;
    margin-top: 8px;
    height: 38px;

    img {
      height: 24px;
      margin-right: 5px;
    }

    span {
      margin-right: 5px;
    }
  }

  // 路由视图容器样式
  .sidebar-router-view {
    height: 90%;
  }
}

// 右侧栏的容器样式
.right-sidebar-container {
  position: absolute;
  z-index: 40;
  top: 0;
  right: 0;
  width: 403px;
  height: 1081px;
  background-image: url('~@/assets/images/layout/right.png');
  background-repeat: no-repeat;
  padding-left: 6px;
  padding-right: 7px;
  padding-top: 4px;
  padding-bottom: 20px;
  pointer-events: auto;

  // 顶部信息区域样式
  .top-info-area {
    height: 10%;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    text-align: right;
  }

  // 信息块样式
  .info-block {
    display: flex;
    align-items: center;
    height: 38px;
    background-repeat: no-repeat;
    justify-content: flex-end;
    padding-right: 25px;
    margin-top: 8px;
  }

  // 日期数据样式
  .date-info {
    color: #B3E3E8;
    display: flex;
    align-items: center;

    span {
      margin-left: 5px;
    }
  }

  // 路由视图容器样式
  .sidebar-router-view {
    height: 90%;
  }
}

// 底部栏的容器样式
.footer-container {
  display: flex;
  align-items: flex-end;
  justify-content: center;
  width: 100%;
  position: absolute;
  bottom: 0;
  height: 230px;
  pointer-events: none;
  background-image: url('~@/assets/images/layout/footer.png');
  background-position: center;
  background-repeat: no-repeat;
}
</style>