diff --git a/weapp/src/packages/maintenanceSpotCheck/components/skeleton/index.jsx b/weapp/src/packages/maintenanceSpotCheck/components/skeleton/index.jsx new file mode 100644 index 00000000..c92c44ff --- /dev/null +++ b/weapp/src/packages/maintenanceSpotCheck/components/skeleton/index.jsx @@ -0,0 +1,35 @@ +/* +* 骨架屏 +*/ +import React from 'react' +import { View } from '@tarojs/components' +import './index.scss' + +export default function Skeleton(props) { + const { length } = props + + const render = () => { + let node = [] + for (let i = 0; i < length; i++) { + node.push( + + + + + + + + + + + ) + } + return node + } + + return ( + + {render()} + + ) +} diff --git a/weapp/src/packages/maintenanceSpotCheck/components/skeleton/index.scss b/weapp/src/packages/maintenanceSpotCheck/components/skeleton/index.scss new file mode 100644 index 00000000..fda28566 --- /dev/null +++ b/weapp/src/packages/maintenanceSpotCheck/components/skeleton/index.scss @@ -0,0 +1,43 @@ +.screen-root { + width: 100%; + height: 100%; + display: flex; + justify-content: center; + margin-top: 20vh; +} + +.ul { + background-color: #fff; + margin: 0 auto; + padding: 20px; + width: 90vw; +} + +.li { + background-image: linear-gradient(90deg, #f2f2f2 25%, #e6e6e6 37%, #f2f2f2 63%); + width: 100%; + height: 0.9rem; + list-style: none; + background-size: 400% 100%; + margin-top: 0.9rem; + background-position: 100% 50%; + animation: skeleton-loading 1.4s ease infinite; +} + +.li:first-child { + width: 38%; +} + +.li:last-child { + width: 61%; +} + +@keyframes skeleton-loading { + 0% { + background-position: 100% 50%; + } + + 100% { + background-position: 0 50%; + } +} \ No newline at end of file diff --git a/weapp/src/packages/maintenanceSpotCheck/spotCheckRoadDetail/index.jsx b/weapp/src/packages/maintenanceSpotCheck/spotCheckRoadDetail/index.jsx index c3831876..fc52c940 100644 --- a/weapp/src/packages/maintenanceSpotCheck/spotCheckRoadDetail/index.jsx +++ b/weapp/src/packages/maintenanceSpotCheck/spotCheckRoadDetail/index.jsx @@ -3,6 +3,7 @@ import Taro, { useRouter, useDidShow } from '@tarojs/taro' import { View } from '@tarojs/components' import { AtButton, AtSearchBar } from 'taro-ui' import { NoData } from '@/components/index' +import Skeleton from '../components/skeleton' import moment from 'moment' import request from '@/services/request' import { getRoadSpotDetail } from '@/services/api' @@ -70,7 +71,7 @@ function Index() { >调整 - ) : } + ) : } ) }