UI细节调整

src/components/Avatar.vue

@@ -21,15 +21,10 @@ defineProps({
     default: 45,
   },
   borderColor: {
-    type: Number,
+    type: String,
-    default: 0,
+    default: "",
   },
 });
-const borderColors = {
-  0: "#fff",
-  1: "#64BAFF",
-  2: "#FF6767",
-};
 </script>
 
 <template>
@@ -70,7 +65,7 @@ const borderColors = {
         width: size + 'px',
         height: size + 'px',
         minHeight: size + 'px',
-        borderColor: borderColors[borderColor],
+        borderColor: borderColor || '#fff',
       }"
       class="avatar-image"
     />

src/components/BowTarget.vue

@@ -1,6 +1,7 @@
 <script setup>
 import { ref, watch } from "vue";
 import BowPower from "@/components/BowPower.vue";
+import StartCountdown from "@/components/StartCountdown.vue";
 import { simulShootAPI } from "@/apis";
 import useStore from "@/store";
 import { storeToRefs } from "pinia";
@@ -28,10 +29,6 @@ const props = defineProps({
     type: String,
     default: "",
   },
-  debug: {
-    type: Boolean,
-    default: false,
-  },
   scores: {
     type: Array,
     default: () => [],
@@ -52,12 +49,29 @@ const props = defineProps({
     type: Boolean,
     default: true,
   },
+  start: {
+    type: Boolean,
+    default: false,
+  },
 });
 
 const showRoundTips = ref(false);
+const startCount = ref(false);
 const prevLength = ref(0);
 const timer = ref(null);
 
+watch(
+  () => props.start,
+  (newVal) => {
+    if (newVal) {
+      startCount.value = true;
+    }
+  },
+  {
+    immediate: true,
+  }
+);
+
 watch(
   () => props.scores,
   (newVal) => {
@@ -90,8 +104,7 @@ const simulShoot = async () => {
 
 <template>
   <view class="container">
-    <view class="header" v-if="debug || totalRound > 0 || power">
+    <view class="header" v-if="totalRound > 0 || power">
-      <text v-if="debug" class="header-tips">大人，请射箭</text>
       <text v-if="totalRound > 0" class="round-count">{{
         (currentRound > totalRound ? totalRound : currentRound) +
         "/" +
@@ -150,6 +163,7 @@ const simulShoot = async () => {
     <view class="simul" @click="simulShoot" :style="{ color: '#fff' }">
       模拟射箭
     </view>
+    <StartCountdown :start="startCount" />
   </view>
 </template>
 
@@ -162,7 +176,7 @@ const simulShoot = async () => {
 }
 .target {
   position: relative;
-  padding: 5px;
+  padding: 10px;
 }
 .e-value {
   position: absolute;
@@ -212,10 +226,6 @@ const simulShoot = async () => {
   color: #fed847;
   top: 75px;
 }
-.header-tips {
-  font-size: 20px;
-  color: #fed847;
-}
 .footer {
   width: calc(100% - 20px);
   padding: 0 10px;

src/components/Header.vue

@@ -29,7 +29,24 @@ onMounted(() => {
     <view class="back-btn" @click="onClick">
       <image src="../static/back.png" mode="widthFix" />
     </view>
-    <text>{{ title }}</text>
+    <view>
+      <block v-if="'凹造型，感知距离，小试牛刀'.indexOf(title) === -1">
+        <text>{{ title }}</text>
+      </block>
+      <block v-else>
+        <view class="first-try-steps">
+          <text :class="title === '凹造型' ? 'current-step' : ''">凹造型</text>
+          <text>—</text>
+          <text :class="title === '感知距离' ? 'current-step' : ''"
+            >感知距离</text
+          >
+          <text>—</text>
+          <text :class="title === '小试牛刀' ? 'current-step' : ''"
+            >小试牛刀</text
+          >
+        </view>
+      </block>
+    </view>
   </view>
 </template>
 
@@ -42,6 +59,8 @@ onMounted(() => {
   height: 60px;
   /* margin-top: var(--status-bar-height); */
   padding-left: 15px;
+  color: #fff;
+  font-size: 16px;
 }
 .back-btn {
   display: flex;
@@ -52,7 +71,21 @@ onMounted(() => {
   height: 22px;
   margin-right: 10px;
 }
-.container > text {
+.first-try-steps {
+  display: flex;
+  align-items: center;
+  color: #fff6;
+  font-size: 14px;
+}
+.first-try-steps > text {
+  transition: all 0.3s ease;
+}
+.first-try-steps > text:nth-child(2),
+.first-try-steps > text:nth-child(4) {
+  margin: 0 5px;
+}
+.current-step {
+  font-size: 16px;
   color: #fff;
 }
 </style>

src/components/ShootProgress.vue

@@ -57,18 +57,23 @@ watch(
     if (newVal === false) {
       if (timer.value) clearInterval(timer.value);
     }
-    if (oldVal === false && newVal === true) {
+    if (!oldVal && newVal === true) {
-      remain.value = props.total;
+      setTimeout(() => {
-      timer.value = setInterval(() => {
+        remain.value = props.total;
-        if (remain.value > 0) {
+        timer.value = setInterval(() => {
-          remain.value--;
+          if (remain.value > 0) {
-        } else {
+            remain.value--;
-          props.onTimeIsUp();
+          } else {
-        }
+            props.onTimeIsUp();
-      }, 1000);
+          }
+        }, 1000);
+      }, 3000);
     } else {
       if (timer.value) clearInterval(timer.value);
     }
+  },
+  {
+    immediate: true,
   }
 );
 

src/components/StartCountdown.vue

@@ -5,10 +5,6 @@ const props = defineProps({
     type: Boolean,
     default: false,
   },
-  onFinish: {
-    type: Function,
-    default: () => {},
-  },
 });
 
 const count = ref(4);
@@ -20,7 +16,6 @@ watch(
       if (timer.value) clearInterval(timer.value);
       timer.value = setInterval(() => {
         if (count.value <= 1) {
-          props.onFinish();
           clearInterval(timer.value);
         }
         count.value -= 1;
@@ -46,8 +41,8 @@ onUnmounted(() => {
 
 <style scoped>
 .container {
-  position: fixed;
+  position: absolute;
-  top: 120px;
+  top: calc(50% - 50px);
   left: calc(50% - 30px);
 }
 .number {

src/components/UserHeader.vue

@@ -136,7 +136,7 @@ watch(
 
 .user-name > text:first-child {
   font-size: 13px;
-  max-width: 100px;
+  max-width: 180rpx;
   white-space: nowrap;
   overflow: hidden;
   text-overflow: ellipsis;
@@ -176,8 +176,7 @@ watch(
 .rank-tag {
   position: relative;
   background-color: #00000038;
-  width: 50px;
+  width: 100rpx;
-  height: 16px;
 }
 
 .rank-tag-progress {
@@ -200,7 +199,7 @@ watch(
   position: relative;
   color: #b3b3b3;
   padding-left: 8px;
-  margin-left: 8px;
+  margin-left: 15rpx;
   display: flex;
   flex-direction: column;
 }

src/pages/battle-result.vue

@@ -54,6 +54,7 @@ const checkBowData = () => {
     });
   }
 };
+const topThreeColors = ["#FFD947 ", "#D2D2D2", "#FFA515"];
 </script>
 
 <template>
@@ -126,7 +127,11 @@ const checkBowData = () => {
             mode="widthFix"
           />
           <view v-if="index > 2" class="view-crown">{{ index + 1 }}</view>
-          <Avatar :src="player.avatar" :size="36" />
+          <Avatar
+            :src="player.avatar"
+            :size="36"
+            :borderColor="topThreeColors[index] || ''"
+          />
           <view class="player-title">
             <text>{{ player.name }}</text>
             <text>钻石三级</text>

src/pages/be-vip.vue

@@ -29,7 +29,7 @@ const onPay = () => {
   <Container title="会员说明">
     <view v-if="user.id" class="header">
       <view>
-        <Avatar :src="user.avatar" :size="35" :border="true" />
+        <Avatar :src="user.avatar" :size="35" />
         <text class="truncate">{{ user.nickName }}</text>
       </view>
       <text>5月5号到期</text>

src/pages/first-try.vue

@@ -10,8 +10,7 @@ import ScorePanel from "@/components/ScorePanel.vue";
 import Container from "@/components/Container.vue";
 import Avatar from "@/components/Avatar.vue";
 import BowPower from "@/components/BowPower.vue";
-import StartCountdown from "@/components/StartCountdown.vue";
+import { createPractiseAPI } from "@/apis";
-import { createPractiseAPI, getHomeData } from "@/apis";
 import { generateCanvasImage } from "@/util";
 import { MESSAGETYPES } from "@/constants";
 import useStore from "@/store";
@@ -32,7 +31,6 @@ const stepButtonTexts = [
   "退出新手试炼",
 ];
 const title = ref("新手试炼场");
-const startCount = ref(false);
 const start = ref(false);
 const practiseResult = ref({});
 const power = ref(0);
@@ -42,11 +40,6 @@ const createPractise = async (arrows) => {
   const result = await createPractiseAPI(arrows);
 };
 
-const onStart = () => {
-  start.value = true;
-  scores.value = [];
-};
-
 async function onReceiveMessage(messages = []) {
   messages.forEach((msg) => {
     if (msg.constructor === MESSAGETYPES.ShootSyncMeArrowID) {
@@ -92,13 +85,11 @@ const nextStep = async () => {
     title.value = "小试牛刀";
   } else if (step.value === 3) {
     title.value = "新手试炼场";
-    scores.value = [];
     await createPractise(total);
+    scores.value = [];
     step.value = 4;
-    startCount.value = true;
+    start.value = true;
   } else if (step.value === 5) {
-    // const result = await getHomeData();
-    // if (result.user) updateUser(result.user);
     uni.navigateBack({
       delta: 1,
     });
@@ -121,7 +112,7 @@ const onClose = () => {
         :type="
           step === 2
             ? 2
-            : step === 5 || (step === 1 && user.nickName.length > 6)
+            : step === 5 || (step === 0 && user.nickName.length > 6)
             ? 1
             : 0
         "
@@ -155,7 +146,6 @@ const onClose = () => {
             <text
               >反曲弓运动基本知识和射灵世界系统规则你已Get，是不是挺容易呀：）</text
             >
-            <!-- 这行是占位用的 -->
             <text :style="{ opacity: 0 }">新手试炼场通关啦，优秀！</text>
           </view>
         </view>
@@ -193,13 +183,15 @@ const onClose = () => {
         :total="100"
         :start="start"
       />
-      <view class="infos" v-if="step === 4">
+      <view class="infos" v-if="step === 2 || step === 4">
-        <Avatar :src="user.avatar" :size="35" />
+        <text v-if="step === 2">大人，请射箭</text>
+        <Avatar v-if="step === 4" :src="user.avatar" :size="35" />
         <BowPower :power="power" />
       </view>
       <BowTarget
+        :start="start"
         :avatar="step === 2 ? user.avatar : ''"
-        :power="step === 2 ? power : 0"
+        :power="step !== 2 ? power : 0"
         :debug="step === 2"
         v-if="step === 2 || step === 4"
         :currentRound="step === 4 ? scores.length : 0"
@@ -228,7 +220,6 @@ const onClose = () => {
         :result="practiseResult"
       />
       <canvas class="share-canvas" canvas-id="shareCanvas"></canvas>
-      <StartCountdown :start="startCount" :onFinish="onStart" />
     </view>
     <view :style="{ marginBottom: '20px' }">
       <SButton v-if="step !== 4" :onClick="nextStep" :disabled="btnDisabled">{{
@@ -253,4 +244,9 @@ const onClose = () => {
   padding: 0 15px;
   padding-top: 15px;
 }
+.infos > text {
+  font-size: 20px;
+  color: #fed847;
+  margin-bottom: 50px;
+}
 </style>

src/pages/index.vue

@@ -74,10 +74,14 @@ const comingSoon = () => {
     icon: "none",
   });
 };
+const topThreeColors = ["#FFD947 ", "#D2D2D2", "#FFA515"];
 </script>
 
 <template>
-  <view class="root-container" :style="{ paddingTop: isIos ? '45px' : '40px' }">
+  <view
+    class="root-container"
+    :style="{ paddingTop: isIos ? '86rpx' : '70rpx' }"
+  >
     <AppBackground />
     <UserHeader showRank :onSignin="() => (showModal = true)" />
     <view class="container">
@@ -106,7 +110,6 @@ const comingSoon = () => {
           <image src="../static/a3@2x.png" mode="widthFix" />
         </view>
       </view>
-
       <view class="ranking-section">
         <image src="../static/a4@2x.png" mode="widthFix" />
         <button
@@ -116,12 +119,16 @@ const comingSoon = () => {
         ></button>
         <view class="ranking-players">
           <img src="../static/juezhanbang.png" mode="widthFix" />
+          <view class="divide-line"></view>
           <view class="player-avatars">
             <view
               v-for="i in 6"
               :key="i"
               class="player-avatar"
-              :style="{ zIndex: 6 - i }"
+              :style="{
+                zIndex: 6 - i,
+                borderColor: topThreeColors[i - 1] || '#000',
+              }"
             >
               <image v-if="i === 1" src="../static/champ1.png" />
               <image v-if="i === 2" src="../static/champ2.png" />
@@ -277,7 +284,7 @@ const comingSoon = () => {
 
 .ranking-players > image:first-child {
   width: 28%;
-  margin-right: 10px;
+  transform: translateX(-10px);
 }
 
 .player-avatars {
@@ -285,13 +292,20 @@ const comingSoon = () => {
   align-items: center;
 }
 
+.divide-line {
+  width: 1px;
+  height: 35px;
+  background-color: #80808033;
+  margin-right: 8px;
+}
+
 .player-avatar,
 .more-players {
   width: 40px;
   height: 40px;
   border-radius: 50%;
   margin-right: -10px;
-  border: 1px solid white;
+  border: 1px solid #000;
   position: relative;
 }
 
@@ -299,18 +313,18 @@ const comingSoon = () => {
 .player-avatar > view:first-child {
   position: absolute;
   top: -10px;
-  left: 10px;
+  left: 12px;
-  width: 18px;
+  width: 16px;
-  height: 18px;
+  height: 16px;
 }
 .player-avatar > view:first-child {
   border-radius: 50%;
   background: #777777;
   text-align: center;
-  font-size: 11px;
+  font-size: 10px;
-  line-height: 20px;
+  line-height: 18px;
-  width: 20px;
+  width: 18px;
-  height: 20px;
+  height: 18px;
 }
 .player-avatar > image:last-child {
   width: 100%;
@@ -320,15 +334,14 @@ const comingSoon = () => {
 
 .more-players {
   background: rgba(255, 255, 255, 0.2);
-  border: none;
+  font-size: 9px;
-  font-size: 10px;
   line-height: 40px;
-  display: flex;
+  text-align: center;
-  justify-content: flex-end;
+  z-index: -1;
 }
 
 .more-players > text {
-  margin-right: 4px;
+  margin-left: 4px;
 }
 
 .region-stats {

src/pages/match-detail.vue

@@ -135,7 +135,7 @@ const checkBowData = () => {
         </view>
         <view class="score-row">
           <view>
-            <Avatar :src="round.blue.avatar" :size="25" :borderColor="1" />
+            <Avatar :src="round.blue.avatar" :size="25" borderColor="#64BAFF" />
             <text v-for="(arrow, index2) in round.blue.arrows" :key="index2">
               {{ arrow.ring }}环
             </text>
@@ -149,7 +149,7 @@ const checkBowData = () => {
         </view>
         <view class="score-row">
           <view>
-            <Avatar :src="round.red.avatar" :size="25" :borderColor="2" />
+            <Avatar :src="round.red.avatar" :size="25" borderColor="#FF6767" />
             <text v-for="(arrow, index2) in round.red.arrows" :key="index2">
               {{ arrow.ring }}环
             </text>

src/pages/practise-one.vue

@@ -8,7 +8,6 @@ import ScoreResult from "@/components/ScoreResult.vue";
 import SButton from "@/components/SButton.vue";
 import Avatar from "@/components/Avatar.vue";
 import BowPower from "@/components/BowPower.vue";
-import StartCountdown from "@/components/StartCountdown.vue";
 import { createPractiseAPI, getHomeData } from "@/apis";
 import { generateCanvasImage } from "@/util";
 import { MESSAGETYPES, roundsName } from "@/constants";
@@ -17,7 +16,6 @@ import { storeToRefs } from "pinia";
 const store = useStore();
 const { user } = storeToRefs(store);
 const { updateUser } = store;
-const startCount = ref(false);
 const start = ref(false);
 const showScore = ref(false);
 const scores = ref([]);
@@ -30,13 +28,7 @@ const onReady = async () => {
   await createPractiseAPI(total);
   currentRound.value = 0;
   scores.value = [];
-  startCount.value = true;
-};
-
-const onStart = () => {
   start.value = true;
-  scores.value = [];
-  currentRound.value = 0;
 };
 
 async function onReceiveMessage(messages = []) {
@@ -95,6 +87,7 @@ onUnmounted(() => {
         <BowPower :power="power" />
       </view>
       <BowTarget
+        :start="start"
         :totalRound="start ? total / 4 : 0"
         :currentRound="currentRound"
         :scores="scores"
@@ -115,12 +108,9 @@ onUnmounted(() => {
         :result="practiseResult"
       />
       <canvas class="share-canvas" canvas-id="shareCanvas"></canvas>
-      <StartCountdown :start="startCount" :onFinish="onStart" />
     </view>
     <view :style="{ marginBottom: '20px' }">
-      <SButton v-if="!startCount" :onClick="onReady">
+      <SButton v-if="!start" :onClick="onReady">准备好了，直接开始</SButton>
-        准备好了，直接开始
-      </SButton>
     </view>
   </Container>
 </template>

src/pages/practise-two.vue

@@ -8,7 +8,6 @@ import ScoreResult from "@/components/ScoreResult.vue";
 import SButton from "@/components/SButton.vue";
 import Avatar from "@/components/Avatar.vue";
 import BowPower from "@/components/BowPower.vue";
-import StartCountdown from "@/components/StartCountdown.vue";
 import { createPractiseAPI, getHomeData } from "@/apis";
 import { generateCanvasImage } from "@/util";
 import { MESSAGETYPES } from "@/constants";
@@ -17,7 +16,6 @@ import { storeToRefs } from "pinia";
 const store = useStore();
 const { user } = storeToRefs(store);
 const { updateUser } = store;
-const startCount = ref(false);
 const start = ref(false);
 const showScore = ref(false);
 const scores = ref([]);
@@ -30,13 +28,7 @@ const onReady = async () => {
   await createPractiseAPI(total);
   currentRound.value = 0;
   scores.value = [];
-  startCount.value = true;
-};
-
-const onStart = () => {
   start.value = true;
-  scores.value = [];
-  currentRound.value = 0;
 };
 
 async function onReceiveMessage(messages = []) {
@@ -88,6 +80,7 @@ onUnmounted(() => {
         <BowPower :power="power" />
       </view>
       <BowTarget
+        :start="start"
         :totalRound="start ? total : 0"
         :currentRound="currentRound"
         :scores="scores"
@@ -115,12 +108,9 @@ onUnmounted(() => {
         :result="practiseResult"
       />
       <canvas class="share-canvas" canvas-id="shareCanvas"></canvas>
-      <StartCountdown :start="startCount" :onFinish="onStart" />
     </view>
     <view :style="{ marginBottom: '20px' }">
-      <SButton v-if="!startCount" :onClick="onReady"
+      <SButton v-if="!start" :onClick="onReady">准备好了，直接开始</SButton>
-        >准备好了，直接开始</SButton
-      >
     </view>
   </Container>
 </template>

src/pages/team-bow-data.vue

@@ -100,7 +100,9 @@ const onClickTab = (index) => {
       <view class="score-row" v-for="(player, index) in players" :key="index">
         <Avatar
           :src="player.avatar"
-          :borderColor="data.bluePlayers[player.playerId] ? 1 : 2"
+          :borderColor="
+            data.bluePlayers[player.playerId] ? '#64BAFF' : '#FF6767'
+          "
         />
         <view
           v-if="selected === 0"