@titaui/pc 1.11.27-beta.8 → 1.11.29

package/lib/components/dynamic/online-broadcast/components/broadcast-item/index.css

@@ -0,0 +1,58 @@
+.dynamic-online-broadcast-item {
+  margin-top: 12px;
+  cursor: pointer;
+}
+
+.dynamic-online-broadcast-item__info {
+  display: flex;
+  align-items: center;
+}
+
+.dynamic-online-broadcast-item__order {
+  font-size: 12px;
+  line-height: 18px;
+  color: #96a9c4;
+  margin-right: 8px;
+}
+
+.dynamic-online-broadcast-item__order--first {
+  color: #ff614d;
+}
+
+.dynamic-online-broadcast-item__order--second {
+  color: #f0a326;
+}
+
+.dynamic-online-broadcast-item__order--third {
+  color: #75aaff;
+}
+
+.dynamic-online-broadcast-item__text {
+  position: relative;
+  display: inline-block;
+  overflow: hidden;
+  word-break: keep-all;
+  white-space: nowrap;
+  margin-right: 4px;
+}
+
+.dynamic-online-broadcast-item__text:hover {
+  color: #2879ff;
+}
+
+.dynamic-online-broadcast-item__date {
+  margin-top: 4px;
+  font-size: 12px;
+  color: #89919f;
+  line-height: 18px;
+  margin-left: 16px;
+}
+
+.dynamic-online-broadcast-item__new, .dynamic-online-broadcast-item__preview {
+  display: flex;
+}
+
+.dynamic-online-broadcast-item__new-icon, .dynamic-online-broadcast-item__preview-icon {
+  width: 28px;
+  height: 14px;
+}

package/lib/components/dynamic/online-broadcast/components/broadcast-item/index.js

@@ -0,0 +1,68 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = void 0;
+
+var _react = _interopRequireDefault(require("react"));
+
+var _classnames = _interopRequireDefault(require("classnames"));
+
+var _tooltip = _interopRequireDefault(require("../../../../tooltip"));
+
+var _new = _interopRequireDefault(require("../../img/new.png"));
+
+var _preview = _interopRequireDefault(require("../../img/preview.png"));
+
+require("./index.css");
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
+
+function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
+
+var prefix = "dynamic-online-broadcast-item";
+
+var BroadcastItem = function BroadcastItem(_ref) {
+  var _classNames;
+
+  var hasOnline = _ref.hasOnline,
+      preContent = _ref.preContent,
+      preHref = _ref.preHref,
+      isNew = _ref.isNew,
+      date = _ref.date,
+      index = _ref.index;
+
+  var handleClickItem = function handleClickItem() {
+    window.open(preHref, "_blank");
+  };
+
+  return /*#__PURE__*/_react["default"].createElement("div", {
+    className: prefix,
+    onClick: handleClickItem
+  }, /*#__PURE__*/_react["default"].createElement("div", {
+    className: "".concat(prefix, "__info")
+  }, /*#__PURE__*/_react["default"].createElement("span", {
+    className: (0, _classnames["default"])("".concat(prefix, "__order"), (_classNames = {}, _defineProperty(_classNames, "".concat(prefix, "__order--first"), index === 1), _defineProperty(_classNames, "".concat(prefix, "__order--second"), index === 2), _defineProperty(_classNames, "".concat(prefix, "__order--third"), index === 3), _classNames))
+  }, index), /*#__PURE__*/_react["default"].createElement("span", {
+    className: "".concat(prefix, "__text")
+  }, /*#__PURE__*/_react["default"].createElement(_tooltip["default"].Text, {
+    isPercent: true,
+    text: preContent
+  })), isNew && hasOnline && /*#__PURE__*/_react["default"].createElement("span", {
+    className: "".concat(prefix, "__new")
+  }, /*#__PURE__*/_react["default"].createElement("img", {
+    className: "".concat(prefix, "__new-icon"),
+    src: _new["default"]
+  })), isNew && !hasOnline && /*#__PURE__*/_react["default"].createElement("span", {
+    className: "".concat(prefix, "__preview")
+  }, /*#__PURE__*/_react["default"].createElement("img", {
+    className: "".concat(prefix, "__preview-icon"),
+    src: _preview["default"]
+  }))), date && /*#__PURE__*/_react["default"].createElement("div", {
+    className: "".concat(prefix, "__date")
+  }, date));
+};
+
+var _default = BroadcastItem;
+exports["default"] = _default;

package/lib/components/dynamic/online-broadcast/data.js

@@ -0,0 +1,77 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.onlineBroadcastData = exports["default"] = void 0;
+// import { getBSGlobal } from "../../../utils/bs-global";
+// 上线预报定义1
+// const source = getBSGlobal("tenantInfo").Source;
+// let href = "";
+// if (source === 860) {
+//   href = "https://wiki.tita.com/pages/viewpage.action?pageId=15697696";
+// } else if (source === 861) {
+//   href = "https://wiki.tita.com/pages/viewpage.action?pageId=15697725";
+// } else if (source === 862) {
+//   href = "https://wiki.tita.com/pages/viewpage.action?pageId=15697712";
+// } else {
+//   href = "https://wiki.tita.com/pages/viewpage.action?pageId=15697741";
+// }
+var onlineBroadcastData = [{
+  hasOnline: true,
+  preContent: "「考核」OKR 维度支持按 KR 评分啦",
+  preHref: "https://wiki.tita.com/x/JYOeAQ",
+  isNew: true,
+  date: "4/11"
+}, {
+  hasOnline: true,
+  preContent: "「OKR 工作法」体验优化 ",
+  preHref: "https://wiki.tita.com/x/jIOeAQ",
+  isNew: false,
+  date: "3/29"
+}, {
+  hasOnline: true,
+  preContent: "「考核」支持建立企业指标库",
+  preHref: "https://wiki.tita.com/x/vYGeAQ",
+  isNew: false,
+  date: "2/17"
+}, {
+  hasOnline: true,
+  preContent: "「OKR」支持手动进行目标打分",
+  preHref: "https://wiki.tita.com/x/GYCeAQ",
+  isNew: false,
+  date: "1/12"
+}, {
+  hasOnline: true,
+  preContent: "「考核」支持批量公布考核结果 ",
+  preHref: "https://wiki.tita.com/x/L4CeAQ",
+  isNew: false,
+  date: "1/11"
+}, {
+  hasOnline: true,
+  preContent: "Tita「Learning」 全新上线",
+  preHref: "https://wiki.tita.com/x/doNrAQ",
+  isNew: false,
+  date: "12/26"
+}, {
+  hasOnline: true,
+  preContent: "「OKR」支持设置子目标权重",
+  preHref: "https://wiki.tita.com/x/mIFrAQ",
+  isNew: false,
+  date: "12/18"
+}, {
+  hasOnline: true,
+  preContent: "「OKR 」每周工作小结推送",
+  preHref: "https://wiki.tita.com/x/F4FrAQ",
+  isNew: false,
+  date: "12/8"
+}, {
+  hasOnline: true,
+  preContent: "「OKR」新增管理规定，开启全员提醒",
+  preHref: "https://wiki.tita.com/x/6YBrAQ",
+  isNew: false,
+  date: "12/7"
+}];
+exports.onlineBroadcastData = onlineBroadcastData;
+var _default = onlineBroadcastData;
+exports["default"] = _default;

package/lib/components/dynamic/online-broadcast/img/broadcast.svg

@@ -0,0 +1,14 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="20px" height="20px" viewBox="0 0 20 20" 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 transform="translate(-922.000000, -729.000000)" id="编组-7">
+            <g transform="translate(906.000000, 711.000000)">
+                <g id="上线" transform="translate(16.000000, 18.000000)">
+                    <circle id="椭圆形" fill="#F56868" cx="10" cy="10" r="10"></circle>
+                    <path d="M11.8409601,5.02039481 C12.0607062,5.06789152 12.2513045,5.19521898 12.3708171,5.37436084 C12.4551761,5.50081575 12.5,5.64709197 12.5,5.79637754 L12.5,14.2038355 C12.5,14.4933736 12.3323006,14.7601176 12.0619452,14.9004804 C11.7915897,15.0408432 11.4612064,15.0327093 11.199096,14.8792372 L7.07387659,12.8671576 L6.19040457,12.8671576 C5.53296228,12.8671576 5,12.3679353 5,11.7521134 L5,8.24809964 C5,7.63227776 5.53296228,7.13305548 6.19040457,7.13305548 L7.07387659,7.13305548 L11.199096,5.1211008 C11.3903249,5.00912372 11.621214,4.9728981 11.8409601,5.02039481 Z M14.098818,7.2775841 C15.2999064,9.00639215 15.3004375,11.3014434 14.1001492,13.0308092 C13.9844061,13.1916195 13.7614463,13.2299439 13.598824,13.1169815 C13.4362017,13.0040191 13.3938229,12.7813824 13.5035352,12.616383 C14.5312451,11.1363956 14.5307622,9.17185423 13.502325,7.69237405 C13.3880073,7.52734138 13.4288592,7.30070687 13.5935719,7.18616299 C13.7582899,7.07162698 13.9844924,7.1125569 14.098818,7.2775841 Z" id="形状结合" fill="#FFFFFF" fill-rule="nonzero"></path>
+                </g>
+            </g>
+        </g>
+    </g>
+</svg>

package/lib/components/dynamic/online-broadcast/index.css

@@ -0,0 +1,46 @@
+.dynamic-online-broadcast__container {
+  width: 278px;
+  border-radius: 12px;
+  box-shadow: 0px 2px 12px 0px rgba(127, 145, 180, 0.2);
+  background: #ffffff;
+  padding: 16px 16px 24px 16px;
+  box-sizing: border-box;
+  margin-top: 10px;
+}
+
+.dynamic-online-broadcast__header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding-bottom: 10px;
+  border-bottom: 1px solid #e9ecf0;
+  margin-bottom: 4px;
+}
+
+.dynamic-online-broadcast__header-left {
+  display: inline-flex;
+  align-items: center;
+}
+
+.dynamic-online-broadcast__header-left-icon {
+  width: 20px;
+  height: 20px;
+  margin-right: 4px;
+}
+
+.dynamic-online-broadcast__header-left-text {
+  font-size: 16px;
+  font-weight: 600;
+  color: #3f4755;
+  line-height: 24px;
+}
+
+.dynamic-online-broadcast__header-right {
+  font-size: 14px;
+  color: #2879ff;
+  line-height: 24px;
+}
+
+.dynamic-online-broadcast__header-right:hover {
+  color: #5c8eff;
+}

package/lib/components/dynamic/online-broadcast/index.js

@@ -0,0 +1,61 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = void 0;
+
+var _react = _interopRequireDefault(require("react"));
+
+var _bsGlobal = require("../../../utils/bs-global");
+
+var _broadcast = _interopRequireDefault(require("./img/broadcast.svg"));
+
+var _data = require("./data");
+
+var _broadcastItem = _interopRequireDefault(require("./components/broadcast-item"));
+
+var _getLocale = require("../../../utils/getLocale");
+
+require("./index.css");
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
+
+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); }
+
+var prefix = "dynamic-online-broadcast";
+var titaHost = (0, _bsGlobal.getBSGlobal)("titaHost"); // 飞书端不显示
+
+var onlinePreHandler = titaHost.indexOf("tita") > -1 && window.BSGlobal.tenantInfo.Source != 862;
+
+var OnlineBroadcast = function OnlineBroadcast() {
+  return /*#__PURE__*/_react["default"].createElement("div", {
+    className: prefix
+  }, onlinePreHandler && _data.onlineBroadcastData.length > 0 && /*#__PURE__*/_react["default"].createElement("div", {
+    className: "".concat(prefix, "__container")
+  }, /*#__PURE__*/_react["default"].createElement("div", {
+    className: "".concat(prefix, "__header")
+  }, /*#__PURE__*/_react["default"].createElement("span", {
+    className: "".concat(prefix, "__header-left")
+  }, /*#__PURE__*/_react["default"].createElement("img", {
+    className: "".concat(prefix, "__header-left-icon"),
+    src: _broadcast["default"]
+  }), /*#__PURE__*/_react["default"].createElement("span", {
+    className: "".concat(prefix, "__header-left-text")
+  }, (0, _getLocale.getLocale)("Feed_Title_Onlinebroadcast"))), /*#__PURE__*/_react["default"].createElement("a", {
+    className: "".concat(prefix, "__header-right"),
+    href: "https://wiki.tita.com/pages/viewpage.action?pageId=15696164",
+    target: "_blank",
+    rel: "noreferrer"
+  }, (0, _getLocale.getLocale)("Feed_Set_Pop_Butt_More"))), /*#__PURE__*/_react["default"].createElement("div", {
+    className: "".concat(prefix, "__content")
+  }, _data.onlineBroadcastData.slice(0, 5).map(function (data, index) {
+    return /*#__PURE__*/_react["default"].createElement(_broadcastItem["default"], _extends({}, data, {
+      index: index + 1,
+      key: index
+    }));
+  }))));
+};
+
+var _default = OnlineBroadcast;
+exports["default"] = _default;

package/lib/components/dynamic/online-broadcast/interfact.js

@@ -0,0 +1,5 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});

package/lib/components/dynamic/quick-operation/components/create-announcement/index.css

@@ -0,0 +1,25 @@
+.titaui-pc-create-announcement {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  flex: 1;
+}
+
+.titaui-pc-create-announcement__img {
+  width: 44px;
+  height: 44px;
+}
+
+.titaui-pc-create-announcement__text {
+  margin-top: 5px;
+}
+
+.titaui-pc-create-announcement:hover {
+  color: #2879ff;
+  cursor: pointer;
+}
+
+.titaui-pc-create-announcement:hover img {
+  animation: dynamicQuickOperationRubberBand 1s;
+}

package/lib/components/dynamic/quick-operation/components/create-announcement/index.js

@@ -0,0 +1,39 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = void 0;
+
+var _react = _interopRequireDefault(require("react"));
+
+var _newAnnouncement = _interopRequireDefault(require("../../img/new-announcement.png"));
+
+var _getLocale = require("../../../../../utils/getLocale");
+
+require("./index.css");
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
+
+var prefix = "titaui-pc-create-announcement";
+
+var CreateAnnouncement = function CreateAnnouncement(_ref) {
+  var onClick = _ref.onClick;
+
+  var handleCreateAnnouncementClick = function handleCreateAnnouncementClick() {
+    onClick && onClick();
+  };
+
+  return /*#__PURE__*/_react["default"].createElement("div", {
+    className: prefix,
+    onClick: handleCreateAnnouncementClick
+  }, /*#__PURE__*/_react["default"].createElement("img", {
+    className: "".concat(prefix, "__img animate__rubberBand"),
+    src: _newAnnouncement["default"]
+  }), /*#__PURE__*/_react["default"].createElement("span", {
+    className: "".concat(prefix, "__text")
+  }, (0, _getLocale.getLocale)("Feed_Set_Pop_Butt_Announcement")));
+};
+
+var _default = CreateAnnouncement;
+exports["default"] = _default;

package/lib/components/dynamic/quick-operation/components/create-okr/index.css

@@ -0,0 +1,25 @@
+.titaui-pc-create-okr {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  flex: 1;
+}
+
+.titaui-pc-create-okr__img {
+  width: 44px;
+  height: 44px;
+}
+
+.titaui-pc-create-okr__text {
+  margin-top: 5px;
+}
+
+.titaui-pc-create-okr:hover {
+  color: #2879ff;
+  cursor: pointer;
+}
+
+.titaui-pc-create-okr:hover img {
+  animation: dynamicQuickOperationRubberBand 1s;
+}

package/lib/components/dynamic/quick-operation/components/create-okr/index.js

@@ -0,0 +1,39 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = void 0;
+
+var _react = _interopRequireDefault(require("react"));
+
+var _newOkr = _interopRequireDefault(require("../../img/new-okr.png"));
+
+var _getLocale = require("../../../../../utils/getLocale");
+
+require("./index.css");
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
+
+var prefix = "titaui-pc-create-okr";
+
+var CreateOKr = function CreateOKr(_ref) {
+  var onClick = _ref.onClick;
+
+  var handleCreateOKrClick = function handleCreateOKrClick() {
+    onClick && onClick();
+  };
+
+  return /*#__PURE__*/_react["default"].createElement("div", {
+    className: prefix,
+    onClick: handleCreateOKrClick
+  }, /*#__PURE__*/_react["default"].createElement("img", {
+    className: "".concat(prefix, "__img animate__rubberBand"),
+    src: _newOkr["default"]
+  }), /*#__PURE__*/_react["default"].createElement("span", {
+    className: "".concat(prefix, "__text")
+  }, (0, _getLocale.getLocale)("Feed_Set_Pop_Butt_NewOKR")));
+};
+
+var _default = CreateOKr;
+exports["default"] = _default;

package/lib/components/dynamic/quick-operation/components/create-share/index.css

@@ -0,0 +1,25 @@
+.titaui-pc-create-share {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  flex: 1;
+}
+
+.titaui-pc-create-share__img {
+  width: 44px;
+  height: 44px;
+}
+
+.titaui-pc-create-share__text {
+  margin-top: 5px;
+}
+
+.titaui-pc-create-share:hover {
+  color: #2879ff;
+  cursor: pointer;
+}
+
+.titaui-pc-create-share:hover img {
+  animation: dynamicQuickOperationRubberBand 1s;
+}

package/lib/components/dynamic/quick-operation/components/create-share/index.js

@@ -0,0 +1,39 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = void 0;
+
+var _react = _interopRequireDefault(require("react"));
+
+var _newShare = _interopRequireDefault(require("../../img/new-share.png"));
+
+var _getLocale = require("../../../../../utils/getLocale");
+
+require("./index.css");
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
+
+var prefix = "titaui-pc-create-share";
+
+var CreateShare = function CreateShare(_ref) {
+  var onClick = _ref.onClick;
+
+  var handleCreateShareClick = function handleCreateShareClick() {
+    onClick && onClick();
+  };
+
+  return /*#__PURE__*/_react["default"].createElement("div", {
+    className: prefix,
+    onClick: handleCreateShareClick
+  }, /*#__PURE__*/_react["default"].createElement("img", {
+    className: "".concat(prefix, "__img animate__rubberBand"),
+    src: _newShare["default"]
+  }), /*#__PURE__*/_react["default"].createElement("span", {
+    className: "".concat(prefix, "__text")
+  }, (0, _getLocale.getLocale)("Feed_Set_Pop_Butt_Sendshare")));
+};
+
+var _default = CreateShare;
+exports["default"] = _default;

package/lib/components/dynamic/quick-operation/components/create-task/index.css

@@ -0,0 +1,25 @@
+.titaui-pc-create-task {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  flex: 1;
+}
+
+.titaui-pc-create-task__img {
+  width: 44px;
+  height: 44px;
+}
+
+.titaui-pc-create-task__text {
+  margin-top: 5px;
+}
+
+.titaui-pc-create-task:hover {
+  color: #2879ff;
+  cursor: pointer;
+}
+
+.titaui-pc-create-task:hover img {
+  animation: dynamicQuickOperationRubberBand 1s;
+}

package/lib/components/dynamic/quick-operation/components/create-task/index.js

@@ -0,0 +1,44 @@
+"use strict";
+
+function _typeof(obj) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (obj) { return typeof obj; } : function (obj) { return obj && "function" == typeof Symbol && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }, _typeof(obj); }
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = void 0;
+
+var _react = _interopRequireWildcard(require("react"));
+
+var _newTask = _interopRequireDefault(require("../../img/new-task.png"));
+
+var _getLocale = require("../../../../../utils/getLocale");
+
+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; }
+
+var prefix = "titaui-pc-create-task";
+var CreateTask = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, ref) {
+  var onClick = _ref.onClick;
+
+  var handleCreateTaskClick = function handleCreateTaskClick() {
+    onClick && onClick();
+  };
+
+  return /*#__PURE__*/_react["default"].createElement("div", {
+    className: prefix,
+    onClick: handleCreateTaskClick,
+    ref: ref
+  }, /*#__PURE__*/_react["default"].createElement("img", {
+    className: "".concat(prefix, "__img animate__rubberBand"),
+    src: _newTask["default"]
+  }), /*#__PURE__*/_react["default"].createElement("span", {
+    className: "".concat(prefix, "__text")
+  }, (0, _getLocale.getLocale)("Feed_Set_Pop_Butt_Newtask")));
+});
+var _default = CreateTask;
+exports["default"] = _default;

package/lib/components/dynamic/quick-operation/index.css

@@ -0,0 +1,51 @@
+.titaui-pc-dynamic-quick-operation {
+  width: 278px;
+  height: 126px;
+  padding: 0 5px;
+  box-sizing: border-box;
+  display: flex;
+  align-items: center;
+  background: #ffffff;
+  box-shadow: 0px 0px 8px 0px rgba(127, 145, 180, 0.1);
+  border-radius: 12px;
+  font-size: 12px;
+  color: #3f4755;
+  font-family: -apple-system, Arial, Verdana, Helvetica Neue, Helvetica, sans-serif, PingFang SC, Microsoft YaHei;
+}
+
+@keyframes dynamicQuickOperationRubberBand {
+  0% {
+    -webkit-transform: scaleX(1);
+    transform: scaleX(1);
+  }
+
+  30% {
+    -webkit-transform: scale3d(1.25, 0.75, 1);
+    transform: scale3d(1.25, 0.75, 1);
+  }
+
+  40% {
+    -webkit-transform: scale3d(0.75, 1.25, 1);
+    transform: scale3d(0.75, 1.25, 1);
+  }
+
+  50% {
+    -webkit-transform: scale3d(1.15, 0.85, 1);
+    transform: scale3d(1.15, 0.85, 1);
+  }
+
+  65% {
+    -webkit-transform: scale3d(0.95, 1.05, 1);
+    transform: scale3d(0.95, 1.05, 1);
+  }
+
+  75% {
+    -webkit-transform: scale3d(1.05, 0.95, 1);
+    transform: scale3d(1.05, 0.95, 1);
+  }
+
+  to {
+    -webkit-transform: scaleX(1);
+    transform: scaleX(1);
+  }
+}