添加2v2页面

src/components/ShootProgress2.vue

@@ -0,0 +1,115 @@
+<script setup>
+import { ref, watch, onMounted, onUnmounted } from "vue";
+import { RoundGoldImages } from "@/constants";
+const props = defineProps({
+  tips: {
+    type: String,
+    default: "",
+  },
+  total: {
+    type: Number,
+    default: 15,
+  },
+  currentRound: {
+    type: String,
+    default: "round1",
+  },
+});
+
+const barColor = ref("linear-gradient( 180deg, #FFA0A0 0%, #FF6060 100%)");
+const remain = ref(10);
+const timer = ref(null);
+
+watch(
+  () => props.tips,
+  (newVal) => {
+    if (newVal.includes("红队"))
+      barColor.value = "linear-gradient( 180deg, #FFA0A0 0%, #FF6060 100%)";
+    if (newVal.includes("蓝队"))
+      barColor.value = "linear-gradient( 180deg, #9AB3FF 0%, #4288FF 100%)";
+    if (newVal.includes("红队") || newVal.includes("蓝队")) {
+      if (timer.value) clearInterval(timer.value);
+      remain.value = props.total;
+      timer.value = setInterval(() => {
+        if (remain.value > 0) remain.value--;
+      }, 1000);
+    }
+    console.log(barColor.value);
+  },
+  {
+    immediate: true,
+  }
+);
+
+const updateRemain = (value) => {
+  if (timer.value) clearInterval(timer.value);
+  remain.value = Math.round(value);
+  if (remain.value > 0) {
+    timer.value = setInterval(() => {
+      if (remain.value > 0) remain.value--;
+    }, 1000);
+  }
+};
+
+onMounted(() => {
+  uni.$on("update-ramain", updateRemain);
+});
+
+onUnmounted(() => {
+  uni.$off("update-ramain", updateRemain);
+  if (timer.value) clearInterval(timer.value);
+});
+</script>
+
+<template>
+  <view class="container">
+    <image :src="RoundGoldImages[props.currentRound]" mode="widthFix" />
+    <view>
+      <view
+        :style="{
+          width: `${(remain / total) * 100}%`,
+          background: barColor,
+          right: tips.includes('红队') ? 0 : 'unset',
+        }"
+      />
+      <text>剩余{{ remain }}秒</text>
+    </view>
+  </view>
+</template>
+
+<style scoped>
+.container {
+  width: 50vw;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  margin-bottom: 12vw;
+}
+.container > image {
+  width: 100%;
+  transform: translateY(7px);
+}
+.container > view:last-child {
+  width: 100%;
+  text-align: center;
+  background-color: #444444;
+  border-radius: 20px;
+  font-size: 12px;
+  height: 15px;
+  line-height: 15px;
+  position: relative;
+  overflow: hidden;
+}
+.container > view:last-child > view {
+  position: absolute;
+  height: 15px;
+  border-radius: 15px;
+  transition: all 1s linear;
+}
+.container > view:last-child > text {
+  font-size: 10px;
+  line-height: 15px;
+  color: #fff;
+  position: relative;
+}
+</style>