feat: 空状态插画 (CSS 简笔平板支撑小人 + 主题色气泡)
This commit is contained in:
@@ -15,11 +15,16 @@
|
||||
<ui-skeleton variant="list-row" count="{{5}}" />
|
||||
</view>
|
||||
|
||||
<!-- Empty -->
|
||||
<view class="status-wrap" wx:elif="{{empty}}">
|
||||
<image class="empty-icon" src="{{icons.peopleFill}}" mode="aspectFit"></image>
|
||||
<!-- Empty with CSS illustration -->
|
||||
<view class="empty-state" wx:elif="{{empty}}">
|
||||
<view class="empty-illus">
|
||||
<view class="empty-illus-body"></view>
|
||||
<view class="empty-illus-arm empty-illus-arm--l"></view>
|
||||
<view class="empty-illus-arm empty-illus-arm--r"></view>
|
||||
<view class="empty-illus-bubble">加油</view>
|
||||
</view>
|
||||
<text class="empty-text">暂无排行数据</text>
|
||||
<text class="empty-sub">快去训练吧!</text>
|
||||
<text class="empty-sub">快去训练吧,争当第一名!</text>
|
||||
</view>
|
||||
|
||||
<!-- Rank list -->
|
||||
|
||||
@@ -184,3 +184,72 @@
|
||||
from { opacity: 0; transform: translateX(-20rpx); }
|
||||
to { opacity: 1; transform: translateX(0); }
|
||||
}
|
||||
|
||||
/* ---- empty state illustration ---- */
|
||||
.empty-state {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
padding: 80rpx 32rpx;
|
||||
}
|
||||
|
||||
.empty-illus {
|
||||
position: relative;
|
||||
width: 200rpx;
|
||||
height: 200rpx;
|
||||
margin-bottom: 40rpx;
|
||||
}
|
||||
|
||||
.empty-illus-body {
|
||||
position: absolute;
|
||||
bottom: 30rpx;
|
||||
left: 50%;
|
||||
transform: translateX(-50%);
|
||||
width: 160rpx;
|
||||
height: 30rpx;
|
||||
background: linear-gradient(90deg, var(--primary), var(--primary-light));
|
||||
border-radius: 16rpx;
|
||||
}
|
||||
|
||||
.empty-illus-arm {
|
||||
position: absolute;
|
||||
bottom: 36rpx;
|
||||
width: 20rpx;
|
||||
height: 60rpx;
|
||||
background: var(--primary);
|
||||
border-radius: 10rpx;
|
||||
}
|
||||
|
||||
.empty-illus-arm--l {
|
||||
left: 30rpx;
|
||||
transform: rotate(30deg);
|
||||
}
|
||||
|
||||
.empty-illus-arm--r {
|
||||
right: 30rpx;
|
||||
transform: rotate(-30deg);
|
||||
}
|
||||
|
||||
.empty-illus-bubble {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
right: 0;
|
||||
background: var(--primary-bg);
|
||||
color: var(--primary);
|
||||
font-size: 22rpx;
|
||||
font-weight: 600;
|
||||
padding: 8rpx 16rpx;
|
||||
border-radius: 16rpx;
|
||||
line-height: 1;
|
||||
}
|
||||
|
||||
.empty-text {
|
||||
font-size: 30rpx;
|
||||
color: var(--text);
|
||||
margin-bottom: 12rpx;
|
||||
}
|
||||
|
||||
.empty-sub {
|
||||
font-size: 26rpx;
|
||||
color: var(--text-secondary);
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user