feat:合并
This commit is contained in:
橙子
113
Yi.Bbs.Vue3/src/views/money/Index.vue
Normal file
113
Yi.Bbs.Vue3/src/views/money/Index.vue
Normal file
@@ -0,0 +1,113 @@
|
||||
<script setup>
|
||||
import AwardPedestal from "./components/AwardPedestal.vue";
|
||||
import AvatarInfo from "@/components/AvatarInfo.vue";
|
||||
import { onMounted, reactive, ref, computed } from "vue";
|
||||
import {
|
||||
getRankingPoints,
|
||||
} from "@/apis/analyseApi.js";
|
||||
const pointList = ref([]);
|
||||
const total = ref(0);
|
||||
const moneyQuery = reactive({ skipCount: 1, maxResultCount: 30 });
|
||||
|
||||
const isFirstPage = computed(() => {
|
||||
return moneyQuery.skipCount == 1;
|
||||
})
|
||||
|
||||
const pointListFilter=computed(() => {
|
||||
//如果是第一页，去掉前3个
|
||||
if(moneyQuery.skipCount == 1)
|
||||
{
|
||||
return pointList.value.slice(3);
|
||||
}
|
||||
return pointList.value;
|
||||
})
|
||||
|
||||
|
||||
//初始化
|
||||
onMounted(async () => {
|
||||
await initData();
|
||||
});
|
||||
|
||||
const initData = async () => {
|
||||
const { data: pointData } = await getRankingPoints(moneyQuery);
|
||||
pointList.value = pointData.items;;
|
||||
total.value = pointData.totalCount
|
||||
}
|
||||
//分页事件
|
||||
const changePage = async (currentPage) => {
|
||||
await initData();
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="content-body">
|
||||
<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">
|
||||
<div class="list-left">
|
||||
<span> {{ item.order }}</span>
|
||||
<AvatarInfo :userInfo="item" :isSelf="false" />
|
||||
<span class="money">
|
||||
{{ item.money }}
|
||||
</span>
|
||||
</div>
|
||||
<div class="list-right">
|
||||
关注
|
||||
</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" />
|
||||
</div>
|
||||
</template>
|
||||
<style scoped lang="scss">
|
||||
.el-pagination {
|
||||
|
||||
padding: 10px;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.content-body {
|
||||
margin-bottom: 40px;
|
||||
margin-top: 20px;
|
||||
padding: 20px;
|
||||
background-color: #ffffff;
|
||||
}
|
||||
|
||||
.list-div {
|
||||
justify-content: space-between;
|
||||
border-radius: 4px;
|
||||
display: flex;
|
||||
background-color: #ffffff;
|
||||
height: 80px;
|
||||
width: 850px;
|
||||
cursor: pointer;
|
||||
padding: 16px 12px;
|
||||
|
||||
.list-left {
|
||||
display: flex;
|
||||
|
||||
span {
|
||||
margin-right: 20px;
|
||||
color: #515767;
|
||||
font-size: 1.5rem;
|
||||
font-weight: 600;
|
||||
line-height: 2rem;
|
||||
display: flex;
|
||||
align-content: center;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
.money {
|
||||
font-size: 1.0rem;
|
||||
color: #ff0000;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.list-div:hover {
|
||||
background-color: #f7f8fa;
|
||||
}
|
||||
</style>
|
||||
92
Yi.Bbs.Vue3/src/views/money/components/AwardPedestal.vue
Normal file
92
Yi.Bbs.Vue3/src/views/money/components/AwardPedestal.vue
Normal file
@@ -0,0 +1,92 @@
|
||||
<script setup>
|
||||
import AvatarInfo from "@/components/AvatarInfo.vue";
|
||||
const props = defineProps([
|
||||
"goldUserInfo",
|
||||
"silverUserInfo",
|
||||
"bronzeUserInfo",
|
||||
]);
|
||||
</script>
|
||||
<template>
|
||||
<div class="podium">
|
||||
<div class="avatar">
|
||||
<AvatarInfo :userInfo="silverUserInfo" :isSelf="true" />
|
||||
<div class="tier silver">
|
||||
<h2>第二</h2>
|
||||
<h3>{{ silverUserInfo?.money }}</h3>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="avatar">
|
||||
<AvatarInfo :userInfo="goldUserInfo" :isSelf="true" :size="50" />
|
||||
<div class="tier gold">
|
||||
<h2>第一</h2>
|
||||
<h3>{{ goldUserInfo?.money }}</h3>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="avatar">
|
||||
<AvatarInfo :userInfo="bronzeUserInfo" :isSelf="true" />
|
||||
<div class="tier bronze">
|
||||
<h2>第三</h2>
|
||||
<h3>{{ bronzeUserInfo?.money }}</h3>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<style scoped>
|
||||
h2{
|
||||
margin: 10px;
|
||||
}
|
||||
h3{
|
||||
margin: 10px;
|
||||
}
|
||||
.avatar {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.podium {
|
||||
justify-content: center;
|
||||
display: flex;
|
||||
align-items: flex-end;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.tier {
|
||||
flex-direction: column;
|
||||
width: 150px;
|
||||
height: 200px;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
margin: 5px 40px 40px 40px;
|
||||
border-radius: 20px;
|
||||
color: white;
|
||||
font-size: 24px;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.gold:hover {
|
||||
box-shadow: 0 0 20px 10px rgba(255, 215, 0, 0.7); /* 金色光辉效果 */
|
||||
}
|
||||
|
||||
.gold {
|
||||
background: linear-gradient(to bottom, #ffd700 0%, #ffcc00 100%);
|
||||
height: 250px;
|
||||
box-shadow: 0 8px 20px rgba(255, 215, 0, 0.5);
|
||||
}
|
||||
|
||||
.silver {
|
||||
background: linear-gradient(to bottom, #c0c0c0 0%, #d3d3d3 100%);
|
||||
height: 200px;
|
||||
box-shadow: 0 6px 18px rgba(192, 192, 192, 0.5);
|
||||
}
|
||||
|
||||
.bronze {
|
||||
background: linear-gradient(to bottom, #cd7f32 0%, #a0522d 100%);
|
||||
height: 170px;
|
||||
box-shadow: 0 4px 16px rgba(205, 127, 50, 0.5);
|
||||
}
|
||||
|
||||
</style>
|
||||
Reference in New Issue
Block a user