<template>
  <div class="outer5 flex-row relative">
    <div class="main2 flex-col">
      <div class="bd2 flex-row">
        <div class="layer1 flex-col">
          <span class="txt5 overflow-hidden overflow-ellipsis">3.10%</span>
          <span class="word8 overflow-hidden overflow-ellipsis"
            >七日年化收益</span
          >
        </div>
        <div class="layer2 flex-col"></div>
        <div class="layer3 flex-col">
          <span class="txt6 overflow-hidden overflow-ellipsis"
            >乾元-sdfsdfsdfsdfsdfsdfsdf</span
          >
          <div class="word9 overflow-hidden overflow-ellipsis">
            货币市场基金
          </div>
          <span class="txt7 overflow-hidden overflow-ellipsis"
            >万分收益&nbsp;0.7357</span
          >
        </div>
      </div>
    </div>
    <div class="orange flex items-center justify-center">
      <div class="word16">推荐</div>
    </div>
    <div class="triangle-orange"></div>
    <!-- <div class="blue flex items-center justify-center">
      <div class="word16">新发</div>
    </div>
    <div class="triangle-blue"></div> -->
  </div>
</template>
<style lang="less" scoped>
.triangle-orange {
  position: absolute;
  z-index: 99;
  right: 0;
  width: 0px;
  height: 0px;
  border-top: 4px solid #9e5906;
  border-bottom: 4px solid transparent;
  border-left: 3px solid #9e5906;
  border-right: 3px solid transparent;
  margin-top: 41px;
}
.triangle-blue {
  position: absolute;
  z-index: 99;
  right: 0;
  width: 0px;
  height: 0px;
  border-top: 4px solid #283fa0;
  border-bottom: 4px solid transparent;
  border-left: 3px solid #283fa0;
  border-right: 3px solid transparent;
  margin-top: 41px;
}

.outer5 {
  z-index: auto;
  width: 343px;
  height: 114px;
  justify-content: space-between;
  margin: 10px 0 0 20px;
  .main2 {
    z-index: 58;
    height: 114px;
    border-radius: 20px;
    border-width: 1px;
    border: 1px solid rgba(255, 255, 255, 1);
    background-color: rgba(255, 255, 255, 1);
    width: 335px;
    justify-content: flex-end;
    align-items: flex-start;
    padding: 0 0 16px 20px;
    .bd2 {
      z-index: auto;
      width: 260px;
      height: 78px;
      justify-content: space-between;
      .layer1 {
        z-index: auto;
        width: 73px;
        height: 50px;
        margin-top: 15px;
        .txt5 {
          z-index: 63;
          width: 58px;
          display: block;
          overflow-wrap: break-word;
          color: rgba(240, 58, 48, 1);
          font-size: 20px;
          font-family: PingFangHK-Semibold;
          white-space: nowrap;
          line-height: 28px;
          text-align: center;
          align-self: flex-start;
          margin-left: 4px;
        }
        .word8 {
          z-index: 67;
          width: 73px;
          display: block;
          overflow-wrap: break-word;
          color: rgba(141, 146, 175, 1);
          font-size: 12px;
          letter-spacing: 0.14399999380111694px;
          font-family: PingFangHK-Regular;
          white-space: nowrap;
          line-height: 17px;
          text-align: center;
          margin-top: 5px;
        }
      }
      .layer2 {
        z-index: 68;
        width: 1px;
        height: 78px;
        border: 1px solid #eaf0ff;
      }
      .layer3 {
        z-index: auto;
        width: 167px;
        height: 74px;
        .txt6 {
          z-index: 64;
          width: 167px;
          display: block;
          overflow-wrap: break-word;
          color: rgba(27, 31, 55, 1);
          font-size: 16px;
          letter-spacing: 0.19200000166893005px;
          font-family: PingFangHK-Semibold;
          white-space: nowrap;
          line-height: 22px;
          text-align: center;
        }
        .word9 {
          z-index: 65;
          display: block;
          overflow-wrap: break-word;
          color: rgba(27, 31, 55, 1);
          font-size: 14px;
          letter-spacing: 0.1679999977350235px;
          font-family: PingFangHK-Regular;
          white-space: nowrap;
          line-height: 20px;
          text-align: center;
          align-self: flex-start;
          margin-top: 5px;
        }
        .txt7 {
          z-index: 66;
          display: block;
          overflow-wrap: break-word;
          color: rgba(141, 146, 175, 1);
          font-size: 12px;
          letter-spacing: 0.14399999380111694px;
          font-family: PingFangHK-Regular;
          white-space: nowrap;
          line-height: 17px;
          text-align: center;
          align-self: flex-start;
          margin-top: 10px;
        }
      }
    }
  }
}

.orange {
  position: absolute;
  z-index: 70;
  top: 11px;
  right: 0;
  width: 56px;
  height: 30px;
  border-radius: 15px 0 0 15px;
  background-color: rgba(255, 145, 13, 1);
}

.blue {
  position: absolute;
  z-index: 70;
  top: 11px;
  right: 0;
  width: 56px;
  height: 30px;
  border-radius: 15px 0 0 15px;
  background-color: #3555dc;
}

.main6 {
  z-index: 60;
  left: 306px;
  top: 579px;
  width: 56px;
  height: 30px;
  border-radius: 15px 0 0 15px;
  background-color: rgba(53, 85, 220, 1);
}

.word16 {
  overflow-wrap: break-word;
  color: rgba(255, 255, 255, 1);
  font-size: 14px;
  letter-spacing: 0.1679999977350235px;
  font-family: PingFangHK-Medium;
  white-space: nowrap;
  text-align: center;
}
</style>