[官方文档](http://applets.baidu.com/bd-idg-clw-xiaoduzhushou/Paper/iov-ui%20%E7%BB%84%E4%BB%B6%E5%BA%93/%E4%BB%8B%E7%BB%8D/)
npm install iov-ui -S
使用时遵循百度小程序规范，先在 json 中引入，然后直接在 swan 中使用。
{
"navigationBarTitleText": "智能小程序官方组件",
"usingComponents": {
"iov-button": "iov-ui/lib/button"
}
}
<iov-button>确认</iov-button>
小程序目前分两个版本，支持换肤和自适应+换肤。支持自适应+换肤的版本号在 1.0.3 以上版本,仅支持换肤的是 0.0.100 以上版本。两个版本的主题文件也不一样。
/* 标准小程序主题配置 */
:root {
/* 系统颜色 */
/* 页面背景色 */
--colorBackground: rgb(11, 15, 22);
/* 表层色1 */
--colorSurface1: rgb(27, 32, 44);
/* 表层色2 */
--colorSurface2: rgb(43, 50, 67);
/* 表层色3 */
--colorSurface3: unset;
/* 功能色 */
/* 1级功能色 */
--colorPrimary1: linear-gradient(0deg, rgb(190, 71, 48), rgb(186, 100, 20));
/* 1级功能色2, 主题色非渐变 */
--colorPrimary2: rgb(190, 71, 48);
/* 1级功能色3 */
--colorPrimary3: rgba(0, 128, 145, 0.3);
/* 2级功能色1 */
--colorSecondary1: rgb(60, 67, 90);
/* 2级功能色2 */
--colorSecondary2: rgba(7, 13, 30, 0.15);
/* 2级功能色3 */
--colorSecondary3: rgb(54, 60, 78);
/* 3级功能色 */
--colorTertiary1: rgba(255, 255, 255, 0.7);
/* 常用在边框，分割线颜色 */
--colorTertiary2: rgba(227, 239, 255, 0.1);
/* 状态色 */
/* 成功色 */
--colorSucceed: rgb(0, 249, 208);
/* 警戒色 */
--colorWarning: rgb(145, 50, 50);
/* 强调色 */
--colorImportant: rgb(253, 142, 36);
/* 通用字体颜色 */
--colorTextNormal: rgb(255, 255, 255);
/* 辅助字体颜色 */
--colorTextCaptioon: rgba(255, 255, 255, 0.5);
/* 高亮文字颜色---- true */
--icolorTextHighlight: rgb(35, 180, 209);
/* 链接文字颜色---- 外卖、酒店、洗车、订座、加油 */
--icolorTextLink: rgb(35, 95, 209);
/* 成功状态颜色---- 景点、酒店、电影、停车、订座、加油 */
--icolorTextSucceed: rgb(47, 235, 164);
/* 警告状态颜色---- 订座、停车、电影、酒店、外卖、景点、加油*/
--icolorTextWarning: rgb(255, 81, 84);
/*滚动条滑块颜色*/
--colorScrollRailNor: rgba(82, 88, 104, 1);
/*滚动条轨道颜色*/
--colorScrollGapNor: unset;
/*滚动条滑块颜色*/
--borderScrollWidth: 0.04rem;
/*滚动条轨道颜色*/
--borderScrollRadius: 0.04rem;
/* 用于运营类等一级大标题 */
--ifontsizeH1: 0.56rem;
/* 运营类二级大标题 */
--ifontsizeH2: 0.48rem;
/* 用于常规标题如导航、标题栏 */
--ifontsizeTitle1: 0.4rem;
/* 常规标题2 */
--ifontsizeTitle2: 0.36rem;
/* 操作类标题 */
--ifontsizeOperation: 0.32rem;
/* 一级内容、操控类（Tab、弹窗标题、列表标题等 */
--ifontsizeC1: 0.36rem;
/* 二级内容（二级导航、按钮） */
--ifontsizeC2: 0.32rem;
/* 三级级内容 */
--ifontsizeC3: 0.28rem;
/* 辅助类文案,内容（列表）,比如输入出错提示 */
--ifontsizeCaption1: 0.24rem;
/* 仅用于标签（谨慎使用） */
--ifontsizeCaption2: 0.2rem;
/* 异形屏参数 */
/* 异形屏，屏幕上方弧线垂直方向大小 */
--screenArcTop: 0px;
/* 异形屏，屏幕右方弧线水平方向大小 */
--screenArcRight: 595px;
/* 异形屏，屏幕下方弧线垂直方向大小 */
--screenArcBottom: 0px;
/* 异形屏，屏幕左方弧线水平方向大小 */
--screenArcLeft: 0px;
/*textfield 颜色*/
/*textfield 普通*/
--colorTextfieldBgNor: rgba(255, 255, 255, 0.1);
--colorTextfieldTextNor: rgb(99, 106, 123);
/* --colorTextfieldBgNor: ; 光标颜色 */
--colorTextfieldBorderNor: rgba(255, 255, 255, 0.5);
--textfieldBorder: 0.02rem solid var(--colorTextfieldBorderNor);
--textfieldBorderBottom: 0.02rem solid var(--colorTextfieldBorderNor);
/*textfield 输入状态*/
--colorTextfieldBgInput: rgba(7, 13, 30, 0.15);
--colorTextfieldTextInput: rgb(255, 255, 255);
--colorTextfieldCsr: rgb(229, 181, 134);
--colorTextfieldInput: rgb(53, 225, 255);
/*textfield Pressed状态*/
--colorTextfieldBgPre: unset;
--colorTextfieldTextPre: rgba(255, 255, 255, 0.5);
--colorTextfieldBorderPre: rgba(255, 255, 255, 0.5);
/*textfield Error状态*/
--colorTextfieldTexErr: rgb(255, 255, 255);
--colorTextfieldBgError: rgba(7, 13, 30, 0.15);
--colorTextfieldTextError: rgb(255, 255, 255);
--colorTextfieldCsr: rgb(229, 181, 134);
--colorTextfieldBorderError: rgb(145, 50, 50);
/*textfield Disable状态*/
--colorTextfieldTexDis: rgba(255, 255, 255, 0.3);
--colorTextfieldBgDis: rgba(29, 34, 50, 0.5);
--colorTextfieldTextDis: rgb(99, 106, 123);
--colorTextfieldCsr: rgb(229, 181, 134);
--colorTextfieldBorderDis: rgba(255, 255, 255, 0.5);
/* tag 组件颜色 */
/* tag Succed */
--colorTagSucceedBg: unset;
--colorTagSucceedBorder: rgb(121, 237, 220);
--colorTagSucceedText: rgb(121, 237, 220);
/* tag Warning */
--colorTagWarningBg: unset;
--colorTagWarningBorder: rgb(238, 65, 65);
--colorTagWarningText: rgb(238, 65, 65);
/* tag Hint */
--colorTagHintBg: unset;
--colorTagHintBorder: rgb(205, 220, 255);
--colorTagHintText: rgb(205, 220, 255);
/* tag Highlight */
--colorTagHighlightBg: unset;
--colorTagHighlightBorder: rgb(230, 182, 131);
--colorTagHighlightText: rgb(230, 182, 131);
/* button 按钮颜色*/
/* Real 普通状态 */
--colorRealbtnBgNor: linear-gradient(180deg, rgb(35, 180, 209), rgb(0, 91, 102));
--colorRealbtnBorderNor: unset;
--colorRealbtnTextNor: rgb(255, 255, 255);
/* Real 点击状态*/
--colorRealbtnBgPre: linear-gradient(0deg, rgb(35, 180, 209), rgb(0, 91, 102));
--colorRealbtnBorderPre: unset;
--colorRealbtnTextPre: rgb(255, 255, 255);
/* Real 禁用状态*/
--colorRealbtnBgDis: linear-gradient(0deg, rgba(35, 180, 209, 0.5), rgba(0, 91, 102, 0.5));
--colorRealbtnBorderDis: unset;
--colorRealbtnTextDis: rgba(255, 255, 255, 0.5);
/* Ghost btn 普通状态 */
--colorGhostbtnBgNor: linear-gradient(0deg, rgba(7, 13, 30, 0.15), rgba(7, 13, 30, 0.15));
--colorGhostbtnBorderNor: rgb(83, 90, 113);
--colorGhostbtnTextNor: rgb(255, 255, 255);
/* Ghost 点击状态*/
--colorGhostbtnBgPre: linear-gradient(0deg, rgba(7, 13, 30, 0.15), rgba(7, 13, 30, 0.15));
--colorGhostbtnBorderPre: rgb(83, 90, 113);
--colorGhostbtnTextPre: rgb(35, 180, 209);
/* Ghost 禁用状态*/
--colorGhostbtnBgDis: rgba(7, 13, 30, 0.05);
--colorGhostbtnBorderDis: rgba(83, 90, 113, 0.5);
--colorGhostbtnTextDis: rgba(255, 255, 255, 0.5);
/* Flat btn 普通状态 */
--colorFlatTextbtnBgNor: transparent;
--colorFlatTextbtnBorderNor: transparent;
--colorFlatTextbtnNor: rgb(35, 180, 209);
/* Flat 点击状态*/
--colorFlatTextbtnBgPre: rgba(255, 255, 255, 0.15);
--colorFlatTextbtnBorderPre: transparent;
--colorFlatTextbtnPre: rgb(35, 180, 209);
/* Flat 禁用状态*/
--colorFlatTextbtnBgDis: transparent;
--colorFlatTextbtnBorderDis: transparent;
--colorFlatTextbtnDis: rgba(35, 180, 209, 0.5);
/* ui 未提供样式*/
--ibtnSmallLinehight: 0.6rem;
--ibtnRealBgc: unset;
--ibtnRealBorderRadius: 0.04rem;
--ibtnRealBorderWidth: 0.02rem;
--ibtnGhostBgi: unset;
/* --ibtnGhostBorderRadius: 4px; */
--ibtnGhostBorderWidth: 0.02rem;
/* --ibtnFlatBorderRadius: 4px; */
--ibtnFlatBorderWidth: 0.02rem;
/* slider变量 */
/* normal*/
--colorSliderThumbNor: linear-gradient(0deg, rgb(214, 249, 255), rgb(174, 244, 255));
--colorSliderThumbBorderNor: unset;
--colorSliderRailNor: linear-gradient(90deg, rgb(35, 180, 209), rgb(0, 91, 102));
--colorSliderGapNor: rgba(255, 255, 255, 0.3);
/* Pressed */
--colorSliderThumbPre: linear-gradient(0deg, rgb(214, 249, 255), rgb(174, 244, 255));
--colorSliderThumbBorderPre: unset;
--colorSliderRailPre: linear-gradient(0deg, rgb(214, 249, 255), rgb(174, 244, 255));
/* Disable*/
--colorSliderThumbDis: linear-gradient(0deg, rgba(78, 91, 93, 1), rgba(51, 66, 69, 1));
--colorSliderRailDis: linear-gradient(0deg, rgba(214, 249, 255, 0.24), rgba(174, 244, 255, 0.24));
--colorSliderGapDis: rgba(100, 103, 113, 0.3);
--iSliderBlockSize: 0.324rem;
--isliderBlockMarginHalfSize: -0.162rem;
--isliderBlockHalfSize: 0.162rem;
--isliderBlockShadow: 0.05rem 0 0.1rem 0 rgba(0, 0, 0, 0.5);
--isliderLineHeight: 0.06rem;
--isliderTapAreaHeight: 0.72rem;
--isliderBlockActiveShadowOpatity: 0.3;
--isliderBlockActiveShadowSize: 0.72rem;
--isliderBlockMarginSize: -0.2rem;
/* searchbar 颜色*/
/* Normal */
--colorSearchbarBgNor: rgba(255, 255, 255, 0.1);
--colorSearchbarBorderNor: rgba(255, 255, 255, 0.5);
--colorSearchbarTextNor: rgb(99, 106, 123);
/* Pressed */
--colorSearchbarBgPre: unset;
--colorSearchbarBorderPre: unset;
--colorSearchbarTextPre: unset;
/* Inputting */
--colorSearchbarBgInputting: rgba(255, 255, 255, 0.1);
--colorSearchbarCsr: rgb(35, 180, 209);
--colorSearchbarBorderInputting: rgba(191, 206, 239, 1);
--colorSearchbarInputting: rgba(255, 255, 255, 1);
/* radio */
/* 选中状态 */
--colorRadioSelThumbBgNor: linear-gradient(0deg, rgb(214, 249, 255), rgb(174, 244, 255));
--colorRadioSelThumbBorderNor: unset;
--colorRadioSelBaseBgNor: rgb(23, 102, 114);
--colorRadioSelBaseBorderNor: rgb(35, 180, 209);
/* 选中Pressed状态 */
--colorRadioSelThumbBgPre: unset;
--colorRadioSelThumbBorderPre: unset;
--colorRadioSelBaseBgPre: unset;
--colorRadioUnselBaseBorderPre: unset;
/* 未选中状态 */
--colorRadioUnselThumbBgNor: unset;
--colorRadioUnselThumbBorderNor: unset;
--colorRadioUnselBaseBgNor: rgb(48, 54, 69);
--colorRadioUnselBaseBorderNor: rgb(96, 109, 138);
/* 选中禁用状态 */
--colorRadioSelThumbBgDis: linear-gradient(0deg, rgba(214, 249, 255, 0.5), rgba(174, 5244, 255, 0.5));
--colorRadioSelThumbBorderDis: unset;
--colorRadioSelBaseBgDis: rgbargb(23, 102, 114, 0.5);
--colorRadioUnselBaseBorderDis: linear-gradient(0deg, rgba(120, 137, 173, 0.5), rgba(96, 109, 138, 0.5));
/* 未选中禁用状态 */
--colorRadioUnselThumbBgDis: unset;
--colorRadioUnselThumbBorderDis: unset;
--colorRadioUnselBaseBgDis: rgba(16, 18, 25, 0.5);
--colorRadioUnselBaseBorderDis: unset;
/* Checkbox */
/* 选中状态 */
--colorCheckboxSelThumbNor: rgba(255, 255, 255, 1);
--colorCheckboxSelBaseBgNor: rgba(48, 54, 69, 1);
--colorCheckboxSelBaseBorderNor: unset;
/* 选中Pressed状态 */
--colorCheckboxSelThumbPre: unset;
--colorCheckboxSelBaseBgPre: unset;
--colorCheckboxSelBaseBorderPre: unset;
/* 未选中状态 */
--colorCheckboxUnselThumbNor: linear-gradient(0deg, rgba(214, 249, 255, 1), rgba(174, 244, 255, 1));
--colorCheckboxUnselBaseBgNor: rgba(23, 102, 114, 1);
--colorCheckboxUnselBaseBorderNor: linear-gradient(0deg, rgba(35, 180, 209, 1), rgba(0, 91, 102, 1));
/* 未选中Pressed状态 */
--colorCheckboxUnselThumbPre: unset;
--colorCheckboxUnselBaseBgPre: unset;
--colorCheckboxUnselBaseBorderPre: unset;
/* 选中禁用状态 */
--colorCheckboxSelThumbDis: rgba(255, 255, 255, 0.5);
--colorCheckboxSelBaseBgDis: rgba(23, 102, 114, 0.5);
--colorCheckboxSelBaseBorderDis: linear-gradient(0deg, rgba(214, 249, 255, 0.5), rgba(174, 244, 255, 0.5));
/* 未选中禁用状态 */
--colorCheckboxUnselThumbDis: linear-gradient(0deg, rgba(214, 249, 255, 0.5), rgba(174, 244, 255, 0.5));
--colorCheckboxUnselBaseBgDis: rgba(48, 54, 69, 0.5);
--colorCheckboxUnselBaseBorderDis: linear-gradient(0deg, rgba(35, 180, 209, 0.5), rgba(0, 91, 102, 0.5));
/* loadingbar变量 */
--colorProgIndeterminateRail: rgba(255, 255, 255, 0.3);
--colorProgDeterminateRail: rgba(255, 255, 255, 0.3);
--colorProgIndeterminateGap: linear-gradient(-90deg, rgb(35, 180, 209), rgb(0, 91, 102));
--colorProgDeterminateGap: linear-gradient(-90deg, rgb(35, 180, 209), rgb(0, 91, 102));
/* loading circle */
--colorProgCircularRail: rgb(255, 255, 255);
--colorProgCircularGap: rgba(255, 255, 255, 0.3);
/* 纵向tabs变量 */
--colorTabsVerticalSelNor: rgb(35, 180, 209);
--colorTabsVerticalSelBaseBgNor: linear-gradient(90deg, rgba(53, 229, 255, 0.15), rgba(53, 229, 255, 0));
--colorTabsVerticalSelBaseBorderNor: unset;
--colorTabsVerticalSelTextNor: rgb(255, 255, 255);
--colorTabsVerticalUnselTextNor: rgba(255, 255, 255, 0.5);
/* Vertical Pressed 状态下 */
--colorTabsVerticalSelTextPre: rgb(35, 180, 209);
--colorTabsVerticalUnselPre: rgb(35, 180, 209);
--colorTabsVerticalUnselBaseBgPre: linear-gradient(90deg, rgba(53, 229, 255, 0.15), rgba(53, 229, 255, 0));
--colorTabsVerticalUnselBaseBorderPre: unset;
--colorTabsVerticalUnselBasePre: unset;
--colorTabsVerticalUnselTextPre: rgba(255, 255, 255, 1);
/* Horizontal Pressed 状态下 */
--colorTabsHorizontalSelTextPre: rgb(30, 180, 209);
/* Horizontal 未选中Pressed 状态下 */
--colorTabsHorizontalUnselBasePre: unset;
--colorTabsHorizontalUnselTextPre: rgba(255, 255, 255);
--colorTabsHorizontalUnselBaseBgPre: unset;
--colorTabsHorizontalUnselBaseBorderPre: rgb(30, 180, 209);
/* Horizontal normal */
--colorTabsHorizontalSelNor: unset;
--colorTabsHorizontalSelBaseBgNor: linear-gradient(90deg, rgba(53, 229, 255, 0.15), rgba(53, 229, 255, 0));
--colorTabsHorizontalSelBaseBgDis: linear-gradient(90deg, rgba(53, 229, 255, 0.1), rgba(53, 229, 255, 0));
--colorTabsHorizontalSelBaseBorderNor: unset;
/* 横向tabs变量 */
--colorTabsHorizontalSelTextNor: rgb(30, 180, 209);
--colorTabsHorizontalUnselTextNor: rgba(255, 255, 255, 0.5);
/* tabs禁用状态变量 */
--colorTabsVerticalSelDis: rgba(35, 180, 209, 0.3);
--colorTabsVerticalSelBaseBgDis: linear-gradient(90deg, rgba(53, 229, 255, 0.1), rgba(53, 229, 255, 0));
--colorTabsVerticalSelBaseBorderDis: unset;
--colorTabsVerticalSelBaseDis: unset;
--colorTabsVerticalUnselDis: rgba(35, 180, 209, 24);
--colorTabsVerticalUnselBaseDis: unset;
--colorTabsVerticalUnselBaseBgDis: unset;
--colorTabsVerticalUnselBaseBorderDis: unset;
--colorTabsVerticalSelTextDis: rgba(35, 180, 209, 0.24);
--colorTabsVerticalUnselTextDis: rgba(255, 255, 255, 0.24);
--colorTabsHorizontalSelTextDis: rgba(30, 180, 209, 0.24);
--colorTabsHorizontalUnselTextDis: rgba(255, 255, 255, 0.24);
--colorTabsHorizontalelBaseBgDis: linear-gradient(90deg, rgba(53, 229, 255, 0.1), rgba(53, 229, 255, 0));
--colorTabsHorizontalelBaseBorderDis: unset;
--colorTabsHorizontalUnselDis: rgba(35, 180, 209, 0.24);
--colorTabsHorizontalUnselBaseBgDis: unset;
--colorTabsHorizontalUnselBaseBorderDis: unset;
/* ui未提供变量 */
--itabsVerticalWidth: 0.02rem;
--itabsVerticalHeight: 100%;
--itabsVerticalTop: 0;
/* switch选中状态变量 */
--colorSwitchOnBaseBgNor: rgba(48, 54, 69, 1);
--colorSwitchOnThumbBgNor: linear-gradient(0deg, rgb(214, 249, 255), rgb(174, 244, 255));
--colorSwitchOnBaseBorderNor: linear-gradient(0deg, rgb(35, 180, 209), rgb(0, 91, 102));
--colorSwitchOnThumbBorderNor: unset;
/* switch选中Pressed状态变量 */
--colorSwitchOnThumbBgPre: unset;
--colorSwitchOnThumbBorderPre: unset;
--colorSwitchOnBaseBgPre: unset;
--colorSwitchOnBaseBorderPre: unset;
/* switch未选中状态变量 */
--colorSwitchOffThumbBorderNor: unset;
--colorSwitchOffBaseBorderNor: linear-gradient(0deg, rgb(35, 180, 209), rgb(0, 91, 102));
/* switch未选中Pressed状态变量 */
--colorSwitchOffThumbBgPre: unset;
--colorSwitchOffThumbBorderPre: unset;
--colorSwitchOffBaseBgPre: unset;
--colorSwitchOffBaseBorderPre: unset;
--colorSwitchOffBaseBgNor: rgba(23, 102, 114, 1);
--colorSwitchOffThumbBgNor: linear-gradient(0deg, rgb(228, 231, 238), rgb(201, 207, 222));
/* switch禁用状态变量 */
--colorSwitchOnThumbBgDis: linear-gradient(0deg, rgba(214, 249, 255, 0.5), rgba(174, 244, 255, 0.5));
--colorSwitchOnBaseBgDis: rgba(23, 102, 114, 0.3);
--colorSwitchOnBaseBorderDis: linear-gradient(0deg, rgba(35, 180, 209, 0.5), rgba(0, 91, 102, 0.5));
--colorSwitchOffThumbBgDis: linear-gradient(0deg, rgba(228, 231, 238, 0.5), rgba(201, 207, 222, 0.5));
--colorSwitchOffBaseBgDis: rgba(48, 54, 69, 0.5);
--colorSwitchOffThumbBorderDis: unset;
--colorSwitchOffBaseBorderDis: linear-gradient(0deg, rgba(120, 137, 173, 0.5), rgba(96, 109, 138, 0.5));
/* ui未提供变量 */
--iswitchTrackShadow: 0 0.02rem 0.12rem 0 rgba(0, 0, 0, 0.1);
--iswitchOnTrackBorderColor: #fff7ee80;
--iswitchOffTrackBorderColor: #9cb3db80;
/* 弹窗 Normal */
--colorDialogBg: rgb(43, 50, 67);
--colorDialogBorder: rgba(177, 206, 49, 1);
--colorDialogTiltle: rgba(255, 255, 255, 1);
--colorDialogText: rgba(255, 255, 255, 1);
--colorDiaologBtnBgNor: linear-gradient(0deg, rgb(35, 180, 209), rgb(0, 91, 102));
--colorDiaologBtnTextNor: rgba(255, 255, 255, 1);
--colorDialogBtnBorderNor: unset;
--positionDialogTiltle: center;
--highlightDialogBtn: linear-gradient(0deg, rgb(35, 180, 209), rgb(0, 91, 102));
--colorDiaologBtnBorderNor: unset;
/* 弹窗 Pressed */
--colorDiaologBtnBgPre: linear-gradient(0deg, rgb(35, 180, 209), rgb(0, 91, 102));
--colorDialogBtnBorderPre: unset;
--colorDiaologBtnTextPre: rgba(255, 255, 255, 1);
/* 弹窗 Disable */
--colorDiaologBtnBgDis: linear-gradient(0deg, rgba(35, 180, 209, 0.5), rgba(0, 91, 102, 0.5));
--colorDiaologBtnBorderDis: unset;
--colorDiaologBtnTextDis: rgba(255, 255, 255, 0.3);
/* 弹窗 对齐方式 */
/* 垂直对齐方式 */
--diaologAlignItems: center;
/* 水平对齐方式 */
--diaologJustifyContent: center;
/* 筛选菜单 Normal */
/*筛选菜单圆角*/
--colorMenuRadius: 0.08rem;
--colorMenuUnselBg: rgb(57, 64, 75);
--colorMenuSubUnselBg: rgb(45, 54, 69);
--colorMenuTextUnselNor: rgba(255, 255, 255, 1);
--colorMenuTextSubUnselNor: rgba(255, 255, 255, 0.5);
--colorMenuSelBg: linear-gradient(90deg, rgb(57, 64, 75), rgb(45, 54, 69));
--colorMenuTextSelNor: rgb(35, 180, 209);
--colorMenuSubSelBg: rgb(45, 54, 69);
--colorMenuTextSubSelNor: rgb(35, 180, 209);
/* 筛选菜单 pressed */
--colorMenuTextUnselPre: unset;
--colorMenuTextSubUnselPre: rgba(255, 255, 255, 0.5);
--colorMenuTextSelPre: rgb(35, 180, 209);
--colorMenuTextSubSelPre: rgb(35, 180, 209);
/* 筛选菜单 Disable */
--colorMenuTextUnselDis: unset;
--colorMenuTextSubUnselDis: unset;
--colorMenuTextSelDis: unset;
--colorMenuTextSubSelDis: unset;
/* tag-select 样式 */
/* 边框大小 */
--borderOptiontagSel: 0.02rem;
--cornerOptiontagSel: 0.04rem;
/* 选中状态背景 */
--colorOptiontagSelBgNor: rgba(23, 102, 114, 0.3);
/* 选中状态边框 */
--colorOptiontagSelBorderNor: linearfcolorOptiontagSelBorderNor-gradient(0deg, rgb(35, 180, 209), rgba(0, 91, 102));
/* 选中状态文字 */
--colorOptiontagSelTextNor: rgba(35, 180, 209, 1);
/* 选中Pressed状态背景 */
--colorOptiontagSelBgPre: rgba(23, 102, 114, 0.3);
--colorOptiontagSelBorderPre: linear-gradient(0deg, rgb(35, 180, 209), rgba(0, 91, 102));
--colorOptiontagSelTextPre: rgba(35, 180, 209, 1);
/* 禁用状态 */
/* 背景 */
--colorOptiontagSelBgDis: rgba(23, 102, 114, 0.2);
/* 边框 */
--colorOptiontagSelBorderDis: linear-gradient(0deg, rgba(35, 180, 209, 0.5), rgba(0, 91, 102, 0.5));
/* 文字 */
--colorOptiontagSelTextDis: rgb(35, 180, 209);
/* 类型1 */
/* 没有选中状态背景 */
--colorOptiontagUnselBgNor: rgba(255, 255, 255, 0.1);
/* 没有选中状态边框 */
--colorOptiontagUnselBorderNor: transparent;
/* 没有选中状态文字 */
--colorOptiontagUnselTextNor: rgba(255, 255, 255, 1);
/* 没有选中Pressed状态 */
--colorOptiontagUnselBgPre: rgba(255, 255, 255, 0.1);
--colorOptiontagUnselBorderPre: unset;
--colorOptiontagUnselTextPre: unset;
/* 禁用状态 */
/* 背景 */
--colorOptiontagUnsel1BgDis: rgba(14, 18, 33, 0.1);
/* 边框 */
--colorOptiontagUnsel1BorderDis: rgba(132, 156, 219, 0.1);
/* 文字 */
--colorOptiontagUnsel1TextDis: rgba(255, 255, 255, 0.3);
/* 类型2 */
/* 没有选中状态背景 */
--colorOptiontagUnsel2BgNor: rgba(255, 255, 255, 0.1);
/* 没有选中状态边框 */
--colorOptiontagUnsel2BorderNor: transparent;
/* 没有选中状态文字 */
--colorOptiontagUnsel2TextNor: rgba(255, 255, 255, 1);
/* 禁用状态 */
/* 背景 */
--colorOptiontagUnsel2BgDis: rgba(14, 18, 33, 0.1);
/* 边框 */
--colorOptiontagUnsel2BorderDis: transparent;
/* 文字 */
--colorOptiontagUnsel2TextDis: rgba(255, 255, 255, 0.3);
/* 日历颜色 */
/* 标题对齐方式 */
--colorCalendarTitAlign: center;
/* 选中日期颜色 */
--colorCalendarSelectBg: linear-gradient(180deg, #596580, #4c5670);
/* 选中日期边框颜色 */
--colorCalendarSelectBor: transparent;
/* 选中日期中间态颜色 */
--colorCalendarSelectMidBg: rgba(73, 83, 109, 0.6);
/* 日期弹窗的宽度 */
--cornerCalendarWidth: 10.1rem;
/* 选择日期的圆角 */
--cornerCalendarBorRad: 0.12rem;
/* 图片 */
--imgNoSrcBgColor: linear-gradient(180deg, #535969 0%, #434a5d 100%);
--imgNoSrcTextColor: rgba(255, 255, 255, 0.3);
--imgNoSrcBorRail: 0.08rem;
/* btn 圆角 */
--cornerBtn: 0.04rem;
/* btn 描边 */
--borderRealbtn: 0;
--borderGhostbtn: 0.02rem;
/* Slider 圆角 */
--borderSliderThumb: unset;
--borderSliderRail: unset;
--borderSliderRail: unset;
--cornerSliderThumb: 1rem;
--cornerSliderRail: 1rem;
--cornerSliderGap: 1rem;
/* Progress 圆角 */
--borderProgRail: unset;
--borderProgGap: unset;
--cornerProgRail: 1rem;
--cornerProgGap: 1rem;
/* Tag 圆角 */
--cornerTag: 0.04rem;
/* Switch 圆角 */
--cornerSwitchThumb: 0.2rem;
--cornerSwitchBase: 0.2rem;
--borderSwitchThumb: 0;
--borderSwitchBase: 0;
/* Radio 圆角 */
--borderRadioThumb: unset;
--borderRadiolBase: unset;
--cornerRadioThumb: 0.1rem;
--cornerRadioBase: 0.24rem;
/* Checkbox 圆角 */
--cornerCheckboxThumb: 0;
--cornerCheckboxBase: 0.04rem;
/* Textfield 圆角 */
--borderTextfieldBg: 0.02rem;
--borderTextfield: 1px;
--cornerTextfield: 0.1rem;
--cornerTextfield: 0.1rem;
--cornerTextfieldBg: 0.08rem;
/* SearchBars */
--cornerSearchbar: 0.08rem;
--borderSearchbar: 0.02rem;
/* Optiontag 圆角 */
--cornerOptiontag: unset;
/* 所有弹窗的圆角 圆角 */
--cornerDialog: 0.08rem;
--borderDialog: 0;
/* Menu 圆角 */
--cornerMenu: unset;
--borderMenu: unset;
/* 导航 圆角 */
--borderTabsVerticalSel: unset;
--borderTabsVerticalSelBase: unset;
--borderTabsHorizontalSel: unset;
--borderTabsHorizontalSelBase: unset;
--cornerTabsVerticalSel: unset;
--cornerTabsVerticalSelBase: unset;
--cornerTabsHorizontalSel: unset;
--cornerTabsHorizontalSelBase: unset;
}
.iov-text-h1 {
font-size: var(--ifontsizeH1);
font-weight: 800;
}
.iov-text-h2 {
font-size: var(--ifontsizeH2);
font-weight: 800;
}
.iov-text-title {
font-size: var(--ifontsizeTitle);
font-weight: 400;
}
.iov-text-operation {
font-size: var(--ifontsizeC1);
font-weight: 400;
}
.iov-text-c1 {
font-size: var(--ifontsizeC1);
font-weight: 400;
}
.iov-text-c2 {
font-size: var(--ifontsizeC2);
font-weight: 200;
}
.iov-text-caption {
font-size: var(--ifontsizeCaption);
font-weight: 200;
}
.modal-content-footer {
height: 0.8rem;
display: flex;
justify-content: flex-start;
margin-bottom: 0.4rem;
margin-top: 0.18rem;
}
.modal-content-footer-item {
flex: 1;
max-width: 3rem;
margin-right: 0.4rem;
text-align: center;
line-height: 0.8rem;
display: inline-block;
font-size: var(--ifontsizeC2);
text-overflow: ellipsis;
white-space: nowrap;
box-sizing: content-box;
color: var(--colorRealbtnTextNor);
background: var(--colorRealbtnBgNor);
box-shadow: 0 0.02rem 0.12rem 0 rgba(0, 0, 0, 0.1);
border-radius: var(--cornerBtn);
border: var(--borderRealbtn) solid var(--colorRealbtnBorderNor);
}
.modal-content-footer-item:active {
color: var(--colorRealbtnTextPre);
background: var(--colorRealbtnBgPre);
border-color: var(--colorRealbtnBorderPre);
}
.modal-content-footer-item:nth-child(2),
.modal-content-footer-item:last-child {
color: var(--colorGhostbtnTextNor);
background: var(--colorGhostbtnBgNor);
border-color: var(--colorGhostbtnBorderNor);
}
.modal-content-footer-item:nth-child(2):active,
.modal-content-footer-item:last-child:active {
color: var(--colorGhostbtnTextPre);
background: var(--colorGhostbtnBgPre);
border-color: var(--colorGhostbtnBorderPre);
}
::-webkit-scrollbar {
width: var(--borderScrollWidth);
background: var(--colorScrollGapNor);
border-radius: var(--borderScrollRadius);
}
/*定义滑块 内阴影+圆角*/
::-webkit-scrollbar-thumb {
width: var(--borderScrollWidth);
border-radius: var(--borderScrollRadius);
background: var(--colorScrollRailNor);
}
html {
font-size: 100px;
background: var(--colorBg);
}
body {
font-size: var(--ifontsizeCaption1);
}
仅支持换肤的版本 theme.css 文件
/* 主题配置 */
:root {
/* 系统颜色 */
/* 页面背景色 */
--colorBg: unset;
/* 表层色1 */
--colorSurface1: linear-gradient(0deg, rgba(19, 26, 40, 0.8), rgba(118, 88, 70, 0.8));
/* 表层色2 */
--colorSurface2: linear-gradient(0deg, rgba(70, 75, 96, 1), rgba(42, 47, 66, 1));
/* 表层色3 */
--colorSurface3: rgb(174, 201, 255, 0.1);
/* 功能色 */
/* 1级功能色 */
--colorPrimary: linear-gradient(0deg, rgb(255, 225, 164), rgb(212, 161, 120));
/* 1级功能色2, 主题色非渐变 */
--colorPrimary2: rgb(229, 181, 134);
/* 2级功能色1 */
--colorSecondary1: linear-gradient(0deg, rgb(54, 60, 78), rgb(39, 45, 59));
/* 2级功能色2 */
--colorSecondary2: rgba(7, 13, 30, 0.15);
/* 3级功能色 */
--colorTertiary1: rgb(205, 220, 255);
/* 常用在边框，分割线颜色 */
--colorTertiary2: rgba(70, 78, 101, 0.15);
/* 状态色 */
/* 成功色 */
--colorSucceed: rgb(227, 173, 121);
/* 警戒色 */
--colorWarning: rgb(52, 52, 52);
/* 强调色 */
--colorImportant: unset;
/* 通用字体颜色 */
--colorTextNormal: rgb(255, 255, 255);
/* 辅助字体颜色 */
--colorTextCaptioon: rgba(255, 255, 255, 0.5);
/* 高亮文字颜色---- true */
--icolorTextHighlight: rgb(229, 181, 134);
/* 链接文字颜色---- 外卖、酒店、洗车、订座、加油 */
--icolorTextLink: rgb(229, 181, 134);
/* 成功状态颜色---- 景点、酒店、电影、停车、订座、加油 */
--icolorTextSucceed: rgb(121, 237, 220);
/* 警告状态颜色---- 订座、停车、电影、酒店、外卖、景点、加油*/
--icolorTextWarning: rgb(238, 65, 65);
/*滚动条滑块颜色*/
--colorScrollRailNor: rgba(82, 88, 104, 1);
/*滚动条轨道颜色*/
--colorScrollGapNor: unset;
/*滚动条滑块颜色*/
--borderScrollWidth: 0.04rem;
/*滚动条轨道颜色*/
--borderScrollRadius: 0.04rem;
/* 用于运营类等一级大标题 */
--ifontsizeH1: 0.56rem;
/* 运营类二级大标题 */
--ifontsizeH2: 0.48rem;
/* 用于常规标题如导航、标题栏 */
--ifontsizeTitle1: 0.4rem;
/* 常规标题2 */
--ifontsizeTitle2: 0.36rem;
/* 操作类标题 */
--ifontsizeOperation: 0.32rem;
/* 一级内容、操控类（Tab、弹窗标题、列表标题等 */
--ifontsizeC1: 0.32rem;
/* 二级内容（二级导航、按钮） */
--ifontsizeC2: 0.28rem;
/* 辅助类文案,内容（列表）,比如输入出错提示 */
--ifontsizeCaption1: 0.24rem;
/* 仅用于标签（谨慎使用） */
--ifontsizeCaption2: 0.2rem;
/* 异形屏参数 */
/* 异形屏，屏幕上方弧线垂直方向大小 */
--screenArcTop: 0px;
/* 异形屏，屏幕右方弧线水平方向大小 */
--screenArcRight: 595px;
/* 异形屏，屏幕下方弧线垂直方向大小 */
--screenArcBottom: 0px;
/* 异形屏，屏幕左方弧线水平方向大小 */
--screenArcLeft: 0px;
/*textfield 颜色*/
/*textfield 普通*/
--colorTextfieldBgNor: rgba(7, 13, 30, 0.15);
--colorTextfieldTextNor: rgb(99, 106, 123);
/* --colorTextfieldBgNor: ; 光标颜色 */
--colorTextfieldBorderNor: rgba(99, 111, 138, 0.5);
--textfieldBorder: 0.02rem solid var(--colorTextfieldBorderNor);
--textfieldBorderBottom: 0.02rem solid var(--colorTextfieldBorderNor);
--textfieldBorderError: 0.02rem solid var(--colorTextfieldBorderError);
/*textfield 输入状态*/
--colorTextfieldBgInput: rgba(7, 13, 30, 0.15);
--colorTextfieldTextInput: rgb(255, 255, 255);
--colorTextfieldCsr: rgb(229, 181, 134);
--colorTextfieldInput: rgb(191, 206, 239);
/*textfield Pressed状态*/
--colorTextfieldBgPre: unset;
--colorTextfieldTextPre: unset;
--colorTextfieldBorderPre: unset;
/*textfield Error状态*/
--colorTextfieldBgError: rgba(7, 13, 30, 0.15);
--colorTextfieldTextError: rgb(255, 255, 255);
--colorTextfieldCsr: rgb(229, 181, 134);
--colorTextfieldBorderError: rgb(145, 50, 50);
/*textfield Disable状态*/
--colorTextfieldBgDis: rgba(29, 34, 50, 0.5);
--colorTextfieldTextDis: rgb(99, 106, 123);
--colorTextfieldCsr: rgb(229, 181, 134);
--colorTextfieldBorderDis: rgba(99, 111, 138, 0.5);
/* tag 组件颜色 */
/* tag Succed */
--colorTagSucceedBg: unset;
--colorTagSucceedBorder: rgb(121, 237, 220);
--colorTagSucceedText: rgb(121, 237, 220);
/* tag Warning */
--colorTagWarningBg: unset;
--colorTagWarningBorder: rgb(238, 65, 65);
--colorTagWarningText: rgb(238, 65, 65);
/* tag Hint */
--colorTagHintBg: unset;
--colorTagHintBorder: rgb(205, 220, 255);
--colorTagHintText: rgb(205, 220, 255);
/* tag Highlight */
--colorTagHighlightBg: unset;
--colorTagHighlightBorder: rgb(230, 182, 131);
--colorTagHighlightText: rgb(230, 182, 131);
/* button 按钮颜色*/
/* Real 普通状态 */
--colorRealbtnBgNor: linear-gradient(180deg, rgb(54, 60, 78), rgb(39, 45, 59));
--colorRealbtnBorderNor: rgba(219, 235, 255, 0.15);
--colorRealbtnTextNor: rgb(255, 255, 255);
/* Real 点击状态*/
--colorRealbtnBgPre: linear-gradient(0deg, rgb(86, 91, 106), rgb(73, 78, 90));
--colorRealbtnBorderPre: rgba(98, 104, 118, 1);
--colorRealbtnTextPre: rgb(255, 255, 255);
/* Real 禁用状态*/
--colorRealbtnBgDis: linear-gradient(0deg, rgba(54, 60, 78, 0.5), rgba(39, 45, 59, 0.5));
--colorRealbtnBorderDis: rgba(70, 77, 94, 0.5);
--colorRealbtnTextDis: rgba(255, 255, 255, 0.5);
/* Ghost btn 普通状态 */
--colorGhostbtnBgNor: linear-gradient(0deg, rgba(7, 13, 30, 0.15), rgba(7, 13, 30, 0.15));
--colorGhostbtnBorderNor: rgba(186, 210, 243, 0.5);
--colorGhostbtnTextNor: rgb(255, 255, 255);
/* Ghost 点击状态*/
--colorGhostbtnBgPre: linear-gradient(0deg, rgba(255, 255, 255, 0.15), rgba(255, 255, 255, 0.15));
--colorGhostbtnBorderPre: transparent;
--colorGhostbtnTextPre: rgb(255, 255, 255);
/* Ghost 禁用状态*/
--colorGhostbtnBgDis: linear-gradient(0deg, rgba(29, 34, 50, 0.5), rgba(29, 34, 50, 0.5));
--colorGhostbtnBorderDis: rgba(107, 121, 146, 0.5);
--colorGhostbtnTextDis: rgba(255, 255, 255, 0.5);
/* Flat btn 普通状态 */
--colorTextbtnBgNor: transparent;
--colorTextbtnBorderNor: transparent;
--colorTextbtnNor: rgb(229, 181, 134);
/* Flat 点击状态*/
--colorTextbtnBgPre: rgba(255, 255, 255, 0.15);
--colorTextbtnBorderPre: transparent;
--colorTextbtnPre: rgb(229, 181, 134);
/* Flat 禁用状态*/
--colorTextbtnBgDis: transparent;
--colorTextbtnBorderDis: transparent;
--colorTextbtnDis: rgba(229, 181, 134, 0.5);
/* ui 未提供样式*/
--ibtnSmallLinehight: 0.6rem;
--ibtnRealBgc: unset;
--ibtnRealBorderRadius: 0.04rem;
--ibtnRealBorderWidth: 0.02rem;
--ibtnGhostBgi: unset;
/* --ibtnGhostBorderRadius: 4px; */
--ibtnGhostBorderWidth: 0.02rem;
/* --ibtnFlatBorderRadius: 4px; */
--ibtnFlatBorderWidth: 0.02rem;
/* slider变量 */
/* normal*/
--colorSliderThumbNor: linear-gradient(90deg, rgb(212, 161, 120), rgb(255, 225, 164));
--colorSliderRailNor: linear-gradient(90deg, rgb(212, 161, 120), rgb(255, 225, 164));
--colorSliderGapNor: rgba(255, 255, 255, 0.3);
/* Pressed */
--colorSliderThumbPre: unset;
--colorSliderRailPre: unset;
/* Disable*/
--colorSliderThumbDis: linear-gradient(90deg, rgba(212, 161, 120, 0.3), rgba(255, 225, 164, 0.3));
--colorSliderRailDis: linear-gradient(90deg, rgb(212, 161, 120, 0.3), rgb(255, 225, 164, 0.3));
--colorSliderGapDis: rgba(100, 103, 113, 0.3);
--iSliderBlockSize: 0.324rem;
--isliderBlockMarginHalfSize: -0.162rem;
--isliderBlockHalfSize: 0.162rem;
--isliderBlockShadow: 0.05rem 0 0.1rem 0 rgba(0, 0, 0, 0.5);
--isliderLineHeight: 0.06rem;
--isliderTapAreaHeight: 0.72rem;
--isliderBlockActiveShadowOpatity: 0.3;
--isliderBlockActiveShadowSize: 0.72rem;
--isliderBlockMarginSize: -0.2rem;
/* searchbar 颜色*/
/* Normal */
--colorSearchbarBgNor: rgba(7, 13, 30, 0.15);
--colorSearchbarBorderNor: rgba(99, 111, 138, 1);
--colorSearchbarTextNor: rgba(99, 106, 123, 1);
/* Pressed */
--colorSearchbarBgPre: unset;
--colorSearchbarBorderPre: unset;
--colorSearchbarTextPre: unset;
/* Inputting */
--colorSearchbarBgInput: rgba(7, 13, 30, 0.15);
--colorSearchbarCsr: rgba(229, 181, 134, 1);
--colorSearchbarBorderInput: rgba(191, 206, 239, 1);
--colorSearchbarTextInput: rgba(255, 255, 255, 1);
/* radio */
/* 选中状态 */
--colorRadioSelThumbBgNor: linear-gradient(0deg, rgb(212, 161, 120), rgb(255, 225, 164));
--colorRadioSelThumbBorderNor: unset;
--colorRadioSelBaseBgNor: rgba(0, 0, 0, 0.3);
--colorRadioSelBaseBorderNor: unset;
/* 选中Pressed状态 */
--colorRadioSelThumbBgPre: unset;
--colorRadioSelThumbBorderPre: unset;
--colorRadioSelBaseBgPre: unset;
--colorRadioUnselBaseBorderPre: unset;
/* 未选中状态 */
--colorRadioUnselThumbBgNor: unset;
--colorRadioUnselThumbBorderNor: unset;
--colorRadioUnselBaseBgNor: rgba(0, 0, 0, 0.3);
--colorRadioUnselBaseBorderNor: unset;
/* 选中禁用状态 */
--colorRadioSelThumbBgDis: linear-gradient(0deg, rgba(212, 161, 120, 0.5), rgba(255, 225, 164, 0.5));
--colorRadioSelThumbBorderDis: unset;
--colorRadioSelBaseBgDis: rgba(16, 18, 25, 0.5);
--colorRadioUnselBaseBorderDis: unset;
/* 未选中禁用状态 */
--colorRadioUnselThumbBgDis: unset;
--colorRadioUnselThumbBorderDis: unset;
--colorRadioUnselBaseBgDis: rgba(16, 18, 25, 0.5);
--colorRadioUnselBaseBorderDis: unset;
/* Checkbox */
/* 选中状态 */
--colorCheckboxSelThumbNor: rgb(212, 161, 120);
--colorCheckboxSelBaseBgNor: rgba(0, 0, 0, 0.3);
--colorCheckboxSelBaseBorderNor: unset;
/* 选中Pressed状态 */
--colorCheckboxSelThumbPre: unset;
--colorCheckboxSelBaseBgPre: unset;
--colorCheckboxSelBaseBorderPre: unset;
/* 未选中状态 */
--colorCheckboxUnselThumbNor: unset;
--colorCheckboxUnselBaseBgNor: rgba(0, 0, 0, 0.3);
--colorCheckboxUnselBaseBorderNor: unset;
/* 未选中Pressed状态 */
--colorCheckboxUnselThumbPre: unset;
--colorCheckboxUnselBaseBgPre: unset;
--colorCheckboxUnselBaseBorderPre: unset;
/* 选中禁用状态 */
--colorCheckboxSelThumbDis: rgba(212, 161, 120, 0.5);
--colorCheckboxSelBaseBgDis: rgba(16, 18, 25, 0.5);
--colorCheckboxSelBaseBorderDis: unset;
/* 未选中禁用状态 */
--colorCheckboxUnselThumbDis: unset;
--colorCheckboxUnselBaseBgDis: rgba(16, 18, 25, 0.5);
--colorCheckboxUnselBaseBorderDis: unset;
/* loadingbar变量 */
--colorProgIndeterminateRail: rgba(255, 255, 255, 0.3);
--colorProgDeterminateRail: rgba(255, 255, 255, 0.3);
--colorProgIndeterminateGap: linear-gradient(90deg, rgb(212, 161, 120), rgb(255, 225, 164));
--colorProgDeterminateGap: linear-gradient(90deg, rgb(212, 161, 120), rgb(255, 225, 164));
/* loading circle */
--colorProgCircularRail: rgb(229, 181, 134);
--colorProgCircularGap: transparent;
/* 纵向tabs变量 */
--colorTabsVerticalSelNor: rgb(244, 210, 168);
--colorTabsVerticalSelBaseBgNor: linear-gradient(90deg, rgba(229, 181, 134, 0.15), transparent);
--colorTabsVerticalSelBaseBorderNor: unset;
--colorTabsVerticalSelTextNor: rgb(255, 255, 255);
--colorTabsVerticalSelTextNor: rgb(255, 255, 255);
--colorTabsVerticalUnselTextNor: rgba(255, 255, 255, 0.5);
/* Vertical Pressed 状态下 */
--colorTabsVerticalSelTextPre: unset;
--colorTabsVerticalUnselPre: unset;
--colorTabsVerticalUnselBaseBgPre: unset;
--colorTabsVerticalUnselBaseBorderPre: unset;
--colorTabsVerticalUnselBasePre: unset;
--colorTabsVerticalUnselTextPre: unset;
/* Horizontal Pressed 状态下 */
--colorTabsHorizontalSelTextPre: unset;
/* Horizontal 未选中Pressed 状态下 */
--colorTabsHorizontalUnselBasePre: unset;
--colorTabsHorizontalUnselTextPre: unset;
--colorTabsHorizontalUnselBaseBgPre: unset;
--colorTabsHorizontalUnselBaseBorderPre: unset;
/* Horizontal normal */
--colorTabsHorizontalSelNor: unset;
--colorTabsHorizontalSelBaseBgNor: unset;
--colorTabsHorizontalSelBaseBorderNor: unset;
/* 横向tabs变量 */
--colorTabsHorizontalSelTextNor: rgb(255, 255, 255);
--colorTabsHorizontalUnselTextNor: rgba(255, 255, 255, 0.5);
/* tabs禁用状态变量 */
--colorTabsVerticalSelDis: unset;
--colorTabsVerticalSelBaseBgDis: unset;
--colorTabsVerticalSelBaseBorderDis: unset;
--colorTabsVerticalSelBaseDis: unset;
--colorTabsVerticalSelTextDis: unset;
--colorTabsVerticalSelTextDis: unset;
--colorTabsVerticalUnselDis: unset;
--colorTabsVerticalUnselBaseDis: unset;
--colorTabsVerticalUnselBaseBgDis: unset;
--colorTabsVerticalUnselBaseBorderDis: unset;
--colorTabsVerticalSelTextDis: rgba(255, 255, 255, 0.3);
--colorTabsVerticalUnselTextDis: rgba(255, 255, 255, 0.3);
--colorTabsHorizontalSelTextDis: rgba(255, 255, 255, 0.3);
--colorTabsHorizontalUnselTextDis: rgba(255, 255, 255, 0.3);
--colorTabsHorizontalelBaseBgDis: unset;
--colorTabsHorizontalelBaseBorderDis: unset;
--colorTabsHorizontalUnselDis: unset;
--colorTabsHorizontalUnselBaseBgDis: unset;
--colorTabsHorizontalUnselBaseBorderDis: unset;
/* ui未提供变量 */
--itabsVerticalWidth: 0.02rem;
--itabsVerticalHeight: 100%;
--itabsVerticalTop: 0;
/* switch选中状态变量 */
--colorSwitchOnBaseBgNor: rgba(0, 0, 0, 0.3);
--colorSwitchOnThumbBgNor: linear-gradient(0deg, rgb(212, 161, 120), rgb(255, 225, 164));
--colorSwitchOnBaseBorderNor: unset;
--colorSwitchOnThumbBorderNor: unset;
/* switch选中Pressed状态变量 */
--colorSwitchOnThumbBgPre: unset;
--colorSwitchOnThumbBorderPre: unset;
--colorSwitchOnBaseBgPre: unset;
--colorSwitchOnBaseBorderPre: unset;
/* switch未选中状态变量 */
--colorSwitchOffThumbBorderNor: unset;
--colorSwitchOffBaseBorderNor: unset;
/* switch未选中Pressed状态变量 */
--colorSwitchOffThumbBgPre: unset;
--colorSwitchOffThumbBorderPre: unset;
--colorSwitchOffBaseBgPre: unset;
--colorSwitchOffBaseBorderPre: unset;
--colorSwitchOffBaseBgNor: rgba(0, 0, 0, 0.3);
--colorSwitchOffThumbBgNor: linear-gradient(180deg, rgb(217, 227, 244), rgb(82, 94, 122));
/* switch禁用状态变量 */
--colorSwitchOnThumbBgDis: linear-gradient(0deg, rgba(212, 161, 120, 0.5), rgba(255, 225, 164, 0.5));
--colorSwitchOnBaseBgDis: rgba(16, 18, 25, 0.5);
--colorSwitchOffThumbBgDis: linear-gradient(180deg, rgba(217, 227, 244, 0.5), rgba(82, 94, 122, 0.5));
--colorSwitchOffBaseBgDis: rgba(16, 18, 25, 0.5);
/* ui未提供变量 */
--iswitchTrackShadow: 0 0.02rem 0.12rem 0 rgba(0, 0, 0, 0.1);
--iswitchOnTrackBorderColor: #fff7ee80;
--iswitchOffTrackBorderColor: #9cb3db80;
/* 弹窗 Normal */
--colorDialogBg: linear-gradient(180deg, rgb(70, 75, 96), rgb(42, 47, 66));
--colorDialogBorder: rgba(177, 206, 49, 1);
--colorDialogTiltle: rgba(255, 255, 255, 1);
--colorDialogText: rgba(255, 255, 255, 1);
--colorDiaologBtnBgNor: unset;
--colorDiaologBtnTextNor: rgba(255, 255, 255, 1);
--colorDialogBtnBorderNor: unset;
--positionDialogTiltle: center;
--highlightDialogBtn: unset;
/* 弹窗 Pressed */
--colorDiaologBtnBgPre: unset;
--colorDialogBtnBorderPre: unset;
--colorDiaologBtnTextPre: rgba(255, 255, 255, 1);
/* 弹窗 Disable */
--colorDiaologBtnBgDis: unset;
--colorDiaologBtnBorderDis: unset;
--colorDiaologBtnTextDis: rgba(255, 255, 255, 0.3);
/* 弹窗 对齐方式 */
/* 垂直对齐方式 */
--diaologAlignItems: center;
/* 水平对齐方式 */
--diaologJustifyContent: center;
/* 筛选菜单 Normal */
/*筛选菜单圆角*/
--colorMenuRadius: 0.08rem;
--colorMenuUnselBg: rgb(57, 63, 80);
--colorMenuSubUnselBg: rgb(41, 47, 64);
--colorMenuTextUnselNor: rgba(255, 255, 255, 01);
--colorMenuTextSubUnselNor: rgba(255, 255, 255, 0.5);
--colorMenuSelBg: linear-gradient(90deg, rgb(57, 63, 80), rgb(41, 47, 64));
--colorMenuTextSelNor: rgb(229, 181, 134);
--colorMenuSubSelBg: unset;
--colorMenuTextSubSelNor: unset;
/* 筛选菜单 pressed */
--colorMenuTextUnselPre: unset;
--colorMenuTextSubUnselPre: unset;
--colorMenuTextSelPre: unset;
--colorMenuTextSubSelPre: unset;
/* 筛选菜单 Disable */
--colorMenuTextUnselDis: unset;
--colorMenuTextSubUnselDis: unset;
--colorMenuTextSelDis: unset;
--colorMenuTextSubSelDis: unset;
/* tag-select 样式 */
/* 边框大小 */
--borderOptiontagSel: 0.02rem;
--cornerOptiontagSel: 0.1rem;
/* 选中状态背景 */
--colorOptiontagSelBgNor: rgba(229, 181, 134, 0.2);
/* 选中状态边框 */
--colorOptiontagSelBorderNor: rgba(229, 181, 134, 1);
/* 选中状态文字 */
--colorOptiontagSelTextNor: rgba(229, 181, 134, 1);
/* 选中Pressed状态背景 */
--colorOptiontagSelBgPre: unset;
--colorOptiontagSelBorderPre: unset;
--colorOptiontagSelTextPre: unset;
/* 禁用状态 */
/* 背景 */
--colorOptiontagSelBgDis: rgba(229, 181, 134, 0.1);
/* 边框 */
--colorOptiontagSelBorderDis: rgba(229, 181, 134, 0.3);
/* 文字 */
--colorOptiontagSelTextDis: rgba(229, 181, 134, 0.3);
/* 类型1 */
/* 没有选中状态背景 */
--colorOptiontagUnselBgNor: rgba(14, 18, 33, 0.15);
/* 没有选中状态边框 */
--colorOptiontagUnselBorderNor: rgba(132, 156, 219, 0.15);
/* 没有选中状态文字 */
--colorOptiontagUnselTextNor: rgba(255, 255, 255, 1);
/* 没有选中Pressed状态 */
--colorOptiontagUnselBgPre: unset;
--colorOptiontagUnselBorderPre: unset;
--colorOptiontagUnselTextPre: unset;
/* 禁用状态 */
/* 背景 */
--colorOptiontagUnsel1BgDis: rgba(14, 18, 33, 0.1);
/* 边框 */
--colorOptiontagUnsel1BorderDis: rgba(132, 156, 219, 0.1);
/* 文字 */
--colorOptiontagUnsel1TextDis: rgba(255, 255, 255, 0.3);
/* 类型2 */
/* 没有选中状态背景 */
--colorOptiontagUnsel2BgNor: rgba(14, 18, 33, 0.15);
/* 没有选中状态边框 */
--colorOptiontagUnsel2BorderNor: transparent;
/* 没有选中状态文字 */
--colorOptiontagUnsel2TextNor: rgba(255, 255, 255, 1);
/* 禁用状态 */
/* 背景 */
--colorOptiontagUnsel2BgDis: rgba(14, 18, 33, 0.1);
/* 边框 */
--colorOptiontagUnsel2BorderDis: transparent;
/* 文字 */
--colorOptiontagUnsel2TextDis: rgba(255, 255, 255, 0.3);
/* 日历颜色 */
/* 标题对齐方式 */
--colorCalendarTitAlign: center;
/* 选中日期颜色 */
--colorCalendarSelectBg: linear-gradient(180deg, #596580, #4c5670);
/* 选中日期边框颜色 */
--colorCalendarSelectBor: transparent;
/* 选中日期中间态颜色 */
--colorCalendarSelectMidBg: rgba(73, 83, 109, 0.6);
/* 日期弹窗的宽度 */
--cornerCalendarWidth: 10.1rem;
/* 选择日期的圆角 */
--cornerCalendarBorRad: 0.12rem;
/* 图片 */
--imgNoSrcBgColor: linear-gradient(180deg, #535969 0%, #434a5d 100%);
--imgNoSrcTextColor: rgba(255, 255, 255, 0.3);
--imgNoSrcBorRail: 0.08rem;
/* btn 圆角 */
--cornerBtn: 0.1rem;
/* btn 描边 */
--borderRealbtn: 0.01rem;
--borderGhostbtn: unset;
/* Slider 圆角 */
--borderSliderThumb: unset;
--borderSliderRail: unset;
--borderSliderRail: unset;
--cornerSliderThumb: 1rem;
--cornerSliderRail: 1rem;
--cornerSliderGap: 1rem;
/* Progress 圆角 */
--borderProgRail: unset;
--borderProgGap: unset;
--cornerProgRail: 1rem;
--cornerProgGap: 1rem;
/* Tag 圆角 */
--cornerTag: 0.04rem;
/* Switch 圆角 */
--cornerSwitchThumb: 0.2rem;
--cornerSwitchBase: 0.2rem;
--borderSwitchThumb: 0;
--borderSwitchBase: 1px;
/* Radio 圆角 */
--borderRadioThumb: unset;
--borderRadiolBase: unset;
--cornerRadioThumb: 0.1rem;
--cornerRadioBase: 0.24rem;
/* Checkbox 圆角 */
--cornerCheckboxThumb: 0;
--cornerCheckboxBase: 0.15rem;
/* Textfield 圆角 */
--borderTextfieldBg: unset;
--borderTextfield: 1px;
--cornerTextfield: 0.1rem;
--cornerTextfield: 0.1rem;
--cornerTextfieldBg: unset;
/* SearchBars */
--cornerSearchbar: 1rem;
--borderSearchbar: unset;
/* Optiontag 圆角 */
--cornerOptiontag: unset;
/* 所有弹窗的圆角 圆角 */
--cornerDialog: 0.1134rem;
--borderDialog: 1px;
/* Menu 圆角 */
--cornerMenu: unset;
--borderMenu: unset;
/* 导航 圆角 */
--borderTabsVerticalSel: unset;
--borderTabsVerticalSelBase: unset;
--borderTabsHorizontalSel: unset;
--borderTabsHorizontalSelBase: unset;
--cornerTabsVerticalSel: unset;
--cornerTabsVerticalSelBase: unset;
--cornerTabsHorizontalSel: unset;
--cornerTabsHorizontalSelBase: unset;
}
.iov-text-h1 {
font-size: var(--ifontsizeH1);
font-weight: 800;
}
.iov-text-h2 {
font-size: var(--ifontsizeH2);
font-weight: 800;
}
.iov-text-title {
font-size: var(--ifontsizeTitle);
font-weight: 400;
}
.iov-text-operation {
font-size: var(--ifontsizeC1);
font-weight: 400;
}
.iov-text-c1 {
font-size: var(--ifontsizeC1);
font-weight: 400;
}
.iov-text-c2 {
font-size: var(--ifontsizeC2);
font-weight: 200;
}
.iov-text-caption {
font-size: var(--ifontsizeCaption);
font-weight: 200;
}
.modal-content-footer {
height: 1.037rem;
display: flex;
justify-content: flex-start;
margin-top: 0.18rem;
}
.modal-content-footer-item {
flex: 1;
border-top: 0.02rem solid #4a516c;
border-right: 0.02rem solid #4a516c;
text-align: center;
line-height: 1.037rem;
}
.modal-content-footer-item:last-child {
border-right: none;
}
::-webkit-scrollbar {
width: var(--borderScrollWidth);
background: var(--colorScrollGapNor);
border-radius: var(--borderScrollRadius);
}
/*定义滑块 内阴影+圆角*/
::-webkit-scrollbar-thumb {
width: var(--borderScrollWidth);
border-radius: var(--borderScrollRadius);
background: var(--colorScrollRailNor);
}
html {
font-size: 100px;
background: var(--colorBg);
}
body {
font-size: var(--ifontsizeCaption1);
}
FAQs
[官方文档](http://applets.baidu.com/bd-idg-clw-xiaoduzhushou/Paper/iov-ui%20%E7%BB%84%E4%BB%B6%E5%BA%93/%E4%BB%8B%E7%BB%8D/)
The npm package iov-ui receives a total of 447 weekly downloads. As such, iov-ui popularity was classified as not popular.
We found that iov-ui demonstrated a not healthy version release cadence and project activity because the last version was released a year ago. It has 3 open source maintainers collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Research
/Security News
Benign-looking npm packages split malicious functionality across a dependency chain that deploys a cross-platform RAT targeting Alibaba developers.
Research
/Security News
Two Joyfill npm beta releases contain an import-time implant that uses blockchain transactions to retrieve a remote-access trojan.
Security News
Socket releases free Certified Patches for high-severity Nuxt vulnerabilities, including server-side remote code execution through server island props.