新巡更大屏优化

src/apps/home/components/screen-tem17.vue

@@ -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>

src/apps/home/components/smodule/smodule103.vue

@@ -13,7 +13,7 @@
                 </div>
                 <div class="box1 flex-row">
                     <span class="text9" style="margin-left: 1.5vw;">{{ info.count3 }}</span>
-                    <span class="text9" style="font-size: 15px;margin-top: 4.3vw;margin-left: -17vw;">总人数</span>
+                    <span class="text9" style="font-size: 15px;margin-top: 8vh;margin-left: -17vw;">总人数</span>
                 </div>
                 <div class="box2  justify-between">
                     <div class="text-group2  justify-between">
@@ -87,6 +87,7 @@ export default class Echarts extends Vue {
     background-repeat: no-repeat;
     background-size: 100% 80%;
     height: 77vh;
+    margin-top: 1.1vh;
 
     .text-wrapper1 {
         width: 18.8vw;
@@ -161,6 +162,7 @@ export default class Echarts extends Vue {
         width: 23.1vw;
         height: 27vh;
         margin: 0 0 0 11.6vw;
+        text-align: center;
         .text9 {
             width: 23.1vw;
             height: 16vh;

src/apps/home/components/smodule/smodule106.vue

@@ -46,8 +46,8 @@ export default class Smodule106 extends Vue {
         legend: {
             data: ['任务总数'],
             textStyle: {
-                color: '#88B1D0',
-                fontSize: 10,
+                color: '#fff',
+                fontSize: 18,
             },
         },
         xAxis: [
@@ -58,7 +58,7 @@ export default class Smodule106 extends Vue {
                 axisLabel: {
                     interval: 1,
                     textStyle: {
-                        color: '#ccc',
+                        color: '#fff',
                     },
                 },
                 splitLine: {
@@ -76,7 +76,7 @@ export default class Smodule106 extends Vue {
                 interval: 60,
                 axisLabel: {
                     textStyle: {
-                        color: '#ccc',
+                        color: '#fff',
                     },
                 },
                 splitLine: {
@@ -114,6 +114,16 @@ export default class Smodule106 extends Vue {
                 {
                     name: '任务总数',
                     type: 'bar',
+                    label: {
+                        normal: {
+                            show: true,
+                            position: 'top',
+                            offset: [0, 0],
+                            textStyle: {
+                                color: '#fff',
+                            },
+                        },
+                    },
                     data: res.data.list,
                     barWidth: 10,
                 },