UI细节调整

2025-06-25 00:09:53 +08:00
parent 6e25124a27
commit 0e73648d6c
14 changed files with 138 additions and 105 deletions
--- a/src/components/Avatar.vue
+++ b/src/components/Avatar.vue
@@ -21,15 +21,10 @@ defineProps({
    default: 45,
  },
  borderColor: {
-    type: Number,
-    default: 0,
+    type: String,
+    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"
    />
--- a/src/components/BowTarget.vue
+++ b/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">
-      <text v-if="debug" class="header-tips">大人，请射箭</text>
+    <view class="header" v-if="totalRound > 0 || power">
      <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;
--- a/src/components/Header.vue
+++ b/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>
--- a/src/components/ShootProgress.vue
+++ b/src/components/ShootProgress.vue
@@ -57,18 +57,23 @@ watch(
    if (newVal === false) {
      if (timer.value) clearInterval(timer.value);
    }
-    if (oldVal === false && newVal === true) {
-      remain.value = props.total;
-      timer.value = setInterval(() => {
-        if (remain.value > 0) {
-          remain.value--;
-        } else {
-          props.onTimeIsUp();
-        }
-      }, 1000);
+    if (!oldVal && newVal === true) {
+      setTimeout(() => {
+        remain.value = props.total;
+        timer.value = setInterval(() => {
+          if (remain.value > 0) {
+            remain.value--;
+          } else {
+            props.onTimeIsUp();
+          }
+        }, 1000);
+      }, 3000);
    } else {
      if (timer.value) clearInterval(timer.value);
    }
+  },
+  {
+    immediate: true,
  }
 );

--- a/src/components/StartCountdown.vue
+++ b/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;
-  top: 120px;
+  position: absolute;
+  top: calc(50% - 50px);
  left: calc(50% - 30px);
 }
 .number {
--- a/src/components/UserHeader.vue
+++ b/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;
-  height: 16px;
+  width: 100rpx;
 }

 .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;
 }
--- a/src/pages/battle-result.vue
+++ b/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>
--- a/src/pages/be-vip.vue
+++ b/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>
--- a/src/pages/first-try.vue
+++ b/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, getHomeData } from "@/apis";
+import { createPractiseAPI } 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">
-        <Avatar :src="user.avatar" :size="35" />
+      <view class="infos" v-if="step === 2 || step === 4">
+        <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>
--- a/src/pages/index.vue
+++ b/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;
-  width: 18px;
-  height: 18px;
+  left: 12px;
+  width: 16px;
+  height: 16px;
 }
 .player-avatar > view:first-child {
  border-radius: 50%;
  background: #777777;
  text-align: center;
-  font-size: 11px;
-  line-height: 20px;
-  width: 20px;
-  height: 20px;
+  font-size: 10px;
+  line-height: 18px;
+  width: 18px;
+  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: 10px;
+  font-size: 9px;
  line-height: 40px;
-  display: flex;
-  justify-content: flex-end;
+  text-align: center;
+  z-index: -1;
 }

 .more-players > text {
-  margin-right: 4px;
+  margin-left: 4px;
 }

 .region-stats {
--- a/src/pages/match-detail.vue
+++ b/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>
--- a/src/pages/practise-one.vue
+++ b/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>
+      <SButton v-if="!start" :onClick="onReady">准备好了，直接开始</SButton>
    </view>
  </Container>
 </template>
--- a/src/pages/practise-two.vue
+++ b/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
-      >
+      <SButton v-if="!start" :onClick="onReady">准备好了，直接开始</SButton>
    </view>
  </Container>
 </template>
--- a/src/pages/team-bow-data.vue
+++ b/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"