罗广聪 / ProtectGod

Go to a project
Toggle navigation Toggle navigation pinning
罗广聪
6cf0d121 1 parent dbf1f611

table

Inline Side-by-side
Showing 1 changed file with 92 additions and 34 deletions
@@ -18,26 +18,31 @@ export default class Home extends Component { @@ -18,26 +18,31 @@ export default class Home extends Component {
18 super(props); 18 super(props);
19 this.state = { 19 this.state = {
20 gridData: { 20 gridData: {
21 - title: ["角色","建议产品","建议保额","保险年限","缴费期限","年缴保费"], 21 + title: ["角色", "建议产品", "建议保额", "保险年限", "缴费期限", "年缴保费"],
22 - products: [{ 22 + products: [
  23 + {
23 name: "成人意外险", 24 name: "成人意外险",
24 price: "50W", 25 price: "50W",
25 long: "1年", 26 long: "1年",
26 year: "20年", 27 year: "20年",
27 - eachyear: "150元", 28 + eachyear: "150元"
28 - },{ 29 + },
  30 + {
29 name: "成人意外险", 31 name: "成人意外险",
30 price: "50W", 32 price: "50W",
31 long: "1年", 33 long: "1年",
32 year: "20年", 34 year: "20年",
33 - eachyear: "150元", 35 + eachyear: "150元"
34 - },{ 36 + },
  37 + {
35 name: "成人意外险", 38 name: "成人意外险",
36 price: "50W", 39 price: "50W",
37 long: "1年", 40 long: "1年",
38 year: "20年", 41 year: "20年",
39 - eachyear: "150元", 42 + eachyear: "150元"
40 - }] 43 + }
  44 + ],
  45 + count: "1200",
41 } 46 }
42 }; 47 };
43 } 48 }
@@ -122,34 +127,62 @@ export default class Home extends Component { @@ -122,34 +127,62 @@ export default class Home extends Component {
122 <ScrollView style={styles.tableContainer}> 127 <ScrollView style={styles.tableContainer}>
123 <Grid> 128 <Grid>
124 <Row> 129 <Row>
125 - {gridData.title.map((item,index) => { 130 + {/* {gridData.title.map((item,index) => {
126 return ( 131 return (
127 <Col key={index} style={styles.gridtitleContaier}><Text style={styles.gridheaderText}>{item}</Text></Col> 132 <Col key={index} style={styles.gridtitleContaier}><Text style={styles.gridheaderText}>{item}</Text></Col>
128 ) 133 )
129 - })} 134 + })} */}
  135 + <Col size={1} style={styles.gridtitleContaier}>
  136 + <Text style={styles.gridheaderText}>角色</Text>
  137 + </Col>
  138 + <Col size={1.5} style={styles.gridtitleContaier}>
  139 + <Text style={styles.gridheaderText}>建议产品</Text>
  140 + </Col>
  141 + <Col size={1} style={styles.gridtitleContaier}>
  142 + <Text style={styles.gridheaderText}>建议保额</Text>
  143 + </Col>
  144 + <Col size={1} style={styles.gridtitleContaier}>
  145 + <Text style={styles.gridheaderText}>保险年限</Text>
  146 + </Col>
  147 + <Col size={1} style={styles.gridtitleContaier}>
  148 + <Text style={styles.gridheaderText}>缴费期限</Text>
  149 + </Col>
  150 + <Col size={1} style={styles.gridtitleContaier}>
  151 + <Text style={styles.gridheaderText}>年缴保费</Text>
  152 + </Col>
130 </Row> 153 </Row>
131 <Row> 154 <Row>
132 <Col style={styles.actor} size={1}> 155 <Col style={styles.actor} size={1}>
133 <Text style={styles.contentText}>父亲</Text> 156 <Text style={styles.contentText}>父亲</Text>
134 <Text style={styles.contentText}>42岁</Text> 157 <Text style={styles.contentText}>42岁</Text>
135 </Col> 158 </Col>
136 - <Col size={5}> 159 + <Col size={5.5}>
137 - { 160 + {gridData.products.map((item, index) => {
138 - gridData.products.map((item,index) => {  
139 return ( 161 return (
140 <Row key={index}> 162 <Row key={index}>
141 - <Col><Text style={styles.contentText}>{item.name}</Text></Col> 163 + <Col size={1.5} style={styles.contentCol}>
142 - <Col><Text style={styles.contentText}>{item.price}</Text></Col> 164 + <Text style={styles.contentText}>{item.name}</Text>
143 - <Col><Text style={styles.contentText}>{item.long}</Text></Col> 165 + </Col>
144 - <Col><Text style={styles.contentText}>{item.year}</Text></Col> 166 + <Col size={1} style={styles.contentCol}>
145 - <Col><Text style={styles.contentText}>{item.eachyear}</Text></Col> 167 + <Text style={styles.contentText}>{item.price}</Text>
  168 + </Col>
  169 + <Col size={1} style={styles.contentCol}>
  170 + <Text style={styles.contentText}>{item.long}</Text>
  171 + </Col>
  172 + <Col size={1} style={styles.contentCol}>
  173 + <Text style={styles.contentText}>{item.year}</Text>
  174 + </Col>
  175 + <Col size={1} style={styles.contentCol}>
  176 + <Text style={styles.contentText}>
  177 + {item.eachyear}
  178 + </Text>
  179 + </Col>
146 </Row> 180 </Row>
147 - ) 181 + );
148 - }) 182 + })}
149 - } 183 + <Row style={styles.countContainer}>
150 - <Row> 184 + <Text style={styles.countText}>{gridData.count}</Text>
151 - <Text>1200</Text> 185 + <Text style={styles.contentText}>元/年</Text>
152 - <Text>元/年</Text>  
153 </Row> 186 </Row>
154 </Col> 187 </Col>
155 </Row> 188 </Row>
@@ -194,7 +227,7 @@ const styles = StyleSheet.create({ @@ -194,7 +227,7 @@ const styles = StyleSheet.create({
194 borderColor: "#E8E8E8", 227 borderColor: "#E8E8E8",
195 borderTopWidth: 0.5, 228 borderTopWidth: 0.5,
196 flexDirection: "row", 229 flexDirection: "row",
197 - paddingVertical: 12, 230 + paddingVertical: 12
198 }, 231 },
199 leftInfoContaier: { 232 leftInfoContaier: {
200 flex: 1, 233 flex: 1,
@@ -208,10 +241,10 @@ const styles = StyleSheet.create({ @@ -208,10 +241,10 @@ const styles = StyleSheet.create({
208 }, 241 },
209 TInfoContaier: { 242 TInfoContaier: {
210 flexDirection: "row", 243 flexDirection: "row",
211 - marginBottom: 12, 244 + marginBottom: 12
212 }, 245 },
213 BInfoContaier: { 246 BInfoContaier: {
214 - flexDirection: "row", 247 + flexDirection: "row"
215 }, 248 },
216 adviceContainer: { 249 adviceContainer: {
217 marginLeft: 18, 250 marginLeft: 18,
@@ -219,12 +252,12 @@ const styles = StyleSheet.create({ @@ -219,12 +252,12 @@ const styles = StyleSheet.create({
219 borderStyle: "solid", 252 borderStyle: "solid",
220 borderColor: "#E8E8E8", 253 borderColor: "#E8E8E8",
221 borderTopWidth: 0.5, 254 borderTopWidth: 0.5,
222 - paddingVertical: 12, 255 + paddingVertical: 12
223 }, 256 },
224 adviceText: { 257 adviceText: {
225 fontSize: 13, 258 fontSize: 13,
226 lineHeight: 20, 259 lineHeight: 20,
227 - color: "#242424", 260 + color: "#242424"
228 }, 261 },
229 configureContaier: { 262 configureContaier: {
230 backgroundColor: "white", 263 backgroundColor: "white",
@@ -235,8 +268,8 @@ const styles = StyleSheet.create({ @@ -235,8 +268,8 @@ const styles = StyleSheet.create({
235 paddingRight: 18, 268 paddingRight: 18,
236 borderStyle: "solid", 269 borderStyle: "solid",
237 borderColor: "#E8E8E8", 270 borderColor: "#E8E8E8",
238 - borderTopWidth: 0.5, 271 + borderTopWidth: 1,
239 - paddingVertical: 12, 272 + paddingVertical: 12
240 }, 273 },
241 gridtitleContaier: { 274 gridtitleContaier: {
242 justifyContent: "center", 275 justifyContent: "center",
@@ -245,18 +278,43 @@ const styles = StyleSheet.create({ @@ -245,18 +278,43 @@ const styles = StyleSheet.create({
245 backgroundColor: "#1B9341", 278 backgroundColor: "#1B9341",
246 borderColor: "#E8E8E8", 279 borderColor: "#E8E8E8",
247 borderStyle: "solid", 280 borderStyle: "solid",
248 - borderLeftWidth: 0.5, 281 + borderLeftWidth: 0.5
249 }, 282 },
250 gridheaderText: { 283 gridheaderText: {
251 fontSize: 11, 284 fontSize: 11,
252 - color: "white", 285 + color: "white"
253 }, 286 },
254 actor: { 287 actor: {
255 justifyContent: "center", 288 justifyContent: "center",
256 alignItems: "center", 289 alignItems: "center",
  290 + borderColor: "#ccc",
  291 + borderStyle: "solid",
  292 + borderWidth: 0.5
  293 + },
  294 + contentCol: {
  295 + justifyContent: "center",
  296 + alignItems: "center",
  297 + paddingVertical: 8,
  298 + borderColor: "#ccc",
  299 + borderStyle: "solid",
  300 + borderBottomWidth: 0.5,
  301 + borderRightWidth: 0.5
257 }, 302 },
258 contentText: { 303 contentText: {
259 fontSize: 12, 304 fontSize: 12,
260 - lineHeight: 17, 305 + lineHeight: 17
  306 + },
  307 + countContainer: {
  308 + justifyContent: "center",
  309 + alignItems: "center",
  310 + paddingVertical: 8,
  311 + borderColor: "#ccc",
  312 + borderStyle: "solid",
  313 + borderBottomWidth: 0.5,
  314 + borderRightWidth: 0.5
  315 + },
  316 + countText: {
  317 + fontSize: 18,
  318 + color: "#1B9341"
261 } 319 }
262 }); 320 });