feat:合并

Yi.Bbs.Vue3/src/views/money/Index.vue

@@ -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>

Yi.Bbs.Vue3/src/views/money/components/AwardPedestal.vue

@@ -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>