132 lines
2.6 KiB
Vue
132 lines
2.6 KiB
Vue
<script setup>
|
|
import { ref, watch } from "vue";
|
|
const props = defineProps({
|
|
start: {
|
|
type: Boolean,
|
|
default: false,
|
|
},
|
|
tips: {
|
|
type: String,
|
|
default: "",
|
|
},
|
|
total: {
|
|
type: Number,
|
|
default: 90,
|
|
},
|
|
seq: {
|
|
type: Number,
|
|
default: 0,
|
|
},
|
|
});
|
|
|
|
const barColor = ref("#fed847");
|
|
|
|
const remain = ref(props.total);
|
|
const timer = ref(null);
|
|
|
|
watch(
|
|
() => props.tips,
|
|
(newVal) => {
|
|
if (newVal.includes("红队")) barColor.value = "#FF6060";
|
|
if (newVal.includes("蓝队")) barColor.value = "#5FADFF";
|
|
}
|
|
);
|
|
|
|
watch(
|
|
() => props.seq,
|
|
() => {
|
|
if (timer.value) clearInterval(timer.value);
|
|
remain.value = props.total;
|
|
timer.value = setInterval(() => {
|
|
if (remain.value > 0) {
|
|
remain.value--;
|
|
}
|
|
}, 1000);
|
|
}
|
|
);
|
|
|
|
watch(
|
|
() => props.start,
|
|
(newVal, oldVal) => {
|
|
if (oldVal === false && newVal === true) {
|
|
remain.value = props.total;
|
|
timer.value = setInterval(() => {
|
|
if (remain.value > 0) {
|
|
remain.value--;
|
|
}
|
|
}, 1000);
|
|
} else {
|
|
if (timer.value) clearInterval(timer.value);
|
|
}
|
|
}
|
|
);
|
|
</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}%`,
|
|
backgroundColor: barColor,
|
|
right: tips.includes('红队') ? 0 : 'unset',
|
|
}"
|
|
/>
|
|
<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;
|
|
transform: translateX(-10px);
|
|
}
|
|
.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;
|
|
border-radius: 20px;
|
|
z-index: -1;
|
|
transition: all 0.3s linear;
|
|
}
|
|
.container > view:last-child > text {
|
|
z-index: 1;
|
|
}
|
|
</style>
|