95 lines
1.5 KiB
Vue
95 lines
1.5 KiB
Vue
<template>
|
|
<Card :shadow="shadow" class="info-card-wrapper" :padding="0">
|
|
<div class="content-con">
|
|
<div class="left-area" :style="{background: color, width: leftWidth}">
|
|
<common-icon class="icon" :type="icon" :size="iconSize" color="#fff" />
|
|
</div>
|
|
<div class="right-area" :style="{width: rightWidth}">
|
|
<div>
|
|
<slot></slot>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</Card>
|
|
</template>
|
|
|
|
<script>
|
|
import CommonIcon from '@component/common-icon'
|
|
export default {
|
|
name: 'InforCard',
|
|
components: {
|
|
CommonIcon,
|
|
},
|
|
props: {
|
|
left: {
|
|
type: Number,
|
|
default: 36,
|
|
},
|
|
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" scoped>
|
|
.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>
|