UI流程完善

src/components/ShootProgress.vue

@@ -0,0 +1,83 @@
+<script setup>
+import { ref, onMounted } from "vue";
+const props = defineProps({
+  tips: {
+    type: String,
+    default: "",
+  },
+  total: {
+    type: Number,
+    default: 0,
+  },
+});
+const remain = ref(0);
+onMounted(() => {
+  remain.value = props.total;
+  setInterval(() => {
+    if (remain.value > 0) {
+      remain.value--;
+    }
+  }, 1000);
+});
+</script>
+
+<template>
+  <view class="container">
+    <view>
+      <image src="../static/shooter.png" mode="widthFix" />
+      <text>{{ remain === 0 ? "射箭时间到！" : tips }}</text>
+      <button>
+        <image src="../static/sound-yellow.png" mode="widthFix" />
+      </button>
+    </view>
+    <view>
+      <view :style="{ width: `${((total - remain) / total) * 100}%` }" />
+      <text>剩余{{ remain }}秒</text>
+    </view>
+  </view>
+</template>
+
+<style scoped>
+.container {
+  width: 100vw;
+}
+.container > view:first-child {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 0 15px;
+  color: #fed847;
+  z-index: 1;
+}
+.container > view:first-child > image:first-child {
+  width: 80px;
+}
+.container > view:first-child > button:last-child > image {
+  width: 50px;
+}
+.container > view:last-child {
+  z-index: -1;
+  width: clac(100% - 30px);
+  margin: 0 15px;
+  text-align: center;
+  background-color: #ffffff80;
+  border-radius: 20px;
+  margin-top: -14px;
+  font-size: 12px;
+  height: 20px;
+  line-height: 20px;
+  position: relative;
+  transition: all 0.5s linear;
+  overflow: hidden;
+}
+.container > view:last-child > view {
+  position: absolute;
+  height: 20px;
+  background-color: #fed847;
+  border-radius: 20px;
+  z-index: -1;
+}
+.container > view:last-child > text {
+  z-index: 1;
+}
+</style>