|
|
@ -32,8 +32,15 @@ |
|
|
</view> |
|
|
</view> |
|
|
<view class="tag soft" v-if="item.remeet">再遇见</view> |
|
|
<view class="tag soft" v-if="item.remeet">再遇见</view> |
|
|
</view> |
|
|
</view> |
|
|
|
|
|
<view class="room-card skeleton-card" v-if="loading && !requests.length" v-for="skeleton in skeletonList" :key="skeleton.id"> |
|
|
|
|
|
<view class="skeleton-avatar"></view> |
|
|
|
|
|
<view class="main"> |
|
|
|
|
|
<view class="skeleton-line name-line"></view> |
|
|
|
|
|
<view class="skeleton-line desc-line"></view> |
|
|
|
|
|
</view> |
|
|
|
|
|
</view> |
|
|
<view class="empty" v-if="!loading && !requests.length">没有未完成的关系,也是一种轻松。</view> |
|
|
<view class="empty" v-if="!loading && !requests.length">没有未完成的关系,也是一种轻松。</view> |
|
|
<view class="empty" v-else>{{ loading ? '正在加载...' : (hasMore ? '上滑加载更多' : '没有更多消息了') }}</view> |
|
|
<view class="empty" v-else-if="requests.length">{{ loading ? '正在加载...' : (hasMore ? '上滑加载更多' : '没有更多消息了') }}</view> |
|
|
|
|
|
|
|
|
<ie-bottom-tab active="messages" :unread-count="unreadCount"></ie-bottom-tab> |
|
|
<ie-bottom-tab active="messages" :unread-count="unreadCount"></ie-bottom-tab> |
|
|
|
|
|
|
|
|
@ -71,6 +78,12 @@ |
|
|
hasMore: true, |
|
|
hasMore: true, |
|
|
loading: false, |
|
|
loading: false, |
|
|
loadedOnce: false, |
|
|
loadedOnce: false, |
|
|
|
|
|
skeletonList: [ |
|
|
|
|
|
{ id: 'skeleton-1' }, |
|
|
|
|
|
{ id: 'skeleton-2' }, |
|
|
|
|
|
{ id: 'skeleton-3' }, |
|
|
|
|
|
{ id: 'skeleton-4' } |
|
|
|
|
|
], |
|
|
deleteDialogVisible: false, |
|
|
deleteDialogVisible: false, |
|
|
deleteTarget: null, |
|
|
deleteTarget: null, |
|
|
deleting: false |
|
|
deleting: false |
|
|
@ -247,6 +260,11 @@ |
|
|
.pulse, .avatar, .avatar-img { width: 78rpx; height: 78rpx; border-radius: 50%; } |
|
|
.pulse, .avatar, .avatar-img { width: 78rpx; height: 78rpx; border-radius: 50%; } |
|
|
.avatar { text-align: center; line-height: 78rpx; background: #a9ffe7; color: #11162a; font-weight: 800; } |
|
|
.avatar { text-align: center; line-height: 78rpx; background: #a9ffe7; color: #11162a; font-weight: 800; } |
|
|
.unread-badge { position: absolute; right: -8rpx; top: -8rpx; min-width: 30rpx; height: 30rpx; line-height: 30rpx; padding: 0 8rpx; border-radius: 999rpx; text-align: center; color: #fff; background: #ff8fa3; border: 3rpx solid rgba(255,255,255,.96); box-shadow: 0 8rpx 18rpx rgba(255,143,163,.26); font-size: 18rpx; font-weight: 800; box-sizing: border-box; } |
|
|
.unread-badge { position: absolute; right: -8rpx; top: -8rpx; min-width: 30rpx; height: 30rpx; line-height: 30rpx; padding: 0 8rpx; border-radius: 999rpx; text-align: center; color: #fff; background: #ff8fa3; border: 3rpx solid rgba(255,255,255,.96); box-shadow: 0 8rpx 18rpx rgba(255,143,163,.26); font-size: 18rpx; font-weight: 800; box-sizing: border-box; } |
|
|
|
|
|
.skeleton-card { pointer-events: none; } |
|
|
|
|
|
.skeleton-avatar { flex-shrink: 0; width: 78rpx; height: 78rpx; margin-right: 20rpx; border-radius: 50%; background: linear-gradient(90deg, rgba(215,225,246,.55), rgba(255,255,255,.86), rgba(215,225,246,.55)); background-size: 220% 100%; animation: skeletonShimmer 1.2s ease-in-out infinite; } |
|
|
|
|
|
.skeleton-line { height: 26rpx; border-radius: 999rpx; background: linear-gradient(90deg, rgba(215,225,246,.55), rgba(255,255,255,.86), rgba(215,225,246,.55)); background-size: 220% 100%; animation: skeletonShimmer 1.2s ease-in-out infinite; } |
|
|
|
|
|
.name-line { width: 220rpx; } |
|
|
|
|
|
.desc-line { width: 420rpx; max-width: 86%; margin-top: 18rpx; } |
|
|
.pulse { animation: breath 2.4s ease-in-out infinite; } |
|
|
.pulse { animation: breath 2.4s ease-in-out infinite; } |
|
|
.main { flex: 1; } |
|
|
.main { flex: 1; } |
|
|
.name { font-size: 29rpx; font-weight: 800; } |
|
|
.name { font-size: 29rpx; font-weight: 800; } |
|
|
@ -269,6 +287,7 @@ |
|
|
.delete-btn.danger { color: #fff; background: linear-gradient(135deg, #ff8ba0, #e85d75); box-shadow: 0 18rpx 38rpx rgba(232,93,117,.22); } |
|
|
.delete-btn.danger { color: #fff; background: linear-gradient(135deg, #ff8ba0, #e85d75); box-shadow: 0 18rpx 38rpx rgba(232,93,117,.22); } |
|
|
.delete-btn.disabled { opacity: .62; } |
|
|
.delete-btn.disabled { opacity: .62; } |
|
|
@keyframes breath { 0%, 100% { transform: scale(.9); opacity: .65; } 50% { transform: scale(1.04); opacity: 1; } } |
|
|
@keyframes breath { 0%, 100% { transform: scale(.9); opacity: .65; } 50% { transform: scale(1.04); opacity: 1; } } |
|
|
|
|
|
@keyframes skeletonShimmer { 0% { background-position: 100% 0; } 100% { background-position: -100% 0; } } |
|
|
@keyframes streakBlink { 0%, 100% { opacity: 1; } 50% { opacity: .45; } } |
|
|
@keyframes streakBlink { 0%, 100% { opacity: 1; } 50% { opacity: .45; } } |
|
|
@keyframes dialogUp { from { transform: translateY(36rpx); opacity: 0; } to { transform: translateY(0); opacity: 1; } } |
|
|
@keyframes dialogUp { from { transform: translateY(36rpx); opacity: 0; } to { transform: translateY(0); opacity: 1; } } |
|
|
</style> |
|
|
</style> |
|
|
|