样式修改

This commit is contained in:
yangjun 2023-10-22 15:07:24 +08:00
parent 7404cb43a5
commit 65bf39cde5
1 changed files with 95 additions and 68 deletions

View File

@ -3,76 +3,76 @@
<div class="" style="padding: 1rem 1rem 0 1rem;"> <div class="" style="padding: 1rem 1rem 0 1rem;">
<a-row :gutter="[16,16]"> <a-row :gutter="[16,16]">
<a-col :span="4"> <a-col :span="12">
<a-card class="cardDiv" title="总数"> <a-card class="cardDiv" title="教室情况">
<!-- -<i class="fa-sharp fa-solid fa-user"></i>- -->
<a-row class="" :gutter="[16,16]"> <a-row class="" :gutter="[16,16]">
<a-col :xs="{ span: 24 }" :sm="{ span: 24 }" :lg="{ span: 24 }"> <a-col :xs="{ span: 8 }" :sm="{ span: 8 }" :lg="{ span: 8 }">
<div class="numberBlob handleCss" @click="() => queryParam = {}"> <div class="numberBlob handleCss" @click="() => queryParam = {}">
<div class="numSpan orange fs3r">{{ allClassNum }}</div> <div class="numSpan">{{ allClassNum }}</div>
<div class="numberName">&nbsp;</div> <div class="numberName">
<!-- <StockOutlined class="blue"/> -->
总数
</div>
</div>
</a-col>
<a-col :xs="{ span: 8 }" :sm="{ span: 8 }" :lg="{ span: 8 }">
<div class="numberBlob handleCss" @click="() => queryParam = {}">
<div class="numSpan blue">{{ leftList.length }}</div>
<div class="numberName">
<!-- <RiseOutlined class="orange"/> -->
可直播
</div>
</div>
</a-col>
<a-col :xs="{ span: 8 }" :sm="{ span: 8 }" :lg="{ span: 8 }">
<div class="numberBlob handleCss">
<div class="numSpan orange">{{ getSysConfig().flag5 == 0?'否':'是' }}</div>
<div class="numberName">
<!-- <RiseOutlined class="orange"/> -->
开放听课
</div>
</div> </div>
</a-col> </a-col>
</a-row> </a-row>
<!-- <a-divider /> -->
<!-- <div class="buttomDiv"></div> -->
</a-card> </a-card>
</a-col> </a-col>
<a-col :span="4"> <a-col :span="12">
<a-card class="cardDiv" title="可直播"> <a-card class="cardDiv" title="直播情况">
<!-- -<i class="fa-sharp fa-solid fa-user"></i>- -->
<a-row class="" :gutter="[16,16]"> <a-row class="" :gutter="[16,16]">
<a-col :xs="{ span: 24 }" :sm="{ span: 24 }" :lg="{ span: 24 }"> <a-col :xs="{ span: 8 }" :sm="{ span: 8 }" :lg="{ span: 8 }">
<div class="numberBlob handleCss" @click="() => (queryParam = {},queryParam.sfyx = '1')"> <div class="numberBlob handleCss" @click="() => queryParam = {}">
<div class="numSpan orange fs3r">{{ leftList.length }}</div> <div class="numSpan">{{ (leftList.filter(x => x?.nowIsClass).length || 0) }}</div>
<div class="numberName">&nbsp;</div> <div class="numberName">
</div> <!-- <StockOutlined class="blue"/> -->
</a-col> 正在上课
</a-row> </div>
</a-card> </div>
</a-col> </a-col>
<a-col :span="4"> <a-col :xs="{ span: 8 }" :sm="{ span: 8 }" :lg="{ span: 8 }">
<a-card class="cardDiv" title="开放听课" @click="() => (queryParam = {},queryParam.sfyx2 = '1')"> <div class="numberBlob handleCss" @click="() => queryParam = {}">
<a-row class="" :gutter="[16,16]"> <div class="numSpan blue">{{ (leftList.filter(x => x?.child['教师近景']?.isOnLine).length || 0) }}</div>
<a-col :xs="{ span: 24 }" :sm="{ span: 24 }" :lg="{ span: 24 }"> <div class="numberName">
<div class="numberBlob handleCss" > <!-- <RiseOutlined class="orange"/> -->
<div class="numSpan orange fs3r">{{ getSysConfig().flag5 == 0?'否':'是' }}</div> 正在直播
<div class="numberName">&nbsp;</div> </div>
</div> </div>
</a-col> </a-col>
</a-row> <a-col :xs="{ span: 8 }" :sm="{ span: 8 }" :lg="{ span: 8 }">
</a-card> <div class="numberBlob handleCss">
</a-col> <div class="numSpan orange">{{ (leftList.filter(x => !x?.child['教师近景']?.isOnLine).length || 0) }}</div>
<a-col :span="4"> <div class="numberName">
<a-card class="cardDiv" title="正在上课" @click="() => (queryParam = {},queryParam.nowIsClass = '1')"> <!-- <RiseOutlined class="orange"/> -->
<a-row class="" :gutter="[16,16]"> 直播异常
<a-col :xs="{ span: 24 }" :sm="{ span: 24 }" :lg="{ span: 24 }"> </div>
<div class="numberBlob handleCss" >
<div class="numSpan orange fs3r">{{ (leftList.filter(x => x?.nowIsClass).length || 0) }}</div>
<div class="numberName">&nbsp;</div>
</div>
</a-col>
</a-row>
</a-card>
</a-col>
<a-col :span="4">
<a-card class="cardDiv" title="正在直播" @click="() => (queryParam = {},queryParam.onLineClassType = 'green')">
<a-row class="" :gutter="[16,16]">
<a-col :xs="{ span: 24 }" :sm="{ span: 24 }" :lg="{ span: 24 }">
<div class="numberBlob handleCss" >
<div class="numSpan orange fs3r">{{ (leftList.filter(x => x?.child['教师近景']?.isOnLine).length || 0) }}</div>
<div class="numberName">&nbsp;</div>
</div>
</a-col>
</a-row>
</a-card>
</a-col>
<a-col :span="4">
<a-card class="cardDiv" title="直播异常" @click="() => (queryParam = {},queryParam.onLineClassType = 'red')">
<a-row class="" :gutter="[16,16]">
<a-col :xs="{ span: 24 }" :sm="{ span: 24 }" :lg="{ span: 24 }">
<div class="numberBlob handleCss" >
<div class="numSpan orange fs3r">{{ (leftList.filter(x => !x?.child['教师近景']?.isOnLine).length || 0) }}</div>
<div class="numberName">&nbsp;</div>
</div> </div>
</a-col> </a-col>
</a-row> </a-row>
<!-- <a-divider /> -->
<!-- <div class="buttomDiv"></div> -->
</a-card> </a-card>
</a-col> </a-col>
</a-row> </a-row>
@ -82,13 +82,23 @@
<a-row :gutter="[16,16]"> <a-row :gutter="[16,16]">
<a-col :span="6" v-for="(item,index) of cardList" :key="index"> <a-col :span="6" v-for="(item,index) of cardList" :key="index">
<a-card bordered hoverable @click="() => currentCardIndex = index" :class="currentCardIndex == index?'active':''"> <a-card bordered hoverable @click="() => currentCardIndex = index" :class="currentCardIndex == index?'active':''">
<div>名称{{ item.jxlName }}</div> <div style="font-size: 15px;font-weight: 600;margin-bottom: 10px;">{{ item.jxlName }}</div>
<div>总数{{ item.jsNum }}</div> <a-row style="margin-bottom: 10px;text-align: center;">
<div>可直播{{ cardList.length }}</div> <a-col :span="8">总数</a-col>
<div>开放听课{{ getSysConfig().flag5 == 0?'否':'是' }}</div> <a-col :span="8">可直播</a-col>
<div>正在上课{{ item.child.filter(x => x?.nowIsClass).length || 0}}</div> <a-col :span="8">开放听课</a-col>
<div>正在直播{{ item.child.filter(x => x?.child['教师近景']?.isOnLine).length || 0}}</div> <a-col :span="8" style="font-weight: 600;">{{ item.jsNum }}</a-col>
<div>直播异常{{ item.child.filter(x => !x?.child['教师近景']?.isOnLine).length || 0 }}</div> <a-col :span="8" style="font-weight: 600;">{{ cardList.length }}</a-col>
<a-col :span="8" style="font-weight: 600;">{{ getSysConfig().flag5 == 0?'否':'是' }}</a-col>
</a-row>
<a-row style="text-align: center;">
<a-col :span="8">正在上课</a-col>
<a-col :span="8">正在直播</a-col>
<a-col :span="8">直播异常</a-col>
<a-col :span="8" style="font-weight: 600;">{{ item.child.filter(x => x?.nowIsClass).length || 0}}</a-col>
<a-col :span="8" style="font-weight: 600;">{{ item.child.filter(x => x?.child['教师近景']?.isOnLine).length || 0}}</a-col>
<a-col :span="8" style="font-weight: 600;">{{ item.child.filter(x => !x?.child['教师近景']?.isOnLine).length || 0 }}</a-col>
</a-row>
</a-card> </a-card>
</a-col> </a-col>
</a-row> </a-row>
@ -695,6 +705,7 @@ video::-webkit-media-controls-timeline {
} }
.active{ .active{
background-color: #36b395; background-color: #36b395;
color: #ffffff;
} }
.cardDiv { .cardDiv {
@ -716,11 +727,27 @@ video::-webkit-media-controls-timeline {
font-weight: 700; font-weight: 700;
} }
.fs3r { .fs3r {
font-size: 3rem; font-size: 2rem;
} }
} }
.handleCss{ .handleCss{
cursor:pointer; cursor:pointer;
} }
.iconel{
float: left;
width: 50px;
margin-right: 8px;
}
.iconer{
float: left;
}
.ictitle{
font-size: 15px;
color: #000000;
font-weight: 600;
text-align: left;
}
.ant-form-item{
margin-bottom: 10px;
}
</style> </style>