table

@@ -18,26 +18,31 @@ export default class Home extends Component {
     super(props);
     this.state = {
       gridData: {
-        title: ["角色","建议产品","建议保额","保险年限","缴费期限","年缴保费"],
-        products: [{
+        title: ["角色", "建议产品", "建议保额", "保险年限", "缴费期限", "年缴保费"],
+        products: [
+          {
             name: "成人意外险",
             price: "50W",
             long: "1年",
             year: "20年",
-          eachyear: "150元",
-        },{
+            eachyear: "150元"
+          },
+          {
             name: "成人意外险",
             price: "50W",
             long: "1年",
             year: "20年",
-          eachyear: "150元",
-        },{
+            eachyear: "150元"
+          },
+          {
             name: "成人意外险",
             price: "50W",
             long: "1年",
             year: "20年",
-          eachyear: "150元",
-        }]
+            eachyear: "150元"
+          }
+        ],
+        count: "1200",
       }
     };
   }
@@ -122,34 +127,62 @@ export default class Home extends Component {
           <ScrollView style={styles.tableContainer}>
             <Grid>
               <Row>
-                {gridData.title.map((item,index) => {
+                {/* {gridData.title.map((item,index) => {
                   return (
                     <Col key={index} style={styles.gridtitleContaier}><Text style={styles.gridheaderText}>{item}</Text></Col>
                   )
-                })}
+                })} */}
+                <Col size={1} style={styles.gridtitleContaier}>
+                  <Text style={styles.gridheaderText}>角色</Text>
+                </Col>
+                <Col size={1.5} style={styles.gridtitleContaier}>
+                  <Text style={styles.gridheaderText}>建议产品</Text>
+                </Col>
+                <Col size={1} style={styles.gridtitleContaier}>
+                  <Text style={styles.gridheaderText}>建议保额</Text>
+                </Col>
+                <Col size={1} style={styles.gridtitleContaier}>
+                  <Text style={styles.gridheaderText}>保险年限</Text>
+                </Col>
+                <Col size={1} style={styles.gridtitleContaier}>
+                  <Text style={styles.gridheaderText}>缴费期限</Text>
+                </Col>
+                <Col size={1} style={styles.gridtitleContaier}>
+                  <Text style={styles.gridheaderText}>年缴保费</Text>
+                </Col>
               </Row>
               <Row>
                 <Col style={styles.actor} size={1}>
                   <Text style={styles.contentText}>父亲</Text>
                   <Text style={styles.contentText}>42岁</Text>
                 </Col>
-                <Col size={5}>
-                  {
-                    gridData.products.map((item,index) => {
+                <Col size={5.5}>
+                  {gridData.products.map((item, index) => {
                     return (
                       <Row key={index}>
-                          <Col><Text style={styles.contentText}>{item.name}</Text></Col>
-                          <Col><Text style={styles.contentText}>{item.price}</Text></Col>
-                          <Col><Text style={styles.contentText}>{item.long}</Text></Col>
-                          <Col><Text style={styles.contentText}>{item.year}</Text></Col>
-                          <Col><Text style={styles.contentText}>{item.eachyear}</Text></Col>
+                        <Col size={1.5} style={styles.contentCol}>
+                          <Text style={styles.contentText}>{item.name}</Text>
+                        </Col>
+                        <Col size={1} style={styles.contentCol}>
+                          <Text style={styles.contentText}>{item.price}</Text>
+                        </Col>
+                        <Col size={1} style={styles.contentCol}>
+                          <Text style={styles.contentText}>{item.long}</Text>
+                        </Col>
+                        <Col size={1} style={styles.contentCol}>
+                          <Text style={styles.contentText}>{item.year}</Text>
+                        </Col>
+                        <Col size={1} style={styles.contentCol}>
+                          <Text style={styles.contentText}>
+                            {item.eachyear}
+                          </Text>
+                        </Col>
                       </Row>
-                      )
-                    })
-                  }
-                  <Row>
-                    <Text>1200</Text>
-                    <Text>元/年</Text>
+                    );
+                  })}
+                  <Row style={styles.countContainer}>
+                    <Text style={styles.countText}>{gridData.count}</Text>
+                    <Text style={styles.contentText}>元/年</Text>
                   </Row>
                 </Col>
               </Row>
@@ -194,7 +227,7 @@ const styles = StyleSheet.create({
     borderColor: "#E8E8E8",
     borderTopWidth: 0.5,
     flexDirection: "row",
-    paddingVertical: 12,
+    paddingVertical: 12
   },
   leftInfoContaier: {
     flex: 1,
@@ -208,10 +241,10 @@ const styles = StyleSheet.create({
   },
   TInfoContaier: {
     flexDirection: "row",
-    marginBottom: 12,
+    marginBottom: 12
   },
   BInfoContaier: {
-    flexDirection: "row",
+    flexDirection: "row"
   },
   adviceContainer: {
     marginLeft: 18,
@@ -219,12 +252,12 @@ const styles = StyleSheet.create({
     borderStyle: "solid",
     borderColor: "#E8E8E8",
     borderTopWidth: 0.5,
-    paddingVertical: 12,
+    paddingVertical: 12
   },
   adviceText: {
     fontSize: 13,
     lineHeight: 20,
-    color: "#242424",
+    color: "#242424"
   },
   configureContaier: {
     backgroundColor: "white",
@@ -235,8 +268,8 @@ const styles = StyleSheet.create({
     paddingRight: 18,
     borderStyle: "solid",
     borderColor: "#E8E8E8",
-    borderTopWidth: 0.5,
-    paddingVertical: 12,
+    borderTopWidth: 1,
+    paddingVertical: 12
   },
   gridtitleContaier: {
     justifyContent: "center",
@@ -245,18 +278,43 @@ const styles = StyleSheet.create({
     backgroundColor: "#1B9341",
     borderColor: "#E8E8E8",
     borderStyle: "solid",
-    borderLeftWidth: 0.5,
+    borderLeftWidth: 0.5
   },
   gridheaderText: {
     fontSize: 11,
-    color: "white",
+    color: "white"
   },
   actor: {
     justifyContent: "center",
     alignItems: "center",
+    borderColor: "#ccc",
+    borderStyle: "solid",
+    borderWidth: 0.5
+  },
+  contentCol: {
+    justifyContent: "center",
+    alignItems: "center",
+    paddingVertical: 8,
+    borderColor: "#ccc",
+    borderStyle: "solid",
+    borderBottomWidth: 0.5,
+    borderRightWidth: 0.5
   },
   contentText: {
     fontSize: 12,
-    lineHeight: 17,
+    lineHeight: 17
+  },
+  countContainer: {
+    justifyContent: "center",
+    alignItems: "center",
+    paddingVertical: 8,
+    borderColor: "#ccc",
+    borderStyle: "solid",
+    borderBottomWidth: 0.5,
+    borderRightWidth: 0.5
+  },
+  countText: {
+    fontSize: 18,
+    color: "#1B9341"
   }
 });