UI开发

src/components/BattleFooter.vue

@@ -0,0 +1,102 @@
+<script setup>
+import { ref } from "vue";
+import CoachComment from "@/components/CoachComment.vue";
+defineProps({
+  blueTeam: {
+    type: Array,
+    default: () => [],
+  },
+  redTeam: {
+    type: Array,
+    default: () => [],
+  },
+});
+
+const showComment = ref(false);
+setTimeout(() => {
+  showComment.value = true;
+}, 2000);
+</script>
+
+<template>
+  <view class="container">
+    <image src="../static/battle-header.png" mode="widthFix" />
+    <view class="players">
+      <view>
+        <view v-for="(score, index) in blueTeam" :key="index">
+          <text>Round {{ index + 1 }}</text>
+          <view>
+            <text>{{ score }}</text>
+            <text>环</text>
+          </view>
+        </view>
+      </view>
+      <view>
+        <view v-for="(score, index) in redTeam" :key="index">
+          <text>Round {{ index + 1 }}</text>
+          <view>
+            <text>{{ score }}</text>
+            <text>环</text>
+          </view>
+        </view>
+      </view>
+    </view>
+    <CoachComment :show="showComment" :onClose="() => (showComment = false)">
+      第三轮射击结束
+    </CoachComment>
+  </view>
+</template>
+
+<style scoped>
+.container {
+  width: 100%;
+  position: relative;
+  margin-top: 20px;
+}
+.container > image:first-child {
+  position: absolute;
+  width: 100%;
+  top: -10px;
+}
+.players {
+  display: flex;
+}
+.players > view {
+  width: 50%;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  color: #fff;
+  padding-top: 20px;
+}
+.players > view:first-child {
+  background-color: #364469;
+}
+.players > view:last-child {
+  background-color: #692735;
+}
+.players > view > view {
+  width: 85%;
+  padding: 5px 20px;
+  margin-bottom: 5px;
+  background-image: url("../static/row-bg.png");
+  background-size: 90% 100%;
+  background-repeat: no-repeat;
+  background-position: center;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+}
+.players > view > view > text {
+  font-size: 14px;
+}
+.players > view > view > view:last-child {
+  padding-right: 20px;
+}
+.players > view > view > view:last-child > text:first-child {
+  font-size: 20px;
+  color: #fed847;
+  margin-right: 5px;
+}
+</style>