beelink/src/views/mine/RankList.vue

<template>
    <div class="rank-list">
        <div class="list-thead">
            <div class="ranking-number">排名</div>
            <div class="user-info">姓名</div>
            <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 === 5 }">
                <div class="other-rank" :class="{'mine-rank': item.uid === 5 }">
                    <div class="ranking-number">
                        <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" />
                            <img src="@/static/images/rank_third.png" class="rank-img" v-else-if="item.id === 3" />
                            <span class="other" v-else>{{ item.id }}</span>
                        </div>
                    </div>
                    <div class="user-info">
                        <a-avatar :size="34">
                            <template v-slot:icon><UserOutlined /></template>
                        </a-avatar>
                        <span class="name">{{ item.name }}</span>
                    </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>
</template>
<script lang="ts">
import { defineComponent, reactive } from 'vue';
import { UserOutlined } from '@ant-design/icons-vue';

export default defineComponent({
    name: 'RankList',
    components: {
        UserOutlined
    },
    setup() {
        interface RankItem {
            uid: number;
            id: number;
            avatar: string;
            name: string;
            value: number | string;
        }
        const rankData: Array<RankItem> = reactive([{
            uid: 1,
            id: 1,
            avatar: '',
            name: '1',
            value: '123456',
        }, {
            uid: 2,
            id: 2,
            avatar: '',
            name: '12',
            value: '12345',
        }, {
            uid: 3,
            id: 3,
            avatar: '',
            name: '123',
            value: '1234',
        }, {
            uid: 4,
            id: 20,
            avatar: '',
            name: '1234',
            value: '123',
        }, {
            uid: 15,
            id: 21,
            avatar: '',
            name: '15',
            value: '12',
        }, {
            uid: 5,
            id: 22,
            avatar: '',
            name: '61',
            value: '1',
        }, {
            uid: 51,
            id: 23,
            avatar: '',
            name: '61',
            value: '1',
        }]);
        return {
            rankData
        }
    }
})
</script>
<style lang="scss" scoped>
.rank-list {
    @mixin rank-public {
        display: flex;
        align-items: center;
        .ranking-number {
            width: 135px;
            text-align: left;
        }
        .user-info {
            flex: 1;
        }
        .hits {
            width: 170px;
            text-align: center;
        }
    }
    .list-thead {
        @include rank-public;
        font-size: 11px;
        font-weight: 500;
        color: #656565;
        margin-bottom: 24px;
    }
    .list-body {
        .rank-item {
            position: relative;
            &:not(:last-child) {
                margin-bottom: 26px;
            }
            .other-rank {
                @include rank-public;
            }
            .mine-rank {
                // margin: 28px 0;
                width: calc(100% + 14px);
                display: flex;
                align-items: center;
                height: 56px;
                position: absolute;
                top: 0;
                left: -14px;
                background: #FFFFFF;
                box-shadow: 0px 3px 24px 0px rgba(58, 58, 58, 0.31);
                border-radius: 7px;
                box-sizing: border-box;
                padding-left: 14px;
                .hits {
                    color: #0EBCA4;
                }
            }
            .ranking-number {
                .rank-img {
                    width: 27px;
                    height: 28px;
                }
                .other {
                    display: inline-block;
                    width: 27px;
                    text-align: center;
                }
                .mine {
                    color: #0DBBA3;
                }
            }
            .user-info {
                .name {
                    margin-left: 11px;
                    font-size: 11px;
                    font-weight: bold;
                    color: #000000;
                }
            }
            .hits {
                font-size: 11px;
                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: 54px;
        }
    }
}
</style>