|
1 |
| -import React from 'react' |
| 1 | +import React, { CSSProperties } from 'react' |
2 | 2 | import { Row, Col } from '@nutui/nutui-react-taro'
|
| 3 | +import { pxTransform } from '@tarojs/taro' |
3 | 4 | import { View } from '@tarojs/components'
|
4 |
| -import '../../demo.scss' |
5 | 5 |
|
6 | 6 | const Demo1 = () => {
|
| 7 | + const flexContent: CSSProperties = { |
| 8 | + display: 'flex', |
| 9 | + flexDirection: 'row', |
| 10 | + width: '100%', |
| 11 | + height: pxTransform(40), |
| 12 | + alignItems: 'center', |
| 13 | + justifyContent: 'center', |
| 14 | + color: '#fff', |
| 15 | + textAlign: 'center', |
| 16 | + borderRadius: pxTransform(6), |
| 17 | + backgroundColor: '#ff8881', |
| 18 | + fontSize: pxTransform(14), |
| 19 | + } |
| 20 | + const flexContentLight: CSSProperties = { |
| 21 | + ...flexContent, |
| 22 | + backgroundColor: '#ffc7c4', |
| 23 | + } |
| 24 | + |
7 | 25 | return (
|
8 | 26 | <>
|
9 | 27 | <Row>
|
10 | 28 | <Col span="24">
|
11 |
| - <View className="flex-content">span:24</View> |
| 29 | + <View style={flexContent}>span:24</View> |
12 | 30 | </Col>
|
13 | 31 | </Row>
|
14 | 32 | <Row>
|
15 | 33 | <Col span="12">
|
16 |
| - <View className="flex-content">span:12</View> |
| 34 | + <View style={flexContent}>span:12</View> |
17 | 35 | </Col>
|
18 | 36 | <Col span="12">
|
19 |
| - <View className="flex-content-light">span:12</View> |
| 37 | + <View style={flexContentLight}>span:12</View> |
20 | 38 | </Col>
|
21 | 39 | </Row>
|
22 | 40 | <Row>
|
23 | 41 | <Col span="8">
|
24 |
| - <View className="flex-content">span:8</View> |
| 42 | + <View style={flexContent}>span:8</View> |
25 | 43 | </Col>
|
26 | 44 | <Col span="8">
|
27 |
| - <View className="flex-content-light">span:8</View> |
| 45 | + <View style={flexContentLight}>span:8</View> |
28 | 46 | </Col>
|
29 | 47 | <Col span="8">
|
30 |
| - <View className="flex-content">span:8</View> |
| 48 | + <View style={flexContent}>span:8</View> |
31 | 49 | </Col>
|
32 | 50 | </Row>
|
33 | 51 | <Row>
|
34 | 52 | <Col span="6">
|
35 |
| - <View className="flex-content">span:6</View> |
| 53 | + <View style={flexContent}>span:6</View> |
36 | 54 | </Col>
|
37 | 55 | <Col span="6">
|
38 |
| - <View className="flex-content-light">span:6</View> |
| 56 | + <View style={flexContentLight}>span:6</View> |
39 | 57 | </Col>
|
40 | 58 | <Col span="6">
|
41 |
| - <View className="flex-content">span:6</View> |
| 59 | + <View style={flexContent}>span:6</View> |
42 | 60 | </Col>
|
43 | 61 | <Col span="6">
|
44 |
| - <View className="flex-content-light">span:6</View> |
| 62 | + <View style={flexContentLight}>span:6</View> |
45 | 63 | </Col>
|
46 | 64 | </Row>
|
47 | 65 | </>
|
|
0 commit comments