本文根据ColorUI使用文档修改
本文仅用于个人学习记录整理
文字
使用
<view class="text-xsl">特大</view>
样式
.text-xs {font-size: 20rpx;}
.text-sm {font-size: 24rpx;}
.text-df {font-size: 28rpx;}
.text-lg {font-size: 32rpx;}
.text-xl {font-size: 36rpx;}
.text-xxl {font-size: 44rpx;}
.text-sl {font-size: 80rpx;}
.text-xsl {font-size: 120rpx;}
.text-cut {text-overflow: ellipsis;white-space: nowrap;overflow: hidden;}
.text-bold {font-weight: bold;}
.text-center {text-align: center;}
颜色样式
使用
<view class="text-xs text-red">小</view>
样式
--red(红色): #e54d42;
--orange(橙色): #f37b1d;
--yellow(黄色): #fbbd08;
--olive(橄榄): #8dc63f;
--green(绿色): #39b54a;
--cyan(青色): #1cbbb4;
--blue(蓝色): #0081ff;
--purple(紫色): #6739b6;
--mauve(紫红色): #9c26b0;
--pink(粉红色): #e03997;
--brown(棕色): #a5673f;
--grey(灰色): #8799a3;
--black(黑色): #333333;
--darkGray(深灰色): #666666;
--gray(灰色): #aaaaaa;
--ghostWhite(鬼白色): #f1f1f1;
--white(白色): #ffffff;
/* 浅色 */
--redLight(浅红色): #fadbd9;
--orangeLight(浅橙色): #fde6d2;
--yellowLight(浅黄色): #fef2ce;
--oliveLight(浅橄榄色): #e8f4d9;
--greenLight(浅绿色): #d7f0db;
--cyanLight(浅青色): #d2f1f0;
--blueLight(浅蓝色): #cce6ff;
--purpleLight(浅紫色): #e1d7f0;
--mauveLight(浅紫红色): #ebd4ef;
--pinkLight(浅粉红色): #f9d7ea;
--brownLight(浅棕色): #ede1d9;
--greyLight(浅灰色): #e7ebed;
/* 渐变色 */
--gradualRed(渐变红): linear-gradient(45deg, #f43f3b, #ec008c);
--gradualOrange(渐变橙): linear-gradient(45deg, #ff9700, #ed1c24);
--gradualGreen(渐变绿): linear-gradient(45deg, #39b54a, #8dc63f);
--gradualPurple(渐变紫): linear-gradient(45deg, #9000ff, #5e00ff);
布局
使用
<view class="flex flex-wrap">
<view class="basis-xs bg-grey margin-xs padding-sm radius">xs(20%)</view>
<view class="basis-df"></view>
<view class="basis-sm bg-grey margin-xs padding-sm radius">sm(40%)</view>
<view class="basis-df"></view>
<view class="basis-df bg-grey margin-xs padding-sm radius">sub(50%)</view>
<view class="basis-lg bg-grey margin-xs padding-sm radius">lg(60%)</view>
<view class="basis-xl bg-grey margin-xs padding-sm radius">xl(80%)</view>
</view>
样式
xs:10rpx;sm:20rpx;默认df:30rpx;lg:40rpx;xl:50rpx;
/* -- flex弹性布局 -- */
.flex {display: flex;}
.basis-xs {flex-basis: 20%;}
.basis-sm {flex-basis: 40%;}
.basis-df {flex-basis: 50%;}
.basis-lg {flex-basis: 60%;}
.basis-xl {flex-basis: 80%;}
.flex-sub {flex: 1;}
.flex-twice {flex: 2;}
.flex-treble {flex: 3;}
.flex-direction {flex-direction: column;}
.flex-wrap {flex-wrap: wrap;}
.align-start {align-items: flex-start;}
.align-end {align-items: flex-end;}
.align-center {align-items: center;}
.align-stretch {align-items: stretch;}
.self-start {align-self: flex-start;}
.self-center {align-self: flex-center;}
.self-end {align-self: flex-end;}
.self-stretch {align-self: stretch;}
.align-stretch {align-items: stretch;}
.justify-start {justify-content: flex-start;}
.justify-end {justify-content: flex-end;}
.justify-center {justify-content: center;}
.justify-between {justify-content: space-between;}
.justify-around {justify-content: space-around;}
/* grid布局 */
.grid {display: flex;flex-wrap: wrap;}
.grid.grid-square {overflow: hidden;}
.grid.grid-square .cu-tag {position: absolute;right: 0;top: 0;border-bottom-left-radius: 6rpx;padding: 6rpx 12rpx;height: auto;background-color: rgba(0, 0, 0, 0.5);}
.grid.grid-square>view>text[class*="cuIcon-"] {font-size: 52rpx;position: absolute;color: var(--grey);margin: auto;top: 0;bottom: 0;left: 0;right: 0;display: flex;justify-content: center;align-items: center;flex-direction: column;}
.grid.grid-square>view {margin-right: 20rpx;margin-bottom: 20rpx;border-radius: 6rpx;position: relative;overflow: hidden;}
.grid.grid-square>view.bg-img image {width: 100%;height: 100%;position: absolute;}
.grid.col-1.grid-square>view {padding-bottom: 100%;height: 0;margin-right: 0;}
.grid.col-2.grid-square>view {padding-bottom: calc((100% - 20rpx)/2);height: 0;width: calc((100% - 20rpx)/2);}
.grid.col-3.grid-square>view {padding-bottom: calc((100% - 40rpx)/3);height: 0;width: calc((100% - 40rpx)/3);}
.grid.col-4.grid-square>view {padding-bottom: calc((100% - 60rpx)/4);height: 0;width: calc((100% - 60rpx)/4);}
.grid.col-5.grid-square>view {padding-bottom: calc((100% - 80rpx)/5);height: 0;width: calc((100% - 80rpx)/5);}
.grid.col-2.grid-square>view:nth-child(2n),
.grid.col-3.grid-square>view:nth-child(3n),
.grid.col-4.grid-square>view:nth-child(4n),
.grid.col-5.grid-square>view:nth-child(5n){margin-right: 0;}
.grid.col-1>view {width: 100%;}
.grid.col-2>view {width: 50%;}
.grid.col-3>view {width: 33.33%;}
.grid.col-4>view {width: 25%;}
.grid.col-5>view {width: 20%;}
/* -- 内外边距 -- */
.margin-0 {margin: 0;}
.margin-xs {margin: 10rpx;}
.margin-sm {margin: 20rpx;}
.margin {margin: 30rpx;}
.margin-lg {margin: 40rpx;}
.margin-xl {margin: 50rpx;}
.margin-top-xs {margin-top: 10rpx;}
.margin-top-sm {margin-top: 20rpx;}
.margin-top {margin-top: 30rpx;}
.margin-top-lg {margin-top: 40rpx;}
.margin-top-xl {margin-top: 50rpx;}
.margin-right-xs {margin-right: 10rpx;}
.margin-right-sm {margin-right: 20rpx;}
.margin-right {margin-right: 30rpx;}
.margin-right-lg {margin-right: 40rpx;}
.margin-right-xl {margin-right: 50rpx;}
.margin-bottom-xs {margin-bottom: 10rpx;}
.margin-bottom-sm {margin-bottom: 20rpx;}
.margin-bottom {margin-bottom: 30rpx;}
.margin-bottom-lg {margin-bottom: 40rpx;}
.margin-bottom-xl {margin-bottom: 50rpx;}
.margin-left-xs {margin-left: 10rpx;}
.margin-left-sm {margin-left: 20rpx;}
.margin-left {margin-left: 30rpx;}
.margin-left-lg {margin-left: 40rpx;}
.margin-left-xl {margin-left: 50rpx;}
.margin-lr-xs {margin-left: 10rpx;margin-right: 10rpx;}
.margin-lr-sm {margin-left: 20rpx;margin-right: 20rpx;}
.margin-lr {margin-left: 30rpx;margin-right: 30rpx;}
.margin-lr-lg {margin-left: 40rpx;margin-right: 40rpx;}
.margin-lr-xl {margin-left: 50rpx;margin-right: 50rpx;}
.margin-tb-xs {margin-top: 10rpx;margin-bottom: 10rpx;}
.margin-tb-sm {margin-top: 20rpx;margin-bottom: 20rpx;}
.margin-tb {margin-top: 30rpx;margin-bottom: 30rpx;}
.margin-tb-lg {margin-top: 40rpx;margin-bottom: 40rpx;}
.margin-tb-xl {margin-top: 50rpx;margin-bottom: 50rpx;}
.padding-0 {padding: 0;}
.padding-xs {padding: 10rpx;}
.padding-sm {padding: 20rpx;}
.padding {padding: 30rpx;}
.padding-lg {padding: 40rpx;}
.padding-xl {padding: 50rpx;}
.padding-top-xs {padding-top: 10rpx;}
.padding-top-sm {padding-top: 20rpx;}
.padding-top {padding-top: 30rpx;}
.padding-top-lg {padding-top: 40rpx;}
.padding-top-xl {padding-top: 50rpx;}
.padding-right-xs {padding-right: 10rpx;}
.padding-right-sm {padding-right: 20rpx;}
.padding-right {padding-right: 30rpx;}
.padding-right-lg {padding-right: 40rpx;}
.padding-right-xl {padding-right: 50rpx;}
.padding-bottom-xs {padding-bottom: 10rpx;}
.padding-bottom-sm {padding-bottom: 20rpx;}
.padding-bottom {padding-bottom: 30rpx;}
.padding-bottom-lg {padding-bottom: 40rpx;}
.padding-bottom-xl {padding-bottom: 50rpx;}
.padding-left-xs {padding-left: 10rpx;}
.padding-left-sm {padding-left: 20rpx;}
.padding-left {padding-left: 30rpx;}
.padding-left-lg {padding-left: 40rpx;}
.padding-left-xl {padding-left: 50rpx;}
.padding-lr-xs {padding-left: 10rpx;padding-right: 10rpx;}
.padding-lr-sm {padding-left: 20rpx;padding-right: 20rpx;}
.padding-lr {padding-left: 30rpx;padding-right: 30rpx;}
.padding-lr-lg {padding-left: 40rpx;padding-right: 40rpx;}
.padding-lr-xl {padding-left: 50rpx;padding-right: 50rpx;}
.padding-tb-xs {padding-top: 10rpx;padding-bottom: 10rpx;}
.padding-tb-sm {padding-top: 20rpx;padding-bottom: 20rpx;}
.padding-tb {padding-top: 30rpx;padding-bottom: 30rpx;}
.padding-tb-lg {padding-top: 40rpx;padding-bottom: 40rpx;}
.padding-tb-xl {padding-top: 50rpx;padding-bottom: 50rpx;}
按钮
按钮属性
cu-btn
加圆:round
大小:sm lg
背景颜色:bg-red
镂空:line-red
块状:``
<button class="cu-btn bg-red margin-tb-sm lg">块状</button>
按钮加图标:
<button class="cu-btn block margin-tb-sm line-orange lg"><text class="cuIcon-upload"></text>图标</button>
标签
cuIcon-title
是圆形 cuIcon-titles
是竖线
蓝点加标题文字
<view class="action">
<text class="cuIcon-title text-blue"></text>标签形状
</view>
竖线加标题文字
<view class="action">
<text class="cuIcon-titles text-orange"></text> 默认 </view>
</view>
按钮属性cu-tag
加圆:round
大小:sm lg
背景颜色:bg-red
镂空:line-red
右上角徽章:cu-tag badge
胶囊图标样式
<view class="cu-capsule round"> <view class="cu-tag bg-blue "> <text class="cuIcon-likefill"></text> </view> <view class="cu-tag line-blue"> 23 </view> </view>
阴影
shadow
翘边阴影:shadow-warp
长阴影: shadow-blur
使用
<view class="padding-xl radius shadow shadow-lg bg-blue margin-top">长阴影</view>
<view class="padding-xl radius shadow-blur bg-red margin-top bg-img" style="background-image:url(https://ossweb-img.qq.com/images/lol/web201310/skin/big91005.jpg);">
<view>根据背景图而改变的阴影</view>
</view>
模态框
普通带x模态框
<template>
<view>
<view class="cu-bar bg-white margin-top">
<view class="action">
<text class="cuIcon-title text-orange "></text> 普通窗口
</view>
<view class="action">
<button class="cu-btn bg-green shadow" @tap="showModal" data-target="Modal">Modal</button>
</view>
</view>
<view class="cu-modal" :class="modalName=='Modal'?'show':''">
<view class="cu-dialog">
<view class="cu-bar bg-white justify-end">
<view class="content">Modal标题</view>
<view class="action" @tap="hideModal">
<text class="cuIcon-close text-red"></text>
</view>
</view>
<view class="padding-xl">
Modal 内容。
</view>
</view>
</view>
</view>
</template>
<script>
export default {
data() {
return {
modalName: null,
};
},
methods: {
showModal(e) {
this.modalName = e.currentTarget.dataset.target
},
hideModal(e) {
this.modalName = null
},
}
}
</script>
支付多选模态框
<view class="cu-modal bottom-modal {{modalName=='ChooseModal'?'show':''}}" bindtap="hideModal">
<view class="cu-dialog" catchtap>
<view class="cu-bar bg-white">
<view class="action text-blue" bindtap="hideModal">取消</view>
<view class="action text-green" bindtap="hideModal">确定</view>
</view>
<view class="grid col-3 padding-sm">
<view wx:for="{{checkbox}}" class="padding-xs" wx:key="{{index}}">
<button class="cu-btn orange lg block {{item.checked?'bg-orange':'line-orange'}}" bindtap="ChooseCheckbox" data-value="{{item.value}}"> {{item.name}}
<view class="cu-tag sm round {{item.checked?'bg-white text-orange':'bg-orange'}}" wx:if="{{item.hot}}">HOT</view>
</button>
</view>
</view>
</view>
</view>
轮播图
卡片式轮播图
<template>
<view>
<swiper class="card-swiper {{DotStyle?'square-dot':'round-dot'}}" indicator-dots="true" circular="true" autoplay="true" interval="5000" duration="500" bindchange="cardSwiper" indicator-color="#8799a3" indicator-active-color="#0081ff">
<swiper-item wx:for="{{swiperList}}" wx:key class="{{cardCur==index?'cur':''}}">
<view class="swiper-item">
<image src="{{item.url}}" mode="aspectFill" wx:if="{{item.type=='image'}}"></image>
<video src="{{item.url}}" autoplay loop muted show-play-btn="{{false}}" controls="{{false}}" objectFit="cover" wx:if="{{item.type=='video'}}"></video>
</view>
</swiper-item>
</swiper>
</view>
</template>
<script>
export default {
data() {
return {
cardCur: 0,
swiperList: [
{id: 0,type: 'image',url: 'https://ossweb-img.qq.com/images/lol/web201310/skin/big84000.jpg'},
{id: 1,type: 'image',url: 'https://ossweb-img.qq.com/images/lol/web201310/skin/big37006.jpg'},
{id: 2,type: 'image',url: 'https://ossweb-img.qq.com/images/lol/web201310/skin/big39000.jpg'},
{id: 3,type: 'image',url: 'https://ossweb-img.qq.com/images/lol/web201310/skin/big10001.jpg'},
{id: 4,type: 'image',url: 'https://ossweb-img.qq.com/images/lol/web201310/skin/big25011.jpg'},
{id: 5,type: 'image',url: 'https://ossweb-img.qq.com/images/lol/web201310/skin/big21016.jpg'},
{id: 6,type: 'image',url: 'https://ossweb-img.qq.com/images/lol/web201310/skin/big99008.jpg'}],
dotStyle: false,
};
},
methods: {
// cardSwiper
cardSwiper(e) {
this.cardCur = e.detail.current
},
}
}
</script>
导航栏
tab中有图标
<template>
<view>
<view class="cu-item {{0==TabCur?'text-white cur':''}}" bindtap="tabSelect" data-id="0"><text class="cuIcon-camerafill"></text> 数码</view>
<view class="cu-item {{1==TabCur?'text-white cur':''}}" bindtap="tabSelect" data-id="1"><text class="cuIcon-upstagefill"></text> 排行榜</view>
<view class="cu-item {{2==TabCur?'text-white cur':''}}" bindtap="tabSelect" data-id="2"><text class="cuIcon-clothesfill"></text> 皮肤</view>
</view>
</template>
<script>
export default {
data() {
return {
TabCur: 0,
scrollLeft: 0
};
},
methods: {
tabSelect(e) {
this.TabCur = e.currentTarget.dataset.id;
this.scrollLeft = (e.currentTarget.dataset.id - 1) * 60
}
}
}
</script>
表单
<form>
<view class="cu-form-group margin-top">
<view class="title">邮件</view>
<input placeholder="短标题"></input>
</view>
<view class="cu-form-group">
<view class="title">验证码</view>
<input placeholder="输入框带个按钮"></input>
<button class="cu-btn bg-green shadow">验证码</button>
</view>
<view class="cu-bar bg-white margin-top">
<view class="action"> 图片上传 </view>
<view class="action"> {{imgList.length}}/4 </view>
</view>
<view class="cu-form-group">
<view class="grid col-4 grid-square flex-sub">
<view class="bg-img" wx:for="{{imgList}}" wx:key="{{index}}" bindtap="ViewImage" data-url="{{imgList[index]}}">
<image src='{{imgList[index]}}' mode='aspectFill'></image>
<view class="cu-tag bg-red" catchtap="DelImg" data-index="{{index}}">
<text class="cuIcon-close"></text>
</view>
</view>
<view class="solids" bindtap="ChooseImage" wx:if="{{imgList.length<4}}">
<text class="cuIcon-cameraadd"></text>
</view>
</view>
<view class="cu-form-group margin-top">
<textarea maxlength="-1" disabled="{{modalName!=null}}" bindinput="textareaAInput" placeholder="多行文本输入框></textarea>
</view>
<view class="cu-form-group align-start">
<view class="title">文本框</view>
<textarea maxlength="-1" disabled="{{modalName!=null}}" bindinput="textareaBInput" placeholder="多行文本输入框"></textarea>
</view>
</form>
辅助样式
实线
.solid,
.solid-top,
.solid-right,
.solid-bottom,
.solid-left
2.虚线
dashed