Fx66/src/components/AddBox.vue

<template>
  <div class="addbox-ctnr">
    <ul class="clearfix">
      <li v-for="(item,index) in adds" @mouseenter="addbtnShow(index)" @mouseleave="addbtnShow()">
        <h4>{{item.msg[0]}}</h4>
        <h5>{{item.msg[1]}}</h5>
        <p>{{item.msg[2]}}</p>
        <img :src="item.url">
        <div class="add-btn" v-show="state===index">
          <span>{{item.msg[3]}}</span>
          <i class="el-icon-arrow-right"></i>
        </div>
      </li>
    </ul>
  </div>
</template>
<script>
  export default{
    data(){
      return{
        state:"",
        adds:[
          {
            id:1,
            url:require("../assets/img/add01.png"),
            msg:["超高返佣",
                  "High commission",
                  "推荐FX66给他人，可以获取被推荐人等比例的交易手续费作为佣金",
                  "立即申请经纪商"]
          },
          {
            id:2,
            url:require("../assets/img/add02.png"),
            msg:["VIP奖励",
                  "VIP rewards",
                  "每个经纪商都会有相应的业绩排名，凡是每个月业绩排名靠前者，均可以得到我们平台的VIP级别奖励。",
                  "立即申请经纪商"]
          },
          {
            id:3,
            url:require("../assets/img/add03.png"),
            msg:["市场支持",
                  "Marketing support",
                  "FX66经纪商可以使用我们所可以提供的全部交易工具和交易资源，并且会在市场宣传方面给予相应的支持！",
                  "立即申请经纪商"]
          },
          {
            id:4,
            url:require("../assets/img/add04.png"),
            msg:["技术支持",
                  "Technical support",
                  "我们拥有强大的技术开发团队，可以制定符合客户营销特点的网站，只收成本费。",
                  "立即申请经纪商"]
          },
        ]
      }
    },
    methods:{
      addbtnShow(val){
        this.state = val;
      }
    }
  }
</script>
<style scoped>
  .addbox-ctnr{
    ul{
      li{
        text-align: left;
        background-color: #fff;
        padding: 32px 0 0 20px;
        border: 1px solid #eee;
        width: 430px;
        height: 250px;
        position: relative;
        float: left;
        margin-top: 80px;
        &:nth-child(odd){
          margin-right: 200px;
        }
        &:hover{
          border:1px solid var(--text-color-active);
          border-left: 3px solid var(--text-color-active);
        }
        h4{
          font-size: 25px;
          font-weight: 700;
          line-height: 1;
        }
        h5{
          margin:10px 0 40px 0;
          font-size: 20px;
          line-height: 1;
          font-weight: 500;
          color: #999;
        }
        p{
          width: 255px;
          font-size: 15px;
        }
        img{
          position: absolute;
          top: 20px;
          width: 270px;
          right: -135px;
        }
        .add-btn{
          position: absolute;
          height: 45px;
          width: 170px;
          bottom: -22px;
          background-color: #1a6fa6;
          color: #fff;
          padding-left: 18px;
          cursor: pointer;
          font-size: 15px;
          span{
            line-height: 45px;
          }
          i{
            width: 45px;
            height: 45px;
            line-height: 45px;
            text-align: center;
            background-color: #2580bb;
            position: absolute;
            top: 0;
            right: 0;
          }
        }
      }
    }
  }
</style>