shoot-miniprograms/src/pages/rank-list.vue

<script setup>
import { ref, onMounted } from "vue";
import Avatar from "@/components/Avatar.vue";
const isIos = ref(true);

onMounted(() => {
  const deviceInfo = uni.getDeviceInfo();
  isIos.value = deviceInfo.osName === "ios";
});

const selectedIndex = ref(0);

const handleSelect = (index) => {
  selectedIndex.value = index;
};

const subTitles = ["排位赛积分", "本周MVP次数", "本周十环次数"];
</script>

<template>
  <view class="container">
    <navigator
      open-type="navigateBack"
      class="back-btn"
      :style="{ top: `${isIos ? 55 : 45}px` }"
    >
      <image src="../static/back.png" mode="widthFix" />
    </navigator>
    <image src="../static/rankbg.png" mode="widthFix" class="header-bg" />
    <view class="rank-tabs">
      <view
        v-for="(rankType, index) in ['积分表', 'MVP榜', '十环榜']"
        :key="index"
        :style="{
          fontSize: index === selectedIndex ? '16px' : '14px',
          color: index === selectedIndex ? '#000' : '#fff',
          backgroundColor: index === selectedIndex ? '#FFD947' : '#383737',
        }"
        @tap="handleSelect(index)"
      >
        {{ rankType }}
      </view>
    </view>
    <view class="rank-list">
      <view class="rank-list-header">
        <text>排名</text>
        <text>用户ID</text>
        <text>{{ subTitles[selectedIndex] }}</text>
      </view>
      <view
        v-for="(_, index) in new Array(100).fill(1)"
        :key="index"
        class="rank-list-item"
        :style="{
          backgroundColor: index % 2 === 0 ? '#9898981f' : 'transparent',
        }"
      >
        <image
          v-if="index === 0"
          class="player-bg"
          src="../static/melee-player-bg1.png"
          mode="aspectFill"
        />
        <image
          v-if="index === 1"
          class="player-bg"
          src="../static/melee-player-bg2.png"
          mode="aspectFill"
        />
        <image
          v-if="index === 2"
          class="player-bg"
          src="../static/melee-player-bg3.png"
          mode="aspectFill"
        />
        <image
          v-if="index === 0"
          class="player-crown"
          src="../static/champ1.png"
          mode="widthFix"
        />
        <image
          v-if="index === 1"
          class="player-crown"
          src="../static/champ2.png"
          mode="widthFix"
        />
        <image
          v-if="index === 2"
          class="player-crown"
          src="../static/champ3.png"
          mode="widthFix"
        />
        <view v-if="index > 2" class="view-crown">{{ index + 1 }}</view>
        <Avatar src="../static/avatar.png" />
        <view class="rank-item-content">
          <text>打酱油大声路过</text>
          <text>钻石3级，20场</text>
        </view>
        <text class="rank-item-integral"
          ><text
            :style="{ fontSize: '14px', color: '#fff', marginRight: '5px' }"
            >9999</text
          >分</text
        >
      </view>
    </view>
    <view class="my-rank-data">
      <image src="../static/modal-content-bg.png" mode="widthFix" />
      <text>123</text>
      <Avatar src="../static/avatar.png" />
      <view class="rank-item-content">
        <text>打酱油大声路过</text>
        <text>钻石3级，20场</text>
      </view>
      <text class="rank-item-integral"
        ><text :style="{ fontSize: '14px', color: '#fff', marginRight: '5px' }"
          >9999</text
        >分</text
      >
    </view>
  </view>
</template>

<style scoped>
.container {
  position: relative;
  padding-bottom: 100px;
}
.header-bg {
  width: 100%;
}
.back-btn {
  display: flex;
  align-items: center;
  position: absolute;
}
.back-btn > image {
  width: 22px;
  height: 22px;
  margin: 0 10px;
}
.rank-tabs {
  width: calc(100% - 20px);
  display: flex;
  justify-content: space-around;
  padding: 0 10px;
  margin-top: -15px;
}
.rank-tabs > view {
  width: 25%;
  padding: 10px;
  text-align: center;
  border-radius: 20px;
}
.rank-list {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: calc(100% - 20px);
  color: #fff9;
  font-size: 12px;
  margin: 10px;
  border: 1px solid rgb(255 217 71 / 0.2);
  border-radius: 10px;
  background-color: #313131;
}
.rank-list > view {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  overflow: hidden;
  position: relative;
}
.rank-list-header {
  width: calc(100% - 20px) !important;
  padding: 10px;
}
.rank-list-header > text:nth-child(2) {
  width: 14%;
}
.rank-list-header > text:last-child {
  width: 30%;
  text-align: right;
}
.rank-list-item {
  padding: 10px 0;
}
.player-bg {
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
}
.player-crown {
  position: relative;
  width: 27px;
  margin: 0 15px;
}
.view-crown {
  width: 27px;
  height: 27px;
  line-height: 27px;
  text-align: center;
  border-radius: 50%;
  margin: 0 15px;
  color: #fff;
  background-color: #676767;
  position: relative;
}
.rank-item-content {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  width: 50%;
  position: relative;
  padding-left: 10px;
}
.rank-item-content > text:first-child {
  color: #fff;
  font-size: 14px;
  margin-bottom: 3px;
}
.rank-list-item > text:last-child {
  margin-right: 10px;
}
.my-rank-data {
  position: fixed;
  bottom: 0;
  left: 0;
  width: calc(100% - 30px);
  padding: 15px;
  padding-bottom: 30px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  color: #fff9;
  font-size: 12px;
}
.my-rank-data > image:first-child {
  position: absolute;
  width: 100%;
  left: 0;
  top: -5px;
}
.my-rank-data > text:nth-child(2) {
  background-color: #c1a434;
  position: relative;
  color: #fff;
  padding: 3px 5px;
  border-radius: 20px;
  margin-right: 10px;
  font-size: 14px;
}
.my-rank-data > text:last-child {
  position: relative;
  margin-right: 10px;
}
.my-rank-data > .rank-item-content > text:first-child {
  color: #fed847;
}
.my-rank-data > .rank-item-integral {
  color: #fff9;
  font-size: 12px;
  margin-right: 0 !important;
}
</style>