work-flow-master 1.0.0 → 1.0.2

package/lib/components/Drawer/ConditionDrawer/index.js

@@ -0,0 +1,431 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = ConditionDrawer;
+var _react = _interopRequireWildcard(require("react"));
+var _antd = require("antd");
+var _SelectDialog = _interopRequireDefault(require("../../../components/Dialog/SelectDialog"));
+var _index = require("../../../utils/index");
+var _const = require("../../../utils/const");
+var _addClose = _interopRequireDefault(require("../../../assets/images/add-close1.png"));
+require("./index.scss");
+function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function (e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != typeof e && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (const t in e) "default" !== t && {}.hasOwnProperty.call(e, t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, t)) && (i.get || i.set) ? o(f, t, i) : f[t] = e[t]); return f; })(e, t); }
+// import { getConditions } from '@/api/index'
+
+function ConditionDrawer(props) {
+  let {
+    tableId,
+    conditionsConfig1,
+    conditionDrawer,
+    setCondition,
+    setConditionsConfig
+  } = props.store;
+  let [conditionVisible, setConditionVisible] = (0, _react.useState)(false);
+  let [configs, setConfigs] = (0, _react.useState)({
+    conditionNodes: []
+  });
+  let [config, setConfig] = (0, _react.useState)({
+    conditionList: []
+  });
+  let [conditions, setConditions] = (0, _react.useState)([]);
+  let [conditionList, setConditionList] = (0, _react.useState)([]);
+  let [checkedList, setCheckedList] = (0, _react.useState)([]);
+  let [priorityLevel, setPriorityLevel] = (0, _react.useState)('');
+  let [conditionRoleVisible, setConditionRoleVisible] = (0, _react.useState)(false);
+  (0, _react.useEffect)(() => {
+    if (!conditionsConfig1.value) return;
+    let {
+      value,
+      priorityLevel
+    } = conditionsConfig1;
+    let {
+      conditionNodes
+    } = value;
+    setConfigs(value);
+    setPriorityLevel(priorityLevel);
+    setConfig(priorityLevel ? conditionNodes[priorityLevel - 1] : {
+      nodeUserList: [],
+      conditionList: []
+    });
+  }, [conditionsConfig1]);
+  const changeOptType = (e, item, i, key) => {
+    item[key] = typeof e === 'object' ? e.target.value : e;
+    if (key === 'optType') {
+      if (item.optType == 1) {
+        item.zdy1 = 2;
+      } else {
+        item.zdy1 = 1;
+        item.zdy2 = 2;
+      }
+    }
+    config.conditionList.splice(i, 1, item);
+    setConfig({
+      ...config,
+      conditionList: config.conditionList
+    });
+  };
+  const toStrChecked = (item, key) => {
+    let a = item.zdy1 ? item.zdy1.split(",") : [];
+    var isIncludes = (0, _index.toggleStrClass)(item, key);
+    if (!isIncludes) {
+      a.push(key);
+      item.zdy1 = a.toString();
+      return item;
+    } else {
+      return removeStrEle(item, key);
+    }
+  };
+  const removeStrEle = (item, key) => {
+    let a = item.zdy1 ? item.zdy1.split(",") : [];
+    var includesIndex;
+    a.map((item, index) => {
+      if (item == key) {
+        includesIndex = index;
+      }
+    });
+    a.splice(includesIndex, 1);
+    item.zdy1 = a.toString();
+    return item;
+  };
+  const checkEvent = (item, key, i) => {
+    let data = toStrChecked(item, key);
+    config.conditionList.splice(i, 1, data);
+    setConfig({
+      ...config,
+      conditionList: config.conditionList
+    });
+  };
+  const addCondition = async () => {
+    let res = [];
+    setConditionVisible(true);
+    // let { data } = await getConditions({ tableId })
+    let data = {};
+    setConditions(data);
+    let {
+      conditionList
+    } = config;
+    if (conditionList) {
+      for (var i = 0; i < conditionList.length; i++) {
+        var {
+          columnId
+        } = conditionList[i];
+        if (columnId == 0) {
+          res.push({
+            columnId: 0
+          });
+        } else {
+          res.push(conditions.filter(item => item.columnId == columnId)[0]);
+        }
+      }
+    }
+    setConditionList(res);
+  };
+  const sureCondition = () => {
+    let data = {
+      ...config
+    };
+    //1.弹窗有，外面无+
+    //2.弹窗有，外面有不变
+    for (var i = 0; i < conditionList.length; i++) {
+      var {
+        columnId,
+        showName,
+        columnName,
+        showType,
+        columnType,
+        fixedDownBoxValue
+      } = conditionList[i];
+      if ((0, _index.toggleClass)(data.conditionList, conditionList[i], "columnId")) {
+        continue;
+      }
+      if (columnId == 0) {
+        data.nodeUserList = [];
+        data.conditionList.push({
+          type: 1,
+          columnId,
+          showName: '发起人'
+        });
+      } else {
+        if (columnType == "Double") {
+          data.conditionList.push({
+            showType,
+            columnId,
+            type: 2,
+            showName,
+            optType: "1",
+            zdy1: "2",
+            opt1: "<",
+            zdy2: "",
+            opt2: "<",
+            columnDbname: columnName,
+            columnType
+          });
+        } else if (columnType == "String" && showType == "3") {
+          data.conditionList.push({
+            showType,
+            columnId,
+            type: 2,
+            showName,
+            zdy1: "",
+            columnDbname: columnName,
+            columnType,
+            fixedDownBoxValue
+          });
+        }
+      }
+    }
+    //3.弹窗无，外面有-
+    for (let i = data.conditionList.length - 1; i >= 0; i--) {
+      if (!(0, _index.toggleClass)(conditionList, data.conditionList[i], "columnId")) {
+        data.conditionList.splice(i, 1);
+      }
+    }
+    data.conditionList.sort(function (a, b) {
+      return a.columnId - b.columnId;
+    });
+    setConfig(data);
+    setConditionVisible(false);
+  };
+  const changePriortyLevel = priorityLevel => {
+    setConfig({
+      ...config,
+      priorityLevel
+    });
+  };
+  const saveCondition = () => {
+    closeDrawer();
+    let {
+      conditionNodes
+    } = configs;
+    var a = conditionNodes.splice(config.priorityLevel - 1, 1); //截取旧下标
+    conditionNodes.splice(priorityLevel - 1, 0, a[0]); //填充新下标
+    conditionNodes.map((item, index) => {
+      item.priorityLevel = index + 1;
+    });
+    for (var i = 0; i < conditionNodes.length; i++) {
+      conditionNodes[i].error = (0, _index.conditionStr)({
+        conditionNodes
+      }, i) == "请设置条件" && i != conditionNodes.length - 1;
+    }
+    setConditionsConfig({
+      value: {
+        ...configs,
+        conditionNodes
+      },
+      flag: true,
+      id: conditionsConfig1.id
+    });
+  };
+  const addConditionRole = e => {
+    if (e.target.nodeName === "DIV" || e.target.nodeName === "P") {
+      setConditionRoleVisible(true);
+      setCheckedList(config.nodeUserList);
+    }
+  };
+  const sureConditionRole = nodeUserList => {
+    setConditionRoleVisible(false);
+    setConfig({
+      ...config,
+      nodeUserList
+    });
+  };
+  const closeDrawer = () => {
+    setCondition(false);
+  };
+  const checkedHandle = function () {
+    let data = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {
+      columnId: 0
+    };
+    setConditionList((0, _index.toChecked)(conditionList, data, 'columnId'));
+  };
+  const delItem = item => {
+    let data = {
+      ...config
+    };
+    if (item.type === 1) {
+      data.nodeUserList = [];
+    }
+    data.conditionList = (0, _index.removeEle)(data.conditionList, item, 'columnId');
+    setConfig(data);
+  };
+  const delUser = item => {
+    setConfig({
+      ...config,
+      nodeUserList: (0, _index.removeEle)(config.nodeUserList, item, 'targetId')
+    });
+  };
+  function getColumn(item, i) {
+    let {
+      nodeUserList
+    } = config;
+    let {
+      type,
+      showType,
+      showName,
+      columnType,
+      fixedDownBoxValue,
+      optType,
+      zdy1,
+      zdy2,
+      opt1,
+      opt2
+    } = item;
+    if (type === 1) {
+      return /*#__PURE__*/_react.default.createElement("div", null, /*#__PURE__*/_react.default.createElement("div", {
+        className: nodeUserList.length > 0 ? 'selected_list line' : 'line',
+        onClick: addConditionRole,
+        style: {
+          cursor: 'text'
+        }
+      }, nodeUserList.length == 0 ? /*#__PURE__*/_react.default.createElement("p", {
+        class: "like_input",
+        onClick: addConditionRole
+      }, nodeUserList.length === 0 ? '请选择具体人员/角色/部门' : '') : nodeUserList.map((item1, index1) => /*#__PURE__*/_react.default.createElement("span", {
+        key: index1
+      }, item1.name, /*#__PURE__*/_react.default.createElement("img", {
+        src: _addClose.default,
+        onClick: () => delUser(item1),
+        alt: ""
+      })))));
+    } else if (columnType == 'String' && showType == 3) {
+      let list = Object.values(JSON.parse(fixedDownBoxValue));
+      return /*#__PURE__*/_react.default.createElement("div", null, /*#__PURE__*/_react.default.createElement("div", {
+        className: "check_box line"
+      }, list.map(_ref => {
+        let {
+          key,
+          value
+        } = _ref;
+        return /*#__PURE__*/_react.default.createElement("a", {
+          className: (0, _index.toggleStrClass)(item, key) ? 'active' : '',
+          key: key,
+          onClick: () => checkEvent(item, key, i)
+        }, value);
+      })));
+    } else {
+      return /*#__PURE__*/_react.default.createElement("div", null, /*#__PURE__*/_react.default.createElement("div", {
+        className: "line"
+      }, /*#__PURE__*/_react.default.createElement(_antd.Select, {
+        className: "select",
+        value: optType,
+        options: _const.optTypes,
+        style: {
+          width: optType == 6 ? 370 : 100
+        },
+        onChange: e => changeOptType(e, item, i, "optType")
+      }), optType != 6 ? /*#__PURE__*/_react.default.createElement(_antd.InputNumber, {
+        placeholder: `请输入${showName}`,
+        value: zdy1,
+        controls: false,
+        bordered: false,
+        onChange: e => changeOptType(e, item, i, "zdy1")
+      }) : ''), optType == 6 ? /*#__PURE__*/_react.default.createElement("div", {
+        className: "line between"
+      }, /*#__PURE__*/_react.default.createElement(_antd.InputNumber, {
+        className: "mr_10",
+        value: zdy1,
+        controls: false,
+        bordered: false,
+        onChange: e => changeOptType(e, item, i, "zdy1")
+      }), /*#__PURE__*/_react.default.createElement(_antd.Select, {
+        className: "select",
+        value: opt1,
+        options: _const.opt1s,
+        onChange: e => changeOptType(e, item, i, "opt1")
+      }), /*#__PURE__*/_react.default.createElement("span", {
+        className: "ellipsis"
+      }, showName), /*#__PURE__*/_react.default.createElement(_antd.Select, {
+        className: "select ml_10",
+        value: opt2,
+        options: _const.opt1s,
+        onChange: e => changeOptType(e, item, i, "opt2")
+      }), /*#__PURE__*/_react.default.createElement(_antd.InputNumber, {
+        value: zdy2,
+        controls: false,
+        bordered: false,
+        onChange: e => changeOptType(e, item, i, "zdy2")
+      })) : '');
+    }
+  }
+  let icon = /*#__PURE__*/_react.default.createElement("span", {
+    className: "ant-icon-close"
+  });
+  let extra = () => {
+    let list = Array.from({
+      length: configs.conditionNodes.length
+    }, (_, i) => ({
+      value: i + 1,
+      label: `优先级${i + 1}`
+    }));
+    return /*#__PURE__*/_react.default.createElement(_antd.Select, {
+      style: {
+        marginRight: 20
+      },
+      value: config.priorityLevel,
+      options: list,
+      onChange: e => changePriortyLevel(e)
+    });
+  };
+  return /*#__PURE__*/_react.default.createElement(_antd.Drawer, {
+    title: "\u6761\u4EF6\u8BBE\u7F6E",
+    extra: extra(),
+    open: conditionDrawer,
+    className: "condition_copyer",
+    closable: false,
+    width: 550,
+    onClose: saveCondition
+  }, /*#__PURE__*/_react.default.createElement("div", {
+    className: "demo-drawer-content"
+  }, /*#__PURE__*/_react.default.createElement("div", {
+    className: "condition_content drawer_content"
+  }, /*#__PURE__*/_react.default.createElement("p", {
+    className: "tip"
+  }, "\u5F53\u5BA1\u6279\u5355\u540C\u65F6\u6EE1\u8DB3\u4EE5\u4E0B\u6761\u4EF6\u65F6\u8FDB\u5165\u6B64\u6D41\u7A0B"), /*#__PURE__*/_react.default.createElement("ul", null, config.conditionList.map((item, index) => /*#__PURE__*/_react.default.createElement("li", {
+    key: index
+  }, /*#__PURE__*/_react.default.createElement("span", {
+    className: "ellipsis"
+  }, item.type == 1 ? '发起人' : item.showName, "\uFF1A"), getColumn(item, index), /*#__PURE__*/_react.default.createElement("a", {
+    onClick: () => delItem(item)
+  }, "\u5220\u9664")))), /*#__PURE__*/_react.default.createElement(_antd.Button, {
+    type: "primary",
+    onClick: addCondition
+  }, "\u6DFB\u52A0\u6761\u4EF6"), /*#__PURE__*/_react.default.createElement(_antd.Modal, {
+    title: "\u9009\u62E9\u6761\u4EF6",
+    open: conditionVisible,
+    width: 480,
+    okText: "\u786E \u5B9A",
+    closeIcon: icon,
+    onOk: sureCondition,
+    cancelText: "\u53D6 \u6D88",
+    onCancel: () => setConditionVisible(false),
+    className: "condition_list"
+  }, /*#__PURE__*/_react.default.createElement("p", null, "\u8BF7\u9009\u62E9\u7528\u6765\u533A\u5206\u5BA1\u6279\u6D41\u7A0B\u7684\u6761\u4EF6\u5B57\u6BB5"), /*#__PURE__*/_react.default.createElement("p", {
+    className: "check_box"
+  }, /*#__PURE__*/_react.default.createElement("a", {
+    className: (0, _index.toggleClass)(conditionList, {
+      columnId: 0
+    }, 'columnId') ? 'active' : '',
+    onClick: () => checkedHandle()
+  }, "\u53D1\u8D77\u4EBA"), conditions.map((item, index) => /*#__PURE__*/_react.default.createElement("a", {
+    key: index,
+    className: (0, _index.toggleClass)(conditionList, item, 'columnId') ? 'active' : '',
+    onClick: () => checkedHandle(item)
+  }, item.showName))))), /*#__PURE__*/_react.default.createElement(_SelectDialog.default, {
+    type: "employeesRole",
+    visible: conditionRoleVisible,
+    setVisible: setConditionRoleVisible,
+    data: checkedList,
+    changeEvent: sureConditionRole,
+    isDepartment: true
+  }), /*#__PURE__*/_react.default.createElement("div", {
+    className: "demo-drawer-footer clear"
+  }, /*#__PURE__*/_react.default.createElement(_antd.Button, {
+    type: "primary",
+    onClick: saveCondition
+  }, "\u786E \u5B9A"), /*#__PURE__*/_react.default.createElement(_antd.Button, {
+    onClick: closeDrawer
+  }, "\u53D6 \u6D88"))));
+}

package/lib/components/Drawer/ConditionDrawer/index.scss

@@ -0,0 +1,113 @@
+
+.condition_copyer {
+    .condition_content {
+        padding: 20px 20px 0;
+        p.tip {
+            margin: 20px 0;
+            width: 510px;
+            text-indent: 17px;
+            line-height: 45px;
+            background: rgba(241, 249, 255, 1);
+            border: 1px solid rgba(64, 163, 247, 1);
+            color: #46a6fe;
+            font-size: 14px;
+        }
+        ul {
+            max-height: 500px;
+            overflow-y: scroll;
+            margin-bottom: 20px;
+            li {
+                &>span {
+                    float: left;
+                    margin-right: 8px;
+                    width: 70px;
+                    line-height: 32px;
+                    text-align: right;
+                }
+                &>div {
+                    display: inline-block;
+                    width: 370px;
+
+                    &>.line:not(:last-child) {
+                        margin-bottom: 10px;
+                    }
+                }
+                &:not(:last-child)>div>.line {
+                    margin-bottom: 20px;
+                }
+                &>a {
+                    float: right;
+                    margin-right: 10px;
+                    margin-top: 7px;
+                }
+                .like_input,
+                .select,
+                input {
+                    width: 100%;
+                    height: 32px;
+                    background: rgba(255, 255, 255, 1);
+                    border-radius: 4px;
+                    vertical-align: middle;
+                }
+                .like_input,
+                input{
+                    border: 1px solid rgba(217, 217, 217, 1);
+                    
+                }
+                .like_input{
+                    line-height: 30px;
+                    font-size: 12px;
+                    text-indent: 10px;
+                    color: #757575;
+                }
+                .select+.ant-input-number {
+                    width: 260px;
+                }
+                .select {
+                    margin-right: 10px;
+                    width: 100px;
+                }
+                .between{
+                    &>span{
+                        display: inline-block;
+                        width: 60px;
+                        vertical-align: middle;
+                    }
+                    .ant-select{
+                        width: 60px;
+                    }
+                    .ant-input-number{
+                        width: 75px;
+                    }
+                }
+                .line.selected_list {
+                    padding-left: 10px;
+                    border-radius: 4px;
+                    min-height: 32px;
+                    border: 1px solid rgba(217, 217, 217, 1);
+                    word-break: break-word;
+                }
+                .line.check_box {
+                    line-height: 32px;
+                }
+            }
+        }
+        .ant-btn {
+            margin-bottom: 20px;
+        }
+    }
+}
+.condition_list {
+    .ant-modal-body {
+        padding: 16px 26px;
+    }
+    p {
+        color: #666666;
+        margin-bottom: 10px;
+
+        &>.check_box {
+            margin-bottom: 0;
+            line-height: 36px;
+        }
+    }
+}

package/lib/components/Drawer/CopyerDrawer/index.js

@@ -0,0 +1,111 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = CopyerDrawer;
+var _react = _interopRequireWildcard(require("react"));
+var _antd = require("antd");
+var _index = require("../../../utils/index");
+var _SelectDialog = _interopRequireDefault(require("../../../components/Dialog/SelectDialog"));
+var _addClose = _interopRequireDefault(require("../../../assets/images/add-close1.png"));
+require("./index.scss");
+function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function (e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != typeof e && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (const t in e) "default" !== t && {}.hasOwnProperty.call(e, t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, t)) && (i.get || i.set) ? o(f, t, i) : f[t] = e[t]); return f; })(e, t); }
+/*
+ * @Date: 2023-03-15 17:56:12
+ * @LastEditors: StavinLi 495727881@qq.com
+ * @LastEditTime: 2023-03-23 17:57:29
+ * @FilePath: /workflow-react/src/components/Drawer/CopyerDrawer/index.js
+ */
+
+function CopyerDrawer(props) {
+  let {
+    copyerDrawer,
+    copyerConfig1,
+    setCopyerConfig,
+    setCopyer
+  } = props.store;
+  let [copyerVisible, setCopyerVisible] = (0, _react.useState)(false);
+  let [config, setConfig] = (0, _react.useState)({
+    nodeUserList: []
+  });
+  let [ccSelfSelectFlag, setCcSelfSelectFlag] = (0, _react.useState)([]);
+  let [checkedList, setCheckedList] = (0, _react.useState)([]);
+  (0, _react.useEffect)(() => {
+    if (!copyerConfig1.value) return;
+    setConfig(copyerConfig1.value);
+    setCcSelfSelectFlag(copyerConfig1.value.ccSelfSelectFlag == 0 ? [] : [copyerConfig1.value.ccSelfSelectFlag]);
+  }, [copyerConfig1]);
+  const addCopyer = () => {
+    setCopyerVisible(true);
+    setCheckedList(config.nodeUserList);
+  };
+  const sureCopyer = data => {
+    setCopyerVisible(false);
+    setConfig({
+      ...config,
+      nodeUserList: data
+    });
+  };
+  const saveCopyer = () => {
+    let data = {
+      ...config,
+      ccSelfSelectFlag: ccSelfSelectFlag.length == 0 ? 0 : 1,
+      error: (0, _index.copyerStr)(config)
+    };
+    setCopyerConfig({
+      value: data,
+      flag: true,
+      id: copyerConfig1.id
+    });
+    closeDrawer();
+  };
+  const closeDrawer = () => {
+    setCopyer(false);
+  };
+  return /*#__PURE__*/_react.default.createElement(_antd.Drawer, {
+    title: "\u6284\u9001\u4EBA\u8BBE\u7F6E",
+    open: copyerDrawer,
+    className: "set_copyer",
+    closable: false,
+    width: 550,
+    onClose: saveCopyer
+  }, /*#__PURE__*/_react.default.createElement("div", {
+    className: "demo-drawer-content"
+  }, /*#__PURE__*/_react.default.createElement("div", {
+    className: "copyer_content drawer_content"
+  }, /*#__PURE__*/_react.default.createElement(_antd.Button, {
+    type: "primary",
+    onClick: addCopyer
+  }, "\u6DFB\u52A0\u6210\u5458"), /*#__PURE__*/_react.default.createElement("p", {
+    className: "selected_list"
+  }, config.nodeUserList.map((item, index) => /*#__PURE__*/_react.default.createElement("span", {
+    key: index
+  }, item.name, /*#__PURE__*/_react.default.createElement("img", {
+    src: _addClose.default,
+    onClick: () => (0, _index.removeEle)(config.nodeUserList, item, 'targetId'),
+    alt: ""
+  }))), config.nodeUserList.length != 0 ? /*#__PURE__*/_react.default.createElement("a", {
+    onClick: () => config.nodeUserList = []
+  }, "\u6E05\u9664") : ''), /*#__PURE__*/_react.default.createElement(_antd.Checkbox.Group, {
+    value: ccSelfSelectFlag,
+    onChange: setCcSelfSelectFlag,
+    className: "clear"
+  }, /*#__PURE__*/_react.default.createElement(_antd.Checkbox, {
+    value: 1
+  }, "\u5141\u8BB8\u53D1\u8D77\u4EBA\u81EA\u9009\u6284\u9001\u4EBA"))), /*#__PURE__*/_react.default.createElement("div", {
+    className: "demo-drawer-footer clear"
+  }, /*#__PURE__*/_react.default.createElement(_antd.Button, {
+    type: "primary",
+    onClick: saveCopyer
+  }, "\u786E \u5B9A"), /*#__PURE__*/_react.default.createElement(_antd.Button, {
+    onClick: closeDrawer
+  }, "\u53D6 \u6D88")), /*#__PURE__*/_react.default.createElement(_SelectDialog.default, {
+    type: "employeesRole",
+    visible: copyerVisible,
+    setVisible: setCopyerVisible,
+    data: checkedList,
+    changeEvent: sureCopyer
+  })));
+}

package/lib/components/Drawer/CopyerDrawer/index.scss

@@ -0,0 +1,12 @@
+
+.set_copyer {
+    .copyer_content {
+        padding: 20px 20px 0;
+        .ant-btn {
+            margin-bottom: 20px;
+        }
+        .ant-checkbox {
+            margin-bottom: 20px;
+        }
+    }
+}