3.8.1

src/components/info-card/index.js

@@ -0,0 +1,2 @@
+import InforCard from './infor-card.vue'
+export default InforCard

src/components/info-card/infor-card.vue

@@ -0,0 +1,94 @@
+<template>
+  <Card :shadow="shadow" class="info-card-wrapper" :padding="0">
+    <div class="content-con">
+    <div class="left-area" :style="{width: leftWidth}">
+        <common-icon class="icon" :type="icon" :size="iconSize" :color="color"/>
+      </div>
+      <div class="right-area" :style="{width: rightWidth}">
+        <div>
+          <slot></slot>
+        </div>
+      </div>
+    </div>
+  </Card>
+</template>
+
+<script>
+import CommonIcon from '_c/common-icon'
+export default {
+  name: 'InforCard',
+  components: {
+    CommonIcon
+  },
+  props: {
+    left: {
+      type: Number,
+      default: 45
+    },
+    color: {
+      type: String,
+      default: '#2d8cf0'
+    },
+    icon: {
+      type: String,
+      default: ''
+    },
+    iconSize: {
+      type: Number,
+      default: 20
+    },
+    shadow: {
+      type: Boolean,
+      default: false
+    }
+  },
+  computed: {
+    leftWidth () {
+      return `${this.left}%`
+    },
+    rightWidth () {
+      return `${100 - this.left}%`
+    }
+  }
+}
+</script>
+
+<style lang="less">
+.common{
+  float: left;
+  height: 100%;
+  display: table;
+  text-align: center;
+}
+.size{
+  width: 100%;
+  height: 100%;
+}
+.middle-center{
+  display: table-cell;
+  vertical-align: middle;
+}
+.info-card-wrapper{
+  .size;
+  overflow: hidden;
+  .ivu-card-body{
+    .size;
+  }
+  .content-con{
+    .size;
+    position: relative;
+    .left-area{
+      .common;
+      & > .icon{
+        .middle-center;
+      }
+    }
+    .right-area{
+      .common;
+      & > div{
+        .middle-center;
+      }
+    }
+  }
+}
+</style>