封装了一些组件

src/components/MonitorBrief/monitor-brief.vue

@@ -33,14 +33,13 @@ export default {
 
 <style lang="stylus" scoped>
 .brief-container
-  display flex
-  align-items flex-end
+  display inline-block
   color #fff
   font-size 0.8rem
   .label
     color $cardFontColor
     margin-right 0.5rem
   .count
-    font-size 1.2rem
+    font-size 1.4rem
     font-weight bold
 </style>

src/components/MonitorCard/monitor-card.vue

 <template>
   <div class="card-wrapper">
-    <div class="card-title">收入监控</div>
+    <div class="card-title">
+      <span class="s"/>
+      <span class="m"/>
+      <p>{{title}}</p>
+      <span class="m"/>
+      <span class="s"/>
+    </div>
     <div class="edge left-top"/>
     <div class="edge right-top"/>
     <div class="edge left-bottom"/>
@@ -13,11 +19,18 @@
 
 <script>
 export default {
-  name: 'MonitorCard'
+  name: 'MonitorCard',
+  props: {
+    title: {
+      type: String,
+      default: '标题',
+    },
+  }
 }
 </script>
 
 <style lang="stylus" scoped>
+$edgeWidth = -0.1rem
 .card-wrapper
   background $cardBg
   border $cardBorder
@@ -26,36 +39,51 @@ export default {
   padding 0.5rem 1rem
   position relative
   .card-title
+    display flex
+    align-items center
     color $cardFontColor
     border-bottom $cardBorder
     padding-bottom 0.5rem
     font-size 1.2rem
-    font-weight bold
+    font-weight 460
+    p
+      margin 0 0.5rem
+    span
+      display inline-block
+      background $edgeColor
+      margin 0 0.1rem
+      &.s
+        width 0.2rem
+        height 1rem
+        opacity 0.5
+      &.m
+        width 0.3rem
+        height 1.2rem
   .edge
     position absolute
     width 1rem
     height 1rem
-    border: 0.1rem solid $edgeColor
+    border: 0.12rem solid $edgeColor
     &.left-top
       border-right-color transparent
       border-bottom-color transparent
-      top 0
-      left 0
+      top $edgeWidth
+      left $edgeWidth
     &.right-top
       border-left-color transparent
       border-bottom-color transparent
-      top 0
-      right 0
+      top $edgeWidth
+      right $edgeWidth
     &.left-bottom
       border-right-color transparent
       border-top-color transparent
-      bottom 0
-      left 0
+      bottom $edgeWidth
+      left $edgeWidth
     &.right-bottom
       border-left-color transparent
       border-top-color transparent
-      bottom 0
-      right 0
+      bottom $edgeWidth
+      right $edgeWidth
     &.shadow
       background $edgeColor
       height 24%

src/components/MonitorProgress/index.js

+import MonitorProgress from './monitor-progress'
+export default (Vue) => {
+  Vue.component('m-progress', MonitorProgress)
+}

src/components/MonitorProgress/monitor-progress.vue

+<template>
+  <div class="monitor-progress" :style="style">
+    <div class="progress-container" :style="containerStyle">
+      <div class="progress-bar"/>
+      <div class="progress-bg" :style="bgStyle"/>
+    </div>
+    <b v-if="!hideInfo" class="progress-info">
+      <m-count :value="percent"/>%
+    </b>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'MonitorProgress',
+  props: {
+    percent: {
+      type: Number,
+      default: 0,
+    },
+    color: {
+      type: String | Array,
+      default: '#0176fe',
+    },
+    size: {
+      type: Number,
+      default: 20,
+    },
+    hideInfo: {
+      type: Boolean,
+      default: false,
+    },
+    status: {
+      type: String,
+      default: 'active',
+    }
+  },
+  computed: {
+    style() {
+      if (!this.hideInfo) {
+        return {
+          width: '95%',
+        }
+      }
+      return {
+        width: '100%',
+      }
+    },
+    containerStyle() {
+      return {
+        height: `${Math.round(this.size / 10)}rem`,
+        width: `${this.percent}%`,
+      }
+    },
+    bgStyle() {
+      if ('string' === typeof this.color) {
+        return {
+          background: this.color
+        }
+      } else {
+        return {
+          background: `linear-gradient(90deg, ${this.color[0]}, ${this.color[1]})`
+        }
+      }
+    },
+  }
+}
+</script>
+
+<style lang="stylus" scoped>
+$radius = 2rem
+.monitor-progress
+  padding 0.5rem 0.6rem
+  position relative
+  border-radius $radius
+  background rgba(0,0,0,0.18)
+  box-shadow inset 0 0 0.2rem 0 #000
+  .progress-container
+    width 0
+    position relative
+    border-radius $radius
+    transition width 2s ease
+    div
+      position: absolute
+      top 0
+      left 0
+      width 100%
+      height 100%
+      border-radius $radius
+      &.progress-bar
+        z-index 1
+        opacity 0.2
+        background-image repeating-linear-gradient(45deg, #fff, #fff 0.8rem, transparent 0.8rem, transparent 1.4rem)
+        background-size 10rem
+        animation loading-slide 30s linear infinite running
+  .progress-info
+    display flex
+    align-items center
+    justify-content center
+    width 5%
+    position absolute
+    right -5%
+    top 0
+    color $edgeColor
+    font-size 1.6rem
+    height 100%
+    text-shadow 0 0 0.6rem $edgeColor
+@keyframes loading-slide
+  to
+    background-position 100%
+</style>

src/main.js

@@ -9,6 +9,7 @@ import {Button} from 'view-design'
 import MonitorCard from '@/components/MonitorCard'
 import MonitorCount from '@/components/MonitorCount'
 import MonitorBrief from '@/components/MonitorBrief'
+import MonitorProgress from '@/components/MonitorProgress'
 import 'view-design/dist/styles/iview.css'
 
 Vue.config.productionTip = false
@@ -16,6 +17,7 @@ Vue.prototype.$echarts = echarts
 Vue.use(MonitorCard)
 Vue.use(MonitorCount)
 Vue.use(MonitorBrief)
+Vue.use(MonitorProgress)
 Vue.component('Button', Button)
 
 /* eslint-disable no-new */

src/views/main.vue

 <template>
-<div class="main-container">
-  <div class="box1"></div>
+<div class="main-container" :style="`background-image: url(${require('@/assets/images/bg.jpg')})`">
+  <div class="box1"><m-card></m-card></div>
   <div class="box2">
     <m-card>
       <div style="height: 100%">
@@ -21,7 +21,14 @@
   <div class="box3"><m-card></m-card></div>
   <div class="box4"><m-card></m-card></div>
   <div class="box5"><m-card><Chart></Chart></m-card></div>
-  <div class="box6"><m-card></m-card></div>
+  <div class="box6">
+    <m-card title="收入监控">
+      <div style="text-align: center;">
+        <m-brief style="margin: 0.5rem 0;" label="绩效" :count="3763175" unit="元"/>
+        <m-progress :percent="percent" :color="['#0176fe', '#4aecfd']"/>
+      </div>
+    </m-card>
+  </div>
 </div>
 </template>
 
@@ -32,15 +39,25 @@ export default {
   components: {
     Chart,
   },
+  data() {
+    return {
+      percent: 0,
+    }
+  },
+  mounted() {
+    setTimeout(() => {
+      this.percent = 80
+    }, 100)
+  }
 }
 </script>
 
 <style lang="stylus" scoped>
 .main-container
-  background #0b131e
   width 100%
   height 100%
   display grid
+  background-size cover
   grid-template-areas \
     'box1 box1 box1'\
     'box2 box3 box4'\
@@ -51,7 +68,6 @@ export default {
   grid-gap 1rem
   padding 1rem
   .box1
-    background red
     grid-area box1
   .box2
     grid-area box2