portal_website/src/views/productCenter/index.vue

<template>
  <div>
    <div class="banner">
      <el-image
        style="width: 100%; height: 100%;position:absolute;top: 0;left: 0;"
        :src="banner"
        fit="contain"></el-image>
      <div class="bannerInfo">{{ bannerTitle }}</div>
    </div>

    <div v-for="i in productList">
      <ProduceModel :id="`item${i.id}`" :i="i"/>
    </div>


    <ContactUs class="contactUs"/>
    <Copyright class="copyright"/>
  </div>
</template>

<script>
import ContactUs from '@/components/contactUs'
import Copyright from '@/components/copyright'
import ProduceModel from './produceModel.vue'
import {selectMenuTree} from "@/api/productCenter";

export default {
  name: 'ProductCenter',
  components: {
    ContactUs,
    Copyright,
    ProduceModel
  },
  data() {
    return {
      banner: 'http://1.13.177.47:9665/statics/2025/07/24/mesnac_20250724093713A002.jpg',
      // bannerTitle: 'assdadasdasdaasda',
      productList: [
        {
          name: '轮胎RFID',
          id: '11',
          // value:'介绍',
          list: [
            {
              name: '分类1',
              list: [
                {
                  name: 'RFID轮胎',
                  value:'软控为轮胎产业链提供RFID轮胎整体解决方案，包括：系列化轮胎用RFID标签，系列化RFID标签封胶设备、定制RFID标签贴合设备，RFID 轮胎生产过程数据采集系统,及基于不同应用场景的信息化管理系统等。',
                  icon: 'http://1.13.177.47:9665/statics/2025/08/22/%E8%B5%84%E6%BA%90%208@4x_20250822150647A156.png'
                },
                // {
                //   name: '设备1',
                //   value:'介绍1',
                //   icon: 'https://www.genrace.com/static/upload/image/20250414/1744615648137412.png'
                // },
                // {
                //   name: '设备1',
                //   value:'介绍1',
                //   icon: 'https://www.genrace.com/static/upload/image/20250414/1744615648137412.png'
                // },
                // {
                //   name: '设备1',
                //   value:'介绍1',
                //   icon: 'https://www.genrace.com/static/upload/image/20250414/1744615648137412.png'
                // },
              ]
            },
          ]
        },
        {
          name: '超高频RFID',
          id: '12',
          // value:'介绍',
          list: [
            {
              name: '超高频RFID读写器',
              list: [
                {
                  name: '一体式读写器（高性能）',
                  id: '1',
                  value:'内置高性能圆极化天线，实现远距离识别。',
                  icon: 'http://1.13.177.47:9665/statics/2025/08/22/%E4%B8%80%E4%BD%93%E5%BC%8F%E8%AF%BB%E5%86%99%E5%99%A8%EF%BC%88%E9%AB%98%E6%80%A7%E8%83%BD%EF%BC%89%EF%BC%8C%E5%86%85%E7%BD%AE%E9%AB%98%E6%80%A7%E8%83%BD%E5%9C%86%E6%9E%81%E5%8C%96%E5%A4%A9%E7%BA%BF%EF%BC%8C%E5%AE%9E%E7%8E%B0%E8%BF%9C%E8%B7%9D%E7%A6%BB%E8%AF%86%E5%88%AB%E3%80%82_20250822101411A021.png'
                },
                {
                  name: '一体式读写器（标准型）',
                  id: '2',
                  value:'内置高性能圆极化天线，用最小体积实现最优识别性能。',
                  icon: 'http://1.13.177.47:9665/statics/2025/08/22/%E4%B8%80%E4%BD%93%E5%BC%8F%E8%AF%BB%E5%86%99%E5%99%A8%EF%BC%88%E6%A0%87%E5%87%86%E5%9E%8B%EF%BC%89%EF%BC%8C%E5%86%85%E7%BD%AE%E9%AB%98%E6%80%A7%E8%83%BD%E5%9C%86%E6%9E%81%E5%8C%96%E5%A4%A9%E7%BA%BF%EF%BC%8C%E7%94%A8%E6%9C%80%E5%B0%8F%E4%BD%93%E7%A7%AF%E5%AE%9E%E7%8E%B0%E6%9C%80%E4%BC%98%E8%AF%86%E5%88%AB%E6%80%A7%E8%83%BD%E3%80%82_20250822101455A022.png'
                },
                {
                  name: '两通道车载式读写器',
                  value:'采用工业化防振动设计理念，支持蓝牙连接，提供更加稳定可靠的物理及电器连接方式。',
                  icon: 'http://1.13.177.47:9665/statics/2025/08/22/%E4%B8%A4%E9%80%9A%E9%81%93%E8%BD%A6%E8%BD%BD%E5%BC%8F%E8%AF%BB%E5%86%99%E5%99%A8%EF%BC%8C%E9%87%87%E7%94%A8%E5%B7%A5%E4%B8%9A%E5%8C%96%E9%98%B2%E6%8C%AF%E5%8A%A8%E8%AE%BE%E8%AE%A1%E7%90%86%E5%BF%B5%EF%BC%8C%E6%94%AF%E6%8C%81%E8%93%9D%E7%89%99%E8%BF%9E%E6%8E%A5%EF%BC%8C%E6%8F%90%E4%BE%9B%E6%9B%B4%E5%8A%A0%E7%A8%B3%E5%AE%9A%E5%8F%AF%E9%9D%A0%E7%9A%84%E7%89%A9%E7%90%86%E5%8F%8A%E7%94%B5%E5%99%A8%E8%BF%9E%E6%8E%A5%E6%96%B9%E5%BC%8F%E3%80%82_20250822101528A024.png'
                },
                {
                  name: '蓝牙手持式读写器',
                  value:'蓝牙数据上传，采集数据可轻松接入用户Android移动终端，易于安装与部署。',
                  icon: 'http://1.13.177.47:9665/statics/2025/08/22/%E8%93%9D%E7%89%99%E6%89%8B%E6%8C%81%E5%BC%8F%E8%AF%BB%E5%86%99%E5%99%A8_20250822101633A026.png'
                },
                {
                  name: 'RFID通道机',
                  value:'解决在供应链流通中，标签漏读串读等问题，应用于单品级物品识别，如快递、服装、皮具箱包、酒类等行业。',
                  icon: 'http://1.13.177.47:9665/statics/2025/08/22/RFID%E9%80%9A%E9%81%93%E6%9C%BA%EF%BC%8C%E8%A7%A3%E5%86%B3%E5%9C%A8%E4%BE%9B%E5%BA%94%E9%93%BE%E6%B5%81%E9%80%9A%E4%B8%AD%EF%BC%8C%E6%A0%87%E7%AD%BE%E6%BC%8F%E8%AF%BB%E4%B8%B2%E8%AF%BB%E7%AD%89%E9%97%AE%E9%A2%98%EF%BC%8C%E5%BA%94%E7%94%A8%E4%BA%8E%E5%8D%95%E5%93%81%E7%BA%A7%E7%89%A9%E5%93%81%E8%AF%86%E5%88%AB%EF%BC%8C%E5%A6%82%E5%BF%AB%E9%80%92%E3%80%81%E6%9C%8D%E8%A3%85%E3%80%81%E7%9A%AE%E5%85%B7%E7%AE%B1%E5%8C%85%E3%80%81%E9%85%92%E7%B1%BB%E7%AD%89%E8%A1%8C%E4%B8%9A%E3%80%82_20250822101716A028.png'
                },
                {
                  name: 'RFID通道门',
                  value:'RFID通道门具有窄波束、高增益特点，适用于超高频门禁通道类、物流仓储、人员、图书、档案馆、医疗系统、设备资产等应用。',
                  icon: 'http://1.13.177.47:9665/statics/2025/08/22/RFID%E9%80%9A%E9%81%93%E9%97%A8%E5%85%B7%E6%9C%89%E7%AA%84%E6%B3%A2%E6%9D%9F%E3%80%81%E9%AB%98%E5%A2%9E%E7%9B%8A%E7%89%B9%E7%82%B9%EF%BC%8C%E9%80%82%E7%94%A8%E4%BA%8E%E8%B6%85%E9%AB%98%E9%A2%91%E9%97%A8%E7%A6%81%E9%80%9A%E9%81%93%E7%B1%BB%E3%80%81%E7%89%A9%E6%B5%81%E4%BB%93%E5%82%A8%E3%80%81%E4%BA%BA%E5%91%98%E3%80%81%E5%9B%BE%E4%B9%A6%E3%80%81%E6%A1%A3%E6%A1%88%E9%A6%86%E3%80%81%E5%8C%BB%E7%96%97%E7%B3%BB%E7%BB%9F%E3%80%81%E8%AE%BE%E5%A4%87%E8%B5%84%E4%BA%A7%E7%AD%89%E5%BA%94%E7%94%A8%E3%80%82_20250822101703A027.png'
                },
              ]
            },
            {
              name: '超高频RFID标签',
              list: [
                {
                  name: '耐高温标签',
                  value: 'R耐温范围为100℃~230℃。',
                  icon: 'http://1.13.177.47:9665/statics/2025/08/22/22_20250822102031A033.png'
                },
                {
                  name: '电缆标签',
                  value: '粘贴缠绕于物体表面，允许多次翻折缠绕。',
                  icon: 'http://1.13.177.47:9665/statics/2025/08/22/2222_20250822102107A035.png'
                },
              ]
            },

          ]
        },
        {
          name: '高频RFID',
          id: '13',
          value:'介绍',
          list: [
            {
              name: '高频RFID读头',
              list: [
                {
                  name: 'HW-RFR-050-B-003-B1204S',
                  //value:'介绍1介绍1介绍1介绍1介绍1介绍1介绍1介绍1介绍1介绍1介绍1介绍1介绍1介绍1介绍1介绍1介绍1介绍1介绍1介绍1介绍1介绍1介绍1介绍1介绍1介绍1介绍1介绍1介绍1介绍1介绍1介绍1介绍1介绍1介绍1介绍1介绍1介绍1介绍1介绍1介绍1介绍1介绍1介绍1介绍1介绍1介绍1介绍1介绍1介绍1介绍1介绍1介绍1介绍1介绍1介绍1介绍1介绍1介绍1介绍1介绍1介绍1介绍1介绍1介绍1介绍1介绍1介绍1介绍1介绍1介绍1介绍1介绍1介绍1介绍1介绍1介绍1介绍1介绍1介绍1介绍1介绍1介绍1介绍1介绍1介绍1介绍1介绍1介绍1介绍1介绍1介绍1介绍1介绍1介绍1介绍1介绍1介绍1介绍1介绍1介绍1介绍1介绍1介绍1介绍1介绍1介绍1介绍1介绍1介绍1介绍1介绍1介绍1介绍1介绍1介绍1介绍1介绍1介绍1介绍1',
                  icon: 'http://1.13.177.47:9665/statics/2025/08/22/%E9%AB%98%E9%A2%91RFID%E8%AF%BB%E5%A4%B4_20250822100334A019.png'
                },
              ]
            },
            {
              name: '高频RFID一体机',
              list: [
                {
                  name: 'HW-RSLIM-HF',
                  //value:'介绍1',
                  icon: 'http://1.13.177.47:9665/statics/2025/08/22/%E9%AB%98%E9%A2%91RFID%E4%B8%80%E4%BD%93%E6%9C%BA_20250822100352A020.png'
                },
              ]
            },
            {
              name: '高频RFID标签',
              list: [
                {
                  name: 'HW-PD50-HF',
                  // value:'介绍1',
                  icon: 'http://1.13.177.47:9665/statics/2025/08/22/%E9%AB%98%E9%A2%91RFID%E5%9C%86%E7%8E%AF%E6%A0%87%E7%AD%BE_20250822093525A018.png'
                },
              ]
            },
          ]
        },
        {
          name: '传感器',
          id: '14',
          // value:'介绍',
          list: [
            {
              name: '物联网硬件产品系列',
              list: [
                {
                  name: '无线传感器接收显示仪',
                  value:'支持 WiFi、以太网、4G、LORA 等通讯方式；Modbus_RTU，Modbus_TCP，支持客户定制通讯协议开发。',
                  icon: 'http://1.13.177.47:9665/statics/2025/08/22/%E6%97%A0%E7%BA%BF%E4%BC%A0%E6%84%9F%E5%99%A8%E6%8E%A5%E6%94%B6%E6%98%BE%E7%A4%BA%E4%BB%AA%E3%80%82%E6%94%AF%E6%8C%81%20WiFi%E3%80%81%E4%BB%A5%E5%A4%AA%E7%BD%91%E3%80%814G%E3%80%81LORA%20%E7%AD%89%E9%80%9A%E8%AE%AF%E6%96%B9%E5%BC%8F%EF%BC%9BModbus_RTU%EF%BC%8CModbus_TCP%EF%BC%8C%E6%94%AF%E6%8C%81%E5%AE%A2%E6%88%B7%E5%AE%9A%E5%88%B6%E9%80%9A%E8%AE%AF%E5%8D%8F%E8%AE%AE%E5%BC%80%E5%8F%91%E3%80%82_20250822103145A037.png'
                },
                {
                  name: '车载物联定位终端',
                  value:'车载物联定位终端， 支持 GPS/ 北斗定位 ， 通过 内置 TPMS 或 RFID 读写器 模块 读取到的设备相关数据 ，用 4G无线 通讯 的方式上传 到企业数据平台或阿里云物 联网平台。',
                  icon: 'http://1.13.177.47:9665/statics/2025/08/22/%E8%BD%A6%E8%BD%BD_20250822103928A038.png'
                },
                {
                  name: '工业物联云智能终端',
                  value:'工业物联云智能终端，可以对电力、蒸汽等智能仪表及传感器进行数据采集，通过网络 通信方式上传到上位机系统，进行数据的集中处理。',
                  icon: 'http://1.13.177.47:9665/statics/2025/08/22/%E5%B7%A5%E4%B8%9A%E7%89%A9%E8%81%94%E4%BA%91%E6%99%BA%E8%83%BD%E7%BB%88%E7%AB%AF%EF%BC%8C%E5%8F%AF%E4%BB%A5%E5%AF%B9%E7%94%B5%E5%8A%9B%E3%80%81%E8%92%B8%E6%B1%BD%E7%AD%89%E6%99%BA%E8%83%BD%E4%BB%AA%E8%A1%A8%E5%8F%8A%E4%BC%A0%E6%84%9F%E5%99%A8%E8%BF%9B%E8%A1%8C%E6%95%B0%E6%8D%AE%E9%87%87%E9%9B%86%EF%BC%8C%E9%80%9A%E8%BF%87%E7%BD%91%E7%BB%9C%20%E9%80%9A%E4%BF%A1%E6%96%B9%E5%BC%8F%E4%B8%8A%E4%BC%A0%E5%88%B0%E4%B8%8A%E4%BD%8D%E6%9C%BA%E7%B3%BB%E7%BB%9F%EF%BC%8C%E8%BF%9B%E8%A1%8C%E6%95%B0%E6%8D%AE%E7%9A%84%E9%9B%86%E4%B8%AD%E5%A4%84%E7%90%86%E3%80%82_20250822103947A039.png'
                },
                {
                  name: '工业物联云智能终端',
                  value:'工业物联云智能终端具有 8 路开关量输入检测、16 开关量输出、RS485 总线、网络等硬件接口。',
                  icon: 'http://1.13.177.47:9665/statics/2025/08/22/%E5%B7%A5%E4%B8%9A%E7%89%A9%E8%81%94%E4%BA%91%E6%99%BA%E8%83%BD%E7%BB%88%E7%AB%AF%E5%85%B7%E6%9C%89%208%20%E8%B7%AF%E5%BC%80%E5%85%B3%E9%87%8F%E8%BE%93%E5%85%A5%E6%A3%80%E6%B5%8B%E3%80%8116%20%E5%BC%80%E5%85%B3%E9%87%8F%E8%BE%93%E5%87%BA%E3%80%81RS485%20%E6%80%BB%E7%BA%BF%E3%80%81%E7%BD%91%E7%BB%9C%E7%AD%89%E7%A1%AC%E4%BB%B6%E6%8E%A5%E5%8F%A3%E3%80%82_20250822104006A040.png'
                },
              ]
            },
            {
              name: '物联终端',
              list: [
                {
                  name: '温湿度传感器',
                  value:'温湿度传感器，支持2路输入，采用传感器探头+采集主机的形式',
                  icon: 'http://1.13.177.47:9665/statics/2025/08/22/%E6%B8%A9%E6%B9%BF%E5%BA%A6%E4%BC%A0%E6%84%9F%E5%99%A8%EF%BC%8C%E6%94%AF%E6%8C%812%E8%B7%AF%E8%BE%93%E5%85%A5%EF%BC%8C%E9%87%87%E7%94%A8%E4%BC%A0%E6%84%9F%E5%99%A8%E6%8E%A2%E5%A4%B4+%E9%87%87%E9%9B%86%E4%B8%BB%E6%9C%BA%E7%9A%84%E5%BD%A2%E5%BC%8F%E3%80%82_20250822104331A042.png'
                },
                {
                  name: '无线温度传感器',
                  value:'无线温度传感器，电池可用 3 年； 温度测量范围：-40～125℃；精度：±0.5℃ （25℃）；通讯距离：视距范围 1500 米。 ',
                  icon: 'http://1.13.177.47:9665/statics/2025/08/22/%E6%97%A0%E7%BA%BF%E6%B8%A9%E5%BA%A6%E4%BC%A0%E6%84%9F%E5%99%A8_20250822104419A043.png'
                },
                {
                  name: 'EPD无线显示器',
                  value:'EPD无线显示器，300米视距范围内的通信，电池2年使用寿命，提供显示模板定制化的服务。',
                  icon: 'http://1.13.177.47:9665/statics/2025/08/22/EPD%E6%97%A0%E7%BA%BF%E6%98%BE%E7%A4%BA%E5%99%A8%EF%BC%8C300%E7%B1%B3%E8%A7%86%E8%B7%9D%E8%8C%83%E5%9B%B4%E5%86%85%E7%9A%84%E9%80%9A%E4%BF%A1%EF%BC%8C%E7%94%B5%E6%B1%A02%E5%B9%B4%E4%BD%BF%E7%94%A8%E5%AF%BF%E5%91%BD%EF%BC%8C%E6%8F%90%E4%BE%9B%E6%98%BE%E7%A4%BA%E6%A8%A1%E6%9D%BF%E5%AE%9A%E5%88%B6%E5%8C%96%E7%9A%84%E6%9C%8D%E5%8A%A1%E3%80%82_20250822104449A044.png'
                },
                {
                  name: '红外温度传感器',
                  value:'红外温度传感器，无接触式测温，DC9~36V供电，2.4寸TFT显示屏显示，温度测量范围：0~150℃，精度±1℃，支持RS485、无线LORA通讯，通讯距离1500米。',
                  icon: 'http://1.13.177.47:9665/statics/2025/08/22/%E7%BA%A2%E5%A4%96%E6%B8%A9%E5%BA%A6%E4%BC%A0%E6%84%9F%E5%99%A8%EF%BC%8C%E6%97%A0%E6%8E%A5%E8%A7%A6%E5%BC%8F%E6%B5%8B%E6%B8%A9%EF%BC%8CDC9~36V%E4%BE%9B%E7%94%B5%EF%BC%8C2.4%E5%AF%B8TFT%E6%98%BE%E7%A4%BA%E5%B1%8F%E6%98%BE%E7%A4%BA%EF%BC%8C%E6%B8%A9%E5%BA%A6%E6%B5%8B%E9%87%8F%E8%8C%83%E5%9B%B4%EF%BC%9A0~150%E2%84%83%EF%BC%8C%E7%B2%BE%E5%BA%A6%C2%B11%E2%84%83%EF%BC%8C%E6%94%AF%E6%8C%81RS485%E3%80%81%E6%97%A0%E7%BA%BFLORA%E9%80%9A%E8%AE%AF%EF%BC%8C%E9%80%9A%E8%AE%AF%E8%B7%9D%E7%A6%BB1500%E7%B1%B3%E3%80%82_20250822104525A045.png'
                },
              ]
            },
          ]
        },
        {
          name: '工业软件',
          id: '16',
          id: '16',
          // value:'介绍',
          list: [
            {
              name: 'MOM',
              list: [
                {
                  name: 'MOM',
                  value:'平台向下连接海量设备，支撑设备数据采集和反向控制；向上为业务系统提供统一调用接口，为应用层的系统提供物联能力。并且自身具有完整的数据可视化组件、设备模型、数据中心能力。',
                  icon: 'http://1.13.177.47:9665/statics/2025/08/22/mes_20250822132455A075.png'
                },

              ]
            },
          ]
        },
      ]
    }
  },
  mounted() {
    this.getData()
  },
  watch: {
    '$route'() {
      this.getData()
    }
  },
  methods: {
    getData() {
      selectMenuTree().then(e => {
        console.log(e)
      })
    },
  }
}
</script>

<style lang="less" scoped>
@import "~@/style.less";

.banner {
  width: 100%;
  height: 35.5vw;
  position: relative;

  .bannerInfo {
    position: absolute;
    top: 35%;
    left: 19%;
    width: 45%;
    text-align: left;
    font-size: 1.4vw;
    color: @standard-color;
    line-height: 2.5vw;
    letter-spacing: 4px;
    word-break: break-all;
  }

  .bannerBtn {
    position: absolute;
    top: 58%;
    left: 19%;
    width: 11.5vw;
    font-size: 1.2vw;
    line-height: 2vw;
    letter-spacing: 2px;
  }

  .tabs {
    position: absolute;
    bottom: 0;
    width: 100%;
    background: linear-gradient(to bottom, fade(@standard-color, 10), fade(#fff, 10));
    backdrop-filter: saturate(50%) blur(4px);

    .content {
      width: 62%;
      position: relative;
      left: 50%;
      bottom: 0;
      transform: translateX(-50%);

      .tab {
        display: inline-block;
        width: 50%;
        line-height: 6.2vw;
        font-size: 1.6vw;
        letter-spacing: 3px;
      }

      .tab.active {
        color: @standard-color;
        width: calc(50% - 3px);
        border: 1px solid #fff;
        box-shadow: 0 0 3px #0002;
      }
    }
  }
}

.contactUs {
  width: 100%;
  background-color: #2e445c;
}

.copyright {
  width: 100%;
  background-color: #1d3348;
}
</style>