﻿<template>
  <view class="message-skeleton">
    <view v-for="i in 6" :key="i" class="skeleton-item">
      <view class="skeleton-icon skeleton-shimmer"></view>
      <view class="skeleton-content">
        <view class="skeleton-title skeleton-shimmer"></view>
        <view class="skeleton-desc skeleton-shimmer"></view>
        <view class="skeleton-footer">
          <view class="skeleton-tag skeleton-shimmer"></view>
          <view class="skeleton-time skeleton-shimmer"></view>
        </view>
      </view>
    </view>
  </view>
</template>

<script setup>
</script>

<style lang="scss" scoped>
.message-skeleton {
  padding: 8rpx 24rpx;
}

.skeleton-item {
  display: flex;
  align-items: center;
  padding: 24rpx 0;
  margin-bottom: 12rpx;
  background: var(--bg-white);
  border-radius: 16rpx;
}

.skeleton-icon {
  width: 80rpx;
  height: 80rpx;
  border-radius: 20rpx;
  margin-right: 20rpx;
  flex-shrink: 0;
}

.skeleton-content {
  flex: 1;
  min-width: 0;
}

.skeleton-title {
  height: 32rpx;
  width: 60%;
  border-radius: 8rpx;
  margin-bottom: 12rpx;
}

.skeleton-desc {
  height: 28rpx;
  width: 85%;
  border-radius: 8rpx;
  margin-bottom: 16rpx;
}

.skeleton-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.skeleton-tag {
  height: 24rpx;
  width: 80rpx;
  border-radius: 8rpx;
}

.skeleton-time {
  height: 24rpx;
  width: 100rpx;
  border-radius: 8rpx;
}

:deep(.skeleton-shimmer) {
  background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%);
  background-size: 200% 100%;
  animation: shimmer 1.5s infinite;
}

@keyframes shimmer {
  0% { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}
</style>
