novel-front-pc/src/components/ranking/IntimacyRanking copy.vue

<template>
    <div class="intimacy-ranking-container">
        <div class="ranking-header">
            <div class="header-title">
                <img src="@/assets/images/读者榜单.png" alt="读者榜单" class="ranking-icon" />
                <span>读者亲密榜单</span>
            </div>
        </div>

        <div class="ranking-tabs">
            <div class="tab-list">
                <div v-for="(tab, index) in tabs" :key="index"
                    :class="['tab-item', { active: activeTab === tab.value }]" @click="activeTab = tab.value">
                    {{ tab.label }}
                </div>
            </div>
        </div>

        <div class="ranking-list">
            <div v-for="(item, index) in currentRankingList" :key="index" class="ranking-item">
                <div class="rank-num">
                    <template v-if="index < 3">
                        <div :class="['medal', `medal-${index + 1}`]">{{ index + 1 }}</div>
                    </template>
                    <template v-else>
                        <div class="normal-rank">{{ index + 1 }}</div>
                    </template>
                </div>

                <div class="user-avatar">
                    <img :src="item.avatar" :alt="item.username">
                </div>

                <div class="user-info">
                    <div class="username">{{ item.username }}</div>
                    <div class="level-tag">
                        {{ `护书者者 ${item.level}级` }}
                    </div>
                </div>

                <div class="intimacy-value">
                    <div class="value">{{ item.value }}</div>
                    <div class="label">亲密值</div>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
import { defineComponent, ref, computed } from 'vue';

export default defineComponent({
    name: 'IntimacyRanking',
    props: {
        bookId: {
            type: String,
            default: ''
        }
    },
    setup(props) {
        const tabs = [
            { label: '总榜', value: 'all' },
            { label: '周榜', value: 'week' },
            { label: '月榜', value: 'month' }
        ];

        const activeTab = ref('all');

        const allRankingList = ref([
            {
                username: '周游',
                avatar: 'https://picsum.photos/100/100?random=1',
                level: '五',
                value: '8783452',
            },
            {
                username: '冯启明',
                avatar: 'https://picsum.photos/100/100?random=2',
                level: '五',
                value: '890379',
            },
            {
                username: '风静',
                avatar: 'https://picsum.photos/100/100?random=3',
                level: '四',
                value: '605039',
            },
            {
                username: '钱静',
                avatar: 'https://picsum.photos/100/100?random=4',
                level: '三',
                value: '532524',
            },
            {
                username: '线编码',
                avatar: 'https://picsum.photos/100/100?random=5',
                level: '三',
                value: '525524',
            },
            {
                username: '冯艾蓥',
                avatar: 'https://picsum.photos/100/100?random=6',
                level: '二',
                value: '496064',
            },
            {
                username: '李书琦',
                avatar: 'https://picsum.photos/100/100?random=7',
                level: '一',
                value: '372525',
            },
            {
                username: '李梅',
                avatar: 'https://picsum.photos/100/100?random=8',
                level: '一',
                value: '267476',
            },
            {
                username: '郑帆',
                avatar: 'https://picsum.photos/100/100?random=9',
                level: '一',
                value: '248480',
            },
            {
                username: '吴修德',
                avatar: 'https://picsum.photos/100/100?random=10',
                level: '一',
                value: '59053',
            }
        ]);

        const weekRankingList = ref([
            {
                username: '周游',
                avatar: 'https://picsum.photos/100/100?random=1',
                level: '五',
                value: '78452',
            },
            {
                username: '冯启明',
                avatar: 'https://picsum.photos/100/100?random=2',
                level: '五',
                value: '69037',
            },
            {
                username: '风静',
                avatar: 'https://picsum.photos/100/100?random=3',
                level: '四',
                value: '60509',
            },
            {
                username: '钱静',
                avatar: 'https://picsum.photos/100/100?random=4',
                level: '三',
                value: '53254',
            },
            {
                username: '线编码',
                avatar: 'https://picsum.photos/100/100?random=5',
                level: '三',
                value: '52554',
            },
            {
                username: '冯艾蓥',
                avatar: 'https://picsum.photos/100/100?random=6',
                level: '二',
                value: '49064',
            },
            {
                username: '李书琦',
                avatar: 'https://picsum.photos/100/100?random=7',
                level: '一',
                value: '37255',
            },
            {
                username: '李梅',
                avatar: 'https://picsum.photos/100/100?random=8',
                level: '一',
                value: '26747',
            },
            {
                username: '郑帆',
                avatar: 'https://picsum.photos/100/100?random=9',
                level: '一',
                value: '24848',
            },
            {
                username: '吴修德',
                avatar: 'https://picsum.photos/100/100?random=10',
                level: '一',
                value: '5953',
            }
        ]);

        const monthRankingList = ref([
            {
                username: '周游',
                avatar: 'https://picsum.photos/100/100?random=1',
                level: '五',
                value: '178452',
            },
            {
                username: '冯启明',
                avatar: 'https://picsum.photos/100/100?random=2',
                level: '五',
                value: '169037',
            },
            {
                username: '风静',
                avatar: 'https://picsum.photos/100/100?random=3',
                level: '四',
                value: '160509',
            },
            {
                username: '钱静',
                avatar: 'https://picsum.photos/100/100?random=4',
                level: '三',
                value: '153254',
            },
            {
                username: '线编码',
                avatar: 'https://picsum.photos/100/100?random=5',
                level: '三',
                value: '152554',
            },
            {
                username: '冯艾蓥',
                avatar: 'https://picsum.photos/100/100?random=6',
                level: '二',
                value: '149064',
            },
            {
                username: '李书琦',
                avatar: 'https://picsum.photos/100/100?random=7',
                level: '一',
                value: '137255',
            },
            {
                username: '李梅',
                avatar: 'https://picsum.photos/100/100?random=8',
                level: '一',
                value: '126747',
            },
            {
                username: '郑帆',
                avatar: 'https://picsum.photos/100/100?random=9',
                level: '一',
                value: '124848',
            },
            {
                username: '吴修德',
                avatar: 'https://picsum.photos/100/100?random=10',
                level: '一',
                value: '105953',
            }
        ]);

        const currentRankingList = computed(() => {
            if (activeTab.value === 'all') {
                return allRankingList.value;
            } else if (activeTab.value === 'week') {
                return weekRankingList.value;
            } else {
                return monthRankingList.value;
            }
        });

        return {
            tabs,
            activeTab,
            currentRankingList
        };
    }
});
</script>

<style lang="scss" scoped>
.intimacy-ranking-container {
    background-color: #fff;
    border-radius: 6px;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.03);
    padding: 0 0 16px 0;
    overflow: hidden;
    margin-left: 0;

    .ranking-header {
        background-color: #0A2463;
        color: #fff;
        padding: 15px 20px;

        .header-title {
            display: flex;
            align-items: center;
            font-size: 18px;
            font-weight: bold;

            .ranking-icon {
                width: 28px;
                height: 28px;
                margin-right: 10px;
            }
        }
    }

    .ranking-tabs {
        padding: 12px 15px;
        border-bottom: 1px solid #eee;

        .tab-list {
            display: flex;

            .tab-item {
                padding: 6px 16px;
                font-size: 15px;
                color: #666;
                cursor: pointer;
                border-radius: 4px;
                transition: all 0.2s;

                &.active {
                    background-color: #f0f5ff;
                    color: #0A2463;
                    font-weight: 500;
                }

                &:hover:not(.active) {
                    color: #0A2463;
                }
            }
        }
    }

    .ranking-list {
        padding: 0 15px;

        .ranking-item {
            display: flex;
            align-items: center;
            padding: 12px 0;
            border-bottom: 1px solid #f5f5f5;

            &:last-child {
                border-bottom: none;
            }

            .rank-num {
                width: 30px;
                display: flex;
                justify-content: center;

                .medal {
                    width: 22px;
                    height: 22px;
                    display: flex;
                    align-items: center;
                    justify-content: center;
                    border-radius: 50%;
                    font-size: 14px;
                    font-weight: bold;
                    color: #fff;

                    &.medal-1 {
                        background: linear-gradient(to bottom, #ffda44, #ff9c39);
                    }

                    &.medal-2 {
                        background: linear-gradient(to bottom, #d3d3d3, #a0a0a0);
                    }

                    &.medal-3 {
                        background: linear-gradient(to bottom, #ffc09f, #a15c20);
                    }
                }

                .normal-rank {
                    font-size: 16px;
                    color: #999;
                }
            }

            .user-avatar {
                width: 44px;
                height: 44px;
                border-radius: 50%;
                overflow: hidden;
                margin: 0 12px;

                img {
                    width: 100%;
                    height: 100%;
                    object-fit: cover;
                }
            }

            .user-info {
                flex: 1;
                min-width: 0;

                .username {
                    font-size: 15px;
                    font-weight: 500;
                    color: #333;
                    margin-bottom: 4px;
                    white-space: nowrap;
                    overflow: hidden;
                    text-overflow: ellipsis;
                }

                .level-tag {
                    font-size: 13px;
                    color: #0A2463;
                    background-color: #f0f5ff;
                    display: inline-block;
                    padding: 2px 8px;
                    border-radius: 4px;
                }
            }

            .intimacy-value {
                text-align: right;
                min-width: 80px;

                .value {
                    font-size: 16px;
                    font-weight: bold;
                    color: #ff7c6a;
                }

                .label {
                    font-size: 12px;
                    color: #999;
                }
            }
        }
    }
}
</style>