fx66/src/components/rhombusBlock.vue

<template>
    <div class="rhombus-container">
      <div class="rev-rhombus-container">
        <i class="iconfont icon" v-html="infoData.icon"></i>
      </div>
      <div class="rhombus-mask">
        <div class="rev-rhombus-mask">
          <p class="line">{{infoData.line1}}</p>
          <p class="line">{{infoData.line2}}</p>
        </div>
      </div>
    </div>
</template>

<script>
    export default {
      name: "rhombusBlock",
      props:['infoData']
    }
</script>

<style scoped lang="less">
  .rhombus-container{
    margin: 35px;
    position: relative;
    transform-origin: center;
    width: 176px;
    height: 176px;
    transform: rotate(45deg);
    background-color: white;
    & .rhombus-mask{
      position: relative;
      width: 176px;
      height: 176px;
      background-color: rgba(26, 111, 166, 0.95);
      display: none;
      z-index: 5;
      & .rev-rhombus-mask{
        width: 100%;
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%,-50%) rotate(-45deg);
        & .line{


          font-size: 15px;
          color: #ffffff;

        }
      }

    }

    &:hover{
      .rhombus-mask{
        display: block;

      }
    }

    & .rev-rhombus-container{
      & .icon{
        color: #2580bb;
        font-size: 73px;
      }

      position: absolute;
      transform-origin: center;
      /*transform: rotate(-45deg);*/
      left: 50%;
      top: 50%;
      transform: translate(-50%,-50%) rotate(-45deg);
      z-index: 1;

    }
  }

</style>