<!--
|
* @Author: gjj Ganjj@probim.com.cn
|
* @Date: 2025-02-14 14:32:18
|
* @LastEditors: gjj Ganjj@probim.com.cn
|
* @LastEditTime: 2025-03-17 11:05:39
|
* @FilePath: \北京交通大学\src\components\Header.vue
|
* @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
|
-->
|
<template>
|
<header class="headerWrapper">
|
<div
|
class="relative z-[100] w-full h-[80px]"
|
:style="{
|
backgroundImage: `url(${backgroundImage})`,
|
backgroundRepeat: 'no-repeat',
|
backgroundPosition: 'center center',
|
backgroundSize: '100% 100%',
|
}"
|
>
|
<div class="absolute top-0 left-1/2 -translate-x-1/2 h-full px-[16px] flex items-center justify-between tabWrapper">
|
<div class="flex flex-col items-center cursor-pointer relative" @click="onHomeClick('home')">
|
<div class="flex items-center">
|
<img class="w-[20px] h-[20px]" :src="getImageUrl(activeTab === 'home' ? 'home_active.png' : 'home.png')" alt="" />
|
<div class="text-[20px] text-[#C8C8C8] ml-[8px]" :class="{ 'text-[#FFBF00]': activeTab === 'home' }">项目首页</div>
|
</div>
|
<img class="w-[116px] h-[8px] absolute bottom-[-4px]" :src="getImageUrl('home_line.png')" alt="" v-if="activeTab === 'home'" />
|
</div>
|
<div class="flex flex-col items-center ml-[78px] cursor-pointer relative" @click="onHomeClick('xietong')">
|
<div class="flex items-center">
|
<img class="w-[20px] h-[20px]" :src="getImageUrl(activeTab === 'xietong' ? 'xietong_active.png' : 'xietong.png')" alt="" />
|
<div class="text-[20px] text-[#C8C8C8] ml-[8px]" :class="{ 'text-[#FFBF00]': activeTab === 'xietong' }">协同平台</div>
|
</div>
|
<img class="w-[116px] h-[8px] absolute bottom-[-4px]" :src="getImageUrl('home_line.png')" alt="" v-if="activeTab === 'xietong'" />
|
</div>
|
|
<div class="flex flex-col items-center ml-[78px] cursor-pointer relative" @click="onHomeClick('zhihui')">
|
<div class="flex items-center">
|
<img class="w-[20px] h-[20px]" :src="getImageUrl(activeTab === 'zhihui' ? 'zhihui_active.png' : 'zhihui.png')" alt="" />
|
<div class="text-[20px] text-[#C8C8C8] ml-[8px]" :class="{ 'text-[#FFBF00]': activeTab === 'zhihui' }">智慧工地</div>
|
</div>
|
<img class="w-[116px] h-[8px] absolute bottom-[-4px]" :src="getImageUrl('home_line.png')" alt="" v-if="activeTab === 'zhihui'" />
|
</div>
|
</div>
|
<div class="absolute top-0 right-0">
|
<div class="flex items-center h-[80px] mr-[20px]">
|
<el-select v-model="projectSelected" placeholder="请选择" class="mr-[24px]">
|
<el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value" />
|
</el-select>
|
<i
|
class="el-icon-full-screen cursor-pointer text-[#00FFFF] text-[24px]"
|
@click="handleFullscreen"
|
:title="$fullscreen.isFullscreen ? '退出全屏' : '全屏'"
|
></i>
|
<img class="w-[20px] h-[20px] ml-[8px]" :src="getImageUrl('time.png')" alt="" />
|
<div class="text-[24px] text-[#FFBF00] ml-[8px]">{{ currentTime }}</div>
|
<div class="text-[16px] text-[#C8C8C8] ml-[20px]">{{ currentDate }}</div>
|
</div>
|
</div>
|
</div>
|
</header>
|
</template>
|
|
<script>
|
export default {
|
name: "AppHeader",
|
components: {},
|
props: {
|
selectedId: {
|
type: String,
|
default: "",
|
},
|
optionList: {
|
type: Array,
|
default: () => [],
|
},
|
},
|
data() {
|
return {
|
projectSelected: "",
|
options: [
|
{ value: "project1", label: "项目1" },
|
{ value: "project2", label: "项目2" },
|
{ value: "project3", label: "项目3" },
|
],
|
activeTab: "home",
|
currentTime: "",
|
currentDate: "",
|
timer: null,
|
backgroundImage: new URL("@/assets/images/backgrounds/logo.png", import.meta.url).href,
|
};
|
},
|
mounted() {
|
this.updateTime();
|
this.timer = setInterval(this.updateTime, 1000);
|
},
|
beforeDestroy() {
|
if (this.timer) {
|
clearInterval(this.timer);
|
}
|
},
|
methods: {
|
handleFullscreen() {
|
if (this.$fullscreen.isFullscreen) {
|
this.$fullscreen.exit();
|
} else {
|
this.$fullscreen.request();
|
}
|
},
|
getImageUrl(name) {
|
return new URL(`../assets/images/backgrounds/${name}`, import.meta.url).href;
|
},
|
onHomeClick(tab) {
|
this.activeTab = tab;
|
this.$emit("onHomeClick", tab);
|
},
|
updateTime() {
|
const now = new Date();
|
const hours = String(now.getHours()).padStart(2, "0");
|
const minutes = String(now.getMinutes()).padStart(2, "0");
|
const seconds = String(now.getSeconds()).padStart(2, "0");
|
this.currentTime = `${hours}:${minutes}:${seconds}`;
|
|
const year = now.getFullYear();
|
const month = String(now.getMonth() + 1).padStart(2, "0");
|
const day = String(now.getDate()).padStart(2, "0");
|
const weekDays = ["日", "一", "二", "三", "四", "五", "六"];
|
const weekDay = weekDays[now.getDay()];
|
this.currentDate = `${year}.${month}.${day} 星期${weekDay}`;
|
},
|
},
|
};
|
</script>
|
<style lang="scss" scoped>
|
.tabWrapper {
|
margin-left: 150px;
|
}
|
::v-deep(.el-select) {
|
width: 160px;
|
height: 28px;
|
background: rgba(33,72,115,0.9);
|
border-radius: 2px;
|
.el-input {
|
align-items: center;
|
display: flex;
|
height: 28px;
|
.el-input__inner {
|
height: 28px;
|
font-family: PingFangSC, PingFang SC;
|
font-weight: 400;
|
font-size: 14px;
|
color: #ffffff;
|
line-height: 20px;
|
text-align: left;
|
font-style: normal;
|
}
|
.el-input__suffix {
|
align-items: center;
|
display: flex;
|
}
|
}
|
}
|
</style>
|
