<template>
  <card title="快捷工具">
    <div class="wel-cards-quick">
      <ul>
        <li v-for="item in quickBtn" :key="item.id">
          <router-link tag="div" :to="item.url" :title="item.name">
            <img :src="item.icon" />
            <div>{{item.name}}</div>
          </router-link>
        </li>
      </ul>
    </div>
  </card>
</template>

<script>
import card from "./card";

export default {
  components: { card },
  data () {
    return {
      quickBtn: [
        { id: 1, url: "/tenant/mission/index", icon: "/manage/img/icon/task.png", name: "发布零工岗位" },
        { id: 2, url: "/tenant/talents/index", icon: "/manage/img/icon/m_search.png", name: "人才库查询" },
        { id: 3, url: "", icon: "/manage/img/icon/insure_search.png", name: "社区服务站" },
        { id: 4, url: "", icon: "/manage/img/icon/count.png", name: "政策制度" }
      ]
    };
  }
};
</script>

<style>
.wel-cards-quick {
  /* box-sizing: border-box; */
  /* padding:32px 0 32px 0; */
  position: absolute;
  top: 72px;
  bottom: 32px;
  left: 0;
  right: 0;
  /* height: 220px; */

  margin: 0 auto;
}
.wel-cards-quick ul {
  margin: 0;
  padding: 0;
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
}
.wel-cards-quick li {
  list-style: none;
  flex-basis: 33.3%;
  text-align: center;
}
.wel-cards-quick div {
  display: inline-block;
  text-align: center;
  cursor: pointer;
}
.wel-cards-quick img {
  width: 40px;
  height: auto;
  display: block;
  margin: 0 auto;
}
.wel-cards-quick div {
  width: 100%;
  padding-top: 5px;
  overflow: hidden;
  text-align: center;
  white-space: nowrap;
  text-overflow: ellipsis;
}
</style>
