<template>
  <div class="app-container">
    <div class="header">
      <h2>直播主题：2023年市场分析</h2>
      <p>主播：李小瑞</p>
      <p>直播时间：2023-01-03 12:00 - 13:00</p>
    </div>
    <h3>营销人员所属客户的数据</h3>
    <ul>
      <li>
        <p>直播销售额</p>
        <strong>100万</strong>
      </li>
      <li>
        <p>直播销量</p>
        <strong>1000</strong>
      </li>
      <li>
        <p>商品点击数</p>
        <strong>250</strong>
      </li>
      <li>
        <p>
          观看人次
        </p>
        <strong>55万</strong>
      </li>
      <li>
        <p>完播率</p>
        <strong>50%</strong>
      </li>
      <li>
        <p>转粉率 （新增粉丝数 /观看人次）</p>
        <strong>50%</strong>
      </li>
      <li>
        <p>
          互动率（点赞数+评论数+分享数）/观看人次
        </p>
        <strong>50%</strong>
      </li>
      <li>
        <p>
          签约转化率
        </p>
        <strong>50%</strong>
      </li>
    </ul>
    <h3>互动统计</h3>
    <ul>
      <li>
        <p>评论数</p>
        <strong>100万</strong>
      </li>
      <li>
        <p>分享数</p>
        <strong>100万</strong>
      </li>
      <li>
        <p>
          点赞数
        </p>
        <strong>20万</strong>
      </li>
      <li>
        <p>
          预约（人）
        </p>
        <strong>55万</strong>
      </li>
    </ul>
    <h3 class="blue">客户统计</h3>
    <el-tabs v-model="activeName" @tab-click="handleClick">
      <el-tab-pane label="全部观看客户" name="全部观看客户">
        <TableData />
      </el-tab-pane>
      <el-tab-pane label="完整观看客户" name="完整观看客户">
        <TableData />
      </el-tab-pane>
      <el-tab-pane label="参与互动客户" name="参与互动客户">
        <TableData />
      </el-tab-pane>
      <el-tab-pane label="点击产品客户" name="点击产品客户">
        <TableData />
      </el-tab-pane>
      <el-tab-pane label="提交订单未付款客户" name="提交订单未付款客户">
        <TableData />
      </el-tab-pane>
      <el-tab-pane label="领券未使用客户" name="领券未使用客户">
        <TableData />
      </el-tab-pane>
      <el-tab-pane label="订阅产品客户" name="订阅产品客户">
        <TableData />
      </el-tab-pane>
    </el-tabs>
  </div>
</template>
<script>
import TableData from './components/TableData.vue'
export default {
  components: {
    TableData
  },
  data() {
    return {
      activeName: '全部观看客户'
    }
  },
  computed: {},
  mounted() {},

  methods: {}
}
</script>

<style scoped lang="scss">
.header {
  display: flex;
  align-items: center;
  h2 {
    font-size: 22x;
  }
  p {
    margin-left: 30px;
    font-size: 16px;
  }
}
h3 {
  font-size: 20px;
  &.blue {
    color: #185784;
  }
}
ul {
  list-style: none;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  li {
    background: rgba(0, 0, 0, 0.1);
    padding: 10px 30px;
    margin-right: 10px;
    margin-bottom: 10px;
    p {
      margin: 0 0 10px 0;
      font-size: 16px;
      line-height: 20px;
    }
    strong {
      font-size: 18px;
    }
  }
}
</style>
