商品销售

src/views/index.vue

@@ -1,6 +1,7 @@
 <template>
   <div class="app-container home">
     <div class="title">{{ $route.meta.title }}</div>
+    <div class="body">
       <el-card class="today">
         <div class="card-title">今日核心数据</div>
         <el-row type="flex" class="data">
@@ -84,6 +85,34 @@
           </el-card>
         </el-col>
       </el-row>
+      <el-row :gutter="10" type="flex" class="bottom">
+        <el-col :span="14">
+          <el-card>
+            <div class="card-title">月销售趋势</div>
+          </el-card>
+        </el-col>
+        <el-col :span="10" class="rank">
+          <el-card>
+            <div class="top">
+              <div class="card-title">商品销售TOP5</div>
+              <el-dropdown class="select-day">
+                <span class="el-dropdown-link">
+                  近7天<i class="el-icon-arrow-down el-icon--right"></i>
+                </span>
+                <el-dropdown-menu slot="dropdown">
+                </el-dropdown-menu>
+              </el-dropdown>
+            </div>
+            <el-table :data="rankData">
+              <el-table-column label="排名" type="index" align="center"></el-table-column>
+              <el-table-column label="商品" prop="name" align="center"></el-table-column>
+              <el-table-column label="订单数" prop="order" align="center"></el-table-column>
+              <el-table-column label="销售总额" prop="price" align="center"></el-table-column>
+            </el-table>
+          </el-card>
+        </el-col>
+      </el-row>
+    </div>
   </div>
 </template>
 
@@ -92,8 +121,14 @@ export default {
   name: "Index",
   data() {
     return {
-      // 版本号
-      version: "3.8.5"
+      // 商品销售数据
+      rankData: Array.from(new Array(5).keys()).map(item => {
+        return {
+          name: "华为Mate 40 手机",
+          order: 56,
+          price: 1555646.00
+        }
+      })
     };
   },
   methods: {
@@ -107,9 +142,6 @@ export default {
 <style scoped lang="scss">
 .home {
   background-color: #f8f9fd;
-  height: 100%;
-  width: 100%;
-  position: absolute;
 
   &>.title {
     color: rgba(22, 132, 252, 1);
@@ -134,6 +166,9 @@ export default {
     margin-top: 10px;
   }
 
+  &>.body {
+    background-color: #f5f5f5;
+
     &>.today {
       margin-top: 10px;
 
@@ -210,6 +245,24 @@ export default {
         text-align: center;
       }
     }
+
+    &>.bottom {
+      margin-top: 10px;
+
+      &>.rank {
+        .top {
+          display: flex;
+          justify-content: space-between;
+
+          .select-day {
+            font-size: 16px;
+            margin-top: 5px;
+          }
+        }
+      }
+    }
+
+  }
 }
 </style>