molong/coloruicss
1
0
Fork 0
mirror of https://github.com/weilanwl/coloruicss.git synced 2026-03-07 14:34:02 +08:00
Code Issues Packages Projects Releases Wiki Activity

v2.0.4

Browse Source
This commit is contained in:
Weilanwl
2019-01-11 20:28:11 +08:00
parent ace94e4e87
commit 523eaba3c6
33 changed files with 6104 additions and 6124 deletions
Download Patch File Download Diff File Expand all files Collapse all files

1
demo/app.wxss
View File

@@ -1,6 +1,5 @@
@import "icon.wxss";
@import "colorui.wxss";
@import "/pages/plugin/animation/animation.wxss";
.nav-list {
display: flex;

5062
demo/colorui.wxss
View File

File diff suppressed because it is too large Load Diff

92
demo/pages/basics/avatar/avatar.wxml
View File

@@ -1,84 +1,84 @@
<custom style="height:{{CustomBar}}px;">
<bar class="fixed gradual-blue" style="height:{{CustomBar}}px;padding-top:{{StatusBar}}px;">
<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>
</bar>
</custom>
<bar>
</view>
</view>
<view class="cu-bar">
<view class='action'>
<text class='icon-title text-blue'></text>头像形状
</view>
</bar>
<view class="padding">
<avatar class="round" style="background-image:url(https://image.weilanwl.com/img/square-1.jpg);"></avatar>
<avatar class="radius margin-left" style="background-image:url(https://image.weilanwl.com/img/square-2.jpg);"></avatar>
</view>
<bar class="margin-top">
<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>
<view class="cu-bar margin-top">
<view class='action'>
<text class='icon-title text-blue'></text>头像尺寸
</view>
</bar>
<view class="padding">
<avatar class="sm round margin-left" style="background-image:url(https://image.weilanwl.com/img/square-1.jpg);"></avatar>
<avatar class="round margin-left" style="background-image:url(https://image.weilanwl.com/img/square-2.jpg);"></avatar>
<avatar class="lg round margin-left" style="background-image:url(https://image.weilanwl.com/img/square-3.jpg);"></avatar>
<avatar class="xl round margin-left" style="background-image:url(https://image.weilanwl.com/img/square-4.jpg);"></avatar>
</view>
<view class="padding">
<avatar class="sm round margin-left bg-red" > orange</avatar>
<avatar class="round margin-left bg-red" >orange</avatar>
<avatar class="lg round margin-left bg-red" >orange</avatar>
<avatar class="xl round margin-left bg-red" >orange</avatar>
<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>
<view class="padding">
<avatar class="sm round margin-left bg-red" > 蔚蓝</avatar>
<avatar class="round margin-left bg-red" >蔚蓝</avatar>
<avatar class="lg round margin-left bg-red" >蔚蓝</avatar>
<avatar class="xl round margin-left bg-red" >蔚蓝</avatar>
<view class="cu-avatar sm round margin-left bg-red" > orange</view>
<view class="cu-avatar round margin-left bg-red" >orange</view>
<view class="cu-avatar lg round margin-left bg-red" >orange</view>
<view class="cu-avatar xl round margin-left bg-red" >orange</view>
</view>
<bar class="margin-top">
<view class="padding">
<view class="cu-avatar sm round margin-left bg-red" > 蔚蓝</view>
<view class="cu-avatar round margin-left bg-red" >蔚蓝</view>
<view class="cu-avatar lg round margin-left bg-red" >蔚蓝</view>
<view class="cu-avatar xl round margin-left bg-red" >蔚蓝</view>
</view>
<view class="cu-bar margin-top">
<view class='action'>
<text class='icon-title text-blue'></text>内嵌文字(图标)
</view>
</bar>
</view>
<view class="padding">
<avatar class="radius">
<view class="cu-avatar radius">
<text class='icon-people'></text>
</avatar>
<avatar class="radius margin-left">
</view>
<view class="cu-avatar radius margin-left">
<text>港</text>
</avatar>
</view>
</view>
<bar class="margin-top">
<view class="cu-bar margin-top">
<view class='action'>
<text class='icon-title text-blue'></text>头像颜色
</view>
</bar>
<view class="padding-sm">
<avatar class="round lg bg-{{item.name}} margin-xs" wx:for="{{ColorList}}" wx:key>
<text>{{item.name}}</text>
</avatar>
</view>
<bar class="margin-top">
<view class="padding-sm">
<view class="cu-avatar round lg bg-{{item.name}} margin-xs" wx:for="{{ColorList}}" wx:key>
<text>{{item.name}}</text>
</view>
</view>
<view class="cu-bar margin-top">
<view class='action'>
<text class='icon-title text-blue'></text>头像组
</view>
</bar>
</view>
<view class='padding'>
<avatar-group>
<avatar class="round lg" wx:for="{{4}}" wx:key style="background-image:url(https://image.weilanwl.com/img/square-{{index+1}}.jpg);"></avatar>
</avatar-group>
<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>
</view>
<bar class="margin-top">
<view class="cu-bar margin-top">
<view class='action'>
<text class='icon-title text-blue'></text>头像标签
</view>
</bar>
</view>
<view class='padding'>
<avatar class="round lg margin-left" wx:for="{{4}}" wx:key style="background-image:url(https://image.weilanwl.com/img/square-{{index+1}}.jpg);">
<tag class="badge {{index%2==0?'icon-female bg-pink':'icon-male bg-blue'}}"></tag>
</avatar>
<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="cu-tag badge {{index%2==0?'icon-female bg-pink':'icon-male bg-blue'}}"></view>
</view>
</view>

32
demo/pages/basics/background/background.wxml
View File

@@ -1,16 +1,16 @@
<custom style="height:{{CustomBar}}px;">
<bar class="fixed gradual-blue" style="height:{{CustomBar}}px;padding-top:{{StatusBar}}px;">
<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>
</bar>
</custom>
</view>
</view>
<bar class="solid-bottom">
<view class="cu-bar solid-bottom">
<view class='action'>
<text class='icon-title text-blue'></text>深色背景
</view>
</bar>
</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'>
@@ -20,11 +20,11 @@
</view>
</view>
<bar class="solid-bottom">
<view class="cu-bar solid-bottom">
<view class='action'>
<text class='icon-title text-blue'></text>淡色背景
</view>
</bar>
</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'>
@@ -33,11 +33,11 @@
</view>
</view>
</view>
<bar class="solid-bottom margin-top">
<view class="cu-bar solid-bottom margin-top">
<view class='action'>
<text class='icon-title text-blue'></text>渐变背景
</view>
</bar>
</view>
<view class='grid col-2 padding-sm'>
<view class='padding-sm'>
<view class='gradual-red padding radius text-center shadow-blur'>
@@ -76,11 +76,11 @@
</view>
</view>
</view>
<bar class="margin-top">
<view class="cu-bar margin-top">
<view class='action'>
<text class='icon-title text-blue'></text>图片背景
</view>
</bar>
</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'>
@@ -91,11 +91,11 @@
</view>
</view>
</view>
<bar class="margin-top">
<view class="cu-bar margin-top">
<view class='action'>
<text class='icon-title text-blue'></text>视频背景
</view>
</bar>
</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'>
@@ -107,11 +107,11 @@
</cover-view>
</cover-view>
</view>
<bar class="margin-top">
<view class="cu-bar margin-top">
<view class='action'>
<text class='icon-title text-blue'></text>透明背景(文字层)
</view>
</bar>
</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')">

72
demo/pages/basics/button/button.wxml
View File

@@ -1,5 +1,5 @@
<custom style="height:{{CustomBar}}px;">
<bar class="fixed gradual-blue" style="height:{{CustomBar}}px;padding-top:{{StatusBar}}px;">
<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>
@@ -7,31 +7,31 @@
<text class='icon-skinfill'></text>
<text class="text-df">设计</text>
</navigator>
</bar>
</custom>
<bar>
</view>
</view>
<view class="cu-bar">
<view class='action'>
<text class='icon-title text-blue'></text>按钮形状
</view>
</bar>
</view>
<view class="padding flex flex-wrap justify-between align-center">
<button>默认</button>
<button class='round'>圆角</button>
<button class='icon'>
<button class='cu-btn'>默认</button>
<button class='cu-btn round'>圆角</button>
<button class='cu-btn icon'>
<text class='icon-emojifill'></text>
</button>
</view>
<bar class="margin-top ">
<view class="cu-bar margin-top ">
<view class='action'>
<text class='icon-title text-blue'></text>按钮尺寸
</view>
</bar>
<view class="padding flex flex-wrap justify-between align-center">
<button class='round sm'>小尺寸</button>
<button class='round'>默认</button>
<button class='round lg'>大尺寸</button>
</view>
<bar class="margin-top ">
<view class="padding flex flex-wrap justify-between align-center">
<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 ">
<view class='action'>
<text class='icon-title text-blue'></text>按钮颜色
</view>
@@ -39,13 +39,13 @@
<text class='text-df'>阴影</text>
<switch class='sm' bindchange='SetShadow'></switch>
</view>
</bar>
</view>
<view class='grid col-5 padding-sm'>
<view class='margin-tb-sm text-center' wx:for="{{ColorList}}" wx:key>
<button class='round bg-{{item.name}} {{shadow?"shadow":""}}'>{{item.title}}</button>
<button class='cu-btn round bg-{{item.name}} {{shadow?"shadow":""}}'>{{item.title}}</button>
</view>
</view>
<bar class="margin-top ">
<view class="cu-bar margin-top ">
<view class='action'>
<text class='icon-title text-blue'></text>镂空按钮
</view>
@@ -61,39 +61,39 @@
</label>
</radio-group>
</view>
</bar>
</view>
<view class='grid col-5 padding-sm'>
<view class='margin-tb-sm text-center' wx:for="{{ColorList}}">
<button class='round line{{bordersize?bordersize:""}}-{{item.name}} {{shadow?"shadow":""}}'>{{item.title}}</button>
<button class='cu-btn round line{{bordersize?bordersize:""}}-{{item.name}} {{shadow?"shadow":""}}'>{{item.title}}</button>
</view>
</view>
<bar class="margin-top ">
<view class="cu-bar margin-top ">
<view class='action'>
<text class='icon-title text-blue'></text>块状按钮
</view>
</bar>
<view class="padding flex flex-direction">
<button class='bg-grey lg'>玄灰</button>
<button class='bg-red margin-tb-sm lg'>嫣红</button>
</view>
<bar class="margin-top ">
<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>
</view>
<view class="cu-bar margin-top ">
<view class='action'>
<text class='icon-title text-blue'></text>无效状态
</view>
</bar>
<view class="padding">
<button class='block bg-blue margin-tb-sm lg' disabled type=''>无效状态</button>
<button class='block line-blue margin-tb-sm lg' disabled>无效状态</button>
</view>
<bar class="margin-top ">
<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>
</view>
<view class="cu-bar margin-top ">
<view class='action'>
<text class='icon-title text-blue'></text>按钮加图标
</view>
</bar>
</view>
<view class="padding-xl">
<button class='block line-orange lg'>
<button class='cu-btn block line-orange lg'>
<text class='icon-upload'></text> 图标</button>
<button class='block bg-blue margin-tb-sm lg'>
<button class='cu-btn block bg-blue margin-tb-sm lg'>
<text class='icon-loading2 iconfont-spin'></text> 加载</button>
<button class='block bg-black margin-tb-sm lg' loading> 微信加载</button>
<button class='cu-btn block bg-black margin-tb-sm lg' loading> 微信加载</button>
</view>

50
demo/pages/basics/button/design.wxml
View File

@@ -1,26 +1,26 @@
<custom style="height:{{CustomBar}}px;">
<bar class="fixed gradual-blue" style="height:{{CustomBar}}px;padding-top:{{StatusBar}}px;">
<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>
</bar>
</custom>
</view>
</view>
<view class="padding-xl">
<view class="box bg-white text-center radius {{block?'flex-direction':''}}">
<button class='{{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="<text wx:if="{{color}}">{{border?"line":"bg"}}{{bordersize?bordersize:""}}-{{color}} {{round?"round":""}} {{size}} {{shadow?"shadow":""}} {{block?"block":""}}</text>" </view>
</view>
<form-group class="margin-top" bindtap="showModal" data-target="ColorModal">
<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>
</form-group>
<form-group>
</view>
<view class="cu-form-group">
<view class='title'>是否圆角</view>
<switch class='sm' bindchange='SetRound'></switch>
</form-group>
<form-group>
</view>
<view class="cu-form-group">
<view class='title'>选择尺寸</view>
<radio-group bindchange='SetSize'>
<label class='margin-left-sm'>
@@ -36,16 +36,16 @@
<text> 大</text>
</label>
</radio-group>
</form-group>
<form-group>
</view>
<view class="cu-form-group">
<view class='title'>是否添加阴影</view>
<switch class='sm' bindchange='SetShadow'></switch>
</form-group>
<form-group>
</view>
<view class="cu-form-group">
<view class='title'>是否镂空</view>
<switch class='sm' bindchange='SetBorder'></switch>
</form-group>
<form-group wx:if="{{border}}">
</view>
<view class="cu-form-group" wx:if="{{border}}">
<view class='title'>边框大小</view>
<radio-group bindchange='SetBorderSize'>
<label class='margin-left-sm'>
@@ -57,25 +57,25 @@
<text> 大</text>
</label>
</radio-group>
</form-group>
</view>
<!-- <form-group>
<!-- <view class="cu-form-group">
<view class='title'>定义为块元素</view>
<switch class='sm' bindchange='SetBlock'></switch>
</form-group> -->
</view> -->
<modal-box class="{{modalName=='ColorModal'?'show':''}}">
<dialog>
<bar class="justify-end">
<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>
</bar>
</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>
</dialog>
</modal-box>
</view>
</view>

8
demo/pages/basics/form/form.wxml
View File

@@ -1,11 +1,11 @@
<custom style="height:{{CustomBar}}px;">
<bar class="fixed gradual-blue" style="height:{{CustomBar}}px;padding-top:{{StatusBar}}px;">
<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>
</bar>
</custom>
</view>
</view>
<view class='text-center'>
<view class="padding-xl ">
<checkbox class=''></checkbox>

20
demo/pages/basics/icon/icon.wxml
View File

@@ -1,19 +1,19 @@
<custom style="height:{{CustomBar}}px;">
<bar class="fixed gradual-blue" style="height:{{CustomBar}}px;padding-top:{{StatusBar}}px;">
<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>
</bar>
</custom>
<bar class="search fixed" style="top:{{CustomBar}}px">
</view>
</view>
<view class="cu-bar search fixed" style="top:{{CustomBar}}px">
<view class='search-form round'>
<text class="icon-search"></text>
<input type="text" placeholder="搜索icon" confirm-type="search" bindinput='searchIcon'></input>
</view>
</bar>
<list class="grid col-3">
<item wx:for="{{icon}}" wx:key wx:if="{{item.isShow}}">
</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>{{item.name}}</text>
</item>
</list>
</view>
</view>

8
demo/pages/basics/image/image.wxml
View File

@@ -1,5 +1,5 @@
<custom style="height:{{CustomBar}}px;">
<bar class="fixed gradual-blue" style="height:{{CustomBar}}px;padding-top:{{StatusBar}}px;">
<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>
图片
@@ -7,8 +7,8 @@
<view class='action'>
</view>
</bar>
</custom>
</view>
</view>
<image class="" src="https://image.weilanwl.com/img/square-4.jpg" mode="widthFix" lazy-load="true" binderror="" bindload=""></image>
<view><text>好</text></view>

44
demo/pages/basics/layout/layout.wxml
View File

@@ -1,21 +1,21 @@
<custom style="height:{{CustomBar}}px;">
<bar class="fixed gradual-blue" style="height:{{CustomBar}}px;padding-top:{{StatusBar}}px;">
<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>
</bar>
</custom>
</view>
</view>
<scroll-view scroll-x class="bg-white nav text-center fixed" style="top:{{CustomBar}}px">
<item class="{{index==TabCur?'text-blue cur':''}}" wx:for="{{tabNav}}" wx:key bindtap='tabSelect' data-id="{{index}}">
<view class="cu-item {{index==TabCur?'text-blue cur':''}}" wx:for="{{tabNav}}" wx:key bindtap='tabSelect' data-id="{{index}}">
{{tabNav[index]}}
</item>
</view>
</scroll-view>
<block wx:if="{{TabCur==0}}">
<bar class="solid-bottom margin-top">
<view class="cu-bar solid-bottom margin-top">
<view class='action'>
<text class='icon-title text-blue'></text>固定尺寸
</view>
</bar>
</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>
@@ -27,11 +27,11 @@
<view class='basis-xl bg-grey margin-xs padding-sm radius'>xl(80%)</view>
</view>
</view>
<bar class="margin-top solid-bottom">
<view class="cu-bar margin-top solid-bottom">
<view class='action'>
<text class='icon-title text-blue'></text>比例布局
</view>
</bar>
</view>
<view class="padding bg-white">
<view class="flex">
<view class='flex-sub bg-grey padding-sm margin-xs radius'>1</view>
@@ -47,11 +47,11 @@
<view class='flex-treble bg-grey padding-sm margin-xs radius'>3</view>
</view>
</view>
<bar class="margin-top solid-bottom">
<view class="cu-bar margin-top solid-bottom">
<view class='action'>
<text class='icon-title text-blue'></text>水平对齐(justify)
</view>
</bar>
</view>
<view class="bg-white">
<view class="flex solid-bottom padding justify-start">
<view class='bg-grey padding-sm margin-xs radius'>start</view>
@@ -74,11 +74,11 @@
<view class='bg-grey padding-sm margin-xs radius'>around</view>
</view>
</view>
<bar class="margin-top solid-bottom">
<view class="cu-bar margin-top solid-bottom">
<view class='action'>
<text class='icon-title text-blue'></text>垂直对齐(align)
</view>
</bar>
</view>
<view class="bg-white">
<view class="flex solid-bottom padding align-start">
<view class='bg-grey padding-lg margin-xs radius'>ColorUi</view>
@@ -95,23 +95,23 @@
</view>
</block>
<block wx:if="{{TabCur==1}}">
<bar class="margin-top solid-bottom">
<view class="cu-bar margin-top solid-bottom">
<view class='action'>
<text class='icon-title text-blue'></text>等分列
</view>
<view class='action'></view>
</bar>
</view>
<view class="bg-white padding">
<view class="grid col-{{index+1}} margin-bottom text-center" wx:for="{{5}}" wx:key>
<view class="{{index%2==0?'bg-cyan':'bg-blue'}} padding" wx:for="{{(index+1)*2}}" wx:key>{{index+1}}</view>
</view>
</view>
<bar class="margin-top solid-bottom">
<view class="cu-bar margin-top solid-bottom">
<view class='action'>
<text class='icon-title text-blue'></text>等高
</view>
<view class='action'></view>
</bar>
</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>
@@ -119,11 +119,11 @@
</view>
</block>
<block wx:if="{{TabCur==2}}">
<bar class="margin-top solid-bottom">
<view class="cu-bar margin-top solid-bottom">
<view class='action'>
<text class='icon-title text-blue'></text>浮动
</view>
</bar>
</view>
<view class="bg-white padding">
<view class=" cf padding-sm">
<view class='bg-grey radius fl padding-sm'>ColorUi fl</view>
@@ -132,11 +132,11 @@
</view>
</block>
<block wx:if="{{TabCur==3}}">
<bar class="margin-top solid-bottom">
<view class="cu-bar margin-top solid-bottom">
<view class='action'>
<text class='icon-title text-blue'></text>内外边距
</view>
</bar>
</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'>

44
demo/pages/basics/loading/loading.wxml
View File

@@ -1,60 +1,60 @@
<custom style="height:{{CustomBar}}px;">
<bar class="fixed gradual-blue" style="height:{{CustomBar}}px;padding-top:{{StatusBar}}px;">
<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 class='action'>
<load class="load-text {{!isLoad?'loading':'over'}}"></load>
<view class="cu-load load-icon {{!isLoad?'loading':'over'}}"></view>
</view>
</bar>
</custom>
<bar>
</view>
</view>
<view class="cu-bar">
<view class='action'>
<text class='icon-title text-blue'></text>背景
</view>
</bar>
<load class="bg-blue {{!isLoad?'loading':'over'}}"></load>
<bar class="margin-top">
</view>
<view class="cu-load bg-blue {{!isLoad?'loading':'over'}}"></view>
<view class="cu-bar margin-top">
<view class='action'>
<text class='icon-title text-blue'></text>加载状态
</view>
<view class='action'>
<switch class='sm' bindchange='isLoading'></switch>
</view>
</bar>
<load class="bg-grey {{!isLoad?'loading':'over'}}"></load>
<bar class="margin-top">
</view>
<view class="cu-load bg-grey {{!isLoad?'loading':'over'}}"></view>
<view class="cu-bar margin-top">
<view class='action'>
<text class='icon-title text-blue'></text>加载错误
</view>
</bar>
<load class="bg-red erro"></load>
</view>
<view class="cu-load bg-red erro"></view>
<bar class="margin-top">
<view class="cu-bar margin-top">
<view class='action'>
<text class='icon-title text-blue'></text>弹框加载
</view>
<view class='action'>
<button class='bg-green shadow' bindtap='loadModal'>
<button class='cu-btn bg-green shadow' bindtap='loadModal'>
点我
</button>
</view>
</bar>
<load class='load-modal' wx:if="{{loadModal}}">
</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>
</load>
<bar class="margin-top">
</view>
<view class="cu-bar margin-top">
<view class='action'>
<text class='icon-title text-blue'></text>进度条加载
</view>
<view class='action'>
<button class='bg-green shadow' bindtap='loadProgress'>
<button class='cu-btn bg-green shadow' bindtap='loadProgress'>
点我
</button>
</view>
</bar>
</view>
<view class='load-progress {{loadProgress!=0?"show":"hide"}}' style="top:{{CustomBar}}px;">
<view class='load-progress-bar bg-green' style="transform: translate3d(-{{100-loadProgress}}%, 0px, 0px);"></view>
<view class='load-progress-spinner text-green'></view>

106
demo/pages/basics/progress/progress.wxml
View File

@@ -1,116 +1,116 @@
<custom style="height:{{CustomBar}}px;">
<bar class="fixed gradual-blue" style="height:{{CustomBar}}px;padding-top:{{StatusBar}}px;">
<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>
</bar>
</custom>
<bar class="solid-bottom">
</view>
</view>
<view class="cu-bar solid-bottom">
<view class='action'>
<text class='icon-title text-blue'></text>进度条形状
</view>
</bar>
<view class="padding bg-white">
<progress-bar>
<view class='bg-red' style="width:{{loading?'61.8%':''}};">61.8%</view>
</progress-bar>
<progress-bar class="radius margin-top">
<view class='bg-red' style="width:{{loading?'61.8%':''}};">61.8%</view>
</progress-bar>
<progress-bar class="round margin-top">
<view class='bg-red' style="width:{{loading?'61.8%':''}};">61.8%</view>
</progress-bar>
</view>
<bar class="solid-bottom margin-top">
<view class="padding bg-white">
<view class="cu-progress">
<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>
<view class="cu-progress round margin-top">
<view class='bg-red' style="width:{{loading?'61.8%':''}};">61.8%</view>
</view>
</view>
<view class="cu-bar solid-bottom margin-top">
<view class='action'>
<text class='icon-title text-blue'></text>进度条尺寸
</view>
</bar>
</view>
<view class="padding bg-white">
<progress-bar class="round">
<view class="cu-progress round">
<view class='bg-red' style="width:{{loading?'61.8%':''}};"></view>
</progress-bar>
<progress-bar class="round margin-top sm">
</view>
<view class="cu-progress round margin-top sm">
<view class='bg-red' style="width:{{loading?'61.8%':''}};"></view>
</progress-bar>
<progress-bar class="round margin-top xs">
</view>
<view class="cu-progress round margin-top xs">
<view class='bg-red' style="width:{{loading?'61.8%':''}};"></view>
</progress-bar>
</view>
</view>
<bar class="solid-bottom margin-top" bindtap="showModal" data-target="ColorModal">
<view class="cu-bar solid-bottom margin-top" bindtap="showModal" data-target="ColorModal">
<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>
</bar>
</view>
<view class="padding {{color=='white'?'bg-grey':'bg-white'}}">
<progress-bar class="round">
<view class="cu-progress round">
<view class='bg-{{color}}' style="width:{{loading?'61.8%':''}};"></view>
</progress-bar>
</view>
</view>
<bar class="solid-bottom margin-top">
<view class="cu-bar solid-bottom margin-top">
<view class='action'>
<text class='icon-title text-blue'></text>进度条条纹
</view>
<switch class='sm margin-right-sm' bindchange='SetActive'></switch>
</bar>
<view class="padding bg-white">
<progress-bar class="round sm striped {{active?'active':''}}">
<view class='bg-green' style="width:{{loading?'60%':''}};"></view>
</progress-bar>
<progress-bar class="round sm margin-top-sm striped {{active?'active':''}}">
<view class='bg-black' style="width:{{loading?'40%':''}};"></view>
</progress-bar>
</view>
<bar class="solid-bottom margin-top">
<view class="padding bg-white">
<view class="cu-progress round sm striped {{active?'active':''}}">
<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>
</view>
<view class="cu-bar solid-bottom margin-top">
<view class='action'>
<text class='icon-title text-blue'></text>进度条比例
</view>
</bar>
</view>
<view class="padding bg-white">
<progress-bar class="radius striped active">
<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>
</progress-bar>
</view>
</view>
<bar class="solid-bottom margin-top">
<view class="cu-bar solid-bottom margin-top">
<view class='action'>
<text class='icon-title text-blue'></text>进度条布局
</view>
</bar>
</view>
<view class="padding bg-white ">
<view class='flex'>
<progress-bar class="round">
<view class="cu-progress round">
<view class='bg-green' style="width:{{loading?'100%':''}};"></view>
</progress-bar>
</view>
<text class='icon-roundcheckfill text-green margin-left-sm'></text>
</view>
<view class='flex margin-top'>
<progress-bar class="round">
<view class="cu-progress round">
<view class='bg-green' style="width:{{loading?'80%':''}};"></view>
</progress-bar>
</view>
<text class='margin-left'>80%</text>
</view>
</view>
<modal-box class="{{modalName=='ColorModal'?'show':''}}">
<dialog>
<bar class="justify-end">
<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>
</bar>
</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>
</dialog>
</modal-box>
</view>
</view>

16
demo/pages/basics/shadow/shadow.wxml
View File

@@ -1,18 +1,18 @@
<custom style="height:{{CustomBar}}px;">
<bar class="fixed gradual-blue" style="height:{{CustomBar}}px;padding-top:{{StatusBar}}px;">
<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>
</bar>
</custom>
<bar class="solid-bottom">
</view>
</view>
<view class="cu-bar solid-bottom">
<view class='action'>
<text class='icon-title text-blue'></text>边框
</view>
<view class='action'>
<switch class='sm' bindchange='SetSize'></switch>
</view>
</bar>
</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>
@@ -20,11 +20,11 @@
<view class='padding solid{{size?"s":""}}-bottom margin-top'>下</view>
<view class='padding solid{{size?"s":""}}-left margin-top'>左</view>
</view>
<bar class="margin-top">
<view class="cu-bar margin-top">
<view class='action'>
<text class='icon-title text-blue'></text>阴影
</view>
</bar>
</view>
<view class="padding text-center">
<view class="padding-xl radius shadow bg-white"> 默认阴影</view>
<view class="padding-xl radius shadow-lg bg-white margin-top">长阴影</view>

156
demo/pages/basics/tag/tag.wxml
View File

@@ -1,119 +1,119 @@
<custom style="height:{{CustomBar}}px;">
<bar class="fixed gradual-blue" style="height:{{CustomBar}}px;padding-top:{{StatusBar}}px;">
<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>
</bar>
</custom>
</view>
</view>
<bar>
<view class="cu-bar">
<view class='action'>
<text class='icon-title text-blue'></text>标签形状
</view>
</bar>
</view>
<view class="padding">
<tag>默认</tag>
<tag class='round'>椭圆</tag>
<tag class='radius'>圆角</tag>
<view class='cu-tag'>默认</view>
<view class='cu-tag round'>椭圆</view>
<view class='cu-tag radius'>圆角</view>
</view>
<bar class="margin-top">
<view class="cu-bar margin-top">
<view class='action'>
<text class='icon-title text-blue'></text>标签尺寸
</view>
</bar>
<view class="padding">
<tag class='radius sm'>小尺寸</tag>
<tag class='radius'>普通尺寸</tag>
</view>
<bar class="margin-top">
<view class="padding">
<view class='cu-tag radius sm'>小尺寸</view>
<view class='cu-tag radius'>普通尺寸</view>
</view>
<view class="cu-bar margin-top">
<view class='action'>
<text class='icon-title text-blue'></text>标签颜色
</view>
</bar>
</view>
<view class='padding-sm flex flex-wrap'>
<view class="padding-xs" wx:for="{{ColorList}}" wx:key>
<tag class='bg-{{item.name}}'>{{item.title}}</tag>
<view class='cu-tag bg-{{item.name}}'>{{item.title}}</view>
</view>
<view class="padding-xs" wx:for="{{ColorList}}" wx:key wx:if="{{index<12}}">
<tag class='bg-{{item.name}} light'>{{item.title}}</tag>
<view class='cu-tag bg-{{item.name}} light'>{{item.title}}</view>
</view>
</view>
<bar class="margin-top">
<view class="cu-bar margin-top">
<view class='action'>
<text class='icon-title text-blue'></text>镂空标签
</view>
</bar>
</view>
<view class='padding-sm flex flex-wrap'>
<view class="padding-xs" wx:for="{{ColorList}}" wx:key>
<tag class='line-{{item.name}}'>{{item.title}}</tag>
<view class='cu-tag line-{{item.name}}'>{{item.title}}</view>
</view>
</view>
<bar class="margin-top">
<view class="cu-bar margin-top">
<view class='action'>
<text class='icon-title text-blue'></text>胶囊样式
</view>
</bar>
<view class="padding">
<capsule>
<tag class='bg-red'>
<text class='icon-likefill'></text>
</tag>
<tag class="line-red">
12
</tag>
</capsule>
<capsule class="round">
<tag class='bg-blue '>
<text class='icon-likefill'></text>
</tag>
<tag class="line-blue">
23
</tag>
</capsule>
<capsule class="round">
<tag class='bg-blue '>
说明
</tag>
<tag class="line-blue">
123
</tag>
</capsule>
<capsule class="radius">
<tag class='bg-grey '>
<text class='icon-likefill'></text>
</tag>
<tag class="line-grey">
23
</tag>
</capsule>
<capsule class="radius">
<tag class='bg-brown sm'>
<text class='icon-likefill'></text>
</tag>
<tag class="line-brown sm">
23
</tag>
</capsule>
</view>
<bar class="margin-top">
<view class="padding">
<view class="cu-capsule">
<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>
<view class="cu-tag line-blue">
23
</view>
</view>
<view class="cu-capsule round">
<view class='cu-tag bg-blue '>
说明
</view>
<view class="cu-tag line-blue">
123
</view>
</view>
<view class="cu-capsule radius">
<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>
<view class="cu-tag line-brown sm">
23
</view>
</view>
</view>
<view class="cu-bar margin-top">
<view class='action'>
<text class='icon-title text-blue'></text>数字标签
</view>
</bar>
</view>
<view class="padding flex justify-between align-center">
<avatar class='xl radius'>
<view class='cu-avatar xl radius'>
港
<tag class="badge">99+</tag>
</avatar>
<avatar class='xl radius' style="background-image:url(https://image.weilanwl.com/img/square-3.jpg);">
<tag class='badge'>9</tag>
</avatar>
<avatar class='xl radius'>
<tag class='badge'>99</tag>
<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>
<view class='cu-avatar xl radius'>
<view class='cu-tag badge'>99</view>
<text class='icon-people'></text>
</avatar>
<avatar class='xl radius'>
<tag class='badge'>99+</tag>
</avatar>
</view>
<view class='cu-avatar xl radius'>
<view class='cu-tag badge'>99+</view>
</view>
</view>

28
demo/pages/basics/text/text.wxml
View File

@@ -1,18 +1,18 @@
<custom style="height:{{CustomBar}}px;">
<bar class="fixed gradual-blue" style="height:{{CustomBar}}px;padding-top:{{StatusBar}}px;">
<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 class='action'>
</view>
</bar>
</custom>
<bar class="solid-bottom">
</view>
</view>
<view class="cu-bar solid-bottom">
<view class='action'>
<text class='icon-title text-blue'></text>文字大小
</view>
</bar>
</view>
<view class='bg-white padding-lr'>
<view class='solids-bottom padding-xs flex align-center'>
<view class='padding'>60</view>
@@ -85,11 +85,11 @@
</view>
</view>
</view>
<bar class="solid-bottom margin-top">
<view class="cu-bar solid-bottom margin-top">
<view class='action'>
<text class='icon-title text-blue'></text>文字颜色
</view>
</bar>
</view>
<view class='grid col-5 padding-sm'>
<view class='padding-sm' wx:for="{{list}}" wx:key>
<view class='text-{{item.name}} text-center'>
@@ -97,29 +97,29 @@
</view>
</view>
</view>
<bar class="solid-bottom margin-top">
<view class="cu-bar solid-bottom margin-top">
<view class='action'>
<text class='icon-title text-blue'></text>文字截断
</view>
</bar>
</view>
<view class='padding bg-white'>
<view class='text-cut padding bg-grey radius' style='width:220px'>我于杀戮之中绽放 ,亦如黎明中的花朵</view>
</view>
<bar class="solid-bottom margin-top">
<view class="cu-bar solid-bottom margin-top">
<view class='action'>
<text class='icon-title text-blue'></text>文字对齐
</view>
</bar>
</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>
<bar class="solid-bottom margin-top">
<view class="cu-bar solid-bottom margin-top">
<view class='action'>
<text class='icon-title text-blue'></text>特殊文字
</view>
</bar>
</view>
<view class='padding text-center'>
<view class='padding-lr bg-white'>
<view class='solid-bottom padding'>

154
demo/pages/component/bar/bar.wxml
View File

@@ -1,46 +1,46 @@
<custom style="height:{{CustomBar}}px;">
<bar class="fixed gradual-pink" style="height:{{CustomBar}}px;padding-top:{{StatusBar}}px;">
<view class="cu-custom" style="height:{{CustomBar}}px;">
<view class="cu-bar fixed gradual-pink" style="height:{{CustomBar}}px;padding-top:{{StatusBar}}px;">
<navigator class='action' open-type="navigateBack" delta="1" hover-class="none">
<text class='icon-back'></text>
<text>操作条</text>
</navigator>
</bar>
</custom>
</view>
</view>
<bar class="margin-top">
<view class="cu-bar margin-top">
<view class='action'>
<text class='icon-back text-gray'></text>
<text>返回</text>
</view>
</bar>
</view>
<bar class="margin-top">
<view class="cu-bar margin-top">
<view class='action'>
<text class='icon-title text-green'></text>
<text>案例</text>
</view>
<view class='action'>
<button class='bg-green shadow-blur sm'>添加
<button class='cu-btn bg-green shadow-blur sm'>添加
<text class='icon-add'></text> </button>
</view>
</bar>
</view>
<bar class="margin-top justify-end">
<view class="cu-bar margin-top justify-end">
<view class='action'>
<text class='icon-close text-red'></text>
</view>
</bar>
</view>
<bar class="margin-top">
<view class="cu-bar margin-top">
<view class='action'>
<text class='icon-back text-gray'></text> 返回
</view>
<view class='content'>
操作条
</view>
</bar>
</view>
<bar class="margin-top">
<view class="cu-bar margin-top">
<view class='action'>
<text class='icon-homefill text-gray'></text> 首页
</view>
@@ -51,37 +51,37 @@
<text class='icon-cardboardfill text-grey'></text>
<text class='icon-recordfill text-red'></text>
</view>
</bar>
</view>
<bar class="margin-top bg-blue">
<view class="cu-bar margin-top bg-blue">
<view class='action'>
<text class='icon-close'></text> 关闭
</view>
<view class='content'>
海蓝
</view>
</bar>
<bar class="margin-top bg-orange">
</view>
<view class="cu-bar margin-top bg-orange">
<view class='action'>
<text class='icon-back'></text> 返回
</view>
<view class='content'>
操作条
</view>
</bar>
</view>
<bar class="margin-top bg-black search">
<avatar class="round" style="background-image:url(https://image.weilanwl.com/img/square-3.jpg);"></avatar>
<view class="cu-bar margin-top bg-black search">
<view class="cu-avatar round" style="background-image:url(https://image.weilanwl.com/img/square-3.jpg);"></view>
<view class='content'>
ColorUI
</view>
<view class='action'>
<text class="icon-more"></text>
</view>
</bar>
</view>
<bar class="margin-top bg-red search">
<avatar class="round" style="background-image:url(https://image.weilanwl.com/img/square-1.jpg);"></avatar>
<view class="cu-bar margin-top bg-red search">
<view class="cu-avatar round" style="background-image:url(https://image.weilanwl.com/img/square-1.jpg);"></view>
<view class='search-form radius'>
<text class="icon-search"></text>
<input type="text" placeholder="搜索图片、文章、视频" confirm-type="search"></input>
@@ -90,10 +90,10 @@
<text>广州</text>
<text class="icon-triangledownfill"></text>
</view>
</bar>
</view>
<bar class="margin-top search">
<avatar class="round" style="background-image:url(https://image.weilanwl.com/img/square-2.jpg);"></avatar>
<view class="cu-bar margin-top search">
<view class="cu-avatar round" style="background-image:url(https://image.weilanwl.com/img/square-2.jpg);"></view>
<view class='search-form round'>
<text class="icon-search"></text>
<input type="text" placeholder="搜索图片、文章、视频" confirm-type="search"></input>
@@ -102,9 +102,9 @@
<text>广州</text>
<text class="icon-triangledownfill"></text>
</view>
</bar>
</view>
<bar class="margin-top bg-cyan search">
<view class="cu-bar margin-top bg-cyan search">
<view class='search-form radius'>
<text class="icon-search"></text>
<input type="text" placeholder="搜索图片、文章、视频" confirm-type="search"></input>
@@ -113,40 +113,40 @@
<text class='icon-close'></text>
<text>取消</text>
</view>
</bar>
</view>
<bar class="margin-top search">
<view class="cu-bar margin-top search">
<view class='search-form round'>
<text class="icon-search"></text>
<input type="text" placeholder="搜索图片、文章、视频" confirm-type="search"></input>
</view>
<view class='action'>
<button class='bg-green shadow-blur round'>搜索</button>
<button class='cu-btn bg-green shadow-blur round'>搜索</button>
</view>
</bar>
</view>
<bar class="margin-top btn-group">
<button class='bg-green shadow-blur round'>保存</button>
</bar>
<view class="cu-bar margin-top btn-group">
<button class='cu-btn bg-green shadow-blur round'>保存</button>
</view>
<bar class="margin-top btn-group">
<button class='bg-green shadow-blur round lg'>保存</button>
</bar>
<view class="cu-bar margin-top btn-group">
<button class='cu-btn bg-green shadow-blur round lg'>保存</button>
</view>
<bar class="margin-top btn-group">
<button class='bg-green shadow-blur'>保存</button>
<button class='text-green line-green shadow'>上传</button>
</bar>
<view class="cu-bar margin-top btn-group">
<button class='cu-btn bg-green shadow-blur'>保存</button>
<button class='cu-btn text-green line-green shadow'>上传</button>
</view>
<bar class="margin-top btn-group">
<button class='bg-green shadow-blur round'>保存</button>
<button class='bg-blue shadow-blur round'>提交</button>
</bar>
<view class="cu-bar margin-top btn-group">
<button class='cu-btn bg-green shadow-blur round'>保存</button>
<button class='cu-btn bg-blue shadow-blur round'>提交</button>
</view>
<bar class="margin-top shop">
<button class="action" open-type='contact'>
<view class="cu-bar margin-top shop">
<button class="cu-btn action" open-type='contact'>
<text class='icon-service text-green'>
<tag class='badge'></tag>
<view class='cu-tag badge'></view>
</text>
客服
</button>
@@ -155,34 +155,34 @@
</view>
<view class="action">
<text class='icon-cart'>
<tag class='badge'>99</tag>
<view class='cu-tag badge'>99</view>
</text>
购物车
</view>
<view class='bg-red submit'>立即订购</view>
</bar>
</view>
<bar class="margin-top shop">
<button class="action" open-type='contact'>
<view class="cu-bar margin-top shop">
<button class="cu-btn action" open-type='contact'>
<text class='icon-service text-green'>
<tag class='badge'></tag>
<view class='cu-tag badge'></view>
</text>
客服
</button>
<view class="action">
<text class='icon-cart'>
<tag class='badge'>99</tag>
<view class='cu-tag badge'>99</view>
</text>
购物车
</view>
<view class='bg-orange submit'>加入购物车</view>
<view class='bg-red submit'>立即订购</view>
</bar>
</view>
<bar class="margin-top shop">
<button class="action" open-type='contact'>
<view class="cu-bar margin-top shop">
<button class="cu-btn action" open-type='contact'>
<text class='icon-service text-green'>
<tag class='badge'></tag>
<view class='cu-tag badge'></view>
</text>
客服
</button>
@@ -191,37 +191,37 @@
</view>
<view class="action">
<text class='icon-cart'>
<tag class='badge'>99</tag>
<view class='cu-tag badge'>99</view>
</text>
购物车
</view>
<view class='submit'>
<button class='bg-red round shadow-blur'>立即订购</button>
<button class='cu-btn bg-red round shadow-blur'>立即订购</button>
</view>
</bar>
</view>
<bar class="margin-top shop">
<button class="action" open-type='contact'>
<view class="cu-bar margin-top shop">
<button class="cu-btn action" open-type='contact'>
<text class='icon-service text-green'>
<tag class='badge'></tag>
<view class='cu-tag badge'></view>
</text>
客服
</button>
<view class="action">
<text class='icon-cart'>
<tag class='badge'>99</tag>
<view class='cu-tag badge'>99</view>
</text>
购物车
</view>
<view class='submit'>
<button class='bg-orange round shadow-blur'>加入购物车</button>
<button class='cu-btn bg-orange round shadow-blur'>加入购物车</button>
</view>
<view class='submit'>
<button class='bg-red round shadow-blur'>立即订购</button>
<button class='cu-btn bg-red round shadow-blur'>立即订购</button>
</view>
</bar>
</view>
<bar class="margin-top input">
<view class="cu-bar margin-top input">
<view class='action'>
<text class='icon-sound text-grey'></text>
</view>
@@ -229,11 +229,11 @@
<view class='action'>
<text class='icon-emojifill text-grey'></text>
</view>
<button class='bg-green shadow-blur'>发送</button>
</bar>
<button class='cu-btn bg-green shadow-blur'>发送</button>
</view>
<bar class="margin-top input">
<avatar class="round" style="background-image:url(https://image.weilanwl.com/img/square-3.jpg);"></avatar>
<view class="cu-bar margin-top input">
<view class="cu-avatar round" style="background-image:url(https://image.weilanwl.com/img/square-3.jpg);"></view>
<view class='action'>
<text class='icon-roundaddfill text-grey'></text>
</view>
@@ -241,5 +241,5 @@
<view class='action'>
<text class='icon-emojifill text-grey'></text>
</view>
<button class='bg-green shadow-blur'>发送</button>
</bar>
<button class='cu-btn bg-green shadow-blur'>发送</button>
</view>

82
demo/pages/component/card/card.wxml
View File

@@ -1,28 +1,28 @@
<custom style="height:{{CustomBar}}px;">
<bar class="fixed gradual-pink" style="height:{{CustomBar}}px;padding-top:{{StatusBar}}px;">
<view class="cu-custom" style="height:{{CustomBar}}px;">
<view class="cu-bar fixed gradual-pink" 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>
</bar>
</custom>
<bar class="solid-bottom">
</view>
</view>
<view class="cu-bar solid-bottom">
<view class='action'>
<text class='icon-titles text-orange '></text> 案例类卡片
</view>
<view class='action'>
<switch class='sm' checked='{{isCard}}' bindchange='isCard'></switch>
</view>
</bar>
<card class="case {{isCard?'no-card':''}}">
<item wx:for="{{1}}" wx:key class="shadow">
</view>
<view class="cu-card case {{isCard?'no-card':''}}">
<view wx:for="{{1}}" wx:key class="cu-item shadow">
<view class='image'>
<image src="https://image.weilanwl.com/img/4x3-1.jpg" mode="widthFix"></image>
<tag class="bg-blue">福利</tag>
<bar class='bg-shadeBottom'>我和制服不得不说的那些事！</bar>
<view class="cu-tag bg-blue">福利</view>
<view class='cu-bar bg-shadeBottom'>我和制服不得不说的那些事！</view>
</view>
<list class="menu menu-avatar">
<item>
<avatar class="round lg" style="background-image:url(https://image.weilanwl.com/img/square-4.jpg);"></avatar>
<view class="cu-list menu menu-avatar">
<view class="cu-item">
<view class="cu-avatar round lg" style="background-image:url(https://image.weilanwl.com/img/square-4.jpg);"></view>
<view class='content flex-sub'>
<view class='text-grey'>猪皮蛋</view>
<view class='text-gray text-sm flex justify-between'>
@@ -34,31 +34,31 @@
</view>
</view>
</view>
</item>
</list>
</item>
</card>
<bar class="solid-bottom {{isCard?'margin-top':''}}">
</view>
</view>
</view>
</view>
<view class="cu-bar solid-bottom {{isCard?'margin-top':''}}">
<view class='action'>
<text class='icon-titles text-orange '></text> 动态类卡片
</view>
<view class='action'>
<switch class='sm' checked='{{isCard}}' bindchange='isCard'></switch>
</view>
</bar>
<card class="dynamic {{isCard?'no-card':''}}">
<item wx:for="1" wx:key class="shadow">
<list class="menu menu-avatar">
<item>
<avatar class="round lg" style="background-image:url(https://image.weilanwl.com/img/square-1.jpg);"></avatar>
</view>
<view class="cu-card dynamic {{isCard?'no-card':''}}">
<view wx:for="1" wx:key class="cu-item shadow">
<view class="cu-list menu menu-avatar">
<view class="cu-item">
<view class="cu-avatar round lg" style="background-image:url(https://image.weilanwl.com/img/square-1.jpg);"></view>
<view class='content flex-sub'>
<view>晓晓萌</view>
<view class='text-gray text-sm flex justify-between'>
2018年12月3日
</view>
</view>
</item>
</list>
</view>
</view>
<view class='text-content'>
你们的铲屎官是不是经常突然对手机傻笑？我家铲屎官常常坐沙发上笑的发抖！（暗中观察.jpg）
</view>
@@ -71,9 +71,9 @@
<text class="icon-appreciatefill"></text> 20
<text class="icon-messagefill"></text> 30
</view>
<list class="menu menu-avatar comment solids-top">
<item wx:for="{{2}}" wx:key>
<avatar class="round" style="background-image:url(https://image.weilanwl.com/img/square-1.jpg);"></avatar>
<view class="cu-list menu menu-avatar comment solids-top">
<view class="cu-item" wx:for="{{2}}" wx:key>
<view class="cu-avatar round" style="background-image:url(https://image.weilanwl.com/img/square-1.jpg);"></view>
<view class='content'>
<view class='text-grey'>猪皮蛋</view>
<view class='text-gray text-content text-df'>
@@ -93,31 +93,31 @@
</view>
</view>
</view>
</item>
</list>
</item>
</card>
</view>
</view>
</view>
</view>
<bar class="solid-bottom margin-top">
<view class="cu-bar solid-bottom margin-top">
<view class='action'>
<text class='icon-titles text-orange '></text> 文章类卡片
</view>
<view class='action'>
<switch class='sm' checked='{{isCard}}' bindchange='isCard'></switch>
</view>
</bar>
<card class="article {{isCard?'no-card':''}}">
<item wx:for="1" wx:key class="shadow">
</view>
<view class="cu-card article {{isCard?'no-card':''}}">
<view wx:for="1" wx:key class="cu-item shadow">
<view class="title">这里有个戏精铲屎官，主子了解一下？</view>
<view class="content">
<image src="https://image.weilanwl.com/img/4x3-3.jpg" mode="aspectFill"></image>
<view class="desc">
<view class='text-content'> 这是一个伪铲屎官为了给自己的程序凑字数瞎几把乱写的一堆文字，了解一下就OK！ヾ(=･ω･=)o</view>
<view>
<tag class='bg-red light sm round'>假装有猫系列</tag>
<tag class='bg-green light sm round'>戏精系列</tag>
<view class='cu-tag bg-red light sm round'>假装有猫系列</view>
<view class='cu-tag bg-green light sm round'>戏精系列</view>
</view>
</view>
</view>
</item>
</card>
</view>
</view>

64
demo/pages/component/chat/chat.wxml
View File

@@ -1,47 +1,47 @@
<custom style="height:{{CustomBar}}px;">
<bar class="fixed gradual-pink" style="height:{{CustomBar}}px;padding-top:{{StatusBar}}px;">
<view class="cu-custom" style="height:{{CustomBar}}px;">
<view class="cu-bar fixed gradual-pink" 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>
</bar>
</custom>
</view>
</view>
<chat>
<item class="self">
<view class="cu-chat">
<view class="cu-item self">
<view class="main">
<view class='content bg-green shadow-blur'>
<text>喵喵喵！喵喵喵！喵喵喵！喵喵！喵喵！！喵！喵喵喵！</text>
</view>
</view>
<avatar class="radius" style="background-image:url(https://image.weilanwl.com/img/square-3.jpg);"></avatar>
<view class="cu-avatar radius" style="background-image:url(https://image.weilanwl.com/img/square-3.jpg);"></view>
<view class='date'>2018年3月23日 13:23</view>
</item>
<info class='round'>对方撤回一条消息!</info>
<item>
<avatar class="radius" style="background-image:url(https://image.weilanwl.com/img/square-2.jpg);"></avatar>
</view>
<view class='cu-info round'>对方撤回一条消息!</view>
<view class="cu-item">
<view class="cu-avatar radius" style="background-image:url(https://image.weilanwl.com/img/square-2.jpg);"></view>
<view class="main">
<view class='content shadow'>
<text>喵喵喵！喵喵喵！</text>
</view>
</view>
<view class='date '> 13:23</view>
</item>
<info>
</view>
<view class="cu-info">
<text class='icon-roundclosefill text-red '></text> 对方拒绝了你的消息
</info>
<info>
</view>
<view class="cu-info">
对方开启了好友验证，你还不是他(她)的好友。请先发送好友验证请求，对方验证通过后，才能聊天。
<text class='text-blue'>发送好友验证</text>
</info>
<item class="self">
</view>
<view class="cu-item self">
<view class="main">
<image src="https://image.weilanwl.com/img/3x4-1.jpg" class='radius' mode="widthFix"></image>
</view>
<avatar class="radius" style="background-image:url(https://image.weilanwl.com/img/square-3.jpg);"></avatar>
<view class="cu-avatar radius" style="background-image:url(https://image.weilanwl.com/img/square-3.jpg);"></view>
<view class='date'> 13:23</view>
</item>
<item class="self">
</view>
<view class="cu-item self">
<view class="main">
<view class='action text-bold text-grey'>
3"
@@ -50,10 +50,10 @@
<text class='icon-sound text-xxl padding-right-xl'> </text>
</view>
</view>
<avatar class="radius" style="background-image:url(https://image.weilanwl.com/img/square-3.jpg);"></avatar>
<view class="cu-avatar radius" style="background-image:url(https://image.weilanwl.com/img/square-3.jpg);"></view>
<view class='date'>13:23</view>
</item>
<item class="self">
</view>
<view class="cu-item self">
<view class="main">
<view class='action'>
<text class='icon-locationfill text-orange text-xxl'></text>
@@ -62,11 +62,11 @@
喵星球，喵喵市
</view>
</view>
<avatar class="radius" style="background-image:url(https://image.weilanwl.com/img/square-3.jpg);"></avatar>
<view class="cu-avatar radius" style="background-image:url(https://image.weilanwl.com/img/square-3.jpg);"></view>
<view class='date'>13:23</view>
</item>
<item>
<avatar class="radius" style="background-image:url(https://image.weilanwl.com/img/square-2.jpg);"></avatar>
</view>
<view class="cu-item">
<view class="cu-avatar radius" style="background-image:url(https://image.weilanwl.com/img/square-2.jpg);"></view>
<view class="main">
<view class='content shadow'>
@#$^&**
@@ -76,10 +76,10 @@
</view>
</view>
<view class='date'>13:23</view>
</item>
</chat>
</view>
</view>
<bar class="foot input">
<view class="cu-bar foot input">
<view class='action'>
<text class='icon-sound text-grey'></text>
</view>
@@ -87,5 +87,5 @@
<view class='action'>
<text class='icon-emojifill text-grey'></text>
</view>
<button class='bg-green shadow-blur'>发送</button>
</bar>
<button class='cu-btn bg-green shadow-blur'>发送</button>
</view>

138
demo/pages/component/form/form.wxml
View File

@@ -1,175 +1,175 @@
<custom style="height:{{CustomBar}}px;">
<bar class="fixed gradual-pink" style="height:{{CustomBar}}px;padding-top:{{StatusBar}}px;">
<view class="cu-custom" style="height:{{CustomBar}}px;">
<view class="cu-bar fixed gradual-pink" 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>
</bar>
</custom>
</view>
</view>
<form>
<form-group class="margin-top">
<view class="cu-form-group margin-top">
<view class='title'>邮件</view>
<input placeholder="两字短标题" class='radius' name='input'></input>
</form-group>
<form-group>
</view>
<view class="cu-form-group">
<view class='title'>输入框</view>
<input placeholder="三字标题" class='radius' name='input'></input>
</form-group>
<form-group>
</view>
<view class="cu-form-group">
<view class='title'>收货地址</view>
<input placeholder="统一标题的宽度" class='radius' name='input'></input>
</form-group>
<form-group>
</view>
<view class="cu-form-group">
<view class='title'>收货地址</view>
<input placeholder="输入框带个图标" class='radius' name='input'></input>
<text class='icon-locationfill text-orange'></text>
</form-group>
<form-group>
</view>
<view class="cu-form-group">
<view class='title'>验证码</view>
<input placeholder="输入框带个按钮" class='radius' name='input'></input>
<button class='bg-green shadow'>验证码</button>
</form-group>
<form-group>
<button class='cu-btn bg-green shadow'>验证码</button>
</view>
<view class="cu-form-group">
<view class='title'>手机号码</view>
<input placeholder="输入框带标签" class='radius' name='input'></input>
<capsule class="radius">
<tag class='bg-blue '>
<view class="cu-capsule radius">
<view class='cu-tag bg-blue '>
+86
</tag>
<tag class="line-blue">
</view>
<view class="cu-tag line-blue">
中国大陆
</tag>
</capsule>
</form-group>
</view>
</view>
</view>
<form-group class="margin-top">
<view class="cu-form-group margin-top">
<view class='title'>普通选择</view>
<picker bindchange="PickerChange" value="{{index}}" range="{{picker}}">
<view class="picker">
{{index?picker[index]:'禁止换行，超出容器部分会以 ... 方式截断'}}
</view>
</picker>
</form-group>
<form-group>
</view>
<view class="cu-form-group">
<view class='title'>多列选择</view>
<picker mode="multiSelector" bindchange="MultiChange" bindcolumnchange="MultiColumnChange" value="{{multiIndex}}" range="{{multiArray}}">
<view class="picker">
{{multiArray[0][multiIndex[0]]}}，{{multiArray[1][multiIndex[1]]}}，{{multiArray[2][multiIndex[2]]}}
</view>
</picker>
</form-group>
<form-group>
</view>
<view class="cu-form-group">
<view class='title'>时间选择</view>
<picker mode="time" value="{{time}}" start="09:01" end="21:01" bindchange="TimeChange">
<view class="picker">
{{time}}
</view>
</picker>
</form-group>
<form-group>
</view>
<view class="cu-form-group">
<view class='title'>日期选择</view>
<picker mode="date" value="{{date}}" start="2015-09-01" end="2020-09-01" bindchange="DateChange">
<view class="picker">
{{date}}
</view>
</picker>
</form-group>
<form-group>
</view>
<view class="cu-form-group">
<view class='title'>地址选择</view>
<picker mode="region" bindchange="RegionChange" value="{{region}}" custom-item="{{customItem}}">
<view class="picker">
{{region[0]}}，{{region[1]}}，{{region[2]}}
</view>
</picker>
</form-group>
</view>
<form-group class="margin-top">
<view class="cu-form-group margin-top">
<view class='title'>开关选择</view>
<switch class='sm'></switch>
</form-group>
<form-group>
</view>
<view class="cu-form-group">
<view class='title'>大号开关</view>
<switch class=''></switch>
</form-group>
<form-group>
</view>
<view class="cu-form-group">
<view class='title'>定义颜色</view>
<switch class='red sm' checked></switch>
</form-group>
<form-group>
</view>
<view class="cu-form-group">
<switch class='switch-sex' checked></switch>
<view class='title'>定义图标</view>
</form-group>
<form-group>
</view>
<view class="cu-form-group">
<view class='title'>方形开关</view>
<switch class='orange radius sm' checked></switch>
</form-group>
</view>
<radio-group class="block">
<form-group class="margin-top">
<view class="cu-form-group margin-top">
<view class='title'>单选操作(radio)</view>
<radio checked></radio>
</form-group>
<form-group>
</view>
<view class="cu-form-group">
<view class='title'>定义尺寸</view>
<radio class='sm'></radio>
</form-group>
<form-group>
</view>
<view class="cu-form-group">
<view class='title'>定义样式</view>
<radio class='radio'></radio>
</form-group>
<form-group>
</view>
<view class="cu-form-group">
<view class='title'>定义颜色</view>
<view>
<radio class='blue radio'></radio>
<radio class='red margin-left-sm'></radio>
</view>
</form-group>
</view>
</radio-group>
<form-group class="margin-top">
<view class="cu-form-group margin-top">
<view class='title'>复选选操作(checkbox)</view>
<checkbox></checkbox>
</form-group>
<form-group>
</view>
<view class="cu-form-group">
<view class='title'>定义尺寸</view>
<checkbox class='sm' checked></checkbox>
</form-group>
<form-group>
</view>
<view class="cu-form-group">
<view class='title'>定义形状</view>
<checkbox class='round' checked></checkbox>
</form-group>
<form-group>
</view>
<view class="cu-form-group">
<view class='title'>定义颜色</view>
<checkbox class='round blue' checked></checkbox>
</form-group>
<form-group class="margin-top">
</view>
<view class="cu-form-group margin-top">
<view class="grid col-3 grid-square flex-sub">
<view class="padding-xs bg-img" style="background-image:url(https://image.weilanwl.com/img/square-1.jpg);">
</view>
<view class="padding-xs bg-img" style="background-image:url(https://image.weilanwl.com/img/square-2.jpg);">
<tag class="bg-red">
<view class="cu-tag bg-red">
<text class='icon-close'></text>
</tag>
</view>
</view>
<view class="padding-xs solids">
<text class='icon-cameraadd'></text>
</view>
</view>
</form-group>
<form-group class="margin-top" wx:hide="{{modalName==null}}">
</view>
<view class="cu-form-group margin-top" wx:hide="{{modalName==null}}">
<textarea placeholder="多行文本输入框" maxlength="-1" disabled="{{modalName!=null}}" placeholder-class='placeholder'></textarea>
</form-group>
<form-group class="top" wx:hide="{{modalName==null}}">
</view>
<view class="cu-form-group top" wx:hide="{{modalName==null}}">
<view class='title'>点文本框</view>
<textarea placeholder="多行文本输入框" maxlength="-1" disabled="{{modalName!=null}}" placeholder-class='placeholder'></textarea>
</form-group>
</view>
<!--
<form-group class="margin-top">
<view class="cu-form-group margin-top">
<view class='title'>多级联动</view>
<picker mode="region" bindchange="RegionChange" value="{{region}}" custom-item="{{customItem}}">
<view class="picker">
{{region[0]}}，{{region[1]}}，{{region[2]}}
</view>
</picker>
</form-group> -->
</view> -->
</form>

396
demo/pages/component/list/list.wxml
View File

@@ -1,178 +1,178 @@
<custom style="height:{{CustomBar}}px;">
<bar class="fixed gradual-pink" style="height:{{CustomBar}}px;padding-top:{{StatusBar}}px;">
<view class="cu-custom" style="height:{{CustomBar}}px;">
<view class="cu-bar fixed gradual-pink" 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>
</bar>
</custom>
</view>
</view>
<view class="page {{skin?' invert ':' '}}">
<list class="grid col-3">
<item>
<view class="cu-list grid col-3">
<view class="cu-item">
<text class='icon-cardboardfill text-red'></text>
<text>VR</text>
</item>
<item>
</view>
<view class="cu-item">
<text class='icon-recordfill text-orange'></text>
<text>录像</text>
</item>
<item>
</view>
<view class="cu-item">
<text class='icon-picfill text-yellow'></text>
<text>图像</text>
</item>
<item>
</view>
<view class="cu-item">
<text class='icon-noticefill text-olive'>
<tag class="badge">99+</tag>
<view class="cu-tag badge">99+</view>
</text>
<text>通知</text>
</item>
<item>
</view>
<view class="cu-item">
<text class='icon-upstagefill text-cyan'></text>
<text>排行榜</text>
</item>
<item>
</view>
<view class="cu-item">
<text class='icon-clothesfill text-blue'>
<tag class="badge"></tag>
<view class="cu-tag badge"></view>
</text>
<text>皮肤</text>
</item>
<item>
</view>
<view class="cu-item">
<text class='icon-discoverfill text-purple'></text>
<text>发现</text>
</item>
<item>
</view>
<view class="cu-item">
<text class='icon-questionfill text-mauve'></text>
<text>帮助</text>
</item>
<item>
</view>
<view class="cu-item">
<text class='icon-servicefill text-pink'></text>
<text>反馈</text>
</item>
</list>
<list class="grid col-4">
<item>
</view>
</view>
<view class="cu-list grid col-4">
<view class="cu-item">
<text class='icon-cardboardfill text-red'></text>
<text>VR</text>
</item>
<item>
</view>
<view class="cu-item">
<text class='icon-recordfill text-orange'></text>
<text>录像</text>
</item>
<item>
</view>
<view class="cu-item">
<text class='icon-picfill text-yellow'></text>
<text>图像</text>
</item>
<item>
</view>
<view class="cu-item">
<text class='icon-noticefill text-olive'>
<tag class="badge">99+</tag>
<view class="cu-tag badge">99+</view>
</text>
<text>通知</text>
</item>
<item>
</view>
<view class="cu-item">
<text class='icon-upstagefill text-cyan'></text>
<text>排行榜</text>
</item>
<item>
</view>
<view class="cu-item">
<text class='icon-clothesfill text-blue'>
<tag class="badge"></tag>
<view class="cu-tag badge"></view>
</text>
<text>皮肤</text>
</item>
<item>
</view>
<view class="cu-item">
<text class='icon-discoverfill text-purple'></text>
<text>发现</text>
</item>
<item>
</view>
<view class="cu-item">
<text class='icon-questionfill text-mauve'></text>
<text>帮助</text>
</item>
</list>
<list class="grid no-border col-4">
<item>
</view>
</view>
<view class="cu-list grid no-border col-4">
<view class="cu-item">
<text class='icon-cardboardfill text-red'></text>
<text>VR</text>
</item>
<item>
</view>
<view class="cu-item">
<text class='icon-recordfill text-orange'></text>
<text>录像</text>
</item>
<item>
</view>
<view class="cu-item">
<text class='icon-picfill text-yellow'></text>
<text>图像</text>
</item>
<item>
</view>
<view class="cu-item">
<text class='icon-noticefill text-olive'>
<tag class="badge">99+</tag>
<view class="cu-tag badge">99+</view>
</text>
<text>通知</text>
</item>
<item>
</view>
<view class="cu-item">
<text class='icon-upstagefill text-cyan'></text>
<text>排行榜</text>
</item>
<item>
</view>
<view class="cu-item">
<text class='icon-clothesfill text-blue'>
<tag class="badge"></tag>
<view class="cu-tag badge"></view>
</text>
<text>皮肤</text>
</item>
<item>
</view>
<view class="cu-item">
<text class='icon-discoverfill text-purple'></text>
<text>发现</text>
</item>
<item>
</view>
<view class="cu-item">
<text class='icon-questionfill text-mauve'></text>
<text>帮助</text>
</item>
</list>
<list class="grid col-5 no-border">
<item>
</view>
</view>
<view class="cu-list grid col-5 no-border">
<view class="cu-item">
<text class='icon-cardboardfill text-red'>
<tag class="badge">99+</tag>
<view class="cu-tag badge">99+</view>
</text>
<text>VR</text>
</item>
<item>
</view>
<view class="cu-item">
<text class='icon-recordfill text-orange'></text>
<text>录像</text>
</item>
<item>
</view>
<view class="cu-item">
<text class='icon-picfill text-yellow'></text>
<text>图像</text>
</item>
<item>
</view>
<view class="cu-item">
<text class='icon-noticefill text-olive'>
</text>
<text>通知</text>
</item>
<item>
</view>
<view class="cu-item">
<text class='icon-upstagefill text-cyan'></text>
<text>排行榜</text>
</item>
<item>
</view>
<view class="cu-item">
<text class='icon-clothesfill text-blue'>
<tag class="badge"></tag>
<view class="cu-tag badge"></view>
</text>
<text>皮肤</text>
</item>
<item>
</view>
<view class="cu-item">
<text class='icon-discoverfill text-purple'></text>
<text>发现</text>
</item>
<item>
</view>
<view class="cu-item">
<text class='icon-questionfill text-mauve'></text>
<text>帮助</text>
</item>
<item>
</view>
<view class="cu-item">
<text class='icon-commandfill text-purple'></text>
<text>问答</text>
</item>
<item>
</view>
<view class="cu-item">
<text class='icon-brandfill text-mauve'></text>
<text>版权</text>
</item>
</list>
<list class="menu no-padding">
<item>
</view>
</view>
<view class="cu-list menu no-padding">
<view class="cu-item">
<view class='content'>
<view>
<text class='icon-clothesfill text-blue'></text> 皮肤设置</view>
@@ -182,8 +182,8 @@
<view class='action'>
<switch class='switch-sex sm' bindchange="switchSex"></switch>
</view>
</item>
<item>
</view>
<view class="cu-item">
<view class='content'>
<view>
<text class='icon-musicfill text-red'></text> 声音控制</view>
@@ -193,11 +193,11 @@
<view class='action'>
<switch class='switch-music'></switch>
</view>
</item>
</list>
<list class="menu menu-avatar inverts">
<item>
<avatar class="round lg" style="background-image:url(https://image.weilanwl.com/img/square-1.jpg);"></avatar>
</view>
</view>
<view class="cu-list menu menu-avatar inverts">
<view class="cu-item">
<view class="cu-avatar round lg" style="background-image:url(https://image.weilanwl.com/img/square-1.jpg);"></view>
<view class='content'>
<view class='text-grey'>文晓港</view>
<view class='text-gray text-sm'>
@@ -205,16 +205,16 @@
</view>
<view class='action'>
<view class='text-grey text-xs'>22:20</view>
<tag class="round bg-grey sm">5</tag>
<view class="cu-tag round bg-grey sm">5</view>
</view>
</view>
<view class="cu-item">
<view class="cu-avatar round lg" style="background-image:url(https://image.weilanwl.com/img/square-2.jpg);">
<view class="cu-tag badge">99+</view>
</view>
</item>
<item>
<avatar class="round lg" style="background-image:url(https://image.weilanwl.com/img/square-2.jpg);">
<tag class="badge">99+</tag>
</avatar>
<view class='content'>
<view class='text-grey'>文晓港
<tag class="round bg-orange sm">SVIP</tag>
<view class="cu-tag round bg-orange sm">SVIP</view>
</view>
<view class='text-gray text-sm'>
<text class='icon-redpacket_fill text-red'></text> 收到红包</view>
@@ -223,11 +223,11 @@
<view class='text-grey text-xs'>22:20</view>
<text class='icon-notice_forbid_fill text-gray'></text>
</view>
</item>
</list>
<list class="menu menu-avatar no-padding">
<item class="">
<avatar class="radius lg" style="background-image:url(https://image.weilanwl.com/img/square-3.jpg);"></avatar>
</view>
</view>
<view class="cu-list menu menu-avatar no-padding">
<view class="cu-item ">
<view class="cu-avatar radius lg" style="background-image:url(https://image.weilanwl.com/img/square-3.jpg);"></view>
<view class='content'>
<view>喵星人互动群</view>
<view class='text-gray text-sm'>
@@ -235,11 +235,11 @@
</view>
<view class='action'>
<view class='text-grey text-xs'>22:20</view>
<tag class="round bg-red sm">5</tag>
<view class="cu-tag round bg-red sm">5</view>
</view>
</item>
<item class="grayscale">
<avatar class="radius lg" style="background-image:url(https://image.weilanwl.com/img/square-3.jpg);"></avatar>
</view>
<view class="cu-item grayscale">
<view class="cu-avatar radius lg" style="background-image:url(https://image.weilanwl.com/img/square-3.jpg);"></view>
<view class='content'>
<view>喵星人互动群</view>
<view class='text-gray text-sm'>
@@ -247,16 +247,16 @@
</view>
<view class='action'>
<view class='text-grey text-xs'>22:20</view>
<tag class="round bg-red sm">5</tag>
<view class="cu-tag round bg-red sm">5</view>
</view>
</view>
<view class="cu-item cur">
<view class="cu-avatar radius lg" style="background-image:url(https://image.weilanwl.com/img/square-4.jpg);">
<view class="cu-tag badge"></view>
</view>
</item>
<item class="cur">
<avatar class="radius lg" style="background-image:url(https://image.weilanwl.com/img/square-4.jpg);">
<tag class="badge"></tag>
</avatar>
<view class='content'>
<view>喵星人互动群
<tag class="round bg-orange sm">6人</tag>
<view class="cu-tag round bg-orange sm">6人</view>
</view>
<view class='text-gray text-sm'>
喵星酱：
@@ -266,99 +266,99 @@
<view class='text-grey text-xs'>22:20</view>
<text class='icon-notice_forbid_fill text-gray'></text>
</view>
</item>
</list>
<list class="menu">
<item>
</view>
</view>
<view class="cu-list menu">
<view class="cu-item">
<view class='content'>
<text class='icon-circlefill text-grey'></text>
<text class='text-grey'>图标 + 标题</text>
</view>
</item>
<item>
</view>
<view class="cu-item">
<view class='content'>
<image src='/images/logo.png' class='png' mode='aspectFit'></image>
<text class='text-grey'>图片 + 标题</text>
</view>
</item>
<item>
<button class='content' open-type='contact'>
</view>
<view class="cu-item">
<button class='cu-btn content' open-type='contact'>
<text class='icon-btn text-olive'></text>
<text class='text-grey'>Open-type 按钮</text>
</button>
</item>
<item>
</view>
<view class="cu-item">
<navigator class='content' hover-class='none' url='../list/list' open-type="redirect">
<text class='icon-discoverfill text-orange'></text>
<text class='text-grey'>Navigator 跳转</text>
</navigator>
</item>
<item>
</view>
<view class="cu-item">
<view class='content'>
<text class='icon-emojifill text-red'></text>
<text class='text-grey'>头像</text>
</view>
<view class='action'>
<avatar class="sm round">
<view class="cu-avatar sm round">
<text class='icon-people'></text>
</avatar>
</view>
</view>
</item>
<item>
</view>
<view class="cu-item">
<view class='content'>
<text class='icon-emojiflashfill text-pink'></text>
<text class='text-grey'>头像组</text>
</view>
<view class='action'>
<avatar-group>
<avatar class="round sm" style="background-image:url(https://image.weilanwl.com/img/square-4.jpg);"></avatar>
<avatar class="round sm" style="background-image:url(https://image.weilanwl.com/img/square-3.jpg);"></avatar>
<avatar class="round sm" style="background-image:url(https://image.weilanwl.com/img/square-2.jpg);"></avatar>
<avatar class="round sm" style="background-image:url(https://image.weilanwl.com/img/square-1.jpg);"></avatar>
</avatar-group>
<view class="cu-avatar-group">
<view class="cu-avatar round sm" style="background-image:url(https://image.weilanwl.com/img/square-4.jpg);"></view>
<view class="cu-avatar round sm" style="background-image:url(https://image.weilanwl.com/img/square-3.jpg);"></view>
<view class="cu-avatar round sm" style="background-image:url(https://image.weilanwl.com/img/square-2.jpg);"></view>
<view class="cu-avatar round sm" style="background-image:url(https://image.weilanwl.com/img/square-1.jpg);"></view>
</view>
<text class='text-grey text-sm'>4 人</text>
</view>
</item>
<item>
</view>
<view class="cu-item">
<view class='content'>
<text class='icon-crown text-green'></text>
<text class='text-grey'>按钮</text>
</view>
<view class='action'>
<button class='round bg-green sm'>
<button class='cu-btn round bg-green sm'>
<text class='icon-upload'></text> 上传</button>
</view>
</item>
<item>
</view>
<view class="cu-item">
<view class='content'>
<text class='icon-crownfill text-green'></text>
<text class='text-grey'>按钮</text>
</view>
<view class='action'>
<button class='round bg-blue'>
<button class='cu-btn round bg-blue'>
<text class='icon-down'></text> 下载</button>
</view>
</item>
</list>
<list class="menu">
<item class="arrow">
</view>
</view>
<view class="cu-list menu">
<view class="cu-item arrow">
<view class='content'>
<text class='icon-roundrightfill text-grey'></text>
<text class='text-grey'>箭头</text>
</view>
</item>
<item class="arrow">
</view>
<view class="cu-item arrow">
<view class='content'>
<text class='icon-tagfill text-red'></text>
<text class='text-grey'>标签</text>
</view>
<view class='action'>
<tag class="round bg-orange light">音乐</tag>
<tag class="round bg-olive light">电影</tag>
<tag class="round bg-blue light">旅行</tag>
<view class="cu-tag round bg-orange light">音乐</view>
<view class="cu-tag round bg-olive light">电影</view>
<view class="cu-tag round bg-blue light">旅行</view>
</view>
</item>
<item class="arrow">
</view>
<view class="cu-item arrow">
<view class='content'>
<text class='icon-warn text-green'></text>
<text class='text-grey'>文本</text>
@@ -366,85 +366,85 @@
<view class='action'>
<text class='text-grey text-sm'>小目标还没有实现！</text>
</view>
</item>
<item class="arrow">
</view>
<view class="cu-item arrow">
<view class='content'>
<text class='icon-warnfill text-green'></text>
<text class='text-grey'>文本</text>
<text class='text-grey text-sm margin-left-sm'>小目标还没有实现！</text>
</view>
</item>
</list>
<list class="menu no-padding">
<item>
</view>
</view>
<view class="cu-list menu no-padding">
<view class="cu-item">
<view class='content'>
<text class='icon-radiobox text-orange'></text>
<text class='text-grey'>徽章</text>
</view>
<view class='action'>
<tag class='bg-red round'></tag>
<view class='cu-tag bg-red round'></view>
</view>
</item>
<item>
</view>
<view class="cu-item">
<view class='content'>
<text class='icon-tagfill text-olive'></text>
<text class='text-grey'>标签</text>
</view>
<view class='action'>
<tag class='bg-olive round'>9</tag>
<view class='cu-tag bg-olive round'>9</view>
</view>
</item>
<item class="arrow">
</view>
<view class="cu-item arrow">
<view class='content'>
<text class='icon-radioboxfill text-blue'></text>
<text class='text-grey'>胶囊</text>
</view>
<view class='action'>
<capsule class="round">
<tag class='bg-blue'>
<view class="cu-capsule round">
<view class='cu-tag bg-blue'>
<text class='icon-locationfill'></text>
</tag>
<tag class="line-blue">
</view>
<view class="cu-tag line-blue">
广州
</tag>
</capsule>
</view>
</view>
</view>
</item>
</list>
<list class="menu no-padding card-menu margin-bottom-xl">
<item>
</view>
</view>
<view class="cu-list menu no-padding card-menu margin-bottom-xl">
<view class="cu-item">
<view class='content'>
<text class='icon-radiobox text-orange'></text>
<text class='text-grey'>徽章</text>
</view>
<view class='action'>
<tag class='bg-red round'></tag>
<view class='cu-tag bg-red round'></view>
</view>
</item>
<item>
</view>
<view class="cu-item">
<view class='content'>
<text class='icon-tagfill text-olive'></text>
<text class='text-grey'>标签</text>
</view>
<view class='action'>
<tag class='bg-olive round'>9</tag>
<view class='cu-tag bg-olive round'>9</view>
</view>
</item>
<item class="arrow">
</view>
<view class="cu-item arrow">
<view class='content'>
<text class='icon-radioboxfill text-blue'></text>
<text class='text-grey'>胶囊</text>
</view>
<view class='action'>
<capsule class="round">
<tag class='bg-blue'>
<view class="cu-capsule round">
<view class='cu-tag bg-blue'>
<text class='icon-locationfill'></text>
</tag>
<tag class="line-blue">
</view>
<view class="cu-tag line-blue">
广州
</tag>
</capsule>
</view>
</view>
</view>
</item>
</list>
</view>
</view>
</view>

110
demo/pages/component/modal/modal.wxml
View File

@@ -1,123 +1,123 @@
<custom style="height:{{CustomBar}}px;">
<bar class="fixed gradual-pink" style="height:{{CustomBar}}px;padding-top:{{StatusBar}}px;">
<view class="cu-custom" style="height:{{CustomBar}}px;">
<view class="cu-bar fixed gradual-pink" 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>
</bar>
</custom>
</view>
</view>
<bar class="">
<view class="cu-bar ">
<view class='action'>
<text class='icon-titles text-orange '></text> 模态窗口
</view>
<view class='action'>
<button class='bg-green shadow' bindtap="showModal" data-target="Modal">Modal</button>
<button class='cu-btn bg-green shadow' bindtap="showModal" data-target="Modal">Modal</button>
</view>
</bar>
<modal-box class="{{modalName=='Modal'?'show':''}}">
<dialog>
<bar class="justify-end">
</view>
<view class="cu-modal {{modalName=='Modal'?'show':''}}">
<view class="cu-dialog">
<view class="cu-bar justify-end">
<view class='content'>Modal标题</view>
<view class='action' bindtap='hideModal'>
<text class='icon-close text-red'></text>
</view>
</bar>
</view>
<view class='padding-xl'>
Modal 内容。
</view>
</dialog>
</modal-box>
</view>
</view>
<bar class=" margin-top">
<view class="cu-bar margin-top">
<view class='action'>
<text class='icon-titles text-orange '></text> 底部窗口
</view>
<view class='action'>
<button class='bg-green shadow' bindtap="showModal" data-target="bottomModal">Bottom</button>
<button class='cu-btn bg-green shadow' bindtap="showModal" data-target="bottomModal">Bottom</button>
</view>
</bar>
<modal-box class="bottom-modal {{modalName=='bottomModal'?'show':''}}">
<dialog>
<bar class="">
</view>
<view class="cu-modal bottom-modal {{modalName=='bottomModal'?'show':''}}">
<view class="cu-dialog">
<view class="cu-bar ">
<view class='action text-green'>确定</view>
<view class='action text-blue' bindtap='hideModal'>取消</view>
</bar>
</view>
<view class='padding-xl'>
Modal 内容。
</view>
</dialog>
</modal-box>
</view>
</view>
<bar class=" margin-top">
<view class="cu-bar margin-top">
<view class='action'>
<text class='icon-titles text-orange '></text> 对话窗口
</view>
<view class='action'>
<button class='bg-green shadow' bindtap="showModal" data-target="DialogModal1">Dialog</button>
<button class='bg-blue shadow margin-left' bindtap="showModal" data-target="DialogModal2">Dialog</button>
<button class='cu-btn bg-green shadow' bindtap="showModal" data-target="DialogModal1">Dialog</button>
<button class='cu-btn bg-blue shadow margin-left' bindtap="showModal" data-target="DialogModal2">Dialog</button>
</view>
</bar>
<modal-box class="{{modalName=='DialogModal1'?'show':''}}">
<dialog>
<bar class="justify-end">
</view>
<view class="cu-modal {{modalName=='DialogModal1'?'show':''}}">
<view class="cu-dialog">
<view class="cu-bar justify-end">
<view class='content'>Modal标题</view>
<view class='action' bindtap='hideModal'>
<text class='icon-close text-red'></text>
</view>
</bar>
</view>
<view class='padding-xl'>
Modal 内容。
</view>
<bar class="justify-end">
<view class="cu-bar justify-end">
<view class='action'>
<button class='line-green text-green' bindtap='hideModal'>取消</button>
<button class='bg-green margin-left' bindtap='hideModal'>确定</button>
<button class='cu-btn line-green text-green' bindtap='hideModal'>取消</button>
<button class='cu-btn bg-green margin-left' bindtap='hideModal'>确定</button>
</view>
</bar>
</dialog>
</modal-box>
</view>
</view>
</view>
<modal-box class="{{modalName=='DialogModal2'?'show':''}}">
<dialog>
<bar class="justify-end">
<view class="cu-modal {{modalName=='DialogModal2'?'show':''}}">
<view class="cu-dialog">
<view class="cu-bar justify-end">
<view class='content'>Modal标题</view>
<view class='action' bindtap='hideModal'>
<text class='icon-close text-red'></text>
</view>
</bar>
</view>
<view class='padding-xl'>
Modal 内容。
</view>
<bar>
<view class="cu-bar">
<view class='action margin-0 flex-sub text-green ' bindtap='hideModal'>
<text class='icon-moneybag'></text>微信支付</view>
<view class='action margin-0 flex-sub text-green solid-left' bindtap='hideModal'>取消</view>
<view class='action margin-0 flex-sub solid-left' bindtap='hideModal'>确定</view>
</bar>
</dialog>
</modal-box>
</view>
</view>
</view>
<bar class=" margin-top">
<view class="cu-bar margin-top">
<view class='action'>
<text class='icon-titles text-orange '></text> 图片窗口
</view>
<view class='action'>
<button class='bg-green shadow' bindtap="showModal" data-target="Image">Image</button>
<button class='cu-btn bg-green shadow' bindtap="showModal" data-target="Image">Image</button>
</view>
</bar>
</view>
<modal-box class="{{modalName=='Image'?'show':''}}">
<dialog>
<view class="cu-modal {{modalName=='Image'?'show':''}}">
<view class="cu-dialog">
<view class="bg-img" style="background-image: url('https://albedo-theme.com/wp-content/uploads/2016/08/pexels-photo-26180.jpg');height:200px;">
<bar class="justify-end none-bg text-white">
<view class="cu-bar justify-end none-bg text-white">
<view class='action' bindtap='hideModal'>
<text class='icon-close '></text>
</view>
</bar>
</view>
</view>
<bar>
<view class="cu-bar">
<view class='action margin-0 flex-sub solid-left' bindtap='hideModal'>我知道了</view>
</bar>
</dialog>
</modal-box>
</view>
</view>
</view>

72
demo/pages/component/nav/nav.wxml
View File

@@ -1,87 +1,87 @@
<custom style="height:{{CustomBar}}px;">
<bar class="fixed gradual-pink" style="height:{{CustomBar}}px;padding-top:{{StatusBar}}px;">
<view class="cu-custom" style="height:{{CustomBar}}px;">
<view class="cu-bar fixed gradual-pink" 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>
</bar>
</custom>
</view>
</view>
<view wx:for="{{10}}" wx:key wx:if="{{index==TabCur}}" class='bg-grey padding margin text-center'>
Tab{{index}}
</view>
<bar class="solid-bottom">
<view class="cu-bar solid-bottom">
<view class='action'>
<text class='icon-titles text-orange '></text> 默认
</view>
</bar>
</view>
<scroll-view scroll-x class="bg-white nav" scroll-with-animation scroll-left="{{scrollLeft}}">
<item class="{{index==TabCur?'text-green cur':''}}" wx:for="{{10}}" wx:key bindtap='tabSelect' data-id="{{index}}">
<view class="cu-item {{index==TabCur?'text-green cur':''}}" wx:for="{{10}}" wx:key bindtap='tabSelect' data-id="{{index}}">
Tab{{index}}
</item>
</view>
</scroll-view>
<bar class="margin-top solid-bottom">
<view class="cu-bar margin-top solid-bottom">
<view class='action'>
<text class='icon-title text-orange'></text> 居中
</view>
</bar>
</view>
<scroll-view scroll-x class="bg-white nav text-center">
<item class="{{index==TabCur?'text-blue cur':''}}" wx:for="{{3}}" wx:key bindtap='tabSelect' data-id="{{index}}">
<view class="cu-item {{index==TabCur?'text-blue cur':''}}" wx:for="{{3}}" wx:key bindtap='tabSelect' data-id="{{index}}">
Tab{{index}}
</item>
</view>
</scroll-view>
<bar class="margin-top solid-bottom">
<view class="cu-bar margin-top solid-bottom">
<view class='action'>
<text class='icon-title text-orange'></text> 平分
</view>
</bar>
</view>
<scroll-view scroll-x class="bg-white nav">
<view class='flex text-center'>
<item class="flex-sub {{index==TabCur?'text-orange cur':''}}" wx:for="{{4}}" wx:key bindtap='tabSelect' data-id="{{index}}">
<view class="cu-item flex-sub {{index==TabCur?'text-orange cur':''}}" wx:for="{{4}}" wx:key bindtap='tabSelect' data-id="{{index}}">
Tab{{index}}
</item>
</view>
</view>
</scroll-view>
<bar class="margin-top solid-bottom">
<view class="cu-bar margin-top solid-bottom">
<view class='action'>
<text class='icon-title text-orange'></text> 背景
</view>
</bar>
</view>
<scroll-view scroll-x class="bg-red nav text-center">
<item class="{{index==TabCur?'text-white cur':''}}" wx:for="{{3}}" wx:key bindtap='tabSelect' data-id="{{index}}">
<view class="cu-item {{index==TabCur?'text-white cur':''}}" wx:for="{{3}}" wx:key bindtap='tabSelect' data-id="{{index}}">
Tab{{index}}
</item>
</view>
</scroll-view>
<bar class="margin-top solid-bottom">
<view class="cu-bar margin-top solid-bottom">
<view class='action'>
<text class='icon-title text-orange'></text> 图标
</view>
</bar>
</view>
<scroll-view scroll-x class="bg-green nav text-center">
<item class="{{0==TabCur?'text-white cur':''}}" bindtap='tabSelect' data-id="0">
<view class="cu-item {{0==TabCur?'text-white cur':''}}" bindtap='tabSelect' data-id="0">
<text class='icon-camerafill'></text> 数码
</item>
<item class="{{1==TabCur?'text-white cur':''}}" bindtap='tabSelect' data-id="1">
</view>
<view class="cu-item {{1==TabCur?'text-white cur':''}}" bindtap='tabSelect' data-id="1">
<text class='icon-upstagefill'></text> 排行榜
</item>
<item class="{{2==TabCur?'text-white cur':''}}" bindtap='tabSelect' data-id="2">
</view>
<view class="cu-item {{2==TabCur?'text-white cur':''}}" bindtap='tabSelect' data-id="2">
<text class='icon-clothesfill'></text> 皮肤
</item>
</view>
</scroll-view>
<bar class="margin-top solid-bottom">
<view class="cu-bar margin-top solid-bottom">
<view class='action'>
<text class='icon-title text-orange'></text> 定位
</view>
</bar>
</view>
<scroll-view scroll-x class="bg-green nav text-center">
<item class="{{0==TabCur?'text-white cur':''}}" bindtap='tabSelect' data-id="0">
<view class="cu-item {{0==TabCur?'text-white cur':''}}" bindtap='tabSelect' data-id="0">
<text class='icon-camerafill'></text> 数码
</item>
<item class="{{1==TabCur?'text-white cur':''}}" bindtap='tabSelect' data-id="1">
</view>
<view class="cu-item {{1==TabCur?'text-white cur':''}}" bindtap='tabSelect' data-id="1">
<text class='icon-upstagefill'></text> 排行榜
</item>
<item class="{{2==TabCur?'text-white cur':''}}" bindtap='tabSelect' data-id="2">
</view>
<view class="cu-item {{2==TabCur?'text-white cur':''}}" bindtap='tabSelect' data-id="2">
<text class='icon-clothesfill'></text> 皮肤
</item>
</view>
</scroll-view>

20
demo/pages/component/swiper/swiper.wxml
View File

@@ -1,39 +1,39 @@
<custom style="height:{{CustomBar}}px;">
<bar class="fixed gradual-pink" style="height:{{CustomBar}}px;padding-top:{{StatusBar}}px;">
<view class="cu-custom" style="height:{{CustomBar}}px;">
<view class="cu-bar fixed gradual-pink" 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>
</bar>
</custom>
<bar>
</view>
</view>
<view class="cu-bar">
<view class='action'>
<text class='icon-title text-pink'></text> 全屏限高轮播
</view>
<view class='action'>
<switch class='sm' bindchange='DotStyle'></switch>
</view>
</bar>
</view>
<swiper class="screen-swiper {{DotStyle?'square-dot':'round-dot'}}" indicator-dots="true" circular="true" autoplay="true" interval="5000" duration="500">
<swiper-item wx:for="{{4}}" wx:key>
<image src="https://image.weilanwl.com/img/4x3-{{index+1}}.jpg" mode='aspectFill'></image>
</swiper-item>
</swiper>
<bar class="margin-top">
<view class="cu-bar margin-top">
<view class='action'>
<text class='icon-title text-pink'></text> 卡片式轮播
</view>
</bar>
</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="{{4}}" wx:key class="{{cardCur==index?'cur':''}}">
<view class='bg-img shadow-blur' style="background-image:url(https://image.weilanwl.com/img/4x3-{{index+1}}.jpg)"></view>
</swiper-item>
</swiper>
<bar class="margin-top">
<view class="cu-bar margin-top">
<view class='action'>
<text class='icon-title text-pink'></text> 堆叠式轮播
</view>
</bar>
</view>
<view class="tower-swiper" bindtouchmove="towerMove" bindtouchstart="towerStart" bindtouchend="towerEnd">
<view class='tower-item {{item.zIndex==1?"none":""}}' wx:for="{{towerList}}" wx:key style='transform: scale({{0.5+item.zIndex/10}});margin-left:{{item.mLeft*100-150}}rpx;z-index:{{item.zIndex}}'>
<view class='bg-img shadow-blur' style="background-image:url({{item.url}})"></view>

86
demo/pages/component/timeline/timeline.wxml
View File

@@ -1,63 +1,63 @@
<custom style="height:{{CustomBar}}px;">
<bar class="fixed gradual-pink" style="height:{{CustomBar}}px;padding-top:{{StatusBar}}px;">
<view class="cu-custom" style="height:{{CustomBar}}px;">
<view class="cu-bar fixed gradual-pink" 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>
</bar>
</custom>
<timeline>
<time>昨天</time>
<item class='cur icon-noticefill'>
</view>
</view>
<view class="cu-timeline">
<view class="cu-time">昨天</view>
<view class='cu-item cur icon-noticefill'>
<view class="content bg-green shadow-blur">
<text>22:22</text> 【广州市】快件已到达地球
</view>
</item>
<item class='text-red icon-attentionforbidfill'>
</view>
<view class='cu-item text-red icon-attentionforbidfill'>
<view class="content bg-red shadow-blur">
这是第一次，我家的铲屎官走了这么久。久到足足有三天！！
</view>
</item>
<item class='text-grey icon-evaluate_fill'>
</view>
<view class='cu-item text-grey icon-evaluate_fill'>
<view class="content bg-grey shadow-blur">
这是第一次，我家的铲屎官走了这么久。
</view>
</item>
<item class='text-blue'>
</view>
<view class='cu-item text-blue'>
<view class="bg-blue content">
<text>20:00</text> 【月球】快件已到达月球，准备发往地球
</view>
<view class="bg-cyan content">
<text>10:00</text> 【银河系】快件已到达银河系，准备发往月球
</view>
</item>
</timeline>
</view>
</view>
<timeline>
<time>06-17</time>
<item>
<view class="cu-timeline">
<view class="cu-time">06-17</view>
<view class="cu-item">
<view class="content">
<text>01:30</text> 【喵星】 MX-12138 已揽收，准备发往银河系
</view>
</item>
</timeline>
</view>
</view>
<timeline>
<time>06-17</time>
<item>
<view class="cu-timeline">
<view class="cu-time">06-17</view>
<view class="cu-item">
<view class="content">
<capsule class="radius">
<tag class="bg-cyan">上午</tag>
<tag class="line-cyan">10:00</tag>
</capsule>
<view class="cu-capsule radius">
<view class="cu-tag bg-cyan">上午</view>
<view class="cu-tag line-cyan">10:00</view>
</view>
<view class='margin-top'>这是第一次，我家的铲屎官走了这么久。久到足足有三天！！ 在听到他的脚步声响在楼梯间的那一刻，我简直想要破门而出，对着他狠狠地吼上10分钟，然后再看心情要不要他进门。</view>
</view>
</item>
<item class='text-blue'>
</view>
<view class='cu-item text-blue'>
<view class="bg-blue shadow-blur content">
<list class="menu menu-avatar radius">
<item>
<avatar class="round lg" style="background-image:url(https://image.weilanwl.com/img/square-1.jpg);"></avatar>
<view class="cu-list menu menu-avatar radius">
<view class="cu-item">
<view class="cu-avatar round lg" style="background-image:url(https://image.weilanwl.com/img/square-1.jpg);"></view>
<view class='content'>
<view class='text-grey'>文晓港</view>
<view class='text-gray text-sm'>
@@ -65,16 +65,16 @@
</view>
<view class='action'>
<view class='text-grey text-xs'>22:20</view>
<tag class="round grey sm">5</tag>
<view class="cu-tag round grey sm">5</view>
</view>
</view>
<view class="cu-item">
<view class="cu-avatar round lg" style="background-image:url(https://image.weilanwl.com/img/square-2.jpg);">
<view class="cu-tag badge">99+</view>
</view>
</item>
<item>
<avatar class="round lg" style="background-image:url(https://image.weilanwl.com/img/square-2.jpg);">
<tag class="badge">99+</tag>
</avatar>
<view class='content'>
<view class='text-grey'>文晓港
<tag class="round orange sm">SVIP</tag>
<view class="cu-tag round orange sm">SVIP</view>
</view>
<view class='text-gray text-sm'>
<text class='icon-redpacket_fill text-red'></text> 收到红包</view>
@@ -83,8 +83,8 @@
<view class='text-grey text-xs'>22:20</view>
<text class='icon-notice_forbid_fill text-gray'></text>
</view>
</item>
</list>
</view>
</view>
</view>
</item>
</timeline>
</view>
</view>

29
demo/pages/plugin/animation/animation.wxml
View File

@@ -1,17 +1,18 @@
<custom style="height:{{CustomBar}}px;">
<bar class="fixed none-bg text-white bg-img" style="height:{{CustomBar}}px;padding-top:{{StatusBar}}px;background-image:url(https://image.weilanwl.com/color2.0/plugin/wdh2236.jpg);">
<view class="cu-custom" style="height:{{CustomBar}}px;">
<view class="cu-bar fixed none-bg text-white bg-img" style="height:{{CustomBar}}px;padding-top:{{StatusBar}}px;background-image:url(https://image.weilanwl.com/color2.0/plugin/wdh2236.jpg);">
<navigator class='action' open-type="navigateBack" delta="1" hover-class="none">
<text class='icon-back'></text> 微动画
</navigator>
</bar>
</custom>
<card class="DhCard">
<item class="gradual-green shadow-blur">
<view>
水波纹
</view>
<view class='animation-wave'>
<view class='wave'></view>
</view>
</item>
</card>
</view>
</view>
<view class="margin radius gradual-green shadow-blur">
<image src='https://image.weilanwl.com/gif/wave.gif' mode='scaleToFill' class='gif-wave response'></image>
</view>
<view class="margin flex">
<view class='bg-black flex-sub margin-right radius shadow-lg'>
<image src='https://image.weilanwl.com/gif/loading-black.gif' mode='aspectFit' class='gif-loading-black response'></image>
</view>
<view class='bg-white flex-sub radius shadow-lg'>
<image src='https://image.weilanwl.com/gif/loading-white.gif' mode='aspectFit' class='gif-loading-white response'></image>
</view>
</view>

84
demo/pages/plugin/animation/animation.wxss
View File

@@ -1,75 +1,21 @@
card.DhCard item{
position: relative;
padding: 20px 15px 40px;
text-align: center;
font-size: 18px;
image[class*="gif-"]{
border-radius: 6rpx;
display: block;
}
card.DhCard item .animation-wave {
position: absolute;
bottom: 0;
left: 0;
border-radius: 3px;
overflow: hidden;
.gif-wave{
mix-blend-mode: screen;
width: 100%;
height: 100rpx;
}
/* ==================
微动画
==================== */
.animation-wave {
position: relative;
width: 100%;
height: 50px;
overflow: hidden;
.gif-loading-black{
mix-blend-mode: screen;
width: 100%;
height: 280rpx;
}
.animation-wave::before, .animation-wave .wave, .animation-wave::after {
position: absolute;
width: 1080px;
height: 50px;
left: 0;
bottom: -1px;
background-repeat: repeat no-repeat;
background-position: 0 bottom;
transform-origin: center bottom;
}
.animation-wave::before {
content: "";
z-index: 1;
background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAABDgAAAAyCAMAAACOGpvIAAAApVBMVEUAAAD///////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////+4/eNVAAAANnRSTlMA7hEq/PjdIg0C2bsIRD7LBZkxj1ue5eHTfGDEtXdzVfJrTzXrlIRLG66iiWWlf245FrKqHr+BaDdEAAAFjElEQVR42u3d13abQBQF0EE00SWaRFGjqPdy///TgtIjZzkqCGbI3U9+vutwpmAbghBCCCGEEEIIIYQQQgghhBBCCCGEEEIIIYQQQgghhFBZAESO4zJJsiLt1F0N1iOTb5PG68zTWbjbOsujZvWlHlcQoCByha/DWHhOsHMN+6CQ5tPlfbIeTvNNfLFUyS9mMIYrruBLfUuLN/l0uE72Z538Bzpz+zYdf47juMy3w3Bmzzuk+dqyOVoPVt2TFlmSlBUzEAEI/M1Y1bzA3bdI47Tt0TA/9jO4n+BbC2eX8E18ZFp7N+hq6hjux/XjfDCyG7m4dPhk5ywsH+6XfQtHEwvk03CQz6cSdSdmQyKip+tc68HzBCl2Qrsp9dEyd90og+f5Wr5OmzKNojLc1VEVng+HelyN+KZsTtvmpHv5PBwE/k3a7FKmG7WTTpaqAKUQ+t6E7WkUsRgueiVNQ12yPg1C+DC3RCjDOHJcmTBN3+82EvwbgfuI2iBlsk+VdKCJUDJRC/ZsPi66MbUEuFPTs1HgJwsOyuUvwzlhUsfcRiLch8D9uMWEsTr9FYvyjeOhzdbjoqRBeR36MRs8Ycw5XPrwHmqeMHZBqNjDeAz3I/AYyTEZeVo6Rt6DN8u8hJUboPZoycF79RyDmW2YYq5UeCvhMmRmmdUTL4PHEHhY1qU/H/psyUElxGNI/9rSCmMRqsB5M+qzQUhn5mVQhX7AwDas7S5EeBiBZ2T5ntBLMT0OKiTGLs1vF/RRLEJ1uK5JaKYYlaajP6D6wkMfLZ4LB4EnSVNKN2L8tAeVGy8NOk9wL5Vo47JBSOr4UDFBcyk9z77SoQSedwmpG0h7YkFNfIe+balclGg9ogl12SDkHKhQh+u6QqjDr14JB3ltIN2UUMRcilAni6qnRXcvUCNxSdeRRXc1AeojBVQdWdrrCF5C4EX9HSV3g4eBCrUTN7QcWeycg7qpgwOhxL5b+ziEOKHk4lgxNiK8iDTjYVFmCxHoIAVnUrfWpA9UEBez2rNByJyGNeUqW1FwnD1vewBAQXHUvw+7joIigjbSSY2MDS0leuU/c1PanCPKreihi0F6p0FK24fV9bDoo5imYHzD5SmphxxIQJsaXyuY9R9Rbo3vfl9N8zQIsP0C3/SoC8Z3aiCTqrXWEVCpntfV9oqqnegv0pQnd6Pz9xQIlKlX7UDkKX2r6++iyYFUR09ONB1Rbvkrm1RJDii55/k7q9JskPPwOg1qi6PQ31bUHXJgAfUEbf2PfDD3O/YvUCtbV3gGwiFcquoOeWhBge7iKKgrUyHvlU6pXk5+J0QDnrxXyz2NgQ0V/JFkx3AoeYlCQzaU/aoPX9FfHAXuFM7Jmxxczwe2SN23/RWtkgYRfZfDn2djfSbvwk+OrHTo+7NB5utTBj8wURxXatctvTxaidNn6zH5QbBWs7IDotjDI/0HlKqyofCTDWsryvuyQeTQU+E37BTHlX/czkpKSMsYnOi+C/0nQd0MzZISck5WF8bW1hu9U2nD6PChE7E9jTKz0TKChQ832CqOH+0x4nXyNJ1PmO+M3xQJmb0yjtY+dDQ2NxofSYvXsqGcjXVu0fw26eFsyMor/8TfncY9+Cv2iuMrQYq7A3f/0IcoDuko8C6Uvot/Ue/iDUb24ZH+lI1wu4wyaJxnstGyk2Eeq42pjN+I/esXFx7MhhluPa0Hn2C0OH7K+trXj/uMjL0ty61Ch1y1i5/OMp8ayfVTOF5s+WxeZjxG9K3Yc7a7cGbYvDwvZtAmV53ip4Ms26bx7Vs4kcr2TryUbNjGzN0Fjne0ek0sDKayQQAhhLA4EEI3sDgQQvXD4kAIYXEghD7A4kAI1Q+LAyGExYEQ+gCLAyFUPywOhBAWB0LoAywOhFD9vgClDyW0lvRZlgAAAABJRU5ErkJggg==);
opacity: 1;
animation: animation-wave 6s linear infinite;
background-size: 540px 15px;
}
.animation-wave .wave {
z-index: 2;
background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAABDgAAAAyCAMAAACOGpvIAAAAolBMVEUAAAD///////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////8ELnaCAAAANXRSTlMA/vsQ8uXuoSHSyQrY+LoGFah89N7hk+tFP5qIV7OBdW9KMRtgT8RqAs1dOSm/rQOOKwFkJFel6O8AAAVfSURBVHja7d3ZkppAGIbhptlkVwQBAVFU3B2X+e//1oIxqSxTWSYDdDf5n6M5fks/abBGghBCCCGEEEIIIYQQQgghhBBCCCGEEEIIIYQQQgghhBAT3rJcrOazi567phGEWo3Cg1Sj1BlrUWBUuT5bHWTSe97rupiMXNNWI2VMqVSDH2uowe50ns72pUX6z3pdz7/mcJy3OZRItU13NCkWA4/0n3xYpXpeGUGkjZ81njm0mhoYOzfXJ7P5alEue1zDKrNikhsRvIPkREZ+2S9J71iJPzJDhb6rxlita2RD0j9yUuh1DgnegSpBpc/LPr5lhtklNyLnPTmi3fkyXx97VcM63CduCB9ANUO/9+QNY8WXSnU+WmPVl6sxOU5P4YdyjAPXL19IP8h73dAo/DNq52l2FL+GV250m0IznGC0Evp63UsuOwWaq7EXugaxkrSxHFJ08l+J0KxsZDvQiLF5yQZEVC+Hwh1D0zT3LuTl2MthGkgt1FgJWYNYcQs5nN1M0FOtt88jaJiqrwSscdycNWiJpJ7XWyKSa2pQeMIa9Yamdms5lNNGsFPcdjFSJWiHPVkLVMOLJyG0jBq+IEW8tTuGllFjJkgNYmWuAy0Lp8KcWizfoNAqeiqEqOEtdA06IYUp9/dLvayi0AkpvHBfg8h3U4JOaPqVcG+Yht3kMPwj4do20TXoUjjj+P7gNj5R+I3/qwaxMlOCDkVTro/41iyEDhkFvzWOdYrOScaKz4dPR12BP/l/amyT3IHOBQWnS7rdGBJ0jLpcPoWTNyYw4rgHwhl5pgIjzom7GuR1ogEb1FzfCG/iigITih7zVeOW6GNgKUo5ujl4iysJWIouHNUg1soGlhS+jizDqQYMBT5HNQobmJNMTh5KDicaMCftMj5qkPLsAHM2L9922c5tCRij+ZqTGgT4MNaZf1vuJTOYvzD4qUFkXwU+OGcOnrIcXApciFIOnrIsfV6GoxZsWI7pQB8DT4I5yxq3RcXLiH4Wsr1TKvNwJfpNtWJaw9q7EnA0HADUTQgT1pyDAxs3NchgqgBv6InVvcHthv0R5WfKNGFU45ZMNQDgazhqWvdfHLwtKk6uQt9Q9FfSNXkWAp8UFl8MW5ucvjiC2ZF07pqGAMDjcNTC2ZB05zri64jyMzXtsoZ35+Y+Dwc1yMHl4O7wr5mbTmssCwMA+B0OACnwuyly1Lk6u/5C0NGSepsdp5+uLGqQ2OX7I+WBnrrajkFhSgCcD8eDOjmSVt3iswir8aROj6Rdw5S/k/yva1xJu7y5yfW1xnekqjiSdm0PqQE1IYajppxWMmnH0Bfhw/UH49O9rRovWS7OhrZegyQjVZgNfQqm69ZqLO+jCABEGo6aFOX7ppMMi4q/hwZ/W6PxKfWys2hvkxZrbGM9EO0T5Yma6aLx8RjspzbUxBuOzxSjqUGVM93m/+D6e8pu0tAr5CWemJqYo9FGjUNaRWLXkOzRPGloPeTYP6tQE3g4Phsb+qb0PvBPl4uz8JvxjfKxGi/lRjcUsd8lP9U4bv+9xnEz3Ym+oN+vR7EYbD/0kwZpHsJDH4bjyVHNkb9Ykr92G6xn550qyp2ulmuQ5cIfmWp/BvQ7khJUehG/p8bwUSMc92UyvucYj19cKIfvGYxBsvenpxA+69lwfEWV54/7+PMsTq6DwUAmD8P6rzJZ7Oez5y8DKWKeV5uu4WON/7UGVXe5fvHn+3VcXgdLWZYt8uDVfw0Hr+Uhzu5FOh1VtgJf9Ho4EELNwuFACP0IhwMhxB4OB0IIhwMh9AYOB0KIPRwOhBAOB0LoDRwOhBB7OBwIIRwOhNAbOBwIIfY+AR+UyCBbi1dfAAAAAElFTkSuQmCC);
opacity: 0.618;
animation: animation-wave 18s linear infinite;
background-size: 1080px 20px;
}
.animation-wave::after {
content: "";
z-index: 3;
background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAABDgAAAAyCAMAAACOGpvIAAAApVBMVEUAAAD///////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////+4/eNVAAAANnRSTlMA/vvu5fKS0iDJ+Ll8Kt7YFQYRCkn0DqiC4aBvs0+jmnVhXT/NimpEGunEAwK/rTQBWTBWJDuXdmK3AAAFOklEQVR42u3d2ZKiMBSA4RA2WZVNAQFxART3Le//aOOMU9U942x2C0mY81319V/kmASqGgEAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAADAK2e596fjUIkTQ1PtSLzB5CvhBmM9EFe2WidxOL0OUec5lzRXRobWl0Q5wFi4IT/WkOzFdjcxZycPdZ93Scf3HCtZ1x9zyCuprxkjJfd7Duq+4XUaxkmt2isxuNe45xBvJFtdGEmmhOOpf1p2uIZ3OudKoq7IEwR9pSbKbIk6x5ubIy2S8VM1AklNivMAdY87z7NbDoE8Act2HY/3XVwyg+PXlaI/k2O12Cnj1OpUDW8/VYyIfAIW1WzakQXjVUUt6Z+sEc9c1A1uVWyjT+UIbMM8rVE3uLNYFTH5MNxPirPFfw1nX2Z9TF5Dt0dTrvfrzlVZyOR1NWZc10DevHhZDmG1NS+Ia94x6+vkJQJNOfYQr9b73AjIq4nGlMvt2Po6sQWo8bbvaiCHvgg5XS7OLBHJi0kZj2d8q9yJpCGCtEs3iCdWoWJyBzXQel/0G8shb0vOTnEbfyQJpBl9JeWohlMpEWkYVk1O3rk46cO+q4kavDwfw7Ohk4ZFE25OLUNTxaRReJtzUcPxY5G0QogK5u9LnWONya/8lzWQO9UE0goxsxDzBkXUTg7VZLzGZh6LpE1RyPD94KbaYvIH/1cN5B01gbRInDB9xPfCiLRIzdmtYd1StE5QZ2y+fLJimbROUKds1tjME520zs4ZnaSbUhVIy7DB5Fu4YakRSnRjjxgzDCVCib69ItZcFJHQgbX0gFhT1ZhQIWcVWzUO8ywgNK0Khq5KD1UtEJpEhaWrUm/aJzTJbB1ZBhORUGSb7NQY5H1CnaAx8lJyoIiEOmFxZqMG2u90Ql2fla9dNuO+QCjDScpCjbW/w4QNQUz985/1WaX+YHwXZNRrINeUCBv0HQPvFfYGI0tlVdCu0QsjwhK7dBA9vSwgLLHHNGsc/JqVIfpNRPem1GVhJ/qmntKr4R0Npp6Mb7BxRVR4YwYObI815oiO3kQmrMFb/4Co2JT0jyiPdz9zGjUO8wlTE/Qdsf0PBw9+zcgu9IEcX1DbXMY2om9kGh+GpRqjD4cdtl3jEtqEZVE4QO2xRmwdUX4mtVrDKZm55/klqd1PbK8GA7fDv6eV7dW4mAvCPME22yliZazuvN6zW5odTrlg9NeVRg1UGWz/pNwPcG3MjsM+VAkvJMVCjTpUOx6mxp00sVCzBiF7J3l6NZyxxvRe4x2hzhutMTjGrLxe+1fydjpEzViaPPy4/iBorsb6nPAzQxuvgeaZxM0MvbMnaSM13FRh++j6W8Iqmb06ySCv2XtpQK2Gc97xtkwarLGpMpu3X5Q7rBX+K2u4VT5i+y7072R1cn5NE/cY99k/uP6ZvFBe9ISsK0UT+RwaTdS4FjXnNYR+Np5/uoZnpfzPjDeBGpcn5+M1rvmO+5nxRlazz9RYn8pYlfleJT/UiEtr8/EaVjlZcD4z3k+PUe73PlDjMNifzck26kqIH+iSNjL95RM1emm4W6x4uelquAZa+uZIk7ozQN8RZLuO8+rpGlHQxZWiq7tinJ4G6HeGrusue9a+SmdjU4mThcTnEe1JWL7/cx9zfPTnVq/Xc9FXg9tfp7l/S3H/z0DyfxEDakCN38HSIolvKWZptbd6S9d1h+iGAADAk2BwAABgcAAAHsDgAADQB4MDAACDAwDwAAYHAIA+GBwAABgcAIAHMDgAAPTB4AAAwOAAADTvCzoONH1sYtNIAAAAAElFTkSuQmCC);
opacity: 0.4;
animation: animation-wave 24s linear infinite;
background-size: 540px 25px;
}
@keyframes animation-wave {
0% {
transform: translateX(0) translateZ(0) scaleY(1);
}
50% {
transform: translateX(-25%) translateZ(0) scaleY(1);
}
100% {
transform: translateX(-50%) translateZ(0) scaleY(1);
}
.gif-loading-white{
mix-blend-mode: multiply;
width: 100%;
height: 280rpx;
}

8
demo/pages/plugin/gradual/gradual.wxml
View File

@@ -1,7 +1,7 @@
<custom style="height:{{CustomBar}}px;">
<bar class="fixed gradual-orange" style="height:{{CustomBar}}px;padding-top:{{StatusBar}}px;">
<view class="cu-custom" style="height:{{CustomBar}}px;">
<view class="cu-bar fixed gradual-orange" 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>
</bar>
</custom>
</view>
</view>

16
demo/pages/plugin/home/home.wxml
View File

@@ -1,14 +1,14 @@
<custom style="height:{{CustomBar}}px;">
<bar class="fixed none-bg text-white bg-img" style="height:{{CustomBar}}px;padding-top:{{StatusBar}}px;background-image:url(https://image.weilanwl.com/color2.0/plugin/cjkz2329.jpg);">
<view class="cu-custom" style="height:{{CustomBar}}px;">
<view class="cu-bar fixed none-bg text-white bg-img" style="height:{{CustomBar}}px;padding-top:{{StatusBar}}px;background-image:url(https://image.weilanwl.com/color2.0/plugin/cjkz2329.jpg);">
<view class='content' open-type="navigateBack" delta="1" hover-class="none">
<image src="/images/cjkz.png" mode='widthFix'></image>
</view>
</bar>
</custom>
<card>
<item class="bg-img shadow-blur" style="background-image:url({{item.img}})" bindtap="toChild" data-url="{{item.url}}" wx:for="{{list}}" wx:key>
</view>
</view>
<view class="cu-card">
<view class="cu-item bg-img shadow-blur" style="background-image:url({{item.img}})" bindtap="toChild" data-url="{{item.url}}" wx:for="{{list}}" wx:key>
<view class="cardTitle">
{{item.title}}
</view>
</item>
</card>
</view>
</view>

2
demo/pages/plugin/home/home.wxss
View File

@@ -1,5 +1,5 @@
bar .content image{
.cu-bar .content image{
height: 60rpx;
width: 240rpx;
}

24
demo/pages/plugin/indexes/indexes.wxml
View File

@@ -1,33 +1,33 @@
<custom style="height:{{CustomBar}}px;">
<bar class="fixed none-bg text-white bg-img" style="height:{{CustomBar}}px;padding-top:{{StatusBar}}px;background-image:url(https://image.weilanwl.com/color2.0/plugin/sylb2244.jpg);">
<view class="cu-custom" style="height:{{CustomBar}}px;">
<view class="cu-bar fixed none-bg text-white bg-img" style="height:{{CustomBar}}px;padding-top:{{StatusBar}}px;background-image:url(https://image.weilanwl.com/color2.0/plugin/sylb2244.jpg);">
<navigator class='action' open-type="navigateBack" delta="1" hover-class="none">
<text class='icon-back'></text> 索引
</navigator>
</bar>
</custom>
<bar class="search fixed" style="top:{{CustomBar}}px;">
</view>
</view>
<view class="cu-bar search fixed" style="top:{{CustomBar}}px;">
<view class='search-form round'>
<text class="icon-search"></text>
<input type="text" placeholder="输入搜索的关键词" confirm-type="search"></input>
</view>
<view class='action'>
<button class='gradual-green shadow-blur round'>搜索</button>
<button class='cu-btn gradual-green shadow-blur round'>搜索</button>
</view>
</bar>
</view>
<scroll-view scroll-y class="indexes" scroll-into-view="indexes-{{listCurID}}" style='height:calc(100vh - {{CustomBar}}px - 50px)' scroll-with-animation="true" enable-back-to-top="true">
<block wx:for="{{list}}" wx:key>
<view class='padding indexItem-{{list[index]}}' id="indexes-{{list[index]}}" data-index="{{list[index]}}">{{list[index]}}</view>
<list class="menu menu-avatar no-padding">
<item wx:for="{{2}}" wx:key wx:for-index="sub">
<avatar class="round lg">{{list[index]}}</avatar>
<view class="cu-list menu menu-avatar no-padding">
<view class="cu-item" wx:for="{{2}}" wx:key wx:for-index="sub">
<view class="cu-avatar round lg">{{list[index]}}</view>
<view class='content'>
<view class='text-grey'>{{list[index]}}<text class='text-abc'>{{list[sub]}}</text>君</view>
<view class='text-gray text-sm'>
有{{sub+2}}个主子需要伺候
</view>
</view>
</item>
</list>
</view>
</view>
</block>
</scroll-view>
<view class='indexBar' style='height:calc(100vh - {{CustomBar}}px - 50px)'>

130
template/app.wxss
View File

@@ -1,2 +1,132 @@
@import "icon.wxss";
@import "colorui.wxss";
.nav-list {
display: flex;
flex-wrap: wrap;
padding: 0px 40rpx 0px;
justify-content: space-between;
}
.nav-li {
color: #666;
padding: 30rpx;
border-radius: 12rpx;
width: 45%;
margin: 0 2.5% 40rpx;
background-image: url(https://image.weilanwl.com/color2.0/cardBg.png);
background-size: cover;
background-position: center;
position: relative;
z-index: 1;
}
.nav-li::after {
content: "";
position: absolute;
z-index: -1;
background-color: inherit;
width: 100%;
height: 100%;
left: 0;
bottom: -10%;
border-radius: 10rpx;
opacity: 0.2;
transform: scale(0.9, 0.9);
}
.nav-li.cur {
color: #fff;
background: rgb(94, 185, 94);
box-shadow: 4rpx 4rpx 6rpx rgba(94, 185, 94, 0.4);
}
.nav-title {
font-size: 32rpx;
font-weight: 300;
}
.nav-title::first-letter {
font-size: 40rpx;
margin-right: 4rpx;
}
.nav-name {
font-size: 28rpx;
text-transform: Capitalize;
margin-top: 20rpx;
position: relative;
}
.nav-name::before {
content: "";
position: absolute;
display: block;
width: 40rpx;
height: 6rpx;
background: #fff;
bottom: 0;
right: 0;
opacity: 0.5;
}
.nav-name::after {
content: "";
position: absolute;
display: block;
width: 100rpx;
height: 1px;
background: #fff;
bottom: 0;
right: 40rpx;
opacity: 0.3;
}
.nav-name::first-letter {
font-weight: bold;
font-size: 36rpx;
margin-right: 1px;
}
.nav-li text {
position: absolute;
right: 30rpx;
top: 30rpx;
font-size: 52rpx;
width: 60rpx;
height: 60rpx;
text-align: center;
line-height: 60rpx;
}
.text-light {
font-weight: 300;
}
@keyframes show {
0% {
transform: translateY(-50px);
}
60% {
transform: translateY(40rpx);
}
100% {
transform: translateY(0px);
}
}
@-webkit-keyframes show {
0% {
transform: translateY(-50px);
}
60% {
transform: translateY(40rpx);
}
100% {
transform: translateY(0px);
}
}

5062
template/colorui.wxss
View File

File diff suppressed because it is too large Load Diff

12
template/pages/index/index.wxml
View File

@@ -1,14 +1,14 @@
<custom style="height:{{CustomBar}}px;">
<bar class="fixed gradual-blue" style="height:{{CustomBar}}px;padding-top:{{StatusBar}}px;">
<view class='cu-custom' style="height:{{CustomBar}}px;">
<view class="cu-bar fixed gradual-blue" style="height:{{CustomBar}}px;padding-top:{{StatusBar}}px;">
<view class='content'>ColorUI 空白模板</view>
</bar>
</custom>
</view>
</view>
<view class="margin-xl padding-xl bg-white radius shadow-lg">
<view class="flex justify-center">
<button wx:if="{{!hasUserInfo && canIUse}}" open-type="getUserInfo" bindgetuserinfo="getUserInfo" class='round bg-green shadow'> 获取头像昵称 </button>
<button wx:if="{{!hasUserInfo && canIUse}}" open-type="getUserInfo" bindgetuserinfo="getUserInfo" class='cu-btn round bg-green shadow'> 获取头像昵称 </button>
<block wx:else>
<view class='text-center'>
<avatar class="xl round solids" style="background-image:url({{userInfo.avatarUrl}})"></avatar>
<view class="cu-avatar xl round solids" style="background-image:url({{userInfo.avatarUrl}})"></view>
<view class="padding">{{userInfo.nickName}}</view>
</view>
</block>