数据监测死数据填写

src/views/echarts.vue

@@ -8,19 +8,37 @@
       <!-- 顶部展示信息区开始 -->
       <div class="topDataBlock">    
         <div class="topData">
-        
+          <div class="DataTitle">创客项目人数</div>
+          <div class="topData_value">
+            <span>329</span>
+            <span><img src="@/assets/img/upIcon.png"></span>
+          </div>
         </div>
         <div class="topData">
-        
+          <div class="DataTitle">目前积累创客项目数量</div>
+          <div class="topData_value">
+            <span>40</span>
+          </div>
         </div>
         <div class="topData">
-        
+          <div class="DataTitle">创客活动数量</div>
+          <div class="topData_value">
+            <span>25</span>
+          </div>
         </div>
         <div class="topData">
-        
+          <div class="DataTitle">学院目前资金总预算</div>
+          <div class="topData_value">
+            <span>100</span>
+            <span>（千万）</span>
+          </div>
         </div>
         <div class="topData">
-        
+          <div class="DataTitle">已支出预算</div>
+          <div class="topData_value">
+            <span>25</span>
+            <span>（千万）</span>
+          </div>
         </div>
         
       </div>
@@ -49,51 +67,45 @@
       :data="tableData"
       tooltip-effect="dark"
       stripe
-      style="height: 500px;"
       class="fontSize"
       :header-cell-style="{ background: '#3867d6',color:'#fff' }"
       >
      
       <el-table-column
-        prop="title"
+        type="index"
         label="排名"
         align="center"
-        min-width="25%">
+        width="100">
       </el-table-column>
 
       <el-table-column
-        prop="tname"
+        prop="title"
         label="项目名称"
-        align="center"
-        min-width="20%">
+        align="center">
       </el-table-column>
 
       <el-table-column
-        prop="create_at"
+        prop="pro_leader"
         label="项目负责人"
-        align="center"
-        min-width="25%">
+        align="center">
       </el-table-column>
 
       <el-table-column
-        prop="create_at"
+        prop="TypeName"
         label="创客类型"
-        align="center"
-        min-width="25%">
+        align="center">
       </el-table-column>
 
       <el-table-column
-        prop="create_at"
+        prop="Activity"
         label="活跃度"
-        align="center"
-        min-width="25%">
+        align="center">
       </el-table-column>
 
       <el-table-column
-        prop="create_at"
+        prop="ClassName"
         label="所属学院"
-        align="center"
-        min-width="25%">
+        align="center">
       </el-table-column>
      
     </el-table>
@@ -274,7 +286,12 @@
           // 声明多个 bar 系列，默认情况下，每个系列会自动对应到 dataset 的每一列。
           series: [{ type: 'bar' ,itemStyle:{color:"#5aaef3"}}]
         },
-        tableData: []
+        tableData: [
+          {title:"人工智能分链机器",pro_leader:"覃罡彤",TypeName:"个人创客",Activity:"286",ClassName:"信息与通讯学院"},
+          {title:"3D演奏智能工具",pro_leader:"袁一鸣",TypeName:"个人创客",Activity:"225",ClassName:"信息与通讯学院"},
+          {title:"物联网切割机器",pro_leader:"张晓分",TypeName:"个人创客",Activity:"169",ClassName:"中德制造"},
+          {title:"人工智能领航AI马拉松",pro_leader:"林子夏",TypeName:"创客活动",Activity:"121",ClassName:"中德制造"},
+        ]
       };
     },
     methods: {
@@ -308,35 +325,66 @@
     display: flex;
     justify-content:space-between;
     align-items: center;
-    .topData:nth-child(1){
+    .topData{
       width: 19%;
       height: 94%;
-      background-image: linear-gradient(100deg, #3caef5 60%,#497df5);
       border-radius: 5px;
+      box-sizing: border-box;
+      // padding: 15px 10px 10px 35px;
+      .DataTitle{
+        margin: 15px 10px 10px 35px;
+        color: white;
+        font-size: 18px;
+        position: relative;
+        &::after{
+          content: '';
+          display: block;
+          position: absolute;
+          width: 7px;
+          height: 86%;
+          top: 7%;
+          left: -15px;
+          background-color: white;
+        }
+      }
+      .topData_value{
+        width: auto;
+        height: 40%;
+        margin: 15px 20px 10px 20px;
+        display: flex;
+        align-items: center;
+        color: white;
+        span{
+          height: 100%;
+          display: flex;
+          // align-items: flex-end;
+        }
+        span:nth-of-type(1){
+          font-size: 2.8em;
+        }
+        span:nth-of-type(2){
+          align-items: flex-end;
+          img{
+            height: 32px;
+            margin-left: 5px;
+          }
+        }
+      }
+    }
+    .topData:nth-child(1){
+      background-image: linear-gradient(100deg, #3caef5 60%,#497df5);
     }
     .topData:nth-child(2){
-      width: 19%;
-      height: 94%;
       background-image: linear-gradient(100deg, #fcb871 60%,#f77c5f);
-      border-radius: 5px;
     }
     .topData:nth-child(3){
-      width: 19%;
-      height: 94%;
       background-image: linear-gradient(100deg, #3ce0ea 60%,#29bfa3);
-      border-radius: 5px;
     }
     .topData:nth-child(4){
-      width: 19%;
-      height: 94%;
       background-image: linear-gradient(100deg, #3caef5 60%,#497df5);
-      border-radius: 5px;
     }
     .topData:nth-child(5){
-      width: 19%;
-      height: 94%;
       background-image: linear-gradient(100deg, #fcb871 60%,#f77c5f);
-      border-radius: 5px;
     }
   }
   .midBlock{     //中部大饼
@@ -365,5 +413,10 @@
     background: #f3f6f7;
   }
 
-
+  .el-table__header{
+    height:60px;
+  }
+  .el-table__row{
+    height: 60px;
+  }
 </style>