fx66/src/components/Addus.vue

<template>
  <div>
    <div class="add-box">
    <div class="wrap">
      <div class="title">
        <hr/>
        <h3>加入我们，可以获得</h3>
        <hr/>
      </div>
      <h4 class="subtitle">To join our agent you will gain the following advantages</h4>
      <div class="content-box">
        <div class="adv-line">
          <div :class="{'adv-line-item':1,'hoverClass':hoverNum===index}" v-for="(item,index) in items" :key="index" @mouseover="overShow(index)" @mouseout="outHide(index)">
            <h4>{{item.title}}</h4>
            <h5>{{item.enTitle}}</h5>
            <p>{{item.intro}}</p>
            <img :src="src+(index+1)+'.png'" alt="">
            <div class="apply-btn" v-show="hoverNum===index">立即申请经纪商 <span><i class="iconfont icon-jiantou"></i></span></div>
          </div>
        </div>
      </div>
    </div>
    </div>
      <div class="plat-block">
        <div class="plat-block-back">
          <div class="word-box">
            <img src="../../static/images/home/platBlock.png" alt="">
            <div class="tips1">
              <p class="word1">专业严谨</p>
              <p class="word2">的交易平台</p>
              <p class="word3">Professional and rigorous trading <br/> platform</p>
              <hr/>
            </div>
            <div class="ins-box">
              <p>FX66是基于区块链底层技术的数字资产交易所，</p>
              <p>拥有撮合交易系统低延迟、高并发的核心技术</p>
              <p>勇于突破传统交易所的局限，</p>
              <p>把交易、资产写入区块链当中。</p>
            </div>
          </div>

        </div>
      </div>
    </div>
</template>

<script>
export default {
  name: 'Addus',
  data () {
    return {
      hoverNum: 100,
      src: '../../static/images/home/add0',
      items: [
        {
          title: '超高返佣',
          enTitle: 'High commission',
          intro: '推荐FX66给他人，可以获取被推荐人等比例的交易手续费做为佣金。',
          src: ''
        },
        {
          title: 'VIP奖励',
          enTitle: 'VIP rewards',
          intro: '每个经纪商都会有相应的业绩排名，凡是每个月业绩排名靠前者，均可以得到我们平台的VIP级别奖励。',
          src: ''
        },
        {
          title: '市场支持',
          enTitle: ' Marketing support',
          intro: 'FX66经纪商可以使用我们所可以提供的全部交易工具和交易资源，并且会在市场宣传方面给予相应的支持！',
          src: ''
        },
        {
          title: '技术支持',
          enTitle: 'Technical support',
          intro: '我们拥有强大的技术开发团队，可以制定符合客户营销特点的网站，只收成本费。',
          src: ''
        }
      ]
    }
  },
  methods: {
    overShow: function (num) {
      this.hoverNum = num
    },
    outHide: function (num) {
      this.hoverNum = 100
    }

  }
}
</script>

<style scoped>
  .add-box {
    height: 900px;
    width: 100%;
    padding-top: 60px;
    margin: 0 auto;


  }
  .subtitle {
    font-size: 20px;
    color: #999;
    margin-top: 12px;
  }
  .adv-line div.hoverClass{
    border:1px solid #1a6fa6;
    border-left:4px solid #1a6fa6;
    box-sizing: border-box;
  }
  .adv-line {
    display: flex;
    margin-top: 80px;
    flex-wrap: wrap;

  .adv-line-item {
    position: relative;
    text-align: left;
    width: 430px;
    height: 250px;
    border: 1px solid #eee;
    color: #333;
    padding: 32px 0 0 20px;
    background-color: #fff;
    margin-top: 80px;

  h4 {
    font-size: 25px;
    font-weight: 700;
    line-height: 1;
  }

  h5 {
    font-size: 20px;
    line-height: 1;
    color: #999;
    font-weight: 500;
    margin-top: 10px;
    margin-bottom: 40px;
  }

  p {
    width: 255px;
    font-size: 15px;
  }

  img {
    position: absolute;
    top: 20px;
    right: -135px;
    width: 270px;
  }

  .apply-btn {
    position: absolute;
    bottom: -22px;
    width: 170px;
    height: 45px;
    background-color: #1a6fa6;
    color: #fff;
    padding-left: 18px;
    cursor: pointer;
    font-size: 15px;
    line-height: 45px;

  span {
    float: right;
    display: block;
    width: 47px;
    height: 100%;
    background-color: #2580bb;
    text-align: center;

  i {
    font-weight: bold;
  }
  }
  }
  }
  .adv-line-item:first-child, .adv-line-item:nth-child(2) {
    margin-top: 0px;
  }

  .adv-line-item:nth-child(odd) {
    margin-right: 200px;
  }
  }
.plat-block{
  height: 900px;
  background: url("../../static/images/home/platBg.png") no-repeat center 30px;
  background-size: auto;
  position: relative;
  .plat-block-back{
    width: 100%;
    height: 417px;
    position: absolute;
    bottom: 0;
  }
}
.word-box{
  width: 1200px;
  height: 250px;
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  bottom: 85px;
  background-color: rgba(2,134,219,.83);
  padding-left: 195px;
  text-align: left;
  color: #fff;
  img{
    position: absolute;
    top: -37px;
    left: 158px;
  }

}
  .tips1{
  line-height:1;
  .word1{
    font-size: 35px;
    margin-top: 30px;
    font-weight: 700;
  }
  .word2{
    font-size: 24px;
    margin-left: 80px;
    margin-top: 10px;
    font-weight: 700;
  }
  .word3{
    margin-top: 16px;
    font-size: 12px;
    line-height: 1.5;
  }
  hr{
    width: 45px;
    height: 2px;
    background-color: #fff;
    border: 0;
    margin-top: 20px;
  }
  }
  .ins-box{
    position: absolute;
    width: 400px;
    right: 250px;
    top: 56px;
    font-size: 18px;
    text-align: center;
    line-height: 1.6;
  }
</style>