Bit_Wise_World/src/views/index/components/HotFinancial.vue

<template>
  <!-- 热门理财 -->
  <div class="hot-financial">
    <div class="financial-title pf600 fs18 fc121212">热门理财</div>
    <div class="financial-main">
      <div class="financial-item" v-for="(item, index) in 2" :key="index">
        <div class="item-name pf400 fs12 fc2C3131">
          <img src="@/assets/icon/coin/bnb.svg" alt="" />理财产品名称
        </div>
        <div class="item-info">
          <div class="info-left">
            <div class="pf400 fs10 fcDF384C">0.23%</div>
            <div class="margin-top2 pf400 fs10 fcA8A8A8">收益率</div>
          </div>
          <div class="info-right">
            <div class="pf400 fs10 fcDF384C">10天</div>
            <div class="margin-top2 pf400 fs10 fcA8A8A8">理财周期</div>
          </div>
        </div>
        <div class="item-line"></div>
        <div class="item-shouyi pf400 fs10 fcA8A8A8">
          <div>预估每日收益</div>
          <div>0.2150天</div>
        </div>
        <div class="item-buy pf500 fs10 fcFFFFFF">立即购买</div>
      </div>
    </div>
  </div>
</template>
<script setup></script>
<style lang="less" scoped>
  .hot-financial {
    margin-top: 30px;
    width: 100%;

    .financial-title {
      margin-left: 16px;
      height: 24px;
      line-height: 24px;
    }

    .financial-main {
      display: flex;
      flex-direction: row;
      justify-content: flex-start;
      margin-top: 10px;
      width: 100%;

      .financial-item {
        display: flex;
        flex-direction: column;
        justify-content: flex-start;
        align-items: center;
        margin-left: 16px;
        width: 148px;
        height: 138px;
        border-radius: 5px;
        border: 1px solid #ebebeb;

        .item-name {
          display: flex;
          flex-direction: row;
          justify-content: flex-start;
          align-items: center;
          margin-top: 7px;
          width: 130px;
          height: 27px;

          img {
            margin-right: 3px;
            width: 27px;
            height: 27px;
          }
        }

        .item-info {
          display: flex;
          flex-direction: row;
          justify-content: space-between;
          margin-top: 10px;
          width: 130px;

          .margin-top2 {
            margin-top: 2px;
          }

          .info-left {
            display: flex;
            flex-direction: column;
            justify-content: flex-start;
            align-items: flex-start;
          }

          .info-right {
            display: flex;
            flex-direction: column;
            justify-content: flex-start;
            align-items: flex-end;
          }
        }

        .item-line {
          margin-top: 5px;
          width: 125px;
          height: 1px;
          background: #00000019;
        }

        .item-shouyi {
          display: flex;
          flex-direction: row;
          justify-content: space-between;
          align-items: center;
          margin-top: 3px;
          width: 130px;
          height: 18px;
        }

        .item-buy {
          margin-top: 6px;
          width: 130px;
          height: 25px;
          line-height: 25px;
          text-align: center;
          border-radius: 5px;
          background: #df384c;
        }
      }
    }
  }
</style>