我的钱包 关于 列表

This commit is contained in:
asd
2020-09-29 16:51:42 +08:00
parent 8bf0188105
commit db2eec98a0
32 changed files with 2158 additions and 27 deletions

View File

@@ -0,0 +1,150 @@
<template>
<div>
<div class="lists">
<div class="listitem">
<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">15</div>
</div>
<div class="data">
<div class="label">直播课程</div>
<div class="right">15</div>
</div>
<div class="data">
<div class="label">直播课程</div>
<div class="right">15</div>
</div>
<img src="@/static/images/zhibotj.png" alt="" class="zhuzi" />
</div>
</div>
</div>
<div class="listitem">
<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">15</div>
</div>
<div class="data">
<div class="label">总观看数</div>
<div class="right">15</div>
</div>
<div class="data">
<div class="label">平均得分</div>
<div class="right">15</div>
</div>
<img src="@/static/images/shipintj.png" alt="" class="zhuzi" />
</div>
</div>
</div>
<div class="listitem">
<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">15</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, ref } from "vue";
import NavBottom from "@/components/NavBottom.vue";
export default defineComponent({
name: "Liststatistic",
components: {
NavBottom
},
setup() {
return {};
},
});
</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>