uni-fans-score/components/DeviceDetailSkeleton.vue

<template>
	<view class="skeleton-container">
		<!-- 设备信息卡片骨架 -->
		<view class="card skeleton-card">
			<view class="device-location-skeleton">
				<view class="location-left-skeleton">
					<uv-skeleton :loading="true" :animate="true" rows="0" rowsWidth="32rpx" rowsHeight="32rpx"
						borderRadius="50%"></uv-skeleton>
					<view style="margin-left: 12rpx;">
						<uv-skeleton :loading="true" :animate="true" rows="1" rowsWidth="200rpx" rowsHeight="28rpx">
						</uv-skeleton>
					</view>
				</view>
				<uv-skeleton :loading="true" :animate="true" rows="0" rowsWidth="100rpx" rowsHeight="40rpx"
					borderRadius="30rpx"></uv-skeleton>
			</view>
			<view class="device-info-skeleton">
				<uv-skeleton :loading="true" :animate="true" rows="1" rowsWidth="300rpx" rowsHeight="26rpx">
				</uv-skeleton>
			</view>
			<view class="device-info-skeleton">
				<uv-skeleton :loading="true" :animate="true" rows="1" rowsWidth="350rpx" rowsHeight="26rpx">
				</uv-skeleton>
			</view>
		</view>

		<!-- 计费规则卡片骨架 -->
		<view class="card skeleton-card">
			<view class="card-header-skeleton">
				<uv-skeleton :loading="true" :animate="true" rows="1" rowsWidth="150rpx" rowsHeight="32rpx">
				</uv-skeleton>
			</view>

			<view class="pricing-banner-skeleton">
				<uv-skeleton :loading="true" :animate="true" rows="1" rowsWidth="200rpx" rowsHeight="64rpx">
				</uv-skeleton>
				<view style="margin-top: 16rpx;">
					<uv-skeleton :loading="true" :animate="true" rows="0" rowsWidth="120rpx" rowsHeight="40rpx"
						borderRadius="30rpx"></uv-skeleton>
				</view>
			</view>

			<view class="pricing-info-skeleton">
				<uv-skeleton :loading="true" :animate="true" rows="1" rowsWidth="100%" rowsHeight="26rpx">
				</uv-skeleton>
			</view>
			<view class="pricing-info-skeleton">
				<uv-skeleton :loading="true" :animate="true" rows="1" rowsWidth="100%" rowsHeight="26rpx">
				</uv-skeleton>
			</view>
		</view>

		<!-- 使用说明卡片骨架 -->
		<view class="card skeleton-card">
			<view class="card-header-skeleton">
				<uv-skeleton :loading="true" :animate="true" rows="1" rowsWidth="150rpx" rowsHeight="32rpx">
				</uv-skeleton>
			</view>
			<view class="notice-item-skeleton">
				<uv-skeleton :loading="true" :animate="true" rows="0" rowsWidth="12rpx" rowsHeight="12rpx"
					borderRadius="50%"></uv-skeleton>
				<view style="flex: 1; margin-left: 16rpx;">
					<uv-skeleton :loading="true" :animate="true" rows="1" rowsWidth="100%" rowsHeight="28rpx">
					</uv-skeleton>
				</view>
			</view>
			<view class="notice-item-skeleton">
				<uv-skeleton :loading="true" :animate="true" rows="0" rowsWidth="12rpx" rowsHeight="12rpx"
					borderRadius="50%"></uv-skeleton>
				<view style="flex: 1; margin-left: 16rpx;">
					<uv-skeleton :loading="true" :animate="true" rows="1" rowsWidth="100%" rowsHeight="28rpx">
					</uv-skeleton>
				</view>
			</view>
			<view class="notice-item-skeleton">
				<uv-skeleton :loading="true" :animate="true" rows="0" rowsWidth="12rpx" rowsHeight="12rpx"
					borderRadius="50%"></uv-skeleton>
				<view style="flex: 1; margin-left: 16rpx;">
					<uv-skeleton :loading="true" :animate="true" rows="1" rowsWidth="100%" rowsHeight="28rpx">
					</uv-skeleton>
				</view>
			</view>
		</view>

		<!-- 促销提示框骨架 -->
		<view class="promotion-skeleton">
			<uv-skeleton :loading="true" :animate="true" rows="1" rowsWidth="100%" rowsHeight="60rpx"
				borderRadius="22rpx"></uv-skeleton>
		</view>

		<!-- 底部按钮骨架 -->
		<view class="footer-skeleton">
			<uv-skeleton :loading="true" :animate="true" rows="0" rowsWidth="100%" rowsHeight="96rpx"
				borderRadius="48rpx"></uv-skeleton>
			<view style="margin-top: 16rpx;">
				<uv-skeleton :loading="true" :animate="true" rows="1" rowsWidth="200rpx" rowsHeight="24rpx">
				</uv-skeleton>
			</view>
		</view>
	</view>
</template>

<script setup>
</script>

<style lang="scss" scoped>
	.skeleton-container {
		min-height: 100vh;
		background-color: #f5f7fa;
		padding: 30rpx 30rpx 300rpx;
		box-sizing: border-box;
	}

	.card {
		background-color: #fff;
		border-radius: 24rpx;
		box-shadow: 0 2rpx 16rpx rgba(0, 0, 0, 0.04);
		padding: 30rpx;
		margin-bottom: 30rpx;
	}

	.skeleton-card {
		.device-location-skeleton {
			display: flex;
			align-items: center;
			justify-content: space-between;
			margin-bottom: 20rpx;

			.location-left-skeleton {
				display: flex;
				align-items: center;
			}
		}

		.device-info-skeleton {
			margin-bottom: 12rpx;
		}

		.card-header-skeleton {
			margin-bottom: 24rpx;
		}

		.pricing-banner-skeleton {
			background: #E6F7EC;
			border-radius: 20rpx;
			padding: 40rpx 30rpx;
			margin-bottom: 24rpx;
			display: flex;
			flex-direction: column;
			align-items: center;
		}

		.pricing-info-skeleton {
			margin-bottom: 16rpx;
		}

		.notice-item-skeleton {
			display: flex;
			align-items: flex-start;
			margin-bottom: 20rpx;

			&:last-child {
				margin-bottom: 0;
			}
		}
	}

	.promotion-skeleton {
		margin-bottom: 30rpx;
	}

	.footer-skeleton {
		position: fixed;
		bottom: 0;
		left: 0;
		right: 0;
		background-color: #fff;
		padding: 24rpx 30rpx;
		padding-bottom: calc(24rpx + env(safe-area-inset-bottom));
		box-shadow: 0 -4rpx 20rpx rgba(0, 0, 0, 0.06);
		z-index: 100;
		display: flex;
		flex-direction: column;
		align-items: center;
	}
</style>