Merge branch 'master' of http://git.luyuan.tk/luyuan/beelink into xbx
This commit is contained in:
commit
ba3ded3be1
@ -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;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
Loading…
Reference in New Issue
Block a user