我的钱包 关于 列表
This commit is contained in:
150
src/views/mine/Liststatistic.vue
Normal file
150
src/views/mine/Liststatistic.vue
Normal 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>
|
||||
Reference in New Issue
Block a user