From 0134ba874e1f817228e8bff294184771d95057be Mon Sep 17 00:00:00 2001
From: yujialong <479214531@qq.com>
Date: Wed, 8 Jan 2025 10:44:42 +0800
Subject: [PATCH] fix

---
 src/pages/industrial/index.vue | 608 +++++++++++++++++----------------
 1 file changed, 308 insertions(+), 300 deletions(-)

diff --git a/src/pages/industrial/index.vue b/src/pages/industrial/index.vue
index 2af720b..f896476 100644
--- a/src/pages/industrial/index.vue
+++ b/src/pages/industrial/index.vue
@@ -1,80 +1,58 @@
 <template>
   <div class="wrap">
     <div class="single-banner">
-      <img class="banner-img"
-           :src="modules[0].form.pic"
-           alt="" />
+      <img class="banner-img" :src="modules[0].form.pic" alt="" />
       <div class="texts">
         <h6 class="banner-title">{{ modules[0].form.title }}</h6>
       </div>
     </div>
 
     <div class="block history gray">
-      <div class="inner"
-           :class="{'cursor-pointer': isLink(modules[1].form.link.linkName)}"
-           @click="openLink(modules[1].form)">
-        <h2 class="wow fadeInLeft"
-            style="margin-left: 57px"
-            v-html="modules[1].form.title"></h2>
-        <div class="texts wow fadeInDown"
-             data-wow-delay="0.5s">
+      <div class="inner" :class="{ 'cursor-pointer': isLink(modules[1].form.link.linkName) }"
+        @click="openLink(modules[1].form)">
+        <h2 class="wow fadeInLeft" style="margin-left: 57px" v-html="modules[1].form.title"></h2>
+        <div class="texts wow fadeInDown" data-wow-delay="0.5s">
           <div class="left">
             <h2>{{ modules[1].form.subTitle }}</h2>
-            <div class="text"
-                 v-html="modules[1].form.des"></div>
+            <div class="text" v-html="modules[1].form.des"></div>
           </div>
-          <img class="bg"
-               :src="modules[1].form.pic"
-               alt="">
+          <img class="bg" :src="modules[1].form.pic" alt="">
         </div>
       </div>
     </div>
 
     <div class="block land">
       <div class="inner">
-        <img class="pic wow fadeInLeft"
-             :src="modules[2].form.pic"
-             alt="">
+        <img class="pic wow fadeInLeft" :src="modules[2].form.pic" alt="">
         <div class="right wow fadeInDown">
           <h6 v-html="modules[2].form.title"></h6>
-          <div class="text"
-               v-html="modules[2].form.des"></div>
+          <div class="text" v-html="modules[2].form.des"></div>
         </div>
       </div>
     </div>
 
     <div class="block gray">
       <div class="inner">
-        <h2 class="b-title wow fadeInUp plan-title"
-            v-html="modules[3].form.title"></h2>
-        <p class="intro wow fadeInUp"
-           data-wow-delay="0.5s">{{ modules[3].form.des }}</p>
+        <h2 class="b-title wow fadeInUp plan-title" v-html="modules[3].form.title"></h2>
+        <p class="intro wow fadeInUp" data-wow-delay="0.5s">{{ modules[3].form.des }}</p>
         <ul class="plan">
           <li>
             <div class="left">
               <h6 v-html="modules[4].form.title"></h6>
-              <div class="text"
-                   v-html="modules[4].form.des"></div>
-              <a v-if="isLink(modules[4].form.link.linkName)"
-                 class="survey"
-                 @click="openLink(modules[4].form)">需求调研 ></a>
+              <div class="text" v-html="modules[4].form.des"></div>
+              <a v-if="isLink(modules[4].form.link.linkName)" class="survey" @click="openLink(modules[4].form)">需求调研
+                ></a>
             </div>
-            <img class="pic"
-                 :src="modules[4].form.pic"
-                 alt="">
+            <img class="pic" :src="modules[4].form.pic" alt="">
           </li>
           <li>
             <div class="left">
               <h6 v-html="modules[5].form.title"></h6>
-              <div class="text"
-                   v-html="modules[5].form.des"></div>
-              <a v-if="isLink(modules[5].form.link.linkName)"
-                 class="survey"
-                 @click="openLink(modules[5].form)">需求调研 ></a>
+              <div class="text" v-html="modules[5].form.des"></div>
+              <a v-if="isLink(modules[5].form.link.linkName)" class="survey" @click="openLink(modules[5].form)">需求调研
+                ></a>
             </div>
-            <img class="pic"
-                 :src="modules[5].form.pic"
-                 alt="">
+            <img class="pic" :src="modules[5].form.pic" alt="">
           </li>
         </ul>
       </div>
@@ -82,23 +60,14 @@
 
     <div class="block">
       <div class="inner">
-        <h2 class="b-title"
-            :class="{'wow fadeInUp': $store.getters.getModelType}"
-            v-html="modules[6].form.title"></h2>
-        <p class="intro wow fadeInUp"
-           data-wow-delay="0.5s">{{ modules[6].form.des }}</p>
+        <h2 class="b-title" :class="{ 'wow fadeInUp': $store.getters.getModelType }" v-html="modules[6].form.title"></h2>
+        <p class="intro wow fadeInUp" data-wow-delay="0.5s">{{ modules[6].form.des }}</p>
         <ul class="app">
-          <li v-for="(item, i) in modules[7].list"
-              :key="i"
-              :data-wow-delay="(0.2 * i).toFixed(1) + 's'"
-              :class="{'cursor-pointer': isLink(item.link.linkName),'wow fadeInDown': $store.getters.getModelType}"
-              @click="openLink(item)">
-            <img class="bg"
-                 :src="require('@/assets/images/industrial/app' + (i + 1) + '.png')"
-                 alt="">
-            <img class="icon"
-                 :src="require('@/assets/images/industrial/app' + (i + 1) + '-1.png')"
-                 alt="">
+          <li v-for="(item, i) in modules[7].list" :key="i" :data-wow-delay="(0.2 * i).toFixed(1) + 's'"
+            :class="{ 'cursor-pointer': isLink(item.link.linkName), 'wow fadeInDown': $store.getters.getModelType }"
+            @click="openLink(item)">
+            <img class="bg" :src="require('@/assets/images/industrial/app' + (i + 1) + '.png')" alt="">
+            <img class="icon" :src="require('@/assets/images/industrial/app' + (i + 1) + '-1.png')" alt="">
             <p class="text">{{ item.title }}</p>
           </li>
         </ul>
@@ -107,30 +76,20 @@
 
     <div class="block news-block">
       <div class="inner">
-        <h2 class="b-title"
-            :class="{'wow fadeInUp': $store.getters.getModelType}"
-            v-html="modules[8].form.title"></h2>
-        <p class="intro wow fadeInUp"
-           data-wow-delay="0.5s">{{ modules[8].form.des }}</p>
+        <h2 class="b-title" :class="{ 'wow fadeInUp': $store.getters.getModelType }" v-html="modules[8].form.title"></h2>
+        <p class="intro wow fadeInUp" data-wow-delay="0.5s">{{ modules[8].form.des }}</p>
         <ul class="news">
-          <li :class="{'wow fadeInDown': $store.getters.getModelType}"
-              :data-wow-delay="(0.2 * i).toFixed(1) + 's'"
-              v-for="(item, i) in articles"
-              :key="i"
-              @click="toArtice(item, modules[9].form)">
-            <img :src="item.titleImg"
-                 alt="">
+          <li :class="{ 'wow fadeInDown': $store.getters.getModelType }" :data-wow-delay="(0.2 * i).toFixed(1) + 's'"
+            v-for="(item, i) in articles" :key="i" @click="toArtice(item, modules[9].form)">
+            <img :src="item.titleImg" alt="">
             <div class="texts">
               <span class="meta">{{ item.releaseTime }}</span>
               <h6>{{ item.title }}</h6>
             </div>
           </li>
         </ul>
-        <div class="all-link"
-             @click="toAll(modules[9].form)">
-          <span>{{$t('column.all')}} <img class="icon"
-                 src="@/assets/images/arrow.png"
-                 alt=""></span>
+        <div class="all-link" @click="toAll(modules[9].form)">
+          <span>{{ $t('column.all') }} <img class="icon" src="@/assets/images/arrow.png" alt=""></span>
         </div>
       </div>
     </div>
@@ -187,264 +146,313 @@ export default {
 <style lang="scss" scoped>
 @import url(../../plugins/wow/animate.css);
 @import '../../styles/page/page.scss';
+
 .history {
-    h2 {
-        margin-bottom: 20px;
-        font-size: 1.8rem;
-        color: #333;
-    }
-    .texts {
-        display: flex;
-        justify-content: space-between;
-        padding: 30px 57px;
-        background-color: #fff;
-        border-radius: 100px 0px 0px 0px;
-        transition: 0.3s;
-        &:hover {
-            transform: scale(1.05);
-        }
-    }
-    .left {
-        width: 500px;
-        padding-right: 30px;
-    }
-    .text {
-        margin: 20px 0;
-        font-size: 1.2rem;
-        color: #181818;
-        line-height: 31px;
-        @include mul-ellipsis(10);
-    }
-    .bg {
-        width: 560px;
-        height: 500px;
-        margin: -122px -83px 0 0;
-        // object-fit: cover;
+  h2 {
+    margin-bottom: 20px;
+    font-size: 1.8rem;
+    color: #333;
+  }
+
+  .texts {
+    display: flex;
+    justify-content: space-between;
+    padding: 30px 57px;
+    background-color: #fff;
+    border-radius: 100px 0px 0px 0px;
+    transition: 0.3s;
+
+    &:hover {
+      transform: scale(1.05);
     }
+  }
+
+  .left {
+    width: 500px;
+    padding-right: 30px;
+  }
+
+  .text {
+    margin: 20px 0;
+    font-size: 1.2rem;
+    color: #181818;
+    line-height: 31px;
+    @include mul-ellipsis(10);
+  }
+
+  .bg {
+    width: 560px;
+    height: 500px;
+    margin: -122px -83px 0 0;
+    // object-fit: cover;
+  }
 }
+
 .land {
-    .inner {
-        display: flex;
-    }
-    .pic {
-        width: 50%;
-        height: 450px;
-        object-fit: cover;
+  .inner {
+    display: flex;
+  }
+
+  .pic {
+    width: 50%;
+    height: 450px;
+    object-fit: cover;
+  }
+
+  .right {
+    width: 50%;
+  }
+
+  h6 {
+    margin-left: 50px;
+    font-size: 1.3rem;
+    font-family: PingFangSC-Semibold, PingFang SC;
+    color: #333;
+    @include ellipsis();
+  }
+
+  .text {
+    height: 405px;
+    padding: 50px;
+    margin-top: 1rem;
+    background: rgba(242, 246, 248, 0.45);
+    border-radius: 0px 100px 0px 0px;
+  }
+}
+
+.plan {
+  li {
+    display: flex;
+    justify-content: space-between;
+    height: 433px;
+    margin-bottom: 60px;
+    color: #333;
+    background-color: #fff;
+    border-radius: 100px 0px 0px 0px;
+
+    &:nth-child(even) {
+      flex-direction: row-reverse;
+
+      .pic {
+        margin: -20px 0 0 -20px;
+        border-radius: 0 100px 0 0;
+      }
     }
-    .right {
-        width: 50%;
+
+    .left {
+      width: 50%;
+      padding: 50px;
     }
+
     h6 {
-        margin-left: 50px;
-        font-size: 1.3rem;
-        font-family: PingFangSC-Semibold, PingFang SC;
-        color: #333;
-        @include ellipsis();
+      font-size: 1.4rem;
+      font-family: PingFangSC-Medium, PingFang SC;
     }
+
     .text {
-        height: 405px;
-        padding: 50px;
-        margin-top: 1rem;
-        background: rgba(242, 246, 248, 0.45);
-        border-radius: 0px 100px 0px 0px;
+      margin: 14px 0 40px;
+      font-size: 1rem;
+      line-height: 1.6;
     }
-}
-.plan {
-    li {
-        display: flex;
-        justify-content: space-between;
-        height: 433px;
-        margin-bottom: 60px;
-        color: #333;
-        background-color: #fff;
-        border-radius: 100px 0px 0px 0px;
-        &:nth-child(even) {
-            flex-direction: row-reverse;
-            .pic {
-                margin: -20px 0 0 -20px;
-                border-radius: 0 100px 0 0;
-            }
-        }
-        .left {
-            width: 50%;
-            padding: 50px;
-        }
-        h6 {
-            font-size: 1.4rem;
-            font-family: PingFangSC-Medium, PingFang SC;
-        }
-        .text {
-            margin: 14px 0 40px;
-            font-size: 1rem;
-            line-height: 1.6;
-        }
-        .survey {
-            padding: 8px 15px;
-            font-size: 0.9rem;
-            color: #fff;
-            background-color: #1150ac;
-            cursor: pointer;
-            border-radius: 4px;
-        }
-        .pic {
-            width: 48%;
-            height: 423px;
-            margin: -20px -20px 0 0;
-            border-radius: 100px 0 0 0;
-            object-fit: cover;
-        }
+
+    .survey {
+      padding: 8px 15px;
+      font-size: 0.9rem;
+      color: #fff;
+      background-color: #1150ac;
+      cursor: pointer;
+      border-radius: 4px;
+    }
+
+    .pic {
+      width: 48%;
+      height: 423px;
+      margin: -20px -20px 0 0;
+      border-radius: 100px 0 0 0;
+      object-fit: cover;
     }
+  }
 }
 
 .app {
+  display: flex;
+  flex-wrap: wrap;
+
+  li {
+    position: relative;
     display: flex;
-    flex-wrap: wrap;
-    li {
-        position: relative;
-        display: flex;
-        flex-direction: column;
-        justify-content: center;
-        align-items: center;
-        width: calc((100% - 30px) / 4);
-        height: 200px;
-        margin: 0 10px 10px 0;
-        transition: 0.3s;
-        &:hover {
-            transform: scale(1.05);
-            .icon {
-                transform: rotateY(180deg);
-            }
-        }
-        &:nth-child(4n) {
-            margin-right: 0;
-        }
-    }
-    .bg {
-        position: absolute;
-        top: 0;
-        left: 0;
-        width: 100%;
-        height: 100%;
-        object-fit: cover;
-    }
-    .icon {
-        position: relative;
-        width: 62px;
-        transition: 0.5s;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+    width: calc((100% - 30px) / 4);
+    height: 200px;
+    margin: 0 10px 10px 0;
+    transition: 0.3s;
+
+    &:hover {
+      transform: scale(1.05);
+
+      .icon {
+        transform: rotateY(180deg);
+      }
     }
-    .text {
-        position: relative;
-        margin-top: 20px;
-        font-size: 32px;
-        color: #fff;
+
+    &:nth-child(4n) {
+      margin-right: 0;
     }
+  }
+
+  .bg {
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    object-fit: cover;
+  }
+
+  .icon {
+    position: relative;
+    width: 62px;
+    transition: 0.5s;
+  }
+
+  .text {
+    position: relative;
+    margin-top: 20px;
+    font-size: 32px;
+    color: #fff;
+  }
 }
+
 .news {
-    position: relative;
-    display: flex;
-    flex-wrap: wrap;
-    li {
-        width: calc((100% - 34px) / 3);
-        margin: 0 17px 20px 0;
-        background-color: #fff;
-        cursor: pointer;
-        &:nth-child(3n) {
-            margin-right: 0;
-        }
-    }
-    img {
-        width: 100%;
-        height: 220px;
-        object-fit: cover;
+  position: relative;
+  display: flex;
+  flex-wrap: wrap;
+
+  li {
+    width: calc((100% - 34px) / 3);
+    margin: 0 17px 20px 0;
+    background-color: #fff;
+    cursor: pointer;
+
+    &:nth-child(3n) {
+      margin-right: 0;
     }
+  }
+
+  img {
+    width: 100%;
+    height: 220px;
+    object-fit: cover;
+  }
+
+  .texts {
+    padding: 20px 24px;
+    background-color: #fff;
+  }
+
+  h6 {
+    margin-top: 8px;
+    font-size: 1rem;
+    color: #333;
+    text-shadow: 0px 0px 20px rgba(176, 176, 176, 0.21);
+  }
+
+  .meta {
+    font-size: 0.9rem;
+    color: #666;
+    text-shadow: 0px 0px 20px rgba(176, 176, 176, 0.21);
+  }
+}
+
+@media (max-width: 1200px) {
+  .history {
     .texts {
-        padding: 20px 24px;
-        background-color: #fff;
+      flex-direction: column;
     }
-    h6 {
-        margin-top: 8px;
-        font-size: 1rem;
-        color: #333;
-        text-shadow: 0px 0px 20px rgba(176, 176, 176, 0.21);
+
+    .left {
+      width: 100%;
     }
-    .meta {
-        font-size: 0.9rem;
-        color: #666;
-        text-shadow: 0px 0px 20px rgba(176, 176, 176, 0.21);
+
+    .bg {
+      width: 100%;
+      height: auto;
+      margin-top: 1rem;
     }
-}
+  }
 
-@media (max-width: 1200px) {
-    .history {
-        .texts {
-            flex-direction: column;
-        }
-        .left {
-            width: 100%;
-        }
-        .bg {
-            width: 100%;
-            height: auto;
-            margin-top: 1rem;
-        }
+  .land {
+    .inner {
+      flex-direction: column;
     }
-    .land {
-        .inner {
-            flex-direction: column;
-        }
-        .pic,
-        .right {
-            width: 100%;
-        }
-        h6 {
-            margin-left: 0;
-        }
-        .right {
-            margin-top: 1rem;
-        }
-        .text {
-            height: auto;
-        }
+
+    .pic,
+    .right {
+      width: 100%;
     }
-    .plan {
-        li {
-            flex-direction: column !important;
-            height: auto;
-            .left,
-            .pic {
-                width: 100%;
-            }
-            .pic {
-                margin: 1rem 0 0 !important;
-            }
-        }
+
+    h6 {
+      margin-left: 0;
     }
-    .app {
-        li {
-            width: calc((100% - 10px) / 2);
-            height: 267px;
-            &:nth-child(2n) {
-                margin-right: 0;
-            }
-        }
+
+    .right {
+      margin-top: 1rem;
     }
-    .news {
-        flex-direction: column;
-        li {
-            width: 100%;
-            margin: 0 0 20px 0;
-        }
+
+    .text {
+      height: auto;
+    }
+  }
+
+  .plan {
+    li {
+      flex-direction: column !important;
+      height: auto;
+
+      .left,
+      .pic {
+        width: 100%;
+      }
+
+      .pic {
+        margin: 1rem 0 0 !important;
+      }
+    }
+  }
+
+  .app {
+    li {
+      width: calc((100% - 10px) / 2);
+      height: 267px;
+
+      &:nth-child(2n) {
+        margin-right: 0;
+      }
+    }
+  }
+
+  .news {
+    flex-direction: column;
+
+    li {
+      width: 100%;
+      margin: 0 0 20px 0;
     }
+  }
 }
+
 @media (max-width: 780px) {
-    .app {
-        li {
-            width: 100%;
-            margin-right: 0;
-        }
-    }
-    .plan-title:after {
-        display: none;
+  .app {
+    li {
+      width: 100%;
+      margin-right: 0;
     }
+  }
+
+  .plan-title:after {
+    display: none;
+  }
 }
 </style>