diff --git a/src/assets/img/product-item1.png b/src/assets/img/product-item1.png
new file mode 100644
index 0000000..6a97bf3
Binary files /dev/null and b/src/assets/img/product-item1.png differ
diff --git a/src/assets/img/product-item2.png b/src/assets/img/product-item2.png
new file mode 100644
index 0000000..f9156b4
Binary files /dev/null and b/src/assets/img/product-item2.png differ
diff --git a/src/assets/img/product-item3.png b/src/assets/img/product-item3.png
new file mode 100644
index 0000000..a885902
Binary files /dev/null and b/src/assets/img/product-item3.png differ
diff --git a/src/assets/img/product-item4.png b/src/assets/img/product-item4.png
new file mode 100644
index 0000000..4646afa
Binary files /dev/null and b/src/assets/img/product-item4.png differ
diff --git a/src/assets/img/product-item5.png b/src/assets/img/product-item5.png
new file mode 100644
index 0000000..147b5ee
Binary files /dev/null and b/src/assets/img/product-item5.png differ
diff --git a/src/assets/img/product-item6.png b/src/assets/img/product-item6.png
new file mode 100644
index 0000000..15bb743
Binary files /dev/null and b/src/assets/img/product-item6.png differ
diff --git a/src/assets/img/product-top.png b/src/assets/img/product-top.png
new file mode 100644
index 0000000..339bd4e
Binary files /dev/null and b/src/assets/img/product-top.png differ
diff --git a/src/assets/img/service-top.png b/src/assets/img/service-top.png
new file mode 100644
index 0000000..c0ff03e
Binary files /dev/null and b/src/assets/img/service-top.png differ
diff --git a/src/assets/main.css b/src/assets/main.css
index e297078..29d7dfc 100644
--- a/src/assets/main.css
+++ b/src/assets/main.css
@@ -11,3 +11,6 @@ button{
         transform: scale(1.01);
     }
 }
+.hover-effect{
+    cursor: pointer;
+}
diff --git a/src/components/HeaderNav.vue b/src/components/HeaderNav.vue
index c0d03aa..f4bf256 100644
--- a/src/components/HeaderNav.vue
+++ b/src/components/HeaderNav.vue
@@ -1,37 +1,51 @@
 <script setup>
 import { ref } from 'vue'
 import { Search } from '@element-plus/icons-vue'
+import router from "@/router/index.js";
 
+const activeMenuIndex=ref(null)
+const menuKey = ref(0)
 // 选中逻辑
 const handleSelect = (key, keyPath) => {
-  console.log(key, keyPath)
 }
 
 const circleUrl='https://cube.elemecdn.com/3/7c/3ea6beec64369c2642b92c6726f1epng.png'
 
+const goHome=()=>{
+  activeMenuIndex.value=null
+  menuKey.value += 1
+  router.push('/')
+}
+
 </script>
 
 <template>
-  <el-menu
-      class="el-menu-demo"
-      mode="horizontal"
-      :ellipsis="false"
-      @select="handleSelect"
-  >
-    <el-menu-item >
+  <div class="container">
+    <div class="logoBox">
       <img
           src="@/assets/logo.svg"
           alt="飞利信logo"
           class="logo"
       />
-    </el-menu-item>
-    <el-menu-item index="0">核心技术</el-menu-item>
-    <el-menu-item index="1">产品展示</el-menu-item>
-    <el-menu-item index="2">解决方案</el-menu-item>
-    <el-menu-item index="3">服务交流</el-menu-item>
-    <el-menu-item index="4">关于我们</el-menu-item>
-    <el-menu-item>返回官网</el-menu-item>
-    <el-menu-item>
+    </div>
+    <el-menu
+        class="el-menu-demo"
+        mode="horizontal"
+        :ellipsis="false"
+        @select="handleSelect"
+        :router="true"
+        v-model:default-active="activeMenuIndex"
+        :key="menuKey"
+    >
+      <el-menu-item index="/technology">核心技术</el-menu-item>
+      <el-menu-item index="/product">产品展示</el-menu-item>
+      <el-menu-item index="/product">解决方案</el-menu-item>
+      <el-menu-item index="/service">服务交流</el-menu-item>
+      <el-menu-item index="/product">关于我们</el-menu-item>
+      <el-menu-item @click="goHome" index="_home_">返回官网</el-menu-item>
+
+    </el-menu>
+    <div>
       <el-input
           v-model="input1"
           :style="{
@@ -47,22 +61,22 @@ const circleUrl='https://cube.elemecdn.com/3/7c/3ea6beec64369c2642b92c6726f1epng
           placeholder="关键词搜索"
           :suffix-icon="Search"
       />
-    </el-menu-item>
-    <el-menu-item>
+    </div>
+    <div>
       <div class="person">
         <el-avatar :size="26" :src="circleUrl" />
         <span>未登录</span>
       </div>
-    </el-menu-item>
+    </div>
+  </div>
 
-  </el-menu>
 </template>
 
 <style scoped lang="less">
-.el-menu-demo{
-  height: 80px;
-  width: 100%;
-  background-color:#FFFFFF80;
+.container{
+  display: flex;
+  align-items: center;
+
   max-width: 1920px;
   position: absolute;
   z-index: 10;
@@ -70,9 +84,16 @@ const circleUrl='https://cube.elemecdn.com/3/7c/3ea6beec64369c2642b92c6726f1epng
   left: 0;
   right: 0;
   font-size:18px;
-  .logo{
-    width: 131.63px;
-    height: 42.25px;
+  height: 80px;
+  width: 100%;
+  background-color:#FFFFFF80;
+  .logoBox{
+    margin-left: 160px;
+    margin-right: auto;
+    .logo{
+      width: 131.63px;
+      height: 42.25px;
+    }
   }
   .person{
     display: flex;
@@ -80,15 +101,19 @@ const circleUrl='https://cube.elemecdn.com/3/7c/3ea6beec64369c2642b92c6726f1epng
     span{
       margin-left: 16px;
     }
+    padding:0 30px;
   }
- border-bottom: none !important;
   .el-input{
     :deep(.el-icon svg){
       height:1.1em;
       width:1.1em;
     }
   }
-
+}
+.el-menu-demo{
+ border-bottom: none !important;
+  background-color:#FFFFFF00;
+  height: 80px;
     /* 移除所有默认边框 */
     .el-menu-item {
       border-bottom: none !important;
@@ -128,10 +153,7 @@ const circleUrl='https://cube.elemecdn.com/3/7c/3ea6beec64369c2642b92c6726f1epng
 
 }
 
-.el-menu--horizontal > .el-menu-item:nth-child(1) {
-  margin-right: auto;
-  margin-left:160px;
-}
+
 
 
 </style>
diff --git a/src/components/product/productItem.vue b/src/components/product/productItem.vue
new file mode 100644
index 0000000..f4b8669
--- /dev/null
+++ b/src/components/product/productItem.vue
@@ -0,0 +1,79 @@
+<script setup>
+import { defineProps, defineEmits, ref } from 'vue'
+const props = defineProps({
+  src: {
+    type: String,
+    default:'#'
+  },
+  label:{
+    type: String,
+    default:'---------'
+  },
+  name:{
+    type: String,
+    default:'-----'
+  }
+
+})
+</script>
+
+<template>
+<div class="item">
+  <div class="image">
+    <img :src=src alt="">
+  </div>
+  <div>
+      <p>{{label}}</p>
+      <p>
+        <span>
+          {{name}}
+        </span>
+      </p>
+  </div>
+</div>
+</template>
+
+<style scoped lang="less">
+.item{
+  width: 417px;
+  height: 528px;
+  box-shadow: 0px 6px 20.6px 0px #9CA2A240;
+  border-radius: 4px;
+  display: flex;
+  flex-direction: column;
+  justify-content: space-around;
+  .image{
+    display: flex;
+    justify-content: center;
+    overflow-block: hidden;
+    height: 300px;
+    align-items: center;
+  }
+  p{
+    text-align: center;
+  }
+  & p:nth-child(1){
+    font-weight: 500;
+    font-size: 26px;
+    line-height: 100%;
+    letter-spacing: 0.06em;
+    color: #333333;
+  }
+  & p:nth-child(2){
+    font-weight: 500;
+    font-size: 20px;
+    line-height: 100%;
+    letter-spacing: 0.06em;
+    color: #999999;
+    margin-top: 30px;
+    span{
+      display: inline-block;
+      padding: 10px 20px;
+      background: #F2F2F2;
+      border: 1px solid #FFFFFF;
+      border-radius: 69px;
+    }
+  }
+
+}
+</style>
diff --git a/src/components/service/serviceItem.vue b/src/components/service/serviceItem.vue
new file mode 100644
index 0000000..735cadf
--- /dev/null
+++ b/src/components/service/serviceItem.vue
@@ -0,0 +1,46 @@
+<script setup>
+import {defineProps} from 'vue'
+const props=defineProps({
+    itemName:{
+      type:String,
+      default:'文件名称'
+    },
+    url:{
+      type:String,
+      default:'地址错误'
+    }
+})
+</script>
+
+<template>
+  <div class="service-item">
+      <div class="text">{{itemName}}</div>
+    <a class="download" >下载</a>
+  </div>
+</template>
+
+<style lang="less" scoped>
+.service-item {
+  box-shadow: 0px 6px 25.4px 0px #C1C6C740;
+  padding: 40px;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  width: 1205px;
+  .download{
+    color: #AEAEAE;
+    font-weight: 400;
+    font-size: 18px;
+    line-height: 100%;
+    letter-spacing: 0.06em;
+  }
+  .text{
+    font-weight: 400;
+    font-size: 30px;
+    line-height: 100%;
+    letter-spacing: 0.06em;
+    color: #333333;
+
+  }
+}
+</style>
diff --git a/src/router/index.js b/src/router/index.js
index 8d125eb..4fd3172 100644
--- a/src/router/index.js
+++ b/src/router/index.js
@@ -1,6 +1,8 @@
 import { createRouter, createWebHistory } from 'vue-router'
 import HomeView from "@/views/HomeView.vue";
 import CoreTechnology from "@/views/CoreTechnology.vue";
+import ProductDisplay from "@/views/ProductDisplay.vue";
+import ServiceExchange from "@/views/ServiceExchange.vue";
 
 const router = createRouter({
   history: createWebHistory(import.meta.env.BASE_URL),
@@ -14,6 +16,16 @@ const router = createRouter({
       path:'/technology',
       name:'technology',
       component:CoreTechnology
+    },
+    {
+      path:'/product',
+      name:'product',
+      component:ProductDisplay
+    },
+    {
+      path:'/service',
+      name:'service',
+      component:ServiceExchange
     }
   ],
 })
diff --git a/src/views/ProductDisplay.vue b/src/views/ProductDisplay.vue
new file mode 100644
index 0000000..9b0d59f
--- /dev/null
+++ b/src/views/ProductDisplay.vue
@@ -0,0 +1,134 @@
+<script setup>
+import { ref } from 'vue'
+import ProductItem from "@/components/product/productItem.vue";
+import img1 from '../assets/img/product-item1.png'
+import img2 from '../assets/img/product-item2.png'
+import img3 from '../assets/img/product-item3.png'
+import img4 from '../assets/img/product-item4.png'
+import img5 from '../assets/img/product-item5.png'
+import img6 from '../assets/img/product-item6.png'
+const middleware=[
+  {
+    label:'圆形阵列麦克风开发板',
+    name:'PH-MOS01',
+    src:img1
+  },
+  {
+    label:'反馈抑制模块',
+    name:'PH-MOS02',
+    src:img2
+  },
+  {
+    label:'指向性调节模块',
+    name:'PH-MOS03',
+    src:img3
+  },
+]
+const productList=[
+  {
+    label:'AI会议圆阵麦克风',
+    name:'PH-AIMIC01',
+    src:img4
+  },
+  {
+    label:'高速流数据加解密BOX',
+    name:'PH-AB12',
+    src:img5
+  },
+  {
+    label:'超融合会议一体机',
+    name:'PH-ML04',
+    src:img6
+  },
+  {
+    label:'强声音箱',
+    name:'PH-QS01',
+    src:img6
+  },
+]
+
+const activeName = ref('first')
+
+const handleClick = (tab, event) => {
+  console.log(tab, event)
+}
+</script>
+
+<template>
+<div class="header">
+  <img src="@/assets/img/product-top.png" alt="">
+</div>
+<div class="content">
+  <el-tabs v-model="activeName" class="demo-tabs product-tab" @tab-click="handleClick">
+    <el-tab-pane label="音频中间件" name="first">
+        <ProductItem
+          v-for="item in middleware"
+          :label="item.label"
+          :name="item.name"
+          :src="item.src"
+        />
+    </el-tab-pane>
+    <el-tab-pane label="音视频产品" name="second">
+      <ProductItem
+          v-for="item in productList"
+          :label="item.label"
+          :name="item.name"
+          :src="item.src"
+      />
+    </el-tab-pane>
+  </el-tabs>
+</div>
+
+</template>
+
+<style scoped lang="less">
+.header{
+  img{
+    width: 100%;
+    object-fit: cover;
+    display: block;
+  }
+}
+.el-tabs{
+  --el-color-primary: #282828;
+  --el-text-color-primary: #D3BEBE;
+  --el-color-black:#D3BEBE;
+}
+
+
+
+</style>
+<style lang="less">
+.product-tab{
+  .el-tabs__content {
+    width: 1331px;
+    margin:20px auto 50px;
+    color: #6b778c;
+    font-size: 32px;
+    font-weight: 600;
+    padding: 20px;
+    .el-tab-pane{
+      display: flex;
+      justify-content: space-between;
+      flex-wrap: wrap;
+      gap: 20px;
+      &::after{
+        content:'';
+        flex-grow: 1;
+      }
+    }
+  }
+  .el-tabs__nav-scroll{
+    display: flex;
+    justify-content: center;
+   .el-tabs__item{
+     font-weight: 500;
+     font-size: 24px;
+     line-height: 100%;
+     letter-spacing: 0.06em;
+     margin:20px;
+   }
+  }
+
+}
+</style>
diff --git a/src/views/ServiceExchange.vue b/src/views/ServiceExchange.vue
new file mode 100644
index 0000000..71ff6a8
--- /dev/null
+++ b/src/views/ServiceExchange.vue
@@ -0,0 +1,347 @@
+<script setup>
+import {reactive, ref} from "vue";
+import ServiceItem from "@/components/service/serviceItem.vue";
+
+const activeName=ref('first')
+const handleClick=()=>{
+
+}
+const docList=reactive([
+  {docName:'LX圆形阵列麦克风开发板产品手册'},
+  {docName:'PH-AIMIC01 AI会议麦克风产品手册'},
+  {docName:'PH-AIMIC01 AI会议麦克风产品手册'},
+])
+
+// 新增表单相关数据和验证规则
+// 表单数据对象
+const form = reactive({
+  name: '',      // 您的姓名
+  phone: '',     // 联系电话
+  company: '',   // 公司名称
+  email: '',     // 邮箱地址
+  feedback: '',  // 反馈内容
+  captcha: ''    // 验证码
+})
+
+// 表单验证规则
+const rules = reactive({
+  name: [
+    { required: true, message: '请输入您的姓名', trigger: 'blur' }
+  ],
+  phone: [
+    { required: true, message: '请输入联系电话', trigger: 'blur' }
+  ],
+  email: [
+    { required: true, message: '请输入邮箱地址', trigger: 'blur' },
+    { type: 'email', message: '请输入正确的邮箱格式', trigger: 'blur' }
+  ]
+})
+
+// 表单引用，用于表单验证
+const formRef = ref()
+
+// 提交表单
+const submitForm = () => {
+  formRef.value.validate((valid) => {
+    if (valid) {
+      // 表单验证通过，执行提交逻辑
+      console.log('表单提交:', form)
+      // 这里可以添加实际的提交代码，比如调用API
+    } else {
+      // 表单验证失败
+      return false
+    }
+  })
+}
+
+// 生成随机验证码
+const captchaValue = ref('')
+// 生成验证码的函数
+const generateCaptcha = () => {
+  // 生成4位随机数字
+  const randomNum = Math.floor(1000 + Math.random() * 9000)
+  captchaValue.value = randomNum.toString()
+}
+
+// 页面加载时生成初始验证码
+generateCaptcha()
+</script>
+
+<template>
+  <div class="header">
+    <img src="@/assets/img/service-top.png" alt="">
+  </div>
+  <div class="content">
+    <el-tabs v-model="activeName" class="demo-tabs service-tab" @tab-click="handleClick">
+      <el-tab-pane label="产品文档" name="first">
+        <div class="first-content">
+          <ServiceItem
+              v-for="item in docList"
+              :itemName="item.docName"
+          ></ServiceItem>
+        </div>
+      </el-tab-pane>
+      <el-tab-pane label="技术交流" name="second">
+123
+      </el-tab-pane>
+      <el-tab-pane label="客户反馈" name="third">
+        <div class="feedback-form-container">
+          <!-- 客户反馈表单 -->
+          <el-form
+            ref="formRef"
+            :model="form"
+            :rules="rules"
+            label-position="top"
+            class="feedback-form"
+          >
+            <!-- 第一行：您的姓名和联系电话 -->
+            <div class="form-row">
+              <el-form-item label="您的姓名" prop="name" class="form-item">
+                <el-input v-model="form.name" placeholder=""></el-input>
+              </el-form-item>
+              <el-form-item label="联系电话" prop="phone" class="form-item">
+                <el-input v-model="form.phone" placeholder=""></el-input>
+              </el-form-item>
+            </div>
+
+            <!-- 第二行：公司名称和邮箱地址 -->
+            <div class="form-row">
+              <el-form-item label="公司名称" prop="company" class="form-item">
+                <el-input v-model="form.company" placeholder=""></el-input>
+              </el-form-item>
+              <el-form-item label="邮箱地址" prop="email" class="form-item">
+                <el-input v-model="form.email" placeholder=""></el-input>
+              </el-form-item>
+            </div>
+
+            <!-- 第三行：反馈内容（独占一行） -->
+            <div class="form-row">
+              <el-form-item label="反馈内容" prop="feedback" class="form-item">
+                <el-input
+                    v-model="form.feedback"
+                    type="textarea"
+                    :rows="5"
+                    placeholder=""
+                ></el-input>
+              </el-form-item>
+            </div>
+
+
+            <!-- 第四行：验证码（独占一行，水平排列） -->
+            <el-form-item label="验证码输入" prop="captcha" label-position="left" class="captcha-item">
+              <!-- 验证码容器，用于将输入框和图片包裹在一个框里 -->
+              <div class="captcha-container">
+                <el-input
+                  v-model="form.captcha"
+                  class="captcha-input"
+                  placeholder="请输入"
+                ></el-input>
+                <!-- 验证码图片 -->
+                <div class="captcha-image" @click="generateCaptcha">
+                  {{ captchaValue }}
+                </div>
+              </div>
+            </el-form-item>
+
+            <!-- 提交按钮 -->
+            <el-form-item >
+              <el-button type="primary" @click="submitForm" class="submit-btn">
+                提交反馈
+              </el-button>
+            </el-form-item>
+          </el-form>
+        </div>
+      </el-tab-pane>
+    </el-tabs>
+  </div>
+</template>
+
+<style scoped lang="less">
+.header{
+  width: 100%;
+  img{
+    width: 100%;
+    object-fit: cover;
+    display: block;
+  }
+}
+.first-content{
+  display: flex;
+  flex-direction: column;
+  gap: 20px;
+}
+
+/* 新增表单样式 */
+.feedback-form-container {
+  width: 100%;
+  max-width: 800px;
+  margin: 0 auto;
+}
+
+.feedback-form {
+
+
+  .form-row {
+    display: flex;
+    gap: 20px;
+    margin-bottom: 20px;
+    /* 将所有输入框的背景色改为#F5F5F5，包括输入框容器 */
+    --el-component-size: 39px;
+    :deep(.el-input),
+    :deep(.el-textarea) {
+      background-color: #F5F5F5;
+      /* 移除默认的padding，解决两端白色问题 */
+      padding: 0 1px;
+      border-radius: 4px;
+      overflow: hidden;
+    }
+    :deep(.el-form-item__label){
+      font-weight: 400;
+      font-size: 18px;
+      line-height: 24px;
+      letter-spacing: 0.06em;
+    }
+    /* 将所有输入框的背景色改为#F5F5F5 */
+    :deep(.el-input__inner) {
+      background-color: #F5F5F5;
+      /* 确保输入框内部没有多余的边框 */
+      border: none;
+      /* 设置内边距 */
+      padding: 0 15px;
+    }
+    :deep(.el-input__wrapper){
+      padding: 0;
+      width: 338px;
+      height: 37px;
+    }
+    /* 文本域的背景色也改为#F5F5F5 */
+    :deep(.el-textarea__inner) {
+      background-color: #F5F5F5;
+      height: 100%;
+      /* 确保文本域内部没有多余的边框 */
+      border: none;
+    }
+    .form-item {
+      flex: 1;
+    }
+  }
+
+  /* 验证码样式 */
+  .captcha-item {
+    /* 调整验证码label的位置和宽度 */
+    :deep(.el-form-item__label){
+      //width: 60px;
+      margin-right: 10px;
+      font-weight: 400;
+      font-size: 18px;
+      line-height: 32px;
+      color: #000;
+    }
+    :deep(.el-input),
+    :deep(.el-textarea) {
+      /* 移除默认的padding，解决两端白色问题 */
+      padding: 0 5px;
+      border-radius: 4px;
+      overflow: hidden;
+    }
+    /* 验证码容器，将输入框和图片包裹在一个框里 */
+    .captcha-container {
+      display: flex;
+      align-items: center;
+      //background-color: #F5F5F5;
+      border-radius: 4px;
+      border: 1px solid #E0E0E0;
+      overflow: hidden;
+      width: fit-content;
+    }
+
+    .captcha-input {
+      width: 120px;
+      /* 确保输入框容器没有背景和边框，由外层容器统一控制 */
+      :deep(.el-input) {
+        background-color: transparent;
+        border: none;
+        padding: 0 10px;
+      }
+
+      /* 确保输入框内部没有边框 */
+      :deep(.el-input__inner) {
+        border: none;
+        //border-right: 1px solid #E0E0E0; /* 仅保留右侧分隔线 */
+        border-radius: 0; /* 移除输入框自身的圆角 */
+      }
+
+      /* 确保输入框包装器没有多余样式 */
+      :deep(.el-input__wrapper) {
+        width: 120px;
+        padding: 0;
+        background-color: transparent;
+        box-shadow: none;
+      }
+    }
+
+    /* 验证码图片样式 */
+    .captcha-image {
+      width: 100px;
+      height: 32px;
+      //background-color: #F5F5F5; /* 与输入框背景色一致 */
+      border: none; /* 移除所有边框 */
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      font-size: 18px;
+      font-weight: bold;
+      color: #333;
+      cursor: pointer;
+      user-select: none;
+    }
+  }
+
+  .submit-btn {
+    margin: 20px auto;
+    width: 252px;
+    height: 55px;
+    border-radius: 116px;
+    background-color: #307EF4;
+    font-weight: 500;
+    font-size: 18px;
+    line-height: 100%;
+    text-align: center;
+    color: #fff;
+    border: none;
+  }
+}
+</style>
+<style lang="less" >
+.el-tabs{
+  --el-color-primary: #282828;
+  --el-text-color-primary: #D3BEBE;
+  --el-color-black:#D3BEBE;
+}
+.service-tab{
+  .el-tabs__content {
+    display: flex;
+    justify-content: center;
+    color: #6b778c;
+    padding: 20px;
+    min-height: 800px;
+    .el-tab-pane{
+      display: flex;
+      justify-content: space-between;
+      flex-wrap: wrap;
+      gap: 20px;
+    }
+  }
+  .el-tabs__nav-scroll{
+    display: flex;
+    justify-content: center;
+    .el-tabs__item{
+      font-weight: 500;
+      font-size: 24px;
+      line-height: 100%;
+      letter-spacing: 0.06em;
+      margin:20px;
+    }
+  }
+}
+</style>