<script setup>
import {ref} from "vue";
import AboutProfile from "@/components/about/AboutProfile.vue";
import AboutDynamic from "@/components/about/AboutDynamic.vue";
import AboutHonor from "@/components/about/AboutHonor.vue";
import AboutContactUs from "@/components/about/AboutContactUs.vue";

const activeName = ref('first')


const dynamicData = ref([
  {
    imgUrl: "img/dynamic1.png",
    title: "端侧AI降噪模组设计",
    content: "专为语音收集和处理设计的USB AI降噪麦克风模组，这是一款基于XMOS XU316芯片和Codec芯片的专业音频处理模组。",
    time: "2023-01-01"
  },
  {
    imgUrl: "img/dynamic2.png",
    title: "AI降噪产品化市场环境",
    content: "当前，AI降噪市场已形成结构清晰、协同发展的三层产业链格局",
    time: "2023-01-01"
  },
  {
    imgUrl: "img/dynamic1.png",
    title: "端侧AI降噪模组设计",
    content: "专为语音收集和处理设计的USB AI降噪麦克风模组，这是一款基于XMOS XU316芯片和Codec芯片的专业音频处理模组。",
    time: "2023-01-01"
  },
  {
    imgUrl: "img/dynamic1.png",
    title: "端侧AI降噪模组设计",
    content: "专为语音收集和处理设计的USB AI降噪麦克风模组，这是一款基于XMOS XU316芯片和Codec芯片的专业音频处理模组。",
    time: "2023-01-01"
  }
])


const honorData = ref([
  {
    time: "2022年",
    image: "img/honor1.png",
    label: "xxxx比赛金奖"
  },
  {
    time: "2022年",
    image: "img/honor2.png",
    label: "国家高新技术企业"
  },
  {
    time: "2022年",
    image: "img/honor3.png",
    label: "国家高新技术企业"
  },
  {
    time: "2022年",
    image: "img/honor1.png",
    label: "国家高新技术企业"
  },
  {
    time: "2022年",
    image: "img/honor2.png",
    label: "国家高新技术企业"
  },
  {
    time: "2022年",
    image: "img/honor3.png",
    label: "国家高新技术企业"
  },
  {
    time: "2022年",
    image: "img/honor1.png",
    label: "xxxx比赛金奖"
  },
  {
    time: "2022年",
    image: "img/honor2.png",
    label: "国家高新技术企业"
  },
  {
    time: "2022年",
    image: "img/honor3.png",
    label: "国家高新技术企业"
  },
  {
    time: "2022年",
    image: "img/honor1.png",
    label: "国家高新技术企业"
  },
  {
    time: "2022年",
    image: "img/honor2.png",
    label: "国家高新技术企业"
  },
  {
    time: "2022年",
    image: "img/honor3.png",
    label: "国家高新技术企业"
  },

])
</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">
      <AboutHonor :honorData="honorData"></AboutHonor>
    </el-tab-pane>
    <el-tab-pane label="联系我们" name="fourth">
      <AboutContactUs></AboutContactUs>
    </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>
