初始化项目
This commit is contained in:
@@ -9,17 +9,19 @@
|
|||||||
"preview": "vite preview"
|
"preview": "vite preview"
|
||||||
},
|
},
|
||||||
"dependencies": {
|
"dependencies": {
|
||||||
"tailwindcss": "^4.1.4",
|
|
||||||
"vue": "^3.5.13",
|
|
||||||
"@ant-design-vue/pro-layout": "^3.2.5",
|
"@ant-design-vue/pro-layout": "^3.2.5",
|
||||||
"@ant-design/icons-vue": "^7.0.1",
|
"@ant-design/icons-vue": "^7.0.1",
|
||||||
|
"@fortawesome/fontawesome-free": "^6.7.2",
|
||||||
"@tailwindcss/vite": "^4.1.4",
|
"@tailwindcss/vite": "^4.1.4",
|
||||||
"@vueuse/head": "^2.0.0",
|
"@vueuse/head": "^2.0.0",
|
||||||
"ant-design-vue": "^4.1.1",
|
"ant-design-vue": "^4.1.1",
|
||||||
|
"aos": "^2.3.4",
|
||||||
"axios": "^1.6.2",
|
"axios": "^1.6.2",
|
||||||
"lucide-vue-next": "^0.507.0",
|
"lucide-vue-next": "^0.507.0",
|
||||||
"pinia": "^2.1.7",
|
"pinia": "^2.1.7",
|
||||||
"swiper": "^11.0.5",
|
"swiper": "^11.2.6",
|
||||||
|
"tailwindcss": "^4.1.4",
|
||||||
|
"vue": "^3.5.13",
|
||||||
"vue-router": "^4.2.5"
|
"vue-router": "^4.2.5"
|
||||||
},
|
},
|
||||||
"devDependencies": {
|
"devDependencies": {
|
||||||
|
|||||||
36
pnpm-lock.yaml
generated
36
pnpm-lock.yaml
generated
@@ -14,6 +14,9 @@ importers:
|
|||||||
'@ant-design/icons-vue':
|
'@ant-design/icons-vue':
|
||||||
specifier: ^7.0.1
|
specifier: ^7.0.1
|
||||||
version: 7.0.1(vue@3.5.13)
|
version: 7.0.1(vue@3.5.13)
|
||||||
|
'@fortawesome/fontawesome-free':
|
||||||
|
specifier: ^6.7.2
|
||||||
|
version: 6.7.2
|
||||||
'@tailwindcss/vite':
|
'@tailwindcss/vite':
|
||||||
specifier: ^4.1.4
|
specifier: ^4.1.4
|
||||||
version: 4.1.4(vite@6.3.3(jiti@2.4.2)(lightningcss@1.29.2)(sass@1.88.0))
|
version: 4.1.4(vite@6.3.3(jiti@2.4.2)(lightningcss@1.29.2)(sass@1.88.0))
|
||||||
@@ -36,7 +39,7 @@ importers:
|
|||||||
specifier: ^2.1.7
|
specifier: ^2.1.7
|
||||||
version: 2.3.1(vue@3.5.13)
|
version: 2.3.1(vue@3.5.13)
|
||||||
swiper:
|
swiper:
|
||||||
specifier: ^11.0.5
|
specifier: ^11.2.6
|
||||||
version: 11.2.6
|
version: 11.2.6
|
||||||
tailwindcss:
|
tailwindcss:
|
||||||
specifier: ^4.1.4
|
specifier: ^4.1.4
|
||||||
@@ -263,6 +266,10 @@ packages:
|
|||||||
cpu: [x64]
|
cpu: [x64]
|
||||||
os: [win32]
|
os: [win32]
|
||||||
|
|
||||||
|
'@fortawesome/fontawesome-free@6.7.2':
|
||||||
|
resolution: {integrity: sha512-JUOtgFW6k9u4Y+xeIaEiLr3+cjoUPiAuLXoyKOJSia6Duzb7pq+A76P9ZdPDoAoxHdHzq6gE9/jKBGXlZT8FbA==}
|
||||||
|
engines: {node: '>=6'}
|
||||||
|
|
||||||
'@jridgewell/sourcemap-codec@1.5.0':
|
'@jridgewell/sourcemap-codec@1.5.0':
|
||||||
resolution: {integrity: sha512-gv3ZRaISU3fjPAgNsriBRqGWQL6quFx04YMPW/zD8XMLsU32mhCCbfbO6KZFLjvYpCZ8zyDEgqsgf+PwPaM7GQ==}
|
resolution: {integrity: sha512-gv3ZRaISU3fjPAgNsriBRqGWQL6quFx04YMPW/zD8XMLsU32mhCCbfbO6KZFLjvYpCZ8zyDEgqsgf+PwPaM7GQ==}
|
||||||
|
|
||||||
@@ -295,42 +302,36 @@ packages:
|
|||||||
engines: {node: '>= 10.0.0'}
|
engines: {node: '>= 10.0.0'}
|
||||||
cpu: [arm]
|
cpu: [arm]
|
||||||
os: [linux]
|
os: [linux]
|
||||||
libc: [glibc]
|
|
||||||
|
|
||||||
'@parcel/watcher-linux-arm-musl@2.5.1':
|
'@parcel/watcher-linux-arm-musl@2.5.1':
|
||||||
resolution: {integrity: sha512-6E+m/Mm1t1yhB8X412stiKFG3XykmgdIOqhjWj+VL8oHkKABfu/gjFj8DvLrYVHSBNC+/u5PeNrujiSQ1zwd1Q==}
|
resolution: {integrity: sha512-6E+m/Mm1t1yhB8X412stiKFG3XykmgdIOqhjWj+VL8oHkKABfu/gjFj8DvLrYVHSBNC+/u5PeNrujiSQ1zwd1Q==}
|
||||||
engines: {node: '>= 10.0.0'}
|
engines: {node: '>= 10.0.0'}
|
||||||
cpu: [arm]
|
cpu: [arm]
|
||||||
os: [linux]
|
os: [linux]
|
||||||
libc: [musl]
|
|
||||||
|
|
||||||
'@parcel/watcher-linux-arm64-glibc@2.5.1':
|
'@parcel/watcher-linux-arm64-glibc@2.5.1':
|
||||||
resolution: {integrity: sha512-LrGp+f02yU3BN9A+DGuY3v3bmnFUggAITBGriZHUREfNEzZh/GO06FF5u2kx8x+GBEUYfyTGamol4j3m9ANe8w==}
|
resolution: {integrity: sha512-LrGp+f02yU3BN9A+DGuY3v3bmnFUggAITBGriZHUREfNEzZh/GO06FF5u2kx8x+GBEUYfyTGamol4j3m9ANe8w==}
|
||||||
engines: {node: '>= 10.0.0'}
|
engines: {node: '>= 10.0.0'}
|
||||||
cpu: [arm64]
|
cpu: [arm64]
|
||||||
os: [linux]
|
os: [linux]
|
||||||
libc: [glibc]
|
|
||||||
|
|
||||||
'@parcel/watcher-linux-arm64-musl@2.5.1':
|
'@parcel/watcher-linux-arm64-musl@2.5.1':
|
||||||
resolution: {integrity: sha512-cFOjABi92pMYRXS7AcQv9/M1YuKRw8SZniCDw0ssQb/noPkRzA+HBDkwmyOJYp5wXcsTrhxO0zq1U11cK9jsFg==}
|
resolution: {integrity: sha512-cFOjABi92pMYRXS7AcQv9/M1YuKRw8SZniCDw0ssQb/noPkRzA+HBDkwmyOJYp5wXcsTrhxO0zq1U11cK9jsFg==}
|
||||||
engines: {node: '>= 10.0.0'}
|
engines: {node: '>= 10.0.0'}
|
||||||
cpu: [arm64]
|
cpu: [arm64]
|
||||||
os: [linux]
|
os: [linux]
|
||||||
libc: [musl]
|
|
||||||
|
|
||||||
'@parcel/watcher-linux-x64-glibc@2.5.1':
|
'@parcel/watcher-linux-x64-glibc@2.5.1':
|
||||||
resolution: {integrity: sha512-GcESn8NZySmfwlTsIur+49yDqSny2IhPeZfXunQi48DMugKeZ7uy1FX83pO0X22sHntJ4Ub+9k34XQCX+oHt2A==}
|
resolution: {integrity: sha512-GcESn8NZySmfwlTsIur+49yDqSny2IhPeZfXunQi48DMugKeZ7uy1FX83pO0X22sHntJ4Ub+9k34XQCX+oHt2A==}
|
||||||
engines: {node: '>= 10.0.0'}
|
engines: {node: '>= 10.0.0'}
|
||||||
cpu: [x64]
|
cpu: [x64]
|
||||||
os: [linux]
|
os: [linux]
|
||||||
libc: [glibc]
|
|
||||||
|
|
||||||
'@parcel/watcher-linux-x64-musl@2.5.1':
|
'@parcel/watcher-linux-x64-musl@2.5.1':
|
||||||
resolution: {integrity: sha512-n0E2EQbatQ3bXhcH2D1XIAANAcTZkQICBPVaxMeaCVBtOpBZpWJuf7LwyWPSBDITb7In8mqQgJ7gH8CILCURXg==}
|
resolution: {integrity: sha512-n0E2EQbatQ3bXhcH2D1XIAANAcTZkQICBPVaxMeaCVBtOpBZpWJuf7LwyWPSBDITb7In8mqQgJ7gH8CILCURXg==}
|
||||||
engines: {node: '>= 10.0.0'}
|
engines: {node: '>= 10.0.0'}
|
||||||
cpu: [x64]
|
cpu: [x64]
|
||||||
os: [linux]
|
os: [linux]
|
||||||
libc: [musl]
|
|
||||||
|
|
||||||
'@parcel/watcher-win32-arm64@2.5.1':
|
'@parcel/watcher-win32-arm64@2.5.1':
|
||||||
resolution: {integrity: sha512-RFzklRvmc3PkjKjry3hLF9wD7ppR4AKcWNzH7kXR7GUe0Igb3Nz8fyPwtZCSquGrhU5HhUNDr/mKBqj7tqA2Vw==}
|
resolution: {integrity: sha512-RFzklRvmc3PkjKjry3hLF9wD7ppR4AKcWNzH7kXR7GUe0Igb3Nz8fyPwtZCSquGrhU5HhUNDr/mKBqj7tqA2Vw==}
|
||||||
@@ -388,67 +389,56 @@ packages:
|
|||||||
resolution: {integrity: sha512-y/qUMOpJxBMy8xCXD++jeu8t7kzjlOCkoxxajL58G62PJGBZVl/Gwpm7JK9+YvlB701rcQTzjUZ1JgUoPTnoQA==}
|
resolution: {integrity: sha512-y/qUMOpJxBMy8xCXD++jeu8t7kzjlOCkoxxajL58G62PJGBZVl/Gwpm7JK9+YvlB701rcQTzjUZ1JgUoPTnoQA==}
|
||||||
cpu: [arm]
|
cpu: [arm]
|
||||||
os: [linux]
|
os: [linux]
|
||||||
libc: [glibc]
|
|
||||||
|
|
||||||
'@rollup/rollup-linux-arm-musleabihf@4.40.0':
|
'@rollup/rollup-linux-arm-musleabihf@4.40.0':
|
||||||
resolution: {integrity: sha512-GoCsPibtVdJFPv/BOIvBKO/XmwZLwaNWdyD8TKlXuqp0veo2sHE+A/vpMQ5iSArRUz/uaoj4h5S6Pn0+PdhRjg==}
|
resolution: {integrity: sha512-GoCsPibtVdJFPv/BOIvBKO/XmwZLwaNWdyD8TKlXuqp0veo2sHE+A/vpMQ5iSArRUz/uaoj4h5S6Pn0+PdhRjg==}
|
||||||
cpu: [arm]
|
cpu: [arm]
|
||||||
os: [linux]
|
os: [linux]
|
||||||
libc: [musl]
|
|
||||||
|
|
||||||
'@rollup/rollup-linux-arm64-gnu@4.40.0':
|
'@rollup/rollup-linux-arm64-gnu@4.40.0':
|
||||||
resolution: {integrity: sha512-L5ZLphTjjAD9leJzSLI7rr8fNqJMlGDKlazW2tX4IUF9P7R5TMQPElpH82Q7eNIDQnQlAyiNVfRPfP2vM5Avvg==}
|
resolution: {integrity: sha512-L5ZLphTjjAD9leJzSLI7rr8fNqJMlGDKlazW2tX4IUF9P7R5TMQPElpH82Q7eNIDQnQlAyiNVfRPfP2vM5Avvg==}
|
||||||
cpu: [arm64]
|
cpu: [arm64]
|
||||||
os: [linux]
|
os: [linux]
|
||||||
libc: [glibc]
|
|
||||||
|
|
||||||
'@rollup/rollup-linux-arm64-musl@4.40.0':
|
'@rollup/rollup-linux-arm64-musl@4.40.0':
|
||||||
resolution: {integrity: sha512-ATZvCRGCDtv1Y4gpDIXsS+wfFeFuLwVxyUBSLawjgXK2tRE6fnsQEkE4csQQYWlBlsFztRzCnBvWVfcae/1qxQ==}
|
resolution: {integrity: sha512-ATZvCRGCDtv1Y4gpDIXsS+wfFeFuLwVxyUBSLawjgXK2tRE6fnsQEkE4csQQYWlBlsFztRzCnBvWVfcae/1qxQ==}
|
||||||
cpu: [arm64]
|
cpu: [arm64]
|
||||||
os: [linux]
|
os: [linux]
|
||||||
libc: [musl]
|
|
||||||
|
|
||||||
'@rollup/rollup-linux-loongarch64-gnu@4.40.0':
|
'@rollup/rollup-linux-loongarch64-gnu@4.40.0':
|
||||||
resolution: {integrity: sha512-wG9e2XtIhd++QugU5MD9i7OnpaVb08ji3P1y/hNbxrQ3sYEelKJOq1UJ5dXczeo6Hj2rfDEL5GdtkMSVLa/AOg==}
|
resolution: {integrity: sha512-wG9e2XtIhd++QugU5MD9i7OnpaVb08ji3P1y/hNbxrQ3sYEelKJOq1UJ5dXczeo6Hj2rfDEL5GdtkMSVLa/AOg==}
|
||||||
cpu: [loong64]
|
cpu: [loong64]
|
||||||
os: [linux]
|
os: [linux]
|
||||||
libc: [glibc]
|
|
||||||
|
|
||||||
'@rollup/rollup-linux-powerpc64le-gnu@4.40.0':
|
'@rollup/rollup-linux-powerpc64le-gnu@4.40.0':
|
||||||
resolution: {integrity: sha512-vgXfWmj0f3jAUvC7TZSU/m/cOE558ILWDzS7jBhiCAFpY2WEBn5jqgbqvmzlMjtp8KlLcBlXVD2mkTSEQE6Ixw==}
|
resolution: {integrity: sha512-vgXfWmj0f3jAUvC7TZSU/m/cOE558ILWDzS7jBhiCAFpY2WEBn5jqgbqvmzlMjtp8KlLcBlXVD2mkTSEQE6Ixw==}
|
||||||
cpu: [ppc64]
|
cpu: [ppc64]
|
||||||
os: [linux]
|
os: [linux]
|
||||||
libc: [glibc]
|
|
||||||
|
|
||||||
'@rollup/rollup-linux-riscv64-gnu@4.40.0':
|
'@rollup/rollup-linux-riscv64-gnu@4.40.0':
|
||||||
resolution: {integrity: sha512-uJkYTugqtPZBS3Z136arevt/FsKTF/J9dEMTX/cwR7lsAW4bShzI2R0pJVw+hcBTWF4dxVckYh72Hk3/hWNKvA==}
|
resolution: {integrity: sha512-uJkYTugqtPZBS3Z136arevt/FsKTF/J9dEMTX/cwR7lsAW4bShzI2R0pJVw+hcBTWF4dxVckYh72Hk3/hWNKvA==}
|
||||||
cpu: [riscv64]
|
cpu: [riscv64]
|
||||||
os: [linux]
|
os: [linux]
|
||||||
libc: [glibc]
|
|
||||||
|
|
||||||
'@rollup/rollup-linux-riscv64-musl@4.40.0':
|
'@rollup/rollup-linux-riscv64-musl@4.40.0':
|
||||||
resolution: {integrity: sha512-rKmSj6EXQRnhSkE22+WvrqOqRtk733x3p5sWpZilhmjnkHkpeCgWsFFo0dGnUGeA+OZjRl3+VYq+HyCOEuwcxQ==}
|
resolution: {integrity: sha512-rKmSj6EXQRnhSkE22+WvrqOqRtk733x3p5sWpZilhmjnkHkpeCgWsFFo0dGnUGeA+OZjRl3+VYq+HyCOEuwcxQ==}
|
||||||
cpu: [riscv64]
|
cpu: [riscv64]
|
||||||
os: [linux]
|
os: [linux]
|
||||||
libc: [musl]
|
|
||||||
|
|
||||||
'@rollup/rollup-linux-s390x-gnu@4.40.0':
|
'@rollup/rollup-linux-s390x-gnu@4.40.0':
|
||||||
resolution: {integrity: sha512-SpnYlAfKPOoVsQqmTFJ0usx0z84bzGOS9anAC0AZ3rdSo3snecihbhFTlJZ8XMwzqAcodjFU4+/SM311dqE5Sw==}
|
resolution: {integrity: sha512-SpnYlAfKPOoVsQqmTFJ0usx0z84bzGOS9anAC0AZ3rdSo3snecihbhFTlJZ8XMwzqAcodjFU4+/SM311dqE5Sw==}
|
||||||
cpu: [s390x]
|
cpu: [s390x]
|
||||||
os: [linux]
|
os: [linux]
|
||||||
libc: [glibc]
|
|
||||||
|
|
||||||
'@rollup/rollup-linux-x64-gnu@4.40.0':
|
'@rollup/rollup-linux-x64-gnu@4.40.0':
|
||||||
resolution: {integrity: sha512-RcDGMtqF9EFN8i2RYN2W+64CdHruJ5rPqrlYw+cgM3uOVPSsnAQps7cpjXe9be/yDp8UC7VLoCoKC8J3Kn2FkQ==}
|
resolution: {integrity: sha512-RcDGMtqF9EFN8i2RYN2W+64CdHruJ5rPqrlYw+cgM3uOVPSsnAQps7cpjXe9be/yDp8UC7VLoCoKC8J3Kn2FkQ==}
|
||||||
cpu: [x64]
|
cpu: [x64]
|
||||||
os: [linux]
|
os: [linux]
|
||||||
libc: [glibc]
|
|
||||||
|
|
||||||
'@rollup/rollup-linux-x64-musl@4.40.0':
|
'@rollup/rollup-linux-x64-musl@4.40.0':
|
||||||
resolution: {integrity: sha512-HZvjpiUmSNx5zFgwtQAV1GaGazT2RWvqeDi0hV+AtC8unqqDSsaFjPxfsO6qPtKRRg25SisACWnJ37Yio8ttaw==}
|
resolution: {integrity: sha512-HZvjpiUmSNx5zFgwtQAV1GaGazT2RWvqeDi0hV+AtC8unqqDSsaFjPxfsO6qPtKRRg25SisACWnJ37Yio8ttaw==}
|
||||||
cpu: [x64]
|
cpu: [x64]
|
||||||
os: [linux]
|
os: [linux]
|
||||||
libc: [musl]
|
|
||||||
|
|
||||||
'@rollup/rollup-win32-arm64-msvc@4.40.0':
|
'@rollup/rollup-win32-arm64-msvc@4.40.0':
|
||||||
resolution: {integrity: sha512-UtZQQI5k/b8d7d3i9AZmA/t+Q4tk3hOC0tMOMSq2GlMYOfxbesxG4mJSeDp0EHs30N9bsfwUvs3zF4v/RzOeTQ==}
|
resolution: {integrity: sha512-UtZQQI5k/b8d7d3i9AZmA/t+Q4tk3hOC0tMOMSq2GlMYOfxbesxG4mJSeDp0EHs30N9bsfwUvs3zF4v/RzOeTQ==}
|
||||||
@@ -506,28 +496,24 @@ packages:
|
|||||||
engines: {node: '>= 10'}
|
engines: {node: '>= 10'}
|
||||||
cpu: [arm64]
|
cpu: [arm64]
|
||||||
os: [linux]
|
os: [linux]
|
||||||
libc: [glibc]
|
|
||||||
|
|
||||||
'@tailwindcss/oxide-linux-arm64-musl@4.1.4':
|
'@tailwindcss/oxide-linux-arm64-musl@4.1.4':
|
||||||
resolution: {integrity: sha512-X3As2xhtgPTY/m5edUtddmZ8rCruvBvtxYLMw9OsZdH01L2gS2icsHRwxdU0dMItNfVmrBezueXZCHxVeeb7Aw==}
|
resolution: {integrity: sha512-X3As2xhtgPTY/m5edUtddmZ8rCruvBvtxYLMw9OsZdH01L2gS2icsHRwxdU0dMItNfVmrBezueXZCHxVeeb7Aw==}
|
||||||
engines: {node: '>= 10'}
|
engines: {node: '>= 10'}
|
||||||
cpu: [arm64]
|
cpu: [arm64]
|
||||||
os: [linux]
|
os: [linux]
|
||||||
libc: [musl]
|
|
||||||
|
|
||||||
'@tailwindcss/oxide-linux-x64-gnu@4.1.4':
|
'@tailwindcss/oxide-linux-x64-gnu@4.1.4':
|
||||||
resolution: {integrity: sha512-2VG4DqhGaDSmYIu6C4ua2vSLXnJsb/C9liej7TuSO04NK+JJJgJucDUgmX6sn7Gw3Cs5ZJ9ZLrnI0QRDOjLfNQ==}
|
resolution: {integrity: sha512-2VG4DqhGaDSmYIu6C4ua2vSLXnJsb/C9liej7TuSO04NK+JJJgJucDUgmX6sn7Gw3Cs5ZJ9ZLrnI0QRDOjLfNQ==}
|
||||||
engines: {node: '>= 10'}
|
engines: {node: '>= 10'}
|
||||||
cpu: [x64]
|
cpu: [x64]
|
||||||
os: [linux]
|
os: [linux]
|
||||||
libc: [glibc]
|
|
||||||
|
|
||||||
'@tailwindcss/oxide-linux-x64-musl@4.1.4':
|
'@tailwindcss/oxide-linux-x64-musl@4.1.4':
|
||||||
resolution: {integrity: sha512-v+mxVgH2kmur/X5Mdrz9m7TsoVjbdYQT0b4Z+dr+I4RvreCNXyCFELZL/DO0M1RsidZTrm6O1eMnV6zlgEzTMQ==}
|
resolution: {integrity: sha512-v+mxVgH2kmur/X5Mdrz9m7TsoVjbdYQT0b4Z+dr+I4RvreCNXyCFELZL/DO0M1RsidZTrm6O1eMnV6zlgEzTMQ==}
|
||||||
engines: {node: '>= 10'}
|
engines: {node: '>= 10'}
|
||||||
cpu: [x64]
|
cpu: [x64]
|
||||||
os: [linux]
|
os: [linux]
|
||||||
libc: [musl]
|
|
||||||
|
|
||||||
'@tailwindcss/oxide-wasm32-wasi@4.1.4':
|
'@tailwindcss/oxide-wasm32-wasi@4.1.4':
|
||||||
resolution: {integrity: sha512-2TLe9ir+9esCf6Wm+lLWTMbgklIjiF0pbmDnwmhR9MksVOq+e8aP3TSsXySnBDDvTTVd/vKu1aNttEGj3P6l8Q==}
|
resolution: {integrity: sha512-2TLe9ir+9esCf6Wm+lLWTMbgklIjiF0pbmDnwmhR9MksVOq+e8aP3TSsXySnBDDvTTVd/vKu1aNttEGj3P6l8Q==}
|
||||||
@@ -851,28 +837,24 @@ packages:
|
|||||||
engines: {node: '>= 12.0.0'}
|
engines: {node: '>= 12.0.0'}
|
||||||
cpu: [arm64]
|
cpu: [arm64]
|
||||||
os: [linux]
|
os: [linux]
|
||||||
libc: [glibc]
|
|
||||||
|
|
||||||
lightningcss-linux-arm64-musl@1.29.2:
|
lightningcss-linux-arm64-musl@1.29.2:
|
||||||
resolution: {integrity: sha512-Q64eM1bPlOOUgxFmoPUefqzY1yV3ctFPE6d/Vt7WzLW4rKTv7MyYNky+FWxRpLkNASTnKQUaiMJ87zNODIrrKQ==}
|
resolution: {integrity: sha512-Q64eM1bPlOOUgxFmoPUefqzY1yV3ctFPE6d/Vt7WzLW4rKTv7MyYNky+FWxRpLkNASTnKQUaiMJ87zNODIrrKQ==}
|
||||||
engines: {node: '>= 12.0.0'}
|
engines: {node: '>= 12.0.0'}
|
||||||
cpu: [arm64]
|
cpu: [arm64]
|
||||||
os: [linux]
|
os: [linux]
|
||||||
libc: [musl]
|
|
||||||
|
|
||||||
lightningcss-linux-x64-gnu@1.29.2:
|
lightningcss-linux-x64-gnu@1.29.2:
|
||||||
resolution: {integrity: sha512-0v6idDCPG6epLXtBH/RPkHvYx74CVziHo6TMYga8O2EiQApnUPZsbR9nFNrg2cgBzk1AYqEd95TlrsL7nYABQg==}
|
resolution: {integrity: sha512-0v6idDCPG6epLXtBH/RPkHvYx74CVziHo6TMYga8O2EiQApnUPZsbR9nFNrg2cgBzk1AYqEd95TlrsL7nYABQg==}
|
||||||
engines: {node: '>= 12.0.0'}
|
engines: {node: '>= 12.0.0'}
|
||||||
cpu: [x64]
|
cpu: [x64]
|
||||||
os: [linux]
|
os: [linux]
|
||||||
libc: [glibc]
|
|
||||||
|
|
||||||
lightningcss-linux-x64-musl@1.29.2:
|
lightningcss-linux-x64-musl@1.29.2:
|
||||||
resolution: {integrity: sha512-rMpz2yawkgGT8RULc5S4WiZopVMOFWjiItBT7aSfDX4NQav6M44rhn5hjtkKzB+wMTRlLLqxkeYEtQ3dd9696w==}
|
resolution: {integrity: sha512-rMpz2yawkgGT8RULc5S4WiZopVMOFWjiItBT7aSfDX4NQav6M44rhn5hjtkKzB+wMTRlLLqxkeYEtQ3dd9696w==}
|
||||||
engines: {node: '>= 12.0.0'}
|
engines: {node: '>= 12.0.0'}
|
||||||
cpu: [x64]
|
cpu: [x64]
|
||||||
os: [linux]
|
os: [linux]
|
||||||
libc: [musl]
|
|
||||||
|
|
||||||
lightningcss-win32-arm64-msvc@1.29.2:
|
lightningcss-win32-arm64-msvc@1.29.2:
|
||||||
resolution: {integrity: sha512-nL7zRW6evGQqYVu/bKGK+zShyz8OVzsCotFgc7judbt6wnB2KbiKKJwBE4SGoDBQ1O94RjW4asrCjQL4i8Fhbw==}
|
resolution: {integrity: sha512-nL7zRW6evGQqYVu/bKGK+zShyz8OVzsCotFgc7judbt6wnB2KbiKKJwBE4SGoDBQ1O94RjW4asrCjQL4i8Fhbw==}
|
||||||
@@ -1229,6 +1211,8 @@ snapshots:
|
|||||||
'@esbuild/win32-x64@0.25.3':
|
'@esbuild/win32-x64@0.25.3':
|
||||||
optional: true
|
optional: true
|
||||||
|
|
||||||
|
'@fortawesome/fontawesome-free@6.7.2': {}
|
||||||
|
|
||||||
'@jridgewell/sourcemap-codec@1.5.0': {}
|
'@jridgewell/sourcemap-codec@1.5.0': {}
|
||||||
|
|
||||||
'@parcel/watcher-android-arm64@2.5.1':
|
'@parcel/watcher-android-arm64@2.5.1':
|
||||||
|
|||||||
17
src/App.vue
17
src/App.vue
@@ -1,10 +1,23 @@
|
|||||||
<script setup>
|
<script setup>
|
||||||
|
import Header from '@/components/layout/Header.vue'
|
||||||
|
import Footer from '@/components/layout/Footer.vue'
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<template>
|
<template>
|
||||||
<router-view />
|
<div id="app" class="min-h-screen flex flex-col">
|
||||||
|
<Header />
|
||||||
|
<main class="flex-grow pt-16 md:pt-20">
|
||||||
|
<router-view />
|
||||||
|
</main>
|
||||||
|
<Footer />
|
||||||
|
</div>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<style lang='scss' scoped>
|
<style lang='scss' scoped>
|
||||||
|
#app {
|
||||||
|
font-family: -apple-system, BlinkMacSystemFont, 'Inter', 'Helvetica Neue', 'PingFang SC', sans-serif;
|
||||||
|
color: #1a202c;
|
||||||
|
-webkit-font-smoothing: antialiased;
|
||||||
|
-moz-osx-font-smoothing: grayscale;
|
||||||
|
}
|
||||||
</style>
|
</style>
|
||||||
|
|||||||
BIN
src/assets/images/company0002.jpeg
Normal file
BIN
src/assets/images/company0002.jpeg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 525 KiB |
BIN
src/assets/images/company0003.jpeg
Normal file
BIN
src/assets/images/company0003.jpeg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 323 KiB |
BIN
src/assets/images/company0004.jpeg
Normal file
BIN
src/assets/images/company0004.jpeg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 202 KiB |
BIN
src/assets/images/company0005.jpeg
Normal file
BIN
src/assets/images/company0005.jpeg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 849 KiB |
BIN
src/assets/images/company0006.png
Normal file
BIN
src/assets/images/company0006.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 86 KiB |
BIN
src/assets/images/features-home.png
Normal file
BIN
src/assets/images/features-home.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 1.6 MiB |
BIN
src/assets/images/features0001.jpeg
Normal file
BIN
src/assets/images/features0001.jpeg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 3.7 KiB |
BIN
src/assets/images/features0002.jpeg
Normal file
BIN
src/assets/images/features0002.jpeg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 3.5 KiB |
BIN
src/assets/images/gongan.png
Normal file
BIN
src/assets/images/gongan.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 3.7 KiB |
BIN
src/assets/images/home0001.jpeg
Normal file
BIN
src/assets/images/home0001.jpeg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 390 KiB |
BIN
src/assets/images/join0001.jpeg
Normal file
BIN
src/assets/images/join0001.jpeg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 5.3 KiB |
BIN
src/assets/images/join0002.jpeg
Normal file
BIN
src/assets/images/join0002.jpeg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 6.2 KiB |
BIN
src/assets/images/logo-white.png
Normal file
BIN
src/assets/images/logo-white.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 19 KiB |
BIN
src/assets/images/logo.png
Normal file
BIN
src/assets/images/logo.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 16 KiB |
BIN
src/assets/images/logo@1x.png
Normal file
BIN
src/assets/images/logo@1x.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 2.0 KiB |
BIN
src/assets/images/mark_bs.png
Normal file
BIN
src/assets/images/mark_bs.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 721 B |
BIN
src/assets/images/team0001.jpeg
Normal file
BIN
src/assets/images/team0001.jpeg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 4.4 KiB |
BIN
src/assets/images/team0003.jpeg
Normal file
BIN
src/assets/images/team0003.jpeg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 4.9 KiB |
BIN
src/assets/images/zq0001.png
Normal file
BIN
src/assets/images/zq0001.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 68 KiB |
29
src/assets/styles/global.scss
Normal file
29
src/assets/styles/global.scss
Normal file
@@ -0,0 +1,29 @@
|
|||||||
|
body {
|
||||||
|
font-family: 'Inter', 'Helvetica Neue', 'PingFang SC', sans-serif;
|
||||||
|
color: #1a202c;
|
||||||
|
-webkit-font-smoothing: antialiased;
|
||||||
|
-moz-osx-font-smoothing: grayscale;
|
||||||
|
}
|
||||||
|
|
||||||
|
.container {
|
||||||
|
@apply mx-auto px-4;
|
||||||
|
}
|
||||||
|
|
||||||
|
.section {
|
||||||
|
@apply py-16 md:py-24;
|
||||||
|
}
|
||||||
|
|
||||||
|
.fade-enter-active,
|
||||||
|
.fade-leave-active {
|
||||||
|
transition: opacity 0.3s ease;
|
||||||
|
}
|
||||||
|
|
||||||
|
.fade-enter-from,
|
||||||
|
.fade-leave-to {
|
||||||
|
opacity: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
p {
|
||||||
|
// 首行缩进两个字符
|
||||||
|
text-indent: 2em;
|
||||||
|
}
|
||||||
142
src/components/layout/Footer.vue
Normal file
142
src/components/layout/Footer.vue
Normal file
@@ -0,0 +1,142 @@
|
|||||||
|
<template>
|
||||||
|
<footer class="bg-gray-900 text-white pt-16 pb-10 px-4 sm:px-8 lg:px-24">
|
||||||
|
<div class="container mx-auto">
|
||||||
|
<div class="flex flex-wrap -mx-4">
|
||||||
|
<!-- 公司信息部分 -->
|
||||||
|
<div class="w-full md:w-1/3 px-4 mb-8 md:mb-0">
|
||||||
|
<div>
|
||||||
|
<router-link to="/" class="flex items-center mb-6">
|
||||||
|
<img
|
||||||
|
src="@/assets/images/logo-white.png"
|
||||||
|
alt="酉佰"
|
||||||
|
class="h-8 md:h-10"
|
||||||
|
/>
|
||||||
|
<span class="ml-2 text-xl md:text-2xl font-bold text-white"
|
||||||
|
>酉佰</span
|
||||||
|
>
|
||||||
|
</router-link>
|
||||||
|
<p class="text-gray-400 mb-4 max-w-xs text-sm sm:text-base">
|
||||||
|
酉佰专注金融、投资领域的专业服务，提供金融行业解决方案。
|
||||||
|
</p>
|
||||||
|
<div class="flex space-x-4">
|
||||||
|
<a
|
||||||
|
v-for="(item, index) in social"
|
||||||
|
:key="index"
|
||||||
|
:href="item.link"
|
||||||
|
class="w-8 h-8 sm:w-10 sm:h-10 flex items-center justify-center rounded-full bg-gray-800 hover:bg-primary transition-colors"
|
||||||
|
aria-label="社交媒体链接"
|
||||||
|
>
|
||||||
|
<i :class="item.icon" class="text-white text-sm sm:text-base"></i>
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- 导航链接部分 -->
|
||||||
|
<div
|
||||||
|
v-for="(block, index) in footerLinks"
|
||||||
|
:key="index"
|
||||||
|
class="w-full sm:w-1/2 md:w-1/4 px-4 mb-8 md:mb-0"
|
||||||
|
>
|
||||||
|
<h3 class="text-base sm:text-lg font-semibold mb-4">{{ block.title }}</h3>
|
||||||
|
<ul class="space-y-2">
|
||||||
|
<li v-for="(link, linkIndex) in block.links" :key="linkIndex">
|
||||||
|
<a
|
||||||
|
:href="link.path"
|
||||||
|
class="text-gray-400 hover:text-primary transition-colors text-sm sm:text-base"
|
||||||
|
>
|
||||||
|
{{ link.title }}
|
||||||
|
</a>
|
||||||
|
</li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- 订阅部分 -->
|
||||||
|
<!-- <div class="w-full md:w-1/4 px-4">-->
|
||||||
|
<!-- <h3 class="text-base sm:text-lg font-semibold mb-4">订阅我们</h3>-->
|
||||||
|
<!-- <p class="text-gray-400 mb-4 text-sm sm:text-base">-->
|
||||||
|
<!-- 订阅我们的邮件，获取最新电商行业资讯和解决方案。-->
|
||||||
|
<!-- </p>-->
|
||||||
|
<!-- <div class="flex">-->
|
||||||
|
<!-- <input-->
|
||||||
|
<!-- type="email"-->
|
||||||
|
<!-- placeholder="您的邮箱地址"-->
|
||||||
|
<!-- class="w-full px-3 py-2 sm:px-4 sm:py-2 rounded-l-lg focus:outline-none text-gray-700 text-sm sm:text-base"-->
|
||||||
|
<!-- aria-label="订阅邮箱输入框"-->
|
||||||
|
<!-- />-->
|
||||||
|
<!-- <button-->
|
||||||
|
<!-- class="bg-primary hover:bg-blue-700 text-white font-semibold px-3 sm:px-4 py-2 rounded-r-lg transition-colors text-sm sm:text-base"-->
|
||||||
|
<!-- aria-label="订阅按钮"-->
|
||||||
|
<!-- >-->
|
||||||
|
<!-- 订阅-->
|
||||||
|
<!-- </button>-->
|
||||||
|
<!-- </div>-->
|
||||||
|
<!-- </div>-->
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- 底部版权信息 -->
|
||||||
|
<div class="border-t border-gray-800 mt-10 pt-6">
|
||||||
|
<div class="flex flex-col md:flex-row justify-between items-center text-center md:text-left">
|
||||||
|
<div class="mb-4 md:mb-0">
|
||||||
|
<p class="text-gray-500 text-xs sm:text-sm">
|
||||||
|
© 2021 shyoubai.com. All rights reserved
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
<div class="flex flex-wrap justify-center gap-x-4 gap-y-2">
|
||||||
|
<a href="#" class="text-gray-500 hover:text-primary transition-colors text-xs sm:text-sm">
|
||||||
|
隐私政策
|
||||||
|
</a>
|
||||||
|
<span class="text-gray-500 hidden sm:inline">|</span>
|
||||||
|
<a href="#" class="text-gray-500 hover:text-primary transition-colors text-xs sm:text-sm">
|
||||||
|
使用条款
|
||||||
|
</a>
|
||||||
|
<span class="text-gray-500 hidden sm:inline">|</span>
|
||||||
|
<span class="text-gray-500 text-xs sm:text-sm">
|
||||||
|
沪公网安备 31010402009014号
|
||||||
|
</span>
|
||||||
|
<span class="text-gray-500 hidden sm:inline">|</span>
|
||||||
|
<span class="text-gray-500 text-xs sm:text-sm">
|
||||||
|
沪ICP备2021007173号-1
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</footer>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
export default {
|
||||||
|
name: 'Footer',
|
||||||
|
data() {
|
||||||
|
return {
|
||||||
|
social: [
|
||||||
|
{ icon: 'fab fa-weixin', link: '#' },
|
||||||
|
{ icon: 'fab fa-weibo', link: '#' },
|
||||||
|
{ icon: 'fab fa-linkedin-in', link: '#' },
|
||||||
|
{ icon: 'fab fa-zhihu', link: '#' },
|
||||||
|
],
|
||||||
|
footerLinks: [
|
||||||
|
{
|
||||||
|
title: '快速导航',
|
||||||
|
links: [
|
||||||
|
{ title: '关于我们', path: '/about' },
|
||||||
|
{ title: '团队介绍', path: '/team' },
|
||||||
|
{ title: '服务特色', path: '/features' },
|
||||||
|
{ title: '加入我们', path: '/careers' },
|
||||||
|
]
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: '联系我们',
|
||||||
|
links: [
|
||||||
|
{ title: '上海市中山西路2020号华宜大厦2号楼1501室', path: '#' },
|
||||||
|
{ title: '021-34161621', path: 'tel:021-34161621' },
|
||||||
|
{ title: 'youbaiwangluo@163.com', path: 'mailto:youbaiwangluo@163.com' },
|
||||||
|
{ title: '周一至周五 9:00-18:00', path: '#' },
|
||||||
|
]
|
||||||
|
}
|
||||||
|
]
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</script>
|
||||||
192
src/components/layout/Header.vue
Normal file
192
src/components/layout/Header.vue
Normal file
@@ -0,0 +1,192 @@
|
|||||||
|
<template>
|
||||||
|
<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
|
||||||
|
}"
|
||||||
|
>
|
||||||
|
<div class="container mx-auto">
|
||||||
|
<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>
|
||||||
|
|
||||||
|
<nav class="hidden md:flex space-x-8">
|
||||||
|
<router-link
|
||||||
|
to="/"
|
||||||
|
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
|
||||||
|
>
|
||||||
|
</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="bg-primary hover:bg-blue-700 font-semibold px-4 py-2 rounded-full transition-colors"
|
||||||
|
>
|
||||||
|
联系我们
|
||||||
|
</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"
|
||||||
|
>
|
||||||
|
<path
|
||||||
|
stroke-linecap="round"
|
||||||
|
stroke-linejoin="round"
|
||||||
|
stroke-width="2"
|
||||||
|
d="M4 6h16M4 12h16m-7 6h7"
|
||||||
|
/>
|
||||||
|
</svg>
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- 移动端菜单 -->
|
||||||
|
<div
|
||||||
|
v-show="isMenuOpen"
|
||||||
|
class="md:hidden fixed inset-0 bg-white z-50 py-5"
|
||||||
|
style="margin-top: 76px"
|
||||||
|
>
|
||||||
|
<div class="container">
|
||||||
|
<nav class="flex flex-col space-y-4 py-4">
|
||||||
|
<router-link
|
||||||
|
to="/"
|
||||||
|
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
|
||||||
|
>
|
||||||
|
</nav>
|
||||||
|
<div class="pt-8">
|
||||||
|
<button
|
||||||
|
class="w-full bg-primary hover:bg-blue-700 text-white font-semibold py-3 rounded-lg transition-colors"
|
||||||
|
>
|
||||||
|
联系我们
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</header>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
export default {
|
||||||
|
name: 'Header',
|
||||||
|
data() {
|
||||||
|
return {
|
||||||
|
isScrolled: false,
|
||||||
|
isMenuOpen: false
|
||||||
|
}
|
||||||
|
},
|
||||||
|
mounted() {
|
||||||
|
window.addEventListener('scroll', this.handleScroll)
|
||||||
|
},
|
||||||
|
beforeUnmount() {
|
||||||
|
window.removeEventListener('scroll', this.handleScroll)
|
||||||
|
},
|
||||||
|
methods: {
|
||||||
|
handleScroll() {
|
||||||
|
this.isScrolled = window.scrollY > 20
|
||||||
|
},
|
||||||
|
toggleMenu() {
|
||||||
|
this.isMenuOpen = !this.isMenuOpen
|
||||||
|
},
|
||||||
|
closeMenu() {
|
||||||
|
this.isMenuOpen = false
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style scoped>
|
||||||
|
.router-link-exact-active {
|
||||||
|
position: relative;
|
||||||
|
}
|
||||||
|
|
||||||
|
.router-link-exact-active::after {
|
||||||
|
content: '';
|
||||||
|
position: absolute;
|
||||||
|
bottom: -3px;
|
||||||
|
left: 0;
|
||||||
|
width: 100%;
|
||||||
|
height: 2px;
|
||||||
|
background-color: #2563eb;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
56
src/components/ui/Card.vue
Normal file
56
src/components/ui/Card.vue
Normal file
@@ -0,0 +1,56 @@
|
|||||||
|
<template>
|
||||||
|
<div
|
||||||
|
class="bg-white rounded-2xl p-6 md:p-8 shadow-sm hover:shadow-lg transition-shadow overflow-hidden"
|
||||||
|
:class="[bordered ? 'border border-gray-200' : '']"
|
||||||
|
data-aos="fade-up"
|
||||||
|
>
|
||||||
|
<div
|
||||||
|
v-if="$slots.icon || icon"
|
||||||
|
class="w-12 h-12 md:w-16 md:h-16 rounded-lg bg-primary/10 text-primary p-3 flex items-center justify-center mb-5"
|
||||||
|
>
|
||||||
|
<slot name="icon">
|
||||||
|
<i v-if="icon" :class="icon" class="text-xl"></i>
|
||||||
|
</slot>
|
||||||
|
</div>
|
||||||
|
<h3
|
||||||
|
class="text-xl md:text-2xl font-bold text-gray-800 mb-3"
|
||||||
|
v-if="$slots.title || title"
|
||||||
|
>
|
||||||
|
<slot name="title">{{ title }}</slot>
|
||||||
|
</h3>
|
||||||
|
<p
|
||||||
|
class="text-gray-600 mb-6"
|
||||||
|
:class="{ 'md:text-lg': largeText }"
|
||||||
|
v-if="$slots.default"
|
||||||
|
>
|
||||||
|
<slot></slot>
|
||||||
|
</p>
|
||||||
|
<div v-if="$slots.actions">
|
||||||
|
<slot name="actions"></slot>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
export default {
|
||||||
|
name: 'Card',
|
||||||
|
props: {
|
||||||
|
icon: {
|
||||||
|
type: String,
|
||||||
|
default: ''
|
||||||
|
},
|
||||||
|
title: {
|
||||||
|
type: String,
|
||||||
|
default: ''
|
||||||
|
},
|
||||||
|
bordered: {
|
||||||
|
type: Boolean,
|
||||||
|
default: true
|
||||||
|
},
|
||||||
|
largeText: {
|
||||||
|
type: Boolean,
|
||||||
|
default: false
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</script>
|
||||||
269
src/components/ui/Company.vue
Normal file
269
src/components/ui/Company.vue
Normal file
@@ -0,0 +1,269 @@
|
|||||||
|
<template>
|
||||||
|
<div
|
||||||
|
class="relative rounded-2xl overflow-hidden shadow-xl"
|
||||||
|
@touchstart="startDrag"
|
||||||
|
@touchmove="onDrag"
|
||||||
|
@touchend="endDrag"
|
||||||
|
@mousedown="startDrag"
|
||||||
|
@mousemove="onDrag"
|
||||||
|
@mouseup="endDrag"
|
||||||
|
@mouseleave="endDrag"
|
||||||
|
>
|
||||||
|
<!-- 公司实景轮播图 -->
|
||||||
|
<div class="relative h-96 overflow-hidden">
|
||||||
|
<div
|
||||||
|
v-for="(slide, index) in companySlides"
|
||||||
|
:key="index"
|
||||||
|
class="absolute inset-0 transition-transform duration-500 ease-in-out"
|
||||||
|
:style="{
|
||||||
|
transform: getSlideTransform(index),
|
||||||
|
zIndex: getSlideZIndex(index)
|
||||||
|
}"
|
||||||
|
>
|
||||||
|
<div
|
||||||
|
class="absolute inset-0"
|
||||||
|
:class="{
|
||||||
|
'animate-kenburns': currentSlide === index
|
||||||
|
}"
|
||||||
|
>
|
||||||
|
<!-- 使用img标签确保图片正常显示 -->
|
||||||
|
<img :src="slide.src" :alt="slide.alt" class="w-full h-full object-cover"></img>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- 轮播控制按钮 - 小圆点指示器（始终显示） -->
|
||||||
|
<div class="absolute bottom-4 left-1/2 transform -translate-x-1/2 flex space-x-2 z-50">
|
||||||
|
<button
|
||||||
|
v-for="(slide, index) in companySlides"
|
||||||
|
:key="index"
|
||||||
|
class="w-3 h-3 rounded-full bg-white/50 hover:bg-white transition-colors cursor-pointer"
|
||||||
|
:class="{ '!bg-white': currentSlide === index }"
|
||||||
|
@click="goToSlide(index)"
|
||||||
|
></button>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- 左右切换按钮 - 只在PC端显示 -->
|
||||||
|
<button
|
||||||
|
@click="goToSlide(currentSlide - 1)"
|
||||||
|
class="hidden md:flex absolute left-4 top-1/2 transform -translate-y-1/2 w-10 h-10 rounded-full bg-white/20 hover:bg-white/40 items-center justify-center transition-colors cursor-pointer z-50"
|
||||||
|
>
|
||||||
|
<svg width="14" height="24" viewBox="0 0 14 24" xmlns="http://www.w3.org/2000/svg" class="w-4 h-4 text-white">
|
||||||
|
<polyline fill="none" stroke="currentColor" stroke-width="1.4" points="12.775,1 1.225,12 12.775,23"></polyline>
|
||||||
|
</svg>
|
||||||
|
</button>
|
||||||
|
<button
|
||||||
|
@click="goToSlide(currentSlide + 1)"
|
||||||
|
class="hidden md:flex absolute right-4 top-1/2 transform -translate-y-1/2 w-10 h-10 rounded-full bg-white/20 hover:bg-white/40 items-center justify-center transition-colors cursor-pointer z-50"
|
||||||
|
>
|
||||||
|
<svg width="14" height="24" viewBox="0 0 14 24" xmlns="http://www.w3.org/2000/svg" class="w-4 h-4 text-white">
|
||||||
|
<polyline fill="none" stroke="currentColor" stroke-width="1.4" points="1.225,23 12.775,12 1.225,1"></polyline>
|
||||||
|
</svg>
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script setup>
|
||||||
|
import { ref, onMounted, onUnmounted } from 'vue'
|
||||||
|
// 请确保这些图片路径正确
|
||||||
|
import img1 from '@/assets/images/company0002.jpeg'
|
||||||
|
import img2 from '@/assets/images/company0003.jpeg'
|
||||||
|
import img3 from '@/assets/images/company0004.jpeg'
|
||||||
|
import img4 from '@/assets/images/company0005.jpeg'
|
||||||
|
import img5 from '@/assets/images/company0006.png'
|
||||||
|
|
||||||
|
const currentSlide = ref(0)
|
||||||
|
const prevSlide = ref(null)
|
||||||
|
const isDragging = ref(false)
|
||||||
|
const dragStartX = ref(0)
|
||||||
|
const dragCurrentX = ref(0)
|
||||||
|
const dragDelta = ref(0)
|
||||||
|
const direction = ref('right') // 添加方向状态
|
||||||
|
|
||||||
|
const companySlides = ref([
|
||||||
|
{ src: img1, alt: '公司环境实景1' },
|
||||||
|
{ src: img2, alt: '公司环境实景2' },
|
||||||
|
{ src: img3, alt: '公司环境实景3' },
|
||||||
|
{ src: img4, alt: '公司环境实景4' },
|
||||||
|
{ src: img5, alt: '公司环境实景5' }
|
||||||
|
])
|
||||||
|
|
||||||
|
let slideInterval = null
|
||||||
|
|
||||||
|
// 轮播图控制函数
|
||||||
|
const goToSlide = (index) => {
|
||||||
|
const slidesCount = companySlides.value.length;
|
||||||
|
|
||||||
|
// 计算正确的索引
|
||||||
|
if (index < 0) index = slidesCount - 1;
|
||||||
|
else if (index >= slidesCount) index = 0;
|
||||||
|
|
||||||
|
// 确定切换方向
|
||||||
|
direction.value = index > currentSlide.value ? 'right' : 'left';
|
||||||
|
|
||||||
|
// 更新幻灯片索引
|
||||||
|
prevSlide.value = currentSlide.value;
|
||||||
|
currentSlide.value = index;
|
||||||
|
|
||||||
|
resetInterval();
|
||||||
|
}
|
||||||
|
|
||||||
|
// 重置自动轮播计时器
|
||||||
|
const resetInterval = () => {
|
||||||
|
clearInterval(slideInterval)
|
||||||
|
slideInterval = setInterval(() => {
|
||||||
|
direction.value = 'right';
|
||||||
|
goToSlide(currentSlide.value + 1)
|
||||||
|
}, 5000)
|
||||||
|
}
|
||||||
|
|
||||||
|
// 触摸/鼠标拖动功能
|
||||||
|
const startDrag = (e) => {
|
||||||
|
// 阻止鼠标事件在按钮上触发拖动
|
||||||
|
if (e.target.closest('button')) return;
|
||||||
|
|
||||||
|
isDragging.value = true;
|
||||||
|
dragStartX.value = getClientX(e);
|
||||||
|
dragCurrentX.value = dragStartX.value;
|
||||||
|
dragDelta.value = 0;
|
||||||
|
clearInterval(slideInterval);
|
||||||
|
|
||||||
|
// 添加拖动样式，提高性能
|
||||||
|
document.body.classList.add('dragging');
|
||||||
|
|
||||||
|
// PC端添加额外处理
|
||||||
|
if (e.type === 'mousedown') {
|
||||||
|
e.preventDefault();
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
const onDrag = (e) => {
|
||||||
|
if (!isDragging.value) return;
|
||||||
|
|
||||||
|
const clientX = getClientX(e);
|
||||||
|
dragDelta.value = clientX - dragStartX.value;
|
||||||
|
dragCurrentX.value = clientX;
|
||||||
|
|
||||||
|
// PC端添加额外处理
|
||||||
|
if (e.type === 'mousemove') {
|
||||||
|
e.preventDefault();
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
const endDrag = () => {
|
||||||
|
if (!isDragging.value) return;
|
||||||
|
|
||||||
|
isDragging.value = false;
|
||||||
|
document.body.classList.remove('dragging');
|
||||||
|
|
||||||
|
// 根据拖动距离判断是否切换幻灯片
|
||||||
|
const threshold = window.innerWidth / 5; // 调整为屏幕宽度的1/5
|
||||||
|
|
||||||
|
if (Math.abs(dragDelta.value) > threshold) {
|
||||||
|
if (dragDelta.value > 0) {
|
||||||
|
direction.value = 'left';
|
||||||
|
goToSlide(currentSlide.value - 1); // 向右拖动，切换到上一张
|
||||||
|
} else {
|
||||||
|
direction.value = 'right';
|
||||||
|
goToSlide(currentSlide.value + 1); // 向左拖动，切换到下一张
|
||||||
|
}
|
||||||
|
} else {
|
||||||
|
// 如果拖动距离不够，回到当前位置
|
||||||
|
dragDelta.value = 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
resetInterval();
|
||||||
|
}
|
||||||
|
|
||||||
|
// 获取客户端X坐标（兼容触摸和鼠标事件）
|
||||||
|
const getClientX = (e) => {
|
||||||
|
if (e.type.includes('touch')) {
|
||||||
|
return e.touches[0] ? e.touches[0].clientX : e.changedTouches[0].clientX;
|
||||||
|
}
|
||||||
|
return e.clientX;
|
||||||
|
}
|
||||||
|
|
||||||
|
// 获取幻灯片变换值
|
||||||
|
const getSlideTransform = (index) => {
|
||||||
|
if (isDragging.value) {
|
||||||
|
// 拖动状态：当前幻灯片跟随拖动位置
|
||||||
|
if (index === currentSlide.value) {
|
||||||
|
return `translateX(${dragDelta.value}px)`;
|
||||||
|
}
|
||||||
|
// 其他幻灯片保持原位
|
||||||
|
return `translateX(${index > currentSlide.value ? '100%' : '-100%'})`;
|
||||||
|
}
|
||||||
|
|
||||||
|
// 非拖动状态
|
||||||
|
if (index === currentSlide.value) {
|
||||||
|
return 'translateX(0)';
|
||||||
|
}
|
||||||
|
|
||||||
|
// 根据方向确定位置
|
||||||
|
if (direction.value === 'right') {
|
||||||
|
return `translateX(${index > currentSlide.value ? '100%' : '-100%'})`;
|
||||||
|
} else {
|
||||||
|
return `translateX(${index > currentSlide.value ? '100%' : '-100%'})`;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// 获取幻灯片层级
|
||||||
|
const getSlideZIndex = (index) => {
|
||||||
|
// 当前幻灯片最高层级
|
||||||
|
if (index === currentSlide.value) return 30;
|
||||||
|
|
||||||
|
// 下一张幻灯片次高
|
||||||
|
const nextIndex = direction.value === 'right'
|
||||||
|
? (currentSlide.value + 1) % companySlides.value.length
|
||||||
|
: (currentSlide.value - 1 + companySlides.value.length) % companySlides.value.length;
|
||||||
|
|
||||||
|
if (index === nextIndex) return 20;
|
||||||
|
|
||||||
|
// 其他幻灯片最低
|
||||||
|
return 10;
|
||||||
|
}
|
||||||
|
|
||||||
|
onMounted(() => {
|
||||||
|
resetInterval()
|
||||||
|
})
|
||||||
|
|
||||||
|
onUnmounted(() => {
|
||||||
|
clearInterval(slideInterval)
|
||||||
|
})
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style scoped>
|
||||||
|
/* 定义Ken Burns效果动画 */
|
||||||
|
@keyframes kenburns {
|
||||||
|
0% {
|
||||||
|
transform: scale(1.05);
|
||||||
|
transform-origin: 50% 50%;
|
||||||
|
}
|
||||||
|
100% {
|
||||||
|
transform: scale(1);
|
||||||
|
transform-origin: 50% 50%;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.animate-kenburns {
|
||||||
|
animation: kenburns 5s linear forwards;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* 定义滑动动画效果 */
|
||||||
|
.transition-transform {
|
||||||
|
transition: transform 0.5s ease-in-out;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* 拖动时的性能优化 */
|
||||||
|
.dragging * {
|
||||||
|
user-select: none;
|
||||||
|
pointer-events: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* 确保图片填充容器 */
|
||||||
|
.object-cover {
|
||||||
|
object-fit: cover;
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
39
src/components/ui/FeatureCard.vue
Normal file
39
src/components/ui/FeatureCard.vue
Normal file
@@ -0,0 +1,39 @@
|
|||||||
|
<template>
|
||||||
|
<div
|
||||||
|
class="relative bg-white rounded-xl p-6 md:p-8 shadow-sm hover:shadow-lg transition-shadow overflow-hidden"
|
||||||
|
data-aos="fade-up"
|
||||||
|
data-aos-duration="600"
|
||||||
|
>
|
||||||
|
<div
|
||||||
|
class="w-12 h-12 md:w-16 md:h-16 rounded-lg bg-blue-100 text-blue-600 flex items-center justify-center mb-6"
|
||||||
|
>
|
||||||
|
<i :class="icon" class="text-xl"></i>
|
||||||
|
</div>
|
||||||
|
<h3 class="text-xl md:text-2xl font-bold text-gray-800 mb-3">
|
||||||
|
{{ title }}
|
||||||
|
</h3>
|
||||||
|
<p class="text-gray-600">
|
||||||
|
{{ description }}
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
export default {
|
||||||
|
name: 'FeatureCard',
|
||||||
|
props: {
|
||||||
|
icon: {
|
||||||
|
type: String,
|
||||||
|
required: true
|
||||||
|
},
|
||||||
|
title: {
|
||||||
|
type: String,
|
||||||
|
required: true
|
||||||
|
},
|
||||||
|
description: {
|
||||||
|
type: String,
|
||||||
|
required: true
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</script>
|
||||||
85
src/components/ui/SectionTitle.vue
Normal file
85
src/components/ui/SectionTitle.vue
Normal file
@@ -0,0 +1,85 @@
|
|||||||
|
<template>
|
||||||
|
<div
|
||||||
|
:class="[
|
||||||
|
'mb-10 md:mb-16',
|
||||||
|
align === 'center' ? 'text-center' : 'text-left',
|
||||||
|
titleClass
|
||||||
|
]"
|
||||||
|
data-aos="fade-up"
|
||||||
|
>
|
||||||
|
<h2
|
||||||
|
class="text-2xl md:text-4xl font-bold leading-tight mb-4"
|
||||||
|
:class="titleClass"
|
||||||
|
>
|
||||||
|
<template v-if="highlight">
|
||||||
|
{{ titlePart1 }}<span class="text-primary">{{ highlight }}</span>{{ titlePart2 }}
|
||||||
|
</template>
|
||||||
|
<template v-else>
|
||||||
|
{{ title }}
|
||||||
|
</template>
|
||||||
|
</h2>
|
||||||
|
<div class="relative inline-block" v-if="divider && align === 'center'">
|
||||||
|
<div
|
||||||
|
class="absolute bottom-0 left-1/2 transform -translate-x-1/2 w-20 h-0.5 bg-primary"
|
||||||
|
></div>
|
||||||
|
</div>
|
||||||
|
<p
|
||||||
|
v-if="subtitle"
|
||||||
|
class="text-gray-500 text-lg max-w-3xl"
|
||||||
|
:class="[align === 'center' ? 'mx-auto' : '']"
|
||||||
|
>
|
||||||
|
{{ subtitle }}
|
||||||
|
</p>
|
||||||
|
<p
|
||||||
|
v-if="description"
|
||||||
|
class="text-gray-600 mt-4 max-w-3xl"
|
||||||
|
:class="[align === 'center' ? 'mx-auto' : '']"
|
||||||
|
>
|
||||||
|
{{ description }}
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
export default {
|
||||||
|
name: 'SectionTitle',
|
||||||
|
props: {
|
||||||
|
title: {
|
||||||
|
type: String,
|
||||||
|
default: ''
|
||||||
|
},
|
||||||
|
highlight: {
|
||||||
|
type: String,
|
||||||
|
default: ''
|
||||||
|
},
|
||||||
|
subtitle: {
|
||||||
|
type: String,
|
||||||
|
default: ''
|
||||||
|
},
|
||||||
|
description: {
|
||||||
|
type: String,
|
||||||
|
default: ''
|
||||||
|
},
|
||||||
|
align: {
|
||||||
|
type: String,
|
||||||
|
default: 'left'
|
||||||
|
},
|
||||||
|
divider: {
|
||||||
|
type: Boolean,
|
||||||
|
default: true
|
||||||
|
},
|
||||||
|
titleClass: {
|
||||||
|
type: String,
|
||||||
|
default: ''
|
||||||
|
}
|
||||||
|
},
|
||||||
|
computed: {
|
||||||
|
titlePart1() {
|
||||||
|
return this.title.split(this.highlight)[0]
|
||||||
|
},
|
||||||
|
titlePart2() {
|
||||||
|
return this.title.split(this.highlight)[1]
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</script>
|
||||||
48
src/components/ui/TeamMember.vue
Normal file
48
src/components/ui/TeamMember.vue
Normal file
@@ -0,0 +1,48 @@
|
|||||||
|
<template>
|
||||||
|
<div class="group" data-aos="fade-up" data-aos-delay="50">
|
||||||
|
<div class="overflow-hidden rounded-2xl bg-white border border-gray-100 shadow-sm hover:shadow-lg transition-all duration-300 transform group-hover:-translate-y-1">
|
||||||
|
<div class="relative overflow-hidden">
|
||||||
|
<!-- 图片占位 -->
|
||||||
|
<div class="bg-gray-200 border-2 border-dashed rounded-xl w-full aspect-square">
|
||||||
|
<div class="w-full h-full flex items-center justify-center bg-blue-50">
|
||||||
|
<i class="fas fa-user text-4xl text-gray-300"></i>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="absolute inset-0 bg-gradient-to-t from-gray-900 to-transparent opacity-0 group-hover:opacity-90 transition-opacity duration-300 flex flex-col justify-end p-6">
|
||||||
|
<div class="text-white opacity-0 group-hover:opacity-100 transition-opacity duration-300">
|
||||||
|
<p class="text-sm">{{ member.description }}</p>
|
||||||
|
<div class="flex mt-4 space-x-3">
|
||||||
|
<a v-for="(social, idx) in member.social" :key="idx" :href="social.link"
|
||||||
|
class="w-8 h-8 rounded-full bg-white/20 hover:bg-amber-600 flex items-center justify-center text-white">
|
||||||
|
<i :class="social.icon"></i>
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="p-6">
|
||||||
|
<h3 class="text-lg font-bold text-gray-900">{{ member.name }}</h3>
|
||||||
|
<p class="text-amber-600 text-sm font-medium">{{ member.position }}</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script setup>
|
||||||
|
defineProps({
|
||||||
|
member: {
|
||||||
|
type: Object,
|
||||||
|
default: () => ({
|
||||||
|
name: '张经理',
|
||||||
|
position: '技术总监',
|
||||||
|
description: '拥有10年行业经验的技术专家',
|
||||||
|
social: [
|
||||||
|
{ icon: 'fab fa-linkedin-in', link: '#' },
|
||||||
|
{ icon: 'fab fa-weibo', link: '#' },
|
||||||
|
]
|
||||||
|
})
|
||||||
|
}
|
||||||
|
})
|
||||||
|
</script>
|
||||||
10
src/main.js
10
src/main.js
@@ -2,9 +2,13 @@ import { createApp } from 'vue'
|
|||||||
import { createPinia } from 'pinia'
|
import { createPinia } from 'pinia'
|
||||||
import Antd from 'ant-design-vue'
|
import Antd from 'ant-design-vue'
|
||||||
import './style.css'
|
import './style.css'
|
||||||
|
import '@/assets/styles/global.scss'
|
||||||
import App from './App.vue'
|
import App from './App.vue'
|
||||||
// 注册路由
|
// 注册路由
|
||||||
import router from './router'
|
import router from './router'
|
||||||
|
import AOS from 'aos'
|
||||||
|
import 'aos/dist/aos.css'
|
||||||
|
import '@fortawesome/fontawesome-free/css/all.min.css';
|
||||||
|
|
||||||
const app = createApp(App)
|
const app = createApp(App)
|
||||||
|
|
||||||
@@ -13,4 +17,10 @@ const app = createApp(App)
|
|||||||
app.use(createPinia())
|
app.use(createPinia())
|
||||||
app.use(router)
|
app.use(router)
|
||||||
app.use(Antd)
|
app.use(Antd)
|
||||||
|
app.use(AOS.init({
|
||||||
|
duration: 800,
|
||||||
|
offset: 100,
|
||||||
|
easing: 'ease-in-out',
|
||||||
|
once: true
|
||||||
|
}))
|
||||||
app.mount('#app')
|
app.mount('#app')
|
||||||
|
|||||||
@@ -4,13 +4,11 @@ import MainLayout from '@/layouts/Header.vue'
|
|||||||
|
|
||||||
// 在路由配置中添加个人中心路由
|
// 在路由配置中添加个人中心路由
|
||||||
const routes = [
|
const routes = [
|
||||||
{
|
{ path: '/', meta: { title: '首页' }, name: 'Home', component: () => import('@/views/Home.vue') },
|
||||||
path: '/',
|
{ path: '/about', meta: { title: '公司介绍' }, name: 'About', component: () => import('@/views/About.vue') },
|
||||||
component: MainLayout,
|
{ path: '/team', meta: { title: '团队介绍' }, name: 'Team', component: () => import('@/views/Team.vue') },
|
||||||
children: [
|
{ path: '/features', meta: { title: '公司特色' }, name: 'Features', component: () => import('@/views/Features.vue') },
|
||||||
{ path: '', name: 'Home', component: () => import('@/views/index/index.vue') },
|
{ path: '/careers', meta: { title: '加入我们' }, name: 'Careers', component: () => import('@/views/Careers.vue') },
|
||||||
]
|
|
||||||
},
|
|
||||||
]
|
]
|
||||||
|
|
||||||
const router = createRouter({
|
const router = createRouter({
|
||||||
@@ -21,18 +19,19 @@ const router = createRouter({
|
|||||||
}
|
}
|
||||||
})
|
})
|
||||||
|
|
||||||
router.beforeEach((to, from) => {
|
|
||||||
const userStore = useUserStore()
|
|
||||||
if (to.meta.requiresAuth && !userStore.user) {
|
|
||||||
return { name: 'Login', query: { redirect: to.fullPath } }
|
|
||||||
}
|
|
||||||
})
|
|
||||||
|
|
||||||
export default router
|
export default router
|
||||||
|
|
||||||
router.beforeEach((to, from) => {
|
router.beforeEach((to, from) => {
|
||||||
const userStore = useUserStore()
|
// const userStore = useUserStore()
|
||||||
if (to.meta.requiresAuth && !userStore.user) {
|
// if (to.meta.requiresAuth && !userStore.user) {
|
||||||
return { name: 'Login', query: { redirect: to.fullPath } }
|
// return { name: 'Login', query: { redirect: to.fullPath } }
|
||||||
|
// }
|
||||||
|
|
||||||
|
if (to.meta.title) {
|
||||||
|
console.log('to.meta.title', to.meta)
|
||||||
|
document.title = `${to.meta.title} | 上海酉佰`
|
||||||
|
} else {
|
||||||
|
document.title = `上海酉佰`
|
||||||
}
|
}
|
||||||
})
|
})
|
||||||
|
|||||||
@@ -1 +1,28 @@
|
|||||||
@import "tailwindcss";
|
@import "tailwindcss";
|
||||||
|
|
||||||
|
/*@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap');*/
|
||||||
|
|
||||||
|
/*body {*/
|
||||||
|
/* font-family: 'Inter', 'Helvetica Neue', 'PingFang SC', sans-serif;*/
|
||||||
|
/* color: #1a202c;*/
|
||||||
|
/* -webkit-font-smoothing: antialiased;*/
|
||||||
|
/* -moz-osx-font-smoothing: grayscale;*/
|
||||||
|
/*}*/
|
||||||
|
|
||||||
|
/*.container {*/
|
||||||
|
/* @apply mx-auto px-4;*/
|
||||||
|
/*}*/
|
||||||
|
|
||||||
|
/*.section {*/
|
||||||
|
/* @apply py-16 md:py-24;*/
|
||||||
|
/*}*/
|
||||||
|
|
||||||
|
/*.fade-enter-active,*/
|
||||||
|
/*.fade-leave-active {*/
|
||||||
|
/* transition: opacity 0.3s ease;*/
|
||||||
|
/*}*/
|
||||||
|
|
||||||
|
/*.fade-enter-from,*/
|
||||||
|
/*.fade-leave-to {*/
|
||||||
|
/* opacity: 0;*/
|
||||||
|
/*}*/
|
||||||
619
src/views/About.vue
Normal file
619
src/views/About.vue
Normal file
@@ -0,0 +1,619 @@
|
|||||||
|
<template>
|
||||||
|
<div>
|
||||||
|
<!-- 页面标题 -->
|
||||||
|
<div class="about-index pt-32 pb-20 bg-gradient-to-r from-indigo-900 to-blue-900"
|
||||||
|
data-aos="fade-down"
|
||||||
|
data-aos-duration="800">
|
||||||
|
<div class="container mx-auto px-4">
|
||||||
|
<div class="text-center" data-aos="fade-up" data-aos-duration="800">
|
||||||
|
<h1 class="text-4xl md:text-5xl font-bold text-white mb-4">公司介绍</h1>
|
||||||
|
<p class="text-xl text-blue-300 max-w-2xl mx-auto">
|
||||||
|
专业、创新、值得信赖的数字化解决方案提供商
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- 关于我们 -->
|
||||||
|
<section class="py-16 md:py-24">
|
||||||
|
<div class="container mx-auto px-4">
|
||||||
|
<div class="grid grid-cols-1 lg:grid-cols-2 gap-16 items-center">
|
||||||
|
<div class="order-2 lg:order-1" data-aos="fade-right" data-aos-duration="800">
|
||||||
|
<SectionTitle
|
||||||
|
subtitle="关于我们"
|
||||||
|
title="我们是上海酉佰佰"
|
||||||
|
/>
|
||||||
|
|
||||||
|
<div class="prose max-w-none text-gray-600 mt-6">
|
||||||
|
<p>
|
||||||
|
上海酉佰佰有限公司成立于2010年，总部位于上海浦东新区，
|
||||||
|
是一家专注于提供企业级数字化解决方案的高新技术企业。
|
||||||
|
</p>
|
||||||
|
<p>
|
||||||
|
公司自成立以来，始终秉承"创新驱动、客户至上"的理念，
|
||||||
|
致力于为企业客户提供从战略咨询到技术实施的一站式服务。
|
||||||
|
</p>
|
||||||
|
<p>
|
||||||
|
我们的团队由行业资深专家和技术精英组成，拥有丰富的行业经验和专业知识，
|
||||||
|
已经帮助超过200家企业完成数字化转型，业务覆盖制造、零售、金融、医疗等多个行业。
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="grid grid-cols-2 gap-6 mt-8">
|
||||||
|
<div class="bg-blue-50 rounded-xl p-5" data-aos="zoom-in" data-aos-delay="200">
|
||||||
|
<h3 class="text-xl font-bold text-gray-900 mb-2">我们的理念</h3>
|
||||||
|
<p class="text-gray-600">
|
||||||
|
大道不孤、众行致远
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
<div class="bg-amber-50 rounded-xl p-5" data-aos="zoom-in" data-aos-delay="300">
|
||||||
|
<h3 class="text-xl font-bold text-gray-900 mb-2">我们的愿景</h3>
|
||||||
|
<p class="text-gray-600">
|
||||||
|
实现研究成果与投资回报的双丰收，成为行业领军机构
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="relative order-1 lg:order-2" data-aos="fade-left" data-aos-duration="800">
|
||||||
|
<Component />
|
||||||
|
<div class="z-50 absolute -bottom-6 -right-6 w-48 h-48 bg-amber-500/20 rounded-full"></div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<!-- 成立背景 -->
|
||||||
|
<section class="py-16 md:py-24 bg-gray-50">
|
||||||
|
<div class="container mx-auto px-4">
|
||||||
|
<SectionTitle
|
||||||
|
title="成立背景"
|
||||||
|
subtitle="我们的起源"
|
||||||
|
align="center"
|
||||||
|
data-aos="fade-up"
|
||||||
|
/>
|
||||||
|
|
||||||
|
<div class="grid grid-cols-1 lg:grid-cols-2 gap-16 items-center mt-12">
|
||||||
|
<div class="order-2 lg:order-1" data-aos="fade-right" data-aos-duration="800">
|
||||||
|
<div class="prose max-w-none text-gray-600">
|
||||||
|
<p>
|
||||||
|
我们公司于2018年3月正式成立，公司实缴资本5000万元人民币，注册于上海南翔经济开发区，办公地址在徐汇区华宜大厦。
|
||||||
|
</p>
|
||||||
|
<p>
|
||||||
|
当前，世界正处于"百年未有之大变局"，从大周期来看，西方文明正经历着从十四世纪到二十世纪达到巅峰后的大衰退期，而中华民族则正处于自明朝以来，七百年的上升期。回顾过去一百年，我国自1921年以来，已经经历了生存、发展两大阶段，目前正处于壮大阶段的准备期。对于2030年之后的市场，我们充满信心，所以，未来几年正是黎明前的黑暗，大战前的沉寂，是我们深耕世界政治经济、产业链和企业研究的黄金时期。
|
||||||
|
</p>
|
||||||
|
<p>
|
||||||
|
秉着"大道不孤、众行致远"的理念，我们毅然决定顺应时代潮流，把握时代机遇，组建一支满怀热情、激情、力量和毅力的研究和投资军队，在市场上奋力拼搏，创造属于我们的辉煌！
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
</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">
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<!-- 公司目标 -->
|
||||||
|
<section class="py-16 md:py-24">
|
||||||
|
<div class="container mx-auto px-4">
|
||||||
|
<SectionTitle
|
||||||
|
title="公司目标"
|
||||||
|
subtitle="我们的方向"
|
||||||
|
align="center"
|
||||||
|
data-aos="fade-up"
|
||||||
|
/>
|
||||||
|
|
||||||
|
<div class="grid grid-cols-1 lg:grid-cols-2 gap-16 items-center mt-12">
|
||||||
|
<div class="order-2 lg:order-2" data-aos="fade-left" data-aos-duration="800">
|
||||||
|
<div class="prose max-w-none text-gray-600">
|
||||||
|
<p>
|
||||||
|
我们公司于2018年3月正式成立，公司实缴资本5000万元人民币，注册于上海南翔经济开发区，办公地址在徐汇区华宜大厦。
|
||||||
|
</p>
|
||||||
|
<p>
|
||||||
|
当前，世界正处于"百年未有之大变局"，从大周期来看，西方文明正经历着从十四世纪到二十世纪达到巅峰后的大衰退期，而中华民族则正处于自明朝以来，七百年的上升期。回顾过去一百年，我国自1921年以来，已经经历了生存、发展两大阶段，目前正处于壮大阶段的准备期。对于2030年之后的市场，我们充满信心，所以，未来几年正是黎明前的黑暗，大战前的沉寂，是我们深耕世界政治经济、产业链和企业研究的黄金时期。
|
||||||
|
</p>
|
||||||
|
<p>
|
||||||
|
秉着"大道不孤、众行致远"的理念，我们毅然决定顺应时代潮流，把握时代机遇，组建一支满怀热情、激情、力量和毅力的研究和投资军队，在市场上奋力拼搏，创造属于我们的辉煌！
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
</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">
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8 mt-16">
|
||||||
|
<div
|
||||||
|
class="bg-white rounded-xl shadow-sm p-6 border border-gray-100 transform transition-all duration-300 hover:-translate-y-2 hover:shadow-lg"
|
||||||
|
data-aos="fade-up" data-aos-delay="100">
|
||||||
|
<div class="w-14 h-14 rounded-full bg-blue-100 flex items-center justify-center mb-6">
|
||||||
|
<i class="fas fa-rocket text-blue-600 text-2xl"></i>
|
||||||
|
</div>
|
||||||
|
<h3 class="text-xl font-bold text-gray-900 mb-3">技术创新</h3>
|
||||||
|
<p class="text-gray-600">
|
||||||
|
持续投入研发，保持技术领先地位，每年推出至少3项创新解决方案，引领行业发展方向。
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div
|
||||||
|
class="bg-white rounded-xl shadow-sm p-6 border border-gray-100 transform transition-all duration-300 hover:-translate-y-2 hover:shadow-lg"
|
||||||
|
data-aos="fade-up" data-aos-delay="200">
|
||||||
|
<div class="w-14 h-14 rounded-full bg-amber-100 flex items-center justify-center mb-6">
|
||||||
|
<i class="fas fa-users text-amber-600 text-2xl"></i>
|
||||||
|
</div>
|
||||||
|
<h3 class="text-xl font-bold text-gray-900 mb-3">客户服务</h3>
|
||||||
|
<p class="text-gray-600">
|
||||||
|
建立完善的客户服务体系，客户满意度保持在95%以上，成为客户首选的数字化转型合作伙伴。
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div
|
||||||
|
class="bg-white rounded-xl shadow-sm p-6 border border-gray-100 transform transition-all duration-300 hover:-translate-y-2 hover:shadow-lg"
|
||||||
|
data-aos="fade-up" data-aos-delay="300">
|
||||||
|
<div class="w-14 h-14 rounded-full bg-indigo-100 flex items-center justify-center mb-6">
|
||||||
|
<i class="fas fa-globe text-indigo-600 text-2xl"></i>
|
||||||
|
</div>
|
||||||
|
<h3 class="text-xl font-bold text-gray-900 mb-3">市场拓展</h3>
|
||||||
|
<p class="text-gray-600">
|
||||||
|
三年内将业务覆盖全国主要城市，并逐步拓展国际市场，成为具有全球影响力的数字化服务提供商。
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<!-- 发展历程 -->
|
||||||
|
<section class="py-16 md:py-24 bg-gray-50">
|
||||||
|
<div class="container mx-auto px-4">
|
||||||
|
<SectionTitle
|
||||||
|
title="发展历程"
|
||||||
|
subtitle="一路成长"
|
||||||
|
align="center"
|
||||||
|
description="回顾上海酉佰佰发展中的重要里程碑"
|
||||||
|
data-aos="fade-up"
|
||||||
|
/>
|
||||||
|
|
||||||
|
<div class="relative mt-16">
|
||||||
|
<!-- 时间线 -->
|
||||||
|
<div class="absolute left-1/2 transform -translate-x-1/2 h-full w-0.5 bg-gray-200 hidden lg:block"></div>
|
||||||
|
|
||||||
|
<div class="space-y-8 lg:space-y-12 max-w-4xl mx-auto">
|
||||||
|
<div
|
||||||
|
v-for="(milestone, index) in milestones"
|
||||||
|
:key="index"
|
||||||
|
:class="['flex flex-col lg:flex-row items-center', index % 2 === 0 ? 'lg:flex-row-reverse' : '']"
|
||||||
|
:data-aos="index % 2 === 0 ? 'fade-left' : 'fade-right'"
|
||||||
|
:data-aos-delay="index * 100"
|
||||||
|
>
|
||||||
|
<div :class="['lg:w-5/12 p-6', index % 2 === 0 ? 'lg:pr-12' : 'lg:pl-12']">
|
||||||
|
<div class="bg-white rounded-xl shadow-sm p-6 border border-gray-100">
|
||||||
|
<div class="text-sm font-medium text-amber-600">{{ milestone.date }}</div>
|
||||||
|
<h3 class="text-xl font-bold mt-2 text-gray-900">{{ milestone.title }}</h3>
|
||||||
|
<p class="mt-3 text-gray-600">{{ milestone.description }}</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="hidden lg:flex w-2/12 justify-center">
|
||||||
|
<div
|
||||||
|
class="w-16 h-16 rounded-full bg-white border-4 border-amber-500 flex items-center justify-center relative z-10">
|
||||||
|
<i :class="milestone.icon" class="text-amber-600 text-xl"></i>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div :class="['lg:w-5/12 p-6', index % 2 === 0 ? 'lg:pl-12' : 'lg:pr-12']">
|
||||||
|
<!-- 替换为实际图片 -->
|
||||||
|
<img v-if="milestone.image" :src="`@/assets/images/milestone_${index + 1}.jpg`" alt="里程碑图片"
|
||||||
|
class="rounded-xl overflow-hidden aspect-video object-cover">
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<!-- 公司文化 -->
|
||||||
|
<section class="py-16 md:py-24">
|
||||||
|
<div class="container mx-auto px-4">
|
||||||
|
<div class="max-w-3xl mx-auto text-center">
|
||||||
|
<SectionTitle
|
||||||
|
title="公司文化"
|
||||||
|
subtitle="我们的核心价值观"
|
||||||
|
align="center"
|
||||||
|
data-aos="fade-up"
|
||||||
|
/>
|
||||||
|
|
||||||
|
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8 mt-16">
|
||||||
|
|
||||||
|
<div v-for="(value, index) in culturalValues" :key="index"
|
||||||
|
class="bg-white rounded-xl shadow-sm p-6 border border-gray-100 transform transition-all duration-300 hover:-translate-y-2 hover:shadow-lg"
|
||||||
|
data-aos="fade-up" :data-aos-delay="index * 100">
|
||||||
|
<div class="w-14 h-14 rounded-full flex items-center justify-center mb-6" :class="value.iconBgClass">
|
||||||
|
<i :class="value.icon" class="text-2xl"></i>
|
||||||
|
</div>
|
||||||
|
<h3 class="text-xl font-bold text-gray-900 mb-3">{{ value.title }}</h3>
|
||||||
|
<p class="text-gray-600">
|
||||||
|
{{ value.description }}
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<!-- 业务范围 -->
|
||||||
|
<section class="py-16 md:py-24 bg-gray-50">
|
||||||
|
<div class="container mx-auto px-4">
|
||||||
|
<SectionTitle
|
||||||
|
title="业务范围"
|
||||||
|
subtitle="我们的服务"
|
||||||
|
align="center"
|
||||||
|
data-aos="fade-up"
|
||||||
|
/>
|
||||||
|
|
||||||
|
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8 mt-16">
|
||||||
|
<!-- 替换ServiceCard为自定义组件 -->
|
||||||
|
<div v-for="(service, index) in services" :key="service.id"
|
||||||
|
class="bg-white rounded-xl shadow-sm p-6 border border-gray-100 transform transition-all duration-300 hover:-translate-y-2 hover:shadow-lg"
|
||||||
|
data-aos="fade-up" :data-aos-delay="index * 100">
|
||||||
|
<div class="w-14 h-14 rounded-full flex items-center justify-center mb-6" :class="service.iconBg">
|
||||||
|
<i :class="service.icon" class="text-2xl"></i>
|
||||||
|
</div>
|
||||||
|
<h3 class="text-xl font-bold text-gray-900 mb-3">{{ service.title }}</h3>
|
||||||
|
<p class="text-gray-600">
|
||||||
|
{{ service.description }}
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<!-- 团队介绍 -->
|
||||||
|
<section class="py-16 md:py-24">
|
||||||
|
<div class="container mx-auto px-4">
|
||||||
|
<SectionTitle
|
||||||
|
title="核心团队"
|
||||||
|
subtitle="专业的团队是我们的基石"
|
||||||
|
align="center"
|
||||||
|
data-aos="fade-up"
|
||||||
|
/>
|
||||||
|
|
||||||
|
<div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-8 mt-16">
|
||||||
|
<TeamMemberCard
|
||||||
|
v-for="(member, index) in teamMembers"
|
||||||
|
:key="member.id"
|
||||||
|
:name="member.name"
|
||||||
|
:position="member.position"
|
||||||
|
:avatar="member.avatar"
|
||||||
|
:description="member.description"
|
||||||
|
:social-links="member.socialLinks"
|
||||||
|
data-aos="fade-up" :data-aos-delay="index * 100"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<!-- 联系我们 -->
|
||||||
|
<section class="py-16 md:py-24">
|
||||||
|
<div class="container mx-auto px-4">
|
||||||
|
<div class="bg-gradient-to-r from-indigo-900 to-blue-900 rounded-2xl overflow-hidden" data-aos="fade-up">
|
||||||
|
<div class="grid grid-cols-1 lg:grid-cols-2">
|
||||||
|
<div class="p-8 md:px-12 md:py-16 lg:py-20">
|
||||||
|
<h2 class="text-3xl font-bold text-white mb-6" data-aos="fade-up" data-aos-delay="100">联系我们</h2>
|
||||||
|
<p class="text-blue-200 mb-8" data-aos="fade-up" data-aos-delay="150">
|
||||||
|
无论您有任何问题或需求，我们都期待与您取得联系。
|
||||||
|
填写下方表单，我们将尽快回复您。
|
||||||
|
</p>
|
||||||
|
|
||||||
|
<form class="space-y-6">
|
||||||
|
<div data-aos="fade-up" data-aos-delay="200">
|
||||||
|
<label for="name" class="block text-sm font-medium text-blue-200 mb-1">姓名</label>
|
||||||
|
<input type="text" id="name" name="name"
|
||||||
|
class="w-full px-4 py-2 rounded-lg border border-blue-200 focus:outline-none focus:ring-2 focus:ring-blue-400 bg-blue-900/50 text-white"
|
||||||
|
placeholder="请输入您的姓名">
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div data-aos="fade-up" data-aos-delay="250">
|
||||||
|
<label for="email" class="block text-sm font-medium text-blue-200 mb-1">邮箱</label>
|
||||||
|
<input type="email" id="email" name="email"
|
||||||
|
class="w-full px-4 py-2 rounded-lg border border-blue-200 focus:outline-none focus:ring-2 focus:ring-blue-400 bg-blue-900/50 text-white"
|
||||||
|
placeholder="请输入您的邮箱">
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div data-aos="fade-up" data-aos-delay="300">
|
||||||
|
<label for="phone" class="block text-sm font-medium text-blue-200 mb-1">电话</label>
|
||||||
|
<input type="tel" id="phone" name="phone"
|
||||||
|
class="w-full px-4 py-2 rounded-lg border border-blue-200 focus:outline-none focus:ring-2 focus:ring-blue-400 bg-blue-900/50 text-white"
|
||||||
|
placeholder="请输入您的电话">
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div data-aos="fade-up" data-aos-delay="350">
|
||||||
|
<label for="message" class="block text-sm font-medium text-blue-200 mb-1">留言内容</label>
|
||||||
|
<textarea id="message" name="message" rows="4"
|
||||||
|
class="w-full px-4 py-2 rounded-lg border border-blue-200 focus:outline-none focus:ring-2 focus:ring-blue-400 bg-blue-900/50 text-white"
|
||||||
|
placeholder="请输入您的留言内容"></textarea>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<button type="submit"
|
||||||
|
class="bg-white text-blue-900 hover:bg-blue-200 transition-colors font-medium py-2 px-6 rounded-lg flex items-center"
|
||||||
|
data-aos="fade-up" data-aos-delay="400">
|
||||||
|
<i class="fas fa-paper-plane mr-2"></i> 提交
|
||||||
|
</button>
|
||||||
|
</form>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="relative h-64 lg:h-auto">
|
||||||
|
|
||||||
|
<img src="../assets/images/join0001.jpeg" alt="联系我们"
|
||||||
|
class="absolute inset-0 w-full h-full object-cover">
|
||||||
|
<div class="absolute inset-0 bg-blue-900/50"></div>
|
||||||
|
<div class="absolute inset-0 flex flex-col justify-center p-8 md:px-12 md:py-16 lg:py-20 text-white">
|
||||||
|
<div class="mb-8" data-aos="fade-up" data-aos-delay="100">
|
||||||
|
<h3 class="text-xl font-bold mb-4">公司地址</h3>
|
||||||
|
<p class="text-blue-200">上海市浦东新区张江高科技园区博云路2号浦软大厦</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="mb-8" data-aos="fade-up" data-aos-delay="150">
|
||||||
|
<h3 class="text-xl font-bold mb-4">联系方式</h3>
|
||||||
|
<div class="space-y-3">
|
||||||
|
<div class="flex items-center">
|
||||||
|
<i class="fas fa-phone mr-3 text-blue-300"></i>
|
||||||
|
<span>400-888-9999</span>
|
||||||
|
</div>
|
||||||
|
<div class="flex items-center">
|
||||||
|
<i class="fas fa-envelope mr-3 text-blue-300"></i>
|
||||||
|
<span>info@shyoubai.com</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div data-aos="fade-up" data-aos-delay="200">
|
||||||
|
<h3 class="text-xl font-bold mb-4">工作时间</h3>
|
||||||
|
<p class="text-blue-200">周一至周五: 9:00 - 18:00</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script setup>
|
||||||
|
import SectionTitle from '@/components/ui/SectionTitle.vue'
|
||||||
|
import Card from '@/components/ui/Card.vue'
|
||||||
|
import Component from '@/components/ui/Company.vue'
|
||||||
|
import TeamMemberCard from '@/components/ui/TeamMember.vue'
|
||||||
|
|
||||||
|
const milestones = [
|
||||||
|
{
|
||||||
|
date: '2018年3月',
|
||||||
|
title: '公司创立',
|
||||||
|
description: '在上海南翔经济开发区正式注册成立，实缴资本5000万元人民币',
|
||||||
|
icon: 'fas fa-building'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
date: '2019年',
|
||||||
|
title: '战略布局',
|
||||||
|
description: '完成初期团队组建，确立世界政治经济与产业链研究为核心方向',
|
||||||
|
icon: 'fas fa-chess'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
date: '2020-2022年',
|
||||||
|
title: '深耕研究',
|
||||||
|
description: '建立完整的研究体系，在全球宏观经济和产业升级领域形成专业洞见',
|
||||||
|
icon: 'fas fa-search-dollar'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
date: '2023年',
|
||||||
|
title: '投资布局',
|
||||||
|
description: '基于研究成果启动战略性投资，把握百年变局中的历史性机遇',
|
||||||
|
icon: 'fas fa-chart-line'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
date: '2025年(预期)',
|
||||||
|
title: '规模扩张',
|
||||||
|
description: '研究团队突破百人规模，形成具有国际影响力的研究智库',
|
||||||
|
icon: 'fas fa-expand'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
date: '2030年(愿景)',
|
||||||
|
title: '战略收获期',
|
||||||
|
description: '实现研究成果与投资回报的双丰收，成为行业领军机构',
|
||||||
|
icon: 'fas fa-trophy'
|
||||||
|
}
|
||||||
|
]
|
||||||
|
|
||||||
|
const culturalValues = [
|
||||||
|
{
|
||||||
|
title: '大道不孤',
|
||||||
|
icon: 'fas fa-mountain',
|
||||||
|
description: '秉持历史发展规律，把握文明兴替大周期，做时代趋势的同行者',
|
||||||
|
iconBgClass: 'bg-blue-50 text-blue-600'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: '深研致远',
|
||||||
|
icon: 'fas fa-microscope',
|
||||||
|
description: '深耕世界政治经济研究，以专业洞见创造长期价值',
|
||||||
|
iconBgClass: 'bg-emerald-50 text-emerald-600'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: '众行至远',
|
||||||
|
icon: 'fas fa-people-group',
|
||||||
|
description: '汇聚志同道合者，构建研究投资共同体，共享发展成果',
|
||||||
|
iconBgClass: 'bg-purple-50 text-purple-600'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: '韧性成长',
|
||||||
|
icon: 'fas fa-oak-leaf',
|
||||||
|
description: '保持战略定力，在周期波动中实现稳健持续发展',
|
||||||
|
iconBgClass: 'bg-amber-50 text-amber-600'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: '家国情怀',
|
||||||
|
icon: 'fas fa-landmark',
|
||||||
|
description: '将个人发展融入民族复兴，以专业能力服务国家战略',
|
||||||
|
iconBgClass: 'bg-red-50 text-red-600'
|
||||||
|
}
|
||||||
|
]
|
||||||
|
|
||||||
|
/*const services = [
|
||||||
|
{
|
||||||
|
id: 1,
|
||||||
|
title: '数字化战略咨询',
|
||||||
|
description: '基于企业现状和未来发展目标，制定全面的数字化转型战略规划',
|
||||||
|
icon: 'fas fa-chart-line',
|
||||||
|
iconBg: 'bg-blue-50 text-blue-600'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: 2,
|
||||||
|
title: '企业应用开发',
|
||||||
|
description: '定制化企业管理系统、移动应用和Web应用开发，提升工作效率',
|
||||||
|
icon: 'fas fa-code',
|
||||||
|
iconBg: 'bg-amber-50 text-amber-600'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: 3,
|
||||||
|
title: '数据智能分析',
|
||||||
|
description: '基于大数据和AI技术，提供数据分析、商业智能和预测模型服务',
|
||||||
|
icon: 'fas fa-database',
|
||||||
|
iconBg: 'bg-indigo-50 text-indigo-600'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: 4,
|
||||||
|
title: '云计算服务',
|
||||||
|
description: '提供云基础设施建设、迁移和管理服务，降低IT成本，提升灵活性',
|
||||||
|
icon: 'fas fa-cloud',
|
||||||
|
iconBg: 'bg-green-50 text-green-600'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: 5,
|
||||||
|
title: '用户体验设计',
|
||||||
|
description: '专注于产品界面设计、交互设计和用户体验优化，提升产品竞争力',
|
||||||
|
icon: 'fas fa-paint-brush',
|
||||||
|
iconBg: 'bg-purple-50 text-purple-600'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: 6,
|
||||||
|
title: 'IT运维服务',
|
||||||
|
description: '提供全方位的IT基础设施运维和管理服务，保障系统稳定运行',
|
||||||
|
icon: 'fas fa-cogs',
|
||||||
|
iconBg: 'bg-red-50 text-red-600'
|
||||||
|
},
|
||||||
|
]*/
|
||||||
|
const services = [
|
||||||
|
{
|
||||||
|
id: 1,
|
||||||
|
title: '行业信息咨询',
|
||||||
|
description: '提供深度行业分析报告、竞争格局研究和市场进入策略咨询',
|
||||||
|
icon: 'fas fa-chart-pie',
|
||||||
|
iconBg: 'bg-blue-50 text-blue-600'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: 2,
|
||||||
|
title: '市场调查与分析',
|
||||||
|
description: '执行专业的定量与定性市场调研，提供消费者洞察和商业决策支持',
|
||||||
|
icon: 'fas fa-search-dollar',
|
||||||
|
iconBg: 'bg-amber-50 text-amber-600'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: 3,
|
||||||
|
title: '社会经济咨询',
|
||||||
|
description: '开展区域经济研究、政策影响评估和社会发展趋势分析',
|
||||||
|
icon: 'fas fa-landmark',
|
||||||
|
iconBg: 'bg-indigo-50 text-indigo-600'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: 4,
|
||||||
|
title: '商业数据处理',
|
||||||
|
description: '提供数据清洗、统计分析、可视化呈现等全流程数据服务',
|
||||||
|
icon: 'fas fa-database',
|
||||||
|
iconBg: 'bg-green-50 text-green-600'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: 5,
|
||||||
|
title: '企业管理咨询',
|
||||||
|
description: '涵盖战略规划、组织优化、运营提升等全方位管理解决方案',
|
||||||
|
icon: 'fas fa-briefcase',
|
||||||
|
iconBg: 'bg-purple-50 text-purple-600'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: 6,
|
||||||
|
title: '商业策划服务',
|
||||||
|
description: '提供项目可行性研究、商业计划书编制及投资决策支持',
|
||||||
|
icon: 'fas fa-lightbulb',
|
||||||
|
iconBg: 'bg-red-50 text-red-600'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: 7,
|
||||||
|
title: '政策研究咨询',
|
||||||
|
description: '开展政策解读、合规性分析和政策红利应用方案设计',
|
||||||
|
icon: 'fas fa-file-contract',
|
||||||
|
iconBg: 'bg-teal-50 text-teal-600'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: 8,
|
||||||
|
title: '投资决策咨询',
|
||||||
|
description: '提供投资项目评估、风险分析和收益预测专业服务',
|
||||||
|
icon: 'fas fa-coins',
|
||||||
|
iconBg: 'bg-orange-50 text-orange-600'
|
||||||
|
}
|
||||||
|
]
|
||||||
|
|
||||||
|
const teamMembers = [
|
||||||
|
{
|
||||||
|
id: 1,
|
||||||
|
name: '张明',
|
||||||
|
position: '创始人兼CEO',
|
||||||
|
avatar: '@/assets/images/team/member1.jpg',
|
||||||
|
description: '拥有20年IT行业经验，曾任职于多家知名科技企业，专注于企业数字化转型战略',
|
||||||
|
socialLinks: [
|
||||||
|
{icon: 'fab fa-linkedin', url: '#'},
|
||||||
|
{icon: 'fab fa-twitter', url: '#'}
|
||||||
|
]
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: 2,
|
||||||
|
name: '李婷',
|
||||||
|
position: '技术总监',
|
||||||
|
avatar: '@/assets/images/team/member2.jpg',
|
||||||
|
description: '15年软件开发和团队管理经验，精通云计算、大数据和人工智能技术',
|
||||||
|
socialLinks: [
|
||||||
|
{icon: 'fab fa-github', url: '#'},
|
||||||
|
{icon: 'fab fa-linkedin', url: '#'}
|
||||||
|
]
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: 3,
|
||||||
|
name: '王强',
|
||||||
|
position: '销售总监',
|
||||||
|
avatar: '@/assets/images/team/member3.jpg',
|
||||||
|
description: '10年企业服务销售经验，擅长为客户提供量身定制的数字化解决方案',
|
||||||
|
socialLinks: [
|
||||||
|
{icon: 'fab fa-linkedin', url: '#'},
|
||||||
|
{icon: 'fab fa-weixin', url: '#'}
|
||||||
|
]
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: 4,
|
||||||
|
name: '陈静',
|
||||||
|
position: '设计总监',
|
||||||
|
avatar: '@/assets/images/team/member4.jpg',
|
||||||
|
description: '8年UI/UX设计经验，曾主导多个大型企业应用和消费产品的设计工作',
|
||||||
|
socialLinks: [
|
||||||
|
{icon: 'fab fa-dribbble', url: '#'},
|
||||||
|
{icon: 'fab fa-behance', url: '#'}
|
||||||
|
]
|
||||||
|
},
|
||||||
|
]
|
||||||
|
|
||||||
|
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style lang="scss" scoped>
|
||||||
|
</style>
|
||||||
402
src/views/Careers.vue
Normal file
402
src/views/Careers.vue
Normal file
@@ -0,0 +1,402 @@
|
|||||||
|
<template>
|
||||||
|
<div>
|
||||||
|
<!-- 页面标题 -->
|
||||||
|
<div class="pt-32 pb-20 bg-gradient-to-r from-indigo-700 to-blue-900">
|
||||||
|
<div class="container mx-auto px-4">
|
||||||
|
<div class="text-center">
|
||||||
|
<h1 class="text-4xl md:text-5xl font-bold text-white mb-4">加入我们</h1>
|
||||||
|
<p class="text-xl text-blue-300 max-w-2xl mx-auto">
|
||||||
|
与优秀团队一起成长，创造改变世界的价值
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- 职位列表 -->
|
||||||
|
<section class="py-16 md:py-24">
|
||||||
|
<div class="container mx-auto px-4">
|
||||||
|
<div class="grid grid-cols-1 lg:grid-cols-3 gap-8">
|
||||||
|
<div class="lg:col-span-1">
|
||||||
|
<SectionTitle
|
||||||
|
title="开放职位"
|
||||||
|
subtitle="寻找卓越人才"
|
||||||
|
/>
|
||||||
|
|
||||||
|
<div class="bg-gray-50 rounded-xl p-6 mt-10">
|
||||||
|
<h3 class="font-medium text-gray-900 mb-4">职位筛选</h3>
|
||||||
|
<div class="space-y-3">
|
||||||
|
<div class="flex items-center">
|
||||||
|
<input id="filter-all" type="radio" name="job-type" class="h-4 w-4 text-indigo-600" checked>
|
||||||
|
<label for="filter-all" class="ml-2 text-gray-700">所有职位</label>
|
||||||
|
</div>
|
||||||
|
<div class="flex items-center">
|
||||||
|
<input id="filter-tech" type="radio" name="job-type" class="h-4 w-4 text-indigo-600">
|
||||||
|
<label for="filter-tech" class="ml-2 text-gray-700">技术类</label>
|
||||||
|
</div>
|
||||||
|
<div class="flex items-center">
|
||||||
|
<input id="filter-product" type="radio" name="job-type" class="h-4 w-4 text-indigo-600">
|
||||||
|
<label for="filter-product" class="ml-2 text-gray-700">产品类</label>
|
||||||
|
</div>
|
||||||
|
<div class="flex items-center">
|
||||||
|
<input id="filter-design" type="radio" name="job-type" class="h-4 w-4 text-indigo-600">
|
||||||
|
<label for="filter-design" class="ml-2 text-gray-700">设计类</label>
|
||||||
|
</div>
|
||||||
|
<div class="flex items-center">
|
||||||
|
<input id="filter-business" type="radio" name="job-type" class="h-4 w-4 text-indigo-600">
|
||||||
|
<label for="filter-business" class="ml-2 text-gray-700">市场类</label>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="bg-amber-50 rounded-xl p-6 mt-8">
|
||||||
|
<h3 class="font-medium text-gray-900 mb-4">加入我们的优势</h3>
|
||||||
|
<ul class="space-y-3">
|
||||||
|
<li v-for="(benefit, index) in benefits" :key="index" class="flex items-start">
|
||||||
|
<i class="fas fa-check-circle text-amber-600 mt-1 mr-2"></i>
|
||||||
|
<span class="text-gray-700">{{ benefit }}</span>
|
||||||
|
</li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="lg:col-span-2">
|
||||||
|
<div class="flex items-center justify-between mb-8">
|
||||||
|
<h2 class="text-2xl font-bold text-gray-900">
|
||||||
|
<span class="text-amber-600">12</span> 个开放职位
|
||||||
|
</h2>
|
||||||
|
<div class="relative w-64">
|
||||||
|
<input type="text" placeholder="搜索职位..." class="w-full pl-10 pr-4 py-2 bg-gray-50 rounded-lg border border-gray-200 focus:outline-none focus:ring-2 focus:ring-indigo-200 focus:border-transparent">
|
||||||
|
<i class="fas fa-search absolute left-3 top-2.5 text-gray-400"></i>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="space-y-6">
|
||||||
|
<div
|
||||||
|
v-for="(job, index) in jobs"
|
||||||
|
:key="index"
|
||||||
|
class="bg-white rounded-xl shadow-sm border border-gray-200 hover:border-indigo-200 hover:shadow-md transition-all duration-300"
|
||||||
|
>
|
||||||
|
<div class="p-6">
|
||||||
|
<div class="flex flex-col md:flex-row justify-between md:items-center">
|
||||||
|
<div>
|
||||||
|
<h3 class="text-xl font-bold text-gray-900">{{ job.title }}</h3>
|
||||||
|
<div class="mt-1 flex flex-wrap gap-2">
|
||||||
|
<span class="text-sm bg-blue-50 text-blue-700 px-3 py-1 rounded-full">{{ job.department }}</span>
|
||||||
|
<span class="text-sm bg-amber-50 text-amber-700 px-3 py-1 rounded-full">{{ job.type }}</span>
|
||||||
|
<span class="text-sm bg-gray-50 text-gray-700 px-3 py-1 rounded-full">{{ job.location }}</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<button
|
||||||
|
class="mt-4 md:mt-0 px-5 py-2.5 text-white rounded-lg font-medium transition-colors duration-300"
|
||||||
|
:class="job.featured ? 'bg-amber-600 hover:bg-amber-700' : 'bg-indigo-600 hover:bg-indigo-700'"
|
||||||
|
>
|
||||||
|
立即申请
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="mt-6 flex items-center text-sm text-gray-500">
|
||||||
|
<span>发布日期: {{ job.date }}</span>
|
||||||
|
<span class="mx-2">•</span>
|
||||||
|
<span>{{ job.salary }}</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="border-t border-gray-100 px-6 py-4 flex justify-between items-center">
|
||||||
|
<div class="flex items-center">
|
||||||
|
<div class="w-8 h-8 rounded-md bg-indigo-50 flex items-center justify-center text-indigo-600">
|
||||||
|
<i class="fas fa-briefcase"></i>
|
||||||
|
</div>
|
||||||
|
<span class="ml-2 text-sm text-gray-600">{{ job.experience }}经验</span>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<a href="#" class="text-indigo-600 hover:text-indigo-800 flex items-center text-sm">
|
||||||
|
查看详情
|
||||||
|
<i class="fas fa-arrow-right ml-1 text-xs"></i>
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<!-- 招聘流程 -->
|
||||||
|
<section class="py-16 md:py-24 bg-gray-50">
|
||||||
|
<div class="container mx-auto px-4">
|
||||||
|
<SectionTitle
|
||||||
|
title="招聘流程"
|
||||||
|
subtitle="透明高效"
|
||||||
|
description="我们简化招聘流程，让候选人拥有清晰明确的体验"
|
||||||
|
align="center"
|
||||||
|
/>
|
||||||
|
|
||||||
|
<div class="mt-16">
|
||||||
|
<div class="flex justify-center">
|
||||||
|
<div class="relative">
|
||||||
|
<!-- 流程线 -->
|
||||||
|
<div class="absolute top-14 left-0 right-0 h-1 bg-gray-200 mx-auto z-0 w-4/5" style="left: 10%;"></div>
|
||||||
|
|
||||||
|
<div class="grid grid-cols-1 md:grid-cols-5 gap-8 relative z-10">
|
||||||
|
<div v-for="(step, index) in recruitmentSteps" :key="index" class="text-center">
|
||||||
|
<div class="w-20 h-20 rounded-full flex items-center justify-center mx-auto text-xl bg-white border-4 border-gray-50 shadow-md mb-4"
|
||||||
|
:class="index === 0 ? 'text-blue-500 border-blue-100' :
|
||||||
|
index === 1 ? 'text-amber-500 border-amber-100' :
|
||||||
|
index === 2 ? 'text-green-500 border-green-100' :
|
||||||
|
index === 3 ? 'text-purple-500 border-purple-100' :
|
||||||
|
'text-indigo-500 border-indigo-100'">
|
||||||
|
<i :class="step.icon"></i>
|
||||||
|
</div>
|
||||||
|
<h3 class="font-bold text-lg text-gray-900">{{ step.title }}</h3>
|
||||||
|
<p class="text-gray-600 text-sm mt-2">{{ step.description }}</p>
|
||||||
|
<div class="text-xs mt-2 font-medium text-gray-500">
|
||||||
|
{{ step.duration }}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<!-- 员工福利 -->
|
||||||
|
<section class="py-16 md:py-24">
|
||||||
|
<div class="container mx-auto px-4">
|
||||||
|
<SectionTitle
|
||||||
|
title="员工福利"
|
||||||
|
subtitle="关怀每一位伙伴"
|
||||||
|
description="我们为员工提供全方位的福利保障和贴心关怀"
|
||||||
|
align="center"
|
||||||
|
/>
|
||||||
|
|
||||||
|
<div class="grid grid-cols-2 md:grid-cols-4 gap-6 mt-16">
|
||||||
|
<div v-for="(benefit, index) in employeeBenefits" :key="index">
|
||||||
|
<Card no-border hover-effect class="h-full">
|
||||||
|
<template #icon>
|
||||||
|
<div class="w-16 h-16 rounded-lg mx-auto mb-6 flex items-center justify-center text-2xl"
|
||||||
|
:class="benefit.iconBgClass">
|
||||||
|
<i :class="benefit.icon"></i>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
<h3 class="text-lg font-bold text-center text-gray-900">{{ benefit.title }}</h3>
|
||||||
|
<p class="text-center text-gray-600 mt-2">
|
||||||
|
{{ benefit.description }}
|
||||||
|
</p>
|
||||||
|
</Card>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<!-- 校招计划 -->
|
||||||
|
<section class="py-16 md:py-24 bg-gradient-to-r from-indigo-900 to-blue-900 text-white">
|
||||||
|
<div class="container mx-auto px-4">
|
||||||
|
<div class="max-w-4xl mx-auto">
|
||||||
|
<div class="flex flex-col md:flex-row items-center">
|
||||||
|
<div class="md:w-2/5 mb-10 md:mb-0">
|
||||||
|
<div class="bg-gradient-to-br from-blue-500 to-indigo-600 p-10 rounded-2xl flex items-center justify-center">
|
||||||
|
<i class="fas fa-user-graduate text-6xl text-white opacity-40"></i>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="md:w-3/5 md:pl-12">
|
||||||
|
<SectionTitle
|
||||||
|
title="校园招聘计划"
|
||||||
|
subtitle="新生力量"
|
||||||
|
align="left"
|
||||||
|
class="text-white"
|
||||||
|
/>
|
||||||
|
|
||||||
|
<p class="text-xl text-blue-200 mb-6">
|
||||||
|
我们为应届毕业生和在校学生提供专属的职业发展计划
|
||||||
|
</p>
|
||||||
|
|
||||||
|
<ul class="space-y-4 mb-8">
|
||||||
|
<li v-for="(item, index) in campusPlan" :key="index" class="flex items-start">
|
||||||
|
<div class="w-6 h-6 rounded-full bg-blue-500 flex items-center justify-center text-white text-xs mr-3">
|
||||||
|
{{ index+1 }}
|
||||||
|
</div>
|
||||||
|
<span class="flex-1">{{ item }}</span>
|
||||||
|
</li>
|
||||||
|
</ul>
|
||||||
|
|
||||||
|
<router-link
|
||||||
|
to="/campus"
|
||||||
|
class="inline-flex items-center px-6 py-3 bg-white text-indigo-900 rounded-lg font-medium hover:bg-gray-100 transition-colors"
|
||||||
|
>
|
||||||
|
了解校招计划
|
||||||
|
<i class="fas fa-arrow-right ml-2"></i>
|
||||||
|
</router-link>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script setup>
|
||||||
|
import SectionTitle from '@/components/ui/SectionTitle.vue'
|
||||||
|
import Card from '@/components/ui/Card.vue'
|
||||||
|
|
||||||
|
const benefits = [
|
||||||
|
'富有竞争力的薪资待遇',
|
||||||
|
'全面的福利保障体系',
|
||||||
|
'灵活的工作时间和地点',
|
||||||
|
'专业的职业发展支持',
|
||||||
|
'多元包容的企业文化',
|
||||||
|
'丰厚的绩效奖金和股票期权'
|
||||||
|
]
|
||||||
|
|
||||||
|
const jobs = [
|
||||||
|
{
|
||||||
|
title: '高级前端开发工程师',
|
||||||
|
department: '技术部',
|
||||||
|
type: '全职',
|
||||||
|
location: '上海',
|
||||||
|
date: '2023-07-10',
|
||||||
|
salary: '25K-45K',
|
||||||
|
experience: '5年以上',
|
||||||
|
featured: true
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: 'UI/UX设计师',
|
||||||
|
department: '设计部',
|
||||||
|
type: '全职',
|
||||||
|
location: '上海',
|
||||||
|
date: '2023-07-12',
|
||||||
|
salary: '18K-30K',
|
||||||
|
experience: '3年以上',
|
||||||
|
featured: false
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: '后端开发工程师 (Java方向)',
|
||||||
|
department: '技术部',
|
||||||
|
type: '全职',
|
||||||
|
location: '上海',
|
||||||
|
date: '2023-07-08',
|
||||||
|
salary: '20K-40K',
|
||||||
|
experience: '3年以上',
|
||||||
|
featured: false
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: '产品经理',
|
||||||
|
department: '产品部',
|
||||||
|
type: '全职',
|
||||||
|
location: '北京',
|
||||||
|
date: '2023-07-05',
|
||||||
|
salary: '25K-40K',
|
||||||
|
experience: '5年以上',
|
||||||
|
featured: true
|
||||||
|
}
|
||||||
|
]
|
||||||
|
|
||||||
|
const recruitmentSteps = [
|
||||||
|
{
|
||||||
|
icon: 'fas fa-file-alt',
|
||||||
|
title: '提交申请',
|
||||||
|
description: '在线提交您的简历',
|
||||||
|
duration: '1-3个工作日'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
icon: 'fas fa-phone-alt',
|
||||||
|
title: '简历评估',
|
||||||
|
description: 'HR电话初步沟通',
|
||||||
|
duration: '2-4个工作日'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
icon: 'fas fa-laptop-code',
|
||||||
|
title: '技术面试',
|
||||||
|
description: '专业能力技术评估',
|
||||||
|
duration: '1-2次面试'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
icon: 'fas fa-user-friends',
|
||||||
|
title: '经理面试',
|
||||||
|
description: '团队文化和价值观评估',
|
||||||
|
duration: '1次面试'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
icon: 'fas fa-award',
|
||||||
|
title: '录用通知',
|
||||||
|
description: '发放正式录用offer',
|
||||||
|
duration: '1-2个工作日'
|
||||||
|
}
|
||||||
|
]
|
||||||
|
|
||||||
|
const employeeBenefits = [
|
||||||
|
{
|
||||||
|
title: '薪酬福利',
|
||||||
|
icon: 'fas fa-money-bill-wave',
|
||||||
|
description: '有竞争力的薪资及绩效奖金',
|
||||||
|
iconBgClass: 'bg-green-100 text-green-600'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: '五险一金',
|
||||||
|
icon: 'fas fa-shield-alt',
|
||||||
|
description: '全面的社会保障和住房公积金',
|
||||||
|
iconBgClass: 'bg-blue-100 text-blue-600'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: '带薪休假',
|
||||||
|
icon: 'fas fa-umbrella-beach',
|
||||||
|
description: '灵活的年假、病假及各类假期',
|
||||||
|
iconBgClass: 'bg-amber-100 text-amber-600'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: '健康关怀',
|
||||||
|
icon: 'fas fa-heartbeat',
|
||||||
|
description: '年度体检及补充商业保险',
|
||||||
|
iconBgClass: 'bg-red-100 text-red-600'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: '学习发展',
|
||||||
|
icon: 'fas fa-graduation-cap',
|
||||||
|
description: '专业培训与个人发展基金',
|
||||||
|
iconBgClass: 'bg-purple-100 text-purple-600'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: '弹性工作',
|
||||||
|
icon: 'fas fa-laptop-house',
|
||||||
|
description: '灵活工作时间及远程办公选项',
|
||||||
|
iconBgClass: 'bg-indigo-100 text-indigo-600'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: '团队活动',
|
||||||
|
icon: 'fas fa-users',
|
||||||
|
description: '丰富多彩的团队建设活动',
|
||||||
|
iconBgClass: 'bg-pink-100 text-pink-600'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: '节日福利',
|
||||||
|
icon: 'fas fa-gift',
|
||||||
|
description: '节日礼品及员工关怀礼包',
|
||||||
|
iconBgClass: 'bg-yellow-100 text-yellow-600'
|
||||||
|
}
|
||||||
|
]
|
||||||
|
|
||||||
|
const campusPlan = [
|
||||||
|
'面向应届毕业生的专项培养计划',
|
||||||
|
'技术大牛导师一对一指导',
|
||||||
|
'轮岗实践了解公司业务',
|
||||||
|
'快速成长通道和晋升机会',
|
||||||
|
'应届生专属落户支持',
|
||||||
|
'人才公寓或住房补贴'
|
||||||
|
]
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style scoped>
|
||||||
|
/* 校招计划中的SectionTitle需要调整文字颜色 */
|
||||||
|
.text-white ::v-deep .section-title {
|
||||||
|
color: white;
|
||||||
|
}
|
||||||
|
|
||||||
|
.text-white ::v-deep .section-subtitle {
|
||||||
|
color: #93c5fd;
|
||||||
|
}
|
||||||
|
|
||||||
|
.text-white ::v-deep .section-divider {
|
||||||
|
background: rgba(255,255,255,0.3);
|
||||||
|
}
|
||||||
|
</style>
|
||||||
542
src/views/Features.vue
Normal file
542
src/views/Features.vue
Normal file
@@ -0,0 +1,542 @@
|
|||||||
|
<template>
|
||||||
|
<div>
|
||||||
|
<!-- 页面标题 - 使用公司文化背景图 -->
|
||||||
|
<div
|
||||||
|
class="relative pt-32 pb-20 bg-gradient-to-r from-blue-800 to-indigo-900"
|
||||||
|
data-aos="fade-down"
|
||||||
|
data-aos-duration="800"
|
||||||
|
>
|
||||||
|
<!-- 背景图片 -->
|
||||||
|
<div class="absolute inset-0 z-0">
|
||||||
|
<img
|
||||||
|
src="../assets/images/features-home.png"
|
||||||
|
alt="公司文化背景图"
|
||||||
|
class="w-full h-full object-cover"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="container mx-auto px-4 relative z-10">
|
||||||
|
<div class="text-center">
|
||||||
|
<h1
|
||||||
|
class="text-4xl md:text-5xl font-bold text-white mb-4"
|
||||||
|
data-aos="fade-up"
|
||||||
|
data-aos-delay="200"
|
||||||
|
>
|
||||||
|
公司文化
|
||||||
|
</h1>
|
||||||
|
<p
|
||||||
|
class="text-xl text-blue-100 max-w-2xl mx-auto"
|
||||||
|
data-aos="fade-up"
|
||||||
|
data-aos-delay="300"
|
||||||
|
>
|
||||||
|
以学习驱动成长，以渐进实现卓越
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- 学习文化部分 -->
|
||||||
|
<section class="py-16 md:py-24">
|
||||||
|
<div class="container mx-auto px-4">
|
||||||
|
<SectionTitle
|
||||||
|
title="学习文化"
|
||||||
|
subtitle="研究与投资的持久战"
|
||||||
|
description="保持学习，不断思考是持久战的基础"
|
||||||
|
align="center"
|
||||||
|
data-aos="fade-up"
|
||||||
|
/>
|
||||||
|
|
||||||
|
<div class="grid md:grid-cols-2 gap-12 mt-16">
|
||||||
|
<div class="flex flex-col justify-center">
|
||||||
|
<div class="space-y-6">
|
||||||
|
<div
|
||||||
|
class="flex items-start"
|
||||||
|
data-aos="fade-right"
|
||||||
|
data-aos-delay="100"
|
||||||
|
>
|
||||||
|
<div class="w-12 h-12 rounded-full bg-blue-50 flex items-center justify-center text-blue-600 mr-4 flex-shrink-0">
|
||||||
|
<i class="fas fa-book-open text-xl"></i>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<h3 class="text-xl font-semibold text-gray-800 mb-2">日常学习机制</h3>
|
||||||
|
<p class="text-gray-600">
|
||||||
|
我们建立每日晨读、每周分享、每月专题研讨的学习体系，营造持续学习氛围，让知识更新成为团队习惯。
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div
|
||||||
|
class="flex items-start"
|
||||||
|
data-aos="fade-right"
|
||||||
|
data-aos-delay="200"
|
||||||
|
>
|
||||||
|
<div class="w-12 h-12 rounded-full bg-blue-50 flex items-center justify-center text-blue-600 mr-4 flex-shrink-0">
|
||||||
|
<i class="fas fa-user-graduate text-xl"></i>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<h3 class="text-xl font-semibold text-gray-800 mb-2">深度入职培训</h3>
|
||||||
|
<p class="text-gray-600">
|
||||||
|
新员工将接受为期2个月的系统培训，涵盖行业研究方法、宏观分析框架、企业评估模型等专业内容，建立扎实的知识基础。
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div
|
||||||
|
class="flex items-start"
|
||||||
|
data-aos="fade-right"
|
||||||
|
data-aos-delay="300"
|
||||||
|
>
|
||||||
|
<div class="w-12 h-12 rounded-full bg-blue-50 flex items-center justify-center text-blue-600 mr-4 flex-shrink-0">
|
||||||
|
<i class="fas fa-lightbulb text-xl"></i>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<h3 class="text-xl font-semibold text-gray-800 mb-2">知识共享平台</h3>
|
||||||
|
<p class="text-gray-600">
|
||||||
|
建立内部知识库，汇集行业研究报告、项目复盘总结、方法论工具包等资源，实现知识资产的有效沉淀与共享。
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div
|
||||||
|
class="relative rounded-xl overflow-hidden shadow-lg"
|
||||||
|
data-aos="fade-left"
|
||||||
|
data-aos-delay="400"
|
||||||
|
>
|
||||||
|
<div class="h-full bg-gradient-to-br from-blue-50 to-indigo-50 p-8 flex items-center">
|
||||||
|
<div class="text-center w-full">
|
||||||
|
<div class="mb-8 flex justify-center">
|
||||||
|
<div class="w-20 h-20 rounded-full bg-blue-100 flex items-center justify-center text-blue-600">
|
||||||
|
<i class="fas fa-brain text-3xl"></i>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<h3 class="text-2xl font-bold text-gray-800 mb-4">学习型组织</h3>
|
||||||
|
<p class="text-gray-600 max-w-md mx-auto">
|
||||||
|
我们相信持续学习是保持竞争力的核心，通过系统化的知识管理和培训体系，打造深度思考能力，为长期发展蓄能。
|
||||||
|
</p>
|
||||||
|
<div class="mt-8">
|
||||||
|
<div class="inline-flex items-center px-4 py-2 bg-white border border-blue-200 text-blue-600 rounded-full text-sm font-medium">
|
||||||
|
<i class="fas fa-book mr-2"></i>
|
||||||
|
查看学习资源
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<!-- 团队理念部分：大道不孤、众行致远 -->
|
||||||
|
<section class="py-16 md:py-24">
|
||||||
|
<div class="container mx-auto px-4">
|
||||||
|
<SectionTitle
|
||||||
|
title="团队理念"
|
||||||
|
subtitle="大道不孤，众行致远"
|
||||||
|
description="在酉佰佰，我们坚信真正的成功来自团队协作与共同成长"
|
||||||
|
align="center"
|
||||||
|
data-aos="fade-up"
|
||||||
|
/>
|
||||||
|
|
||||||
|
<div
|
||||||
|
class="bg-white rounded-2xl shadow-xl overflow-hidden mt-16"
|
||||||
|
data-aos="fade-up"
|
||||||
|
data-aos-delay="200"
|
||||||
|
>
|
||||||
|
<div class="grid md:grid-cols-2">
|
||||||
|
<!-- 左侧：理念详情 -->
|
||||||
|
<div class="p-8 md:p-12 bg-gradient-to-br from-blue-50 to-indigo-50">
|
||||||
|
<div class="flex items-center mb-8">
|
||||||
|
<div class="w-16 h-16 rounded-full bg-blue-100 flex items-center justify-center text-blue-600 mr-4">
|
||||||
|
<i class="fas fa-hands-helping text-2xl"></i>
|
||||||
|
</div>
|
||||||
|
<h2 class="text-3xl font-bold text-gray-800">大道不孤，众行致远</h2>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<p class="text-gray-600 text-lg mb-8">
|
||||||
|
在酉佰，我们坚信真正的成功来自团队协作与共同成长。个人的力量有限，但团队的力量无穷。
|
||||||
|
</p>
|
||||||
|
|
||||||
|
<div class="space-y-6">
|
||||||
|
<div
|
||||||
|
class="flex items-start"
|
||||||
|
data-aos="fade-right"
|
||||||
|
data-aos-delay="300"
|
||||||
|
>
|
||||||
|
<div class="w-10 h-10 rounded-full bg-blue-100 flex items-center justify-center text-blue-600 mr-4 flex-shrink-0">
|
||||||
|
<i class="fas fa-users"></i>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<h3 class="text-xl font-semibold text-gray-800 mb-1">协作共赢</h3>
|
||||||
|
<p class="text-gray-600">
|
||||||
|
打破部门壁垒，建立跨职能协作机制，共享知识与资源，实现1+1>2的协同效应。
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div
|
||||||
|
class="flex items-start"
|
||||||
|
data-aos="fade-right"
|
||||||
|
data-aos-delay="400"
|
||||||
|
>
|
||||||
|
<div class="w-10 h-10 rounded-full bg-blue-100 flex items-center justify-center text-blue-600 mr-4 flex-shrink-0">
|
||||||
|
<i class="fas fa-hands"></i>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<h3 class="text-xl font-semibold text-gray-800 mb-1">互助成长</h3>
|
||||||
|
<p class="text-gray-600">
|
||||||
|
建立导师制度与伙伴计划，经验丰富的成员带领新人成长，形成互帮互助的学习网络。
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div
|
||||||
|
class="flex items-start"
|
||||||
|
data-aos="fade-right"
|
||||||
|
data-aos-delay="500"
|
||||||
|
>
|
||||||
|
<div class="w-10 h-10 rounded-full bg-blue-100 flex items-center justify-center text-blue-600 mr-4 flex-shrink-0">
|
||||||
|
<i class="fas fa-road"></i>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<h3 class="text-xl font-semibold text-gray-800 mb-1">长远发展</h3>
|
||||||
|
<p class="text-gray-600">
|
||||||
|
着眼长期价值而非短期利益，与客户、伙伴建立持久合作关系，共同创造可持续的未来。
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- 右侧：视觉展示 -->
|
||||||
|
<div class="p-8 md:p-12 bg-gradient-to-br from-indigo-600 to-blue-800 flex items-center justify-center">
|
||||||
|
<div class="text-center max-w-md">
|
||||||
|
<div class="mb-8">
|
||||||
|
<i class="fas fa-people-carry text-5xl text-white opacity-90"></i>
|
||||||
|
</div>
|
||||||
|
<h3 class="text-2xl font-bold text-white mb-4">团队协作的力量</h3>
|
||||||
|
<p class="text-blue-100 mb-8">
|
||||||
|
共同的目标、共享的价值观、协作的智慧，让我们在复杂多变的环境中稳步前行。
|
||||||
|
</p>
|
||||||
|
|
||||||
|
<div class="relative h-40 mx-auto">
|
||||||
|
<svg viewBox="0 0 500 200" class="w-full h-40">
|
||||||
|
<!-- 团队协作路径 -->
|
||||||
|
<path
|
||||||
|
d="M50,150 C150,50 200,100 250,50 C300,100 350,50 450,150"
|
||||||
|
stroke="#c7d2fe"
|
||||||
|
stroke-width="4"
|
||||||
|
fill="none"
|
||||||
|
stroke-dasharray="1000"
|
||||||
|
class="path-animation"
|
||||||
|
/>
|
||||||
|
|
||||||
|
<!-- 团队成员 -->
|
||||||
|
<g transform="translate(50,150)">
|
||||||
|
<circle cx="0" cy="0" r="8" fill="#818cf8" />
|
||||||
|
<text x="12" y="5" fill="#c7d2fe" font-size="12">技术</text>
|
||||||
|
</g>
|
||||||
|
|
||||||
|
<g transform="translate(150,50)">
|
||||||
|
<circle cx="0" cy="0" r="8" fill="#60a5fa" />
|
||||||
|
<text x="12" y="5" fill="#c7d2fe" font-size="12">研究</text>
|
||||||
|
</g>
|
||||||
|
|
||||||
|
<g transform="translate(250,50)">
|
||||||
|
<circle cx="0" cy="0" r="8" fill="#38bdf8" />
|
||||||
|
<text x="12" y="5" fill="#c7d2fe" font-size="12">咨询</text>
|
||||||
|
</g>
|
||||||
|
|
||||||
|
<g transform="translate(350,50)">
|
||||||
|
<circle cx="0" cy="0" r="8" fill="#22d3ee" />
|
||||||
|
<text x="12" y="5" fill="#c7d2fe" font-size="12">客户</text>
|
||||||
|
</g>
|
||||||
|
|
||||||
|
<g transform="translate(450,150)">
|
||||||
|
<circle cx="0" cy="0" r="8" fill="#2dd4bf" />
|
||||||
|
<text x="12" y="5" fill="#c7d2fe" font-size="12">成功</text>
|
||||||
|
</g>
|
||||||
|
</svg>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<p class="text-blue-100 text-sm mt-6">
|
||||||
|
技术、研究、咨询与客户共同协作，共创成功之路
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<!-- 循序渐进部分 -->
|
||||||
|
<section class="py-16 md:py-24 bg-gradient-to-r from-amber-50 to-amber-100">
|
||||||
|
<div class="container mx-auto px-4">
|
||||||
|
<SectionTitle
|
||||||
|
title="循序渐进"
|
||||||
|
subtitle="顺其自然，脚踏实地"
|
||||||
|
description="不盲目追求无用的结果，一步一步向前迈进"
|
||||||
|
align="center"
|
||||||
|
data-aos="fade-up"
|
||||||
|
/>
|
||||||
|
|
||||||
|
<div
|
||||||
|
class="max-w-4xl mx-auto mt-16"
|
||||||
|
data-aos="fade-up"
|
||||||
|
data-aos-delay="200"
|
||||||
|
>
|
||||||
|
<div class="bg-white rounded-2xl shadow-lg overflow-hidden">
|
||||||
|
<div class="grid md:grid-cols-5">
|
||||||
|
<div class="md:col-span-3 p-8 md:p-12">
|
||||||
|
<h2 class="text-2xl font-bold text-gray-900 mb-6">我们的渐进式发展理念</h2>
|
||||||
|
|
||||||
|
<div class="space-y-6">
|
||||||
|
<div
|
||||||
|
class="flex"
|
||||||
|
data-aos="fade-right"
|
||||||
|
data-aos-delay="300"
|
||||||
|
>
|
||||||
|
<div class="flex-shrink-0">
|
||||||
|
<div class="w-12 h-12 rounded-lg bg-amber-50 flex items-center justify-center text-amber-600">
|
||||||
|
<i class="fas fa-seedling"></i>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="ml-4">
|
||||||
|
<h3 class="text-lg font-medium text-gray-900">自然生长阶段</h3>
|
||||||
|
<p class="text-gray-600 mt-1">
|
||||||
|
在公司前期探索阶段，我们遵循业务自然发展规律，不揠苗助长，
|
||||||
|
在探索中找准定位和发展方向。
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div
|
||||||
|
class="flex"
|
||||||
|
data-aos="fade-right"
|
||||||
|
data-aos-delay="400"
|
||||||
|
>
|
||||||
|
<div class="flex-shrink-0">
|
||||||
|
<div class="w-12 h-12 rounded-lg bg-amber-50 flex items-center justify-center text-amber-600">
|
||||||
|
<i class="fas fa-stairs"></i>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="ml-4">
|
||||||
|
<h3 class="text-lg font-medium text-gray-900">稳步前进阶段</h3>
|
||||||
|
<p class="text-gray-600 mt-1">
|
||||||
|
在明确方向后，我们有规律、有效率、有目标地前进，制定切实可行的阶段目标，
|
||||||
|
一步一个脚印地实现突破。
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div
|
||||||
|
class="flex"
|
||||||
|
data-aos="fade-right"
|
||||||
|
data-aos-delay="500"
|
||||||
|
>
|
||||||
|
<div class="flex-shrink-0">
|
||||||
|
<div class="w-12 h-12 rounded-lg bg-amber-50 flex items-center justify-center text-amber-600">
|
||||||
|
<i class="fas fa-mountain"></i>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="ml-4">
|
||||||
|
<h3 class="text-lg font-medium text-gray-900">长期价值导向</h3>
|
||||||
|
<p class="text-gray-600 mt-1">
|
||||||
|
不追求短期利益最大化，专注于创造可持续的长期价值，
|
||||||
|
通过持续积累实现从量变到质变的飞跃。
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div
|
||||||
|
class="md:col-span-2 bg-gradient-to-b from-amber-400 to-amber-600 p-8 flex items-center"
|
||||||
|
data-aos="fade-left"
|
||||||
|
data-aos-delay="600"
|
||||||
|
>
|
||||||
|
<div class="text-center w-full">
|
||||||
|
<div class="mb-6">
|
||||||
|
<i class="fas fa-chart-line text-4xl text-white opacity-80"></i>
|
||||||
|
</div>
|
||||||
|
<h3 class="text-xl font-bold text-white mb-2">渐进式发展曲线</h3>
|
||||||
|
<p class="text-amber-100 mb-6">持续积累，阶梯式成长</p>
|
||||||
|
|
||||||
|
<div class="relative h-32">
|
||||||
|
<div class="absolute bottom-0 left-0 right-0">
|
||||||
|
<!-- 渐进式增长曲线示意 -->
|
||||||
|
<svg viewBox="0 0 200 100" class="w-full h-32">
|
||||||
|
<path
|
||||||
|
d="M0,80 C40,60 80,40 120,30 C160,20 200,10 200,10"
|
||||||
|
stroke="white"
|
||||||
|
stroke-width="3"
|
||||||
|
fill="none"
|
||||||
|
class="path-animation"
|
||||||
|
/>
|
||||||
|
<circle cx="0" cy="80" r="4" fill="white" />
|
||||||
|
<circle cx="40" cy="60" r="4" fill="white" />
|
||||||
|
<circle cx="80" cy="40" r="4" fill="white" />
|
||||||
|
<circle cx="120" cy="30" r="4" fill="white" />
|
||||||
|
<circle cx="160" cy="20" r="4" fill="white" />
|
||||||
|
<circle cx="200" cy="10" r="4" fill="white" />
|
||||||
|
</svg>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<p class="text-amber-100 text-sm mt-4">
|
||||||
|
每个阶段都是下一阶段的坚实基础
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<!-- 文化实践案例 -->
|
||||||
|
<section class="py-16 md:py-24">
|
||||||
|
<div class="container mx-auto px-4">
|
||||||
|
<SectionTitle
|
||||||
|
title="文化实践"
|
||||||
|
subtitle="理念落地实例"
|
||||||
|
description="学习与渐进理念在实际工作中的体现"
|
||||||
|
align="center"
|
||||||
|
data-aos="fade-up"
|
||||||
|
/>
|
||||||
|
|
||||||
|
<div
|
||||||
|
class="grid md:grid-cols-2 lg:grid-cols-3 gap-8 mt-16"
|
||||||
|
data-aos="fade-up"
|
||||||
|
data-aos-delay="200"
|
||||||
|
>
|
||||||
|
<div
|
||||||
|
class="bg-white rounded-xl shadow-md overflow-hidden border border-gray-100"
|
||||||
|
data-aos="zoom-in"
|
||||||
|
data-aos-delay="300"
|
||||||
|
>
|
||||||
|
<div class="p-6">
|
||||||
|
<div class="w-12 h-12 rounded-lg bg-blue-50 flex items-center justify-center text-blue-600 mb-4">
|
||||||
|
<i class="fas fa-users"></i>
|
||||||
|
</div>
|
||||||
|
<h3 class="text-xl font-bold text-gray-800 mb-3">新人培养计划</h3>
|
||||||
|
<p class="text-gray-600 mb-4">
|
||||||
|
为期3个月的阶梯式培训体系，从方法论到实践，逐步培养行业研究能力
|
||||||
|
</p>
|
||||||
|
<div class="flex items-center text-sm text-gray-500">
|
||||||
|
<i class="far fa-clock mr-2"></i>
|
||||||
|
平均培养周期：90天
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div
|
||||||
|
class="bg-white rounded-xl shadow-md overflow-hidden border border-gray-100"
|
||||||
|
data-aos="zoom-in"
|
||||||
|
data-aos-delay="400"
|
||||||
|
>
|
||||||
|
<div class="p-6">
|
||||||
|
<div class="w-12 h-12 rounded-lg bg-amber-50 flex items-center justify-center text-amber-600 mb-4">
|
||||||
|
<i class="fas fa-tasks"></i>
|
||||||
|
</div>
|
||||||
|
<h3 class="text-xl font-bold text-gray-800 mb-3">项目推进方法</h3>
|
||||||
|
<p class="text-gray-600 mb-4">
|
||||||
|
采用阶段性目标分解，通过小步快跑的方式确保项目高质量交付
|
||||||
|
</p>
|
||||||
|
<div class="flex items-center text-sm text-gray-500">
|
||||||
|
<i class="fas fa-chart-line mr-2"></i>
|
||||||
|
项目成功率提升40%
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div
|
||||||
|
class="bg-white rounded-xl shadow-md overflow-hidden border border-gray-100"
|
||||||
|
data-aos="zoom-in"
|
||||||
|
data-aos-delay="500"
|
||||||
|
>
|
||||||
|
<div class="p-6">
|
||||||
|
<div class="w-12 h-12 rounded-lg bg-green-50 flex items-center justify-center text-green-600 mb-4">
|
||||||
|
<i class="fas fa-book-reader"></i>
|
||||||
|
</div>
|
||||||
|
<h3 class="text-xl font-bold text-gray-800 mb-3">知识迭代机制</h3>
|
||||||
|
<p class="text-gray-600 mb-4">
|
||||||
|
每季度更新行业研究方法论，通过持续学习保持专业领先优势
|
||||||
|
</p>
|
||||||
|
<div class="flex items-center text-sm text-gray-500">
|
||||||
|
<i class="fas fa-book mr-2"></i>
|
||||||
|
已积累120+份研究文档
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<!-- 加入我们 -->
|
||||||
|
<section
|
||||||
|
class="py-16 md:py-24 bg-gradient-to-r from-blue-800 to-indigo-900"
|
||||||
|
data-aos="fade-up"
|
||||||
|
>
|
||||||
|
<div class="container mx-auto px-4">
|
||||||
|
<div
|
||||||
|
class="max-w-3xl mx-auto text-center"
|
||||||
|
data-aos="fade-up"
|
||||||
|
data-aos-delay="200"
|
||||||
|
>
|
||||||
|
<h2 class="text-3xl md:text-4xl font-bold text-white mb-6">加入酉佰佰，共同成长</h2>
|
||||||
|
<p class="text-xl text-blue-200 mb-10">
|
||||||
|
我们正在寻找认同学习文化和渐进理念的伙伴，一起创造长期价值
|
||||||
|
</p>
|
||||||
|
|
||||||
|
<div class="flex flex-col sm:flex-row justify-center gap-4">
|
||||||
|
<router-link
|
||||||
|
to="/careers"
|
||||||
|
class="px-8 py-4 bg-white text-blue-700 font-medium rounded-lg hover:bg-blue-50 transition-colors"
|
||||||
|
data-aos="zoom-in"
|
||||||
|
data-aos-delay="300"
|
||||||
|
>
|
||||||
|
查看职位空缺
|
||||||
|
<i class="fas fa-arrow-right ml-2"></i>
|
||||||
|
</router-link>
|
||||||
|
|
||||||
|
<router-link
|
||||||
|
to="/culture"
|
||||||
|
class="px-8 py-4 bg-transparent border-2 border-white text-white font-medium rounded-lg hover:bg-white/10 transition-colors"
|
||||||
|
data-aos="zoom-in"
|
||||||
|
data-aos-delay="400"
|
||||||
|
>
|
||||||
|
了解更多文化
|
||||||
|
</router-link>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script setup>
|
||||||
|
import SectionTitle from '@/components/ui/SectionTitle.vue'
|
||||||
|
|
||||||
|
// 这里可以添加组件需要的响应式数据或方法
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style scoped>
|
||||||
|
.path-animation {
|
||||||
|
stroke-dasharray: 1000;
|
||||||
|
stroke-dashoffset: 1000;
|
||||||
|
animation: dash 5s linear forwards;
|
||||||
|
}
|
||||||
|
|
||||||
|
@keyframes dash {
|
||||||
|
to {
|
||||||
|
stroke-dashoffset: 0;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
/* 背景图片的透明度调整 */
|
||||||
|
.absolute img {
|
||||||
|
opacity: 0.65;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
282
src/views/Home.vue
Normal file
282
src/views/Home.vue
Normal file
@@ -0,0 +1,282 @@
|
|||||||
|
<template>
|
||||||
|
<div>
|
||||||
|
<!-- 主视觉区域 -->
|
||||||
|
<section class="pt-24 pb-16 md:pt-32 md:pb-24 bg-gradient-to-br from-blue-50 to-indigo-50">
|
||||||
|
<div class="container mx-auto px-4">
|
||||||
|
<div class="flex flex-col md:flex-row items-center">
|
||||||
|
<div class="md:w-1/2 mb-12 md:mb-0">
|
||||||
|
<h1 class="text-4xl md:text-5xl lg:text-6xl font-bold text-gray-900 mb-6 leading-tight">
|
||||||
|
引领未来，<br>
|
||||||
|
<span class="text-amber-600">创新</span>无限可能
|
||||||
|
</h1>
|
||||||
|
<p class="text-lg text-gray-700 mb-8 max-w-lg">
|
||||||
|
上海酉佰致力于为企业提供前沿的解决方案，赋能数字化转型，
|
||||||
|
创造可持续的商业价值。
|
||||||
|
</p>
|
||||||
|
<div class="flex flex-wrap gap-4">
|
||||||
|
<router-link
|
||||||
|
to="/features"
|
||||||
|
class="px-6 py-3 bg-amber-600 hover:bg-amber-700 text-white rounded-lg font-medium shadow-md transition-all duration-300 hover:shadow-lg flex items-center"
|
||||||
|
>
|
||||||
|
<span>了解更多</span>
|
||||||
|
<i class="fas fa-arrow-right ml-2 text-xs"></i>
|
||||||
|
</router-link>
|
||||||
|
<button
|
||||||
|
class="px-6 py-3 bg-white text-indigo-900 border border-indigo-200 rounded-lg font-medium hover:bg-indigo-50 transition-colors flex items-center"
|
||||||
|
>
|
||||||
|
<i class="fas fa-phone-alt mr-2"></i>
|
||||||
|
<span>联系我们</span>
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="md:w-1/2 flex justify-center">
|
||||||
|
<div class="relative">
|
||||||
|
<div class="absolute -top-6 -right-6 w-64 h-64 bg-amber-500 rounded-full opacity-10"></div>
|
||||||
|
<div class="absolute -bottom-6 -left-6 w-72 h-72 bg-indigo-500 rounded-full opacity-10"></div>
|
||||||
|
<div class="relative z-10 rounded-2xl overflow-hidden shadow-xl w-full max-w-md">
|
||||||
|
<!-- 图片占位 -->
|
||||||
|
<div class="bg-gradient-to-br from-indigo-600 to-indigo-900 border-2 border-dashed rounded-xl w-full h-96 p-6 flex items-center justify-center">
|
||||||
|
<div class="text-center text-white">
|
||||||
|
<i class="fas fa-chart-line text-5xl mb-4 opacity-70"></i>
|
||||||
|
<p class="text-xl font-light">企业解决方案展示</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<!-- 核心价值 -->
|
||||||
|
<section class="py-16 md:py-24">
|
||||||
|
<div class="container mx-auto px-4">
|
||||||
|
<SectionTitle
|
||||||
|
title="我们的核心价值"
|
||||||
|
subtitle="以专业赢得信任"
|
||||||
|
description="我们坚持创新驱动与客户至上的理念，为企业提供专业的数字化转型解决方案"
|
||||||
|
align="center"
|
||||||
|
/>
|
||||||
|
|
||||||
|
<div class="grid md:grid-cols-3 gap-8 mt-16">
|
||||||
|
<Card
|
||||||
|
v-for="(value, index) in values"
|
||||||
|
:key="index"
|
||||||
|
:title="value.title"
|
||||||
|
:icon="value.icon"
|
||||||
|
>
|
||||||
|
<p>
|
||||||
|
{{ value.description }}
|
||||||
|
</p>
|
||||||
|
<template #actions>
|
||||||
|
<a
|
||||||
|
href="#"
|
||||||
|
class="inline-flex items-center mt-4 font-medium text-amber-600 hover:text-amber-700 transition-colors"
|
||||||
|
>
|
||||||
|
<span>了解详情</span>
|
||||||
|
<i class="fas fa-arrow-right ml-2 text-xs"></i>
|
||||||
|
</a>
|
||||||
|
</template>
|
||||||
|
</Card>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<!-- 企业优势 -->
|
||||||
|
<section class="py-16 md:py-24 bg-gray-50">
|
||||||
|
<div class="container mx-auto px-4">
|
||||||
|
<div class="flex flex-col lg:flex-row items-center justify-between">
|
||||||
|
<div class="lg:w-5/12 mb-12 lg:mb-0">
|
||||||
|
<SectionTitle
|
||||||
|
title="为什么选择"
|
||||||
|
subtitle="企业优势"
|
||||||
|
highlight="上海酉佰?"
|
||||||
|
/>
|
||||||
|
|
||||||
|
<p class="text-gray-600 mt-6 mb-8">
|
||||||
|
我们拥有多年的行业经验和专业团队，致力于为客户提供全方位的解决方案。
|
||||||
|
凭借独特的技术优势和创新的服务理念，帮助企业实现数字化转型。
|
||||||
|
</p>
|
||||||
|
|
||||||
|
<div class="grid grid-cols-2 gap-4">
|
||||||
|
<div class="bg-white rounded-lg p-4 flex flex-col items-center">
|
||||||
|
<div class="text-3xl font-bold text-indigo-800">12+</div>
|
||||||
|
<div class="text-gray-600">行业经验</div>
|
||||||
|
</div>
|
||||||
|
<div class="bg-white rounded-lg p-4 flex flex-col items-center">
|
||||||
|
<div class="text-3xl font-bold text-indigo-800">200+</div>
|
||||||
|
<div class="text-gray-600">合作企业</div>
|
||||||
|
</div>
|
||||||
|
<div class="bg-white rounded-lg p-4 flex flex-col items-center">
|
||||||
|
<div class="text-3xl font-bold text-indigo-800">50+</div>
|
||||||
|
<div class="text-gray-600">专业团队</div>
|
||||||
|
</div>
|
||||||
|
<div class="bg-white rounded-lg p-4 flex flex-col items-center">
|
||||||
|
<div class="text-3xl font-bold text-indigo-800">98%</div>
|
||||||
|
<div class="text-gray-600">客户满意度</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="lg:w-6/12">
|
||||||
|
<div class="relative">
|
||||||
|
<div class="absolute top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2 w-full h-full rounded-3xl bg-gradient-to-r from-amber-400/10 to-blue-400/10 rotate-12"></div>
|
||||||
|
<div class="relative bg-white rounded-2xl overflow-hidden shadow-lg flex">
|
||||||
|
<div class="hidden lg:block w-1/3 bg-gradient-to-b from-amber-500 to-amber-600 p-6 flex items-center justify-center">
|
||||||
|
<i class="fas fa-medal text-white text-5xl"></i>
|
||||||
|
</div>
|
||||||
|
<div class="w-full lg:w-2/3 p-8">
|
||||||
|
<h3 class="text-xl font-bold text-gray-900 mb-4">专业服务能力</h3>
|
||||||
|
<ul class="space-y-4">
|
||||||
|
<li v-for="(item, index) in advantages" :key="index" class="flex items-start">
|
||||||
|
<div class="w-8 h-8 rounded-full bg-amber-50 text-amber-600 flex items-center justify-center flex-shrink-0 mr-3">
|
||||||
|
<i :class="item.icon"></i>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<h4 class="font-medium text-gray-900">{{ item.title }}</h4>
|
||||||
|
<p class="text-gray-600 text-sm mt-1">{{ item.description }}</p>
|
||||||
|
</div>
|
||||||
|
</li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<!-- 客户评价 -->
|
||||||
|
<section class="py-16 md:py-24">
|
||||||
|
<div class="container mx-auto px-4">
|
||||||
|
<SectionTitle
|
||||||
|
title="客户评价"
|
||||||
|
subtitle="他们这样说"
|
||||||
|
description="多年来，我们服务的客户遍布不同行业，获得了广泛认可"
|
||||||
|
align="center"
|
||||||
|
/>
|
||||||
|
|
||||||
|
<div class="grid md:grid-cols-3 gap-8 mt-16">
|
||||||
|
<div v-for="(testimonial, index) in testimonials" :key="index">
|
||||||
|
<Card size="lg" hover-effect no-border class="h-full" icon-bg-class="bg-indigo-50 text-indigo-600">
|
||||||
|
<template #icon>
|
||||||
|
<div class="text-5xl text-indigo-100 font-serif">"</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<p class="text-gray-600 italic">
|
||||||
|
{{ testimonial.content }}
|
||||||
|
</p>
|
||||||
|
|
||||||
|
<div class="mt-6 flex items-center">
|
||||||
|
<div class="w-12 h-12 rounded-full bg-gray-300 mr-4"></div>
|
||||||
|
<div>
|
||||||
|
<div class="font-medium text-gray-900">{{ testimonial.name }}</div>
|
||||||
|
<div class="text-sm text-gray-500">{{ testimonial.position }}</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</Card>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<!-- 合作品牌 -->
|
||||||
|
<section class="py-16 md:py-20 bg-gradient-to-r from-indigo-50 to-blue-50">
|
||||||
|
<div class="container mx-auto px-4">
|
||||||
|
<SectionTitle
|
||||||
|
title="合作伙伴"
|
||||||
|
subtitle="信赖品牌"
|
||||||
|
align="center"
|
||||||
|
/>
|
||||||
|
|
||||||
|
<div class="grid grid-cols-2 md:grid-cols-3 lg:grid-cols-6 gap-8 mt-12">
|
||||||
|
<div v-for="i in 6" :key="i" class="bg-white rounded-xl p-6 flex items-center justify-center h-32">
|
||||||
|
<div class="text-gray-400 font-bold text-xl">合作伙伴 {{ i }}</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<!-- CTA -->
|
||||||
|
<section class="py-16 md:py-24 bg-gradient-to-r from-indigo-900 to-blue-900 text-white">
|
||||||
|
<div class="container mx-auto px-4">
|
||||||
|
<div class="max-w-3xl mx-auto text-center">
|
||||||
|
<h2 class="text-3xl md:text-4xl font-bold mb-6">开启数字化转型之旅</h2>
|
||||||
|
<p class="text-xl text-blue-200 mb-8">
|
||||||
|
联系我们获取免费咨询服务，量身定制您的解决方案
|
||||||
|
</p>
|
||||||
|
<div class="flex flex-col sm:flex-row justify-center gap-4">
|
||||||
|
<button class="px-8 py-3.5 bg-amber-500 hover:bg-amber-600 rounded-lg font-medium shadow-lg transition-colors duration-300 flex items-center justify-center">
|
||||||
|
立即咨询
|
||||||
|
<i class="fas fa-comment ml-3"></i>
|
||||||
|
</button>
|
||||||
|
<button class="px-8 py-3.5 bg-transparent border-2 border-white/30 hover:border-white rounded-lg font-medium flex items-center justify-center">
|
||||||
|
预约演示
|
||||||
|
<i class="fas fa-calendar ml-3"></i>
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script setup>
|
||||||
|
import SectionTitle from '@/components/ui/SectionTitle.vue'
|
||||||
|
import Card from '@/components/ui/Card.vue'
|
||||||
|
|
||||||
|
const values = [
|
||||||
|
{
|
||||||
|
title: '创新驱动',
|
||||||
|
icon: 'fas fa-lightbulb',
|
||||||
|
description: '不断探索新技术、新思路，为客户提供前沿解决方案'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: '客户至上',
|
||||||
|
icon: 'fas fa-handshake',
|
||||||
|
description: '深度理解客户需求，提供定制化服务与全流程支持'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: '专业可靠',
|
||||||
|
icon: 'fas fa-medal',
|
||||||
|
description: '高素质专业团队，严谨的工作态度，确保项目高质量交付'
|
||||||
|
}
|
||||||
|
]
|
||||||
|
|
||||||
|
const advantages = [
|
||||||
|
{
|
||||||
|
title: '行业专业知识',
|
||||||
|
icon: 'fas fa-book',
|
||||||
|
description: '深耕行业多年的专家团队，掌握行业发展趋势'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: '技术创新',
|
||||||
|
icon: 'fas fa-cogs',
|
||||||
|
description: '持续投资技术研发，引领行业技术创新'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: '定制解决方案',
|
||||||
|
icon: 'fas fa-clipboard-list',
|
||||||
|
description: '根据企业需求量身定制解决方案'
|
||||||
|
},
|
||||||
|
]
|
||||||
|
|
||||||
|
const testimonials = [
|
||||||
|
{
|
||||||
|
content: '上海酉佰团队的专业性和创新思维帮助我们完成了数字化转型，大幅提升了工作效率，为业务增长提供了强大支持。',
|
||||||
|
name: '张先生',
|
||||||
|
position: '某公司总经理'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
content: '与酉佰的合作非常愉快，他们的解决方案深入理解了我们行业的特殊需求，实施效果远超我们的预期。',
|
||||||
|
name: '李女士',
|
||||||
|
position: '某制造企业CIO'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
content: '专业、高效、值得信赖的技术合作伙伴，他们的团队总能提出创新的解决方案帮助解决业务痛点。',
|
||||||
|
name: '王总监',
|
||||||
|
position: '某零售企业技术总监'
|
||||||
|
}
|
||||||
|
]
|
||||||
|
</script>
|
||||||
231
src/views/Team.vue
Normal file
231
src/views/Team.vue
Normal file
@@ -0,0 +1,231 @@
|
|||||||
|
<template>
|
||||||
|
<div>
|
||||||
|
<!-- 页面标题 -->
|
||||||
|
<div class="pt-32 pb-20 bg-gradient-to-r from-blue-900 to-indigo-900">
|
||||||
|
<div class="container mx-auto px-4">
|
||||||
|
<div class="text-center">
|
||||||
|
<h1 class="text-4xl md:text-5xl font-bold text-white mb-4">团队介绍</h1>
|
||||||
|
<p class="text-xl text-blue-300 max-w-2xl mx-auto">
|
||||||
|
专业、多元、充满活力的高素质团队
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- 领导团队 -->
|
||||||
|
<section class="py-16 md:py-24">
|
||||||
|
|
||||||
|
<div class="container mx-auto px-4">
|
||||||
|
<SectionTitle
|
||||||
|
title="技术团队"
|
||||||
|
subtitle="专业卓越"
|
||||||
|
description="技术团队的核心成员拥有深厚的行业背景和技术专长"
|
||||||
|
align="center"
|
||||||
|
/>
|
||||||
|
|
||||||
|
|
||||||
|
<div class="mt-16">
|
||||||
|
<div class="bg-white rounded-2xl overflow-hidden shadow-lg p-6 mb-12">
|
||||||
|
<div class="flex flex-col md:flex-row">
|
||||||
|
<div class="md:w-1/3 mb-6 md:mb-0">
|
||||||
|
<div class="bg-gradient-to-br from-blue-50 to-indigo-100 rounded-xl h-56 flex items-center justify-center">
|
||||||
|
<i class="fas fa-code text-5xl text-blue-500 opacity-50"></i>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="md:w-2/3 md:pl-8">
|
||||||
|
<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">
|
||||||
|
团队目前有10名成员左右，由一批具有金融、数理、工科等背景的海归硕士及国内顶尖院校硕士组成。公司团队工作开放透明，和谐融洽，注重深入研究、互相学习和分享交流。研究方面，公司按照对市场的理解，目前从现货市场入手，覆盖货币、债券、证券、商品等，未来将逐步拓展到期货、期权等衍生品市场，最后覆盖到全球市场。
|
||||||
|
</p>
|
||||||
|
<div class="flex flex-wrap gap-2">
|
||||||
|
<span v-for="(skill, idx) in ['金融', '数理', '工科']" :key="idx"
|
||||||
|
class="bg-blue-50 text-blue-700 px-3 py-1.5 rounded-lg text-sm">
|
||||||
|
{{ skill }}
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
<!-- 领导团队 -->
|
||||||
|
<section class="py-16 md:py-24">
|
||||||
|
<div class="container mx-auto px-4">
|
||||||
|
<SectionTitle
|
||||||
|
title="领导团队"
|
||||||
|
subtitle="核心管理"
|
||||||
|
description="我们的管理层拥有丰富的行业经验和专业知识"
|
||||||
|
align="center"
|
||||||
|
/>
|
||||||
|
|
||||||
|
<div class="grid md:grid-cols-2 lg:grid-cols-4 gap-8 mt-16">
|
||||||
|
<TeamMember
|
||||||
|
v-for="(leader, index) in leaders"
|
||||||
|
:key="index"
|
||||||
|
:member="leader"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<!-- 技术团队 -->
|
||||||
|
<section class="py-16 md:py-24 bg-gray-50">
|
||||||
|
<div class="container mx-auto px-4">
|
||||||
|
<SectionTitle
|
||||||
|
title="技术团队"
|
||||||
|
subtitle="专业卓越"
|
||||||
|
description="技术团队的核心成员拥有深厚的行业背景和技术专长"
|
||||||
|
align="center"
|
||||||
|
/>
|
||||||
|
|
||||||
|
<div class="mt-16">
|
||||||
|
<div class="bg-white rounded-2xl overflow-hidden shadow-lg p-6 mb-12">
|
||||||
|
<div class="flex flex-col md:flex-row">
|
||||||
|
<div class="md:w-1/3 mb-6 md:mb-0">
|
||||||
|
<div class="bg-gradient-to-br from-blue-50 to-indigo-100 rounded-xl h-56 flex items-center justify-center">
|
||||||
|
<i class="fas fa-code text-5xl text-blue-500 opacity-50"></i>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="md:w-2/3 md:pl-8">
|
||||||
|
<h3 class="text-2xl font-bold text-gray-900 mb-4">技术专家团队</h3>
|
||||||
|
<p class="text-gray-600 mb-6">
|
||||||
|
我们的技术团队由多名资深架构师和行业专家组成，平均拥有8年以上相关领域经验。
|
||||||
|
团队成员精通云计算、大数据、人工智能、物联网等前沿技术，致力于为客户提供创新的技术解决方案。
|
||||||
|
</p>
|
||||||
|
<div class="flex flex-wrap gap-2">
|
||||||
|
<span v-for="(skill, idx) in ['云计算', '大数据', 'AI/ML', '区块链', '物联网', '微服务', 'DevOps']" :key="idx"
|
||||||
|
class="bg-blue-50 text-blue-700 px-3 py-1.5 rounded-lg text-sm">
|
||||||
|
{{ skill }}
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="grid grid-cols-2 md:grid-cols-3 lg:grid-cols-6 gap-6">
|
||||||
|
<TeamMember
|
||||||
|
v-for="(member, index) in techTeam"
|
||||||
|
:key="index"
|
||||||
|
:member="member"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<!-- 团队文化 -->
|
||||||
|
<section class="py-16 md:py-24">
|
||||||
|
<div class="container mx-auto px-4">
|
||||||
|
<div class="flex flex-col lg:flex-row gap-16">
|
||||||
|
<div class="lg:w-5/12">
|
||||||
|
<SectionTitle
|
||||||
|
title="团队文化"
|
||||||
|
subtitle="工作环境"
|
||||||
|
/>
|
||||||
|
|
||||||
|
<p class="text-gray-600 mt-6 mb-8">
|
||||||
|
我们致力于打造一个充满活力、开放包容、鼓励创新的工作环境。
|
||||||
|
为团队成员提供良好的发展平台和职业成长空间。
|
||||||
|
</p>
|
||||||
|
|
||||||
|
<div class="space-y-5">
|
||||||
|
<div v-for="(feature, index) in cultureFeatures" :key="index" class="flex">
|
||||||
|
<div class="w-12 h-12 rounded-lg bg-amber-50 flex items-center justify-center mr-4 text-amber-600">
|
||||||
|
<i :class="feature.icon"></i>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<h3 class="font-medium text-gray-900">{{ feature.title }}</h3>
|
||||||
|
<p class="text-gray-600 text-sm mt-1">{{ feature.description }}</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="lg:w-7/12">
|
||||||
|
<div class="grid grid-cols-2 gap-4">
|
||||||
|
<div v-for="i in 4" :key="i" class="rounded-xl overflow-hidden aspect-square">
|
||||||
|
<div :class="['h-full flex items-center justify-center',
|
||||||
|
`bg-gradient-to-br ${i === 1 ? 'from-blue-100 to-blue-200' :
|
||||||
|
i === 2 ? 'from-amber-100 to-amber-200' :
|
||||||
|
i === 3 ? 'from-indigo-100 to-indigo-200' :
|
||||||
|
'from-green-100 to-green-200'}`]">
|
||||||
|
<i :class="[i === 1 ? 'fas fa-users' :
|
||||||
|
i === 2 ? 'fas fa-laptop-code' :
|
||||||
|
i === 3 ? 'fas fa-brain' : 'fas fa-glass-cheers']"
|
||||||
|
class="text-4xl opacity-30"></i>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<!-- 加入团队 -->
|
||||||
|
<section class="py-16 md:py-24 bg-gradient-to-r from-blue-800 to-indigo-900 text-white">
|
||||||
|
<div class="container mx-auto px-4">
|
||||||
|
<div class="max-w-3xl mx-auto text-center">
|
||||||
|
<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"
|
||||||
|
class="inline-flex items-center px-8 py-3.5 bg-amber-500 hover:bg-amber-600 rounded-lg font-medium shadow-lg transition-colors duration-300"
|
||||||
|
>
|
||||||
|
查看职位空缺
|
||||||
|
<i class="fas fa-arrow-right ml-3"></i>
|
||||||
|
</router-link>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script setup>
|
||||||
|
import SectionTitle from '@/components/ui/SectionTitle.vue'
|
||||||
|
import TeamMember from '@/components/ui/TeamMember.vue'
|
||||||
|
|
||||||
|
const leaders = [
|
||||||
|
{ name: '张总', position: '创始人 & CEO', description: '拥有15年行业经验，成功创办两家企业' },
|
||||||
|
{ name: '李经理', position: '技术总监', description: '前全球500强企业技术负责人，系统架构专家' },
|
||||||
|
{ name: '王女士', position: '运营总监', description: '项目管理专家，曾管理过多个千万级项目' },
|
||||||
|
{ name: '陈总监', position: '市场总监', description: '资深营销专家，拥有丰富的品牌建设经验' }
|
||||||
|
]
|
||||||
|
|
||||||
|
const techTeam = [
|
||||||
|
{ name: '张工', position: '首席架构师' },
|
||||||
|
{ name: '李工', position: '大数据专家' },
|
||||||
|
{ name: '陈工', position: 'AI研究员' },
|
||||||
|
{ name: '刘工', position: '云平台专家' },
|
||||||
|
{ name: '王工', position: '前端技术专家' },
|
||||||
|
{ name: '赵工', position: '安全专家' },
|
||||||
|
]
|
||||||
|
|
||||||
|
const cultureFeatures = [
|
||||||
|
{
|
||||||
|
title: '学习与发展',
|
||||||
|
icon: 'fas fa-book-reader',
|
||||||
|
description: '每年提供专项培训预算和职业发展计划'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: '创新文化',
|
||||||
|
icon: 'fas fa-lightbulb',
|
||||||
|
description: '鼓励创新思维，设有专项创新奖励基金'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: '灵活办公',
|
||||||
|
icon: 'fas fa-laptop-house',
|
||||||
|
description: '提供灵活的办公时间和远程工作机会'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: '团队建设',
|
||||||
|
icon: 'fas fa-users',
|
||||||
|
description: '定期组织团建活动和兴趣小组交流'
|
||||||
|
}
|
||||||
|
]
|
||||||
|
</script>
|
||||||
@@ -15,7 +15,7 @@ export default defineConfig({
|
|||||||
}
|
}
|
||||||
},
|
},
|
||||||
server: {
|
server: {
|
||||||
port: 8888,
|
port: 10186,
|
||||||
proxy: {
|
proxy: {
|
||||||
'/api': {
|
'/api': {
|
||||||
// target: 'http://127.0.0.1:18007/api/',
|
// target: 'http://127.0.0.1:18007/api/',
|
||||||
@@ -24,5 +24,19 @@ export default defineConfig({
|
|||||||
rewrite: (path) => path.replace(/^\/api/, '')
|
rewrite: (path) => path.replace(/^\/api/, '')
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
},
|
||||||
|
build: {
|
||||||
|
assetsDir: 'assets/images',
|
||||||
|
rollupOptions: {
|
||||||
|
output: {
|
||||||
|
assetFileNames: (assetInfo) => {
|
||||||
|
let extType = assetInfo.name.split('.').at(1);
|
||||||
|
if (/png|jpe?g|svg|gif|tiff|bmp|ico/i.test(extType)) {
|
||||||
|
return `assets/images/[name]-[hash][extname]`;
|
||||||
|
}
|
||||||
|
return `assets/[name]-[hash][extname]`;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
}
|
}
|
||||||
})
|
})
|
||||||
|
|||||||
Reference in New Issue
Block a user