修改自定义页面

4 months ago · a736fd9866
parent 022bf8dd66
commit a736fd9866
3 changed files with 314 additions and 15 deletions
--- a/src/views/index/classicCase1.vue
+++ b/src/views/index/classicCase1.vue
@ -0,0 +1,255 @@
+<template>
+  <div>
+    <div class="title">CLASSIC CASE</div>
+    <div class="subTitle">典型案例</div>
+    <div class="content">
+      <el-tabs v-model="activeName" @tab-click="handleClick">
+        <el-tab-pane :label="i.homeConfigTypeName" :name="`${i.configTypeId}`" v-for="(i,k) in list">
+          <transition name="fade">
+            <div v-if="activeName === `${i.configTypeId}`" style="position:relative;">
+              <div class="left">
+                <div class="caseTitle">{{ i.caseInfoTitle }}</div>
+                <div class="caseInfo">
+                  {{ i.caseInfoDesc }}
+                </div>
+                <div class="getCaseInfo" @click="getCaseInfo(i)">查看详情 >></div>
+              </div>
+              <div class="learnMore" @click="getCaseInfo(i)">
+                <span>
+                  想了解更多？
+                </span>
+                <div class="toRight">
+                  <i class="el-icon-arrow-right"></i>
+                </div>
+              </div>
+              <div class="caseImage">
+                <el-image
+                    style="width: 100%;height: 100%"
+                    :src="i.caseInfoPic"
+                    fit="contain"></el-image>
+              </div>
+            </div>
+          </transition>
+        </el-tab-pane>
+      </el-tabs>
+    </div>
+  </div>
+</template>
+
+<script>
+import banner from '@/assets/image/banner.png'
+import {getHomeCaseTitleList, getTypicalHomeCaseInfo} from "@/api";
+
+export default {
+  name: 'ProductCenter',
+  data() {
+    return {
+      banner,
+      activeName: "5",
+      list: [
+        {
+          configTypeId: 5,
+          homeConfigTypeName: '智能轮胎',
+          caseInfoTitle: '智能轮胎',
+          caseInfoDesc: '智能轮胎是一种基于人工智能技术的轮胎，它可以根据车辆的运行状态和环境条件，自动调整轮胎的性能和参数，以提高车辆的行驶安全性和燃油效率。',
+          caseInfoPic: ''
+        },
+        {
+          configTypeId: 18,
+          homeConfigTypeName: '轮胎工厂',
+          caseInfoTitle: '轮胎工厂',
+          caseInfoDesc: '智能轮胎是一种基于人工智能技术的轮胎，它可以根据车辆的运行状态和环境条件，自动调整轮胎的性能和参数，以提高车辆的行驶安全性和燃油效率。',
+          caseInfoPic: ''
+        },
+        {
+          configTypeId: 19,
+          homeConfigTypeName: '快递物流',
+          caseInfoTitle: '快递物流',
+          caseInfoDesc: '智能轮胎是一种基于人工智能技术的轮胎，它可以根据车辆的运行状态和环境条件，自动调整轮胎的性能和参数，以提高车辆的行驶安全性和燃油效率。',
+          caseInfoPic: ''
+        },
+        {
+          configTypeId: 20,
+          homeConfigTypeName: '畜牧食品',
+          caseInfoTitle: '畜牧食品',
+          caseInfoDesc: '智能轮胎是一种基于人工智能技术的轮胎，它可以根据车辆的运行状态和环境条件，自动调整轮胎的性能和参数，以提高车辆的行驶安全性和燃油效率。',
+          caseInfoPic: ''
+        },
+        {
+          configTypeId: 21,
+          homeConfigTypeName: '新能源',
+          caseInfoTitle: '新能源',
+          caseInfoDesc: '智能轮胎是一种基于人工智能技术的轮胎，它可以根据车辆的运行状态和环境条件，自动调整轮胎的性能和参数，以提高车辆的行驶安全性和燃油效率。',
+          caseInfoPic: ''
+        },
+        {
+          configTypeId: 22,
+          homeConfigTypeName: '智能制造',
+          caseInfoTitle: '智能制造',
+          caseInfoDesc: '智能轮胎是一种基于人工智能技术的轮胎，它可以根据车辆的运行状态和环境条件，自动调整轮胎的性能和参数，以提高车辆的行驶安全性和燃油效率。',
+          caseInfoPic: ''
+        },
+        {
+          configTypeId: 23,
+          homeConfigTypeName: '工业物联',
+          caseInfoTitle: '工业物联',
+          caseInfoDesc: '智能轮胎是一种基于人工智能技术的轮胎，它可以根据车辆的运行状态和环境条件，自动调整轮胎的性能和参数，以提高车辆的行驶安全性和燃油效率。',
+          caseInfoPic: ''
+        },
+      ],
+      info: {}
+    }
+  },
+  mounted() {
+    this.getData()
+  },
+  methods: {
+    getData() {
+    },
+    handleClick(tab, event) {
+      getTypicalHomeCaseInfo({
+        configTypeId: parseFloat(tab.name)
+      }).then(e => {
+        this.info = e.data
+      })
+    },
+    getCaseInfo(e) {
+      this.$router.push("test?id=" + e.configTypeId)
+    },
+    learnMore() {
+
+    }
+  }
+}
+</script>
+
+<style lang="less" scoped>
+@import "~@/style.less";
+
+
+.content {
+  width: 65vw;
+  margin: 2.1vw auto 0;
+
+  /deep/ .el-tabs__nav-wrap::after {
+    display: none;
+  }
+
+  /deep/ .el-tabs__item {
+    letter-spacing: 3px;
+    padding: 0 30px;
+    height: 2.9vw;
+    font-size: 1.6vw;
+  }
+
+  /deep/ .el-tabs__item.is-active {
+    font-weight: 600;
+    color: @standard-color;
+  }
+
+  /deep/ .el-tabs__active-bar {
+    height: 4px;
+    background-color: @standard-color;
+  }
+}
+
+.title {
+  margin-top: 4.2vw;
+  width: 100%;
+  text-align: center;
+  font-size: 2.5vw;
+  letter-spacing: 2px;
+  color: #0003;
+}
+
+.subTitle {
+  margin-top: 0.4vw;
+  width: 100%;
+  text-align: center;
+  font-size: 1.9vw;
+  letter-spacing: 2px;
+  color: #000;
+}
+
+.left {
+  width: 52%;
+  padding-top: 1.7vw;
+  word-break: break-all;
+
+  .caseTitle {
+    color: #000;
+    font-size: 1.5vw;
+    text-align: left;
+    letter-spacing: 2px;
+  }
+
+  .caseInfo {
+    font-size: 1.1vw;
+    color: #666;
+    text-align: left;
+    margin-top: 0.9vw;
+    line-height: 1.78vw;
+    letter-spacing: 2px;
+  }
+
+  .getCaseInfo {
+    color: @standard-color;
+    font-size: 1.2vw;
+    margin-top: 1vw;
+    text-align: left;
+    letter-spacing: 2px;
+    cursor: pointer;
+  }
+}
+
+.learnMore {
+  width: 100%;
+  height: 4.7vw;
+  line-height: 4.7vw;
+  font-size: 1.1vw;
+  background-color: #3372ff;
+  text-align: left;
+  padding-left: 6vw;
+  color: #fefefe;
+  margin-top: 1.1vw;
+  letter-spacing: 2px;
+  cursor: pointer;
+
+  .toRight {
+    display: inline-block;
+    width: 2vw;
+    height: 2vw;
+    border: 1px solid #eee;
+    border-radius: 50%;
+    text-align: center;
+    line-height: 2vw;
+    font-size: 1.2vw;
+    margin-left: 3vw;
+    transition: all 1s;
+  }
+}
+
+.learnMore:hover {
+  .toRight {
+    margin-left: 4vw;
+  }
+}
+
+.caseImage {
+  position: absolute;
+  bottom: 0;
+  left: 55%;
+  width: 45%;
+  height: 100%;
+}
+
+.fade-enter-active {
+  animation: fadeInRight;
+  animation-duration: 0.5s;
+}
+
+.fade-leave-active {
+  animation: fadeOutLeft;
+  animation-duration: 0.5s;
+}
+</style>
--- a/src/views/index/index.vue
+++ b/src/views/index/index.vue
@ -12,7 +12,7 @@
 <script>
 import Carousel from './carousel'
 import ProductCenter from './productCenter'
-import ClassicCase from './classicCase'
+import ClassicCase from './classicCase1'
 import NewsCenter from './newsCenter'
 import ContactUs from './contactUs'
 import Copyright from '@/components/copyright'
--- a/src/views/index/productCenter.vue
+++ b/src/views/index/productCenter.vue
@ -3,12 +3,14 @@
    <div class="title">PRODUCT CENTER</div>
    <div class="subTitle">产品中心</div>
    <div class="productList">
-      <div v-for="i in productList" class="productItem" @click="toLink(i)">
+      <template v-for="(i,k) in productList">
+
+        <div class="productItem" @click="toLink(i)">
        <div class="imageArea">
          <el-image
-            style="width: 100%;height: 100%"
-            :src="i.homeConfigTypePic"
-            fit="contain"></el-image>
+              style="width: 100%;height: 100%"
+              :src="i.homeConfigTypePic"
+              fit="contain"></el-image>
        </div>
        <div class="imageAreaModel">
          <span>
@ -20,7 +22,10 @@
            {{ i.homeConfigTypeName }}
          </span>
        </div>
+
      </div>
+        <br v-if="k === 3"/>
+      </template>
    </div>
  </div>
 </template>
@ -33,7 +38,45 @@ export default {
  name: 'ProductCenter',
  data() {
    return {
-      productList:[]
+      productList: [
+        {
+          homeConfigTypePic: '',
+          configTypeId: '11',
+          homeConfigTypeName: '轮胎RFID',
+          configTypeDesc: '轮胎RFID是一种基于RFID技术的轮胎识别系统，它可以通过RFID标签读取轮胎的信息，实现轮胎的识别、定位、监控等功能。',
+        },
+        {
+          homeConfigTypePic: '',
+          configTypeId: '12',
+          homeConfigTypeName: '超高频RFID',
+          configTypeDesc: '轮胎RFID是一种基于RFID技术的轮胎识别系统，它可以通过RFID标签读取轮胎的信息，实现轮胎的识别、定位、监控等功能。',
+        },
+        {
+          homeConfigTypePic: '',
+          configTypeId: '13',
+          homeConfigTypeName: '高频RFID',
+          configTypeDesc: '轮胎RFID是一种基于RFID技术的轮胎识别系统，它可以通过RFID标签读取轮胎的信息，实现轮胎的识别、定位、监控等功能。',
+        },
+        {
+          homeConfigTypePic: '',
+          configTypeId: '14',
+          homeConfigTypeName: '传感器',
+          configTypeDesc: '轮胎RFID是一种基于RFID技术的轮胎识别系统，它可以通过RFID标签读取轮胎的信息，实现轮胎的识别、定位、监控等功能。',
+        },
+        {
+          homeConfigTypePic: '',
+          configTypeId: '15',
+          homeConfigTypeName: '物联终端',
+          configTypeDesc: '轮胎RFID是一种基于RFID技术的轮胎识别系统，它可以通过RFID标签读取轮胎的信息，实现轮胎的识别、定位、监控等功能。',
+        },
+        {
+          homeConfigTypePic: '',
+          configTypeId: '16',
+          homeConfigTypeName: '工业软件',
+          configTypeDesc: '轮胎RFID是一种基于RFID技术的轮胎识别系统，它可以通过RFID标签读取轮胎的信息，实现轮胎的识别、定位、监控等功能。',
+        },
+
+      ]
    }
  },
  mounted(){
@ -41,18 +84,18 @@ export default {
  },
  methods:{
    toLink(e){
-      this.$router.push('/productCenter?id=' + e.configTypeId)
+      this.$router.push('/productCenter#item' + e.configTypeId)
      console.log(e.configTypeId)
    },
    getData(){
-      getPortalConfigTypeList({
-        configTypeClassfication:1,
-        parentId:0,
-        pageNum:1,
-        pageSize:111
-      }).then(e=>{
-        this.productList = e.rows
-      })
+      // getPortalConfigTypeList({
+      //   configTypeClassfication:1,
+      //   parentId:0,
+      //   pageNum:1,
+      //   pageSize:111
+      // }).then(e=>{
+      //   this.productList = e.rows
+      // })
    }
  }
 }
@ -90,6 +133,7 @@ export default {
    margin: 0 1vw;
    box-shadow: 0 0 10px #0003;
    position: relative;
+    margin-top: 2vw;

    .imageArea {
      width: 12.5vw;