/* ==================== Vue3 Uni-app X 骨架屏样式 ==================== */
/* 创建时间：2025-12-31 */
/* 说明：统一的骨架屏样式类，遵循 uni-app x 原生渲染规范 */

/* ==================== 骨架屏基础样式 ==================== */
.skeleton-item {
  background-color: #F0F0F0;
  border-radius: 8rpx;
}

/* ==================== 头像骨架 ==================== */
.skeleton-avatar {
  width: 80rpx;
  height: 80rpx;
  border-radius: 40rpx;
  background-color: #F0F0F0;
}

.skeleton-avatar-sm {
  width: 60rpx;
  height: 60rpx;
  border-radius: 30rpx;
}

.skeleton-avatar-lg {
  width: 120rpx;
  height: 120rpx;
  border-radius: 60rpx;
}

.skeleton-avatar-xl {
  width: 160rpx;
  height: 160rpx;
  border-radius: 80rpx;
}

/* 方形头像 */
.skeleton-avatar-square {
  border-radius: 8rpx;
}

/* ==================== 标题骨架 ==================== */
.skeleton-title {
  height: 32rpx;
  background-color: #F0F0F0;
  border-radius: 4rpx;
  width: 200rpx;
}

.skeleton-title-sm {
  height: 28rpx;
  width: 160rpx;
}

.skeleton-title-lg {
  height: 40rpx;
  width: 280rpx;
}

.skeleton-title-full {
  width: 100%;
}

/* ==================== 文本骨架 ==================== */
.skeleton-text {
  height: 24rpx;
  background-color: #F0F0F0;
  border-radius: 4rpx;
  margin-top: 16rpx;
}

.skeleton-text-sm {
  height: 20rpx;
}

.skeleton-text-lg {
  height: 28rpx;
}

/* 文本行宽度变体 */
.skeleton-text-full {
  width: 100%;
}

.skeleton-text-80 {
  width: 80%;
}

.skeleton-text-60 {
  width: 60%;
}

.skeleton-text-40 {
  width: 40%;
}

/* ==================== 图片骨架 ==================== */
.skeleton-image {
  width: 196rpx;
  height: 274rpx;
  background-color: #F0F0F0;
  border-radius: 24rpx;
}

.skeleton-image-sm {
  width: 160rpx;
  height: 160rpx;
  border-radius: 16rpx;
}

.skeleton-image-lg {
  width: 240rpx;
  height: 320rpx;
  border-radius: 24rpx;
}

.skeleton-image-square {
  width: 200rpx;
  height: 200rpx;
  border-radius: 16rpx;
}

.skeleton-image-banner {
  width: 100%;
  height: 300rpx;
  border-radius: 16rpx;
}

/* ==================== 按钮骨架 ==================== */
.skeleton-button {
  height: 80rpx;
  background-color: #F0F0F0;
  border-radius: 44rpx;
  width: 200rpx;
}

.skeleton-button-sm {
  height: 56rpx;
  width: 140rpx;
  border-radius: 28rpx;
}

.skeleton-button-lg {
  height: 88rpx;
  width: 100%;
  border-radius: 52rpx;
}

/* ==================== 标签骨架 ==================== */
.skeleton-tag {
  height: 36rpx;
  width: 80rpx;
  background-color: #F0F0F0;
  border-radius: 18rpx;
  margin-right: 12rpx;
}

/* ==================== 卡片骨架 ==================== */
.skeleton-card {
  flex-direction: row;
  padding-top: 24rpx;
  padding-bottom: 24rpx;
  padding-left: 28rpx;
  padding-right: 28rpx;
  background-color: #FFFFFF;
  border-radius: 16rpx;
  margin-bottom: 20rpx;
}

.skeleton-card-image {
  width: 196rpx;
  height: 274rpx;
  background-color: #F0F0F0;
  border-radius: 24rpx;
}

.skeleton-card-content {
  flex: 1;
  flex-direction: column;
  margin-left: 20rpx;
  padding-top: 10rpx;
  padding-bottom: 10rpx;
}

/* ==================== 列表骨架 ==================== */
.skeleton-list-item {
  flex-direction: row;
  align-items: center;
  padding-top: 24rpx;
  padding-bottom: 24rpx;
  padding-left: 28rpx;
  padding-right: 28rpx;
  background-color: #FFFFFF;
  border-bottom-width: 1rpx;
  border-bottom-style: solid;
  border-bottom-color: #F5F5F5;
}

.skeleton-list-content {
  flex: 1;
  flex-direction: column;
  margin-left: 20rpx;
}

/* ==================== 段落骨架 ==================== */
.skeleton-paragraph {
  flex-direction: column;
}

.skeleton-paragraph-row {
  height: 24rpx;
  background-color: #F0F0F0;
  border-radius: 4rpx;
  margin-bottom: 16rpx;
}

.skeleton-paragraph-row:last-child {
  margin-bottom: 0;
}

/* ==================== 骨架屏容器 ==================== */
.skeleton-container {
  flex-direction: column;
  padding-top: 24rpx;
  padding-bottom: 24rpx;
  padding-left: 28rpx;
  padding-right: 28rpx;
}

/* ==================== 动画效果说明 ==================== */
/* 
 * 注意：uni-app x 原生渲染不支持 CSS animation
 * 骨架屏闪烁动画需要在组件中使用 JS 实现
 * 
 * 推荐实现方式：
 * 1. 使用 setInterval 定时切换背景色
 * 2. 使用 uni.createAnimation 创建动画
 * 
 * 示例代码：
 * let opacity = ref(1)
 * setInterval(() => {
 *   opacity.value = opacity.value == 1 ? 0.6 : 1
 * }, 800)
 */

