lq/youbai
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Echarts

Browse Source
This commit is contained in:
年糕崽崽
2025-06-10 12:47:00 +08:00
parent c8002eaed2
commit 343b6b3276
12 changed files with 577 additions and 201 deletions
Download Patch File Download Diff File Expand all files Collapse all files

367
src/components/layout/Header.vue
View File

@@ -2,184 +2,147 @@
<header
class="fixed top-0 w-full z-50 transition-all duration-300"
:class="{
'bg-white/90 backdrop-blur-sm shadow-sm py-3': isScrolled || isMenuOpen,
'bg-transparent py-5': !isScrolled && !isMenuOpen
}"
'bg-white/90 backdrop-blur-md shadow-sm py-3': isScrolled || isMenuOpen,
'bg-transparent py-5': !isScrolled && !isMenuOpen
}"
>
<div class="container mx-auto">
<!-- 关键修复：移动端布局优化 -->
<div class="px-3 sm:px-4">
<div class="flex justify-between items-center">
<router-link to="/" class="flex items-center">
<img
src="@/assets/images/logo.png"
alt="酉佰"
class="h-8 md:h-10"
/>
<span class="ml-2 text-xl md:text-2xl font-bold text-primary"
>酉佰</span
>
<router-link to="/" class="flex items-center shrink-0">
<img src="@/assets/images/logo.png" alt="Logo" class="w-8 h-8 md:w-10 md:h-10" />
<span class="ml-2 text-base sm:text-xl md:text-2xl font-bold text-primary whitespace-nowrap">
{{ currentLang === 'zh' ? '酉佰' : 'YouBaiBai' }}
</span>
</router-link>
<nav class="hidden md:flex space-x-8">
<router-link
to="/"
v-for="item in menuItems"
:key="item.path"
:to="item.path"
class="font-medium transition-colors hover:text-primary"
active-class="text-primary"
exact
>首页</router-link
>
<router-link
to="/about"
class="font-medium transition-colors hover:text-primary"
active-class="text-primary"
>公司介绍</router-link
>
<router-link
to="/team"
class="font-medium transition-colors hover:text-primary"
active-class="text-primary"
>团队介绍</router-link
>
<router-link
to="/features"
class="font-medium transition-colors hover:text-primary"
active-class="text-primary"
>服务特色</router-link
>
<router-link
to="/careers"
class="font-medium transition-colors hover:text-primary"
active-class="text-primary"
>加入我们</router-link
:exact="item.exact"
>
{{ item.name }}
</router-link>
</nav>
<div class="hidden md:flex items-center space-x-4">
<!-- <a-->
<!-- href="#"-->
<!-- class="flex items-center justify-center w-10 h-10 rounded-full bg-gray-100 hover:bg-primary hover:text-white transition-colors"-->
<!-- >-->
<!-- <svg class="w-5 h-5" fill="currentColor" viewBox="0 0 24 24">-->
<!-- <path-->
<!-- d="M12,0C5.4,0,0,5.4,0,12s5.4,12,12,12s12-5.4,12-12S18.6,0,12,0z M17,19h-2v-2h2V19z M15,14h-2v5h2V14z M12,8.5c-1.1,0-2,0.9-2,2c0,0.5,0.2,1,0.5,1.4l-0.1,0.6c-0.1,0.3-0.1,0.6-0.1,1v1h4v-1c0-0.4,0-0.7-0.1-1l-0.1-0.6C13.8,11.5,14,11,14,10.5C14,9.4,13.1,8.5,12,8.5z"-->
<!-- />-->
<!-- </svg>-->
<!-- </a>-->
<!-- 语言切换按钮 -->
<button
class="w-full bg-gradient-to-r from-blue-500 to-indigo-600 hover:from-blue-600 hover:to-indigo-700 text-white font-medium py-3 px-6 rounded-lg flex items-center justify-center transition-all duration-300 transform hover:-translate-y-1 shadow-lg hover:shadow-xl active:translate-y-0 active:shadow-md"
@click="toggleLanguage"
class="flex items-center justify-center w-10 h-10 rounded-full bg-gray-100 hover:bg-primary hover:text-white transition-colors"
:title="currentLang === 'zh' ? '切换为英文' : 'Switch to Chinese'"
>
{{ currentLang === 'zh' ? 'EN' : '中' }}
</button>
<button
class="bg-gradient-to-r from-blue-500 to-indigo-600 hover:from-blue-600 hover:to-indigo-700 text-white font-medium py-2 px-4 md:py-3 md:px-6 rounded-lg flex items-center justify-center transition-all duration-300 transform hover:-translate-y-1 shadow-lg hover:shadow-xl active:translate-y-0 active:shadow-md"
@click="openModal"
>
联系我们
{{ currentLang === 'zh' ? '联系我们' : 'Contact' }}
</button>
</div>
<button @click="toggleMenu" class="md:hidden text-gray-700">
<svg
xmlns="http://www.w3.org/2000/svg"
class="h-6 w-6"
fill="none"
viewBox="0 0 24 24"
stroke="currentColor"
<!-- 移动端菜单按钮 - 关键修复区域 -->
<div class="flex items-center space-x-2 md:hidden">
<!-- 移动端语言切换按钮 - 尺寸优化 -->
<button
@click="toggleLanguage"
class="shrink-0 flex items-center justify-center w-8 h-8 rounded-full bg-gray-100 hover:bg-primary hover:text-white transition-colors"
>
<path
stroke-linecap="round"
stroke-linejoin="round"
stroke-width="2"
d="M4 6h16M4 12h16m-7 6h7"
/>
</svg>
</button>
{{ currentLang === 'zh' ? 'EN' : '中' }}
</button>
<button @click="toggleMenu" class="shrink-0 text-gray-700">
<svg
xmlns="http://www.w3.org/2000/svg"
class="h-6 w-6"
fill="none"
viewBox="0 0 24 24"
stroke="currentColor"
>
<path
stroke-linecap="round"
stroke-linejoin="round"
stroke-width="2"
d="M4 6h16M4 12h16m-7 6h7"
/>
</svg>
</button>
</div>
</div>
</div>
<!-- 移动端菜单 -->
<!-- 移动端菜单 - 修复宽度问题 -->
<div
v-show="isMenuOpen"
class="md:hidden fixed inset-0 bg-white z-50 py-5"
style="margin-top: 76px"
class="w-full md:hidden fixed inset-x-0 z-50 bg-white/95 backdrop-blur-lg py-5 overflow-hidden"
:style="{ top: headerHeight + 'px', height: `calc(100vh - ${headerHeight}px)` }"
@click.self="closeMenu"
>
<div class="container">
<nav class="flex flex-col space-y-4 py-4">
<div class="px-4 h-full flex flex-col">
<nav class="flex flex-col space-y-4 py-4 overflow-y-auto">
<router-link
to="/"
v-for="item in menuItems"
:key="item.path"
:to="item.path"
class="font-medium text-lg py-2 transition-colors hover:text-primary"
active-class="text-primary"
@click="closeMenu"
>首页</router-link
>
<router-link
to="/about"
class="font-medium text-lg py-2 transition-colors hover:text-primary"
active-class="text-primary"
@click="closeMenu"
>公司介绍</router-link
>
<router-link
to="/team"
class="font-medium text-lg py-2 transition-colors hover:text-primary"
active-class="text-primary"
@click="closeMenu"
>团队介绍</router-link
>
<router-link
to="/features"
class="font-medium text-lg py-2 transition-colors hover:text-primary"
active-class="text-primary"
@click="closeMenu"
>服务特色</router-link
>
<router-link
to="/careers"
class="font-medium text-lg py-2 transition-colors hover:text-primary"
active-class="text-primary"
@click="closeMenu"
>加入我们</router-link
>
{{ item.name }}
</router-link>
</nav>
<div class="pt-8">
<div class="pt-4 pb-8 mt-auto">
<button
class="w-full bg-primary hover:bg-blue-700 text-white font-semibold py-3 rounded-lg transition-colors"
@click="openModal(); closeMenu();"
>
联系我们
{{ currentLang === 'zh' ? '联系我们' : 'Contact' }}
</button>
</div>
</div>
</div>
</header>
<!-- 模态框组件 -->
<!-- 模态框组件 - 移动端优化 -->
<transition name="modal-fade">
<div v-if="showModal" @click="closeModal" class="fixed inset-0 z-50 overflow-auto bg-black/50 bg-opacity-50 flex items-center justify-center p-4 backdrop-blur-lg ">
<div @click.stop class="bg-white rounded-2xl shadow-xl w-full max-w-3xl overflow-hidden transform transition-all ">
<div v-if="showModal" @click="closeModal" class="fixed inset-0 z-50 overflow-auto bg-black/50 flex items-start justify-center p-4 backdrop-blur-lg">
<div @click.stop class="bg-white rounded-2xl shadow-xl w-full max-w-md sm:max-w-2xl overflow-hidden transform transition-all sm:mt-20">
<!-- 模态框头部 -->
<div class="bg-gradient-to-r from-indigo-600 to-blue-700 p-6 text-white">
<div class="bg-gradient-to-r from-indigo-600 to-blue-700 p-4 sm:p-6 text-white">
<div class="flex justify-between items-center">
<h2 class="text-2xl font-bold">留下您的联系方式</h2>
<h2 class="text-xl sm:text-2xl font-bold">{{ currentLang === 'zh' ? '留下您的联系方式' : 'Leave Your Contact' }}</h2>
<button @click="closeModal" class="text-white hover:text-gray-200">
<i class="fas fa-times text-xl"></i>
<svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12" />
</svg>
</button>
</div>
</div>
<!-- 模态框内容 -->
<div class="p-6 max-h-[70vh] overflow-y-auto bg-gradient-to-r from-indigo-900 to-blue-900">
<ContactForm />
<!-- 模态框内容 - 移动端优化 -->
<div class="p-4 sm:p-6 max-h-[70vh] overflow-y-auto bg-gradient-to-r from-indigo-600 to-blue-700">
<ContactForm :lang="currentLang" />
</div>
<!-- 模态框底部 -->
<div class="bg-gray-50 px-6 py-4 flex justify-end bg-gradient-to-r from-indigo-900 to-blue-900">
<!-- 模态框底部 - 移动端优化 -->
<div class="bg-gray-50 px-4 sm:px-6 py-4 flex flex-col sm:flex-row sm:flex-wrap justify-end gap-3">
<button
@click="closeModal"
class="px-5 py-2 text-white rounded-lg font-medium border border-gray-300 mr-3 hover:bg-gray-100"
class="w-full sm:w-auto px-5 py-2 text-gray-700 rounded-lg font-medium border border-gray-300 hover:bg-gray-100"
>
关闭
{{ currentLang === 'zh' ? '关闭' : 'Close' }}
</button>
<button
class="px-5 py-2 bg-indigo-600 text-white rounded-lg font-medium hover:bg-indigo-700"
class="w-full sm:w-auto px-5 py-2 bg-indigo-600 text-white rounded-lg font-medium hover:bg-indigo-700"
>
立即申请
{{ currentLang === 'zh' ? '立即申请' : 'Submit' }}
</button>
</div>
</div>
@@ -188,53 +151,109 @@
</template>
<script setup>
// 模态框控制
import {nextTick, onBeforeUnmount, onMounted, ref} from "vue";
import { ref, computed, onMounted, onBeforeUnmount } from 'vue';
import ContactForm from "@/components/ui/ContactForm.vue";
const isScrolled = ref(false)
const isMenuOpen = ref(false)
const showModal = ref(false)
const currentJob = ref({})
const isScrolled = ref(false);
const isMenuOpen = ref(false);
const showModal = ref(false);
const headerHeight = ref(0);
const currentLang = ref('zh'); // 默认中文
// 打开模态框
const openModal = (job) => {
currentJob.value = job
showModal.value = true
// 初始化地图
nextTick(() => {
// initMap()
})
}
// 新增：视口和导航宽度变量
const viewportWidth = ref(0);
const navWidth = ref(0);
// 关闭模态框
const closeModal = () => {
showModal.value = false
// 销毁地图实例
if (window.mapInstance) {
window.mapInstance.destroy()
window.mapInstance = null
// 菜单项根据语言动态变化
const menuItems = computed(() => {
return [
{ path: '/', name: currentLang.value === 'zh' ? '首页' : 'Home', exact: true },
{ path: '/about', name: currentLang.value === 'zh' ? '公司介绍' : 'About' },
{ path: '/team', name: currentLang.value === 'zh' ? '团队介绍' : 'Team' },
{ path: '/features', name: currentLang.value === 'zh' ? '服务特色' : 'Features' },
{ path: '/careers', name: currentLang.value === 'zh' ? '加入我们' : 'Careers' }
];
});
// 新增：输出视口和导航宽度
const logDimensions = () => {
// 获取视口宽度
viewportWidth.value = window.innerWidth;
// 输出到控制台
console.log('视口宽度:', `${viewportWidth.value}px`);
console.log('----------------------');
// 获取导航元素宽度
const navElement = document.querySelector('header');
if (navElement) {
navWidth.value = navElement.offsetWidth;
}
}
const handleScroll = () => {
isScrolled.value = window.scrollY > 20
}
console.log('导航宽度:', `${navWidth.value}px`);
console.log('----------------------');
// 修改header标签的宽度
navElement.style.width = `${navWidth.value}px`;
// 修改body的宽度
document.body.style.width = `${viewportWidth.value}px`;
};
const toggleLanguage = () => {
currentLang.value = currentLang.value === 'zh' ? 'en' : 'zh';
};
const openModal = () => {
showModal.value = true;
};
const closeModal = () => {
showModal.value = false;
};
const toggleMenu = () => {
isMenuOpen.value = !isMenuOpen.value
}
isMenuOpen.value = !isMenuOpen.value;
if (isMenuOpen.value) {
document.body.style.overflow = 'hidden';
} else {
document.body.style.overflow = '';
}
};
const closeMenu = () => {
isMenuOpen.value = false
}
isMenuOpen.value = false;
document.body.style.overflow = '';
};
const handleScroll = () => {
isScrolled.value = window.scrollY > 20;
};
// 计算头部高度用于移动菜单定位
const calculateHeaderHeight = () => {
const header = document.querySelector('header');
if (header) {
headerHeight.value = header.offsetHeight;
}
};
onMounted(() => {
window.addEventListener('scroll', handleScroll)
})
window.addEventListener('scroll', handleScroll);
calculateHeaderHeight();
window.addEventListener('resize', calculateHeaderHeight);
// 新增：添加尺寸输出功能
logDimensions(); // 初始输出
window.addEventListener('resize', logDimensions); // 窗口大小变化时输出
});
onBeforeUnmount(() => {
window.removeEventListener('scroll', handleScroll)
})
window.removeEventListener('scroll', handleScroll);
window.removeEventListener('resize', calculateHeaderHeight);
// 新增：移除尺寸输出监听器
window.removeEventListener('resize', logDimensions);
document.body.style.overflow = ''; // 确保卸载时恢复滚动
});
</script>
<style scoped>
@@ -251,4 +270,38 @@ onBeforeUnmount(() => {
height: 2px;
background-color: #2563eb;
}
</style>
/* 模态框动画 */
.modal-fade-enter-active,
.modal-fade-leave-active {
transition: opacity 0.3s ease;
}
.modal-fade-enter-from,
.modal-fade-leave-to {
opacity: 0;
}
/* 移动端菜单宽度修复 */
@media (max-width: 767px) {
.container {
padding-left: 1rem;
padding-right: 1rem;
}
/* 确保移动菜单不会超出视口 */
.overflow-hidden {
overflow: hidden;
}
/* 防止路由链接换行 */
.router-link {
white-space: nowrap;
}
}
/* 增强模糊效果 */
.backdrop-blur-lg {
backdrop-filter: blur(12px);
}
</style>