农场 nuxt3实现的大屏界面
You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
 
 
 

52 lines
1.1 KiB

<template>
<header
:class="{ 'bg-center': scene === 'center', 'bg-farm': scene === 'farm' }"
>
<!-- 时间-->
<PageTime></PageTime>
<!-- 按钮组-->
<PageButtons @click-btn="onClickBtn"></PageButtons>
<CommonWeather></CommonWeather>
</header>
</template>
<script setup>
import { inject } from 'vue';
import { useRouter } from 'vue-router';
const scene = inject('scene');
const modalDisplay = useModal(); // 是否显示modal
const router = useRouter();
function onClickBtn({ index: btnIndex, item }) {
if (btnIndex === 0) {
modalDisplay.value = !modalDisplay.value;
} else if (btnIndex === 2) {
// monitorDisplay.value = !monitorDisplay.value;
if (scene === 'farm') {
// 跳转到 /
router.push('/');
} else {
// 跳转到 /farm
router.push('/farm');
}
}
}
</script>
<style scoped>
.bg-center {
position: relative;
height: 115rem;
background: url('@/assets/top.png') no-repeat center;
background-size: 100% 114rem;
}
.bg-farm {
position: relative;
height: 115rem;
background: url('@/assets/farm-top.png') no-repeat center;
background-size: 100% 114rem;
}
</style>