<script setup lang="ts">
|
import {
|
useDarkMode,
|
useToggleDarkMode
|
} from "@/composables/useToggleDarkMode";
|
import { ref, onMounted, onBeforeUnmount } from "vue";
|
import dayjs from "dayjs";
|
import { useRouter } from "vue-router";
|
const router = useRouter();
|
|
const onClickRight = (event: TouchEvent | MouseEvent) => {
|
useToggleDarkMode(event);
|
};
|
|
const menuList = ref([
|
{
|
name: "检测",
|
icon: "tv-o",
|
path: "/demo"
|
},
|
{
|
name: "分析",
|
icon: "chart-trending-o",
|
path: "/analy"
|
},
|
{
|
name: "校准",
|
icon: "aim",
|
path: "/calibration"
|
},
|
{
|
name: "设置",
|
icon: "setting-o",
|
path: "/setting"
|
},
|
{
|
name: "系统",
|
icon: "info-o",
|
path: "/system"
|
}
|
]);
|
const clickMenuIndex = ref(0);
|
const onClickMenu = (item: any, index: number) => {
|
if (clickMenuIndex.value === index) return false;
|
clickMenuIndex.value = index;
|
goToPage(item.path);
|
};
|
|
const goToPage = (page: string) => {
|
router.push(`${page}`);
|
};
|
|
const currentTime = ref("");
|
|
// 更新时间函数
|
const updateTime = () => {
|
currentTime.value = dayjs().format("YYYY-MM-DD HH:mm:ss");
|
};
|
|
let timer = null;
|
|
onMounted(() => {
|
updateTime(); // 立即更新一次
|
timer = setInterval(updateTime, 1000); // 每秒更新
|
});
|
|
onBeforeUnmount(() => {
|
clearInterval(timer); // 组件卸载时清除定时器
|
});
|
</script>
|
|
<template>
|
<div class="app">
|
<div class="menu_logo_box">
|
<img class="logo" src="@/assets/logo.png" />
|
<span class="ml-2">粮食水分仪系统</span>
|
</div>
|
<div class="menu_box">
|
<div
|
v-for="(item, index) in menuList"
|
:key="index"
|
class="item"
|
:class="{ active: index === clickMenuIndex }"
|
@click="onClickMenu(item, index)"
|
>
|
<van-icon :name="item.icon" size="30" />
|
{{ item.name }}
|
</div>
|
</div>
|
|
<div class="menu-info">
|
<div class="info-time mr-6 font-sans">
|
{{ currentTime }}
|
</div>
|
<div class="info-setting pr-8">
|
<!-- <div class="img-border mr-5" @click.stop="goToPage('/system')">
|
<img src="@/assets/icon/icon-tips.png" class="w-[30px]" />
|
</div>-->
|
<div class="img-border">
|
<img src="@/assets/icon/icon-close.png" class="w-[30px]" />
|
</div>
|
</div>
|
</div>
|
</div>
|
</template>
|
|
<style lang="less" scoped>
|
.app {
|
width: 100vw;
|
height: 85px;
|
background: var(--base-green);
|
color: white;
|
display: flex;
|
user-select: none;
|
font-family: "Microsoft YaHei", sans-serif;
|
cursor: pointer;
|
|
.menu_logo_box {
|
width: 30%;
|
font-size: 24px;
|
font-weight: bold;
|
display: flex;
|
align-items: center;
|
padding-left: 5px;
|
|
.logo {
|
width: 120px;
|
height: 30px;
|
}
|
}
|
|
.menu_box {
|
width: 45%;
|
display: flex;
|
padding: 0 10px;
|
.item {
|
flex: 1;
|
display: flex;
|
flex-direction: column;
|
justify-content: center;
|
align-items: center;
|
font-size: 20px;
|
font-weight: bold;
|
}
|
.active {
|
position: relative;
|
display: flex;
|
justify-content: center;
|
align-items: center;
|
background-color: var(--color-background-2);
|
color: var(--base-green);
|
font-weight: bold;
|
box-sizing: border-box;
|
}
|
.active::after {
|
content: "";
|
position: absolute;
|
bottom: 0;
|
left: 50%;
|
width: 30%;
|
height: 6px;
|
background-color: var(--base-green);
|
border-radius: 3px;
|
transform: translateX(-50%);
|
}
|
}
|
.menu-info {
|
width: 25%;
|
display: flex;
|
justify-content: flex-end;
|
|
.info-time {
|
width: 50%;
|
}
|
.info-time,
|
.info-setting {
|
display: flex;
|
justify-content: center;
|
align-items: center;
|
font-weight: bold;
|
.img-border {
|
padding: 2px;
|
border: 3px solid white;
|
border-radius: 8px;
|
}
|
}
|
}
|
}
|
</style>
|
