UI流程完善

src/components/BowTarget.vue

@@ -1,15 +1,50 @@
-<script setup></script>
+<script setup>
+defineProps({
+  totalRound: {
+    type: Number,
+    default: 0,
+  },
+  currentRound: {
+    type: Number,
+    default: 0,
+  },
+  avatar: {
+    type: String,
+    default: "",
+  },
+  power: {
+    type: Number,
+    default: 0,
+  },
+  tips: {
+    type: String,
+    default: "",
+  },
+  debug: {
+    type: Boolean,
+    default: false,
+  },
+});
+</script>
 
 <template>
   <view class="container">
     <view class="header">
-      <image src="../static/avatar.png" mode="widthFix" />
+      <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>电量50%</view>
+        <view>电量{{ power }}%</view>
       </view>
+      <text v-if="!tips && totalRound > 0">{{
+        currentRound + "/" + totalRound
+      }}</text>
     </view>
     <image src="../static/bow-target.png" mode="widthFix" />
+    <view v-if="debug" class="footer">
+      <image :src="avatar" mode="widthFix" />
+    </view>
+    <text v-if="tips">{{ tips }}</text>
   </view>
 </template>
 
@@ -17,33 +52,60 @@
 .container {
   position: relative;
   width: calc(100% - 30px);
-  padding: 50px 15px;
+  padding: 15px;
 }
 .container > image {
   width: 100%;
+  padding: 10px 0;
 }
 .header {
-  position: absolute;
-  top: 0px;
-  left: 0px;
-  width: calc(100% - 30px);
+  width: calc(100% - 20px);
   display: flex;
   align-items: center;
   justify-content: space-between;
-  padding: 20px 15px;
   font-size: 13px;
+  padding: 0 10px;
 }
-.header > image {
+.header > image:first-child {
   width: 40px;
   height: 40px;
 }
-.header > view {
+.header > view:nth-child(2) {
   display: flex;
   align-items: center;
   color: #b9b9b9;
 }
-.header > view > image {
+.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;
+  color: #fed847;
+}
+.footer {
+  width: calc(100% - 20px);
+  padding: 0 10px;
+  display: flex;
+  margin-top: -40px;
+}
+.footer > image {
+  width: 40px;
+  height: 40px;
+}
+.container > text {
+  width: 100%;
+  color: #fed847;
+  text-align: center;
+  line-height: 40px;
+  display: block;
+  margin-top: 20px;
+}
 </style>