修改显示

src/router/index.js

@@ -35,6 +35,10 @@ export default new Router({
           path: '/contactUs',
           component: () => import('@/views/contactUs/index.vue'),
         },
+        {
+          path: 'casesAndClients/more',
+          component: () => import('@/views/casesAndClients/IOT/more.vue'),
+        },
       ]
     },
   ]

src/views/casesAndClients/IOT/more.vue

@@ -7,56 +7,9 @@
         fit="contain"></el-image>
       <div class="bannerInfo">青岛海威物联科技有限公司，致力于工业物联网软硬件系统研发、生产和销售，提供感知互联的工业化联网整体解决方案。</div>
       <el-button type="primary" class="bannerBtn">免费体验</el-button>
-      <div class="tabs">
-        <div class="content">
-          <div v-for="(i,k) in tabsList" @click="checkTabs(i,k)" :class="`tab ${tabsActive === k ? 'active':''}`"
-               :style="`width:${tabsActive === k ? `calc(${100/tabsList.length}% - 3px)`:`${100/tabsList.length}%`}`">
-            {{ i.configTypeName }}
-          </div>
-        </div>
-      </div>
     </div>
-    <div class="list">
-      <div v-for="(i,k) in contentList">
-        <div v-if="k%2 === 1" class="item1">
-          <div class="left">
-            <div class="itemTitle">{{ i.caseInfoTitle }}</div>
-            <div class="itemInfo">
-              {{ i.caseInfoDesc }}
-            </div>
-          </div>
-          <div class="right">
-            <el-image
-              style="width: 100%; height: 100%;"
-              :src="i.caseInfoPic"
-              fit="contain"></el-image>
-          </div>
-          <div class="view">
-          <span>
-            查看详情
-          </span>
-          </div>
-        </div>
-        <div v-if="k%2 === 0" class="item2">
-          <div class="left">
-            <el-image
-              style="width: 100%; height: 100%;"
-              :src="banner"
-              fit="contain"></el-image>
-          </div>
-          <div class="right">
-            <div class="itemTitle">智慧变电站</div>
-            <div class="itemInfo">
-              针对变配电场景下高压场/GIS组合电器、变压器、电容电抗蛋、避雷器、高压开关柜、隔离开关等电气设备采用不同的手段进行监测，系统可对实时监测的数据进行智能化多维度分机和诊断，评估设备运行状态，捕捉设备运行中的异常。通过对采集的设备图像、温度、环境参数等进行分析，使用户可以
-            </div>
-          </div>
-          <div class="view">
-          <span>
-            查看详情
-          </span>
-          </div>
-        </div>
-      </div>
+    <div class="info">
+      <div v-html="info"></div>
     </div>
     <ContactUs class="contactUs"/>
     <Copyright class="copyright"/>
@@ -68,6 +21,7 @@ import banner from '@/assets/image/banner.png'
 import ContactUs from '@/components/contactUs'
 import Copyright from '@/components/copyright'
 import {getCaseCenterCaseInfos, getPortalConfigTypeList} from "@/api/casesAndClients";
+import {getTypicalHomeCaseInfo} from "@/api";
 
 export default {
   name: 'IOT',
@@ -78,43 +32,20 @@ export default {
   data() {
     return {
       banner,
-      tabsList: [],
-      tabsActive: 0,
-      contentList: [],
-      configTypeId: 0,
-    }
-  },
-  watch: {
-    '$route'() {
-      this.getData()
+      info:''
     }
   },
   mounted() {
     this.getData()
   },
   methods: {
-    checkTabs(i, k) {
-      this.tabsActive = k
-      this.configTypeId = i.configTypeId
-      this.getContentList(i.configTypeId)
-    },
-    getContentList(id) {
-      getCaseCenterCaseInfos({
-        configTypeId: id
-      }).then(e => {
-        this.contentList = e.data.sort((a, b) => a.productInfoOrder - b.productInfoOrder)
-        console.log(this.contentList)
-      })
-    },
     getData() {
-      getPortalConfigTypeList({
-        parentId: this.$route.query.portalConfigTypeId,
-        pageNum: 1,
-        pageSize: 10
-      }).then(e => {
-        this.tabsList = e.rows
-        this.configTypeId = e.rows?.[0]?.configTypeId
-        this.getContentList(e.rows?.[0]?.configTypeId)
+
+      getTypicalHomeCaseInfo({
+        configTypeId:parseFloat(this.$route.query.configTypeId ||'')
+      }).then(v=>{
+        this.info = v.caseInfoHtml
+        console.log(v)
       })
     }
   }
@@ -184,100 +115,9 @@ export default {
   }
 }
 
-.list {
-  width: 62vw;
-  margin: 0 auto 5vw auto;
-
-  .item1 {
-    text-align: left;
-    margin-top: 5vw;
-    height: 18vw;
-    position: relative;
-
-    .left {
-      display: inline-block;
-      width: 55%;
-
-      .itemTitle {
-        font-size: 1.6vw;
-        color: #000;
-        letter-spacing: 2px;
-      }
-
-      .itemInfo {
-        margin-top: 0.9vw;
-        font-size: 1.1vw;
-        line-height: 1.75vw;
-        color: #0006;
-        letter-spacing: 2.7px;
-      }
-    }
-
-    .right {
-      display: inline-block;
-      width: 41%;
-      margin-left: 4%;
-    }
-
-    .view {
-      position: absolute;
-      bottom: 0;
-      left: 0;
-      width: calc(100% - 3vw);
-      height: 3.7vw;
-      line-height: 3.7vw;
-      padding-left: 3vw;
-      font-size: 1.2vw;
-      color: #fff;
-      background-color: #3372ff;
-    }
-  }
-
-  .item2 {
-    text-align: left;
-    margin-top: 5vw;
-    height: 18vw;
-    position: relative;
-
-    .left {
-      display: inline-block;
-      width: 41%;
-      margin-right: 4%;
-    }
-
-    .right {
-
-      display: inline-block;
-      width: 55%;
-
-      .itemTitle {
-        font-size: 1.6vw;
-        color: #000;
-        letter-spacing: 2px;
-      }
-
-      .itemInfo {
-        margin-top: 0.9vw;
-        font-size: 1.1vw;
-        line-height: 1.75vw;
-        color: #0006;
-        letter-spacing: 2.7px;
-      }
-    }
-
-    .view {
-      position: absolute;
-      bottom: 0;
-      left: 0;
-      width: calc(100% - 3vw);
-      height: 3.7vw;
-      line-height: 3.7vw;
-      padding-left: 3vw;
-      font-size: 1.2vw;
-      color: #fff;
-      background-color: #3372ff;
-    }
-  }
+.info{
+  width: 60vw;
+  margin: 0 auto;
 }
 
 .contactUs {

src/views/index/classicCase.vue

@@ -12,7 +12,7 @@
                 <div class="caseInfo">
                   {{info.caseInfoDesc}}
                 </div>
-                <div class="getCaseInfo" @click="getCaseInfo">查看详情 >></div>
+                <div class="getCaseInfo" @click="getCaseInfo(i)">查看详情 >></div>
               </div>
               <div class="learnMore" @click="learnMore">
                 <span>
@@ -77,8 +77,8 @@ export default {
         this.info = e.data
       })
     },
-    getCaseInfo() {
-
+    getCaseInfo(e) {
+      this.$router.push("casesAndClients/more?id="+e.configTypeId)
     },
     learnMore() {