portal_website/src/views/index/classicCase.vue

<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="物联网" name="1">
          <transition name="fade">
            <div v-if="activeName === '1'" style="position:relative;">
              <div class="left">
                <div class="caseTitle">智慧变电站</div>
                <div class="caseInfo">
                  针对变配电场景下高压场/GIS组合电器、变压器、电容电抗蛋、避雷器、高压开关柜、隔离开关等电气设备采用不同的手段进行监测，系统可对实时监测的数据进行智能化多维度分析和诊断，评估设备运行状态，捕捉设备运行中的异常。通过对采集的设备图像、温度、环境参数等进行分析，使用户可以随时了解设备的运行状态、设备缺陷信息、变电站整体系统运行状态信息等，为管理者提供决策，提高管理水平。
                </div>
                <div class="getCaseInfo" @click="getCaseInfo">查看详情 >></div>
              </div>
              <div class="learnMore" @click="learnMore">
                <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="banner"
                  fit="contain"></el-image>
              </div>
            </div>
          </transition>
        </el-tab-pane>
        <el-tab-pane label="制造中心" name="2">
          <transition name="fade">
            <div v-if="activeName === '2'" style="position:relative;">
              <div class="left">
                <div class="caseTitle">智慧变电站</div>
                <div class="caseInfo">
                  针对变配电场景下高压场/GIS组合电器、变压器、电容电抗蛋、避雷器、高压开关柜、隔离开关等电气设备采用不同的手段进行监测，系统可对实时监测的数据进行智能化多维度分析和诊断，评估设备运行状态，捕捉设备运行中的异常。通过对采集的设备图像、温度、环境参数等进行分析，使用户可以随时了解设备的运行状态、设备缺陷信息、变电站整体系统运行状态信息等，为管理者提供决策，提高管理水平。
                </div>
                <div class="getCaseInfo" @click="getCaseInfo">查看详情 >></div>
              </div>
              <div class="learnMore" @click="learnMore">
                <span>
                  想了解更多？
                </span>
                <div class="toRight">
                  <i class="el-icon-arrow-right"></i>
                </div>
              </div>
            </div>
          </transition>
        </el-tab-pane>
        <el-tab-pane label="快递物流" name="3">
          <transition name="fade">
            <div v-if="activeName === '3'" style="position:relative;">
              <div class="left">
                <div class="caseTitle">智慧变电站</div>
                <div class="caseInfo">
                  针对变配电场景下高压场/GIS组合电器、变压器、电容电抗蛋、避雷器、高压开关柜、隔离开关等电气设备采用不同的手段进行监测，系统可对实时监测的数据进行智能化多维度分析和诊断，评估设备运行状态，捕捉设备运行中的异常。通过对采集的设备图像、温度、环境参数等进行分析，使用户可以随时了解设备的运行状态、设备缺陷信息、变电站整体系统运行状态信息等，为管理者提供决策，提高管理水平。
                </div>
                <div class="getCaseInfo" @click="getCaseInfo">查看详情 >></div>
              </div>
              <div class="learnMore" @click="learnMore">
                <span>
                  想了解更多？
                </span>
                <div class="toRight">
                  <i class="el-icon-arrow-right"></i>
                </div>
              </div>
            </div>
          </transition>
        </el-tab-pane>
      </el-tabs>
    </div>
  </div>
</template>

<script>
import banner from '@/assets/image/banner.png'

export default {
  name: 'ProductCenter',
  data() {
    return {
      banner,
      activeName: '1'
    }
  },
  methods: {
    handleClick(tab, event) {
      console.log(tab, event);
    },
    getCaseInfo() {

    },
    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>