78 lines
1.6 KiB
Vue
78 lines
1.6 KiB
Vue
<template>
|
|
<view class="v-empty">
|
|
<view class="v-empty__card">
|
|
<view class="v-empty__blob">
|
|
<image
|
|
class="v-empty__icon"
|
|
src="/static/empty-inbox.svg"
|
|
mode="aspectFit"
|
|
/>
|
|
</view>
|
|
<text class="v-empty__desc">{{ description || '暂无数据' }}</text>
|
|
<text v-if="tip" class="v-empty__tip">{{ tip }}</text>
|
|
</view>
|
|
</view>
|
|
</template>
|
|
|
|
<script>
|
|
/** H5 兼容：替代 @vant/weapp van-empty（方案 B 虚线软卡） */
|
|
export default {
|
|
name: 'VanEmptyShim',
|
|
props: {
|
|
description: { type: String, default: '' },
|
|
tip: { type: String, default: '' }
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style scoped>
|
|
.v-empty {
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: stretch;
|
|
padding: 16rpx 0;
|
|
}
|
|
|
|
.v-empty__card {
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
justify-content: center;
|
|
gap: 16rpx;
|
|
padding: 44rpx 28rpx 40rpx;
|
|
border-radius: 28rpx;
|
|
background: linear-gradient(165deg, #eef9f3 0%, #ffffff 55%);
|
|
border: 3rpx dashed #b7e5d0;
|
|
box-shadow: inset 0 0 0 1rpx rgba(255, 255, 255, 0.8);
|
|
}
|
|
|
|
.v-empty__blob {
|
|
width: 128rpx;
|
|
height: 128rpx;
|
|
border-radius: 50%;
|
|
background: radial-gradient(circle at 35% 30%, #ffffff, #d8f3e7 70%);
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
}
|
|
|
|
.v-empty__icon {
|
|
width: 56rpx;
|
|
height: 56rpx;
|
|
}
|
|
|
|
.v-empty__desc {
|
|
font-size: 26rpx;
|
|
color: #5d746a;
|
|
text-align: center;
|
|
line-height: 1.4;
|
|
}
|
|
|
|
.v-empty__tip {
|
|
font-size: 22rpx;
|
|
color: #8aa198;
|
|
text-align: center;
|
|
line-height: 1.4;
|
|
}
|
|
</style>
|