|
|
@@ -0,0 +1,203 @@
|
|
|
+<template>
|
|
|
+ <div class="page">
|
|
|
+ <div class="header">
|
|
|
+ <div class="header-box">
|
|
|
+ <img class="header-img" src="../images/screen-tem2/logo.png" alt="">
|
|
|
+ <img class="header-line" src="../images/screen-tem2/line.png" alt="">
|
|
|
+ <!-- <span>{{data.title}}</span> -->
|
|
|
+
|
|
|
+ <div class="header-right">
|
|
|
+ <img class="header-line" src="../images/screen-tem2/line.png" alt="">
|
|
|
+ <span>{{time}}</span>
|
|
|
+ <img class="header-line" src="../images/screen-tem2/line.png" alt="">
|
|
|
+ <span>{{day}}</span>
|
|
|
+ <img class="header-line" src="../images/screen-tem2/line.png" alt="">
|
|
|
+ <span>{{week}}</span>
|
|
|
+ </div>
|
|
|
+ <div class="header-title">{{data.title}}</div>
|
|
|
+ <img class="header-blue-line" src="../images/screen-tem2/blue-line.png" alt="">
|
|
|
+ </div>
|
|
|
+
|
|
|
+ </div>
|
|
|
+ <div class="main">
|
|
|
+ <div class="main-box main-box1">
|
|
|
+ <screen-module :data="data" :cid="1" />
|
|
|
+ </div>
|
|
|
+ <div class="main-box main-box2">
|
|
|
+ <screen-module :data="data" :cid="2" />
|
|
|
+ </div>
|
|
|
+ <div class=" main-box main-box3">
|
|
|
+ <screen-module :data="data" :cid="3" />
|
|
|
+ </div>
|
|
|
+ <div class="main-box main-box4">
|
|
|
+ <screen-module :data="data" :cid="4" />
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+</template>
|
|
|
+
|
|
|
+<script>
|
|
|
+import Vue from 'vue';
|
|
|
+import Component from 'vue-class-component';
|
|
|
+import ScreenModule from '@/apps/home/components/screen-module.vue';
|
|
|
+
|
|
|
+@Component({
|
|
|
+ props: {
|
|
|
+ data: {
|
|
|
+ type: Object,
|
|
|
+ default: null,
|
|
|
+ },
|
|
|
+ },
|
|
|
+ components: {
|
|
|
+ ScreenModule,
|
|
|
+ },
|
|
|
+})
|
|
|
+export default class Echarts extends Vue {
|
|
|
+ week = '';
|
|
|
+
|
|
|
+ day = '';
|
|
|
+
|
|
|
+ time = '';
|
|
|
+
|
|
|
+ created() {
|
|
|
+ this.realSysTime();
|
|
|
+ setInterval(() => {
|
|
|
+ this.realSysTime();
|
|
|
+ }, 1000);
|
|
|
+ }
|
|
|
+
|
|
|
+ realSysTime() {
|
|
|
+ const now = new Date();
|
|
|
+ const year = now.getFullYear(); // 获取年份
|
|
|
+ let month = now.getMonth(); // 获取月份
|
|
|
+ let date = now.getDate(); // 获取日期
|
|
|
+ const day = now.getDay(); // 获取星期
|
|
|
+ let hour = now.getHours(); // 获取小时
|
|
|
+ let minute = now.getMinutes(); // 获取分钟
|
|
|
+ let seconds = now.getSeconds(); // 获取秒
|
|
|
+ month += 1;
|
|
|
+ const arrWeek = ['星期日', '星期一', '星期二', '星期三', '星期四', '星期五', '星期六'];
|
|
|
+ this.week = arrWeek[day];
|
|
|
+ if (month < 10) {
|
|
|
+ month = `0${month}`;
|
|
|
+ }
|
|
|
+ if (date < 10) {
|
|
|
+ date = `0${date}`;
|
|
|
+ }
|
|
|
+ if (hour < 10) {
|
|
|
+ hour = `0${hour}`;
|
|
|
+ }
|
|
|
+ if (minute < 10) {
|
|
|
+ minute = `0${minute}`;
|
|
|
+ }
|
|
|
+ if (seconds < 10) {
|
|
|
+ seconds = `0${seconds}`;
|
|
|
+ }
|
|
|
+ this.day = `${year}.${month}.${date}`;
|
|
|
+ this.time = `${hour}:${minute}:${seconds}`;
|
|
|
+ }
|
|
|
+}
|
|
|
+</script>
|
|
|
+
|
|
|
+<style scoped lang="scss">
|
|
|
+ .page{
|
|
|
+ position: fixed;
|
|
|
+ z-index: 10;
|
|
|
+ top: 0;
|
|
|
+ left: 0;
|
|
|
+ bottom: 0;
|
|
|
+ right: 0;
|
|
|
+ background-color: #14111f;
|
|
|
+ overflow: hidden;
|
|
|
+ background-image: url(../images/screen-tem2/bg.png);
|
|
|
+ background-repeat: no-repeat;
|
|
|
+ background-size: 100% 100%;
|
|
|
+ color: #ffffff;
|
|
|
+ }
|
|
|
+ .header{
|
|
|
+ width: 100%;
|
|
|
+ height: 10vh;
|
|
|
+ position: relative;
|
|
|
+ color: #ffffff;
|
|
|
+ }
|
|
|
+ .header-box{
|
|
|
+ height: 6.8vh;
|
|
|
+ line-height: 6.8vh;
|
|
|
+ padding: 0 1.5vw;
|
|
|
+ font-size: 22px;
|
|
|
+ }
|
|
|
+ .header-box .header-img{
|
|
|
+ display: inline-block;
|
|
|
+ /* width: 12.5vw; */
|
|
|
+ width: 7.7vw;
|
|
|
+ height: 2.8vh;
|
|
|
+ vertical-align: middle;
|
|
|
+ margin-top: -4px;
|
|
|
+ }
|
|
|
+ .header-line{
|
|
|
+ display: inline-block;
|
|
|
+ width: 0.6vw;
|
|
|
+ height: 3.7vh;
|
|
|
+ vertical-align: middle;
|
|
|
+ margin: 0 10px;
|
|
|
+ }
|
|
|
+ .header-right{
|
|
|
+ width: 28vw;
|
|
|
+ text-align: right;
|
|
|
+ height: 100%;
|
|
|
+ float: right;
|
|
|
+ }
|
|
|
+ .header-blue-line{
|
|
|
+ width: 100%;
|
|
|
+ float: left;
|
|
|
+ }
|
|
|
+ .main{
|
|
|
+ height: 90vh;
|
|
|
+ }
|
|
|
+ .main .main-box{
|
|
|
+ // display: inline-block;
|
|
|
+ float: left;
|
|
|
+ position: relative;
|
|
|
+ }
|
|
|
+ .main .main-box1{
|
|
|
+ width: 34vw;
|
|
|
+ height: 65vh;
|
|
|
+ margin: 1vh 1.5vw;
|
|
|
+ }
|
|
|
+ .main .main-box2{
|
|
|
+ width: 30.3vw;
|
|
|
+ height: 66vh;
|
|
|
+ margin-bottom: 1vw;
|
|
|
+ background-repeat: no-repeat;
|
|
|
+ background-size: 100% 100%;
|
|
|
+ background-color: rgba(29, 81, 156, 0.2);
|
|
|
+ }
|
|
|
+ .main .main-box3{
|
|
|
+ width: 30.3vw;
|
|
|
+ height: 66vh;
|
|
|
+ float: right;
|
|
|
+ margin-right: 1.8vw;
|
|
|
+ background-repeat: no-repeat;
|
|
|
+ background-size: 100% 100%;
|
|
|
+ background-color: rgba(29, 81, 156, 0.2);
|
|
|
+ }
|
|
|
+ .main .main-box4{
|
|
|
+ width: 97%;
|
|
|
+ // height: 11.2vw;
|
|
|
+ height: 20vh;
|
|
|
+ margin-left: 1.5vw;
|
|
|
+ background-repeat: no-repeat;
|
|
|
+ background-size: 100% 100%;
|
|
|
+ background-color: rgba(29, 81, 156, 0.2);
|
|
|
+ }
|
|
|
+
|
|
|
+ .header-box .header-title{
|
|
|
+ width: 43vw;
|
|
|
+ text-align: center;
|
|
|
+ height: 100%;
|
|
|
+ float: right;
|
|
|
+ display: inline-block;
|
|
|
+ font-weight: 600;
|
|
|
+ // font-size: 18px;
|
|
|
+ }
|
|
|
+</style>
|
