物业应急指挥体系和运行体征的静态

src/main.js

@@ -5,7 +5,7 @@ import Vue from 'vue'
 import App from './App'
 import router from './router'
 import store from './store'
-import {Row, Col, Select, Option, DatePicker} from 'view-design'
+import {Row, Col, Select, Option, DatePicker,Icon} from 'view-design'
 import ajax from '@/server/ajax'
 import api from '@/server/api'
 import common from '@/util/common'
@@ -26,6 +26,7 @@ Vue.component('i-col', Col)
 Vue.component('Select', Select)
 Vue.component('Option', Option)
 Vue.component('DatePicker', DatePicker)
+Vue.component('a-icon', Icon)
 /* eslint-disable no-new */
 new Vue({
   el: '#app',

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>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  name:'emergencyCommand',
+  props:{
+
+  },
+  data(){
+    return{
+      datas:[
+        {
+          title:'指挥长',
+          name:'周少华',
+          img:'@/assets/images/icon1.png',
+        },
+        {
+          title:'值班长',
+          name:'夏毅',
+          img:'',
+        },
+        {
+          title:'值班长',
+          name:'瞿越方',
+          img:'',
+        },
+      ]
+
+
+    }
+  },
+  mounted() {
+
+  },
+  methods :{
+
+  },
+
+
+}
+</script>
+
+<style lang="stylus" scoped>
+.people
+  width 100%
+  height 100%
+  display flex
+  align-items center
+.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
+  p
+    font-size .8rem
+    color skyblue
+  span
+    font-size 1.25rem
+</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>
+  </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:{
+
+  }
+
+}
+</script>
+
+<style lang="stylus" scoped>
+.operation
+  display flex
+  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
+</style>
+

src/views/main.vue

@@ -15,8 +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>
     </m-card>
     <m-card area="box2" title="运行体征" mode="4" :icon="require('@/assets/images/icon2.png')">
+    <operation></operation>
     </m-card>
     <m-card area="box3" title="投诉保修" mode="4" :icon="require('@/assets/images/icon3.png')">
     </m-card>
@@ -30,7 +32,13 @@
 </template>
 
 <script>
+import emergencyCommand from '@/views/components/emergencyCommand.vue'
+import operation from '@/views/components/operation.vue'
 export default {
   name: 'Main',
+  components:{
+    emergencyCommand,
+    operation
+  }
 }
 </script>