You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
438 lines
12 KiB
438 lines
12 KiB
<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>
|