补上图片

src/components/ProfilePageHero.vue

@@ -0,0 +1,20 @@
+<script setup>
+import profileHeroBg from '../static/profilebackg.png'
+</script>
+
+<template>
+  <section class="page-hero">
+    <div
+      class="page-hero__bg"
+      :style="{ backgroundImage: `url(${profileHeroBg})` }"
+    />
+    <div class="page-hero__overlay" />
+    <div class="container page-hero__inner">
+      <div class="page-hero__content">
+        <h1 class="page-hero__title">企业概况</h1>
+        <span class="page-hero__line" />
+        <p class="page-hero__subtitle">COMPANY PROFILE</p>
+      </div>
+    </div>
+  </section>
+</template>

src/components/ProfilePageSectionHeader.vue

@@ -0,0 +1,13 @@
+<script setup>
+defineProps({
+  titleEn: { type: String, required: true },
+  titleCn: { type: String, required: true },
+})
+</script>
+
+<template>
+  <div class="profile-page-section-header">
+    <h2 class="profile-page-section-header__en">{{ titleEn }}</h2>
+    <p class="profile-page-section-header__cn">—— {{ titleCn }} ——</p>
+  </div>
+</template>

src/composables/useAppNavigation.js

@@ -0,0 +1,94 @@
+import { ref, computed, onMounted, onUnmounted } from 'vue'
+import { useRoute, useRouter } from 'vue-router'
+
+const HEADER_HEIGHT = 70
+const SCROLL_OFFSET = 100
+
+export function useAppNavigation(homeSectionIds = []) {
+  const route = useRoute()
+  const router = useRouter()
+  const scrolled = ref(false)
+  const homeActiveSection = ref('home')
+
+  const activeNav = computed(() => {
+    if (route.name === 'profile') return 'profile'
+    if (route.name === 'contact') return 'contact'
+    return 'home'
+  })
+
+  function scrollToSection(id) {
+    const target = document.getElementById(id)
+    if (target) {
+      window.scrollTo({
+        top: target.offsetTop - HEADER_HEIGHT,
+        behavior: 'smooth',
+      })
+    }
+  }
+
+  function updateHomeActiveSection() {
+    if (route.name !== 'home' || !homeSectionIds.length) return
+
+    const scrollPos = window.scrollY + HEADER_HEIGHT + SCROLL_OFFSET
+
+    for (let i = homeSectionIds.length - 1; i >= 0; i--) {
+      const section = document.getElementById(homeSectionIds[i])
+      if (section && scrollPos >= section.offsetTop) {
+        homeActiveSection.value = homeSectionIds[i]
+        return
+      }
+    }
+  }
+
+  function navigate(target) {
+    if (target === 'profile') {
+      router.push({ name: 'profile' })
+      return
+    }
+
+    if (target === 'contact') {
+      router.push({ name: 'contact' })
+      return
+    }
+
+    if (target === 'home') {
+      router.push({ name: 'home' })
+      return
+    }
+
+    if (target === 'business' || target === 'scope') {
+      if (route.name !== 'home') {
+        router.push({ name: 'home', hash: `#${target}` })
+      } else {
+        scrollToSection(target)
+      }
+      return
+    }
+
+    if (route.name !== 'home') {
+      router.push({ name: 'home', hash: `#${target}` })
+    } else {
+      scrollToSection(target)
+    }
+  }
+
+  function onScroll() {
+    scrolled.value = window.scrollY > 50
+    updateHomeActiveSection()
+  }
+
+  onMounted(() => {
+    window.addEventListener('scroll', onScroll, { passive: true })
+    onScroll()
+
+    if (route.hash) {
+      setTimeout(() => scrollToSection(route.hash.slice(1)), 100)
+    }
+  })
+
+  onUnmounted(() => {
+    window.removeEventListener('scroll', onScroll)
+  })
+
+  return { scrolled, activeNav, navigate, scrollToSection }
+}

src/router/index.js

@@ -0,0 +1,21 @@
+import { createRouter, createWebHistory } from 'vue-router'
+import HomePage from '../views/HomePage.vue'
+import ProfilePage from '../views/ProfilePage.vue'
+import ContactPage from '../views/ContactPage.vue'
+
+const router = createRouter({
+  history: createWebHistory(),
+  routes: [
+    { path: '/', name: 'home', component: HomePage },
+    { path: '/profile', name: 'profile', component: ProfilePage },
+    { path: '/contact', name: 'contact', component: ContactPage },
+  ],
+  scrollBehavior(to) {
+    if (to.hash) {
+      return { el: to.hash, top: 70, behavior: 'smooth' }
+    }
+    return { top: 0 }
+  },
+})
+
+export default router

src/views/ContactPage.vue

@@ -0,0 +1,45 @@
+<script setup>
+import ContactPageHero from '../components/ContactPageHero.vue'
+import ContactPageSectionHeader from '../components/ContactPageSectionHeader.vue'
+import AppFooter from '../components/AppFooter.vue'
+import contactMapImg from '../static/mapimg.png'
+import { contactContent } from '../data/site'
+
+const emit = defineEmits(['navigate'])
+</script>
+
+<template>
+  <ContactPageHero />
+
+  <section class="contact-page-section">
+    <div class="container">
+      <ContactPageSectionHeader />
+
+      <div class="contact-page-body">
+        <div class="contact-page-info">
+          <h3 class="contact-page-info__label">
+            联系我们 <span>CONTACT US</span>
+          </h3>
+          <p class="contact-page-info__greeting">{{ contactContent.greeting }}</p>
+          <p class="contact-page-info__intro">{{ contactContent.intro }}</p>
+          <div class="contact-page-info__block">
+            <h4>{{ contactContent.address.title }}</h4>
+            <p v-for="(line, index) in contactContent.address.lines" :key="index">
+              {{ line }}
+            </p>
+          </div>
+          <div class="contact-page-info__block">
+            <h4>{{ contactContent.methods.title }}</h4>
+            <p v-for="(line, index) in contactContent.methods.lines" :key="index">
+              {{ line }}
+            </p>
+          </div>
+        </div>
+
+        <img class="contact-page-map" :src="contactMapImg" alt="公司位置地图" />
+      </div>
+    </div>
+  </section>
+
+  <AppFooter @navigate="emit('navigate', $event)" />
+</template>

src/views/HomePage.vue

@@ -0,0 +1,15 @@
+<script setup>
+import HeroSection from '../components/HeroSection.vue'
+import MainBusiness from '../components/MainBusiness.vue'
+import BusinessScope from '../components/BusinessScope.vue'
+import AppFooter from '../components/AppFooter.vue'
+
+const emit = defineEmits(['navigate'])
+</script>
+
+<template>
+  <HeroSection @navigate="emit('navigate', $event)" />
+  <MainBusiness />
+  <BusinessScope />
+  <AppFooter @navigate="emit('navigate', $event)" />
+</template>

src/views/ProfilePage.vue

@@ -0,0 +1,59 @@
+<script setup>
+import ProfilePageHero from '../components/ProfilePageHero.vue'
+import ProfilePageSectionHeader from '../components/ProfilePageSectionHeader.vue'
+import AppFooter from '../components/AppFooter.vue'
+import profileCenterImg from '../static/profilecenterimg.png'
+import missionImg from '../static/messionimg.png'
+import {
+  profilePageIntro,
+  profilePageVisionQuote,
+  profilePageMissionText,
+} from '../data/site'
+
+const emit = defineEmits(['navigate'])
+</script>
+
+<template>
+  <ProfilePageHero />
+
+  <section class="profile-page-section profile-page-section--intro">
+    <div class="container">
+      <ProfilePageSectionHeader title-en="COMPANY PROFILE" title-cn="公司简介" />
+      <div class="profile-page-intro">
+        <div class="profile-page-intro__visual">
+          <img
+            class="profile-page-intro__img"
+            :src="profileCenterImg"
+            alt="公司简介"
+          />
+        </div>
+        <div class="profile-page-intro__text">
+          <p v-for="(paragraph, index) in profilePageIntro" :key="index">
+            {{ paragraph }}
+          </p>
+        </div>
+      </div>
+    </div>
+  </section>
+
+  <section class="profile-page-section profile-page-section--vision">
+    <div class="container">
+      <ProfilePageSectionHeader title-en="VISION AND MISSION" title-cn="愿景使命" />
+      <p class="profile-page-vision-quote">{{ profilePageVisionQuote }}</p>
+      <div class="profile-page-vision">
+        <div class="profile-page-vision__text">
+          <p>{{ profilePageMissionText }}</p>
+        </div>
+        <div class="profile-page-vision__visual">
+          <img
+            class="profile-page-vision__img"
+            :src="missionImg"
+            alt="愿景使命"
+          />
+        </div>
+      </div>
+    </div>
+  </section>
+
+  <AppFooter @navigate="emit('navigate', $event)" />
+</template>