@nutui/nutui-react 3.0.19-beta.2 → 3.0.20-beta.0

package/dist/style.scss

@@ -1,108 +1,108 @@
 @import './styles/variables.scss';
 @import './styles/mixins/index.scss';
 @import './styles/animation/index.scss';
-@import './es/packages/virtuallist/style/virtuallist.scss';
 @import './es/packages/watermark/style/watermark.scss';
-@import './es/packages/uploader/style/uploader.scss';
+@import './es/packages/virtuallist/style/virtuallist.scss';
 @import './es/packages/video/style/video.scss';
-@import './es/packages/trendarrow/style/trendarrow.scss';
+@import './es/packages/uploader/style/uploader.scss';
 @import './es/packages/tour/style/tour.scss';
+@import './es/packages/trendarrow/style/trendarrow.scss';
 @import './es/packages/toast/style/toast.scss';
 @import './es/packages/timedetail/style/timedetail.scss';
-@import './es/packages/timeselect/style/timeselect.scss';
 @import './es/packages/textarea/style/textarea.scss';
+@import './es/packages/timeselect/style/timeselect.scss';
 @import './es/packages/tag/style/tag.scss';
-@import './es/packages/table/style/table.scss';
-@import './es/packages/tabpane/style/tabpane.scss';
 @import './es/packages/tabs/style/tabs.scss';
+@import './es/packages/tabpane/style/tabpane.scss';
+@import './es/packages/table/style/table.scss';
 @import './es/packages/tabbaritem/style/tabbaritem.scss';
+@import './es/packages/switch/style/switch.scss';
 @import './es/packages/swiperitem/style/swiperitem.scss';
 @import './es/packages/tabbar/style/tabbar.scss';
-@import './es/packages/swipe/style/swipe.scss';
-@import './es/packages/switch/style/switch.scss';
 @import './es/packages/swiper/style/swiper.scss';
+@import './es/packages/swipe/style/swipe.scss';
 @import './es/packages/sticky/style/sticky.scss';
 @import './es/packages/steps/style/steps.scss';
-@import './es/packages/step/style/step.scss';
 @import './es/packages/space/style/space.scss';
-@import './es/packages/signature/style/signature.scss';
+@import './es/packages/step/style/step.scss';
 @import './es/packages/skeleton/style/skeleton.scss';
-@import './es/packages/segmented/style/segmented.scss';
+@import './es/packages/signature/style/signature.scss';
 @import './es/packages/sidebaritem/style/sidebaritem.scss';
 @import './es/packages/sidebar/style/sidebar.scss';
+@import './es/packages/segmented/style/segmented.scss';
 @import './es/packages/shortpassword/style/shortpassword.scss';
 @import './es/packages/searchbar/style/searchbar.scss';
-@import './es/packages/safearea/style/safearea.scss';
-@import './es/packages/range/style/range.scss';
 @import './es/packages/row/style/row.scss';
-@import './es/packages/resultpage/style/resultpage.scss';
+@import './es/packages/safearea/style/safearea.scss';
 @import './es/packages/rate/style/rate.scss';
-@import './es/packages/radiogroup/style/radiogroup.scss';
+@import './es/packages/resultpage/style/resultpage.scss';
 @import './es/packages/radio/style/radio.scss';
+@import './es/packages/range/style/range.scss';
+@import './es/packages/radiogroup/style/radiogroup.scss';
 @import './es/packages/pulltorefresh/style/pulltorefresh.scss';
-@import './es/packages/progress/style/progress.scss';
 @import './es/packages/price/style/price.scss';
-@import './es/packages/pickerview/style/pickerview.scss';
 @import './es/packages/popup/style/popup.scss';
 @import './es/packages/popover/style/popover.scss';
+@import './es/packages/progress/style/progress.scss';
+@import './es/packages/pickerview/style/pickerview.scss';
 @import './es/packages/picker/style/picker.scss';
-@import './es/packages/overlay/style/overlay.scss';
+@import './es/packages/pagination/style/pagination.scss';
 @import './es/packages/numberkeyboard/style/numberkeyboard.scss';
 @import './es/packages/notify/style/notify.scss';
-@import './es/packages/pagination/style/pagination.scss';
-@import './es/packages/noticebar/style/noticebar.scss';
+@import './es/packages/overlay/style/overlay.scss';
 @import './es/packages/navbar/style/navbar.scss';
+@import './es/packages/noticebar/style/noticebar.scss';
 @import './es/packages/menuitem/style/menuitem.scss';
+@import './es/packages/menu/style/menu.scss';
+@import './es/packages/layout/style/layout.scss';
 @import './es/packages/loading/style/loading.scss';
 @import './es/packages/lottie/style/lottie.scss';
 @import './es/packages/inputnumber/style/inputnumber.scss';
-@import './es/packages/menu/style/menu.scss';
-@import './es/packages/layout/style/layout.scss';
 @import './es/packages/infiniteloading/style/infiniteloading.scss';
 @import './es/packages/input/style/input.scss';
 @import './es/packages/indicator/style/indicator.scss';
-@import './es/packages/image/style/image.scss';
 @import './es/packages/hoverbuttonitem/style/hoverbuttonitem.scss';
 @import './es/packages/imagepreview/style/imagepreview.scss';
-@import './es/packages/formitem/style/formitem.scss';
+@import './es/packages/image/style/image.scss';
 @import './es/packages/hoverbutton/style/hoverbutton.scss';
-@import './es/packages/griditem/style/griditem.scss';
 @import './es/packages/grid/style/grid.scss';
+@import './es/packages/formitem/style/formitem.scss';
+@import './es/packages/griditem/style/griditem.scss';
 @import './es/packages/form/style/form.scss';
 @import './es/packages/fixednav/style/fixednav.scss';
-@import './es/packages/empty/style/empty.scss';
 @import './es/packages/ellipsis/style/ellipsis.scss';
-@import './es/packages/drag/style/drag.scss';
+@import './es/packages/empty/style/empty.scss';
 @import './es/packages/elevator/style/elevator.scss';
-@import './es/packages/dialog/style/dialog.scss';
+@import './es/packages/drag/style/drag.scss';
 @import './es/packages/divider/style/divider.scss';
+@import './es/packages/dialog/style/dialog.scss';
 @import './es/packages/datepickerview/style/datepickerview.scss';
 @import './es/packages/datepicker/style/datepicker.scss';
 @import './es/packages/countdown/style/countdown.scss';
-@import './es/packages/configprovider/style/configprovider.scss';
 @import './es/packages/countup/style/countup.scss';
+@import './es/packages/configprovider/style/configprovider.scss';
 @import './es/packages/collapseitem/style/collapseitem.scss';
-@import './es/packages/col/style/col.scss';
 @import './es/packages/collapse/style/collapse.scss';
-@import './es/packages/circleprogress/style/circleprogress.scss';
 @import './es/packages/checkboxgroup/style/checkboxgroup.scss';
-@import './es/packages/checkbox/style/checkbox.scss';
+@import './es/packages/col/style/col.scss';
+@import './es/packages/circleprogress/style/circleprogress.scss';
 @import './es/packages/cellgroup/style/cellgroup.scss';
+@import './es/packages/checkbox/style/checkbox.scss';
 @import './es/packages/card/style/card.scss';
-@import './es/packages/cell/style/cell.scss';
 @import './es/packages/cascader/style/cascader.scss';
 @import './es/packages/calendaritem/style/calendaritem.scss';
-@import './es/packages/calendar/style/calendar.scss';
+@import './es/packages/cell/style/cell.scss';
 @import './es/packages/calendarcard/style/calendarcard.scss';
 @import './es/packages/button/style/button.scss';
+@import './es/packages/calendar/style/calendar.scss';
 @import './es/packages/barrage/style/barrage.scss';
 @import './es/packages/badge/style/badge.scss';
 @import './es/packages/avatarcropper/style/avatarcropper.scss';
-@import './es/packages/backtop/style/backtop.scss';
-@import './es/packages/audio/style/audio.scss';
-@import './es/packages/animatingnumbers/style/animatingnumbers.scss';
 @import './es/packages/avatargroup/style/avatargroup.scss';
-@import './es/packages/animate/style/animate.scss';
+@import './es/packages/backtop/style/backtop.scss';
 @import './es/packages/avatar/style/avatar.scss';
+@import './es/packages/animatingnumbers/style/animatingnumbers.scss';
+@import './es/packages/audio/style/audio.scss';
 @import './es/packages/address/style/address.scss';
+@import './es/packages/animate/style/animate.scss';
 @import './es/packages/actionsheet/style/actionsheet.scss';

package/dist/styles/theme-daojia.scss

@@ -0,0 +1,369 @@
+@import './jd-font';
+:root,
+page {
+  // 品牌颜色
+  --nutui-brand-1: #efffef; // 梯度1
+  --nutui-brand-2: #d5fbd5; // 梯度2
+  --nutui-brand-3: #72e88c; // 梯度3
+  --nutui-brand-4: #3fe363; // 梯度4
+  --nutui-brand-5: #23d94b; // 梯度5
+  --nutui-brand-6: #1ed145; // 梯度6
+  --nutui-brand-7: #16c73d; // 梯度7
+  --nutui-brand-8: #00ae42; // 梯度8
+  --nutui-brand-9: #009b3b; // 梯度9
+  --nutui-brand-10: #007d30; // 梯度10
+  --nutui-brand-11: #185c07; // 梯度11
+  --nutui-brand-12: #ff475d; // 梯度12
+  --nutui-brand-13: #ff0f23; // 梯度13
+
+  --nutui-brand-stop-1: #23d94b; // 渐变色起
+  --nutui-brand-stop-2: #1ed145; // 渐变色止
+
+  // service color
+  --nutui-golden-1: #fff4e8;
+  --nutui-golden-2: rgba(181, 105, 26, 0.02);
+  --nutui-golden-3: rgba(181, 105, 26, 0.2);
+  --nutui-golden-4: #b5691a;
+  --nutui-golden-5: #ffe7cc;
+  --nutui-golden-6: #ffd8ad;
+  --nutui-golden-7: #664100;
+
+  --nutui-golden-stop-1: #fff9f0;
+  --nutui-golden-stop-2: #ffe3c2;
+
+  // success color
+  --nutui-green-1: #ebfbeb;
+  --nutui-green-2: #00d900;
+  --nutui-green-3: #2aa32a;
+
+  // danger color 发现不一致TODO
+
+  // red color
+  --nutui-red-1: #fff0f4;
+  --nutui-red-2: #ffd6e1;
+  --nutui-red-3: #ffadbe;
+  --nutui-red-4: #ff8595;
+  --nutui-red-5: #ff5c67;
+  --nutui-red-6: #ff3333;
+  --nutui-red-7: #e53029;
+  --nutui-red-8: #cc2c21;
+  --nutui-red-9: #992412;
+  --nutui-red-10: #661b08;
+  --nutui-red-11: #330f02;
+
+  // warning color
+  --nutui-yellow-1: #fff9e0;
+  --nutui-yellow-2: #ffbf00;
+  --nutui-yellow-3: #b26b00;
+
+  // info color
+  --nutui-blue-1: #e5f5ff;
+  --nutui-blue-2: #0073ff;
+
+  --nutui-secondary-1: #14cc33; // 辅助色
+
+  // 背景色
+  // 卡片背景色
+  --nutui-gray-1: #ffffff;
+  // 卡片内嵌背景色，用于卡片内部的信息包裹，感知较弱。
+  --nutui-gray-2: #f5f6fa;
+  // 页面基底色，用于卡片式页面的兜底，永远置于页面最底层。
+  --nutui-gray-3: #f2f3f7;
+  // 组件背景色，2025年新增
+  --nutui-gray-9: #f5f6fa;
+  // 文字色
+  // 四级文字色，不可操作内容色，用于预置内容、无效内容、特殊不可点击按钮、组件边框线等。
+  --nutui-gray-4: #c2c4cc;
+  // 三级文字色（次要）
+  --nutui-gray-5: #828794;
+  // 二级文字色（常规），用于次级标题、属性标示、非主要信息引导等。
+  --nutui-gray-6: #3d414d;
+  // 一级文字色（重要）主要内容用色，常用语常规标题内容、细文浏览、常规按钮文字以及图表引导。
+  --nutui-gray-7: #171a26;
+  // icon 未选中颜色
+  --nutui-gray-8: #dadce0;
+
+  --nutui-black-1: rgba(0, 0, 0, 0);
+  // 蒙层色
+  // 容错蒙层
+  --nutui-black-2: rgba(0, 0, 0, 0.02);
+  // 线条色
+  // 间隔线/容错线，用于结构或信息分割
+  --nutui-black-3: rgba(0, 0, 0, 0.08);
+  --nutui-black-4: rgba(0, 0, 0, 0.1);
+  --nutui-black-5: rgba(0, 0, 0, 0.2);
+  --nutui-black-6: rgba(0, 0, 0, 0.3);
+  // 蒙层色
+  // 局部蒙层，像图片上的小蒙层，无货、采购中等
+  --nutui-black-7: rgba(0, 0, 0, 0.4);
+  --nutui-black-8: rgba(0, 0, 0, 0.5);
+  --nutui-black-9: rgba(0, 0, 0, 0.6);
+  // 蒙层色
+  // 全局蒙层，用于弹出层、弹窗、新功能引导出现的整页遮罩
+  --nutui-black-10: rgba(0, 0, 0, 0.7);
+  --nutui-black-11: rgba(0, 0, 0, 0.8);
+  --nutui-black-12: rgba(0, 0, 0, 0.9);
+  --nutui-black-13: rgba(0, 0, 0, 1);
+
+  --nutui-white-1: rgba(255, 255, 255, 0);
+  --nutui-white-2: rgba(255, 255, 255, 0.02);
+  --nutui-white-3: rgba(255, 255, 255, 0.05);
+  --nutui-white-4: rgba(255, 255, 255, 0.1);
+  --nutui-white-5: rgba(255, 255, 255, 0.2);
+  --nutui-white-6: rgba(255, 255, 255, 0.3);
+  --nutui-white-7: rgba(255, 255, 255, 0.4);
+  --nutui-white-8: rgba(255, 255, 255, 0.5);
+  --nutui-white-9: rgba(255, 255, 255, 0.6);
+  --nutui-white-10: rgba(255, 255, 255, 0.7);
+  --nutui-white-11: rgba(255, 255, 255, 0.8);
+  --nutui-white-12: rgba(255, 255, 255, 0.9);
+  --nutui-white-13: rgba(255, 255, 255, 1);
+
+  // 品牌颜色语义化
+  // 品牌主色调默认态，主要功能控件的背景、边框、镂空状态下的文字等
+  --nutui-color-primary: var(--nutui-brand-6);
+  // 品牌渐变色左端
+  --nutui-color-primary-stop-1: var(--nutui-brand-stop-1);
+  // 品牌渐变色右端
+  --nutui-color-primary-stop-2: var(--nutui-brand-stop-2);
+  // 品牌主色调或其他深色背景下的文字
+  --nutui-color-primary-text: var(--nutui-color-background-gray-1);
+  // 品牌主色调点击态，背景、边框、镂空状态下的文字
+  --nutui-color-primary-pressed: var(--nutui-brand-2);
+  // 品牌主色调禁用态，背景、边框、镂空状态下的文字
+  --nutui-color-primary-disabled: var(--nutui-color-content-gray-1);
+  // 品牌主色调特殊禁用态，通过操作后可转位默认态
+  --nutui-color-primary-disabled-special: var(--nutui-brand-3);
+  // 2025 新增
+  --nutui-color-primary-light: var(--nutui-brand-1);
+  // 品牌主色调镂空背景点击态
+  --nutui-color-primary-light-pressed: var(--nutui-brand-2);
+  // 看上去命名和上边重复，去掉
+  // --nutui-color-primary-specialdisabled: var(--nutui-red-3);
+
+  // service color 语义化
+  // 金色背景
+  --nutui-color-service: var(--nutui-golden-1);
+  // 填充标签边框
+  --nutui-color-service-border-1: var(--nutui-golden-2);
+  // 线框标签边框
+  --nutui-color-service-border-2: var(--nutui-golden-3);
+  // 废弃
+  //   --nutui-color-service-border: var(--nutui-golden-2);
+  --nutui-color-service-pressed: var(--nutui-golden-4);
+  // 金色文字
+  --nutui-color-service-text: var(--nutui-golden-4);
+  // 金色按钮背景
+  --nutui-color-service-btn-bg: var(--nutui-golden-5);
+  // 金色按钮点击态背景
+  --nutui-color-service-btn-bg-pressed: var(--nutui-golden-6);
+  // 金色按钮文字
+  --nutui-color-service-btn-text: var(--nutui-golden-7);
+
+  --nutui-color-service-stop-1: var(--nutui-golden-stop-1);
+  --nutui-color-service-stop-2: var(--nutui-golden-stop-2);
+
+  // success color 语义化
+  --nutui-color-success: var(--nutui-green-2); // 深背景
+  --nutui-color-success-light: var(--nutui-green-1); // 浅背景
+  --nutui-color-success-pressed: var(--nutui-green-3); // 文字
+
+  // danger color 语义化，待办，看上去目前非常的独立 TODO
+  --nutui-color-danger: var(--nutui-red-2); // 背景或文字
+  --nutui-color-danger-light: var(--nutui-red-1); // 背景
+
+  // info color 语义化
+  --nutui-color-info: var(--nutui-blue-2); // 背景或文字，链接色
+  --nutui-color-info-light: var(--nutui-blue-1); // 背景
+  --nutui-color-text-link: var(--nutui-blue-2);
+
+  // warning color 语义化
+  --nutui-color-warning: var(--nutui-yellow-2); // 深背景
+  --nutui-color-warning-light: var(--nutui-yellow-1); // 浅背景
+  --nutui-color-warning-pressed: var(--nutui-yellow-3); // 文字
+
+  // 文字颜色值 语义化
+  --nutui-color-content-gray-1: var(--nutui-gray-4);
+  --nutui-color-content-gray-2: var(--nutui-gray-5);
+  --nutui-color-content-gray-3: var(--nutui-gray-6);
+  --nutui-color-content-gray-4: var(--nutui-gray-7);
+  // 一级文字色（重要）
+  --nutui-color-title: var(--nutui-color-content-gray-4);
+  // 二级文字色或可操作用色（常规）
+  --nutui-color-text: var(--nutui-color-content-gray-3);
+  // 三级文字色（次要）
+  --nutui-color-text-help: var(--nutui-color-content-gray-2);
+  // 四级文字色（不可操作）
+  --nutui-color-text-disabled: var(--nutui-color-content-gray-1);
+
+  // 背景颜色值 语义化
+  --nutui-color-background-gray-1: var(--nutui-gray-1);
+  --nutui-color-background-gray-2: var(--nutui-gray-2);
+  --nutui-color-background-gray-3: var(--nutui-gray-3);
+  --nutui-color-background-gray-4: var(--nutui-gray-9);
+  // 页面背景
+  --nutui-color-background: var(--nutui-color-background-gray-3);
+  // 卡片背景
+  --nutui-color-background-overlay: var(--nutui-color-background-gray-1);
+  // 卡片内容器背景
+  --nutui-color-background-sunken: var(--nutui-color-background-gray-2);
+  // 组件背景，2025年新增
+  --nutui-color-background-component: var(--nutui-color-background-gray-4);
+
+  // 蒙层颜色值 语义化
+  --nutui-color-mask-gray-1: var(--nutui-black-2);
+  --nutui-color-mask-gray-2: var(--nutui-black-7);
+  --nutui-color-mask-gray-3: var(--nutui-black-10);
+  // 全部蒙层
+  --nutui-color-mask: var(--nutui-color-mask-gray-3);
+  // 局部弹层
+  --nutui-color-mask-part: var(--nutui-color-mask-gray-2);
+  // 容错弹层
+  --nutui-color-mask-fault-toleran: var(--nutui-color-mask-gray-1);
+
+  // 线颜色值 语义化
+  --nutui-color-line-gray-1: var(--nutui-black-3);
+  // 间隔线或容错线
+  --nutui-color-border: var(--nutui-color-line-gray-1);
+  // 组件边框禁用色
+  --nutui-color-border-disabled: var(--nutui-color-content-gray-1);
+
+  // 字体 ok
+  --nutui-font-size-8: 8px;
+  --nutui-font-size-9: 9px;
+  --nutui-font-size-10: 10px;
+  --nutui-font-size-11: 11px;
+  --nutui-font-size-12: 12px;
+  --nutui-font-size-13: 13px;
+  --nutui-font-size-14: 14px;
+  --nutui-font-size-15: 15px;
+  --nutui-font-size-16: 16px;
+  --nutui-font-size-17: 17px;
+  --nutui-font-size-18: 18px;
+  --nutui-font-size-19: 19px;
+  --nutui-font-size-20: 20px;
+  --nutui-font-size-21: 21px;
+  --nutui-font-size-22: 22px;
+  --nutui-font-size-23: 23px;
+  --nutui-font-size-24: 24px;
+  --nutui-font-size-25: 25px;
+  --nutui-font-size-26: 26px;
+
+  // 字号语义化
+  // 徽标文字
+  --nutui-font-size-xxxs: var(--nutui-font-size-9);
+  // 标签内文字
+  --nutui-font-size-xxs: var(--nutui-font-size-10);
+  // 导购或信息密集的次要内容、辅助信息
+  --nutui-font-size-xs: var(--nutui-font-size-11);
+  // 汉字：次要内容、辅助类信息 数字：羊角符号、小数点及角分
+  --nutui-font-size-s: var(--nutui-font-size-12);
+  // 标准内容、名称类关键信息
+  --nutui-font-size-base: var(--nutui-font-size-14);
+  // 汉字：楼层标题、卡片标题 数字：重复型价格，如搜推商卡
+  --nutui-font-size-l: var(--nutui-font-size-15);
+  --nutui-font-size-icon: var(--nutui-font-size-16);
+  // 汉字：页面标题、页面级最重要内容 数字：模块级主价格，如购物车、结算、底导
+  --nutui-font-size-xl: var(--nutui-font-size-18);
+  // 数字：页面级主价格，如商详、收银台
+  --nutui-font-size-xxl: var(--nutui-font-size-24);
+  // zanwu
+  --nutui-font-size-xxxl: var(--nutui-font-size-26);
+
+  // 字重 ok
+  // 次要内容
+  --nutui-font-weight-light: 300;
+  // 常规内容
+  --nutui-font-weight: 400;
+  // 500
+  --nutui-font-weight-medium: 500;
+  // 强化内容
+  --nutui-font-weight-bold: 600;
+
+  // 行高
+  --nutui-line-height-base: 1.5;
+
+  // 对齐方式
+  --nutui-text-align: left;
+
+  // space
+  --nutui-spacing-1: 1px;
+  --nutui-spacing-2: 2px;
+  --nutui-spacing-3: 3px;
+  --nutui-spacing-4: 4px;
+  --nutui-spacing-5: 5px;
+  --nutui-spacing-6: 6px;
+  --nutui-spacing-7: 7px;
+  --nutui-spacing-8: 8px;
+  --nutui-spacing-9: 9px;
+  --nutui-spacing-10: 10px;
+  --nutui-spacing-11: 11px;
+  --nutui-spacing-12: 12px;
+  --nutui-spacing-13: 13px;
+  --nutui-spacing-14: 14px;
+  --nutui-spacing-15: 15px;
+  --nutui-spacing-16: 16px;
+
+  // space 语义化
+  // 狭小空间内的紧密关联内容
+  --nutui-spacing-xxxs: var(--nutui-spacing-2);
+  // 导购：紧密关联内容；平台：紧密关联内容
+  --nutui-spacing-xxs: var(--nutui-spacing-4);
+  // 导购：常规关联内容；平台：替代常规关联内容
+  --nutui-spacing-xs: var(--nutui-spacing-6);
+  // 一行二、一行三卡片间距
+  --nutui-spacing-s: var(--nutui-spacing-7);
+  // 导购：弱关联内容；平台：常规关联内容
+  --nutui-spacing-base: var(--nutui-spacing-8);
+  // 一行四卡片间距
+  --nutui-spacing-l: var(--nutui-spacing-9);
+  // 导购：无关联内容；平台：弱关联内容
+  --nutui-spacing-xl: var(--nutui-spacing-12);
+  // 平台：无关联内容
+  --nutui-spacing-xxl: var(--nutui-spacing-16);
+
+  // radius ok
+  --nutui-radius-0: 0px;
+  --nutui-radius-1: 1px;
+  --nutui-radius-2: 2px;
+  --nutui-radius-3: 3px;
+  --nutui-radius-4: 4px;
+  --nutui-radius-5: 5px;
+  --nutui-radius-6: 6px;
+  --nutui-radius-7: 7px;
+  --nutui-radius-8: 8px;
+  --nutui-radius-9: 9px;
+  --nutui-radius-10: 10px;
+  --nutui-radius-11: 11px;
+  --nutui-radius-12: 12px;
+  --nutui-radius-13: 13px;
+  --nutui-radius-14: 14px;
+  --nutui-radius-15: 15px;
+  --nutui-radius-16: 16px;
+  --nutui-radius-17: 17px;
+  --nutui-radius-18: 18px;
+  --nutui-radius-19: 19px;
+  --nutui-radius-20: 20px;
+  --nutui-radius-21: 21px;
+  --nutui-radius-22: 22px;
+  --nutui-radius-23: 23px;
+  --nutui-radius-24: 24px;
+
+  // radius 语义化
+  // 内容描述型的详情页面通栏结构
+  --nutui-radius-xxxs: var(--nutui-radius-0);
+  // 标签
+  --nutui-radius-xxs: var(--nutui-radius-2);
+  // 单行高度20、24、28的组件
+  --nutui-radius-xs: var(--nutui-radius-4);
+  // 单行高度32、36的组件
+  --nutui-radius-s: var(--nutui-radius-6);
+  // 单行高度40及以上的组件
+  --nutui-radius-base: var(--nutui-radius-8);
+  // 入口型非通栏卡片
+  --nutui-radius-l: var(--nutui-radius-8);
+  // 结构分割、通栏卡片、临时操作层组件等场景
+  --nutui-radius-xl: var(--nutui-radius-12);
+  --nutui-radius-xxl: var(--nutui-radius-14); // zanwu
+  --nutui-radius-xxxl: var(--nutui-radius-16); // zanwu
+}