gree_leran/pages/intergral/intergral.vue

<!-- 薪资排行 -->
<template>
  <view>
    <view class="contaier" style="background-color: #FFFFFF;">
      <view class="top_bg">
        <view class="one_box">
          <!-- 第二名 -->
          <view class="top3">
            <view class="num_two">
              <image class="huangguan2" src="../../static/rank/two.png" />
              <image class="top3_head" :src="scoreList[1].profilePicture" />
              <view class="top_name">{{scoreList[1].username}}</view>
              <view class="top_sy">{{scoreList[1].score}}<span>分</span></view>
            </view>
          </view>

          <!-- 第一名 -->
          <view class="top3">
            <view class="num_one">
              <image class="huangguan1" src="../../static/rank/one.png" />
              <image class="top3_head" :src="scoreList[0].profilePicture" />
              <view class="top_name text-bold" style="font-size: 30rpx;">{{scoreList[0].username}}</view>
              <view class="top_sy">{{scoreList[0].score}}<span>分</span></view>
            </view>
          </view>

          <!-- 第三名 -->
          <view class="top3">
            <view class="num_three">
              <image class="huangguan2" src="../../static/rank/three.png" />
              <image class="top3_head" :src="scoreList[2].profilePicture" />
              <view class="top_name">{{scoreList[2].username}}</view>
              <view class="top_sy">{{scoreList[2].score}}分</view>
            </view>
          </view>
        </view>

        <!-- 总积分和平均积分 -->
        <view class="number_sy_box">
          <view class="number_sy_box_title">
            <text>分数·统计</text>
           <!-- <text style="position: absolute; right: 20rpx;z-index: 9999; font-size: 24rpx;color: #c3c3c3;">
              截止：{{nowTime}}
            </text> -->
          </view>
          <view class="number_sy_main">
            <view style="width: 50%; text-align: center; border-right: 1px solid #eee;">
              <view class="number_num1">{{averageScore.toFixed(2)}}分</view>
              <view class="danwei">平均积分</view>
            </view>
            <view style="width: 50%; text-align: center;">
              <view class="number_num1">{{totalScore}}分</view>
              <view class="danwei">总积分</view>
            </view>
          </view>
        </view>
      </view>

      <view class="rankList_box">
        <view class="rankItem" v-for="(item, index) in rankList.slice(3)" :key="index">
          <view class="rankIndex">
            <text>{{ index + 4 }}</text>
          </view>
          <view class="HeardBox">
            <image class="rankHeard" :src="item.profilePicture ? item.profilePicture : '/static/hands.png'" />
          </view>
          <view class="NameBox">
            <view class="userName text-bold">{{item.username}}</view>
            <view class="color_ccc"><text class="text-blue">{{item.score}}</text>分</view>
          </view>
          <view class="download_box">
            <image mode="widthFix" src="../../static/rank/download.png" />
          </view>
        </view>
      </view>
    </view>
  </view>
</template>

<script setup>
import { ref, onMounted } from 'vue';
import { getScoreList } from '@/apis/score.js';
import { resToList } from './ut/dataTo.js';

const scoreList = ref([]);
const rankList = ref([]);
const totalScore = ref(0);
const averageScore = ref(0);
const nowTime = ref("");

const getRanking = async () => {
  let res = await getScoreList();
  let list = resToList(res.data);
  scoreList.value = list.slice(0, 3); // 前三名
  rankList.value = list; // 所有排名数据
  
  totalScore.value = list.reduce((sum, item) => sum + item.score, 0);
  averageScore.value = totalScore.value / list.length;

  console.log("转换结果", scoreList.value);
};

const getTime = () => {
  const date = new Date();
  const year = date.getFullYear();
  const month = date.getMonth() + 1;
  const day = date.getDate();
  const hour = date.getHours() < 10 ? "0" + date.getHours() : date.getHours();
  const minute = date.getMinutes() < 10 ? "0" + date.getMinutes() : date.getMinutes();
  const second = date.getSeconds() < 10 ? "0" + date.getSeconds() : date.getSeconds();
  const timer = `${year}-${month >= 10 ? month : "0" + month}-${day >= 10 ? day : "0" + day} ${hour}:${minute}:${second}`;
  nowTime.value = timer;
};

onMounted(() => {
  getRanking();
  getTime();
});
</script>

<style lang="scss">
.top_bg {
  width: 750rpx;
  height: 650rpx;
  background: url(http://cdn.zhoukaiwen.com/rank_bg.png) no-repeat;
  background-size: 750rpx;
  position: relative;
}

.one_box {
  width: 750rpx;
  height: 260rpx;
  
  position: absolute;
  left: 0;
  bottom: 110rpx;
  display: flex;
  justify-content: space-around;
}

.one_box .top3 {
  width: 210rpx;
  height: 280rpx;
}

.top_name {
  width: 100%;
  height: 55rpx;
  line-height: 60rpx;
  color: #f2f2f2;
  font-size: 26rpx;
  text-align: center;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.top_sy {
  width: 100%;
  height: 40rpx;
  line-height: 40rpx;
  font-size: 24rpx;
  color: rgba(255, 255, 255, .7);
  text-align: center;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.top_sy span {
  font-size: 20rpx !important;
}

.num_one {
  position: relative;
}

.huangguan1 {
  width: 60px;
  height: 60px;
  position: absolute;
  right: -10rpx;
  top: -18*2rpx;
}

.num_one .top3_head {
  width: 150rpx;
  height: 150rpx;
  border-radius: 100%;
  margin: 15rpx 0 0 30rpx;
  border: 4rpx solid #ffdd3c;
}

.num_two {
  position: relative;
}

.huangguan2 {
  width: 100rpx;
  height: 100rpx;
  position: absolute;
  right: 15rpx;
}

.num_two .top3_head {
  width: 120rpx;
  height: 120rpx;
  border-radius: 100%;
  margin: 45rpx 0 0 45rpx;
  border: 4rpx solid #bcdcdf;
}

.num_three {
  position: relative;
}

.huangguan2 {
  width: 100rpx;
  height: 100rpx;
  position: absolute;
  right: 15rpx;
}
.num_three .top3_head {
  width: 120rpx;
  height: 120rpx;
  border-radius: 100%;
  margin: 45rpx 0 0 45rpx;
  border: 4rpx solid #e29d85;
}

// 总积分和平均积分
.number_sy_box {
  width: 650rpx;
  height: 210rpx;
  background-color: #FFFFFF;
  position: absolute;
  left: 25rpx;
  display: flex;
  flex-flow: column;
  justify-content: center;
  align-items: center;
  border-radius: 20rpx;
  bottom: -115rpx;
  z-index: 999;
  padding: 22rpx;
  box-shadow: 3px 3px 15px 3px rgba(0, 0, 0, 0.1);
  margin: 0 auto;
}

.number_sy_box_title {
  color: #888888;
  font-size: 28rpx;
  display: flex;
  z-index: 9999;
  justify-content: space-between;
}

.number_sy_main {
  width: 100%;
  height: 124rpx;
  padding-top: 20rpx;
  line-height: 52rpx;
  line-height: 52rpx;
  display: flex;
  justify-content: space-around;
  position: relative;
}

.xiaoding_bg {
  position: absolute;
  right: -22rpx;
  bottom: -30rpx;
  width: 180rpx;
}

.number_num1 {
  font-size: 40rpx;
  font-weight: 500;
  color: #2fc04f;
}

.number_num2 {
  font-size: 40rpx;
  font-weight: 500;
  color: #4bac7f;
}

.danwei {
  height: 60rpx;
  line-height: 60rpx;
  font-size: 26rpx;
  color: #c9c9c9;
}

// 列表
.rankList_box {
  width: 750rpx;
  min-height: 200rpx;
  margin-top: 130rpx;
}

.rankItem:last-child {
  border: none;
}

.rankItem {
  width: 700rpx;
  height: 140rpx;
  margin: 0px auto;
  border-bottom: 1px solid #e9e9e9;
}

.rankIndex {
  width: 60rpx;
  height: 140rpx;
  line-height: 140rpx;
  text-align: center;
  color: #CCCCCC;
  font-size: 40rpx;
  float: left;
}

.HeardBox {
  width: 100rpx;
  height: 100rpx;
  margin: 20rpx;
  border-radius: 100%;
  overflow: hidden;
  float: left;
  margin-right: 25rpx;
  margin-left: 10rpx !important;
}

.HeardBox image {
  width: 100%;
  height: 100%;
}

.NameBox {
  width: 400rpx;
  height: 140rpx;
  float: left;
  padding-top: 10rpx;
  box-sizing: border-box;
}

.NameBox view {
  height: 50rpx;
  line-height: 70rpx;
}

.userName {
  min-width: 90rpx;
  font-size: 30rpx;
  float: left;
  margin-right: 20rpx;
}

.download_box {
  width: 80rpx;
  height: 140rpx;
  float: right;
}

.download_box image {
  width: 45rpx;
  margin: 50rpx auto;
  display: block;
}
</style>