shoot-miniprograms/src/components/PlayerSeats.vue

<script setup>
import Avatar from "@/components/Avatar.vue";

const props = defineProps({
  total: {
    type: Number,
    default: 10,
  },
  players: {
    type: Array,
    default: () => [],
  },
});
const seats = new Array(props.total).fill(1);
</script>

<template>
  <view class="players">
    <view v-for="(_, index) in seats" :key="index">
      <image src="../static/player-bg.png" mode="widthFix" />
      <view v-if="players[index] && players[index].name" class="avatar">
        <Avatar
          :src="players[index].avatar || '../static/user-icon.png'"
          :size="40"
        />
        <text
          :style="{ opacity: players[index] && !!players[index].state ? 1 : 0 }"
          >已准备</text
        >
      </view>
      <view v-else class="player-unknow">
        <image src="../static/question-mark.png" mode="widthFix" />
      </view>
      <text v-if="players[index] && players[index].name">{{
        players[index].name
      }}</text>
      <text v-else :style="{ color: '#fff9' }">虚位以待</text>
      <view v-if="index === 0" class="founder">管理员</view>
      <image
        :src="`../static/player-${index + 1}.png`"
        mode="widthFix"
        class="player-bg"
      />
    </view>
  </view>
</template>

<style scoped>
.players {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-start;
  -moz-column-gap: 20px;
  column-gap: 14px;
  margin-bottom: 20px;
  font-size: 14px;
  padding: 0 14px;
}
.players > view {
  width: calc(50% - 7px);
  display: flex;
  align-items: center;
  position: relative;
  color: #fff;
  height: 100px;
  overflow: hidden;
}
.players > view > image:first-child {
  width: 100%;
  position: absolute;
  z-index: -1;
}
.avatar {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 0 24rpx;
  margin-top: 16rpx;
}
.avatar > text {
  background-color: #2c261fb3;
  border: 1rpx solid #a3793f66;
  color: #fed847;
  font-size: 16rpx;
  border-radius: 20rpx;
  width: 70rpx;
  text-align: center;
  margin-top: -16rpx;
  position: relative;
  height: 28rpx;
  line-height: 28rpx;
}
.players > view > text:nth-child(3) {
  width: 20vw;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.founder {
  position: absolute;
  background-color: #fed847;
  top: 6px;
  color: #000;
  font-size: 10px;
  padding: 2px 5px;
  border-top-left-radius: 10px;
  border-bottom-right-radius: 10px;
}
.player-bg {
  position: absolute;
  width: 52px;
  right: 0;
}
.player-unknow {
  width: 40px;
  height: 40px;
  margin: 0 24rpx;
  border: 1px solid #fff3;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: #69686866;
}
.player-unknow > image {
  width: 40%;
}
</style>