on-site-robots-screen/src/views/home/components/right-two.vue

<template>
    <!-- 右二 ---- 智能对比 -->
    <div class="right-two child-container">
        <div class="title-container">
            <TitleBackground :title="`智能对比`" />
            <div class="more-btn">更多</div>
        </div>

        <!-- 内容区域 -->
        <div class="content-container">
            <div class="content-item" v-for="item in 4" :key="item" :class="`item-${item}`">
                <div>
                    <span style="padding-left: 10px; font-size: 16px"> 巡检次数 </span>
                    <span style="padding-left: 10px; font-size: 14px"> 总数： </span>
                    <span> 100 </span>
                </div>
                <div>
                    <span style="padding-left: 10px; font-size: 18px; font-weight: bold"> 26 </span>
                    <span style="font-size: 14px"> 次 </span>
                </div>
            </div>
        </div>
    </div>

    <n-drawer resizable placement="bottom" :default-height="600" v-model:show="morePanelVisible">
        现场定点巡检拍照

        <n-form ref="formRef" inline :model="searchForm" :rules="rules" label-placement="left">
            <n-form-item>
                <n-date-picker
                    clearable
                    type="daterange"
                    style="width: 280px"
                    placeholder="时间范围"
                    value-format="yyyy-MM-dd"
                />
            </n-form-item>
            <n-form-item>
                <n-input placeholder="输入姓名" style="width: 280px" />
            </n-form-item>
            <n-form-item>
                <n-select placeholder="选择类型" style="width: 280px" />
            </n-form-item>

            <n-form-item>
                <n-button attr-type="button"> 查询 </n-button>
                <n-button attr-type="button" style="margin-left: 10px"> 重置 </n-button>
            </n-form-item>
        </n-form>

        <n-data-table :columns="columns" :data="data" title-align="center" />
        <div class="pagination-container">
            <n-pagination
                v-model:page="page"
                :page-count="100"
                size="medium"
                show-quick-jumper
                show-size-picker
            />
        </div>
    </n-drawer>
</template>

<script setup>
import { BorderBox8 as DvBorderBox8 } from '@kjgl77/datav-vue3'

const morePanelVisible = ref(false)
const searchForm = ref({})
const page = ref(1)

const data = ref([
    {
        name: '2025-06-16 10:00:00',
        age: '1',
        address: '1',
        tags: '1',
        actions: '1',
    },
])
const columns = ref([
    {
        title: '日期时间',
        key: 'name',
    },
    {
        title: '图片',
        key: 'age',
    },
    {
        title: '姓名',
        key: 'address',
    },
    {
        title: '性别',
        key: 'tags',
    },
    {
        title: '工种',
        key: 'actions',
    },
])

const onHandleMore = () => {
    console.log('更多')
    morePanelVisible.value = true
}
</script>

<style lang="scss" scoped>
.right-two {
    .title-container {
        position: relative;

        .more-btn {
            position: absolute;
            right: 0;
            top: 0;
        }
    }
}

.content-container {
    flex: 1;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    grid-template-rows: repeat(4, 1fr);
    gap: 10px;
    padding: 20px 2px;

    .content-item {
        display: flex;
        flex-direction: column;
        justify-content: space-around;
        border: 1px solid #00deff;
        color: #b9e8fe;
    }

    .item-1 {
        grid-column: 1 / 3;
        grid-row: 1 / 3;
    }
    .item-2 {
        grid-column: 3 / 5;
        grid-row: 1 / 3;
    }
    .item-3 {
        grid-column: 1 / 3;
        grid-row: 3 / 5;
    }
    .item-4 {
        grid-column: 3 / 5;
        grid-row: 3 / 5;
    }
}
</style>