multimedia-portal/src/views/ProductDisplay.vue

<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>