mirror of
https://github.com/unanmed/HumanBreak.git
synced 2025-06-28 21:27:59 +08:00
47 lines
1.1 KiB
Vue
47 lines
1.1 KiB
Vue
<template>
|
|
<span ref="span" class="tip">{{ nowTip }}</span>
|
|
</template>
|
|
|
|
<script lang="ts" setup>
|
|
import { onMounted, onUnmounted, ref } from 'vue';
|
|
import tips from '../data/tips.json';
|
|
|
|
const span = ref<HTMLSpanElement>();
|
|
const nowTip = ref<string>();
|
|
|
|
function changeTip() {
|
|
const tip = tips[Math.floor(Math.random() * tips.length)];
|
|
if (!tip) return;
|
|
nowTip.value = '小贴士：' + tip;
|
|
}
|
|
|
|
const interval = window.setInterval(changeTip, 30_000);
|
|
|
|
function resize() {
|
|
const game = core.dom.gameDraw;
|
|
const right = window.innerWidth - (game.offsetLeft + game.offsetWidth);
|
|
const bottom = window.innerHeight - game.offsetTop;
|
|
if (!span.value) return;
|
|
span.value.style.right = `${right}px`;
|
|
span.value.style.bottom = `${bottom + 6}px`;
|
|
}
|
|
|
|
onMounted(() => {
|
|
window.addEventListener('resize', resize);
|
|
resize();
|
|
changeTip();
|
|
});
|
|
|
|
onUnmounted(() => {
|
|
window.removeEventListener('resize', resize);
|
|
window.clearInterval(interval);
|
|
});
|
|
</script>
|
|
|
|
<style lang="less" scoped>
|
|
.tip {
|
|
position: fixed;
|
|
font: 150% 'normal';
|
|
}
|
|
</style>
|