UI开发

src/components/PlayersRow.vue

@@ -0,0 +1,122 @@
+<script setup>
+defineProps({
+  avatar: {
+    type: String,
+    default: "",
+  },
+  blueTeam: {
+    type: Array,
+    default: () => [],
+  },
+  redTeam: {
+    type: Array,
+    default: () => [],
+  },
+});
+</script>
+
+<template>
+  <view class="container">
+    <image v-if="avatar" class="avatar" :src="avatar" mode="widthFix" />
+    <view v-if="!avatar" :style="{ height: 20 + blueTeam.length * 20 + 'px' }">
+      <view
+        v-for="(item, index) in blueTeam"
+        :key="index"
+        :style="{
+          top: index * 20 + 'px',
+          zIndex: blueTeam.length - index,
+          left: 0,
+        }"
+      >
+        <image
+          class="avatar"
+          :src="item.avatar"
+          mode="widthFix"
+          :style="{
+            borderColor: index === 0 ? '#5fadff' : '#fff',
+          }"
+        />
+        <text
+          :style="{
+            color: index === 0 ? '#5fadff' : '#fff',
+            fontSize: index === 0 ? 16 : 12 + 'px',
+          }"
+        >
+          {{ item.name }}
+        </text>
+      </view>
+    </view>
+    <view
+      v-if="!avatar"
+      :style="{
+        height: 20 + blueTeam.length * 20 + 'px',
+      }"
+    >
+      <view
+        v-for="(item, index) in blueTeam"
+        :key="index"
+        :style="{
+          top: index * 20 + 'px',
+          zIndex: blueTeam.length - index,
+          right: 0,
+        }"
+      >
+        <text
+          :style="{
+            color: index === 0 ? '#ff6060' : '#fff',
+            fontSize: index === 0 ? 16 : 12 + 'px',
+          }"
+        >
+          {{ item.name }}
+        </text>
+        <image
+          class="avatar"
+          :src="item.avatar"
+          mode="widthFix"
+          :style="{
+            borderColor: index === 0 ? '#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;
+}
+.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>