@titaui/pc 1.10.19 → 1.10.21-bete.2

package/lib/components/communication/index.css

@@ -28,7 +28,7 @@
 .titaui-communication__communication-content__user-link {
   font-size: 14px;
   font-weight: 600;
-  color: #3F4755;
+  color: #3f4755;
   line-height: 22px;
 }
 
@@ -47,7 +47,7 @@
 .titaui-communication__communication-time {
   font-size: 12px;
   font-weight: 400;
-  color: #89919F;
+  color: #89919f;
   line-height: 18px;
   margin-left: 12px;
 }
@@ -73,7 +73,6 @@
 
 .titaui-communication__communication-total-icon {
   margin-left: 4px;
-  margin-top: -2px;
 }
 
 .titaui-communication__reply-container-text {
@@ -93,13 +92,13 @@
   flex: 1;
   cursor: text;
   font-size: 12px;
-  color: #BFC7D5;
+  color: #bfc7d5;
   line-height: 22px;
   margin-left: 12px;
   height: 32px;
   border-radius: 16px;
   border-radius: 16px;
-  border: 1px solid #E9ECF0;
+  border: 1px solid #e9ecf0;
   display: flex;
   align-items: center;
   box-sizing: border-box;

package/lib/components/communication/style.js

@@ -19,7 +19,7 @@ var CommunicationWrapper = _styledComponents["default"].div(_templateObject || (
 
 exports.CommunicationWrapper = CommunicationWrapper;
 
-var CommunicationRecordTotal = _styledComponents["default"].div(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  margin-bottom: 8px;\n  font-size: 13px;\n  line-height: 22px;\n  color: #8f9ca6;\n  display: inline-block;\n  cursor: pointer;\n\n  &:hover {\n    color: #2879ff;\n  }\n"])));
+var CommunicationRecordTotal = _styledComponents["default"].div(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  margin-bottom: 8px;\n  font-size: 12px;\n  line-height: 22px;\n  color: #8f9ca6;\n  display: inline-block;\n  cursor: pointer;\n\n  &:hover {\n    color: #2879ff;\n  }\n"])));
 
 exports.CommunicationRecordTotal = CommunicationRecordTotal;
 

package/lib/components/dynamic/components/first-level-tabs/index.css

@@ -37,18 +37,14 @@
   border-radius: 2px;
 }
 
-.titaui-dynamic-first-level-tabs__tab--showNumber {
+.titaui-dynamic-first-level-tabs__tab--point {
   position: absolute;
-  right: -12px;
-  top: 25%;
+  width: 8px;
+  height: 8px;
   background: #f05e5e;
-  box-shadow: 0px 2px 4px 0px rgba(240, 94, 94, 0.4), inset 0px 0px 2px 1px rgba(255, 255, 255, 0.5);
-  border-radius: 8px;
-  height: 16px;
-  font-size: 12px;
-  color: #ffffff;
-  line-height: 18px;
-  padding: 0 4px;
+  border-radius: 50%;
+  right: -2px;
+  top: 22px;
 }
 
 .titaui-dynamic-first-level-tabs__hide-first-level-tabs {

package/lib/components/dynamic/components/first-level-tabs/index.js

@@ -120,8 +120,8 @@ var FirstLevelTabs = function FirstLevelTabs(_ref) {
         }
       }
     }, item.MenuName, item.CodeId === 1001 && feedNum > 0 && /*#__PURE__*/_react["default"].createElement("span", {
-      className: "".concat(prefix, "__tab--showNumber")
-    }, feedNum < 100 ? feedNum : "99+"));
+      className: "".concat(prefix, "__tab--point")
+    }));
   })), /*#__PURE__*/_react["default"].createElement("span", {
     className: "".concat(prefix, "__fold-tab")
   }, renderFoldFirstLevelTab));

package/lib/components/dynamic/dynamic-item/{dynamic-share-to-dynamic → dynamic-learning}/index.js

@@ -56,7 +56,7 @@ function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) r
 var prefix = "titaui-dynamic-share-to-dynamic";
 var userId = (0, _bsGlobal.getUserInfo)().Id;
 
-var DynamicShare = function DynamicShare(_ref) {
+var DynamicLearning = function DynamicLearning(_ref) {
   var data = _ref.data,
       _ref$hasDynamicOperea = _ref.hasDynamicOpereateAuth,
       hasDynamicOpereateAuth = _ref$hasDynamicOperea === void 0 ? false : _ref$hasDynamicOperea,
@@ -103,8 +103,9 @@ var DynamicShare = function DynamicShare(_ref) {
   }, [data, searchKeyWord]);
   (0, _react.useEffect)(function () {
     if (data.shareContent && typeof data.shareContent === "string" && data.shareContent.substr(0, 1) === "{") {
-      setTitle(JSON.parse(data.shareContent).title);
-      setContent(htmlToText(JSON.parse(data.shareContent).content));
+      var shareContent = JSON.parse(data.shareContent);
+      setTitle(shareContent.title);
+      setContent(htmlToText(shareContent.content));
     }
   }, []);
   return /*#__PURE__*/_react["default"].createElement("div", {
@@ -139,5 +140,5 @@ var DynamicShare = function DynamicShare(_ref) {
   }, content))));
 };
 
-var _default = DynamicShare;
+var _default = DynamicLearning;
 exports["default"] = _default;

package/lib/components/dynamic/dynamic-item/dynamic-reply/index.css

@@ -12,7 +12,7 @@
 }
 
 .titaui-dynamic-reply-item__detail {
-  margin-top: 14px;
+  margin-top: 12px;
 }
 
 .titaui-dynamic-reply-item__detail-gain {
@@ -27,21 +27,25 @@
   margin-bottom: 0;
 }
 
+.titaui-dynamic-reply-item__detail-tasks {
+  margin-top: 16px;
+}
+
 .titaui-dynamic-reply-item__detail-tasks-item {
   display: flex;
   align-items: center;
-  margin-left: 8px;
   font-size: 14px;
   color: #6f7886;
   line-height: 22px;
+  margin-top: 8px;
   cursor: pointer;
 }
 
 .titaui-dynamic-reply-item__detail-tasks-item::before {
   content: '';
   display: inline-block;
-  width: 6px;
-  height: 6px;
+  width: 5px;
+  height: 5px;
   background: #2879ff;
   border-radius: 50%;
   margin-right: 6px;
@@ -69,18 +73,9 @@
   font-weight: 600;
   color: #3f4755;
   line-height: 22px;
-  margin-left: 8px;
   white-space: pre-wrap;
-}
-
-.titaui-dynamic-reply-item__detail-block-title--sub::before {
-  content: '';
-  display: inline-block;
-  width: 6px;
-  height: 6px;
-  background: #2879ff;
-  border-radius: 50%;
-  margin-right: 6px;
+  margin-left: 12px;
+  margin-top: 16px;
 }
 
 .titaui-dynamic-reply-item__detail-block-content {
@@ -97,7 +92,7 @@
 }
 
 .titaui-dynamic-reply-item__detail-block-content--sub {
-  margin-left: 20px;
+  margin-left: 12px;
 }
 
 .titaui-dynamic-reply-item__object-name {

package/lib/components/dynamic/dynamic-item/dynamic-reply/index.js

@@ -163,7 +163,7 @@ var DynamicReply = function DynamicReply(_ref) {
     className: "".concat(prefix, "__detail-tasks")
   }, /*#__PURE__*/_react["default"].createElement("div", {
     className: "".concat(prefix, "__detail-block-title")
-  }, "\u884C\u52A8\u8BA1\u5212"), data.tasks && data.tasks.map(function (task) {
+  }, "\u6539\u8FDB\u8BA1\u5212"), data.tasks && data.tasks.map(function (task) {
     return /*#__PURE__*/_react["default"].createElement("div", {
       key: task.taskId,
       className: "".concat(prefix, "__detail-tasks-item"),

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

@@ -44,7 +44,7 @@
   align-items: center;
   color: #89919f;
   position: relative;
-  border-bottom: 1px solid #F0F4FA;
+  border-bottom: 1px solid #f0f4fa;
 }
 
 .titaui-dynamic-item__footer-left {
@@ -98,6 +98,23 @@
   color: #2879ff;
 }
 
+.titaui-dynamic-item__footer-icon-redenvelopes::before {
+  content: '';
+  display: inline-block;
+  background: url("../img/dynamic-redenvelopes-normal.svg") no-repeat;
+  background-size: 20px 20px;
+  width: 20px;
+  height: 20px;
+}
+
+.titaui-dynamic-item__footer-icon-redenvelopes:hover {
+  animation: redenvelopesRubberBand 1s;
+}
+
+.titaui-dynamic-item__footer-icon-redenvelopes:hover::before {
+  background: url("../img/dynamic-redenvelopes-hover.svg") no-repeat;
+}
+
 .titaui-dynamic-item__footer-number {
   margin-left: 8px;
   font-size: 14px;
@@ -122,8 +139,46 @@
 .titaui-dynamic-item__upvote-btn {
   color: #a4acb9;
   font-size: 20px;
+  width: 20px !important;
 }
 
 .titaui-dynamic-item__upvote-btn:hover {
   color: #2879ff;
 }
+
+@keyframes redenvelopesRubberBand {
+  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);
+  }
+}

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

@@ -49,7 +49,7 @@ var _dynamicReward = _interopRequireDefault(require("./dynamic-reward"));
 
 var _dynamicMilestone = _interopRequireDefault(require("./dynamic-milestone"));
 
-var _dynamicShareToDynamic = _interopRequireDefault(require("./dynamic-share-to-dynamic"));
+var _dynamicLearning = _interopRequireDefault(require("./dynamic-learning"));
 
 var _bsGlobal = require("../../../utils/bs-global");
 
@@ -263,7 +263,7 @@ var DynamicItem = function DynamicItem(_ref) {
         // }
 
 
-        return /*#__PURE__*/_react["default"].createElement(_dynamicShareToDynamic["default"], {
+        return /*#__PURE__*/_react["default"].createElement(_dynamicLearning["default"], {
           data: data
         });
 
@@ -385,7 +385,7 @@ var DynamicItem = function DynamicItem(_ref) {
     className: (0, _classnames["default"])("tu-icon-arrow-down", "".concat(prefix, "__icon"), "".concat(prefix, "__icon-up"))
   }))), /*#__PURE__*/_react["default"].createElement("span", {
     onClick: handlePayReward,
-    className: (0, _classnames["default"])("tu-icon-red-envelopes", "".concat(prefix, "__footer-icon"))
+    className: (0, _classnames["default"])("".concat(prefix, "__footer-icon"), "".concat(prefix, "__footer-icon-redenvelopes"))
   }), /*#__PURE__*/_react["default"].createElement("span", {
     onClick: handleCommentClick,
     className: (0, _classnames["default"])("tu-icon-pinglun-m", "".concat(prefix, "__footer-icon"))

package/lib/components/dynamic/img/dynamic-redenvelopes-hover.svg

@@ -0,0 +1 @@
+<svg width="20" height="20" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><defs><linearGradient x1="74.137%" y1="76.285%" x2="7.656%" y2=".727%" id="a"><stop stop-color="#F05E5E" offset="0%"/><stop stop-color="#FFA5A5" offset="100%"/></linearGradient></defs><g fill="none" fill-rule="evenodd"><rect width="20" height="20" rx=".167"/><path d="M16.905 4.805c0 .004.003.01.005.014.67 1.56 1.007 3.286 1.007 5.181s-.336 3.622-1.008 5.18v.001a3.5 3.5 0 0 1-1.814 1.823c-1.394.609-3.093.913-5.095.913s-3.7-.304-5.095-.912A3.5 3.5 0 0 1 3.09 15.18c-.67-1.56-1.007-3.286-1.007-5.181 0-1.75.287-3.355.86-4.818l.147-.363.006-.013c.356.213.797.408 1.306.58 1.433.482 3.412.78 5.598.78s4.165-.298 5.598-.78c.51-.172.95-.367 1.307-.58zm-8.143 4.63a.65.65 0 0 0-.895-.121.524.524 0 0 0-.098.735l1.08 1.413h-.646a.47.47 0 1 0 0 .94h1.176v.728H8.082a.595.595 0 0 0 0 1.19h1.297v.532a.648.648 0 1 0 1.296 0v-.532h1.313a.595.595 0 0 0 0-1.19h-1.313v-.728h1.192a.47.47 0 0 0 0-.94h-.641l.958-1.387a.555.555 0 0 0-.172-.79.638.638 0 0 0-.849.179l-1.123 1.594zM10 2.083c2.002 0 3.7.304 5.095.912a3.5 3.5 0 0 1 1.26.933c-.32.216-.88.412-1.64.574-1.244.264-2.922.415-4.715.415-1.793 0-3.471-.151-4.714-.415-.76-.162-1.32-.358-1.642-.573.342-.4.772-.72 1.26-.933v-.001c1.296-.564 2.853-.867 4.672-.907L10 2.083z" fill="url(#a)"/></g></svg>

package/lib/components/dynamic/img/dynamic-redenvelopes-normal.svg

@@ -0,0 +1 @@
+<svg width="20" height="20" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><g fill="none" fill-rule="evenodd"><rect width="20" height="20" rx=".167"/><path d="M16.905 4.805c0 .004.003.01.005.014.67 1.56 1.007 3.286 1.007 5.181s-.336 3.622-1.008 5.18v.001a3.5 3.5 0 0 1-1.814 1.823c-1.394.609-3.093.913-5.095.913s-3.7-.304-5.095-.912A3.5 3.5 0 0 1 3.09 15.18c-.67-1.56-1.007-3.286-1.007-5.181 0-1.75.287-3.355.86-4.818l.147-.363.006-.013c.356.213.797.408 1.306.58 1.433.482 3.412.78 5.598.78s4.165-.298 5.598-.78c.51-.172.95-.367 1.307-.58zm-8.143 4.63a.65.65 0 0 0-.895-.121.524.524 0 0 0-.098.735l1.08 1.413h-.646a.47.47 0 1 0 0 .94h1.176v.728H8.082a.595.595 0 0 0 0 1.19h1.297v.532a.648.648 0 1 0 1.296 0v-.532h1.313a.595.595 0 0 0 0-1.19h-1.313v-.728h1.192a.47.47 0 0 0 0-.94h-.641l.958-1.387a.555.555 0 0 0-.172-.79.638.638 0 0 0-.849.179l-1.123 1.594zM10 2.083c2.002 0 3.7.304 5.095.912a3.5 3.5 0 0 1 1.26.933c-.32.216-.88.412-1.64.574-1.244.264-2.922.415-4.715.415-1.793 0-3.471-.151-4.714-.415-.76-.162-1.32-.358-1.642-.573.342-.4.772-.72 1.26-.933v-.001c1.296-.564 2.853-.867 4.672-.907L10 2.083z" fill="#A4ACB9"/></g></svg>

package/lib/components/nav-top/components/menu/index.css

@@ -39,16 +39,20 @@
   transform: translate(-50%, 0);
 }
 
-.titaui-nav-top-menu__menu--hasPoint::before {
-  content: '';
+.titaui-nav-top-menu__menu--hasNum {
+  display: flex;
+  align-items: center;
   position: absolute;
-  width: 6px;
-  height: 6px;
+  right: 4px;
+  top: 6px;
   background: #f05e5e;
-  border: 2px solid #2879ff;
-  border-radius: 50%;
-  right: 12px;
-  top: 10px;
+  box-shadow: 0px 2px 4px 0px rgba(240, 94, 94, 0.6), inset 0px 0px 2px 1px rgba(255, 255, 255, 0.4);
+  border-radius: 8px;
+  height: 16px;
+  font-size: 12px;
+  color: #ffffff;
+  line-height: 18px;
+  padding: 0 4px;
 }
 
 .titaui-nav-top-menu__hide-menus {

package/lib/components/nav-top/components/menu/index.js

@@ -89,20 +89,20 @@ var Menu = function Menu(_ref) {
   };
 
   var renderRawItem = function renderRawItem(menu) {
-    var _classNames;
-
     return /*#__PURE__*/_react["default"].createElement(_rcOverflow["default"].Item, {
       component: "span"
     }, /*#__PURE__*/_react["default"].createElement(_conditionRender["default"], {
       condition: menu.title !== "Learning"
     }, /*#__PURE__*/_react["default"].createElement("a", {
-      className: (0, _classnames["default"])("".concat(prefix, "__menu-show"), (_classNames = {}, _defineProperty(_classNames, "".concat(prefix, "__menu-show--active"), activeMenuId === menu.id), _defineProperty(_classNames, "".concat(prefix, "__menu--hasPoint"), menu.href === "#dynamic" && feedNum > 0), _classNames)),
+      className: (0, _classnames["default"])("".concat(prefix, "__menu-show"), _defineProperty({}, "".concat(prefix, "__menu-show--active"), activeMenuId === menu.id)),
       href: "".concat(menu.href),
       target: "_self",
       onClick: function onClick() {
         return handleTracker(menu);
       }
-    }, menu.title)), /*#__PURE__*/_react["default"].createElement(_conditionRender["default"], {
+    }, menu.title, menu.href === "#dynamic" && feedNum > 0 && /*#__PURE__*/_react["default"].createElement("div", {
+      className: "".concat(prefix, "__menu--hasNum")
+    }, feedNum > 100 ? "99+" : feedNum))), /*#__PURE__*/_react["default"].createElement(_conditionRender["default"], {
       condition: menu.title === "Learning"
     }, /*#__PURE__*/_react["default"].createElement("span", {
       className: (0, _classnames["default"])("".concat(prefix, "__menu-show"), _defineProperty({}, "".concat(prefix, "__menu-show--active"), activeMenuId === menu.id)),

package/lib/components/superset-charts/components/index.js

@@ -55,7 +55,8 @@ var Chart = function Chart(_ref) {
   return /*#__PURE__*/_react["default"].createElement("div", null, Chart && !loading && chartId && /*#__PURE__*/_react["default"].createElement(Chart, {
     id: chartId,
     height: height,
-    width: width
+    width: width,
+    layout: "feed-card"
   }));
 };
 

package/lib/components/video-modal/components/video-box/index.css

@@ -0,0 +1,240 @@
+.titaui-pc-video-box__box {
+  width: 100%;
+  height: 100%;
+  position: relative;
+  border-bottom-right-radius: 24px;
+  border-bottom-left-radius: 24px;
+  overflow: hidden;
+  cursor: pointer;
+}
+
+.titaui-pc-video-box__box:hover .titaui-pc-video-box__mask1 {
+  opacity: 1;
+  transition: 0.5s;
+}
+
+.titaui-pc-video-box__box:hover .titaui-pc-video-box__mask2 {
+  opacity: 1;
+  transition: 0.5s;
+}
+
+.titaui-pc-video-box__box:hover .titaui-pc-video-box__progress {
+  opacity: 1;
+  transition: 0.5s;
+}
+
+.titaui-pc-video-box__mouseMove {
+  width: 100%;
+  height: 30px;
+  position: absolute;
+  bottom: 40px;
+  z-index: 12;
+}
+
+.titaui-pc-video-box__mouseMove:hover .titaui-pc-video-box__progress {
+  height: 4px;
+}
+
+.titaui-pc-video-box__mouseMove--small {
+  height: 20px;
+  bottom: 30px;
+}
+
+.titaui-pc-video-box__progress {
+  opacity: 0;
+  transition: 0.5s;
+  position: absolute;
+  bottom: 14px;
+  width: 100%;
+  height: 2px;
+  background: #ffffff;
+  z-index: 2;
+}
+
+.titaui-pc-video-box__progress--small {
+  bottom: 12px;
+}
+
+.titaui-pc-video-box__progress-current {
+  position: absolute;
+  left: 0;
+  bottom: 0;
+  background: #77be16;
+  height: 100%;
+  z-index: 3;
+}
+
+.titaui-pc-video-box__progress-current-dot {
+  position: absolute;
+  right: 0;
+  bottom: -2px;
+  width: 8px;
+  height: 8px;
+  border-radius: 50%;
+  background: #77be16;
+}
+
+.titaui-pc-video-box__controls {
+  width: 100%;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 16px 32px 16px 32px;
+  box-sizing: border-box;
+  position: absolute;
+  bottom: 0;
+  z-index: 2;
+}
+
+.titaui-pc-video-box__controls--small {
+  padding: 10px 12px;
+}
+
+.titaui-pc-video-box__controls-left {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.titaui-pc-video-box__controls-button {
+  width: 24px;
+  height: 24px;
+  border-radius: 12px;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.titaui-pc-video-box__controls-button:hover {
+  background: rgba(20, 28, 40, 0.6);
+}
+
+.titaui-pc-video-box__controls-play {
+  display: inline-flex;
+  align-items: center;
+  cursor: pointer;
+}
+
+.titaui-pc-video-box__controls-play img {
+  width: 16px;
+  height: 16px;
+}
+
+.titaui-pc-video-box__controls-time {
+  font-size: 12px;
+  color: #ffffff;
+  line-height: 18px;
+}
+
+.titaui-pc-video-box__controls-time:nth-of-type(1) {
+  margin-left: 6px;
+}
+
+.titaui-pc-video-box__controls-muted {
+  width: 16px;
+  height: 16px;
+}
+
+.titaui-pc-video-box__controls-volume {
+  display: inline-flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 0 8px;
+  box-sizing: border-box;
+  width: 72px;
+  height: 22px;
+  background: rgba(20, 28, 40, 0.6);
+  border-radius: 12px;
+}
+
+.titaui-pc-video-box__controls-volume-progress {
+  position: relative;
+  width: 34px;
+  height: 2px;
+  background: rgba(255, 255, 255, 0.4);
+  border-radius: 1px;
+}
+
+.titaui-pc-video-box__controls-volume-progress--hidden {
+  display: none;
+}
+
+.titaui-pc-video-box__controls-volume-current {
+  position: absolute;
+  bottom: 0;
+  left: 0;
+  height: 2px;
+  background: rgba(255, 255, 255, 0.6);
+  border-radius: 1px;
+}
+
+.titaui-pc-video-box__controls-volume-current::after {
+  content: '';
+  position: absolute;
+  right: 0;
+  bottom: -1px;
+  width: 4px;
+  height: 4px;
+  border-radius: 50%;
+  background: #ffffff;
+}
+
+.titaui-pc-video-box__controls-volume-current--hidden {
+  display: none;
+}
+
+.titaui-pc-video-box__controls-right {
+  display: inline-flex;
+  align-items: center;
+}
+
+.titaui-pc-video-box__title {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+}
+
+.titaui-pc-video-box__mask1 {
+  opacity: 0;
+  transition: 0.5s;
+  position: absolute;
+  top: 0;
+  padding: 0 16px;
+  box-sizing: border-box;
+  width: 100%;
+  height: 62px;
+  background: linear-gradient(0deg, rgba(20, 28, 40, 0) 0%, #5a6068 100%);
+}
+
+.titaui-pc-video-box__mask1--small {
+  height: 42px;
+}
+
+.titaui-pc-video-box__mask1-title {
+  font-size: 12px;
+  font-weight: normal;
+  color: #ffffff;
+  line-height: 18px;
+}
+
+.titaui-pc-video-box__mask1-close {
+  width: 14px;
+  height: 14px;
+  cursor: pointer;
+}
+
+.titaui-pc-video-box__mask2 {
+  opacity: 0;
+  transition: 0.5s;
+  position: absolute;
+  bottom: 0;
+  width: 100%;
+  height: 62px;
+  background: linear-gradient(180deg, rgba(20, 28, 40, 0) 0%, #5a6068 100%);
+}
+
+.titaui-pc-video-box__mask2--small {
+  height: 42px;
+}