fx66/src/views/homePage.vue

<template>
  <div class="homePage">
    <div class="banner">
    	<el-carousel height="900px" arrow='never' indicator-position='none'>
        <el-carousel-item v-for="item in 3" :key="item">
          <div v-bind:class="{'banner1':item==1,'banner2':item==2,'banner3':item==3}">
            
          </div>
        </el-carousel-item>
      </el-carousel>
      <div class="bottom-line">
        <span class="btn" @click="apply">申请代理</span>
        <span class="tel">热线电话：4001-566-899</span>
      </div>
      <login @chuanzhi="chuanzhi" :isquit='isquit'></login>
    </div>

    <div class="coin-block">
      <div class="coin-title">
        <h1>主流交易币种</h1>
        <h2>Mainstream Trading Crypto-currency</h2>
        <div class="underline"></div>
      </div>
      <div class="coin-content">
        <ul>
          <li>
            <div class="smallBox">
              <div class="iconfont icon-BTC1 icon"></div>
              <p>BTC( 比特币 )</p>
            </div>
          </li>
          <li>
            <div class="smallBox">
              <div class="iconfont icon-bty1 icon"></div>
              <p>BTY( 比特元 )</p>
            </div>
          </li>
          <li>
            <div class="smallBox">
              <div class="iconfont icon-BCC1 icon"></div>
              <p>BCC( 比特现金 )</p>
            </div>
          </li>
          <li>
            <div class="smallBox">
              <div class="iconfont icon-ETH1 icon"></div>
              <p>ETH( 以太坊 )</p>
            </div>
          </li>
          <li>
            <div class="smallBox">
              <div class="iconfont icon-ETC1 icon"></div>
              <p>ETC( 以太坊经典 )</p>
            </div>
          </li>
          <li>
            <div class="smallBox">
              <div class="iconfont icon-ZEC1 icon"></div>
              <p>ZEC( 零币 )</p>
            </div>
          </li>
          <li>
            <div class="smallBox">
              <div class="iconfont icon-LTC1 icon"></div>
              <p>LTC( 莱特币 )</p>
            </div>
          </li>
          <li>
            <div class="smallBox">
              <div class="iconfont icon-BTS1 icon"></div>
              <p>BTS( 比特股 )</p>
            </div>
          </li>
          <li>
            <div class="smallBox">
              <div class="iconfont icon-SC1 icon"></div>
              <p>SC( 云储币 )</p>
            </div>
          </li>
          <li>
            <div class="smallBox">
              <div class="iconfont icon-DCR3 icon"></div>
              <p>DCR( 德信币 )</p>
            </div>
          </li>
        </ul>
      </div>
    </div>

    <div class="join">
      <div class="title">
        <hr>
        <h1>加入我们，可以获得</h1>
        <hr>
      </div>
      <h2>To join our agent you will gain the following advantages</h2>
      <div class="content">
        <div class="line">
          <div class="line-item">
            <h4>超高返佣</h4>
            <h5>High commission</h5>
            <p>推荐FX66给他人，可以获取被推荐人等比例的交易手续费做为佣金。</p>
            <img src="../assets/img/add01.png">
            <div class="apply-btn">
              <span>立即申请经纪商</span>
              <i class="el-icon-arrow-right"></i>
            </div>
          </div>
          <div class="line-item">
            <h4>VIP奖励</h4>
            <h5>VIP rewards</h5>
            <p>每个经纪商都会有相应的业绩排名，凡是每个月业绩排名靠前者，均可以得到我们平台的VIP级别奖励。</p>
            <img src="../assets/img/add02.png">
            <div class="apply-btn">
              <span>立即申请经纪商</span>
              <i class="el-icon-arrow-right"></i>
            </div>
          </div>
        </div>

        <div class="line">
          <div class="line-item">
            <h4>市场支持</h4>
            <h5>Marketing support</h5>
            <p>FX66经纪商可以使用我们所可以提供的全部交易工具和交易资源，并且会在市场宣传方面给予相应的支持！</p>
            <img src="../assets/img/add03.png">
            <div class="apply-btn">
              <span>立即申请经纪商</span>
              <i class="el-icon-arrow-right"></i>
            </div>
          </div>
          <div class="line-item">
            <h4>技术支持</h4>
            <h5>Technical support</h5>
            <p>我们拥有强大的技术开发团队，可以制定符合客户营销特点的网站，只收成本费。</p>
            <img src="../assets/img/add04.png">
            <div class="apply-btn">
              <span>立即申请经纪商</span>
              <i class="el-icon-arrow-right"></i>
            </div>
          </div>
        </div>

      </div>
    </div>

    <div class="plat">
      <div class="plat-back">
        <div class="word-box">
          <img src="../assets/img/platBlock.png">
          <div class="left">
            <p class="word1">专业严谨</p>
            <p class="word2">的交易平台</p>
            <p class="word3">
              Professional and rigorous trading<br>
              platform
            </p>
            <hr>
          </div>
          <p class="right">
            <span>FX66是基于区块链底层技术的数字资产交易所，</span>
            <span>拥有撮合交易系统低延迟、高并发的核心技术</span>
            <span>勇于突破传统交易所的局限，</span>
            <span>把交易、资产写入区块链当中。</span>
          </p>
        </div>
      </div>
    </div>

    <div class="service">
      <div class="title">
        <hr>
        <h3>全方位 一站式服务</h3>
        <hr>
      </div>
      <h4>All-around one-stop service</h4>
      <ul class="service-list">
        <li>
          <div class="item">
            <i class="iconfont icon-shandian"></i>
          </div>
          <div class="item2">
            FX66具备一键交易功能,<br>闪电交易，专业快捷!
          </div>
        </li>
        <li>
          <div class="item">
            <i class="iconfont icon-shouji"></i>
          </div>
          <div class="item2">
            手机客户端,<br>随时随地，紧跟市场!
          </div>
        </li>
        <li>
          <div class="item">
            <i class="iconfont icon-jiazhipinggu-"></i>
          </div>
          <div class="item2">
            专业分析指导，<br>价值评估市场!
          </div>
        </li>
        <li>
          <div class="item">
            <i class="iconfont icon-kefu1"></i>
          </div>
          <div class="item2">
           新手帮帮帮，<br>一小时教您炒币入门
          </div>
        </li>
      </ul>
    </div>

    <div class="bottom-shadow" v-bind:class="{flex:isFlex}">
      <div class="btn" @click='apply'>申请经纪商</div>
      <span>热线电话：+86 173 5471 8363</span>
    </div>

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

<script>
import login from '../components/login.vue'
import contactWe from '../components/contact-we.vue'
export default {
  name: 'homePage',
  data () {
    return {
      isFlex: false
    }
  },
  props:['isquit'],
  components:{
    login,contactWe
  },
  methods:{
    bottomShadow(){
      let t = document.documentElement.scrollTop || document.body.scrollTop
      if (t>850) {
        this.isFlex=true
      }else {
        this.isFlex=false
      }
    },
    chuanzhi(data){
      this.$emit('chuanzhi',data)
    },
    apply(){
      if (window.localStorage.username) {
        this.$router.push('/apply')
      }else{
        alert('请先登陆')
      }
    }
  },
  mounted(){
    window.addEventListener('scroll',this.bottomShadow, false)
  },
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
	.homePage{
    .banner{
      position: relative;
      .banner1{
        background: url('../assets/img/banner1.png');
        background-size:auto 100%;
        height: 900px;
        background-position: center;
      }
      .banner2{
        background: url('../assets/img/banner2.png');
        background-size:auto 100%;
        height: 900px;
        background-position: center;
      }
      .banner3{
        background: url('../assets/img/banner3.png');
        background-size:auto 100%;
        height: 900px;
        background-position: center;
      }
      .bottom-line{
        height: 100px;
        background-color: rgba(0,0,0,.5);
        width: 100%;
        line-height: 100px;
        margin: 0 auto;
        position: absolute;
        top: 800px;
        z-index: 99;
        text-align: center;
        .btn{
          display: inline-block;
          width: 140px;
          height: 40px;
          line-height: 40px;
          border-radius: 20px;
          font-size: 18px;
          font-weight: bold;
          margin-right: 60px;
          color: white;
          background: #1a6fa6;
          cursor: pointer;
        }
        .tel{
          color: #fff;
          font-size: 25px;
          font-weight: bold;
        }
      }
    }
    .coin-block{
      height: 900px;
      background: url('../assets/img/coinBg.png') no-repeat bottom;

      .coin-title{
        padding-top: 78px;
        text-align: center;
        h1{
          font-size: 35px;
          font-weight: 700;
          color: #333;
        }
        h2{
          font-size: 20px;
          color: hsla(0,0%,60%,.8);
          margin-top: 12px;
        }
        .underline{
          width: 60px;
          height: 2px;
          margin: 20px auto 0;
          background-color: #1a6fa6;
        }
      }
      .coin-content{
        width: 1200px;
        margin: 80px auto 0;
        ul{
          width: 915px;
          height:363px;
          margin: 0 auto;
          li{
            width: 180px;
            height: 180px;
            background-color: #fff;
            display: inline-block;
            float: left;
            margin-right: 3px;
            margin-bottom: 3px;
            .smallBox{
              height: 100%;
              width: 100%;
              text-align: center; 
              .icon{
                font-size: 62px;
                margin-top: 30px;
                margin-bottom: 30px;
                color: #1a6fa6;
              }
              p{
                font-size: 20px;
                color: #999;
              }
            }
          }
        }
      }
    }
    .join{
      width: 1200px;
      margin: 0 auto;
      padding-top: 60px;
      height: 900px;
      .title{
        display: flex;
        align-items: center;
        justify-content: space-between;
        hr{
          width: 420px;
          height: 1px;
          background-color: #e5e5e5;
          border: 0;
        }
        h1{
          font-size: 35px;
          font-weight: 700;
          line-height: 35px;
        }
      }
      h2{
        font-size: 20px;
        color: #999;
        margin-top: 12px;
        text-align: center;
        font-weight: 500;
      }
      .content{
        .line{
          margin-top: 80px;
          display: flex;
          .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;
            &:first-child{
              margin-right: 200px;
            }
            &:hover{
              border:1px solid #1a6fa6;
              border-left:3px solid #1a6fa6;
              box-shadow: 0 0 20px 1px #e5e5e5;
            }
            &:hover .apply-btn{
              display: block;
            }
            h4{
              font-size: 25px;
              font-weight: bold;
              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{
              display: none;
              position: absolute;
              bottom:-22px;
              width: 170px;
              height: 45px;
              background-color: #1a6fa6;
              color: #fff;
              padding-left: 18px;
              cursor: pointer;
              span{
                line-height: 45px;
                font-size: 15px;
              }
              i{
                display: inline-block;
                width: 45px;
                height: 45px;
                text-align: center;
                line-height: 45px;
                font-size: 16px;
                position: absolute;
                right: 0;
                top: 0;
                background-color: #2580bb;
              }
            }
          }
        }
      }
    }
    .plat{
      height: 900px;
      background: url('../assets/img/platBg.png') no-repeat center;
      background-size: auto 100%;
      min-width: 1200px;
      position: relative;
      .plat-back{
        width: 100%;
        height: 458px;
        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,0.83);
          padding-left: 195px;
          text-align: left;
          color: #fff;
        }
        img{
          position: absolute;
          top: -37px;
          left: 158px;
        }
        .left{
          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: #fff;
            margin-top: 20px;
            border: none;
          }
        }
        .right{
          position: absolute;
          width: 400px;
          right: 250px;
          top:56px;
          font-size: 18px;
          text-align: center;
          line-height: 1.6;
          span{
            display: block;
            padding: 5px 0;
          }
        }
      }
    }
    .service{
      width: 1200px;
      height: 600px;
      margin: 0 auto;
      padding-top: 68px;
      .title{
        display: flex;
        justify-content: space-between;
        align-items: center;
        hr{
          width: 420px;
          height: 1px;
          background-color: #e5e5e5;
          border: none;
        }
        h3{
          font-size: 35px;
          font-weight: 700;
          line-height: 1;
        }
      }
      h4{
        font-size: 20px;
        color: #999;
        margin-top: 12px;
        text-align: center;
      }
      .service-list{
        margin-top: 80px;
        display: -webkit-flex;
        display: -moz-flex;
        display: -ms-flex;
        display: -o-flex;
        display: flex;
        justify-content: center;
        li{
          border: 1px solid #dcdcdc;
          width: 176px;
          height: 176px;
          transform: rotate(45deg);
          margin-right: 72px;
          background-color: #fff;
          .item{
            width: 100%;
            height: 100%;
            line-height: 176px;
            text-align: center;
            transform: rotate(-45deg);
            i{
              font-size: 60px;
              color: #2580bb;
            }
          }
          .item2{
            width: 100%;
            height: 100%;
            display: none;
            justify-content: center;
            align-items: center;
            transform: rotate(-45deg);
            color: #fff;
            font-size: 15px;
          }
          &:hover .item2{
            display: flex;
          }
          &:hover .item{
            display: none;
          }
          &:hover{
            background: #1a6fa6;
          }
        }
        
      }
    }
    .bottom-shadow {
      position: fixed;
      bottom: -1px;
      height: 80px;
      background-color: rgba(0,0,0,0.6);
      z-index: 11;
      width: 100%;
      margin: 0 auto;
      justify-content: center;
      align-items: center;
      display: none;
      &.flex{
        display: flex;
      }
      .btn{
        width: 140px;
        height: 40px;
        line-height: 40px;
        text-align: center;
        border-radius: 20px;
        border: 0;
        font-size: 18px;
        font-weight: 700;
        margin-right: 60px;
        cursor: pointer;
        background-color: #1a6fa6;
        color: #fff;
      }
      span{
        line-height: 80px;
        color: #fff;
        font-size: 25px;
        font-weight: 700;
      }
    }
	}
</style>