首页修改

package.json

@@ -44,6 +44,7 @@
     "vue": "2.6.10",
     "vue-amap": "^0.5.10",
     "vue-awesome-swiper": "^4.1.1",
+    "vue-count-to": "^1.0.13",
     "vue-lunar-calendar-pro": "^1.0.14",
     "vue-qr": "^2.2.1",
     "vue-quill-editor": "^3.0.6",

src/components/statistic/index.vue

@@ -1,14 +1,10 @@
 <template>
-  <el-row :gutter="cols" class="statistic">
-    <div v-for="(item, index) in tags" :key="index">
-      <el-col :span="span ? span : (index + 1) % col === 0 ? colSpan : colSpan - 1">
-        <statistic-content :item="item"></statistic-content>
-      </el-col>
-      <el-col :key="index" :span="1" v-if="(index + 1) % col !== 0 && (index + 1) < tags.length">
-        <el-divider direction="vertical"></el-divider>
-      </el-col>
+  <div class="statistic">
+    <div v-for="(item, index) in tags" :style="{flex: (100 / col) + '%'}" class="item" :key="index">
+      <statistic-content :item="item"/>
+      <el-divider class="divider" v-if="(index + 1) % col !== 0 && (index + 1) < tags.length" direction="vertical"></el-divider>
     </div>
-  </el-row>
+  </div>
 </template>
 <script>
 export default {
@@ -43,7 +39,7 @@ export default {
   },
   computed: {
     colSpan() {
-      return this.cols / this.col
+      return 24 / this.col
     },
   },
   data() {
@@ -65,40 +61,72 @@ export default {
 }
 </script>
 <style lang="less" scoped>
-  .statistic{
-    padding: 20px 0;
-    text-align: center;
+.statistic{
+  display: flex;
+  text-align: center;
+  justify-content: space-between;
+  align-items: center;
+  flex-wrap: wrap;
+  .item{
+    display: flex;
+    position: relative;
+  }
+  /deep/ .statistic-content{
     width: 100%;
-    margin: auto!important;
-    /deep/ .el-icon-edit{
-      cursor: pointer;
-      color: #14928A;
-      font-size: 20px;
-    }
-    /deep/ .el-col {
-      display: flex;
-      align-items: center;
-      min-height: 60px;
-      align-items: center;
-      justify-content: center;
-      align-items: center;
-      flex-direction: column;
-    }
-    /deep/ .el-col-1{
-      font-size: 60px;
-    }
-    /deep/ .statistic-content{
-      >span{
-        display: block;
-        line-height: 1.8;
-        color: rgba(0, 0, 0, .85);
-        font-size: 24px;
-        &:first-child{
-          font-size: 14px;
-          font-weight: normal;
-          color: rgba(0, 0, 0, .45);
-        }
+    >span{
+      display: block;
+      line-height: 1.8;
+      color: rgba(0, 0, 0, .85);
+      font-size: 24px;
+      &:first-child{
+        font-size: 14px;
+        font-weight: normal;
+        color: rgba(0, 0, 0, .45);
       }
     }
   }
+  .divider{
+    width: 1px;
+    font-size: 60px;
+    margin: 0;
+    position: absolute;
+    right: 0;
+  }
+}
+  // .statistic{
+  //   padding: 20px 0;
+  //   text-align: center;
+  //   width: 100%;
+  //   margin: auto!important;
+  //   /deep/ .el-icon-edit{
+  //     cursor: pointer;
+  //     color: #14928A;
+  //     font-size: 20px;
+  //   }
+  //   /deep/ .el-col {
+  //     display: flex;
+  //     align-items: center;
+  //     min-height: 60px;
+  //     align-items: center;
+  //     justify-content: center;
+  //     align-items: center;
+  //     flex-direction: column;
+  //   }
+  //   /deep/ .el-col-1{
+  //     font-size: 60px;
+  //   }
+  //   /deep/ .statistic-content{
+  //     >span{
+  //       display: block;
+  //       line-height: 1.8;
+  //       color: rgba(0, 0, 0, .85);
+  //       font-size: 24px;
+  //       &:first-child{
+  //         font-size: 14px;
+  //         font-weight: normal;
+  //         color: rgba(0, 0, 0, .45);
+  //       }
+  //     }
+  //   }
+  // }
 </style>

src/views/main/baseinfo/business.vue

@@ -0,0 +1,64 @@
+<template>
+  <el-card header="业务数据">
+    <statistic class="statistic" :cols="0">
+      <statistic-item>
+        <span>激活率</span>
+        <span>
+          <count-to :endVal="56"/>%
+        </span>
+      </statistic-item>
+      <statistic-item>
+        <span>作业布置率</span>
+        <span>
+          <count-to :endVal="89"/>%
+        </span>
+      </statistic-item>
+      <statistic-item>
+        <span>作业提交率</span>
+        <span>
+          <count-to :endVal="67"/>%
+        </span>
+      </statistic-item>
+      <statistic-item>
+        <span>作业点评率</span>
+        <span>
+          <count-to :endVal="98"/>%
+        </span>
+      </statistic-item>
+    </statistic>
+    <ve-histogram style="width: 100%;" :data="chartData"></ve-histogram>
+  </el-card>
+</template>
+<script>
+import countTo from 'vue-count-to'
+import veHistogram from 'v-charts/lib/histogram.common'
+export default {
+  components: {
+    've-histogram': veHistogram,
+    'count-to': countTo
+  },
+  data () {
+    let data = []
+    return {
+      chartData: {
+        columns: ['日期', '访问用户', '下单用户', '下单率'],
+        rows: [
+          { '日期': '1/1', '访问用户': 1393, '下单用户': 1093, '下单率': 0.32 },
+          { '日期': '1/2', '访问用户': 3530, '下单用户': 3230, '下单率': 0.26 },
+          { '日期': '1/3', '访问用户': 2923, '下单用户': 2623, '下单率': 0.76 },
+          { '日期': '1/4', '访问用户': 1723, '下单用户': 1423, '下单率': 0.49 },
+          { '日期': '1/5', '访问用户': 3792, '下单用户': 3492, '下单率': 0.323 },
+          { '日期': '1/6', '访问用户': 4593, '下单用户': 4293, '下单率': 0.78 }
+        ]
+      }
+    }
+  },
+}
+</script>
+<style lang="less" scoped>
+  .statistic{
+    /deep/ .statistic-content{
+      cursor: pointer;
+    }
+  }
+</style>

src/views/main/baseinfo/index.vue

@@ -1,45 +1,37 @@
 <template>
-  <div>
-    <el-row>
-      <el-col>
-        <el-card header="运营数据">
-          <statistic>
-            <statistic-item>
-              <span>合作单位</span>
-              <span>56</span>
-            </statistic-item>
-          </statistic>
-          <ve-histogram :data="chartData"></ve-histogram>
-        </el-card>
+  <div class="container">
+    <el-row :gutter="20">
+      <el-col :span="7">
+        <operate/>
+      </el-col>
+      <el-col :span="7">
+        <business/>
+      </el-col>
+      <el-col :span="10">
+        <management/>
       </el-col>
     </el-row>
   </div>
 </template>
 <script>
-import veHistogram from 'v-charts/lib/line.common'
-
+import operate from './operate'
+import business from './business'
+import management from './management'
 export default {
   components: {
-    've-histogram': veHistogram
+    operate,
+    business,
+    management
   },
   data () {
-    let data = []
     return {
-      chartData: {
-        columns: ['日期', '访问用户', '下单用户', '下单率'],
-        rows: [
-          { '日期': '1/1', '访问用户': 1393, '下单用户': 1093, '下单率': 0.32 },
-          { '日期': '1/2', '访问用户': 3530, '下单用户': 3230, '下单率': 0.26 },
-          { '日期': '1/3', '访问用户': 2923, '下单用户': 2623, '下单率': 0.76 },
-          { '日期': '1/4', '访问用户': 1723, '下单用户': 1423, '下单率': 0.49 },
-          { '日期': '1/5', '访问用户': 3792, '下单用户': 3492, '下单率': 0.323 },
-          { '日期': '1/6', '访问用户': 4593, '下单用户': 4293, '下单率': 0.78 }
-        ]
-      }
+
     }
-  }
+  },
 }
 </script>
 <style lang="less" scoped>
-
+  .container{
+    overflow: hidden;
+  }
 </style>

src/views/main/baseinfo/management.vue

@@ -0,0 +1,70 @@
+<template>
+  <el-card header="经营数据">
+    <statistic class="statistic" :cols="0" :col="5">
+      <statistic-item>
+        <span>应收金额</span>
+        <span>
+          <count-to :endVal="5604"/>
+        </span>
+      </statistic-item>
+      <statistic-item>
+        <span>预收金额</span>
+        <span>
+          <count-to :endVal="6256"/>
+        </span>
+      </statistic-item>
+      <statistic-item>
+        <span>预付金额</span>
+        <span>
+          <count-to :endVal="6203"/>
+        </span>
+      </statistic-item>
+      <statistic-item>
+        <span>应付金额</span>
+        <span>
+          <count-to :endVal="21642"/>
+        </span>
+      </statistic-item>
+      <statistic-item>
+        <span>营收金额</span>
+        <span>
+          <count-to :endVal="41642"/>
+        </span>
+      </statistic-item>
+    </statistic>
+    <ve-line :data="chartData"/>
+  </el-card>
+</template>
+<script>
+import countTo from 'vue-count-to'
+import veLine from 'v-charts/lib/line.common'
+export default {
+  components: {
+    've-line': veLine,
+    'count-to': countTo
+  },
+  data () {
+    let data = []
+    return {
+      chartData: {
+        columns: ['日期', '访问用户', '下单用户', '下单率'],
+        rows: [
+          { '日期': '1/1', '访问用户': 1393, '下单用户': 1093, '下单率': 0.32 },
+          { '日期': '1/2', '访问用户': 3530, '下单用户': 3230, '下单率': 0.26 },
+          { '日期': '1/3', '访问用户': 2923, '下单用户': 2623, '下单率': 0.76 },
+          { '日期': '1/4', '访问用户': 1723, '下单用户': 1423, '下单率': 0.49 },
+          { '日期': '1/5', '访问用户': 3792, '下单用户': 3492, '下单率': 0.323 },
+          { '日期': '1/6', '访问用户': 4593, '下单用户': 4293, '下单率': 0.78 }
+        ]
+      }
+    }
+  },
+}
+</script>
+<style lang="less" scoped>
+  .statistic{
+    /deep/ .statistic-content{
+      cursor: pointer;
+    }
+  }
+</style>

src/views/main/baseinfo/operate.vue

@@ -0,0 +1,64 @@
+<template>
+  <el-card header="运营数据">
+    <statistic class="statistic" :cols="0">
+      <statistic-item>
+        <span>合作单位</span>
+        <span>
+          <count-to :endVal="56"/>
+        </span>
+      </statistic-item>
+      <statistic-item>
+        <span>乐团数量</span>
+        <span>
+          <count-to :endVal="62"/>
+        </span>
+      </statistic-item>
+      <statistic-item>
+        <span>乐团学员</span>
+        <span>
+          <count-to :endVal="6203"/>
+        </span>
+      </statistic-item>
+      <statistic-item>
+        <span>其它学员</span>
+        <span>
+          <count-to :endVal="2162"/>
+        </span>
+      </statistic-item>
+    </statistic>
+    <ve-histogram :data="chartData"></ve-histogram>
+  </el-card>
+</template>
+<script>
+import countTo from 'vue-count-to'
+import veHistogram from 'v-charts/lib/histogram.common'
+export default {
+  components: {
+    've-histogram': veHistogram,
+    'count-to': countTo
+  },
+  data () {
+    let data = []
+    return {
+      chartData: {
+        columns: ['日期', '访问用户', '下单用户', '下单率'],
+        rows: [
+          { '日期': '1/1', '访问用户': 1393, '下单用户': 1093, '下单率': 0.32 },
+          { '日期': '1/2', '访问用户': 3530, '下单用户': 3230, '下单率': 0.26 },
+          { '日期': '1/3', '访问用户': 2923, '下单用户': 2623, '下单率': 0.76 },
+          { '日期': '1/4', '访问用户': 1723, '下单用户': 1423, '下单率': 0.49 },
+          { '日期': '1/5', '访问用户': 3792, '下单用户': 3492, '下单率': 0.323 },
+          { '日期': '1/6', '访问用户': 4593, '下单用户': 4293, '下单率': 0.78 }
+        ]
+      }
+    }
+  },
+}
+</script>
+<style lang="less" scoped>
+  .statistic{
+    /deep/ .statistic-content{
+      cursor: pointer;
+    }
+  }
+</style>