molong/coloruicss
1
0
Fork 0
mirror of https://github.com/weilanwl/coloruicss.git synced 2026-06-08 15:23:17 +08:00
Code Issues Packages Projects Releases Wiki Activity

v2.1.2

Browse Source
This commit is contained in:
Weilanwl
2019-03-28 23:08:35 +08:00
parent 89817a88e8
commit bb889509c0
108 changed files with 3446 additions and 4082 deletions
Download Patch File Download Diff File Expand all files Collapse all files
demo/pages/basics/avatar/avatar.js
+7 -9
View File
@@ -1,14 +1,12 @@
const app = getApp();
Page({
data: {
StatusBar: app.globalData.StatusBar,
CustomBar: app.globalData.CustomBar,
ColorList: app.globalData.ColorList,
},
onLoad: function() {},
pageBack() {
wx.navigateBack({
delta: 1
});
avatar: [
'https://ossweb-img.qq.com/images/lol/web201310/skin/big10001.jpg',
'https://ossweb-img.qq.com/images/lol/web201310/skin/big81005.jpg',
'https://ossweb-img.qq.com/images/lol/web201310/skin/big25002.jpg',
'https://ossweb-img.qq.com/images/lol/web201310/skin/big91012.jpg'
],
}
});
})
demo/pages/basics/avatar/avatar.wxml
+26 -32
View File
@@ -1,29 +1,23 @@
<view class="cu-custom" style="height:{{CustomBar}}px;">
<view class="cu-bar fixed bg-gradual-blue" style="height:{{CustomBar}}px;padding-top:{{StatusBar}}px;">
<navigator class='action' open-type="navigateBack" delta="1" hover-class="none">
<text class='icon-back'></text> 头像
</navigator>
</view>
</view>
<cu-custom bgColor="bg-gradual-blue" isBack="{{true}}"><view slot="backText">返回</view><view slot="content">头像</view></cu-custom>
<view class="cu-bar bg-white">
<view class='action'>
<text class='icon-title text-blue'></text>头像形状
<view class="action">
<text class="icon-title text-blue"></text>头像形状
</view>
</view>
<view class="padding">
<view class="cu-avatar round" style="background-image:url(https://image.weilanwl.com/img/square-1.jpg);"></view>
<view class="cu-avatar radius margin-left" style="background-image:url(https://image.weilanwl.com/img/square-2.jpg);"></view>
<view class="cu-avatar round" style="background-image:url(https://ossweb-img.qq.com/images/lol/web201310/skin/big10001.jpg);"></view>
<view class="cu-avatar radius margin-left" style="background-image:url(https://ossweb-img.qq.com/images/lol/web201310/skin/big81005.jpg);"></view>
</view>
<view class="cu-bar bg-white margin-top">
<view class='action'>
<text class='icon-title text-blue'></text>头像尺寸
<view class="action">
<text class="icon-title text-blue"></text>头像尺寸
</view>
</view>
<view class="padding">
<view class="cu-avatar sm round margin-left" style="background-image:url(https://image.weilanwl.com/img/square-1.jpg);"></view>
<view class="cu-avatar round margin-left" style="background-image:url(https://image.weilanwl.com/img/square-2.jpg);"></view>
<view class="cu-avatar lg round margin-left" style="background-image:url(https://image.weilanwl.com/img/square-3.jpg);"></view>
<view class="cu-avatar xl round margin-left" style="background-image:url(https://image.weilanwl.com/img/square-4.jpg);"></view>
<view class="cu-avatar sm round margin-left" style="background-image:url(https://ossweb-img.qq.com/images/lol/web201310/skin/big10001.jpg);"></view>
<view class="cu-avatar round margin-left" style="background-image:url(https://ossweb-img.qq.com/images/lol/web201310/skin/big81005.jpg);"></view>
<view class="cu-avatar lg round margin-left" style="background-image:url(https://ossweb-img.qq.com/images/lol/web201310/skin/big25002.jpg);"></view>
<view class="cu-avatar xl round margin-left" style="background-image:url(https://ossweb-img.qq.com/images/lol/web201310/skin/big99008.jpg);"></view>
</view>
<view class="padding">
<view class="cu-avatar sm round margin-left bg-red"> A</view>
@@ -38,17 +32,17 @@
<text>wl</text>
</view>
<view class="cu-avatar xl round margin-left bg-red">
<text class='avatar-text'>网络</text>
<text class="avatar-text">网络</text>
</view>
</view>
<view class="cu-bar bg-white margin-top">
<view class='action'>
<text class='icon-title text-blue'></text>内嵌文字(图标)
<view class="action">
<text class="icon-title text-blue"></text>内嵌文字(图标)
</view>
</view>
<view class="padding">
<view class="cu-avatar radius">
<text class='icon-people'></text>
<text class="icon-people"></text>
</view>
<view class="cu-avatar radius margin-left">
<text>港</text>
@@ -56,33 +50,33 @@
</view>
<view class="cu-bar bg-white margin-top">
<view class='action'>
<text class='icon-title text-blue'></text>头像颜色
<view class="action">
<text class="icon-title text-blue"></text>头像颜色
</view>
</view>
<view class="padding-sm">
<view class="cu-avatar round lg bg-{{item.name}} margin-xs" wx:for="{{ColorList}}" wx:key>
<text class='avatar-text'>{{item.name}}</text>
<text class="avatar-text">{{item.name}}</text>
</view>
</view>
<view class="cu-bar bg-white margin-top">
<view class='action'>
<text class='icon-title text-blue'></text>头像组
<view class="action">
<text class="icon-title text-blue"></text>头像组
</view>
</view>
<view class='padding'>
<view class="padding">
<view class="cu-avatar-group">
<view class="cu-avatar round lg" wx:for="{{4}}" wx:key style="background-image:url(https://image.weilanwl.com/img/square-{{index+1}}.jpg);"></view>
<view class="cu-avatar round lg" wx:for="{{4}}" wx:key style="background-image:url(https://ossweb-img.qq.com/images/lol/web201310/skin/big1000{{index+1}}.jpg);"></view>
</view>
</view>
<view class="cu-bar bg-white margin-top">
<view class='action'>
<text class='icon-title text-blue'></text>头像标签
<view class="action">
<text class="icon-title text-blue"></text>头像标签
</view>
</view>
<view class='padding'>
<view class="cu-avatar round lg margin-left" wx:for="{{4}}" wx:key style="background-image:url(https://image.weilanwl.com/img/square-{{index+1}}.jpg);">
<view class="padding">
<view class="cu-avatar round lg margin-left" wx:for="{{4}}" wx:key style="background-image:url(https://ossweb-img.qq.com/images/lol/web201310/skin/big1000{{index+1}}.jpg);">
<view class="cu-tag badge {{index%2==0?'icon-female bg-pink':'icon-male bg-blue'}}"></view>
</view>
</view>
demo/pages/basics/avatar/avatar.wxss
-1
View File
@@ -1 +0,0 @@
/* pages/basics/avatar/avatar.wxss */
demo/pages/basics/background/background.js
+2 -7
View File
@@ -1,11 +1,6 @@
const app = getApp();
Page({
data: {
StatusBar: app.globalData.StatusBar,
CustomBar: app.globalData.CustomBar,
ColorList: app.globalData.ColorList,
},
onLoad: function() {},
ColorList: app.globalData.ColorList
}
})
demo/pages/basics/background/background.wxml
+65 -73
View File
@@ -1,130 +1,122 @@
<view class="cu-custom" style="height:{{CustomBar}}px;">
<view class="cu-bar fixed bg-gradual-blue" style="height:{{CustomBar}}px;padding-top:{{StatusBar}}px;">
<navigator class='action' open-type="navigateBack" delta="1" hover-class="none">
<text class='icon-back'></text> 背景颜色
</navigator>
</view>
</view>
<cu-custom bgColor="bg-gradual-blue" isBack="{{true}}">
<view slot="backText">返回</view>
<view slot="content">背景颜色</view>
</cu-custom>
<view class="cu-bar bg-white solid-bottom">
<view class='action'>
<text class='icon-title text-blue'></text>深色背景
<view class="action">
<text class="icon-title text-blue"></text>深色背景
</view>
</view>
<view class='grid col-3 padding-sm'>
<view class='padding-sm' wx:for="{{ColorList}}" wx:key>
<view class='bg-{{item.name}} padding radius text-center shadow-blur'>
<view class="grid col-3 padding-sm">
<view class="padding-sm" wx:for="{{ColorList}}" wx:key>
<view class="bg-{{item.name}} padding radius text-center shadow-blur">
<view class="text-lg">{{item.title}}</view>
<view class='margin-top-sm text-Abc'>{{item.name}}</view>
<view class="margin-top-sm text-Abc">{{item.name}}</view>
</view>
</view>
</view>
<view class="cu-bar bg-white solid-bottom">
<view class='action'>
<text class='icon-title text-blue'></text>淡色背景
<view class="action">
<text class="icon-title text-blue"></text>淡色背景
</view>
</view>
<view class='grid col-3 bg-white padding-sm'>
<view class='padding-sm' wx:for="{{ColorList}}" wx:key wx:if="{{index<12}}">
<view class='bg-{{item.name}} padding radius text-center light'>
<view class="grid col-3 bg-white padding-sm">
<view class="padding-sm" wx:for="{{ColorList}}" wx:key wx:if="{{index<12}}">
<view class="bg-{{item.name}} padding radius text-center light">
<view class="text-lg">{{item.title}}</view>
<view class='margin-top-sm text-Abc'>{{item.name}}</view>
<view class="margin-top-sm text-Abc">{{item.name}}</view>
</view>
</view>
</view>
<view class="cu-bar bg-white solid-bottom margin-top">
<view class='action'>
<text class='icon-title text-blue'></text>渐变背景
<view class="action">
<text class="icon-title text-blue"></text>渐变背景
</view>
</view>
<view class='grid col-2 padding-sm'>
<view class='padding-sm'>
<view class='bg-gradual-red padding radius text-center shadow-blur'>
<view class="grid col-2 padding-sm">
<view class="padding-sm">
<view class="bg-gradual-red padding radius text-center shadow-blur">
<view class="text-lg">魅红</view>
<view class='margin-top-sm text-Abc'>#f43f3b - #ec008c</view>
<view class="margin-top-sm text-Abc">#f43f3b - #ec008c</view>
</view>
</view>
<view class='padding-sm'>
<view class='bg-gradual-orange padding radius text-center shadow-blur'>
<view class="padding-sm">
<view class="bg-gradual-orange padding radius text-center shadow-blur">
<view class="text-lg">鎏金</view>
<view class='margin-top-sm text-Abc'>#ff9700 - #ed1c24</view>
<view class="margin-top-sm text-Abc">#ff9700 - #ed1c24</view>
</view>
</view>
<view class='padding-sm'>
<view class='bg-gradual-green padding radius text-center shadow-blur'>
<view class="padding-sm">
<view class="bg-gradual-green padding radius text-center shadow-blur">
<view class="text-lg">翠柳</view>
<view class='margin-top-sm text-Abc'>#39b54a - #8dc63f</view>
<view class="margin-top-sm text-Abc">#39b54a - #8dc63f</view>
</view>
</view>
<view class='padding-sm'>
<view class='bg-gradual-blue padding radius text-center shadow-blur'>
<view class="padding-sm">
<view class="bg-gradual-blue padding radius text-center shadow-blur">
<view class="text-lg">靛青</view>
<view class='margin-top-sm text-Abc'>#0081ff - #1cbbb4</view>
<view class="margin-top-sm text-Abc">#0081ff - #1cbbb4</view>
</view>
</view>
<view class='padding-sm'>
<view class='bg-gradual-purple padding radius text-center shadow-blur'>
<view class="padding-sm">
<view class="bg-gradual-purple padding radius text-center shadow-blur">
<view class="text-lg">惑紫</view>
<view class='margin-top-sm text-Abc'>#9000ff - #5e00ff</view>
<view class="margin-top-sm text-Abc">#9000ff - #5e00ff</view>
</view>
</view>
<view class='padding-sm'>
<view class='bg-gradual-pink padding radius text-center shadow-blur'>
<view class="padding-sm">
<view class="bg-gradual-pink padding radius text-center shadow-blur">
<view class="text-lg">霞彩</view>
<view class='margin-top-sm text-Abc'>#ec008c - #6739b6</view>
<view class="margin-top-sm text-Abc">#ec008c - #6739b6</view>
</view>
</view>
</view>
<view class="cu-bar bg-white margin-top">
<view class='action'>
<text class='icon-title text-blue'></text>图片背景
<view class="action">
<text class="icon-title text-blue"></text>图片背景
</view>
</view>
<view class="bg-img bg-mask padding-tb-xl" style="background-image: url('https://albedo-theme.com/wp-content/uploads/2016/08/pexels-photo-26180.jpg')">
<view class='padding-xl text-white'>
<view class='padding-xs text-xl'>
我和春天有个约会
<view class="bg-img bg-mask padding-tb-xl" style="background-image: url('https://ossweb-img.qq.com/images/lol/web201310/skin/big10006.jpg');height: 414rpx;">
<view class="padding-xl text-white">
<view class="padding-xs text-xl">
钢铁之翼
</view>
<view class='padding-xs'>
I Have a Date with Spring
<view class="padding-xs">
Only the guilty need fear me.
</view>
</view>
</view>
<view class="cu-bar bg-white margin-top">
<view class='action'>
<text class='icon-title text-blue'></text>视频背景
<!-- <view class="cu-bar bg-white margin-top">
<view class="action">
<text class="icon-title text-blue"></text>视频背景
</view>
</view>
<view class="bg-video bg-mask">
<video src='https://www.weilanwl.com/theme/wl/assets/images/slider1.mp4' autoplay loop muted show-play-btn="{{false}}" controls="{{false}}" objectFit="cover"></video>
<cover-view class='padding-xl text-white'>
<cover-view class='padding-xs text-xl'>
开源是创新的动力之源
<view class="bg-video bg-mask flex align-center" style="height: 422rpx;">
<video src="https://yz.lol.qq.com/v1/assets/videos/aatrox-splashvideo.webm" autoplay loop muted show-play-btn="{{false}}" controls="{{false}}" objectFit="cover"></video>
<cover-view class="padding-xl text-white ">
<cover-view class="padding-xs text-xxl text-bold">
暗裔剑魔
</cover-view>
<cover-view class='padding-xs'>
Open Source is the Power Source of Innovation
<cover-view class="padding-xs">
我必须连同希望一起毁坏……
</cover-view>
</cover-view>
</view>
</view> -->
<view class="cu-bar bg-white margin-top">
<view class='action'>
<text class='icon-title text-blue'></text>透明背景(文字层)
<view class="action">
<text class="icon-title text-blue"></text>透明背景(文字层)
</view>
</view>
<view class='grid col-2 padding-sm'>
<view class='padding-sm'>
<view class="bg-img padding-bottom-xl" style="background-image: url('https://image.weilanwl.com/img/square-3.jpg')">
<view class='bg-shadeTop padding padding-bottom-xl'>
上面开始
</view>
<view class="grid col-2">
<view class="bg-img padding-bottom-xl" style="background-image: url('https://ossweb-img.qq.com/images/lol/web201310/skin/big10007.jpg');height: 207rpx;">
<view class="bg-shadeTop padding padding-bottom-xl">
上面开始
</view>
</view>
<view class='padding-sm'>
<view class="bg-img padding-top-xl" style="background-image: url('https://image.weilanwl.com/img/square-3.jpg')">
<view class='bg-shadeBottom padding padding-top-xl '>
下面开始
</view>
<view class="bg-img padding-top-xl flex align-end" style="background-image: url('https://ossweb-img.qq.com/images/lol/web201310/skin/big10001.jpg');height: 207rpx;">
<view class="bg-shadeBottom padding padding-top-xl flex-sub">
下面开始
</view>
</view>
</view>
demo/pages/basics/button/button.js
+2 -4
View File
@@ -1,8 +1,6 @@
const app = getApp();
Page({
data: {
StatusBar: app.globalData.StatusBar,
CustomBar: app.globalData.CustomBar,
ColorList: app.globalData.ColorList,
},
SetShadow(e) {
@@ -14,5 +12,5 @@ Page({
this.setData({
bordersize: e.detail.value
})
},
});
}
})
demo/pages/basics/button/button.wxml
+53 -56
View File
@@ -1,99 +1,96 @@
<view class="cu-custom" style="height:{{CustomBar}}px;">
<view class="cu-bar fixed bg-gradual-blue" style="height:{{CustomBar}}px;padding-top:{{StatusBar}}px;">
<navigator class='action' open-type="navigateBack" delta="1" hover-class="none">
<text class='icon-back'></text> 按钮
</navigator>
<navigator class='action' url='design' hover-class="none">
<text class='icon-skinfill'></text>
<text class="text-df">设计</text>
</navigator>
</view>
</view>
<cu-custom bgColor="bg-gradual-blue" isBack="{{true}}">
<view slot="backText">返回</view>
<view slot="content">按钮</view>
</cu-custom>
<view class="cu-bar bg-white solid-bottom">
<view class='action'>
<text class='icon-title text-blue'></text>按钮形状
<view class="action">
<text class="icon-title text-blue"></text>按钮形状
</view>
<navigator class="action" url="design" hover-class="none">
<text class="icon-skinfill"></text>
<text class="text-df">设计</text>
</navigator>
</view>
<view class="padding flex flex-wrap justify-between align-center bg-white">
<button class='cu-btn'>默认</button>
<button class='cu-btn round'>圆角</button>
<button class='cu-btn icon'>
<text class='icon-emojifill'></text>
<button class="cu-btn">默认</button>
<button class="cu-btn round">圆角</button>
<button class="cu-btn icon">
<text class="icon-emojifill"></text>
</button>
</view>
<view class="cu-bar margin-top bg-white solid-bottom">
<view class='action'>
<text class='icon-title text-blue'></text>按钮尺寸
<view class="action">
<text class="icon-title text-blue"></text>按钮尺寸
</view>
</view>
<view class="padding flex flex-wrap justify-between align-center bg-white">
<button class='cu-btn round sm'>小尺寸</button>
<button class='cu-btn round'>默认</button>
<button class='cu-btn round lg'>大尺寸</button>
<button class="cu-btn round sm">小尺寸</button>
<button class="cu-btn round">默认</button>
<button class="cu-btn round lg">大尺寸</button>
</view>
<view class="cu-bar margin-top bg-white">
<view class='action'>
<text class='icon-title text-blue'></text>按钮颜色
<view class="action">
<text class="icon-title text-blue"></text>按钮颜色
</view>
<view class='action'>
<text class='text-df margin-right-sm'>阴影</text>
<switch class='sm' bindchange='SetShadow'></switch>
<view class="action">
<text class="text-df margin-right-sm">阴影</text>
<switch class="sm" bindchange="SetShadow"></switch>
</view>
</view>
<view class='grid col-5 padding-sm'>
<view class='margin-tb-sm text-center' wx:for="{{ColorList}}" wx:key>
<button class='cu-btn round bg-{{item.name}} {{shadow?"shadow":""}}'>{{item.title}}</button>
<view class="grid col-5 padding-sm">
<view class="margin-tb-sm text-center" wx:for="{{ColorList}}" wx:key>
<button class="cu-btn round bg-{{item.name}} {{shadow?'shadow':''}}">{{item.title}}</button>
</view>
</view>
<view class="cu-bar margin-top bg-white">
<view class='action'>
<text class='icon-title text-blue'></text>镂空按钮
<view class="action">
<text class="icon-title text-blue"></text>镂空按钮
</view>
<view class='action'>
<radio-group bindchange='SetBorderSize'>
<label class='margin-left-sm'>
<radio class='blue sm radio' value='' checked></radio>
<view class="action">
<radio-group bindchange="SetBorderSize">
<label class="margin-left-sm">
<radio class="blue sm radio" value="" checked></radio>
<text> 小</text>
</label>
<label class='margin-left-sm'>
<radio class='blue sm radio' value='s'></radio>
<label class="margin-left-sm">
<radio class="blue sm radio" value="s"></radio>
<text> 大</text>
</label>
</radio-group>
</view>
</view>
<view class='grid col-5 padding-sm'>
<view class='margin-tb-sm text-center' wx:for="{{ColorList}}" wx:key>
<button class='cu-btn round line{{bordersize?bordersize:""}}-{{item.name}} {{shadow?"shadow":""}}'>{{item.title}}</button>
<view class="grid col-5 padding-sm">
<view class="margin-tb-sm text-center" wx:for="{{ColorList}}" wx:key>
<button class="cu-btn round line{{bordersize?bordersize:''}}-{{item.name}} {{shadow?'shadow':''}}">{{item.title}}</button>
</view>
</view>
<view class="cu-bar margin-top bg-white">
<view class='action'>
<text class='icon-title text-blue'></text>块状按钮
<view class="action">
<text class="icon-title text-blue"></text>块状按钮
</view>
</view>
<view class="padding flex flex-direction">
<button class='cu-btn bg-grey lg'>玄灰</button>
<button class='cu-btn bg-red margin-tb-sm lg'>嫣红</button>
<button class="cu-btn bg-grey lg">玄灰</button>
<button class="cu-btn bg-red margin-tb-sm lg">嫣红</button>
</view>
<view class="cu-bar margin-top bg-white">
<view class='action'>
<text class='icon-title text-blue'></text>无效状态
<view class="action">
<text class="icon-title text-blue"></text>无效状态
</view>
</view>
<view class="padding">
<button class='cu-btn block bg-blue margin-tb-sm lg' disabled type=''>无效状态</button>
<button class='cu-btn block line-blue margin-tb-sm lg' disabled>无效状态</button>
<button class="cu-btn block bg-blue margin-tb-sm lg" disabled type="">无效状态</button>
<button class="cu-btn block line-blue margin-tb-sm lg" disabled>无效状态</button>
</view>
<view class="cu-bar margin-top bg-white">
<view class='action'>
<text class='icon-title text-blue'></text>按钮加图标
<view class="action">
<text class="icon-title text-blue"></text>按钮加图标
</view>
</view>
<view class="padding-xl">
<button class='cu-btn block line-orange lg'>
<text class='icon-upload'></text> 图标</button>
<button class='cu-btn block bg-blue margin-tb-sm lg'>
<text class='icon-loading2 iconfont-spin'></text> 加载</button>
<button class='cu-btn block bg-black margin-tb-sm lg' loading> 微信加载</button>
<button class="cu-btn block line-orange lg">
<text class="icon-upload"></text> 图标</button>
<button class="cu-btn block bg-blue margin-tb-sm lg">
<text class="icon-loading2 iconfont-spin"></text> 加载</button>
<button class="cu-btn block bg-black margin-tb-sm lg" loading> 微信加载</button>
</view>
demo/pages/basics/button/design.js
+2 -4
View File
@@ -1,8 +1,6 @@
const app = getApp();
Page({
data: {
StatusBar: app.globalData.StatusBar,
CustomBar: app.globalData.CustomBar,
ColorList: app.globalData.ColorList,
},
showModal(e) {
@@ -55,5 +53,5 @@ Page({
this.setData({
block: e.detail.value
})
},
});
}
})
demo/pages/basics/button/design.wxml
+32 -45
View File
@@ -1,80 +1,67 @@
<view class="cu-custom" style="height:{{CustomBar}}px;">
<view class="cu-bar fixed bg-gradual-blue" style="height:{{CustomBar}}px;padding-top:{{StatusBar}}px;">
<navigator class='action' open-type="navigateBack" delta="1" hover-class="none">
<text class='icon-back'></text> 按钮 / 设计
</navigator>
</view>
</view>
<cu-custom bgColor="bg-gradual-blue" isBack="{{true}}"><view slot="backText">返回</view><view slot="content">按钮 / 设计</view></cu-custom>
<view class="padding-xl">
<view class="box bg-white text-center radius {{block?'flex-direction':''}}">
<button class='cu-btn {{border?"line":"bg"}}{{bordersize?bordersize:""}}-{{color}} {{round?"round":""}} {{size}} {{shadow?"shadow":""}} {{block?"block":""}}'>我是一个按钮</button>
<button class="cu-btn {{border?'line':'bg'}}{{bordersize?bordersize:''}}-{{color}} {{round?'round':''}} {{size}} {{shadow?'shadow':''}} {{block?'block':''}}">我是一个按钮</button>
</view>
<view class='padding text-center'> class="cu-btn<text wx:if="{{color}}"> {{border?"line":"bg"}}{{bordersize?bordersize:""}}-{{color}} {{round?"round":""}} {{size}} {{shadow?"shadow":""}} {{block?"block":""}}</text>" </view>
<view class="padding text-center"> class="cu-btn<text wx:if="{{color}}"> {{border?'line':'bg'}}{{bordersize?bordersize:''}}-{{color}} {{round?'round':''}} {{size}} {{shadow?'shadow':''}} {{block?'block':''}}</text>" </view>
</view>
<view class="cu-form-group margin-top" bindtap="showModal" data-target="ColorModal">
<view class='title'>选择颜色</view>
<view class='padding-sm bg-{{color}} solid radius shadow-blur'></view>
<view class="title">选择颜色</view>
<view class="padding-sm bg-{{color}} solid radius shadow-blur"></view>
</view>
<view class="cu-form-group">
<view class='title'>是否圆角</view>
<switch class='sm' bindchange='SetRound'></switch>
<view class="title">是否圆角</view>
<switch class="sm" bindchange="SetRound"></switch>
</view>
<view class="cu-form-group">
<view class='title'>选择尺寸</view>
<radio-group bindchange='SetSize'>
<label class='margin-left-sm'>
<radio class='blue sm radio' value='sm'></radio>
<view class="title">选择尺寸</view>
<radio-group bindchange="SetSize">
<label class="margin-left-sm">
<radio class="blue sm radio" value="sm"></radio>
<text> 小</text>
</label>
<label class='margin-left-sm'>
<radio class='blue sm radio' value='' checked></radio>
<label class="margin-left-sm">
<radio class="blue sm radio" value="" checked></radio>
<text> 中</text>
</label>
<label class='margin-left-sm'>
<radio class='blue sm radio' value='lg'></radio>
<label class="margin-left-sm">
<radio class="blue sm radio" value="lg"></radio>
<text> 大</text>
</label>
</radio-group>
</view>
<view class="cu-form-group">
<view class='title'>是否添加阴影</view>
<switch class='sm' bindchange='SetShadow'></switch>
<view class="title">是否添加阴影</view>
<switch class="sm" bindchange="SetShadow"></switch>
</view>
<view class="cu-form-group">
<view class='title'>是否镂空</view>
<switch class='sm' bindchange='SetBorder'></switch>
<view class="title">是否镂空</view>
<switch class="sm" bindchange="SetBorder"></switch>
</view>
<view class="cu-form-group" wx:if="{{border}}">
<view class='title'>边框大小</view>
<radio-group bindchange='SetBorderSize'>
<label class='margin-left-sm'>
<radio class='blue sm radio' value='' checked></radio>
<view class="title">边框大小</view>
<radio-group bindchange="SetBorderSize">
<label class="margin-left-sm">
<radio class="blue sm radio" value="" checked></radio>
<text> 小</text>
</label>
<label class='margin-left-sm'>
<radio class='blue sm radio' value='s'></radio>
<label class="margin-left-sm">
<radio class="blue sm radio" value="s"></radio>
<text> 大</text>
</label>
</radio-group>
</view>
<!-- <view class="cu-form-group">
<view class='title'>定义为块元素</view>
<switch class='sm' bindchange='SetBlock'></switch>
</view> -->
<view class="cu-modal {{modalName=='ColorModal'?'show':''}}">
<view class="cu-dialog">
<view class="cu-bar justify-end">
<view class='content'>选择颜色</view>
<view class='action' bindtap='hideModal'>
<text class='icon-close text-red'></text>
<view class="cu-bar justify-end solid-bottom">
<view class="content">选择颜色</view>
<view class="action" bindtap="hideModal">
<text class="icon-close text-red"></text>
</view>
</view>
<view class='grid col-5 padding'>
<view class='padding-xs' wx:for="{{ColorList}}" wx:key bindtap='SetColor' data-color='{{item.name}}'>
<view class='padding-tb bg-{{item.name}} radius'> {{item.title}} </view>
<view class="grid col-5 padding">
<view class="padding-xs" wx:for="{{ColorList}}" wx:key bindtap="SetColor" data-color="{{item.name}}">
<view class="padding-tb bg-{{item.name}} radius"> {{item.title}} </view>
</view>
</view>
</view>
demo/pages/basics/button/design.wxss
+1 -1
View File
@@ -2,5 +2,5 @@
display: flex;
align-items: center;
justify-content: center;
height: 100px;
height: 200rpx;
}
demo/pages/basics/form/form.wxml
+1 -8
View File
@@ -1,11 +1,4 @@
<view class="cu-custom" style="height:{{CustomBar}}px;">
<view class="cu-bar fixed gradual-blue" style="height:{{CustomBar}}px;padding-top:{{StatusBar}}px;">
<navigator class='action' open-type="navigateBack" delta="1" hover-class="none">
<text class='icon-back'></text>
表单控件
</navigator>
</view>
</view>
<cu-custom bgColor="bg-gradual-blue" isBack="{{true}}"><view slot="backText">返回</view><view slot="content">表单控件</view></cu-custom>
<view class='text-center'>
<view class="padding-xl ">
<checkbox class=''></checkbox>
demo/pages/basics/home/home.js
+3 -9
View File
@@ -1,4 +1,7 @@
Component({
options: {
addGlobalClass: true,
},
data: {
elements: [{
title: '布局',
@@ -94,13 +97,4 @@ Component({
}
},
},
pageLifetimes: {
show() {
if (typeof this.getTabBar === 'function' && this.getTabBar()) {
this.getTabBar().setData({
selected: 0
})
}
}
}
})
demo/pages/basics/home/home.json
+3 -1
View File
@@ -1 +1,3 @@
{}
{
"component": true
}
demo/pages/basics/home/home.wxml
+11 -9
View File
@@ -1,9 +1,11 @@
<image src='/images/BasicsBg.png' mode='widthFix' class='png' style='width:100%;height:486rpx'></image>
<view class='nav-list'>
<navigator open-type="navigate" hover-class='none' url="../{{item.name}}/{{item.name}}" class="nav-li bg-{{item.color}}" wx:for="{{elements}}" wx:key>
<view class="nav-title">{{item.title}}</view>
<view class="nav-name">{{item.name}}</view>
<text class='icon-{{item.icon}}'></text>
</navigator>
</view>
<view class='cu-tabbar-height'></view>
<scroll-view scroll-y class="scrollPage">
<image src='/images/BasicsBg.png' mode='widthFix' class='png' style='width:100%;height:486rpx'></image>
<view class='nav-list'>
<navigator open-type="navigate" hover-class='none' url="/pages/basics/{{item.name}}/{{item.name}}" class="nav-li bg-{{item.color}}" wx:for="{{elements}}" wx:key>
<view class="nav-title">{{item.title}}</view>
<view class="nav-name">{{item.name}}</view>
<text class='icon-{{item.icon}}'></text>
</navigator>
</view>
<view class='cu-tabbar-height'></view>
</scroll-view>
demo/pages/basics/icon/icon.js
+1 -892
View File
File diff suppressed because one or more lines are too long
demo/pages/basics/icon/icon.wxml
+4 -10
View File
@@ -1,19 +1,13 @@
<view class="cu-custom" style="height:{{CustomBar}}px;">
<view class="cu-bar fixed bg-gradual-blue" style="height:{{CustomBar}}px;padding-top:{{StatusBar}}px;">
<navigator class='action' open-type="navigateBack" delta="1" hover-class="none">
<text class='icon-back'></text> 图标
</navigator>
</view>
</view>
<cu-custom bgColor="bg-gradual-blue" isBack="{{true}}"><view slot="backText">返回</view><view slot="content">图标</view></cu-custom>
<view class="cu-bar bg-white search fixed" style="top:{{CustomBar}}px">
<view class='search-form round'>
<view class="search-form round">
<text class="icon-search"></text>
<input type="text" placeholder="搜索icon" confirm-type="search" bindinput='searchIcon'></input>
<input type="text" placeholder="搜索icon" confirm-type="search" bindinput="searchIcon"></input>
</view>
</view>
<view class="cu-list grid col-3">
<view class="cu-item" wx:for="{{icon}}" wx:key wx:if="{{item.isShow}}">
<text class='icon-{{item.name}} lg text-gray'></text>
<text class="icon-{{item.name}} lg text-gray"></text>
<text>{{item.name}}</text>
</view>
</view>
demo/pages/basics/icon/icon.wxss
+1 -1
View File
@@ -1,5 +1,5 @@
page{
padding-top: 50px;
padding-top: 100rpx;
}
item.none{
display: none;
demo/pages/basics/layout/layout.js
-1
View File
@@ -1,7 +1,6 @@
const app = getApp();
Page({
data: {
StatusBar: app.globalData.StatusBar,
CustomBar: app.globalData.CustomBar,
TabCur:0,
tabNav: ['Flex布局', 'Grid布局', '辅助布局']
demo/pages/basics/layout/layout.wxml
+60 -68
View File
@@ -1,10 +1,4 @@
<view class="cu-custom" style="height:{{CustomBar}}px;">
<view class="cu-bar fixed bg-gradual-blue" style="height:{{CustomBar}}px;padding-top:{{StatusBar}}px;">
<navigator class='action' open-type="navigateBack" delta="1" hover-class="none">
<text class='icon-back'></text> 布局
</navigator>
</view>
</view>
<cu-custom bgColor="bg-gradual-blue" isBack="{{true}}"><view slot="backText">返回</view><view slot="content">布局</view></cu-custom>
<scroll-view scroll-x class="bg-white nav text-center fixed" style="top:{{CustomBar}}px">
<view class="cu-item {{index==TabCur?'text-blue cur':''}}" wx:for="{{tabNav}}" wx:key bindtap='tabSelect' data-id="{{index}}">
{{tabNav[index]}}
@@ -12,94 +6,94 @@
</scroll-view>
<block wx:if="{{TabCur==0}}">
<view class="cu-bar bg-white solid-bottom margin-top">
<view class='action'>
<text class='icon-title text-blue'></text>固定尺寸
<view class="action">
<text class="icon-title text-blue"></text>固定尺寸
</view>
</view>
<view class="padding bg-white">
<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 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>
</view>
<view class="cu-bar bg-white margin-top solid-bottom">
<view class='action'>
<text class='icon-title text-blue'></text>比例布局
<view class="action">
<text class="icon-title text-blue"></text>比例布局
</view>
</view>
<view class="padding bg-white">
<view class="flex">
<view class='flex-sub bg-grey padding-sm margin-xs radius'>1</view>
<view class='flex-sub bg-grey padding-sm margin-xs radius'>1</view>
<view class="flex-sub bg-grey padding-sm margin-xs radius">1</view>
<view class="flex-sub bg-grey padding-sm margin-xs radius">1</view>
</view>
<view class="flex p-xs margin-bottom-sm mb-sm">
<view class='flex-sub bg-grey padding-sm margin-xs radius'>1</view>
<view class='flex-twice bg-grey padding-sm margin-xs radius'>2</view>
<view class="flex-sub bg-grey padding-sm margin-xs radius">1</view>
<view class="flex-twice bg-grey padding-sm margin-xs radius">2</view>
</view>
<view class="flex p-xs margin-bottom-sm mb-sm">
<view class='flex-sub bg-grey padding-sm margin-xs radius'>1</view>
<view class='flex-twice bg-grey padding-sm margin-xs radius'>2</view>
<view class='flex-treble bg-grey padding-sm margin-xs radius'>3</view>
<view class="flex-sub bg-grey padding-sm margin-xs radius">1</view>
<view class="flex-twice bg-grey padding-sm margin-xs radius">2</view>
<view class="flex-treble bg-grey padding-sm margin-xs radius">3</view>
</view>
</view>
<view class="cu-bar bg-white margin-top solid-bottom">
<view class='action'>
<text class='icon-title text-blue'></text>水平对齐(justify)
<view class="action">
<text class="icon-title text-blue"></text>水平对齐(justify)
</view>
</view>
<view class="bg-white">
<view class="flex solid-bottom padding justify-start">
<view class='bg-grey padding-sm margin-xs radius'>start</view>
<view class='bg-grey padding-sm margin-xs radius'>start</view>
<view class="bg-grey padding-sm margin-xs radius">start</view>
<view class="bg-grey padding-sm margin-xs radius">start</view>
</view>
<view class="flex solid-bottom padding justify-end">
<view class='bg-grey padding-sm margin-xs radius'>end</view>
<view class='bg-grey padding-sm margin-xs radius'>end</view>
<view class="bg-grey padding-sm margin-xs radius">end</view>
<view class="bg-grey padding-sm margin-xs radius">end</view>
</view>
<view class="flex solid-bottom padding justify-center">
<view class='bg-grey padding-sm margin-xs radius'>center</view>
<view class='bg-grey padding-sm margin-xs radius'>center</view>
<view class="bg-grey padding-sm margin-xs radius">center</view>
<view class="bg-grey padding-sm margin-xs radius">center</view>
</view>
<view class="flex solid-bottom padding justify-between">
<view class='bg-grey padding-sm margin-xs radius'>between</view>
<view class='bg-grey padding-sm margin-xs radius'>between</view>
<view class="bg-grey padding-sm margin-xs radius">between</view>
<view class="bg-grey padding-sm margin-xs radius">between</view>
</view>
<view class="flex solid-bottom padding justify-around">
<view class='bg-grey padding-sm margin-xs radius'>around</view>
<view class='bg-grey padding-sm margin-xs radius'>around</view>
<view class="bg-grey padding-sm margin-xs radius">around</view>
<view class="bg-grey padding-sm margin-xs radius">around</view>
</view>
</view>
<view class="cu-bar bg-white margin-top solid-bottom">
<view class='action'>
<text class='icon-title text-blue'></text>垂直对齐(align)
<view class="action">
<text class="icon-title text-blue"></text>垂直对齐(align)
</view>
</view>
<view class="bg-white">
<view class="flex solid-bottom padding align-start">
<view class='bg-grey padding-lg margin-xs radius'>ColorUi</view>
<view class='bg-grey padding-sm margin-xs radius'>start</view>
<view class="bg-grey padding-lg margin-xs radius">ColorUi</view>
<view class="bg-grey padding-sm margin-xs radius">start</view>
</view>
<view class="flex solid-bottom padding align-end">
<view class='bg-grey padding-lg margin-xs radius'>ColorUi</view>
<view class='bg-grey padding-sm margin-xs radius'>end</view>
<view class="bg-grey padding-lg margin-xs radius">ColorUi</view>
<view class="bg-grey padding-sm margin-xs radius">end</view>
</view>
<view class="flex solid-bottom padding align-center">
<view class='bg-grey padding-lg margin-xs radius'>ColorUi</view>
<view class='bg-grey padding-sm margin-xs radius'>center</view>
<view class="bg-grey padding-lg margin-xs radius">ColorUi</view>
<view class="bg-grey padding-sm margin-xs radius">center</view>
</view>
</view>
</block>
<block wx:if="{{TabCur==1}}">
<view class="cu-bar bg-white margin-top solid-bottom">
<view class='action'>
<text class='icon-title text-blue'></text>等分列
<view class="action">
<text class="icon-title text-blue"></text>等分列
</view>
<view class='action'></view>
<view class="action"></view>
</view>
<view class="bg-white padding">
<view class="grid col-{{index+1}} margin-bottom text-center" wx:for="{{5}}" wx:key>
@@ -107,75 +101,73 @@
</view>
</view>
<view class="cu-bar bg-white margin-top solid-bottom">
<view class='action'>
<text class='icon-title text-blue'></text>等高
<view class="action">
<text class="icon-title text-blue"></text>等高
</view>
<view class='action'></view>
<view class="action"></view>
</view>
<view class="bg-white padding">
<view class="grid col-4 grid-square">
<view class="bg-img" wx:for="{{4}}" wx:key style="background-image:url(https://image.weilanwl.com/img/square-{{index+1}}.jpg);"></view>
<view class="bg-img" wx:for="{{4}}" wx:key style="background-image:url(https://ossweb-img.qq.com/images/lol/web201310/skin/big1000{{index+1}}.jpg);"></view>
</view>
</view>
</block>
<block wx:if="{{TabCur==2}}">
<view class="cu-bar bg-white margin-top solid-bottom">
<view class='action'>
<text class='icon-title text-blue'></text>浮动
<view class="action">
<text class="icon-title text-blue"></text>浮动
</view>
</view>
<view class="bg-white padding">
<view class=" cf padding-sm">
<view class='bg-grey radius fl padding-sm'>ColorUi fl</view>
<view class='bg-grey radius fr padding-sm'>ColorUi fr</view>
<view class="bg-grey radius fl padding-sm">ColorUi fl</view>
<view class="bg-grey radius fr padding-sm">ColorUi fr</view>
</view>
</view>
</block>
<block wx:if="{{TabCur==3}}">
<view class="cu-bar bg-white margin-top solid-bottom">
<view class='action'>
<text class='icon-title text-blue'></text>内外边距
<view class="action">
<text class="icon-title text-blue"></text>内外边距
</view>
</view>
<view class="bg-white">
<view class='padding bg-gray'>{size}的尺寸有xs/sm/df/lg/xl</view>
<view class='flex flex-wrap padding solid-top'>
<view class="padding bg-gray">{size}的尺寸有xs/sm/df/lg/xl</view>
<view class="flex flex-wrap padding solid-top">
<view class="basis-df padding-bottom-xs">外边距</view>
<view class="basis-df padding-bottom-xs">内边距</view>
<view class="basis-df">.margin-{size}</view>
<view class="basis-df">.padding-{size}</view>
</view>
<view class='flex flex-wrap padding solid-top'>
<view class="flex flex-wrap padding solid-top">
<view class="basis-df padding-bottom-xs">水平方向外边距</view>
<view class="basis-df padding-bottom-xs">水平方向内边距</view>
<view class="basis-df">.margin-lr-{size}</view>
<view class="basis-df">.padding-lr-{size}</view>
</view>
<view class='flex flex-wrap padding solid-top'>
<view class="flex flex-wrap padding solid-top">
<view class="basis-df padding-bottom-xs">垂直方向外边距</view>
<view class="basis-df padding-bottom-xs">垂直方向内边距</view>
<view class="basis-df">.margin-tb-{size}</view>
<view class="basis-df">.padding-tb-{size}</view>
</view>
<view class='flex flex-wrap padding solid-top'>
<view class="flex flex-wrap padding solid-top">
<view class="basis-df padding-bottom-xs">上外边距</view>
<view class="basis-df padding-bottom-xs">上内边距</view>
<view class="basis-df">.margin-top-{size}</view>
<view class="basis-df">.padding-top-{size}</view>
</view>
<view class='flex flex-wrap padding solid-top'>
<view class="flex flex-wrap padding solid-top">
<view class="basis-df padding-bottom-xs">右外边距</view>
<view class="basis-df padding-bottom-xs">右内边距</view>
<view class="basis-df">.margin-right-{size}</view>
<view class="basis-df">.padding-right-{size}</view>
</view>
<view class='flex flex-wrap padding solid-top'>
<view class="flex flex-wrap padding solid-top">
<view class="basis-df padding-bottom-xs">下外边距</view>
<view class="basis-df padding-bottom-xs">下内边距</view>
<view class="basis-df">margin-bottom-{size}</view>
<view class="basis-df">.padding-bottom-{size}</view>
</view>
<view class='flex flex-wrap padding solid-top'>
<view class="flex flex-wrap padding solid-top">
<view class="basis-df padding-bottom-xs">左外边距</view>
<view class="basis-df padding-bottom-xs">左内边距</view>
<view class="basis-df">.margin-left-{size}</view>
demo/pages/basics/layout/layout.wxss
+1 -1
View File
@@ -1,3 +1,3 @@
page{
padding-top: 45px;
padding-top: 90rpx;
}
demo/pages/basics/loading/loading.js
-1
View File
@@ -1,7 +1,6 @@
const app = getApp();
Page({
data: {
StatusBar: app.globalData.StatusBar,
CustomBar: app.globalData.CustomBar,
loadProgress:0
},
demo/pages/basics/loading/loading.wxml
+10 -13
View File
@@ -1,13 +1,10 @@
<view class="cu-custom" style="height:{{CustomBar}}px;">
<view class="cu-bar fixed bg-gradual-blue" style="height:{{CustomBar}}px;padding-top:{{StatusBar}}px;">
<navigator class='action' open-type="navigateBack" delta="1" hover-class="none">
<text class='icon-back'></text> 加载
</navigator>
<view class='action'>
<view class="cu-load load-icon {{!isLoad?'loading':'over'}}"></view>
</view>
<cu-custom bgColor="bg-gradual-blue" isBack="{{true}}">
<view slot="backText">返回</view>
<view slot="content">加载</view>
<view class="action" slot="right">
<view class="cu-load load-icon {{!isLoad?'loading':'over'}}"></view>
</view>
</view>
</cu-custom>
<view class="cu-bar bg-white">
<view class='action'>
<text class='icon-title text-blue'></text>背景
@@ -40,10 +37,10 @@
</button>
</view>
</view>
<view class='cu-load load-modal' wx:if="{{loadModal}}">
<!-- <view class='icon-emojifill text-orange'></view> -->
<image src='/images/logo.png' class='png' mode='aspectFit'></image>
<view class='gray-text'>加载中...</view>
<view class='cu-load load-modal' wx:if="{{loadModal}}">
<!-- <view class='icon-emojifill text-orange'></view> -->
<image src='/images/logo.png' class='png' mode='aspectFit'></image>
<view class='gray-text'>加载中...</view>
</view>
<view class="cu-bar bg-white margin-top">
<view class='action'>
demo/pages/basics/progress/progress.js
+2 -4
View File
@@ -1,8 +1,6 @@
const app = getApp();
Page({
data: {
StatusBar: app.globalData.StatusBar,
CustomBar: app.globalData.CustomBar,
ColorList: app.globalData.ColorList,
color:'red',
},
@@ -34,5 +32,5 @@ Page({
this.setData({
active: e.detail.value
})
},
});
}
})
demo/pages/basics/progress/progress.wxml
+41 -51
View File
@@ -1,115 +1,105 @@
<view class="cu-custom" style="height:{{CustomBar}}px;">
<view class="cu-bar fixed bg-gradual-blue" style="height:{{CustomBar}}px;padding-top:{{StatusBar}}px;">
<navigator class='action' open-type="navigateBack" delta="1" hover-class="none">
<text class='icon-back'></text> 进度条
</navigator>
</view>
</view>
<cu-custom bgColor="bg-gradual-blue" isBack="{{true}}"><view slot="backText">返回</view><view slot="content">进度条</view></cu-custom>
<view class="cu-bar bg-white solid-bottom">
<view class='action'>
<text class='icon-title text-blue'></text>进度条形状
<view class="action">
<text class="icon-title text-blue"></text>进度条形状
</view>
</view>
<view class="padding bg-white">
<view class="cu-progress">
<view class='bg-red' style="width:{{loading?'61.8%':''}};">61.8%</view>
<view class="bg-red" style="width:{{loading?'61.8%':''}};">61.8%</view>
</view>
<view class="cu-progress radius margin-top">
<view class='bg-red' style="width:{{loading?'61.8%':''}};">61.8%</view>
<view class="bg-red" style="width:{{loading?'61.8%':''}};">61.8%</view>
</view>
<view class="cu-progress round margin-top">
<view class='bg-red' style="width:{{loading?'61.8%':''}};">61.8%</view>
<view class="bg-red" style="width:{{loading?'61.8%':''}};">61.8%</view>
</view>
</view>
<view class="cu-bar bg-white solid-bottom margin-top">
<view class='action'>
<text class='icon-title text-blue'></text>进度条尺寸
<view class="action">
<text class="icon-title text-blue"></text>进度条尺寸
</view>
</view>
<view class="padding bg-white">
<view class="cu-progress round">
<view class='bg-red' style="width:{{loading?'61.8%':''}};"></view>
<view class="bg-red" style="width:{{loading?'61.8%':''}};"></view>
</view>
<view class="cu-progress round margin-top sm">
<view class='bg-red' style="width:{{loading?'61.8%':''}};"></view>
<view class="bg-red" style="width:{{loading?'61.8%':''}};"></view>
</view>
<view class="cu-progress round margin-top xs">
<view class='bg-red' style="width:{{loading?'61.8%':''}};"></view>
<view class="bg-red" style="width:{{loading?'61.8%':''}};"></view>
</view>
</view>
<view class="cu-bar bg-white solid-bottom margin-top" bindtap="showModal" data-target="ColorModal">
<view class='action'>
<text class='icon-title text-blue'></text>进度条颜色
<view class="action">
<text class="icon-title text-blue"></text>进度条颜色
</view>
<view class='action'>
<view class='padding-sm bg-{{color}} solid radius shadow-blur'></view>
<view class="action">
<view class="padding-sm bg-{{color}} solid radius shadow-blur"></view>
</view>
</view>
<view class="padding {{color=='white'?'bg-grey':'bg-white'}}">
<view class="cu-progress round">
<view class='bg-{{color}}' style="width:{{loading?'61.8%':''}};"></view>
<view class="bg-{{color}}" style="width:{{loading?'61.8%':''}};"></view>
</view>
</view>
<view class="cu-bar bg-white solid-bottom margin-top">
<view class='action'>
<text class='icon-title text-blue'></text>进度条条纹
<view class="action">
<text class="icon-title text-blue"></text>进度条条纹
</view>
<switch class='sm margin-right-sm' bindchange='SetActive'></switch>
<switch class="sm margin-right-sm" bindchange="SetActive"></switch>
</view>
<view class="padding bg-white">
<view class="cu-progress round sm striped {{active?'active':''}}">
<view class='bg-green' style="width:{{loading?'60%':''}};"></view>
<view class="bg-green" style="width:{{loading?'60%':''}};"></view>
</view>
<view class="cu-progress round sm margin-top-sm striped {{active?'active':''}}">
<view class='bg-black' style="width:{{loading?'40%':''}};"></view>
<view class="bg-black" style="width:{{loading?'40%':''}};"></view>
</view>
</view>
<view class="cu-bar bg-white solid-bottom margin-top">
<view class='action'>
<text class='icon-title text-blue'></text>进度条比例
<view class="action">
<text class="icon-title text-blue"></text>进度条比例
</view>
</view>
<view class="padding bg-white">
<view class="cu-progress radius striped active">
<view class='bg-red' style="width:{{loading?'30%':''}};">30%</view>
<view class='bg-olive' style="width:{{loading?'45%':''}};">45%</view>
<view class='bg-cyan' style="width:{{loading?'25%':''}};">25%</view>
<view class="bg-red" style="width:{{loading?'30%':''}};">30%</view>
<view class="bg-olive" style="width:{{loading?'45%':''}};">45%</view>
<view class="bg-cyan" style="width:{{loading?'25%':''}};">25%</view>
</view>
</view>
<view class="cu-bar bg-white solid-bottom margin-top">
<view class='action'>
<text class='icon-title text-blue'></text>进度条布局
<view class="action">
<text class="icon-title text-blue"></text>进度条布局
</view>
</view>
<view class="padding bg-white ">
<view class='flex'>
<view class="flex">
<view class="cu-progress round">
<view class='bg-green' style="width:{{loading?'100%':''}};"></view>
<view class="bg-green" style="width:{{loading?'100%':''}};"></view>
</view>
<text class='icon-roundcheckfill text-green margin-left-sm'></text>
<text class="icon-roundcheckfill text-green margin-left-sm"></text>
</view>
<view class='flex margin-top'>
<view class="flex margin-top">
<view class="cu-progress round">
<view class='bg-green' style="width:{{loading?'80%':''}};"></view>
<view class="bg-green" style="width:{{loading?'80%':''}};"></view>
</view>
<text class='margin-left'>80%</text>
<text class="margin-left">80%</text>
</view>
</view>
<view class="cu-modal {{modalName=='ColorModal'?'show':''}}">
<view class="cu-dialog">
<view class="cu-bar justify-end">
<view class='content'>选择颜色</view>
<view class='action' bindtap='hideModal'>
<text class='icon-close text-red'></text>
<view class="cu-bar justify-end solid-bottom">
<view class="content">选择颜色</view>
<view class="action" bindtap="hideModal">
<text class="icon-close text-red"></text>
</view>
</view>
<view class='grid col-5 padding'>
<view class='padding-xs' wx:for="{{ColorList}}" wx:key bindtap='SetColor' data-color='{{item.name}}' wx:if="{{item.name!='gray'}}">
<view class='padding-tb bg-{{item.name}} radius'> {{item.title}} </view>
<view class="grid col-5 padding">
<view class="padding-xs" wx:for="{{ColorList}}" wx:key bindtap="SetColor" data-color="{{item.name}}" wx:if="{{item.name!='gray'}}">
<view class="padding-tb bg-{{item.name}} radius"> {{item.title}} </view>
</view>
</view>
</view>
demo/pages/basics/shadow/shadow.js
+2 -6
View File
@@ -1,12 +1,8 @@
const app = getApp();
Page({
data: {
StatusBar: app.globalData.StatusBar,
CustomBar: app.globalData.CustomBar
},
SetSize(e) {
this.setData({
size: e.detail.value
})
},
});
}
})
demo/pages/basics/shadow/shadow.wxml
+13 -19
View File
@@ -1,28 +1,22 @@
<view class="cu-custom" style="height:{{CustomBar}}px;">
<view class="cu-bar fixed bg-gradual-blue" style="height:{{CustomBar}}px;padding-top:{{StatusBar}}px;">
<navigator class='action' open-type="navigateBack" delta="1" hover-class="none">
<text class='icon-back'></text> 边框阴影
</navigator>
</view>
</view>
<cu-custom bgColor="bg-gradual-blue" isBack="{{true}}"><view slot="backText">返回</view><view slot="content">边框阴影</view></cu-custom>
<view class="cu-bar bg-white solid-bottom">
<view class='action'>
<text class='icon-title text-blue'></text>边框
<view class="action">
<text class="icon-title text-blue"></text>边框
</view>
<view class='action'>
<switch class='sm' bindchange='SetSize'></switch>
<view class="action">
<switch class="sm" bindchange="SetSize"></switch>
</view>
</view>
<view class='padding bg-white text-center'>
<view class='padding solid{{size?"s":""}}'>四周</view>
<view class='padding solid{{size?"s":""}}-top margin-top'>上</view>
<view class='padding solid{{size?"s":""}}-right margin-top'>右</view>
<view class='padding solid{{size?"s":""}}-bottom margin-top'>下</view>
<view class='padding solid{{size?"s":""}}-left margin-top'>左</view>
<view class="padding bg-white text-center">
<view class="padding solid{{size?'s':''}}">四周</view>
<view class="padding solid{{size?'s':''}}-top margin-top">上</view>
<view class="padding solid{{size?'s':''}}-right margin-top">右</view>
<view class="padding solid{{size?'s':''}}-bottom margin-top">下</view>
<view class="padding solid{{size?'s':''}}-left margin-top">左</view>
</view>
<view class="cu-bar bg-white margin-top">
<view class='action'>
<text class='icon-title text-blue'></text>阴影
<view class="action">
<text class="icon-title text-blue"></text>阴影
</view>
</view>
<view class="padding text-center">
demo/pages/basics/tag/tag.js
+2 -7
View File
@@ -1,11 +1,6 @@
const app = getApp();
Page({
data: {
StatusBar: app.globalData.StatusBar,
CustomBar: app.globalData.CustomBar,
ColorList: app.globalData.ColorList,
},
onLoad: function() {
ColorList: app.globalData.ColorList
}
});
})
demo/pages/basics/tag/tag.wxml
+41 -49
View File
@@ -1,78 +1,70 @@
<view class="cu-custom" style="height:{{CustomBar}}px;">
<view class="cu-bar fixed bg-gradual-blue" style="height:{{CustomBar}}px;padding-top:{{StatusBar}}px;">
<navigator class='action' open-type="navigateBack" delta="1" hover-class="none">
<text class='icon-back'></text> 标签
</navigator>
</view>
</view>
<cu-custom bgColor="bg-gradual-blue" isBack="{{true}}"><view slot="backText">返回</view><view slot="content">标签</view></cu-custom>
<view class="cu-bar bg-white solid-bottom">
<view class='action'>
<text class='icon-title text-blue'></text>标签形状
<view class="action">
<text class="icon-title text-blue"></text>标签形状
</view>
</view>
<view class="padding bg-white solid-bottom">
<view class='cu-tag'>默认</view>
<view class='cu-tag round'>椭圆</view>
<view class='cu-tag radius'>圆角</view>
<view class="cu-tag">默认</view>
<view class="cu-tag round">椭圆</view>
<view class="cu-tag radius">圆角</view>
</view>
<view class="cu-bar bg-white margin-top">
<view class='action'>
<text class='icon-title text-blue'></text>标签尺寸
<view class="cu-bar bg-white margin-top solid-bottom">
<view class="action">
<text class="icon-title text-blue"></text>标签尺寸
</view>
</view>
<view class="padding bg-white">
<view class='cu-tag radius sm'>小尺寸</view>
<view class='cu-tag radius'>普通尺寸</view>
<view class="cu-tag radius sm">小尺寸</view>
<view class="cu-tag radius">普通尺寸</view>
</view>
<view class="cu-bar bg-white margin-top">
<view class='action'>
<text class='icon-title text-blue'></text>标签颜色
<view class="action">
<text class="icon-title text-blue"></text>标签颜色
</view>
</view>
<view class='padding-sm flex flex-wrap'>
<view class="padding-sm flex flex-wrap">
<view class="padding-xs" wx:for="{{ColorList}}" wx:key>
<view class='cu-tag bg-{{item.name}}'>{{item.title}}</view>
<view class="cu-tag bg-{{item.name}}">{{item.title}}</view>
</view>
<view class="padding-xs" wx:for="{{ColorList}}" wx:key wx:if="{{index<12}}">
<view class='cu-tag bg-{{item.name}} light'>{{item.title}}</view>
<view class="cu-tag bg-{{item.name}} light">{{item.title}}</view>
</view>
</view>
<view class="cu-bar bg-white margin-top">
<view class='action'>
<text class='icon-title text-blue'></text>镂空标签
<view class="action">
<text class="icon-title text-blue"></text>镂空标签
</view>
</view>
<view class='padding-sm flex flex-wrap'>
<view class="padding-sm flex flex-wrap">
<view class="padding-xs" wx:for="{{ColorList}}" wx:key>
<view class='cu-tag line-{{item.name}}'>{{item.title}}</view>
<view class="cu-tag line-{{item.name}}">{{item.title}}</view>
</view>
</view>
<view class="cu-bar bg-white margin-top">
<view class='action'>
<text class='icon-title text-blue'></text>胶囊样式
<view class="action">
<text class="icon-title text-blue"></text>胶囊样式
</view>
</view>
<view class="padding">
<view class="cu-capsule">
<view class='cu-tag bg-red'>
<text class='icon-likefill'></text>
<view class="cu-tag bg-red">
<text class="icon-likefill"></text>
</view>
<view class="cu-tag line-red">
12
</view>
</view>
<view class="cu-capsule round">
<view class='cu-tag bg-blue '>
<text class='icon-likefill'></text>
<view class="cu-tag bg-blue ">
<text class="icon-likefill"></text>
</view>
<view class="cu-tag line-blue">
23
</view>
</view>
<view class="cu-capsule round">
<view class='cu-tag bg-blue '>
<view class="cu-tag bg-blue ">
说明
</view>
<view class="cu-tag line-blue">
@@ -80,16 +72,16 @@
</view>
</view>
<view class="cu-capsule radius">
<view class='cu-tag bg-grey '>
<text class='icon-likefill'></text>
<view class="cu-tag bg-grey ">
<text class="icon-likefill"></text>
</view>
<view class="cu-tag line-grey">
23
</view>
</view>
<view class="cu-capsule radius">
<view class='cu-tag bg-brown sm'>
<text class='icon-likefill'></text>
<view class="cu-tag bg-brown sm">
<text class="icon-likefill"></text>
</view>
<view class="cu-tag line-brown sm">
23
@@ -97,23 +89,23 @@
</view>
</view>
<view class="cu-bar bg-white margin-top">
<view class='action'>
<text class='icon-title text-blue'></text>数字标签
<view class="action">
<text class="icon-title text-blue"></text>数字标签
</view>
</view>
<view class="padding flex justify-between align-center">
<view class='cu-avatar xl radius'>
<view class="cu-avatar xl radius">
港
<view class="cu-tag badge">99+</view>
</view>
<view class='cu-avatar xl radius' style="background-image:url(https://image.weilanwl.com/img/square-3.jpg);">
<view class='cu-tag badge'>9</view>
<view class="cu-avatar xl radius" style="background-image:url(https://ossweb-img.qq.com/images/lol/web201310/skin/big10001.jpg);">
<view class="cu-tag badge">9</view>
</view>
<view class='cu-avatar xl radius'>
<view class='cu-tag badge'>99</view>
<text class='icon-people'></text>
<view class="cu-avatar xl radius">
<view class="cu-tag badge"></view>
<text class="icon-people"></text>
</view>
<view class='cu-avatar xl radius'>
<view class='cu-tag badge'>99+</view>
<view class="cu-avatar xl radius">
<view class="cu-tag badge">99+</view>
</view>
</view>
demo/pages/basics/text/text.js
+1 -5
View File
@@ -1,8 +1,6 @@
const app = getApp();
Page({
data: {
StatusBar: app.globalData.StatusBar,
CustomBar: app.globalData.CustomBar,
list: [{
title: '嫣红',
name: 'red',
@@ -79,7 +77,5 @@ Page({
color: '#ffffff'
},
]
},
onLoad: function () { },
}
})
demo/pages/basics/text/text.wxml
+85 -94
View File
@@ -1,148 +1,139 @@
<view class="cu-custom" style="height:{{CustomBar}}px;">
<view class="cu-bar fixed bg-gradual-blue" style="height:{{CustomBar}}px;padding-top:{{StatusBar}}px;">
<navigator class='action' open-type="navigateBack" delta="1" hover-class="none">
<text class='icon-back'></text> 文本
</navigator>
<view class='action'>
</view>
</view>
</view>
<cu-custom bgColor="bg-gradual-blue" isBack="{{true}}"><view slot="backText">返回</view><view slot="content">文本</view></cu-custom>
<view class="cu-bar bg-white solid-bottom">
<view class='action'>
<text class='icon-title text-blue'></text>文字大小
<view class="action">
<text class="icon-title text-blue"></text>文字大小
</view>
</view>
<view class='bg-white padding-lr'>
<view class='solids-bottom padding-xs flex align-center'>
<view class='padding'>60</view>
<view class='flex-sub text-center'>
<view class='solid-bottom text-xsl padding'>
<text class=' icon-roundcheckfill text-green'></text>
<view class="bg-white padding-lr">
<view class="solids-bottom padding-xs flex align-center">
<view class="padding">60</view>
<view class="flex-sub text-center">
<view class="solid-bottom text-xsl padding">
<text class=" icon-roundcheckfill text-green"></text>
</view>
<view class='padding'>用于图标、数字等特大显示</view>
<view class="padding">用于图标、数字等特大显示</view>
</view>
</view>
<view class='solids-bottom padding-xs flex align-center'>
<view class='padding'>40</view>
<view class='flex-sub text-center'>
<view class='solid-bottom text-sl padding'>
<text class=' icon-roundcheckfill text-green'></text>
<view class="solids-bottom padding-xs flex align-center">
<view class="padding">40</view>
<view class="flex-sub text-center">
<view class="solid-bottom text-sl padding">
<text class=" icon-roundcheckfill text-green"></text>
</view>
<view class='padding'>用于图标、数字等较大显示</view>
<view class="padding">用于图标、数字等较大显示</view>
</view>
</view>
<view class='solids-bottom padding-xs flex align-center'>
<view class='padding'>22</view>
<view class='flex-sub text-center'>
<view class='solid-bottom text-xxl padding'>
<text class='text-price text-red'>80.00</text>
<view class="solids-bottom padding-xs flex align-center">
<view class="padding">22</view>
<view class="flex-sub text-center">
<view class="solid-bottom text-xxl padding">
<text class="text-price text-red">80.00</text>
</view>
<view class='padding'>用于金额数字等信息</view>
<view class="padding">用于金额数字等信息</view>
</view>
</view>
<view class='solids-bottom padding-xs flex align-center'>
<view class='padding'>18</view>
<view class='flex-sub text-center'>
<view class='solid-bottom text-xl padding'>
<text class='text-black text-bold'>您的订单已提交成功！</text>
<view class="solids-bottom padding-xs flex align-center">
<view class="padding">18</view>
<view class="flex-sub text-center">
<view class="solid-bottom text-xl padding">
<text class="text-black text-bold">您的订单已提交成功！</text>
</view>
<view class='padding'>页面大标题，用于结果页等单一信息页</view>
<view class="padding">页面大标题，用于结果页等单一信息页</view>
</view>
</view>
<view class='solids-bottom padding-xs flex align-center'>
<view class='padding'>16</view>
<view class='flex-sub text-center'>
<view class='solid-bottom text-lg padding'>
<text class='text-black'>ColorUI组件库</text>
<view class="solids-bottom padding-xs flex align-center">
<view class="padding">16</view>
<view class="flex-sub text-center">
<view class="solid-bottom text-lg padding">
<text class="text-black">ColorUI组件库</text>
</view>
<view class='padding'>页面小标题，首要层级显示内容</view>
<view class="padding">页面小标题，首要层级显示内容</view>
</view>
</view>
<view class='solids-bottom padding-xs flex align-center'>
<view class='padding'>14</view>
<view class='flex-sub text-center'>
<view class='solid-bottom text-df padding'>专注视觉的小程序组件库</view>
<view class='padding'>页面默认字号，用于摘要或阅读文本</view>
<view class="solids-bottom padding-xs flex align-center">
<view class="padding">14</view>
<view class="flex-sub text-center">
<view class="solid-bottom text-df padding">专注视觉的小程序组件库</view>
<view class="padding">页面默认字号，用于摘要或阅读文本</view>
</view>
</view>
<view class='solids-bottom padding-xs flex align-center'>
<view class='padding'>12</view>
<view class='flex-sub text-center'>
<view class='solid-bottom text-sm padding'>
<text class='text-grey'>衬衫的价格是9磅15便士</text>
<view class="solids-bottom padding-xs flex align-center">
<view class="padding">12</view>
<view class="flex-sub text-center">
<view class="solid-bottom text-sm padding">
<text class="text-grey">衬衫的价格是9磅15便士</text>
</view>
<view class='padding'>页面辅助信息，次级内容等</view>
<view class="padding">页面辅助信息，次级内容等</view>
</view>
</view>
<view class='padding-xs flex align-center'>
<view class='padding'>10</view>
<view class='flex-sub text-center'>
<view class='solid-bottom text-xs padding'>
<text class='text-gray'>我于杀戮之中绽放 亦如黎明中的花朵</text>
<view class="padding-xs flex align-center">
<view class="padding">10</view>
<view class="flex-sub text-center">
<view class="solid-bottom text-xs padding">
<text class="text-gray">我于杀戮之中绽放 亦如黎明中的花朵</text>
</view>
<view class='padding'>说明文本，标签文字等关注度低的文字</view>
<view class="padding">说明文本，标签文字等关注度低的文字</view>
</view>
</view>
</view>
<view class="cu-bar bg-white solid-bottom margin-top">
<view class='action'>
<text class='icon-title text-blue'></text>文字颜色
<view class="action">
<text class="icon-title text-blue"></text>文字颜色
</view>
</view>
<view class='grid col-5 padding-sm'>
<view class='padding-sm' wx:for="{{list}}" wx:key>
<view class='text-{{item.name}} text-center'>
<view class="grid col-5 padding-sm">
<view class="padding-sm" wx:for="{{list}}" wx:key>
<view class="text-{{item.name}} text-center">
{{item.title}}
</view>
</view>
</view>
<view class="cu-bar bg-white solid-bottom margin-top">
<view class='action'>
<text class='icon-title text-blue'></text>文字截断
<view class="action">
<text class="icon-title text-blue"></text>文字截断
</view>
</view>
<view class='padding bg-white'>
<view class='text-cut padding bg-grey radius' style='width:220px'>我于杀戮之中绽放 ,亦如黎明中的花朵</view>
<view class="padding bg-white">
<view class="text-cut padding bg-grey radius" style="width:220px">我于杀戮之中绽放 ,亦如黎明中的花朵</view>
</view>
<view class="cu-bar bg-white solid-bottom margin-top">
<view class='action'>
<text class='icon-title text-blue'></text>文字对齐
<view class="action">
<text class="icon-title text-blue"></text>文字对齐
</view>
</view>
<view class='padding bg-white'>
<view class='text-left padding'>我于杀戮之中绽放 ,亦如黎明中的花朵</view>
<view class='text-center padding'>我于杀戮之中绽放 ,亦如黎明中的花朵</view>
<view class='text-right padding'>我于杀戮之中绽放 ,亦如黎明中的花朵</view>
<view class="padding bg-white">
<view class="text-left padding">我于杀戮之中绽放 ,亦如黎明中的花朵</view>
<view class="text-center padding">我于杀戮之中绽放 ,亦如黎明中的花朵</view>
<view class="text-right padding">我于杀戮之中绽放 ,亦如黎明中的花朵</view>
</view>
<view class="cu-bar bg-white solid-bottom margin-top">
<view class='action'>
<text class='icon-title text-blue'></text>特殊文字
<view class="action">
<text class="icon-title text-blue"></text>特殊文字
</view>
</view>
<view class='padding text-center'>
<view class='padding-lr bg-white'>
<view class='solid-bottom padding'>
<text class='text-price'>80.00</text>
<view class="padding text-center">
<view class="padding-lr bg-white">
<view class="solid-bottom padding">
<text class="text-price">80.00</text>
</view>
<view class='padding'>价格文本，利用伪元素添加"¥"符号</view>
<view class="padding">价格文本，利用伪元素添加"¥"符号</view>
</view>
<view class='padding-lr bg-white margin-top'>
<view class='solid-bottom padding'>
<text class='text-Abc'>color Ui</text>
<view class="padding-lr bg-white margin-top">
<view class="solid-bottom padding">
<text class="text-Abc">color Ui</text>
</view>
<view class='padding'>英文单词首字母大写</view>
<view class="padding">英文单词首字母大写</view>
</view>
<view class='padding-lr bg-white margin-top'>
<view class='solid-bottom padding'>
<text class='text-ABC'>color Ui</text>
<view class="padding-lr bg-white margin-top">
<view class="solid-bottom padding">
<text class="text-ABC">color Ui</text>
</view>
<view class='padding'>全部字母大写</view>
<view class="padding">全部字母大写</view>
</view>
<view class='padding-lr bg-white margin-top'>
<view class='solid-bottom padding'>
<text class='text-abc'>color Ui</text>
<view class="padding-lr bg-white margin-top">
<view class="solid-bottom padding">
<text class="text-abc">color Ui</text>
</view>
<view class='padding'>全部字母小写</view>
<view class="padding">全部字母小写</view>
</view>
</view>
demo/pages/basics/text/text.wxss
-1
View File
@@ -1 +0,0 @@
/* pages/basics/text/text.wxss */