portal_website/src/views/casesAndClients/IOT/more.vue

<template>
  <div>
    <div class="banner">
      <el-image
        style="width: 100%; height: 100%;position:absolute;top: 0;left: 0;"
        :src="banner"
        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>
    <ContactUs class="contactUs"/>
    <Copyright class="copyright"/>
  </div>
</template>

<script>
import banner from '@/assets/image/banner.png'
import ContactUs from '@/components/contactUs'
import Copyright from '@/components/copyright'
import {getCaseCenterCaseInfos, getPortalConfigTypeList} from "@/api/casesAndClients";

export default {
  name: 'IOT',
  components: {
    ContactUs,
    Copyright
  },
  data() {
    return {
      banner,
      tabsList: [],
      tabsActive: 0,
      contentList: [],
      configTypeId: 0,
    }
  },
  watch: {
    '$route'() {
      this.getData()
    }
  },
  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)
      })
    }
  }
}
</script>

<style lang="less" scoped>
@import "~@/style.less";

.banner {
  width: 100%;
  height: 35.5vw;
  position: relative;

  .bannerInfo {
    position: absolute;
    top: 35%;
    left: 19%;
    width: 45%;
    text-align: left;
    font-size: 1.4vw;
    color: @standard-color;
    line-height: 2.5vw;
    letter-spacing: 4px;
    word-break: break-all;
  }

  .bannerBtn {
    position: absolute;
    top: 58%;
    left: 19%;
    width: 11.5vw;
    font-size: 1.2vw;
    line-height: 2vw;
    letter-spacing: 2px;
  }

  .tabs {
    position: absolute;
    bottom: 0;
    width: 100%;
    background: linear-gradient(to bottom, fade(@standard-color, 10), fade(#fff, 10));
    backdrop-filter: saturate(50%) blur(4px);

    .content {
      width: 62%;
      position: relative;
      left: 50%;
      bottom: 0;
      transform: translateX(-50%);

      .tab {
        display: inline-block;
        width: 33%;
        line-height: 6.2vw;
        font-size: 1.6vw;
        letter-spacing: 3px;
      }

      .tab.active {
        color: @standard-color;
        width: calc(33% - 2px);
        border: 1px solid #fff;
        box-shadow: 0 0 3px #0002;
      }
    }
  }
}

.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;
    }
  }
}

.contactUs {
  width: 100%;
  background-color: #2e445c;
}

.copyright {
  width: 100%;
  background-color: #1d3348;
}
</style>