<template>
    <div class="largeScreenOnlineBox">
        <div class="largeScreenOnlineBox2">
            <div class="largeScreenOnlineCount ">
                实时在线人数
            </div>
            <img class="largeScreenOnlineCountBackImg" src="../../assets/images/upBorder.png" alt="error">
            <div class="boxLevelFourRightc boxLevelFourRightFstc">{{ realOnlineNum }} </div>
        </div>
        <div class="largeScreenOnlineBox2">
            <div class="largeScreenOnlineCount ">
                当前统计在线人数
            </div>
            <img class="bottomborderc" src="../../assets/images/bottomBorder.png" alt="error">
            <div class="boxLevelFourRightc boxLevelFourRightSecc">{{ computeOnlineNum }}</div>
        </div>
    </div>
</template>

<script>
export default {
    name: 'onlineCount',
    data() {
        return {
            realOnlineNum: 0,
            computeOnlineNum: 0
        }
    },

}
</script>

<style scoped>
.largeScreenOnlineBox {
    display: flex;
    height: 15rem;
    width: 15rem;
    flex-direction: column;
    /* justify-content: space-between; */

}

.largeScreenOnlineBox2 {
    width: 100%;
    position: relative;
}

.largeScreenOnlineCount {
    color: #ffffff;
    font-size: 1rem;
    padding-left: 2.5rem;
    padding-top: 1rem;
}

.largeScreenOnlineCountBackImg {
    position: absolute;
    bottom: 14rem;
    left: 2rem;
    opacity: .7;
}
/* 设置boxLevelFourRight的宽度为90%，边框半径为.6rem，字体大小为3rem，边框为透明度为0.7的白色，左边距为5%，上边距为2%，高度为7rem，z-index为1，颜色为白色，文本居中，相对定位 */
.boxLevelFourRightc {
    width: 90%;
    border-radius: .6rem;
    font-size: 3rem;
    /* border: .1rem solid rgba(255, 255, 255, .7); */
    margin-left: 5%;
    margin-top: 2%;
    height: 7rem;
    z-index: 1;
    color: #fff;
    text-align: center;
    padding-top: 1.5rem;
    position: relative;
    letter-spacing: 0.1rem;
    /* 文字间距 */
    font-family: DIN-Bold;
    /* 字体 */
    /* border-image: linear-gradient(to right, transparent 0, rgb(0, 0, 0) 5px, transparent 100%) 1; */
    /* background-color: rgb(150, 155, 17); */
}
.boxLevelFourRightFstc {
    color: RGBA(103, 239, 255, 1);
}

.boxLevelFourRightSecc {
    color: RGBA(101, 251, 181, 1);
}

</style>