style migrate v3

spug_web/src/pages/system/setting/About.js

@@ -5,7 +5,8 @@
  */
 import React from 'react';
 import styles from './index.module.css';
-import { Descriptions, Spin, Icon, notification } from "antd";
+import { SmileTwoTone } from '@ant-design/icons';
+import { Descriptions, Spin, notification } from "antd";
 import { observer } from 'mobx-react'
 import { http, VERSION } from 'libs';
 
@@ -33,7 +34,7 @@ class About extends React.Component {
             duration: 0,
             top: 88,
             message: `发现新版本 ${res.tag_name}`,
-            icon: <Icon type="smile" theme="twoTone"/>,
+            icon: <SmileTwoTone />,
             btn: <a target="_blank" rel="noopener noreferrer" href="https://spug.dev/docs/update-version/">如何升级？</a>,
             description: <pre style={{lineHeight: '30px'}}>{logs}</pre>
           })

spug_web/src/pages/system/setting/AlarmSetting.js

@@ -3,39 +3,32 @@
  * Copyright (c) <spug.dev@gmail.com>
  * Released under the AGPL-3.0 License.
  */
-import React from 'react';
-import {observer} from 'mobx-react';
-import {Button, Form, Input, Radio, message, Popover} from 'antd';
+import React, { useState } from 'react';
+import { observer } from 'mobx-react';
+import { Button, Form, Input, Radio, Space, message, Popover } from 'antd';
 import styles from './index.module.css';
-import {http} from 'libs';
+import { http } from 'libs';
 import store from './store';
 import lds from 'lodash';
 
 
-@observer
-class AlarmSetting extends React.Component {
-  constructor(props) {
-    super(props);
-    this.setting = JSON.parse(lds.get(store.settings, 'mail_service.value', "{}"));
-    this.state = {
-      mode: this.setting['server'] === undefined ? '1' : '2',
-      spug_key: lds.get(store.settings, 'spug_key.value', ""),
-      mail_test_loading: false,
-    }
+export default observer(function () {
+  const [form] = Form.useForm();
+  const setting = JSON.parse(lds.get(store.settings, 'mail_service.value', '{}'));
+  const [mode, setMode] = useState(setting.server === undefined ? '1' : '2');
+  const [spug_key, setSpugKey] = useState(lds.get(store.settings, 'spug_key.value', ''));
+  const [loading, setLoading] = useState(false);
+
+  function handleEmailTest() {
+    setLoading(true);
+    const formData = form.getFieldsValue();
+    http.post('/api/setting/email_test/', formData)
+      .then(() => {
+        message.success('邮件服务连接成功')
+      }).finally(() => setLoading(false))
   }
 
-  handleEmailTest = () => {
-    this.props.form.validateFields((error, data) => {
-      if (!error) {
-        this.setState({mail_test_loading: true});
-        http.post('/api/setting/email_test/', data).then(()=> {
-          message.success('邮件服务连接成功')
-        }).finally(()=> this.setState({mail_test_loading: false}))
-      }
-    })
-  };
-
-  _doSubmit = (formData) => {
+  function _doSubmit(formData) {
     store.loading = true;
     http.post('/api/setting/', {data: formData})
       .then(() => {
@@ -43,114 +36,74 @@ class AlarmSetting extends React.Component {
         store.fetchSettings()
       })
       .finally(() => store.loading = false)
-  };
+  }
 
-  handleSubmit = () => {
-    const {mode, spug_key} = this.state;
+  function handleSubmit() {
     const formData = [{key: 'spug_key', value: spug_key}];
     if (mode === '1') {
       formData.push({key: 'mail_service', value: '{}'});
-      this._doSubmit(formData)
+      _doSubmit(formData)
     } else {
-      this.props.form.validateFields((err, data) => {
-        if (!err) {
-          formData.push({key: 'mail_service', value: JSON.stringify(data)});
-          this._doSubmit(formData)
-        }
-      })
+      const tmp = form.getFieldsValue();
+      formData.push({key: 'mail_service', value: JSON.stringify(tmp)});
+      _doSubmit(formData)
     }
-  };
+  }
 
-
-  render() {
-    const {getFieldDecorator} = this.props.form;
-    const {mode, spug_key} = this.state;
-    const spugWx = <img src="http://image.qbangmang.com/spug-weixin.jpeg" alt='spug'/>;
-    return (
-      <React.Fragment>
-        <div className={styles.title}>报警服务设置</div>
-        <Form style={{maxWidth: 340}}>
-          <Form.Item
-            colon={false}
-            label="调用凭据"
-            help={<span>如需要使用Spug内置的邮件和微信报警服务，请关注公众号
+  const spugWx = <img src="http://image.qbangmang.com/spug-weixin.jpeg" alt='spug'/>;
+  return (
+    <React.Fragment>
+      <div className={styles.title}>报警服务设置</div>
+      <div style={{maxWidth: 340}}>
+        <Form.Item
+          label="调用凭据"
+          labelCol={{span: 24}}
+          help={<span>如需要使用Spug内置的邮件和微信报警服务，请关注公众号
               <span style={{color: '#008dff', cursor: 'pointer'}}>
                   <Popover content={spugWx}>
                     <span>Spug运维</span>
                   </Popover>
               </span>
               在【我的】页面获取调用凭据，否则请留空。</span>}>
-            <Input
-              value={spug_key}
-              onChange={e => this.setState({spug_key: e.target.value})}
-              placeholder="请输入Spug微信公众号获取到的Token"/>
-          </Form.Item>
-          <Form.Item colon={false} label="邮件服务" help="用于通过邮件方式发送报警信息">
-            <Radio.Group
-              value={mode}
-              style={{marginBottom: 8}}
-              buttonStyle="solid"
-              onChange={e => this.setState({mode: e.target.value})}>
-              <Radio.Button value="1">内置</Radio.Button>
-              <Radio.Button value="2">自定义</Radio.Button>
-            </Radio.Group>
-            <div style={{display: mode === '1' ? 'none' : 'block'}}>
-              <Form.Item labelCol={{span: 8}} wrapperCol={{span: 16}} required label="邮件服务器">
-                {getFieldDecorator('server', {
-                  initialValue: this.setting['server'], rules: [
-                    {required: true, message: '请输入邮件服务器地址'}
-                  ]
-                })(
-                  <Input placeholder="例如：smtp.exmail.qq.com"/>
-                )}
+          <Input
+            value={spug_key}
+            onChange={e => setSpugKey(e.target.value)}
+            placeholder="请输入Spug微信公众号获取到的Token"/>
+        </Form.Item>
+        <Form.Item label="邮件服务" labelCol={{span: 24}} style={{marginTop: 12}} help="用于通过邮件方式发送报警信息">
+          <Radio.Group
+            value={mode}
+            style={{marginBottom: 8}}
+            buttonStyle="solid"
+            onChange={e => setMode(e.target.value)}>
+            <Radio.Button value="1">内置</Radio.Button>
+            <Radio.Button value="2">自定义</Radio.Button>
+          </Radio.Group>
+          <div style={{display: mode === '1' ? 'none' : 'block'}}>
+            <Form form={form} initialValues={setting} labelCol={{span: 7}} wrapperCol={{span: 17}}>
+              <Form.Item required name="server" label="邮件服务器">
+                <Input placeholder="例如：smtp.exmail.qq.com"/>
               </Form.Item>
-              <Form.Item labelCol={{span: 8}} wrapperCol={{span: 16}} required label="端口">
-                {getFieldDecorator('port', {
-                  initialValue: this.setting['port'], rules: [
-                    {required: true, message: '请输入邮件服务端口'}
-                  ]
-                })(
-                  <Input placeholder="例如：465"/>
-                )}
+              <Form.Item required name="port" label="端口">
+                <Input placeholder="例如：465"/>
               </Form.Item>
-              <Form.Item labelCol={{span: 8}} wrapperCol={{span: 16}} required label="邮箱账号">
-                {getFieldDecorator('username', {
-                  initialValue: this.setting['username'], rules: [
-                    {required: true, message: '请输入邮箱账号'}
-                  ]
-                })(
-                  <Input placeholder="例如：dev@exmail.com"/>
-                )}
+              <Form.Item required name="username" label="邮箱账号">
+                <Input placeholder="例如：dev@exmail.com"/>
               </Form.Item>
-              <Form.Item labelCol={{span: 8}} wrapperCol={{span: 16}} required label="密码/授权码">
-                {getFieldDecorator('password', {
-                  initialValue: this.setting['password'], rules: [
-                    {required: true, message: '请输入邮箱账号对应的密码或授权码'}
-                  ]
-                })(
-                  <Input.Password placeholder="请输入对应的密码或授权码"/>
-                )}
+              <Form.Item required name="password" label="密码/授权码">
+                <Input.Password placeholder="请输入对应的密码或授权码"/>
               </Form.Item>
-              <Form.Item labelCol={{span: 8}} wrapperCol={{span: 16}} label="发件人昵称">
-                {getFieldDecorator('nickname', {initialValue: this.setting['nickname']})(
-                  <Input placeholder="请输入发件人昵称"/>
-                )}
+              <Form.Item name="nickname" label="发件人昵称">
+                <Input placeholder="请输入发件人昵称"/>
               </Form.Item>
-            </div>
-          </Form.Item>
-          <div>
-          <Button
-            type="danger" loading={this.state.mail_test_loading}
-            style={{ display: mode === '1' ? 'none' : 'inline-block' ,marginRight: 10}}
-            onClick={this.handleEmailTest}>测试邮件服务</Button>
-          <Button
-            type="primary" loading={store.loading} style={{ marginTop: 20}}
-            onClick={this.handleSubmit}>保存设置</Button>
+            </Form>
           </div>
-        </Form>
-      </React.Fragment>
-    )
-  }
-}
-
-export default Form.create()(AlarmSetting)
+        </Form.Item>
+        <Space style={{marginTop: 12}}>
+          {mode !== '1' && <Button type="danger" loading={loading} onClick={handleEmailTest}>测试邮件服务</Button>}
+          <Button type="primary" loading={store.loading} onClick={handleSubmit}>保存设置</Button>
+        </Space>
+      </div>
+    </React.Fragment>
+  )
+})

spug_web/src/pages/system/setting/BasicSetting.js

@@ -5,7 +5,8 @@
  */
 import React from 'react';
 import styles from './index.module.css';
-import { Form} from "antd";
+import { Form } from '@ant-design/compatible';
+import '@ant-design/compatible/assets/index.css';
 import { observer } from 'mobx-react'
 
 

spug_web/src/pages/system/setting/KeySetting.js

@@ -5,7 +5,7 @@
  */
 import React from 'react';
 import { observer } from 'mobx-react';
-import { Alert, Button, Form, Input, Modal, message } from 'antd';
+import { Form, Alert, Button, Input, Modal, message } from 'antd';
 import styles from './index.module.css';
 import http from 'libs/http';
 import store from './store';
@@ -30,7 +30,12 @@ export default observer(function () {
   function doModify() {
     const public_key = lds.get(store.settings, 'public_key.value');
     const private_key = lds.get(store.settings, 'private_key.value');
-    return http.post('/api/setting/', {data: [{key: 'public_key', value: public_key}, {key: 'private_key', value: private_key}]})
+    return http.post('/api/setting/', {
+      data: [{key: 'public_key', value: public_key}, {
+        key: 'private_key',
+        value: private_key
+      }]
+    })
       .then(() => {
         message.success('保存成功');
         store.fetchSettings()
@@ -49,7 +54,7 @@ export default observer(function () {
         message="小提示"
         description="在这里你可以上传并使用已有的密钥对，没有上传密钥的情况下，Spug会在首次添加主机时自动生成密钥对。"
       />
-      <Form style={{maxWidth: 650}}>
+      <Form layout="vertical" style={{maxWidth: 650, marginTop: 12}}>
         <Form.Item label="公钥" help="一般位于 ~/.ssh/id_rsa.pub">
           <Input.TextArea
             rows={7}
@@ -58,7 +63,7 @@ export default observer(function () {
             onChange={e => lds.set(store.settings, 'public_key.value', e.target.value)}
             placeholder="请输入公钥"/>
         </Form.Item>
-        <Form.Item label="私钥" help="一般位于 ~/.ssh/id_rsa">
+        <Form.Item label="私钥" help="一般位于 ~/.ssh/id_rsa" style={{marginTop: 12}}>
           <Input.TextArea
             rows={14}
             spellCheck={false}
@@ -66,7 +71,7 @@ export default observer(function () {
             onChange={e => lds.set(store.settings, 'private_key.value', e.target.value)}
             placeholder="请输入私钥"/>
         </Form.Item>
-        <Form.Item>
+        <Form.Item style={{marginTop: 12}}>
           <Button type="primary" loading={store.loading} onClick={handleSubmit}>保存设置</Button>
         </Form.Item>
       </Form>

spug_web/src/pages/system/setting/LDAPSetting.js

@@ -3,102 +3,66 @@
  * Copyright (c) <spug.dev@gmail.com>
  * Released under the AGPL-3.0 License.
  */
-import React from 'react';
+import React, { useState } from 'react';
 import styles from './index.module.css';
-import {Button, Form, Input, message} from "antd";
+import { Form, Button, Input, Space, message } from 'antd';
 import { http } from 'libs';
 import { observer } from 'mobx-react'
 import store from './store';
 import lds from "lodash";
 
 
-@observer
-class LDAPSetting extends React.Component {
-  constructor(props) {
-    super(props);
-    this.setting = JSON.parse(lds.get(store.settings, 'ldap_service.value', "{}"));
-    this.state = {
-      loading: false,
-      ldap_test_loading: false,
-    }
+export default observer(function () {
+  const [form] = Form.useForm();
+  const [loading, setLoading] = useState(false);
+  const setting = JSON.parse(lds.get(store.settings, 'ldap_service.value', '{}'));
+
+  function handleSubmit() {
+    store.loading = true;
+    const formData = form.getFieldsValue();
+    http.post('/api/setting/', {data: [{key: 'ldap_service', value: JSON.stringify(formData)}]})
+      .then(() => {
+        message.success('保存成功');
+        store.fetchSettings()
+      })
+      .finally(() => store.loading = false)
   }
 
-  handleSubmit = () => {
-    const formData = [];
-    this.props.form.validateFields((err, data) => {
-      if (!err) {
-        this.setState({loading: true});
-        formData.push({key: 'ldap_service', value: JSON.stringify(data)});
-        http.post('/api/setting/', {data: formData})
-          .then(() => {
-            message.success('保存成功');
-            store.fetchSettings()
-          })
-          .finally(() => this.setState({loading: false}))
-      }
-    })
-  };
-  ldapTest = () => {
-    this.props.form.validateFields((error, data) => {
-      if (!error) {
-        this.setState({ldap_test_loading: true});
-        http.post('/api/setting/ldap_test/', data).then(()=> {
-          message.success('LDAP服务连接成功')
-        }).finally(()=> this.setState({ldap_test_loading: false}))
-      }
-    })
-  };
-
-  render() {
-    const {getFieldDecorator} = this.props.form;
-    return (
-      <React.Fragment>
-        <div className={styles.title}>LDAP设置</div>
-        <Form style={{maxWidth: 400}} labelCol={{span: 8}} wrapperCol={{span: 16}}>
-          <Form.Item required label="LDAP服务地址">
-            {getFieldDecorator('server', {initialValue: this.setting['server'],
-              rules: [{required: true, message: '请输入LDAP服务地址'}]})(
-              <Input placeholder="例如：ldap.spug.dev"/>
-            )}
-          </Form.Item>
-          <Form.Item required label="LDAP服务端口">
-            {getFieldDecorator('port', {initialValue: this.setting['port'],
-              rules: [{required: true, message: '请输入LDAP服务端口'}]})(
-              <Input placeholder="例如：389"/>
-            )}
-          </Form.Item>
-          <Form.Item required label="管理员DN">
-            {getFieldDecorator('admin_dn', {initialValue: this.setting['admin_dn'],
-              rules: [{required: true, message: '请输入LDAP管理员DN'}]})(
-              <Input placeholder="例如：cn=admin,dc=spug,dc=dev"/>
-            )}
-          </Form.Item>
-          <Form.Item required label="管理员密码">
-            {getFieldDecorator('password', {initialValue: this.setting['password'],
-              rules: [{required: true, message: '请输入LDAP管理员密码'}]})(
-              <Input.Password placeholder="请输入LDAP管理员密码"/>
-            )}
-          </Form.Item>
-          <Form.Item required label="LDAP搜索规则">
-            {getFieldDecorator('rules', {initialValue: this.setting['rules'],
-              rules: [{required: true, message: '请输入LDAP搜索规则'}]})(
-              <Input placeholder="例如：cn"/>
-            )}
-          </Form.Item>
-          <Form.Item required label="基本DN">
-            {getFieldDecorator('base_dn', {initialValue: this.setting['base_dn'],
-              rules: [{required: true, message: '请输入LDAP基本DN'}]})(
-              <Input placeholder="例如：dc=spug,dc=dev"/>
-            )}
-          </Form.Item>
-          <Form.Item>
-            <Button  type="danger" loading={this.state.ldap_test_loading} style={{ marginRight: '10px' }}
-                     onClick={this.ldapTest}>测试LDAP</Button>
-            <Button type="primary" loading={this.state.loading} onClick={this.handleSubmit}>保存设置</Button>
-          </Form.Item>
-        </Form>
-      </React.Fragment>
-    )
+  function ldapTest() {
+    setLoading(true);
+    const formData = form.getFieldsValue();
+    http.post('/api/setting/ldap_test/', formData).then(() => {
+      message.success('LDAP服务连接成功')
+    }).finally(() => setLoading(false))
   }
-}
-export default Form.create()(LDAPSetting)
+
+  return (
+    <React.Fragment>
+      <div className={styles.title}>LDAP设置</div>
+      <Form form={form} initialValues={setting} style={{maxWidth: 400}} labelCol={{span: 8}} wrapperCol={{span: 16}}>
+        <Form.Item required name="server" label="LDAP服务地址">
+          <Input placeholder="例如：ldap.spug.dev"/>
+        </Form.Item>
+        <Form.Item required name="port" label="LDAP服务端口">
+          <Input placeholder="例如：389"/>
+        </Form.Item>
+        <Form.Item required name="admin_dn" label="管理员DN">
+          <Input placeholder="例如：cn=admin,dc=spug,dc=dev"/>
+        </Form.Item>
+        <Form.Item required name="password" label="管理员密码">
+          <Input.Password placeholder="请输入LDAP管理员密码"/>
+        </Form.Item>
+        <Form.Item required name="rules" label="LDAP搜索规则">
+          <Input placeholder="例如：cn"/>
+        </Form.Item>
+        <Form.Item required name="base_dn" label="基本DN">
+          <Input placeholder="例如：dc=spug,dc=dev"/>
+        </Form.Item>
+        <Space>
+          <Button type="danger" loading={loading} onClick={ldapTest}>测试LDAP</Button>
+          <Button type="primary" loading={store.loading} onClick={handleSubmit}>保存设置</Button>
+        </Space>
+      </Form>
+    </React.Fragment>
+  )
+})

spug_web/src/pages/system/setting/OpenService.js

@@ -5,7 +5,7 @@
  */
 import React from 'react';
 import { observer } from 'mobx-react';
-import { Button, Form, Input, message } from 'antd';
+import { Form, Button, Input, message } from 'antd';
 import styles from './index.module.css';
 import http from 'libs/http';
 import store from './store';
@@ -27,14 +27,14 @@ export default observer(function () {
   return (
     <React.Fragment>
       <div className={styles.title}>开放服务设置</div>
-      <Form style={{maxWidth: 320}}>
+      <Form layout="vertical" style={{maxWidth: 320}}>
         <Form.Item colon={false} label="访问凭据" help="该自定义凭据用于访问平台的开放服务，例如：配置中心的配置获取API等，其他开放服务请查询官方文档。">
           <Input
             value={lds.get(store.settings, 'api_key.value')}
             onChange={e => lds.set(store.settings, 'api_key.value', e.target.value)}
             placeholder="请输入自定义Token"/>
         </Form.Item>
-        <Form.Item>
+        <Form.Item style={{marginTop: 12}}>
           <Button type="primary" loading={store.loading} onClick={handleSubmit}>保存设置</Button>
         </Form.Item>
       </Form>

spug_web/src/pages/system/setting/SecuritySetting.js

@@ -27,17 +27,18 @@ export default observer(function () {
   return (
     <React.Fragment>
       <div className={styles.title}>安全设置</div>
-      <Form style={{maxWidth: 500}}>
+      <div style={{maxWidth: 500}}>
         <Form.Item
           label="访问IP校验"
+          labelCol={{span: 24}}
           help="建议开启，校验是否获取了真实的访问者IP，防止因为增加的反向代理层导致基于IP的安全策略失效，当校验失败时会在登录时弹窗提醒。如果你在内网部署且仅在内网使用可以关闭该特性。">
           <Switch
             checkedChildren="开启"
             unCheckedChildren="关闭"
             onChange={handleChangeVerifyIP}
-            checked={checked} />
+            checked={checked}/>
         </Form.Item>
-      </Form>
+      </div>
     </React.Fragment>
   )
 })

spug_web/src/pages/system/setting/index.js

@@ -5,7 +5,7 @@
  */
 import React from 'react';
 import { Menu } from 'antd';
-import { AuthDiv } from 'components';
+import { AuthDiv, Breadcrumb } from 'components';
 import BasicSetting from './BasicSetting';
 import AlarmSetting from './AlarmSetting';
 import LDAPSetting from './LDAPSetting';
@@ -32,30 +32,37 @@ class Index extends React.Component {
   render() {
     const {selectedKeys} = this.state;
     return (
-      <AuthDiv auth="system.setting.view" className={styles.container}>
-        <div className={styles.left}>
-          <Menu
-            mode="inline"
-            selectedKeys={selectedKeys}
-            style={{border: 'none'}}
-            onSelect={({selectedKeys}) => this.setState({selectedKeys})}>
-            <Menu.Item key="basic">基本设置</Menu.Item>
-            <Menu.Item key="security">安全设置</Menu.Item>
-            <Menu.Item key="ldap">LDAP设置</Menu.Item>
-            <Menu.Item key="key">密钥设置</Menu.Item>
-            <Menu.Item key="alarm">报警服务设置</Menu.Item>
-            <Menu.Item key="service">开放服务设置</Menu.Item>
-            <Menu.Item key="about">关于</Menu.Item>
-          </Menu>
-        </div>
-        <div className={styles.right}>
-          {selectedKeys[0] === 'basic' && <BasicSetting/>}
-          {selectedKeys[0] === 'security' && <SecuritySetting/>}
-          {selectedKeys[0] === 'ldap' && <LDAPSetting/>}
-          {selectedKeys[0] === 'alarm' && <AlarmSetting/>}
-          {selectedKeys[0] === 'service' && <OpenService/>}
-          {selectedKeys[0] === 'key' && <KeySetting/>}
-          {selectedKeys[0] === 'about' && <About/>}
+      <AuthDiv auth="system.setting.view">
+        <Breadcrumb>
+          <Breadcrumb.Item>首页</Breadcrumb.Item>
+          <Breadcrumb.Item>系统管理</Breadcrumb.Item>
+          <Breadcrumb.Item>系统设置</Breadcrumb.Item>
+        </Breadcrumb>
+        <div className={styles.container}>
+          <div className={styles.left}>
+            <Menu
+              mode="inline"
+              selectedKeys={selectedKeys}
+              style={{border: 'none'}}
+              onSelect={({selectedKeys}) => this.setState({selectedKeys})}>
+              <Menu.Item key="basic">基本设置</Menu.Item>
+              <Menu.Item key="security">安全设置</Menu.Item>
+              <Menu.Item key="ldap">LDAP设置</Menu.Item>
+              <Menu.Item key="key">密钥设置</Menu.Item>
+              <Menu.Item key="alarm">报警服务设置</Menu.Item>
+              <Menu.Item key="service">开放服务设置</Menu.Item>
+              <Menu.Item key="about">关于</Menu.Item>
+            </Menu>
+          </div>
+          <div className={styles.right}>
+            {selectedKeys[0] === 'basic' && <BasicSetting/>}
+            {selectedKeys[0] === 'security' && <SecuritySetting/>}
+            {selectedKeys[0] === 'ldap' && <LDAPSetting/>}
+            {selectedKeys[0] === 'alarm' && <AlarmSetting/>}
+            {selectedKeys[0] === 'service' && <OpenService/>}
+            {selectedKeys[0] === 'key' && <KeySetting/>}
+            {selectedKeys[0] === 'about' && <About/>}
+          </div>
         </div>
       </AuthDiv>
     )

spug_web/src/pages/system/setting/index.module.css

@@ -3,17 +3,19 @@
     background-color: #fff;
     padding: 16px 0;
 }
+
 .left {
     flex: 2;
     border-right: 1px solid #e8e8e8;
 }
+
 .right {
     flex: 7;
     padding: 8px 40px;
 }
 
 .title {
-    margin-bottom: 12px;
+    margin-bottom: 24px;
     color: rgba(0, 0, 0, .85);
     font-weight: 500;
     font-size: 20px;