关于我们整体布局

src/components/HeadLine.vue

@@ -5,7 +5,7 @@
     <p class="desc" v-if="line1" ref="descRef1">
       {{ line1 }}
     </p>
-    <p class="desc" v-if="line2" ref="descRef2">
+    <p :class="margin ? 'desc mt' : 'desc'" v-if="line2" ref="descRef2">
       {{ line2 }}
     </p>
   </div>
@@ -28,6 +28,9 @@ const props = defineProps({
   line2: {
     type: String,
   },
+  margin: {
+    type: Boolean,
+  },
 })
 onMounted(() => {
   const observer = new IntersectionObserver(entries => {
@@ -82,8 +85,11 @@ const animateCSS = (node, animation, prefix = 'animate__') =>
     font-size: 18px;
     font-weight: 300;
     color: #686868;
+    max-width: 70vw;
     line-height: 28px;
-    white-space: nowrap;
+  }
+  .mt {
+    margin-top: 30px;
   }
 }
 </style>

src/components/Header.vue

@@ -182,6 +182,9 @@ onMounted(() => {
   if (path == '/product') {
     activeTab.value = 2
   }
+  if (path == '/about') {
+    activeTab.value = 1
+  }
   if (path == '/') {
     activeTab.value = 0
   }

src/components/about/About.vue

@@ -0,0 +1,35 @@
+<template>
+  <div class="about_card_container">
+    <HeadLine
+      title="关于我们"
+      line1="专业水下视学设备团队，研发出品,多年的使用经验打磨的好产品，支持定制，想您所想,另外公司有硬件研发团队"
+      line2="软件研发团队、结构研发团队、外观研发团队也能帮您研发设计其他产品。"
+    />
+    <div class="idea_cards">
+      <div class="one_card"></div>
+      <div class="one_card"></div>
+      <div class="one_card"></div>
+      <div class="one_card"></div>
+      <div class="one_card"></div>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import HeadLine from '@/components/HeadLine'
+</script>
+
+<style lang="scss" scoped>
+.about_card_container {
+  padding-top: 90px;
+  .idea_cards {
+    display: flex;
+    align-items: center;
+    width: 90vw;
+    margin: 0 auto;
+    margin-top: 77px;
+    height: 479px;
+    background: #5064f4;
+  }
+}
+</style>

src/components/about/Intro.vue

@@ -0,0 +1,62 @@
+<template>
+  <div class="intro_container">
+    <HeadLine
+      title="研发、设计、量产 一站式解决方案"
+      line1="产品梦工厂作为一家资深的研发公司，主导了大量产品从需求→产品定义→策划→外观→结构→硬件→嵌软→软件→全功能样机→模具→批量→灰度测试→产能爬坡全流程经验核心团队有工业控制/物联网领域/机械传动领域的专家组成，在机器视觉、自动化控制行业有多年的从业经验。"
+      line2="是行业领先的智慧创新产品服务提供商，为客户提供一体化研发服务，聚焦产品创新研发服务。对于硬件、软件、机械传动结构、wifi、zigbee、蓝牙、射频、工业机器视觉等，源码级别开发。"
+      margin="true"
+    />
+    <div class="count_container">
+      <div class="count_item">
+        <h1 class="number">15</h1>
+        <span class="unit">年</span>
+      </div>
+      <div class="count_item">
+        <h1 class="number">300+</h1>
+        <span class="unit">客户</span>
+      </div>
+      <div class="count_item">
+        <h1 class="number">500+</h1>
+        <span class="unit">项目</span>
+      </div>
+      <div class="count_item">
+        <h1 class="number">100W+</h1>
+        <span class="unit">量产</span>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import HeadLine from '@/components/HeadLine.vue'
+</script>
+
+<style lang="scss" scoped>
+.intro_container {
+  padding-top: 90px;
+  .count_container {
+    padding: 55px 0;
+    margin: 0 auto;
+    width: 60vw;
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    .count_item {
+      display: flex;
+      align-items: center;
+      .number {
+        font-size: 55px;
+        font-family: Zona Pro;
+        font-weight: 900;
+        color: #5064f4;
+      }
+      .unit {
+        margin-left: 22px;
+        font-size: 42px;
+        font-weight: 400;
+        color: #000000;
+      }
+    }
+  }
+}
+</style>

src/components/about/Overview.vue

@@ -0,0 +1,30 @@
+<template>
+  <div class="about_overview_container">
+    <Header />
+    <h1 class="en">ABOUT US</h1>
+  </div>
+</template>
+
+<script setup>
+import Header from '@/components/Header'
+</script>
+
+<style lang="scss" scoped>
+.about_overview_container {
+  width: 100vw;
+  height: 490px;
+  background: url(../../static/img/lianxi/1.png) no-repeat;
+  background-size: cover;
+  position: relative;
+  .en {
+    position: absolute;
+    left: 50%;
+    bottom: 45%;
+    transform: translateX(-50%);
+    font-size: 26px;
+    font-family: Zona Pro;
+    font-weight: 800;
+    color: #ffffff;
+  }
+}
+</style>

src/components/detail/Detail.vue

@@ -22,6 +22,11 @@
           <div class="btn">点击查看详情</div>
         </div>
       </div>
+      <div class="one_card">
+        <div class="mask">
+          <div class="btn">点击查看详情</div>
+        </div>
+      </div>
     </div>
   </div>
 </template>

src/pages/About.vue

@@ -1,8 +1,18 @@
 <template>
-  <div class="about_main_container">关于我们</div>
+  <div class="about_main_container">
+    <Overview />
+    <About />
+    <Intro />
+    <Bottom />
+  </div>
 </template>
 
-<script setup></script>
+<script setup>
+import Overview from '@/components/about/Overview.vue'
+import About from '@/components/about/About.vue'
+import Intro from '@/components/about/Intro.vue'
+import Bottom from '@/components/Bottom.vue'
+</script>
 
 <style lang="scss" scoped>
 .about_main_container {