
<template>
    <ul class="user_Overview flex onlineBorder ">
        <li class="user_Overview-item position">
            <div class="user_Overview_nums allnum ">
                <p class="son">地块数量</p>
            </div>
        </li>
        <li class="user_Overview-item position">
            <div class="user_Overview_nums online">
                <p class="son">地块总面积（m2）</p>
            </div>
        </li>
        <li class="user_Overview-item position">
            <div class="user_Overview_nums online">
                <p class="son">种植种类</p>
            </div>
        </li>
        <li class="user_Overview-item position">
            <div class="user_Overview_nums online">
                <p class="son">本年产量（千克）</p>
            </div>
        </li>
    </ul>
</template>

<script>
export default {
    data() {
        return {
            options: {},
            timer: null,
            pageflag: true,
        };
    },
    filters: {
        numsFilter(msg) {
            return msg || 0;
        },
    },
    mounted() {
    },
    methods: {
        //轮询
        switper() {
            if (this.timer) {
                return
            }
            let looper = (a) => {
                this.getData()
            };
            this.timer = setInterval(looper, this.$store.state.setting.echartsAutoTime);
        },
    },
};
</script>
<style lang='scss' scoped>
ul {
    width: calc(100% - 20px);
    height: 100%;
    margin: 10px 20px 10px 5px;
}

.onlineBorder {
    background-image: url("../../assets/img/left_top_outline.png");
    background-repeat: no-repeat;
    background-size: 100% 100%;
}

.user_Overview {
    li {
        flex: 1;
        //隐藏点
        list-style-type: none;

        p {
            align-self: center;
            height: 100%;
            font-size: 16px;
            background-size: cover;
            color: rgb(50, 195, 205);
        }

        //决定定位
        .position {
            position: relative;
        }

        .son {
            position: absolute;
            top: -45px;
            left: 70px;
        }

        .user_Overview_nums {
            width: 315px;
            height: 72px;
            text-align: center;
            line-height: 100px;
            font-size: 22px;
            margin: 40px auto 40px; //高 间距
            background-size: cover;
            background-position: center center;
            position: relative;

            &::before {
                content: '';
                position: absolute;
                width: 100%;
                height: 100%;
                top: 0;
                left: 0;
            }

            &.bgdonghua::before {
                animation: rotating 14s linear infinite;
            }
        }

        .allnum {
            &::before {
                background-image: url("../../assets/img/left_top_lan.png");
                background-repeat: no-repeat;

            }
        }

        .online {
            &::before {
                background-image: url("../../assets/img/left_top_lv.png");
                background-repeat: no-repeat;
            }
        }
    }
}</style>