<template>
  <div class="container">
    <div class="person">
      <span class="pic">
        <img src="/img/photo.png" alt="" />
      </span>
      <span class="name">营业员1</span>
      <div class="fr sx">
        <span>月度</span>
        <van-icon name="arrow-down" />
      </div>
    </div>
    <div class="title">月度拉新任务情况统计</div>
    <div class="title">9月新增客户</div>
    <van-list
      v-model="writeOff"
      :finished="finished"
      @load="onLoad"
      class="list"
    >
      <van-cell
        :value="item.time"
        class="content"
        v-for="(item, index) in list"
        :key="index"
      >
        <template slot="title">
          <img src="/img/photo.png" alt="" />
          <div class="info">
            <div class="custom-title">{{ item.name }}</div>
            <div>18866664444</div>
          </div>
        </template>
      </van-cell>
    </van-list>
  </div>
</template>

<script>
export default {
  data() {
    return {
      writeOff: false,
      finished: false,
      list: [
        {
          time: "2019 / 12 /27",
          src: "",
          name: "Solomon"
        }
      ]
    };
  },
  methods: {
    onLoad() {
      // fetchSomeThing().catch(() => {
      this.writeOff = false;
      // })
    }
  }
};
</script>

<style scoped>
.fr >>> .van-icon-arrow-down:before {
  margin-top: 3px;
}
.content >>> .van-cell__value {
  font-size: 14px;
  font-weight: 400;
  color: rgba(45, 71, 106, 1);
  line-height: 44px;
}
.container {
  background-color: #f8f8f8;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: start;
}
.sx {
  width: 52px;
  height: 20px;
  border-radius: 2px;
  display: flex;
  justify-content: center;
  border: 1px solid rgba(255, 255, 255, 1);
  font-size: 10px;
  font-weight: 500;
  color: #fff;
  text-align: center;
}
.list {
  width: 100%;
  display: flex;
}
.info {
  display: inline-block;
  margin-left: 12px;
}
.person {
  flex: 1;
  height: 72px;
  background: rgba(67, 119, 188, 1);
  width: 100%;
  padding: 12px 16px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.pic {
  /* display: inline-block; */
  width: 48px;
  height: 48px;
}
.pic img {
  width: 100%;
  border-radius: 50%;
}
.name {
  font-size: 14px;
  font-weight: bold;
  color: rgba(255, 255, 255, 1);
  margin-right: 175px;
}
.title {
  height: 44px;
  line-height: 44px;
  padding-left: 16px;
  font-size: 12px;
  font-weight: 400;
  color: rgba(45, 71, 106, 1);
}
.content img {
  width: 44px;
  height: 44px;
  border-radius: 50%;
}
</style>