UI开发

src/components/ShootProgress.vue

@@ -7,9 +7,12 @@ const props = defineProps({
   },
   total: {
     type: Number,
-    default: 0,
+    default: 90,
   },
 });
+let barColor = "#fed847";
+if (props.tips.includes("红队")) barColor = "#FF6060";
+if (props.tips.includes("蓝队")) barColor = "#5FADFF";
 const remain = ref(0);
 onMounted(() => {
   remain.value = props.total;
@@ -31,7 +34,13 @@ onMounted(() => {
       </button>
     </view>
     <view>
-      <view :style="{ width: `${((total - remain) / total) * 100}%` }" />
+      <view
+        :style="{
+          width: `${((total - remain) / total) * 100}%`,
+          backgroundColor: barColor,
+          right: tips.includes('红队') ? 0 : 'unset',
+        }"
+      />
       <text>剩余{{ remain }}秒</text>
     </view>
   </view>
@@ -73,7 +82,6 @@ onMounted(() => {
 .container > view:last-child > view {
   position: absolute;
   height: 20px;
-  background-color: #fed847;
   border-radius: 20px;
   z-index: -1;
 }