@bit-sun/business-component 1.0.9 → 1.0.14

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
package/.umirc.ts CHANGED
@@ -2,7 +2,7 @@
2
2
  * @Description:
3
3
  * @Author: rodchen
4
4
  * @Date: 2021-11-30 22:59:39
5
- * @LastEditTime: 2021-12-29 14:23:46
5
+ * @LastEditTime: 2021-12-29 16:14:33
6
6
  * @LastEditors: rodchen
7
7
  */
8
8
  import { defineConfig } from 'dumi';
@@ -1,5 +1,4 @@
1
1
  import React from 'react';
2
- import 'antd/dist/antd.css';
3
2
  import './index.less';
4
3
  declare class DataValidation extends React.Component {
5
4
  constructor(props: any);
@@ -0,0 +1,5 @@
1
+ import './index.less';
2
+ declare const QueryMutipleInput: ({ onValueChange }: {
3
+ onValueChange: any;
4
+ }) => JSX.Element;
5
+ export default QueryMutipleInput;
package/dist/index.d.ts CHANGED
@@ -1,2 +1,2 @@
1
1
  export { default as DataValidation } from './components/DataValidation';
2
- export { default as QueryInput } from './components/QueryInput';
2
+ export { default as QueryMutipleInput } from './components/QueryMutipleInput';
package/dist/index.esm.js CHANGED
@@ -2,7 +2,6 @@ import axios from 'axios';
2
2
  import React, { createContext, useContext, useEffect, forwardRef, createElement, useState } from 'react';
3
3
  import { message, Menu, Space, Dropdown, Tooltip, Button, Checkbox, Input, Modal } from 'antd';
4
4
  import { DragDropContext, Droppable, Draggable } from 'react-beautiful-dnd';
5
- import 'antd/dist/antd.css';
6
5
  import classNames from 'classnames';
7
6
  import { useDebounceFn } from 'ahooks';
8
7
 
@@ -77,14 +76,14 @@ function _inherits(subClass, superClass) {
77
76
  throw new TypeError("Super expression must either be null or a function");
78
77
  }
79
78
 
79
+ subClass.prototype = Object.create(superClass && superClass.prototype, {
80
+ constructor: {
81
+ value: subClass,
82
+ writable: true,
83
+ configurable: true
84
+ }
85
+ });
80
86
  Object.defineProperty(subClass, "prototype", {
81
- value: Object.create(superClass && superClass.prototype, {
82
- constructor: {
83
- value: subClass,
84
- writable: true,
85
- configurable: true
86
- }
87
- }),
88
87
  writable: false
89
88
  });
90
89
  if (superClass) _setPrototypeOf(subClass, superClass);
@@ -2052,7 +2051,12 @@ var DataValidation = /*#__PURE__*/function (_React$Component) {
2052
2051
  return {
2053
2052
  id: "item-0".concat(index),
2054
2053
  content: mapping.get(item),
2055
- code: item
2054
+ code: item,
2055
+ "ct": {
2056
+ "fa": "General",
2057
+ "t": "s" //格式类型为数字类型
2058
+
2059
+ }
2056
2060
  };
2057
2061
  });
2058
2062
  _this.state = {
@@ -2145,10 +2149,10 @@ var DataValidation = /*#__PURE__*/function (_React$Component) {
2145
2149
  return DataValidation;
2146
2150
  }(React.Component);
2147
2151
 
2148
- var css_248z$1 = ".query_input button {\n width: '50px';\n}\n.query_input_wrapper {\n display: flex;\n}\n.query_input_wrapper_left {\n width: 100px;\n}\n.query_input_wrapper_right {\n color: #9e9e9e;\n}\n.query_input_textArea {\n margin-top: 15px;\n}\n";
2152
+ var css_248z$1 = ".query_input_show {\n display: flex;\n}\n.query_input_expand_button {\n position: relative;\n width: 30px;\n color: #ffffff;\n cursor: pointer;\n}\n.query_input_expand_button span {\n position: absolute;\n height: 20px;\n line-height: 14px;\n left: 50%;\n top: 50%;\n transform: translate(-50%, -50%);\n}\n.query_input_wrapper {\n display: flex;\n}\n.query_input_wrapper_left {\n width: 100px;\n}\n.query_input_wrapper_right {\n color: #9e9e9e;\n}\n.query_input_textArea {\n margin-top: 15px;\n}\n";
2149
2153
  styleInject(css_248z$1);
2150
2154
 
2151
- var QueryInput = function QueryInput(_ref) {
2155
+ var QueryMutipleInput = function QueryMutipleInput(_ref) {
2152
2156
  var onValueChange = _ref.onValueChange;
2153
2157
 
2154
2158
  var _useState = useState(false),
@@ -2208,9 +2212,9 @@ var QueryInput = function QueryInput(_ref) {
2208
2212
  };
2209
2213
 
2210
2214
  return /*#__PURE__*/React.createElement("div", {
2211
- className: css_248z$1.query_input
2212
- }, /*#__PURE__*/React.createElement(Input.Group, {
2213
- compact: true
2215
+ className: 'query_input'
2216
+ }, /*#__PURE__*/React.createElement("div", {
2217
+ class: "query_input_show"
2214
2218
  }, /*#__PURE__*/React.createElement(Input, {
2215
2219
  value: value,
2216
2220
  onChange: outerChange,
@@ -2222,11 +2226,15 @@ var QueryInput = function QueryInput(_ref) {
2222
2226
  e.preventDefault();
2223
2227
  },
2224
2228
  style: {
2225
- width: 'calc(100% - 50px)'
2229
+ width: 'calc(100% - 30px)'
2226
2230
  },
2227
2231
  placeholder: "\u8BF7\u8F93\u5165\uFF08\u67E5\u8BE2\u591A\u4E2A\u503C\u8BF7\u7528 ; \u6216 , \u5206\u5272\uFF09"
2228
2232
  }), /*#__PURE__*/React.createElement(Button, {
2229
- className: css_248z$1.button,
2233
+ style: {
2234
+ width: '30px',
2235
+ padding: '2px',
2236
+ height: 'auto'
2237
+ },
2230
2238
  onClick: showModal,
2231
2239
  type: "primary"
2232
2240
  }, "...")), /*#__PURE__*/React.createElement(Modal, {
@@ -2244,13 +2252,13 @@ var QueryInput = function QueryInput(_ref) {
2244
2252
  onClick: handleOk
2245
2253
  }, "\u5F55\u5165")]
2246
2254
  }, /*#__PURE__*/React.createElement("div", {
2247
- className: css_248z$1.query_input_wrapper
2255
+ className: 'query_input_wrapper'
2248
2256
  }, /*#__PURE__*/React.createElement("div", {
2249
- className: css_248z$1.query_input_wrapper_left
2257
+ className: 'query_input_wrapper_left'
2250
2258
  }, "\u5F55\u5165\u533A\uFF1A"), /*#__PURE__*/React.createElement("div", {
2251
- className: css_248z$1.query_input_wrapper_right
2259
+ className: 'query_input_wrapper_right'
2252
2260
  }, /*#__PURE__*/React.createElement("div", null, "\u5982\u9700\u540C\u65F6\u4F7F\u7528\u591A\u4E2A\u503C\u8FDB\u884C\u67E5\u8BE2\uFF0C\u8BF7\u4F7F\u7528\u9017\u53F7\u3001\u5206\u53F7\u3001\u7A7A\u683C\u6216\u6362\u884C\u8FDB\u884C\u503C\u7684\u5206\u9694\uFF0C\u4E2D\u82F1\u6587\u683C\u5F0F\u7684\u7B26\u53F7\u5747\u652F\u6301"), /*#__PURE__*/React.createElement("div", {
2253
- className: css_248z$1.query_input_textArea
2261
+ className: 'query_input_textArea'
2254
2262
  }, /*#__PURE__*/React.createElement(Input.TextArea, {
2255
2263
  value: popvalue,
2256
2264
  onChange: onChange,
@@ -2277,10 +2285,10 @@ function ToCDB(str) {
2277
2285
  * @Description:
2278
2286
  * @Author: rodchen
2279
2287
  * @Date: 2021-11-30 22:59:39
2280
- * @LastEditTime: 2021-12-27 20:16:20
2288
+ * @LastEditTime: 2021-12-29 17:43:01
2281
2289
  * @LastEditors: rodchen
2282
2290
  */
2283
2291
  var resposne = JSON.parse(localStorage.getItem('userInfo') || '{}');
2284
2292
  axios.defaults.headers.common['sso-sessionid'] = (resposne === null || resposne === void 0 ? void 0 : resposne.sessionId) || '';
2285
2293
 
2286
- export { DataValidation, QueryInput };
2294
+ export { DataValidation, QueryMutipleInput };
package/dist/index.js CHANGED
@@ -6,7 +6,6 @@ var axios = require('axios');
6
6
  var React = require('react');
7
7
  var antd = require('antd');
8
8
  var reactBeautifulDnd = require('react-beautiful-dnd');
9
- require('antd/dist/antd.css');
10
9
  var classNames = require('classnames');
11
10
  var ahooks = require('ahooks');
12
11
 
@@ -87,14 +86,14 @@ function _inherits(subClass, superClass) {
87
86
  throw new TypeError("Super expression must either be null or a function");
88
87
  }
89
88
 
89
+ subClass.prototype = Object.create(superClass && superClass.prototype, {
90
+ constructor: {
91
+ value: subClass,
92
+ writable: true,
93
+ configurable: true
94
+ }
95
+ });
90
96
  Object.defineProperty(subClass, "prototype", {
91
- value: Object.create(superClass && superClass.prototype, {
92
- constructor: {
93
- value: subClass,
94
- writable: true,
95
- configurable: true
96
- }
97
- }),
98
97
  writable: false
99
98
  });
100
99
  if (superClass) _setPrototypeOf(subClass, superClass);
@@ -2062,7 +2061,12 @@ var DataValidation = /*#__PURE__*/function (_React$Component) {
2062
2061
  return {
2063
2062
  id: "item-0".concat(index),
2064
2063
  content: mapping.get(item),
2065
- code: item
2064
+ code: item,
2065
+ "ct": {
2066
+ "fa": "General",
2067
+ "t": "s" //格式类型为数字类型
2068
+
2069
+ }
2066
2070
  };
2067
2071
  });
2068
2072
  _this.state = {
@@ -2155,10 +2159,10 @@ var DataValidation = /*#__PURE__*/function (_React$Component) {
2155
2159
  return DataValidation;
2156
2160
  }(React__default['default'].Component);
2157
2161
 
2158
- var css_248z$1 = ".query_input button {\n width: '50px';\n}\n.query_input_wrapper {\n display: flex;\n}\n.query_input_wrapper_left {\n width: 100px;\n}\n.query_input_wrapper_right {\n color: #9e9e9e;\n}\n.query_input_textArea {\n margin-top: 15px;\n}\n";
2162
+ var css_248z$1 = ".query_input_show {\n display: flex;\n}\n.query_input_expand_button {\n position: relative;\n width: 30px;\n color: #ffffff;\n cursor: pointer;\n}\n.query_input_expand_button span {\n position: absolute;\n height: 20px;\n line-height: 14px;\n left: 50%;\n top: 50%;\n transform: translate(-50%, -50%);\n}\n.query_input_wrapper {\n display: flex;\n}\n.query_input_wrapper_left {\n width: 100px;\n}\n.query_input_wrapper_right {\n color: #9e9e9e;\n}\n.query_input_textArea {\n margin-top: 15px;\n}\n";
2159
2163
  styleInject(css_248z$1);
2160
2164
 
2161
- var QueryInput = function QueryInput(_ref) {
2165
+ var QueryMutipleInput = function QueryMutipleInput(_ref) {
2162
2166
  var onValueChange = _ref.onValueChange;
2163
2167
 
2164
2168
  var _useState = React.useState(false),
@@ -2218,9 +2222,9 @@ var QueryInput = function QueryInput(_ref) {
2218
2222
  };
2219
2223
 
2220
2224
  return /*#__PURE__*/React__default['default'].createElement("div", {
2221
- className: css_248z$1.query_input
2222
- }, /*#__PURE__*/React__default['default'].createElement(antd.Input.Group, {
2223
- compact: true
2225
+ className: 'query_input'
2226
+ }, /*#__PURE__*/React__default['default'].createElement("div", {
2227
+ class: "query_input_show"
2224
2228
  }, /*#__PURE__*/React__default['default'].createElement(antd.Input, {
2225
2229
  value: value,
2226
2230
  onChange: outerChange,
@@ -2232,11 +2236,15 @@ var QueryInput = function QueryInput(_ref) {
2232
2236
  e.preventDefault();
2233
2237
  },
2234
2238
  style: {
2235
- width: 'calc(100% - 50px)'
2239
+ width: 'calc(100% - 30px)'
2236
2240
  },
2237
2241
  placeholder: "\u8BF7\u8F93\u5165\uFF08\u67E5\u8BE2\u591A\u4E2A\u503C\u8BF7\u7528 ; \u6216 , \u5206\u5272\uFF09"
2238
2242
  }), /*#__PURE__*/React__default['default'].createElement(antd.Button, {
2239
- className: css_248z$1.button,
2243
+ style: {
2244
+ width: '30px',
2245
+ padding: '2px',
2246
+ height: 'auto'
2247
+ },
2240
2248
  onClick: showModal,
2241
2249
  type: "primary"
2242
2250
  }, "...")), /*#__PURE__*/React__default['default'].createElement(antd.Modal, {
@@ -2254,13 +2262,13 @@ var QueryInput = function QueryInput(_ref) {
2254
2262
  onClick: handleOk
2255
2263
  }, "\u5F55\u5165")]
2256
2264
  }, /*#__PURE__*/React__default['default'].createElement("div", {
2257
- className: css_248z$1.query_input_wrapper
2265
+ className: 'query_input_wrapper'
2258
2266
  }, /*#__PURE__*/React__default['default'].createElement("div", {
2259
- className: css_248z$1.query_input_wrapper_left
2267
+ className: 'query_input_wrapper_left'
2260
2268
  }, "\u5F55\u5165\u533A\uFF1A"), /*#__PURE__*/React__default['default'].createElement("div", {
2261
- className: css_248z$1.query_input_wrapper_right
2269
+ className: 'query_input_wrapper_right'
2262
2270
  }, /*#__PURE__*/React__default['default'].createElement("div", null, "\u5982\u9700\u540C\u65F6\u4F7F\u7528\u591A\u4E2A\u503C\u8FDB\u884C\u67E5\u8BE2\uFF0C\u8BF7\u4F7F\u7528\u9017\u53F7\u3001\u5206\u53F7\u3001\u7A7A\u683C\u6216\u6362\u884C\u8FDB\u884C\u503C\u7684\u5206\u9694\uFF0C\u4E2D\u82F1\u6587\u683C\u5F0F\u7684\u7B26\u53F7\u5747\u652F\u6301"), /*#__PURE__*/React__default['default'].createElement("div", {
2263
- className: css_248z$1.query_input_textArea
2271
+ className: 'query_input_textArea'
2264
2272
  }, /*#__PURE__*/React__default['default'].createElement(antd.Input.TextArea, {
2265
2273
  value: popvalue,
2266
2274
  onChange: onChange,
@@ -2287,11 +2295,11 @@ function ToCDB(str) {
2287
2295
  * @Description:
2288
2296
  * @Author: rodchen
2289
2297
  * @Date: 2021-11-30 22:59:39
2290
- * @LastEditTime: 2021-12-27 20:16:20
2298
+ * @LastEditTime: 2021-12-29 17:43:01
2291
2299
  * @LastEditors: rodchen
2292
2300
  */
2293
2301
  var resposne = JSON.parse(localStorage.getItem('userInfo') || '{}');
2294
2302
  axios__default['default'].defaults.headers.common['sso-sessionid'] = (resposne === null || resposne === void 0 ? void 0 : resposne.sessionId) || '';
2295
2303
 
2296
2304
  exports.DataValidation = DataValidation;
2297
- exports.QueryInput = QueryInput;
2305
+ exports.QueryMutipleInput = QueryMutipleInput;
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@bit-sun/business-component",
3
- "version": "1.0.9",
3
+ "version": "1.0.14",
4
4
  "scripts": {
5
5
  "start": "dumi dev",
6
6
  "docs:build": "dumi build",
@@ -30,7 +30,6 @@
30
30
  "ahooks": "^3.1.2",
31
31
  "antd": "4.17.2",
32
32
  "axios": "^0.24.0",
33
- "bs-business-component": "^1.0.1",
34
33
  "classnames": "^2.3.1",
35
34
  "react": "^16.12.0",
36
35
  "react-beautiful-dnd": "10.0.0"
@@ -41,10 +40,9 @@
41
40
  "father-build": "^1.17.2",
42
41
  "gh-pages": "^3.0.0",
43
42
  "lint-staged": "^10.0.7",
44
- "prettier": "^2.2.1",
45
- "yorkie": "^2.0.0"
43
+ "prettier": "^2.2.1"
46
44
  },
47
45
  "publishConfig": {
48
46
  "access": "public"
49
47
  }
50
- }
48
+ }
@@ -2,7 +2,7 @@
2
2
  * @Description:
3
3
  * @Author: rodchen
4
4
  * @Date: 2021-12-01 10:52:08
5
- * @LastEditTime: 2021-12-22 14:24:35
5
+ * @LastEditTime: 2021-12-29 17:11:56
6
6
  * @LastEditors: rodchen
7
7
  */
8
8
  // @ts-nocheck
@@ -19,7 +19,6 @@ import {
19
19
  message,
20
20
  } from 'antd';
21
21
  import { DragDropContext, Droppable, Draggable } from 'react-beautiful-dnd';
22
- import 'antd/dist/antd.css';
23
22
  import {
24
23
  ExclamationCircleOutlined,
25
24
  DownOutlined,
@@ -107,6 +106,10 @@ class DataValidation extends React.Component {
107
106
  id: `item-0${index}`,
108
107
  content: mapping.get(item),
109
108
  code: item,
109
+ "ct": { //单元格值格式
110
+ "fa": "General", //格式名称为自动格式
111
+ "t": "s" //格式类型为数字类型
112
+ }
110
113
  };
111
114
  });
112
115
 
@@ -419,7 +422,7 @@ class DataValidation extends React.Component {
419
422
  console.log(setExportData);
420
423
  setExportData([123123]);
421
424
  })
422
- .catch((err) => {});
425
+ .catch((err) => { });
423
426
  };
424
427
 
425
428
  filterData = (type: string) => {
@@ -0,0 +1,37 @@
1
+ .query_input {
2
+ &_show {
3
+ display: flex;
4
+ }
5
+
6
+ &_expand_button {
7
+ position: relative;
8
+ width: 30px;
9
+ color: #ffffff;
10
+ cursor: pointer;
11
+
12
+ span {
13
+ position: absolute;
14
+ height: 20px;
15
+ line-height: 14px;
16
+ left: 50%;
17
+ top: 50%;
18
+ transform: translate(-50%, -50%);
19
+ }
20
+ }
21
+
22
+ &_wrapper {
23
+ display: flex;
24
+
25
+ &_left {
26
+ width: 100px;
27
+ }
28
+
29
+ &_right {
30
+ color: #9e9e9e;
31
+ }
32
+ }
33
+
34
+ &_textArea {
35
+ margin-top: 15px;
36
+ }
37
+ }
@@ -9,13 +9,13 @@ title: 批量查询组件
9
9
  order: 1
10
10
  ---
11
11
 
12
- ## QueryInput
12
+ ## QueryMutipleInput
13
13
 
14
14
  Demo:
15
15
 
16
16
  ```tsx
17
17
  import React, { useRef } from 'react';
18
- import { QueryInput } from '../../index';
18
+ import { QueryMutipleInput } from '../../index';
19
19
 
20
20
  export default () => {
21
21
  const handleOnChange = (value) => {
@@ -24,7 +24,7 @@ export default () => {
24
24
 
25
25
  return (
26
26
  <div>
27
- <QueryInput onValueChange={handleOnChange} />
27
+ <QueryMutipleInput onValueChange={handleOnChange} />
28
28
  </div>
29
29
  );
30
30
  };
@@ -2,17 +2,16 @@
2
2
  * @Description:
3
3
  * @Author: rodchen
4
4
  * @Date: 2021-12-01 10:52:08
5
- * @LastEditTime: 2021-12-29 14:19:32
5
+ * @LastEditTime: 2021-12-29 19:14:56
6
6
  * @LastEditors: rodchen
7
7
  */
8
8
  // @ts-nocheck
9
9
  import React, { useState, useEffect } from 'react';
10
10
  import { useDebounceFn } from 'ahooks';
11
11
  import { Input, Button, Modal } from 'antd';
12
- import 'antd/dist/antd.css';
13
- import styles from './index.less';
12
+ import './index.less';
14
13
 
15
- const QueryInput = ({ onValueChange }) => {
14
+ const QueryMutipleInput = ({ onValueChange }) => {
16
15
  const [isModalVisible, setIsModalVisible] = useState(false);
17
16
  const [value, setValue] = useState('');
18
17
  const [popvalue, setPopValue] = useState('');
@@ -61,8 +60,8 @@ const QueryInput = ({ onValueChange }) => {
61
60
  };
62
61
 
63
62
  return (
64
- <div className={styles.query_input}>
65
- <Input.Group compact>
63
+ <div className={'query_input'}>
64
+ <div class="query_input_show">
66
65
  <Input
67
66
  value={value}
68
67
  onChange={outerChange}
@@ -73,13 +72,11 @@ const QueryInput = ({ onValueChange }) => {
73
72
  formaData(e.clipboardData.getData('text'));
74
73
  e.preventDefault();
75
74
  }}
76
- style={{ width: 'calc(100% - 50px)' }}
75
+ style={{ width: 'calc(100% - 30px)' }}
77
76
  placeholder="请输入(查询多个值请用 ; 或 , 分割)"
78
77
  />
79
- <Button className={styles.button} onClick={showModal} type="primary">
80
- ...
81
- </Button>
82
- </Input.Group>
78
+ <Button style={{width: '30px', padding: '2px', height: 'auto'}} onClick={showModal} type="primary">...</Button>
79
+ </div>
83
80
  <Modal
84
81
  width={600}
85
82
  title="多值录入"
@@ -95,13 +92,13 @@ const QueryInput = ({ onValueChange }) => {
95
92
  </Button>,
96
93
  ]}
97
94
  >
98
- <div className={styles.query_input_wrapper}>
99
- <div className={styles.query_input_wrapper_left}>录入区:</div>
100
- <div className={styles.query_input_wrapper_right}>
95
+ <div className={'query_input_wrapper'}>
96
+ <div className={'query_input_wrapper_left'}>录入区:</div>
97
+ <div className={'query_input_wrapper_right'}>
101
98
  <div>
102
99
  如需同时使用多个值进行查询,请使用逗号、分号、空格或换行进行值的分隔,中英文格式的符号均支持
103
100
  </div>
104
- <div className={styles.query_input_textArea}>
101
+ <div className={'query_input_textArea'}>
105
102
  <Input.TextArea
106
103
  value={popvalue}
107
104
  onChange={onChange}
@@ -128,4 +125,4 @@ function ToCDB(str) {
128
125
  return tmp;
129
126
  }
130
127
 
131
- export default QueryInput;
128
+ export default QueryMutipleInput;
package/src/index.ts CHANGED
@@ -2,7 +2,7 @@
2
2
  * @Description:
3
3
  * @Author: rodchen
4
4
  * @Date: 2021-11-30 22:59:39
5
- * @LastEditTime: 2021-12-27 20:16:20
5
+ * @LastEditTime: 2021-12-29 17:43:01
6
6
  * @LastEditors: rodchen
7
7
  */
8
8
 
@@ -13,4 +13,4 @@ const resposne = JSON.parse(localStorage.getItem('userInfo') || '{}');
13
13
  axios.defaults.headers.common['sso-sessionid'] = resposne?.sessionId || '';
14
14
 
15
15
  export { default as DataValidation } from './components/DataValidation';
16
- export { default as QueryInput } from './components/QueryInput';
16
+ export { default as QueryMutipleInput } from './components/QueryMutipleInput';
@@ -1,5 +0,0 @@
1
- import 'antd/dist/antd.css';
2
- declare const QueryInput: ({ onValueChange }: {
3
- onValueChange: any;
4
- }) => JSX.Element;
5
- export default QueryInput;
@@ -1,21 +0,0 @@
1
- .query_input {
2
- button {
3
- width: '50px';
4
- }
5
-
6
- &_wrapper {
7
- display: flex;
8
-
9
- &_left {
10
- width: 100px;
11
- }
12
-
13
- &_right {
14
- color: #9e9e9e;
15
- }
16
- }
17
-
18
- &_textArea {
19
- margin-top: 15px;
20
- }
21
- }