1

src/pages/index.vue

@@ -21,6 +21,7 @@
                 </div>
                 <div class="totalInfo">
                     <img src="../assets/leftborder.png" class="border" alt="">
+                    <div class="leftContainer">
                         <div class="section">
                             <div class="sec1">
                                 <img src="../assets/btn.png" alt="">
@@ -31,6 +32,20 @@
                                 </div>
                             </div>
                         </div>
+                        <div class="section1">
+                            <div class="numContent" v-for="(item,index) in nList" :key="index">
+                                <img src="../assets/bbg.png" class="borderNum" alt="">
+                                <div class="numItem">
+                                    <img :src="item.pic" alt="">
+                                    <div class="numText">{{item.text}}</div>
+                                    <div class="num">{{item.num}}</div>
+                                </div>
+                            </div>
+                        </div>
+                        <div class="section2">
+                            <div style="width: 100%;height: 100%;" id="main"></div>
+                        </div>
+                    </div>
                 </div>
             </div>
             <div class="center"></div>
@@ -41,11 +56,18 @@
 </template>
 
 <script>
+import * as echarts from 'echarts';
 export default {
     data(){
         return{
             timeText:'',
             timer:null,
+            nList:[
+                {pic:require('../assets/n1.png'),text:'压缩机',num:888},
+                {pic:require('../assets/n2.png'),text:'温度',num:888},
+                {pic:require('../assets/n3.png'),text:'运行时长',num:888},
+                {pic:require('../assets/n4.png'),text:'累计垃圾量',num:888},
+            ],
         }
     },
     methods:{
@@ -64,9 +86,41 @@ export default {
             seconds = seconds < 10 ? '0' + seconds : seconds;
             let timeString = year + '-' + month + '-' + day + ' ' + hours + ':' + minutes + ':' + seconds;
             this.timeText = timeString
+        },
+        setNum(){
+            // 基于准备好的dom，初始化echarts实例
+            var myChart = echarts.init(document.getElementById('main'));
+            // 绘制图表
+            myChart.setOption({
+                xAxis: {
+                    type: 'category',
+                    data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
+                },
+                yAxis: {
+                    type: 'value'
+                },
+                series: [{
+                    data: [820, 932, 901, 934, 1290, 1330, 1320],
+                    type: 'line',
+                    // 添加区域渐变效果
+                    areaStyle: {
+                        color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
+                            offset: 0,
+                            color: 'rgba(0, 216, 135, 0.4)' // 渐变颜色
+                        }, {
+                            offset: 1,
+                            color: 'rgba(0, 216, 135, 0)' // 渐变颜色
+                        }])
+                    }
+                }]
+            });
+            window.onresize = function() {
+                myChart.resize();
+            };
         }
     },
     mounted(){
+        this.setNum()
         // this.timer = setInterval(this.updateClock, 1000);
     },
     destroyed(){
@@ -83,8 +137,7 @@ export default {
 }
 .index{
     background: #010E25;
-    border:1px solid blue;
+    height:calc(100%);
-    height:calc(100% - 2px);
     overflow: hidden;
     position: relative;
     .bgPic{
@@ -102,7 +155,6 @@ export default {
         flex-direction: column;
         height:100%;
         .header{
-            border:1px solid red;
             position: relative;
             &>img{
                 width:100%;
@@ -134,33 +186,36 @@ export default {
                 top: 2.7rem;
                 right:2rem;
                 &>img{
-                    width: 20px;
+                    width: 2rem;
-                    height: 20px;
+                    height: 2rem;
                 }
                 &>span{
                     font-weight: bold;
-                    font-size: 20px;
+                    font-size: 2rem;
                     color: #FFFFFF;
-                    margin-left:16px;
+                    margin-left:1.6rem;
                 }
             }
         }
         .infoContent{
             flex:1;
-            border:2px solid #fff;
             padding:2rem 0;
             display: flex;
             .left{
                 width:28%;
                 flex-shrink: 0;
-                border:1px solid red;
                 display: flex;
                 flex-direction: column;
+                position: relative;
                 .title{
                     display: flex;
                     align-items: center;
                     justify-content: space-between;
                     margin-left:5.3rem;
+                    position: absolute;
+                    top:0;
+                    z-index:9;
+                    width: calc(100% - 5.3rem);
                     span{
                         font-family: "myfont", sans-serif;
                         font-weight: bold;
@@ -187,7 +242,6 @@ export default {
                 }
                 .totalInfo{
                     flex:1;
-                    border:1px solid red;
                     position: relative;
                     // border: 1px solid #fff;
                     // border-image-source: url("../assets/leftborder.png");
@@ -195,22 +249,117 @@ export default {
                     // border-image-width: 100px 220px 100px 220px;
                     // border-image-repeat: round;
                     .border{
-                        position: absolute;
                         width:100%;
-                        height: 100%;
+                        height:100%;
+                    }
+                    .leftContainer{
+                        position: absolute;
+                        z-index:2;
                         left:0;
                         top:0;
-                        z-index:0;
+                        height:100%;
+                        margin-left:3.6rem;
+                        margin-right:1.6rem;
+                        display: flex;
+                        flex-direction: column;
                     }
                     .section{
                         position: relative;
                         z-index:2;
                         .sec1{
-                            padding:0 1rem;
+                           
+                            width: 100%;
+                            // margin: 7.3rem auto 5rem auto;
+                            // padding-left: 2.4rem;
+                            margin-top:7.3rem;
+                            position: relative;
                             &>img{
                                 width:100%;
                             }
+                            .peopleNum{
+                                position: absolute;
+                                top: 40%;
+                                transform: translate(-50%, -50%);
+                                left: 50%;
+                                &>:first-child{
+                                    font-family: Microsoft YaHei;
+                                    font-weight: 400;
+                                    font-size: 1.6rem;
+                                    color: #FFFFFF;
+                                    background: linear-gradient(0deg, #0C8DF8 0%, #AFD1FF 100%);
+                                    -webkit-background-clip: text;
+                                    -webkit-text-fill-color: transparent;
+                                }
+                                &>:nth-child(2){
+                                    margin-left:2rem;
+                                    font-family: Microsoft YaHei;
+                                    font-weight: bold;
+                                    font-size: 3rem;
+                                    color: #FFFFFF;
                                 }
+                                &>:nth-child(3){
+                                    font-family: Microsoft YaHei;
+                                    font-weight: bold;
+                                    font-size: 1.6rem;
+                                    color: #FFFFFF;
+                                }
+                            }
+                        }
+                    }
+                    .section1{
+                     
+                        display: flex;
+                        flex-wrap: wrap;
+                        justify-content: space-between;
+                        // width: 90%;
+                        margin: 0 auto;
+                        margin-top:5rem;
+                        .numContent{
+                            width:calc(50% - 1rem);
+                            margin-bottom: 2rem;
+                           
+                            position: relative;
+                            .borderNum{
+                                width:100%;
+                            }
+                            .numItem{
+                                position: absolute;
+                                z-index: 3;
+                                width: 100%;
+                                height: calc(100% - 0.6rem);
+                               
+                                top: 0;
+                                left: 0;
+                                align-items: center;
+                                display: flex;
+                                flex-direction: column;
+                                justify-content: space-around;
+                                img{
+                                   max-height:25%;
+                                   height:auto;
+                                    width: fit-content;
+                                }
+                                .numText{
+                                    font-family: Microsoft YaHei;
+                                    font-weight: 400;
+                                    font-size: 1.6rem;
+                                    color: #3F87F6;
+                                    margin:1.5rem 0;
+                                    margin: 1% 0;
+                                }
+                                .num{
+                                    font-family: Microsoft YaHei;
+                                    font-weight: 400;
+                                    font-size: 2rem;
+                                    color: #FFFFFF;
+                                }
+                            }
+                        }
+                       
+                    }
+                    .section2{
+                        flex:1;
+                       
                     }
                 }
                 
@@ -225,12 +374,12 @@ export default {
 
             .center{
                 flex:1;
-                border:1px solid blue;
+                // border:1px solid blue;
             }
             .right{
                 width: 28%;
                 flex-shrink: 0;
-                border:1px solid red
+                // border:1px solid red
             }
         }