|
@@ -1,31 +1,44 @@
|
1
|
1
|
import React from 'react'
|
2
|
2
|
import { View } from '@tarojs/components'
|
3
|
|
-import './index.less'
|
|
3
|
+// import './index.less'
|
4
|
4
|
|
5
|
5
|
const cubeLen = 9
|
6
|
6
|
|
|
7
|
+const inCenter = {
|
|
8
|
+ display: 'block',
|
|
9
|
+ width: '40vw',
|
|
10
|
+ height: '40vw',
|
|
11
|
+ margin: '15vh auto'
|
|
12
|
+}
|
|
13
|
+
|
7
|
14
|
export default props => {
|
8
|
15
|
|
9
|
16
|
const color = props.color || '#9e1068'
|
10
|
17
|
const tipText = props.tips || 'LOADING'
|
11
|
18
|
const cubeStyle = { backgroundColor: color }
|
12
|
|
- const tipStyle = { color }
|
|
19
|
+ const tipStyle = { color, textAlign: 'center', marginTop: '-18vh' }
|
13
|
20
|
|
14
|
21
|
return (
|
15
|
22
|
<>
|
16
|
23
|
{
|
17
|
24
|
props.loading ? (
|
18
|
|
- <View className='cubes-box'>
|
19
|
|
- <View className='cubes'>
|
20
|
|
- {
|
21
|
|
- new Array(cubeLen).fill(0).map((_, inx) => (
|
22
|
|
- <View key={inx} class={`sk-cube sk-cube${inx + 1}`} style={cubeStyle}></View>
|
23
|
|
- ))
|
24
|
|
- }
|
25
|
|
- </View>
|
26
|
|
- <View className='cubes-tip' style={tipStyle}>{tipText}</View>
|
27
|
|
- </View>
|
|
25
|
+ <view style={inCenter}>
|
|
26
|
+ <image style={{width: '100%'}} src={require('@/assets/img/loading.gif').default} mode="aspectFit" alt=""/>
|
|
27
|
+ <view style={tipStyle}>{tipText}</view>
|
|
28
|
+ </view>
|
28
|
29
|
) : props.children
|
|
30
|
+ // (
|
|
31
|
+ // <View className='cubes-box'>
|
|
32
|
+ // <View className='cubes'>
|
|
33
|
+ // {
|
|
34
|
+ // new Array(cubeLen).fill(0).map((_, inx) => (
|
|
35
|
+ // <View key={inx} class={`sk-cube sk-cube${inx + 1}`} style={cubeStyle}></View>
|
|
36
|
+ // ))
|
|
37
|
+ // }
|
|
38
|
+ // </View>
|
|
39
|
+ // <View className='cubes-tip' style={tipStyle}>{tipText}</View>
|
|
40
|
+ // </View>
|
|
41
|
+ // ) : props.children
|
29
|
42
|
}
|
30
|
43
|
</>
|
31
|
44
|
)
|