UI开发

project.config.json

@@ -23,6 +23,7 @@
   "condition": {},
   "editorSetting": {
     "tabIndent": "insertSpaces",
-    "tabSize": 2
+    "tabSize": 2,
+    "printWidth": 120
   }
-}
+}

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>

src/components/BattleHeader.vue

@@ -0,0 +1,86 @@
+<script setup>
+defineProps({
+  isMelee: {
+    type: Boolean,
+    default: false,
+  },
+});
+</script>
+
+<template>
+  <view class="container">
+    <image
+      :src="`../static/battle-header${isMelee ? '-melee' : ''}.png`"
+      mode="widthFix"
+    />
+    <view v-if="isMelee" class="players-melee">
+      <view></view>
+    </view>
+    <view v-if="!isMelee" class="players">
+      <view>
+        <view class="avatar">
+          <image src="../static/avatar-frame.png" mode="widthFix" />
+          <image src="../static/avatar.png" mode="widthFix" />
+        </view>
+        <text>选手1</text>
+      </view>
+      <view>
+        <view class="avatar">
+          <image src="../static/avatar-frame.png" mode="widthFix" />
+          <image src="../static/avatar.png" mode="widthFix" />
+        </view>
+        <text>选手2</text>
+      </view>
+    </view>
+  </view>
+</template>
+
+<style scoped>
+.container {
+  width: 100%;
+  position: relative;
+  margin-bottom: 10px;
+}
+.container > image:first-child {
+  position: absolute;
+  width: 100%;
+  top: -10px;
+}
+.players {
+  display: flex;
+}
+.players > view {
+  width: 50%;
+  height: 80px;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  color: #fff9;
+  font-size: 14px;
+  padding-top: 20px;
+}
+.players > view:first-child {
+  background-color: #364469;
+}
+.players > view:last-child {
+  background-color: #692735;
+}
+.avatar {
+  position: relative;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  margin: 5px 0;
+}
+.avatar > image:first-child {
+  position: absolute;
+  width: 55px;
+  height: 55px;
+}
+.avatar > image {
+  width: 45px;
+  height: 45px;
+  border-radius: 50%;
+}
+</style>

src/components/BowPower.vue

@@ -0,0 +1,28 @@
+<script setup>
+defineProps({
+  power: {
+    type: Number,
+    default: 0,
+  },
+});
+</script>
+
+<template>
+  <view class="container">
+    <image src="../static/b-power.png" mode="widthFix" />
+    <view>电量{{ power }}%</view>
+  </view>
+</template>
+
+<style scoped>
+.container {
+  display: flex;
+  align-items: center;
+  color: #b9b9b9;
+  font-size: 13px;
+}
+.container > image {
+  width: 22px;
+  margin-right: 5px;
+}
+</style>

src/components/BowTarget.vue

@@ -1,4 +1,5 @@
 <script setup>
+import BowPower from "@/components/BowPower.vue";
 defineProps({
   totalRound: {
     type: Number,
@@ -30,18 +31,14 @@ defineProps({
 <template>
   <view class="container">
     <view class="header">
-      <text v-if="debug" class="header-tips">大人，请射箭</text>
+      <!-- <text v-if="debug" class="header-tips">大人，请射箭</text> -->
-      <image v-if="!debug" :src="avatar" mode="widthFix" />
+      <text v-if="totalRound > 0" class="round-count">{{
-      <view>
-        <image src="../static/b-power.png" mode="widthFix" />
-        <view>电量{{ power }}%</view>
-      </view>
-      <text v-if="!tips && totalRound > 0">{{
         currentRound + "/" + totalRound
       }}</text>
+      <BowPower v-if="power > 0" :power="power" />
     </view>
     <image src="../static/bow-target.png" mode="widthFix" />
-    <view v-if="debug" class="footer">
+    <view v-if="avatar" class="footer">
       <image :src="avatar" mode="widthFix" />
     </view>
     <text v-if="tips">{{ tips }}</text>
@@ -50,40 +47,26 @@ defineProps({
 
 <style scoped>
 .container {
-  position: relative;
   width: calc(100% - 30px);
-  padding: 15px;
+  margin: 15px;
 }
 .container > image {
   width: 100%;
-  padding: 10px 0;
 }
 .header {
   width: 100%;
   display: flex;
   align-items: center;
   justify-content: space-between;
-  font-size: 13px;
 }
 .header > image:first-child {
   width: 40px;
   height: 40px;
 }
-.header > view:nth-child(2) {
+.round-count {
-  display: flex;
-  align-items: center;
-  color: #b9b9b9;
-}
-.header > view:nth-child(2) > image {
-  width: 22px;
-  margin-right: 5px;
-}
-.header > text:nth-child(3) {
-  position: absolute;
   font-size: 20px;
   color: #fed847;
   top: 75px;
-  font-size: 16px;
 }
 .header-tips {
   font-size: 20px;

src/components/CoachComment.vue

@@ -42,6 +42,7 @@ const props = defineProps({
   flex-direction: column;
   justify-content: center;
   align-items: center;
+  z-index: 10;
 }
 .container > view:first-child {
   display: flex;

src/components/CreateRoom.vue

@@ -0,0 +1,126 @@
+<script setup>
+import { ref } from "vue";
+import SButton from "@/components/SButton.vue";
+const props = defineProps({});
+
+const battleMode = ref(1);
+const step = ref(1);
+
+const toBattleRoom = () => {
+  uni.navigateTo({
+    url: "/pages/battle-room",
+  });
+};
+</script>
+<template>
+  <view v-if="!warnning" class="container">
+    <image
+      v-if="step === 1"
+      src="../static/choose-battle-mode.png"
+      mode="widthFix"
+    />
+    <view v-if="step === 1" class="create-options">
+      <view
+        :class="{ 'battle-btn': true, 'battle-choosen': battleMode === 1 }"
+        @click="() => (battleMode = 1)"
+      >
+        <text>对抗模式（1V1）</text>
+      </view>
+      <view
+        :class="{ 'battle-btn': true, 'battle-choosen': battleMode === 2 }"
+        @click="() => (battleMode = 2)"
+      >
+        <text>乱斗模式（3-10人）</text>
+      </view>
+      <view class="battle-btn battle-close">
+        <text>对抗模式（2V2）</text>
+        <text>敬请期待</text>
+      </view>
+      <view class="battle-btn battle-close">
+        <text>对抗模式（3V3）</text>
+        <text>敬请期待</text>
+      </view>
+    </view>
+    <SButton v-if="step === 1" :onClick="() => (step = 2)">下一步</SButton>
+    <view v-if="step === 2" class="room-info">
+      <view>
+        <text>房间号：</text>
+        <text>3245</text>
+      </view>
+      <SButton width="60vw" :onClick="toBattleRoom">进入房间</SButton>
+      <text>30分钟无人进入则房间无效</text>
+      <view>复制房间信息邀请朋友进入</view>
+    </view>
+  </view>
+</template>
+
+<style scoped>
+.container {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+}
+.container > image:first-child {
+  width: 45%;
+  margin: 5px 0;
+}
+.create-options {
+  width: 100%;
+  padding: 0 10px;
+  display: flex;
+  flex-wrap: wrap;
+  gap: 15px;
+  justify-content: center;
+  margin-bottom: 15px;
+}
+.battle-btn {
+  width: 45%;
+  height: 55px;
+  text-align: center;
+  border-radius: 10px;
+  border: 1px solid #fff3;
+  color: #fff;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+}
+.battle-choosen {
+  color: #fed847;
+  border-color: #fed847;
+}
+.battle-close {
+  background-color: #8889;
+  color: #b3b3b3;
+}
+.battle-close > text:last-child {
+  font-size: 12px;
+}
+.room-info {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  width: 100%;
+  padding-top: 40px;
+}
+.room-info > view:first-child {
+  font-size: 22px;
+  color: #fff;
+  margin-bottom: 20px;
+}
+.room-info > view:first-child > text:last-child {
+  color: #fed847;
+}
+.room-info > text {
+  color: #888686;
+  font-size: 14px;
+  margin: 10px 0;
+}
+.room-info > view:last-child {
+  color: #287fff;
+  margin: 20px 0;
+  font-size: 14px;
+}
+</style>

src/components/Guide.vue

@@ -4,6 +4,10 @@ defineProps({
     type: Boolean,
     default: false,
   },
+  noBg: {
+    type: Boolean,
+    default: false,
+  },
 });
 </script>
 
@@ -12,6 +16,7 @@ defineProps({
     <image src="../static/shooter.png" mode="widthFix" />
     <view>
       <image
+        v-if="!noBg"
         :src="
           tall ? '../static/long-bubble-tall.png' : '../static/long-bubble.png'
         "

src/components/PlayerScore.vue

@@ -0,0 +1,86 @@
+<script setup>
+defineProps({
+  avatar: {
+    type: String,
+    default: "",
+  },
+  name: {
+    type: String,
+    default: "",
+  },
+  scores: {
+    type: Array,
+    default: () => [],
+  },
+});
+const rowCount = new Array(6).fill(0);
+</script>
+
+<template>
+  <view class="container">
+    <image :src="avatar" mode="widthFix" />
+    <text>{{ name }}</text>
+    <view>
+      <view>
+        <view v-for="(_, index) in rowCount" :key="index">
+          <text>{{ scores[index + 6] ? `${scores[index + 6]}环` : "-" }}</text>
+        </view>
+      </view>
+      <view>
+        <view v-for="(_, index) in rowCount" :key="index">
+          <text>{{ scores[index + 6] ? `${scores[index + 6]}环` : "-" }}</text>
+        </view>
+      </view>
+    </view>
+    <text>{{ scores.reduce((last, next) => last + next) }}环</text>
+  </view>
+</template>
+
+<style scoped>
+.container {
+  width: calc(100% - 75px);
+  display: flex;
+  align-items: center;
+  border: 1px solid #fff3;
+  margin: 10px 0;
+  margin-left: 40px;
+  border-radius: 15px;
+  padding: 10px;
+  color: #fff9;
+  margin-right: 20px;
+  font-size: 14px;
+}
+.container > image:first-child {
+  width: 30px;
+  border: 1px solid #fff3;
+  border-radius: 50%;
+  margin-right: 10px;
+  margin-left: -30px;
+}
+.container > text:nth-child(2) {
+  font-size: 14px;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+.container > view:nth-child(3) {
+  display: flex;
+  flex-direction: column;
+}
+.container > view:nth-child(3) > view {
+  display: flex;
+  padding: 5px 0;
+}
+.container > view:nth-child(3) > view text {
+  width: 34px;
+  text-align: center;
+  display: block;
+}
+.container > view:nth-child(3) > view:first-child {
+  border-bottom: 1px solid #fff3;
+}
+.container > text:nth-child(4) {
+  width: 50px;
+  text-align: right;
+}
+</style>

src/components/PlayersRow.vue

@@ -0,0 +1,122 @@
+<script setup>
+defineProps({
+  avatar: {
+    type: String,
+    default: "",
+  },
+  blueTeam: {
+    type: Array,
+    default: () => [],
+  },
+  redTeam: {
+    type: Array,
+    default: () => [],
+  },
+});
+</script>
+
+<template>
+  <view class="container">
+    <image v-if="avatar" class="avatar" :src="avatar" mode="widthFix" />
+    <view v-if="!avatar" :style="{ height: 20 + blueTeam.length * 20 + 'px' }">
+      <view
+        v-for="(item, index) in blueTeam"
+        :key="index"
+        :style="{
+          top: index * 20 + 'px',
+          zIndex: blueTeam.length - index,
+          left: 0,
+        }"
+      >
+        <image
+          class="avatar"
+          :src="item.avatar"
+          mode="widthFix"
+          :style="{
+            borderColor: index === 0 ? '#5fadff' : '#fff',
+          }"
+        />
+        <text
+          :style="{
+            color: index === 0 ? '#5fadff' : '#fff',
+            fontSize: index === 0 ? 16 : 12 + 'px',
+          }"
+        >
+          {{ item.name }}
+        </text>
+      </view>
+    </view>
+    <view
+      v-if="!avatar"
+      :style="{
+        height: 20 + blueTeam.length * 20 + 'px',
+      }"
+    >
+      <view
+        v-for="(item, index) in blueTeam"
+        :key="index"
+        :style="{
+          top: index * 20 + 'px',
+          zIndex: blueTeam.length - index,
+          right: 0,
+        }"
+      >
+        <text
+          :style="{
+            color: index === 0 ? '#ff6060' : '#fff',
+            fontSize: index === 0 ? 16 : 12 + 'px',
+          }"
+        >
+          {{ item.name }}
+        </text>
+        <image
+          class="avatar"
+          :src="item.avatar"
+          mode="widthFix"
+          :style="{
+            borderColor: index === 0 ? '#ff6060' : '#fff',
+          }"
+        />
+      </view>
+    </view>
+  </view>
+</template>
+
+<style scoped>
+.container {
+  width: calc(100% - 30px);
+  margin: 15px;
+  display: flex;
+  justify-content: space-between;
+  align-items: flex-start;
+}
+.container > view {
+  width: 50%;
+  position: relative;
+}
+.container > view > view {
+  position: absolute;
+  top: -20px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  transition: all 0.3s linear;
+}
+.container > view > view > text {
+  margin: 0 10px;
+}
+.avatar {
+  width: 40px;
+  height: 40px;
+  min-width: 40px;
+  min-height: 40px;
+  border: 1px solid #fff;
+  border-radius: 50%;
+}
+.red-avatar {
+  border: 1px solid #ff6060;
+}
+.blue-avatar {
+  border: 1px solid #5fadff;
+}
+</style>

src/components/SModal.vue

@@ -0,0 +1,82 @@
+<script setup>
+import { ref, watch } from "vue";
+const props = defineProps({
+  show: {
+    type: Boolean,
+    default: false,
+  },
+  onClose: {
+    type: Function,
+    default: () => {},
+  },
+});
+const showContent = ref(false);
+watch(
+  () => props.show,
+  (newValue) => {
+    setTimeout(() => {
+      showContent.value = newValue;
+    }, 100);
+  }
+);
+const closeModal = () => {
+  showContent.value = false;
+  setTimeout(() => {
+    props.onClose();
+  }, 300);
+};
+</script>
+
+<template>
+  <view class="container" v-if="show" :style="{ opacity: show ? 1 : 0 }">
+    <view
+      class="modal-content"
+      :style="{ transform: `translateY(${showContent ? '0%' : '100%'})` }"
+    >
+      <image src="../static/modal-content-bg.png" mode="widthFix" />
+      <view class="close-btn" @click="closeModal">
+        <image src="../static/close-yellow.png" mode="widthFix" />
+      </view>
+      <slot></slot>
+    </view>
+  </view>
+</template>
+
+<style scoped>
+.container {
+  position: fixed;
+  top: 0;
+  left: 0;
+  background-color: #00000099;
+  width: 100vw;
+  height: 100vh;
+  display: flex;
+  flex-direction: column;
+  justify-content: flex-end;
+  align-items: center;
+  opacity: 0;
+  transition: all 0.3s ease;
+}
+.modal-content {
+  width: 100%;
+  height: 260px;
+  transform: translateY(100%);
+  transition: all 0.3s ease;
+  position: relative;
+}
+.modal-content > image:first-child {
+  width: 100%;
+  position: absolute;
+  z-index: -1;
+}
+.close-btn {
+  display: flex;
+  justify-content: flex-end;
+  position: absolute;
+  right: 0;
+}
+.close-btn > image {
+  width: 40px;
+  height: 40px;
+}
+</style>

src/components/ShootProgress.vue

@@ -7,9 +7,12 @@ const props = defineProps({
   },
   total: {
     type: Number,
-    default: 0,
+    default: 90,
   },
 });
+let barColor = "#fed847";
+if (props.tips.includes("红队")) barColor = "#FF6060";
+if (props.tips.includes("蓝队")) barColor = "#5FADFF";
 const remain = ref(0);
 onMounted(() => {
   remain.value = props.total;
@@ -31,7 +34,13 @@ onMounted(() => {
       </button>
     </view>
     <view>
-      <view :style="{ width: `${((total - remain) / total) * 100}%` }" />
+      <view
+        :style="{
+          width: `${((total - remain) / total) * 100}%`,
+          backgroundColor: barColor,
+          right: tips.includes('红队') ? 0 : 'unset',
+        }"
+      />
       <text>剩余{{ remain }}秒</text>
     </view>
   </view>
@@ -73,7 +82,6 @@ onMounted(() => {
 .container > view:last-child > view {
   position: absolute;
   height: 20px;
-  background-color: #fed847;
   border-radius: 20px;
   z-index: -1;
 }

src/pages.json

@@ -42,12 +42,24 @@
         "navigationBarTitleText": "好友约战"
       }
     },
+    {
+      "path": "pages/battle-room",
+      "style": {
+        "navigationBarTitleText": "对战房间"
+      }
+    },
     {
       "path": "pages/ranking",
       "style": {
         "navigationBarTitleText": "排行榜"
       }
     },
+    {
+      "path": "pages/match-room",
+      "style": {
+        "navigationBarTitleText": "排位赛"
+      }
+    },
     {
       "path": "pages/equipment-debug",
       "style": {

src/pages/battle-room.vue

@@ -0,0 +1,149 @@
+<script setup>
+import { ref } from "vue";
+import AppBackground from "@/components/AppBackground.vue";
+import Header from "@/components/Header.vue";
+import Guide from "@/components/Guide.vue";
+import SButton from "@/components/SButton.vue";
+import BowTarget from "@/components/BowTarget.vue";
+import BattleHeader from "@/components/BattleHeader.vue";
+import BattleFooter from "@/components/BattleFooter.vue";
+import BowPower from "@/components/BowPower.vue";
+import ShootProgress from "@/components/ShootProgress.vue";
+import PlayersRow from "@/components/PlayersRow.vue";
+const step = ref(1);
+const seats = new Array(10).fill(1);
+const players = new Array(7).fill(1);
+const teams = [
+  { name: "选手1", avatar: "../static/avatar.png" },
+];
+</script>
+
+<template>
+  <view class="container">
+    <AppBackground />
+    <Header title="对战" />
+    <view v-if="step === 1">
+      <Guide>
+        <view :style="{ display: 'flex', flexDirection: 'column' }">
+          <text :style="{ color: '#fed847' }">人都到齐了吗？</text>
+          <text>天赋异禀的弓箭手们，比赛即将开始！</text>
+        </view>
+      </Guide>
+      <view class="players">
+        <view v-for="(_, index) in seats" :key="index">
+          <image src="../static/player-bg.png" mode="widthFix" />
+          <image
+            v-if="players[index]"
+            src="../static/avatar.png"
+            mode="widthFix"
+          />
+          <view v-else class="player-unknow">
+            <image src="../static/question-mark.png" mode="widthFix" />
+          </view>
+          <text v-if="players[index]">选手{{ index + 1 }}</text>
+          <text v-else :style="{ color: '#fff9' }">虚位以待</text>
+          <view v-if="index === 0" class="founder">创建者</view>
+          <image
+            :src="`../static/player-${index + 1}.png`"
+            mode="widthFix"
+            class="player-bg"
+          />
+        </view>
+      </view>
+      <SButton :onClick="() => (step = 2)">进入大乱斗</SButton>
+      <text class="tips">创建者点击下一步，所有人即可进入游戏。</text>
+    </view>
+    <view v-if="step === 2">
+      <BattleHeader />
+      <Guide noBg>
+        <view :style="{ display: 'flex', justifyContent: 'space-between' }">
+          <view :style="{ display: 'flex', flexDirection: 'column' }">
+            <text :style="{ color: '#fed847' }">请预先射几箭测试</text>
+            <text>请确保射击距离只有5米</text>
+          </view>
+          <BowPower power="45" />
+        </view>
+      </Guide>
+      <BowTarget tips="本次射程5.2米，已达距离要求" />
+      <SButton :onClick="() => (step = 3)">开始</SButton>
+    </view>
+    <view v-if="step === 3">
+      <ShootProgress tips="请红队射箭-第一轮" />
+      <PlayersRow :blueTeam="teams" :redTeam="teams" />
+      <BowTarget power="45" currentRound="1" totalRound="3" debug />
+      <BattleFooter :blueTeam="[6, 2, 3]" :redTeam="[4, 5, 2]" />
+    </view>
+  </view>
+</template>
+
+<style scoped>
+.container {
+  width: 100vw;
+}
+.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>

src/pages/friend-battle.vue

@@ -1,8 +1,29 @@
 <script setup>
+import { ref } from "vue";
 import AppBackground from "@/components/AppBackground.vue";
 import Header from "@/components/Header.vue";
 import Guide from "@/components/Guide.vue";
 import SButton from "@/components/SButton.vue";
+import SModal from "@/components/SModal.vue";
+import CreateRoom from "@/components/CreateRoom.vue";
+
+const showModal = ref(false);
+const warnning = ref("");
+const roomNumber = ref("");
+
+const enterRoom = () => {
+  console.log(roomNumber.value);
+  if (!roomNumber.value) {
+    warnning.value = "请输入房间号";
+  } else {
+    warnning.value = "查无此房";
+  }
+  showModal.value = true;
+};
+const createRoom = () => {
+  warnning.value = "";
+  showModal.value = true;
+};
 </script>
 
 <template>
@@ -18,8 +39,8 @@ import SButton from "@/components/SButton.vue";
     <view class="founded-room">
       <image src="../static/founded-room.png" mode="widthFix" />
       <view>
-        <input placeholder="输入房间号" />
+        <input placeholder="输入房间号" v-model="roomNumber" />
-        <button>进入房间</button>
+        <view @click="enterRoom">进入房间</view>
       </view>
     </view>
     <view class="create-room">
@@ -32,9 +53,17 @@ import SButton from "@/components/SButton.vue";
         </view>
       </view>
       <view>
-        <SButton width="70%" :rounded="30">创建约战房</SButton>
+        <SButton width="70%" :rounded="30" :onClick="createRoom">
+          创建约战房
+        </SButton>
       </view>
     </view>
+    <SModal :show="showModal" :onClose="() => (showModal = false)">
+      <view v-if="warnning" class="warnning">
+        {{ warnning }}
+      </view>
+      <CreateRoom v-if="!warnning" />
+    </SModal>
   </view>
 </template>
 
@@ -69,7 +98,7 @@ import SButton from "@/components/SButton.vue";
   font-size: 14px;
   height: 40px;
 }
-.founded-room > view > button {
+.founded-room > view > view {
   background-color: #fed847;
   width: 30%;
   line-height: 40px;
@@ -78,6 +107,7 @@ import SButton from "@/components/SButton.vue";
   padding: 3px 0;
   font-weight: bold;
   color: #000;
+  text-align: center;
 }
 .create-room {
   position: relative;
@@ -118,4 +148,12 @@ import SButton from "@/components/SButton.vue";
 .create-room > view:last-child {
   transform: translateY(-110%);
 }
+.warnning {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  color: #fff9;
+}
 </style>

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>

src/pages/practise-one.vue

@@ -5,6 +5,7 @@ import Header from "@/components/Header.vue";
 import ShootProgress from "@/components/ShootProgress.vue";
 import BowTarget from "@/components/BowTarget.vue";
 import ScorePanel2 from "@/components/ScorePanel2.vue";
+import ScoreResult from "@/components/ScoreResult.vue";
 const showScore = ref(false);
 
 setTimeout(() => {
@@ -16,7 +17,7 @@ setTimeout(() => {
   <view class="container">
     <AppBackground type="1" />
     <Header title="个人单组练习" />
-    <ShootProgress tips="请连续射箭36支" total="120" />
+    <ShootProgress tips="请开始射箭第一轮" total="120" />
     <BowTarget
       totalRound="10"
       currentRound="4"
@@ -24,6 +25,12 @@ setTimeout(() => {
       power="45"
     />
     <ScorePanel2 :scores="[1, 2, 3, 4, 5, 6]" />
+    <ScoreResult
+      :total="12"
+      :rowCount="6"
+      :show="showScore"
+      :onClose="() => (showScore = false)"
+    />
   </view>
 </template>
 

src/pages/ranking.vue

@@ -1,13 +1,19 @@
 <script setup>
 import AppBackground from "@/components/AppBackground.vue";
 import Header from "@/components/Header.vue";
-import { ref } from 'vue';
+import { ref } from "vue";
 
 const selectedIndex = ref(0);
 
 const handleSelect = (index) => {
   selectedIndex.value = index;
 };
+
+const toMatchPage = () => {
+  uni.navigateTo({
+    url: "/pages/match-room",
+  });
+};
 </script>
 
 <template>
@@ -43,9 +49,21 @@ const handleSelect = (index) => {
         </view>
       </view>
       <view class="rank-type">
-        <image src="../static/battle1v1.png" mode="widthFix" />
+        <image
-        <image src="../static/battle5.png" mode="widthFix" />
+          src="../static/battle1v1.png"
-        <image src="../static/battle10.png" mode="widthFix" />
+          mode="widthFix"
+          @click="toMatchPage"
+        />
+        <image
+          src="../static/battle5.png"
+          mode="widthFix"
+          @click="toMatchPage"
+        />
+        <image
+          src="../static/battle10.png"
+          mode="widthFix"
+          @click="toMatchPage"
+        />
       </view>
       <view class="data-progress">
         <text>【1 V 1】 163 场 胜率 51%</text>
@@ -74,9 +92,10 @@ const handleSelect = (index) => {
           :key="index"
           :style="{
             color: index === selectedIndex ? '#000' : '#fff',
-            backgroundColor: index === selectedIndex ? '#FFD947' : 'transparent',
+            backgroundColor:
+              index === selectedIndex ? '#FFD947' : 'transparent',
           }"
-           @tap="handleSelect(index)"
+          @tap="handleSelect(index)"
         >
           {{ rankType }}
         </view>