readme

README.md

@@ -1,5 +1,49 @@
-# Vue 3 + Vite
+# Project Name
 
-This template should help get you started developing with Vue 3 in Vite. The template uses Vue 3 `<script setup>` SFCs, check out the [script setup docs](https://v3.vuejs.org/api/sfc-script-setup.html#sfc-script-setup) to learn more.
+基于 Vue 3 的多语言响应式网站应用
 
-Learn more about IDE Support for Vue in the [Vue Docs Scaling up Guide](https://vuejs.org/guide/scaling-up/tooling.html#ide-support).
+## 功能特点
+
+- 🌐 多语言支持 (英语 & 日语)
+- 📱 响应式布局 (1440px & 1920px)
+- 🎨 Naive UI 组件库集成
+- 📦 基于 Vite 的现代构建系统
+
+## 技术栈
+
+- Vue 3
+- Naive UI
+- Vue Router
+- i18n
+- Vite
+
+## 项目结构
+
+## 开发指南
+
+### 环境要求
+
+- Node.js >= 16
+- pnpm >= 8
+
+### 安装依赖
+
+```bash
+pnpm install
+```
+
+### 运行项目
+
+```bash
+pnpm run prod
+```
+
+### 构建项目
+
+```bash
+pnpm run build-prod
+```
+
+### 部署项目
+
+```bash

src/App.vue

@@ -55,7 +55,7 @@ const handleLanguageChange = (key) => {
         {{ languageOptions.find(opt => opt.key === locale)?.label }}
       </div>
     </n-dropdown> -->
-    <AppHeader />
+    <!-- <AppHeader /> -->
     <router-view />
   </n-config-provider>
 </template>

src/components/AppHeader.vue

@@ -31,47 +31,5 @@ const handleTabClick = (tab) => {
 }
 </script>
 <style scoped lang="scss">
-.header {
-  width: 100%;
-  height: 55px;
-  display: flex;
-  justify-content: space-between;
-  align-items: flex-end;
-  position: fixed;
-  z-index: 10;
-  top: 0;
-  left: 0;
-  right: 0;
-  padding: 0 14rem;
-  background-color: transparent;
-}
 
-.logo {
-  img {
-    width: 108px;
-    height: 33px;
-  }
-}
-
-.tabs {
-  display: flex;
-  gap: 32px;
-  margin-right: 32px;
-}
-
-.tab-item {
-  font-size: 16px;
-  color: #000000;
-  cursor: pointer;
-  transition: color 0.3s ease;
-  padding: 4px 8px;
-
-  &.active {
-    color: #8B59FA;
-  }
-
-  &:hover {
-    color: #8B59FA;
-  }
-}
 </style>

src/views/companyprofil/size1920/index.vue

@@ -1,35 +1,60 @@
 <script setup>
 import { onUnmounted, ref, watch } from 'vue';
 import gsap from 'gsap';
-
+import ScrollTrigger from 'gsap/ScrollTrigger';
+import { useHome } from '@/store/home/index.js';
 import { useI18n } from 'vue-i18n';
 import { useTransitionComposable } from '@/composables/transition-composable';
 import { useRouter } from "vue-router";
 import { NDivider } from 'naive-ui'
+
+// 注册 ScrollTrigger 插件
+gsap.registerPlugin(ScrollTrigger);
+const { currentTab } = useHome();
 const router = useRouter();
 const { transitionState } = useTransitionComposable();
 const main = ref();
 let ctx;
 const { t } = useI18n();
-
+const handleTabClick = (tab) => {
+  currentTab.value = tab;
+  router.push('/' + tab);
+}
 watch(
   [() => transitionState.transitionComplete, main],
   (newValue) => {
     if (newValue && main.value) {
       ctx = gsap.context((self) => {
-        const boxes = self.selector('.box');
+        // Text animations from left
-        boxes.forEach((box) => {
+        gsap.utils.toArray('.text-animate').forEach(text => {
-          gsap.to(box, {
+          gsap.from(text, {
-            x: 150,
+            x: -100,
+            opacity: 0,
+            duration: 1,
             scrollTrigger: {
-              trigger: box,
+              trigger: text,
-              start: 'bottom bottom',
+              start: 'top 80%',
-              end: 'top 20%',
+              end: 'top 50%',
-              scrub: true,
+              toggleActions: 'play none none reverse',
-            },
+            }
           });
         });
-      }, main.value); // <- Scope!
+
+        // Image animations from right
+        gsap.utils.toArray('.image-animate').forEach(image => {
+          gsap.from(image, {
+            x: 100,
+            opacity: 0,
+            duration: 1,
+            scrollTrigger: {
+              trigger: image,
+              start: 'top 80%',
+              end: 'top 50%',
+              toggleActions: 'play none none reverse',
+            }
+          });
+        });
+      }, main.value);
     }
   },
   {
@@ -43,19 +68,35 @@ onUnmounted(() => {
 </script>
 
 <template>
-  <main>
+   <header className="header">
+      <div class="logo">
+        <img src="@/assets/image/logo.png" alt="logo" />
+      </div>
+      <div class="tabs">
+        <div class="tab-item" :class="{ active: currentTab === 'home' }" @click="handleTabClick('home')">
+          {{ t('home.nav.home') }}
+        </div>
+        <div class="tab-item" :class="{ active: currentTab === 'companyprofil' }" @click="handleTabClick('companyprofil')">
+          {{ t('home.nav.company') }}
+        </div>
+        <div class="tab-item" :class="{ active: currentTab === 'business' }" @click="handleTabClick('business')">
+          {{ t('home.nav.business') }}
+        </div>
+      </div>
+    </header>
+  <main ref="main">
 
     <div class="head relative">
 
       <img src="@/assets/image/gk.png" alt="head">
 
-      <div class="absolute top-240px left-510px text-[#10253E] text-[54px] font-bold">
+      <div class="absolute top-240px left-510px text-[#10253E] text-[54px] font-bold text-animate">
         领航文艺全周期
       </div>
-      <div class="absolute top-320px left-510px text-[#10253E] text-[54px] font-bold">
+      <div class="absolute top-320px left-510px text-[#10253E] text-[54px] font-bold text-animate">
         创变价值新巅峰
       </div>
-      <div class="absolute top-420px left-510px text-[#8B59F7] text-[20px] w-[535px] ">
+      <div class="absolute top-420px left-510px text-[#8B59F7] text-[20px] w-[535px] text-animate">
         FiEE立志成为文艺创作全周期的掌舵人，深度参与从灵感初绽、作品打磨完成，到市场推广宣传、文化广泛传播的每一处关键节点
       </div>
 
@@ -68,30 +109,30 @@ onUnmounted(() => {
     <div class="bg-[#F8F9FF] ">
 
       <div class="content1 relative flex items-center justify-center z-3 pb-[100px] flex-col">
-        <div class="text-[#8B59F7] text-[16px] absolute top-[-30px] left-[505px]">公司介绍</div>
+        <div class="text-[#8B59F7] text-[16px] absolute top-[-30px] left-[505px] text-animate">公司介绍</div>
         <div class="pl-[505px] pr-[480px] flex">
 
-          <div class="w-[411px] mr-[38px]">
+          <div class="w-[411px] mr-[38px] text-animate">
             <div class="text-[#10253E] text-[40px]">独树一帜
 
             </div>
             <div class="text-[#10253E] text-[40px]">全周期价值赋能领航者</div>
             <div class="text-[#455363] text-[16px] mt-[56px]">
-              FiEE彻底打破传统单一服务机构的局限，以行业变革者的姿态，深度融合前沿技术与丰富多元的资源，精心构建起一套贯穿文艺创作从萌芽构思到辉煌绽放全流程的 “全周期” 价值赋能体系。
+              FiEE彻底打破传统单一服务机构的局限，以行业变革者的姿态，深度融合前沿技术与丰富多元的资源，精心构建起一套贯穿文艺创作从萌芽构思到辉煌绽放全流程的 "全周期" 价值赋能体系。
               无论你是刚刚踏入文艺殿堂、怀揣梦想的创作新人，还是在文艺道路上摸爬滚打、渴望突破创作瓶颈、攀登更高文艺巅峰的成熟文艺工作者，FiEE都将成为你最坚实的伙伴，一路贴心陪伴，为你的文艺征途遮风挡雨，指引前行的方向。
             </div>
           </div>
 
-          <div class="text-[#10253E] text-[20px]">
+          <div class="text-[#10253E] text-[20px] image-animate">
             <img class="w-[465px] h-[415px]" src="@/assets/image/ship.png" alt="company">
           </div>
 
         </div>
       </div>
       <div class="content2 relative flex items-center justify-center pt-[168px]  bg-[#fff]">
-        <div class="text-[#8B59F7] text-[16px] absolute top-[129px] left-[505px]">公司介绍</div>
+        <div class="text-[#8B59F7] text-[16px] absolute top-[129px] left-[505px] text-animate">团队介绍</div>
         <div class="pl-[505px] pr-[490px] flex z-3">
-          <div class="w-[412px] mr-[40px]">
+          <div class="w-[412px] mr-[40px] text-animate">
             <div class="text-[#10253E] text-[40px]">汇聚精英</div>
             <div class="text-[#10253E] text-[40px]">燃文艺创变引擎</div>
             <div class="mt-[93px]">
@@ -118,7 +159,7 @@ onUnmounted(() => {
             </div>
           </div>
 
-          <div class="text-[#455363] text-[16px] flex-1">
+          <div class="text-[#455363] text-[16px] flex-1 image-animate">
             <div>
               FiEE团队由运营专家、技术精英及国际顾问组成，提供从内容策划到全球推广的全方位支持。通过跨界合作与资源整合，FiEE突破传统边界，探索文艺新表达。依托前沿技术与精准营销，助力作品实现商业价值与社会影响力的双重提升，为文艺繁荣注入持久动力。
             </div>
@@ -135,17 +176,68 @@ onUnmounted(() => {
         <n-divider class="divider5" vertical />
         <img class="absolute top-[95px] z-3 w-[800px] h-[163px] right-[0px]" src="@/assets/image/xlv.png" alt="cl">
         <img class="absolute" src="@/assets/image/xbg.png" alt="cl">
-        <div class="relative pl-[505px] pr-[490px] flex z-3 mt-[300px] z-4 flex-col">
+        <div class="relative pl-[505px] pr-[490px] flex z-3 mt-[300px] z-4 flex-col text-animate">
           <div class="text-[#8B59F7] text-[16px]">卓越建树</div>
           <div class="text-[#10253E] text-[40px]">以开拓之姿，登文艺之巅</div>
-          <div class="text-[#455363] w-[748px] text-[16px]">长期深耕文艺领域，FiEE持续拓展业务版图，积累了深厚的行业资源，搭建起广泛的合作网络。目前已与多个全球热门自媒体平台深度携手，从多维度助力文艺创作者闪耀国际舞台，绽放独有的艺术光芒。</div>
+          <div class="text-[#455363] w-[748px] text-[16px] mt-[30px]">
+            长期深耕文艺领域，FiEE持续拓展业务版图，积累了深厚的行业资源，搭建起广泛的合作网络。目前已与多个全球热门自媒体平台深度携手，从多维度助力文艺创作者闪耀国际舞台，绽放独有的艺术光芒。</div>
         </div>
       </div>
     </div>
 
   </main>
+  <footer>
+    <div class="footer-content">
+      <img class="copyright" src="@/assets/image/cp.png" alt="logo" />
+
+
+    </div>
+  </footer>
 </template>
 <style lang="scss" scoped>
+.header {
+  width: 100%;
+  height: 55px;
+  display: flex;
+  justify-content: space-between;
+  align-items: flex-end;
+  position: fixed;
+  z-index: 10;
+  top: 0;
+  left: 0;
+  right: 0;
+  padding: 0 14rem;
+  background-color: transparent;
+}
+
+.logo {
+  img {
+    width: 108px;
+    height: 33px;
+  }
+}
+
+.tabs {
+  display: flex;
+  gap: 32px;
+  margin-right: 32px;
+}
+
+.tab-item {
+  font-size: 16px;
+  color: #000000;
+  cursor: pointer;
+  transition: color 0.3s ease;
+  padding: 4px 8px;
+
+  &.active {
+    color: #8B59FA;
+  }
+
+  &:hover {
+    color: #8B59FA;
+  }
+}
 .head {
   width: 100%;
   background-color: #F8F9FF;
@@ -213,4 +305,15 @@ onUnmounted(() => {
   width: 1px;
   height: 100vw;
 }
+.footer-content {
+  height: 90px;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+
+  .copyright {
+    width: 232px;
+    height: 22pxpx;
+  }
+}
 </style>

src/views/home/size1440/index.vue

@@ -6,7 +6,9 @@ import { ScrollTrigger } from 'gsap/ScrollTrigger';
 import { useHome } from '@/store/home/index.js';
 import { useTransitionComposable } from '@/composables/transition-composable';
 import { useI18n } from 'vue-i18n';
+import { useRouter } from "vue-router";
 
+const router = useRouter();
 const { transitionState } = useTransitionComposable();
 const main = ref();
 const secondImage = ref(null);
@@ -21,6 +23,7 @@ const { t } = useI18n();
 
 const handleTabClick = (tab) => {
   currentTab.value = tab;
+  router.push('/' + tab);
 }
 
 const goToSection = (i) => {
@@ -525,6 +528,22 @@ watch(
 </script>
 
 <template>
+   <header className="header">
+      <div class="logo">
+        <img src="@/assets/image/logo.png" alt="logo" />
+      </div>
+      <div class="tabs">
+        <div class="tab-item" :class="{ active: currentTab === 'home' }" @click="handleTabClick('home')">
+          {{ t('home.nav.home') }}
+        </div>
+        <div class="tab-item" :class="{ active: currentTab === 'companyprofil' }" @click="handleTabClick('companyprofil')">
+          {{ t('home.nav.company') }}
+        </div>
+        <div class="tab-item" :class="{ active: currentTab === 'business' }" @click="handleTabClick('business')">
+          {{ t('home.nav.business') }}
+        </div>
+      </div>
+    </header>
   <main ref="main">
     <div class="scroll-down" :class="{ hide: !scrollDownVisible }">{{ t('home.scroll.tip') }}</div>
     <section className="panel first-panel">
@@ -578,7 +597,8 @@ watch(
             <div class="text-[#455363] text-[16px]  mt-[31px] mr-[30px]">
               <img class="w-[180px] h-[180px]" src="@/assets/image/jj1.png" alt="logo" />
               <div class="line"></div>
-              <div class="text-[#10253E] text-[20px] max-w-[200px] break-words">{{ t('home.section3.features.data.title') }}</div>
+              <div class="text-[#10253E] text-[20px] max-w-[200px] break-words">{{
+                t('home.section3.features.data.title') }}</div>
               <div class="text-[#455363] text-[16px] mt-[14px] max-w-[200px] break-words">
                 {{ t('home.section3.features.data.desc') }}
               </div>
@@ -586,7 +606,8 @@ watch(
             <div class="text-[#455363] text-[16px]  mt-[31px]  mr-[30px]">
               <img class="w-[180px] h-[180px]" src="@/assets/image/jj2.png" alt="logo" />
               <div class="line"></div>
-              <div class="text-[#10253E] text-[20px] max-w-[200px] break-words">{{ t('home.section3.features.ai.title') }}</div>
+              <div class="text-[#10253E] text-[20px] max-w-[200px] break-words">{{ t('home.section3.features.ai.title')
+                }}</div>
               <div class="text-[#455363] text-[16px] mt-[14px] max-w-[200px] break-words">
                 {{ t('home.section3.features.ai.desc') }}
               </div>
@@ -594,7 +615,8 @@ watch(
             <div class="text-[#455363] text-[16px]  mt-[31px]  mr-[30px]">
               <img class="w-[180px] h-[180px]" src="@/assets/image/jj3.png" alt="logo" />
               <div class="line"></div>
-              <div class="text-[#10253E] text-[20px] max-w-[200px] break-words">{{ t('home.section3.features.cloud.title') }}</div>
+              <div class="text-[#10253E] text-[20px] max-w-[200px] break-words">{{
+                t('home.section3.features.cloud.title') }}</div>
               <div class="text-[#455363] text-[16px] mt-[14px] max-w-[200px] break-words">
                 {{ t('home.section3.features.cloud.desc') }}
               </div>
@@ -602,7 +624,8 @@ watch(
             <div class="text-[#455363] text-[16px]  mt-[31px]  mr-[30px]">
               <img class="w-[180px] h-[180px]" src="@/assets/image/jj4.png" alt="logo" />
               <div class="line"></div>
-              <div class="text-[#10253E] text-[20px] max-w-[200px] break-words">{{ t('home.section3.features.cooperation.title') }}</div>
+              <div class="text-[#10253E] text-[20px] max-w-[200px] break-words">{{
+                t('home.section3.features.cooperation.title') }}</div>
               <div class="text-[#455363] text-[16px] mt-[14px] max-w-[200px] break-words">
                 {{ t('home.section3.features.cooperation.desc') }}
               </div>
@@ -610,7 +633,8 @@ watch(
             <div class="text-[#455363] text-[16px]  mt-[31px]  mr-[30px]">
               <img class="w-[180px] h-[180px]" src="@/assets/image/jj5.png" alt="logo" />
               <div class="line "></div>
-              <div class="text-[#10253E] text-[20px] max-w-[200px] break-words">{{ t('home.section3.features.promotion.title') }}</div>
+              <div class="text-[#10253E] text-[20px] max-w-[200px] break-words">{{
+                t('home.section3.features.promotion.title') }}</div>
               <div class="text-[#455363] text-[16px] mt-[14px] max-w-[200px] break-words">
                 {{ t('home.section3.features.promotion.desc') }}
               </div>
@@ -691,6 +715,49 @@ watch(
 </template>
 
 <style scoped lang="scss">
+.header {
+  width: 100%;
+  height: 55px;
+  display: flex;
+  justify-content: space-between;
+  align-items: flex-end;
+  position: fixed;
+  z-index: 10;
+  top: 0;
+  left: 0;
+  right: 0;
+  padding: 0 14rem;
+  background-color: transparent;
+}
+
+.logo {
+  img {
+    width: 108px;
+    height: 33px;
+  }
+}
+
+.tabs {
+  display: flex;
+  gap: 32px;
+  margin-right: 32px;
+}
+
+.tab-item {
+  font-size: 16px;
+  color: #000000;
+  cursor: pointer;
+  transition: color 0.3s ease;
+  padding: 4px 8px;
+
+  &.active {
+    color: #8B59FA;
+  }
+
+  &:hover {
+    color: #8B59FA;
+  }
+}
 .scroll-down {
   position: fixed;
   bottom: 50px;
@@ -713,6 +780,7 @@ height: 38px;
   display: flex;
   justify-content: center;
   align-items: center;
+
   &.hide {
     opacity: 0;
     pointer-events: none;
@@ -720,9 +788,12 @@ align-items: center;
 }
 
 @keyframes float {
-  0%, 100% {
+
+  0%,
+  100% {
     transform: translate(-50%, 0);
   }
+
   50% {
     transform: translate(-50%, -10px);
   }
@@ -731,9 +802,11 @@ align-items: center;
 :deep .n-carousel__dot {
   background-color: #DDDDDD !important;
 }
+
 :deep .n-carousel__dot--active {
   background-color: #8B59F7 !important;
 }
+
 .divider1 {
   position: absolute;
   z-index: 3;
@@ -797,49 +870,7 @@ align-items: center;
   -moz-osx-font-smoothing: grayscale;
 }
 
-.header {
-  width: 100%;
-  height: 55px;
-  display: flex;
-  justify-content: space-between;
-  align-items: flex-end;
-  position: fixed;
-  z-index: 10;
-  top: 0;
-  left: 0;
-  right: 0;
-  padding: 0 10rem;
-  background-color: transparent;
-}
 
-.logo {
-  img {
-    width: 108px;
-    height: 33px;
-  }
-}
-
-.tabs {
-  display: flex;
-  gap: 32px;
-  margin-right: 32px;
-}
-
-.tab-item {
-  font-size: 16px;
-  color: #000000;
-  cursor: pointer;
-  transition: color 0.3s ease;
-  padding: 4px 8px;
-
-  &.active {
-    color: #8B59FA;
-  }
-
-  &:hover {
-    color: #8B59FA;
-  }
-}
 
 .panel {
   height: 100vh;
@@ -1001,11 +1032,13 @@ align-items: center;
   width: 100%;
   padding: 0 23px;
 }
+
 .footer-content {
   height: 90px;
   display: flex;
   justify-content: center;
   align-items: center;
+
   .copyright {
     width: 232px;
     height: 22pxpx;

src/views/home/size1920/index.vue

@@ -21,6 +21,8 @@ let lastScrollTime = 0;  // 添加最后滚动时间记录
 const scrollDownVisible = ref(true);
 const { t } = useI18n();
 
+
+
 const handleTabClick = (tab) => {
   currentTab.value = tab;
   router.push('/' + tab);
@@ -90,6 +92,7 @@ const handleWheel = (e) => {
 
 // 监听滚轮事件
 onMounted(() => {
+  window.scrollTo(0, 0);
   window.addEventListener('wheel', handleWheel, { passive: false });
 });
 
@@ -528,7 +531,22 @@ watch(
 </script>
 
 <template>
-
+   <header className="header">
+      <div class="logo">
+        <img src="@/assets/image/logo.png" alt="logo" />
+      </div>
+      <div class="tabs">
+        <div class="tab-item" :class="{ active: currentTab === 'home' }" @click="handleTabClick('home')">
+          {{ t('home.nav.home') }}
+        </div>
+        <div class="tab-item" :class="{ active: currentTab === 'companyprofil' }" @click="handleTabClick('companyprofil')">
+          {{ t('home.nav.company') }}
+        </div>
+        <div class="tab-item" :class="{ active: currentTab === 'business' }" @click="handleTabClick('business')">
+          {{ t('home.nav.business') }}
+        </div>
+      </div>
+    </header>
   <main ref="main">
     <div class="scroll-down" :class="{ hide: !scrollDownVisible }">{{ t('home.scroll.tip') }}</div>
     <section className="panel first-panel">
@@ -700,6 +718,49 @@ watch(
 </template>
 
 <style scoped lang="scss">
+.header {
+  width: 100%;
+  height: 55px;
+  display: flex;
+  justify-content: space-between;
+  align-items: flex-end;
+  position: fixed;
+  z-index: 10;
+  top: 0;
+  left: 0;
+  right: 0;
+  padding: 0 14rem;
+  background-color: transparent;
+}
+
+.logo {
+  img {
+    width: 108px;
+    height: 33px;
+  }
+}
+
+.tabs {
+  display: flex;
+  gap: 32px;
+  margin-right: 32px;
+}
+
+.tab-item {
+  font-size: 16px;
+  color: #000000;
+  cursor: pointer;
+  transition: color 0.3s ease;
+  padding: 4px 8px;
+
+  &.active {
+    color: #8B59FA;
+  }
+
+  &:hover {
+    color: #8B59FA;
+  }
+}
 .scroll-down {
   position: fixed;
   bottom: 50px;
@@ -812,49 +873,7 @@ watch(
   -moz-osx-font-smoothing: grayscale;
 }
 
-.header {
-  width: 100%;
-  height: 55px;
-  display: flex;
-  justify-content: space-between;
-  align-items: flex-end;
-  position: fixed;
-  z-index: 10;
-  top: 0;
-  left: 0;
-  right: 0;
-  padding: 0 10rem;
-  background-color: transparent;
-}
 
-.logo {
-  img {
-    width: 108px;
-    height: 33px;
-  }
-}
-
-.tabs {
-  display: flex;
-  gap: 32px;
-  margin-right: 32px;
-}
-
-.tab-item {
-  font-size: 16px;
-  color: #000000;
-  cursor: pointer;
-  transition: color 0.3s ease;
-  padding: 4px 8px;
-
-  &.active {
-    color: #8B59FA;
-  }
-
-  &:hover {
-    color: #8B59FA;
-  }
-}
 
 .panel {
   height: 100vh;