home screen

src/components/detail/Overview.vue

@@ -5,13 +5,11 @@
       <img :src="BG" class="bg" alt="" />
       <div v-for="item in productList" :key="item.id">
         <div class="main" v-if="parseInt(item.id) - 1 == activeTab">
-          <img :src="A5" alt="big_img" class="big_img" />
+          <img :src="item.thumbnail" alt="big_img" class="big_img" />
           <div class="content_intro">
-            <h2 class="title">线性相机实验平台</h2>
+            <h2 class="title">{{ item.title }}</h2>
             <p class="feature">
-              功能说明： 6轴5自由度相机测试实验平台 灵活和高精度的调节模组
-              帮客户缩短项目验证所需要的时间
-              快速的帮助工程师从环境上优化机器视觉方案 双 x
+              {{ item.desc }}
             </p>
             <div class="btn" @click="contactUs">
               <span class="animate__animated animate__backInLeft"
@@ -72,21 +70,22 @@ const contactUs = () => {
     }
     .main {
       flex: 1;
-      padding: 79px 126px 45px 0;
+      padding: 79px 126px 45px 200px;
       display: flex;
       align-items: center;
       justify-content: space-between;
       .big_img {
         // width: 893px;
         // height: 502px;
-        width: 719px;
-        height: 811px;
+        width: 350px;
+        height: 411px;
       }
       .content_intro {
         display: flex;
         flex-direction: column;
         align-items: flex-start;
         justify-content: space-between;
+        margin-left: 200px;
         .title {
           font-size: 26px;
           font-weight: bold;

src/mock/index.js

@@ -85,8 +85,8 @@ export const productList = [
     id: 1,
     thumbnail: S1,
     bigPic: B1,
-    title: '线性相机实验平台',
-    desc: '功能说明： 6轴5自由度相机测试实验平台 灵活和高精度的调节模组帮客户缩短项目验证所需要的时间快速的帮助工程师从环境上优化机器视觉方案 双 x',
+    title: '动车底部巡检',
+    desc: '助力列车底部检测由“人检人修”迈向“机检人修”！动车底部巡检机器人采用机器视觉、图像识别、深度学习等人工智能技术，在车底按程序路线行走，可全自动检测CRH系列、中国标准动车组等所有动车组车型的车底和转向架可视部件，实现动车组相关部位零部件外观故障的识别和报警，收集、反馈的指标值细微至毫米级别，人眼观察不出或者精度不够的点位，机器人的“火眼金睛”都能立刻发现，不会出现漏检漏修，基本覆盖动车组日常一级修的作业内容，实现了动车组一级检修作业由“人检”向“机检”作业模式的升级。',
     video: {
       title: '产品使用视频',
       desc: '做专业的铁路设备研发和制造',
@@ -133,8 +133,8 @@ export const productList = [
     id: 2,
     thumbnail: S2,
     bigPic: B1,
-    title: '线性相机实验平台',
-    desc: '功能说明： 6轴5自由度相机测试实验平台 灵活和高精度的调节模组帮客户缩短项目验证所需要的时间快速的帮助工程师从环境上优化机器视觉方案 双 x',
+    title: '受电弓压力检测',
+    desc: '高铁、动车在高速行驶过程中，必须要保持其受流状态处于长期的稳定之中，就是要求受电弓与其接触的线路中间要维持合适的接触压力。接触压力值有严格的设计标准，一般在静态之下为60~90N，如果接触压力过小的话，就会容易造成离线并会产生电弧；而当接触压力过大时，接触线的拾升量也会随之变大，使接触线路局部发生弯曲并导致疲劳损伤，同时让接触线路和碳刷磨损变大，最严重时有可能造成弓网事故。为了消除高铁、动车的安全隐患，发展我国电力接触网技术，必须要开发受电弓的压力检测装置。',
     video: {
       title: '产品使用视频',
       desc: '做专业的铁路设备研发和制造',
@@ -181,8 +181,8 @@ export const productList = [
     id: 3,
     thumbnail: S3,
     bigPic: B1,
-    title: '线性相机实验平台',
-    desc: '功能说明： 6轴5自由度相机测试实验平台 灵活和高精度的调节模组帮客户缩短项目验证所需要的时间快速的帮助工程师从环境上优化机器视觉方案 双 x',
+    title: '线性光源发生器',
+    desc: '线性光源是建筑照明术语，指一个连续的灯或灯具，其发光带的总长度远大于其到照度计算点之间的距离，可视为线光源。线性光源一般是多个LED灯珠排成一行，发出线性的光，形成一条线。可选择365nm、385nm、395nm、405nm波长的不同功率的LED，在出光处加透镜可以调节光斑大小。',
     video: {
       title: '产品使用视频',
       desc: '做专业的铁路设备研发和制造',
@@ -229,8 +229,8 @@ export const productList = [
     id: 4,
     thumbnail: S4,
     bigPic: B1,
-    title: '线性相机实验平台',
-    desc: '功能说明： 6轴5自由度相机测试实验平台 灵活和高精度的调节模组帮客户缩短项目验证所需要的时间快速的帮助工程师从环境上优化机器视觉方案 双 x',
+    title: '异音检测装置',
+    desc: '在当今高速发展的工业制造领域，消费者对产品的质量要求越来越高。产品的声学性能已成为衡量其品质的重要指标之一，尤其在汽车、家电、医疗、电子等行业。异音异响检测作为一种关键的声学性能测试技术，正日益受到广泛关注。异音异响检测的核心原理是通过声学传感器（如麦克风）捕捉产品运行过程中产生的声音信号，然后对这些信号进行频谱分析、时域分析等处理，以便识别出异常声音。',
     video: {
       title: '产品使用视频',
       desc: '做专业的铁路设备研发和制造',