<script setup lang="ts">
import { onMounted, reactive, ref } from "vue";
import breadcrumbStore from '@/store/modules/breadcrumb'

const { setBreadcrumb } = breadcrumbStore
setBreadcrumb([
  {
    label: '系统数据库',
  },
])
</script>

<template>
  <article class="data-library">
    <header class="header">
      <h1 class="title">系统数据库</h1>
      <p class="desc">包括系统所有的清单、定额、人材机等。</p>
    </header>

    <main class="main-wrap">
      <el-row :gutter="20">
        <el-col :span="8" :md="6" :lg="4">
          <el-card shadow="never">
            <div class="figure-wrap">
              <img src="@/assets/std-bill.svg" class="figure" alt />
            </div>
            <h3 class="title">标准清单</h3>
            <p class="desc">标准清单的描述</p>
          </el-card>
        </el-col>
        <el-col :span="8" :md="6" :lg="4">
          <el-card shadow="never">
            <div class="figure-wrap">
              <img src="@/assets/std-bill-library.svg" class="figure" alt />
            </div>
            <h3 class="title">清单规则库</h3>
            <p class="desc">清单规则库的描述</p>
          </el-card>
        </el-col>
        <el-col :span="8" :md="6" :lg="4">
          <el-card shadow="never">
            <div class="figure-wrap">
              <img src="@/assets/ration.svg" class="figure" alt />
            </div>
            <h3 class="title">定额库</h3>
            <p class="desc">定额库的描述</p>
          </el-card>
        </el-col>
        <el-col :span="8" :md="6" :lg="4">
          <el-card shadow="never">
            <div class="figure-wrap">
              <img src="@/assets/glj.svg" class="figure" alt />
            </div>
            <h3 class="title">人材机库</h3>
            <p class="desc">人材机库的描述</p>
          </el-card>
        </el-col>
        <el-col :span="8" :md="6" :lg="4">
          <el-card shadow="never">
            <div class="figure-wrap">
              <img src="@/assets/info-price.svg" class="figure" alt />
            </div>
            <h3 class="title">信息价库</h3>
            <p class="desc">信息价库的描述</p>
          </el-card>
        </el-col>
        <el-col :span="8" :md="6" :lg="4">
          <el-card shadow="never">
            <div class="figure-wrap">
              <img src="@/assets/bill-spirit.svg" class="figure" alt />
            </div>
            <h3 class="title">清单精灵</h3>
            <p class="desc">清单精灵的描述</p>
          </el-card>
        </el-col>
        <el-col :span="8" :md="6" :lg="4">
          <el-card shadow="never">
            <div class="figure-wrap">
              <img src="@/assets/fee-rate.svg" class="figure" alt />
            </div>
            <h3 class="title">费率库</h3>
            <p class="desc">费率库的描述</p>
          </el-card>
        </el-col>
        <el-col :span="8" :md="6" :lg="4">
          <el-card shadow="never">
            <div class="figure-wrap">
              <img src="@/assets/compute-program.svg" class="figure" alt />
            </div>
            <h3 class="title">计算程序库</h3>
            <p class="desc">计算程序库的描述</p>
          </el-card>
        </el-col>
      </el-row>
    </main>
  </article>
</template>

<style lang="scss" src="./style.scss" scoped></style>
