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

1
package.json
View File

@@ -18,6 +18,7 @@
"ant-design-vue": "^4.1.1",
"aos": "^2.3.4",
"axios": "^1.6.2",
"echarts": "^5.6.0",
"lucide-vue-next": "^0.507.0",
"pinia": "^2.1.7",
"swiper": "^11.2.6",

48
pnpm-lock.yaml generated
View File

@@ -35,6 +35,9 @@ importers:
axios:
specifier: ^1.6.2
version: 1.9.0
echarts:
specifier: ^5.6.0
version: 5.6.0
lucide-vue-next:
specifier: ^0.507.0
version: 0.507.0(vue@3.5.13)
@@ -308,42 +311,36 @@ packages:
engines: {node: '>= 10.0.0'}
cpu: [arm]
os: [linux]
libc: [glibc]
'@parcel/watcher-linux-arm-musl@2.5.1':
resolution: {integrity: sha512-6E+m/Mm1t1yhB8X412stiKFG3XykmgdIOqhjWj+VL8oHkKABfu/gjFj8DvLrYVHSBNC+/u5PeNrujiSQ1zwd1Q==}
engines: {node: '>= 10.0.0'}
cpu: [arm]
os: [linux]
libc: [musl]
'@parcel/watcher-linux-arm64-glibc@2.5.1':
resolution: {integrity: sha512-LrGp+f02yU3BN9A+DGuY3v3bmnFUggAITBGriZHUREfNEzZh/GO06FF5u2kx8x+GBEUYfyTGamol4j3m9ANe8w==}
engines: {node: '>= 10.0.0'}
cpu: [arm64]
os: [linux]
libc: [glibc]
'@parcel/watcher-linux-arm64-musl@2.5.1':
resolution: {integrity: sha512-cFOjABi92pMYRXS7AcQv9/M1YuKRw8SZniCDw0ssQb/noPkRzA+HBDkwmyOJYp5wXcsTrhxO0zq1U11cK9jsFg==}
engines: {node: '>= 10.0.0'}
cpu: [arm64]
os: [linux]
libc: [musl]
'@parcel/watcher-linux-x64-glibc@2.5.1':
resolution: {integrity: sha512-GcESn8NZySmfwlTsIur+49yDqSny2IhPeZfXunQi48DMugKeZ7uy1FX83pO0X22sHntJ4Ub+9k34XQCX+oHt2A==}
engines: {node: '>= 10.0.0'}
cpu: [x64]
os: [linux]
libc: [glibc]
'@parcel/watcher-linux-x64-musl@2.5.1':
resolution: {integrity: sha512-n0E2EQbatQ3bXhcH2D1XIAANAcTZkQICBPVaxMeaCVBtOpBZpWJuf7LwyWPSBDITb7In8mqQgJ7gH8CILCURXg==}
engines: {node: '>= 10.0.0'}
cpu: [x64]
os: [linux]
libc: [musl]
'@parcel/watcher-win32-arm64@2.5.1':
resolution: {integrity: sha512-RFzklRvmc3PkjKjry3hLF9wD7ppR4AKcWNzH7kXR7GUe0Igb3Nz8fyPwtZCSquGrhU5HhUNDr/mKBqj7tqA2Vw==}
@@ -401,67 +398,56 @@ packages:
resolution: {integrity: sha512-y/qUMOpJxBMy8xCXD++jeu8t7kzjlOCkoxxajL58G62PJGBZVl/Gwpm7JK9+YvlB701rcQTzjUZ1JgUoPTnoQA==}
cpu: [arm]
os: [linux]
libc: [glibc]
'@rollup/rollup-linux-arm-musleabihf@4.40.0':
resolution: {integrity: sha512-GoCsPibtVdJFPv/BOIvBKO/XmwZLwaNWdyD8TKlXuqp0veo2sHE+A/vpMQ5iSArRUz/uaoj4h5S6Pn0+PdhRjg==}
cpu: [arm]
os: [linux]
libc: [musl]
'@rollup/rollup-linux-arm64-gnu@4.40.0':
resolution: {integrity: sha512-L5ZLphTjjAD9leJzSLI7rr8fNqJMlGDKlazW2tX4IUF9P7R5TMQPElpH82Q7eNIDQnQlAyiNVfRPfP2vM5Avvg==}
cpu: [arm64]
os: [linux]
libc: [glibc]
'@rollup/rollup-linux-arm64-musl@4.40.0':
resolution: {integrity: sha512-ATZvCRGCDtv1Y4gpDIXsS+wfFeFuLwVxyUBSLawjgXK2tRE6fnsQEkE4csQQYWlBlsFztRzCnBvWVfcae/1qxQ==}
cpu: [arm64]
os: [linux]
libc: [musl]
'@rollup/rollup-linux-loongarch64-gnu@4.40.0':
resolution: {integrity: sha512-wG9e2XtIhd++QugU5MD9i7OnpaVb08ji3P1y/hNbxrQ3sYEelKJOq1UJ5dXczeo6Hj2rfDEL5GdtkMSVLa/AOg==}
cpu: [loong64]
os: [linux]
libc: [glibc]
'@rollup/rollup-linux-powerpc64le-gnu@4.40.0':
resolution: {integrity: sha512-vgXfWmj0f3jAUvC7TZSU/m/cOE558ILWDzS7jBhiCAFpY2WEBn5jqgbqvmzlMjtp8KlLcBlXVD2mkTSEQE6Ixw==}
cpu: [ppc64]
os: [linux]
libc: [glibc]
'@rollup/rollup-linux-riscv64-gnu@4.40.0':
resolution: {integrity: sha512-uJkYTugqtPZBS3Z136arevt/FsKTF/J9dEMTX/cwR7lsAW4bShzI2R0pJVw+hcBTWF4dxVckYh72Hk3/hWNKvA==}
cpu: [riscv64]
os: [linux]
libc: [glibc]
'@rollup/rollup-linux-riscv64-musl@4.40.0':
resolution: {integrity: sha512-rKmSj6EXQRnhSkE22+WvrqOqRtk733x3p5sWpZilhmjnkHkpeCgWsFFo0dGnUGeA+OZjRl3+VYq+HyCOEuwcxQ==}
cpu: [riscv64]
os: [linux]
libc: [musl]
'@rollup/rollup-linux-s390x-gnu@4.40.0':
resolution: {integrity: sha512-SpnYlAfKPOoVsQqmTFJ0usx0z84bzGOS9anAC0AZ3rdSo3snecihbhFTlJZ8XMwzqAcodjFU4+/SM311dqE5Sw==}
cpu: [s390x]
os: [linux]
libc: [glibc]
'@rollup/rollup-linux-x64-gnu@4.40.0':
resolution: {integrity: sha512-RcDGMtqF9EFN8i2RYN2W+64CdHruJ5rPqrlYw+cgM3uOVPSsnAQps7cpjXe9be/yDp8UC7VLoCoKC8J3Kn2FkQ==}
cpu: [x64]
os: [linux]
libc: [glibc]
'@rollup/rollup-linux-x64-musl@4.40.0':
resolution: {integrity: sha512-HZvjpiUmSNx5zFgwtQAV1GaGazT2RWvqeDi0hV+AtC8unqqDSsaFjPxfsO6qPtKRRg25SisACWnJ37Yio8ttaw==}
cpu: [x64]
os: [linux]
libc: [musl]
'@rollup/rollup-win32-arm64-msvc@4.40.0':
resolution: {integrity: sha512-UtZQQI5k/b8d7d3i9AZmA/t+Q4tk3hOC0tMOMSq2GlMYOfxbesxG4mJSeDp0EHs30N9bsfwUvs3zF4v/RzOeTQ==}
@@ -519,28 +505,24 @@ packages:
engines: {node: '>= 10'}
cpu: [arm64]
os: [linux]
libc: [glibc]
'@tailwindcss/oxide-linux-arm64-musl@4.1.4':
resolution: {integrity: sha512-X3As2xhtgPTY/m5edUtddmZ8rCruvBvtxYLMw9OsZdH01L2gS2icsHRwxdU0dMItNfVmrBezueXZCHxVeeb7Aw==}
engines: {node: '>= 10'}
cpu: [arm64]
os: [linux]
libc: [musl]
'@tailwindcss/oxide-linux-x64-gnu@4.1.4':
resolution: {integrity: sha512-2VG4DqhGaDSmYIu6C4ua2vSLXnJsb/C9liej7TuSO04NK+JJJgJucDUgmX6sn7Gw3Cs5ZJ9ZLrnI0QRDOjLfNQ==}
engines: {node: '>= 10'}
cpu: [x64]
os: [linux]
libc: [glibc]
'@tailwindcss/oxide-linux-x64-musl@4.1.4':
resolution: {integrity: sha512-v+mxVgH2kmur/X5Mdrz9m7TsoVjbdYQT0b4Z+dr+I4RvreCNXyCFELZL/DO0M1RsidZTrm6O1eMnV6zlgEzTMQ==}
engines: {node: '>= 10'}
cpu: [x64]
os: [linux]
libc: [musl]
'@tailwindcss/oxide-wasm32-wasi@4.1.4':
resolution: {integrity: sha512-2TLe9ir+9esCf6Wm+lLWTMbgklIjiF0pbmDnwmhR9MksVOq+e8aP3TSsXySnBDDvTTVd/vKu1aNttEGj3P6l8Q==}
@@ -714,6 +696,9 @@ packages:
resolution: {integrity: sha512-KIN/nDJBQRcXw0MLVhZE9iQHmG68qAVIBg9CqmUYjmQIhgij9U5MFvrqkUL5FbtyyzZuOeOt0zdeRe4UY7ct+A==}
engines: {node: '>= 0.4'}
echarts@5.6.0:
resolution: {integrity: sha512-oTbVTsXfKuEhxftHqL5xprgLoc0k7uScAwtryCgWF6hPYFLRwOUHiFmHGCBKP5NPFNkDVopOieyUqYGH8Fa3kA==}
enhanced-resolve@5.18.1:
resolution: {integrity: sha512-ZSW3ma5GkcQBIpwZTSRAI8N71Uuwgs93IezB7mf7R60tC8ZbJideoDNKjHn2O9KIlx6rkGTTEk1xUCK2E1Y2Yg==}
engines: {node: '>=10.13.0'}
@@ -864,28 +849,24 @@ packages:
engines: {node: '>= 12.0.0'}
cpu: [arm64]
os: [linux]
libc: [glibc]
lightningcss-linux-arm64-musl@1.29.2:
resolution: {integrity: sha512-Q64eM1bPlOOUgxFmoPUefqzY1yV3ctFPE6d/Vt7WzLW4rKTv7MyYNky+FWxRpLkNASTnKQUaiMJ87zNODIrrKQ==}
engines: {node: '>= 12.0.0'}
cpu: [arm64]
os: [linux]
libc: [musl]
lightningcss-linux-x64-gnu@1.29.2:
resolution: {integrity: sha512-0v6idDCPG6epLXtBH/RPkHvYx74CVziHo6TMYga8O2EiQApnUPZsbR9nFNrg2cgBzk1AYqEd95TlrsL7nYABQg==}
engines: {node: '>= 12.0.0'}
cpu: [x64]
os: [linux]
libc: [glibc]
lightningcss-linux-x64-musl@1.29.2:
resolution: {integrity: sha512-rMpz2yawkgGT8RULc5S4WiZopVMOFWjiItBT7aSfDX4NQav6M44rhn5hjtkKzB+wMTRlLLqxkeYEtQ3dd9696w==}
engines: {node: '>= 12.0.0'}
cpu: [x64]
os: [linux]
libc: [musl]
lightningcss-win32-arm64-msvc@1.29.2:
resolution: {integrity: sha512-nL7zRW6evGQqYVu/bKGK+zShyz8OVzsCotFgc7judbt6wnB2KbiKKJwBE4SGoDBQ1O94RjW4asrCjQL4i8Fhbw==}
@@ -1040,6 +1021,9 @@ packages:
resolution: {integrity: sha512-65P7iz6X5yEr1cwcgvQxbbIw7Uk3gOy5dIdtZ4rDveLqhrdJP+Li/Hx6tyK0NEb+2GCyneCMJiGqrADCSNk8sQ==}
engines: {node: '>=8.0'}
tslib@2.3.0:
resolution: {integrity: sha512-N82ooyxVNm6h1riLCoyS9e3fuJ3AMG2zIZs2Gd1ATcSFjSA23Q0fzjjZeh0jbJvWVDZ0cJT8yaNNaaXHzueNjg==}
unhead@1.11.20:
resolution: {integrity: sha512-3AsNQC0pjwlLqEYHLjtichGWankK8yqmocReITecmpB1H0aOabeESueyy+8X1gyJx4ftZVwo9hqQ4O3fPWffCA==}
@@ -1119,6 +1103,9 @@ packages:
zhead@2.2.4:
resolution: {integrity: sha512-8F0OI5dpWIA5IGG5NHUg9staDwz/ZPxZtvGVf01j7vHqSyZ0raHY+78atOVxRqb73AotX22uV1pXt3gYSstGag==}
zrender@5.6.1:
resolution: {integrity: sha512-OFXkDJKcrlx5su2XbzJvj/34Q3m6PvyCZkVPHGYpcCJ52ek4U/ymZyfuV1nKE23AyBJ51E/6Yr0mhZ7xGTO4ag==}
snapshots:
'@amap/amap-jsapi-loader@1.0.1': {}
@@ -1629,6 +1616,11 @@ snapshots:
es-errors: 1.3.0
gopd: 1.2.0
echarts@5.6.0:
dependencies:
tslib: 2.3.0
zrender: 5.6.1
enhanced-resolve@5.18.1:
dependencies:
graceful-fs: 4.2.11
@@ -1936,6 +1928,8 @@ snapshots:
is-number: 7.0.0
optional: true
tslib@2.3.0: {}
unhead@1.11.20:
dependencies:
'@unhead/dom': 1.11.20
@@ -1984,3 +1978,7 @@ snapshots:
loose-envify: 1.4.0
zhead@2.2.4: {}
zrender@5.6.1:
dependencies:
tslib: 2.3.0

3
src/App.vue
View File

@@ -19,5 +19,8 @@ import Footer from '@/components/layout/Footer.vue'
color: #1a202c;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
width: 100%;
overflow-x: hidden;
overflow-y: scroll;
}
</style>

1
src/assets/styles/global.scss
View File

@@ -1,4 +1,5 @@
body {
width: 100%;
font-family: 'Inter', 'Helvetica Neue', 'PingFang SC', sans-serif;
color: #1a202c;
-webkit-font-smoothing: antialiased;

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>

156
src/components/ui/LargeCycleChart.vue Normal file
View File

@@ -0,0 +1,156 @@
<template>
<div>
<div ref="chartRef" class="chart-container"></div>
</div>
</template>
<script setup>
import { ref, onMounted, onBeforeUnmount } from 'vue';
import * as echarts from 'echarts';
const chartRef = ref(null);
let chartInstance = null;
const initChart = () => {
if (!chartRef.value) return;
chartInstance = echarts.init(chartRef.value);
const option = {
title: {
text: '大周期：750年',
left: 'center'
},
tooltip: {
trigger: 'axis'
},
xAxis: {
type: 'category',
boundaryGap: false,
data: ['', '周朝\n1000BC', '', '汉朝\n200BC', '', '唐朝\n600', '', '明朝\n1400', '', '', '时间\n--'],
axisLabel: { fontSize: 14 }
},
yAxis: {
type: 'value',
name: '综合实力',
min: 0,
max: 100,
nameLocation: 'start',
nameGap: 40,
nameTextStyle: {
padding: [0, 0, 0, 40, 60],
fontSize: 14
},
// 轴标签样式
axisLabel: {
fontSize: 14,
show: false
}
},
grid: {
left: '15%',
right: '10%',
bottom: '15%',
top: '10%',
containLabel: true
},
series: [
{
name: '中华民族',
type: 'line',
smooth: true,
symbol: 'none',
itemStyle: { color: '#EF4444' },
areaStyle: {
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
{ offset: 0, color: 'rgba(239, 68, 68, 0.3)' },
{ offset: 1, color: 'rgba(239, 68, 68, 0)' }
])
},
data: [-10, 10, 5, 20, 15, 30, 25, 45, 30, 90, 100]
},
{
name: '西方国家：从文艺复兴到工业革命',
type: 'line',
smooth: true,
symbol: 'none',
itemStyle: { color: '#3B82F6' },
areaStyle: {
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
{ offset: 0, color: 'rgba(59, 130, 246, 0.3)' },
{ offset: 1, color: 'rgba(59, 130, 246, 0)' }
])
},
data: ['', '', '', '', '', '', 25, 50, 75, 90, 90]
},
{
name: '关键节点',
type: 'scatter',
data: [
{ value: [4, 20], name: '中华民族' },
{ value: [7, 70], name: '西方国家：\n从文艺复兴到工业革命' }
],
symbolSize: 10,
itemStyle: {
color: '#10B981',
borderColor: '#FFFFFF',
borderWidth: 1
},
label: {
show: true,
position: 'top',
formatter: '{b}',
color: '#1F2937',
backgroundColor: '#FFFFFF',
padding: [4, 8],
borderRadius: 4,
fontSize: 12,
borderWidth: 1,
borderColor: '#ccc'
}
}
],
markLine: {
data: [
{ xAxis: '汉朝\n200BC', yAxis: 0, lineStyle: { type: 'dashed' } },
{ xAxis: '唐朝\n600', yAxis: 0, lineStyle: { type: 'dashed' } },
{ xAxis: '明朝\n1400', yAxis: 0, lineStyle: { type: 'dashed' } },
{ xAxis: '时间\n--', yAxis: 0, lineStyle: { type: 'dashed' } }
]
}
};
chartInstance.setOption(option);
};
const resizeChart = () => {
chartInstance?.resize();
};
onMounted(() => {
initChart();
window.addEventListener('resize', resizeChart);
});
onBeforeUnmount(() => {
if (chartInstance) {
chartInstance.dispose();
chartInstance = null;
}
window.removeEventListener('resize', resizeChart);
});
</script>
<style scoped>
.chart-container {
width: 90%;
max-width: 1000px;
height: 450px;
margin: 0 auto 80px;
}
h2 {
width: 90%;
max-width: 1000px;
text-align: center;
margin: 0 auto 10px;
}
</style>

160
src/components/ui/MediumCycleChart.vue Normal file
View File

@@ -0,0 +1,160 @@
<template>
<div>
<div ref="chartRef" class="chart-container"></div>
</div>
</template>
<script setup>
import {ref, onMounted, onBeforeUnmount} from 'vue';
import * as echarts from 'echarts';
const chartRef = ref(null);
let chartInstance = null;
const initChart = () => {
if (!chartRef.value) return;
chartInstance = echarts.init(chartRef.value);
const option = {
title: {
text: '中周期：50-60年',
left: 'center'
},
tooltip: {
trigger: 'axis'
},
xAxis: {
type: 'category',
boundaryGap: false,
data: ['1921', '', '1976', '', '2008', '2020', '2030', '', '', '2060', '时间'],
axisLabel: {fontSize: 14}
},
// 定义纵轴配置项
yAxis: {
// 纵轴类型为数值轴
type: 'value',
// 纵轴名称
name: '中国综合实力',
// 最小值
min: 0,
// 最大值
max: 100,
// 名称位置在轴的起始处
nameLocation: 'start',
// 名称与轴的距离
nameGap: 40,
// 名称文本样式
nameTextStyle: {
// 填充左侧间距以对齐名称
padding: [0, 0, 0, 40],
// 字体大小
fontSize: 14
},
// 轴标签样式
axisLabel: {
fontSize: 14,
show: false
}
},
grid: {
left: '15%',
right: '10%',
bottom: '15%',
top: '10%',
containLabel: true
},
series: [
{
name: '发展曲线',
type: 'line',
data: [
[0, 10], [1, 30], [2, 20], [3, 35], [4, 45], [5, 55], [6, 45], [7, 70], [8, 80], [9, 90], [10, 90]
],
smooth: true,
symbol: 'none',
lineStyle: {
width: 3,
color: '#EF4444'
},
areaStyle: {
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
{offset: 0, color: 'rgba(239, 68, 68, 0.3)'},
{offset: 1, color: 'rgba(239, 68, 68, 0)'}
])
}
},
{
name: '关键阶段',
type: 'scatter',
data: [
{value: [1, 10], name: '生存'},
{value: [4, 30], name: '发展'},
{value: [8, 60], name: '壮大'}
],
symbolSize: 10,
itemStyle: {
color: '#10B981',
borderColor: '#FFFFFF',
borderWidth: 1
},
label: {
show: true,
position: 'top',
formatter: '{b}',
color: '#1F2937',
backgroundColor: '#FFFFFF',
padding: [4, 8],
borderRadius: 4,
fontSize: 12,
borderWidth: 1,
borderColor: '#ccc'
}
}
],
markLine: {
data: [
{xAxis: '1976', yAxis: 0, lineStyle: {type: 'dashed'}},
{xAxis: '2008', yAxis: 0, lineStyle: {type: 'dashed'}},
{xAxis: '2020', yAxis: 0, lineStyle: {type: 'dashed'}},
{xAxis: '2030', yAxis: 0, lineStyle: {type: 'dashed'}},
{xAxis: '2060', yAxis: 0, lineStyle: {type: 'dashed'}}
]
}
};
chartInstance.setOption(option);
};
const resizeChart = () => {
chartInstance?.resize();
};
onMounted(() => {
initChart();
window.addEventListener('resize', resizeChart);
});
onBeforeUnmount(() => {
if (chartInstance) {
chartInstance.dispose();
chartInstance = null;
}
window.removeEventListener('resize', resizeChart);
});
</script>
<style scoped>
.chart-container {
width: 90%;
max-width: 1000px;
height: 450px;
margin: 0 auto 80px;
}
h2 {
width: 90%;
max-width: 1000px;
text-align: center;
margin: 0 auto 10px;
}
</style>

14
src/views/About.vue
View File

@@ -21,12 +21,12 @@
<div class="order-2 lg:order-1" data-aos="fade-right" data-aos-duration="800">
<SectionTitle
subtitle="关于我们"
title="我们是上海酉佰佰"
title="我们是上海酉佰"
/>
<div class="prose max-w-none text-gray-600 mt-6">
<p>
上海酉佰佰有限公司成立于2010年，总部位于上海浦东新区，
上海酉佰有限公司成立于2010年，总部位于上海浦东新区，
是一家专注于提供企业级数字化解决方案的高新技术企业。
</p>
<p>
@@ -89,7 +89,8 @@
</div>
<div class="order-1 lg:order-2 relative" data-aos="fade-left" data-aos-duration="800">
<div class="rounded-2xl overflow-hidden shadow-xl">
<img src="../assets/images/company0006.png" alt="公司成立背景" class="w-full h-auto">
<LargeCycleChart />
<!-- <img src="../assets/images/company0006.png" alt="公司成立背景" class="w-full h-auto">-->
</div>
</div>
</div>
@@ -122,7 +123,8 @@
</div>
<div class="order-1 lg:order-1 relative" data-aos="fade-right" data-aos-duration="800">
<div class="rounded-2xl overflow-hidden shadow-xl">
<img src="../assets/images/zq0001.png" alt="公司成立背景" class="w-full h-auto">
<MediumCycleChart />
<!-- <img src="../assets/images/zq0001.png" alt="公司成立背景" class="w-full h-auto">-->
</div>
</div>
</div>
@@ -174,7 +176,7 @@
title="发展历程"
subtitle="一路成长"
align="center"
description="回顾上海酉佰佰发展中的重要里程碑"
description="回顾上海酉佰发展中的重要里程碑"
data-aos="fade-up"
/>
@@ -357,6 +359,8 @@ import Card from '@/components/ui/Card.vue'
import Component from '@/components/ui/Company.vue'
import TeamMemberCard from '@/components/ui/TeamMember.vue'
import ContactForm from "@/components/ui/ContactForm.vue";
import MediumCycleChart from "@/components/ui/MediumCycleChart.vue";
import LargeCycleChart from "@/components/ui/LargeCycleChart.vue";
const milestones = [
{

8
src/views/Careers.vue
View File

@@ -321,7 +321,7 @@
<MapContainer
:lng="121.424"
:lat="31.197"
:title="'上海酉佰佰网络信息科技有限公司'"
:title="'上海酉佰网络信息科技有限公司'"
:address="'上海市中山西路2020号华宜大厦2号楼1501室'"
/>
</div>
@@ -447,7 +447,7 @@ import MapContainer from "@/components/ui/MapContainer.vue";
const position = {
lng: 121.424,
lat: 31.197,
title: '上海酉佰佰网络信息科技有限公司',
title: '上海酉佰网络信息科技有限公司',
address: '上海市中山西路2020号华宜大厦2号楼1501室'
}
@@ -605,13 +605,13 @@ function initMap() {
new AMap.Marker({
position: [121.424, 31.197],
map: window.mapInstance,
title: '上海酉佰佰网络信息科技有限公司'
title: '上海酉佰网络信息科技有限公司'
})
// 添加信息窗口
const infoWindow = new AMap.InfoWindow({
content: `<div class="p-2">
<h4 class="font-bold">上海酉佰佰</h4>
<h4 class="font-bold">上海酉佰</h4>
<p class="text-sm">上海市中山西路2020号华宜大厦2号楼1501室</p>
</div>`,
offset: new AMap.Pixel(0, -30)

4
src/views/Features.vue
View File

@@ -134,7 +134,7 @@
<SectionTitle
title="团队理念"
subtitle="大道不孤，众行致远"
description="在酉佰佰，我们坚信真正的成功来自团队协作与共同成长"
description="在酉佰，我们坚信真正的成功来自团队协作与共同成长"
align="center"
data-aos="fade-up"
/>
@@ -485,7 +485,7 @@
data-aos="fade-up"
data-aos-delay="200"
>
<h2 class="text-3xl md:text-4xl font-bold text-white mb-6">加入酉佰佰，共同成长</h2>
<h2 class="text-3xl md:text-4xl font-bold text-white mb-6">加入酉佰，共同成长</h2>
<p class="text-xl text-blue-200 mb-10">
我们正在寻找认同学习文化和渐进理念的伙伴，一起创造长期价值
</p>

8
src/views/Home.vue
View File

@@ -17,7 +17,7 @@
data-aos="fade-up"
data-aos-delay="100"
>
上海酉佰佰致力于为企业提供前沿的解决方案，赋能数字化转型，
上海酉佰致力于为企业提供前沿的解决方案，赋能数字化转型，
创造可持续的商业价值。
</p>
<div
@@ -109,7 +109,7 @@
<SectionTitle
title="为什么选择"
subtitle="企业优势"
highlight="上海酉佰佰?"
highlight="上海酉佰?"
data-aos="fade-right"
/>
@@ -336,13 +336,13 @@ const advantages = [
const testimonials = [
{
content: '上海酉佰佰团队的专业性和创新思维帮助我们完成了数字化转型，大幅提升了工作效率，为业务增长提供了强大支持。',
content: '上海酉佰团队的专业性和创新思维帮助我们完成了数字化转型，大幅提升了工作效率，为业务增长提供了强大支持。',
name: '张先生',
position: '某公司总经理',
avatar: 'https://randomuser.me/api/portraits/men/32.jpg'
},
{
content: '与酉佰佰的合作非常愉快，他们的解决方案深入理解了我们行业的特殊需求，实施效果远超我们的预期。',
content: '与酉佰的合作非常愉快，他们的解决方案深入理解了我们行业的特殊需求，实施效果远超我们的预期。',
name: '李女士',
position: '某制造企业CIO',
avatar: 'https://randomuser.me/api/portraits/women/44.jpg'

8
src/views/Team.vue
View File

@@ -89,7 +89,7 @@
<div class="md:w-2/3 md:pl-8 order-2 lg:order-2" data-aos="fade-right" data-aos-delay="200">
<h3 class="text-2xl font-bold text-gray-900 mb-4">技术专家团队</h3>
<p class="text-gray-600 mb-6">
酉佰佰佰佰是一支秉承着"开放透明、纪律严明、听从指挥、主观能动"管理风格的团队。
酉佰佰是一支秉承着"开放透明、纪律严明、听从指挥、主观能动"管理风格的团队。
我们遵循循序渐进，但绝不放任自流的管理理念。
</p>
<p class="text-gray-600 mb-6">
@@ -118,7 +118,7 @@
<SectionTitle
title="发展规划"
subtitle="未来愿景"
description="酉佰佰佰佰团队的战略发展规划"
description="酉佰佰团队的战略发展规划"
align="center"
data-aos="fade-up"
/>
@@ -132,7 +132,7 @@
<div class="md:w-2/3 md:pl-8 order-2 lg:order-1" data-aos="fade-left" data-aos-delay="200">
<h3 class="text-2xl font-bold text-gray-900 mb-4">五年发展规划</h3>
<p class="text-gray-600 mb-6">
酉佰佰佰佰团队刚经历了第一个五年的发展，展望未来，公司一方面致力于在宏观弱势期进行人才积累，
酉佰佰团队刚经历了第一个五年的发展，展望未来，公司一方面致力于在宏观弱势期进行人才积累，
另一方面也在积极地进行政治经济研究、产业企业研究、风险管理研究和投资等投资公司核心竞争力的孵化与锻炼。
</p>
<p class="text-gray-600 mb-6">
@@ -254,7 +254,7 @@
<div class="max-w-3xl mx-auto text-center" data-aos="fade-up">
<h2 class="text-3xl md:text-4xl font-bold mb-6">加入我们的团队</h2>
<p class="text-xl text-blue-300 mb-8">
如果你才华横溢、充满激情、渴望成长，我们欢迎你加入酉佰佰佰佰大家庭
如果你才华横溢、充满激情、渴望成长，我们欢迎你加入酉佰佰大家庭
</p>
<router-link
to="/careers"