feat: 空状态插画 (CSS 简笔平板支撑小人 + 主题色气泡)
This commit is contained in:
@@ -65,9 +65,14 @@
|
||||
<text class="history-hint" wx:if="{{historyList.length > 0}}">长按可删除</text>
|
||||
</view>
|
||||
<view wx:if="{{historyList.length === 0}}" class="empty-state">
|
||||
<image class="empty-icon" src="{{icons.peopleFill}}" mode="aspectFit"></image>
|
||||
<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>
|
||||
<view class="history-list">
|
||||
<view class="history-item" wx:for="{{historyList}}" wx:key="id" data-id="{{item.id}}" bindlongpress="onLongPressDelete">
|
||||
|
||||
@@ -277,3 +277,72 @@
|
||||
color: var(--text-secondary);
|
||||
border-top: 1rpx solid var(--border);
|
||||
}
|
||||
|
||||
/* ---- empty state illustration ---- */
|
||||
.empty-state {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
padding: 60rpx 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