<template>
    <div class="rankingDiv">
        <div class="rankTitle">{{ title }}</div>
        <div class="rankItem" v-for="(i, index) in useData" :key="index">
            <div class="item_left">
                <div class="rankNumber" :style="{
                    backgroundColor: i.backgroundColor,
                    border: i.hasBorder ? '1px solid gray' : 'none',
                }">{{ i.rank }}</div>
                <div class="rankText">{{ i.name }}</div>
            </div>
            <div class="rankCount">{{ i.count }}</div>
        </div>

    </div>
</template>
<script>
export default {
    name: "rankingDiv",
    props: {
        title: {
            type: String,
            default: "热门应用排名TOP5", // 默认标题
        },
        useData: {
            type: Array,
            default: () => [
                { rank: 1, name: "应用1", count: "2213次", backgroundColor: "#f0b343" },
                { rank: 2, name: "应用2", count: "2213次", backgroundColor: "#d9d9d9" },
                { rank: 3, name: "应用3", count: "2213次", backgroundColor: "#ae938c" },
                { rank: 4, name: "应用4", count: "2213次", backgroundColor: "#fff", hasBorder: true },
                { rank: 5, name: "应用5", count: "2213次", backgroundColor: "#fff", hasBorder: true },
            ],
        },
    },
}
</script>
<style scoped>
.rankingDiv {
    background-color: #fff;
    box-shadow: 0px 4px 29px rgba(0, 0, 0, 0.1);
    padding: 20px;
    border-radius: 20px;
    display: flex;
    flex-direction: column;
}

.rankTitle {
    font-weight: bold;
    font-size: 17px;
}

.rankItem {
    display: flex;
    justify-content: space-between;
    border-bottom: 1px solid #e5e1e1;
    padding-bottom: 7px;
    margin: 25px 10px;
}

.item_left {
    display: flex;
}

.rankNumber {
    border-radius: 10px;
    width: 17px;
    height: 17px;
    text-align: center;
    font-size: 13px;
    margin-right: 5px;
}

.rankText {
    font-size: 13px;
    font-weight: bold;
}

.rankCount {
    font-size: 13px;
    color: #2878fe;
}
</style>