<template>
  <div class="com">
    <div class="href flex" @click="$router.push('/copy/follows')">
      <div class="flex">
        <img class="icon" src="/img/copy/market/icon4.png" alt="">
        <div>
          <!-- 跟单中 -->
          {{ $t('follow.l6') }}
        </div>
      </div>
      <van-icon name="arrow" />
    </div>
    <div class="list">
      <div class="li" v-for="item in followList" :key="item.eid" @click="$router.push('/copy/detail/' + item.eid)">
        <van-image
          width="50"
          height="50"
          round
          fit="cover"
          :src="item.user_header || '/img/home/user.png'"
        />
        <div class="name">
          {{ item.expert_title }}
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import { mapGetters } from "vuex";
export default {
  data () {
    return {
      
    }
  },
  computed: {
    ...mapGetters(['followList']),
  },
}
</script>
<style lang="less" scoped>
.com {
  padding: 10px 0 0 16px;
  border-bottom: 1px solid #F6F6F6;
  margin-bottom: 10px;
}
.href {
  cursor: pointer;
  padding-bottom: 10px;
  font-size: 16px;
  justify-content: space-between;
  padding-right: 14px;
  .icon {
    width: 16px;
  }
  >.flex {
    column-gap: 6px;
  }
}
.list {
  display: flex;
  align-items: flex-start;
  flex-wrap: nowrap;
  overflow-y: auto;
  white-space: nowrap;
  column-gap: 23px;
  text-align: center;
  scrollbar-width: none;
  -ms-overflow-style: none;
  padding: 8px 16px 20px 0;
  &::-webkit-scrollbar {
    display: none;
  }
  .li {
    cursor: pointer;
  }
  .van-image {
    margin: 0 auto 6px;
  }
  .name {
    font-size: 12px;
    color: #B6B6B6;
    max-width: 100px;
    overflow: hidden;
    text-overflow: ellipsis;
  }
}
</style>