theluyuan/beelink
1
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

Merge branch 'master' of http://git.luyuan.tk/luyuan/beelink into xbx

Browse Source
This commit is contained in:
luyuan 2020-10-05 16:31:16 +08:00
commit ba3ded3be1
Signed by: theluyuan
GPG Key ID: A7972FD973317FF3
1 changed files with 56 additions and 12 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

68
src/views/mine/RankList.vue
View File

@ -6,10 +6,10 @@
<div class="hits">视频点击量</div>
</div>
<div class="list-body">
<div class="rank-item" v-for="item in rankData" :key="item.uid" :class="{'mine-item': item.uid === 8 }">
<div class="other-rank" :class="{'mine-rank': item.uid === 8 }">
<div class="rank-item" v-for="item in rankData" :key="item.uid" :class="{'mine-item': item.uid === 5 }">
<div class="other-rank" :class="{'mine-rank': item.uid === 5 }">
<div class="ranking-number">
<span v-if="item.uid === 8" class="mine">我的成绩</span>
<span v-if="item.uid === 5" class="mine">我的成绩</span>
<div v-else>
<img src="@/static/images/rank_first.png" class="rank-img" v-if="item.id === 1" />
<img src="@/static/images/rank_second.png" class="rank-img" v-else-if="item.id === 2" />
@ -25,6 +25,13 @@
</div>
<div class="hits">{{ item.value }}</div>
</div>
<div class="third-ellipsis" v-if="item.id === 3">...</div>
<div class="twenty-ellipsis" v-if="item.id === 20">
<div class="third-ellipsis">
<div>...</div>
</div>
<div class="line"></div>
</div>
</div>
</div>
</div>
@ -66,19 +73,25 @@ export default defineComponent({
value: '1234',
}, {
uid: 4,
id: 4,
id: 20,
avatar: '',
name: '1234',
value: '123',
}, {
uid: 5,
id: 5,
uid: 15,
id: 21,
avatar: '',
name: '15',
value: '12',
}, {
uid: 6,
id: 6,
uid: 5,
id: 22,
avatar: '',
name: '61',
value: '1',
}, {
uid: 51,
id: 23,
avatar: '',
name: '61',
value: '1',
@ -117,14 +130,14 @@ export default defineComponent({
.rank-item {
position: relative;
&:not(:last-child) {
margin-bottom: 28px;
margin-bottom: 26px;
}
.other-rank {
@include rank-public;
}
.mine-rank {
margin: 28px 0;
width: 100%;
// margin: 28px 0;
width: calc(100% + 14px);
display: flex;
align-items: center;
height: 56px;
@ -136,6 +149,9 @@ export default defineComponent({
border-radius: 7px;
box-sizing: border-box;
padding-left: 14px;
.hits {
color: #0EBCA4;
}
}
.ranking-number {
.rank-img {
@ -164,9 +180,37 @@ export default defineComponent({
font-weight: bold;
color: #111111;
}
.third-ellipsis {
height: 10px;
width: 28px;
text-align: center;
font-size: 15px;
font-weight: bold;
color: #666666;
user-select: none;
}
.twenty-ellipsis {
height: 20px;
display: flex;
align-items: flex-end;
.third-ellipsis {
width: 135px;
text-align: left;
line-height: 0px;
> div {
width: 27px;
text-align: center;
}
}
.line {
width: 427px;
height: 1px;
background: #09AE99;
}
}
}
.mine-item {
padding-bottom: 80px;
padding-bottom: 54px;
}
}
}