@nutui/nutui-react 4.0.0-beta.3 → 4.0.0-beta.5

package/dist/cjs/packages/empty/empty.js

@@ -18,22 +18,18 @@ var _react = /*#__PURE__*/ _interop_require_wildcard._(require("react"));
 var _classnames = /*#__PURE__*/ _interop_require_default._(require("classnames"));
 var _typings = require("../../utils/typings");
 var _button = /*#__PURE__*/ _interop_require_default._(require("../button"));
-var defaultStatus = {
-    empty: 'https://storage.360buyimg.com/imgtools/30186cfda0-0d3eee40-c0ac-11ee-9382-9125782aa3b8.png',
-    error: 'https://storage.360buyimg.com/imgtools/f3278d0ebb-0ce360c0-c0ac-11ee-8375-193101bb1a46.png',
-    network: 'https://storage.360buyimg.com/imgtools/43c30f7e29-0d483d10-c0ac-11ee-bec4-eb4d2a09a51d.png'
-};
+var _types = require("../../types");
 var defaultProps = (0, _object_spread_props._)((0, _object_spread._)({}, _typings.ComponentDefaults), {
     title: '',
     description: '',
     imageSize: '',
-    size: 'base',
-    status: 'empty',
+    size: 'half',
+    status: 'network',
     actions: []
 });
 var classPrefix = "nut-empty";
 var Empty = function Empty(props) {
-    var _ref = (0, _object_spread._)({}, defaultProps, props), image = _ref.image, imageSize = _ref.imageSize, title = _ref.title, description = _ref.description, children = _ref.children, className = _ref.className, size = _ref.size, status = _ref.status, actions = _ref.actions, style = _ref.style, rest = (0, _object_without_properties._)(_ref, [
+    var _$_object_spread = (0, _object_spread._)({}, defaultProps, props), image = _$_object_spread.image, imageSize = _$_object_spread.imageSize, title = _$_object_spread.title, description = _$_object_spread.description, children = _$_object_spread.children, className = _$_object_spread.className, size = _$_object_spread.size, status = _$_object_spread.status, actions = _$_object_spread.actions, style = _$_object_spread.style, rest = (0, _object_without_properties._)(_$_object_spread, [
         "image",
         "imageSize",
         "title",
@@ -46,7 +42,7 @@ var Empty = function Empty(props) {
         "style"
     ]);
     var _useState = (0, _sliced_to_array._)((0, _react.useState)({}), 2), imgStyle = _useState[0], setImgStyle = _useState[1];
-    var imageUrl = image || defaultStatus[status];
+    var imageUrl = image || (0, _types.getEmptyStatusImage)(status);
     var imageNode = typeof imageUrl === 'string' ? /*#__PURE__*/ _react.default.createElement("img", {
         style: {
             width: '100%',
@@ -74,18 +70,26 @@ var Empty = function Empty(props) {
     }, [
         imageSize
     ]);
-    var cls = (0, _classnames.default)(classPrefix, className);
-    return /*#__PURE__*/ _react.default.createElement("div", (0, _object_spread._)({
-        className: cls
-    }, rest), /*#__PURE__*/ _react.default.createElement("div", {
-        className: "".concat(classPrefix, "-").concat(size),
+    var cls = (0, _classnames.default)(classPrefix, "".concat(classPrefix, "--").concat(size), className);
+    var imageBlock = /*#__PURE__*/ _react.default.createElement("div", {
+        className: "".concat(classPrefix, "-image"),
         style: imgStyle
-    }, imageNode), typeof title === 'string' && title ? /*#__PURE__*/ _react.default.createElement("div", {
+    }, imageNode);
+    var titleBlock = typeof title === 'string' && title ? /*#__PURE__*/ _react.default.createElement("div", {
         className: "".concat(classPrefix, "-title")
-    }, title) : title, typeof description === 'string' ? /*#__PURE__*/ _react.default.createElement("div", {
+    }, title) : title;
+    var descriptionBlock = typeof description === 'string' ? /*#__PURE__*/ _react.default.createElement("div", {
         className: "".concat(classPrefix, "-description")
-    }, description) : description, actions.length ? /*#__PURE__*/ _react.default.createElement("div", {
-        className: "".concat(classPrefix, "-actions-").concat(size)
+    }, description) : description;
+    return /*#__PURE__*/ _react.default.createElement("div", (0, _object_spread._)({
+        className: cls,
+        style: style
+    }, rest), size === 'partial' ? /*#__PURE__*/ _react.default.createElement("div", {
+        className: "".concat(classPrefix, "-partial-body")
+    }, imageBlock, /*#__PURE__*/ _react.default.createElement("div", {
+        className: "".concat(classPrefix, "-content")
+    }, titleBlock, descriptionBlock)) : /*#__PURE__*/ _react.default.createElement(_react.default.Fragment, null, imageBlock, titleBlock, descriptionBlock), actions.length ? /*#__PURE__*/ _react.default.createElement("div", {
+        className: "".concat(classPrefix, "-actions")
     }, actions.map(function(action, index) {
         var text = action.text, rest = (0, _object_without_properties._)(action, [
             "text"

package/dist/cjs/packages/empty/index.d.ts

@@ -1,3 +1,3 @@
 import { Empty } from './empty';
-export type { EmptyProps } from './empty';
+export type { EmptyAction, EmptyProps, EmptySize, EmptyStatus } from './empty';
 export default Empty;

package/dist/cjs/packages/empty/style/empty.scss

@@ -6,23 +6,8 @@
   flex-direction: column;
   justify-content: center;
   padding: $empty-padding;
-  background-color: $empty-background-color;
-
-  &-base {
-    width: $empty-image-size;
-    height: $empty-image-size;
-
-    img,
-    image {
-      width: 100%;
-      height: 100%;
-    }
-  }
-
-  &-small {
-    width: $empty-image-small-size;
-    height: $empty-image-small-size;
 
+  &-image {
     img,
     image {
       width: 100%;
@@ -31,32 +16,113 @@
   }
 
   &-title {
-    margin-top: $empty-title-margin-top;
+    text-align: center;
+    color: $empty-title-color;
     font-weight: $font-weight-bold;
-    margin-bottom: $empty-title-margin-bottom;
-    color: $color-title;
-    font-size: $font-size-l;
-    line-height: $empty-title-line-height;
   }
 
   &-description {
-    color: $color-text;
-    font-size: $font-size-s;
-    line-height: $empty-description-line-height;
-  }
-  &-actions-base {
-    display: flex;
-    flex-direction: row;
-    margin-top: scale-px(24px);
+    text-align: center;
+    color: $empty-description-color;
+    font-weight: $font-weight;
   }
-  &-actions-small {
+
+  &-actions {
     display: flex;
     flex-direction: row;
-    margin-top: scale-px(16px);
+    justify-content: center;
   }
 
   &-action {
     margin-right: scale-px(6px);
     margin-left: scale-px(6px);
   }
+
+  &-partial-body {
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    max-width: 100%;
+  }
+
+  &-content {
+    flex: 1;
+    min-width: 0;
+  }
+
+  // 全屏型：整页无数据
+  &--full {
+    padding-top: $empty-full-padding-top;
+
+    .nut-empty-image {
+      width: $empty-full-image-size;
+      height: $empty-full-image-size;
+    }
+
+    .nut-empty-title {
+      font-size: $empty-full-title-font-size;
+      line-height: $empty-full-title-line-height;
+    }
+
+    .nut-empty-description {
+      font-size: $empty-full-description-font-size;
+      line-height: $empty-full-description-line-height;
+    }
+
+    .nut-empty-actions {
+      margin-top: $empty-full-actions-margin-top;
+    }
+  }
+
+  // 半屏型：模块、弹层等区域
+  &--half {
+    .nut-empty-image {
+      width: $empty-half-image-size;
+      height: $empty-half-image-size;
+    }
+
+    .nut-empty-title {
+      font-size: $empty-half-title-font-size;
+      line-height: $empty-half-title-line-height;
+    }
+
+    .nut-empty-description {
+      font-size: $empty-half-description-font-size;
+      line-height: $empty-half-description-line-height;
+    }
+
+    .nut-empty-actions {
+      margin-top: $empty-half-actions-margin-top;
+    }
+  }
+
+  // 局部型：横向图文
+  &--partial {
+    padding: $empty-partial-padding;
+
+    .nut-empty-partial-body {
+      gap: $empty-partial-content-gap;
+    }
+
+    .nut-empty-image {
+      width: $empty-partial-image-size;
+      height: $empty-partial-image-size;
+    }
+
+    .nut-empty-title {
+      text-align: left;
+      font-size: $empty-partial-description-font-size;
+      line-height: $empty-partial-description-line-height;
+      color: $empty-title-color;
+      font-weight: $font-weight;
+    }
+
+    .nut-empty-description {
+      text-align: left;
+      font-size: $empty-partial-description-font-size;
+      line-height: $empty-partial-description-line-height;
+      color: $empty-description-color;
+      font-weight: $font-weight;
+    }
+  }
 }

package/dist/cjs/packages/empty/style/style.css

@@ -15,51 +15,96 @@ page {
   align-items: center;
   flex-direction: column;
   justify-content: center;
-  padding: var(--nutui-empty-padding, calc(32px * var(--nut-scale-f, 1)) calc(40px * var(--nut-scale-f, 1)));
-  background-color: var(--nutui-empty-background-color, var(--nutui-color-background-overlay, #ffffff));
+  padding: var(--nutui-empty-padding, calc(20px * var(--nut-scale-f, 1)));
 }
-.nut-empty-base {
-  width: var(--nutui-empty-image-size, calc(160px * var(--nut-scale-f, 1)));
-  height: var(--nutui-empty-image-size, calc(160px * var(--nut-scale-f, 1)));
-}
-.nut-empty-base img,
-.nut-empty-base image {
-  width: 100%;
-  height: 100%;
-}
-.nut-empty-small {
-  width: var(--nutui-empty-image-small-size, calc(120px * var(--nut-scale-f, 1)));
-  height: var(--nutui-empty-image-small-size, calc(120px * var(--nut-scale-f, 1)));
-}
-.nut-empty-small img,
-.nut-empty-small image {
+.nut-empty-image img,
+.nut-empty-image image {
   width: 100%;
   height: 100%;
 }
 .nut-empty-title {
-  margin-top: var(--nutui-empty-title-margin-top, 0px);
+  text-align: center;
+  color: var(--nutui-empty-title-color, var(--nutui-color-title, #1a1a1a));
   font-weight: var(--nutui-font-weight-bold, 600);
-  margin-bottom: var(--nutui-empty-title-margin-bottom, calc(12px * var(--nut-scale-f, 1)));
-  color: var(--nutui-color-title, #1a1a1a);
-  font-size: var(--nutui-font-size-l, calc(15px * var(--nut-scale-font, var(--nut-scale-f, 1))));
-  line-height: var(--nutui-empty-title-line-height, var(--nutui-font-size-l, calc(15px * var(--nut-scale-font, var(--nut-scale-f, 1)))));
 }
 .nut-empty-description {
-  color: var(--nutui-color-text, #505259);
-  font-size: var(--nutui-font-size-s, calc(12px * var(--nut-scale-font, var(--nut-scale-f, 1))));
-  line-height: var(--nutui-empty-description-line-height, 1);
-}
-.nut-empty-actions-base {
-  display: flex;
-  flex-direction: row;
-  margin-top: calc(24px * var(--nut-scale-f, 1));
+  text-align: center;
+  color: var(--nutui-empty-description-color, var(--nutui-color-text-help, #888b94));
+  font-weight: var(--nutui-font-weight, 400);
 }
-.nut-empty-actions-small {
+.nut-empty-actions {
   display: flex;
   flex-direction: row;
-  margin-top: calc(16px * var(--nut-scale-f, 1));
+  justify-content: center;
 }
 .nut-empty-action {
   margin-right: calc(6px * var(--nut-scale-f, 1));
   margin-left: calc(6px * var(--nut-scale-f, 1));
+}
+.nut-empty-partial-body {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  max-width: 100%;
+}
+.nut-empty-content {
+  flex: 1;
+  min-width: 0;
+}
+.nut-empty--full {
+  padding-top: var(--nutui-empty-full-padding-top, calc(160px * var(--nut-scale-f, 1)));
+}
+.nut-empty--full .nut-empty-image {
+  width: var(--nutui-empty-full-image-size, calc(160px * var(--nut-scale-f, 1)));
+  height: var(--nutui-empty-full-image-size, calc(160px * var(--nut-scale-f, 1)));
+}
+.nut-empty--full .nut-empty-title {
+  font-size: var(--nutui-empty-full-title-font-size, var(--nutui-font-size-md, calc(16px * var(--nut-scale-font, var(--nut-scale-f, 1)))));
+  line-height: var(--nutui-empty-full-title-line-height, var(--nutui-line-height-xxl, var(--nutui-font-size-xxl, calc(24px * var(--nut-scale-font, var(--nut-scale-f, 1))))));
+}
+.nut-empty--full .nut-empty-description {
+  font-size: var(--nutui-empty-full-description-font-size, var(--nutui-font-size-base, calc(14px * var(--nut-scale-font, var(--nut-scale-f, 1)))));
+  line-height: var(--nutui-empty-full-description-line-height, calc(22px * var(--nut-scale-font, var(--nut-scale-f, 1))));
+}
+.nut-empty--full .nut-empty-actions {
+  margin-top: var(--nutui-empty-full-actions-margin-top, calc(8px * var(--nut-scale-f, 1)));
+}
+.nut-empty--half .nut-empty-image {
+  width: var(--nutui-empty-half-image-size, calc(80px * var(--nut-scale-f, 1)));
+  height: var(--nutui-empty-half-image-size, calc(80px * var(--nut-scale-f, 1)));
+}
+.nut-empty--half .nut-empty-title {
+  font-size: var(--nutui-empty-half-title-font-size, var(--nutui-font-size-s, calc(12px * var(--nut-scale-font, var(--nut-scale-f, 1)))));
+  line-height: var(--nutui-empty-half-title-line-height, calc(22px * var(--nut-scale-font, var(--nut-scale-f, 1))));
+}
+.nut-empty--half .nut-empty-description {
+  font-size: var(--nutui-empty-half-description-font-size, var(--nutui-font-size-m, calc(13px * var(--nut-scale-font, var(--nut-scale-f, 1)))));
+  line-height: var(--nutui-empty-half-description-line-height, var(--nutui-line-height-2xl, var(--nutui-font-size-2xl, calc(20px * var(--nut-scale-font, var(--nut-scale-f, 1))))));
+}
+.nut-empty--half .nut-empty-actions {
+  margin-top: var(--nutui-empty-half-actions-margin-top, calc(8px * var(--nut-scale-f, 1)));
+}
+.nut-empty--partial {
+  padding: var(--nutui-empty-partial-padding, calc(0px * var(--nut-scale-f, 1)) calc(16px * var(--nut-scale-f, 1)));
+}
+.nut-empty--partial .nut-empty-partial-body {
+  gap: var(--nutui-empty-partial-content-gap, calc(8px * var(--nut-scale-f, 1)));
+}
+.nut-empty--partial .nut-empty-image {
+  width: var(--nutui-empty-partial-image-size, calc(32px * var(--nut-scale-f, 1)));
+  height: var(--nutui-empty-partial-image-size, calc(32px * var(--nut-scale-f, 1)));
+}
+.nut-empty--partial .nut-empty-title {
+  text-align: left;
+  font-size: var(--nutui-empty-partial-description-font-size, var(--nutui-font-size-m, calc(13px * var(--nut-scale-font, var(--nut-scale-f, 1)))));
+  line-height: var(--nutui-empty-partial-description-line-height, calc(32px * var(--nut-scale-font, var(--nut-scale-f, 1))));
+  color: var(--nutui-empty-title-color, var(--nutui-color-title, #1a1a1a));
+  font-weight: var(--nutui-font-weight, 400);
+}
+.nut-empty--partial .nut-empty-description {
+  text-align: left;
+  font-size: var(--nutui-empty-partial-description-font-size, var(--nutui-font-size-m, calc(13px * var(--nut-scale-font, var(--nut-scale-f, 1)))));
+  line-height: var(--nutui-empty-partial-description-line-height, calc(32px * var(--nut-scale-font, var(--nut-scale-f, 1))));
+  color: var(--nutui-empty-description-color, var(--nutui-color-text-help, #888b94));
+  font-weight: var(--nutui-font-weight, 400);
 }

package/dist/cjs/packages/empty/style-jmapp/empty.scss

@@ -6,23 +6,8 @@
   flex-direction: column;
   justify-content: center;
   padding: $empty-padding;
-  background-color: $empty-background-color;
-
-  &-base {
-    width: $empty-image-size;
-    height: $empty-image-size;
-
-    img,
-    image {
-      width: 100%;
-      height: 100%;
-    }
-  }
-
-  &-small {
-    width: $empty-image-small-size;
-    height: $empty-image-small-size;
 
+  &-image {
     img,
     image {
       width: 100%;
@@ -31,32 +16,113 @@
   }
 
   &-title {
-    margin-top: $empty-title-margin-top;
+    text-align: center;
+    color: $empty-title-color;
     font-weight: $font-weight-bold;
-    margin-bottom: $empty-title-margin-bottom;
-    color: $color-title;
-    font-size: $font-size-l;
-    line-height: $empty-title-line-height;
   }
 
   &-description {
-    color: $color-text;
-    font-size: $font-size-s;
-    line-height: $empty-description-line-height;
-  }
-  &-actions-base {
-    display: flex;
-    flex-direction: row;
-    margin-top: scale-px(24px);
+    text-align: center;
+    color: $empty-description-color;
+    font-weight: $font-weight;
   }
-  &-actions-small {
+
+  &-actions {
     display: flex;
     flex-direction: row;
-    margin-top: scale-px(16px);
+    justify-content: center;
   }
 
   &-action {
     margin-right: scale-px(6px);
     margin-left: scale-px(6px);
   }
+
+  &-partial-body {
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    max-width: 100%;
+  }
+
+  &-content {
+    flex: 1;
+    min-width: 0;
+  }
+
+  // 全屏型：整页无数据
+  &--full {
+    padding-top: $empty-full-padding-top;
+
+    .nut-empty-image {
+      width: $empty-full-image-size;
+      height: $empty-full-image-size;
+    }
+
+    .nut-empty-title {
+      font-size: $empty-full-title-font-size;
+      line-height: $empty-full-title-line-height;
+    }
+
+    .nut-empty-description {
+      font-size: $empty-full-description-font-size;
+      line-height: $empty-full-description-line-height;
+    }
+
+    .nut-empty-actions {
+      margin-top: $empty-full-actions-margin-top;
+    }
+  }
+
+  // 半屏型：模块、弹层等区域
+  &--half {
+    .nut-empty-image {
+      width: $empty-half-image-size;
+      height: $empty-half-image-size;
+    }
+
+    .nut-empty-title {
+      font-size: $empty-half-title-font-size;
+      line-height: $empty-half-title-line-height;
+    }
+
+    .nut-empty-description {
+      font-size: $empty-half-description-font-size;
+      line-height: $empty-half-description-line-height;
+    }
+
+    .nut-empty-actions {
+      margin-top: $empty-half-actions-margin-top;
+    }
+  }
+
+  // 局部型：横向图文
+  &--partial {
+    padding: $empty-partial-padding;
+
+    .nut-empty-partial-body {
+      gap: $empty-partial-content-gap;
+    }
+
+    .nut-empty-image {
+      width: $empty-partial-image-size;
+      height: $empty-partial-image-size;
+    }
+
+    .nut-empty-title {
+      text-align: left;
+      font-size: $empty-partial-description-font-size;
+      line-height: $empty-partial-description-line-height;
+      color: $empty-title-color;
+      font-weight: $font-weight;
+    }
+
+    .nut-empty-description {
+      text-align: left;
+      font-size: $empty-partial-description-font-size;
+      line-height: $empty-partial-description-line-height;
+      color: $empty-description-color;
+      font-weight: $font-weight;
+    }
+  }
 }

package/dist/cjs/packages/empty/style-jmapp/style.css

@@ -9,51 +9,96 @@
   align-items: center;
   flex-direction: column;
   justify-content: center;
-  padding: var(--nutui-empty-padding, 32px 40px);
-  background-color: var(--nutui-empty-background-color, #fff);
+  padding: var(--nutui-empty-padding, 20px);
 }
-.nut-empty-base {
-  width: var(--nutui-empty-image-size, 160px);
-  height: var(--nutui-empty-image-size, 160px);
-}
-.nut-empty-base img,
-.nut-empty-base image {
-  width: 100%;
-  height: 100%;
-}
-.nut-empty-small {
-  width: var(--nutui-empty-image-small-size, 120px);
-  height: var(--nutui-empty-image-small-size, 120px);
-}
-.nut-empty-small img,
-.nut-empty-small image {
+.nut-empty-image img,
+.nut-empty-image image {
   width: 100%;
   height: 100%;
 }
 .nut-empty-title {
-  margin-top: var(--nutui-empty-title-margin-top, 0px);
+  text-align: center;
+  color: var(--nutui-empty-title-color, var(--nutui-color-title));
   font-weight: var(--nutui-font-weight-bold);
-  margin-bottom: var(--nutui-empty-title-margin-bottom, 8px);
-  color: var(--nutui-color-title);
-  font-size: var(--nutui-font-text-large);
-  line-height: var(--nutui-empty-title-line-height, var(--nutui-font-text));
 }
 .nut-empty-description {
-  color: var(--nutui-color-text);
-  font-size: var(--nutui-font-text-small);
-  line-height: var(--nutui-empty-description-line-height, 1.2);
-}
-.nut-empty-actions-base {
-  display: flex;
-  flex-direction: row;
-  margin-top: scale-px(24px);
+  text-align: center;
+  color: var(--nutui-empty-description-color, var(--nutui-color-text-help));
+  font-weight: var(--nutui-font-weight);
 }
-.nut-empty-actions-small {
+.nut-empty-actions {
   display: flex;
   flex-direction: row;
-  margin-top: scale-px(16px);
+  justify-content: center;
 }
 .nut-empty-action {
   margin-right: scale-px(6px);
   margin-left: scale-px(6px);
+}
+.nut-empty-partial-body {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  max-width: 100%;
+}
+.nut-empty-content {
+  flex: 1;
+  min-width: 0;
+}
+.nut-empty--full {
+  padding-top: var(--nutui-empty-full-padding-top, 160px);
+}
+.nut-empty--full .nut-empty-image {
+  width: var(--nutui-empty-full-image-size, 160px);
+  height: var(--nutui-empty-full-image-size, 160px);
+}
+.nut-empty--full .nut-empty-title {
+  font-size: var(--nutui-empty-full-title-font-size, var(--nutui-font-size-md, 16px));
+  line-height: var(--nutui-empty-full-title-line-height, var(--nutui-line-height-xxl, var(--nutui-font-size-8)));
+}
+.nut-empty--full .nut-empty-description {
+  font-size: var(--nutui-empty-full-description-font-size, var(--nutui-font-text));
+  line-height: var(--nutui-empty-full-description-line-height, 22px);
+}
+.nut-empty--full .nut-empty-actions {
+  margin-top: var(--nutui-empty-full-actions-margin-top, 8px);
+}
+.nut-empty--half .nut-empty-image {
+  width: var(--nutui-empty-half-image-size, 80px);
+  height: var(--nutui-empty-half-image-size, 80px);
+}
+.nut-empty--half .nut-empty-title {
+  font-size: var(--nutui-empty-half-title-font-size, var(--nutui-font-text-small));
+  line-height: var(--nutui-empty-half-title-line-height, 22px);
+}
+.nut-empty--half .nut-empty-description {
+  font-size: var(--nutui-empty-half-description-font-size, var(--nutui-font-size-m, var(--nutui-font-text-small)));
+  line-height: var(--nutui-empty-half-description-line-height, var(--nutui-line-height-2xl, var(--nutui-font-size-2xl, 20px)));
+}
+.nut-empty--half .nut-empty-actions {
+  margin-top: var(--nutui-empty-half-actions-margin-top, 8px);
+}
+.nut-empty--partial {
+  padding: var(--nutui-empty-partial-padding, 0px 16px);
+}
+.nut-empty--partial .nut-empty-partial-body {
+  gap: var(--nutui-empty-partial-content-gap, 8px);
+}
+.nut-empty--partial .nut-empty-image {
+  width: var(--nutui-empty-partial-image-size, 32px);
+  height: var(--nutui-empty-partial-image-size, 32px);
+}
+.nut-empty--partial .nut-empty-title {
+  text-align: left;
+  font-size: var(--nutui-empty-partial-description-font-size, var(--nutui-font-size-m, var(--nutui-font-text-small)));
+  line-height: var(--nutui-empty-partial-description-line-height, 32px);
+  color: var(--nutui-empty-title-color, var(--nutui-color-title));
+  font-weight: var(--nutui-font-weight);
+}
+.nut-empty--partial .nut-empty-description {
+  text-align: left;
+  font-size: var(--nutui-empty-partial-description-font-size, var(--nutui-font-size-m, var(--nutui-font-text-small)));
+  line-height: var(--nutui-empty-partial-description-line-height, 32px);
+  color: var(--nutui-empty-description-color, var(--nutui-color-text-help));
+  font-weight: var(--nutui-font-weight);
 }