@titaui/pc 1.6.8 → 1.6.12

package/lib/components/photo-card/components/card/index.css

@@ -0,0 +1,196 @@
+.okrtitauser-card {
+  position: relative;
+  width: 278px;
+  height: 359px;
+  text-align: center;
+  background: #ffffff;
+  box-shadow: 0px 4px 24px 0px rgba(127, 145, 180, 0.15);
+  border-radius: 24px;
+  overflow: hidden;
+}
+
+.okrtitauser-card__header {
+  position: relative;
+  width: 278px;
+  height: 190px;
+  background: linear-gradient(180deg, rgba(20, 28, 40, 0) 0%, #141c28 100%);
+  background-size: 278px 190px;
+  border-radius: 24px 24px 0 0;
+  overflow: hidden;
+  text-align: center;
+}
+
+.okrtitauser-card__header-mask {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 278px;
+  height: 190px;
+  background-size: 278px 190px;
+  border-radius: 24px 24px 0 0;
+  content: "";
+  filter: blur(6px);
+}
+
+.okrtitauser-card__header-mask ::before {
+  position: absolute;
+  border-radius: 24px 24px 0 0;
+  top: 0;
+  left: 0;
+  background: #141c28;
+}
+
+.okrtitauser-card__header-imgbox {
+  position: absolute;
+  border-radius: 35px;
+  width: 68px;
+  height: 68px;
+  top: 28px;
+  left: 105px;
+  border: 2px solid #fff;
+}
+
+.okrtitauser-card__header-imgbox-img {
+  width: 100%;
+  height: 100%;
+  border-radius: 35px;
+}
+
+.okrtitauser-card__header-name {
+  display: inline-block;
+  position: absolute;
+  top: 110px;
+  left: 109px;
+  height: 28px;
+  font-size: 20px;
+  font-family: -apple-system, Arial, Verdana, Helvetica Neue, Helvetica, sans-serif, PingFang SC, Microsoft YaHei;
+  font-weight: 500;
+  color: #ffffff;
+  line-height: 28px;
+}
+
+.okrtitauser-card__header-depart {
+  display: block;
+  position: absolute;
+  top: 140px;
+  left: 72px;
+  height: 22px;
+  font-size: 14px;
+  font-family: -apple-system, Arial, Verdana, Helvetica Neue, Helvetica, sans-serif, PingFang SC, Microsoft YaHei;
+  font-weight: 400;
+  color: #ffffff;
+  line-height: 22px;
+}
+
+.okrtitauser-card__header-circle {
+  position: absolute;
+  top: 173px;
+  left: -12px;
+  width: 300px;
+  height: 26px;
+  background-color: #fff;
+  border-radius: 50% / 100% 100% 0 0;
+  overflow: hidden;
+}
+
+.okrtitauser-card__role {
+  position: absolute;
+  left: 94px;
+  top: 194px;
+  width: 89px;
+  height: 20px;
+  background-image: url(../../images/user-role.svg);
+}
+
+.okrtitauser-card__attention {
+  position: absolute;
+  left: 24px;
+  top: 234px;
+  width: 110px;
+  height: 45px;
+  text-align: center;
+}
+
+.okrtitauser-card__attention-count {
+  margin-left: 44px;
+  width: 22px;
+  height: 26px;
+  font-size: 18px;
+  font-family: -apple-system, Arial, Verdana, Helvetica Neue, Helvetica, sans-serif, PingFang SC, Microsoft YaHei;
+  font-weight: 500;
+  color: #3f4755;
+  line-height: 26px;
+}
+
+.okrtitauser-card__attention-title {
+  width: 36px;
+  height: 18px;
+  margin-left: 37px;
+  font-size: 12px;
+  font-family: -apple-system, Arial, Verdana, Helvetica Neue, Helvetica, sans-serif, PingFang SC, Microsoft YaHei;
+  font-weight: 400;
+  color: #3f4755;
+  line-height: 18px;
+}
+
+.okrtitauser-card__visit {
+  position: absolute;
+  right: 24px;
+  top: 234px;
+  width: 110px;
+  height: 45px;
+  text-align: center;
+}
+
+.okrtitauser-card__visit-count {
+  margin-left: 45px;
+  width: 19px;
+  height: 26px;
+  font-size: 18px;
+  font-family: -apple-system, Arial, Verdana, Helvetica Neue, Helvetica, sans-serif, PingFang SC, Microsoft YaHei;
+  font-weight: 500;
+  color: #3f4755;
+  line-height: 26px;
+}
+
+.okrtitauser-card__visit-title {
+  width: 36px;
+  height: 18px;
+  margin-left: 37px;
+  font-size: 12px;
+  font-family: -apple-system, Arial, Verdana, Helvetica Neue, Helvetica, sans-serif, PingFang SC, Microsoft YaHei;
+  font-weight: 400;
+  color: #3f4755;
+  line-height: 18px;
+}
+
+.okrtitauser-card__attention-btn {
+  position: absolute;
+  top: 299px;
+  right: 24px;
+  width: 230px;
+  height: 36px;
+  background: #f0f4fa;
+  border-radius: 20px;
+  cursor: pointer;
+}
+
+.okrtitauser-card__attention-btn-img {
+  width: 16px;
+  height: 16px;
+  background-image: url(../../images/user-add.svg);
+  margin: 10px 125px 10px 89px;
+}
+
+.okrtitauser-card__attention-btn-title {
+  position: absolute;
+  top: 8px;
+  right: 95px;
+  width: 28px;
+  height: 20px;
+  font-size: 14px;
+  font-family: -apple-system, Arial, Verdana, Helvetica Neue, Helvetica, sans-serif, PingFang SC, Microsoft YaHei;
+  font-weight: 400;
+  color: #f05e5e;
+  line-height: 20px;
+}

package/lib/components/photo-card/components/card/index.js

@@ -0,0 +1,106 @@
+"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 _classnames = _interopRequireDefault(require("classnames"));
+
+var _data = require("../../data");
+
+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 preCls = "okrtitauser-card";
+
+var Card = function Card() {
+  //背景图片
+  var backGroundstyle = {
+    backgroundImage: "url(".concat(_data.data.photo, ")")
+  }; //获得关注量初始数据
+
+  var _useState = (0, _react.useState)(_data.data.attention_count),
+      _useState2 = _slicedToArray(_useState, 2),
+      count = _useState2[0],
+      changeCount = _useState2[1]; //处理关注量的值+1的回调
+
+
+  var handleAttentionCount = function handleAttentionCount(count) {
+    count = count + 1;
+    changeCount(count);
+  };
+
+  return (
+    /*#__PURE__*/
+    // 用户卡片展示
+    _react["default"].createElement("div", {
+      className: (0, _classnames["default"])(preCls)
+    }, /*#__PURE__*/_react["default"].createElement("div", {
+      className: (0, _classnames["default"])("".concat(preCls, "__header")),
+      style: backGroundstyle
+    }, /*#__PURE__*/_react["default"].createElement("div", {
+      className: (0, _classnames["default"])("".concat(preCls, "__header-mask")),
+      style: backGroundstyle
+    }), /*#__PURE__*/_react["default"].createElement("div", {
+      className: (0, _classnames["default"])("".concat(preCls, "__header-imgbox"))
+    }, /*#__PURE__*/_react["default"].createElement("img", {
+      src: _data.data.photo,
+      alt: "",
+      className: (0, _classnames["default"])("".concat(preCls, "__header-imgbox-img"))
+    })), /*#__PURE__*/_react["default"].createElement("span", {
+      className: (0, _classnames["default"])("".concat(preCls, "__header-name"))
+    }, _data.data.username), /*#__PURE__*/_react["default"].createElement("span", {
+      className: (0, _classnames["default"])("".concat(preCls, "__header-depart"))
+    }, _data.data.department), /*#__PURE__*/_react["default"].createElement("div", {
+      className: (0, _classnames["default"])("".concat(preCls, "__header-circle"))
+    })), /*#__PURE__*/_react["default"].createElement("div", {
+      className: (0, _classnames["default"])("".concat(preCls, "__role"))
+    }), /*#__PURE__*/_react["default"].createElement("div", {
+      className: (0, _classnames["default"])("".concat(preCls, "__attention"))
+    }, /*#__PURE__*/_react["default"].createElement("div", {
+      className: (0, _classnames["default"])("".concat(preCls, "__attention-count"))
+    }, count), /*#__PURE__*/_react["default"].createElement("div", {
+      className: (0, _classnames["default"])("".concat(preCls, "__attention-title"))
+    }, "\u5173\u6CE8\u91CF")), /*#__PURE__*/_react["default"].createElement("div", {
+      className: (0, _classnames["default"])("".concat(preCls, "__visit"))
+    }, /*#__PURE__*/_react["default"].createElement("div", {
+      className: (0, _classnames["default"])("".concat(preCls, "__visit-count"))
+    }, _data.data.visit_count), /*#__PURE__*/_react["default"].createElement("div", {
+      className: (0, _classnames["default"])("".concat(preCls, "__visit-title"))
+    }, "\u8BBF\u95EE\u91CF")), /*#__PURE__*/_react["default"].createElement("div", {
+      className: (0, _classnames["default"])("".concat(preCls, "__attention-btn")),
+      onClick: function onClick() {
+        return handleAttentionCount(count);
+      }
+    }, /*#__PURE__*/_react["default"].createElement("div", {
+      className: (0, _classnames["default"])("".concat(preCls, "__attention-btn-img"))
+    }), /*#__PURE__*/_react["default"].createElement("div", {
+      className: (0, _classnames["default"])("".concat(preCls, "__attention-btn-title"))
+    }, "\u5173\u6CE8")))
+  );
+};
+
+var _default = Card;
+exports["default"] = _default;

package/lib/components/photo-card/data.js

@@ -0,0 +1,19 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.data = void 0;
+
+var _userPhoto = _interopRequireDefault(require("./images/user-photo.png"));
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
+
+var data = {
+  "username": "尔康康",
+  "department": "研发部-产品设计部门",
+  "attention_count": 66,
+  "visit_count": 12,
+  "photo": _userPhoto["default"]
+};
+exports.data = data;

package/lib/components/photo-card/images/user-add.svg

@@ -0,0 +1,19 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="16px" height="16px" viewBox="0 0 16 16" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <title>切片</title>
+    <defs>
+        <filter id="filter-1">
+            <feColorMatrix in="SourceGraphic" type="matrix" values="0 0 0 0 0.941176 0 0 0 0 0.368627 0 0 0 0 0.368627 0 0 0 1.000000 0"></feColorMatrix>
+        </filter>
+    </defs>
+    <g id="主页面" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g id="OKR-其他交互" transform="translate(-271.000000, -1962.000000)">
+            <g id="add1" transform="translate(96.000000, 1653.000000)" filter="url(#filter-1)">
+                <g transform="translate(175.000000, 309.000000)">
+                    <rect id="矩形" fill="#141C28" transform="translate(8.000000, 8.000000) rotate(-360.000000) translate(-8.000000, -8.000000) " x="2" y="7.46666667" width="12" height="1.06666667" rx="0.533333333"></rect>
+                    <path d="M2.53333333,7.46666667 L13.4666667,7.46666667 C13.7612185,7.46666667 14,7.70544813 14,8 C14,8.29455187 13.7612185,8.53333333 13.4666667,8.53333333 L2.53333333,8.53333333 C2.23878147,8.53333333 2,8.29455187 2,8 C2,7.70544813 2.23878147,7.46666667 2.53333333,7.46666667 Z" id="矩形" fill="#141C28" transform="translate(8.000000, 8.000000) scale(-1, 1) rotate(-270.000000) translate(-8.000000, -8.000000) "></path>
+                </g>
+            </g>
+        </g>
+    </g>
+</svg>

package/lib/components/photo-card/images/user-role.svg

@@ -0,0 +1,38 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="89px" height="20px" viewBox="0 0 89 20" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <title>编组 7备份 2</title>
+    <defs>
+        <linearGradient x1="50%" y1="0%" x2="50%" y2="100%" id="linearGradient-1">
+            <stop stop-color="#9EC2FF" offset="0%"></stop>
+            <stop stop-color="#76A9FF" offset="100%"></stop>
+        </linearGradient>
+        <linearGradient x1="50%" y1="-2.48949813e-15%" x2="50%" y2="100%" id="linearGradient-2">
+            <stop stop-color="#2879FF" offset="0%"></stop>
+            <stop stop-color="#0E69FE" offset="100%"></stop>
+        </linearGradient>
+        <radialGradient cx="50%" cy="50%" fx="50%" fy="50%" r="36.4793396%" id="radialGradient-3">
+            <stop stop-color="#2879FF" offset="0%"></stop>
+            <stop stop-color="#FFFFFF" offset="100%"></stop>
+        </radialGradient>
+    </defs>
+    <g id="主页面" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g id="OKR-其他交互" transform="translate(-190.000000, -1847.000000)">
+            <g id="风险预警" transform="translate(96.000000, 1653.000000)">
+                <g id="编组-7备份-2" transform="translate(94.000000, 194.000000)">
+                    <rect id="矩形" fill="#2879FF" x="4" y="1" width="85" height="18" rx="9"></rect>
+                    <g id="编组-25">
+                        <polygon id="多边形" fill="url(#linearGradient-1)" points="10 0 18.660254 5 18.660254 15 10 20 1.33974596 15 1.33974596 5"></polygon>
+                        <polygon id="多边形" fill="url(#linearGradient-2)" points="10 1.81818182 17.2168784 5.90909091 17.2168784 14.0909091 10 18.1818182 2.78312164 14.0909091 2.78312164 5.90909091"></polygon>
+                        <g id="设置" transform="translate(5.500000, 5.500000)" fill-rule="nonzero">
+                            <path d="M8.26875,4.5 C8.26875,3.99375 8.55,3.54375 9,3.375 C8.775,2.5875 8.325,1.85625 7.7625,1.29375 C7.36875,1.575 6.80625,1.63125 6.35625,1.40625 C5.90625,1.125 5.68125,0.675 5.7375,0.16875 C5.34375,0.05625 4.89375,0 4.5,0 C4.05,0 3.65625,0.05625 3.2625,0.16875 C3.31875,0.61875 3.09375,1.125 2.64375,1.40625 C2.19375,1.6875 1.63125,1.63125 1.2375,1.29375 C0.675,1.85625 0.225,2.5875 0,3.375 C0.45,3.54375 0.73125,3.99375 0.73125,4.5 C0.73125,5.00625 0.45,5.45625 0,5.625 C0.225,6.4125 0.675,7.14375 1.2375,7.70625 C1.63125,7.425 2.19375,7.36875 2.64375,7.59375 C3.09375,7.875 3.31875,8.325 3.2625,8.83125 C3.65625,8.94375 4.10625,9 4.5,9 C4.95,9 5.34375,8.94375 5.7375,8.83125 C5.68125,8.38125 5.90625,7.875 6.35625,7.59375 C6.80625,7.3125 7.36875,7.36875 7.7625,7.70625 C8.325,7.14375 8.775,6.4125 9,5.625 C8.55,5.45625 8.26875,5.00625 8.26875,4.5 L8.26875,4.5 Z M4.5,6.35625 C3.43125,6.35625 2.5875,5.5125 2.5875,4.5 C2.5875,3.4875 3.43125,2.64375 4.5,2.64375 C5.56875,2.64375 6.4125,3.4875 6.4125,4.5 C6.4125,5.5125 5.56875,6.35625 4.5,6.35625 Z" id="形状" fill="url(#radialGradient-3)"></path>
+                            <path d="M4.5,5.625 C5.12132034,5.625 5.625,5.12132034 5.625,4.5 C5.625,3.87867966 5.12132034,3.375 4.5,3.375 C3.87867966,3.375 3.375,3.87867966 3.375,4.5 C3.375,5.12132034 3.87867966,5.625 4.5,5.625 Z" id="路径" fill="#FFFFFF"></path>
+                        </g>
+                    </g>
+                    <text id="目标管理员" opacity="0.9" font-family="PingFangSC-Regular, PingFang SC" font-size="12" font-weight="normal" line-spacing="18" fill="#FFFFFF">
+                        <tspan x="23" y="14">目标管理员</tspan>
+                    </text>
+                </g>
+            </g>
+        </g>
+    </g>
+</svg>

package/lib/components/photo-card/index.css

@@ -0,0 +1,29 @@
+.okrtitausers {
+  margin: 200px 200px;
+  position: relative;
+}
+
+.okrtitausers__photo {
+  display: inline-block;
+  position: absolute;
+  z-index: 2000;
+  width: 36px;
+  height: 36px;
+  vertical-align: top;
+  border: 2px solid #fff;
+  border-radius: 35px;
+}
+
+.okrtitausers__card {
+  animation: show 0.5s forwards;
+}
+
+@keyframes show {
+  from {
+    opacity: 0;
+  }
+
+  to {
+    opacity: 1;
+  }
+}

package/lib/components/photo-card/index.js

@@ -0,0 +1,51 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = void 0;
+
+var _react = _interopRequireDefault(require("react"));
+
+var _classnames = _interopRequireDefault(require("classnames"));
+
+var _popup = _interopRequireDefault(require("../popup"));
+
+var _data = require("./data");
+
+var _card = _interopRequireDefault(require("./components/card"));
+
+require("./index.css");
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
+
+var prefixCls = "okrtitausers";
+var popupAlign = {
+  offset: [40, 0],
+  overflow: {
+    adjustX: true,
+    adjustY: true
+  },
+  targetOffset: [0, 0]
+};
+
+var PhotoCard = function PhotoCard() {
+  return /*#__PURE__*/_react["default"].createElement(_popup["default"], {
+    popupPlacement: "bottomLeft",
+    popup: /*#__PURE__*/_react["default"].createElement(_card["default"], null),
+    action: ['hover'],
+    mask: false,
+    popupClassName: "".concat(prefixCls, "__card"),
+    popupAlign: popupAlign,
+    popupVisible: true
+  }, /*#__PURE__*/_react["default"].createElement("div", {
+    className: (0, _classnames["default"])(prefixCls)
+  }, /*#__PURE__*/_react["default"].createElement("img", {
+    src: _data.data.photo,
+    alt: "",
+    className: (0, _classnames["default"])("".concat(prefixCls, "__photo"))
+  })));
+};
+
+var _default = PhotoCard;
+exports["default"] = _default;

package/lib/components/photo-card/types/image.d.js

@@ -0,0 +1 @@
+"use strict";

package/lib/components/photo-card/types/react-app-env.d.js

@@ -0,0 +1,2 @@
+/// <reference types="react-scripts" />
+"use strict";

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

@@ -0,0 +1,98 @@
+.base-info-drop-down__layer {
+  font-family: -apple-system, Arial, Verdana, Helvetica Neue, Helvetica, sans-serif, PingFang SC, Microsoft YaHei;
+  position: relative;
+}
+
+.base-info-drop-down__layer .base-info-drop-down__layer-container {
+  position: relative;
+  font-size: 14px;
+  font-weight: 600;
+  color: #3F4755;
+  line-height: 22px;
+  margin-bottom: 4px;
+}
+
+.base-info-drop-down__layer .base-info-drop-down__layer-container .required {
+  color: #F05E5E;
+  font-size: 14px;
+  margin-left: 4px;
+  vertical-align: middle;
+}
+
+.base-info-drop-down__layer .base-info-drop-down__layer-errmsg {
+  position: absolute;
+  top: 66px;
+  left: 12px;
+  font-size: 12px;
+  font-weight: 400;
+  color: #F05E5E;
+  line-height: 18px;
+}
+
+.base-info-drop-down__layer .drop-down__layer-text {
+  font-size: 14px;
+  color: #BFC7D5;
+  line-height: 20px;
+  font-weight: 400;
+  padding-left: 10px;
+  border-radius: 4px;
+  border: 1px solid  #E9ECF0;
+  height: 36px;
+  box-sizing: border-box;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+}
+
+.base-info-drop-down__layer .drop-down__layer-text:hover {
+  border: 1px solid #2879FF;
+  cursor: pointer;
+}
+
+.base-info-drop-down__layer .drop-down__layer-text-suffixIcon {
+  width: 10px;
+  height: 10px;
+  margin-right: 12px;
+}
+
+.base-info-drop-down__layer .drop-down__layer-text--focus {
+  border: 1px solid #2879FF;
+}
+
+.base-info-drop-down__layer .drop-down__layer-select-wrapper {
+  display: inline-block;
+  box-sizing: border-box;
+  background: #ffffff;
+  box-shadow: 0px 4px 12px 0px rgba(127, 145, 180, 0.2);
+  border: 1px solid #f0f2f5;
+  position: relative;
+  border-radius: 4px;
+  padding: 16px 0;
+  font-weight: 400;
+  width: 100%;
+  max-height: 196px;
+  overflow-y: auto;
+  margin-top: -4px;
+}
+
+.base-info-drop-down__layer .drop-down__layer-select-wrapper .drop-down__layer-select-text {
+  font-size: 14px;
+  color: #3f4755;
+  line-height: 22px;
+  height: 36px;
+  display: flex;
+  align-items: center;
+  box-sizing: border-box;
+  padding-left: 10px;
+}
+
+.base-info-drop-down__layer .drop-down__layer-select-wrapper .drop-down__layer-select-text:hover {
+  cursor: pointer;
+  color: #2879FF;
+  background: #F7F8FA;
+}
+
+.base-info-drop-down__layer .drop-down__layer-select-wrapper .drop-down__layer-select-text--active {
+  color: #2879ff;
+  background: #F7F8FA;
+}