fx66/src/components/currencyBlock.vue

<template>
    <div class="currency-block-container">
      <i class="currency-icon iconfont" v-html="currencyData.icon"></i>
      <p class="currency-name">{{currencyData.name}}</p>
    </div>

</template>

<script>
    export default {
      name: "currencyBlock",
      props:['currencyData']
    }
</script>

<style scoped lang="less">
  @import "../assets/less/_variable.less";
  .currency-block-container{
    flex-shrink: 0;
    width: 180px;
    height: 180px;
    background-color: white;
    border: solid 1px #f2f2f2;
    & .currency-icon{
      display: block;
      font-size: 45px;
      margin: 40px auto 0;
      color: @primaryBlue;
    }
    & .currency-name{
      margin-top: 35px;
      font-size: 20px;
      color: @lighterBlack;
    }
  }
</style>