UI开发

2025-05-16 15:56:54 +08:00
parent 34c9dd00e2
commit 779b3395db
35 changed files with 1003 additions and 40 deletions
--- a/src/pages/match-room.vue
+++ b/src/pages/match-room.vue
@@ -0,0 +1,108 @@
+<script setup>
+import AppBackground from "@/components/AppBackground.vue";
+import Header from "@/components/Header.vue";
+import BowTarget from "@/components/BowTarget.vue";
+import ShootProgress from "@/components/ShootProgress.vue";
+import PlayersRow from "@/components/PlayersRow.vue";
+import PlayerScore from "@/components/PlayerScore.vue";
+const teams = [
+  { name: "选手1", avatar: "../static/avatar.png" },
+  { name: "选手1", avatar: "../static/avatar.png" },
+  { name: "选手1", avatar: "../static/avatar.png" },
+];
+</script>
+
+<template>
+  <view class="container">
+    <AppBackground />
+    <Header title="排位赛" />
+    <view>
+      <ShootProgress tips="请红队射箭-第一轮" />
+      <PlayersRow :blueTeam="teams" :redTeam="teams" />
+      <BowTarget power="45" currentRound="1" totalRound="3" debug />
+      <PlayerScore
+        name="某某选手"
+        avatar="../static/avatar.png"
+        :scores="[1, 4, 7, 4, 2, 2, 4, 4, 5, 8]"
+      />
+      <PlayerScore
+        name="下个选手"
+        avatar="../static/avatar.png"
+        :scores="[1, 4, 7, 4, 2, 2, 4, 4, 5, 8]"
+      />
+    </view>
+  </view>
+</template>
+
+<style scoped>
+.container {
+  width: 100vw;
+  padding-bottom: 20px;
+}
+.players {
+  display: flex;
+  flex-wrap: wrap;
+  justify-content: center;
+  column-gap: 15px;
+  row-gap: 10px;
+  margin-bottom: 20px;
+  font-size: 14px;
+}
+.players > view {
+  width: 45%;
+  display: flex;
+  align-items: center;
+  position: relative;
+  color: #fff;
+  height: 90px;
+  overflow: hidden;
+}
+.players > view > image:first-child {
+  width: 100%;
+  position: absolute;
+  z-index: -1;
+}
+.players > view > image:nth-child(2) {
+  width: 40px;
+  margin: 0 10px;
+  border: 1px solid #fff;
+  border-radius: 50%;
+}
+.founder {
+  position: absolute;
+  background-color: #fed847;
+  top: 0;
+  color: #000;
+  font-size: 12px;
+  padding: 2px 5px;
+  border-top-left-radius: 10px;
+  border-bottom-right-radius: 10px;
+}
+.player-bg {
+  position: absolute;
+  width: 52px;
+  right: 0;
+}
+.tips {
+  color: #fff9;
+  width: 100%;
+  text-align: center;
+  display: block;
+  margin-top: 10px;
+  font-size: 14px;
+}
+.player-unknow {
+  width: 40px;
+  height: 40px;
+  margin: 0 10px;
+  border: 1px solid #fff3;
+  border-radius: 50%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background-color: #69686866;
+}
+.player-unknow > image {
+  width: 40%;
+}
+</style>