diff --git a/package.json b/package.json index c5f2e91..1bf9c29 100644 --- a/package.json +++ b/package.json @@ -12,6 +12,8 @@ "@kagol/vue-carousel": "^0.1.2", "@unhead/vue": "^2.1.15", "unhead": "2.1.15", + "gsap": "^3.15.0", + "less": "^4.6.4", "vite-ssg": "^28.3.0", "vue": "^3.5.34", "vue-router": "^4.6.4" diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index 6ddfdf1..e171ed5 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -14,12 +14,9 @@ importers: '@unhead/vue': specifier: ^2.1.15 version: 2.1.15(vue@3.5.34(typescript@6.0.3)) - unhead: - specifier: 2.1.15 - version: 2.1.15 vite-ssg: specifier: ^28.3.0 - version: 28.3.0(unhead@2.1.15)(vite@8.0.12(@types/node@24.12.4)(terser@5.47.1))(vue-router@4.6.4(vue@3.5.34(typescript@6.0.3)))(vue@3.5.34(typescript@6.0.3)) + version: 28.3.0(unhead@3.1.0(vite@8.0.12(@types/node@24.12.4)(terser@5.47.1)))(vite@8.0.12(@types/node@24.12.4)(terser@5.47.1))(vue-router@4.6.4(vue@3.5.34(typescript@6.0.3)))(vue@3.5.34(typescript@6.0.3)) vue: specifier: ^3.5.34 version: 3.5.34(typescript@6.0.3) @@ -32,7 +29,7 @@ importers: version: 24.12.4 '@vitejs/plugin-vue': specifier: ^6.0.6 - version: 6.0.6(vite@8.0.12(@types/node@24.12.4)(terser@5.47.1))(vue@3.5.34(typescript@6.0.3)) + version: 6.0.6(vite@8.0.12(@types/node@24.12.4)(less@4.6.4)(terser@5.47.1))(vue@3.5.34(typescript@6.0.3)) '@vue/tsconfig': specifier: ^0.9.1 version: 0.9.1(typescript@6.0.3)(vue@3.5.34(typescript@6.0.3)) @@ -41,7 +38,7 @@ importers: version: 6.0.3 vite: specifier: ^8.0.12 - version: 8.0.12(@types/node@24.12.4)(terser@5.47.1) + version: 8.0.12(@types/node@24.12.4)(less@4.6.4)(terser@5.47.1) vite-ssg-sitemap: specifier: ^0.10.0 version: 0.10.0 @@ -206,36 +203,42 @@ packages: engines: {node: ^20.19.0 || >=22.12.0} cpu: [arm64] os: [linux] + libc: [glibc] '@rolldown/binding-linux-arm64-musl@1.0.0': resolution: {integrity: sha512-EIVjy2cgd7uuMMo94FVkBp7F6DhcZAUwNURkSG3RwUmvAXR6s0ISxM81U+IydcZByPG0pZIHsf1b6kTxoFDgJA==} engines: {node: ^20.19.0 || >=22.12.0} cpu: [arm64] os: [linux] + libc: [musl] '@rolldown/binding-linux-ppc64-gnu@1.0.0': resolution: {integrity: sha512-JEwwOPcwTLAcpDQlqSmjEmfs63xJnSiUNIGvLcDLUHCWK4XowpS/7c7tUsUH6uT/ct6bMUTdXKfI8967FYj6mg==} engines: {node: ^20.19.0 || >=22.12.0} cpu: [ppc64] os: [linux] + libc: [glibc] '@rolldown/binding-linux-s390x-gnu@1.0.0': resolution: {integrity: sha512-0wjCFhLrihtAubnT9iA0N++0pSV0z5Hg7tNGdNJ4RFaINceHadoF+kiFGyY1qSSNVIAZtLotG8Ju1bgDPkjnFA==} engines: {node: ^20.19.0 || >=22.12.0} cpu: [s390x] os: [linux] + libc: [glibc] '@rolldown/binding-linux-x64-gnu@1.0.0': resolution: {integrity: sha512-Dfn7iak9BcMMePxcoJfpSbWqnEyrp/dRF63/8qW/eHBdOZov6x5aShLLEYGYdIeSJ6vMLK/XCVB+lGIxm41bQA==} engines: {node: ^20.19.0 || >=22.12.0} cpu: [x64] os: [linux] + libc: [glibc] '@rolldown/binding-linux-x64-musl@1.0.0': resolution: {integrity: sha512-5/utzzDmD/pD/bmuaUcbTf/sZYy0aztwIVlfpoW1fTjCZ0BaPOMVWGZL1zvgxyi7ZIVYWlxKONHmSbHuiOh8Jw==} engines: {node: ^20.19.0 || >=22.12.0} cpu: [x64] os: [linux] + libc: [musl] '@rolldown/binding-openharmony-arm64@1.0.0': resolution: {integrity: sha512-ouJs8VcUomfLfpbUECqFMRqdV4x6aeAK3MA4m6vTrJJjKyWTV5KnxZx7Jd9G+GlDaQQxubcba00x16OyJ1meig==} @@ -394,6 +397,10 @@ packages: commander@2.20.3: resolution: {integrity: sha512-GpVkmM8vF2vQUkj2LvZmD35JxeJOLCwJ9cUkugyk2nuhbv3+mJvpLYYt+0+USMxE+oj+ey/lJEnhZw75x/OMcQ==} + copy-anything@3.0.5: + resolution: {integrity: sha512-yCEafptTtb4bk7GLEQoM8KVJpxAfdBJYaXyzQEgQQQgYrZiDp8SJmGKlYza6CYjEDNstAdNdKA3UuoULlEbS6w==} + engines: {node: '>=12.13'} + css-tree@3.2.1: resolution: {integrity: sha512-X7sjQzceUhu1u7Y/ylrRZFU2FS6LRiFVp6rKLPg23y3x3c3DOKAwuXGDp+PAGjh6CSnCjYeAul8pcT8bAl+lSA==} engines: {node: ^10 || ^12.20.0 || ^14.13.0 || >=15.0.0} @@ -440,6 +447,10 @@ packages: resolution: {integrity: sha512-zwfzJecQ/Uej6tusMqwAqU/6KL2XaB2VZ2Jg54Je6ahNBGNH6Ek6g3jjNCF0fG9EWQKGZNddNjU5F1ZQn/sBnA==} engines: {node: '>=20.19.0'} + errno@0.1.8: + resolution: {integrity: sha512-dJ6oBr5SQ1VSd9qkk7ByRgb/1SH4JZjCHSW/mr63/QcXO9zLVxvJ6Oy13nio03rxpSnVDDjFor75SjVeZWPW/A==} + hasBin: true + estree-walker@2.0.2: resolution: {integrity: sha512-Rfkk/Mp/DL7JVje3u18FxFujQlTNR2q6QfMSMB7AvCBx91NGj/ba3kCfza0f6dVDbw7YlRf/nDrn7pQrCCyQ/w==} @@ -457,6 +468,12 @@ packages: engines: {node: ^8.16.0 || ^10.6.0 || >=11.0.0} os: [darwin] + graceful-fs@4.2.11: + resolution: {integrity: sha512-RbJ5/jmFcNNCcDV5o9eTnBLJ/HszWV0P73bc+Ff4nS/rJj+YaS6IGyiOL0VoBYX+l1Wrl3k63h/KrH+nhJ0XvQ==} + + gsap@3.15.0: + resolution: {integrity: sha512-dMW4CWBTUK1AEEDeZc1g4xpPGIrSf9fJF960qbTZmN/QwZIWY5wgliS6JWl9/25fpTGJrMRtSjGtOmPnfjZB+A==} + hookable@6.1.1: resolution: {integrity: sha512-U9LYDy1CwhMCnprUfeAZWZGByVbhd54hwepegYTK7Pi5NvqEj63ifz5z+xukznehT7i6NIZRu89Ay1AZmRsLEQ==} @@ -480,9 +497,22 @@ packages: resolution: {integrity: sha512-vK9P5/iUfdl95AI+JVyUuIcVtd4ofvtrOr3HNtM2yxC9bnMbEdp3x01OhQNnjb8IJYi38VlTE3mBXwcfvywuSw==} engines: {node: '>= 14'} + iconv-lite@0.6.3: + resolution: {integrity: sha512-4fCk79wshMdzMp2rH06qWrJE4iolqLhCUH+OiuIgU++RB0+94NlDL81atO7GX55uUKueo0txHNtvEyI6D7WdMw==} + engines: {node: '>=0.10.0'} + + image-size@0.5.5: + resolution: {integrity: sha512-6TDAlDPZxUFCv+fuOkIoXT/V/f3Qbq8e37p+YOiYrUv3v9cc3/6x78VdfPgFVaB9dZYeLUfKgHRebpkm/oP2VQ==} + engines: {node: '>=0.10.0'} + hasBin: true + is-potential-custom-element-name@1.0.1: resolution: {integrity: sha512-bCYeRA2rVibKZd+s2625gGnGF/t7DSqDs4dP7CrLA1m7jKWz6pps0LpYLJN8Q64HtmPKJ1hrN3nzPNKFEKOUiQ==} + is-what@4.1.16: + resolution: {integrity: sha512-ZhMwEosbFJkA0YhFnNDgTM4ZxDRsS6HqTo7qsZM08fehyRYIYa0yHu5R6mgo1n/8MgaPBXiPimPD77baVFYg+A==} + engines: {node: '>=12.13'} + jsdom@28.1.0: resolution: {integrity: sha512-0+MoQNYyr2rBHqO1xilltfDjV9G7ymYGlAUazgcDLQaUf8JDHbuGwsxN6U9qWaElZ4w1B2r7yEGIL3GdeW3Rug==} engines: {node: ^20.19.0 || ^22.12.0 || >=24.0.0} @@ -492,6 +522,11 @@ packages: canvas: optional: true + less@4.6.4: + resolution: {integrity: sha512-OJmO5+HxZLLw0RLzkqaNHzcgEAQG7C0y3aMbwtCzIUFZsLMNNq/1IdAdHEycQ58CwUO3jPTHmoN+tE5I7FQxNg==} + engines: {node: '>=18'} + hasBin: true + lightningcss-android-arm64@1.32.0: resolution: {integrity: sha512-YK7/ClTt4kAK0vo6w3X+Pnm0D2cf2vPHbhOXdoNti1Ga0al1P4TBZhwjATvjNwLEBCnKvjJc2jQgHXH0NEwlAg==} engines: {node: '>= 12.0.0'} @@ -527,24 +562,28 @@ packages: engines: {node: '>= 12.0.0'} cpu: [arm64] os: [linux] + libc: [glibc] lightningcss-linux-arm64-musl@1.32.0: resolution: {integrity: sha512-UpQkoenr4UJEzgVIYpI80lDFvRmPVg6oqboNHfoH4CQIfNA+HOrZ7Mo7KZP02dC6LjghPQJeBsvXhJod/wnIBg==} engines: {node: '>= 12.0.0'} cpu: [arm64] os: [linux] + libc: [musl] lightningcss-linux-x64-gnu@1.32.0: resolution: {integrity: sha512-V7Qr52IhZmdKPVr+Vtw8o+WLsQJYCTd8loIfpDaMRWGUZfBOYEJeyJIkqGIDMZPwPx24pUMfwSxxI8phr/MbOA==} engines: {node: '>= 12.0.0'} cpu: [x64] os: [linux] + libc: [glibc] lightningcss-linux-x64-musl@1.32.0: resolution: {integrity: sha512-bYcLp+Vb0awsiXg/80uCRezCYHNg1/l3mt0gzHnWV9XP1W5sKa5/TCdGWaR/zBM2PeF/HbsQv/j2URNOiVuxWg==} engines: {node: '>= 12.0.0'} cpu: [x64] os: [linux] + libc: [musl] lightningcss-win32-arm64-msvc@1.32.0: resolution: {integrity: sha512-8SbC8BR40pS6baCM8sbtYDSwEVQd4JlFTOlaD3gWGHfThTcABnNDBda6eTZeqbofalIJhFx0qKzgHJmcPTnGdw==} @@ -572,9 +611,18 @@ packages: magic-string@0.30.21: resolution: {integrity: sha512-vd2F4YUyEXKGcLHoq+TEyCjxueSeHnFxyyjNp80yg0XV4vUhnDer/lvvlqM/arB5bXQN5K2/3oinyCRyx8T2CQ==} + make-dir@2.1.0: + resolution: {integrity: sha512-LS9X+dc8KLxXCb8dni79fLIIUA5VyZoyjSMCwTluaXA0o27cCK0bhXkpgw+sTXVpPy/lSO57ilRixqk0vDmtRA==} + engines: {node: '>=6'} + mdn-data@2.27.1: resolution: {integrity: sha512-9Yubnt3e8A0OKwxYSXyhLymGW4sCufcLG6VdiDdUGVkPhpqLxlvP5vl1983gQjJl3tqbrM731mjaZaP68AgosQ==} + mime@1.6.0: + resolution: {integrity: sha512-x0Vn8spI+wuJ1O6S7gnbaQg8Pxh4NNHb7KSINmEWKiPE4RKOplvijn+NkmYmmRgP68mc70j2EbeTFRsrswaQeg==} + engines: {node: '>=4'} + hasBin: true + ms@2.1.3: resolution: {integrity: sha512-6FlzubTLZG3J2a/NVCAleEhjzq5oxgHyaCU9yYXvcLsvoVaHJq/s5xXI6/XXP6tz7R9xAOtHnSO/tXtF3WRTlA==} @@ -586,12 +634,21 @@ packages: engines: {node: ^10 || ^12 || ^13.7 || ^14 || >=15.0.1} hasBin: true + needle@3.5.0: + resolution: {integrity: sha512-jaQyPKKk2YokHrEg+vFDYxXIHTCBgiZwSHOoVx/8V3GIBS8/VN6NdVRmg8q1ERtPkMvmOvebsgga4sAj5hls/w==} + engines: {node: '>= 4.4.x'} + hasBin: true + no-case@3.0.4: resolution: {integrity: sha512-fgAN3jGAh+RoxUGZHTSOLJIqUc2wmoBwGR4tbpNAKmmovFoWq0OdRkb0VkldReO2a2iBT/OEulG9XSUc10r3zg==} param-case@3.0.4: resolution: {integrity: sha512-RXlj7zCYokReqWpOPH9oYivUzLYZ5vAPIfEmCTNViosC78F8F0H9y7T7gG2M39ymgutxF5gcFEsyZQSph9Bp3A==} + parse-node-version@1.0.1: + resolution: {integrity: sha512-3YHlOa/JgH6Mnpr05jP9eDG254US9ek25LyIxZlDItp2iJtwyaXQb57lBYLdT3MowkUFYEV2XXNAYIPlESvJlA==} + engines: {node: '>= 0.10'} + parse5@8.0.1: resolution: {integrity: sha512-z1e/HMG90obSGeidlli3hj7cbocou0/wa5HacvI3ASx34PecNjNQeaHNo5WIZpWofN9kgkqV1q5YvXe3F0FoPw==} @@ -608,10 +665,17 @@ packages: resolution: {integrity: sha512-QP88BAKvMam/3NxH6vj2o21R6MjxZUAd6nlwAS/pnGvN9IVLocLHxGYIzFhg6fUQ+5th6P4dv4eW9jX3DSIj7A==} engines: {node: '>=12'} + pify@4.0.1: + resolution: {integrity: sha512-uB80kBFb/tfd68bVleG9T5GGsGPjJrLAUpR5PZIrhBnIaRTQRjqdJSsIKkOP6OAIFbj7GOrcudc5pNjZ+geV2g==} + engines: {node: '>=6'} + postcss@8.5.14: resolution: {integrity: sha512-SoSL4+OSEtR99LHFZQiJLkT59C5B1amGO1NzTwj7TT1qCUgUO6hxOvzkOYxD+vMrXBM3XJIKzokoERdqQq/Zmg==} engines: {node: ^10 || ^12 || >=14} + prr@1.0.1: + resolution: {integrity: sha512-yPw4Sng1gWghHQWj0B3ZggWUm4qVbPwPFcRG8KyxiU7J2OHFSoEHKS+EZ3fv5l1t9CyCiop6l/ZYeWbrgoQejw==} + punycode@2.3.1: resolution: {integrity: sha512-vYt7UD1U9Wg6138shLtLOvdAu+8DsC/ilFtEVHcH+wydcSpNE20AfSOduf6MkRFahL5FY7X1oU7nKVZFtfq8Fg==} engines: {node: '>=6'} @@ -629,10 +693,21 @@ packages: engines: {node: ^20.19.0 || >=22.12.0} hasBin: true + safer-buffer@2.1.2: + resolution: {integrity: sha512-YZo3K82SD7Riyi0E1EQPojLz7kpepnSQI9IyPbHHg1XXXevb5dJI7tpyN2ADxGcQbHG7vcyRHk0cbwqcQriUtg==} + + sax@1.6.0: + resolution: {integrity: sha512-6R3J5M4AcbtLUdZmRv2SygeVaM7IhrLXu9BmnOGmmACak8fiUtOsYNWUS4uK7upbmHIBbLBeFeI//477BKLBzA==} + engines: {node: '>=11.0.0'} + saxes@6.0.0: resolution: {integrity: sha512-xAg7SOnEhrm5zI3puOOKyy1OMcMlIJZYNJY7xLBwSze0UjhPLnWfj2GF2EpT0jmzaJKIWKHLsaSSajf35bcYnA==} engines: {node: '>=v12.22.7'} + semver@5.7.2: + resolution: {integrity: sha512-cBznnQ9KjJqU67B52RMC65CMarK2600WFnbkcaiwWq3xy/5haFJlshgnpjovMVJ+Hff49d8GEn0b87C5pDQ10g==} + hasBin: true + source-map-js@1.2.1: resolution: {integrity: sha512-UXWMKhLOwVKb728IUtQPXxfYU+usdybtUrK/8uGE8CQMvrhOpwvzDBwj0QhSL7MQc7vIsISBG8VQ8+IDQxpfQA==} engines: {node: '>=0.10.0'} @@ -1000,10 +1075,10 @@ snapshots: unhead: 2.1.15 vue: 3.5.34(typescript@6.0.3) - '@vitejs/plugin-vue@6.0.6(vite@8.0.12(@types/node@24.12.4)(terser@5.47.1))(vue@3.5.34(typescript@6.0.3))': + '@vitejs/plugin-vue@6.0.6(vite@8.0.12(@types/node@24.12.4)(less@4.6.4)(terser@5.47.1))(vue@3.5.34(typescript@6.0.3))': dependencies: '@rolldown/pluginutils': 1.0.0-rc.13 - vite: 8.0.12(@types/node@24.12.4)(terser@5.47.1) + vite: 8.0.12(@types/node@24.12.4)(less@4.6.4)(terser@5.47.1) vue: 3.5.34(typescript@6.0.3) '@volar/language-core@2.4.28': @@ -1118,6 +1193,10 @@ snapshots: commander@2.20.3: {} + copy-anything@3.0.5: + dependencies: + is-what: 4.1.16 + css-tree@3.2.1: dependencies: mdn-data: 2.27.1 @@ -1158,6 +1237,11 @@ snapshots: entities@8.0.0: {} + errno@0.1.8: + dependencies: + prr: 1.0.1 + optional: true + estree-walker@2.0.2: {} fdir@6.5.0(picomatch@4.0.4): @@ -1167,6 +1251,11 @@ snapshots: fsevents@2.3.3: optional: true + graceful-fs@4.2.11: + optional: true + + gsap@3.15.0: {} + hookable@6.1.1: {} html-encoding-sniffer@6.0.0: @@ -1203,8 +1292,18 @@ snapshots: transitivePeerDependencies: - supports-color + iconv-lite@0.6.3: + dependencies: + safer-buffer: 2.1.2 + optional: true + + image-size@0.5.5: + optional: true + is-potential-custom-element-name@1.0.1: {} + is-what@4.1.16: {} + jsdom@28.1.0: dependencies: '@acemir/cssom': 0.9.31 @@ -1232,6 +1331,19 @@ snapshots: - '@noble/hashes' - supports-color + less@4.6.4: + dependencies: + copy-anything: 3.0.5 + parse-node-version: 1.0.1 + optionalDependencies: + errno: 0.1.8 + graceful-fs: 4.2.11 + image-size: 0.5.5 + make-dir: 2.1.0 + mime: 1.6.0 + needle: 3.5.0 + source-map: 0.6.1 + lightningcss-android-arm64@1.32.0: optional: true @@ -1291,14 +1403,29 @@ snapshots: dependencies: '@jridgewell/sourcemap-codec': 1.5.5 + make-dir@2.1.0: + dependencies: + pify: 4.0.1 + semver: 5.7.2 + optional: true + mdn-data@2.27.1: {} + mime@1.6.0: + optional: true + ms@2.1.3: {} muggle-string@0.4.1: {} nanoid@3.3.12: {} + needle@3.5.0: + dependencies: + iconv-lite: 0.6.3 + sax: 1.6.0 + optional: true + no-case@3.0.4: dependencies: lower-case: 2.0.2 @@ -1309,6 +1436,8 @@ snapshots: dot-case: 3.0.4 tslib: 2.8.1 + parse-node-version@1.0.1: {} + parse5@8.0.1: dependencies: entities: 8.0.0 @@ -1324,12 +1453,18 @@ snapshots: picomatch@4.0.4: {} + pify@4.0.1: + optional: true + postcss@8.5.14: dependencies: nanoid: 3.3.12 picocolors: 1.1.1 source-map-js: 1.2.1 + prr@1.0.1: + optional: true + punycode@2.3.1: {} relateurl@0.2.7: {} @@ -1357,10 +1492,19 @@ snapshots: '@rolldown/binding-win32-arm64-msvc': 1.0.0 '@rolldown/binding-win32-x64-msvc': 1.0.0 + safer-buffer@2.1.2: + optional: true + + sax@1.6.0: + optional: true + saxes@6.0.0: dependencies: xmlchars: 2.2.0 + semver@5.7.2: + optional: true + source-map-js@1.2.1: {} source-map-support@0.5.21: @@ -1412,7 +1556,7 @@ snapshots: vite-ssg-sitemap@0.10.0: {} - vite-ssg@28.3.0(unhead@2.1.15)(vite@8.0.12(@types/node@24.12.4)(terser@5.47.1))(vue-router@4.6.4(vue@3.5.34(typescript@6.0.3)))(vue@3.5.34(typescript@6.0.3)): + vite-ssg@28.3.0(unhead@3.1.0(vite@8.0.12(@types/node@24.12.4)(terser@5.47.1)))(vite@8.0.12(@types/node@24.12.4)(terser@5.47.1))(vue-router@4.6.4(vue@3.5.34(typescript@6.0.3)))(vue@3.5.34(typescript@6.0.3)): dependencies: '@unhead/dom': 2.1.15(unhead@2.1.15) '@unhead/vue': 2.1.15(vue@3.5.34(typescript@6.0.3)) @@ -1421,7 +1565,7 @@ snapshots: html-minifier-terser: 7.2.0 html5parser: 2.0.2 jsdom: 28.1.0 - vite: 8.0.12(@types/node@24.12.4)(terser@5.47.1) + vite: 8.0.12(@types/node@24.12.4)(less@4.6.4)(terser@5.47.1) vue: 3.5.34(typescript@6.0.3) optionalDependencies: vue-router: 4.6.4(vue@3.5.34(typescript@6.0.3)) @@ -1431,7 +1575,7 @@ snapshots: - supports-color - unhead - vite@8.0.12(@types/node@24.12.4)(terser@5.47.1): + vite@8.0.12(@types/node@24.12.4)(less@4.6.4)(terser@5.47.1): dependencies: lightningcss: 1.32.0 picomatch: 4.0.4 @@ -1441,6 +1585,7 @@ snapshots: optionalDependencies: '@types/node': 24.12.4 fsevents: 2.3.3 + less: 4.6.4 terser: 5.47.1 vscode-uri@3.1.0: {} diff --git a/src/App.vue b/src/App.vue index a43d49c..29423ef 100644 --- a/src/App.vue +++ b/src/App.vue @@ -1,7 +1,25 @@ + diff --git a/src/assets/css/style.css b/src/assets/css/style.css new file mode 100644 index 0000000..81beb9e --- /dev/null +++ b/src/assets/css/style.css @@ -0,0 +1,151 @@ +body, +html, +div, +ul, +li, +h1, +h2, +h3, +p { + margin: 0; + padding: 0; +} +* { + box-sizing: border-box; +} +html, +body, +#app { + width: 100%; + height: 100%; + overflow: hidden; + font-family: 'KaiseiOpti-Medium'; + color: #232323; +} +@keyframes loading { + 0% { + transform: rotate(0deg); + } + 100% { + transform: rotate(360deg); + } +} +@keyframes opacity-in { + 0% { + opacity: 0; + } + 100% { + opacity: 1; + } +} +@keyframes z-index-10to-1 { + 0% { + z-index: 10; + } + 100% { + z-index: -1; + } +} +.flex { + display: flex; +} +.flex-center { + justify-content: center; + align-items: center; +} +.flex-1 { + flex: 1; +} +.flex-col { + flex-direction: column; +} +.align-center { + align-items: center; +} +.space-between { + justify-content: space-between; +} +.justify-center { + justify-content: center; +} +.relative { + position: relative; +} +.el-overlay { + --el-color-primary: #ff7a51; + --el-color-primary-light-3: #ffa785; + --el-color-primary-light-5: #ffc2aa; + --el-color-primary-light-7: #ffddcf; + --el-color-primary-light-8: #ffe8df; + --el-color-primary-light-9: #fff2ec; + --el-color-primary-dark-2: #cc6241; +} +.el-select, +.el-popper { + --el-color-primary: #6c6c6c; + /* 主灰色 */ + --el-color-primary-light-3: #8a8a8a; + /* 较浅的灰色（混合20%白） */ + --el-color-primary-light-5: #a8a8a8; + /* 更浅的灰色（混合33%白） */ + --el-color-primary-light-7: #c6c6c6; + /* 浅灰色（混合47%白） */ + --el-color-primary-light-8: #d4d4d4; + /* 很浅的灰色（混合53%白） */ + --el-color-primary-light-9: #e3e3e3; + /* 极浅的灰色（混合60%白） */ + --el-color-primary-dark-2: #565656; + /* 深灰色（加深20%） */ +} +.mini-scrollbar { + --mini-scrollbar-width: 0.4rem; +} +.mini-scrollbar::-webkit-scrollbar { + width: var(--mini-scrollbar-width); +} +.mini-scrollbar::-webkit-scrollbar-thumb { + border-radius: 0.4rem; + background: rgba(0, 0, 0, 0.2); +} +.mosaic-bg { + --mosaic-bg-size: 1rem; + --mosaic-bg-color1: #efefef; + --mosaic-bg-color2: #fff; + background-image: repeating-conic-gradient(var(--mosaic-bg-color1) 0% 25%, var(--mosaic-bg-color2) 0% 50%); + background-repeat: repeat; + background-position: 50% 50%; + background-size: var(--mosaic-bg-size) var(--mosaic-bg-size); +} +button[custom], +button[custom="white"] { + min-width: 19.4rem; + height: 5rem; + padding: 0 1rem; + border-radius: 0; + font-family: KaiseiOpti-Bold; + font-size: var(--button-font-size, 2rem); + color: var(--button-color, #232323); + background: var(--button-bgcolor, #fff); + border: var(--button-border, none); + cursor: pointer; +} +button[custom]:active, +button[custom="white"]:active { + background: var(--button-click-bgcolor, #e4e4e4); + color: var(--button-click-color, #232323); +} +button[custom="black"] { + --button-bgcolor: #232323; + --button-color: #fff; + --button-click-bgcolor: #333; + --button-click-color: #fff; + --button-font-size: 1.6rem; +} +button[custom="black-box"] { + --button-bgcolor: transparent; + --button-color: #232323; + --button-border: 0.2rem solid #979797; + --button-click-bgcolor: #979797; + --button-click-color: #fff; + --button-font-size: 1.6rem; +} diff --git a/src/assets/css/style.less b/src/assets/css/style.less new file mode 100644 index 0000000..23f75a9 --- /dev/null +++ b/src/assets/css/style.less @@ -0,0 +1,180 @@ +body, +html, +div, +ul, +li, +h1, +h2, +h3, +p { + margin: 0; + padding: 0; +} + +* { + box-sizing: border-box; +} + +html, +body, +#app { + width: 100%; + height: 100%; + overflow: hidden; + font-family: 'KaiseiOpti-Medium'; + color: #232323; +} + +@keyframes loading { + 0% { + transform: rotate(0deg); + } + + 100% { + transform: rotate(360deg); + } +} + +@keyframes opacity-in { + 0% { + opacity: 0; + } + + 100% { + opacity: 1; + } +} + +@keyframes z-index-10to-1 { + 0% { + z-index: 10; + } + + 100% { + z-index: -1; + } +} + +.flex { + display: flex; +} + +.flex-center { + justify-content: center; + align-items: center; +} + +.flex-1 { + flex: 1; +} + +.flex-col { + flex-direction: column; +} + +.align-center { + align-items: center; +} + +.space-between { + justify-content: space-between; +} + +.justify-center { + justify-content: center; +} + +.relative { + position: relative; +} + +.el-overlay { + --el-color-primary: #ff7a51; // 主橙红色 + --el-color-primary-light-3: #ffa785; // 较浅的橙红（混合20%白） + --el-color-primary-light-5: #ffc2aa; // 更浅的橙红（混合33%白） + --el-color-primary-light-7: #ffddcf; // 浅橙红（混合47%白） + --el-color-primary-light-8: #ffe8df; // 很浅的橙红（混合53%白） + --el-color-primary-light-9: #fff2ec; // 极浅的橙红（混合60%白） + --el-color-primary-dark-2: #cc6241; // 深橙红（加深20%） +} + +.el-select, +.el-popper { + --el-color-primary: #6c6c6c; + /* 主灰色 */ + --el-color-primary-light-3: #8a8a8a; + /* 较浅的灰色（混合20%白） */ + --el-color-primary-light-5: #a8a8a8; + /* 更浅的灰色（混合33%白） */ + --el-color-primary-light-7: #c6c6c6; + /* 浅灰色（混合47%白） */ + --el-color-primary-light-8: #d4d4d4; + /* 很浅的灰色（混合53%白） */ + --el-color-primary-light-9: #e3e3e3; + /* 极浅的灰色（混合60%白） */ + --el-color-primary-dark-2: #565656; + /* 深灰色（加深20%） */ +} + + +// 迷你滚动条 +.mini-scrollbar { + --mini-scrollbar-width: 0.4rem; + + &::-webkit-scrollbar { + width: var(--mini-scrollbar-width); + } + + &::-webkit-scrollbar-thumb { + border-radius: 0.4rem; + background: rgba(0, 0, 0, 0.2); + } +} + +.mosaic-bg { + --mosaic-bg-size: 1rem; + --mosaic-bg-color1: #efefef; + --mosaic-bg-color2: #fff; + background-image: repeating-conic-gradient(var(--mosaic-bg-color1) 0% 25%, var(--mosaic-bg-color2) 0% 50%); + background-repeat: repeat; + background-position: 50% 50%; + background-size: var(--mosaic-bg-size) var(--mosaic-bg-size); +} + + +// 自定义button按钮 +button[custom], +button[custom="white"] { + min-width: 19.4rem; + height: 5rem; + padding: 0 1rem; + border-radius: 0; + font-family: KaiseiOpti-Bold; + font-size: var(--button-font-size, 2rem); + color: var(--button-color, #232323); + background: var(--button-bgcolor, #fff); + border: var(--button-border, none); + cursor: pointer; + + &:active { + background: var(--button-click-bgcolor, #e4e4e4); + color: var(--button-click-color, #232323); + } +} + +button[custom="black"] { + --button-bgcolor: #232323; + --button-color: #fff; + --button-click-bgcolor: #333; + --button-click-color: #fff; + --button-font-size: 1.6rem; +} + +button[custom="black-box"] { + --button-bgcolor: transparent; + --button-color: #232323; + --button-border: 0.2rem solid #979797; + --button-click-bgcolor: #979797; + --button-click-color: #fff; + --button-font-size: 1.6rem; +} \ No newline at end of file diff --git a/src/components/back-top.vue b/src/components/back-top.vue new file mode 100644 index 0000000..adad669 --- /dev/null +++ b/src/components/back-top.vue @@ -0,0 +1,82 @@ + + + + diff --git a/src/components/main-footer.vue b/src/components/main-footer.vue new file mode 100644 index 0000000..bb55661 --- /dev/null +++ b/src/components/main-footer.vue @@ -0,0 +1,25 @@ + + + \ No newline at end of file diff --git a/src/components/main-header.vue b/src/components/main-header.vue new file mode 100644 index 0000000..ca693b6 --- /dev/null +++ b/src/components/main-header.vue @@ -0,0 +1,82 @@ + + + \ No newline at end of file diff --git a/src/directives/index.ts b/src/directives/index.ts new file mode 100644 index 0000000..bce0185 --- /dev/null +++ b/src/directives/index.ts @@ -0,0 +1,10 @@ +import type { App } from 'vue' + +export default { + install(app: App) { + const directivesList = import.meta.glob('./*.ts', { eager: true }) as any; + Object.keys(directivesList).forEach(key => { + app.directive(directivesList[key].default.name, directivesList[key].default); + }); + } +}; \ No newline at end of file diff --git a/src/directives/scroll-progress.ts b/src/directives/scroll-progress.ts new file mode 100644 index 0000000..7afa5cf --- /dev/null +++ b/src/directives/scroll-progress.ts @@ -0,0 +1,63 @@ +/** + * 监听滚动条 滚动进度变化 + * v-scroll-progress.self="(p) => console.log(p)" + * @modifiers self 监听当前元素的滚动进度变化 + * @param params 滚动进度回调函数 + * @param p 滚动进度 + */ +const rootMap = new Map() +export default { + name: 'scroll-progress', + mounted(el: HTMLElement, binding: any) { + const params = binding.value + const { self } = binding.modifiers + const paramsType = typeof params + const obj = { + onscroll: () => { }, + el, + root: self ? el : document, + activeNum: 0, + }; + if (paramsType === 'function') { + obj.onscroll = params + } else if (paramsType === 'object') { + if (params.onscroll) obj.onscroll = params.onscroll + if (params.GetRoot) obj.root = params.GetRoot() + if (params.hasOwnProperty('activeNum')) obj.activeNum = params.activeNum + } + requestAnimationFrame(() => handleScroll({ target: obj.root })) + if (rootMap.has(obj.root)) { + rootMap.get(obj.root).push(obj) + return + } + rootMap.set(obj.root, [obj]) + obj.root.addEventListener('scroll', handleScroll) + }, + beforeUnmount(el: HTMLElement, binding: any) { + rootMap.forEach((objs, root) => { + if (objs.some((v: any) => v.el === el)) { + objs = objs.filter((v_: any) => v_.el !== el) + rootMap.set(root, objs) + } + if (objs.length === 0) { + root.removeEventListener('scroll', handleScroll) + rootMap.delete(root) + } + }) + }, +}; +function handleScroll(e: any) { + const target = e.target + const objs = rootMap.get(target) + if (!objs || objs.length === 0) return + const el = target === document ? document.documentElement : target as HTMLElement + const num = el.scrollTop / (el.scrollHeight - el.clientHeight); + const progress = Math.round(num * 100) + objs.forEach((obj: any) => { + obj?.onscroll(progress) + if (obj.el) { + let isActive = progress > obj.activeNum + obj.el.classList.toggle('active', isActive) + } + }) +}; \ No newline at end of file diff --git a/src/directives/tween-animation.ts b/src/directives/tween-animation.ts new file mode 100644 index 0000000..239dea7 --- /dev/null +++ b/src/directives/tween-animation.ts @@ -0,0 +1,29 @@ +import { gsap, } from 'gsap' +import { ScrollTrigger } from 'gsap/ScrollTrigger' +export default { + name: 'tween-animation', + mounted(el: HTMLElement, binding: any) { + // if(!binding.value.isGsap)return + let dom = document.querySelector('body') + gsap.registerPlugin(ScrollTrigger); + let tl1 = gsap.timeline(); + tl1.from(el,1, {y:'30px',opacity:0},) + ScrollTrigger.create({ + trigger: el, // 触发器元素 + start: "top 90%", // 滚动触发器的起始滚动位置 + end: '100% 80%', // 滚动触发器的结束滚动位置 + markers: false, // 开启标注功能 + animation:tl1, + scroller:dom,//设置指定元素为滚动依据 + scrub:2, + // onUpdate:(v)=>{ + // if(v.progress < 0.1){ + // v.trigger?.classList.remove('active') + // }else{ + // v.trigger?.classList.add('active') + // // v.trigger?.classList.add('active') + // } + // } + }); + }, +}; \ No newline at end of file diff --git a/src/main.ts b/src/main.ts index 8e2fcdc..1052f22 100644 --- a/src/main.ts +++ b/src/main.ts @@ -2,8 +2,14 @@ import { ViteSSG } from 'vite-ssg' import App from './App.vue' import { routes } from './routes' import './style.css' +import directives from './directives/index' export const createApp = ViteSSG(App, { - routes, - base: import.meta.env.BASE_URL, -}) + routes, + base: import.meta.env.BASE_URL, + }, + ({ app, router, routes, isClient, initialState }) => { + // 注册全局指令 + app.use(directives) + } +) \ No newline at end of file diff --git a/src/pages/ContactView.vue b/src/pages/ContactView.vue index 6db5842..012dc0c 100644 --- a/src/pages/ContactView.vue +++ b/src/pages/ContactView.vue @@ -9,6 +9,106 @@ route by Vite SSG.

Back home +
1
+
2
+
3
+
4
+
5
+
6
+
7
+
8
+
9
+
10
+
11
+
12
+
13
+
14
+
15
+
16
+
17
+
18
+
19
+
20
+
21
+
22
+
23
+
24
+
25
+
26
+
27
+
28
+
29
+
30
+
31
+
32
+
33
+
34
+
35
+
36
+
37
+
38
+
39
+
40
+
41
+
42
+
43
+
44
+
45
+
46
+
47
+
48
+
49
+
50
+
51
+
52
+
53
+
54
+
55
+
56
+
57
+
58
+
59
+
60
+
61
+
62
+
63
+
64
+
65
+
66
+
67
+
68
+
69
+
70
+
71
+
72
+
73
+
74
+
75
+
76
+
77
+
78
+
79
+
80
+
81
+
82
+
83
+
84
+
85
+
86
+
87
+
88
+
89
+
90
+
91
+
92
+
93
+
94
+
95
+
96
+
97
+
98
+
99
+
100
diff --git a/src/pages/about-us/index.vue b/src/pages/about-us/index.vue new file mode 100644 index 0000000..89fd017 --- /dev/null +++ b/src/pages/about-us/index.vue @@ -0,0 +1,30 @@ + + + \ No newline at end of file diff --git a/src/pages/about-us/product.vue b/src/pages/about-us/product.vue new file mode 100644 index 0000000..7472a97 --- /dev/null +++ b/src/pages/about-us/product.vue @@ -0,0 +1,30 @@ + + + \ No newline at end of file diff --git a/src/pages/about-us/video.vue b/src/pages/about-us/video.vue new file mode 100644 index 0000000..93eda4a --- /dev/null +++ b/src/pages/about-us/video.vue @@ -0,0 +1,25 @@ + + + \ No newline at end of file diff --git a/src/routes.ts b/src/routes.ts index 1d52d4d..649fd3d 100644 --- a/src/routes.ts +++ b/src/routes.ts @@ -5,24 +5,29 @@ import HomeView from './pages/home/index.vue' import ProductsView from './pages/ProductsView.vue' export const routes: RouteRecordRaw[] = [ - { - path: '/', - name: 'home', - component: HomeView, - }, - { - path: '/about', - name: 'about', - component: AboutView, - }, - { - path: '/products', - name: 'products', - component: ProductsView, - }, - { - path: '/contact', - name: 'contact', - component: ContactView, - }, + { + path: '/:lang?', + children: [ + { + path: '', + component: HomeView, + alias: ['/:lang?', '/:lang?/home'], + + }, + { + path: 'about', + component: AboutView, + }, + { + path: 'products', + name: 'products', + component: ProductsView, + }, + { + path: 'contact', + name: 'contact', + component: ContactView, + }, + ], + }, ] diff --git a/vite.config.ts b/vite.config.ts index 3387961..04b94b8 100644 --- a/vite.config.ts +++ b/vite.config.ts @@ -3,6 +3,7 @@ import type { ViteSSGOptions } from 'vite-ssg' import { defineConfig } from 'vite' import vue from '@vitejs/plugin-vue' import generateSitemap from 'vite-ssg-sitemap' +import { fileURLToPath, URL } from 'node:url' // https://vite.dev/config/ const config = { @@ -24,7 +25,13 @@ const config = { outDir: 'dist' }) } - } + }, + resolve: { + alias: { + '@': fileURLToPath(new URL('./src', import.meta.url)), + _c: fileURLToPath(new URL('./src/components', import.meta.url)) + } + }, } satisfies UserConfig & { ssgOptions: ViteSSGOptions } export default defineConfig(config)