<template>
  <div class="page">
    <div class="filter-box flex">
      <div class="filter" :class="{active: filter == ''}" @click="changeFilter('')">
        全部专家
      </div>
      <div class="filter" :class="{active: filter == '1'}" @click="changeFilter('1')">
        按盈利率
      </div>
      <div class="filter" :class="{active: filter == '2'}" @click="changeFilter('2')">
        按成功率
      </div>
      <div class="filter" :class="{active: filter == '3'}" @click="changeFilter('3')">
        按连红数
      </div>
    </div>
    <div class="item" v-for="item in 6" :key="item">
      <div class="top flex">
        <div class="left flex">
          <van-image
            class="image"
            round
            width="37px"
            height="37px"
            fit="cover"
            src="/logo.png"
          >
            <template v-slot:error>
              <van-image
                round
                width="35px"
                height="35px"
                fit="cover"
                src="/logo.png"
              />
            </template>
          </van-image>
          <div class="info-box">
            <div class="box1 flex">
              <div class="name">极度股神</div>
              <img src="/img/vip/img.png" alt="极度证券" class="img">
            </div>
            <div class="flex">
              <div class="box2 flex">
                <img class="icon" src="/img/bull/icon/signing.png" alt="极度证券">
                <div>签约专家</div>
              </div>
              <div class="box3">
                9连红
              </div>
            </div>
          </div>
        </div>
        <div class="btn">
          <van-icon name="plus"/>关注
        </div>
      </div>
      <div class="box flex">
        <div>粉丝:<span class="red">3584</span></div>
        <div>关注:<span class="red">3584</span></div>
        <div>订阅:<span class="red">3584</span></div>
        <div>情报:<span class="red">3584</span></div>
      </div>
      <div class="box4 flex">
        <div>最新情报为基本面情报，涉及2只美股，更新于2小时前</div>
        <div class="check">
          点击查看
        </div>
      </div>
      <div class="box5">
        <div class="box6">
          <div class="number down">87%</div>
          <div>已完结情报成功率</div>
        </div>
        <div class="box6">
          <div class="number up">87%</div>
          <div>情报累计盈利率</div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
export default {
  data () {
    return {
      filter: ''
    }
  },
  methods: {
    changeFilter(val) {
      if (this.filter == val) {
        return
      }
      this.filter = val
    }
  }
}
</script>
<style lang="less" scoped>
.page {
  padding: 0 12px 20px;
}
.filter-box {
  padding: 12px 0;
  justify-content: space-between;
  column-gap: 9px;
  .filter {
    flex: 1;
    text-align: center;
    line-height: 30px;
    background-color: #F6F6F6;
    border-radius: 4px;
    font-size: 14px;
    color: #747474;
    cursor: pointer;
    &.active {
      background-color: #FFF5F1;
      color: var(--color-);
      font-weight: 600;
    }
  }
}
.item {
  background: linear-gradient(223deg, #697CB4 0%, #35447E 100%);
  border-radius: 4px;
  padding: 8px 11px 10px;
  margin-bottom: 10px;
  .top {
    justify-content: space-between;
    margin-bottom: 6px;
    .left {
      min-width: 10%;
      max-width: 100%;
    }
    .image {
      border: 2px solid #FFFFFF;
    }
    .info-box {
      padding-left: 8px;
      min-width: 10%;
      max-width: 100%;
    }
    .box1 {
      font-size: 15px;
      color: #fff;
      margin-bottom: 6px;
      .name {
        min-width: 10%;
        max-width: 100%;
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
      }
    }
    .box2 {
      font-size: 10px;
      color: #CF8C63;
      line-height: 16px;
      background-color: #FFF1E9;
      border-radius: 2px;
      padding: 0 3px;
      .icon {
        width: 11px;
        margin-right: 2px;
      }
    }
    .box3 {
      font-size: 10px;
      color: #D62619;
      line-height: 16px;
      background-color: #FFDEDC;
      border-radius: 2px;
      padding: 0 3px;
      margin-left: 5px;
    }
    .img {
      width: 23px;
      margin-left: 3px;
    }
    .btn {
      color: #FEFFFF;
      border-radius: 4px;
      background-color: var(--color-);
      line-height: 28px;
      font-weight: 600;
      padding: 0 8px;
      cursor: pointer;
      .van-icon {
        font-weight: 600;
        margin-right: 5px;
      }
    }
  }
  .box {
    border-radius: 4px;
    background-color: rgba(255, 255, 255, 0.13);
    height: 27px;
    justify-content: space-around;
    font-size: 12px;
    color: #FFFFFF;
    padding: 0 10px;
    margin-bottom: 8px;
  }
  .box4 {
    justify-content: space-between;
    font-size: 10px;
    color: #A1A8C5;
    margin-bottom: 12px;
    .check {
      cursor: pointer;
      color: #FFFFFF;
      text-decoration: underline;
    }
  }
  .box5 {
    display: flex;
    column-gap: 7px;
  }
  .box6 {
    text-align: center;
    background: linear-gradient(180deg, #FFFFFF 0%, #E4E7F1 100%);
    border-radius: 4px;
    padding: 7px 10px;
    flex: 1;
    font-size: 10px;
    color: #7F89AC;
    .number {
      font-size: 15px;
      font-weight: 600;
      margin-bottom: 5px;
    }
  }
  .red {
    color: var(--color-);
  }
  .down {
    color: #329D81;
  }
  .up {
    color: #D62619;
  }
}
</style>