shoot-miniprograms/src/pages/match-room.vue

<script setup>
import AppBackground from "@/components/AppBackground.vue";
import Header from "@/components/Header.vue";
import BowTarget from "@/components/BowTarget.vue";
import ShootProgress from "@/components/ShootProgress.vue";
import PlayersRow from "@/components/PlayersRow.vue";
import PlayerScore from "@/components/PlayerScore.vue";
const teams = [
  { name: "选手1", avatar: "../static/avatar.png" },
  { name: "选手1", avatar: "../static/avatar.png" },
  { name: "选手1", avatar: "../static/avatar.png" },
];
</script>

<template>
  <view class="container">
    <AppBackground />
    <Header title="排位赛" />
    <view>
      <ShootProgress tips="请红队射箭-第一轮" />
      <PlayersRow :blueTeam="teams" :redTeam="teams" />
      <BowTarget :power="45" currentRound="1" :totalRound="3" debug />
      <PlayerScore
        name="某某选手"
        avatar="../static/avatar.png"
        :scores="[1, 4, 7, 4, 2, 2, 4, 4, 5, 8]"
      />
      <PlayerScore
        name="下个选手"
        avatar="../static/avatar.png"
        :scores="[1, 4, 7, 4, 2, 2, 4, 4, 5, 8]"
      />
    </view>
  </view>
</template>

<style scoped>
.container {
  width: 100vw;
  padding-bottom: 20px;
}
.players {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  column-gap: 15px;
  row-gap: 10px;
  margin-bottom: 20px;
  font-size: 14px;
}
.players > view {
  width: 45%;
  display: flex;
  align-items: center;
  position: relative;
  color: #fff;
  height: 90px;
  overflow: hidden;
}
.players > view > image:first-child {
  width: 100%;
  position: absolute;
  z-index: -1;
}
.players > view > image:nth-child(2) {
  width: 40px;
  margin: 0 10px;
  border: 1px solid #fff;
  border-radius: 50%;
}
.founder {
  position: absolute;
  background-color: #fed847;
  top: 0;
  color: #000;
  font-size: 12px;
  padding: 2px 5px;
  border-top-left-radius: 10px;
  border-bottom-right-radius: 10px;
}
.player-bg {
  position: absolute;
  width: 52px;
  right: 0;
}
.tips {
  color: #fff9;
  width: 100%;
  text-align: center;
  display: block;
  margin-top: 10px;
  font-size: 14px;
}
.player-unknow {
  width: 40px;
  height: 40px;
  margin: 0 10px;
  border: 1px solid #fff3;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: #69686866;
}
.player-unknow > image {
  width: 40%;
}
</style>