@titaui/pc 1.11.27-beta.8 → 1.11.29

package/lib/components/dynamic/my-team/index.css

@@ -0,0 +1,184 @@
+.titaui-dynamic-my-team__container {
+  border-radius: 12px;
+  box-shadow: 0px 2px 12px 0px rgba(127, 145, 180, 0.2);
+  background: #ffffff;
+  padding-bottom: 12px;
+  margin-top: 10px;
+  width: 278px;
+}
+
+.titaui-dynamic-my-team__container .titaui-pc-avator-container {
+  display: inline-flex;
+}
+
+.titaui-dynamic-my-team__header {
+  display: flex;
+  align-items: center;
+  padding: 16px 16px 0 16px;
+}
+
+.titaui-dynamic-my-team__header-icon {
+  width: 20px;
+  height: 20px;
+  margin-right: 4px;
+  border-radius: 50%;
+  background: #2879ff;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.titaui-dynamic-my-team__header-icon-img {
+  width: 16px;
+  height: 16px;
+}
+
+.titaui-dynamic-my-team__header-text {
+  font-size: 16px;
+  font-weight: 600;
+  color: #3f4755;
+  line-height: 24px;
+}
+
+.titaui-dynamic-my-team__content {
+  margin-top: 20px;
+  display: flex;
+  align-items: center;
+  flex-direction: column;
+}
+
+.titaui-dynamic-my-team__content-superior {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+}
+
+.titaui-dynamic-my-team__content-superior-text {
+  margin-top: 4px;
+  font-size: 12px;
+  color: #6f7886;
+  line-height: 18px;
+}
+
+.titaui-dynamic-my-team__content-superior::after {
+  content: "";
+  width: 1px;
+  height: 16px;
+  background-color: #e9ecf0;
+  margin-bottom: 4px;
+}
+
+.titaui-dynamic-my-team__content-add-subordinate {
+  width: 190px;
+  height: 31px;
+  background: url("./img/line.png") no-repeat;
+  background-size: 190px 22px;
+  background-position-y: 9px;
+  display: flex;
+  justify-content: center;
+  margin-top: 12px;
+}
+
+.titaui-dynamic-my-team__content-add-subordinate-icon {
+  width: 20px;
+  height: 20px;
+  background: #e9f1ff;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  border-radius: 50%;
+  cursor: pointer;
+}
+
+.titaui-dynamic-my-team__content-add-subordinate-icon-img {
+  width: 12px;
+  height: 12px;
+}
+
+.titaui-dynamic-my-team__content-subordinate {
+  width: 100%;
+}
+
+.titaui-dynamic-my-team__content-subordinate--empty {
+  margin-top: 12px;
+  font-size: 14px;
+  color: #6f7886;
+  line-height: 22px;
+  text-align: center;
+}
+
+.titaui-dynamic-my-team__subordinates {
+  display: flex;
+  align-items: center;
+  position: relative;
+  width: 100%;
+  height: 46px;
+}
+
+.titaui-dynamic-my-team__subordinates-left-mask {
+  width: 20px;
+  height: 46px;
+  background: #ffffff;
+  opacity: 0.9;
+  position: absolute;
+  left: 0;
+  z-index: 1;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.titaui-dynamic-my-team__subordinates-left-mask-icon {
+  font-size: 16px;
+  color: #89919f;
+}
+
+.titaui-dynamic-my-team__subordinates-left-mask-icon:hover {
+  color: #2879ff;
+  cursor: pointer;
+}
+
+.titaui-dynamic-my-team__subordinates-right-mask {
+  width: 20px;
+  height: 46px;
+  background: #ffffff;
+  opacity: 0.9;
+  position: absolute;
+  right: 0;
+  z-index: 1;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.titaui-dynamic-my-team__subordinates-right-mask-icon {
+  font-size: 16px;
+  color: #89919f;
+  transform: rotate(180deg);
+}
+
+.titaui-dynamic-my-team__subordinates-right-mask-icon:hover {
+  cursor: pointer;
+  color: #2879ff;
+}
+
+.titaui-dynamic-my-team__subordinates-content {
+  flex: 1;
+  display: flex;
+  align-items: center;
+  word-break: keep-all;
+  white-space: nowrap;
+  overflow: hidden;
+}
+
+.titaui-dynamic-my-team__subordinates-item {
+  margin-left: 12px;
+}
+
+.titaui-dynamic-my-team__subordinates-item:first-of-type {
+  margin-left: 20px;
+}
+
+.titaui-dynamic-my-team__subordinates-item:last-of-type {
+  margin-right: 20px;
+}

package/lib/components/dynamic/my-team/index.js

@@ -0,0 +1,263 @@
+"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 _classnames = _interopRequireDefault(require("classnames"));
+
+var _util = require("./util");
+
+var _requestApi = require("./request-api");
+
+var _bsGlobal = require("../../../utils/bs-global");
+
+var _avatar = _interopRequireDefault(require("../../avatar"));
+
+var _conditionRender = _interopRequireDefault(require("../../condition-render"));
+
+var _addSubordinate = _interopRequireDefault(require("./img/add-subordinate.png"));
+
+var _userSelector = _interopRequireDefault(require("../../user-selector"));
+
+var _toast = _interopRequireDefault(require("../../toast"));
+
+var _team = _interopRequireDefault(require("./img/team.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; }
+
+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 prefix = "titaui-dynamic-my-team";
+
+var DynamicMyTeam = function DynamicMyTeam() {
+  var loginUser = (0, _bsGlobal.getBSGlobal)("loginUserInfo");
+
+  var _useState = (0, _react.useState)(),
+      _useState2 = _slicedToArray(_useState, 2),
+      superior = _useState2[0],
+      setSuperior = _useState2[1];
+
+  var _useState3 = (0, _react.useState)([]),
+      _useState4 = _slicedToArray(_useState3, 2),
+      subordinate = _useState4[0],
+      setSubordinate = _useState4[1];
+
+  var _useState5 = (0, _react.useState)(false),
+      _useState6 = _slicedToArray(_useState5, 2),
+      isMouseEnter = _useState6[0],
+      setIsMouseEnter = _useState6[1];
+
+  var _useState7 = (0, _react.useState)(0),
+      _useState8 = _slicedToArray(_useState7, 2),
+      scrollLeft = _useState8[0],
+      setScrollLeft = _useState8[1];
+
+  var subordinateContainerRef = (0, _react.useRef)();
+  var selectorRef = (0, _react.useRef)();
+
+  var handleScrollToLeft = function handleScrollToLeft() {
+    subordinateContainerRef.current.scrollTo({
+      left: scrollLeft - 96,
+      behavior: "smooth"
+    });
+    setScrollLeft(function (data) {
+      return data - 96;
+    });
+  };
+
+  var handleScrollToRight = function handleScrollToRight() {
+    subordinateContainerRef.current.scrollTo({
+      left: scrollLeft + 96,
+      behavior: "smooth"
+    });
+    setScrollLeft(function (data) {
+      return data + 96;
+    });
+  };
+
+  var handleMouseEnter = function handleMouseEnter() {
+    setIsMouseEnter(true);
+  };
+
+  var handleMouseLeave = function handleMouseLeave() {
+    setIsMouseEnter(false);
+  };
+
+  var getSubordinateData = function getSubordinateData() {
+    (0, _requestApi.getSubordinate)().then(function (resp) {
+      if (resp.Code === 1) {
+        setSubordinate(resp.Data.data.members.filter(function (item) {
+          return item.user.userId !== loginUser.Id;
+        }));
+      }
+    });
+  };
+
+  var handleSelected = function handleSelected(_ref) {
+    var _ref2 = _slicedToArray(_ref, 1),
+        user = _ref2[0];
+
+    (0, _requestApi.addSubPerson)(user.data.userId).then(function (resp) {
+      if (resp.Code === 1 && resp.Data) {
+        _toast["default"].Success("添加成功", {
+          canClose: false
+        });
+
+        setTimeout(getSubordinateData, 1500);
+      } else {
+        _toast["default"].Error(resp.Message, {
+          canClose: false
+        });
+      }
+    });
+  };
+
+  (0, _react.useEffect)(function () {
+    (0, _requestApi.getSuperior)().then(function (resp) {
+      if (resp.Code === 1) {
+        setSuperior(resp.Data[0].parentUser);
+      }
+    });
+    getSubordinateData();
+  }, []);
+  return /*#__PURE__*/_react["default"].createElement("div", {
+    className: prefix
+  }, /*#__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-icon")
+  }, /*#__PURE__*/_react["default"].createElement("img", {
+    className: "".concat(prefix, "__header-icon-img"),
+    src: _team["default"]
+  })), /*#__PURE__*/_react["default"].createElement("span", {
+    className: "".concat(prefix, "__header-text")
+  }, (0, _getLocale.getLocale)("Feed_Title_Myteam"))), /*#__PURE__*/_react["default"].createElement("div", {
+    className: "".concat(prefix, "__content")
+  }, superior && /*#__PURE__*/_react["default"].createElement("div", {
+    className: "".concat(prefix, "__content-superior")
+  }, /*#__PURE__*/_react["default"].createElement(_avatar["default"], {
+    size: {
+      width: 40,
+      textNum: 1,
+      fontSize: 14
+    },
+    src: superior.avatar.Medium,
+    userId: superior.userId,
+    name: superior.name,
+    color: superior.avatar.Color,
+    showNameTips: true
+  }), /*#__PURE__*/_react["default"].createElement("span", {
+    className: "".concat(prefix, "__content-superior-text")
+  }, (0, _getLocale.getLocale)("Feed_Title_Directsuperior"))), /*#__PURE__*/_react["default"].createElement(_avatar["default"], {
+    size: {
+      width: 56,
+      textNum: 3,
+      fontSize: 14
+    },
+    src: loginUser.UserAvatar.Medium,
+    userId: loginUser.Id,
+    name: loginUser.Name,
+    color: loginUser.UserAvatar.Color,
+    showNameTips: true
+  }), /*#__PURE__*/_react["default"].createElement("div", {
+    className: "".concat(prefix, "__content-add-subordinate")
+  }, (0, _util.showAddIcon)() && /*#__PURE__*/_react["default"].createElement(_userSelector["default"], {
+    ref: selectorRef,
+    multiple: false,
+    position: "centerRight",
+    onSelect: handleSelected,
+    disabledDepartSelect: true,
+    searchedPanes: {
+      user: true,
+      depart: false,
+      group: false
+    },
+    popupAlign: {
+      offset: [0, 0],
+      overflow: {
+        adjustX: true,
+        adjustY: true
+      },
+      targetOffset: [12, 209]
+    },
+    panes: {
+      depart: true
+    },
+    trigger: /*#__PURE__*/_react["default"].createElement("span", {
+      className: "".concat(prefix, "__content-add-subordinate-icon")
+    }, /*#__PURE__*/_react["default"].createElement("img", {
+      className: "".concat(prefix, "__content-add-subordinate-icon-img"),
+      src: _addSubordinate["default"]
+    }))
+  })), /*#__PURE__*/_react["default"].createElement("div", {
+    className: "".concat(prefix, "__content-subordinate"),
+    onMouseEnter: handleMouseEnter,
+    onMouseLeave: handleMouseLeave
+  }, /*#__PURE__*/_react["default"].createElement(_conditionRender["default"], {
+    condition: subordinate.length > 0
+  }, /*#__PURE__*/_react["default"].createElement("div", {
+    className: "".concat(prefix, "__subordinates")
+  }, /*#__PURE__*/_react["default"].createElement("div", {
+    className: "".concat(prefix, "__subordinates-left-mask")
+  }, isMouseEnter && /*#__PURE__*/_react["default"].createElement("i", {
+    onClick: handleScrollToLeft,
+    className: (0, _classnames["default"])("tu-icon-left", "".concat(prefix, "__subordinates-left-mask-icon"))
+  })), /*#__PURE__*/_react["default"].createElement("div", {
+    className: "".concat(prefix, "__subordinates-content"),
+    ref: subordinateContainerRef
+  }, subordinate.map(function (item) {
+    var user = item.user;
+    return /*#__PURE__*/_react["default"].createElement("span", {
+      className: "".concat(prefix, "__subordinates-item")
+    }, /*#__PURE__*/_react["default"].createElement(_avatar["default"], {
+      size: {
+        width: 40,
+        textNum: 1,
+        fontSize: 14
+      },
+      src: user.avatar.Medium,
+      userId: user.userId,
+      name: user.name,
+      color: user.avatar.Color,
+      showNameTips: true
+    }));
+  })), /*#__PURE__*/_react["default"].createElement("div", {
+    className: "".concat(prefix, "__subordinates-right-mask")
+  }, isMouseEnter && /*#__PURE__*/_react["default"].createElement("i", {
+    onClick: handleScrollToRight,
+    className: (0, _classnames["default"])("tu-icon-left", "".concat(prefix, "__subordinates-right-mask-icon"))
+  })))), /*#__PURE__*/_react["default"].createElement(_conditionRender["default"], {
+    condition: subordinate.length === 0
+  }, /*#__PURE__*/_react["default"].createElement("div", {
+    className: "".concat(prefix, "__content-subordinate--empty")
+  }, (0, _getLocale.getLocale)("Feed_Tab_HaveSubordinates")))))));
+};
+
+var _default = DynamicMyTeam;
+exports["default"] = _default;

package/lib/components/dynamic/my-team/request-api.js

@@ -0,0 +1,52 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.getSuperior = exports.getSubordinate = exports.addSubPerson = void 0;
+
+var _qs = _interopRequireDefault(require("qs"));
+
+var _request = require("../../../utils/request");
+
+var _bsGlobal = require("../../../utils/bs-global");
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
+
+var loginUser = (0, _bsGlobal.getBSGlobal)("loginUserInfo");
+
+var getSuperior = function getSuperior() {
+  return (0, _request.rget)("v1")("org/DirectSuperior?to_user_id=".concat(loginUser.Id));
+};
+
+exports.getSuperior = getSuperior;
+
+var addSubPerson = function addSubPerson(id) {
+  return (0, _request.rput)("v1")("user", {
+    subordinate_user_id: id
+  }, {
+    headers: {
+      "Content-Type": "application/x-www-form-urlencoded"
+    },
+    transformRequest: _qs["default"].stringify
+  });
+};
+
+exports.addSubPerson = addSubPerson;
+
+var getSubordinate = function getSubordinate() {
+  return (0, _request.rpost)("v2")("WorkTable/View?channel_type=2&view_name=Team", {
+    view_name: "Team",
+    startNum: 1,
+    count: 500,
+    WorkTableType: 0,
+    SubType: 0
+  }, {
+    headers: {
+      "Content-Type": "application/x-www-form-urlencoded"
+    },
+    transformRequest: _qs["default"].stringify
+  });
+};
+
+exports.getSubordinate = getSubordinate;

package/lib/components/dynamic/my-team/util.js

@@ -0,0 +1,20 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.showAddIcon = void 0;
+
+var _bsGlobal = require("../../../utils/bs-global");
+
+var showAddIcon = function showAddIcon() {
+  // const isUseSetOrg = getBSGlobal("tenant_function").IsUseSetOrg;
+  // const header = getBSGlobal("Header");
+  // const isOpenApp908 = header.find((item) => item.Code == "908");
+  // const isOpenApp830 = header.find((item) => item.Code == "830");
+  // return isUseSetOrg && !isOpenApp908 && !isOpenApp830;
+  var versionInfo = (0, _bsGlobal.getBSGlobal)("tenantAuthentication");
+  return versionInfo.Version === 1;
+};
+
+exports.showAddIcon = showAddIcon;

package/lib/components/dynamic/new-ui.css

@@ -0,0 +1,192 @@
+.titaui-new-ui-dynamic {
+  position: relative;
+  display: flex;
+  flex-direction: column;
+  font-family: -apple-system, Arial, Verdana, Helvetica Neue, Helvetica, sans-serif, PingFang SC, Microsoft YaHei;
+  height: 100%;
+}
+
+.titaui-new-ui-dynamic__header {
+  position: absolute;
+  display: flex;
+  justify-content: space-between;
+  height: 68px;
+  background: #ffffff;
+  box-shadow: 0px 0px 24px 0px rgba(127, 145, 180, 0.2);
+  padding: 0 24px;
+  width: calc(100% - 14px);
+  box-sizing: border-box;
+  z-index: 3;
+  border-radius: 12px;
+}
+
+.titaui-new-ui-dynamic__header--content-scroll {
+  background: rgba(255, 255, 255, 0.92);
+  backdrop-filter: blur(4px);
+}
+
+.titaui-new-ui-dynamic__header-search {
+  display: flex;
+  align-items: center;
+}
+
+.titaui-new-ui-dynamic__header-tabs {
+  display: flex;
+}
+
+.titaui-new-ui-dynamic__content {
+  position: relative;
+  display: flex;
+  flex: 1;
+  overflow: auto;
+  padding: 78px 0 0 0;
+  box-sizing: border-box;
+}
+
+.titaui-new-ui-dynamic__content-left {
+  display: flex;
+  flex-direction: column;
+  width: calc(100% - 288px);
+}
+
+.titaui-new-ui-dynamic__content-left-tabs {
+  display: flex;
+  align-items: center;
+  min-height: 48px;
+  max-height: 48px;
+  background: #ffffff;
+  box-shadow: 0px 0px 8px 0px rgba(127, 145, 180, 0.1);
+  border-radius: 12px;
+  padding-left: 20px;
+  margin-bottom: 10px;
+}
+
+.titaui-new-ui-dynamic__content-left-tab {
+  display: inline-flex;
+  align-items: center;
+  height: 30px;
+  padding: 4px 12px;
+  background: #ffffff;
+  border-radius: 15px;
+  font-size: 14px;
+  color: #3f4755;
+  line-height: 22px;
+  box-sizing: border-box;
+  cursor: pointer;
+  white-space: nowrap;
+  word-break: keep-all;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+.titaui-new-ui-dynamic__content-left-tab--active {
+  background: rgba(40, 121, 255, 0.1);
+  color: #2879ff;
+  animation: second-tab-animation 0.1s linear;
+}
+
+.titaui-new-ui-dynamic__content-left-loading {
+  margin: 0 auto;
+  background-image: url("./img/dynamic-loading.gif");
+  background-repeat: no-repeat;
+  background-size: 100px 40px;
+  padding-bottom: 60px;
+  width: 100px;
+}
+
+.titaui-new-ui-dynamic__content-right {
+  margin-left: 10px;
+}
+
+.titaui-new-ui-dynamic__loading {
+  position: absolute;
+  width: 100%;
+  height: 100%;
+  z-index: 4;
+  background: #f0f4fa;
+}
+
+.titaui-new-ui-dynamic__loading-img {
+  width: 100px;
+  position: relative;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+}
+
+.titaui-new-ui-dynamic__empty-loading-block {
+  height: 160px;
+}
+
+.titaui-new-ui-dynamic__no-more-data {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  padding-bottom: 20px;
+  font-size: 14px;
+  color: #6f7886;
+  line-height: 22px;
+}
+
+.titaui-new-ui-dynamic__no-more-data::before {
+  content: "";
+  display: inline-block;
+  margin-right: 12px;
+  width: 192px;
+  height: 2px;
+  background: linear-gradient(90deg, #f0f4fa 0%, #b8c3d5 100%);
+  border-radius: 1px;
+}
+
+.titaui-new-ui-dynamic__no-more-data::after {
+  content: "";
+  display: inline-block;
+  margin-left: 12px;
+  width: 192px;
+  height: 2px;
+  background: linear-gradient(90deg, #b8c3d5 0%, #f0f4fa 100%);
+  border-radius: 1px;
+}
+
+.titaui-new-ui-dynamic__go-to-top {
+  position: fixed;
+  bottom: 128px;
+  right: 24px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 42px;
+  height: 42px;
+  background: rgba(255, 255, 255, 0.86);
+  box-shadow: 0px 4px 12px 0px rgba(127, 145, 180, 0.2);
+  border-radius: 50%;
+  cursor: pointer;
+  z-index: 1;
+}
+
+.titaui-new-ui-dynamic__go-to-top-img {
+  display: inline-block;
+  width: 24px;
+  height: 24px;
+  background: url("./img/dynamic-top.svg") no-repeat;
+}
+
+@keyframes activeAnimation {
+  0% {
+    width: 0;
+  }
+
+  100% {
+    width: 24px;
+  }
+}
+
+@keyframes second-tab-animation {
+  0% {
+    opacity: 0;
+  }
+
+  100% {
+    opacity: 1;
+  }
+}