UI完善

src/components/MeleeResult.vue

@@ -0,0 +1,162 @@
+<script setup>
+import { ref } from "vue";
+import BowTarget from "@/components/BowTarget.vue";
+import Avatar from "@/components/Avatar.vue";
+const props = defineProps({
+  show: {
+    type: Boolean,
+    default: false,
+  },
+  onClose: {
+    type: Function,
+    default: () => {},
+  },
+});
+</script>
+
+<template>
+  <view class="container" :style="{ display: show ? 'flex' : 'none' }">
+    <view>
+      <text>5人大乱斗</text>
+      <view @click="onClose">
+        <image src="../static/close-white.png" mode="widthFix" />
+      </view>
+    </view>
+    <view class="rank-rows">
+      <view v-for="(item, index) in [1, 2, 3, 4, 5]" :key="index">
+        <image v-if="index === 0" src="../static/champ1.png" mode="widthFix" />
+        <image v-if="index === 1" src="../static/champ2.png" mode="widthFix" />
+        <image v-if="index === 2" src="../static/champ3.png" mode="widthFix" />
+        <view v-if="index > 2" class="rank-view">{{ item }}</view>
+        <Avatar src="../static/avatar.png" :size="24" />
+        <text>积分 + 117分</text>
+        <text>117环</text>
+        <text v-for="(round, index2) in new Array(12).fill(9)" :key="index2">
+          {{ round }}环
+        </text>
+      </view>
+    </view>
+    <view :style="{ width: '95%', marginTop: '-5%' }">
+      <BowTarget />
+    </view>
+    <view class="score-text"
+      ><text :style="{ color: '#fed847' }">12</text>支箭，共<text
+        :style="{ color: '#fed847' }"
+        >100</text
+      >环</view
+    >
+    <view class="score-row">
+      <view
+        v-for="(score, index) in new Array(12).fill(9)"
+        :key="index"
+        class="score-item"
+        :style="{ width: '13vw', height: '13vw' }"
+      >
+        {{ score }}
+      </view>
+    </view>
+  </view>
+</template>
+
+<style scoped>
+.container {
+  width: 100vw;
+  height: 100vh;
+  position: fixed;
+  top: 0;
+  left: 0;
+  background-color: rgba(0, 0, 0, 0.8);
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  z-index: 10;
+}
+.container > view:first-child {
+  width: 100%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: 20px 0;
+  color: #fff;
+  position: relative;
+  font-size: 20px;
+}
+.container > view:first-child > view:last-child {
+  position: absolute;
+  left: 5px;
+  top: 25px;
+}
+.container > view:first-child > view:last-child > image {
+  width: 40px;
+}
+.score-text {
+  width: 100%;
+  color: #fff;
+  text-align: center;
+  font-size: 16px;
+  margin-bottom: 6px;
+}
+.score-row {
+  margin: 10px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  flex-wrap: wrap;
+}
+.score-item {
+  background-image: url("../static/score-bg.png");
+  background-size: cover;
+  background-repeat: no-repeat;
+  background-position: center;
+  color: #fed847;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  font-size: 24px;
+  margin: 3px;
+}
+.rank-rows {
+  display: flex;
+  flex-direction: column;
+  width: 100%;
+  border-top: 1px solid #fff3;
+}
+.rank-rows > view {
+  width: clac(100% - 20px);
+  color: #fff9;
+  border-bottom: 1px solid #fff3;
+  padding: 7px 10px;
+  display: flex;
+  align-items: center;
+  font-size: 14px;
+  overflow-x: auto;
+}
+.rank-rows > view::-webkit-scrollbar {
+  width: 0;
+  height: 0;
+  color: transparent;
+}
+.rank-rows > view > image:first-child,
+.rank-rows > view > view:first-child {
+  width: 20px;
+  height: 20px;
+  line-height: 20px;
+  text-align: center;
+  font-size: 12px;
+  margin-right: 10px;
+  flex: 0 0 auto;
+}
+.rank-rows > view > view:first-child {
+  background-color: #6d6d6d;
+  border-radius: 50%;
+}
+.rank-rows > view > text {
+  margin-left: 10px;
+  flex: 0 0 auto;
+}
+.rank-rows > view > text:nth-child(4) {
+  color: #fed847;
+  padding-right: 10px;
+  border-right: 1px solid #fff3;
+}
+</style>