shoot-miniprograms/src/pages/match-detail.vue

<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>