更新代码

src/views/dashboard/PanelGroup.vue

@@ -2,7 +2,7 @@
   <div class="wrapper">
     <div class="header">
       <el-row :gutter="16" class="panel-group">
-        <el-col :xs="12" :sm="12" :lg="6" class="card-panel-col" v-for="item in layoutRow">
+        <el-col :xs="12" :sm="12" :lg="6" class="card-panel-col" v-for="(item, index) in layoutRow" :key="index">
           <div class="content">
             <div class="data-box flow-hidden">
               <div class="data-info fl_l">
@@ -25,6 +25,15 @@
       </el-row>
     </div>
 
+    <div class="chart-content">
+      <line-chart/>
+      <div class="select-time">
+        <el-select v-model="chartTime">
+          <el-option v-for="item in chartSelect" :label="item.label" :key="item.key" :value="item.value"></el-option>
+        </el-select>
+      </div>
+    </div>
+
     <div class="rank-info">
       <el-row :gutter="16" class="panel-group">
         <el-col :xs="12" :sm="12" :lg="6" class="card-panel-col">
@@ -34,6 +43,7 @@
             </template>
           </RankList>
         </el-col>
+
         <el-col :xs="12" :sm="12" :lg="6" class="card-panel-col">
           <RankList title="提现排行榜">
             <template :scope="scope">
@@ -41,9 +51,11 @@
             </template>
           </RankList>
         </el-col>
+
         <el-col :xs="12" :sm="12" :lg="6" class="card-panel-col">
           <RankList title="女神收入榜" :operation="operation" />
         </el-col>
+
         <el-col :xs="12" :sm="12" :lg="6" class="card-panel-col">
           <RankList title="用户邀请榜" :operation="operation" />
         </el-col>
@@ -54,7 +66,14 @@
 
 <script>
 import CountTo from 'vue-count-to';
-import RankList from '@/views/components/rankList'
+import RankList from '@/views/components/rankList';
+import LineChart from '../dashboard/LineChart';
+
+const chartSelect = [
+  { label: '最近一周', key: '1' },
+  { label: '最近一个月', key: '2' },
+  { label: '最近三个月', key: '3' },
+]
 
 const operation = [
   { label: '总', prop: '' },
@@ -66,7 +85,8 @@ const operation = [
 export default  {
   components: {
     CountTo,
-    RankList
+    RankList,
+    LineChart
   },
   data() {
     return {
@@ -93,7 +113,9 @@ export default  {
         money: 8,
         trendDirection: 1,
         trendNum: 8.5
-      }
+      },
+      chartSelect,
+      chartTime: '1'
     }
   },
   created() {
@@ -178,10 +200,24 @@ export default  {
       }
     }
 
+    .chart-content {
+      position: relative;
+      border-radius: 14px;
+      background: #fff;
+      padding: 16px;
+      margin-bottom: 16px;
+      .select-time {
+        position: absolute;
+        right: 16px;
+        top: 16px;
+      }
+    }
+
     .rank-info {
       margin-bottom: 16px;
       .card-panel-col {
         border-radius: 14px;
+        margin-bottom: 16px;
       }
     }
   }