fx66/src/views/index.vue

<template>
  <div>
    <header-component @logout="handleLogout" :is-login="isLogin" :login-account="loginAccount"></header-component>
    <el-carousel indicator-position="none" arrow="never" height="900px">
      <el-carousel-item v-for="item,index in 3" :key="index">
        <div class="banner" :id="'banner'+index">
          <div class="position-box">
            <button class="carousel-apply-btn">申请代理</button>
          </div>

        </div>
      </el-carousel-item>
    </el-carousel>
    <div class="position-box">
      <div class="login-box">
        <div  class="box-inner">
          <login-box @loginSuccess="isLogin=true;loginAccount=localStorage.getItem('username')" v-if="!isLogin" class="login-box-com"></login-box>
          <div v-else class="logged-box">
            <h1 class="title">欢迎您!{{loginAccount}}</h1>
            <button @click="$router.push('./proxy-apply')" class="logged-apply-btn">申请代理商</button>
          </div>
        </div>

      </div>
    </div>
    <proxy-banner></proxy-banner>
    <div class="main-currency-container">
      <div class="header-title">
        <h1 class="title">主流交易币种</h1>
        <h2 class="eng-title">Mainstream Trading Crypto-currency</h2>
        <p class="blue-line"></p>
      </div>
      <div class="currency-container">
        <div class="currency-layer">
          <currency-block v-for="item,index in currencyDataList" :key="index" :currency-data="item"></currency-block>
        </div>
      </div>

    </div>
    <div class="join-gain-container">
      <special-title title="加入我们，可以获得" eng-title="To join our agent you will gain the following advantages"></special-title>
      <join-gain-block
        class="jg-block"
        v-for="item,index in joinGainInfoDataList"
        :join-gain-info-data="item"
         :key="index">
      </join-gain-block>
    </div>
    <div class="full-pic">
      <div class="introduce">
        <img class="plat-block" :src="require('../assets/platBlock.png')">
        <h1 class="title-main">专业严谨</h1>
        <h2 class="title-sub">的交易平台</h2>
        <p class="eng-title">Professional and rigorous trading platform</p>
        <hr class="short-white-line"/>
        <pre class="introduce-block">
          Fx66是基于区块链底层技术的数字货币交易所，
          拥有撮合交易系统低延时、高并发的核心技术，
          勇于突破传统交易所的局限，
          将交易、资产写入区块链。
        </pre>
      </div>
    </div>
    <div class="one-stop-container">
      <special-title title="全方位 一站式服务" eng-title="All-around one-stop service"></special-title>
      <div class="intro-container">
        <rhombus-block v-for="item,index in infoDataList" :key="index" :info-data="item"></rhombus-block>
      </div>
    </div>
    <right-helper></right-helper>
  </div>

</template>

<script>
    import HeaderComponent from "../components/header";
    import ProxyBanner from "../components/proxyBanner";
    import CurrencyBlock from "../components/currencyBlock";
    import JoinGainBlock from "../components/joinGainBlock";
    import SpecialTitle from "../components/specialTitle";
    import RhombusBlock from "../components/rhombusBlock";
    import RightHelper from "../components/rightHelper";
    import LoginBox from "../components/loginBox";
    export default {
      name: "index",
      components: {
        LoginBox,
        RightHelper, RhombusBlock, SpecialTitle, JoinGainBlock, CurrencyBlock, ProxyBanner, HeaderComponent, },
      data(){
        return{
          currencyDataList:[
            {
              icon:'&#xe615;',
              name:'btc（比特币）'
            },
            {
              icon:'&#xe615;',
              name:'btc（比特币）'
            },
            {
              icon:'&#xe615;',
              name:'btc（比特币）'
            },
            {
              icon:'&#xe615;',
              name:'btc（比特币）'
            },
            {
              icon:'&#xe615;',
              name:'btc（比特币）'
            },
            {
              icon:'&#xe615;',
              name:'btc（比特币）'
            },
            {
              icon:'&#xe615;',
              name:'btc（比特币）'
            },
            {
              icon:'&#xe615;',
              name:'btc（比特币）'
            },{
              icon:'&#xe615;',
              name:'btc（比特币）'
            },
            {
              icon:'&#xe615;',
              name:'btc（比特币）'
            },



          ],
          joinGainInfoDataList:[
            {
              title:'超高返佣',
              engTitle:'High commission',
              description:'推荐FX66给他人，可以获取被推荐人等比例交易的手续费做为佣金。',
              imgUrl:require('../assets/add01.png')
            },
            {
              title:'安全存储',
              engTitle:'Secure storage ',
              description:'每笔交易需私钥签名，分布式校验，无法假冒和盗用；平台资金更安全，操作更快捷。',
              imgUrl:require('../assets/add02.png')
            },
            {
              title:'市场支持',
              engTitle:'Marketing support',
              description:'FX66经纪商可以共享公司的全部交易工具和交易资源，并且会在市场宣传方面给予相应的支持！',
              imgUrl:require('../assets/add03.png')
            },
            {
              title:'技术支持',
              engTitle:'Technical support',
              description:'我们拥有领先的技术开发团队，针对不同客户需求量身制定专属平台，仅收取少量成本费。',
              imgUrl:require('../assets/add04.png')
            }
          ],
          isLogin:false,
          loginAccount:'123456789',
          infoDataList:[
            {
              icon:'&#xe648;',
              line1:'FX66具备一键交易功能，',
              line2:'闪电交易，专业快捷!'
            },
            {
              icon:'&#xe634;',
              line1:'手机客户端，',
              line2:'随时随地，紧跟市场！'
            },
            {
              icon:'&#xe847;',
              line1:'专业分析指导，',
              line2:'价值评估市场！'
            },
            {
              icon:'&#xe637;',
              line1:'新手帮帮帮',
              line2:'一小时教您炒币入门'
            }
          ]
        }
      },
      mounted(){
        let username=localStorage.getItem('username')
        if(username){
          this.isLogin=true;
          this.loginAccount=username;
        }
      },
      methods:{
        handleLogout(){
          localStorage.setItem('token','');
          localStorage.setItem('username','');
          this.isLogin=false;
        }
      }
    }
</script>

<style scoped lang="less">
  @import "../assets/less/_variable.less";
  #banner0{
    background: url(../assets/banner/banner.png) no-repeat 50%;
    background-size: auto 100%;
    height: 900px;
  }
  #banner1{
    background: url(../assets/banner/banner1.png) no-repeat 50%;
    background-size: auto 100%;
    height: 900px;
  }
  #banner2{
    background: url(../assets/banner/banner2.png) no-repeat 50%;
    background-size: auto 100%;
    height: 900px;
  }
  .carousel-apply-btn{
    position: absolute;
    width: 160px;
    height: 45px;
    background-color: #ffdf00;
    border-radius: 2px;
    border: none;
    font-size: 20px;
    color: #154bb2;
    left: 0;
    /*left: 350px;*/
    bottom: 400px;
  }
  .position-box{
    position: absolute;
    width: 1200px;
    transform: translateX(-50%);
    left: 50%;
    /*margin: 0 auto;*/
    top: 0;
    height:900px;
  }
  .login-box{
    position: absolute;
    right: 0;
    top:180px;
    /*width: 390px;*/
    /*height: 526px;*/
    background-color: rgba(255, 255, 255, 0.4);
    padding: 15px;
    & .box-inner{
      position: relative;
      width: 360px;
      background-color: white;
      & .login-box-com{
        height: 496px;

      }
      & .logged-box{
        padding: 15px;
        & .title{
          font-size: 25px;
          color: #1a6fa6;
        }
        & .logged-apply-btn{
          background-color: white;
          margin-top: 50px;
          width: 100%;
          height: 50px;
          line-height: 50px;
          border: 1px solid #d2d2d2;
          /*background-color: transparent;*/
          margin-bottom: 20px;
          font-size: 18px;
          cursor: pointer;
        }
      }
    }

  }
  .main-currency-container{
    height: 910px;
    background: url(../assets/coinBg.png) no-repeat bottom;
    margin-top: 75px;
    & .header-title{
      & .title{
        font-weight: 700;
        font-size: 35px;
        color: @lightBlack;
        line-height: 35px;
      }
      & .eng-title{
        font-size: 20px;
        color: @lighterBlack;
        margin-top: 12px;
      }
      & .blue-line{
        margin: 15px auto 0;
        width: 60px;
        height: 2px;
        background-color: #1a6fa6;
      }
    }
    & .currency-container{
      margin-top: 85px;
      & .currency-layer{

        width: 912px;
        height: 363px;
        margin: 0 auto;
        display: flex;
        /*flex-direction: column;*/
        flex-wrap: wrap;
        align-content: space-between;
        justify-content: space-between;
      }
    }

  }
  .join-gain-container{
    width: 1200px;
    margin: 65px auto 0;
    display: flex;
    flex-wrap: wrap;
    & .jg-block{
      width: 50%;
      margin-top: 80px;

    }
  }
  .full-pic{
    position: relative;
    margin-top: 140px;
    width: 100%;
    height: 830px;
    background: url(../assets/platBg.png) 50% 50% no-repeat;
    & .introduce{
      position: absolute;
      width: 1200px;
      height: 255px;
      background-color: rgba(2, 134, 219, 0.83);
      left: 50%;
      transform: translateX(-50%);
      bottom:80px;
      & .plat-block{
        position: absolute;
        top: -37px;
        left: 157px;
      }
      & .title-main{
        color: white;
        text-align: left;
        font-size: 35px;
        font-weight: 700;
        margin:30px 0 0 195px;
      }
      & .title-sub{
        font-size: 24px;
        margin-left: 280px;
        color: white;
        text-align: left;
      }
      & .eng-title{
        width: 200px;
        margin-left: 195px;
        font-size: 12px;
        color: white;
        text-align: left;
      }
      & .short-white-line{
        margin: 20px 0 0 195px;
        border: none;
        height: 2px;
        width: 45px;
        background-color: white;

      }
      & .introduce-block{
        position: absolute;
        left: 580px;
        top: 57px;
        font-size: 18px;
        color: white;
        line-height: 2;
      }
    }

  }
  .one-stop-container{
    width: 1200px;
    margin: 70px auto 0;
    & .intro-container{
      margin-top: 85px;
      margin-bottom: 70px;
      display: inline-flex;

    }
  }
</style>