样式修改
This commit is contained in:
parent
c126f5141f
commit
737842c9c5
18121
pnpm-lock.yaml
18121
pnpm-lock.yaml
File diff suppressed because it is too large
Load Diff
|
@ -28,25 +28,23 @@
|
|||
</a-form>
|
||||
</div>
|
||||
|
||||
<div class="" style="padding: 1rem;">
|
||||
<a-row :gutter="[16,16]">
|
||||
<a-col :span="6" v-for="(item,index) of cardList" :key="index">
|
||||
<div class="" style="padding: 0 10px 10px 10px;">
|
||||
<a-row :gutter="[16,16]" style="margin: 0 !important;">
|
||||
<a-col :span="6" v-for="(item,index) of cardList" :key="index" style="padding: 0 10px 0 0 !important;">
|
||||
<a-card bordered hoverable @click="() => currentCardIndex = index" :class="currentCardIndex == index?'active':''">
|
||||
<div>名称:{{ item.jxlName }}</div>
|
||||
<div>总数:{{ item.child.length }}</div>
|
||||
<div>名称:<span style="font-weight: 600;">{{ item.jxlName }}</span></div>
|
||||
<div>总数:<span style="font-weight: 600;">{{ item.child.length }}</span></div>
|
||||
<!-- {{ item.child }} -->
|
||||
|
||||
|
||||
<div>正在上课的教室{{ item.child.filter(x => x?.nowIsClass).length || 0}}间</div>
|
||||
<div>正常直播的教室{{ item.child.filter(x => x?.child['教师近景']?.isOnLine).length || 0}}间</div>
|
||||
<div>没开启直播的教室{{ item.child.filter(x => !x?.child['教师近景']?.isOnLine).length || 0 }}间</div>
|
||||
<div class="sdeas"><span class="ydian"></span><span class="cdfx" style="letter-spacing: 2px;">正在上课的教室</span><span class="gfd">{{ item.child.filter(x => x?.nowIsClass).length || 0}}</span><span>间</span></div>
|
||||
<div class="sdeas"><span class="ydian"></span><span class="cdfx" style="letter-spacing: 2px;">正常直播的教室</span><span class="gfd">{{ item.child.filter(x => x?.child['教师近景']?.isOnLine).length || 0}}</span><span>间</span></div>
|
||||
<div class="sdeas"><span class="ydian"></span><span class="cdfx">没开启直播的教室</span><span class="gfd">{{ item.child.filter(x => !x?.child['教师近景']?.isOnLine).length || 0 }}</span><span>间</span></div>
|
||||
</a-card>
|
||||
</a-col>
|
||||
</a-row>
|
||||
</div>
|
||||
|
||||
<a-table v-show="true" :loading="loading" :data-source="cardList[currentCardIndex]?.child??[]" :pagination="false" bordered size="middle" class="ant-table-striped" :scroll="{ y: 650 }">
|
||||
<a-table-column title="教室" data-index="jsmc"/>
|
||||
<a-table-column title="教室" align="center" data-index="jsmc"/>
|
||||
<a-table-column title="教师近景" align="center" data-index="child_教师近景">
|
||||
<template #default="{ record }">
|
||||
<span :class="record?.child['教师近景']?.isOnLine?'green':'red'">
|
||||
|
@ -103,14 +101,14 @@
|
|||
</span>
|
||||
</template>
|
||||
</a-table-column>
|
||||
<a-table-column width="200px" title="操作" data-index="action">
|
||||
<a-table-column width="250px" title="操作" align="center" data-index="action">
|
||||
<template #default="{ record }">
|
||||
<a @click="ylLiveNew(record)" >预览 |</a>
|
||||
<a @click="ylLive(record)" hidden>预览 |</a>
|
||||
<a v-if="!record?.child['教师全景']?.isOnLine" @click="changeLive(record,true)">开启推流 |</a>
|
||||
<a v-else @click="changeLive(record,false)">关闭推流 |</a>
|
||||
<a v-if="record.sfyx == 1" @click="changeKt(record,true)">课堂上线</a>
|
||||
<a v-else-if="record.sfyx == 0" @click="changeKt(record,false)">课堂下线</a>
|
||||
<a @click="ylLiveNew(record)" class="caozuobtn">预览</a>
|
||||
<a @click="ylLive(record)" hidden class="caozuobtn">预览</a>
|
||||
<a v-if="!record?.child['教师全景']?.isOnLine" @click="changeLive(record,true)" class="caozuobtn">开启推流</a>
|
||||
<a v-else @click="changeLive(record,false)" class="caozuobtn">关闭推流</a>
|
||||
<a v-if="record.sfyx == 1" @click="changeKt(record,true)" class="caozuobtn">课堂上线</a>
|
||||
<a v-else-if="record.sfyx == 0" @click="changeKt(record,false)" class="caozuobtn">课堂下线</a>
|
||||
<!-- {{ record.id }} -->
|
||||
</template>
|
||||
</a-table-column>
|
||||
|
@ -467,5 +465,44 @@ video::-webkit-media-controls-timeline {
|
|||
}
|
||||
.active{
|
||||
background-color: #36b395;
|
||||
color: #ffffff;
|
||||
}
|
||||
.active .ydian{
|
||||
background-color: #ffffff;
|
||||
}
|
||||
.caozuobtn{
|
||||
display: inline-block;
|
||||
padding: 4px 10px;
|
||||
background-color: #36b395;
|
||||
border-radius: 20px;
|
||||
color: #ffffff;
|
||||
margin: 0 4px;
|
||||
border-radius: 10px;
|
||||
transition: 0.5s;
|
||||
}
|
||||
.caozuobtn:hover{
|
||||
transform:translateX(1.2);
|
||||
}
|
||||
.ydian{
|
||||
display: inline-block;
|
||||
width: 6px;
|
||||
height: 6px;
|
||||
border-radius: 50%;
|
||||
background-color: #36b395;
|
||||
margin-right: 5px;
|
||||
}
|
||||
.cdfx{
|
||||
display: inline-block;
|
||||
width: 120px;
|
||||
text-align: right;
|
||||
margin-right: 10px;
|
||||
}
|
||||
.gfd{
|
||||
display: inline-block;
|
||||
width: 30px;
|
||||
text-align: center;
|
||||
font-size: 16px;
|
||||
font-weight: 600;
|
||||
margin-right: 10px;
|
||||
}
|
||||
</style>
|
Loading…
Reference in New Issue