84 lines
1.6 KiB
Vue
84 lines
1.6 KiB
Vue
<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>
|