<template>
    <widget-card :bodyStyle="bodyStyle">
        <i class="fa-fw fas fa-user fa-3x" style="color: #fff;"></i>
        <div class="info">
            <div class="num">{{ value||0 }}</div>
            <div class="text">用户总数量</div>
        </div>
    </widget-card>
</template>
<script>
import WidgetCard from "./WidgetCard";
import { mapState } from "vuex";

export default {
    props: ["value"],
    data() {
        return {
            bodyStyle: {
                display: "flex",
                alignItems: "center",
                backgroundColor: "#E4B100"
            },
            number: 0
        };
    },
    created() {
    },
    components: {
        WidgetCard
    },
    computed: {
        ...mapState(["userInfo"])
    }
};
</script>
<style lang="less" scoped>
.info {
    flex-grow: 1;
    text-align: right;
    .text {
        color: #fff;
        font-size: 14px;
    }
    .num {
        font-size: 44px;
        color: #fff;
        line-height: 62px;
    }
}
</style>
