548 lines
19 KiB
Vue
548 lines
19 KiB
Vue
|
<template>
|
|||
|
|
<!-- 设备管理-识别图片 -->
|
|||
|
|
<el-card class="image-recognition-container">
|
|||
|
|
<!-- 顶部过滤器 -->
|
|||
|
|
<el-card v-show="showSearch" class="search-card">
|
|||
|
|
<el-form :inline="true" ref="queryFormRef" :model="queryParams" label-width="auto">
|
|||
|
|
<el-form-item>
|
|||
|
|
<el-select clearable filterable v-model="queryParams.vehicleType" placeholder="选择选项"
|
|||
|
|
style="width: 250px">
|
|||
|
|
<el-option v-for="item in vehicleTypeOptions" :key="item.value" :label="item.label"
|
|||
|
|
:value="item.value" />
|
|||
|
|
</el-select>
|
|||
|
|
</el-form-item>
|
|||
|
|
<el-form-item >
|
|||
|
|
<el-date-picker v-model="timeRange" type="datetimerange" range-separator=" ~ "
|
|||
|
|
start-placeholder="开始时间" end-placeholder="结束时间" value-format="yyyy-MM-dd HH:mm"
|
|||
|
|
format="yyyy-MM-dd HH:mm" style="width: 400px" @change="handleTimeRangeChange" />
|
|||
|
|
</el-form-item>
|
|||
|
|
<el-form-item>
|
|||
|
|
<el-button class="query-btn" @click="handleQuery">查询</el-button>
|
|||
|
|
<el-button class="reset-btn" @click="handleReset">重置</el-button>
|
|||
|
|
<el-button class="export-btn" @click="handleExport">导出</el-button>
|
|||
|
|
</el-form-item>
|
|||
|
|
</el-form>
|
|||
|
|
</el-card>
|
|||
|
|
|
|||
|
|
<!-- 数据列表 -->
|
|||
|
|
<el-card class="table-card">
|
|||
|
|
<div class="table-header">
|
|||
|
|
<h3 class="table-title">数据列表</h3>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<!-- 图像网格 -->
|
|||
|
|
<div class="image-grid-container" v-loading="loading">
|
|||
|
|
<div v-for="(item, index) in imageList" :key="index" class="image-card">
|
|||
|
|
<div class="image-wrapper">
|
|||
|
|
<el-image :src="item.imageUrl || getDefaultImage()" fit="cover" class="detection-image"
|
|||
|
|
:preview-src-list="previewImageList">
|
|||
|
|
<div slot="error" class="image-error">
|
|||
|
|
<i class="el-icon-picture"></i>
|
|||
|
|
<span>图片加载失败</span>
|
|||
|
|
</div>
|
|||
|
|
</el-image>
|
|||
|
|
<!-- 覆盖文本 -->
|
|||
|
|
<div class="image-overlay">
|
|||
|
|
<div class="overlay-text">
|
|||
|
|
{{ formatOverlayText(item) }}
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
<!-- 检测框（如果有坐标数据） -->
|
|||
|
|
<div v-if="item.boxes && item.boxes.length > 0" class="detection-boxes">
|
|||
|
|
<div v-for="(box, boxIndex) in item.boxes" :key="boxIndex" class="detection-box" :style="{
|
|||
|
|
left: (box.xPercent || box.x) + '%',
|
|||
|
|
top: (box.yPercent || box.y) + '%',
|
|||
|
|
width: (box.widthPercent || box.width) + '%',
|
|||
|
|
height: (box.heightPercent || box.height) + '%'
|
|||
|
|
}">
|
|||
|
|
<div class="box-corner corner-tl"></div>
|
|||
|
|
<div class="box-corner corner-tr"></div>
|
|||
|
|
<div class="box-corner corner-bl"></div>
|
|||
|
|
<div class="box-corner corner-br"></div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
<div v-if="imageList.length === 0 && !loading" class="empty-state">
|
|||
|
|
<i class="el-icon-picture-outline"></i>
|
|||
|
|
<p>暂无数据</p>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<!-- 分页 -->
|
|||
|
|
<div class="pagination-wrapper">
|
|||
|
|
<pagination :total="total" @pagination="handlePagination" :page.sync="queryParams.pageNum"
|
|||
|
|
:limit.sync="queryParams.pageSize" />
|
|||
|
|
</div>
|
|||
|
|
</el-card>
|
|||
|
|
</el-card>
|
|||
|
|
</template>
|
|||
|
|
|
|||
|
|
<script>
|
|||
|
|
import { imageRecognitionListAPI, exportImageRecognitionAPI } from '@/api/device/image-recognition'
|
|||
|
|
import test_image from '@/assets/images/test_image.png'
|
|||
|
|
export default {
|
|||
|
|
name: 'ImageRecognition',
|
|||
|
|
data() {
|
|||
|
|
return {
|
|||
|
|
showSearch: true,
|
|||
|
|
loading: false,
|
|||
|
|
imageList: [],
|
|||
|
|
total: 0,
|
|||
|
|
timeRange: null,
|
|||
|
|
test_image,
|
|||
|
|
vehicleTypeOptions: [
|
|||
|
|
{ label: '油车', value: '油车' },
|
|||
|
|
{ label: '货车', value: '货车' },
|
|||
|
|
{ label: '客车', value: '客车' },
|
|||
|
|
{ label: '小车', value: '小车' },
|
|||
|
|
],
|
|||
|
|
queryParams: {
|
|||
|
|
pageNum: 1,
|
|||
|
|
pageSize: 10,
|
|||
|
|
vehicleType: '',
|
|||
|
|
startTime: '',
|
|||
|
|
endTime: '',
|
|||
|
|
},
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
|
|||
|
|
computed: {
|
|||
|
|
previewImageList() {
|
|||
|
|
return this.imageList.map(item => item.imageUrl).filter(url => url)
|
|||
|
|
},
|
|||
|
|
},
|
|||
|
|
|
|||
|
|
created() {
|
|||
|
|
this.getImageList()
|
|||
|
|
},
|
|||
|
|
|
|||
|
|
methods: {
|
|||
|
|
/** 获取测试数据 */
|
|||
|
|
getTestData() {
|
|||
|
|
const vehicleTypes = ['油车', '货车', '客车', '小车']
|
|||
|
|
const locations = ['绕城高速', '京沪高速', '沪杭高速', '杭甬高速', '沈海高速']
|
|||
|
|
const testData = []
|
|||
|
|
|
|||
|
|
// 生成20条测试数据
|
|||
|
|
for (let i = 0; i < 20; i++) {
|
|||
|
|
const vehicleType = vehicleTypes[i % vehicleTypes.length]
|
|||
|
|
const location = locations[i % locations.length]
|
|||
|
|
const date = new Date()
|
|||
|
|
date.setDate(date.getDate() - Math.floor(i / 4))
|
|||
|
|
date.setHours(8 + (i % 12), 30 + (i % 30), 0, 0)
|
|||
|
|
const detectTime = this.formatDateTime(date)
|
|||
|
|
|
|||
|
|
testData.push({
|
|||
|
|
id: i + 1,
|
|||
|
|
imageUrl: this.test_image,
|
|||
|
|
location: location,
|
|||
|
|
detectTime: detectTime,
|
|||
|
|
vehicleType: vehicleType,
|
|||
|
|
// 添加检测框数据（部分数据有检测框，使用百分比定位）
|
|||
|
|
boxes: i % 3 === 0 ? [{
|
|||
|
|
xPercent: 20 + (i % 3) * 5,
|
|||
|
|
yPercent: 30 + (i % 2) * 10,
|
|||
|
|
widthPercent: 30 + (i % 5) * 2,
|
|||
|
|
heightPercent: 25 + (i % 4) * 3
|
|||
|
|
}] : []
|
|||
|
|
})
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
return testData
|
|||
|
|
},
|
|||
|
|
|
|||
|
|
/** 格式化日期时间 */
|
|||
|
|
formatDateTime(date) {
|
|||
|
|
const year = date.getFullYear()
|
|||
|
|
const month = String(date.getMonth() + 1).padStart(2, '0')
|
|||
|
|
const day = String(date.getDate()).padStart(2, '0')
|
|||
|
|
const hours = String(date.getHours()).padStart(2, '0')
|
|||
|
|
const minutes = String(date.getMinutes()).padStart(2, '0')
|
|||
|
|
return `${year}-${month}-${day} ${hours}:${minutes}`
|
|||
|
|
},
|
|||
|
|
|
|||
|
|
/** 获取图像列表 */
|
|||
|
|
async getImageList() {
|
|||
|
|
try {
|
|||
|
|
this.loading = true
|
|||
|
|
const params = { ...this.queryParams }
|
|||
|
|
|
|||
|
|
// 尝试调用API，如果失败则使用测试数据
|
|||
|
|
try {
|
|||
|
|
const res = await imageRecognitionListAPI(params)
|
|||
|
|
if (res.code === 200) {
|
|||
|
|
this.imageList = res.rows || []
|
|||
|
|
this.total = res.total || 0
|
|||
|
|
return
|
|||
|
|
}
|
|||
|
|
} catch (apiError) {
|
|||
|
|
console.log('API调用失败，使用测试数据:', apiError)
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// 使用测试数据
|
|||
|
|
const allTestData = this.getTestData()
|
|||
|
|
|
|||
|
|
// 应用过滤条件
|
|||
|
|
let filteredData = allTestData
|
|||
|
|
if (this.queryParams.vehicleType) {
|
|||
|
|
filteredData = filteredData.filter(item => item.vehicleType === this.queryParams.vehicleType)
|
|||
|
|
}
|
|||
|
|
if (this.queryParams.startTime) {
|
|||
|
|
filteredData = filteredData.filter(item => {
|
|||
|
|
const itemTime = new Date(item.detectTime.replace(' ', 'T'))
|
|||
|
|
const startTime = new Date(this.queryParams.startTime.replace(' ', 'T'))
|
|||
|
|
return itemTime >= startTime
|
|||
|
|
})
|
|||
|
|
}
|
|||
|
|
if (this.queryParams.endTime) {
|
|||
|
|
filteredData = filteredData.filter(item => {
|
|||
|
|
const itemTime = new Date(item.detectTime.replace(' ', 'T'))
|
|||
|
|
const endTime = new Date(this.queryParams.endTime.replace(' ', 'T'))
|
|||
|
|
return itemTime <= endTime
|
|||
|
|
})
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// 分页处理
|
|||
|
|
const start = (this.queryParams.pageNum - 1) * this.queryParams.pageSize
|
|||
|
|
const end = start + this.queryParams.pageSize
|
|||
|
|
this.imageList = filteredData.slice(start, end)
|
|||
|
|
this.total = filteredData.length
|
|||
|
|
|
|||
|
|
} catch (error) {
|
|||
|
|
console.error('获取图像列表失败:', error)
|
|||
|
|
// 如果出错，也使用测试数据
|
|||
|
|
const allTestData = this.getTestData()
|
|||
|
|
const start = (this.queryParams.pageNum - 1) * this.queryParams.pageSize
|
|||
|
|
const end = start + this.queryParams.pageSize
|
|||
|
|
this.imageList = allTestData.slice(start, end)
|
|||
|
|
this.total = allTestData.length
|
|||
|
|
} finally {
|
|||
|
|
this.loading = false
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
|
|||
|
|
/** 查询操作 */
|
|||
|
|
handleQuery() {
|
|||
|
|
this.queryParams.pageNum = 1
|
|||
|
|
this.getImageList()
|
|||
|
|
},
|
|||
|
|
|
|||
|
|
/** 重置操作 */
|
|||
|
|
handleReset() {
|
|||
|
|
this.queryParams.vehicleType = ''
|
|||
|
|
this.queryParams.startTime = ''
|
|||
|
|
this.queryParams.endTime = ''
|
|||
|
|
this.timeRange = null
|
|||
|
|
this.queryParams.pageNum = 1
|
|||
|
|
this.getImageList()
|
|||
|
|
},
|
|||
|
|
|
|||
|
|
/** 导出操作 */
|
|||
|
|
async handleExport() {
|
|||
|
|
try {
|
|||
|
|
this.loading = true
|
|||
|
|
const params = { ...this.queryParams }
|
|||
|
|
const res = await exportImageRecognitionAPI(params)
|
|||
|
|
if (res.code === 200) {
|
|||
|
|
// 处理文件下载
|
|||
|
|
const blob = new Blob([res], { type: 'application/vnd.ms-excel' })
|
|||
|
|
const url = window.URL.createObjectURL(blob)
|
|||
|
|
const link = document.createElement('a')
|
|||
|
|
link.href = url
|
|||
|
|
link.download = `图像识别数据_${new Date().getTime()}.xlsx`
|
|||
|
|
link.click()
|
|||
|
|
window.URL.revokeObjectURL(url)
|
|||
|
|
this.$message.success('导出成功')
|
|||
|
|
} else {
|
|||
|
|
this.$message.error(res.msg || '导出失败')
|
|||
|
|
}
|
|||
|
|
} catch (error) {
|
|||
|
|
console.error('导出失败:', error)
|
|||
|
|
this.$message.error('导出失败')
|
|||
|
|
} finally {
|
|||
|
|
this.loading = false
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
|
|||
|
|
/** 时间范围变化 */
|
|||
|
|
handleTimeRangeChange(value) {
|
|||
|
|
if (value && value.length === 2) {
|
|||
|
|
this.queryParams.startTime = value[0]
|
|||
|
|
this.queryParams.endTime = value[1]
|
|||
|
|
} else {
|
|||
|
|
this.queryParams.startTime = ''
|
|||
|
|
this.queryParams.endTime = ''
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
|
|||
|
|
/** 分页变化 */
|
|||
|
|
handlePagination({ page, limit }) {
|
|||
|
|
this.queryParams.pageNum = page
|
|||
|
|
this.queryParams.pageSize = limit
|
|||
|
|
this.getImageList()
|
|||
|
|
},
|
|||
|
|
|
|||
|
|
/** 获取默认图片 */
|
|||
|
|
getDefaultImage() {
|
|||
|
|
return 'data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjAwIiBoZWlnaHQ9IjIwMCIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj48cmVjdCB3aWR0aD0iMjAwIiBoZWlnaHQ9IjIwMCIgZmlsbD0iI2Y1ZjVmNSIvPjx0ZXh0IHg9IjUwJSIgeT0iNTAlIiBmb250LWZhbWlseT0iQXJpYWwiIGZvbnQtc2l6ZT0iMTQiIGZpbGw9IiM5OTk5OTkiIHRleHQtYW5jaG9yPSJtaWRkbGUiIGR5PSIuM2VtIj7lm77niYfliqDovb3lpLHotKU8L3RleHQ+PC9zdmc+'
|
|||
|
|
},
|
|||
|
|
|
|||
|
|
/** 格式化覆盖文本 */
|
|||
|
|
formatOverlayText(item) {
|
|||
|
|
const parts = []
|
|||
|
|
if (item.location) parts.push(item.location)
|
|||
|
|
if (item.detectTime) parts.push(item.detectTime)
|
|||
|
|
if (item.vehicleType) parts.push(item.vehicleType)
|
|||
|
|
return parts.join(' ') || '未知位置'
|
|||
|
|
},
|
|||
|
|
},
|
|||
|
|
}
|
|||
|
|
</script>
|
|||
|
|
<style scoped lang="scss">
|
|||
|
|
.image-recognition-container {
|
|||
|
|
height: calc(100vh - 84px);
|
|||
|
|
overflow: hidden;
|
|||
|
|
background: linear-gradient(180deg, #f1f6ff 20%, #e5efff 100%);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.search-card {
|
|||
|
|
margin-bottom: 10px;
|
|||
|
|
|
|||
|
|
::v-deep .el-form-item {
|
|||
|
|
margin-bottom: 10px;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.query-btn {
|
|||
|
|
width: 98px;
|
|||
|
|
height: 36px;
|
|||
|
|
background: #1f72ea;
|
|||
|
|
box-shadow: 0px 4px 8px 0px rgba(51, 135, 255, 0.5);
|
|||
|
|
border-radius: 4px;
|
|||
|
|
color: #fff;
|
|||
|
|
border: none;
|
|||
|
|
font-size: 14px;
|
|||
|
|
transition: all 0.3s;
|
|||
|
|
|
|||
|
|
&:hover {
|
|||
|
|
background: #4a8bff;
|
|||
|
|
box-shadow: 0px 6px 12px 0px rgba(51, 135, 255, 0.6);
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.reset-btn {
|
|||
|
|
width: 98px;
|
|||
|
|
height: 36px;
|
|||
|
|
background: #ffffff;
|
|||
|
|
box-shadow: 0px 4px 8px 0px rgba(76, 76, 76, 0.2);
|
|||
|
|
border-radius: 4px;
|
|||
|
|
color: #333;
|
|||
|
|
border: none;
|
|||
|
|
font-size: 14px;
|
|||
|
|
transition: all 0.3s;
|
|||
|
|
|
|||
|
|
&:hover {
|
|||
|
|
background: #f5f5f5;
|
|||
|
|
box-shadow: 0px 6px 12px 0px rgba(76, 76, 76, 0.3);
|
|||
|
|
color: #40a9ff;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.export-btn {
|
|||
|
|
width: 98px;
|
|||
|
|
height: 36px;
|
|||
|
|
background: #1f72ea;
|
|||
|
|
box-shadow: 0px 4px 8px 0px rgba(51, 135, 255, 0.5);
|
|||
|
|
border-radius: 4px;
|
|||
|
|
color: #fff;
|
|||
|
|
border: none;
|
|||
|
|
font-size: 14px;
|
|||
|
|
transition: all 0.3s;
|
|||
|
|
|
|||
|
|
&:hover {
|
|||
|
|
background: #4a8bff;
|
|||
|
|
box-shadow: 0px 6px 12px 0px rgba(51, 135, 255, 0.6);
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.table-card {
|
|||
|
|
height: calc(100vh - 230px);
|
|||
|
|
display: flex;
|
|||
|
|
flex-direction: column;
|
|||
|
|
|
|||
|
|
::v-deep .el-card__body {
|
|||
|
|
padding: 20px;
|
|||
|
|
display: flex;
|
|||
|
|
flex-direction: column;
|
|||
|
|
height: 100%;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.table-header {
|
|||
|
|
flex-shrink: 0;
|
|||
|
|
padding-bottom: 16px;
|
|||
|
|
|
|||
|
|
.table-title {
|
|||
|
|
font-size: 16px;
|
|||
|
|
font-weight: 600;
|
|||
|
|
color: #333;
|
|||
|
|
margin: 0;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.image-grid-container {
|
|||
|
|
flex: 1;
|
|||
|
|
overflow-y: auto;
|
|||
|
|
display: grid;
|
|||
|
|
grid-template-columns: repeat(4, 1fr);
|
|||
|
|
gap: 16px;
|
|||
|
|
padding: 0 0 16px 0;
|
|||
|
|
|
|||
|
|
&::-webkit-scrollbar {
|
|||
|
|
width: 6px;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
&::-webkit-scrollbar-track {
|
|||
|
|
background: transparent;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
&::-webkit-scrollbar-thumb {
|
|||
|
|
background: rgba(0, 0, 0, 0.2);
|
|||
|
|
border-radius: 3px;
|
|||
|
|
|
|||
|
|
&:hover {
|
|||
|
|
background: rgba(0, 0, 0, 0.3);
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.image-card {
|
|||
|
|
background: #fff;
|
|||
|
|
border-radius: 4px;
|
|||
|
|
overflow: hidden;
|
|||
|
|
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
|
|||
|
|
transition: all 0.3s;
|
|||
|
|
|
|||
|
|
&:hover {
|
|||
|
|
box-shadow: 0 4px 16px rgba(0, 0, 0, 0.15);
|
|||
|
|
transform: translateY(-2px);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.image-wrapper {
|
|||
|
|
position: relative;
|
|||
|
|
width: 100%;
|
|||
|
|
padding-top: 75%; // 4:3 比例
|
|||
|
|
overflow: hidden;
|
|||
|
|
|
|||
|
|
.detection-image {
|
|||
|
|
position: absolute;
|
|||
|
|
top: 0;
|
|||
|
|
left: 0;
|
|||
|
|
width: 100%;
|
|||
|
|
height: 100%;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.image-overlay {
|
|||
|
|
position: absolute;
|
|||
|
|
top: 0;
|
|||
|
|
left: 0;
|
|||
|
|
width: 100%;
|
|||
|
|
padding: 8px;
|
|||
|
|
background: linear-gradient(to bottom, rgba(0, 0, 0, 0.6), transparent);
|
|||
|
|
pointer-events: none;
|
|||
|
|
|
|||
|
|
.overlay-text {
|
|||
|
|
color: #fff;
|
|||
|
|
font-size: 12px;
|
|||
|
|
line-height: 1.4;
|
|||
|
|
text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5);
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.detection-boxes {
|
|||
|
|
position: absolute;
|
|||
|
|
top: 0;
|
|||
|
|
left: 0;
|
|||
|
|
width: 100%;
|
|||
|
|
height: 100%;
|
|||
|
|
pointer-events: none;
|
|||
|
|
|
|||
|
|
.detection-box {
|
|||
|
|
position: absolute;
|
|||
|
|
border: 2px solid #ff0000;
|
|||
|
|
box-sizing: border-box;
|
|||
|
|
|
|||
|
|
.box-corner {
|
|||
|
|
position: absolute;
|
|||
|
|
width: 8px;
|
|||
|
|
height: 8px;
|
|||
|
|
background: #00ff00;
|
|||
|
|
border: 1px solid #fff;
|
|||
|
|
|
|||
|
|
&.corner-tl {
|
|||
|
|
top: -4px;
|
|||
|
|
left: -4px;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
&.corner-tr {
|
|||
|
|
top: -4px;
|
|||
|
|
right: -4px;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
&.corner-bl {
|
|||
|
|
bottom: -4px;
|
|||
|
|
left: -4px;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
&.corner-br {
|
|||
|
|
bottom: -4px;
|
|||
|
|
right: -4px;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.image-error {
|
|||
|
|
position: absolute;
|
|||
|
|
top: 50%;
|
|||
|
|
left: 50%;
|
|||
|
|
transform: translate(-50%, -50%);
|
|||
|
|
text-align: center;
|
|||
|
|
color: #999;
|
|||
|
|
|
|||
|
|
i {
|
|||
|
|
font-size: 32px;
|
|||
|
|
display: block;
|
|||
|
|
margin-bottom: 8px;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.empty-state {
|
|||
|
|
grid-column: 1 / -1;
|
|||
|
|
text-align: center;
|
|||
|
|
padding: 60px 0;
|
|||
|
|
color: #999;
|
|||
|
|
|
|||
|
|
i {
|
|||
|
|
font-size: 64px;
|
|||
|
|
display: block;
|
|||
|
|
margin-bottom: 16px;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
p {
|
|||
|
|
font-size: 14px;
|
|||
|
|
margin: 0;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.pagination-wrapper {
|
|||
|
|
flex-shrink: 0;
|
|||
|
|
margin-top: 16px;
|
|||
|
|
padding-top: 16px;
|
|||
|
|
border-top: 1px solid #ebeef5;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
</style>
|