细节优化

src/components/BowData.vue

@@ -53,6 +53,7 @@ const props = defineProps({
       :total="arrows.length"
       :scores="arrows.map((a) => a.ring)"
     />
+    <text>长按保存本次靶纸</text>
   </view>
 </template>
 
@@ -69,6 +70,11 @@ const props = defineProps({
   align-items: center;
   z-index: 10;
 }
+.container > text:last-child {
+  font-size: 14px;
+  color: #fff9;
+  margin-top: 20px;
+}
 .header {
   display: flex;
   justify-content: space-between;
@@ -79,6 +85,7 @@ const props = defineProps({
 .header > view:first-child {
   display: flex;
   align-items: center;
+  margin-left: 10px;
 }
 .header > view:first-child > view:last-child {
   display: flex;

src/components/BowPower.vue

@@ -8,7 +8,7 @@ defineProps({
 </script>
 
 <template>
-  <view class="container">
+  <view class="container" :style="{ opacity: power > 0 ? 1 : 0 }">
     <image src="../static/b-power.png" mode="widthFix" />
     <view>电量{{ power }}%</view>
   </view>

src/components/BowTarget.vue

@@ -43,14 +43,16 @@ const props = defineProps({
 const showRoundTips = ref(false);
 const showLatestArrow = ref(false);
 const prevLength = ref(0);
+const timer = ref(null);
 
 watch(
   () => props.scores,
   (newVal) => {
     if (newVal.length - prevLength.value === 1) {
+      if (timer.value) clearTimeout(timer.value);
       showRoundTips.value = true;
       showLatestArrow.value = true;
-      setTimeout(() => {
+      timer.value = setTimeout(() => {
         showRoundTips.value = false;
       }, 1000);
     }
@@ -80,7 +82,7 @@ function calcRealY(num) {
         "/" +
         totalRound
       }}</text>
-      <BowPower v-if="power > 0" :power="power" />
+      <BowPower :power="power" />
     </view>
     <view class="target">
       <view

src/components/PlayerScore.vue

@@ -70,6 +70,7 @@ const rowCount = new Array(6).fill(0);
   white-space: nowrap;
   overflow: hidden;
   text-overflow: ellipsis;
+  width: 20%;
 }
 .container > view:nth-child(3) {
   display: flex;

src/components/SButton.vue

@@ -50,5 +50,6 @@ const props = defineProps({
   display: flex;
   justify-content: center;
   align-items: center;
+  color: #000;
 }
 </style>

src/components/Signin.vue

@@ -96,6 +96,7 @@ const handleLogin = () => {
         type="nickname"
         class="nickname-input"
         placeholder="请输入昵称"
+        placeholder-style="color: #ccc" 
         @change="onNicknameChange"
         @blur="onNicknameBlur"
       />