<script setup lang="ts">

</script>

<template>
  <div class="page flex flex-col justify-center items-center w-full h-full">
    <a-row :gutter="[24, 24]">
      <a-col class="gutter-row" :span="8">
        <div class="gutter-box w-full bg-white hover:shadow hover:bg-blue-100 hover:cursor-pointer flex">
          <img src="https://oss.wsdns.cn/20250512/7717af25f7cd4ce2b721526efcf56b8e.png" style="width: 36px; height: 36px;" />
          <span class="px-3">开单</span>
        </div>
      </a-col>
      <a-col class="gutter-row" :span="8">
        <div class="gutter-box w-full bg-white hover:shadow hover:bg-blue-100 hover:cursor-pointer flex">
          <img src="https://oss.wsdns.cn/20250512/9070052ee0914203879f0a63d34c85e9.png" style="width: 36px; height: 36px;" />
          <span class="px-3">续费</span>
        </div>
      </a-col>
      <a-col class="gutter-row" :span="8">
        <div class="gutter-box w-full bg-white hover:shadow hover:bg-blue-100 hover:cursor-pointer flex">
          <img src="https://oss.wsdns.cn/20250512/4f1c94ea39474268b366be909dd87c39.png" style="width: 36px; height: 36px;" />
          <span class="px-3">售后</span>
        </div>
      </a-col>
      <a-col class="gutter-row" :span="12">
        <div class="gutter-box w-full bg-white hover:shadow hover:bg-blue-100 hover:cursor-pointer flex">
          <img src="https://oss.wsdns.cn/20250512/65fd695fd61a414f88eddddcce674c65.png" style="width: 36px; height: 36px;" />
          <span class="px-3">知识库</span>
        </div>
      </a-col>
      <a-col class="gutter-row" :span="12">
        <div class="gutter-box w-full bg-white hover:shadow hover:bg-blue-100 hover:cursor-pointer flex">
          <img src="https://oss.wsdns.cn/20250512/0c65d6adc8174b31b97411bcb2c42d52.png" style="width: 36px; height: 36px;" />
          <span class="px-3">报表</span>
        </div>
      </a-col>
    </a-row>
  </div>
</template>

<style scoped lang="less">
  .page{
    background-image: url('@/assets/bg-2.jpeg') !important;
    background-size: 100% 100%;
  }
  .gutter-row{
  }
  .gutter-box{
    font-size: 24px;
    border-radius: 5px;
    height: 150px;
    padding: 16px;
  }
  //.gutter-box:hover{
  //  background: linear-gradient(to bottom, #ffffff, #84b4ff);
  //}
</style>
