From 343b6b327691a2cdc7bdf29934256a0b4df2edc7 Mon Sep 17 00:00:00 2001 From: lq Date: Tue, 10 Jun 2025 12:47:00 +0800 Subject: [PATCH] Echarts --- package.json | 1 + pnpm-lock.yaml | 48 ++-- src/App.vue | 3 + src/assets/styles/global.scss | 1 + src/components/layout/Header.vue | 367 ++++++++++++++----------- src/components/ui/LargeCycleChart.vue | 156 +++++++++++ src/components/ui/MediumCycleChart.vue | 160 +++++++++++ src/views/About.vue | 14 +- src/views/Careers.vue | 8 +- src/views/Features.vue | 4 +- src/views/Home.vue | 8 +- src/views/Team.vue | 8 +- 12 files changed, 577 insertions(+), 201 deletions(-) create mode 100644 src/components/ui/LargeCycleChart.vue create mode 100644 src/components/ui/MediumCycleChart.vue diff --git a/package.json b/package.json index d60f201..9961359 100644 --- a/package.json +++ b/package.json @@ -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", diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index a6bbbdd..71c0b1a 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -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 diff --git a/src/App.vue b/src/App.vue index ebf29fa..e1ea837 100644 --- a/src/App.vue +++ b/src/App.vue @@ -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; } diff --git a/src/assets/styles/global.scss b/src/assets/styles/global.scss index db3b008..9916135 100644 --- a/src/assets/styles/global.scss +++ b/src/assets/styles/global.scss @@ -1,4 +1,5 @@ body { + width: 100%; font-family: 'Inter', 'Helvetica Neue', 'PingFang SC', sans-serif; color: #1a202c; -webkit-font-smoothing: antialiased; diff --git a/src/components/layout/Header.vue b/src/components/layout/Header.vue index be999f2..54e790d 100644 --- a/src/components/layout/Header.vue +++ b/src/components/layout/Header.vue @@ -2,184 +2,147 @@
-
+ +
- - 酉佰 - 酉佰 + + Logo + + {{ currentLang === 'zh' ? '酉佰' : 'YouBaiBai' }} + - + {{ currentLang === 'zh' ? 'EN' : '中' }} + + + +
- +
-
-
+ + -
-
+
+
-
+
-

留下您的联系方式

+

{{ currentLang === 'zh' ? '留下您的联系方式' : 'Leave Your Contact' }}

- -
- + +
+
- -
+ +
@@ -188,53 +151,109 @@ + +/* 模态框动画 */ +.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); +} + \ No newline at end of file diff --git a/src/components/ui/LargeCycleChart.vue b/src/components/ui/LargeCycleChart.vue new file mode 100644 index 0000000..7c55559 --- /dev/null +++ b/src/components/ui/LargeCycleChart.vue @@ -0,0 +1,156 @@ + + + + + \ No newline at end of file diff --git a/src/components/ui/MediumCycleChart.vue b/src/components/ui/MediumCycleChart.vue new file mode 100644 index 0000000..461c9fb --- /dev/null +++ b/src/components/ui/MediumCycleChart.vue @@ -0,0 +1,160 @@ + + + + + \ No newline at end of file diff --git a/src/views/About.vue b/src/views/About.vue index 5bf75d3..ded7527 100644 --- a/src/views/About.vue +++ b/src/views/About.vue @@ -21,12 +21,12 @@

- 上海酉佰佰有限公司成立于2010年，总部位于上海浦东新区， + 上海酉佰有限公司成立于2010年，总部位于上海浦东新区， 是一家专注于提供企业级数字化解决方案的高新技术企业。

@@ -89,7 +89,8 @@

- 公司成立背景 + +
@@ -122,7 +123,8 @@
- 公司成立背景 + +
@@ -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 = [ { diff --git a/src/views/Careers.vue b/src/views/Careers.vue index 1dc1ec0..38ac942 100644 --- a/src/views/Careers.vue +++ b/src/views/Careers.vue @@ -321,7 +321,7 @@
@@ -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: `
-

上海酉佰佰

+

上海酉佰

上海市中山西路2020号华宜大厦2号楼1501室

`, offset: new AMap.Pixel(0, -30) diff --git a/src/views/Features.vue b/src/views/Features.vue index 6301c64..a8c0c44 100644 --- a/src/views/Features.vue +++ b/src/views/Features.vue @@ -134,7 +134,7 @@ @@ -485,7 +485,7 @@ data-aos="fade-up" data-aos-delay="200" > -

加入酉佰佰，共同成长

+

加入酉佰，共同成长

我们正在寻找认同学习文化和渐进理念的伙伴，一起创造长期价值

diff --git a/src/views/Home.vue b/src/views/Home.vue index ff2a522..8ea38cd 100644 --- a/src/views/Home.vue +++ b/src/views/Home.vue @@ -17,7 +17,7 @@ data-aos="fade-up" data-aos-delay="100" > - 上海酉佰佰致力于为企业提供前沿的解决方案，赋能数字化转型， + 上海酉佰致力于为企业提供前沿的解决方案，赋能数字化转型， 创造可持续的商业价值。

@@ -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' diff --git a/src/views/Team.vue b/src/views/Team.vue index ea7ffeb..78030b9 100644 --- a/src/views/Team.vue +++ b/src/views/Team.vue @@ -89,7 +89,7 @@

技术专家团队

- 酉佰佰佰佰是一支秉承着"开放透明、纪律严明、听从指挥、主观能动"管理风格的团队。 + 酉佰佰是一支秉承着"开放透明、纪律严明、听从指挥、主观能动"管理风格的团队。 我们遵循循序渐进，但绝不放任自流的管理理念。

@@ -118,7 +118,7 @@ @@ -132,7 +132,7 @@

五年发展规划

- 酉佰佰佰佰团队刚经历了第一个五年的发展，展望未来，公司一方面致力于在宏观弱势期进行人才积累， + 酉佰佰团队刚经历了第一个五年的发展，展望未来，公司一方面致力于在宏观弱势期进行人才积累， 另一方面也在积极地进行政治经济研究、产业企业研究、风险管理研究和投资等投资公司核心竞争力的孵化与锻炼。

@@ -254,7 +254,7 @@

加入我们的团队

- 如果你才华横溢、充满激情、渴望成长，我们欢迎你加入酉佰佰佰佰大家庭 + 如果你才华横溢、充满激情、渴望成长，我们欢迎你加入酉佰佰大家庭