feat(views/dashboard/panelgroup): 首页面板组件

package.json

@@ -35,6 +35,7 @@
     "vue-count-to": "^1.0.13",
     "vue-cropper": "1.1.1",
     "vue-router": "4.4.0",
+    "vue3-count-to": "^1.1.2",
     "vuedraggable": "4.1.0"
   },
   "devDependencies": {

src/layout/components/AppMain.vue

@@ -40,6 +40,7 @@ function addIframe() {
   width: 100%;
   position: relative;
   overflow: hidden;
+  background: rgb(240, 242, 245);
 }
 
 .fixed-header + .app-main {

src/layout/components/Navbar.vue

@@ -229,7 +229,8 @@ function toggleTheme() {
               cursor: pointer;
               position: absolute;
               right: -20px;
-              top: 25px;
+              top: 50%;
+              transform: translate(-50%, 0);
               font-size: 12px;
             }
           }

src/views/dashboard/PanelGroup.vue

+<template>
+  <el-row :gutter="40"
+    class="panel-group">
+    <el-col :xs="12"
+      :sm="12"
+      :lg="6"
+      class="card-panel-col">
+      <div class="card-panel"
+        @click="handleSetLineChartData('newVisitis')">
+        <div class="card-panel-icon-wrapper icon-people">
+          <svg-icon icon-class="peoples"
+            class-name="card-panel-icon" />
+        </div>
+        <div class="card-panel-description">
+          <div class="card-panel-text">
+            访客
+          </div>
+          <count-to :start-val="0"
+            :end-val="102400"
+            :duration="2600"
+            class="card-panel-num" />
+        </div>
+      </div>
+    </el-col>
+    <el-col :xs="12"
+      :sm="12"
+      :lg="6"
+      class="card-panel-col">
+      <div class="card-panel"
+        @click="handleSetLineChartData('messages')">
+        <div class="card-panel-icon-wrapper icon-message">
+          <svg-icon icon-class="message"
+            class-name="card-panel-icon" />
+        </div>
+        <div class="card-panel-description">
+          <div class="card-panel-text">
+            消息
+          </div>
+          <count-to :start-val="0"
+            :end-val="81212"
+            :duration="3000"
+            class="card-panel-num" />
+        </div>
+      </div>
+    </el-col>
+    <el-col :xs="12"
+      :sm="12"
+      :lg="6"
+      class="card-panel-col">
+      <div class="card-panel"
+        @click="handleSetLineChartData('purchases')">
+        <div class="card-panel-icon-wrapper icon-money">
+          <svg-icon icon-class="money"
+            class-name="card-panel-icon" />
+        </div>
+        <div class="card-panel-description">
+          <div class="card-panel-text">
+            金额
+          </div>
+          <count-to :start-val="0"
+            :end-val="9280"
+            :duration="3200"
+            class="card-panel-num" />
+        </div>
+      </div>
+    </el-col>
+    <el-col :xs="12"
+      :sm="12"
+      :lg="6"
+      class="card-panel-col">
+      <div class="card-panel"
+        @click="handleSetLineChartData('shoppings')">
+        <div class="card-panel-icon-wrapper icon-shopping">
+          <svg-icon icon-class="shopping"
+            class-name="card-panel-icon" />
+        </div>
+        <div class="card-panel-description">
+          <div class="card-panel-text">
+            订单
+          </div>
+          <count-to :start-val="0"
+            :end-val="13600"
+            :duration="3600"
+            class="card-panel-num" />
+        </div>
+      </div>
+    </el-col>
+  </el-row>
+</template>
+
+<script setup>
+import { CountTo } from 'vue3-count-to'
+
+const handleSetLineChartData = () => {}
+</script>
+
+<style lang="scss"
+  scoped>
+  .panel-group {
+    margin-top: 18px;
+
+    .card-panel-col {
+      margin-bottom: 32px;
+    }
+
+    .card-panel {
+      height: 108px;
+      cursor: pointer;
+      font-size: 12px;
+      position: relative;
+      overflow: hidden;
+      color: #666;
+      background: #fff;
+      box-shadow: 4px 4px 40px rgba(0, 0, 0, .05);
+      border-color: rgba(0, 0, 0, .05);
+
+      &:hover {
+        .card-panel-icon-wrapper {
+          color: #fff;
+        }
+
+        .icon-people {
+          background: #40c9c6;
+        }
+
+        .icon-message {
+          background: #36a3f7;
+        }
+
+        .icon-money {
+          background: #f4516c;
+        }
+
+        .icon-shopping {
+          background: #34bfa3
+        }
+      }
+
+      .icon-people {
+        color: #40c9c6;
+      }
+
+      .icon-message {
+        color: #36a3f7;
+      }
+
+      .icon-money {
+        color: #f4516c;
+      }
+
+      .icon-shopping {
+        color: #34bfa3
+      }
+
+      .card-panel-icon-wrapper {
+        float: left;
+        margin: 14px 0 0 14px;
+        padding: 16px;
+        transition: all 0.38s ease-out;
+        border-radius: 6px;
+      }
+
+      .card-panel-icon {
+        float: left;
+        font-size: 48px;
+      }
+
+      .card-panel-description {
+        float: right;
+        font-weight: bold;
+        margin: 26px;
+        margin-left: 0px;
+
+        .card-panel-text {
+          line-height: 18px;
+          color: rgba(0, 0, 0, 0.45);
+          font-size: 16px;
+          margin-bottom: 12px;
+        }
+
+        .card-panel-num {
+          font-size: 20px;
+        }
+      }
+    }
+  }
+
+  @media (max-width:550px) {
+    .card-panel-description {
+      display: none;
+    }
+
+    .card-panel-icon-wrapper {
+      float: none !important;
+      width: 100%;
+      height: 100%;
+      margin: 0 !important;
+
+      .svg-icon {
+        display: block;
+        margin: 14px auto !important;
+        float: none !important;
+      }
+    }
+  }
+</style>

src/views/index.vue

 <template>
   <div class="dashboard-editor-container">
-    <!-- <panel-group @handleSetLineChartData="handleSetLineChartData" /> -->
+    <panel-group />
     <common-menu></common-menu>
   </div>
 </template>
 
 <script setup>
-
+import PanelGroup from './dashboard/PanelGroup.vue'
 </script>
 
-<style lang="scss" scoped>
-.dashboard-editor-container {
+<style lang="scss"
+  scoped>
+  .dashboard-editor-container {
     padding: 32px;
-  background-color: rgb(240, 242, 245);
-  position: relative;
-}
+  }
 </style>