UI完善

src/pages/match-detail.vue

@@ -0,0 +1,172 @@
+<script setup>
+import { ref } from "vue";
+import { onLoad } from "@dcloudio/uni-app";
+import Container from "@/components/Container.vue";
+import BattleHeader from "@/components/BattleHeader.vue";
+import Avatar from "@/components/Avatar.vue";
+
+const id = ref("");
+const type = ref("");
+const data = {
+  blueTeam: {
+    name: "选手1",
+    avatar: "../static/avatar.png",
+    arrows: [4, 6, 2],
+    score: 1,
+  },
+  redTeam: {
+    name: "选手2",
+    avatar: "../static/avatar.png",
+    arrows: [4, 6, 2],
+    score: 1,
+  },
+};
+const result = ref([
+  {
+    round: 1,
+    ...data,
+  },
+  {
+    round: 2,
+    ...data,
+  },
+  {
+    round: 3,
+    ...data,
+  },
+  {
+    round: 4,
+    ...data,
+  },
+  {
+    round: 5,
+    ...data,
+  },
+]);
+
+onLoad((options) => {
+  type.value = options.type;
+  id.value = options.id;
+});
+</script>
+
+<template>
+  <Container title="详情">
+    <view class="container">
+      <BattleHeader
+        :blueTeam="[
+          { name: '选手1', avatar: '../static/avatar.png', winner: true },
+        ]"
+        :redTeam="[{ name: '选手2', avatar: '../static/avatar.png' }]"
+      />
+      <view class="score-header">
+        <text>决金箭轮（环数）</text>
+        <view>
+          <text>查看靶纸</text>
+          <image src="../static/back.png" mode="widthFix" />
+        </view>
+      </view>
+      <view class="score-row">
+        <view>
+          <Avatar src="../static/avatar.png" :size="25" :borderColor="1" />
+          <text>9环</text>
+          <text>10环</text>
+          <text>7环</text>
+        </view>
+        <image src="../static/winner-badge.png" mode="widthFix" />
+      </view>
+      <view class="score-row" :style="{ marginBottom: '5px' }">
+        <view>
+          <Avatar src="../static/avatar.png" :size="25" :borderColor="2" />
+          <text>9环</text>
+          <text>10环</text>
+          <text>7环</text>
+        </view>
+      </view>
+      <view v-for="(item, index) in result" :key="index">
+        <view class="score-header">
+          <text>第{{ item.round }}轮</text>
+          <view>
+            <text>查看靶纸</text>
+            <image src="../static/back.png" mode="widthFix" />
+          </view>
+        </view>
+        <view class="score-row">
+          <view>
+            <Avatar src="../static/avatar.png" :size="25" :borderColor="1" />
+            <text>9环</text>
+            <text>10环</text>
+            <text>7环</text>
+          </view>
+          <view>
+            <text :style="{ color: '#64BAFF' }">18环</text>
+            <text>得分 +1</text>
+          </view>
+        </view>
+        <view class="score-row" :style="{ marginBottom: '5px' }">
+          <view>
+            <Avatar src="../static/avatar.png" :size="25" :borderColor="2" />
+            <text>9环</text>
+            <text>10环</text>
+            <text>7环</text>
+          </view>
+          <view>
+            <text :style="{ color: '#FF6767' }">18环</text>
+            <text>得分 +1</text>
+          </view>
+        </view>
+      </view>
+      <view :style="{ height: '20px' }"></view>
+    </view>
+  </Container>
+</template>
+
+<style scoped>
+.container {
+  width: 100%;
+  height: 100%;
+}
+.score-header,
+.score-row {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding: 10px;
+  color: #fff9;
+  font-size: 15px;
+  border-bottom: 1px solid #fff3;
+}
+.score-header > text:first-child {
+  color: #fed847;
+}
+.score-header > view:last-child {
+  display: flex;
+  align-items: center;
+}
+.score-header > view:last-child > image {
+  margin-left: 5px;
+  width: 15px;
+  height: 15px;
+  transform: rotate(180deg);
+  margin-top: -2px;
+}
+.score-row > view {
+  display: flex;
+  align-items: center;
+}
+.score-row > view:first-child > text {
+  margin-left: 20px;
+  color: #fff;
+  display: block;
+  width: 30px;
+}
+.score-row > image:last-child {
+  width: 40px;
+}
+.score-row > view:last-child {
+  padding-right: 5px;
+}
+.score-row > view:last-child > text:last-child {
+  margin-left: 20px;
+}
+</style>