97 lines
2.0 KiB
Plaintext
97 lines
2.0 KiB
Plaintext
<template>
|
|
<view class="hr-empty">
|
|
<view class="hr-empty-ic">
|
|
<x-icon :name="iconName" color="#9CA3AF" font-size="52rpx"></x-icon>
|
|
</view>
|
|
<text class="hr-empty-b">{{ title }}</text>
|
|
<text v-if="sub != ''" class="hr-empty-s">{{ sub }}</text>
|
|
<view v-if="action != ''" class="hr-empty-btn" @click="onAction">
|
|
<text class="hr-empty-btn-t">{{ action }}</text>
|
|
</view>
|
|
<slot></slot>
|
|
</view>
|
|
</template>
|
|
|
|
<script lang="uts" setup>
|
|
import { computed } from 'vue'
|
|
import { toRemixIcon } from '@/utils/icon.uts'
|
|
|
|
/**
|
|
* 空状态 / 异常态
|
|
* icon 支持字符图标（设计稿沿用）或 RemixIcon 名，统一由 xIcon 渲染
|
|
*/
|
|
const props = defineProps({
|
|
icon : { type: String, default: 'file-list-3-line' },
|
|
title : { type: String, default: '暂无数据' },
|
|
sub : { type: String, default: '' },
|
|
/** 操作按钮文案，为空则不显示 */
|
|
action : { type: String, default: '' }
|
|
})
|
|
|
|
const emits = defineEmits<{
|
|
(e : 'action') : void
|
|
}>()
|
|
|
|
const iconName = computed(() : string => {
|
|
return toRemixIcon(props.icon)
|
|
})
|
|
|
|
function onAction() : void {
|
|
emits('action')
|
|
}
|
|
</script>
|
|
|
|
<style>
|
|
.hr-empty {
|
|
padding: 88rpx 40rpx 88rpx 40rpx;
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
}
|
|
|
|
.hr-empty-ic {
|
|
width: 112rpx;
|
|
height: 112rpx;
|
|
border-radius: 36rpx;
|
|
background-color: #F3F4F6;
|
|
display: flex;
|
|
flex-direction: row;
|
|
align-items: center;
|
|
justify-content: center;
|
|
margin-bottom: 16rpx;
|
|
}
|
|
|
|
.hr-empty-b {
|
|
font-size: 31.4rpx;
|
|
font-weight: bold;
|
|
color: #6B7280;
|
|
}
|
|
|
|
.hr-empty-s {
|
|
font-size: 25.8rpx;
|
|
color: #9CA3AF;
|
|
margin-top: 10rpx;
|
|
text-align: center;
|
|
lines: 2;
|
|
}
|
|
|
|
.hr-empty-btn {
|
|
margin-top: 24rpx;
|
|
height: 72rpx;
|
|
padding-left: 36rpx;
|
|
padding-right: 36rpx;
|
|
border-radius: 20rpx;
|
|
background-color: #EFF6FF;
|
|
display: flex;
|
|
flex-direction: row;
|
|
align-items: center;
|
|
justify-content: center;
|
|
}
|
|
|
|
.hr-empty-btn-t {
|
|
font-size: 29.2rpx;
|
|
font-weight: bold;
|
|
color: #2563EB;
|
|
}
|
|
</style>
|