castgroup_bigscreen/src/components/header.vue

<!--
 * @Description: 
 * @Author: wangcc
 * @Date: 2022-06-14 18:11:54
 * @LastEditors: gcz
 * @LastEditTime: 2022-06-30 09:02:02
 * @FilePath: \castgroup_bigscreen\src\components\header.vue
 * @Copyright: Copyright (c) 2016~2022 by wangcc, All Rights Reserved. 
-->
<!--
 * @LastEditors: gcz
-->
<template>
    <div class="top-box">
      <span class="top-time">{{nowTime}}</span>
      <h2>贵州民投林业数字化工作平台</h2>
      <div class="weather">
        <div id="he-plugin-simple"></div>
      </div>
      <img v-if="!isFull" src="@/assets/img/full.png" @click="toggleFullScreen" />
      <img v-else src="@/assets/img/back.png" @click="toggleFullScreen" />
    </div>
</template>

<script>
import timeFormat from '@/utils/timeFormat'
    export default {
        name: 'Header',
        components: {},
        data () {
            return {
                nowTime:'',
                isFull:false,
            };
        },
        created(){
            setInterval(() => {
                this.nowTime = timeFormat(new Date(),'yyyy年mm月dd日 hh时MM分ss秒');
            }, 1000);
        },
        mounted(){
            window.WIDGET = {
            CONFIG: {
                modules: '01234',
                background: '5',
                tmpColor: 'FFFFFF',
                tmpSize: '16',
                cityColor: 'FFFFFF',
                citySize: '16',
                aqiColor: 'FFFFFF',
                aqiSize: '16',
                weatherIconSize: '24',
                alertIconSize: '18',
                padding: '5px 10px 5px 10px',
                shadow: '0',
                language: 'auto',
                borderRadius: '5',
                fixed: 'false',
                vertical: 'top',
                horizontal: 'left',
                key: '4c47862a466540e881cc8e942c56fedf'
            }
            };
            let script = document.createElement('script');
            script.type = 'text/javascript';
            script.src =
            'https://widget.qweather.net/simple/static/js/he-simple-common.js?v=2.0';
            document.getElementsByTagName('head')[0].appendChild(script);
        },
        methods: {
            toggleFullScreen(){
                // alternative standard method
                if (!document.fullscreenElement &&
                    !document.mozFullScreenElement && !document.webkitFullscreenElement && !document.msFullscreenElement) { // current working methods
                    this.isFull = true;
                    if (document.documentElement.requestFullscreen) {
                        document.documentElement.requestFullscreen();
                    } else if (document.documentElement.msRequestFullscreen) {
                        document.documentElement.msRequestFullscreen();
                    } else if (document.documentElement.mozRequestFullScreen) {
                        document.documentElement.mozRequestFullScreen();
                    } else if (document.documentElement.webkitRequestFullscreen) {
                        document.documentElement.webkitRequestFullscreen(Element.ALLOW_KEYBOARD_INPUT);
                    }
                } else {
                    this.isFull = false;
                    if (document.exitFullscreen) {
                        document.exitFullscreen();
                    } else if (document.msExitFullscreen) {
                        document.msExitFullscreen();
                    } else if (document.mozCancelFullScreen) {
                        document.mozCancelFullScreen();
                    } else if (document.webkitExitFullscreen) {
                        document.webkitExitFullscreen();
                    }
                }
            }    
        },
    }
</script>

<style lang='scss' scoped>
.top-box {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: 85px;
  background-image: url('../assets/img/index-top.png');
  background-size: 100% 100%;
  background-repeat: no-repeat;
  z-index: 999;
  h2 {
    margin: 0;
    line-height: 48px;
    color: #05d6e5;
    position: absolute;
    width: 100%;
    top: 20px;
    text-align: center;
    letter-spacing: 1px;
    font-size: 40px;
    text-indent: -0.8em;
    text-shadow: 0 2px #04213b;
  }
  span {
    color: #0c6e7a;
    font-size: 1.2em;
    position: absolute;
    line-height: 36px;
    left: 7%;
    top: 40px;
    font-weight: bold;
  }
  img {
    width: 27px;
    height: 27px;
    cursor: pointer;
    position: absolute;
    top: 5px;
    right: 10px;
    top: 40px;
  }
  .weather {
    font-weight: bold;
    /deep/ .s-sticker >div{
        color: #0c6e7a!important;
    }
    position: absolute;
    line-height: 40px;
    width: 120px;
    right: 100px;
    top: 40px;
  }
}
@media only screen and (max-width : 1200px) {
    .top-box{
        h2{
           letter-spacing: 1px;
            font-size: 28px;
            text-indent: -0.8em; 
        }
    }
}
@media only screen and (min-height : 800px) and (max-width : 1280px) {
    .top-box{
        h2{
           letter-spacing: 1px;
            font-size: 30px;
            text-indent: -0.8em; 
        }
    }

}
@media only screen and (min-height : 768px) and (max-width : 1024px) {
    .top-box{
        h2{
           letter-spacing: 1px;
            font-size: 24px;
            text-indent: -0.8em; 
        }
        .top-time{
            font-size: 16px;
        }
    }

}
</style>