<template>
  <div>
    <div class="flexBody">
      <div class="tab3">
        <table class="dashed-table">
          <tr>
            <td>
              <a v-for="p in list" :key="p.id" @click="goLeaderInfo(p.id,p.labelStr)">
                <img :src="fillImgUrl_webSite(p.picUrl)">
                {{ p.realName }}
                <el-icon>
                  <Link />
                </el-icon>
              </a>
            </td>
          </tr>
        </table>
      </div>


    </div>
    <div class="forWei">

      <div>
        <div class="linkBox mb20">
          <a v-for="(p) in list" :key="p.id" class="item" @click="goLeaderInfo(p.id,p.labelStr)">
            {{ p.realName }}
            <el-icon>
              <ArrowRight />
            </el-icon>
          </a>
        </div>
      </div>

    </div>
  </div>

</template>

<script setup>
import { useRouter } from 'vue-router'

const router = useRouter()
import { onMounted, ref } from 'vue'
import { getPersonByLabel } from '@/apiPc/webSite'

const list = ref([])
const query = ref({
  pageSize: 999,
  pageNum: 1,
  label: 10
})
onMounted(() => {
  getPersonList()
})
const getPersonList = () => {
  getPersonByLabel(query.value).then(res => {
    list.value = res.rows
  })
}

function goLeaderInfo(id, name) {
  router.push({
    path: `/about/leader/${id}`,
    query: {
      name: encodeURIComponent(name)
    }
  })
}
</script>

<style scoped lang="scss">

.custom-tabs-label {
  display: flex;
  align-items: center;
}

:deep(.el-tabs--left .el-tabs__item.is-left) {
  margin: 0 0 20px;
}

:deep(.el-tabs--left .el-tabs__active-bar.is-left) {
  left: 0 !important;
  right: auto !important;
}

:deep(.el-tabs--left .el-tabs__nav-wrap.is-left::after) {
  display: none;
}

:deep(.el-tabs__item.is-left.is-active) {
  font-size: 15px;
  background: #fff;
}

:deep(.el-tabs--left) {
  background: #f6f6f5;
}

:deep(.el-tabs--left .el-tabs__header.is-left) {
  min-width: 200px;
  padding: 30px 0 30px 30px;
  height: 70vh;
  margin: 0
}

.tabFont {
  margin-left: 20px;
}

.tab3 {
  width: 60vw
}

.flexBody {
  display: flex
}

.forWei {
  display: none;
}

@media (max-width: 500px) {
  .forWei {
    display: block;

  }
  .flexBody {
    display: none
  }
}
</style>