90 lines
2.3 KiB
Vue
90 lines
2.3 KiB
Vue
|
<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>
|