修改自定义页面

src/router/index.js

@@ -31,10 +31,9 @@ export default new Router({
           path: 'industrySolutions', component: () => import('@/views/industrySolutions/index.vue'),
         },
         {
-          path: 'productCenter/detail1', component: () => import('@/views/productCenter/detail1.vue'),
-        },
-        {
-          path: 'productCenter/detail2', component: () => import('@/views/productCenter/detail2.vue'),
+          path: 'productCenter/detail1', component: () => import('@/views/productCenter/detail2.vue'),
+        }, {
+          path: 'productCenter/detail2', component: () => import('@/views/productCenter/detail1.vue'),
         },
         {
           path: 'index', component: () => import('@/views/index/index.vue'),

src/views/industrySolutions/index.vue

@@ -13,8 +13,7 @@
       <template v-for="i in tabsList">
         <div class="card">
           <!-- 左侧图片 -->
-          <div class="card-img">
-            <img src="http://1.13.177.47:9665/statics/2025/07/24/mesnac_20250724093713A002.jpg" alt="语音拣选">
+          <div class="card-img" :style="{backgroundImage: 'url(' + i.img + ') '}">
           </div>
 
           <!-- 右侧内容 -->
@@ -51,15 +50,61 @@ export default {
       banner:'http://1.13.177.47:9665/statics/2025/07/24/mesnac_20250724093713A002.jpg',
       bannerTitle: '',
       tabsActive: 0,
-      tabsList: [{
-        title:'智能轮胎',
-        value:'智能轮胎介绍',
-        info:'智能轮胎信息',
-      }],
+      tabsList: [
+        {
+          title: '智能轮胎',
+          value: '智能轮胎介绍',
+          info: '智能轮胎信息',
+          img: 'http://1.13.177.47:9665/statics/2025/07/24/mesnac_20250724093713A002.jpg',
+          id: '5'
+        },
+        {
+          title: '轮胎工厂',
+          value: '轮胎工厂介绍',
+          info: '轮胎工厂信息',
+          img: 'http://1.13.177.47:9665/statics/2025/07/24/mesnac_20250724093713A002.jpg',
+          id: '18'
+        },
+        {
+          title: '快递物流',
+          value: '快递物流介绍',
+          info: '快递物流信息',
+          img: 'http://1.13.177.47:9665/statics/2025/08/22/%E5%9B%BE%E7%89%8717_20250822141810A130.jpg',
+          id: '19'
+        },
+        {
+          title: '畜牧食品',
+          value: '畜牧食品介绍',
+          info: '在畜牧屠宰行业，RFID助力车间自动化，智能化生产，合作客户包括双汇、正大、牧原等',
+          img: 'http://1.13.177.47:9665/statics/2025/08/22/12_20250822135124A121.png',
+          id: '20'
+        },
+        {
+          title: '新能源',
+          value: '新能源介绍',
+          info: '新能源信息',
+          img: 'http://1.13.177.47:9665/statics/2025/07/24/mesnac_20250724093713A002.jpg',
+          id: '21'
+        },
+        {
+          title: '智能制造',
+          value: '智能制造介绍',
+          info: '智能制造信息',
+          img: 'http://1.13.177.47:9665/statics/2025/08/22/%E5%9B%BE%E7%89%8736_20250822142617A134.jpg',
+          id: '22'
+        },
+        {
+          title: '工业物联',
+          value: '工业物联123xsw介绍',
+          info: '工业物联信息',
+          img: 'http://1.13.177.47:9665/statics/2025/07/24/mesnac_20250724093713A002.jpg',
+          id: '23'
+        },
+      ],
     }
   },
   mounted() {
-    this.getData()
+    // this.getData()
   },
   methods: {
     getData() {
@@ -174,22 +219,31 @@ export default {
   &:nth-child(3n){
     margin-left: 2%;
   }
-  &:nth-child(3n-   1){
+
+  &:nth-child(3n-1) {
     margin-left: 2%;
   }
+
   .card-img{
     position: absolute;
     opacity: 0.4;
-    width: 40%;
+    width: 100%;
     height: 100%;
     top: 0;
     left: 0;
-    img{
-      width: 100%;
-      height: 100%;
-      //object-fit: contain;
-    }
+    background-repeat: no-repeat;
+    background-size: 100% 100%;
+    /* 设置透明蒙版 */
+    -webkit-mask-image: linear-gradient(to right, rgba(0, 0, 0, 1), rgba(0, 0, 0, 0));
+    -webkit-mask-repeat: no-repeat;
+    -webkit-mask-size: 100% 100%;
+
+    mask-image: linear-gradient(to right, rgba(0, 0, 0, 1), rgba(0, 0, 0, 0));
+    mask-repeat: no-repeat;
+    mask-size: 100% 100%;
   }
+
+
   .card-title{
 
     position: absolute;