T-UVUE-UI1.0.0

Appearance

主题样式 ​

主题配置表 ​

属性名值描述
id'DefaultMode'主题的唯一标识符
name'默认'主题名称
unit'rpx'单位
infonormal'#909399'信息提示正常状态颜色
infodark'#82848a'信息提示深色状态颜色
infodisabled'#c8c9cc'信息提示禁用状态颜色
infolight'#f4f4f5'信息提示浅色状态颜色
primarynormal'#2979ff'主要颜色正常状态颜色
primarydark'#2b85e4'主要颜色深色状态颜色
primarydisabled'#a0cfff'主要颜色禁用状态颜色
primarylight'#dcedff'主要颜色浅色状态颜色
successnormal'#19be6b'成功状态正常颜色
successdark'#18b566'成功状态深色颜色
successdisabled'#71d5a1'成功状态禁用颜色
successlight'#DFEAE2'成功状态浅色颜色
warningnormal'#ff9900'警告状态正常颜色
warningdark'#f29100'警告状态深色颜色
warningdisabled'#fcbd71'警告状态禁用颜色
warninglight'#fff1dd'警告状态浅色颜色
errornormal'#fa3534'错误状态正常颜色
errordark'#dd6161'错误状态深色颜色
errordisabled'#fab6b6'错误状态禁用颜色
errorlight'#ffe0e0'错误状态浅色颜色
colornormal'#333333'文本颜色正常状态
colordark'#606266'文本颜色深色状态
colordisabled'#909399'文本颜色禁用状态
colorlight'#c0c4cc'文本颜色浅色状态
colorinverse'#ffffff'文本颜色反色状态
bgcolorview'#ffffff'视图背景颜色
bgcolorpage'#f8f8f8'页面背景颜色
borderbase'#DCDFE6'基础边框颜色
borderlight'#E4E7ED'浅色边框颜色
borderlighter'#EBEEF5'更浅色边框颜色
borderextralight'#F2F6FC'额外浅色边框颜色
radiuslarge20大尺寸圆角半径
radiusmedium16中等尺寸圆角半径
radiussmall12小尺寸圆角半径
radiusmini8迷你尺寸圆角半径
marginlarge32大尺寸外边距
marginmedium28中等尺寸外边距
marginsmall24小尺寸外边距
marginmini20迷你尺寸外边距
paddinglarge24大尺寸内边距
paddingmedium20中等尺寸内边距
paddingsmall16小尺寸内边距
paddingmini12迷你尺寸内边距
sizelarge36大尺寸字体大小
sizemedium28中等尺寸字体大小
sizesmall24小尺寸字体大小
sizemini22迷你尺寸字体大小

背景主题样式 ​

css说明style备注
tdbtype='' effect=''background-color:bgcolorview;background-color:#ffffff;
tdb.itype='info' effect=''background-color:infonormal;background-color:#909399;
tdb.i.dtype='info' effect='dark'background-color:infodark;background-color:#82848a;
tdb.i.ditype='info' effect='disabled'background-color:infodisabled;background-color:#c8c9cc;
tdb.i.ltype='info' effect='light'background-color:infolight;background-color:#f4f4f5;
tdb.i.l.red or tdb.i..red or bg.redtype='info' effect='light' color:redbackground-color:red;自定义颜色覆盖主题
tdb.etype='error' effect=''background-color:errornormal;background-color:#fa3534;
tdb.e.dtype='error' effect='dark'background-color:errordark;background-color:#dd6161;
tdb.e.ditype='error' effect='disabled'background-color:errordisabled;background-color:#fab6b6;
tdb.e.ltype='error' effect='light'background-color:errorlight;background-color:#ffe0e0;
tdb.e.l.red or tdb.e..red or bg.redtype='error' effect='light' color:redbackground-color:red;自定义颜色覆盖主题
tdb.wtype='warning' effect=''background-color:warningnormal;background-color:#ff9900;
tdb.w.dtype='warning' effect='dark'background-color:warningdark;background-color:#f29100;
tdb.w.ditype='warning' effect='disabled'background-color:warningdisabled;background-color:#fcbd71;
tdb.w.ltype='warning' effect='light'background-color:warninglight;background-color:#fff1dd;
tdb.w.l.red or tdb.e..red or bg.redtype='warning' effect='light' color:redbackground-color:red;自定义颜色覆盖主题
tdb.stype='success' effect=''background-color:successnormal;background-color:#19be6b;
tdb.s.dtype='success' effect='dark'background-color:successdark;background-color:#18b566;
tdb.s.ditype='success' effect='disabled'background-color:successdisabled;background-color:#71d5a1;
tdb.s.ltype='success' effect='light'background-color:successlight;background-color:#DFEAE2;
tdb.s.l.red or tdb.e..red or bg.redtype='success' effect='light' color:redbackground-color:red;自定义颜色覆盖主题
tdb.ptype='primary' effect=''background-color:primarynormal;background-color:#2979ff;
tdb.p.dtype='primary' effect='dark'background-color:primarydark;background-color:#2b85e4;
tdb.p.ditype='primary' effect='disabled'background-color:primarydisabled;background-color:#a0cfff;
tdb.p.ltype='primary' effect='light'background-color:primarylight;background-color:#dcedff;
tdb.p.l.red or tdb.e..red or bg.redtype='primary' effect='light' color:redbackground-color:red;自定义颜色覆盖主题

文字颜色(作为前景的时候使用) ​

css说明style备注
tdctype='' effect=''color:colornormal;color:#333333;
tdc.itype='info' effect=''color:colorinverse;color:#ffffff;
tdc.i.dtype='info' effect='dark'color:colorinverse;color:#ffffff;
tdc.i.ditype='info' effect='disabled'color:colorinverse;color:#ffffff;
tdc.i.ltype='info' effect='light'color:infonormal;color:#909399;
tdc.i.l.red or tdc.i..red or c.redtype='info' effect='light' color:redcolor:red;自定义颜色覆盖主题
tdc.etype='error' effect=''color:colorinverse;color:#ffffff;
tdc.e.dtype='error' effect='dark'color:colorinverse;color:#ffffff;
tdc.e.ditype='error' effect='disabled'color:colorinverse;color:#ffffff;
tdc.e.ltype='error' effect='light'color:errornormal;color:#fa3534;
tdc.e.l.red or tdc.e..red or c.redtype='error' effect='light' color:redcolor:red;自定义颜色覆盖主题
tdc.wtype='warning' effect=''color:colorinverse;color:#ffffff;
tdc.w.dtype='warning' effect='dark'color:colorinverse;color:#ffffff;
tdc.w.ditype='warning' effect='disabled'color:colorinverse;color:#ffffff;
tdc.w.ltype='warning' effect='light'color:warningnormal;color:#ff9900;
tdc.w.l.red or tdc.e..red or c.redtype='warning' effect='light' color:redcolor:red;自定义颜色覆盖主题
tdc.stype='success' effect=''color:colorinverse;color:#ffffff;
tdc.s.dtype='success' effect='dark'color:colorinverse;color:#ffffff;
tdc.s.ditype='success' effect='disabled'color:colorinverse;color:#ffffff;
tdc.s.ltype='success' effect='light'color:successnormal;color:#19be6b;
tdc.s.l.red or tdc.e..red or c.redtype='success' effect='light' color:redcolor:red;自定义颜色覆盖主题
tdc.ptype='primary' effect=''color:colorinverse;color:#ffffff;
tdc.p.dtype='primary' effect='dark'color:colorinverse;color:#ffffff;
tdc.p.ditype='primary' effect='disabled'color:colorinverse;color:#ffffff;
tdc.p.ltype='primary' effect='light'color:primarynormal;color:#2979ff;
tdc.p.l.red or tdc.e..red or c.redtype='primary' effect='light' color:redcolor:red;自定义颜色覆盖主题

文字颜色对照 ​

css说明style备注
tqctype='' effect=''color:colornormal;color:#333333;
tqc..n(默认等同于tqc)type='' effect='normal'color:colornormal;color:#333333;
tqc..dtype='' effect='dark'color:colordark;color:#606266;
tqc..ditype='' effect='disabled'color:colordisabled;color:#909399;
tqc..ltype='' effect='light'color:colorlight;color:#c0c4cc;
tqc.itype='info' effect=''color:infonormal;color:#909399;
tqc.i.dtype='info' effect='dark'color:infodark;color:#82848a;
tqc.i.ditype='info' effect='disabled'color:infodisabled;color:#c8c9cc;
tqc.i.ltype='info' effect='light'color:infolight;color:#f4f4f5;
tqc.i.l.red or tqc.i..red or c.redtype='info' effect='light' color:redcolor:red;自定义颜色覆盖主题
tqc.etype='error' effect=''color:errornormal;color:#fa3534;
ttd.e.dtype='error' effect='dark'color:errordark;color:#dd6161;
ttd.e.ditype='error' effect='disabled'color:errordisabled;color:#fab6b6;
tqc.e.ltype='error' effect='light'color:errorlight;color:#ffe0e0;
tqc.e.l.red or tqc.e..red or c.redtype='error' effect='light' color:redcolor:red;自定义颜色覆盖主题
tqc.wtype='warning' effect=''color:warningnormal;color:#ffffff;
tqc.w.dtype='warning' effect='dark'color:warningdark;color:#ffffff;
tqc.w.ditype='warning' effect='disabled'color:warningdisabled;color:#ffffff;
tqc.w.ltype='warning' effect='light'color:warninglight;color:#ff9900;
tqc.w.l.red or tqc.e..red or c.redtype='warning' effect='light' color:redcolor:red;自定义颜色覆盖主题
tqc.stype='success' effect=''color:colorinverse;color:#ffffff;
tqc.s.dtype='success' effect='dark'color:colorinverse;color:#ffffff;
tqc.s.ditype='success' effect='disabled'color:colorinverse;color:#ffffff;
tqc.s.ltype='success' effect='light'color:successnormal;color:#19be6b;
tqc.s.l.red or tqc.e..red or c.redtype='success' effect='light' color:redcolor:red;自定义颜色覆盖主题
tqc.ptype='primary' effect=''color:colorinverse;color:#ffffff;
tqc.p.dtype='primary' effect='dark'color:colorinverse;color:#ffffff;
tqc.p.ditype='primary' effect='disabled'color:colorinverse;color:#ffffff;
tqc.p.ltype='primary' effect='light'color:primarynormal;color:#2979ff;
tqc.p.l.red or tqc.e..red or c.redtype='primary' effect='light' color:redcolor:red;自定义颜色覆盖主题

圆角主题 ​

css说明style备注
tdrsize='' 等同于 size='medium'border-radius:radiusmedium;border-radius:16rpx;
tdr.misize='mini'border-radius:radiusmini;border-radius:8rpx;
tdr.ssize='small'border-radius:radiussmall;border-radius:12rpx;
tdr.msize='medium'(默认值)border-radius:radiusmedium;border-radius:16rpx;
tdr.lsize='large'border-radius:radiuslarge;border-radius:20rpx;
tdr.l.30
tdr.l.15px
r.25		size='large' size=30border-radius:30rpx;
border-radius:15px;
border-radius:25rpx;		自定义字体大小覆盖主题
tdr.l..usize='large' option='u'(左上角)border-top-left-radius:radiuslarge;border-top-left-radius:20rpx;
tdr.l..rsize='large' option='r'(右上角)border-top-right-radius:radiuslarge;border-top-left-radius:20rpx;
tdr.l..bsize='large' option='b'(右下角)border-bottom-right-radius:radiuslarge;border-top-left-radius:20rpx;
tdr.l..lsize='large' option='l'(左下角)border-bottom-left-radius:radiuslarge;border-top-left-radius:20rpx;
tdr.l..ur,tdr.l..bl,tdr.l..ulr,...size='large' option='ur'(u r b l 可自由组合)border-top-left-radius:radiuslarge;border-top-right-radius:radiuslarge;border-top-left-radius:20rpx;border-top-right-radius:20rpx;

外边距 ​

css说明style备注
tdmsize='' 等同于 size='medium'margin:radiusmedium;margin:16rpx;
tdm.misize='mini'margin:radiusmini;margin:8rpx;
tdm.ssize='small'margin:radiussmall;margin:12rpx;
tdm.msize='medium'(默认值)margin:radiusmedium;margin:16rpx;
tdm.lsize='large'margin:radiuslarge;margin:20rpx;
tdm.l.30
tdm.l.15px
r.25		size='large' size=30margin:30rpx;
margin:15px;
margin:25rpx;		自定义字体大小覆盖主题
tdm.l..tsize='large' option='t'margin-top:radiuslarge;margin-top:20rpx;
tdm.l..bsize='large' option='b'margin-bottom:radiuslarge;margin-top:20rpx;
tdm.l..lsize='large' option='l'margin-left:radiuslarge;margin-left:20rpx;
tdm.l..rsize='large' option='r'margin-right:radiuslarge;margin-right:20rpx;
tdm.l..ur,tdm.l..bl,tdm.l..ulr,...size='large' option='ur'(t b l r 可自由组合)margin-left:radiuslarge;margin-right:radiuslarge;margin-left:20rpx;margin-right:20rpx;

内边距 ​

css说明style备注
tdpsize='' 等同于 size='medium'padding:radiusmedium;padding:16rpx;
tdp.misize='mini'padding:radiusmini;padding:8rpx;
tdp.ssize='small'padding:radiussmall;padding:12rpx;
tdp.msize='medium'(默认值)padding:radiusmedium;padding:16rpx;
tdp.lsize='large'padding:radiuslarge;padding:20rpx;
tdp.l.30
tdp.l.15px
r.25		size='large' size=30padding:30rpx;
padding:15px;
padding:25rpx;		自定义字体大小覆盖主题
tdp.l..tsize='large' option='t'padding-top:radiuslarge;padding-top:20rpx;
tdp.l..bsize='large' option='b'padding-bottom:radiuslarge;padding-top:20rpx;
tdp.l..lsize='large' option='l'padding-left:radiuslarge;padding-left:20rpx;
tdp.l..rsize='large' option='r'padding-right:radiuslarge;padding-right:20rpx;
tdp.l..ur,tdp.l..bl,tdp.l..ulr,...size='large' option='ur'(t b l r 可自由组合)padding-left:radiuslarge;padding-right:radiuslarge;padding-left:20rpx;padding-right:20rpx;

边框 ​

css说明style备注
tbctype='' effect=''border:1px solid borderlightborder:1px solid #E4E7ED;
tbc.itype='info' effect='normal'border:1px solid infonormalborder:1px solid #909399;
tbc.i.dtype='info' effect='dark'border:1px solid infodarkborder:1px solid #82848a;
tbc.i.ditype='info' effect='disabled'border:1px solid infodisabledborder:1px solid #c8c9cc;
tbc.i.ltype='info' effect='light'border:1px solid infolightborder:1px solid #f4f4f5;
tbc.ptype='primary' effect='normal'border:1px solid primarynormalborder:1px solid #2979ff;
tbc.p.dtype='primary' effect='dark'border:1px solid primarydarkborder:1px solid #2b85e4;
tbc.p.ditype='primary' effect='disabled'border:1px solid primarydisabledborder:1px solid #a0cfff;
tbc.p.ltype='primary' effect='light'border:1px solid primarylightborder:1px solid #dcedff;
tbc.stype='success' effect='normal'border:1px solid successnormalborder:1px solid #19be6b;
tbc.s.dtype='success' effect='dark'border:1px solid successdarkborder:1px solid #18b566;
tbc.s.ditype='success' effect='disabled'border:1px solid successdisabledborder:1px solid #71d5a1;
tbc.s.ltype='success' effect='light'border:1px solid successlightborder:1px solid #DFEAE2;
tbc.wtype='warning' effect='normal'border:1px solid warningnormalborder:1px solid #ff9900;
tbc.w.dtype='warning' effect='dark'border:1px solid warningdarkborder:1px solid #f29100;
tbc.w.ditype='warning' effect='disabled'border:1px solid warningdisabledborder:1px solid #fcbd71;
tbc.w.ltype='warning' effect='light'border:1px solid warninglightborder:1px solid #fff1dd;
tbc.etype='error' effect='normal'border:1px solid errornormalborder:1px solid #fa3534;
tbc.e.dtype='error' effect='dark'border:1px solid errordarkborder:1px solid #dd6161;
tbc.e.ditype='error' effect='disabled'border:1px solid errordisabledborder:1px solid #fab6b6;
tbc.e.ltype='error' effect='light'border:1px solid errorlightborder:1px solid #ffe0e0;
tbc.e.l.red or tbc...red or bc.redtype='error' effect='light' color='red'border:1px solid red;自定义边框颜色覆盖主题色
tbc.e.l..ltype='error' effect='light' color='red' option='l'border-left:1px solid red;
tbc.e.l..rtype='error' effect='light' color='red' option='l'border-right:1px solid red;
tbc.e.l..ttype='error' effect='light' color='red' option='l'border-top:1px solid red;
tbc.e.l..btype='error' effect='light' color='red' option='l'border-bottom:1px solid red;
tbc.e.l..tb
tbc.e.l..lr
tbc.e.l..ltb		type='error' effect='light' color='red' option='l'border-bottom:1px solid red;第四个参数为方向可自由组合

文本主题尺寸 ​

css说明style备注
ttssize='medium'(默认值)font-size:sizemedium;font-size:28rpx;
tts.misize='mini'font-size:sizemedium;font-size:22rpx;
tts.ssize='sizesmall'font-size:sizemedium;font-size:24rpx;
tts.msize='medium'font-size:sizemedium;font-size:28rpx;
tts.lsize='sizelarge'font-size:sizemedium;font-size:36rpx;
tts.l.30
tts.l.15px
s.18		size='sizelarge' default=30font-size:30rpx;
font-size:15px;
font-size:18rpx;		自定义字体大小覆盖主题大小

页面背景 ​

css说明style备注
tpgbackground-color:bgcolorpage;background-color:#f8f8f8;

元素背景 ​

css说明style备注
tvgbackground-color:bgcolorview;background-color:#ffffff;