·

2025-12-24 20:16:58 +08:00 · 2025-12-24 20:16:58 +08:00 · 8157cdd6f3
commit 8157cdd6f3
parent 5fa543dc45
68 changed files with 3241 additions and 9 deletions
--- a/.gitignore
+++ b/.gitignore
@ -1,11 +1,24 @@
-# ---> Vue
-# gitignore template for Vue.js projects
-#
-# Recommended template: Node.gitignore
+# Logs
+logs
+*.log
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+pnpm-debug.log*
+lerna-debug.log*

-# TODO: where does this rule come from?
-docs/_book
-
-# TODO: where does this rule come from?
-test/
+node_modules
+dist
+dist-ssr
+*.local

+# Editor directories and files
+.vscode/*
+!.vscode/extensions.json
+.idea
+.DS_Store
+*.suo
+*.ntvs*
+*.njsproj
+*.sln
+*.sw?
--- a/.vscode/extensions.json
+++ b/.vscode/extensions.json
@ -0,0 +1,3 @@
+{
+  "recommendations": ["Vue.volar"]
+}
--- a/index.html
+++ b/index.html
@ -0,0 +1,16 @@
+<!doctype html>
+<html lang="en">
+
+<head>
+  <meta charset="UTF-8" />
+  <link rel="icon" type="image/svg+xml" href="/vite.svg" />
+  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  <title>Engintel</title>
+</head>
+
+<body>
+  <div id="app"></div>
+  <script type="module" src="/src/main.ts"></script>
+</body>
+
+</html>
--- a/package-lock.json
+++ b/package-lock.json
--- a/package.json
+++ b/package.json
@ -0,0 +1,22 @@
+{
+  "name": "web1",
+  "private": true,
+  "version": "0.0.0",
+  "type": "module",
+  "scripts": {
+    "dev": "vite",
+    "build": "vue-tsc -b && vite build",
+    "preview": "vite preview"
+  },
+  "dependencies": {
+    "swiper": "^11.1.14",
+    "vue": "^3.4.37"
+  },
+  "devDependencies": {
+    "@types/node": "^22.5.5",
+    "@vitejs/plugin-vue": "^5.1.2",
+    "typescript": "^5.5.3",
+    "vite": "^5.4.1",
+    "vue-tsc": "^2.0.29"
+  }
+}
--- a/public/vite.svg
+++ b/public/vite.svg
@ -0,0 +1,15 @@
+<svg width="32" height="48" viewBox="0 0 32 48" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g clip-path="url(#clip0_7_15)">
+<path opacity="0.9" d="M0 45.175L10.6667 48V42.3583L0 45.175Z" fill="#494973"/>
+<path opacity="0.9" d="M0 31.0583L10.6667 33.8833V28.2417L0 31.0583Z" fill="#494973"/>
+<path opacity="0.9" d="M0 16.9417L10.6667 19.7667V14.125L0 16.9417Z" fill="#494973"/>
+<path opacity="0.7" d="M32 28.2333L0 36.7083V45.175L32 36.7083V28.2333Z" fill="#494973"/>
+<path opacity="0.7" d="M21.3333 16.9417L0 22.5917V31.0583L21.3333 25.4083V16.9417Z" fill="#494973"/>
+<path opacity="0.7" d="M32 0L0 8.46667V16.9417L32 8.46667V0Z" fill="#494973"/>
+</g>
+<defs>
+<clipPath id="clip0_7_15">
+<rect width="32" height="48" fill="#494973"/>
+</clipPath>
+</defs>
+</svg>
--- a/src/App.vue
+++ b/src/App.vue
@ -0,0 +1,26 @@
+<script setup lang="ts">
+import Index from './pages/index/Index.vue'
+// import SwiperWin from './components/swiper/SwiperWin.vue'
+</script>
+
+<template>
+  <div>
+    <Index />
+    <!-- <SwiperWin /> -->
+  </div>
+</template>
+
+<style scoped>
+/* .logo {
+  height: 6em;
+  padding: 1.5em;
+  will-change: filter;
+  transition: filter 300ms;
+}
+.logo:hover {
+  filter: drop-shadow(0 0 2em #646cffaa);
+}
+.logo.vue:hover {
+  filter: drop-shadow(0 0 2em #42b883aa);
+} */
+</style>
--- a/src/assets/fonts/DINCond-Bold.otf
+++ b/src/assets/fonts/DINCond-Bold.otf
--- a/src/assets/imgs/Aboutus.jpg
+++ b/src/assets/imgs/Aboutus.jpg
--- a/src/assets/imgs/Close.svg
+++ b/src/assets/imgs/Close.svg
@ -0,0 +1,3 @@
+<svg width="31" height="30" viewBox="0 0 31 30" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M15.5001 18.3848L21.157 24.0416L24.6925 20.5061L19.0357 14.8492L24.6925 9.19239L21.157 5.65686L15.5001 11.3137L9.84327 5.65686L6.30773 9.19239L11.9646 14.8492L6.30773 20.5061L9.84327 24.0416L15.5001 18.3848Z" fill="#D9D9D9"/>
+</svg>
--- a/src/assets/imgs/Close2.svg
+++ b/src/assets/imgs/Close2.svg
@ -0,0 +1,3 @@
+<svg width="48" height="48" viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M24.4558 30.5167L34.1533 40.2142L40.2142 34.1533L30.5167 24.4558L40.2142 14.7584L34.1533 8.69745L24.4558 18.3949L14.7584 8.69748L8.69748 14.7584L18.3949 24.4558L8.69742 34.1533L14.7583 40.2142L24.4558 30.5167Z" fill="#D9D9D9"/>
+</svg>
--- a/src/assets/imgs/ClosePurple.svg
+++ b/src/assets/imgs/ClosePurple.svg
@ -0,0 +1,3 @@
+<svg width="48" height="48" viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M24.4558 30.5167L34.1533 40.2142L40.2142 34.1533L30.5167 24.4558L40.2142 14.7584L34.1533 8.69745L24.4558 18.3949L14.7584 8.69748L8.69748 14.7584L18.3949 24.4558L8.69742 34.1533L14.7583 40.2142L24.4558 30.5167Z" fill="#491973"/>
+</svg>
--- a/src/assets/imgs/Down
+++ b/src/assets/imgs/Down
@ -0,0 +1,3 @@
+<svg width="30" height="19" viewBox="0 0 30 19" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M0 3.84924L11.3137 15.163L14.8492 18.6985L18.3848 15.163L29.6985 3.84924L26.163 0.313709L14.8492 11.6274L3.53553 0.31371L0 3.84924Z" fill="#494973"/>
+</svg>
--- a/src/assets/imgs/Down
+++ b/src/assets/imgs/Down
@ -0,0 +1,3 @@
+<svg width="30" height="19" viewBox="0 0 30 19" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M0 3.84924L11.3137 15.163L14.8492 18.6985L18.3848 15.163L29.6985 3.84924L26.163 0.313709L14.8492 11.6274L3.53553 0.31371L0 3.84924Z" fill="#D9D9D9"/>
+</svg>
--- a/src/assets/imgs/Engintel
+++ b/src/assets/imgs/Engintel
--- a/src/assets/imgs/Franchise.jpg
+++ b/src/assets/imgs/Franchise.jpg
--- a/src/assets/imgs/Hotel.svg
+++ b/src/assets/imgs/Hotel.svg
@ -0,0 +1,3 @@
+<svg width="110" height="47" viewBox="0 0 110 47" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M23.2283 46H16.0603V26.032H7.16425V46H-0.00374985V0.431999H7.16425V19.632H16.0603V0.431999H23.2283V46ZM50.1338 29.104C50.1338 34.8 49.8778 39.984 47.7658 42.928C45.7818 45.68 43.0298 46.512 39.7658 46.512C36.5017 46.512 33.7498 45.68 31.7658 42.928C29.6538 39.984 29.3978 34.8 29.3978 29.104C29.3978 23.408 29.6538 18.224 31.7658 15.28C33.7498 12.528 36.5017 11.76 39.7658 11.76C43.0298 11.76 45.7818 12.528 47.7658 15.28C49.8778 18.224 50.1338 23.408 50.1338 29.104ZM43.3498 29.104C43.3498 24.112 43.2858 20.72 42.3898 19.184C41.8138 18.288 40.7898 17.776 39.7658 17.776C38.7418 17.776 37.7178 18.288 37.1418 19.184C36.2458 20.72 36.1818 24.112 36.1818 29.104C36.1818 34.096 36.2458 37.552 37.1418 39.088C37.7178 39.984 38.7418 40.432 39.7658 40.432C40.7898 40.432 41.8138 39.984 42.3898 39.088C43.2858 37.552 43.3498 34.096 43.3498 29.104ZM68.7248 46C65.5248 46 62.8368 45.744 60.5328 43.952C58.4208 42.288 57.1408 39.728 57.1408 35.76V17.456H53.6848V12.272H57.1408V3.632H63.9248V12.272H68.5968V17.456H63.9248V35.376C63.9248 38.512 65.5248 39.92 68.7248 39.92V46ZM93.0073 31.088H79.1193C79.1193 34.928 79.3113 37.872 80.1433 39.088C80.6553 39.856 81.5513 40.432 82.7673 40.432C83.9193 40.432 84.6873 39.92 85.3273 39.088C85.8393 38.448 86.1593 37.104 86.1593 36.08H92.8793C92.7513 38.896 91.9833 41.712 90.0633 43.824C88.3353 45.744 85.7113 46.512 82.7673 46.512C79.6313 46.512 77.5193 45.808 75.4713 43.76C72.5913 40.88 72.3353 35.248 72.3353 29.104C72.3353 22.96 72.5913 17.328 75.4713 14.448C77.5193 12.4 79.9513 11.76 82.7033 11.76C85.5193 11.76 87.9513 12.336 89.9353 14.448C93.1993 17.904 92.9433 24.752 93.0073 31.088ZM86.2233 26.096C86.2233 22.64 86.0312 20.08 85.2633 19.12C84.6873 18.352 83.9193 17.776 82.7033 17.776C81.4873 17.776 80.7193 18.352 80.1433 19.12C79.3753 20.08 79.1193 22.64 79.1193 26.096H86.2233ZM109.747 46C106.611 46 103.987 45.68 101.747 43.952C99.6348 42.352 98.3548 39.792 98.3548 35.76V0.431999H105.139V35.376C105.139 38.384 106.611 39.92 109.747 39.92V46Z" fill="white"/>
+</svg>
--- a/src/assets/imgs/HotelBg.jpg
+++ b/src/assets/imgs/HotelBg.jpg
--- a/src/assets/imgs/ImageMask.svg
+++ b/src/assets/imgs/ImageMask.svg
@ -0,0 +1,3 @@
+<svg width="580" height="300" viewBox="0 0 580 300" fill="none" xmlns="http://www.w3.org/2000/svg">
+<rect width="580" height="300" fill="black" fill-opacity="0.6"/>
+</svg>
--- a/src/assets/imgs/LOGO
+++ b/src/assets/imgs/LOGO
@ -0,0 +1,15 @@
+<svg width="32" height="48" viewBox="0 0 32 48" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g clip-path="url(#clip0_7_15)">
+<path opacity="0.9" d="M0 45.175L10.6667 48V42.3583L0 45.175Z" fill="white"/>
+<path opacity="0.9" d="M0 31.0583L10.6667 33.8833V28.2417L0 31.0583Z" fill="white"/>
+<path opacity="0.9" d="M0 16.9417L10.6667 19.7667V14.125L0 16.9417Z" fill="white"/>
+<path opacity="0.7" d="M32 28.2333L0 36.7083V45.175L32 36.7083V28.2333Z" fill="white"/>
+<path opacity="0.7" d="M21.3333 16.9417L0 22.5917V31.0583L21.3333 25.4083V16.9417Z" fill="white"/>
+<path opacity="0.7" d="M32 0L0 8.46667V16.9417L32 8.46667V0Z" fill="white"/>
+</g>
+<defs>
+<clipPath id="clip0_7_15">
+<rect width="32" height="48" fill="white"/>
+</clipPath>
+</defs>
+</svg>
--- a/src/assets/imgs/Options.svg
+++ b/src/assets/imgs/Options.svg
@ -0,0 +1,5 @@
+<svg width="21" height="23" viewBox="0 0 21 23" fill="none" xmlns="http://www.w3.org/2000/svg">
+<rect width="21" height="5" fill="#D9D9D9"/>
+<rect y="9" width="21" height="5" fill="#D9D9D9"/>
+<rect y="18" width="21" height="5" fill="#D9D9D9"/>
+</svg>
--- a/src/assets/imgs/PROJECTS.svg
+++ b/src/assets/imgs/PROJECTS.svg
@ -0,0 +1,3 @@
+<svg width="215" height="48" viewBox="0 0 215 48" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M24.008 15.256C24.008 24.472 20.936 29.208 12.296 29.208H8.008V47H0.84V1.432H12.296C20.552 1.432 24.008 5.72 24.008 15.256ZM16.84 15.32C16.84 11.288 16.264 7.896 12.424 7.896H8.008V22.744H12.424C16.264 22.744 16.84 19.352 16.84 15.32ZM54.855 47H47.367L41.415 28.312H37.383V47H30.215V1.432H41.735C50.055 1.432 53.383 5.464 53.383 14.872C53.383 20.504 52.231 24.536 48.071 26.776L54.855 47ZM46.215 14.872C46.215 11.096 45.639 7.896 41.799 7.896H37.383V21.848H41.799C45.639 21.848 46.215 18.648 46.215 14.872ZM83.819 24.216C83.819 33.176 83.883 39.832 80.491 43.672C78.571 45.848 76.011 47.512 71.659 47.512C67.307 47.512 64.747 45.848 62.827 43.672C59.435 39.832 59.499 33.176 59.499 24.216C59.499 15.256 59.435 8.6 62.827 4.76C64.747 2.584 67.307 0.919998 71.659 0.919998C76.011 0.919998 78.571 2.584 80.491 4.76C83.883 8.6 83.819 15.256 83.819 24.216ZM76.651 24.216C76.651 15.896 76.459 11.288 75.115 9.112C74.475 8.088 73.387 7.384 71.659 7.384C69.931 7.384 68.907 8.088 68.267 9.112C66.923 11.288 66.667 15.896 66.667 24.216C66.667 32.536 66.923 37.144 68.267 39.32C68.907 40.344 69.931 41.048 71.659 41.048C73.387 41.048 74.475 40.344 75.115 39.32C76.459 37.144 76.651 32.536 76.651 24.216ZM106.315 35.096C106.315 38.744 105.291 41.88 103.179 44.056C101.003 46.36 98.059 47.512 94.027 47.512C90.315 47.512 87.243 46.168 85.067 43.864L90.059 39.064C90.827 40.152 92.363 41.048 94.027 41.048C96.971 41.048 99.147 39 99.147 35.096V1.432H106.315V35.096ZM132.726 47H113.59V1.432H132.726V7.896H120.758V20.824H131.062V27.288H120.758V40.536H132.726V47ZM161.557 34.904C161.429 39 160.085 42.52 157.781 44.632C155.733 46.488 153.301 47.512 149.909 47.512C145.557 47.512 142.997 45.848 141.077 43.672C137.685 39.832 137.749 33.24 137.749 24.28C137.749 15.32 137.685 8.6 141.077 4.76C142.997 2.584 145.557 0.919998 149.909 0.919998C153.365 0.919998 155.797 1.944 157.845 3.864C160.085 5.976 161.365 9.432 161.493 13.464H154.325C154.261 11.8 154.005 10.2 153.237 9.048C152.597 8.024 151.637 7.384 149.909 7.384C148.181 7.384 147.157 8.088 146.517 9.112C145.173 11.288 144.917 15.896 144.917 24.216C144.917 32.536 145.173 37.144 146.517 39.32C147.157 40.344 148.181 41.048 149.909 41.048C151.637 41.048 152.661 40.408 153.301 39.384C154.069 38.232 154.325 36.568 154.389 34.904H161.557ZM187.558 7.896H179.878V47H172.71V7.896H165.094V1.432H187.558V7.896ZM214.731 34.392C214.731 39.064 214.091 42.2 211.787 44.44C209.931 46.232 206.923 47.448 202.891 47.448C198.923 47.448 195.979 46.36 194.059 44.44C191.883 42.264 191.115 39.448 191.115 34.648H198.283C198.283 37.08 198.539 38.616 199.563 39.768C200.203 40.472 201.291 40.984 202.891 40.984C204.555 40.984 205.643 40.536 206.347 39.704C207.307 38.616 207.563 37.08 207.563 34.648C207.563 29.784 206.795 28.568 203.275 27.16L197.835 24.92C193.227 23 191.499 20.504 191.499 13.464C191.499 9.368 192.715 6.04 195.211 3.8C197.195 2.072 199.755 1.048 203.019 1.048C206.667 1.048 209.355 2.008 211.211 3.8C213.579 6.104 214.411 9.368 214.411 13.72H207.243C207.243 11.672 207.115 10.072 206.155 8.856C205.515 8.024 204.491 7.512 202.955 7.512C201.483 7.512 200.587 8.024 199.883 8.792C199.051 9.752 198.667 11.288 198.667 13.272C198.667 16.984 199.243 18.136 202.443 19.416L207.819 21.592C213.259 23.832 214.731 26.712 214.731 34.392Z" fill="#28283E"/>
+</svg>
--- a/src/assets/imgs/Restaurant.jpg
+++ b/src/assets/imgs/Restaurant.jpg
--- a/src/assets/imgs/School.jpg
+++ b/src/assets/imgs/School.jpg
--- a/src/assets/imgs/banners/franchise/1.jpg
+++ b/src/assets/imgs/banners/franchise/1.jpg
--- a/src/assets/imgs/banners/franchise/2.jpg
+++ b/src/assets/imgs/banners/franchise/2.jpg
--- a/src/assets/imgs/banners/franchise/3.jpg
+++ b/src/assets/imgs/banners/franchise/3.jpg
--- a/src/assets/imgs/banners/hotel/1.jpg
+++ b/src/assets/imgs/banners/hotel/1.jpg
--- a/src/assets/imgs/banners/hotel/2.jpg
+++ b/src/assets/imgs/banners/hotel/2.jpg
--- a/src/assets/imgs/banners/hotel/3.jpg
+++ b/src/assets/imgs/banners/hotel/3.jpg
--- a/src/assets/imgs/banners/restaurant/1.jpg
+++ b/src/assets/imgs/banners/restaurant/1.jpg
--- a/src/assets/imgs/banners/restaurant/2.jpg
+++ b/src/assets/imgs/banners/restaurant/2.jpg
--- a/src/assets/imgs/banners/restaurant/3.jpg
+++ b/src/assets/imgs/banners/restaurant/3.jpg
--- a/src/assets/imgs/banners/school/1.jpg
+++ b/src/assets/imgs/banners/school/1.jpg
--- a/src/assets/imgs/banners/school/2.jpg
+++ b/src/assets/imgs/banners/school/2.jpg
--- a/src/assets/imgs/banners/school/3.jpg
+++ b/src/assets/imgs/banners/school/3.jpg
--- a/src/assets/imgs/customers/Coca-Cola
+++ b/src/assets/imgs/customers/Coca-Cola
--- a/src/assets/imgs/customers/Conley
+++ b/src/assets/imgs/customers/Conley
--- a/src/assets/imgs/customers/Customers-Group1.png
+++ b/src/assets/imgs/customers/Customers-Group1.png
--- a/src/assets/imgs/customers/Customers-Group2.png
+++ b/src/assets/imgs/customers/Customers-Group2.png
--- a/src/assets/imgs/customers/Emory
+++ b/src/assets/imgs/customers/Emory
--- a/src/assets/imgs/customers/Florida
+++ b/src/assets/imgs/customers/Florida
--- a/src/assets/imgs/customers/Georgia-Tech-Yellow-Jackets-Logo.jpg
+++ b/src/assets/imgs/customers/Georgia-Tech-Yellow-Jackets-Logo.jpg
--- a/src/assets/imgs/customers/North
+++ b/src/assets/imgs/customers/North
--- a/src/assets/imgs/customers/Rosemont
+++ b/src/assets/imgs/customers/Rosemont
--- a/src/assets/imgs/customers/Syracuse
+++ b/src/assets/imgs/customers/Syracuse
--- a/src/assets/imgs/customers/Towns
+++ b/src/assets/imgs/customers/Towns
--- a/src/assets/imgs/customers/jw-marriott-logo.jpg
+++ b/src/assets/imgs/customers/jw-marriott-logo.jpg
--- a/src/assets/imgs/index.jpg
+++ b/src/assets/imgs/index.jpg
--- a/src/assets/vue.svg
+++ b/src/assets/vue.svg
@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="iconify iconify--logos" width="37.07" height="36" preserveAspectRatio="xMidYMid meet" viewBox="0 0 256 198"><path fill="#41B883" d="M204.8 0H256L128 220.8L0 0h97.92L128 51.2L157.44 0h47.36Z"></path><path fill="#41B883" d="m0 0l128 220.8L256 0h-51.2L128 132.48L50.56 0H0Z"></path><path fill="#35495E" d="M50.56 0L128 133.12L204.8 0h-47.36L128 51.2L97.92 0H50.56Z"></path></svg>
--- a/src/components/HelloWorld.vue
+++ b/src/components/HelloWorld.vue
@ -0,0 +1,41 @@
+<script setup lang="ts">
+import { ref } from 'vue'
+
+defineProps<{ msg: string }>()
+
+const count = ref(0)
+</script>
+
+<template>
+  <h1>{{ msg }}</h1>
+
+  <div class="card">
+    <button type="button" @click="count++">count is {{ count }}</button>
+    <p>
+      Edit
+      <code>components/HelloWorld.vue</code> to test HMR
+    </p>
+  </div>
+
+  <p>
+    Check out
+    <a href="https://vuejs.org/guide/quick-start.html#local" target="_blank"
+      >create-vue</a
+    >, the official Vue + Vite starter
+  </p>
+  <p>
+    Learn more about IDE Support for Vue in the
+    <a
+      href="https://vuejs.org/guide/scaling-up/tooling.html#ide-support"
+      target="_blank"
+      >Vue Docs Scaling up Guide</a
+    >.
+  </p>
+  <p class="read-the-docs">Click on the Vite and Vue logos to learn more</p>
+</template>
+
+<style scoped>
+.read-the-docs {
+  color: #888;
+}
+</style>
--- a/src/components/swiper/SwiperWin.css
+++ b/src/components/swiper/SwiperWin.css
@ -0,0 +1,75 @@
+.max-bg {
+    width: 100%;
+    height: 100%;
+    overflow: hidden;
+}
+
+.global-font {
+    font-family: 'DIN';
+    /* font-weight: normal; */
+}
+
+.global-font-bold {
+    font-weight: bold;
+}
+
+@font-face {
+    font-family: "DIN";
+    src: url('@/assets/fonts/DINCond-Bold.otf');
+    font-weight: normal;
+    font-style: normal;
+}
+
+.page-font {
+    position: absolute;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    font-size: 24px;
+    z-index: 99;
+}
+
+.slide-container-path {
+    margin-top: 4%;
+    height: 87%;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+}
+
+.swiper-size {
+    height: 100%;
+}
+
+.swiper-img {
+    width: 70%;
+}
+
+.swiper-slide {
+    width: 90% !important;
+    margin: 0 5%;
+}
+
+.swiper-slide-prev {
+    right: -30%;
+}
+
+.swiper-slide-next {
+    left: -30%;
+}
+
+.down-arraw-left {
+    position: absolute;
+    left: 14.2%;
+    top: 50%;
+    z-index: 100;
+    transform: rotateZ(90deg);
+}
+
+.down-arraw-right {
+    position: absolute;
+    right: 14.2%;
+    top: 50%;
+    z-index: 100;
+    transform: rotateZ(270deg);
+}
--- a/src/components/swiper/SwiperWin.ts
+++ b/src/components/swiper/SwiperWin.ts
@ -0,0 +1,76 @@
+
+import { defineComponent, ref } from 'vue';
+// Import Swiper Vue.js components
+import { Swiper, SwiperSlide } from 'swiper/vue';
+import { Navigation, Pagination, Scrollbar, A11y, Autoplay, Mousewheel } from 'swiper/modules';
+
+// Import Swiper styles
+import 'swiper/css';
+import 'swiper/css/navigation';
+import 'swiper/css/pagination';
+import 'swiper/css/scrollbar';
+
+export default defineComponent({
+    name: 'SwiperWin',
+    props: {
+        images: Array<string>
+    },
+    components: {
+        Swiper,
+        SwiperSlide
+    },
+    data() {
+        return {
+        }
+    },
+    // setup(props, context) {
+    setup(props: any) {
+
+        // const images = [
+        //     util.getAssetsFile('imgs/swiper/swiper1.jpg'),
+        //     util.getAssetsFile('imgs/swiper/swiper1.jpg'),
+        //     util.getAssetsFile('imgs/swiper/swiper1.jpg')
+        // ]
+
+
+        const images = props.images as Array<string>
+        const refImages = ref(images)
+        const swiper = ref()
+        let realSwiperPage = ref(1)
+        const onSwiper = (swiperInst: any) => {
+            // swiper.activeIndex = 0
+            swiper.value = swiperInst
+            swiper.value.slideNext(0)
+        };
+        const onSlideChange = (swiper: any) => {
+            // console.log('slide change');
+            // console.log(swiper)
+            realSwiperPage.value = swiper.realIndex + 1
+        }
+
+        const slideNext = () => {
+            swiper.value.slideNext()
+        }
+
+        const slidePrev = () => {
+            swiper.value.slidePrev()
+        }
+
+        // const toNext = () => {
+        //     swiper.value.slideNext(swiper.value.realIndex + 1)
+        // }
+
+        return {
+            // onSwiper,
+            images,
+            refImages,
+            realSwiperPage,
+            onSlideChange,
+            onSwiper,
+            slideNext,
+            slidePrev,
+            modules: [Navigation, Pagination, Scrollbar, A11y, Autoplay, Mousewheel]
+            // modules: [Navigation, Pagination, Scrollbar, A11y]
+        }
+    }
+})
--- a/src/components/swiper/SwiperWin.vue
+++ b/src/components/swiper/SwiperWin.vue
@ -0,0 +1,53 @@
+<script lang="ts">
+import swiperWin from './SwiperWin'
+export default swiperWin
+</script>
+
+<template>
+  <div>
+    <!-- <swiper :options="swiperOptions">
+      <swiper-slide>
+        <img src="@/assets/imgs/swiper/swiper1.jpg"
+      /></swiper-slide>
+      <swiper-slide>
+        <img src="@/assets/imgs/swiper/swiper1.jpg"
+      /></swiper-slide>
+      <swiper-slide>
+        <img src="@/assets/imgs/swiper/swiper1.jpg"
+      /></swiper-slide>
+    </swiper> -->
+
+    <!-- :autoplay="{ delay: 5000 }" -->
+    <swiper
+      class="swiper-size"
+      @swiper="onSwiper"
+      :modules="modules"
+      :slides-per-view="'auto'"
+      :loop="true"
+      :mousewheel="true"
+      :autoplay="{ delay: 5000, disableOnInteraction: false }"
+      @slideChange="onSlideChange"
+    >
+      <swiper-slide v-for="(img, index) in refImages" :key="index">
+        <div class="slide-container-path">
+          <img :src="img" class="swiper-img" />
+        </div>
+      </swiper-slide>
+    </swiper>
+    <img
+      src="@/assets/imgs/Down Arraw Purple.svg"
+      class="down-arraw-left"
+      @click="slidePrev"
+    />
+    <img
+      src="@/assets/imgs/Down Arraw Purple.svg"
+      class="down-arraw-right"
+      @click="slideNext"
+    />
+    <!-- <div class="global-font page-font">
+      {{ realSwiperPage }}/{{ refImages.length }}
+    </div> -->
+  </div>
+</template>
+
+<style scoped src="./SwiperWin.css"></style>
--- a/src/main.ts
+++ b/src/main.ts
@ -0,0 +1,5 @@
+import { createApp } from 'vue'
+import './style.css'
+import App from './App.vue'
+
+createApp(App).mount('#app')
--- a/src/module.d.ts
+++ b/src/module.d.ts
@ -0,0 +1 @@
+declare module 'vue-awesome-swiper2'
--- a/src/pages/index/Index.css
+++ b/src/pages/index/Index.css
@ -0,0 +1,734 @@
+.read-the-docs {
+    color: #888;
+}
+
+* {
+    margin: 0;
+    padding: 0;
+}
+
+html,
+body {
+    width: 100%;
+    height: 100%;
+}
+
+.max-abs {
+    position: absolute;
+    left: 0;
+    top: 0;
+    width: 100%;
+    height: 100%;
+}
+
+.max-bg {
+    width: 100vw;
+    height: 100vh;
+    overflow: hidden;
+}
+
+.index-bg-img {
+    width: 100%;
+    height: 100%;
+    min-height: 100vh;
+    object-fit: cover;
+    position: relative;
+}
+
+.bg-mask {
+    /* background: url(@/assets/imgs/ImageMask.svg); */
+    background-color: #00000018;
+}
+
+.inline-top-text {
+    margin-left: 3rem;
+    margin-top: 15%;
+    display: inline-block;
+    user-select: none;
+}
+
+.bg-mask-2 {
+    /* background: url(@/assets/imgs/ImageMask.svg); */
+    background-color: #28283E;
+}
+
+.bg-mask-3 {
+    /* background: url(@/assets/imgs/ImageMask.svg); */
+    background-color: #00000060;
+}
+
+/* .item-img-mask {
+    position: absolute;
+    left: 0;
+    top: 0;
+    width: 100%;
+    height: 100%;
+    background: #0000003c;
+} */
+
+@media screen and (orientation: portrait) {
+    .top-nav {
+        display: none;
+    }
+
+    .title-float-left {
+        float: left;
+    }
+
+    .contact-text-block-top {
+        margin-top: 5rem;
+    }
+
+    .title-contact-us {
+        margin-top: 3rem !important;
+    }
+
+    .max-bg {
+        width: 100vw;
+        height: 100vh;
+        overflow-x: hidden;
+        overflow-y: auto;
+    }
+
+    /*竖屏 css*/
+    .logo {
+        position: absolute;
+        left: 50%;
+        top: 52%;
+        transform: translate(-50%, -50%);
+        width: 15rem;
+    }
+
+    .project-container {
+        /* background-color: yellow; */
+        /* padding: 5rem; */
+        /* width: 100%; */
+        width: fit-content;
+        margin: auto;
+        left: 0;
+        top: 0;
+        right: 0;
+        bottom: 0;
+        padding: 3rem;
+    }
+
+    .project-container-outer {
+        /* background-color: green; */
+        margin: 0 auto;
+    }
+
+    .project-title {
+        margin-top: 0.2rem;
+        margin-bottom: 1rem;
+        text-align: left;
+    }
+
+    .project-container-inner {
+        /* background-color: red; */
+        width: 100%;
+        height: 100%;
+    }
+
+    .project-items {
+        display: grid;
+        grid-template-columns: 1fr;
+        width: fit-content;
+        height: 100%;
+    }
+
+    .project-item {
+        margin: 0 2rem 0.5rem 0;
+        width: 100%;
+        height: 100%;
+        /* background: #0000003c; */
+    }
+
+    .project-item-mask {
+        position: relative;
+        left: 0;
+        top: calc(-100% + 0.5rem);
+        width: 100%;
+        height: calc(100% - 0.85rem);
+        /* background: url(@/assets/imgs/ImageMask.svg); */
+        background-color: #0000005c;
+        /* #0000005c; */
+    }
+
+    .project-item-mask-3 {
+        position: relative;
+        left: 0;
+        top: 0;
+        width: 100%;
+        height: calc(100% - 0.85rem);
+        /* background: url(@/assets/imgs/ImageMask.svg); */
+        background-color: #0000005c;
+        /* #0000005c; */
+    }
+
+    .project-item-2 {
+        width: 100%;
+        height: fit-content;
+        position: inherit;
+        display: block;
+        /* background: url(@/assets/imgs/ImageMask.svg); */
+        /* #0000005c; */
+    }
+
+    .mask-color {
+        background-color: #0000005c;
+    }
+
+    .project-item-img-2 {
+        object-fit: cover;
+        position: relative;
+        left: 0;
+        top: 0;
+        width: 100%;
+    }
+
+    .item-text-size {
+        font-size: 36px;
+        user-select: none;
+    }
+
+    .contact-container {
+        width: 100%;
+        padding-bottom: 0;
+    }
+
+    .desc-height {
+        height: auto;
+    }
+
+    .desc-fix {
+        top: -45%;
+    }
+
+    .contact-text-block {
+        position: relative;
+        height: fit-content;
+    }
+
+    .about-us-inner {
+        position: relative;
+        top: 0;
+        padding-top: 1rem;
+        display: block;
+        overflow: hidden;
+        width: 100%;
+        height: 100%;
+    }
+
+    .desc-item-mask {
+        margin-top: 0;
+        width: 100%;
+        height: 100%;
+        display: flex;
+        /* background: url(@/assets/imgs/ImageMask.svg); */
+        /* #0000005c; */
+    }
+
+    .project-item-about-us {
+        margin-top: 0;
+    }
+
+    .item-text-2 {
+        margin: 5.5rem 2rem 0 2rem;
+    }
+
+    .content-height {
+        height: fit-content;
+    }
+
+    .out-customers {
+        text-align: left;
+    }
+
+    .center-offset {
+        position: absolute;
+        left: 0;
+        top: 50%;
+        right: 0;
+        height: 10rem;
+        text-align: center;
+        transform: translateY(-90%);
+    }
+
+    .page-projects {
+        height: fit-content !important;
+    }
+
+    .customers {
+        width: 70%;
+        height: 100%;
+        text-align: left;
+        margin: 6rem 6rem 6rem 0;
+    }
+
+    .show-portrait {
+        display: block;
+    }
+
+    .show-landspace {
+        display: none;
+    }
+
+    .contact-us {
+        margin-top: 0;
+    }
+
+
+    /* .contact-no-padding-top {
+        padding-top: 0;
+    } */
+
+    .contact-no-margin-top {
+        margin-top: 0 !important;
+    }
+
+    .desc {
+        padding: 0;
+        margin: 0;
+        text-align: left;
+        font-size: 22px;
+        color: #000000;
+    }
+
+    .page {
+        width: 100%;
+    }
+
+    .page-max {
+        width: 100%;
+        height: 100vh;
+    }
+
+    .fullPageContainer {
+        width: 100%;
+    }
+
+    .detail-portrait {
+        position: absolute;
+        left: 0;
+        right: 0;
+        top: 0;
+        bottom: 0;
+    }
+}
+
+@media screen and (orientation: landscape) {
+
+    .show-portrait {
+        display: none;
+    }
+
+    .contact-text-block-top {
+        margin-top: 2rem;
+    }
+
+    .show-landspace {
+        display: block;
+    }
+
+    /*横屏 css*/
+    .logo {
+        position: absolute;
+        left: 50%;
+        top: 52%;
+        transform: translate(-50%, -50%);
+        width: 22rem;
+    }
+
+    .options {
+        display: none;
+    }
+
+    .top-nav {
+        width: fit-content;
+        float: right;
+        margin-right: 10%;
+        cursor: pointer;
+    }
+
+    .project-container {
+        /* background-color: yellow; */
+        padding: 0;
+        width: 70%;
+        height: 80%;
+        margin: auto;
+        position: absolute;
+        left: 0;
+        top: 0;
+        right: 0;
+        bottom: 0;
+    }
+
+    .project-container-outer {
+        /* background-color: green; */
+        width: 100%;
+        margin: 0 auto;
+        /* 20/1.2==16.6 */
+        /* transform: scale(1.2) translateX(16.6%) translateY(16.6%) */
+    }
+
+    .project-title {
+        margin-bottom: 3.5rem;
+        text-align: left;
+    }
+
+    .project-container-inner {
+        /* background-color: red; */
+        width: 100%;
+        height: 100%;
+    }
+
+    .project-items {
+        margin-top: 2rem;
+        display: grid;
+        grid-template-columns: 1fr 1fr;
+        width: 100%;
+        height: 100%;
+    }
+
+    .project-item {
+        /* height: fit-content; */
+        margin: 0 2rem 0 0;
+        /* width: fit-content; */
+        height: 100%;
+        /* width: 88%; */
+        /* background: #0000003c; */
+    }
+
+    .project-item-mask {
+        position: relative;
+        left: 0;
+        top: -100%;
+        width: 100%;
+        height: calc(100% - 0.4rem);
+        /* background: url(@/assets/imgs/ImageMask.svg); */
+        background-color: #0000005c;
+        /* #0000005c; */
+    }
+
+    .item-text-size {
+        font-size: 64px;
+        user-select: none;
+    }
+
+    .our-customers {
+        text-align: right;
+        position: relative;
+    }
+
+    .customers {
+        position: relative;
+        top: 5rem;
+        width: 50%;
+        text-align: right;
+        margin: 6rem 0 6rem -1.5rem;
+    }
+
+    .desc {
+        padding: 1rem;
+        text-align: left;
+        font-size: 22px;
+        color: #000000;
+    }
+
+    .contact-text-block {
+        position: absolute;
+        top: 40%;
+        transform: translateY(-50%);
+        height: fit-content;
+    }
+
+    .page {
+        width: 100%;
+        height: 100%;
+    }
+
+    .relative {
+        position: relative;
+    }
+
+    .fullPageContainer {
+        width: 100%;
+        height: 100vh;
+        transition: all linear 0.5s;
+    }
+
+    /* .contact-container {} */
+}
+
+
+.bg-alpha {
+    background-color: transparent;
+}
+
+.no-padding {
+    padding: 0 !important;
+}
+
+.item-text {
+    color: white;
+    position: absolute;
+    left: 0;
+    right: 0;
+    top: 0;
+    bottom: 0;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+}
+
+.logo-w {
+    position: absolute;
+    left: 8%;
+    top: 6%;
+    width: 1.5rem;
+    height: 2.25rem;
+    user-select: none;
+}
+
+.options {
+    position: absolute;
+    right: 8%;
+    top: 6%;
+    width: 1.5rem;
+    height: 2.25rem;
+    user-select: none;
+}
+
+.white-bg {
+    background-color: white;
+}
+
+.index-max-rel {
+    padding: 0;
+    left: 0;
+    top: calc(-100% - 2rem);
+    width: 100%;
+    height: calc(100% + 1.6rem);
+}
+
+.index-rel-top2 {
+    top: -202.5%;
+}
+
+
+.project-item-img {
+    object-fit: cover;
+    position: relative;
+    left: 0;
+    top: 0;
+    width: 100%;
+}
+
+.center {
+    position: absolute;
+    left: 0;
+    top: 50%;
+    right: 0;
+    text-align: center;
+    transform: translateY(-90%);
+}
+
+.options-div {
+    height: 6rem;
+}
+
+.options-text {
+    color: white;
+    font-size: 20px;
+}
+
+.options-close {
+    position: absolute;
+    left: 0;
+    right: 0;
+    bottom: 8rem;
+    margin: 0 auto;
+}
+
+.logo-center {
+    width: 40%;
+    user-select: none;
+    -webkit-user-drag: none;
+}
+
+.title-center {
+    margin-top: 4.2rem;
+    text-align: center;
+    width: 100%;
+    user-select: none;
+    -webkit-user-drag: none;
+}
+
+.up-arraw {
+    position: absolute;
+    left: 50%;
+    top: 2rem;
+    transform: rotateZ(180deg) translate(-50%, -50%);
+    width: 21px;
+    height: 21px;
+}
+
+.down-arraw {
+    position: absolute;
+    left: 50%;
+    bottom: 2rem;
+    transform: translate(-50%, -50%);
+    width: 21px;
+    height: 21px;
+}
+
+.about-us-text {
+    position: relative;
+    margin-bottom: 1rem;
+    color: #000000;
+    text-align: justify;
+}
+
+.section {
+    width: 100%;
+    height: 100vh;
+    background-position: center center;
+    background-repeat: no-repeat;
+}
+
+.title-text {
+    color: #000000;
+    font-size: 30px;
+}
+
+.title-text-white {
+    color: #FFFFFF;
+    font-size: 30px;
+}
+
+.flex-center {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+}
+
+.detail-scroll {
+    overflow-x: hidden;
+    overflow-y: auto;
+    padding-top: 3rem;
+    width: 80%;
+    height: 65%;
+    position: absolute;
+    left: 0;
+    right: 0;
+}
+
+.options-close-2 {
+    position: absolute;
+    left: 0;
+    right: 0;
+    bottom: 3rem;
+    margin: 0 auto;
+}
+
+.bg-mask-4 {
+    /* background: url(@/assets/imgs/ImageMask.svg); */
+    background-color: #ffffff;
+}
+
+.desc-item {
+    top: 0;
+    right: inherit;
+    bottom: inherit;
+    display: block;
+}
+
+.desc-height {
+    height: 100%;
+}
+
+.desc-alpha {
+    opacity: 0;
+}
+
+.no-events {
+    /* pointer-events: none; */
+}
+
+.has-events {
+    /* pointer-events: all; */
+}
+
+
+.contact-person {
+    font-size: 22px;
+}
+
+.contact-email {
+    font-size: 20px;
+}
+
+.contact-code {
+    font-size: 20px;
+}
+
+.contact-company {
+    font-size: 20px;
+}
+
+.contact-address {
+    font-size: 20px;
+}
+
+.contact-text {
+    text-align: left;
+    margin-top: 1rem;
+    color: black;
+}
+
+.global-font {
+    font-family: 'DIN';
+    /* font-weight: normal; */
+}
+
+.global-font-bold {
+    font-weight: bold;
+}
+
+@font-face {
+    font-family: "DIN";
+    src: url('@/assets/fonts/DINCond-Bold.otf');
+    font-weight: normal;
+    font-style: normal;
+}
+
+.swiper-container {
+    position: absolute;
+    left: 0;
+    top: 0;
+    right: 0;
+    bottom: 0;
+    background: rgba(108, 108, 108, 0.5);
+}
+
+.swiper-win {
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%, -50%);
+    width: 100%;
+    height: 100%;
+}
+
+.options-close-3 {
+    position: absolute;
+    right: 14.2%;
+    top: 4rem;
+    width: 2.5rem;
+    z-index: 99;
+}
+
+.customers-img {
+    width: 100%;
+    object-fit: cover;
+}
--- a/src/pages/index/Index.ts
+++ b/src/pages/index/Index.ts
@ -0,0 +1,294 @@
+import { defineComponent, onMounted, onBeforeUnmount, ref } from 'vue'
+import SwiperWin from '../../components/swiper/SwiperWin.vue'
+import utils from '../../util/utils'
+
+export default defineComponent({
+    name: 'Index',
+    components: {
+        SwiperWin
+    },
+    data() {
+        return {
+        }
+    },
+    // setup(props, context) {
+    setup() {
+
+        const fullPageEl = ref<HTMLElement>()
+        const fullPageContainerEl = ref<HTMLElement>()
+
+        const swiperWindowEl = ref<HTMLElement>()
+
+        const fullpage = {
+            current: 1, // 当前的页面编号
+            isScrolling: false, // 是否在滚动,是为了防止滚动多页，需要通过一个变量来控制是否滚动
+            deltaY: 0 // 返回鼠标滚轮的垂直滚动量，保存的鼠标滚动事件的deleteY,用来判断是往下还是往上滚
+        };
+        let startTime: number; // 记录触摸开始的时间
+        // let startX: number; // 记录触摸开始的X坐标，本次主要实现的是上下滑动，所以当前坐标不做强制要求
+        let startY: number; // 记录触摸开始的Y坐标
+        let len = 4; // 页面的个数
+        const showArraw = ref(true);
+        const showOptionsPortrait = ref(false);
+        const showOptionsLandspace = ref(false);
+        const showDetailWinPortrait = ref(false);
+        const showDetailWinLandspace = ref(false);
+        const aboutusimg = ref<HTMLElement>()
+        const contactus = ref<HTMLElement>()
+
+        let isLandspaceTag = true
+        const resizeHandler = () => {
+            if (isLandspaceTag) {
+                if (!isLandspace()) {
+                    move(1)
+                    fullPageContainerEl.value!.style.transform = "translateY(0)"
+                    isLandspaceTag = isLandspace()
+                }
+            }
+            else {
+                if (isLandspace()) {
+                    move(1)
+                    fullPageContainerEl.value!.style.transform = "translateY(0)"
+                    isLandspaceTag = isLandspace()
+                }
+            }
+        }
+
+        onMounted(() => {
+            isLandspaceTag = isLandspace()
+            resizeHandler()
+            window.addEventListener("resize", resizeHandler)
+        })
+
+        onBeforeUnmount(() => {
+            window.removeEventListener("resize", resizeHandler)
+        })
+
+
+        const hideOptionsPage = () => {
+
+            showOptionsPortrait.value = false
+            showOptionsLandspace.value = false
+
+            showArraw.value = true
+        }
+
+        const showOptionsPage = () => {
+
+            hideOptionsPage()
+            if (isLandspace()) {//横屏
+                showOptionsLandspace.value = true
+            }
+            else {
+                showOptionsPortrait.value = true
+            }
+
+            showArraw.value = false
+        }
+        const showSwiperMaskWin = (images: Array<string>) => {
+
+            bannerImages.value = images
+            if (isLandspace()) {//横屏
+                showDetailWinPortrait.value = false
+                showDetailWinLandspace.value = true
+            }
+            else {//竖屏
+                showDetailWinLandspace.value = false
+                showDetailWinPortrait.value = true
+            }
+            showArraw.value = false
+        }
+
+        const stopEvent = (ev: Event) => {
+
+            ev.stopPropagation()
+            // ev.preventDefault()
+        }
+
+        const hideSwiperMaskWin = () => {
+
+            // bannerImages.value = []
+            showDetailWinPortrait.value = false
+            showDetailWinLandspace.value = false
+
+            showArraw.value = true
+        }
+
+        // 往下切换
+        const next = () => {
+            if (!isLandspace()) {
+                return
+            }
+            if (fullpage.current + 1 <= len) { // 如果当前页面编号+1 小于总个数，则可以执行向下滑动
+                fullpage.current += 1; // 页面+1
+                move(fullpage.current); // 执行切换
+            }
+            if (fullpage.current >= len) {
+                showArraw.value = false
+            }
+            else {
+                showArraw.value = true
+            }
+        }
+
+        // 往上切换
+        const pre = () => {
+            if (!isLandspace()) {
+                return
+            }
+            if (fullpage.current - 1 > 0) { // 如果当前页面编号-1 大于0，则可以执行向下滑动
+                fullpage.current -= 1;// 页面+1
+                move(fullpage.current);// 执行切换
+                showArraw.value = true
+            }
+        }
+
+        // 滚动事件
+        const move = (index: number) => {
+            fullpage.current = index;
+            fullpage.isScrolling = true; // 为了防止滚动多页，需要通过一个变量来控制是否滚动
+            directToMove(index); //执行滚动
+            setTimeout(() => {  //这里的动画是1s执行完，使用setTimeout延迟1s后解锁
+                fullpage.isScrolling = false;
+            }, 1000);
+        }
+
+        // 执行滚动
+        const directToMove = (index: number) => {
+            let height = fullPageEl.value!.clientHeight; //获取屏幕的宽度
+            let scrollPage = fullPageContainerEl.value!; // 获取执行tarnsform的元素
+            let scrollHeight; // 计算滚动的告诉，是往上滚还往下滚
+            scrollHeight = -(index - 1) * height + "px";
+            scrollPage.style.transform = `translateY(${scrollHeight})`;
+            fullpage.current = index;
+        }
+
+        // 监听鼠标监听
+        const mouseWheelHandle = (event: any) => {
+            // 添加冒泡阻止
+            let evt = event || window.event;
+            if (evt.stopPropagation) {
+                evt.stopPropagation();
+            } else {
+                evt.returnValue = false;
+            }
+            if (fullpage.isScrolling) { // 判断是否可以滚动
+                return false;
+            }
+            let e = event.originalEvent || event;
+            fullpage.deltaY = e.deltaY || e.detail; // Firefox使用detail
+            if (fullpage.deltaY > 0) {
+                next();
+            } else if (fullpage.deltaY < 0) {
+                pre();
+            }
+        }
+        // 清除触摸事件
+        const handleTouchmove = (event: any) => {
+            if (isLandspace()) {
+                event.preventDefault()
+            }
+        }
+
+        //手指按下屏幕
+        const handleTouchstart = (event: any) => {
+            startTime = Date.now()
+            // startX = event.changedTouches[0].clientX
+            startY = event.changedTouches[0].clientY
+        }
+
+        //手指离开屏幕
+        const handleTouchend = (event: any) => {
+            const endTime = Date.now()
+            // const endX = event.changedTouches[0].clientX
+            const endY = event.changedTouches[0].clientY
+            //判断按下的时长
+            if (endTime - startTime > 2000) {
+                return
+            }
+            //滑动的方向
+            let direction = "";
+            //先判断用户滑动的距离，是否合法，合法:判断滑动的方向 注意 距离要加上绝对值
+            if (Math.abs(endY - startY) > 10) {
+                //滑动方向
+                direction = endY - startY > 0 ? "down" : "up"
+            } else {
+                return
+            }
+            //用户做了合法的滑动操作
+            // console.log('方向'+direction)
+            if (direction === 'up') {
+                next();
+            }
+            if (direction === 'down') {
+                pre();
+            }
+        }
+
+        const hotelImages = [
+            utils.getAssetsFile('imgs/banners/hotel/3.jpg'),
+            utils.getAssetsFile('imgs/banners/hotel/1.jpg'),
+            utils.getAssetsFile('imgs/banners/hotel/2.jpg')
+        ]
+
+        const restaurantImages = [
+            utils.getAssetsFile('imgs/banners/restaurant/3.jpg'),
+            utils.getAssetsFile('imgs/banners/restaurant/1.jpg'),
+            utils.getAssetsFile('imgs/banners/restaurant/2.jpg')
+        ]
+
+
+        const schoolImages = [
+            utils.getAssetsFile('imgs/banners/school/3.jpg'),
+            utils.getAssetsFile('imgs/banners/school/1.jpg'),
+            utils.getAssetsFile('imgs/banners/school/2.jpg')
+        ]
+
+
+        const franchiseImages = [
+            utils.getAssetsFile('imgs/banners/franchise/3.jpg'),
+            utils.getAssetsFile('imgs/banners/franchise/1.jpg'),
+            utils.getAssetsFile('imgs/banners/franchise/2.jpg')
+        ]
+
+        const bannerImages = ref<Array<string>>([])
+
+        const isLandspace = () => {
+            return document.body.clientWidth > document.body.clientHeight
+        }
+
+        return {
+            fullPageEl,
+            fullPageContainerEl,
+            mouseWheelHandle,
+            handleTouchmove,
+            handleTouchstart,
+            handleTouchend,
+            showOptionsPage,
+            hideOptionsPage,
+            showArraw,
+            showOptionsPortrait,
+            showOptionsLandspace,
+            move,
+            pre,
+            next,
+            swiperWindowEl,
+
+            hotelImages,
+            restaurantImages,
+            schoolImages,
+            franchiseImages,
+            bannerImages,
+
+            showDetailWinPortrait,
+            showDetailWinLandspace,
+            showSwiperMaskWin,
+            hideSwiperMaskWin,
+            isLandspace,
+            aboutusimg,
+            // calcOneImageSize,
+            contactus,
+            stopEvent
+        }
+    }
+})
--- a/src/pages/index/Index.vue
+++ b/src/pages/index/Index.vue
@ -0,0 +1,425 @@
+<script lang="ts">
+import index from './Index'
+export default index
+</script>
+
+<template>
+  <div class="max-bg white-bg" ref="fullPageEl">
+    <div
+      class="fullPageContainer"
+      ref="fullPageContainerEl"
+      v-show="!showOptionsPortrait && !showOptionsLandspace"
+      @mousewheel="mouseWheelHandle"
+      @DOMMouseScroll="mouseWheelHandle"
+      @touchstart="handleTouchstart"
+      @touchend="handleTouchend"
+      @touchmove="handleTouchmove"
+    >
+      <div class="page page-max">
+        <img src="@/assets/imgs/index.jpg" class="index-bg-img" />
+        <div class="bg-mask-3 index-max-rel" style="position: relative"></div>
+        <div
+          class="index-max-rel"
+          style="position: relative; top: calc(-200vh - 2.06rem)"
+        >
+          <img src="@/assets/imgs/LOGO W.svg" class="logo-w" />
+          <img
+            src="@/assets/imgs/Options.svg"
+            class="options"
+            @click="showOptionsPage"
+          />
+          <div class="top-nav">
+            <div
+              class="title-text-white global-font global-font-bold inline-top-text"
+              @click="move(2)"
+            >
+              PROJECTS
+            </div>
+            <div
+              class="title-text-white global-font global-font-bold inline-top-text"
+              @click="move(3)"
+            >
+              ABOUT US
+            </div>
+            <div
+              class="title-text-white global-font global-font-bold inline-top-text"
+              @click="move(4)"
+            >
+              CONTACT US
+            </div>
+          </div>
+          <div class="logo">
+            <img src="@/assets/imgs/LOGO W.svg" class="logo-center" />
+            <div>
+              <img
+                src="@/assets/imgs/Engintel Consulting.svg"
+                class="title-center"
+              />
+            </div>
+          </div>
+        </div>
+      </div>
+      <div
+        class="page white-bg relative content-height page-projects"
+        id="projects"
+      >
+        <div class="project-container">
+          <div class="project-container-outer">
+            <div class="project-title">
+              <div class="title-text global-font global-font-bold">
+                PROJECTS
+              </div>
+            </div>
+            <div class="project-container-inner">
+              <div class="project-items">
+                <div class="project-item">
+                  <img
+                    src="@/assets/imgs/HotelBg.jpg"
+                    class="project-item-img"
+                  />
+                  <div class="project-item-mask">
+                    <div
+                      class="item-text item-text-size global-font"
+                      @click="showSwiperMaskWin(hotelImages)"
+                    >
+                      Hotel
+                    </div>
+                  </div>
+                </div>
+                <div class="project-item">
+                  <img
+                    src="@/assets/imgs/Restaurant.jpg"
+                    class="project-item-img"
+                  />
+                  <div class="project-item-mask">
+                    <div
+                      class="item-text item-text-size global-font"
+                      @click="showSwiperMaskWin(restaurantImages)"
+                    >
+                      Restaurant
+                    </div>
+                  </div>
+                </div>
+              </div>
+              <div class="project-container-inner">
+                <div class="project-items">
+                  <div class="project-item">
+                    <img
+                      src="@/assets/imgs/School.jpg"
+                      class="project-item-img"
+                    />
+                    <div class="project-item-mask">
+                      <div
+                        class="item-text item-text-size global-font"
+                        @click="showSwiperMaskWin(schoolImages)"
+                      >
+                        School
+                      </div>
+                    </div>
+                  </div>
+                  <div class="project-item">
+                    <img
+                      src="@/assets/imgs/Franchise.jpg"
+                      class="project-item-img"
+                    />
+                    <div class="project-item-mask">
+                      <div
+                        class="item-text item-text-size global-font"
+                        @click="showSwiperMaskWin(franchiseImages)"
+                      >
+                        Franchise
+                      </div>
+                    </div>
+                  </div>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+
+      <div class="page page-max white-bg relative" id="aboutus" ref="aboutus">
+        <div class="project-container title-float-left">
+          <div class="project-container-outer">
+            <div class="project-title">
+              <div class="title-text global-font global-font-bold">
+                ABOUT US
+              </div>
+            </div>
+            <div class="project-container-inner">
+              <div class="project-items desc-items show-landspace">
+                <div class="project-item">
+                  <img
+                    src="@/assets/imgs/Aboutus.jpg"
+                    class="project-item-img desc-alpha"
+                  />
+                  <div class="project-item-mask project-item-2 bg-alpha">
+                    <div
+                      class="item-text item-text-2 item-text-size desc desc-item global-font no-padding"
+                    >
+                      <div class="about-us-text">
+                        At Engintel Consulting, we specialize in providing
+                        engineering consulting services for the food service
+                        equipment manufacturing industry, helping businesses
+                        manage the rising costs of in-house staffing, training,
+                        and employee turnover.
+                      </div>
+
+                      <div class="about-us-text">
+                        By offering a seamless, permanent workforce solution, we
+                        enable our clients to focus on their core operations
+                        without the burden of maintaining and training
+                        additional staff.
+                      </div>
+                      <div class="about-us-text">
+                        From developing 3D models to drafting precise drawings
+                        and preparing CAM documents, we deliver comprehensive
+                        support for day-to-day operations.
+                      </div>
+                      <div class="about-us-text">
+                        As we expand, we’re also extending our services to other
+                        industries, ensuring high-quality engineering solutions
+                        that are cost-effective and reliable.
+                      </div>
+                    </div>
+                  </div>
+                </div>
+                <div class="project-item project-item-2">
+                  <img
+                    src="@/assets/imgs/Aboutus.jpg"
+                    class="project-item-img"
+                  />
+                  <!-- <div class="project-item-mask">
+                    <div class="item-text item-text-size global-font">
+                      Restaurant
+                    </div>
+                  </div> -->
+                </div>
+              </div>
+              <div class="show-portrait">
+                <div class="project-item">
+                  <div
+                    class="item-text-2 item-text-size desc desc-item global-font"
+                  >
+                    <div class="about-us-text">
+                      At Engintel Consulting, we specialize in providing
+                      engineering consulting services for the food service
+                      equipment manufacturing industry, helping businesses
+                      manage the rising costs of in-house staffing, training,
+                      and employee turnover.
+                    </div>
+
+                    <div class="about-us-text">
+                      By offering a seamless, permanent workforce solution, we
+                      enable our clients to focus on their core operations
+                      without the burden of maintaining and training additional
+                      staff.
+                    </div>
+                    <div class="about-us-text">
+                      From developing 3D models to drafting precise drawings and
+                      preparing CAM documents, we deliver comprehensive support
+                      for day-to-day operations.
+                    </div>
+                    <div class="about-us-text">
+                      As we expand, we’re also extending our services to other
+                      industries, ensuring high-quality engineering solutions
+                      that are cost-effective and reliable.
+                    </div>
+                    <div
+                      class="project-item project-item-2 content-height"
+                      style="left: 0"
+                    >
+                      <!-- <div class="project-item-mask-3" ref="aboutusimg"> -->
+                      <div ref="aboutusimg">
+                        <img
+                          src="@/assets/imgs/Aboutus.jpg"
+                          class="project-item-img"
+                        />
+                        <!-- <div
+                          class="item-text item-text-size global-font mask-color"
+                        >
+                          Restaurant
+                        </div> -->
+                      </div>
+                    </div>
+                  </div>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+
+      <div class="page white-bg relative contact-us" ref="contactus">
+        <div class="project-container contact-container has-events">
+          <!-- <div style="position: relative; left: 0; top: 15rem"></div> -->
+          <div class="project-container-outer title-contact-us">
+            <div class="project-items">
+              <div>
+                <div class="project-title" id="contactus">
+                  <div class="title-text global-font global-font-bold">
+                    CONTACT US
+                  </div>
+                </div>
+                <div class="project-item">
+                  <div
+                    class="project-container-inner contact-text-block contact-text-block-top"
+                  >
+                    <div class="contact-person contact-text global-font">
+                      Jason Yuan
+                    </div>
+                    <div class="contact-email contact-text global-font">
+                      engintelconsulting@gmail.com
+                    </div>
+                    <div class="contact-code contact-text global-font">
+                      404.277.9693
+                    </div>
+
+                    <div
+                      class="contact-company contact-text global-font"
+                      style="margin-top: 5rem"
+                    >
+                      Engintel Consulting, LLC
+                    </div>
+                    <div class="contact-address contact-text global-font">
+                      375 Satterwhite Dr. Alpharetta, GA 30022
+                    </div>
+                  </div>
+                </div>
+              </div>
+              <div class="project-item show-landspace">
+                <div class="project-title our-customers">
+                  <div class="title-text global-font global-font-bold">
+                    OUR CUSTOMERS
+                  </div>
+                </div>
+                <div class="project-item">
+                  <div class="project-container-inner contact-text-block">
+                    <div class="customers">
+                      <img
+                        class="customers-img"
+                        src="@/assets/imgs/customers/Customers-Group1.png"
+                      />
+                    </div>
+                  </div>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+
+      <div class="page white-bg relative show-portrait">
+        <div class="project-container contact-container has-events">
+          <div class="project-container-outer title-contact-us">
+            <div class="project-items">
+              <div class="project-item">
+                <div class="project-title our-customers">
+                  <div class="title-text global-font global-font-bold">
+                    OUR CUSTOMERS
+                  </div>
+                </div>
+                <div class="project-item">
+                  <div class="customers">
+                    <img
+                      class="customers-img"
+                      src="@/assets/imgs/customers/Customers-Group2.png"
+                    />
+                  </div>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+
+    <img
+      src="@/assets/imgs/Down Arraw.svg"
+      class="down-arraw"
+      v-show="showArraw"
+      @click="next"
+    />
+
+    <div class="page" v-show="showOptionsPortrait">
+      <div class="bg-mask-2 max-abs"></div>
+      <img src="@/assets/imgs/LOGO W.svg" class="logo-w" />
+      <img
+        src="@/assets/imgs/Options.svg"
+        class="options"
+        @click="hideOptionsPage()"
+      />
+      <div class="center-offset">
+        <div class="options-div">
+          <a
+            class="options-text global-font"
+            href="#projects"
+            @click="hideOptionsPage()"
+            >PROJECTS</a
+          >
+        </div>
+        <div class="options-div">
+          <a
+            class="options-text global-font"
+            href="#aboutus"
+            @click="hideOptionsPage()"
+            >ABOUT US</a
+          >
+        </div>
+        <div class="options-div">
+          <a
+            class="options-text global-font"
+            href="#contactus"
+            @click="hideOptionsPage()"
+            >CONTACT US</a
+          >
+        </div>
+      </div>
+      <img
+        src="@/assets/imgs/Close.svg"
+        class="options-close"
+        @click="hideOptionsPage()"
+      />
+    </div>
+
+    <div v-if="showDetailWinPortrait" class="detail-portrait">
+      <div class="bg-mask-4 max-abs"></div>
+      <div class="project-container detail-scroll" style="padding: 0">
+        <div class="project-container-outer flex-center">
+          <div class="project-container-inner">
+            <div
+              class="project-items content-height"
+              v-for="(img, idx) in bannerImages"
+              :key="idx"
+            >
+              <div class="project-item">
+                <img :src="img" class="project-item-img" />
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+      <img
+        src="@/assets/imgs/Close.svg"
+        class="options-close-2"
+        @click="hideSwiperMaskWin"
+      />
+    </div>
+
+    <div class="swiper-container" v-if="showDetailWinLandspace">
+      <div class="bg-mask-4 max-abs"></div>
+      <img
+        src="@/assets/imgs/ClosePurple.svg"
+        class="options-close-3"
+        @click="hideSwiperMaskWin"
+      />
+      <SwiperWin
+        ref="swiperWindow"
+        class="swiper-win"
+        :images="bannerImages"
+      ></SwiperWin>
+    </div>
+  </div>
+</template>
+
+<style scoped src="./index.css"></style>
--- a/src/style.css
+++ b/src/style.css
@ -0,0 +1,87 @@
+:root {
+  font-family: Inter, system-ui, Avenir, Helvetica, Arial, sans-serif;
+  line-height: 1.5;
+  font-weight: 400;
+
+  color-scheme: light dark;
+  color: rgba(255, 255, 255, 0.87);
+  background-color: #242424;
+
+  font-synthesis: none;
+  text-rendering: optimizeLegibility;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+}
+
+a {
+  font-weight: 500;
+  color: #646cff;
+  text-decoration: inherit;
+}
+
+a:hover {
+  color: #535bf2;
+}
+
+body {
+  margin: 0;
+  display: flex;
+  place-items: center;
+  min-width: 320px;
+  min-height: 100vh;
+  overflow: hidden;
+}
+
+h1 {
+  font-size: 3.2em;
+  line-height: 1.1;
+}
+
+button {
+  border-radius: 8px;
+  border: 1px solid transparent;
+  padding: 0.6em 1.2em;
+  font-size: 1em;
+  font-weight: 500;
+  font-family: inherit;
+  background-color: #1a1a1a;
+  cursor: pointer;
+  transition: border-color 0.25s;
+}
+
+button:hover {
+  border-color: #646cff;
+}
+
+button:focus,
+button:focus-visible {
+  outline: 4px auto -webkit-focus-ring-color;
+}
+
+.card {
+  padding: 2em;
+}
+
+#app {
+  /* max-width: 1280px; */
+  margin: 0 auto;
+  padding: 0;
+  text-align: center;
+  width: 100%;
+  height: 100%;
+}
+
+@media (prefers-color-scheme: light) {
+  :root {
+    color: #213547;
+    background-color: #ffffff;
+  }
+
+  a:hover {
+    color: #747bff;
+  }
+
+  button {
+    background-color: #f9f9f9;
+  }
+}
--- a/src/util/utils.ts
+++ b/src/util/utils.ts
@ -0,0 +1,7 @@
+// 获取assets静态资源
+const getAssetsFile = (url: string) => {
+    return new URL(`../assets/${url}`, import.meta.url).href;
+};
+export default {
+    getAssetsFile,
+};
--- a/src/vite-env.d.ts
+++ b/src/vite-env.d.ts
@ -0,0 +1 @@
+/// <reference types="vite/client" />
--- a/tsconfig.app.json
+++ b/tsconfig.app.json
@ -0,0 +1,24 @@
+{
+  "compilerOptions": {
+    "target": "ES2020",
+    "useDefineForClassFields": true,
+    "module": "ESNext",
+    "lib": ["ES2020", "DOM", "DOM.Iterable"],
+    "skipLibCheck": true,
+
+    /* Bundler mode */
+    "moduleResolution": "bundler",
+    "allowImportingTsExtensions": true,
+    "isolatedModules": true,
+    "moduleDetection": "force",
+    "noEmit": true,
+    "jsx": "preserve",
+
+    /* Linting */
+    "strict": true,
+    "noUnusedLocals": true,
+    "noUnusedParameters": true,
+    "noFallthroughCasesInSwitch": true
+  },
+  "include": ["src/**/*.ts", "src/**/*.tsx", "src/**/*.vue"]
+}
--- a/tsconfig.app.tsbuildinfo
+++ b/tsconfig.app.tsbuildinfo
@ -0,0 +1 @@
+{"root":["./src/main.ts","./src/module.d.ts","./src/vite-env.d.ts","./src/components/swiper/swiperwin.ts","./src/pages/index/index.ts","./src/util/utils.ts","./src/app.vue","./src/components/helloworld.vue","./src/components/swiper/swiperwin.vue","./src/pages/index/index.vue"],"version":"5.6.2"}
--- a/tsconfig.json
+++ b/tsconfig.json
@ -0,0 +1,7 @@
+{
+  "files": [],
+  "references": [
+    { "path": "./tsconfig.app.json" },
+    { "path": "./tsconfig.node.json" }
+  ]
+}
--- a/tsconfig.node.json
+++ b/tsconfig.node.json
@ -0,0 +1,22 @@
+{
+  "compilerOptions": {
+    "target": "ES2022",
+    "lib": ["ES2023"],
+    "module": "ESNext",
+    "skipLibCheck": true,
+
+    /* Bundler mode */
+    "moduleResolution": "bundler",
+    "allowImportingTsExtensions": true,
+    "isolatedModules": true,
+    "moduleDetection": "force",
+    "noEmit": true,
+
+    /* Linting */
+    "strict": true,
+    "noUnusedLocals": true,
+    "noUnusedParameters": true,
+    "noFallthroughCasesInSwitch": true
+  },
+  "include": ["vite.config.ts"]
+}
--- a/tsconfig.node.tsbuildinfo
+++ b/tsconfig.node.tsbuildinfo
@ -0,0 +1 @@
+{"root":["./vite.config.ts"],"version":"5.6.2"}
--- a/vite.config.ts
+++ b/vite.config.ts
@ -0,0 +1,14 @@
+import { defineConfig } from 'vite'
+import vue from '@vitejs/plugin-vue'
+import path from 'path';
+
+// https://vitejs.dev/config/
+export default defineConfig({
+  plugins: [vue()],
+  base: process.env.NODE_ENV === 'production' ? '/webtest/web1/' : '/',
+  resolve: {
+    alias: {
+      '@': path.resolve(__dirname, 'src')
+    }
+  }
+})
				`@ -0,0 +1 @@`
				`<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="iconify iconify--logos" width="37.07" height="36" preserveAspectRatio="xMidYMid meet" viewBox="0 0 256 198"><path fill="#41B883" d="M204.8 0H256L128 220.8L0 0h97.92L128 51.2L157.44 0h47.36Z"></path><path fill="#41B883" d="m0 0l128 220.8L256 0h-51.2L128 132.48L50.56 0H0Z"></path><path fill="#35495E" d="M50.56 0L128 133.12L204.8 0h-47.36L128 51.2L97.92 0H50.56Z"></path></svg>`
				`@ -0,0 +1 @@`
				`{"root":["./src/main.ts","./src/module.d.ts","./src/vite-env.d.ts","./src/components/swiper/swiperwin.ts","./src/pages/index/index.ts","./src/util/utils.ts","./src/app.vue","./src/components/helloworld.vue","./src/components/swiper/swiperwin.vue","./src/pages/index/index.vue"],"version":"5.6.2"}`
				`@ -0,0 +1 @@`
				`{"root":["./vite.config.ts"],"version":"5.6.2"}`