iov-ui
v1.2.68
Published
[官方文档](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/)
Downloads
26
Readme
iov-ui
npm install iov-ui -S使用时遵循百度小程序规范，先在 json 中引入，然后直接在 swan 中使用。
{
"navigationBarTitleText": "智能小程序官方组件",
"usingComponents": {
"iov-button": "iov-ui/lib/button"
}
}<iov-button>确认</iov-button>发布记录
- 1.2.67
- 去掉日期弹窗阴影
- 1.2.65
- textfield修复输入框focus事件失效问题 导致phone填充后依然高亮
- 1.2.64
- 日历组件语音注册bug修复
- 1.2.63
- tabs 快速点击切换跳动问题优化
- 1.2.62
- tabs 快速点击切换跳动问题
- 1.2.61
- preview-image 图片预览问题
- 1.2.60
- slider 数字覆盖，位置偏移问题
- 1.2.59
- preview-image 图片预览点击默认第一张问题
- 1.2.58
- 修复日历组件样式问题
- 1.2.57
- 修复日历组件分页页数问题
- 1.2.56
- 新增日历组件分页加载
- 新增日历组件加载loading
- 1.2.55
- 去掉button行高
- 1.2.54
- titlebar 空标题问题
- 1.2.53
- preview-image 滑动屏幕未暂停问题
- 1.2.52
- [fix] 处理 layout-con 组件同时注册多个 voice-type 问题 (layout-con组件包含两个scroll-view组件，如果两个组件同时注册voice-type 会导致语音不执行，当前改动使这个组件只能存在一个voice-type)
- 1.2.51
- solution-card-layout height兼容
- 1.2.48 - 1.2.50
- preview-image 新增图片预览手势放大缩小优化
- 1.2.47
- preview-image 新增图片预览双指放大
- 1.2.46
- slider max<20 会拖出min外的问题
- slider 增加滑块上方价格隐藏tag
- preview-image 新增可显示title和左右切换按钮
- 1.2.45
- modal 语音指令扩展
- 1.2.44
- card 新增no-voice-zone区域
- 1.2.43
- card ui调整
- 1.2.38 - 1.2.42
- card ui调整
- 1.2.34 - 1.2.38
- card 增加vtsTag
- tts 优化
- 1.2.25 - 1.2.33
- iov-titlebar 优化
- error-page 优化
- 1.2.24
- slider滑块展示优化
- 1.2.23
- 新增error-page 页面
- 1.2.20 - 1.2.22
- 新增solution-card-layout组件
- 修改solution-titlebar组件
- 增加icon
- 1.2.19
- layout-con扩展
- 1.2.16 - 1.2.18
- 轻卡片下单支持点击
- 1.2.15
- democar 新增icon
- 1.2.13 - 1.2.14
- 轻卡片大版本升级
- 1.2.00 - 1.2.13
- 轻卡片大版本升级
- 1.1.43
- 不能输入是置灰
- 1.1.42
- sidebar 确保位置计算出来才显示
- 1.1.41
- 图片预览支持语音指令
- 1.1.40
- sidebar 新增内容为空不显示下拉框
- 1.1.39
- textfield 增加确定按钮，点击确定触发回车
- 1.1.37
- 1.1.38
- titlebar 气泡展示优化
- 1.1.37
- titlebar 气泡重复展示问题
- 1.1.36
- 改变 slider 滑块最右值与最大值重叠问题
- 1.1.35
- 添加滚动收起键盘
- 1.1.34
- 添加双容器滚动事件文档描述
- 1.1.33
- searchBar 键盘输入问题 bug 修复
- 1.1.32
- titleBarTag 的 bug 修复
- 1.1.31
- 部分组件将语音的 vsl 传出
- 1.1.30
- titleBarTag 的 bug 修复
- 1.1.28 ~ 1.1.29
- 已知 bug 修复、样式优化
- 1.1.27
- searchbar 增加 maxlength
- 1.1.26
- 区分点击 Confirm 按钮是否关闭 modal
- 1.1.24
- 修复定位气泡显示
- 1.1.23
- 修复 titlebar 登录状态切换头像显示的 bug
- 1.1.22
- textfield 输入框语音输入时，点击叉按钮获取不到失去焦点 bug
- 1.1.21
- slider 俩个滑块在最右重叠不能滑动问题 bug
- 1.1.20
- carlife 上监听点击回车关闭键盘
- 1.1.17-1.1.19
- modal 引导语优化
- 1.1.16
- titlebar css 优化
- 1.1.13-1.1.15
- 配置引导语回调参数
- 1.1.12
- modal 传递 url 参数给宿主
- 1.1.11
- sidebar 位置跳动问题 bug
- 1.1.10
- madal voice-type 改为 cancel
- 1.1.09
- tabs 传递 url 参数给宿主
- 1.1.06-1.1.08
- sidebar 位置跳动问题 bug
- 1.1.05
- titlebar bug 修复
- 1.1.01 - 1.1.04
- 文档修改
- 1.1.00
- slider bug 修复
- 1.0.99
- input 新增 isForceGetPhone 当 input 有值时，是否显示自动填写手机号码
- 1.0.98
- icon 新增优惠券图标
小程序目前分两个版本，支持换肤和自适应+换肤。支持自适应+换肤的版本号在 1.0.3 以上版本,仅支持换肤的是 0.0.100 以上版本。两个版本的主题文件也不一样。
- 支持自适应 2.0 和换肤 theme.css 文件
/* 标准小程序主题配置 */
: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);
}