ice/react-materials/blocks/AbilityIntroduction/src/AbilityIntroduction.jsx at master · fucssjs/ice · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
import React, { Component } from 'react';
import { Grid } from '@icedesign/base';

const { Row, Col } = Grid;

const frameworkIcon = require('./images/framework_icon.png');
const componentIcon = require('./images/component_icon.png');
const apiIcon = require('./images/api_icon.png');

const abilities = [
  {
    icon: frameworkIcon,
    title: '框架',
    content: '熟悉的社区开发模式，彻底的组件化能力',
    link: '/framework/',
  },
  {
    icon: componentIcon,
    title: '组件',
    content: '为开发者提供了一系列基础组件，通过组件组合进行高效开发',
    link: '/components/',
  },
  {
    icon: apiIcon,
    title: 'API',
    content: '手机淘宝能力支持和保障',
    link: '/api/',
  },
];

export default class AbilityIntroduction extends Component {
  renderAblities = () => {
    return abilities.map(({ icon, title, content, link }, idx) => {
      return (
        <Col xxs="24" l="8" style={styles.item} key={idx}>
          <img src={icon} style={{ width: '160px', height: '160px' }} alt="" />
          <div style={{ fontSize: '24px', color: '#333', marginBottom: '6px' }}>
            {title}
          </div>
          <div
            style={{
              width: '182px',
              fontSize: '16px',
              color: '#6D7A82',
              marginBottom: '30px',
              lineHeight: '1.7em',
            }}
          >
            {content}
          </div>
          <a href={link} style={{ color: '#00B0CF', fontSize: '16px' }}>
            了解更多
            <div
              style={{
                background: '#00B0CF',
                width: '26px',
                height: '26px',
                borderRadius: '13px',
                display: 'inline-flex',
                justifyContent: 'center',
                alignItems: 'center',
                marginLeft: '10px',
              }}
            >
              <div
                style={{
                  display: 'inline-block',
                  marginLeft: '-4px', // -10 * sqrt(2) / 4
                  width: '10px',
                  height: '10px',
                  borderRight: '1px solid #fff',
                  borderBottom: '1px solid #fff',
                  transform: 'rotate(-45deg)',
                }}
              />
            </div>
          </a>
        </Col>
      );
    });
  };
  render() {
    return (
      <div style={styles.container}>
        <div style={styles.title}>我们的能力</div>
        <div style={styles.subtitle}>&lt; Distinguishing Feature &gt;</div>
        <Row wrap style={styles.group}>
          {this.renderAblities()}
        </Row>
      </div>
    );
  }
}

const styles = {
  container: {
    background: '#fafafa',
    padding: '70px 70px 140px',
    textAlign: 'center',
  },
  title: {
    color: '#333',
    fontSize: '48px',
    whiteSpace: 'nowrap',
    marginBottom: '10px',
  },
  group: {
    display: 'flex',
    flexDirection: 'row',
    justifyContent: 'center',
    alignItems: 'center',
    marginTop: '40px',
  },
  item: {
    flex: 1,
    display: 'flex',
    flexDirection: 'column',
    justifyContent: 'center',
    alignItems: 'center',
    marginBottom: '20px',
  },
};