main
wangqiujuan0808 2023-12-01 21:31:53 +08:00
parent 7067612e02
commit 6b3eb0dca9
3 changed files with 88 additions and 19 deletions

View File

@ -123,7 +123,8 @@ aside {
//main-container
.app-container {
padding: 20px;
height: 80px;
}
.components-container {

View File

@ -8,12 +8,16 @@
</span>
</div>
<div class="middle">
BIM运维管理系统
BIM运维管理系统
</div>
<div class="right-menu">
<template v-if="appStore.device !== 'mobile'">
<p class="mr10">
{{ currentTime }}
<p class="time">
<font> {{ time }} </font>
<div class="currentTime-week">
<div>{{ currentTime }}</div>
<div>{{ week }}</div>
</div>
</p>
<header-search id="header-search" class="right-menu-item" />
@ -75,11 +79,16 @@ const appStore = useAppStore()
const userStore = useUserStore()
const settingsStore = useSettingsStore()
const currentTime = ref("");
const interval = ref("");
const data = reactive({
interval: "",
currentTime: "",
time: "",
week: ""
});
const { interval, currentTime, time, week } = toRefs(data);
onMounted(() => {
interval = setInterval(updateTime, 1000);
setInterval(updateTime, 1000);
});
function toggleSideBar() {
appStore.toggleSideBar()
@ -110,8 +119,36 @@ function logout() {
}).catch(() => { });
}
const updateTime = () => {
currentTime = dayjs().format("YYYY年 MM月 DD日");
currentTime.value = dayjs().format("YYYY年 MM月 DD日");
time.value = dayjs().format("HH:mm");
week.value = format(dayjs().day());
};
const format = (week) => {
switch (week) {
case 1:
return '星期一';
break;
case 2:
return '星期二';
break;
case 3:
return '星期三';
break;
case 4:
return '星期四';
break;
case 5:
return '星期五';
break;
case 6:
return '星期六';
break;
case 0:
return '星期日';
break;
}
}
const emits = defineEmits(['setLayout'])
function setLayout() {
emits('setLayout');
@ -127,27 +164,54 @@ function setLayout() {
box-shadow: 0 1px 4px rgba(0, 21, 41, 0.08);
display: flex;
justify-content: space-between;
.left {
width: 33%;
display: flex;
align-items: center;
height: 100%;
border: 1px solid red;
// border: 1px solid red;
}
.middle {
width: 33%;
border: 1px solid red;
// border: 1px solid red;
display: flex;
align-items: center;
justify-content: center;
}
.right-menu {
width: 33%;
border: 1px solid red;
// border: 1px solid red;
display: flex;
align-items: center;
justify-content: end;
.time {
display: flex;
align-items: center;
height: 100%;
font {
font-size: 30px;
}
.currentTime-week {
height: 100%;
margin: 0 10px;
>div {
width: 100%;
height: 50% !important;
display: flex !important;
align-items: center !important;
justify-content: center;
}
}
}
}
.hamburger-container {
line-height: 46px;
height: 100%;
@ -227,5 +291,4 @@ function setLayout() {
}
}
}
}
</style>
}</style>

View File

@ -33,15 +33,20 @@ const gotoPage = (item) => {
.home {
.topMenu {
width: 100%;
height: 45px;
border: 1px solid red;
height: 100%;
// border: 1px solid red;
display: flex;
justify-content: space-between;
align-items: center;
background: rgba(0, 225, 255, 0.445);
> div {
width: 240px;
width: 260px;
height: 100%;
cursor: pointer;
background: red;
display: flex;
align-items: center;
border-right: 1px solid #fff;
justify-content: center;
font-size: 20px;
}
}
}