mpvue + ColorUI 使用文档-1 基础库

首先在根目录的app.js 引入样式。 然后就可以直接使用样式了

文字大小样式  text-xsl    text-sl    text-xxl    text-xl    text-lg    text-df    text-sm    text-xs

text-left    text-center    text-right

文字截断    text-cut

文字格式化处理 text-price    text-Abc text-ABC text-abc

头像样式 cu-avatar 

头像标签 cu-tag

可以内嵌图标或者文字  <div class="cu-avatar radius"> <text class="icon-people"></text> </div>

设置 图标尺寸  sm 默认 lg xl 

头像颜色   bg-red     bg-blue   bg-green  bg-yello

背景颜色 bg-mauve

渐变背景 bg-gradual-red    

图片背景    bg-img        图片遮罩    bg-mask          

透明背景遮罩   上面 bg-shadeTop    下面 bg-shadeBottom

按钮cu-btn    默认形状    圆角round    圆形icon

按钮尺寸  sm小尺寸        lg大尺寸

按钮背景色bg-blue  按钮阴影  shadow:'blue' 

linebordersize:'1'

<button class="cu-btn block bg-black margin-tb-sm " loading> 微信加载</button>

<button class="cu-btn block bg-blue margin-tb-sm lg" disabled type="">无效状态</button>

布局 固定尺寸  basis-xs     basis-df  basis-sm     basis-sub     basis-lg     basis-xl

布局比例    flex-sub    flex-twice    flex-treble

水瓶对齐方式    左对齐 justify-start        右对齐 justify-end        居中对齐 justify- ceter     两边对齐  justify-between     两列对齐 justify-around

垂直对齐    上对齐aliign-start    底对齐align-end    居中对齐align-center

等列分col-1    col-2

等高样式 grid  grid-square

浮动 fl     fr

辅助布局