修改首页样式

src/components/Home.vue

@@ -7,7 +7,7 @@
           <router-link
             v-if="user != null && rolesPermissions != null &&( rolesPermissions.isAgency || rolesPermissions.isIndividualUser || rolesPermissions.isSystemAdministrator || rolesPermissions.isEnterpriseUser)"
             :to="{ name: 'ProjectCreate'}">
-            <div class="btn btn-medium btn-home-apply">创建项目</div>
+              <el-button class="btn-home-apply" type="primary">创建项目</el-button>
           </router-link>
         </el-carousel-item>
       </el-carousel>
@@ -15,82 +15,131 @@
     <div class="home-body-wrap">
       <div class="title h2">系统统计信息</div>
       <el-row type="flex" align="middle" justify="center" style="font-size: 14px;">
-        <el-col :span="5" type="flex" align="middle" justify="center">
-          <el-card class="box-card" shadow="hover" style="margin-right: 10px">
+        <el-col :span="6" type="flex" align="middle" justify="center" >
+          <el-card class="box-card" shadow="hover" style="margin-right: 40px; background-color: #20A0FF;">
             <div slot="header" class="clearfix">
-              <span style="font-size: 30px;color: #0b2e13"><i class="el-icon-user"></i></span>
+              <span style="font-size: 30px;color: white"><i class="el-icon-user"></i></span>
             </div>
             <el-row type="flex" align="middle" justify="center" style="font-size: 14px;">
-              <el-col :span="18" type="flex" align="middle" justify="start"><span style="font-size: 50px">{{statisticsData.userNum}}</span>
+              <el-col :span="18" type="flex" align="middle" justify="start"><span style="font-size: 50px; color: white;">{{systemStatistics[0].value}}</span>
               </el-col>
-              <el-col :span="20" type="flex" align="bottom" justify="end"><span> <el-link style="font-size: 12px;"
+              <el-col :span="20" type="flex" align="bottom" justify="end"><span> <el-link style="font-size: 16px; color: white;"
                                                                                           type="success"
-                                                                                          :underline="false">系统注册用户数</el-link></span>
+                                                                                          :underline="false">{{systemStatistics[0].name}}</el-link></span>
               </el-col>
             </el-row>
           </el-card>
         </el-col>
-        <el-col :span="5" type="flex" align="middle" justify="center">
-          <el-card class="box-card" shadow="hover" style="margin-right: 10px">
+        <el-col :span="6" type="flex" align="middle" justify="center">
+          <el-card class="box-card" shadow="hover" style="margin-right: 40px;background-color: #13CE66;">
             <div slot="header" class="clearfix">
-              <span style="font-size: 30px;color: #0b2e13"><i class="el-icon-user"></i></span>
+              <span style="font-size: 30px;color: white;"><i class="el-icon-setting"></i></span>
             </div>
             <el-row type="flex" align="middle" justify="center" style="font-size: 14px;">
-              <el-col :span="18" type="flex" align="middle" justify="start"><span style="font-size: 50px">{{statisticsData.userNum}}</span>
+              <el-col :span="18" type="flex" align="middle" justify="start"><span style="font-size: 50px;color: white;">{{systemStatistics[1].value}}</span>
               </el-col>
-              <el-col :span="20" type="flex" align="bottom" justify="end"><span> <el-link style="font-size: 12px;"
+              <el-col :span="20" type="flex" align="bottom" justify="end"><span> <el-link style="font-size: 16px;color: white;"
                                                                                           type="success"
-                                                                                          :underline="false">系统注册用户数</el-link></span>
+                                                                                          :underline="false">{{systemStatistics[1].name}}</el-link></span>
               </el-col>
             </el-row>
           </el-card>
         </el-col>
         <!--<el-col :span="4">{{project.id}}</el-col>-->
-        <el-col :span="5" type="flex" align="middle" justify="center">
-          <el-card class="box-card" shadow="hover" style="margin-right: 10px">
+        <el-col :span="6" type="flex" align="middle" justify="center">
+          <el-card class="box-card" shadow="hover" style="margin-right: 40px;background-color: #F7BA2A;">
             <div slot="header" class="clearfix">
-              <span style="font-size: 30px;color: #0b2e13"><i class="el-icon-user"></i></span>
+              <span style="font-size: 30px;color: white;"><i class="el-icon-user-solid"></i></span>
             </div>
             <el-row type="flex" align="middle" justify="center" style="font-size: 14px;">
-              <el-col :span="18" type="flex" align="middle" justify="start"><span style="font-size: 50px">{{statisticsData.userNum}}</span>
+              <el-col :span="18" type="flex" align="middle" justify="start"><span style="font-size: 50px;color: white;">{{systemStatistics[2].value}}</span>
               </el-col>
-              <el-col :span="20" type="flex" align="bottom" justify="end"><span> <el-link style="font-size: 12px;"
+              <el-col :span="20" type="flex" align="bottom" justify="end"><span> <el-link style="font-size: 16px;color: white;"
                                                                                           type="success"
-                                                                                          :underline="false">系统注册用户数</el-link></span>
+                                                                                          :underline="false">{{systemStatistics[2].name}}</el-link></span>
               </el-col>
             </el-row>
           </el-card>
         </el-col>
-        <el-col :span="5" type="flex" align="middle" justify="center">
-          <el-card class="box-card" shadow="hover" style="margin-right: 10px">
+        <el-col :span="6" type="flex" align="middle" justify="center">
+          <el-card class="box-card" shadow="hover" style="margin-right: 40px;background-color: #FF4949;">
             <div slot="header" class="clearfix">
-              <span style="font-size: 30px;color: #0b2e13"><i class="el-icon-user"></i></span>
+              <span style="font-size: 30px;color: white;"><i class="el-icon-cpu"></i></span>
             </div>
             <el-row type="flex" align="middle" justify="center" style="font-size: 14px;">
-              <el-col :span="18" type="flex" align="middle" justify="start"><span style="font-size: 50px">{{statisticsData.userNum}}</span>
+              <el-col :span="18" type="flex" align="middle" justify="start"><span style="font-size: 50px;color: white;">{{systemStatistics[3].value}}</span>
               </el-col>
-              <el-col :span="20" type="flex" align="bottom" justify="end"><span> <el-link style="font-size: 12px;"
+              <el-col :span="20" type="flex" align="bottom" justify="end"><span> <el-link style="font-size: 16px;color: white;"
                                                                                           type="success"
-                                                                                          :underline="false">系统注册用户数</el-link></span>
+                                                                                          :underline="false">{{systemStatistics[3].name}}</el-link></span>
               </el-col>
             </el-row>
           </el-card>
         </el-col>
-        <el-col :span="5" type="flex" align="middle" justify="center">
-          <el-card class="box-card" shadow="hover" style="margin-right: 10px">
+      </el-row>
+      <el-row type="flex" align="middle" justify="center" style="font-size: 14px; margin-top: 15px;">
+        <el-col :span="6" type="flex" align="middle" justify="center">
+          <el-card class="box-card" shadow="hover" style="margin-right: 40px;background-color: #20A0FF;">
+            <div slot="header" class="clearfix">
+              <span style="font-size: 30px;color: white;"><i class="el-icon-coin"></i></span>
+            </div>
+            <el-row type="flex" align="middle" justify="center" style="font-size: 14px;">
+              <el-col :span="18" type="flex" align="middle" justify="start"><span style="font-size: 50px;color: white;">{{systemStatistics[4].value}}</span>
+              </el-col>
+              <el-col :span="20" type="flex" align="bottom" justify="end"><span> <el-link style="font-size: 16px;color: white;"
+                                                                                          type="success"
+                                                                                          :underline="false">{{systemStatistics[4].name}}</el-link></span>
+              </el-col>
+            </el-row>
+          </el-card>
+        </el-col>
+        <el-col :span="6" type="flex" align="middle" justify="center">
+          <el-card class="box-card" shadow="hover" style="margin-right: 40px;background-color: #13CE66;color: white;">
+            <div slot="header" class="clearfix">
+              <span style="font-size: 30px;color: white;"><i class="el-icon-bank-card"></i></span>
+            </div>
+            <el-row type="flex" align="middle" justify="center" style="font-size: 14px;">
+              <el-col :span="18" type="flex" align="middle" justify="start"><span style="font-size: 50px;color: white;">{{systemStatistics[5].value}}</span>
+              </el-col>
+              <el-col :span="20" type="flex" align="bottom" justify="end"><span> <el-link style="font-size: 16px;color: white;"
+                                                                                          type="success"
+                                                                                          :underline="false">{{systemStatistics[5].name}}</el-link></span>
+              </el-col>
+            </el-row>
+          </el-card>
+        </el-col>
+        <!--<el-col :span="4">{{project.id}}</el-col>-->
+        <el-col :span="6" type="flex" align="middle" justify="center">
+          <el-card class="box-card" shadow="hover" style="margin-right: 40px;background-color: #F7BA2A;">
             <div slot="header" class="clearfix">
-              <span style="font-size: 30px;color: #0b2e13"><i class="el-icon-user"></i></span>
+              <span style="font-size: 30px;color: white;"><i class="el-icon-notebook-1"></i></span>
             </div>
             <el-row type="flex" align="middle" justify="center" style="font-size: 14px;">
-              <el-col :span="18" type="flex" align="middle" justify="start"><span style="font-size: 50px">{{statisticsData.userNum}}</span>
+              <el-col :span="18" type="flex" align="middle" justify="start"><span style="font-size: 50px;color: white;">{{systemStatistics[6].value}}</span>
               </el-col>
-              <el-col :span="20" type="flex" align="bottom" justify="end"><span> <el-link style="font-size: 12px;"
+              <el-col :span="20" type="flex" align="bottom" justify="end"><span> <el-link style="font-size: 16px;color: white;"
                                                                                           type="success"
-                                                                                          :underline="false">系统注册用户数</el-link></span>
+                                                                                          :underline="false">{{systemStatistics[6].name}}</el-link></span>
               </el-col>
             </el-row>
           </el-card>
         </el-col>
+        <el-col :span="6" type="flex" align="middle" justify="center">
+          <el-card class="box-card" shadow="hover" style="margin-right: 40px;background-color: #FF4949;">
+            <div slot="header" class="clearfix">
+              <span style="font-size: 30px;color: white;"><i class="el-icon-notebook-2"></i></span>
+            </div>
+            <el-row type="flex" align="middle" justify="center" style="font-size: 14px;">
+              <el-col :span="18" type="flex" align="middle" justify="start"><span style="font-size: 50px;color: white;">{{systemStatistics[7].value}}</span>
+              </el-col>
+              <el-col :span="20" type="flex" align="bottom" justify="end"><span> <el-link style="font-size: 16px;color: white;"
+                                                                                          type="success"
+                                                                                          :underline="false">{{systemStatistics[7].name}}</el-link></span>
+              </el-col>
+            </el-row>
+          </el-card>
+        </el-col>
+
       </el-row>
     </div>
     <div class="home-body-wrap">
@@ -153,7 +202,8 @@ export default {
         deviceNum: 345,
         projectNum: 23,
         taskNum: 123
-      }
+      },
+        systemStatistics: [{},{},{},{},{},{},{},{}]
     }
   },
   mounted () {
@@ -193,6 +243,7 @@ export default {
         this.institutionRank = res.agencyRank
         this.personRank = res.userRank
         this.imgList = res.imgList
+        this.systemStatistics = res.systemStatistics
         this.hideLoading()
       }).catch((error) => {
         this.hideLoading()
@@ -271,7 +322,7 @@ export default {
   }
 
   .home-body-wrap {
-    padding: 40px 80px;
+    padding: 20px 80px;
   }
 
   .more-info {
@@ -282,7 +333,7 @@ export default {
 
   .btn-home-apply {
     position: absolute;
-    bottom: 10%;
+    bottom: 15%;
     left: 80%;
   }