更新

src/assets/css/variables.styl

@@ -23,7 +23,7 @@ $selected()
   box-sizing border-box
   border 0.1rem solid $edgeColor
   background-color rgba(0,242,255,0.1)
-$fontColor = #2c3e50
+$fontColor = #5587b7
 $edgeColor = #00f2ff
 $cardBg = rgba(0, 242, 255, 0.1)
 

src/store/state.js

 export default {
   showLoading: false,
   curDate: null,
+  commandList: [
+    {
+      title:'指挥长',
+      name:'周少华',
+      img:'person.png',
+    },
+    {
+      title:'值班长',
+      name:'夏毅',
+      img:'person.png',
+    },
+    {
+      title:'值班长',
+      name:'瞿越方',
+      img:'person.png',
+    },
+  ],
+  operateList: [
+    {
+      title:'小区',
+      img:'community.png',
+      unit: '个',
+      num:'2829',
+    },
+    {
+      title:'业委会',
+      img:'group.png',
+      unit: '个',
+      num:'1749',
+    },
+    {
+      title:'物业企业',
+      img:'property.png',
+      unit: '家',
+      num:'498',
+    },
+    {
+      title:'管理面积',
+      img:'map.png',
+      unit: 'k㎡',
+      num:'173377718',
+    },
+  ]
 }

src/views/components/emergencyCommand.vue

 <template>
   <div class="people">
-    <div class="person" v-for="(i,k) in datas" :key="k">
-      <div class="p-left">
-       <img :src="require('@/assets/images/icon1.png')" alt="">
-       <!-- <img :src="require(`${i.img}`)" alt=""> -->
-      </div>
-      <div class="p-right">
-        <p>{{i.title}}</p>
-        <span>{{i.name}}</span>
+    <div class="person" v-for="(data,i) in $store.state.commandList" :key="i">
+      <img :src="require(`@/assets/images/${data.img}`)" />
+      <div>
+        <p>{{data.title}}</p>
+        <span>{{data.name}}</span>
       </div>
     </div>
   </div>
@@ -15,41 +12,7 @@
 
 <script>
 export default {
-  name:'emergencyCommand',
-  props:{
-
-  },
-  data(){
-    return{
-      datas:[
-        {
-          title:'指挥长',
-          name:'周少华',
-          img:'@/assets/images/icon1.png',
-        },
-        {
-          title:'值班长',
-          name:'夏毅',
-          img:'',
-        },
-        {
-          title:'值班长',
-          name:'瞿越方',
-          img:'',
-        },
-      ]
-
-
-    }
-  },
-  mounted() {
-
-  },
-  methods :{
-
-  },
-
-
+  name: 'EmergencyCommand',
 }
 </script>
 
@@ -58,34 +21,18 @@ export default {
   width 100%
   height 100%
   display flex
-  align-items center
-.person
+  .person
     flex 1
     display flex
-  background-size cover
-  background-position center
-  text-align center
-  // border 1px solid #ccc
-  height 100%
-  // margin .3125rem /* 5/16 */
-.p-left
-  display flex
-  align-items: center
-  // background-color #ccc
-img
-  width 3.125rem /* 50/16 */
-  height 3.125rem /* 50/16 */
-  align-items: center
-  margin 5px
-.p-right
-  // background-color #ccc
-  display flex
-  flex-direction column
-  justify-content center
-  text-align left
+    align-items center
+    >img
+      width 2.5rem
+      height @width
+      margin 0.5rem
+    >div
       p
-    font-size .8rem
-    color skyblue
+        font-size 0.8rem
+        color $fontColor
       span
-    font-size 1.25rem
+        font-size 1rem
 </style>

src/views/components/operation.vue

 <template>
   <div class="operation">
-    <div class="o-card" v-for="(i,k) in datas" :key="k">
-      <div class="p-left">
-       <img :src="require('@/assets/images/icon4.png')" alt="">
-      </div>
-      <div class="p-right">
-        <p>{{i.title}}</p>
-        <span>{{i.num}}</span>
-      </div>
-    </div>
+    <m-brief 
+      @click.native="$emit('select', data)"
+      class="o-card"
+      v-for="data in $store.state.operateList"
+      :key="data.title"
+      :label="data.title"
+      :count="+data.num"
+      size="1.2rem"
+      :unit="data.unit"
+      :icon="require(`@/assets/images/${data.img}`)"/>
   </div>
 </template>
 
 <script>
 export default {
-  name:'operation',
-  props:{
-
-  },
-  data(){
-    return {
-      datas: [
-        {
-          title:'小区',
-          img:'',
-          num:'2829',
-        },
-        {
-          title:'业委会',
-          img:'',
-          num:'1749',
-        },
-        {
-          title:'物业企业',
-          img:'',
-          num:'498',
-        },
-        {
-          title:'管理面积',
-          img:'',
-          num:'173377718',
-        },
-      ]
-    }
-  },
-  methods:{
-
-  }
-
+  name: 'Operation',
 }
 </script>
 
 <style lang="stylus" scoped>
 .operation
   display flex
-  flex-wrap:wrap
+  flex-wrap wrap
   height 100%
   width 100%
-.o-card
-  flex 0 0 50%
-  display flex
-.p-left
-  display flex
-  align-items: center
-img
-  width 3.125rem /* 50/16 */
-  height 3.125rem /* 50/16 */
-  align-items: center
-  margin 5px
-.p-right
-  display flex
-  flex-direction column
-  justify-content center
-  text-align left
-  p
-    font-size .8rem
-    color skyblue
-  span
-    font-size 1.25rem
+  .o-card
+    width 50%
 </style>
 

src/views/main.vue

@@ -15,10 +15,10 @@
   >
     <m-title area="title" color="#fff" :bgImg="require('@/assets/images/title-bg.png')">智慧物业管理微平台</m-title>
     <m-card area="box1" title="物业应急指挥体系" mode="4" :icon="require('@/assets/images/icon1.png')">
-      <emergencyCommand></emergencyCommand>
+      <EmergencyCommand />
     </m-card>
     <m-card area="box2" title="运行体征" mode="4" :icon="require('@/assets/images/icon2.png')">
-    <operation></operation>
+      <Operation @select="handleSelect" />
     </m-card>
     <m-card area="box3" title="投诉保修" mode="4" :icon="require('@/assets/images/icon3.png')">
     </m-card>
@@ -32,13 +32,18 @@
 </template>
 
 <script>
-import emergencyCommand from '@/views/components/emergencyCommand.vue'
-import operation from '@/views/components/operation.vue'
+import EmergencyCommand from '@/views/components/emergencyCommand.vue'
+import Operation from '@/views/components/operation.vue'
 export default {
   name: 'Main',
-  components:{
-    emergencyCommand,
-    operation
+  components: {
+    EmergencyCommand,
+    Operation,
+  },
+  methods: {
+    handleSelect(data) {
+      console.log(data)
+    }
   }
 }
 </script>