From 50ee7232f3c98fe24a1f2e31dba9508cfec14887 Mon Sep 17 00:00:00 2001
From: gjj <Ganjj@probim.com.cn>
Date: Fri, 21 Feb 2025 17:35:39 +0800
Subject: [PATCH] 模型预览
---
src/components/Header.vue | 98 +++++++++++++++++++++++++++++++++++++++++++++++++
1 files changed, 98 insertions(+), 0 deletions(-)
diff --git a/src/components/Header.vue b/src/components/Header.vue
new file mode 100644
index 0000000..4b4c510
--- /dev/null
+++ b/src/components/Header.vue
@@ -0,0 +1,98 @@
+<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">
+ <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('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]">
+ <img class="w-[20px] h-[20px]" :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>
+ import DropDown from "./DropDown.vue";
+
+ export default {
+ name: "AppHeader",
+ components: {
+ "drop-down": DropDown,
+ },
+ data() {
+ return {
+ activeTab: 'home',
+ currentTime: '',
+ currentDate: '',
+ timer: null,
+ backgroundImage: new URL('@/assets/images/backgrounds/logo.png', import.meta.url).href
+ }
+ },
+ props: {
+ selectedId: {
+ type: String,
+ default: "",
+ },
+ optionList: {
+ type: Array,
+ default: () => [],
+ },
+ },
+ methods: {
+ getImageUrl(name) {
+ return new URL(`../assets/images/backgrounds/${name}`, import.meta.url).href
+ },
+ onHomeClick(tab) {
+ this.activeTab = tab;
+ },
+ onProjectChange(data) {
+ this.$store.commit("common/setCurrentProject", data);
+ },
+ 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}`;
+ }
+ },
+ mounted() {
+ this.updateTime();
+ this.timer = setInterval(this.updateTime, 1000);
+ },
+ beforeDestroy() {
+ if (this.timer) {
+ clearInterval(this.timer);
+ }
+ }
+ };
+</script>
--
Gitblit v1.9.3