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

This commit is contained in:
luyuan 2020-10-05 16:31:16 +08:00
commit ba3ded3be1
Signed by: theluyuan
GPG Key ID: A7972FD973317FF3

View File

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