zlwuandCursor
ef259f1f0c
Restyle van-empty as a dashed mint soft card and add optional tip on home and comps demo so all empty states stay consistent. Co-authored-by: Cursor <cursoragent@cursor.com>
103 lines
2.3 KiB
Vue
103 lines
2.3 KiB
Vue
<template>
|
|
<view class="v-empty">
|
|
<view class="v-empty__card">
|
|
<view class="v-empty__blob">
|
|
<view class="v-empty__inbox">
|
|
<view class="v-empty__inbox-tray" />
|
|
<view class="v-empty__inbox-slot" />
|
|
</view>
|
|
</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;
|
|
}
|
|
|
|
/* CSS 近似 inbox，避免 inline SVG 在部分端兼容问题 */
|
|
.v-empty__inbox {
|
|
position: relative;
|
|
width: 56rpx;
|
|
height: 48rpx;
|
|
}
|
|
|
|
.v-empty__inbox-tray {
|
|
position: absolute;
|
|
left: 0;
|
|
right: 0;
|
|
top: 8rpx;
|
|
bottom: 0;
|
|
border: 4rpx solid #0a9f6d;
|
|
border-radius: 6rpx 6rpx 10rpx 10rpx;
|
|
box-sizing: border-box;
|
|
}
|
|
|
|
.v-empty__inbox-slot {
|
|
position: absolute;
|
|
left: 8rpx;
|
|
right: 8rpx;
|
|
top: 0;
|
|
height: 20rpx;
|
|
border: 4rpx solid #0a9f6d;
|
|
border-bottom: none;
|
|
border-radius: 6rpx 6rpx 0 0;
|
|
box-sizing: border-box;
|
|
background: radial-gradient(circle at 35% 30%, #ffffff, #d8f3e7 70%);
|
|
}
|
|
|
|
.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>
|