vue3 格子报表统计模板

代码如下：

<template>
    <div class="waterFeeStatistics-container">
        <div class="term-base-list">
            <div class="card-item item-1">
                <div class="item-title">海运数量</div>
                <div class="item-content">
                    <span class="item-amount">6</span>
                    <span class="item-unit">条</span>
                </div>
                <div class="item-icon-img" />
            </div>
            <div class="card-item item-4">
                <div class="item-title">物流园数量</div>
                <div class="item-content">
                    <span class="item-amount">6</span>
                    <span class="item-unit">条</span>
                </div>
                <div class="item-icon-img" />
            </div>
            <div class="card-item item-5">
                <div class="item-title">快递数据</div>
                <div class="item-content">
                    <span class="item-amount">6</span>
                    <span class="item-unit">条</span>
                </div>
                <div class="item-icon-img" />
            </div>
            <div class="card-item item-6">
                <div class="item-title">用户数量</div>
                <div class="item-content">
                    <span class="item-amount">6</span>
                    <span class="item-unit">条</span>
                </div>
                <div class="item-icon-img" />
            </div>
            <div class="card-item item-7">
                <div class="item-title">其他数量</div>
                <div class="item-content">
                    <span class="item-amount">6</span>
                    <span class="item-unit">条</span>
                </div>
                <div class="item-icon-img" />
            </div>
        </div>
    </div>
</template>
<script setup lang="ts" name="tasks">
import { defineAsyncComponent, reactive, onMounted, toRefs, ref } from 'vue';
const state = reactive({
    title: '更新',
    schoolID: null,
    schoolList: [
        {
            id: 1,
            name: '小',
        },
        {
            id: 2,
            name: '大',
        },
    ],
});
// 这样暴露出来后页面可以直接使用schoolList,而不需要state.schoolList
const { schoolList } = toRefs(state);
// 表格数据
const tableData = ref<any[]>([]);
const loading = ref(false);
const pageIndex = ref(1);
// 详情弹窗
const dialogVisible = ref(false);
const detailLoading = ref(false);
const detail = ref<any>({});
onMounted(() => {
    pageIndex.value = 1;
});
</script>
<style scoped="scoped" lang="scss">
.waterFeeStatistics-container{
    margin-bottom: 20px;
}
.term-base-list {
    display: flex;
    justify-content: space-between;
    margin-right: -15px;
    .card-item {
        // width: 220px;
        flex: 1;
        margin-right: 15px;
        // height: 100px;
        height: 93px;
        padding: 10px;
        color: #fff;
        border-radius: 6px;
        position: relative;
        box-shadow: 0 2px 12px 0 rgb(0 0 0 / 10%);
        .item-title {
            font-size: 16px;
        }
        .item-content {
            position: absolute;
            width: 100%;
            text-align: center;
            top: 36px;
            left: 0px;
            .item-amount {
                font-size: 25px;
            }
            .item-unit {
                font-size: 16px;
                margin-left: 5px;
            }
        }
        .item-icon-img {
            position: absolute;
            bottom: 8px;
            right: 10px;
        }
    }
    .item-1 {
        background: linear-gradient(90deg, #2fe5c2, #13c6fa);
        .item-icon-img {
            width: 48px;
            height: 40px;
            background-image: url('/src/assets/imgs/class_count.png');
        }
    }
    .item-2 {
        background: linear-gradient(90deg, #61bdfe, #278adc);
        .item-icon-img {
            width: 40px;
            height: 39px;
            background-image: url('/src/assets/imgs/stu_count.png');
        }
    }
    .item-3 {
        background: linear-gradient(90deg, #5686d6, #315dbf);
        .item-icon-img {
            width: 52px;
            height: 38px;
            background-image: url('/src/assets/imgs/evaluation_course_count.png');
        }
    }
    .item-4 {
        background: linear-gradient(90deg, #646ba4, #90b7d8);
        .item-icon-img {
            width: 43px;
            height: 37px;
            background-image: url('/src/assets/imgs/knowledge_count.png');
        }
    }
    .item-5 {
        background: linear-gradient(90deg, #fea39d, #ff6f8f);
        .item-icon-img {
            width: 42px;
            height: 38px;
            background-image: url('/src/assets/imgs/labroom_course_count.png');
        }
    }
    .item-6 {
        background: linear-gradient(90deg, #5bccf2, #5da5e3);
        .item-icon-img {
            width: 38px;
            height: 38px;
            background-image: url('/src/assets/imgs/labroom_course_count.png');
        }
    }
    .item-7 {
        background: linear-gradient(90deg, #d1c6f8, #a2c4f7);
        .item-icon-img {
            width: 43px;
            height: 37px;
            background-image: url('/src/assets/imgs/pro_count.png');
        }
    }
}
</style>

tip:图标没有加进来，不要可以去掉