<template>
  <div id="list">
    <div class="main">
      <div class="tab-header">
        <div :class="flag == 1 ? 'item active' : 'item'" @click="flag = 1">
          1
        </div>
        <div :class="flag == 2 ? 'item active' : 'item'" @click="flag = 2">
          2
        </div>
        <div :class="flag == 3 ? 'item active' : 'item'" @click="flag = 3">
          3
        </div>
      </div>
      <div
        class="box-list"
        v-for="(item, i) in data"
        :key="item.id"
        v-show="flag == i + 1"
      >
        <ul>
          <li v-for="child in item.children" :key="child.id">
            <img src="../../assets/images/pic.png" alt="" />
            <div>
              <p>{{ child.name }}</p>
              <p>时间</p>
              <p>链接</p>
            </div>
          </li>
        </ul>
      </div>
    </div>
  </div>
</template>
<script>
export default {
  data() {
    return {
      flag: 1,
      data: [
        {
          id: 1,
          children: [
            {
              id: 5,
              name: "1111111",
            },
          ],
        },
        {
          id: 2,
          children: [
            {
              id: 6,
              name: "22222222",
            },
          ],
        },
        {
          id: 3,
          children: [
            {
              id: 7,
              name: "333333333",
            },
          ],
        },
      ],
    };
  },
};
</script>
<style>
#list .main {
  display: flex;
  flex-direction: column;
}
.main .tab-header {
  display: flex;
  width: 90%;
  align-self: center;
  justify-content: space-around;
}
.item {
  background-color: #8cdff0;
  border: 1px solid pink;
  width: 120px;
  line-height: 20px;
  text-align: center;
  color: #4c404d;
}
.active {
  background-color: pink;
}
.box-list {
  border: 3px solid pink;
  width: 90%;
  align-self: center;
}
img {
  width: 100px;
  /* height: 200px; */
  margin-right: 10px;
}

.box-list ul {
  display: flex;
  flex-direction: column;
}
.box-list ul li {
  list-style: none;
  display: flex;
}
.box-list ul li > div {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-around;
}
</style>
