fx66/src/components/Crypto.vue

<template>
  <div class="crypto">
    <div class="wrap">
      <h1>主流交易币种</h1>
      <p class="text">Mainstream Trading Crypto-currency</p>
      <div class="blue-line"></div>
      <div class="coin-box">
        <ul class="coin-ul">
          <li v-for="(item,index) in items" :key="index">
            <i :class="'iconfont'+' '+item.icon"></i>
            <p>{{item.text}}</p>
          </li>
        </ul>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'Crypto',
  data () {
    return {
      items: [
        {
          icon: 'icon-BTC1',
          text: 'BTC( 比特币 )'
        },
        {
          icon: 'icon-bty1',
          text: 'BTY( 比特元 )'
        },
        {
          icon: 'icon-BCC1',
          text: 'BCC( 比特现金 )'
        },
        {
          icon: 'icon-ETH1',
          text: 'ETH( 以太坊 )'
        },
        {
          icon: 'icon-ETC',
          text: 'ETC( 以太坊经典 )'
        },
        {
          icon: 'icon-ZEC1',
          text: 'ZEC( 零币 )'
        },
        {
          icon: 'icon-ltc',
          text: 'LTC( 莱特币 )'
        },
        {
          icon: 'icon-BTS3',
          text: 'BTS( 比特股 )'
        },
        {
          icon: 'icon-SC3',
          text: 'SC( 云储币 )'
        },
        {
          icon: 'icon-DCR3',
          text: 'DCR( 德信币 )'
        }
      ]

    }
  }
}
</script>

<style scoped>
  .crypto{
    text-align: center;
    padding-top: 78px;
    height: 900px;
    background:url(../../static/images/home/coinBg.png) no-repeat bottom;
    position: relative;
  }
  h1{
    font-weight: 700;
    font-size: 35px;
    color: #333;
  }
  .blue-line{
    width: 60px;
    height: 2px;
    margin: 0 auto;
    margin-top: 15px;
    background-color: #1a6fa6;
  }
  .crypto .text{
    font-size: 20px;
    color: hsla(0,0%,60%,.8);
    margin-top: 12px;
  }
  .coin-box{
    width: 1200px;
    height: auto;
    margin: 80px auto 0;
    position: relative;
  }
  .coin-ul{
    width: 915px;
    height: 363px;
    margin: 0 auto;

  }
  .coin-ul>li{
    float: left;
    width: 180px;
    height: 180px;
    background-color: #fff;
    display: inline-block;
    float: left;
    margin-right: 3px;
    margin-bottom: 3px;
  i{
    font-size: 62px;
    margin-top: 30px;
    margin-bottom: 30px;
    color: #1a6fa6;

  }
  p{
    font-size: 20px;
    color: #999;
  }
  }
</style>