UI开发

src/components/PlayerScore.vue

@@ -0,0 +1,86 @@
+<script setup>
+defineProps({
+  avatar: {
+    type: String,
+    default: "",
+  },
+  name: {
+    type: String,
+    default: "",
+  },
+  scores: {
+    type: Array,
+    default: () => [],
+  },
+});
+const rowCount = new Array(6).fill(0);
+</script>
+
+<template>
+  <view class="container">
+    <image :src="avatar" mode="widthFix" />
+    <text>{{ name }}</text>
+    <view>
+      <view>
+        <view v-for="(_, index) in rowCount" :key="index">
+          <text>{{ scores[index + 6] ? `${scores[index + 6]}环` : "-" }}</text>
+        </view>
+      </view>
+      <view>
+        <view v-for="(_, index) in rowCount" :key="index">
+          <text>{{ scores[index + 6] ? `${scores[index + 6]}环` : "-" }}</text>
+        </view>
+      </view>
+    </view>
+    <text>{{ scores.reduce((last, next) => last + next) }}环</text>
+  </view>
+</template>
+
+<style scoped>
+.container {
+  width: calc(100% - 75px);
+  display: flex;
+  align-items: center;
+  border: 1px solid #fff3;
+  margin: 10px 0;
+  margin-left: 40px;
+  border-radius: 15px;
+  padding: 10px;
+  color: #fff9;
+  margin-right: 20px;
+  font-size: 14px;
+}
+.container > image:first-child {
+  width: 30px;
+  border: 1px solid #fff3;
+  border-radius: 50%;
+  margin-right: 10px;
+  margin-left: -30px;
+}
+.container > text:nth-child(2) {
+  font-size: 14px;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+.container > view:nth-child(3) {
+  display: flex;
+  flex-direction: column;
+}
+.container > view:nth-child(3) > view {
+  display: flex;
+  padding: 5px 0;
+}
+.container > view:nth-child(3) > view text {
+  width: 34px;
+  text-align: center;
+  display: block;
+}
+.container > view:nth-child(3) > view:first-child {
+  border-bottom: 1px solid #fff3;
+}
+.container > text:nth-child(4) {
+  width: 50px;
+  text-align: right;
+}
+</style>