<script setup lang="ts">
import { useRouter } from 'vue-router';
const router = useRouter()

</script>

<template>
  <van-sticky>
    <van-nav-bar title="证件管理" />
  </van-sticky>
  <div class="body-bg">
    <div class="card">
      <van-grid :border="false" :column-num="4">
        <van-grid-item to="/cardManager/specialWork">
          <img src="@/assets/img/specialWork.png" width="45rpx" />
          <span class="vanicon_text">特种作业操作证</span>
        </van-grid-item>
        <van-grid-item to="/cardManager/equipment">
          <img src="@/assets/img/equipment.png" width="45rpx" />
          <span class="vanicon_text">特种设备操作证</span>
        </van-grid-item>
        <van-grid-item to="/cardManager/engineer">
          <img src="@/assets/img/engineer.png" width="45rpx" />
          <span class="vanicon_text">安全工程师证</span>
        </van-grid-item>
        <van-grid-item to="/cardManager/building">
          <img src="@/assets/img/building.png" width="45rpx" />
          <span class="vanicon_text">住建行业证</span>
        </van-grid-item>
        <van-grid-item to="/cardManager/manager">
          <img src="@/assets/img/manager.png" width="45rpx" />
          <span class="vanicon_text">安全管理人员证</span>
        </van-grid-item>
      </van-grid>
    </div>
  </div>
</template>

<style scoped>

.body-bg {
  background-color: #ffffff;
  padding-top: 10px;
}

.card {
  margin: 10px;
  border-radius: 8px;
  overflow: hidden;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
  background-color: #fff;
}

.title {
  padding-left: 20px;
  padding-top: 20px;
  font-weight: bold;
  font-size: 20px;
}

:deep(.van-grid-item__text) {
  font-size: var(--van-font-size-lg0);
}

.vanicon_text {
  font-size: var(--van-font-size-lg0);
  color: var(--van-grid-item-text-color);
  margin-top: var(--van-padding-xs);
  line-height: 1.5;
  word-break: break-all;
  text-align: center;
  height: 40px;
}
</style>
