罗广聪 / ProtectGod

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

table

Inline Side-by-side
Showing 1 changed file with 108 additions and 50 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 - name: "成人意外险", 23 + {
24 - price: "50W", 24 + name: "成人意外险",
25 - long: "1年", 25 + price: "50W",
26 - year: "20年", 26 + long: "1年",
27 - eachyear: "150元", 27 + year: "20年",
28 - },{ 28 + eachyear: "150元"
29 - name: "成人意外险", 29 + },
30 - price: "50W", 30 + {
31 - long: "1年", 31 + name: "成人意外险",
32 - year: "20年", 32 + price: "50W",
33 - eachyear: "150元", 33 + long: "1年",
34 - },{ 34 + year: "20年",
35 - name: "成人意外险", 35 + eachyear: "150元"
36 - price: "50W", 36 + },
37 - long: "1年", 37 + {
38 - year: "20年", 38 + name: "成人意外险",
39 - eachyear: "150元", 39 + price: "50W",
40 - }] 40 + long: "1年",
  41 + year: "20年",
  42 + eachyear: "150元"
  43 + }
  44 + ],
  45 + count: "1200",
41 } 46 }
42 }; 47 };
43 } 48 }
@@ -109,7 +114,7 @@ export default class Home extends Component { @@ -109,7 +114,7 @@ export default class Home extends Component {
109 </View> 114 </View>
110 <View style={styles.adviceContainer}> 115 <View style={styles.adviceContainer}>
111 <Text style={styles.adviceText}> 116 <Text style={styles.adviceText}>
112 - 作为家庭的经济支柱，压力和责任重大，应优先进行保险配置，且应占家庭保险的中支出和总保额的大比重，建议依次配置以下产品，以保障家庭持续、高品质的运营 117 + 作为家庭的经济支柱，压力和责任重大，应优先进行保险配置，且应占家庭保险的中支出和总保额的大比重，建议依次配置以下产品，以保障家庭持续、高品质的运营
113 </Text> 118 </Text>
114 </View> 119 </View>
115 </View> 120 </View>
@@ -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) => { 161 + return (
139 - return ( 162 + <Row key={index}>
140 - <Row key={index}> 163 + <Col size={1.5} style={styles.contentCol}>
141 - <Col><Text style={styles.contentText}>{item.name}</Text></Col> 164 + <Text style={styles.contentText}>{item.name}</Text>
142 - <Col><Text style={styles.contentText}>{item.price}</Text></Col> 165 + </Col>
143 - <Col><Text style={styles.contentText}>{item.long}</Text></Col> 166 + <Col size={1} style={styles.contentCol}>
144 - <Col><Text style={styles.contentText}>{item.year}</Text></Col> 167 + <Text style={styles.contentText}>{item.price}</Text>
145 - <Col><Text style={styles.contentText}>{item.eachyear}</Text></Col> 168 + </Col>
146 - </Row> 169 + <Col size={1} style={styles.contentCol}>
147 - ) 170 + <Text style={styles.contentText}>{item.long}</Text>
148 - }) 171 + </Col>
149 - } 172 + <Col size={1} style={styles.contentCol}>
150 - <Row> 173 + <Text style={styles.contentText}>{item.year}</Text>
151 - <Text>1200</Text> 174 + </Col>
152 - <Text>元/年</Text> 175 + <Col size={1} style={styles.contentCol}>
  176 + <Text style={styles.contentText}>
  177 + {item.eachyear}
  178 + </Text>
  179 + </Col>
  180 + </Row>
  181 + );
  182 + })}
  183 + <Row style={styles.countContainer}>
  184 + <Text style={styles.countText}>{gridData.count}</Text>
  185 + <Text style={styles.contentText}>元/年</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 });