zc

src/views/components/center-bottom-left.vue

@@ -2,6 +2,44 @@
   <div class="center-bottom-left">
     <titleComponent :titleData="titleData"></titleComponent>
     <div class="center-bottom-left-page">
+      <div class="top-max-big-box">
+        <div class="top-max-big-left-box">
+          <img class="left-img" src="@/assets/ZDimages/img_zzsyrs@1x.png">
+          <img class="left-center-img" src="@/assets/ZDimages/icon_jrzjr@1x.png">
+          <div class="right-big-box">
+            <p class="right-big-title-p">今日总进入</p>
+            <div class="num-box">
+              <p>999</p>
+              <p>人次</p>
+            </div>
+            <div class="text-box">
+              <p>环比</p>
+              <p class="el-icon-caret-top colorA"></p>
+              <!--<p class="el-icon-caret-bottom"></p>-->
+              <p class="colorA">12%</p>
+            </div>
+            <p class="position-black-p"></p>
+          </div>
+        </div>
+        <div class="top-max-big-right-box">
+          <img class="left-img" src="@/assets/ZDimages/img_zzsyrs@1x.png">
+          <img class="left-center-img" src="@/assets/ZDimages/icon_zzsyrs@1x.png">
+          <div class="right-big-box">
+            <p class="right-big-title-p">正在试验人数</p>
+            <div class="num-box">
+              <p>99</p>
+              <p>人次</p>
+            </div>
+            <div class="text-box">
+              <p class="text-left">教师</p>
+              <p class="text-right">2人</p>
+              <p class="text-left">学生</p>
+              <p class="text-right">53人</p>
+            </div>
+            <p class="position-black-p"></p>
+          </div>
+        </div>
+      </div>
       <div id="center-bottom-left-eCharts-left"></div>
     </div>
   </div>
@@ -32,11 +70,10 @@
     methods:{
       eChartsleft() {
         let option = {
-
           grid: {
             top: '20%',
-            right: '14%',
-            left: '6%',
+            right: '4%',
+            left: '4%',
             bottom: '10%',
             containLabel: true,
           },
@@ -46,16 +83,17 @@
           },
           legend: {
             icon:'roundRect',
-            // icon: "image://data:image/gif;base64,R0lGODlhEAAQAMQAAORHHOVSKudfOulrSOp3WOyDZu6QdvCchPGolfO0o/XBs/fNwfjZ0frl3/zy7////wAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAACH5BAkAABAALAAAAAAQABAAAAVVICSOZGlCQAosJ6mu7fiyZeKqNKToQGDsM8hBADgUXoGAiqhSvp5QAnQKGIgUhwFUYLCVDFCrKUE1lBavAViFIDlTImbKC5Gm2hB0SlBCBMQiB0UjIQA7",
             show: true,
-            top: '20%',
-            itemWidth: 20, // 图例标记的图形宽度。
-            //   itemGap: 20, // 图例每项之间的间隔。
-            itemHeight: 4, //  图例标记的图形高度。
+            top: '0%',
+            right:'5%',
+            itemWidth: 30, // 图例标记的图形宽度。
+            itemGap: 36, // 图例每项之间的间隔。
+            itemHeight: 10, //  图例标记的图形高度。
             textStyle: {
               color: '#fff',
-              fontSize: 14,
-            }
+              fontSize: 28,
+            },
+            selectedMode: false,
           },
           xAxis: {
             name: '',
@@ -78,6 +116,7 @@
             axisLabel: {
               show: true,
               color: '#fff',
+              fontSize: 20,
             },
             data: [
               "8:00",
@@ -112,6 +151,7 @@
             axisLabel: {
               show: true,
               color: '#fff',
+              fontSize: 20,
             },
           },
           series: [
@@ -200,9 +240,229 @@
       height:664px;
       background-image: url("../../assets/ZDimages/icon_jrrs_bg@1x.png");
       background-size: 100% 100%;
+      .top-max-big-box{
+        width:860px;
+        height:212px;
+        margin:50px 0 0 29px;
+        display: flex;
+        .top-max-big-left-box{
+          width:420px;
+          height:212px;
+          margin-right:20px;
+          background: linear-gradient( 90deg, rgba(1,131,250,0.05) 0%, rgba(0,55,126,0.3) 100%);
+          display: flex;
+          position: relative;
+          .left-img{
+            width:141px;
+            height:205px;
+            margin:7px 0 0 23px;
+          }
+          .left-center-img{
+            z-index:1;
+            position: absolute;
+            width:50px;
+            height:50px;
+            margin:76px 0 0 67px;
+          }
+          .right-big-box{
+            position: relative;
+            .right-big-title-p{
+              position: absolute;
+              top:8px;
+              left:25px;
+              z-index:1111;
+              width: 150px;
+              height: 65px;
+              font-family: Source Han Sans CN;
+              font-weight: 700;
+              font-size: 30px;
+              color: #FFFFFF;
+              line-height: 65px;
+              text-align: right;
+              font-style: normal;
+              text-transform: none;
+
+            }
+            .num-box{
+              display: flex;
+              height:65px;
+              margin:82px 0 0 0;
+              p:nth-child(1){
+                width: 155px;
+                height:65px;
+                text-align: right;
+                line-height: 65px;
+                font-size: 50px;
+                font-weight: 700;
+                font-style: normal;
+                text-transform: none;
+                background: -webkit-linear-gradient(0deg, #0183FA, #FFFFFF); /* Chrome, Safari */
+                background: linear-gradient(0deg, #0183FA, #FFFFFF); /* 标准语法 */
+                -webkit-background-clip: text; /* Chrome, Safari */
+                background-clip: text;
+                -webkit-text-fill-color: transparent; /* Chrome, Safari */
+                color: transparent; /* 其他浏览器 */
+                font-family: Alimama ShuHeiTi;
+              }
+              p:nth-child(2){
+                margin-top:26px;
+                width: 48px;
+                height: 24px;
+                font-weight: 400;
+                font-size: 24px;
+                color: #FFFFFF;
+                line-height: 24px;
+                text-align: right;
+                font-style: normal;
+                text-transform: none;
+              }
+            }
+            .text-box{
+              display: flex;
+              height:30px;
+              margin-top:10px;
+              p{
+                font-size:24px;
+                line-height:30px;
+              }
+              p:nth-child(1){
+                margin-left:90px;
+                color: #FFDAB2;
+              }
+              p:nth-child(2){
+                width:40px;
+                text-align: center;
+                font-size:26px;
+                line-height:30px;
+
+              }
+              p:nth-child(3){
+
+              }
+              .colorA{
+                color:#00FFFF;
+              }
+              .colorB{
+                color:#00FFFF;
+              }
+            }
+            .position-black-p{
+              z-index:0;
+              position: absolute;
+              top:50px;
+              left:25px;
+              width: 210px;
+              height: 20px;
+              background: linear-gradient( 270deg, rgba(0,94,181,0.01) 0%, #1777CE 100%);
+              border-radius: 0px 0px 0px 0px;
+            }
+          }
+
+        }
+        .top-max-big-right-box{
+          width:420px;
+          height:212px;
+          background: linear-gradient( 90deg, rgba(1,131,250,0.05) 0%, rgba(0,55,126,0.3) 100%);
+          display: flex;
+          position: relative;
+          .left-img{
+            width:141px;
+            height:205px;
+            margin:7px 0 0 23px;
+          }
+          .left-center-img{
+            z-index:1;
+            position: absolute;
+            width:52px;
+            height:52px;
+            margin:72px 0 0 65px;
+          }
+          .right-big-box{
+            position: relative;
+            .right-big-title-p{
+              position: absolute;
+              top:8px;
+              left:25px;
+              z-index:1111;
+              width: 180px;
+              height: 65px;
+              font-family: Source Han Sans CN;
+              font-weight: 700;
+              font-size: 30px;
+              color: #FFFFFF;
+              line-height: 65px;
+              text-align: right;
+              font-style: normal;
+              text-transform: none;
+
+            }
+            .num-box{
+              display: flex;
+              height:65px;
+              margin:82px 0 0 0;
+              p:nth-child(1){
+                width: 155px;
+                height:65px;
+                text-align: right;
+                line-height: 65px;
+                font-size: 50px;
+                font-weight: 700;
+                font-style: normal;
+                text-transform: none;
+                background: -webkit-linear-gradient(0deg, #0183FA, #FFFFFF); /* Chrome, Safari */
+                background: linear-gradient(0deg, #0183FA, #FFFFFF); /* 标准语法 */
+                -webkit-background-clip: text; /* Chrome, Safari */
+                background-clip: text;
+                -webkit-text-fill-color: transparent; /* Chrome, Safari */
+                color: transparent; /* 其他浏览器 */
+                font-family: Alimama ShuHeiTi;
+              }
+              p:nth-child(2){
+                margin-top:26px;
+                width: 48px;
+                height: 24px;
+                font-weight: 400;
+                font-size: 24px;
+                color: #FFFFFF;
+                line-height: 24px;
+                text-align: right;
+                font-style: normal;
+                text-transform: none;
+              }
+            }
+            .text-box{
+              display: flex;
+              height:30px;
+              margin-top:10px;
+              p{
+                font-size:24px;
+                line-height:30px;
+              }
+              .text-left{
+                color: #FFDAB2;
+              }
+              .text-right{
+                width:80px;
+                color: #00FFFF;
+                text-align: center;
+              }
+            }
+            .position-black-p{
+              position: absolute;
+              top:50px;
+              left:25px;
+              width: 210px;
+              height: 20px;
+              background: linear-gradient( 270deg, rgba(0,94,181,0.01) 0%, #1777CE 100%);
+              border-radius: 0px 0px 0px 0px;
+            }
+          }
+        }
+      }
       #center-bottom-left-eCharts-left{
-        width:888px;
-        height:345px;
+        width:917px;
+        height:360px;
+        margin-top:40px;
       }
     }
   }

src/views/components/center-bottom-right.vue

@@ -2,7 +2,19 @@
   <div class="center-bottom-right">
     <titleComponent :titleData="titleData"></titleComponent>
     <div class="center-bottom-right-page">
-
+      <div class="dv-scroll-board-title-box">
+        <p>设施房间</p>
+        <p>使用人所属
+          单位</p>
+        <p>房间准入总
+          人数</p>
+        <p>30日进入总
+          人次</p>
+        <p>7日进入总
+          人次</p>
+      </div>
+      <p class="null-p" v-if="!config.data[0]">暂无数据</p>
+      <dv-scroll-board :config="config" style="width:773px;height:540px;margin:0 24px;" v-if="config.data[0]"/>
     </div>
   </div>
 </template>
@@ -20,6 +32,25 @@
           type:'bottom2',
           num:'6',
         },
+        config: {
+          rowNum: 7,
+          columnWidth:[154,154,150,150,150],
+          align:['center','center','center','center','center'],
+          oddRowBGC: 'rgba(0,71,152,0.1)',
+          evenRowBGC: 'rgba(0,0,0,0.1)',
+          data: [
+            ['A01','植保学院','4','96','9',],
+            ['A02','植保学院','4','96','9',],
+            ['A03','植保学院','4','96','9',],
+            ['A04','植保学院','4','96','9',],
+            ['A05','植保学院','4','96','9',],
+            ['A06','植保学院','4','96','9',],
+            ['A07','植保学院','4','96','9',],
+            ['A08','植保学院','4','96','9',],
+            ['A09','植保学院','4','96','9',],
+            ['A010','植保学院','4','96','9',],
+          ]
+        },
       }
     },
     created(){
@@ -42,6 +73,40 @@
       height:664px;
       background-image: url("../../assets/ZDimages/icon_jrrs_bg@1x.png");
       background-size: 100% 100%;
+      .dv-scroll-board-title-box{
+        width: 773px;
+        height: 80px;
+        background: rgba(1,77,146,0.5);
+        font-family: Source Han Sans CN;
+        display: flex;
+        margin:28px 24px 0;
+        p{
+          font-size:26px;
+          color:#1476DF;
+          text-align: center;
+          line-height: 28px;
+          margin-top:12px;
+        }
+        p:nth-child(1){
+          width:160px;
+          margin-top:26px;
+        }
+        p:nth-child(2){
+          width:154px;
+        }
+        p:nth-child(3){
+          width:150px;
+        }
+        p:nth-child(4){
+          width:150px;
+        }
+        p:nth-child(5){
+          width:150px;
+        }
+      }
+      ::v-deep .ceil{
+        font-size:26px;
+      }
     }
   }
 </style>

src/views/components/center-center.vue

@@ -2,6 +2,15 @@
   <div class="center-center">
     <titleComponent :titleData="titleData"></titleComponent>
     <div class="center-center-page">
+      <div class="center-center-left-box">
+        <p class="center-center-left-title">使用二级单位数量</p>
+        <div class="center-center-left-black-box">
+          <div>
+            <p>20</p>
+            <p>个</p>
+          </div>
+        </div>
+      </div>
       <div id="center-center-eCharts-center"></div>
     </div>
   </div>
@@ -31,15 +40,19 @@
     },
     methods:{
       eChartsCenter(){
-        let listA = ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月'];
-        let listB = [2.0, 2.2, 3.3, 4.5, 6.3, 10.2, 20.3, 23.4, 23.0, 16.5, 12.0, 6.2];
-        let listC = [2.0, 2.2, 3.3, 4.5, 6.3, 10.2, 20.3, 23.4, 23.0, 16.5, 12.0, 6.2];
+        let listA = ['零零零一学院', '零零零二学院', '零零零三学院', '零零零四学院', '零零零五学院',
+                     '零零零六学院', '零零零七学院', '零零零八学院', '零零零九学院', '零零零十学院',
+                     '零零一一学院', '零零一二学院', '零零一三学院', '零零一四学院', '零零一五学院',
+                     '零零一六学院', '零零一七学院', '零零一八学院', '零零一九学院', '零零一十学院',
+        ];
+        let listB = [1,2,3,4,5,6,7,8,9,10,11,12,13,14,15,16,17,18,19,200];
+        let listC = [20,19,18,17,16,15,14,13,12,11,10,9,8,7,6,5,4,3,2,1];
         let option = {
           grid: {
-            top: 40,
-            bottom: 40,
-            left: 40,
-            right: 40
+            top: '14%',
+            bottom: '30%',
+            left: '8%',
+            right: '7%'
           },
           tooltip: {
             show: false,
@@ -66,6 +79,17 @@
               axisLabel: {
                 rotate: -45, // 旋转角度
                 color: '#fff',
+                fontSize: 22,
+              },
+              axisTick: {
+                show: false
+              },
+              axisLine: {
+                show: true,
+                lineStyle: {
+                  width: 1,
+                  color: '#007380',
+                }
               },
               data: listA,
             }
@@ -77,6 +101,7 @@
               axisLabel: {
                 show: true,
                 color: '#fff',
+                fontSize: 28,
                 formatter: '{value}',
               },
               splitLine: {
@@ -89,7 +114,7 @@
                 show: true,
                 lineStyle: {
                   width: 1,
-                  color: '#00CECE',
+                  color: '#007380',
                 }
               },
             },
@@ -99,6 +124,7 @@
               axisLabel: {
                 show: true,
                 color: '#fff',
+                fontSize: 28,
                 formatter: '{value}'
               },
               splitLine: {
@@ -111,7 +137,7 @@
                 show: true,
                 lineStyle: {
                   width: 1,
-                  color: '#00CECE',
+                  color: '#007380',
                 }
               },
             }
@@ -120,10 +146,12 @@
             {
               name: '使用单位数量',
               type: 'bar',
+              barMaxWidth: 20,
               label: {
                 show: true,
                 position: 'top',
-                color: '#00FFFF',
+                color: '#fff',
+                fontSize: 22,
               },
 
               showBackground: true,
@@ -146,17 +174,18 @@
               symbol: 'circle',
               symbolSize: 8,
               lineStyle: {
-                color: '#0183FA',
+                color: '#FF8400',
                 width: 1.5,
                 type: 'line'  //'dashed'
               },
               itemStyle: {
-                color: '#0183FA'
+                color: '#FF8400'
               },
               label: {
                 show: true,
                 position: 'top',
-                color: '#0183FA',
+                color: '#FF8400',
+                fontSize: 22,
                 formatter: `{c}人`
               },
               data: listC
@@ -180,9 +209,61 @@
       height:506px;
       background-image: url("../../assets/ZDimages/icon_sydw_bg@1x.png");
       background-size: 100% 100%;
+      display: flex;
+      .center-center-left-box{
+        width:309px;
+        margin-left:40px;
+        .center-center-left-title{
+          height: 50px;
+          font-family: Source Han Sans CN;
+          font-weight: 400;
+          font-size: 30px;
+          color: #FFFFFF;
+          line-height: 50px;
+          font-style: normal;
+          text-transform: none;
+          text-align: center;
+          margin:33px 0 43px 0;
+        }
+        .center-center-left-black-box{
+          width:309px;
+          height:335px;
+          background-image: url("../../assets/ZDimages/img_sydwjyh@1x.png");
+          div{
+            display: flex;
+            p:nth-child(1){
+              flex:2;
+              text-align:right;
+              height: 123px;
+              font-family: Alimama ShuHeiTi, Alimama ShuHeiTi;
+              font-weight: 700;
+              font-size: 100px;
+              color: #FFFFFF;
+              line-height: 123px;
+              letter-spacing: 10px;
+              font-style: normal;
+              text-transform: none;
+              margin-top:27px;
+            }
+            p:nth-child(2){
+              flex:1;
+              font-family: Source Han Sans, Source Han Sans;
+              font-weight: 400;
+              height: 50px;
+              font-size: 26px;
+              color: #FFFFFF;
+              line-height: 50px;
+              text-align: left;
+              font-style: normal;
+              text-transform: none;
+              margin-top:79px;
+            }
+          }
+        }
+      }
       #center-center-eCharts-center{
-        width:1326px;
-        height:465px;
+        width:1409px;
+        height:500px;
       }
     }
   }

src/views/components/center-top.vue

@@ -1,6 +1,137 @@
 <template>
   <div class="center-top">
     <titleComponent :titleData="titleData"></titleComponent>
+    <div class="center-top-page">
+      <div class="left-num-max-box">
+        <div class="position-box">
+          <p class="title-p">资源设施总数</p>
+          <div class="num-max-box">
+            <p>362</p>
+            <p>间</p>
+          </div>
+          <div class="num-for-box">
+            <div>
+              <p></p>
+              <p>使用</p>
+              <p>17间</p>
+            </div>
+            <div>
+              <p></p>
+              <p>空闲</p>
+              <p>17间</p>
+            </div>
+            <div>
+              <p></p>
+              <p>维修</p>
+              <p>17间</p>
+            </div>
+          </div>
+        </div>
+        <img class="position-img" src="@/assets/ZDimages/icon_bg_zs@1x.png">
+      </div>
+      <div class="for-min-box colorA">
+        <div class="min-box">
+          <img src="@/assets/ZDimages/icon_zysszl_kyws@1x.png">
+          <div class="min-center-box">
+            <div class="min-center-box-top">
+              <div class="min-center-box-left">
+                <p>188</p>
+                <p>间</p>
+              </div>
+              <div class="min-center-box-right">
+                <p>使用率</p>
+                <p>55%</p>
+              </div>
+            </div>
+            <p class="min-center-box-bottom">科研温室</p>
+          </div>
+        </div>
+        <div class="min-box">
+          <img src="@/assets/ZDimages/icon_zysszl_zzzyk@1x.png">
+          <div class="min-center-box">
+            <div class="min-center-box-top">
+              <div class="min-center-box-left">
+                <p>188</p>
+                <p>间</p>
+              </div>
+              <div class="min-center-box-right">
+                <p>使用率</p>
+                <p>55%</p>
+              </div>
+            </div>
+            <p class="min-center-box-bottom">种质资源库</p>
+          </div>
+        </div>
+      </div>
+      <div class="for-min-box colorB">
+        <div class="min-box">
+          <img src="@/assets/ZDimages/icon_zysszl_wsfsf@1x.png">
+          <div class="min-center-box">
+            <div class="min-center-box-top">
+              <div class="min-center-box-left">
+                <p>188</p>
+                <p>间</p>
+              </div>
+              <div class="min-center-box-right">
+                <p>使用率</p>
+                <p>55%</p>
+              </div>
+            </div>
+            <p class="min-center-box-bottom">温室附属房</p>
+          </div>
+        </div>
+        <div class="min-box">
+          <img src="@/assets/ZDimages/icon_zysszl_lk@1x.png">
+          <div class="min-center-box">
+            <div class="min-center-box-top">
+              <div class="min-center-box-left">
+                <p>188</p>
+                <p>间</p>
+              </div>
+              <div class="min-center-box-right">
+                <p>使用率</p>
+                <p>55%</p>
+              </div>
+            </div>
+            <p class="min-center-box-bottom">冷库</p>
+          </div>
+        </div>
+      </div>
+      <div class="for-min-box colorC">
+        <div class="min-box">
+          <img src="@/assets/ZDimages/icon_zysszl_dzgxrgqhs@1x.png">
+          <div class="min-center-box">
+            <div class="min-center-box-top">
+              <div class="min-center-box-left">
+                <p>188</p>
+                <p>间</p>
+              </div>
+              <div class="min-center-box-right">
+                <p>使用率</p>
+                <p>55%</p>
+              </div>
+            </div>
+            <p class="min-center-box-bottom">顶置光型人工气候室</p>
+          </div>
+        </div>
+        <div class="min-box">
+          <img src="@/assets/ZDimages/icon_zysszl_pyjxrgqhs@1x.png">
+          <div class="min-center-box">
+            <div class="min-center-box-top">
+              <div class="min-center-box-left">
+                <p>188</p>
+                <p>间</p>
+              </div>
+              <div class="min-center-box-right">
+                <p>使用率</p>
+                <p>55%</p>
+              </div>
+            </div>
+            <p class="min-center-box-bottom">培养架型人工气候室</p>
+          </div>
+        </div>
+      </div>
+    </div>
   </div>
 </template>
 <script>
@@ -34,6 +165,278 @@
   .center-top{
     width:1758px;
     height:484px;
+    .center-top-page{
+      width:1758px;
+      height:404px;
+      overflow: hidden;
+      display: flex;
+      .left-num-max-box{
+        height:404px;
+        width:349px;
+        position: relative;
+        .position-box{
+          height:404px;
+          width:349px;
+          z-index:1;
+          position: absolute;
+          top:0;
+          left:0;
+        }
+        .title-p{
+          text-align: center;
+          height: 40px;
+          font-family: Source Han Sans CN;
+          font-weight: 500;
+          font-size: 30px;
+          color: #FFFFFF;
+          line-height: 40px;
+          font-style: normal;
+          text-transform: none;
+          margin-top:45px;
+        }
+        .num-max-box{
+          width:349px;
+          margin-top:7px;
+          display: flex;
+          p:nth-child(1){
+            flex:1;
+            height: 50px;
+            font-family: YouSheBiaoTiHei;
+            font-weight: 400;
+            font-size: 60px;
+            line-height: 50px;
+            text-align: right;
+            font-style: normal;
+            text-transform: none;
+            background: -webkit-linear-gradient(0deg, #0576FF, #FFFFFF); /* Chrome, Safari */
+            background: linear-gradient(0deg, #0576FF, #FFFFFF); /* 标准语法 */
+            -webkit-background-clip: text; /* Chrome, Safari */
+            background-clip: text;
+            -webkit-text-fill-color: transparent; /* Chrome, Safari */
+            color: transparent; /* 其他浏览器 */
+          }
+          p:nth-child(2){
+            height: 30px;
+            font-family: Source Han Sans CN;
+            font-weight: 400;
+            font-size: 30px;
+            color: #FFFFFF;
+            line-height: 30px;
+            text-align: left;
+            font-style: normal;
+            text-transform: none;
+            margin: 14px 90px 0 10px;
+          }
+        }
+        .num-for-box{
+          margin-top:156px;
+          margin-left:20px;
+          div{
+            display: inline-block;
+            width:155px;
+            margin-bottom:7px;
+            p{
+              display: inline-block;
+              font-size:22px;
+              height:26px;
+              line-height:26px;
+            }
+            p:nth-child(1){
+              width:12px;
+              height:12px;
+              border-radius:50%;
+              margin:2px 10px;
+            }
+            p:nth-child(2){
+              color:#fff;
+              width:62px;
+            }
+          }
+          div:nth-child(1){
+            p:nth-child(1){
+              background-color: #0576FF;
+            }
+            p:nth-child(3){
+              color:#0576FF;
+            }
+          }
+          div:nth-child(2){
+            p:nth-child(1){
+              background-color: #00C427;
+            }
+            p:nth-child(3){
+              color:#00C427;
+            }
+          }
+          div:nth-child(3){
+            p:nth-child(1){
+              background-color: #FF8400;
+            }
+            p:nth-child(3){
+              color:#FF8400;
+            }
+          }
+        }
+        .position-img{
+          z-index:0;
+          position: absolute;
+          top:80px;
+          left:83px;
+          width:175px;
+          height:205px;
+        }
+      }
+      .colorA{
+        .min-center-box-left{
+          p:nth-child(1){
+            font-style: normal;
+            text-transform: none;
+            background: -webkit-linear-gradient(0deg, #FF8400, #FFFFFF); /* Chrome, Safari */
+            background: linear-gradient(0deg, #FF8400, #FFFFFF); /* 标准语法 */
+            -webkit-background-clip: text; /* Chrome, Safari */
+            background-clip: text;
+            -webkit-text-fill-color: transparent; /* Chrome, Safari */
+            color: transparent; /* 其他浏览器 */
+          }
+        }
+        .min-center-box-right{
+          background-color:rgba(255,138,12,0.2);
+          p:nth-child(2){
+            color:#FF8A0C;
+          }
+
+        }
+      }
+      .colorB{
+        .min-center-box-left{
+          p:nth-child(1){
+            font-style: normal;
+            text-transform: none;
+            background: -webkit-linear-gradient(0deg, #0576FF, #FFFFFF); /* Chrome, Safari */
+            background: linear-gradient(0deg, #0576FF, #FFFFFF); /* 标准语法 */
+            -webkit-background-clip: text; /* Chrome, Safari */
+            background-clip: text;
+            -webkit-text-fill-color: transparent; /* Chrome, Safari */
+            color: transparent; /* 其他浏览器 */
+          }
+        }
+        .min-center-box-right{
+          background-color:rgba(61,149,255,0.2);
+          p:nth-child(2){
+            color:#3D95FF;
+          }
 
+        }
+      }
+      .colorC{
+        .min-center-box-left{
+          p:nth-child(1){
+            font-style: normal;
+            text-transform: none;
+            background: -webkit-linear-gradient(0deg, #00FFFF, #FFFFFF); /* Chrome, Safari */
+            background: linear-gradient(0deg, #00FFFF, #FFFFFF); /* 标准语法 */
+            -webkit-background-clip: text; /* Chrome, Safari */
+            background-clip: text;
+            -webkit-text-fill-color: transparent; /* Chrome, Safari */
+            color: transparent; /* 其他浏览器 */
+          }
+        }
+        .min-center-box-right{
+          background-color:rgba(61,255,255,0.2);
+          p:nth-child(2){
+            color:#3DFFFF;
+          }
+
+        }
+      }
+      .for-min-box{
+        height:404px;
+        width:463px;
+        margin-top:57px;
+        .min-box{
+          height:166px;
+          width:463px;
+          display: flex;
+          img{
+            width:80px;
+            height:80px;
+            margin-top:42px;
+          }
+          .min-center-box{
+            margin-top:32px;
+            width:383px;
+            padding-left:22px;
+            .min-center-box-top{
+              display: flex;
+              margin-bottom:11px;
+              .min-center-box-left{
+                display: flex;
+                width:190px;
+                p:nth-child(1){
+                  width: 88px;
+                  height: 50px;
+                  font-family: YouSheBiaoTiHei;
+                  font-weight: 400;
+                  font-size: 50px;
+                  line-height: 50px;
+                }
+                p:nth-child(2){
+                  width: 30px;
+                  height: 50px;
+                  font-family: Source Han Sans CN;
+                  font-weight: 400;
+                  font-size: 30px;
+                  color: #FFFFFF;
+                  line-height: 50px;
+                  text-align: right;
+                  font-style: normal;
+                  text-transform: none;
+                  margin-left:10px;
+                }
+              }
+              .min-center-box-right{
+                margin-top:5px;
+                display: flex;
+                width:130px;
+                height: 40px;
+                border-radius: 20px 20px 20px 20px;
+                p{
+                  line-height:40px;
+                  font-family: Source Han Sans CN;
+                  font-weight: 400;
+                  font-size: 22px;
+                  color: #FFFFFF;
+                  text-align: right;
+                  font-style: normal;
+                  text-transform: none;
+                }
+                p:nth-child(1){
+                  margin-left:6px;
+                  color:#fff;
+                  text-align: right;
+                }
+                p:nth-child(2){
+                  margin-left:5px;
+                  text-align: left;
+                }
+              }
+            }
+            .min-center-box-bottom{
+              height: 30px;
+              font-family: Source Han Sans CN;
+              font-weight: 400;
+              font-size: 30px;
+              color: #FFFFFF;
+              line-height: 30px;
+              font-style: normal;
+              text-transform: none;
+            }
+          }
+          .min-right-box{
+            width:130px;
+          }
+        }
+      }
+    }
   }
 </style>

src/views/components/left-bottom.vue

@@ -2,6 +2,10 @@
   <div class="left-bottom">
     <titleComponent :titleData="titleData"></titleComponent>
     <div class="left-bottom-page">
+      <div class="position-num-box">
+        <p>总计</p>
+        <p>199</p>
+      </div>
       <div id="left-bottom-eCharts-top"></div>
       <div id="left-bottom-eCharts-bottom"></div>
     </div>
@@ -83,7 +87,7 @@
             {
               stack: 'a',
               type: 'pie',
-              radius: ['25%', '40%'],
+              radius: ['42%', '67%'],
               center: ['50%', '50%'],
               silent: true, // 鼠标悬浮效果
               clockwise: true,// 鼠标悬浮效果
@@ -96,12 +100,12 @@
                 rich: {
                   B: {
                     align: "left",
-                    fontSize: 16,
+                    fontSize: 40,
                     padding: [5, 0, 0, 0]
                   },
                   C:{
                     align:"left",
-                    fontSize: 16,
+                    fontSize: 26,
                     color:'#fff',
                     padding: [5, 0, 0, 0]
                   }
@@ -110,8 +114,8 @@
               labelLine: {
                 normal: {
                   show: true,
-                  length: 25,
-                  length2: 15,
+                  length: 20,
+                  length2: 80,
                   lineStyle: {
                     type: 'dashed'
                   }
@@ -135,48 +139,43 @@
       eChartsBottom(){
         let echartData = [
           {
-            value: 44,
-            name: '市本级',
+            value: 10,
+            name: '一号学院名称',
           },
           {
-            value: 43,
-            name: '广陵区',
+            value: 9,
+            name: '二号学院名称',
           },
           {
             value: 41,
-            name: '邗江区',
+            name: '三号学院名称',
           },
           {
             value: 40,
-            name: '开发区',
+            name: '四号学院名称',
           },
           {
             value: 38,
-            name: '江都区',
+            name: '五号学院名称',
           },
           {
             value: 33,
-            name: '瘦西湖景区',
+            name: '六号学院名称',
           },
           {
             value: 32,
-            name: '生态科技新城',
+            name: '七号学院名称',
           },
           {
             value: 31,
-            name: '宝应县',
+            name: '八号学院名称',
           },
           {
             value: 22,
-            name: '高邮市',
-          },
-          {
-            value: 10,
-            name: '仪征市',
+            name: '九号学院名称',
           },
         ];
         let option = {
-          //你的代码
           tooltip: {
             show:false,
             trigger: 'axis',
@@ -188,13 +187,14 @@
           },
           grid: {
             containLabel: true,
-            bottom: '10%',
-            left: '-5%',
-            top: '10%',
-            right: '10%',
+            bottom: '5%',
+            left: '6%',
+            top: '0%',
+            right: '0%',
           },
           xAxis: {
             type: 'value',
+            max:100,
             axisLabel: {
               show: false,
             },
@@ -219,7 +219,7 @@
                 margin: 10, //刻度标签与轴线之间的距离
                 formatter: function (value, index) {
                   // return `{a|${echartData[index].value}}{b|宗}`;
-                  return `{a|${echartData[index].value}}`;
+                  // return `{a|${echartData[index].value}}`;
                 },
                 rich: {
                   a: {
@@ -256,10 +256,10 @@
               axisLabel: {
                 show: true,
                 margin: -2,
-                fontSize: 12,
-                align: 'top',
-                verticalAlign: "bottom",
-                padding: [0, 0, 10, 0],
+                fontSize: 26,
+                align: 'right',
+                verticalAlign: "center",
+                padding: [0, 30, 0, 0],
                 color: '#fff',
               },
             },
@@ -322,6 +322,40 @@
       height:1003px;
       background-image: url("../../assets/ZDimages/icon_kyxmgl_bg@1x.png");
       background-size: 100% 100%;
+      position: relative;
+      .position-num-box{
+        width:240px;
+        height:240px;
+        position: absolute;
+        top:180px;
+        left:300px;
+        z-index:1;
+        p:nth-child(1){
+          width:240px;
+          height:36px;
+          line-height:36px;
+          font-size:36px;
+          font-family: Source Han Sans CN;
+          font-weight: 700;
+          color: #FFFFFF;
+          text-align: center;
+          font-style: normal;
+          text-transform: none;
+        }
+        p:nth-child(2){
+          margin-top:20px;
+          width:240px;
+          height: 80px;
+          font-family: Source Han Sans CN;
+          font-weight: 700;
+          font-size: 80px;
+          color: #0183FA;
+          line-height: 80px;
+          text-align: center;
+          font-style: normal;
+          text-transform: none;
+        }
+      }
       #left-bottom-eCharts-top{
         width:840px;
         height:500px;

src/views/components/left-top.vue

@@ -2,8 +2,29 @@
   <div class="left-top">
     <titleComponent :titleData="titleData"></titleComponent>
     <div class="left-top-eCharts-box">
-      <div id="left-top-eCharts-left"></div>
-      <div id="left-top-eCharts-right"></div>
+      <div class="top-max-big-box">
+        <img src="@/assets/ZDimages/icon_kyrytj_zs@1x.png">
+        <p>总数</p>
+        <p>183</p>
+        <p>人</p>
+      </div>
+      <div class="text-max-big-box">
+        <div>
+          <p>老师：</p>
+          <p>183</p>
+          <p>人</p>
+        </div>
+        <div>
+          <p>学生：</p>
+          <p>183</p>
+          <p>人</p>
+        </div>
+
+      </div>
+      <div class="eCharts-box">
+        <div id="left-top-eCharts-left"></div>
+        <div id="left-top-eCharts-right"></div>
+      </div>
     </div>
   </div>
 </template>
@@ -143,10 +164,10 @@
             },
           },
           grid: {
-            left: 20,
-            right: 40,
-            bottom: "19%",
-            top: 107,
+            left: '10%',
+            right: '0%',
+            bottom: '15%',
+            top: '5%',
             containLabel: true,
           },
           xAxis: {
@@ -157,23 +178,34 @@
               "讲师",
               "助教",
             ],
-            axisLine: {
-              show: true,
-              lineStyle: {
-                color: "white",
-              },
-            },
-            offset: 20,
             axisTick: {
               show: false,
-              length: 9,
-              alignWithLabel: true,
+            },
+            axisLine: {
+              show: true,
               lineStyle: {
                 color: "white",
               },
             },
             axisLabel: {
-              fontSize: 10,
+              show: true,
+              margin: 25,
+              align: "center",
+              textStyle: {
+                fontSize: 26,
+                color: "#ffffff",
+                rich: {
+                  a: {
+                    fontSize: 12,
+                    color: "#ffffff",
+                  },
+                  b: {
+                    height: 20,
+                    fontSize: 14,
+                    color: "#ffffff",
+                  },
+                },
+              },
             },
           },
           yAxis: {
@@ -191,7 +223,7 @@
               show: false,
             },
             axisLabel: {
-              fontSize: 16,
+              fontSize: 22,
             },
             boundaryGap: ["20%", "20%"],
           },
@@ -254,7 +286,7 @@
               type: "bar",
               label: {
                 normal: {
-                  show: true,
+                  show: false,
                   position: "top",
                   fontSize: 16,
                   color: "#fff",
@@ -307,8 +339,11 @@
             },
           },
           grid: {
-            top: "25%",
-            bottom: "15%",
+            left: '10%',
+            right: '10%',
+            bottom: '15%',
+            top: '5%',
+            containLabel: true,
           },
           xAxis: {
             data: xAxisData,
@@ -325,19 +360,8 @@
               show: true,
               margin: 25,
               align: "center",
-              formatter: function (params, index) {
-                return (
-                  "{a|" +
-                  ((seriesData1[index] / sum) * 100).toFixed(2) +
-                  "%}" +
-                  "\n" +
-                  "{b|" +
-                  params +
-                  "}"
-                );
-              },
               textStyle: {
-                fontSize: 14,
+                fontSize: 26,
                 color: "#ffffff",
                 rich: {
                   a: {
@@ -369,7 +393,7 @@
               show: false,
             },
             axisLabel: {
-              fontSize: 16,
+              fontSize: 22,
             },
             boundaryGap: ["20%", "20%"],
           },
@@ -386,7 +410,7 @@
                 },
               },
               label: {
-                show: true,
+                show: false,
                 position: "top",
                 fontSize: 16,
               },
@@ -443,19 +467,122 @@
     width:950px;
     height:735px;
     margin-bottom:34px;
+    overflow: hidden;
     .left-top-eCharts-box{
       width:950px;
       height:655px;
       background-image: url("../../assets/ZDimages/icon_kyrytj_bg@1x.png");
       background-size: 100% 100%;
-      display: flex;
-      #left-top-eCharts-left{
-        width:475px;
-        height:340px;
+      overflow: hidden;
+      .top-max-big-box{
+        width:870px;
+        height:170px;
+        background-image: url("../../assets/ZDimages/icon_zs_bg@1x.png");
+        background-size: 100% 100%;
+        margin:48px 40px 0;
+        display: flex;
+        img{
+          width:96px;
+          height:96px;
+          margin:36px 0 0 36px;
+        }
+        p{
+          height:170px;
+          line-height:170px;
+        }
+        p:nth-child(2){
+          font-family: Alimama ShuHeiTi;
+          font-weight: 700;
+          font-size: 40px;
+          color: #FFFFFF;
+          font-style: normal;
+          text-transform: none;
+          margin-left:90px;
+        }
+        p:nth-child(3){
+          flex:1;
+          width: 110px;
+          margin-right:12px;
+          font-family: YouSheBiaoTiHei;
+          font-weight: 400;
+          font-size: 60px;
+          text-align: right;
+          font-style: normal;
+          text-transform: none;
+          background: -webkit-linear-gradient(0deg, #0183FA, #FFFFFF); /* Chrome, Safari */
+          background: linear-gradient(0deg, #0183FA, #FFFFFF); /* 标准语法 */
+          -webkit-background-clip: text; /* Chrome, Safari */
+          background-clip: text;
+          -webkit-text-fill-color: transparent; /* Chrome, Safari */
+          color: transparent; /* 其他浏览器 */
+        }
+        p:nth-child(4){
+          width: 30px;
+          margin-right:40px;
+          font-family: Source Han Sans CN;
+          font-weight: 400;
+          font-size: 30px;
+          color: #FFFFFF;
+          text-align: left;
+          font-style: normal;
+          text-transform: none;
+        }
+      }
+      .text-max-big-box{
+        display: flex;
+        margin:35px 0 25px 0;
+        div{
+          flex:1;
+          display: flex;
+          p:nth-child(1){
+            width: 90px;
+            height: 50px;
+            line-height: 50px;
+            margin-left:87px;
+            font-family: Source Han Sans CN;
+            font-weight: 400;
+            font-size: 30px;
+            color: #FFFFFF;
+            text-align: left;
+            font-style: normal;
+            text-transform: none;
+          }
+          p:nth-child(2){
+            height: 50px;
+            line-height: 50px;
+            margin-right:13px;
+            font-family: Alimama ShuHeiTi;
+            font-weight: 700;
+            font-size: 40px;
+            color: #0183FA;
+            text-align: left;
+            font-style: normal;
+            text-transform: none;
+          }
+          p:nth-child(3){
+            width: 30px;
+            height: 50px;
+            line-height: 50px;
+            font-family: Source Han Sans CN;
+            font-weight: 400;
+            font-size: 30px;
+            color: #FFFFFF;
+            text-align: left;
+            font-style: normal;
+            text-transform: none;
+          }
+        }
       }
-      #left-top-eCharts-right{
-        width:475px;
-        height:340px;
+      .eCharts-box{
+        display: flex;
+        #left-top-eCharts-left{
+          width:475px;
+          height:350px;
+        }
+        #left-top-eCharts-right{
+          width:475px;
+          height:350px;
+        }
       }
     }
   }

src/views/components/right.vue

@@ -2,18 +2,54 @@
   <div class="right">
     <titleComponent :titleData="titleData"></titleComponent>
     <div class="right-page">
+      <div class="right-page-top-max-big-box">
+        <div class="right-page-title-box">
+          <p>温室一期1区</p>
+          <p>使用人：王教授 资环学院</p>
+        </div>
+        <div class="right-page-top-flex-box">
+          <div class="left-max-big-box">
+            <div class="left-big-box">
+              <img src="@/assets/ZDimages/img_sssjtj_wd@1x.png">
+              <p>温度</p>
+            </div>
+            <div class="right-big-box">
+              <p>最高值：55.1℃</p>
+              <p>当前值：43.5℃</p>
+              <p>最低值：22.5℃</p>
+            </div>
+          </div>
+          <div class="right-max-big-box">
+            <div class="left-big-box">
+              <img src="@/assets/ZDimages/img_sssjtj_sd@1x.png">
+              <p>湿度</p>
+            </div>
+            <div class="right-big-box">
+              <p>最高值：71.2%RH</p>
+              <p>当前值：67.1%RH</p>
+              <p>最低值：45%RH</p>
+            </div>
+          </div>
+        </div>
+      </div>
       <div id="right-eCharts-1"></div>
       <div id="right-eCharts-2"></div>
       <div id="right-eCharts-3"></div>
+      <div class="right-page-bottom-video-max-big-box">
+        <H5PlayerVideo class="for-video-box"
+                       :videoProps="videoProps"></H5PlayerVideo>
+      </div>
     </div>
   </div>
 </template>
 <script>
+  import H5PlayerVideo from '@/components/H5PlayerVideo/H5PlayerVideo.vue'
   import titleComponent from './subcomponent/titleComponent.vue'
   export default {
     name: 'right',
     components: {
       titleComponent,
+      H5PlayerVideo
     },
     data () {
       return {
@@ -22,6 +58,13 @@
           type:'right',
           num:'7',
         },
+        videoProps:{
+          fullShow:true,
+          width: 876, //(宽度:非必传-默认600)
+          height: 419, //(高度:非必传-默认338)
+          url: '12312312',
+          cameraIndexCode: '213123123123',
+        },
       }
     },
     created(){
@@ -46,16 +89,16 @@
           },
 
           legend: {
-            itemWidth: 20,
-            itemHeight: 10,
+            itemWidth: 60,
+            itemHeight: 30,
             itemGap: 20,
-            right: "42%",
-            top: "2%",
+            right: "35%",
+            top: "10%",
             textStyle: {
-              fontSize: 14,
+              fontSize: 30,
               color: "#fff",
             },
-            data: ["24h温度走势图"],
+            data: [" 24h温度走势图"],
             selectedMode: false,
           },
           xAxis: {
@@ -85,7 +128,7 @@
               textStyle: {
                 show: true,
                 color: '#fff',
-                fontSize: '12'
+                fontSize: '22'
               }
             },
             axisLine: {
@@ -114,20 +157,20 @@
               textStyle: {
                 show: true,
                 color: '#fff',
-                fontSize: '12'
+                fontSize: '22'
               }
             },
           },
           grid: {
             left: '3%',
-            top: '8%',
+            top: '30%',
             right: '3%',
             bottom: '5%',
             containLabel: true
           },
           series: [{
             data: listB,
-            name: '24h温度走势图',
+            name: ' 24h温度走势图',
             type: 'line',
             symbol: 'circle',
             smooth: true,
@@ -178,16 +221,16 @@
             trigger: 'axis'
           },
           legend: {
-            itemWidth: 20,
-            itemHeight: 10,
+            itemWidth: 60,
+            itemHeight: 30,
             itemGap: 20,
-            right: "42%",
-            top: "2%",
+            right: "35%",
+            top: "10%",
             textStyle: {
-              fontSize: 14,
+              fontSize: 30,
               color: "#fff",
             },
-            data: ["24h湿度走势图"],
+            data: [" 24h湿度走势图"],
             selectedMode: false,
           },
           xAxis: {
@@ -217,7 +260,7 @@
               textStyle: {
                 show: true,
                 color: '#fff',
-                fontSize: '12'
+                fontSize: '22'
               }
             },
             axisLine: {
@@ -246,20 +289,20 @@
               textStyle: {
                 show: true,
                 color: '#fff',
-                fontSize: '12'
+                fontSize: '22'
               }
             },
           },
           grid: {
             left: '3%',
-            top: '8%',
+            top: '30%',
             right: '3%',
             bottom: '5%',
             containLabel: true
           },
           series: [{
             data: listB,
-            name: '24h湿度走势图',
+            name: ' 24h湿度走势图',
             type: 'line',
             symbol: 'circle',
             smooth: true,
@@ -311,16 +354,16 @@
           },
 
           legend: {
-            itemWidth: 20,
-            itemHeight: 10,
+            itemWidth: 60,
+            itemHeight: 30,
             itemGap: 20,
-            right: "42%",
-            top: "2%",
+            right: "35%",
+            top: "10%",
             textStyle: {
-              fontSize: 14,
+              fontSize: 30,
               color: "#fff",
             },
-            data: ["用电功率（w）"],
+            data: [" 用电功率（w）"],
             selectedMode: false,
           },
           xAxis: {
@@ -350,7 +393,7 @@
               textStyle: {
                 show: true,
                 color: '#fff',
-                fontSize: '12'
+                fontSize: '22'
               }
             },
             axisLine: {
@@ -379,20 +422,20 @@
               textStyle: {
                 show: true,
                 color: '#fff',
-                fontSize: '12'
+                fontSize: '22'
               }
             },
           },
           grid: {
             left: '3%',
-            top: '8%',
+            top: '30%',
             right: '3%',
             bottom: '5%',
             containLabel: true
           },
           series: [{
             data: listB,
-            name: '用电功率（w）',
+            name: ' 用电功率（w）',
             type: 'line',
             symbol: 'circle',
             smooth: true,
@@ -446,18 +489,110 @@
       height:1774px;
       background-image: url("../../assets/ZDimages/icon_sssjtj_bg@1x.png");
       background-size: 100% 100%;
+      overflow: hidden;
+      .right-page-top-max-big-box{
+        width:950px;
+        height:311px;
+        overflow: hidden;
+        .right-page-title-box{
+          margin:29px 0 19px 39px;
+          display: flex;
+          p{
+            height: 45px;
+            font-family: Source Han Sans CN;
+            font-weight: 400;
+            font-size: 30px;
+            color: #FFFFFF;
+            line-height: 45px;
+            letter-spacing: 3px;
+            text-align: left;
+            font-style: normal;
+            text-transform: none;
+          }
+          p:nth-child(1){
+            margin-right:60px;
+          }
+        }
+        .right-page-top-flex-box{
+          display: flex;
+          .left-max-big-box{
+            margin:0 21px 0 36px;
+          }
+          .left-max-big-box , .right-max-big-box{
+            width:430px;
+            height:216px;
+            display: flex;
+            background-image: url("../../assets/ZDimages/img_sssj_wd_bg@1x.png");
+            background-size: 100% 100%;
+            .left-big-box{
+              width:172px;
+              position: relative;
+              img{
+                width:114px;
+                height:150px;
+                position:absolute;
+                top:19px;
+                left:33px;
+                z-index:0;
+              }
+              p{
+                height: 37px;
+                font-family: Alimama ShuHeiTi;
+                font-weight: 700;
+                font-size: 30px;
+                color: #FFFFFF;
+                line-height: 37px;
+                letter-spacing: 3px;
+                text-align: center;
+                font-style: normal;
+                text-transform: none;
+                position: absolute;
+                top:154px;
+                left:58px;
+                z-index:1;
+              }
+            }
+            .right-big-box{
+              p{
+                width: 240px;
+                height: 64px;
+                font-family: Source Han Sans CN, Source Han Sans CN;
+                font-weight: 400;
+                font-size: 28px;
+                color: #FFFFFF;
+                line-height: 64px;
+                font-style: normal;
+                text-transform: none;
+              }
+              p:nth-child(1){
+                margin-top:12px;
+              }
+              p:nth-child(2){
+                color:#0183FA;
+                border-top:1px solid #fff;
+                border-bottom:1px solid #fff;
+              }
+            }
+          }
+        }
+      }
       #right-eCharts-1{
-        width:890px;
+        width:950px;
         height:330px;
       }
       #right-eCharts-2{
-        width:890px;
+        width:950px;
         height:330px;
       }
       #right-eCharts-3{
-        width:890px;
+        width:950px;
         height:330px;
       }
+      .right-page-bottom-video-max-big-box{
+        width:876px;
+        height:419px;
+        margin:21px 37px 0;
+      }
     }
   }
 </style>

src/views/components/subcomponent/titleComponent.vue

@@ -72,7 +72,7 @@
         color: #FFFFFF;
         line-height: 80px;
         font-weight: 700;
-        font-family: Alimama ShuHeiTi, Alimama ShuHeiTi;
+        font-family: Alimama ShuHeiTi;
       }
     }
     .left-box{

src/views/formerComponents/scientificResearchProject.vue

@@ -720,7 +720,7 @@
         background: -webkit-linear-gradient(#FFFFFF, #0095FF);
         -webkit-background-clip: text;
         color: transparent;
-        font-family: Alimama ShuHeiTi, Alimama ShuHeiTi;
+        font-family: Alimama ShuHeiTi;
       }
       .position-img {
         z-index: 1;

src/views/home.vue

@@ -78,8 +78,10 @@
     flex:1;
     display: flex;
     flex-direction: column;
-    background-color: #020B15;
     position: relative;
+    background-color: #020B15;
+    background-image: url("../assets/ZDimages/dbg@1x.png");
+    background-size: 100% 100%;
     .home-page{
       flex:1;
       overflow: hidden;