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="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">{{ info.caseInfoTitle }}</div>
                <div class="caseInfo">
                  {{info.caseInfoDesc}}
                </div>
                <div class="getCaseInfo" @click="getCaseInfo(info)">查看详情 >></div>
              </div>
              <div class="learnMore" @click="getCaseInfo(info)">
                <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="info.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: 0,
      list:[],
      info:{}
    }
  },
  mounted(){
    this.getData()
  },
  methods: {
    getData(){
      getHomeCaseTitleList({
        configTypeClassfication:2,
        parentId:0,
        pageNum:1,
        pageSize:111
      }).then(e=>{
        this.list = e.rows
        this.activeName = `${e.rows?.[0]?.configTypeId}`
        getTypicalHomeCaseInfo({
          configTypeId:parseFloat(e.rows?.[0]?.configTypeId)
        }).then(e=>{
          this.info = e.data
        })
      })
    },
    handleClick(tab, event) {
      getTypicalHomeCaseInfo({
        configTypeId:parseFloat(tab.name)
      }).then(e=>{
        this.info = e.data
      })
    },
    getCaseInfo(e) {
      // console.log(e)
      this.$router.push("casesAndClients/more?id="+e.caseInfoId)
    },
    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>