添加2v2页面

src/components/TeamAvatars.vue

@@ -0,0 +1,94 @@
+<script setup>
+import { ref, watch } from "vue";
+const props = defineProps({
+  isRed: {
+    type: Boolean,
+    default: true,
+  },
+  team: {
+    type: Array,
+    default: () => [],
+  },
+  youTurn: {
+    type: Boolean,
+    default: false,
+  },
+});
+const players = ref(props.team);
+watch(
+  () => props.youTurn,
+  (newVal) => {
+    players.value = props.team;
+  }
+);
+</script>
+
+<template>
+  <view class="container">
+    <view
+      v-for="(item, index) in team"
+      :key="index"
+      class="player"
+      :style="{
+        width: (youTurn ? 40 - index * 5 : 30) + 'px',
+        height: (youTurn ? 40 - index * 5 : 30) + 'px',
+        borderColor: isRed ? '#ff6060' : '#5fadff',
+        zIndex: players.length - index,
+        top: youTurn ? index * 2 + 'px' : '6px',
+        left: (isRed ? index * 20 : 35 - index * 15) + 'px',
+      }"
+    >
+      <image :src="item.avatar || '../static/user-icon.png'" mode="widthFix" />
+      <text
+        v-if="youTurn && index === 0"
+        :style="{ backgroundColor: isRed ? '#ff6060' : '#5fadff' }"
+        >{{ isRed ? "红队" : "蓝队" }}</text
+      >
+    </view>
+    <text
+      v-if="youTurn"
+      class="truncate"
+      :style="{
+        color: isRed ? '#ff6060' : '#5fadff',
+        [isRed ? 'left' : 'right']: 0,
+      }"
+      >{{ team[0].name }}</text
+    >
+  </view>
+</template>
+
+<style scoped>
+.container {
+  display: flex;
+  align-items: center;
+  position: relative;
+  width: 20vw;
+  height: 45px;
+}
+.container > text {
+  position: absolute;
+  font-size: 10px;
+  text-align: center;
+  width: 40px;
+  bottom: -12px;
+}
+.player {
+  transition: all 0.3s ease;
+  position: absolute;
+  border-radius: 50%;
+  overflow: hidden;
+  border: 1px solid;
+}
+.player > image {
+  width: 100%;
+}
+.player > text {
+  position: absolute;
+  font-size: 8px;
+  text-align: center;
+  width: 40px;
+  left: 0px;
+  bottom: 0px;
+  color: #fff;
+}
+</style>