pcwl_yancheng/uni-fans-score
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix:修复bug

Browse Source
This commit is contained in:
ISFP_T
2026-02-26 09:16:35 +08:00
parent 99872dd6df
commit 3462a24d1e
6 changed files with 255 additions and 50 deletions
Download Patch File Download Diff File Expand all files Collapse all files
components/DeviceDetailSkeleton.vue
+187
View File
@@ -0,0 +1,187 @@
<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>