From 78f98e9fd0824d5f250ab7c79d715c2dce1c7179 Mon Sep 17 00:00:00 2001
From: panqihua <panqihua@melt.icu>
Date: Sat, 14 Jan 2023 18:33:58 +0800
Subject: [PATCH] =?UTF-8?q?=E5=95=86=E5=93=81=E9=94=80=E5=94=AE?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/views/index.vue | 323 ++++++++++++++++++++++++++------------------
 1 file changed, 188 insertions(+), 135 deletions(-)

diff --git a/src/views/index.vue b/src/views/index.vue
index eebe56a..6b84e7c 100644
--- a/src/views/index.vue
+++ b/src/views/index.vue
@@ -1,89 +1,118 @@
 <template>
   <div class="app-container home">
     <div class="title">{{ $route.meta.title }}</div>
-    <el-card class="today">
-      <div class="card-title">今日核心数据</div>
-      <el-row type="flex" class="data">
-        <el-col>
-          <div class="label">新用户</div>
-          <div class="num">569</div>
-          <div class="bottom-label">同比上周<span class="up">8.63%</span><i class="el-icon-caret-top up"></i></div>
+    <div class="body">
+      <el-card class="today">
+        <div class="card-title">今日核心数据</div>
+        <el-row type="flex" class="data">
+          <el-col>
+            <div class="label">新用户</div>
+            <div class="num">569</div>
+            <div class="bottom-label">同比上周<span class="up">8.63%</span><i class="el-icon-caret-top up"></i></div>
+          </el-col>
+          <div class="divider"></div>
+          <el-col>
+            <div class="label">新用户</div>
+            <div class="num">569</div>
+            <div class="bottom-label">同比上周<span class="up">8.63%</span><i class="el-icon-caret-top up"></i></div>
+          </el-col>
+          <div class="divider"></div>
+          <el-col>
+            <div class="label">新用户</div>
+            <div class="num">569</div>
+            <div class="bottom-label">同比上周<span class="down">8.63%</span><i class="el-icon-caret-bottom down"></i></div>
+          </el-col>
+          <div class="divider"></div>
+          <el-col>
+            <div class="label">近7日UV</div>
+            <div class="num">569</div>
+          </el-col>
+          <div class="divider"></div>
+          <el-col>
+            <div class="label">近30日UV</div>
+            <div class="num">569</div>
+          </el-col>
+        </el-row>
+      </el-card>
+      <el-row :gutter="10" class="order" type="flex">
+        <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>
-        <div class="divider"></div>
-        <el-col>
-          <div class="label">新用户</div>
-          <div class="num">569</div>
-          <div class="bottom-label">同比上周<span class="up">8.63%</span><i class="el-icon-caret-top up"></i></div>
+        <el-col :span="5">
+          <el-card class="today-order">
+            <div class="num">569</div>
+            <div class="bottom-label">今日订单数</div>
+          </el-card>
         </el-col>
-        <div class="divider"></div>
-        <el-col>
-          <div class="label">新用户</div>
-          <div class="num">569</div>
-          <div class="bottom-label">同比上周<span class="down">8.63%</span><i class="el-icon-caret-bottom down"></i></div>
+        <el-col :span="5">
+          <el-card class="total-income">
+            <div class="num">569.00</div>
+            <div class="bottom-label">今日总收入</div>
+          </el-card>
         </el-col>
-        <div class="divider"></div>
-        <el-col>
-          <div class="label">近7日UV</div>
-          <div class="num">569</div>
+      </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>
-        <div class="divider"></div>
-        <el-col>
-          <div class="label">近30日UV</div>
-          <div class="num">569</div>
+        <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>
-    </el-card>
-    <el-row :gutter="10" class="order" type="flex">
-      <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 class="today-order">
-          <div class="num">569</div>
-          <div class="bottom-label">今日订单数</div>
-        </el-card>
-      </el-col>
-      <el-col :span="5">
-        <el-card class="total-income">
-          <div class="num">569.00</div>
-          <div class="bottom-label">今日总收入</div>
-        </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,81 +166,102 @@ export default {
     margin-top: 10px;
   }
 
-  &>.today {
-    margin-top: 10px;
+  &>.body {
+    background-color: #f5f5f5;
+
+    &>.today {
+      margin-top: 10px;
 
 
 
-    .data {
+      .data {
 
-      @for $i from 1 through 4 {
-        &>.divider:nth-of-type(#{$i*2}) {
-          height: 75%;
-          width: 1px;
-          background-color: rgba(0, 0, 0, 0.2);
-          position: absolute;
-          bottom: 0;
-          left: 20% * $i;
+        @for $i from 1 through 4 {
+          &>.divider:nth-of-type(#{$i*2}) {
+            height: 75%;
+            width: 1px;
+            background-color: rgba(0, 0, 0, 0.2);
+            position: absolute;
+            bottom: 0;
+            left: 20% * $i;
+          }
         }
-      }
 
-      .label {
-        font-size: 16px;
-      }
+        .label {
+          font-size: 16px;
+        }
 
-      .up {
-        color: red;
-      }
+        .up {
+          color: red;
+        }
 
-      .down {
-        color: green;
-      }
+        .down {
+          color: green;
+        }
 
-      .up,
-      .down {
-        margin-left: 10px;
-      }
+        .up,
+        .down {
+          margin-left: 10px;
+        }
 
-      .label,
-      .num,
-      .bottom-label {
-        margin-left: 15%;
+        .label,
+        .num,
+        .bottom-label {
+          margin-left: 15%;
+        }
       }
     }
-  }
 
 
-  &>.order {
-    margin-top: 10px;
+    &>.order {
+      margin-top: 10px;
 
-    .all-card {
-      .data {
-        text-align: center;
+      .all-card {
+        .data {
+          text-align: center;
 
-        &>.img {
-          background-color: #e9f2ff;
-          width: 50%;
-          /* 设置高度为宽度 */
-          padding-top: 50%;
-          margin: auto;
-          border-radius: 10px;
-        }
+          &>.img {
+            background-color: #e9f2ff;
+            width: 50%;
+            /* 设置高度为宽度 */
+            padding-top: 50%;
+            margin: auto;
+            border-radius: 10px;
+          }
 
-        &>.value {
-          font-size: 16px;
-          margin-top: 5px;
+          &>.value {
+            font-size: 16px;
+            margin-top: 5px;
+          }
         }
       }
+
+      .today-order,
+      .total-income {
+        height: 100%;
+        display: flex;
+        justify-content: center;
+        align-items: center;
+        text-align: center;
+      }
     }
 
-    .today-order,
-    .total-income {
-      height: 100%;
-      display: flex;
-      justify-content: center;
-      align-items: center;
-      text-align: center;
+    &>.bottom {
+      margin-top: 10px;
+
+      &>.rank {
+        .top {
+          display: flex;
+          justify-content: space-between;
+
+          .select-day {
+            font-size: 16px;
+            margin-top: 5px;
+          }
+        }
+      }
     }
+
   }
 }
 </style>