UI开发

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>
-      <image v-if="!debug" :src="avatar" mode="widthFix" />
-      <view>
-        <image src="../static/b-power.png" mode="widthFix" />
-        <view>电量{{ power }}%</view>
-      </view>
-      <text v-if="!tips && totalRound > 0">{{
+      <!-- <text v-if="debug" class="header-tips">大人，请射箭</text> -->
+      <text v-if="totalRound > 0" class="round-count">{{
         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) {
-  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;
+.round-count {
   font-size: 20px;
   color: #fed847;
   top: 75px;
-  font-size: 16px;
 }
 .header-tips {
   font-size: 20px;