perf: 优化排行榜页面
This commit is contained in:
橙子
@@ -37,16 +37,10 @@
|
||||
</template>
|
||||
<script setup>
|
||||
import useUserStore from "@/stores/user";
|
||||
import { reactive, watch, onMounted, computed, ref } from "vue";
|
||||
import { upload } from "@/apis/fileApi";
|
||||
import useAuths from "@/hooks/useAuths";
|
||||
import { reactive, watch, onMounted, ref } from "vue";
|
||||
import UserInfoCard from "./UserInfoCard/index.vue";
|
||||
import UserLimitTag from "./UserLimitTag.vue";
|
||||
|
||||
|
||||
const { getToken } = useAuths();
|
||||
const isHasToken = getToken();
|
||||
|
||||
//userInfo
|
||||
//{icon,name,role,id},根据判断userInfo是否等于未定义，来觉得是当前登录用户信息，还是其他人信息
|
||||
const props = defineProps([
|
||||
|
||||
@@ -69,37 +69,88 @@ const handleClickTabs=async (pane) => {
|
||||
|
||||
<template>
|
||||
<div class="content-body">
|
||||
<div class="header-banner">
|
||||
<h1 class="main-title">{{ tabSelect === 'money' ? '钱钱排行榜' : tabSelect === 'value' ? '价值排行榜' : '积分排行榜' }}</h1>
|
||||
</div>
|
||||
<el-tabs v-model="tabSelect" @tab-click="handleClickTabs" class="tabs">
|
||||
<el-tab-pane label="钱钱" name="money"><p class="tab-title">钱钱排行榜</p></el-tab-pane>
|
||||
<el-tab-pane label="价值" name="value"><p class="tab-title">价值排行榜</p></el-tab-pane>
|
||||
<el-tab-pane label="积分" name="points"><p class="tab-title">积分排行榜</p></el-tab-pane>
|
||||
<el-tab-pane label="钱钱" name="money"></el-tab-pane>
|
||||
<el-tab-pane label="价值" name="value"></el-tab-pane>
|
||||
<el-tab-pane label="积分" name="points"></el-tab-pane>
|
||||
</el-tabs>
|
||||
|
||||
<transition name="fade">
|
||||
<AwardPedestal v-show="isFirstPage" :goldUserInfo="pointList[0]" :silverUserInfo="pointList[1]"
|
||||
:bronzeUserInfo="pointList[2]" />
|
||||
<div v-for="item in pointListFilter" :key="item.id" class="list-div">
|
||||
</transition>
|
||||
|
||||
<div class="list-container">
|
||||
<transition-group name="list" tag="div">
|
||||
<div v-for="(item, index) in pointListFilter" :key="item.id" class="list-div" :style="{'--delay': `${index * 0.05}s`}">
|
||||
<div class="list-left">
|
||||
<span> {{ item.order }}</span>
|
||||
<span class="rank-number" :class="{'top-ten': item.order <= 10}"> {{ item.order }}</span>
|
||||
<AvatarInfo :userInfo="item" :isSelf="false" />
|
||||
<span class="money">
|
||||
{{ item.money }}
|
||||
</span>
|
||||
</div>
|
||||
<div class="list-right">
|
||||
关注
|
||||
<el-button type="primary" size="small" class="follow-btn">关注</el-button>
|
||||
</div>
|
||||
</div>
|
||||
</transition-group>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
<el-pagination background layout="total, sizes, prev, pager, next, jumper" :total="total"
|
||||
:page-sizes="[10, 30, 50, 100]" v-model:current-page="moneyQuery.skipCount"
|
||||
v-model:page-size="moneyQuery.maxResultCount" @current-change="changePage" @size-change="changePage" />
|
||||
v-model:page-size="moneyQuery.maxResultCount" @current-change="changePage" @size-change="changePage" class="pagination" />
|
||||
</div>
|
||||
</template>
|
||||
<style scoped lang="scss">
|
||||
.el-pagination {
|
||||
.header-banner {
|
||||
background: linear-gradient(135deg, #6a11cb 0%, #2575fc 100%);
|
||||
padding: 30px 0;
|
||||
border-radius: 10px;
|
||||
margin-bottom: 30px;
|
||||
box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1);
|
||||
}
|
||||
|
||||
padding: 10px;
|
||||
.main-title {
|
||||
color: white;
|
||||
text-align: center;
|
||||
font-size: 2.5rem;
|
||||
margin: 0;
|
||||
text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.3);
|
||||
}
|
||||
|
||||
.fade-enter-active, .fade-leave-active {
|
||||
transition: opacity 0.5s;
|
||||
}
|
||||
.fade-enter-from, .fade-leave-to {
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
.list-container {
|
||||
max-width: 900px;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
.list-enter-active, .list-leave-active {
|
||||
transition: all 0.5s ease;
|
||||
}
|
||||
.list-enter-from {
|
||||
opacity: 0;
|
||||
transform: translateX(-30px);
|
||||
}
|
||||
.list-leave-to {
|
||||
opacity: 0;
|
||||
transform: translateX(30px);
|
||||
}
|
||||
|
||||
.el-pagination {
|
||||
padding: 20px;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
margin-top: 20px;
|
||||
}
|
||||
|
||||
.content-body {
|
||||
@@ -107,51 +158,132 @@ const handleClickTabs=async (pane) => {
|
||||
margin-top: 20px;
|
||||
padding: 20px;
|
||||
background-color: #ffffff;
|
||||
border-radius: 10px;
|
||||
box-shadow: 0 5px 15px rgba(0, 0, 0, 0.05);
|
||||
}
|
||||
|
||||
.list-div {
|
||||
justify-content: space-between;
|
||||
border-radius: 4px;
|
||||
border-radius: 8px;
|
||||
display: flex;
|
||||
background-color: #ffffff;
|
||||
height: 80px;
|
||||
width: 850px;
|
||||
width: 100%;
|
||||
cursor: pointer;
|
||||
padding: 16px 12px;
|
||||
padding: 16px 20px;
|
||||
margin-bottom: 10px;
|
||||
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.03);
|
||||
transition: all 0.3s ease;
|
||||
animation: slideIn 0.5s ease backwards;
|
||||
animation-delay: var(--delay);
|
||||
|
||||
.list-left {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
||||
span {
|
||||
.rank-number {
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
margin-right: 20px;
|
||||
color: #515767;
|
||||
font-size: 1.5rem;
|
||||
font-weight: 600;
|
||||
line-height: 2rem;
|
||||
display: flex;
|
||||
align-content: center;
|
||||
flex-wrap: wrap;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
position: relative;
|
||||
|
||||
&.top-ten {
|
||||
color: white;
|
||||
background: linear-gradient(135deg, #ff9a9e 0%, #fad0c4 99%, #fad0c4 100%);
|
||||
border-radius: 50%;
|
||||
box-shadow: 0 4px 8px rgba(255, 154, 158, 0.3);
|
||||
}
|
||||
}
|
||||
|
||||
.money {
|
||||
font-size: 1.0rem;
|
||||
color: #ff0000;
|
||||
font-size: 1.2rem;
|
||||
color: #ff5252;
|
||||
font-weight: bold;
|
||||
margin-left: 15px;
|
||||
}
|
||||
}
|
||||
|
||||
.list-right {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
||||
.follow-btn {
|
||||
transition: all 0.3s;
|
||||
background: linear-gradient(45deg, #667eea 0%, #764ba2 100%);
|
||||
border: none;
|
||||
|
||||
&:hover {
|
||||
transform: translateY(-2px);
|
||||
box-shadow: 0 5px 10px rgba(118, 75, 162, 0.3);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.list-div:hover {
|
||||
background-color: #f7f8fa;
|
||||
background-color: #f8f9ff;
|
||||
transform: translateY(-3px);
|
||||
box-shadow: 0 5px 15px rgba(0, 0, 0, 0.08);
|
||||
}
|
||||
.tabs :deep(.el-tabs__nav-wrap)
|
||||
{
|
||||
|
||||
.tabs :deep(.el-tabs__nav-wrap) {
|
||||
display: flex;
|
||||
justify-content: center !important;
|
||||
}
|
||||
.tab-title
|
||||
{
|
||||
text-align: center;
|
||||
font-size: 30px;
|
||||
margin-bottom: 20px;
|
||||
|
||||
.tabs :deep(.el-tabs__item) {
|
||||
font-size: 18px;
|
||||
padding: 0 30px;
|
||||
transition: all 0.3s;
|
||||
|
||||
&.is-active {
|
||||
font-weight: bold;
|
||||
color: #6a11cb;
|
||||
transform: scale(1.05);
|
||||
}
|
||||
|
||||
&:hover {
|
||||
color: #6a11cb;
|
||||
}
|
||||
}
|
||||
|
||||
.tabs :deep(.el-tabs__active-bar) {
|
||||
background-color: #6a11cb;
|
||||
height: 3px;
|
||||
}
|
||||
|
||||
@keyframes slideIn {
|
||||
from {
|
||||
opacity: 0;
|
||||
transform: translateY(20px);
|
||||
}
|
||||
to {
|
||||
opacity: 1;
|
||||
transform: translateY(0);
|
||||
}
|
||||
}
|
||||
|
||||
.pagination {
|
||||
:deep(.el-pagination__sizes),
|
||||
:deep(.btn-prev),
|
||||
:deep(.btn-next),
|
||||
:deep(.el-pager li) {
|
||||
transition: all 0.3s;
|
||||
|
||||
&:hover {
|
||||
transform: translateY(-2px);
|
||||
}
|
||||
}
|
||||
|
||||
:deep(.el-pager li.active) {
|
||||
background-color: #6a11cb;
|
||||
color: white;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -1,49 +1,160 @@
|
||||
<script setup>
|
||||
import AvatarInfo from "@/components/AvatarInfo.vue";
|
||||
import { ref, onMounted } from "vue";
|
||||
|
||||
const props = defineProps([
|
||||
"goldUserInfo",
|
||||
"silverUserInfo",
|
||||
"bronzeUserInfo",
|
||||
]);
|
||||
|
||||
const isVisible = ref(false);
|
||||
|
||||
onMounted(() => {
|
||||
setTimeout(() => {
|
||||
isVisible.value = true;
|
||||
}, 300);
|
||||
});
|
||||
</script>
|
||||
<template>
|
||||
<div class="podium">
|
||||
<div class="avatar">
|
||||
<AvatarInfo :userInfo="silverUserInfo" :isSelf="true" />
|
||||
<div class="podium-container">
|
||||
<div class="podium" :class="{ 'visible': isVisible }">
|
||||
<div class="avatar silver-position">
|
||||
<div class="avatar-wrapper">
|
||||
<AvatarInfo style="display: flex;" :userInfo="{nick:'123'}" :isSelf="true" />
|
||||
</div>
|
||||
<div class="tier silver">
|
||||
<h2>第二</h2>
|
||||
<h3>{{ silverUserInfo?.money }}</h3>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="avatar">
|
||||
<div class="avatar gold-position">
|
||||
<div class="avatar-wrapper">
|
||||
<AvatarInfo :userInfo="goldUserInfo" :isSelf="true" :size="50" />
|
||||
</div>
|
||||
<div class="tier gold">
|
||||
<h2>第一</h2>
|
||||
<h3>{{ goldUserInfo?.money }}</h3>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="avatar">
|
||||
<div class="avatar bronze-position">
|
||||
<div class="avatar-wrapper">
|
||||
<AvatarInfo :userInfo="bronzeUserInfo" :isSelf="true" />
|
||||
</div>
|
||||
<div class="tier bronze">
|
||||
<h2>第三</h2>
|
||||
<h3>{{ bronzeUserInfo?.money }}</h3>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<style scoped>
|
||||
h2{
|
||||
margin: 10px;
|
||||
text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.3);
|
||||
}
|
||||
h3{
|
||||
margin: 10px;
|
||||
font-size: 1.5rem;
|
||||
text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.3);
|
||||
}
|
||||
.podium-container {
|
||||
position: relative;
|
||||
margin: 40px 0;
|
||||
}
|
||||
.avatar {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
flex-direction: column;
|
||||
position: relative;
|
||||
transition: all 0.8s cubic-bezier(0.175, 0.885, 0.32, 1.275);
|
||||
}
|
||||
|
||||
.visible .gold-position {
|
||||
transform: translateY(0);
|
||||
opacity: 1;
|
||||
transition-delay: 0.3s;
|
||||
}
|
||||
|
||||
.visible .silver-position {
|
||||
transform: translateY(0);
|
||||
opacity: 1;
|
||||
transition-delay: 0.6s;
|
||||
}
|
||||
|
||||
.visible .bronze-position {
|
||||
transform: translateY(0);
|
||||
opacity: 1;
|
||||
transition-delay: 0.9s;
|
||||
}
|
||||
|
||||
.medal-icon {
|
||||
position: absolute;
|
||||
width: 30px;
|
||||
height: 30px;
|
||||
border-radius: 50%;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
color: white;
|
||||
font-weight: bold;
|
||||
top: -10px;
|
||||
right: 55px;
|
||||
z-index: 2;
|
||||
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
|
||||
}
|
||||
|
||||
.gold-medal {
|
||||
background: #ffd700;
|
||||
}
|
||||
|
||||
.silver-medal {
|
||||
background: #c0c0c0;
|
||||
}
|
||||
|
||||
.bronze-medal {
|
||||
background: #cd7f32;
|
||||
}
|
||||
|
||||
.crown {
|
||||
position: absolute;
|
||||
top: -30px;
|
||||
left: 50%;
|
||||
z-index: 10;
|
||||
transform: translateX(-53px);
|
||||
}
|
||||
|
||||
.gold-crown:before,
|
||||
.gold-crown:after {
|
||||
content: "";
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
width: 0;
|
||||
height: 0;
|
||||
}
|
||||
|
||||
.gold-crown {
|
||||
width: 30px;
|
||||
height: 20px;
|
||||
background: #ffd700;
|
||||
border-radius: 4px 4px 0 0;
|
||||
}
|
||||
|
||||
.gold-crown:before {
|
||||
left: -12px;
|
||||
border-left: 18px solid transparent;
|
||||
border-right: 0px solid transparent;
|
||||
border-bottom: 30px solid #ffd700;
|
||||
}
|
||||
|
||||
.gold-crown:after {
|
||||
right: -12px;
|
||||
border-left: 0px solid transparent;
|
||||
border-right: 18px solid transparent;
|
||||
border-bottom: 30px solid #ffd700;
|
||||
}
|
||||
|
||||
.podium {
|
||||
@@ -51,6 +162,7 @@ h3{
|
||||
display: flex;
|
||||
align-items: flex-end;
|
||||
position: relative;
|
||||
padding: 20px 0;
|
||||
}
|
||||
|
||||
.tier {
|
||||
@@ -65,33 +177,48 @@ h3{
|
||||
color: white;
|
||||
font-size: 24px;
|
||||
position: relative;
|
||||
transform: perspective(1000px) rotateX(5deg);
|
||||
transition: all 0.3s ease;
|
||||
}
|
||||
|
||||
.gold:hover {
|
||||
box-shadow: 0 0 40px 20px rgba(255, 215, 0, 0.7); /* 金色光辉效果 */
|
||||
}
|
||||
box-shadow: 0 0 40px 20px rgba(255, 215, 0, 0.7);
|
||||
transform: perspective(1000px) rotateX(0deg) scale(1.05);
|
||||
}
|
||||
|
||||
.gold {
|
||||
background: linear-gradient(to bottom, #ffd700 0%, #ffcc00 100%);
|
||||
height: 250px;
|
||||
box-shadow: 0 8px 20px rgba(255, 215, 0, 0.5);
|
||||
z-index: 3;
|
||||
}
|
||||
.silver:hover {
|
||||
box-shadow: 0 0 20px 10px rgba(192, 192, 192, 0.7); /* 金色光辉效果 */
|
||||
box-shadow: 0 0 20px 10px rgba(192, 192, 192, 0.7);
|
||||
transform: perspective(1000px) rotateX(0deg) scale(1.05);
|
||||
}
|
||||
|
||||
.silver {
|
||||
background: linear-gradient(to bottom, #c0c0c0 0%, #d3d3d3 100%);
|
||||
height: 200px;
|
||||
box-shadow: 0 6px 18px rgba(192, 192, 192, 0.5);
|
||||
z-index: 2;
|
||||
}
|
||||
.bronze:hover {
|
||||
box-shadow: 0 0 20px 10px rgba(205, 127, 50, 0.7); /* 金色光辉效果 */
|
||||
box-shadow: 0 0 20px 10px rgba(205, 127, 50, 0.7);
|
||||
transform: perspective(1000px) rotateX(0deg) scale(1.05);
|
||||
}
|
||||
.bronze {
|
||||
background: linear-gradient(to bottom, #cd7f32 0%, #a0522d 100%);
|
||||
height: 170px;
|
||||
box-shadow: 0 4px 16px rgba(205, 127, 50, 0.5);
|
||||
z-index: 1;
|
||||
}
|
||||
.avatar-wrapper {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
margin-bottom: 10px;
|
||||
z-index: 10;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
</style>
|
||||
Reference in New Issue
Block a user