关于我们的实验简介和实验动态页面

src/App.vue

@@ -2,6 +2,7 @@
 
 import HeaderNav from "@/components/HeaderNav.vue";
 import Footer from "@/components/Footer.vue"
+
 </script>
 
 <template>

src/assets/main.css

@@ -2,6 +2,7 @@
 
 body{
     max-width:1920px;
+    min-width: 1520px;
     margin:auto;
     position:relative;
 }

src/components/Footer.vue

@@ -83,7 +83,7 @@
 <style scoped lang="less">
 .footer{
   background-color: #161B26;
-  padding:16px 174px;
+  padding:16px 154px;
   .footer-header{
     display: flex;
     justify-content: space-between;

src/components/HeaderNav.vue

@@ -13,7 +13,7 @@ const circleUrl='https://cube.elemecdn.com/3/7c/3ea6beec64369c2642b92c6726f1epng
 
 const goHome=()=>{
   activeMenuIndex.value=null
-  menuKey.value += 1
+  menuKey.value += 1 //强制刷新
   router.push('/')
 }
 
@@ -26,6 +26,7 @@ const goHome=()=>{
           src="@/assets/logo.svg"
           alt="飞利信logo"
           class="logo"
+          @click="goHome()"
       />
     </div>
     <el-menu
@@ -41,7 +42,7 @@ const goHome=()=>{
       <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 index="/about">关于我们</el-menu-item>
       <el-menu-item @click="goHome" index="_home_">返回官网</el-menu-item>
 
     </el-menu>

src/components/about/AboutDynamic.vue

@@ -0,0 +1,126 @@
+<script setup>
+import { ref, computed } from 'vue'; // 导入计算属性函数
+import DynamicItem from "@/components/about/DynamicItem.vue";
+import {ArrowLeftBold, ArrowRightBold} from "@element-plus/icons-vue";
+
+// 接收父组件传递的动态数据
+const props = defineProps({
+  dynamicData:{
+    type:Array,
+    default:()=>[]
+  }
+});
+
+const groupedData = computed(() => {
+  const groups = [];
+  const data = props.dynamicData;
+
+  for (let i = 0; i < data.length; i += 2) {
+    const group = data.slice(i, i + 2);
+    // 将分组后的数组添加到结果数组中
+    groups.push(group);
+  }
+
+  // 返回分组后的二维数组
+  return groups;
+});
+
+const carouselRef = ref(null);
+// 上一张
+const prev = () => {
+  if (carouselRef.value) {
+    carouselRef.value.prev()
+  }
+}
+
+// 下一张
+const next = () => {
+  if (carouselRef.value) {
+    carouselRef.value.next()
+  }
+}
+</script>
+
+<template>
+  <div class="second-content">
+    <div class="center">
+      <span class="demonstration"></span>
+      <!-- 上一张按钮 -->
+      <el-button class="carousel-btn prev-btn" @click="prev"><el-icon><ArrowLeftBold /></el-icon></el-button>
+      <!-- 下一张按钮 -->
+      <el-button class="carousel-btn next-btn" @click="next"><el-icon><ArrowRightBold /></el-icon></el-button>
+      <!-- 轮播组件：循环渲染分组后的数据 -->
+      <el-carousel height="573px" arrow="never" :interval="5000" ref="carouselRef">
+        <!-- 遍历分组后的数据，每组数据渲染一个轮播项 -->
+        <el-carousel-item v-for="(group, index) in groupedData" :key="index">
+          <!-- 使用网格布局容器包裹每个轮播项内的多个DynamicItem -->
+          <div class="item-container">
+            <!-- 遍历当前组内的每个项目，渲染DynamicItem组件 -->
+            <DynamicItem
+              v-for="item in group"
+              :key="item.title"
+              :imgUrl="item.imgUrl"
+              :title="item.title"
+              :content="item.content"
+            />
+          </div>
+        </el-carousel-item>
+      </el-carousel>
+    </div>
+  </div>
+</template>
+
+<style scoped lang="less">
+.second-content{
+  background-image:url("@/assets/img/aboutBg.png");
+  background-repeat: no-repeat;
+  background-size: cover;
+  background-position: bottom;
+  box-sizing: border-box;
+  padding: 50px 0;
+  height: 810px;
+
+  .center{
+    width: 1000px;
+    margin: 0 auto;
+    position: relative; /* 设置为相对定位，作为按钮绝对定位的参考 */
+  }
+
+  // 轮播按钮样式
+  .carousel-btn {
+    --el-font-size-base:60px;
+    position: absolute; /* 绝对定位 */
+    top: 50%; /* 垂直居中 */
+    transform: translateY(-50%); /* 精确垂直居中 */
+    z-index: 10; /* 确保按钮在轮播内容之上 */
+    background-color: rgba(0, 0, 0, 0); /* 半透明背景 */
+    color: #CFCFCF; /* 文字颜色 */
+    border: none; /* 移除边框 */
+    padding: 30px; /* 调整内边距 */
+    cursor: pointer; /* 鼠标指针变为手型 */
+    transition: background-color 0.3s; /* 背景色过渡效果 */
+    border-radius: 50%;
+    width: 60px;
+    height: 60px;
+    &:hover {
+      background-color: rgba(0, 0, 0, 0.1); /*  hover时背景色加深 */
+    }
+  }
+
+  // 上一张按钮定位到左侧
+  .prev-btn {
+    left: -130px; /* 向左偏移 */
+  }
+
+  // 下一张按钮定位到右侧
+  .next-btn {
+    right: -130px; /* 向右偏移 */
+  }
+
+  // 新增样式：轮播项内的项目容器，使用网格布局
+  .item-container {
+    display: flex;
+    justify-content: space-between;
+  }
+}
+</style>

src/components/about/AboutProfile.vue

@@ -0,0 +1,70 @@
+<script setup>
+
+</script>
+
+<template>
+  <div class="first-content">
+    <div class="content">
+      <h1>飞利信音视频通讯应用流媒体交互技术北京市工程实验室</h1>
+      <div class="line"></div>
+      <p>
+        “飞利信音视频通讯应用流媒体交互技术北京市工程实验室”是经北京市发展和改革委员会正式认定，于2017年2月由北京飞利信科技股份有限公司牵头组建的权威研发机构。实验室深度聚焦音视频通讯领域的前沿技术攻关与产业化应用，是公司践行“AI+音频”战略、实现技术驱动的核心引擎。
+      </p>
+      <p>
+        自成立以来，实验室始终立足于公司在声学处理与人工智能领域的长期技术积累，致力于解决复杂环境下的实时通讯难题。我们的研究覆盖从核心硬件设计、智能算法研发到一体化解决方案构建的全技术链条。其中，在会议场景下实现的实时人工智能降噪算法与专用核心硬件的重大突破，标志着我们已成功将“自适应声学感知”能力深度融合于产品之中，有效消除了空调、键盘等各类环境噪声的干扰，为政务、企业及消费级市场带来了音频体验的跨越式提升。
+      </p>
+      <p>
+        目前，实验室的技术成果已成功转化为“AI一体机+场景化解决方案”的双轨产品生态，不仅全面提升了现有会议系统的性能，更为具身智能交互、AI训练仿真等新兴领域提供了高可靠性的声学感知基础。
+      </p>
+      <p>
+        展望未来，实验室将继续秉承创新精神，推动人工智能与产业应用的深度融合，致力于让每一次沟通都更加清晰、高效、自然，以坚实的技术实力引领中国智能音视频通讯技术的标准演进与产业未来。
+      </p>
+    </div>
+  </div>
+</template>
+
+<style scoped lang="less">
+.first-content{
+  background-image:url("@/assets/img/aboutBg.png");
+  background-repeat: no-repeat;
+  background-size: cover;
+  background-position: bottom;
+  box-sizing: border-box;
+  padding: 50px 0;
+  height: 810px;
+  .content{
+    width: 1101px;
+    margin: 0 auto;
+    padding: 40px 50px;
+    background-image: url("@/assets/img/about-text.png");
+    background-repeat: no-repeat;
+    background-size: cover;
+    h1{
+      text-align: center;
+      font-weight: 400;
+      font-size: 32px;
+      line-height: 1em;
+      letter-spacing: 0.03em;
+      color:#000000;
+      margin-bottom: 30px;
+    }
+    .line{
+      width: 72.16px;
+      height: 3.69px;
+      background-color:#0084FF;
+      margin: 0 auto 50px;
+    }
+    p{
+      font-weight: 300;
+      font-size: 17px;
+      line-height: 1.5em;
+      letter-spacing: 0.03em;
+      color:#000000;
+      margin-bottom: 30px;
+      text-indent: 2em;
+    }
+
+  }
+
+}
+</style>

src/components/about/DynamicItem.vue

@@ -0,0 +1,60 @@
+<script setup>
+import { getImageUrl } from '@/utils/function.js'
+const props=defineProps({
+  imgUrl:{
+    type:String,
+    default:''
+  },
+  title:{
+    type:String,
+    default:''
+  },
+  content:{
+    type:String,
+    default:''
+  }
+})
+</script>
+
+<template>
+<div class="item">
+  <img :src="getImageUrl(imgUrl)" alt="动态">
+  <div class="content">
+    <h1>{{title}}</h1>
+    <p>{{content}}</p>
+  </div>
+</div>
+</template>
+
+<style scoped lang="less">
+.item{
+  width: 457px;
+  height: 573px;
+  border-radius: 20px;
+  box-shadow: 0 6px 25.4px 0 #DBE4F0FC;
+  background-color: #FFFFFF;
+  overflow: hidden;
+  img{
+    width: 100%;
+    height: 395.02734375px;
+    object-fit: cover;
+  }
+  .content{
+    padding: 20px;
+  }
+  h1{
+    font-weight: 500;
+    font-size: 30px;
+    line-height: 100%;
+    letter-spacing: 0.03em;
+    margin-bottom: 20px;
+  }
+  p{
+    font-weight: 400;
+    font-size: 16px;
+    line-height: 1.5em;
+    letter-spacing: 0.03em;
+    padding: 10px;
+  }
+}
+</style>

src/main.js

@@ -8,6 +8,7 @@ import router from './router'
 import ElementPlus from 'element-plus'
 import 'element-plus/dist/index.css'
 
+
 const app = createApp(App)
 
 app.use(createPinia())

src/router/index.js

@@ -3,6 +3,7 @@ import HomeView from "@/views/HomeView.vue";
 import CoreTechnology from "@/views/CoreTechnology.vue";
 import ProductDisplay from "@/views/ProductDisplay.vue";
 import ServiceExchange from "@/views/ServiceExchange.vue";
+import AboutUs from "@/views/AboutUs.vue";
 
 const router = createRouter({
   history: createWebHistory(import.meta.env.BASE_URL),
@@ -26,6 +27,11 @@ const router = createRouter({
       path:'/service',
       name:'service',
       component:ServiceExchange
+    },
+    {
+      path:'/about',
+      name:'about',
+      component:AboutUs
     }
   ],
 })

src/utils/function.js

@@ -0,0 +1,16 @@
+export const getImageUrl = (path) => {
+    // 如果是绝对URL，直接返回
+    console.log(path)
+    if (path.startsWith('http://') || path.startsWith('https://')) {
+        return path
+    }
+
+    // 否则处理为本地资源
+    try {
+        // return new URL(`/src/assets/${path}`, import.meta.url).href
+        return `/src/assets/${path}`
+    } catch (error) {
+        console.error('图片加载失败:', error)
+        return ''
+    }
+}

src/views/AboutUs.vue

@@ -0,0 +1,86 @@
+<script setup>
+import {ref} from "vue";
+import AboutProfile from "@/components/about/AboutProfile.vue";
+import AboutDynamic from "@/components/about/AboutDynamic.vue";
+
+const activeName = ref('first')
+
+
+const dynamicData = ref([
+  {
+    imgUrl: "img/dynamic1.png",
+    title: "端侧AI降噪模组设计",
+    content: "专为语音收集和处理设计的USB AI降噪麦克风模组，这是一款基于XMOS XU316芯片和Codec芯片的专业音频处理模组。"
+  },
+  {
+    imgUrl: "img/dynamic2.png",
+    title: "AI降噪产品化市场环境",
+    content: "当前，AI降噪市场已形成结构清晰、协同发展的三层产业链格局"
+  },
+  {
+    imgUrl: "img/dynamic1.png",
+    title: "端侧AI降噪模组设计",
+    content: "专为语音收集和处理设计的USB AI降噪麦克风模组，这是一款基于XMOS XU316芯片和Codec芯片的专业音频处理模组。"
+  },
+  {
+    imgUrl: "img/dynamic1.png",
+    title: "端侧AI降噪模组设计",
+    content: "专为语音收集和处理设计的USB AI降噪麦克风模组，这是一款基于XMOS XU316芯片和Codec芯片的专业音频处理模组。"
+  }
+])
+</script>
+
+<template>
+  <div class="header">
+    <img src="@/assets/img/about-us.png" alt="">
+  </div>
+  <el-tabs v-model="activeName" class="about-tabs">
+    <el-tab-pane label="实验室简介" name="first">
+      <AboutProfile></AboutProfile>
+    </el-tab-pane>
+    <el-tab-pane label="实验室动态" name="second">
+      <AboutDynamic :dynamicData="dynamicData"></AboutDynamic>
+    </el-tab-pane>
+    <el-tab-pane label="奖项荣誉" name="third">
+      <div class="third-content">
+
+      </div>
+    </el-tab-pane>
+    <el-tab-pane label="联系我们" name="fourth">
+      <div class="fourth-content">
+
+      </div>
+    </el-tab-pane>
+  </el-tabs>
+</template>
+
+<style scoped lang="less">
+.header{
+  width: 100%;
+  img{
+    width: 100%;
+    object-fit: cover;
+    display: block;
+  }
+
+}
+.about-tabs{
+  margin: 0 auto;
+  :deep(.el-tabs__nav-scroll){
+    display: flex;
+    justify-content: center;
+  }
+  :deep(.el-tabs__item){
+    font-weight: 500;
+    font-size: 24px;
+    line-height: 100%;
+    letter-spacing: 0.06em;
+    margin:20px;
+  }
+  :deep(.el-tabs__header){
+    margin: 0;
+  }
+
+
+}
+</style>

src/views/ServiceExchange.vue

@@ -180,7 +180,6 @@ generateCaptcha()
 
 .feedback-form {
 
-
   .form-row {
     display: flex;
     gap: 20px;