本文档详细介绍了ColorUI的颜色样式、字体大小、布局规范，包括弹性布局、网格系统、按钮样式、图标、导航栏、列表和表单等组件的用法及定制选项。
colorui 文档
文字
.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;
}
颜色样式
--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);
布局
/* ==================
布局
==================== */
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
胶囊图标样式
<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>
右上角徽章：cu-tag badge
阴影
shadow
翘边阴影：shadow-warp
长阴影： shadow-blur
模态框
普通带x模态框
<view class="cu-modal {{modalName=='Modal'?'show':''}}"> <view class="cu-dialog"> <view class="cu-bar bg-white justify-end"> <view class="content">Modal标题</view> <view class="action" bindtap="hideModal"> <text class="cuIcon-close text-red"></text> </view> </view> <view class="padding-xl"> Modal 内容。 </view> </view> </view>
支付多选模态框
<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>
轮播图
卡片式轮播图
<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>
导航栏
tab
<view class="flex text-center"> <view class="cu-item flex-sub {{index==TabCur?'text-orange cur':''}}" wx:for="{{4}}" wx:key bindtap="tabSelect" data-id="{{index}}"> Tab{{index}} </view> </view>
tab中有图标
<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 class="cu-item arrow"> <navigator class="content" url="/pages/about/about/about" hover-class="none"> <image src="/images/logo.png" class="png" mode="aspectFit"></image> <text class="">关于ColorUI组件库</text> </navigator> </view> <view class="cu-item arrow"> <navigator class="content" url="/pages/about/log/log" hover-class="none"> <text class="cuIcon-formfill text-green"></text> <text class="">日志</text> </navigator> </view> <view class="cu-item arrow"> <view class="content" bindtap="showQrcode"> <text class="cuIcon-appreciatefill text-red"></text> <text class="text-grey">赞赏支持</text> </view> </view> <view class="cu-item arrow"> <button class="cu-btn content" open-type="feedback"> <text class="cuIcon-writefill text-cyan"></text> <text class="text-grey">意见反馈</text> </button> </view> <view class="cu-item arrow"> <navigator class="content" url="/pages/about/test/list" hover-class="none"> <text class="cuIcon-creativefill text-orange"></text> <text class="text-grey">Bug测试</text> </navigator> </view>
不带>的列表
<view class="cu-list menu {{menuBorder?'sm-border':''}} {{menuCard?'card-menu margin-top':''}}"> <view class="cu-item {{menuArrow?'arrow':''}}"> <view class="content"> <text class="cuIcon-circlefill text-grey"></text> <text class="text-grey">图标 + 标题</text> </view> </view> <view class="cu-item {{menuArrow?'arrow':''}}"> <view class="content"> <image src="/images/logo.png" class="png" mode="aspectFit"></image> <text class="text-grey">图片 + 标题</text> </view> </view> <view class="cu-item {{menuArrow?'arrow':''}}"> <button class="cu-btn content" open-type="contact"> <text class="cuIcon-btn text-olive"></text> <text class="text-grey">Open-type 按钮</text> </button> </view> <view class="cu-item {{menuArrow?'arrow':''}}"> <navigator class="content" hover-class="none" url="../list/list" open-type="redirect"> <text class="cuIcon-discoverfill text-orange"></text> <text class="text-grey">Navigator 跳转</text> </navigator> </view></view>
带状态切换switch
<view class="cu-item"> <view class="content padding-tb-sm"> <view> <text class="cuIcon-clothesfill text-blue margin-right-xs"></text> 多行Item</view> <view class="text-gray text-sm"> <text class="cuIcon-infofill margin-right-xs"></text> 小目标还没有实现！</view> </view> <view class="action"> <switch class="switch-sex sm" bindchange="switchSex"></switch> </view> </view>
表单
表单
<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>
图标
icon: [{ name: 'appreciate', isShow: true }, { name: 'check', isShow: true }, { name: 'close', isShow: true }, { name: 'edit', isShow: true }, { name: 'emoji', isShow: true }, { name: 'favorfill', isShow: true }, { name: 'favor', isShow: true }, { name: 'loading', isShow: true }, { name: 'locationfill', isShow: true }, { name: 'location', isShow: true }, { name: 'phone', isShow: true }, { name: 'roundcheckfill', isShow: true }, { name: 'roundcheck', isShow: true }, { name: 'roundclosefill', isShow: true }, { name: 'roundclose', isShow: true }, { name: 'roundrightfill', isShow: true }, { name: 'roundright', isShow: true }, { name: 'search', isShow: true }, { name: 'taxi', isShow: true }, { name: 'timefill', isShow: true }, { name: 'time', isShow: true }, { name: 'unfold', isShow: true }, { name: 'warnfill', isShow: true }, { name: 'warn', isShow: true }, { name: 'camerafill', isShow: true }, { name: 'camera', isShow: true }, { name: 'commentfill', isShow: true }, { name: 'comment', isShow: true }, { name: 'likefill', isShow: true }, { name: 'like', isShow: true }, { name: 'notificationfill', isShow: true }, { name: 'notification', isShow: true }, { name: 'order', isShow: true }, { name: 'samefill', isShow: true }, { name: 'same', isShow: true }, { name: 'deliver', isShow: true }, { name: 'evaluate', isShow: true }, { name: 'pay', isShow: true }, { name: 'send', isShow: true }, { name: 'shop', isShow: true }, { name: 'ticket', isShow: true }, { name: 'back', isShow: true }, { name: 'cascades', isShow: true }, { name: 'discover', isShow: true }, { name: 'list', isShow: true }, { name: 'more', isShow: true }, { name: 'scan', isShow: true }, { name: 'settings', isShow: true }, { name: 'questionfill', isShow: true }, { name: 'question', isShow: true }, { name: 'shopfill', isShow: true }, { name: 'form', isShow: true }, { name: 'pic', isShow: true }, { name: 'filter', isShow: true }, { name: 'footprint', isShow: true }, { name: 'top', isShow: true }, { name: 'pulldown', isShow: true }, { name: 'pullup', isShow: true }, { name: 'right', isShow: true }, { name: 'refresh', isShow: true }, { name: 'moreandroid', isShow: true }, { name: 'deletefill', isShow: true }, { name: 'refund', isShow: true }, { name: 'cart', isShow: true }, { name: 'qrcode', isShow: true }, { name: 'remind', isShow: true }, { name: 'delete', isShow: true }, { name: 'profile', isShow: true }, { name: 'home', isShow: true }, { name: 'cartfill', isShow: true }, { name: 'discoverfill', isShow: true }, { name: 'homefill', isShow: true }, { name: 'message', isShow: true }, { name: 'addressbook', isShow: true }, { name: 'link', isShow: true }, { name: 'lock', isShow: true }, { name: 'unlock', isShow: true }, { name: 'vip', isShow: true }, { name: 'weibo', isShow: true }, { name: 'activity', isShow: true }, { name: 'friendaddfill', isShow: true }, { name: 'friendadd', isShow: true }, { name: 'friendfamous', isShow: true }, { name: 'friend', isShow: true }, { name: 'goods', isShow: true }, { name: 'selection', isShow: true }, { name: 'explore', isShow: true }, { name: 'present', isShow: true }, { name: 'squarecheckfill', isShow: true }, { name: 'square', isShow: true }, { name: 'squarecheck', isShow: true }, { name: 'round', isShow: true }, { name: 'roundaddfill', isShow: true }, { name: 'roundadd', isShow: true }, { name: 'add', isShow: true }, { name: 'notificationforbidfill', isShow: true }, { name: 'explorefill', isShow: true }, { name: 'fold', isShow: true }, { name: 'game', isShow: true }, { name: 'redpacket', isShow: true }, { name: 'selectionfill', isShow: true }, { name: 'similar', isShow: true }, { name: 'appreciatefill', isShow: true }, { name: 'infofill', isShow: true }, { name: 'info', isShow: true }, { name: 'forwardfill', isShow: true }, { name: 'forward', isShow: true }, { name: 'rechargefill', isShow: true }, { name: 'recharge', isShow: true }, { name: 'vipcard', isShow: true }, { name: 'voice', isShow: true }, { name: 'voicefill', isShow: true }, { name: 'friendfavor', isShow: true }, { name: 'wifi', isShow: true }, { name: 'share', isShow: true }, { name: 'wefill', isShow: true }, { name: 'we', isShow: true }, { name: 'lightauto', isShow: true }, { name: 'lightforbid', isShow: true }, { name: 'lightfill', isShow: true }, { name: 'camerarotate', isShow: true }, { name: 'light', isShow: true }, { name: 'barcode', isShow: true }, { name: 'flashlightclose', isShow: true }, { name: 'flashlightopen', isShow: true }, { name: 'searchlist', isShow: true }, { name: 'service', isShow: true }, { name: 'sort', isShow: true }, { name: 'down', isShow: true }, { name: 'mobile', isShow: true }, { name: 'mobilefill', isShow: true }, { name: 'copy', isShow: true }, { name: 'countdownfill', isShow: true }, { name: 'countdown', isShow: true }, { name: 'noticefill', isShow: true }, { name: 'notice', isShow: true }, { name: 'upstagefill', isShow: true }, { name: 'upstage', isShow: true }, { name: 'babyfill', isShow: true }, { name: 'baby', isShow: true }, { name: 'brandfill', isShow: true }, { name: 'brand', isShow: true }, { name: 'choicenessfill', isShow: true }, { name: 'choiceness', isShow: true }, { name: 'clothesfill', isShow: true }, { name: 'clothes', isShow: true }, { name: 'creativefill', isShow: true }, { name: 'creative', isShow: true }, { name: 'female', isShow: true }, { name: 'keyboard', isShow: true }, { name: 'male', isShow: true }, { name: 'newfill', isShow: true }, { name: 'new', isShow: true }, { name: 'pullleft', isShow: true }, { name: 'pullright', isShow: true }, { name: 'rankfill', isShow: true }, { name: 'rank', isShow: true }, { name: 'bad', isShow: true }, { name: 'cameraadd', isShow: true }, { name: 'focus', isShow: true }, { name: 'friendfill', isShow: true }, { name: 'cameraaddfill', isShow: true }, { name: 'apps', isShow: true }, { name: 'paintfill', isShow: true }, { name: 'paint', isShow: true }, { name: 'picfill', isShow: true }, { name: 'refresharrow', isShow: true }, { name: 'colorlens', isShow: true }, { name: 'markfill', isShow: true }, { name: 'mark', isShow: true }, { name: 'presentfill', isShow: true }, { name: 'repeal', isShow: true }, { name: 'album', isShow: true }, { name: 'peoplefill', isShow: true }, { name: 'people', isShow: true }, { name: 'servicefill', isShow: true }, { name: 'repair', isShow: true }, { name: 'file', isShow: true }, { name: 'repairfill', isShow: true }, { name: 'taoxiaopu', isShow: true }, { name: 'weixin', isShow: true }, { name: 'attentionfill', isShow: true }, { name: 'attention', isShow: true }, { name: 'commandfill', isShow: true }, { name: 'command', isShow: true }, { name: 'communityfill', isShow: true }, { name: 'community', isShow: true }, { name: 'read', isShow: true }, { name: 'calendar', isShow: true }, { name: 'cut', isShow: true }, { name: 'magic', isShow: true }, { name: 'backwardfill', isShow: true }, { name: 'playfill', isShow: true }, { name: 'stop', isShow: true }, { name: 'tagfill', isShow: true }, { name: 'tag', isShow: true }, { name: 'group', isShow: true }, { name: 'all', isShow: true }, { name: 'backdelete', isShow: true }, { name: 'hotfill', isShow: true }, { name: 'hot', isShow: true }, { name: 'post', isShow: true }, { name: 'radiobox', isShow: true }, { name: 'rounddown', isShow: true }, { name: 'upload', isShow: true }, { name: 'writefill', isShow: true }, { name: 'write', isShow: true }, { name: 'radioboxfill', isShow: true }, { name: 'punch', isShow: true }, { name: 'shake', isShow: true }, { name: 'move', isShow: true }, { name: 'safe', isShow: true }, { name: 'activityfill', isShow: true }, { name: 'crownfill', isShow: true }, { name: 'crown', isShow: true }, { name: 'goodsfill', isShow: true }, { name: 'messagefill', isShow: true }, { name: 'profilefill', isShow: true }, { name: 'sound', isShow: true }, { name: 'sponsorfill', isShow: true }, { name: 'sponsor', isShow: true }, { name: 'upblock', isShow: true }, { name: 'weblock', isShow: true }, { name: 'weunblock', isShow: true }, { name: 'my', isShow: true }, { name: 'myfill', isShow: true }, { name: 'emojifill', isShow: true }, { name: 'emojiflashfill', isShow: true }, { name: 'flashbuyfill', isShow: true }, { name: 'text', isShow: true }, { name: 'goodsfavor', isShow: true }, { name: 'musicfill', isShow: true }, { name: 'musicforbidfill', isShow: true }, { name: 'card', isShow: true }, { name: 'triangledownfill', isShow: true }, { name: 'triangleupfill', isShow: true }, { name: 'roundleftfill-copy', isShow: true }, { name: 'font', isShow: true }, { name: 'title', isShow: true }, { name: 'recordfill', isShow: true }, { name: 'record', isShow: true }, { name: 'cardboardfill', isShow: true }, { name: 'cardboard', isShow: true }, { name: 'formfill', isShow: true }, { name: 'coin', isShow: true }, { name: 'cardboardforbid', isShow: true }, { name: 'circlefill', isShow: true }, { name: 'circle', isShow: true }, { name: 'attentionforbid', isShow: true }, { name: 'attentionforbidfill', isShow: true }, { name: 'attentionfavorfill', isShow: true }, { name: 'attentionfavor', isShow: true }, { name: 'titles', isShow: true }, { name: 'icloading', isShow: true }, { name: 'full', isShow: true }, { name: 'mail', isShow: true }, { name: 'peoplelist', isShow: true }, { name: 'goodsnewfill', isShow: true }, { name: 'goodsnew', isShow: true }, { name: 'medalfill', isShow: true }, { name: 'medal', isShow: true }, { name: 'newsfill', isShow: true }, { name: 'newshotfill', isShow: true }, { name: 'newshot', isShow: true }, { name: 'news', isShow: true }, { name: 'videofill', isShow: true }, { name: 'video', isShow: true }, { name: 'exit', isShow: true }, { name: 'skinfill', isShow: true }, { name: 'skin', isShow: true }, { name: 'moneybagfill', isShow: true }, { name: 'usefullfill', isShow: true }, { name: 'usefull', isShow: true }, { name: 'moneybag', isShow: true }, { name: 'redpacket\_fill', isShow: true }, { name: 'subscription', isShow: true }, { name: 'loading1', isShow: true }, { name: 'github', isShow: true }, { name: 'global', isShow: true }, { name: 'settingsfill', isShow: true }, { name: 'back\_android', isShow: true }, { name: 'expressman', isShow: true }, { name: 'evaluate\_fill', isShow: true }, { name: 'group\_fill', isShow: true }, { name: 'play\_forward\_fill', isShow: true }, { name: 'deliver\_fill', isShow: true }, { name: 'notice\_forbid\_fill', isShow: true }, { name: 'fork', isShow: true }, { name: 'pick', isShow: true }, { name: 'wenzi', isShow: true }, { name: 'ellipse', isShow: true }, { name: 'qr\_code', isShow: true }, { name: 'dianhua', isShow: true }, { name: 'icon', isShow: true }, { name: 'loading2', isShow: true }, { name: 'btn', isShow: true }\]
辅助样式
1.实线
.solid,
.solid-top,
.solid-right,
.solid-bottom,
.solid-left
2.虚线
dashed
扫一扫
641
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
