work-flow-master 1.0.2 → 1.0.4

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

@@ -1,431 +0,0 @@
-"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

@@ -1,113 +0,0 @@
-
-.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

@@ -1,111 +0,0 @@
-"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

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