shoot-miniprograms/src/components/PlayersRow.vue

<script setup>
defineProps({
  avatar: {
    type: String,
    default: "",
  },
  blueTeam: {
    type: Array,
    default: () => [],
  },
  redTeam: {
    type: Array,
    default: () => [],
  },
  currentShooterId: {
    type: Number,
    default: 0,
  },
});
</script>

<template>
  <view class="container">
    <image v-if="avatar" class="avatar" :src="avatar" mode="widthFix" />
    <view
      v-if="blueTeam.length && redTeam.length"
      :style="{ height: 20 + blueTeam.length * 20 + 'px' }"
    >
      <view
        v-for="(player, index) in blueTeam"
        :key="index"
        :style="{
          top: index * 20 + 'px',
          zIndex: blueTeam.length - index,
          left: 0,
        }"
      >
        <image
          class="avatar"
          :src="player.avatar"
          mode="widthFix"
          :style="{
            borderColor: currentShooterId === player.id ? '#5fadff' : '#fff',
          }"
        />
        <text
          :style="{
            color: currentShooterId === player.id ? '#5fadff' : '#fff',
            fontSize: currentShooterId === player.id ? 16 : 12 + 'px',
          }"
        >
          {{ player.name }}
        </text>
      </view>
    </view>
    <view
      v-if="!avatar"
      :style="{
        height: 20 + redTeam.length * 20 + 'px',
      }"
    >
      <view
        v-for="(player, index) in redTeam"
        :key="index"
        :style="{
          top: index * 20 + 'px',
          zIndex: redTeam.length - index,
          right: 0,
        }"
      >
        <text
          :style="{
            color: currentShooterId === player.id ? '#ff6060' : '#fff',
            fontSize: currentShooterId === player.id ? 16 : 12 + 'px',
            textAlign: 'right',
          }"
        >
          {{ player.name }}
        </text>
        <image
          class="avatar"
          :src="player.avatar"
          mode="widthFix"
          :style="{
            borderColor: currentShooterId === player.id ? '#ff6060' : '#fff',
          }"
        />
      </view>
    </view>
  </view>
</template>

<style scoped>
.container {
  width: calc(100% - 30px);
  margin: 15px;
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
}
.container > view {
  width: 50%;
  position: relative;
}
.container > view > view {
  position: absolute;
  top: -20px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.3s linear;
}
.container > view > view > text {
  margin: 0 10px;
  overflow: hidden;
  width: 100px;
}
.avatar {
  width: 40px;
  height: 40px;
  min-width: 40px;
  min-height: 40px;
  border: 1px solid #fff;
  border-radius: 50%;
}
.red-avatar {
  border: 1px solid #ff6060;
}
.blue-avatar {
  border: 1px solid #5fadff;
}
</style>