官网

package-lock.json

@@ -8,7 +8,8 @@
       "name": "alien-website",
       "version": "1.0.0",
       "dependencies": {
-        "vue": "^3.5.13"
+        "vue": "^3.5.13",
+        "vue-router": "^4.6.4"
       },
       "devDependencies": {
         "@vitejs/plugin-vue": "^5.2.1",
@@ -930,6 +931,12 @@
         "@vue/shared": "3.5.35"
       }
     },
+    "node_modules/@vue/devtools-api": {
+      "version": "6.6.4",
+      "resolved": "https://registry.npmmirror.com/@vue/devtools-api/-/devtools-api-6.6.4.tgz",
+      "integrity": "sha512-sGhTPMuXqZ1rVOk32RylztWkfXTRhuS7vgAKv0zjqk8gbsHkJ7xfFf+jbySxt7tWObEJwyKaHMikV/WGDiQm8g==",
+      "license": "MIT"
+    },
     "node_modules/@vue/reactivity": {
       "version": "3.5.35",
       "resolved": "https://registry.npmmirror.com/@vue/reactivity/-/reactivity-3.5.35.tgz",
@@ -1322,6 +1329,21 @@
           "optional": true
         }
       }
+    },
+    "node_modules/vue-router": {
+      "version": "4.6.4",
+      "resolved": "https://registry.npmmirror.com/vue-router/-/vue-router-4.6.4.tgz",
+      "integrity": "sha512-Hz9q5sa33Yhduglwz6g9skT8OBPii+4bFn88w6J+J4MfEo4KRRpmiNG/hHHkdbRFlLBOqxN8y8gf2Fb0MTUgVg==",
+      "license": "MIT",
+      "dependencies": {
+        "@vue/devtools-api": "^6.6.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/posva"
+      },
+      "peerDependencies": {
+        "vue": "^3.5.0"
+      }
     }
   }
 }

package.json

@@ -9,7 +9,8 @@
     "preview": "vite preview"
   },
   "dependencies": {
-    "vue": "^3.5.13"
+    "vue": "^3.5.13",
+    "vue-router": "^4.6.4"
   },
   "devDependencies": {
     "@vitejs/plugin-vue": "^5.2.1",

src/App.vue

@@ -1,27 +1,24 @@
 <script setup>
+import { watch } from 'vue'
+import { useRoute } from 'vue-router'
 import AppHeader from './components/AppHeader.vue'
-import HeroSection from './components/HeroSection.vue'
-import CompanyProfile from './components/CompanyProfile.vue'
-import MainBusiness from './components/MainBusiness.vue'
-import BusinessScope from './components/BusinessScope.vue'
-import ContactSection from './components/ContactSection.vue'
-import AppFooter from './components/AppFooter.vue'
-import { useScrollNav } from './composables/useScrollNav'
+import { useAppNavigation } from './composables/useAppNavigation'
 
-const sectionIds = ['home', 'business', 'profile', 'scope', 'contact']
-const { scrolled, activeSection, scrollToSection } = useScrollNav(sectionIds)
+const route = useRoute()
+const homeSectionIds = ['home', 'business', 'scope']
+const { scrolled, activeNav, navigate, scrollToSection } = useAppNavigation(homeSectionIds)
+
+watch(
+  () => route.fullPath,
+  () => {
+    if (route.hash) {
+      setTimeout(() => scrollToSection(route.hash.slice(1)), 100)
+    }
+  },
+)
 </script>
 
 <template>
-  <AppHeader
-    :scrolled="scrolled"
-    :active-section="activeSection"
-    @navigate="scrollToSection"
-  />
-  <HeroSection @navigate="scrollToSection" />
-  <MainBusiness />
-  <CompanyProfile />
-  <BusinessScope />
-  <ContactSection />
-  <AppFooter @navigate="scrollToSection" />
+  <AppHeader :scrolled="scrolled" :active-nav="activeNav" @navigate="navigate" />
+  <router-view @navigate="navigate" />
 </template>

src/assets/styles/global.css

@@ -118,6 +118,7 @@ img {
   z-index: 1000;
   height: var(--header-height);
   background: transparent;
+  border-bottom: 1px solid rgba(255,255,255,0.2);
   transition: background var(--transition), box-shadow var(--transition);
 }
 
@@ -143,6 +144,10 @@ img {
   margin-left: var(--content-offset-x);
 }
 
+.header .logo img {
+  height: 28px;
+}
+
 .logo-icon {
   width: 36px;
   height: 36px;
@@ -418,7 +423,10 @@ img {
 .profile-main {
   position: relative;
   min-height: 532px;
-  background: var(--color-placeholder);
+  background-color: var(--color-placeholder);
+  background-size: cover;
+  background-position: center;
+  background-repeat: no-repeat;
   overflow: hidden;
 }
 
@@ -446,7 +454,7 @@ img {
 }
 
 .profile-main-text p {
-  font-size: 14px;
+  font-size: 16px;
   line-height: 2;
   max-width: 420px;
   opacity: 0.95;
@@ -459,58 +467,68 @@ img {
   min-height: 532px;
 }
 
-.profile-row {
-  display: grid;
-  grid-template-columns: 1fr 1fr;
-  gap: 12px;
-  min-height: 0;
+.profile-idea {
+  position: relative;
+  min-height: 260px;
+  background-size: cover;
+  background-position: center;
+  background-repeat: no-repeat;
+  overflow: hidden;
 }
 
-.profile-philosophy {
-  background: var(--color-primary);
-  color: #ffffff;
-  padding: 28px 24px;
+.profile-idea-text {
+  position: absolute;
+  inset: 0;
+  width: 50%;
   display: flex;
   flex-direction: column;
   justify-content: center;
-  min-height: 100%;
+  padding: 28px 24px;
+  color: #ffffff;
 }
 
-.profile-philosophy h3 {
+.profile-idea-text h3 {
   font-size: 22px;
   margin-bottom: 12px;
   font-weight: 600;
 }
 
-.profile-philosophy p {
-  font-size: 13px;
+.profile-idea-text p {
+  font-size: 16px;
   line-height: 1.9;
   opacity: 0.92;
 }
 
-.profile-img {
-  min-height: 100%;
-  height: 100%;
+.profile-culture-block {
+  position: relative;
+  min-height: 260px;
+  background-size: cover;
+  background-position: center;
+  background-repeat: no-repeat;
+  overflow: hidden;
 }
 
-.profile-culture {
-  background: var(--color-gold);
-  color: #ffffff;
-  padding: 28px 24px;
+.profile-culture-text {
+  position: absolute;
+  top: 0;
+  right: 0;
+  bottom: 0;
+  width: 50%;
   display: flex;
   flex-direction: column;
   justify-content: center;
-  min-height: 100%;
+  padding: 28px 24px;
+  color: #ffffff;
 }
 
-.profile-culture h3 {
+.profile-culture-text h3 {
   font-size: 22px;
   margin-bottom: 12px;
   font-weight: 600;
 }
 
-.profile-culture p {
-  font-size: 13px;
+.profile-culture-text p {
+  font-size: 16px;
   line-height: 1.9;
   opacity: 0.95;
 }
@@ -648,11 +666,13 @@ img {
 }
 
 .scope-text p {
-  font-size: 14px;
+  font-size: 15px;
   color: var(--color-text-light);
   line-height: 2;
   margin-bottom: 16px;
   text-align: justify;
+  font-weight: bold;
+  color: #000;
 }
 
 .scope-text p:last-child {
@@ -660,36 +680,19 @@ img {
 }
 
 .scope-map {
-  aspect-ratio: 4 / 3;
-  border-radius: 4px;
-  min-height: 360px;
-}
-
-.flag-grid {
-  position: absolute;
-  inset: 0;
-  display: flex;
-  flex-wrap: wrap;
-  align-items: center;
-  justify-content: center;
-  gap: 16px;
-  padding: 40px;
-  z-index: 1;
-}
-
-.flag-item {
-  font-size: 28px;
-  cursor: default;
-  transition: transform var(--transition);
-}
-
-.flag-item:hover {
-  transform: scale(1.2);
+  width: 100%;
+  height: auto;
+  display: block;
+  object-fit: contain;
 }
 
 /* ===== 联系我们 ===== */
 .section-contact {
-  background: var(--color-bg-section);
+  background: #f7f8fc;
+}
+
+.section-contact .section-title-en {
+  color: #f3f3f3;
 }
 
 .contact-content {
@@ -699,40 +702,43 @@ img {
   align-items: start;
 }
 
-.contact-info {
-  display: flex;
-  flex-direction: column;
-  gap: 36px;
-  padding-top: 20px;
+.contact-detail {
+  padding-top: 8px;
 }
 
-.contact-item {
-  display: flex;
-  gap: 16px;
-  align-items: flex-start;
+.contact-greeting {
+  font-size: 22px;
+  font-weight: 700;
+  color: var(--color-text);
+  margin-bottom: 20px;
 }
 
-.contact-icon {
-  font-size: 20px;
-  width: 40px;
-  height: 40px;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  background: var(--color-primary);
-  border-radius: 50%;
-  flex-shrink: 0;
+.contact-intro {
+  font-size: 14px;
+  line-height: 2;
+  color: var(--color-text-light);
+  margin-bottom: 32px;
+  text-align: justify;
 }
 
-.contact-item strong {
-  display: block;
+.contact-block {
+  margin-bottom: 28px;
+}
+
+.contact-block:last-child {
+  margin-bottom: 0;
+}
+
+.contact-block h4 {
   font-size: 16px;
-  margin-bottom: 6px;
+  font-weight: 700;
   color: var(--color-text);
+  margin-bottom: 10px;
 }
 
-.contact-item p {
+.contact-block p {
   font-size: 14px;
+  line-height: 1.9;
   color: var(--color-text-light);
 }
 
@@ -779,53 +785,67 @@ img {
 
 /* ===== 页脚 ===== */
 .footer {
-  background: var(--color-footer);
-  color: rgba(255, 255, 255, 0.7);
-  padding-top: 60px;
+  background: #000;
+  color: rgba(255, 255, 255, 0.65);
+  padding-top: 48px;
 }
 
 .footer-inner {
-  display: flex;
-  justify-content: space-between;
-  padding-bottom: 40px;
+  display: grid;
+  grid-template-columns: 1.2fr 1fr 1.2fr;
+  gap: 40px;
+  align-items: start;
+  padding-bottom: 36px;
 }
 
 .footer-brand .logo {
   margin-bottom: 16px;
 }
 
+.footer-brand .logo img {
+  height: 24px;
+}
+
 .footer-company-name {
+  font-size: 18px;
+  font-weight: 500;
+  color: rgba(255, 255, 255, 0.85);
+  line-height: 1.6;
+}
+
+.footer-nav h4,
+.footer-contact h4 {
+  color: rgba(255, 255, 255, 0.45);
   font-size: 13px;
-  color: rgba(255, 255, 255, 0.5);
+  font-weight: 400;
+  margin-bottom: 16px;
 }
 
-.footer-links {
+.footer-nav-links {
   display: flex;
-  gap: 80px;
+  flex-wrap: wrap;
+  gap: 24px;
 }
 
-.footer-col h4 {
-  color: #ffffff;
-  font-size: 15px;
-  margin-bottom: 16px;
-  font-weight: 600;
+.footer-nav-links a {
+  font-size: 14px;
+  color: rgba(255, 255, 255, 0.65);
+  transition: color var(--transition);
 }
 
-.footer-col a {
-  display: block;
-  font-size: 13px;
-  color: rgba(255, 255, 255, 0.5);
-  margin-bottom: 10px;
-  transition: color var(--transition);
+.footer-nav-links a:hover {
+  color: rgba(255, 255, 255, 0.95);
 }
 
-.footer-col a:hover {
-  color: rgba(255, 255, 255, 0.9);
+.footer-contact p {
+  font-size: 14px;
+  line-height: 2;
+  color: rgba(255, 255, 255, 0.65);
 }
 
 .footer-bottom {
   border-top: 1px solid rgba(255, 255, 255, 0.08);
-  padding: 20px 0;
+  padding: 18px 0 24px;
   text-align: center;
 }
 
@@ -855,3 +875,278 @@ img {
   opacity: 1;
   transform: translate(-50%, -50%) scale(1);
 }
+
+/* ===== 独立页 Hero ===== */
+.page-hero {
+  position: relative;
+  height: 420px;
+  overflow: hidden;
+}
+
+.page-hero__bg {
+  position: absolute;
+  inset: 0;
+  background-size: cover;
+  background-position: center;
+  background-repeat: no-repeat;
+}
+
+.page-hero__overlay {
+  position: absolute;
+  inset: 0;
+  background: rgba(8, 18, 34, 0.55);
+}
+
+.page-hero__inner {
+  position: relative;
+  z-index: 1;
+  height: 100%;
+}
+
+.page-hero__content {
+  display: flex;
+  flex-direction: column;
+  justify-content: flex-end;
+  height: 100%;
+  padding-bottom: 72px;
+  margin-left: var(--content-offset-x);
+}
+
+.page-hero__title {
+  font-size: 42px;
+  font-weight: 700;
+  color: #ffffff;
+  letter-spacing: 2px;
+  margin-bottom: 16px;
+}
+
+.page-hero__line {
+  display: block;
+  width: 48px;
+  height: 3px;
+  background: #ffffff;
+  margin-bottom: 16px;
+}
+
+.page-hero__subtitle {
+  font-size: 18px;
+  font-weight: 400;
+  letter-spacing: 3px;
+  color: rgba(255, 255, 255, 0.9);
+}
+
+/* ===== 企业概况独立页 ===== */
+.profile-page-section {
+  padding: 80px 0 96px;
+}
+
+.profile-page-section--intro {
+  background: #ffffff;
+}
+
+.profile-page-section--vision {
+  background: #f7f8fc;
+}
+
+.profile-page-section-header {
+  text-align: center;
+  margin-bottom: 56px;
+}
+
+.profile-page-section-header__en {
+  font-size: 28px;
+  font-weight: 700;
+  letter-spacing: 2px;
+  color: var(--color-text);
+  margin-bottom: 12px;
+}
+
+.profile-page-section-header__cn {
+  font-size: 16px;
+  color: var(--color-text-light);
+  letter-spacing: 2px;
+}
+
+.profile-page-intro {
+  display: grid;
+  grid-template-columns: 1fr 1fr;
+  gap: 72px;
+  align-items: center;
+}
+
+.profile-page-intro__visual {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.profile-page-intro__img {
+  width: 100%;
+  height: auto;
+  display: block;
+  object-fit: contain;
+}
+
+.profile-page-intro__text p {
+  font-size: 15px;
+  line-height: 2.1;
+  color: var(--color-text);
+  text-align: justify;
+  margin-bottom: 20px;
+  font-weight: bold;
+}
+
+.profile-page-intro__text p:last-child {
+  margin-bottom: 0;
+}
+
+.profile-page-vision-quote {
+  max-width: 920px;
+  margin: 0 auto 56px;
+  text-align: center;
+  font-size: 18px;
+  font-weight: 700;
+  line-height: 1.9;
+  color: var(--color-text);
+}
+
+.profile-page-vision {
+  display: grid;
+  grid-template-columns: 1fr 1fr;
+  align-items: center;
+}
+
+.profile-page-vision__text p {
+  font-size: 15px;
+  line-height: 2.1;
+  color: var(--color-text);
+  text-align: justify;
+  font-weight: bold;
+  color: #000;
+}
+
+.profile-page-vision__visual {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.profile-page-vision__img {
+  width: 78%;
+  max-width: 420px;
+  height: auto;
+  display: block;
+  object-fit: contain;
+}
+
+/* ===== 联系我们独立页 ===== */
+.contact-page-section {
+  padding: 72px 0 96px;
+  background: #ffffff;
+}
+
+.contact-page-section-header {
+  text-align: center;
+  margin-bottom: 48px;
+}
+
+.contact-page-section-header__en {
+  font-size: 28px;
+  font-weight: 700;
+  letter-spacing: 2px;
+  color: var(--color-text);
+  margin-bottom: 12px;
+}
+
+.contact-page-section-header__cn {
+  font-size: 16px;
+  color: var(--color-text-light);
+  letter-spacing: 2px;
+  margin-bottom: 20px;
+}
+
+.contact-page-section-header__divider {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 0;
+  width: 100%;
+  margin: 0 auto;
+}
+
+.contact-page-section-header__divider span {
+  display: block;
+  height: 1px;
+  flex: 1;
+  background: #e4e6eb;
+}
+
+.contact-page-section-header__divider span.is-accent {
+  flex: 0 0 140px;
+  height: 3px;
+  background: linear-gradient(135deg, #1fb2f9 0%, #1578e5 100%);
+}
+
+.contact-page-body {
+  max-width: 920px;
+  margin: 0 auto;
+}
+
+.contact-page-info {
+  margin-bottom: 48px;
+}
+
+.contact-page-info__label {
+  font-size: 18px;
+  font-weight: 600;
+  color: #1fb2f9;
+  margin-bottom: 24px;
+}
+
+.contact-page-info__label span {
+  font-weight: 600;
+  letter-spacing: 1px;
+}
+
+.contact-page-info__greeting {
+  font-size: 18px;
+  font-weight: 700;
+  color: var(--color-text);
+  margin-bottom: 16px;
+}
+
+.contact-page-info__intro {
+  font-size: 14px;
+  line-height: 2;
+  color: var(--color-text-light);
+  text-align: justify;
+  margin-bottom: 32px;
+}
+
+.contact-page-info__block {
+  margin-bottom: 28px;
+}
+
+.contact-page-info__block:last-child {
+  margin-bottom: 0;
+}
+
+.contact-page-info__block h4 {
+  font-size: 16px;
+  font-weight: 700;
+  color: var(--color-text);
+  margin-bottom: 10px;
+}
+
+.contact-page-info__block p {
+  font-size: 14px;
+  line-height: 1.9;
+  color: var(--color-text-light);
+}
+
+.contact-page-map {
+  width: 100%;
+  height: auto;
+  display: block;
+  border: 1px solid #e4e6eb;
+}

src/components/AppFooter.vue

@@ -1,5 +1,5 @@
 <script setup>
-import { footerLinks } from '../data/site'
+import { footerNav, footerContact, footerCopyright } from '../data/site'
 import AppLogo from './AppLogo.vue'
 
 const emit = defineEmits(['navigate'])
@@ -14,23 +14,29 @@ const emit = defineEmits(['navigate'])
         </a>
         <p class="footer-company-name">爱丽恩严(大连)商务科技有限公司</p>
       </div>
-      <div class="footer-links">
-        <div v-for="col in footerLinks" :key="col.title" class="footer-col">
-          <h4>{{ col.title }}</h4>
+      <div class="footer-nav">
+        <h4>网站导航</h4>
+        <div class="footer-nav-links">
           <a
-            v-for="link in col.links"
-            :key="link.label"
+            v-for="item in footerNav"
+            :key="item.label"
             href="#"
-            @click.prevent="emit('navigate', link.target)"
+            @click.prevent="emit('navigate', item.target)"
           >
-            {{ link.label }}
+            {{ item.label }}
           </a>
         </div>
       </div>
+      <div class="footer-contact">
+        <h4>联系我们</h4>
+        <p v-for="item in footerContact" :key="item.label">
+          {{ item.label }}：{{ item.value }}
+        </p>
+      </div>
     </div>
     <div class="footer-bottom">
       <div class="container">
-        <p>&copy; 2026 爱丽恩严(大连)商务科技有限公司 版权所有</p>
+        <p>{{ footerCopyright }}</p>
       </div>
     </div>
   </footer>

src/components/AppHeader.vue

@@ -4,7 +4,7 @@ import AppLogo from './AppLogo.vue'
 
 defineProps({
   scrolled: { type: Boolean, default: false },
-  activeSection: { type: String, default: 'home' },
+  activeNav: { type: String, default: 'home' },
 })
 
 const emit = defineEmits(['navigate'])
@@ -22,7 +22,7 @@ const emit = defineEmits(['navigate'])
           :key="item.id"
           href="#"
           class="nav-link"
-          :class="{ active: activeSection === item.id }"
+          :class="{ active: activeNav === item.id }"
           @click.prevent="emit('navigate', item.id)"
         >
           {{ item.label }}

src/components/BusinessScope.vue

@@ -1,29 +1,18 @@
 <script setup>
-import SectionHeader from './SectionHeader.vue'
-import ImagePlaceholder from './ImagePlaceholder.vue'
-import { scopeParagraphs, flags } from '../data/site'
+import SectionHeaderBlock from './SectionHeaderBlock.vue'
+import countryMap from '../static/country.png'
+import { scopeParagraphs } from '../data/site'
 </script>
 
 <template>
   <section class="section section-scope" id="scope">
     <div class="container">
-      <SectionHeader title-en="BUSINESS SCOPE" title-cn="业务范围" />
+      <SectionHeaderBlock title-en="BUSINESS SCOPE" title-cn="业务范围" />
       <div class="scope-content">
         <div class="scope-text">
           <p v-for="(text, index) in scopeParagraphs" :key="index">{{ text }}</p>
         </div>
-        <ImagePlaceholder class="scope-map" placeholder="世界地图">
-          <div class="flag-grid">
-            <span
-              v-for="flag in flags"
-              :key="flag.title"
-              class="flag-item"
-              :title="flag.title"
-            >
-              {{ flag.emoji }}
-            </span>
-          </div>
-        </ImagePlaceholder>
+        <img class="scope-map" :src="countryMap" alt="业务范围世界地图" />
       </div>
     </div>
   </section>

src/components/CompanyProfile.vue

@@ -1,6 +1,8 @@
 <script setup>
 import ProfileSectionHeader from './ProfileSectionHeader.vue'
-import ImagePlaceholder from './ImagePlaceholder.vue'
+import companyCenter from '../static/companycenter.png'
+import companyIdea from '../static/companyidea.png'
+import companyCulture from '../static/companyculture.png'
 import { profileIntro, profilePhilosophy, profileCulture } from '../data/site'
 </script>
 
@@ -9,23 +11,30 @@ import { profileIntro, profilePhilosophy, profileCulture } from '../data/site'
     <div class="container">
       <ProfileSectionHeader />
       <div class="profile-grid">
-        <div class="profile-main">
+        <div
+          class="profile-main"
+          :style="{ backgroundImage: `url(${companyCenter})` }"
+        >
           <div class="profile-main-text">
             <h3>公司简介</h3>
             <p>{{ profileIntro }}</p>
           </div>
         </div>
         <div class="profile-side">
-          <div class="profile-row">
-            <div class="profile-philosophy">
+          <div
+            class="profile-idea"
+            :style="{ backgroundImage: `url(${companyIdea})` }"
+          >
+            <div class="profile-idea-text">
               <h3>企业理念</h3>
               <p>{{ profilePhilosophy }}</p>
             </div>
-            <ImagePlaceholder class="profile-img" placeholder="航空/物流" />
           </div>
-          <div class="profile-row">
-            <ImagePlaceholder class="profile-img" placeholder="办公场景" />
-            <div class="profile-culture">
+          <div
+            class="profile-culture-block"
+            :style="{ backgroundImage: `url(${companyCulture})` }"
+          >
+            <div class="profile-culture-text">
               <h3>企业文化</h3>
               <p>{{ profileCulture }}</p>
             </div>

src/components/ContactPageHero.vue

@@ -0,0 +1,20 @@
+<script setup>
+import contactHeroBg from '../static/contactbackgimg.png'
+</script>
+
+<template>
+  <section class="page-hero">
+    <div
+      class="page-hero__bg"
+      :style="{ backgroundImage: `url(${contactHeroBg})` }"
+    />
+    <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">CONTACT US</p>
+      </div>
+    </div>
+  </section>
+</template>

src/components/ContactPageSectionHeader.vue

@@ -0,0 +1,11 @@
+<template>
+  <div class="contact-page-section-header">
+    <h2 class="contact-page-section-header__en">CONTACT US</h2>
+    <p class="contact-page-section-header__cn">—— 联系我们 ——</p>
+    <div class="contact-page-section-header__divider" aria-hidden="true">
+      <span />
+      <span class="is-accent" />
+      <span />
+    </div>
+  </div>
+</template>

src/components/ContactSection.vue

@@ -1,7 +1,7 @@
 <script setup>
 import { ref } from 'vue'
-import SectionHeader from './SectionHeader.vue'
-import { contactInfo } from '../data/site'
+import SectionHeaderBlock from './SectionHeaderBlock.vue'
+import { contactContent } from '../data/site'
 
 const form = ref({ name: '', phone: '', message: '' })
 const toastVisible = ref(false)
@@ -18,29 +18,21 @@ function handleSubmit() {
 <template>
   <section class="section section-contact" id="contact">
     <div class="container">
-      <SectionHeader title-en="CONTACT US" title-cn="联系我们" />
+      <SectionHeaderBlock title-en="CONTACT US" title-cn="联系我们" />
       <div class="contact-content">
-        <div class="contact-info">
-          <div v-for="item in contactInfo" :key="item.label" class="contact-item">
-            <span class="contact-icon">{{ item.icon }}</span>
-            <div>
-              <strong>{{ item.label }}</strong>
-              <p>{{ item.value }}</p>
-            </div>
+        <div class="contact-detail">
+          <h3 class="contact-greeting">{{ contactContent.greeting }}</h3>
+          <p class="contact-intro">{{ contactContent.intro }}</p>
+          <div class="contact-block">
+            <h4>{{ contactContent.address.title }}</h4>
+            <p v-for="(line, index) in contactContent.address.lines" :key="index">{{ line }}</p>
           </div>
-        </div>
-        <form class="contact-form" @submit.prevent="handleSubmit">
-          <div class="form-group">
-            <input v-model="form.name" type="text" placeholder="姓名" required />
-          </div>
-          <div class="form-group">
-            <input v-model="form.phone" type="tel" placeholder="电话" required />
+          <div class="contact-block">
+            <h4>{{ contactContent.methods.title }}</h4>
+            <p v-for="(line, index) in contactContent.methods.lines" :key="index">{{ line }}</p>
           </div>
-          <div class="form-group">
-            <textarea v-model="form.message" placeholder="留言内容" rows="5" required />
-          </div>
-          <button type="submit" class="btn btn-primary">提交</button>
-        </form>
+        </div>
+       
       </div>
     </div>
 

src/data/site.js

@@ -8,7 +8,6 @@ import merchantCenter from '../static/merchantcenter.png'
 
 export const navItems = [
   { id: 'home', label: '首页' },
-  { id: 'business', label: '主营业务' },
   { id: 'profile', label: '企业概况' },
   { id: 'contact', label: '联系我们' },
 ]
@@ -40,14 +39,26 @@ export const heroSlides = [
   },
 ]
 
+export const profilePageIntro = [
+  '在当今科技变革日新月异、数字创新蓬勃迭代的时代背景下，爱丽恩严（大连）商务科技有限公司顺势而生、聚力成长，凭借深耕科创的初心与锐意进取的创新精神稳步崛起。企业以前瞻视野锚定数字科技发展赛道，将技术创新、软件研发与数字化服务深度融入核心发展体系，逐步成长为专注数字科创领域的专业化科技企业。',
+  '公司摒弃传统产业模式，聚焦纯科技领域深耕发展，以技术创新为核心驱动力，专注前沿数字技术研发、软件系统开发与数字化技术创新应用。持续加大科研投入，深耕技术迭代与产品创新，不断打磨核心技术能力，以专业科创实力夯实企业核心竞争力，以创新技术赋能产业数字化升级。',
+  '依托自主研发的数字化核心技术，公司构建起专业化、系统化的数字科创服务生态。专注深耕数字化技术研发与场景落地，聚焦各类数字化软件研发、数字系统搭建、智能化技术优化等核心业务，持续深耕数字科技领域，打磨优质技术产品与专业科创服务。始终秉持专业创新、精益求精的发展理念，持续探索数字科技新赛道、新技术、新应用，以硬核科创实力助力各行业数字化、智能化升级，持续为产业高质量发展注入科技动能。',
+]
+
+export const profilePageVisionQuote =
+  '聚焦前沿科技，驱动产业升级，为客户创造超凡价值，为员工搭建梦想舞台，为社会贡献发展力量'
+
+export const profilePageMissionText =
+  '秉持 “科技赋能商业，创新链接全域” 的使命砥砺前行。我们矢志以技术为核，深耕软件研发与数字化服务，依托数字技术助力各类商业场景转型升级，打破行业数字化瓶颈。致力成为数字化服务领域标杆，以自研系统驱动业态革新，构建智慧服务新范式。聚焦数字化平台搭建、行业系统定制与智慧应用落地，赋能商户数字化运营、优化便民数字服务，用前沿数字技术持续为合作方创造长效价值。'
+
 export const profileIntro =
-  '爱丽恩严(大连)商务科技有限公司成立于大连，是一家立足全球视野、融合创新科技的多元化产业集团。公司通过"外贸+科技+智造"三位一体的战略布局，致力于为全球客户提供全链条商业解决方案。'
+  '爱丽恩严（大连）商务科技有限公司是一家立足行业视野、深耕创新数字科技的多元化企业，以科技创新为核心发展主线，专注软件研发与数字化技术落地。公司依托自研数字化技术赋能，搭建起覆盖本地数字化服务、应用软件研发、数字系统搭建的产业生态体系。'
 
 export const profilePhilosophy =
-  '以专业立身、以创新致远、以诚信赢人。坚持客户至上、品质为先，用科技赋能产业，用服务连接世界。'
+  '“诚信、专业、创新、共赢”是爱丽恩严(大连)商务科技有限公司 始终坚守的理念'
 
 export const profileCulture =
-  '倡导开放协作、追求卓越、持续学习。营造积极向上、包容多元的团队氛围，与员工共同成长，与客户携手共赢。'
+  '致力于营造一种充满活力、协作共赢的文化氛围。“创新驱动，追求卓越” 是我们前行的动力源泉'
 
 export const businessProducts = [
   {
@@ -70,10 +81,9 @@ export const businessProducts = [
 ]
 
 export const scopeParagraphs = [
-  '公司业务覆盖东北亚、东南亚、欧美等多个国家和地区，与韩国、以色列、美国、英国、日本、加拿大、巴西等国企业建立了长期稳定的合作关系。',
-  '主要业务领域包括：机械设备进出口、电子产品贸易、化工原料采购、农产品出口、商务考察接待、投资咨询服务等。',
-  '公司拥有一支经验丰富的专业团队，熟悉各国贸易政策与法规，能够为客户提供高效、合规的商务服务，降低跨境贸易风险，提升合作效率。',
-  '未来，公司将继续深耕国际市场，拓展业务版图，以更加专业的服务和更加开放的姿态，迎接全球化带来的机遇与挑战。',
+  '数字经济蓬勃发展的时代浪潮下，爱丽恩严 (大连) 商务科技有限公司秉持创新钻研的发展理念，专注软件研发与数字化技术服务，业务布局覆盖国内多地。公司深耕政企、商贸、生活服务等领域数字化项目，按需定制信息化管理软件与数字化平台，依托成熟的技术实力与贴心的技术运维服务，收获众多合作客户的认可。',
+  '企业坚守专业靠谱的服务宗旨，坚持技术创新，以数字化产品赋能各行各业数字化建设。',
+  '无论世界何处，爱丽恩严(大连)商务科技有限公司始终秉持着专业、负责的态度，用行动书写着国际合作的精彩华章，持续为不同地域的发展赋能。',
 ]
 
 export const flags = [
@@ -91,33 +101,31 @@ export const flags = [
   { emoji: '🇧🇷', title: '巴西' },
 ]
 
-export const contactInfo = [
-  { icon: '📍', label: '地址', value: '辽宁省大连市中山区人民路XX号XX大厦XX层' },
-  { icon: '📞', label: '电话', value: '0411-XXXXXXXX' },
-  { icon: '✉️', label: '邮箱', value: 'info@ailaanyan.com' },
-]
-
-export const footerLinks = [
-  {
-    title: '企业概况',
-    links: [
-      { label: '企业概况', target: 'profile' },
-      { label: '企业理念', target: 'profile' },
-      { label: '企业文化', target: 'profile' },
-    ],
+export const contactContent = {
+  greeting: '您好HELLO！',
+  intro:
+    '感谢您来到爱丽恩严(大连)商务科技有限公司，若您有合作意向，请您为我们留言或使用以下方式联系我们，我们将尽快给您回复，谢谢。',
+  address: {
+    title: '地址',
+    lines: ['公司地址：大连市中山区中信丰悦城', '丰悦大厦9楼'],
   },
-  {
-    title: '主营业务',
-    links: [
-      { label: 'U店在哪', target: 'business' },
-      { label: 'U店在这', target: 'business' },
-    ],
-  },
-  {
-    title: '联系我们',
-    links: [
-      { label: '联系方式', target: 'contact' },
-      { label: '在线留言', target: 'contact' },
-    ],
+  methods: {
+    title: '联系方式',
+    lines: ['客服电话：0411-81820856', '商务邮箱：ailien@alienyan.cn'],
   },
+}
+
+export const footerNav = [
+  { label: '首页', target: 'home' },
+  { label: '企业概况', target: 'profile' },
+  { label: '联系我们', target: 'contact' },
 ]
+
+export const footerContact = [
+  { label: '地址', value: '大连市中山区中信丰悦城907' },
+  { label: '电话', value: '0411-81820856' },
+  { label: '邮箱', value: 'ailien@alienyan.cn' },
+]
+
+export const footerCopyright =
+  '© 2026 爱丽恩严(大连)商务科技有限公司 版权所有 辽ICP备2023008619号-2'

src/main.js

@@ -1,5 +1,6 @@
 import { createApp } from 'vue'
 import App from './App.vue'
+import router from './router'
 import './assets/styles/global.css'
 
-createApp(App).mount('#app')
+createApp(App).use(router).mount('#app')