ice/blocks/FeatureDisplay/src/FeatureDisplay.jsx at ice-developer-scripts · 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
import React, { Component } from 'react';

const data = [
  {
    title: '虚拟主机-入门版',
    description:
      '1G 磁盘空间；10G 流量；100M 带宽；PHP/Python/Ruby 支持；MySQL/PgSQL 支持；支持 1 站点；免费自动安装SSL证书；免费安装/搬家网站',
    imgUrl:
      'https://img.alicdn.com/tfs/TB1RBTKi4rI8KJjy0FpXXb5hVXa-456-456.png',
  },
  {
    title: '虚拟主机-大流量',
    description:
      '5G 磁盘空间；50G 流量；100M 带宽；PHP/Python/Ruby 支持；MySQL/PgSQL 支持；支持 5 站点；免费自动安装SSL证书；免费安装/搬家网站',
    imgUrl:
      'https://img.alicdn.com/tfs/TB1LN_Ai9_I8KJjy0FoXXaFnVXa-450-453.png',
  },
  {
    title: '虚拟主机-高速洛杉矶',
    description:
      '20G 磁盘空间；50G 流量；100M 带宽；PHP/Python/Ruby 支持；MySQL/PgSQL 支持；支持 1 站点；免费自动安装SSL证书；免费安装/搬家网站',
    imgUrl:
      'https://img.alicdn.com/tfs/TB1K3JmgOqAXuNjy1XdXXaYcVXa-450-450.png',
  },
  {
    title: '洛杉矶 OVZ-VPS',
    description:
      '10G 磁盘空间；1/512M CPU/内存；50M 带宽；1独立 IPV4；2G DDOS防御；300G 流量；免费安装管理面板',
    imgUrl:
      'https://img.alicdn.com/tfs/TB124gfiY_I8KJjy1XaXXbsxpXa-450-453.png',
  },
  {
    title: '洛杉矶 KVM-VPS',
    description:
      '15G 磁盘空间；1/1024M CPU/内存；50M 带宽；1独立 IPV4；2G DDOS防御；500G 流量；免费安装管理面板',
    imgUrl:
      'https://img.alicdn.com/tfs/TB1s4T4i2DH8KJjy1XcXXcpdXXa-450-450.png',
  },
  {
    title: '云电商系统',
    description:
      '微信商城/PC商城（增值）；会员粉丝动态管理；全网订单处理；智慧仓库管理；电脑、平板、手机，多终端收银；自动售货机交互屏多种支撑硬件；终身免费技术指导',
    imgUrl:
      'https://img.alicdn.com/tfs/TB1oEe3i8fH8KJjy1XbXXbLdXXa-453-453.png',
  },
];

export default class FeatureDisplay extends Component {
  static displayName = 'FeatureDisplay';

  static propTypes = {};

  static defaultProps = {};

  constructor(props) {
    super(props);
    this.state = {};
  }

  render() {
    return (
      <div className="feature-display" style={styles.container}>
        <div style={styles.items}>
          {data.map((item, index) => {
            return (
              <div key={index} style={styles.item}>
                <img src={item.imgUrl} style={styles.image} alt="" />
                <h3 style={styles.title}>{item.title}</h3>
                <p style={styles.description}>{item.description}</p>
              </div>
            );
          })}
        </div>
      </div>
    );
  }
}

const styles = {
  container: {
    width: '100%',
    maxWidth: '1080px',
    margin: '0 auto',
    padding: '0 80px',
  },
  items: {
    display: 'flex',
    flexWrap: 'wrap',
  },
  item: {
    width: '33%',
    textAlign: 'center',
    padding: '0 30px',
    margin: '40px 0',
  },
  title: {
    fontWeight: 'bold',
    fontSize: '20px',
  },
  image: {
    width: '150px',
    height: '150px',
    borderRadius: '50%',
  },
  description: {
    fontSize: '13px',
    lineHeight: '22px',
    color: '#999',
  },
};