173 lines
4.3 KiB
Vue
173 lines
4.3 KiB
Vue
<template>
|
|
<div>
|
|
<div class="lists">
|
|
<div class="listitem" @click="navto(1)">
|
|
<div class="top">
|
|
<img src="@/static/images/zhibotjicon.png" alt="" class="icon" />
|
|
<span>直播列表</span>
|
|
</div>
|
|
<div class="mid">
|
|
<div>
|
|
<div class="data">
|
|
<div class="label">直播课程</div>
|
|
<div class="right">{{statistics.liveInfo?statistics.liveInfo.sum:0}}</div>
|
|
</div>
|
|
<div class="data">
|
|
<div class="label">参与人数</div>
|
|
<div class="right">{{statistics.liveInfo?statistics.liveInfo.student:0}}</div>
|
|
</div>
|
|
<div class="data">
|
|
<div class="label">课程评分</div>
|
|
<div class="right">{{statistics.liveInfo?statistics.liveInfo.avg:0}}</div>
|
|
</div>
|
|
<img src="@/static/images/zhibotj.png" alt="" class="zhuzi" />
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="listitem" @click="navto(2)">
|
|
<div class="top">
|
|
<img src="@/static/images/shipintjicon.png" alt="" class="icon" />
|
|
<span class="label1">视频列表</span>
|
|
</div>
|
|
<div class="mid">
|
|
<div>
|
|
<div class="data">
|
|
<div class="label">发布视频</div>
|
|
<div class="right">{{statistics.videoInfo?statistics.videoInfo.sum:0}}</div>
|
|
</div>
|
|
<div class="data">
|
|
<div class="label">总观看数</div>
|
|
<div class="right">{{statistics.videoInfo?statistics.videoInfo.sum:0}}</div>
|
|
</div>
|
|
<div class="data">
|
|
<div class="label">平均得分</div>
|
|
<div class="right">{{statistics.videoInfo?statistics.videoInfo.sum:0}}</div>
|
|
</div>
|
|
<img src="@/static/images/shipintj.png" alt="" class="zhuzi" />
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="listitem" @click="navto(3)">
|
|
<div class="top">
|
|
<img src="@/static/images/dingyuetjicon.png" alt="" class="icon" />
|
|
<span class="label2">订阅列表</span>
|
|
</div>
|
|
<div class="mid">
|
|
<div>
|
|
<div class="data">
|
|
<div class="label">订阅人数</div>
|
|
<div class="right">{{statistics.studentInfo?statistics.studentInfo.sum:0}}</div>
|
|
</div>
|
|
|
|
<img src="@/static/images/dingyuetj.png" alt="" class="zhuzi zhuzi1" />
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
</div>
|
|
<NavBottom class="navbottom"></NavBottom>
|
|
</div>
|
|
|
|
</template>
|
|
|
|
<script lang="ts">
|
|
import { defineComponent, onMounted, ref } from "vue";
|
|
import NavBottom from "@/components/NavBottom.vue";
|
|
import { getstatisticlist } from "@/api"
|
|
import router from '@/router';
|
|
export default defineComponent({
|
|
name: "Liststatistic",
|
|
components: {
|
|
NavBottom
|
|
},
|
|
setup(){
|
|
const statistics = ref({})
|
|
onMounted(async ()=>{
|
|
statistics.value = await getstatisticlist()
|
|
})
|
|
function navto(e?: number){
|
|
switch(e){
|
|
case 1:
|
|
router.push("/regime/live");
|
|
break;
|
|
case 2:
|
|
router.push("/regime/video")
|
|
break;
|
|
case 3:
|
|
router.push("/regime/subscriber")
|
|
}
|
|
}
|
|
|
|
// console.log(statistics,111)
|
|
return {
|
|
statistics,
|
|
navto
|
|
};
|
|
},
|
|
});
|
|
</script>
|
|
<style lang="scss" scoped>
|
|
.lists {
|
|
font-size: 11px;
|
|
color: #111111;
|
|
display: flex;
|
|
.listitem {
|
|
width: 372px;
|
|
height: 256px;
|
|
background: white;
|
|
border-radius: 17px;
|
|
// padding-bottom: 17px;
|
|
margin-right: 17px;
|
|
.top {
|
|
width: 292px;
|
|
margin: 0 auto;
|
|
border-bottom: 1px solid #eeeeee;
|
|
padding-top: 34px;
|
|
padding-bottom: 12px;
|
|
color: #08ae98;
|
|
font-size: 13px;
|
|
font-weight: bold;
|
|
margin-bottom: 28px;
|
|
.label1{
|
|
color: #D12C2E;
|
|
}
|
|
.label2{
|
|
color: #F4C85E;
|
|
}
|
|
.icon {
|
|
width: 18px;
|
|
height: 17px;
|
|
margin-right: 6px;
|
|
}
|
|
}
|
|
.mid {
|
|
.data {
|
|
width: 292px;
|
|
margin: 0 auto;
|
|
display: flex;
|
|
margin-bottom: 28px;
|
|
.label {
|
|
margin-right: 18px;
|
|
}
|
|
}
|
|
|
|
.zhuzi {
|
|
width: 170px;
|
|
height: 85px;
|
|
float: right;
|
|
position: relative;
|
|
top: -69px;
|
|
right: 34px;
|
|
}
|
|
.zhuzi1{
|
|
top: 28px;
|
|
}
|
|
}
|
|
}
|
|
|
|
}
|
|
.navbottom {
|
|
margin-top: 250px;
|
|
// margin-bottom: 28px;
|
|
}
|
|
</style> |