@titaui/pc 1.6.8 → 1.6.12

package/lib/components/point-demo/drop-down-box/index.js

@@ -0,0 +1,159 @@
+"use strict";
+
+function _typeof(obj) { "@babel/helpers - typeof"; if (typeof Symbol === "function" && typeof Symbol.iterator === "symbol") { _typeof = function _typeof(obj) { return typeof obj; }; } else { _typeof = function _typeof(obj) { return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }; } return _typeof(obj); }
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = void 0;
+
+var _react = _interopRequireWildcard(require("react"));
+
+var _popup = _interopRequireDefault(require("../popup"));
+
+var _down = _interopRequireDefault(require("../image/down.svg"));
+
+require("./index.css");
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
+
+function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
+
+function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { "default": obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj["default"] = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+
+function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
+
+function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }
+
+function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
+
+function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
+
+function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) { arr2[i] = arr[i]; } return arr2; }
+
+function _iterableToArrayLimit(arr, i) { var _i = arr == null ? null : typeof Symbol !== "undefined" && arr[Symbol.iterator] || arr["@@iterator"]; if (_i == null) return; var _arr = []; var _n = true; var _d = false; var _s, _e; try { for (_i = _i.call(arr); !(_n = (_s = _i.next()).done); _n = true) { _arr.push(_s.value); if (i && _arr.length === i) break; } } catch (err) { _d = true; _e = err; } finally { try { if (!_n && _i["return"] != null) _i["return"](); } finally { if (_d) throw _e; } } return _arr; }
+
+function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
+
+var SelectLayer = function SelectLayer(_ref) {
+  var style = _ref.style,
+      errMsg = _ref.errMsg,
+      className = _ref.className,
+      title = _ref.title,
+      _ref$required = _ref.required,
+      required = _ref$required === void 0 ? false : _ref$required,
+      initValue = _ref.initValue,
+      onChangeClassify = _ref.onChangeClassify,
+      items = _ref.items,
+      _ref$initText = _ref.initText,
+      initText = _ref$initText === void 0 ? '暂无' : _ref$initText,
+      popupProps = _ref.popupProps,
+      renderPrefixIcon = _ref.renderPrefixIcon,
+      renderSuffixIcon = _ref.renderSuffixIcon,
+      renderPrefixIconClass = _ref.renderPrefixIconClass,
+      renderSuffixIconClass = _ref.renderSuffixIconClass,
+      textClass = _ref.textClass,
+      _ref$forceRenderText = _ref.forceRenderText,
+      forceRenderText = _ref$forceRenderText === void 0 ? false : _ref$forceRenderText;
+
+  var _useState = (0, _react.useState)(false),
+      _useState2 = _slicedToArray(_useState, 2),
+      visible = _useState2[0],
+      setVisible = _useState2[1];
+
+  var _useState3 = (0, _react.useState)(items.find(function (item) {
+    return item.value === initValue;
+  })),
+      _useState4 = _slicedToArray(_useState3, 2),
+      selectItem = _useState4[0],
+      setSelectItem = _useState4[1];
+
+  var popupRef = (0, _react.useRef)(document.createElement('div'));
+  var handleSelectOkrClassify = (0, _react.useCallback)(function (key) {
+    setVisible(false);
+    setSelectItem(key);
+    onChangeClassify && onChangeClassify(key);
+  }, [onChangeClassify]);
+  (0, _react.useEffect)(function () {
+    setSelectItem(items.find(function (item) {
+      return item.value === initValue;
+    }));
+  }, [initValue]);
+  var renderSelection = (0, _react.useMemo)(function () {
+    return /*#__PURE__*/_react["default"].createElement("div", {
+      className: "drop-down__layer-select-wrapper"
+    }, items.map(function (item, index) {
+      return /*#__PURE__*/_react["default"].createElement("div", {
+        key: index,
+        onClick: function onClick(e) {
+          return handleSelectOkrClassify(item);
+        },
+        className: "drop-down__layer-select-text ".concat(selectItem && item.value === selectItem.value ? "drop-down__layer-select-text--active" : "")
+      }, item.label);
+    }));
+  }, [selectItem]);
+  (0, _react.useEffect)(function () {
+    setSelectItem(items.find(function (item) {
+      return item.value === initValue;
+    }));
+  }, [initValue]);
+  var handleClickText = (0, _react.useCallback)(function () {
+    setVisible(!visible);
+  }, [visible]);
+
+  var touchStart = function touchStart(e) {
+    e.persist();
+    e.preventDefault();
+    setVisible(!visible);
+  };
+
+  return /*#__PURE__*/_react["default"].createElement("div", {
+    className: "".concat(className, "  base-info-drop-down__layer")
+  }, /*#__PURE__*/_react["default"].createElement("div", {
+    className: "base-info-drop-down__layer-container",
+    style: style,
+    ref: popupRef
+  }, title, /*#__PURE__*/_react["default"].createElement("span", {
+    className: "required"
+  }, "*")), /*#__PURE__*/_react["default"].createElement(_popup["default"], _extends({
+    popupVisible: visible,
+    action: ["click"],
+    destroyPopupOnHide: true,
+    popup: renderSelection,
+    popupAlign: {
+      points: ["tl", "bl"],
+      offset: [0, 4]
+    },
+    mask: false,
+    getPopupContainer: function getPopupContainer() {
+      return popupRef.current;
+    },
+    popupStyle: {
+      width: "100%"
+    }
+  }, popupProps, {
+    onPopupVisibleChange: function onPopupVisibleChange(visible) {
+      return setVisible(visible);
+    }
+  }), /*#__PURE__*/_react["default"].createElement("div", {
+    className: "drop-down__layer-text ".concat(visible ? 'drop-down__layer-text--focus' : ''),
+    onClick: handleClickText // onTouchStart={()=>{}}
+    ,
+    onTouchEnd: touchStart
+  }, renderPrefixIcon && /*#__PURE__*/_react["default"].createElement("span", {
+    className: renderPrefixIconClass
+  }, renderPrefixIcon[selectItem ? selectItem.value : 0]), /*#__PURE__*/_react["default"].createElement("span", {
+    style: selectItem && selectItem.value > 0 ? {
+      color: '#3F4755'
+    } : {},
+    className: textClass
+  }, forceRenderText && initText ? initText : selectItem ? selectItem.label : initText), renderSuffixIcon && /*#__PURE__*/_react["default"].createElement("img", {
+    className: 'drop-down__layer-text-suffixIcon',
+    src: _down["default"]
+  }))), /*#__PURE__*/_react["default"].createElement("div", {
+    className: "base-info-drop-down__layer-errmsg"
+  }, errMsg && errMsg));
+};
+
+var _default = SelectLayer;
+exports["default"] = _default;

package/lib/components/point-demo/image/down.svg

@@ -0,0 +1,14 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="12px" height="12px" viewBox="0 0 12 12" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <title>下箭头</title>
+    <g id="绩效考核" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g id="绩效考核弹窗" transform="translate(-714.000000, -355.000000)" fill-rule="nonzero">
+            <g id="编组-9" transform="translate(220.000000, 72.000000)">
+                <g id="下箭头" transform="translate(494.000000, 283.000000)">
+                    <rect id="矩形" fill="#000000" opacity="0" x="0" y="0" width="12" height="12"></rect>
+                    <path d="M6.7155,8.8125 L10.33425,4.071 C10.5419684,3.7988128 10.5772501,3.43233816 10.4252743,3.125522 C10.2732984,2.81870584 9.96039265,2.62469962 9.618,2.62499965 L2.381625,2.62499965 C2.03936752,2.62499965 1.72672265,2.81910016 1.57493463,3.12585834 C1.42314661,3.43261652 1.45848879,3.79892025 1.666125,4.071 L5.284875,8.8125 C5.45513546,9.0354783 5.71963814,9.16630587 6.0001875,9.16630587 C6.28073686,9.16630587 6.54523954,9.0354783 6.7155,8.8125 L6.7155,8.8125 Z" id="路径" fill="#3F4755"></path>
+                </g>
+            </g>
+        </g>
+    </g>
+</svg>

package/lib/components/point-demo/image/icon-canceled.svg

@@ -0,0 +1,7 @@
+<!-- Generated by IcoMoon.io -->
+<svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="1024" height="1024" viewBox="0 0 1024 1024">
+<title></title>
+<g id="icomoon-ignore">
+</g>
+<path d="M508.013 451.081l300.592-300.592c16.242-16.242 42.501-16.48 59.034-0.535 16.152 15.576 16.618 41.297 1.041 57.449-0.17 0.177-0.342 0.352-0.516 0.525l-301.652 301.652 314.194 314.194c14.331 14.331 14.331 37.567 0 51.898-0.409 0.409-0.827 0.807-1.254 1.196-15.93 14.492-40.435 13.913-55.664-1.315l-311.625-311.625-309.575 309.575c-16.242 16.242-42.501 16.48-59.034 0.535-16.152-15.576-16.618-41.297-1.041-57.449 0.17-0.177 0.342-0.352 0.516-0.525l310.635-310.635-299.551-299.551c-14.331-14.331-14.331-37.567 0-51.898 0.409-0.409 0.827-0.807 1.254-1.196 15.93-14.492 40.435-13.913 55.664 1.315l296.982 296.982z"></path>
+</svg>

package/lib/components/point-demo/image/logo.svg

@@ -0,0 +1,64 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="66px" height="16px" viewBox="0 0 66 16" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <title>logo</title>
+    <defs>
+        <polygon id="path-1" points="0.0333705263 0.0151168 1.16463368 0.0151168 1.16463368 0.64 0.0333705263 0.64"></polygon>
+        <polygon id="path-3" points="0.00320699491 0.103927652 24.8235323 0.103927652 24.8235323 8.32 0.00320699491 8.32"></polygon>
+        <polygon id="path-5" points="0.008208583 0.00504106667 2.65419401 0.00504106667 2.65419401 10.88 0.008208583 10.88"></polygon>
+        <polygon id="path-7" points="0.04854 0.00409698462 13.04434 0.00409698462 13.04434 12.16 0.04854 12.16"></polygon>
+        <polygon id="path-9" points="0.0428897833 0.160605659 10.4038681 0.160605659 10.4038681 15.36 0.0428897833 15.36"></polygon>
+        <polygon id="path-11" points="0 0.160605659 10.3609579 0.160605659 10.3609579 15.36 0 15.36"></polygon>
+    </defs>
+    <g id="-" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g id="飞书-H5预约" transform="translate(-155.000000, -84.000000)">
+            <g id="logo" transform="translate(155.000000, 84.000000)">
+                <g id="编组" transform="translate(40.989474, 14.720000)">
+                    <mask id="mask-2" fill="white">
+                        <use xlink:href="#path-1"></use>
+                    </mask>
+                    <g id="Clip-2"></g>
+                    <path d="M1.16463368,0.3274368 C1.16463368,0.5002368 0.911286316,0.6400128 0.598886316,0.6400128 C0.286486316,0.6400128 0.0333705263,0.5002368 0.0333705263,0.3274368 C0.0333705263,0.1550208 0.286486316,0.0151168 0.598886316,0.0151168 C0.911286316,0.0151168 1.16463368,0.1550208 1.16463368,0.3274368" id="Fill-1" fill="#2879FF" mask="url(#mask-2)"></path>
+                </g>
+                <g id="编组" transform="translate(40.989474, 7.040000)">
+                    <mask id="mask-4" fill="white">
+                        <use xlink:href="#path-3"></use>
+                    </mask>
+                    <g id="Clip-4"></g>
+                    <path d="M22.7109496,0.103927652 L5.44218968,0.103927652 C1.88464401,0.103927652 0.00320699491,1.76431026 0.00320699491,4.90293983 L0.00320699491,5.7772633 L0.00320699491,6.6087207 C0.00320699491,6.76589635 0.145000543,6.89340939 0.31987253,6.89340939 C0.494744516,6.89340939 0.636538065,6.76589635 0.636538065,6.6087207 L0.636538065,5.7772633 L0.636538065,4.90293983 C0.636538065,2.09602504 2.25334757,0.672400696 5.44218968,0.672400696 L22.7109496,0.672400696 C23.5258087,0.672400696 24.1895961,1.2678233 24.1895961,1.99925983 L24.1895961,6.42531896 C24.1895961,7.15693635 23.5258087,7.75217809 22.7109496,7.75217809 L5.94744265,7.75217809 L1.85902839,7.75217809 C1.68375301,7.75217809 1.54236285,7.87878678 1.54236285,8.03596243 C1.54236285,8.19349983 1.68375301,8.32010852 1.85902839,8.32010852 L5.94744265,8.32010852 L22.7109496,8.32010852 C23.8755527,8.32010852 24.8235323,7.47074504 24.8235323,6.42531896 L24.8235323,1.99925983 C24.8235323,0.954014609 23.8755527,0.103927652 22.7109496,0.103927652" id="Fill-3" fill="#2879FF" mask="url(#mask-4)"></path>
+                </g>
+                <path d="M63.3162642,8.83514011 C62.9463658,8.50263551 62.4595409,8.32 61.9459496,8.32 C61.4321571,8.32 60.9453321,8.50319403 60.57483,8.83514011 C60.5283411,8.87740134 60.4834622,8.92152429 60.4420046,8.96657811 C60.400547,8.92152429 60.3562719,8.87740134 60.3093806,8.83514011 C59.9386771,8.50263551 59.4518522,8.32 58.9390659,8.32 C58.4244684,8.32 57.9376434,8.50319403 57.567745,8.83514011 C57.1813441,9.1821662 56.9684211,9.64610879 56.9684211,10.1424455 L56.9684211,13.640446 C56.9684211,13.8830292 57.1813441,14.08 57.443976,14.08 C57.7054004,14.08 57.9183234,13.8830292 57.9183234,13.640446 L57.9183234,10.1424455 C57.9183234,9.88589935 58.0290112,9.6453641 58.2294567,9.46589353 C58.4210471,9.2936837 58.6726103,9.19836323 58.9390659,9.19836323 C59.2043141,9.19836323 59.4560785,9.2936837 59.6476689,9.46589353 C59.8481144,9.6453641 59.9579972,9.88589935 59.9579972,10.1424455 L59.9579972,13.640446 C59.9579972,13.8830292 60.1711215,14.08 60.4331496,14.08 C60.4365709,14.08 60.4393884,14.0792553 60.4420046,14.0792553 C60.4448221,14.0792553 60.4476397,14.08 60.4510609,14.08 C60.7130891,14.08 60.9260121,13.8830292 60.9260121,13.640446 L60.9260121,10.1424455 C60.9260121,9.88589935 61.0366999,9.6453641 61.2371454,9.46589353 C61.4281321,9.2936837 61.6805002,9.19836323 61.9459496,9.19836323 C62.211399,9.19836323 62.4629621,9.2936837 62.6545526,9.46589353 C62.8551994,9.6453641 62.9656859,9.88589935 62.9656859,10.1424455 L62.9656859,13.640446 C62.9656859,13.8830292 63.1786089,14.08 63.4408383,14.08 C63.7026652,14.08 63.9157895,13.8830292 63.9157895,13.640446 L63.9157895,10.1424455 C63.9157895,9.64610879 63.7026652,9.1821662 63.3162642,8.83514011" id="Fill-5" fill="#2879FF"></path>
+                <path d="M53.1473684,9.19836323 C51.9501635,9.19836323 50.9750974,10.0962746 50.9750974,11.1997207 C50.9750974,12.3037254 51.9501635,13.2018229 53.1473684,13.2018229 C54.3459882,13.2018229 55.3202458,12.3037254 55.3202458,11.1997207 C55.3202458,10.0962746 54.3459882,9.19836323 53.1473684,9.19836323 M53.1473684,14.08 C51.4238219,14.08 50.0210526,12.7877747 50.0210526,11.1997207 C50.0210526,9.61203917 51.4238219,8.32 53.1473684,8.32 C54.8717235,8.32 56.2736842,9.61203917 56.2736842,11.1997207 C56.2736842,12.7877747 54.8717235,14.08 53.1473684,14.08" id="Fill-7" fill="#2879FF"></path>
+                <path d="M48.4016809,12.1467804 C48.1519794,12.0041583 47.8742541,12.1875562 47.7926952,12.3074631 C47.4136978,12.8613809 46.7734027,13.2017378 46.0629516,13.2017378 C44.9182286,13.2017378 43.9860998,12.3035531 43.9860998,11.2001862 C43.9860998,10.0964469 44.9182286,9.19826222 46.0629516,9.19826222 C46.7734027,9.19826222 47.4136978,9.53880528 47.7926952,10.0929092 C47.8742541,10.2122576 48.1519794,10.3962141 48.4016809,10.2532196 C48.6884898,10.0895578 48.6685832,9.77359193 48.5489507,9.5993173 C48.0031634,8.80688906 47.083597,8.32 46.0629516,8.32 C44.4149602,8.32 43.0736842,9.61235066 43.0736842,11.2001862 C43.0736842,12.7876493 44.4149602,14.08 46.0629516,14.08 C47.083597,14.08 48.0031634,13.5931109 48.5489507,12.8003103 C48.6685832,12.6264081 48.6884898,12.3106284 48.4016809,12.1467804" id="Fill-9" fill="#2879FF"></path>
+                <g id="编组" transform="translate(11.810526, 4.480000)">
+                    <mask id="mask-6" fill="white">
+                        <use xlink:href="#path-5"></use>
+                    </mask>
+                    <g id="Clip-12"></g>
+                    <path d="M1.33077377,0.00504106667 C0.600338138,0.00504106667 0.008208583,0.507153067 0.008208583,1.12713173 L0.008208583,9.7580544 C0.008208583,10.3776704 0.600338138,10.8801451 1.33077377,10.8801451 C2.06185069,10.8801451 2.65419401,10.3776704 2.65419401,9.7580544 L2.65419401,1.12713173 C2.65419401,0.507153067 2.06185069,0.00504106667 1.33077377,0.00504106667" id="Fill-11" fill="#2879FF" mask="url(#mask-6)"></path>
+                </g>
+                <path d="M14.5894737,1.5998981 C14.5894737,2.48361251 13.8115719,3.2 12.8522998,3.2 C11.8936912,3.2 11.1157895,2.48361251 11.1157895,1.5998981 C11.1157895,0.715572257 11.8936912,0 12.8522998,0 C13.8115719,0 14.5894737,0.715572257 14.5894737,1.5998981" id="Fill-13" fill="#2879FF"></path>
+                <g id="编组" transform="translate(26.400000, 3.200000)">
+                    <mask id="mask-8" fill="white">
+                        <use xlink:href="#path-7"></use>
+                    </mask>
+                    <g id="Clip-16"></g>
+                    <path d="M6.54634,0.00409698462 C2.96334,0.00409698462 0.04854,2.73130437 0.04854,6.08241329 C0.04854,9.43333514 2.96334,12.1601684 6.54634,12.1601684 C7.28614,12.1601684 8.02274,12.0391296 8.73514,11.8000453 C9.36954,11.5871518 9.69954,10.9338791 9.47174,10.3399099 C9.24414,9.74594068 8.54494,9.43950868 7.91094,9.65071852 C7.46374,9.80056714 7.00434,9.87689452 6.54634,9.87689452 C4.30934,9.87689452 2.48954,8.17449452 2.48954,6.08241329 C2.48954,3.98958375 4.30934,2.28774498 6.54634,2.28774498 C8.78334,2.28774498 10.60314,3.98958375 10.60314,6.08241329 L10.60314,11.018625 C10.60314,11.6492613 11.14974,12.1601684 11.82394,12.1601684 C12.49794,12.1601684 13.04434,11.6492613 13.04434,11.018625 L13.04434,6.08241329 C13.04434,2.73130437 10.12914,0.00409698462 6.54634,0.00409698462" id="Fill-15" fill="#E50012" mask="url(#mask-8)"></path>
+                </g>
+                <g id="编组" transform="translate(15.978947, 0.000000)">
+                    <mask id="mask-10" fill="white">
+                        <use xlink:href="#path-9"></use>
+                    </mask>
+                    <g id="Clip-18"></g>
+                    <path d="M9.13924272,13.0420261 L8.48414675,13.0420261 C5.62836966,13.0420261 4.08094551,12.3856671 4.08094551,8.92329834 L4.08094551,6.63540761 L6.52498885,6.63540761 L7.85520557,6.63540761 C8.55443777,6.63540761 9.1206483,6.11672663 9.1206483,5.47554029 C9.1206483,4.83585249 8.55443777,4.31679688 7.85520557,4.31679688 L6.52498885,4.31679688 L4.08094551,4.31679688 L4.08094551,1.31972371 C4.08094551,0.679099317 3.51432632,0.160605659 2.81611579,0.160605659 C2.11770093,0.160605659 1.55189907,0.679099317 1.55189907,1.31972371 L1.55189907,4.31679688 L1.30833251,4.31679688 C0.608895975,4.31679688 0.0428897833,4.83585249 0.0428897833,5.47554029 C0.0428897833,6.11672663 0.608895975,6.63540761 1.30833251,6.63540761 L1.55189907,6.63540761 L1.55189907,8.92329834 C1.55189907,13.2544437 3.81898885,15.3600749 8.48414675,15.3600749 L9.13924272,15.3600749 C9.83724892,15.3600749 10.4038681,14.8410193 10.4038681,14.2009569 C10.4038681,13.5605198 9.83724892,13.0420261 9.13924272,13.0420261" id="Fill-17" fill="#E50012" mask="url(#mask-10)"></path>
+                </g>
+                <g id="编组">
+                    <mask id="mask-12" fill="white">
+                        <use xlink:href="#path-11"></use>
+                    </mask>
+                    <g id="Clip-20"></g>
+                    <path d="M9.09633251,13.0420261 L8.44123653,13.0420261 C5.58545944,13.0420261 4.03803529,12.3856671 4.03803529,8.92329834 L4.03803529,6.63540761 L6.48207864,6.63540761 L7.81249969,6.63540761 C8.51152755,6.63540761 9.07773808,6.11672663 9.07773808,5.47554029 C9.07773808,4.83585249 8.51152755,4.31679688 7.81249969,4.31679688 L6.48207864,4.31679688 L4.03803529,4.31679688 L4.03803529,1.31972371 C4.03803529,0.679099317 3.4714161,0.160605659 2.77320557,0.160605659 C2.07479071,0.160605659 1.50898885,0.679099317 1.50898885,1.31972371 L1.50898885,4.31679688 L1.26542229,4.31679688 C0.566190093,4.31679688 -2.04334365e-05,4.83585249 -2.04334365e-05,5.47554029 C-2.04334365e-05,6.11672663 0.566190093,6.63540761 1.26542229,6.63540761 L1.50898885,6.63540761 L1.50898885,8.92329834 C1.50898885,13.2544437 3.77607864,15.3600749 8.44123653,15.3600749 L9.09633251,15.3600749 C9.79454303,15.3600749 10.3609579,14.8410193 10.3609579,14.2009569 C10.3609579,13.5605198 9.79454303,13.0420261 9.09633251,13.0420261" id="Fill-19" fill="#2879FF" mask="url(#mask-12)"></path>
+                </g>
+            </g>
+        </g>
+    </g>
+</svg>

package/lib/components/point-demo/index.css

@@ -0,0 +1,348 @@
+.appointment-demo {
+  z-index: 9999;
+  width: 100%;
+  height: 100%;
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+}
+
+.appointment-demo-pc {
+  z-index: 99999;
+  width: 100%;
+  height: 100vh;
+  background: rgba(0, 0, 0, 0.5);
+}
+
+.appointment-demo-pc-popup {
+  width: 872px;
+  height: 520px;
+  background: #FFFFFF;
+  border-radius: 8px;
+  display: flex;
+  position: absolute;
+  left: 0;
+  right: 0;
+  top: 0;
+  bottom: 0;
+  margin: auto;
+}
+
+.appointment-demo-pc-popup-close {
+  width: 18px;
+  height: 18px;
+  position: absolute;
+  top: 14px;
+  right: 35px;
+  cursor: pointer;
+  z-index: 3;
+}
+
+.appointment-demo-pc-popup-close img {
+  width: 18px;
+  height: 18px;
+}
+
+.appointment-demo-pc-popup-bcg {
+  width: 528px;
+  height: 390px;
+  background: url("./image/demo-bcg.png") no-repeat;
+  background-size: 528px 390px;
+  position: absolute;
+  left: 1px;
+  bottom: -15px;
+}
+
+.appointment-demo-pc-popup-left {
+  margin: 36px 0 0 32px;
+}
+
+.appointment-demo-pc-popup-left-title {
+  font-size: 26px;
+  font-weight: 600;
+  color: #141C28;
+  line-height: 40px;
+}
+
+.appointment-demo-pc-popup-left-subtitle {
+  font-size: 14px;
+  font-weight: 400;
+  color: #6F7886;
+  line-height: 22px;
+  margin-top: 4px;
+}
+
+.appointment-demo-pc-popup-right {
+  z-index: 2;
+}
+
+.appointment-demo-pc-popup-right-form {
+  width: 420px;
+  margin-left: 36px;
+}
+
+.appointment-demo-pc-popup-right-form-code {
+  margin-top: 16px;
+  display: flex;
+}
+
+.appointment-demo-pc-popup-right-form-code-left {
+  width: 309px;
+}
+
+.appointment-demo-pc-popup-right-form-code img {
+  width: 100px;
+  height: 34px;
+  cursor: pointer;
+  margin-left: 10px;
+  margin-top: 26px;
+}
+
+.appointment-demo-pc-popup-right-form-double {
+  display: flex;
+  margin-top: 40px;
+}
+
+.appointment-demo-pc-popup-right-form-double-left {
+  margin-right: 10px;
+}
+
+.appointment-demo-pc-popup-right-form-item {
+  width: 420px;
+  box-sizing: border-box !important;
+  margin-top: 16px;
+  position: relative;
+}
+
+.appointment-demo-pc-popup-right-form-item:nth-of-type(1) {
+  display: flex;
+  margin-top: 40px;
+}
+
+.appointment-demo-pc-popup-right-form-item:nth-of-type(2) {
+  display: flex;
+}
+
+.appointment-demo-pc-popup-right-form-item-left {
+  margin-right: 10px;
+}
+
+.appointment-demo-pc-popup-right-form-item-module-errmsg {
+  position: absolute;
+  top: 66px;
+  left: 12px;
+  font-size: 12px;
+  font-weight: 400;
+  color: #F05E5E;
+  line-height: 18px;
+}
+
+.appointment-demo-pc-popup-right-form-item-module {
+  margin-bottom: 11px;
+  font-size: 14px;
+  line-height: 22px;
+  font-weight: 600;
+  color: #3F4755;
+}
+
+.appointment-demo-pc-popup-right-form-item-module .required {
+  color: #F05E5E;
+  font-size: 14px;
+  vertical-align: middle;
+}
+
+.appointment-demo-pc-popup-right-form-item-modules {
+  margin-top: 4px;
+  display: flex;
+}
+
+.appointment-demo-pc-popup-right-form-item-modules-item {
+  cursor: pointer;
+  box-sizing: border-box !important;
+  height: 32px;
+  width: 94px;
+  background: #FFFFFF;
+  border-radius: 4px;
+  border: 1px solid #E9ECF0;
+  line-height: 30px;
+  text-align: center;
+  color: #3F4755;
+  font-size: 14px;
+  font-weight: 400;
+}
+
+.appointment-demo-pc-popup-right-form-item-modules-item:nth-of-type(1) {
+  width: 107px;
+}
+
+.appointment-demo-pc-popup-right-form-item-modules-item:not(:nth-of-type(1)) {
+  margin-left: 10px;
+}
+
+.appointment-demo-pc-popup-right-form-item-modules-item:hover {
+  background: #E9F1FF;
+}
+
+.appointment-demo-pc-popup-right-form-item-modules-item-active {
+  background: #E9F1FF;
+  color: #2879FF;
+  border: none;
+  line-height: 32px;
+}
+
+.appointment-demo-pc-popup-right-form-submit {
+  cursor: pointer;
+  margin-top: 24px;
+  box-sizing: border-box !important;
+  width: 420px;
+  height: 36px;
+  line-height: 36px;
+  text-align: center;
+  background: #2879FF;
+  border-radius: 4px;
+  font-size: 14px;
+  font-weight: 400;
+  color: #FFFFFF;
+}
+
+.appointment-demo-pc-popup-right-form-submit:hover {
+  background: #5C8EFF;
+}
+
+.appointment-demo-h5 {
+  text-align: center;
+  padding-bottom: 1.6rem;
+}
+
+.appointment-demo-h5-logo {
+  margin-top: 0.77333rem;
+}
+
+.appointment-demo-h5-title {
+  margin: 0.21333rem 0;
+  font-size: 0.64rem;
+  font-weight: 500;
+  color: #141C28;
+  line-height: 0.69333rem;
+}
+
+.appointment-demo-h5-subtitle {
+  font-size: 0.32rem;
+  font-weight: 400;
+  color: #6F7886;
+  line-height: 0.48rem;
+}
+
+.appointment-demo-h5-form {
+  margin: 0 auto;
+  margin-top: 0.53333rem;
+  width: 8.93333rem;
+  text-align: left;
+}
+
+.appointment-demo-h5-form-code {
+  margin-top: 0.53333rem;
+  display: flex;
+}
+
+.appointment-demo-h5-form-code-left {
+  width: 6rem;
+}
+
+.appointment-demo-h5-form-code img {
+  width: 100px;
+  height: 34px;
+  cursor: pointer;
+  margin-left: 10px;
+  margin-top: 26px;
+}
+
+.appointment-demo-h5-form-item:not(:nth-of-type(1)) {
+  margin-top: 0.42667rem;
+}
+
+.appointment-demo-h5-form-item-module {
+  font-size: 0.37333rem;
+  font-weight: 600;
+  color: #3F4755;
+  line-height: 0.58667rem;
+}
+
+.appointment-demo-h5-form-item-module .required {
+  color: #F05E5E;
+  font-size: 14px;
+  margin-left: 4px;
+  vertical-align: middle;
+}
+
+.appointment-demo-h5-form-item-modules {
+  margin-top: 0.21333rem;
+  display: flex;
+}
+
+.appointment-demo-h5-form-item-modules-item {
+  cursor: pointer;
+  box-sizing: border-box !important;
+  height: 0.85333rem;
+  width: 2.82667rem;
+  background: #FFFFFF;
+  border-radius: 0.10667rem;
+  border: 1px solid #E9ECF0;
+  line-height: 0.8rem;
+  text-align: center;
+  color: #3F4755;
+  font-size: 0.37333rem;
+  font-weight: 400;
+}
+
+.appointment-demo-h5-form-item-modules-item:not(:nth-of-type(1)) {
+  margin-left: 0.24rem;
+}
+
+.appointment-demo-h5-form-item-modules-item:hover {
+  background: #E9F1FF;
+}
+
+.appointment-demo-h5-form-item-modules-item-active {
+  background: #E9F1FF;
+  color: #2879FF;
+  border: none;
+  line-height: 32px;
+}
+
+.appointment-demo-h5-form-item .else {
+  margin-left: 0;
+  margin-top: 8px;
+  margin-bottom: 1.70667rem;
+}
+
+.appointment-demo-h5-form-submit {
+  width: 9.14667rem;
+  height: 1.17333rem;
+  background: linear-gradient(90deg, #4E90FF 0%, #2879FF 100%);
+  border-radius: 0.58667rem;
+  font-size: 0.42667rem;
+  font-weight: 400;
+  color: #FFFFFF;
+  line-height: 1.17333rem;
+  letter-spacing: 5px;
+  text-align: center;
+  position: absolute;
+  left: 0;
+  right: 0;
+  top: 0;
+  bottom: 0;
+  margin: auto;
+}
+
+.appointment-demo-h5-form-submit-bck {
+  width: 375px;
+  height: 64px;
+  background: #FFFFFF;
+  box-shadow: 0px -2px 8px 0px rgba(127, 145, 180, 0.1);
+  position: fixed;
+  bottom: 0;
+  left: 0;
+}