<template>
  <div>
    <div class="title">PRODUCT CENTER</div>
    <div class="subTitle">产品中心</div>
    <div class="productList">
      <div v-for="i in productList" class="productItem" @click="toLink(i)">
        <div class="imageArea">
          <el-image
            style="width: 100%;height: 100%"
            :src="i.homeConfigTypePic"
            fit="contain"></el-image>
        </div>
        <div class="imageAreaModel">
          <span>
            {{ i.configTypeDesc }}
          </span>
        </div>
        <div class="titleArea">
          <span>
            {{ i.homeConfigTypeName }}
          </span>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import banner from '@/assets/image/banner.png'
import {getPortalConfigTypeList} from "@/api";

export default {
  name: 'ProductCenter',
  data() {
    return {
      productList:[]
    }
  },
  mounted(){
    this.getData()
  },
  methods:{

    toLink(e){
      this.$router.push('/productCenter/industrialInternet?portalConfigTypeId='+e.configTypeId)
      console.log(e.configTypeId)
    },
    getData(){
      getPortalConfigTypeList({
        configTypeClassfication:1,
        parentId:0,
        pageNum:1,
        pageSize:111
      }).then(e=>{
        console.log(e)
        this.productList = e.rows
      })
    }
  }
}
</script>

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

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

.productList {
  position: relative;
  margin-top: 4vw;

  .productItem {
    display: inline-block;
    width: 14.5vw;
    height: 22vw;
    margin: 0 1vw;
    box-shadow: 0 0 10px #0003;
    position: relative;

    .imageArea {
      width: 12.5vw;
      height: 12.5vw;
      padding: 1vw;
      position: relative;
      background-color: #fff;
    }

    .imageAreaModel {
      position: absolute;
      width: 14.5vw;
      height: 14.5vw;
      top: 0;
      left: 0;
      opacity: 0;
      background-image: radial-gradient(transparent 1px, fade(@standard-color, 80) 1px);
      backdrop-filter: saturate(50%) blur(4px);
      transition: all 0.3s;

      span {
        display: inline-block;
        width: 10vw;
        height: 10vw;
        padding: 2.25vw;
        color: #fefefe;
        font-size: 0.9vw;
        line-height: 1.7vw;
      }
    }

    .titleArea {
      width: 100%;
      height: calc(100% - 14.5vw);
      text-align: center;
      background-color: #d8eaff;
      transition: all 0.2s;
      position: relative;

      &::after {
        transition: all 0.2s;
        position: absolute;
        top: 0%;
        left: 50%;
        transform: translateX(-50%);
        content: "";
        border: 1vw solid #0000;
        border-top-color: #fff;
      }

      span {
        transition: all 0.2s;
        display: grid;
        place-items: center;
        height: 100%;
        font-size: 1.4vw;
        letter-spacing: 2px;
        color: @standard-color;
      }
    }
  }

  .productItem:hover {


    .imageAreaModel {
      opacity: 1;
    }

    .titleArea {
      background-color: @standard-color;

      &::after {
        border-top-color: #5c8eff;
      }

      span {
        color: #fefefe;
      }
    }
  }
}
</style>
