Fx66/src/views/Home.vue

<template>
  <section class="home-ctnr">
    <myheader></myheader>
    <div class="home-block">
      <div class="banner-block">
        <!-- 一个轮播图、一个固定框、一个登录框 -->
        <div class="carousel-box">
          <el-carousel height="900px" indicator-position="none" arrow="never" :interval='5000'>
            <el-carousel-item>
              <div class="carousel bg1">
                <div class="carousel-wrap">
                  <button class="btn btn-home" @click='goapply'>申请经纪商</button>
                </div>
              </div>
            </el-carousel-item>
            <el-carousel-item>
              <div class="carousel bg2">
                <div class="carousel-wrap">
                  <button class="btn btn-home" @click='goapply'>申请经纪商</button>
                </div>
              </div>
            </el-carousel-item>
            <el-carousel-item>
              <div class="carousel bg3">
                <div class="carousel-wrap">
                  <button class="btn btn-home" @click='goapply'>申请经纪商</button>
                </div>
              </div>
            </el-carousel-item>
          </el-carousel>
        </div>
        <div class="fix-box">
          <fixline isbanner="true"></fixline>
        </div>
        <mylogin></mylogin>
      </div>
      <div class="coin-block">
        <div class="coin-title">
          <h1>主流交易币种</h1>
          <h2>Mainstream Trading Crypto-currency</h2>
          <div class="split-line"></div>
        </div>
        <div class="coin-box">
          <ul>
            <li v-for="item in coins" :key="item.id">
              <div :class="item.coinIcon"></div>
              <p>{{ item.msg }}</p>
            </li>
          </ul>
        </div>
      </div>
      <div class="add-block">
        <div class="service-title">
          <hr>
          <h3>加入我们，可以获得</h3>
          <hr>
          <h4>To join our agent you will gain the following advantages</h4>
        </div>
        <div class="add-ctnr">
          <addbox></addbox>
        </div>
      </div>
      <div class="plat-block">
        <div class="plat-block-back">
          <div class="plat-word">
            <img src="../assets/img/platBlock.png" alt="">
            <div class="tips">
              <p class="tip1">专业严谨</p>
              <p class="tip2">的交易平台</p>
              <p class="tip3">Professional and rigorous trading <br> platform</p>
              <hr>
            </div>
            <div class="plat-desc">
              <span>FX66是基于区块链底层技术的数字资产交易所，</span>
              <span>拥有撮合交易系统低延迟、高并发的核心技术</span>
              <span>勇于突破传统交易所的局限，</span>
              <span>把交易、资产写入区块链当中。</span>
            </div>
          </div>
        </div>
      </div>
      <div class="service-block">
        <div class="service-title">
          <hr>
          <h3>全方位 一站式服务</h3>
          <hr>
          <h4>All-around one-stop service</h4>
        </div>
        <ul class="service-box">
          <li v-for="(item,index) in services" :key="item.id" @mouseenter="showItem(index)" @mouseleave="showItem(index)">
            <div class="service-item" v-show="item.flag">
              <i :class="item.servicesIcon"></i>
            </div>
            <div class="service-item2" v-show="!item.flag" v-html="item.msg">
            </div>
          </li>
        </ul>
      </div>
      <fixline class="footer-line" :isbanner="false"></fixline>
      <contactwe class="contact-block"></contactwe>
    </div>
  </section>
</template>
<script>
  import myheader from '../components/Header.vue'
  import fixline from '../components/FixLine.vue'
  import contactwe from '../components/ContactWe.vue'
  import addbox from '../components/AddBox.vue'
  import mylogin from '../components/Login.vue'
  export default{
    data(){
      return{
        coins:[
          {
            id:1,
            coinIcon:"icon iconfont icon-BTC1",
            msg:"BTC( 比特币 )"     
          },
          {
            id:2,
            coinIcon:"icon iconfont icon-bty1-copy",
            msg:"BTY( 比特元 )"     
          },
          {
            id:3,
            coinIcon:"icon iconfont icon-BCC1",
            msg:"BCC( 比特现金 )"     
          },
          {
            id:4,
            coinIcon:"icon iconfont icon-ETH1",
            msg:"ETH( 以太坊 )"     
          },
          {
            id:5,
            coinIcon:"icon iconfont icon-ETC1",
            msg:"ETC( 以太坊金典 )"     
          },
          {
            id:6,
            coinIcon:"icon iconfont icon-ZEC1",
            msg:"ZEC( 零币 )"     
          },
          {
            id:7,
            coinIcon:"icon iconfont icon-ltc",
            msg:"LTC( 莱特币 )"     
          },
          {
            id:8,
            coinIcon:"icon iconfont icon-BTS3",
            msg:"BTs( 比特股 )"     
          },
          {
            id:9,
            coinIcon:"icon iconfont icon-SC3",
            msg:"SC( 云储币 )"     
          },
          {
            id:10,
            coinIcon:"icon iconfont icon-DCR3",
            msg:"DCR( 德信币 )"     
          }
        ],
        services:[
          {
            id:1,
            servicesIcon:"icon iconfont icon-shandian",
            msg:"FX66具备一键交易功能,<br/>闪电交易，专业快捷!",
            flag:true
          },
          {
            id:2,
            servicesIcon:"icon iconfont icon-shouji",
            msg:"手机客户端，<br/>随时随地，紧跟市场!",
            flag:true
          },
          {
            id:3,
            servicesIcon:"icon iconfont icon-jiazhipinggu-",
            msg:"专业分析指导，<br/>价值评估市场!",
            flag:true
          },
          {
            id:4,
            servicesIcon:"icon iconfont icon-kefu1",
            msg:"新手帮帮帮，<br/>一小时教您炒币入门",
            flag:true
          },
        ]
      }
    },
    components:{
      myheader,
      fixline,
      contactwe,
      addbox,
      mylogin
    },
    mounted(){
      document.documentElement.scrollTop = window.pageYOffset = document.body.scrollTop=0;
    },
    methods:{
      showItem(index){
        this.services[index].flag = !this.services[index].flag;
      },
      goapply(){
        this.$router.push({path:"/applyAgent"})
      }
    }
  }
</script>
<style scoped>
  .home-ctnr{
    background-color: #f5f8ff;
    .home-block{
      .banner-block{
        position: relative;
        .carousel-box{
          .el-carousel__item{
            .carousel{
              height: 900px;
              position: relative;
              .carousel-wrap{
                width: 1200px;
                margin: 0 auto;
                text-align: left;
                .btn-home{
                  margin-top: 400px;
                  font-size: 16px;
                  color: #1f52c9;
                  background: #fede00;
                }
              } 
            }
            .bg1{
              background: url(../assets/img/banner1.png) no-repeat 50%;
              background-size: auto 100%;
            }
            .bg2{
              background: url(../assets/img/banner2.png) no-repeat 50%;
            }
            .bg3{
              background: url(../assets/img/banner3.png) no-repeat 50%;
              background-size: auto 100%;
            }
          }
        }
        .fix-box{
          width: 100%;
          position: absolute;
          bottom: 0;
          z-index: 2
        }
      }
      .coin-block{
        height: 900px;
        position: relative;
        background: url(../assets/img/coinBg.png) no-repeat bottom;
        background-color: rgba(245,248,255,1);
        .coin-title{
          padding-top: 78px;
          text-align: center;
          h1{
            font-size: 35px;
            color: #333;
            font-weight: 700;
          }
          h2{
            font-size: 20px;
            color: hsla(0,0%,60%,.8);
            margin-top: 12px;
          }
          .split-line{
            display: inline-block;
            width: 60px;
            height: 2px;
            margin-top: 15px;
            background-color: var(--text-color-active);
          }
        }
        .coin-box{
          width: 1200px;
          margin: 80px auto 0;
          position: relative;

          ul{
            width: 915px;
            height: 363px;
            margin: 0 auto;
            li{
              width: 180px;
              height: 180px;
              background-color: #fff;
              float: left;
              margin-bottom: 3px;
              margin-right: 3px;
              .icon{
                font-size: 62px;
                color: #1a6fa6;
                margin: 30px 0;
              }
              p{
                font-size: 20px;
                color: #999;
              }
            }
          }
        }
      }
      .add-block{
        width: 1200px;
        height: 900px;
        padding-top: 60px;
        margin: 0 auto;
      }
      .plat-block{
        height: 900px;
        background: url(../assets/img/plat.png) no-repeat center 30px;
        position: relative;
        .plat-block-back{
          width: 100%;
          height: 417px;
          position: absolute;
          bottom: 0;
          background: url(../assets/img/plat02.png) no-repeat bottom;
          display: flex;
          justify-content: space-around;
          align-items: center;
          .plat-word{
            width: 1200px;
            height: 250px;
            background-color: rgba(2,134,219,.83);
            position: relative;
            text-align: left;
            img{
              position: absolute;
              left: 158px;
              top:-37px;
            }
            .tips{
              margin-left: 195px;
              color: #fff;
              display: inline-block;
              .tip1{
                font-size: 35px;
                font-weight: 700;
                margin-top: 30px;
              }
              .tip2{
                font-size: 24px;
                font-weight: 700;
                margin-left: 80px;
              }
              .tip3{
                margin-top: 16px;
              }
              hr{
                width: 45px;
                height:2px;
                margin-top: 30px;
                background-color: #fff;
                border:0;
              }
            }
            .plat-desc{
              color: #fff;
              font-size: 18px;
              float: right;
              margin-top: 56px;
              text-align: center;
              span{
                display: block;
                padding: 5px 0;
              }
            }
          }
        }
      }
      .service-block{
        height: 600px;
        width: 1200px;
        margin: 0 auto;
        padding-top: 68px;
        .service-box{
          margin-top: 80px;
          display: flex;
          justify-content: center;
          li{
            background-color: #fff;
            width: 176px;
            height: 176px;
            border:1px solid #dcdcdc;
            transform: rotate(45deg);
            margin-right: 72px;
            .service-item{
              height: 176px;
              line-height: 176px;
              transform: rotate(-45deg);
              i{
                font-size: 60px;
                color: #2580bb;
              }
            }
            .service-item2{
              height: 176px;
              display: flex;
              justify-content: center;
              align-items: center;
              transform: rotate(-45deg);
              color: #fff;
              font-size: 15px;
            }
            &:hover{
              background-color: #1a6fa6;
            }
          }
        }
      }
      .footer-line{
        position: fixed;
        bottom: 0;
        background-color: rgba(0,0,0,0.6);
      }
      .contact-block{
        position: fixed;
        right: 0px;
        top: 28%;
        z-index: 200;
      }
    }
  }
</style>