fx66/src/components/joinGainBlock.vue

<template>
  <div class="jg-block-container">
    <div class="text-container">
      <h1 class="title">{{joinGainInfoData.title}}</h1>
      <h2 class="eng-title">{{joinGainInfoData.engTitle}}</h2>
      <p class="description">{{joinGainInfoData.description}}</p>
      <div class="multi-color-btn">
        <span class="main">立即加入代理</span>
        <span class="sub">></span>

      </div>
      <img :src="joinGainInfoData.imgUrl" class="img-container"/>
    </div>

  </div>
</template>

<script>
    export default {
      name: "joinGainBlock",
      props:{joinGainInfoData:{
          default:()=>{
            return {
              title:'',
              engTitle:'',
              description:'',
              imgUrl:require('../assets/add01.png')
            }

          }
        }}
    }
</script>

<style scoped lang="less">
  @import "../assets/less/_variable.less";
  .jg-block-container{
    box-sizing: border-box;

    &:hover{
      & .text-container{
        & .multi-color-btn{
          display: block;
        }
        & .title,
        & .description{
          color: @primaryBlue;
        }
        border: solid 1px @primaryBlue;
        border-left: solid 2px @primaryBlue;

      }
    }
    & .text-container{
      position: relative;
      border: solid 1px #eeeeee;
      width: 430px;
      height: 250px;
      background-color: white;
      & .title{
        text-align: left;
        margin: 33px 0 0 20px;
        font-size: 25px;
        line-height: 1;
        color:@lightBlack;

      }
      & .eng-title{
        text-align: left;
        margin: 10px 0 0 20px;
        line-height: 1;
        color:@lighterBlack;
        font-size: 20px;
      }
      & .description{
        text-align: left;
        margin: 40px 150px 0 20px;
        line-height: 1;
        font-size: 15px;
        color: @lightBlack;
      }

      & .img-container{
        position: absolute;
        width: 270px;
        height: 210px;
        top: 50%;
        left: 100%;
        transform: translate(-50%,-50%);

      }
      & .multi-color-btn{
        cursor: pointer;
        display: none;
        position: absolute;
        color:white;
        background-color: @primaryBlue;
        line-height: 45px;
        left: 20px;
        top: 100%;
        transform: translateY(-50%);
        width: 170px;
        height: 45px;
        & .sub{
          width: 45px;
          float: right;
          background-color: #2580bb;
        }
      }
    }

  }

</style>