数据看板-全部订单

src/views/index.vue

@@ -2,7 +2,7 @@
   <div class="app-container home">
     <div class="title">{{ $route.meta.title }}</div>
     <el-card class="today">
-      <div class="today-title">今日核心数据</div>
+      <div class="card-title">今日核心数据</div>
       <el-row type="flex" class="data">
         <el-col>
           <div class="label">新用户</div>
@@ -33,6 +33,51 @@
         </el-col>
       </el-row>
     </el-card>
+    <el-row :gutter="10" class="order">
+      <el-col :span="14">
+        <el-card>
+          <div class="card-title">全部订单</div>
+          <el-row type="flex" class="all-card" :gutter="10">
+            <el-col>
+              <div class="data">
+                <div class="img"></div>
+                <div class="value">待付款：123</div>
+              </div>
+            </el-col>
+            <el-col>
+              <div class="data">
+                <div class="img"></div>
+                <div class="value">待付款：123</div>
+              </div>
+            </el-col>
+            <el-col>
+              <div class="data">
+                <div class="img"></div>
+                <div class="value">待付款：123</div>
+              </div>
+            </el-col>
+            <el-col>
+              <div class="data">
+                <div class="img"></div>
+                <div class="value">待付款：123</div>
+              </div>
+            </el-col>
+            <el-col>
+              <div class="data">
+                <div class="img"></div>
+                <div class="value">待付款：123</div>
+              </div>
+            </el-col>
+          </el-row>
+        </el-card>
+      </el-col>
+      <el-col :span="5">
+        <el-card>2</el-card>
+      </el-col>
+      <el-col :span="5">
+        <el-card>2</el-card>
+      </el-col>
+    </el-row>
   </div>
 </template>
 
@@ -67,13 +112,16 @@ export default {
     font-family: SourceHanSansSC-regular;
   }
 
+  .card-title {
+    font-size: 20px;
+    margin-bottom: 20px;
+    font-weight: bold;
+  }
+
   &>.today {
     margin-top: 10px;
 
-    .today-title {
-      font-size: 20px;
-      margin-bottom: 20px;
-    }
+
 
     .data {
 
@@ -122,6 +170,31 @@ export default {
       }
     }
   }
+
+
+  &>.order {
+    margin-top: 10px;
+
+    .all-card {
+      .data {
+        text-align: center;
+
+        &>.img {
+          background-color: #e9f2ff;
+          width: 50%;
+          /* 设置高度为宽度 */
+          padding-top: 50%;
+          margin: auto;
+          border-radius: 10px;
+        }
+
+        &>.value {
+          font-size: 16px;
+          margin-top: 5px;
+        }
+      }
+    }
+  }
 }
 </style>