<template>
  <div class="list">
    <div class="item flex" v-for="item in 8" :key="item">
      <van-image
        round
        width="34px"
        height="34px"
        fit="cover"
        src=""
      >
        <template v-slot:error>
          <van-image
            round
            width="34px"
            height="34px"
            fit="cover"
            src="/logo.png"
          />
        </template>
      </van-image>
      <div class="name">极度股神</div>
      <div class="rate">
        盈利率273%
      </div>
    </div>
  </div>
</template>
<script>
export default {
  data () {
    return {
      
    }
  }
}
</script>
<style lang="less" scoped>
.list {
  display: flex;
  flex-wrap: nowrap;
  overflow-y: auto;
  padding-left: 13px;
  padding-bottom: 14px;
  column-gap: 10px;
  .item {
    cursor: pointer;
    border-radius: 6px;
    border: 1px solid #F1F1F1;
    min-width: 70px;
    max-width: 70px;
    justify-content: center;
    flex-direction: column;
    padding-top: 9px;
    padding-bottom: 6px;
  }
  .name {
    max-width: 100%;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    font-size: 12px;
    font-weight: 500;
    color: var(--color-1-);
    margin-top: 7px;
  }
  .rate {
    color: #D62619;
    font-size: 9px;
    padding: 2px 3px;
    background-color: #FFE7E5;
    border-radius: 2px;
    margin-top: 7px;
    word-break: break-all;
  }
}
</style>