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

v2.0.2

Browse Source 
v2.0.2 2.0版本上线
This commit is contained in:
Weilanwl
2018-12-23 03:03:40 +08:00
parent df555a143e
commit 967f46ae3d
257 changed files with 11663 additions and 4566 deletions
Download Patch File Download Diff File Expand all files Collapse all files

21
LICENSE
View File

@@ -1,21 +0,0 @@
MIT License
Copyright (c) 2018 weilanwl
Permission is hereby granted, free of charge, to any person obtaining a copy
of this software and associated documentation files (the "Software"), to deal
in the Software without restriction, including without limitation the rights
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
copies of the Software, and to permit persons to whom the Software is
furnished to do so, subject to the following conditions:
The above copyright notice and this permission notice shall be included in all
copies or substantial portions of the Software.
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
SOFTWARE.

27
README.md
View File

@@ -1,27 +0,0 @@
<h1 align="center">ColorUI组件</h1>
<h3 align="center">鲜亮的高饱和色彩，专注视觉的小程序组件库</h3>
<p>
ColorUI组件是我根据开发经验，自己编写、整合的一套高颜值的微信小程序组件库。
</p><p>
里面包含常用的一些基本元素，比如按钮，徽章，进度条等。相比其他组件库，ColorUI的元素更符合大众的审美，在边距、行高、大小、颜色等方面做了更细微的调整，也解决了一些微信小程序自带的兼容问题。
</p><p>
除了基本元素外，还编写了一些经常用到的组件。比如时间线，导航，内容列表，商品等，极大的提高了开发者的效率。
</p><p>
ColorUI V1.5 不再进行更新与维护，接下来会是全新的V2.0
</p><p>
欢迎小程序开发者使用！ 微信小程序开发 QQ群：240787041欢迎交流。
</p><p>
微信小程序开发 微信群
</p><p>
<img src="https://raw.githubusercontent.com/weilanwl/ColorUI/master/images/wxqrcode.jpg" width="200">
</p><p>
项目网站： <a href="https://www.color-ui.com/" target="_blank" >https://www.color-ui.com//</a>
</p>
<p align="center">小程序扫码体验<br>
<img src="https://raw.githubusercontent.com/weilanwl/ColorUI/master/images/ColorUI.jpg"> </p>
<p align="center">
您的赞赏！我的动力！<br>
<img src="https://raw.githubusercontent.com/weilanwl/ColorUI/master/images/mm_reward_qrcode_1540462442829.png" width="300"></p>

35
app.json
View File

@@ -1,35 +0,0 @@
{
"pages": [
"pages/index/index",
"pages/layout/layout",
"pages/button/button",
"pages/button/sub",
"pages/border/border",
"pages/badge/badge",
"pages/bar/bar",
"pages/label/label",
"pages/text/text",
"pages/icon/icon",
"pages/loading/loading",
"pages/image/image",
"pages/form/form",
"pages/nav/nav",
"pages/item/item",
"pages/list/list",
"pages/side/side",
"pages/comment/comment",
"pages/timeline/timeline",
"pages/slider/slider",
"pages/rating/rating",
"pages/modal/modal",
"pages/progress/progress",
"pages/chat/chat",
"pages/animation/animation"
],
"window": {
"backgroundTextStyle": "black",
"navigationBarBackgroundColor": "#39b54a",
"navigationBarTitleText": "Color UI",
"navigationBarTextStyle": "light"
}
}

170
app.wxss
View File

@@ -1,170 +0,0 @@
@import "icon.wxss";
@import "colorui.wxss";
page {
counter-reset: header;
}
.indexImage {
width: 100%;
}
.screen {
display: flex;
align-items: center;
height: 100vh;
text-align: center;
justify-content: center;
font-size: 80rpx;
}
.desc text {
text-align: center;
color: #999;
display: block;
margin-bottom: 60rpx;
}
.nav-list {
display: flex;
color: #666;
align-items: center;
padding: 30rpx;
margin: 30rpx 30rpx 0;
background: #fff;
border-radius: 6rpx;
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}
.nav-list.cur {
color: #fff;
background: rgb(94, 185, 94);
box-shadow: 2px 2px 3px rgba(94, 185, 94, 0.4);
}
.nav-list .iconfont {
flex: 1;
text-align: right;
}
.nav-title {
margin-right: 20rpx;
}
.nav-name {
color: #aaa;
font-size: 24rpx;
text-transform: Capitalize;
}
.doc-top {
padding: 30rpx;
background: #39b54a;
position: relative;
}
.doc-top::after {
content: "";
position: absolute;
top: 30rpx;
border-radius: 6rpx;
display: block;
width: 50rpx;
height: 5rpx;
background: #fff;
box-shadow: 5rpx 7rpx 7rpx rgba(0, 0, 0, 0.15);
}
.doc-top-title {
margin-top: 30rpx;
font-size: 48rpx;
font-weight: 900;
color: #fff;
text-shadow: 10rpx 15rpx 15rpx rgba(0, 0, 0, 0.15);
}
.doc-top-name {
margin-top: 20rpx;
font-size: 32rpx;
font-weight: 600;
color: #fff;
text-transform: Capitalize;
text-shadow: 5rpx 7rpx 7rpx rgba(0, 0, 0, 0.15);
}
.doc-main {
background: #fff;
padding: 20rpx;
line-height: 52rpx;
}
.doc-main-title {
counter-increment: header;
line-height: 80rpx;
font-weight: 600;
font-size: 36rpx;
}
.doc-main-title::before {
content: counter(header) ". ";
color: #888;
font-weight: 400;
}
.doc-main-content {
margin-bottom: 20rpx;
line-height: 1.6;
}
.doc-example {
padding: 0 30rpx 30rpx;
position: relative;
margin-bottom: 30rpx;
}
.doc-example + .doc-example, .doc-example + .doc-main-content {
margin-top: 20rpx;
}
.doc-example::before {
content: 'Demo';
display: block;
color: #bbb;
text-transform: uppercase;
margin: 0 -30rpx 30rpx;
padding: 4px 10px;
font-size: 24rpx;
background: #f5f5f5;
}
.doc-example::after {
content: " ";
width: 200%;
height: 200%;
position: absolute;
top: 0;
left: 0;
border: 1px solid rgba(0, 0, 0, 0.2);
-webkit-transform: scale(0.5);
transform: scale(0.5);
-webkit-transform-origin: 0 0;
transform-origin: 0 0;
box-sizing: border-box;
border-radius: 10rpx;
}
.doc-box {
background: #f5f5f5;
border-radius: 10rpx;
}
.doc-box-sub {
background: #ddd;
line-height: 60rpx;
border-radius: 10rpx;
}
.big-sub {
line-height: 160rpx;
padding: 50rpx;
}

6
colorui.wxss
View File

File diff suppressed because one or more lines are too long

2
demo/.gitattributes vendored Normal file
View File

@@ -0,0 +1,2 @@
# Auto detect text files and perform LF normalization
* text=auto

89
demo/app.js Normal file
View File

@@ -0,0 +1,89 @@
//app.js
App({
onLaunch: function() {
wx.getSystemInfo({
success: e=> {
this.globalData.StatusBar = e.statusBarHeight;
this.globalData.CustomBar = e.platform == 'android' ? e.statusBarHeight + 50 : e.statusBarHeight + 45;
}
})
},
globalData: {
ColorList: [{
title: '嫣红',
name: 'red',
color: '#e54d42'
},
{
title: '桔橙',
name: 'orange',
color: '#f37b1d'
},
{
title: '明黄',
name: 'yellow',
color: '#fbbd08'
},
{
title: '橄榄',
name: 'olive',
color: '#8dc63f'
},
{
title: '森绿',
name: 'green',
color: '#39b54a'
},
{
title: '天青',
name: 'cyan',
color: '#1cbbb4'
},
{
title: '海蓝',
name: 'blue',
color: '#0081ff'
},
{
title: '姹紫',
name: 'purple',
color: '#6739b6'
},
{
title: '木槿',
name: 'mauve',
color: '#9c26b0'
},
{
title: '桃粉',
name: 'pink',
color: '#e03997'
},
{
title: '棕褐',
name: 'brown',
color: '#a5673f'
},
{
title: '玄灰',
name: 'grey',
color: '#8799a3'
},
{
title: '草灰',
name: 'gray',
color: '#aaaaaa'
},
{
title: '墨黑',
name: 'black',
color: '#333333'
},
{
title: '雅白',
name: 'white',
color: '#ffffff'
},
]
}
})

65
demo/app.json Normal file
View File

@@ -0,0 +1,65 @@
{
"pages": [
"pages/basics/home/home",
"pages/basics/layout/layout",
"pages/component/home/home",
"pages/plugin/home/home",
"pages/basics/button/button",
"pages/basics/tag/tag",
"pages/basics/avatar/avatar",
"pages/basics/image/image",
"pages/basics/progress/progress",
"pages/component/list/list",
"pages/basics/form/form",
"pages/component/bar/bar",
"pages/component/timeline/timeline",
"pages/basics/shadow/shadow",
"pages/component/chat/chat",
"pages/component/form/form",
"pages/basics/background/background",
"pages/basics/text/text",
"pages/basics/icon/icon",
"pages/basics/loading/loading",
"pages/component/nav/nav",
"pages/component/card/card",
"pages/component/swiper/swiper",
"pages/component/modal/modal",
"pages/plugin/indexes/indexes",
"pages/basics/button/design",
"pages/plugin/gradual/gradual",
"pages/plugin/animation/animation"
],
"window": {
"navigationBarBackgroundColor": "#39b54a",
"navigationBarTitleText": "Color UI",
"navigationStyle": "custom",
"navigationBarTextStyle": "white"
},
"component": true,
"tabBar": {
"color": "#aaa",
"selectedColor": "#39b54a",
"borderStyle": "black",
"backgroundColor": "#ffffff",
"list": [
{
"pagePath": "pages/basics/home/home",
"iconPath": "/images/tabbar/basics.png",
"selectedIconPath": "/images/tabbar/basics_cur.png",
"text": "基础"
},
{
"pagePath": "pages/component/home/home",
"iconPath": "/images/tabbar/component.png",
"selectedIconPath": "/images/tabbar/component_cur.png",
"text": "组件"
},
{
"pagePath": "pages/plugin/home/home",
"iconPath": "/images/tabbar/plugin.png",
"selectedIconPath": "/images/tabbar/plugin_cur.png",
"text": "扩展"
}
]
}
}

132
demo/app.wxss Normal file
View File

@@ -0,0 +1,132 @@
@import "icon.wxss";
@import "colorui.wxss";
.nav-list {
display: flex;
flex-wrap: wrap;
padding: 0px 20px 0px;
justify-content: space-between;
}
.nav-li {
color: #666;
padding: 15px;
border-radius: 6px;
width: 45%;
margin: 0 2.5% 20px;
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: 5px;
opacity: 0.2;
transform: scale(0.9, 0.9);
}
.nav-li.cur {
color: #fff;
background: rgb(94, 185, 94);
box-shadow: 2px 2px 3px rgba(94, 185, 94, 0.4);
}
.nav-title {
font-size: 16px;
font-weight: 300;
}
.nav-title::first-letter {
font-size: 20px;
margin-right: 2px;
}
.nav-name {
font-size: 14px;
text-transform: Capitalize;
margin-top: 10px;
position: relative;
}
.nav-name::before {
content: "";
position: absolute;
display: block;
width: 20px;
height: 3px;
background: #fff;
bottom: 0;
right: 0;
opacity: 0.5;
}
.nav-name::after {
content: "";
position: absolute;
display: block;
width: 50px;
height: 1px;
background: #fff;
bottom: 0;
right: 20px;
opacity: 0.3;
}
.nav-name::first-letter {
font-weight: bold;
font-size: 18px;
margin-right: 1px;
}
.nav-li icon {
position: absolute;
right: 15px;
top: 15px;
font-size: 26px;
width: 30px;
height: 30px;
text-align: center;
line-height: 30px;
}
.text-light {
font-weight: 300;
}
@keyframes show {
0% {
transform: translateY(-50px);
}
60% {
transform: translateY(20px);
}
100% {
transform: translateY(0px);
}
}
@-webkit-keyframes show {
0% {
transform: translateY(-50px);
}
60% {
transform: translateY(20px);
}
100% {
transform: translateY(0px);
}
}

2953
demo/colorui.wxss Normal file
View File

File diff suppressed because it is too large Load Diff

654
demo/icon.wxss Normal file
View File

File diff suppressed because one or more lines are too long

BIN
demo/images/BasicsBg.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 104 KiB

BIN
demo/images/cjkz.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 2.5 KiB

BIN
demo/images/componentBg.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 100 KiB

BIN
demo/images/logo.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 34 KiB

BIN
demo/images/tabbar/basics.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 3.2 KiB

BIN
demo/images/tabbar/basics_cur.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 4.9 KiB

BIN
demo/images/tabbar/component.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 1.3 KiB

BIN
demo/images/tabbar/component_cur.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 2.8 KiB

BIN
demo/images/tabbar/plugin.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 2.4 KiB

BIN
demo/images/tabbar/plugin_cur.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 4.4 KiB

14
demo/pages/basics/avatar/avatar.js Normal file
View File

@@ -0,0 +1,14 @@
const app = getApp();
Page({
data: {
StatusBar: app.globalData.StatusBar,
CustomBar: app.globalData.CustomBar,
ColorList: app.globalData.ColorList,
},
onLoad: function() {},
pageBack() {
wx.navigateBack({
delta: 1
});
}
});

0
pages/animation/animation.json → demo/pages/basics/avatar/avatar.json
View File

72
demo/pages/basics/avatar/avatar.wxml Normal file
View File

@@ -0,0 +1,72 @@
<custom style="height:{{CustomBar}}px;">
<bar class="fixed gradual-blue" style="height:{{CustomBar}}px;padding-top:{{StatusBar}}px;">
<navigator class='action' open-type="navigateBack" delta="1" hover-class="none">
<icon class='icon-back' /> 头像
</navigator>
</bar>
</custom>
<bar>
<view class='action'>
<icon class='icon-title text-blue' />头像形状
</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='action'>
<icon class='icon-title text-blue' />头像尺寸
</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>
<bar class="margin-top">
<view class='action'>
<icon class='icon-title text-blue' />内嵌文字(图标)
</view>
</bar>
<view class="padding">
<avatar class="radius">
<icon class='icon-people' />
</avatar>
<avatar class="radius margin-left">
<text>港</text>
</avatar>
</view>
<bar class="margin-top">
<view class='action'>
<icon class='icon-title text-blue' />头像颜色
</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='action'>
<icon class='icon-title text-blue' />头像组
</view>
</bar>
<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>
<bar class="margin-top">
<view class='action'>
<icon class='icon-title text-blue' />头像标签
</view>
</bar>
<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>

1
demo/pages/basics/avatar/avatar.wxss Normal file
View File

@@ -0,0 +1 @@
/* pages/basics/avatar/avatar.wxss */

11
demo/pages/basics/background/background.js Normal file
View File

@@ -0,0 +1,11 @@
const app = getApp();
Page({
data: {
StatusBar: app.globalData.StatusBar,
CustomBar: app.globalData.CustomBar,
ColorList: app.globalData.ColorList,
},
onLoad: function() {},
})

0
pages/chat/chat.json → demo/pages/basics/background/background.json
View File

130
demo/pages/basics/background/background.wxml Normal file
View File

@@ -0,0 +1,130 @@
<custom style="height:{{CustomBar}}px;">
<bar class="fixed gradual-blue" style="height:{{CustomBar}}px;padding-top:{{StatusBar}}px;">
<navigator class='action' open-type="navigateBack" delta="1" hover-class="none">
<icon class='icon-back' /> 背景颜色
</navigator>
</bar>
</custom>
<bar class="solid-bottom">
<view class='action'>
<icon class='icon-title text-blue' />深色背景
</view>
</bar>
<view class='grid col-3 padding-sm'>
<view class='padding-sm' wx:for="{{ColorList}}" wx:key>
<view class='bg-{{item.name}} padding radius text-center shadow-blur'>
<view class="text-lg">{{item.title}}</view>
<view class='margin-top-sm text-Abc'>{{item.name}}</view>
</view>
</view>
</view>
<bar class="solid-bottom">
<view class='action'>
<icon class='icon-title text-blue' />淡色背景
</view>
</bar>
<view class='grid col-3 bg-white padding-sm'>
<view class='padding-sm' wx:for="{{ColorList}}" wx:key wx:if="{{index<12}}">
<view class='bg-{{item.name}} padding radius text-center light'>
<view class="text-lg">{{item.title}}</view>
<view class='margin-top-sm text-Abc'>{{item.name}}</view>
</view>
</view>
</view>
<bar class="solid-bottom margin-top">
<view class='action'>
<icon class='icon-title text-blue' />渐变背景
</view>
</bar>
<view class='grid col-2 padding-sm'>
<view class='padding-sm'>
<view class='gradual-red padding radius text-center shadow-blur'>
<view class="text-lg">魅红</view>
<view class='margin-top-sm text-Abc'>#f43f3b - #ec008c</view>
</view>
</view>
<view class='padding-sm'>
<view class='gradual-orange padding radius text-center shadow-blur'>
<view class="text-lg">鎏金</view>
<view class='margin-top-sm text-Abc'>#ff9700 - #ed1c24</view>
</view>
</view>
<view class='padding-sm'>
<view class='gradual-green padding radius text-center shadow-blur'>
<view class="text-lg">翠柳</view>
<view class='margin-top-sm text-Abc'>#39b54a - #8dc63f</view>
</view>
</view>
<view class='padding-sm'>
<view class='gradual-blue padding radius text-center shadow-blur'>
<view class="text-lg">靛青</view>
<view class='margin-top-sm text-Abc'>#0081ff - #1cbbb4</view>
</view>
</view>
<view class='padding-sm'>
<view class='gradual-purple padding radius text-center shadow-blur'>
<view class="text-lg">惑紫</view>
<view class='margin-top-sm text-Abc'>#9000ff - #5e00ff</view>
</view>
</view>
<view class='padding-sm'>
<view class='gradual-pink padding radius text-center shadow-blur'>
<view class="text-lg">霞彩</view>
<view class='margin-top-sm text-Abc'>#ec008c - #6739b6</view>
</view>
</view>
</view>
<bar class="margin-top">
<view class='action'>
<icon class='icon-title text-blue' />图片背景
</view>
</bar>
<view class="bg-img bg-mask padding-tb-xl" style="background-image: url('https://albedo-theme.com/wp-content/uploads/2016/08/pexels-photo-26180.jpg')">
<view class='padding-xl text-white'>
<view class='padding-xs text-xl'>
我和春天有个约会
</view>
<view class='padding-xs'>
I Have a Date with Spring
</view>
</view>
</view>
<bar class="margin-top">
<view class='action'>
<icon class='icon-title text-blue' />视频背景
</view>
</bar>
<view class="bg-video bg-mask">
<video src='https://www.weilanwl.com/theme/wl/assets/images/slider1.mp4' autoplay loop muted show-play-btn="{{false}}" controls="{{false}}" objectFit="cover"></video>
<cover-view class='padding-xl text-white'>
<cover-view class='padding-xs text-xl'>
开源是创新的动力之源
</cover-view>
<cover-view class='padding-xs'>
Open Source is the Power Source of Innovation
</cover-view>
</cover-view>
</view>
<bar class="margin-top">
<view class='action'>
<icon class='icon-title text-blue' />透明背景(文字层)
</view>
</bar>
<view class='grid col-2 padding-sm'>
<view class='padding-sm'>
<view class="bg-img padding-bottom-xl" style="background-image: url('https://image.weilanwl.com/img/square-3.jpg')">
<view class='bg-shadeTop padding padding-bottom-xl'>
上面开始
</view>
</view>
</view>
<view class='padding-sm'>
<view class="bg-img padding-top-xl" style="background-image: url('https://image.weilanwl.com/img/square-3.jpg')">
<view class='bg-shadeBottom padding padding-top-xl '>
下面开始
</view>
</view>
</view>
</view>

0
demo/pages/basics/background/background.wxss Normal file
View File

18
demo/pages/basics/button/button.js Normal file
View File

@@ -0,0 +1,18 @@
const app = getApp();
Page({
data: {
StatusBar: app.globalData.StatusBar,
CustomBar: app.globalData.CustomBar,
ColorList: app.globalData.ColorList,
},
SetShadow(e) {
this.setData({
shadow: e.detail.value
})
},
SetBorderSize(e) {
this.setData({
bordersize: e.detail.value
})
},
});

0
pages/comment/comment.json → demo/pages/basics/button/button.json
View File

99
demo/pages/basics/button/button.wxml Normal file
View File

@@ -0,0 +1,99 @@
<custom style="height:{{CustomBar}}px;">
<bar class="fixed gradual-blue" style="height:{{CustomBar}}px;padding-top:{{StatusBar}}px;">
<navigator class='action' open-type="navigateBack" delta="1" hover-class="none">
<icon class='icon-back' /> 按钮
</navigator>
<navigator class='action' url='design' hover-class="none">
<icon class='icon-skinfill' />
<text class="text-df">设计</text>
</navigator>
</bar>
</custom>
<bar>
<view class='action'>
<icon class='icon-title text-blue' />按钮形状
</view>
</bar>
<view class="padding flex flex-wrap justify-between align-center">
<button>默认</button>
<button class='round'>圆角</button>
<button class='icon'>
<icon class='icon-emojifill' />
</button>
</view>
<bar class="margin-top ">
<view class='action'>
<icon class='icon-title text-blue' />按钮尺寸
</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='action'>
<icon class='icon-title text-blue' />按钮颜色
</view>
<view class='action'>
<text class='text-df'>阴影</text>
<switch class='sm' bindchange='SetShadow'></switch>
</view>
</bar>
<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>
</view>
</view>
<bar class="margin-top ">
<view class='action'>
<icon class='icon-title text-blue' />镂空按钮
</view>
<view class='action'>
<radio-group bindchange='SetBorderSize'>
<label class='margin-left-sm'>
<radio class='blue sm radio' value='' checked/>
<text> 小</text>
</label>
<label class='margin-left-sm'>
<radio class='blue sm radio' value='s' />
<text> 大</text>
</label>
</radio-group>
</view>
</bar>
<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>
</view>
</view>
<bar class="margin-top ">
<view class='action'>
<icon class='icon-title text-blue' />块状按钮
</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='action'>
<icon class='icon-title text-blue' />无效状态
</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='action'>
<icon class='icon-title text-blue' />按钮加图标
</view>
</bar>
<view class="padding-xl">
<button class='block line-orange lg'>
<icon class='icon-upload' /> 图标</button>
<button class='block bg-blue margin-tb-sm lg'>
<icon class='icon-loading2 iconfont-spin' /> 加载</button>
<button class='block bg-black margin-tb-sm lg' loading> 微信加载</button>
</view>

1
demo/pages/basics/button/button.wxss Normal file
View File

@@ -0,0 +1 @@

59
demo/pages/basics/button/design.js Normal file
View File

@@ -0,0 +1,59 @@
const app = getApp();
Page({
data: {
StatusBar: app.globalData.StatusBar,
CustomBar: app.globalData.CustomBar,
ColorList: app.globalData.ColorList,
},
showModal(e) {
this.setData({
modalName: e.currentTarget.dataset.target
})
},
hideModal(e) {
this.setData({
modalName: null
})
},
SetRound (e) {
this.setData({
round: e.detail.value
})
},
SetSize(e) {
this.setData({
size: e.detail.value
})
},
SetColor(e) {
this.setData({
color: e.currentTarget.dataset.color,
modalName: null
})
},
SetShadow(e) {
this.setData({
shadow: e.detail.value
})
},
SetBorder(e){
this.setData({
border: e.detail.value
})
if (!e.detail.value){
this.setData({
bordersize: false
})
}
},
SetBorderSize(e) {
this.setData({
bordersize: e.detail.value
})
},
SetBlock(e) {
this.setData({
block: e.detail.value
})
},
});

0
pages/image/image.json → demo/pages/basics/button/design.json
View File

81
demo/pages/basics/button/design.wxml Normal file
View File

@@ -0,0 +1,81 @@
<custom style="height:{{CustomBar}}px;">
<bar class="fixed gradual-blue" style="height:{{CustomBar}}px;padding-top:{{StatusBar}}px;">
<navigator class='action' open-type="navigateBack" delta="1" hover-class="none">
<icon class='icon-back' /> 按钮 / 设计
</navigator>
</bar>
</custom>
<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>
</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='title'>选择颜色</view>
<view class='padding-sm bg-{{color}} solid radius shadow-blur'></view>
</form-group>
<form-group>
<view class='title'>是否圆角</view>
<switch class='sm' bindchange='SetRound'></switch>
</form-group>
<form-group>
<view class='title'>选择尺寸</view>
<radio-group bindchange='SetSize'>
<label class='margin-left-sm'>
<radio class='blue sm radio' value='sm' />
<text> 小</text>
</label>
<label class='margin-left-sm'>
<radio class='blue sm radio' value='' checked/>
<text> 中</text>
</label>
<label class='margin-left-sm'>
<radio class='blue sm radio' value='lg' />
<text> 大</text>
</label>
</radio-group>
</form-group>
<form-group>
<view class='title'>是否添加阴影</view>
<switch class='sm' bindchange='SetShadow'></switch>
</form-group>
<form-group>
<view class='title'>是否镂空</view>
<switch class='sm' bindchange='SetBorder'></switch>
</form-group>
<form-group wx:if="{{border}}">
<view class='title'>边框大小</view>
<radio-group bindchange='SetBorderSize'>
<label class='margin-left-sm'>
<radio class='blue sm radio' value='' checked/>
<text> 小</text>
</label>
<label class='margin-left-sm'>
<radio class='blue sm radio' value='s' />
<text> 大</text>
</label>
</radio-group>
</form-group>
<!-- <form-group>
<view class='title'>定义为块元素</view>
<switch class='sm' bindchange='SetBlock'></switch>
</form-group> -->
<modal-box class="{{modalName=='ColorModal'?'show':''}}">
<dialog>
<bar class="justify-end">
<view class='content'>选择颜色</view>
<view class='action' bindtap='hideModal'>
<icon class='icon-close text-red'></icon>
</view>
</bar>
<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>

6
demo/pages/basics/button/design.wxss Normal file
View File

@@ -0,0 +1,6 @@
.box{
display: flex;
align-items: center;
justify-content: center;
height: 100px;
}

10
demo/pages/basics/form/form.js Normal file
View File

@@ -0,0 +1,10 @@
const app = getApp();
Page({
data: {
StatusBar: app.globalData.StatusBar,
CustomBar: app.globalData.CustomBar
},
onLoad: function() {
},
});

0
pages/item/item.json → demo/pages/basics/form/form.json
View File

61
demo/pages/basics/form/form.wxml Normal file
View File

@@ -0,0 +1,61 @@
<custom style="height:{{CustomBar}}px;">
<bar class="fixed gradual-blue" style="height:{{CustomBar}}px;padding-top:{{StatusBar}}px;">
<navigator class='action' open-type="navigateBack" delta="1" hover-class="none">
<icon class='icon-back'/>
表单控件
</navigator>
<view class='action'>
</view>
</bar>
</custom>
<view class='text-center'>
<view class="padding-xl ">
<checkbox class=''></checkbox>
<radio-group>
<radio class='' checked name="sex" />
<radio class='blue sm' name="sex" />
</radio-group>
</view>
<view class="padding-xl ">
<switch class='' />
<radio-group>
<radio class='red radio' checked name="sex" />
<radio class='blue radio' name="sex" />
</radio-group>
<checkbox class='blue'></checkbox>
<checkbox class='cyan round'></checkbox>
</view>
<view class="padding-xl ">
<switch class=' sm' />
<radio-group>
<radio class='red radio sm' checked name="sex" />
<radio class='blue radio sm' name="sex" />
</radio-group>
<checkbox class='red sm'></checkbox>
<checkbox class='cyan round sm'></checkbox>
</view>
<view class="padding-xl ">
<switch class='switch-sex' checked/>
<switch class='switch-sex sm' />
</view>
<view class="padding-xl ">
<switch class='red' checked/>
<switch class='blue sm' checked/>
</view>
<view class="padding-xl ">
<switch class='' checked/>
<switch class=' sm' checked/>
</view>
<view class="padding-xl ">
<switch class='' />
<switch class=' sm' />
</view>
<view class="padding-xl ">
<switch class='orange sm radius' />
<switch class='yellow radius' />
</view>
<view class="padding-xl ">
<switch class='blue radius' />
</view>
</view>

0
demo/pages/basics/form/form.wxss Normal file
View File

23
demo/pages/basics/home/home.js Normal file
View File

@@ -0,0 +1,23 @@
Page({
data: {
elements: [
{ title: '布局', name: 'layout', color: 'cyan', icon: 'newsfill' },
{ title: '背景', name: 'background', color: 'blue', icon: 'colorlens' },
{ title: '文本', name: 'text', color: 'purple', icon: 'font' },
{ title: '图标 ', name: 'icon', color: 'mauve', icon: 'icon' },
{ title: '按钮', name: 'button', color: 'pink', icon: 'btn' },
{ title: '标签', name: 'tag', color: 'brown', icon: 'tagfill' },
{ title: '头像', name: 'avatar', color: 'red', icon: 'myfill' },
{ title: '进度条', name: 'progress', color: 'orange', icon: 'icloading' },
{ title: '边框阴影', name: 'shadow', color: 'olive', icon: 'copy' },
{ title: '加载', name: 'loading', color: 'green', icon: 'loading2' },
],
},
onShareAppMessage(){
return {
title: 'ColorUI-高颜值的小程序UI组件库',
imageUrl:'https://image.weilanwl.com/color2.0/share2215.jpg',
path: '/pages/basics/home/home'
}
}
})

0
pages/label/label.json → demo/pages/basics/home/home.json
View File

8
demo/pages/basics/home/home.wxml Normal file
View File

@@ -0,0 +1,8 @@
<image src='/images/BasicsBg.png' mode='widthFix' class='png' style='width:100%;height:486rpx'></image>
<view class='nav-list'>
<navigator open-type="navigate" hover-class='none' url="../{{item.name}}/{{item.name}}" class="nav-li bg-{{item.color}}" wx:for="{{elements}}" wx:key>
<view class="nav-title">{{item.title}}</view>
<view class="nav-name">{{item.name}}</view>
<icon class='icon-{{item.icon}}'/>
</navigator>
</view>

0
demo/pages/basics/home/home.wxss Normal file
View File

28
demo/pages/basics/icon/icon.js Normal file
View File

File diff suppressed because one or more lines are too long

0
pages/modal/modal.json → demo/pages/basics/icon/icon.json
View File

22
demo/pages/basics/icon/icon.wxml Normal file
View File

@@ -0,0 +1,22 @@
<custom style="height:{{CustomBar}}px;">
<bar class="fixed gradual-blue" style="height:{{CustomBar}}px;padding-top:{{StatusBar}}px;">
<navigator class='action' open-type="navigateBack" delta="1" hover-class="none">
<icon class='icon-back'/> 图标
</navigator>
<view class='action'>
</view>
</bar>
</custom>
<bar class="search fixed" style="top:{{CustomBar}}px">
<view class='serach-form round'>
<icon class="icon-search"/>
<input type="text" placeholder="搜索icon" confirm-type="search" bindinput='searchIcon'/>
</view>
</bar>
<list class="grid col-3">
<item wx:for="{{icon}}" wx:key wx:if="{{item.isShow}}">
<icon class='icon-{{item.name}} lg text-gray'/>
<text>{{item.name}}</text>
</item>
</list>

6
demo/pages/basics/icon/icon.wxss Normal file
View File

@@ -0,0 +1,6 @@
page{
padding-top: 50px;
}
item.none{
display: none;
}

10
demo/pages/basics/image/image.js Normal file
View File

@@ -0,0 +1,10 @@
const app = getApp();
Page({
data: {
StatusBar: app.globalData.StatusBar,
CustomBar: app.globalData.CustomBar
},
onLoad: function() {
},
});

0
pages/progress/progress.json → demo/pages/basics/image/image.json
View File

14
demo/pages/basics/image/image.wxml Normal file
View File

@@ -0,0 +1,14 @@
<custom style="height:{{CustomBar}}px;">
<bar class="fixed gradual-blue" style="height:{{CustomBar}}px;padding-top:{{StatusBar}}px;">
<navigator class='action' open-type="navigateBack" delta="1" hover-class="none">
<icon class='icon-back'/>
图片
</navigator>
<view class='action'>
</view>
</bar>
</custom>
<image class="" src="https://image.weilanwl.com/img/square-4.jpg" mode="widthFix" lazy-load="true" binderror="" bindload=""></image>
<view><text>好</text></view>

19
demo/pages/basics/image/image.wxss Normal file
View File

@@ -0,0 +1,19 @@
/* view {
background: RED;
width: 100px;
height: 100px;
margin: 100px;
border-top-left-radius: 38.2% 61.8%;
border-top-right-radius: 61.8% 38.2%;
border-bottom-right-radius: 38.2% 61.8%;
border-bottom-left-radius: 61.8% 38.2%;
transform: rotate(-20deg);
display: flex;
justify-content: center;
align-items: center;
font-size: 50px;
color: #fff;
}
view text{
transform: rotate(20deg);
} */

16
demo/pages/basics/layout/layout.js Normal file
View File

@@ -0,0 +1,16 @@
const app = getApp();
Page({
data: {
StatusBar: app.globalData.StatusBar,
CustomBar: app.globalData.CustomBar,
TabCur:0,
tabNav: ['Flex布局', 'Grid布局', '辅助布局']
},
tabSelect(e) {
console.log(e);
this.setData({
TabCur: e.currentTarget.dataset.id,
scrollLeft: (e.currentTarget.dataset.id - 1) * 60
})
}
})

0
pages/rating/rating.json → demo/pages/basics/layout/layout.json
View File

185
demo/pages/basics/layout/layout.wxml Normal file
View File

@@ -0,0 +1,185 @@
<custom style="height:{{CustomBar}}px;">
<bar class="fixed gradual-blue" style="height:{{CustomBar}}px;padding-top:{{StatusBar}}px;">
<navigator class='action' open-type="navigateBack" delta="1" hover-class="none">
<icon class='icon-back' /> 布局
</navigator>
</bar>
</custom>
<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}}">
{{tabNav[index]}}
</item>
</scroll-view>
<block wx:if="{{TabCur==0}}">
<bar class="solid-bottom margin-top">
<view class='action'>
<icon class='icon-title text-blue' />固定尺寸
</view>
</bar>
<view class="padding bg-white">
<view class="flex flex-wrap">
<view class='basis-xs bg-grey margin-xs padding-sm radius'>xs(20%)</view>
<view class='basis-df'></view>
<view class='basis-sm bg-grey margin-xs padding-sm radius'>sm(40%)</view>
<view class='basis-df'></view>
<view class='basis-df bg-grey margin-xs padding-sm radius'>sub(50%)</view>
<view class='basis-lg bg-grey margin-xs padding-sm radius'>lg(60%)</view>
<view class='basis-xl bg-grey margin-xs padding-sm radius'>xl(80%)</view>
</view>
</view>
<bar class="margin-top solid-bottom">
<view class='action'>
<icon class='icon-title text-blue' />比例布局
</view>
</bar>
<view class="padding bg-white">
<view class="flex">
<view class='flex-sub bg-grey padding-sm margin-xs radius'>1</view>
<view class='flex-sub bg-grey padding-sm margin-xs radius'>1</view>
</view>
<view class="flex p-xs margin-bottom-sm mb-sm">
<view class='flex-sub bg-grey padding-sm margin-xs radius'>1</view>
<view class='flex-twice bg-grey padding-sm margin-xs radius'>2</view>
</view>
<view class="flex p-xs margin-bottom-sm mb-sm">
<view class='flex-sub bg-grey padding-sm margin-xs radius'>1</view>
<view class='flex-twice bg-grey padding-sm margin-xs radius'>2</view>
<view class='flex-treble bg-grey padding-sm margin-xs radius'>3</view>
</view>
</view>
<bar class="margin-top solid-bottom">
<view class='action'>
<icon class='icon-title text-blue' />水平对齐(justify)
</view>
</bar>
<view class="bg-white">
<view class="flex solid-bottom padding justify-start">
<view class='bg-grey padding-sm margin-xs radius'>start</view>
<view class='bg-grey padding-sm margin-xs radius'>start</view>
</view>
<view class="flex solid-bottom padding justify-end">
<view class='bg-grey padding-sm margin-xs radius'>end</view>
<view class='bg-grey padding-sm margin-xs radius'>end</view>
</view>
<view class="flex solid-bottom padding justify-center">
<view class='bg-grey padding-sm margin-xs radius'>center</view>
<view class='bg-grey padding-sm margin-xs radius'>center</view>
</view>
<view class="flex solid-bottom padding justify-between">
<view class='bg-grey padding-sm margin-xs radius'>between</view>
<view class='bg-grey padding-sm margin-xs radius'>between</view>
</view>
<view class="flex solid-bottom padding justify-around">
<view class='bg-grey padding-sm margin-xs radius'>around</view>
<view class='bg-grey padding-sm margin-xs radius'>around</view>
</view>
</view>
<bar class="margin-top solid-bottom">
<view class='action'>
<icon class='icon-title text-blue' />垂直对齐(align)
</view>
</bar>
<view class="bg-white">
<view class="flex solid-bottom padding align-start">
<view class='bg-grey padding-lg margin-xs radius'>ColorUi</view>
<view class='bg-grey padding-sm margin-xs radius'>start</view>
</view>
<view class="flex solid-bottom padding align-end">
<view class='bg-grey padding-lg margin-xs radius'>ColorUi</view>
<view class='bg-grey padding-sm margin-xs radius'>end</view>
</view>
<view class="flex solid-bottom padding align-center">
<view class='bg-grey padding-lg margin-xs radius'>ColorUi</view>
<view class='bg-grey padding-sm margin-xs radius'>center</view>
</view>
</view>
</block>
<block wx:if="{{TabCur==1}}">
<bar class="margin-top solid-bottom">
<view class='action'>
<icon class='icon-title text-blue' />等分列
</view>
<view class='action'></view>
</bar>
<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='action'>
<icon class='icon-title text-blue' />等高
</view>
<view class='action'></view>
</bar>
<view class="bg-white padding">
<view class="grid col-4 grid-square">
<view class="bg-img" wx:for="{{4}}" wx:key style="background-image:url(https://image.weilanwl.com/img/square-{{index+1}}.jpg);"></view>
</view>
</view>
</block>
<block wx:if="{{TabCur==2}}">
<bar class="margin-top solid-bottom">
<view class='action'>
<icon class='icon-title text-blue' />浮动
</view>
</bar>
<view class="bg-white padding">
<view class=" cf padding-sm">
<view class='bg-grey radius fl padding-sm'>ColorUi fl</view>
<view class='bg-grey radius fr padding-sm'>ColorUi fr</view>
</view>
</view>
</block>
<block wx:if="{{TabCur==3}}">
<bar class="margin-top solid-bottom">
<view class='action'>
<icon class='icon-title text-blue' />内外边距
</view>
</bar>
<view class="bg-white">
<view class='padding bg-gray'>{size}的尺寸有xs/sm/df/lg/xl</view>
<view class='flex flex-wrap padding solid-top'>
<view class="basis-df padding-bottom-xs">外边距</view>
<view class="basis-df padding-bottom-xs">内边距</view>
<view class="basis-df">.margin-{size}</view>
<view class="basis-df">.padding-{size}</view>
</view>
<view class='flex flex-wrap padding solid-top'>
<view class="basis-df padding-bottom-xs">水平方向外边距</view>
<view class="basis-df padding-bottom-xs">水平方向内边距</view>
<view class="basis-df">.margin-lr-{size}</view>
<view class="basis-df">.padding-lr-{size}</view>
</view>
<view class='flex flex-wrap padding solid-top'>
<view class="basis-df padding-bottom-xs">垂直方向外边距</view>
<view class="basis-df padding-bottom-xs">垂直方向内边距</view>
<view class="basis-df">.margin-tb-{size}</view>
<view class="basis-df">.padding-tb-{size}</view>
</view>
<view class='flex flex-wrap padding solid-top'>
<view class="basis-df padding-bottom-xs">上外边距</view>
<view class="basis-df padding-bottom-xs">上内边距</view>
<view class="basis-df">.margin-top-{size}</view>
<view class="basis-df">.padding-top-{size}</view>
</view>
<view class='flex flex-wrap padding solid-top'>
<view class="basis-df padding-bottom-xs">右外边距</view>
<view class="basis-df padding-bottom-xs">右内边距</view>
<view class="basis-df">.margin-right-{size}</view>
<view class="basis-df">.padding-right-{size}</view>
</view>
<view class='flex flex-wrap padding solid-top'>
<view class="basis-df padding-bottom-xs">下外边距</view>
<view class="basis-df padding-bottom-xs">下内边距</view>
<view class="basis-df">margin-bottom-{size}</view>
<view class="basis-df">.padding-bottom-{size}</view>
</view>
<view class='flex flex-wrap padding solid-top'>
<view class="basis-df padding-bottom-xs">左外边距</view>
<view class="basis-df padding-bottom-xs">左内边距</view>
<view class="basis-df">.margin-left-{size}</view>
<view class="basis-df">.padding-left-{size}</view>
</view>
</view>
</block>

3
demo/pages/basics/layout/layout.wxss Normal file
View File

@@ -0,0 +1,3 @@
page{
padding-top: 45px;
}

12
demo/pages/basics/loading/loading.js Normal file
View File

@@ -0,0 +1,12 @@
const app = getApp();
Page({
data: {
StatusBar: app.globalData.StatusBar,
CustomBar: app.globalData.CustomBar
},
isLoading (e) {
this.setData({
isLoad: e.detail.value
})
},
});

0
pages/side/side.json → demo/pages/basics/loading/loading.json
View File

31
demo/pages/basics/loading/loading.wxml Normal file
View File

@@ -0,0 +1,31 @@
<custom style="height:{{CustomBar}}px;">
<bar class="fixed gradual-blue" style="height:{{CustomBar}}px;padding-top:{{StatusBar}}px;">
<navigator class='action' open-type="navigateBack" delta="1" hover-class="none">
<icon class='icon-back' /> 加载
</navigator>
<view class='action'>
<load class="load-icon {{!isLoad?'loading':'over'}}"></load>
</view>
</bar>
</custom>
<bar>
<view class='action'>
<icon class='icon-title text-blue'/>背景
</view>
</bar>
<load class="bg-blue {{!isLoad?'loading':'over'}}"></load>
<bar class="margin-top">
<view class='action'>
<icon class='icon-title text-blue'/>加载状态
</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 class='action'>
<icon class='icon-title text-blue'/>加载错误
</view>
</bar>
<load class="bg-red erro"></load>

1
demo/pages/basics/loading/loading.wxss Normal file
View File

@@ -0,0 +1 @@
/* pages/basics/load/load.wxss */

38
demo/pages/basics/progress/progress.js Normal file
View File

@@ -0,0 +1,38 @@
const app = getApp();
Page({
data: {
StatusBar: app.globalData.StatusBar,
CustomBar: app.globalData.CustomBar,
ColorList: app.globalData.ColorList,
color:'red',
},
onLoad() {
let that = this;
setTimeout(function() {
that.setData({
loading: true
})
}, 500)
},
showModal(e) {
this.setData({
modalName: e.currentTarget.dataset.target
})
},
hideModal(e) {
this.setData({
modalName: null
})
},
SetColor(e) {
this.setData({
color: e.currentTarget.dataset.color,
modalName: null
})
},
SetActive(e) {
this.setData({
active: e.detail.value
})
},
});

0
pages/slider/slider.json → demo/pages/basics/progress/progress.json
View File

116
demo/pages/basics/progress/progress.wxml Normal file
View File

@@ -0,0 +1,116 @@
<custom style="height:{{CustomBar}}px;">
<bar class="fixed gradual-blue" style="height:{{CustomBar}}px;padding-top:{{StatusBar}}px;">
<navigator class='action' open-type="navigateBack" delta="1" hover-class="none">
<icon class='icon-back' /> 进度条
</navigator>
</bar>
</custom>
<bar class="solid-bottom">
<view class='action'>
<icon class='icon-title text-blue' />进度条形状
</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='action'>
<icon class='icon-title text-blue' />进度条尺寸
</view>
</bar>
<view class="padding bg-white">
<progress-bar class="round">
<view class='bg-red' style="width:{{loading?'61.8%':''}};"></view>
</progress-bar>
<progress-bar class="round margin-top sm">
<view class='bg-red' style="width:{{loading?'61.8%':''}};"></view>
</progress-bar>
<progress-bar class="round margin-top xs">
<view class='bg-red' style="width:{{loading?'61.8%':''}};"></view>
</progress-bar>
</view>
<bar class="solid-bottom margin-top" bindtap="showModal" data-target="ColorModal">
<view class='action'>
<icon class='icon-title text-blue' />进度条颜色
</view>
<view class='action'>
<view class='padding-sm bg-{{color}} solid radius shadow-blur'></view>
</view>
</bar>
<view class="padding {{color=='white'?'bg-grey':'bg-white'}}">
<progress-bar class="round">
<view class='bg-{{color}}' style="width:{{loading?'61.8%':''}};"></view>
</progress-bar>
</view>
<bar class="solid-bottom margin-top">
<view class='action'>
<icon class='icon-title text-blue' />进度条条纹
</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='action'>
<icon class='icon-title text-blue' />进度条比例
</view>
</bar>
<view class="padding bg-white">
<progress-bar class="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>
<bar class="solid-bottom margin-top">
<view class='action'>
<icon class='icon-title text-blue' />进度条布局
</view>
</bar>
<view class="padding bg-white ">
<view class='flex'>
<progress-bar class="round">
<view class='bg-green' style="width:{{loading?'100%':''}};"></view>
</progress-bar>
<icon class='icon-roundcheckfill text-green margin-left-sm' />
</view>
<view class='flex margin-top'>
<progress-bar class="round">
<view class='bg-green' style="width:{{loading?'80%':''}};"></view>
</progress-bar>
<text class='margin-left'>80%</text>
</view>
</view>
<modal-box class="{{modalName=='ColorModal'?'show':''}}">
<dialog>
<bar class="justify-end">
<view class='content'>选择颜色</view>
<view class='action' bindtap='hideModal'>
<icon class='icon-close text-red'></icon>
</view>
</bar>
<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>

0
demo/pages/basics/progress/progress.wxss Normal file
View File

12
demo/pages/basics/shadow/shadow.js Normal file
View File

@@ -0,0 +1,12 @@
const app = getApp();
Page({
data: {
StatusBar: app.globalData.StatusBar,
CustomBar: app.globalData.CustomBar
},
SetSize(e) {
this.setData({
size: e.detail.value
})
},
});

0
pages/sub/sub.json → demo/pages/basics/shadow/shadow.json
View File

34
demo/pages/basics/shadow/shadow.wxml Normal file
View File

@@ -0,0 +1,34 @@
<custom style="height:{{CustomBar}}px;">
<bar class="fixed gradual-blue" style="height:{{CustomBar}}px;padding-top:{{StatusBar}}px;">
<navigator class='action' open-type="navigateBack" delta="1" hover-class="none">
<icon class='icon-back' /> 边框阴影
</navigator>
</bar>
</custom>
<bar class="solid-bottom">
<view class='action'>
<icon class='icon-title text-blue' />边框
</view>
<view class='action'>
<switch class='sm' bindchange='SetSize'></switch>
</view>
</bar>
<view class='padding bg-white text-center'>
<view class='padding solid{{size?"s":""}}'>四周</view>
<view class='padding solid{{size?"s":""}}-top margin-top'>上</view>
<view class='padding solid{{size?"s":""}}-right margin-top'>右</view>
<view class='padding solid{{size?"s":""}}-bottom margin-top'>下</view>
<view class='padding solid{{size?"s":""}}-left margin-top'>左</view>
</view>
<bar class="margin-top">
<view class='action'>
<icon class='icon-title text-blue' />阴影
</view>
</bar>
<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>
<view class="padding-xl radius shadow-warp bg-white margin-top">翘边阴影</view>
<view class="padding-xl radius shadow-blur bg-red margin-top">根据背景颜色而改变的阴影</view>
<view class="padding-xl radius shadow-blur bg-red margin-top bg-img" style="background-image:url(https://image.weilanwl.com/img/square-3.jpg);"><view>根据背景颜色而改变的阴影</view></view>
</view>

0
demo/pages/basics/shadow/shadow.wxss Normal file
View File

11
demo/pages/basics/tag/tag.js Normal file
View File

@@ -0,0 +1,11 @@
const app = getApp();
Page({
data: {
StatusBar: app.globalData.StatusBar,
CustomBar: app.globalData.CustomBar,
ColorList: app.globalData.ColorList,
},
onLoad: function() {
}
});

0
pages/timeline/timeline.json → demo/pages/basics/tag/tag.json
View File

119
demo/pages/basics/tag/tag.wxml Normal file
View File

@@ -0,0 +1,119 @@
<custom style="height:{{CustomBar}}px;">
<bar class="fixed gradual-blue" style="height:{{CustomBar}}px;padding-top:{{StatusBar}}px;">
<navigator class='action' open-type="navigateBack" delta="1" hover-class="none">
<icon class='icon-back' /> 标签
</navigator>
</bar>
</custom>
<bar>
<view class='action'>
<icon class='icon-title text-blue' />标签形状
</view>
</bar>
<view class="padding">
<tag>默认</tag>
<tag class='round'>椭圆</tag>
<tag class='radius'>圆角</tag>
</view>
<bar class="margin-top">
<view class='action'>
<icon class='icon-title text-blue' />标签尺寸
</view>
</bar>
<view class="padding">
<tag class='radius sm'>小尺寸</tag>
<tag class='radius'>普通尺寸</tag>
</view>
<bar class="margin-top">
<view class='action'>
<icon class='icon-title text-blue' />标签颜色
</view>
</bar>
<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>
<view class="padding-xs" wx:for="{{ColorList}}" wx:key wx:if="{{index<12}}">
<tag class='bg-{{item.name}} light'>{{item.title}}</tag>
</view>
</view>
<bar class="margin-top">
<view class='action'>
<icon class='icon-title text-blue' />镂空标签
</view>
</bar>
<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>
</view>
<bar class="margin-top">
<view class='action'>
<icon class='icon-title text-blue' />胶囊样式
</view>
</bar>
<view class="padding">
<capsule>
<tag class='bg-red'>
<icon class='icon-likefill' />
</tag>
<tag class="line-red">
12
</tag>
</capsule>
<capsule class="round">
<tag class='bg-blue '>
<icon class='icon-likefill' />
</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 '>
<icon class='icon-likefill' />
</tag>
<tag class="line-grey">
23
</tag>
</capsule>
<capsule class="radius">
<tag class='bg-brown sm'>
<icon class='icon-likefill' />
</tag>
<tag class="line-brown sm">
23
</tag>
</capsule>
</view>
<bar class="margin-top">
<view class='action'>
<icon class='icon-title text-blue' />数字标签
</view>
</bar>
<view class="padding flex justify-between align-center">
<avatar class='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>
<icon class='icon-people' />
</avatar>
<avatar class='xl radius'>
<tag class='badge'>99+</tag>
</avatar>
</view>

0
demo/pages/basics/tag/tag.wxss Normal file
View File

85
demo/pages/basics/text/text.js Normal file
View File

@@ -0,0 +1,85 @@
const app = getApp();
Page({
data: {
StatusBar: app.globalData.StatusBar,
CustomBar: app.globalData.CustomBar,
list: [{
title: '嫣红',
name: 'red',
color: '#e54d42'
},
{
title: '桔橙',
name: 'orange',
color: '#f37b1d'
},
{
title: '明黄',
name: 'yellow',
color: '#fbbd08'
},
{
title: '橄榄',
name: 'olive',
color: '#8dc63f'
},
{
title: '森绿',
name: 'green',
color: '#39b54a'
},
{
title: '天青',
name: 'cyan',
color: '#1cbbb4'
},
{
title: '海蓝',
name: 'blue',
color: '#0081ff'
},
{
title: '姹紫',
name: 'purple',
color: '#6739b6'
},
{
title: '木槿',
name: 'mauve',
color: '#9c26b0'
},
{
title: '桃粉',
name: 'pink',
color: '#e03997'
},
{
title: '棕褐',
name: 'brown',
color: '#a5673f'
},
{
title: '玄灰',
name: 'grey',
color: '#8799a3'
},
{
title: '草灰',
name: 'gray',
color: '#aaaaaa'
},
{
title: '墨黑',
name: 'black',
color: '#333333'
},
{
title: '雅白',
name: 'white',
color: '#ffffff'
},
]
},
onLoad: function () { },
})

1
demo/pages/basics/text/text.json Normal file
View File

@@ -0,0 +1 @@
{}

148
demo/pages/basics/text/text.wxml Normal file
View File

@@ -0,0 +1,148 @@
<custom style="height:{{CustomBar}}px;">
<bar class="fixed gradual-blue" style="height:{{CustomBar}}px;padding-top:{{StatusBar}}px;">
<navigator class='action' open-type="navigateBack" delta="1" hover-class="none">
<icon class='icon-back'/> 文本
</navigator>
<view class='action'>
</view>
</bar>
</custom>
<bar class="solid-bottom">
<view class='action'>
<icon class='icon-title text-blue'/>文字大小
</view>
</bar>
<view class='bg-white padding-lr'>
<view class='solids-bottom padding-xs flex align-center'>
<view class='padding'>60</view>
<view class='flex-sub text-center'>
<view class='solid-bottom text-xsl padding'>
<icon class=' icon-roundcheckfill text-green'/>
</view>
<view class='padding'>用于图标、数字等特大显示</view>
</view>
</view>
<view class='solids-bottom padding-xs flex align-center'>
<view class='padding'>40</view>
<view class='flex-sub text-center'>
<view class='solid-bottom text-sl padding'>
<icon class=' icon-roundcheckfill text-green'/>
</view>
<view class='padding'>用于图标、数字等较大显示</view>
</view>
</view>
<view class='solids-bottom padding-xs flex align-center'>
<view class='padding'>22</view>
<view class='flex-sub text-center'>
<view class='solid-bottom text-xxl padding'>
<text class='text-price text-red'>80.00</text>
</view>
<view class='padding'>用于金额数字等信息</view>
</view>
</view>
<view class='solids-bottom padding-xs flex align-center'>
<view class='padding'>18</view>
<view class='flex-sub text-center'>
<view class='solid-bottom text-xl padding'>
<text class='text-black text-bold'>您的订单已提交成功！</text>
</view>
<view class='padding'>页面大标题，用于结果页等单一信息页</view>
</view>
</view>
<view class='solids-bottom padding-xs flex align-center'>
<view class='padding'>16</view>
<view class='flex-sub text-center'>
<view class='solid-bottom text-lg padding'>
<text class='text-black'>ColorUI组件库</text>
</view>
<view class='padding'>页面小标题，首要层级显示内容</view>
</view>
</view>
<view class='solids-bottom padding-xs flex align-center'>
<view class='padding'>14</view>
<view class='flex-sub text-center'>
<view class='solid-bottom text-df padding'>专注视觉的小程序组件库</view>
<view class='padding'>页面默认字号，用于摘要或阅读文本</view>
</view>
</view>
<view class='solids-bottom padding-xs flex align-center'>
<view class='padding'>12</view>
<view class='flex-sub text-center'>
<view class='solid-bottom text-sm padding'>
<text class='text-grey'>衬衫的价格是9磅15便士</text>
</view>
<view class='padding'>页面辅助信息，次级内容等</view>
</view>
</view>
<view class='padding-xs flex align-center'>
<view class='padding'>10</view>
<view class='flex-sub text-center'>
<view class='solid-bottom text-xs padding'>
<text class='text-gray'>我于杀戮之中绽放 亦如黎明中的花朵</text>
</view>
<view class='padding'>说明文本，标签文字等关注度低的文字</view>
</view>
</view>
</view>
<bar class="solid-bottom margin-top">
<view class='action'>
<icon class='icon-title text-blue'/>文字颜色
</view>
</bar>
<view class='grid col-5 padding-sm'>
<view class='padding-sm' wx:for="{{list}}" wx:key>
<view class='text-{{item.name}} text-center'>
{{item.title}}
</view>
</view>
</view>
<bar class="solid-bottom margin-top">
<view class='action'>
<icon class='icon-title text-blue'/>文字截断
</view>
</bar>
<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='action'>
<icon class='icon-title text-blue'/>文字对齐
</view>
</bar>
<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='action'>
<icon class='icon-title text-blue'/>特殊文字
</view>
</bar>
<view class='padding text-center'>
<view class='padding-lr bg-white'>
<view class='solid-bottom padding'>
<text class='text-price'>80.00</text>
</view>
<view class='padding'>价格文本，利用伪元素添加"¥"符号</view>
</view>
<view class='padding-lr bg-white margin-top'>
<view class='solid-bottom padding'>
<text class='text-Abc'>color Ui</text>
</view>
<view class='padding'>英文单词首字母大写</view>
</view>
<view class='padding-lr bg-white margin-top'>
<view class='solid-bottom padding'>
<text class='text-ABC'>color Ui</text>
</view>
<view class='padding'>全部字母大写</view>
</view>
<view class='padding-lr bg-white margin-top'>
<view class='solid-bottom padding'>
<text class='text-abc'>color Ui</text>
</view>
<view class='padding'>全部字母小写</view>
</view>
</view>

1
demo/pages/basics/text/text.wxss Normal file
View File

@@ -0,0 +1 @@
/* pages/basics/text/text.wxss */

8
demo/pages/component/bar/bar.js Normal file
View File

@@ -0,0 +1,8 @@
const app = getApp();
Page({
data: {
StatusBar: app.globalData.StatusBar,
CustomBar: app.globalData.CustomBar,
},
})

1
demo/pages/component/bar/bar.json Normal file
View File

@@ -0,0 +1 @@
{}

245
demo/pages/component/bar/bar.wxml Normal file
View File

@@ -0,0 +1,245 @@
<custom style="height:{{CustomBar}}px;">
<bar class="fixed gradual-pink" style="height:{{CustomBar}}px;padding-top:{{StatusBar}}px;">
<navigator class='action' open-type="navigateBack" delta="1" hover-class="none">
<icon class='icon-back' />
<text>操作条</text>
</navigator>
</bar>
</custom>
<bar class="margin-top">
<view class='action'>
<icon class='icon-back text-gray' />
<text>返回</text>
</view>
</bar>
<bar class="margin-top">
<view class='action'>
<icon class='icon-title text-green ' />
<text>案例</text>
</view>
<view class='action'>
<button class='bg-green shadow-blur sm'>添加
<icon class='icon-add' /> </button>
</view>
</bar>
<bar class="margin-top justify-end">
<view class='action'>
<icon class='icon-close text-red'></icon>
</view>
</bar>
<bar class="margin-top">
<view class='action'>
<icon class='icon-back text-gray' /> 返回
</view>
<view class='content'>
操作条
</view>
</bar>
<bar class="margin-top">
<view class='action'>
<icon class='icon-homefill text-gray' /> 首页
</view>
<view class='content'>
鲜亮的高饱和色彩，专注视觉的小程序组件库
</view>
<view class='action'>
<icon class='icon-cardboardfill text-grey' />
<icon class='icon-recordfill text-red' />
</view>
</bar>
<bar class="margin-top bg-blue">
<view class='action'>
<icon class='icon-close' /> 关闭
</view>
<view class='content'>
海蓝
</view>
</bar>
<bar class="margin-top bg-orange">
<view class='action'>
<icon class='icon-back' /> 返回
</view>
<view class='content'>
操作条
</view>
</bar>
<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='content'>
ColorUI
</view>
<view class='action'>
<icon class="icon-more" />
</view>
</bar>
<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='serach-form radius'>
<icon class="icon-search" />
<input type="text" placeholder="搜索图片、文章、视频" confirm-type="search" />
</view>
<view class='action'>
<text>广州</text>
<icon class="icon-triangledownfill" />
</view>
</bar>
<bar class="margin-top search">
<avatar class="round" style="background-image:url(https://image.weilanwl.com/img/square-2.jpg);"></avatar>
<view class='serach-form round'>
<icon class="icon-search" />
<input type="text" placeholder="搜索图片、文章、视频" confirm-type="search" />
</view>
<view class='action'>
<text>广州</text>
<icon class="icon-triangledownfill" />
</view>
</bar>
<bar class="margin-top bg-cyan search">
<view class='serach-form radius'>
<icon class="icon-search" />
<input type="text" placeholder="搜索图片、文章、视频" confirm-type="search" />
</view>
<view class='action'>
<icon class='icon-close' />
<text>取消</text>
</view>
</bar>
<bar class="margin-top search">
<view class='serach-form round'>
<icon class="icon-search" />
<input type="text" placeholder="搜索图片、文章、视频" confirm-type="search" />
</view>
<view class='action'>
<button class='bg-green shadow-blur round'>搜索</button>
</view>
</bar>
<bar class="margin-top btn-group">
<button class='bg-green shadow-blur round'>保存</button>
</bar>
<bar class="margin-top btn-group">
<button class='bg-green shadow-blur round lg'>保存</button>
</bar>
<bar class="margin-top btn-group">
<button class='bg-green shadow-blur'>保存</button>
<button class='text-green line-green shadow'>上传</button>
</bar>
<bar class="margin-top btn-group">
<button class='bg-green shadow-blur round'>保存</button>
<button class='bg-blue shadow-blur round'>提交</button>
</bar>
<bar class="margin-top shop">
<view class="action">
<icon class='icon-service text-green'>
<tag class='badge'></tag>
</icon>
客服
</view>
<view class="action text-orange">
<icon class='icon-favorfill' /> 已收藏
</view>
<view class="action">
<icon class='icon-cart'>
<tag class='badge'>99</tag>
</icon>
购物车
</view>
<view class='bg-red submit'>立即订购</view>
</bar>
<bar class="margin-top shop">
<view class="action">
<icon class='icon-service text-green'>
<tag class='badge'></tag>
</icon>
客服
</view>
<view class="action">
<icon class='icon-cart'>
<tag class='badge'>99</tag>
</icon>
购物车
</view>
<view class='bg-orange submit'>加入购物车</view>
<view class='bg-red submit'>立即订购</view>
</bar>
<bar class="margin-top shop">
<view class="action">
<icon class='icon-service text-green'>
<tag class='badge'></tag>
</icon>
客服
</view>
<view class="action">
<icon class=' icon-shop' /> 店铺
</view>
<view class="action">
<icon class='icon-cart'>
<tag class='badge'>99</tag>
</icon>
购物车
</view>
<view class='submit'>
<button class='bg-red round shadow-blur'>立即订购</button>
</view>
</bar>
<bar class="margin-top shop">
<view class="action">
<icon class='icon-service text-green'>
<tag class='badge'></tag>
</icon>
客服
</view>
<view class="action">
<icon class='icon-cart'>
<tag class='badge'>99</tag>
</icon>
购物车
</view>
<view class='submit'>
<button class='bg-orange round shadow-blur'>加入购物车</button>
</view>
<view class='submit'>
<button class='bg-red round shadow-blur'>立即订购</button>
</view>
</bar>
<bar class="margin-top input">
<view class='action'>
<icon class='icon-sound text-grey' />
</view>
<input class='solid-bottom' focus="{{false}}" maxlength="300" cursor-spacing="10"></input>
<view class='action'>
<icon class='icon-emojifill text-grey' />
</view>
<button class='bg-green shadow-blur'>发送</button>
</bar>
<bar class="margin-top input">
<avatar class="round" style="background-image:url(https://image.weilanwl.com/img/square-3.jpg);"></avatar>
<view class='action'>
<icon class='icon-roundaddfill text-grey' />
</view>
<input class='solid-bottom' maxlength="300" cursor-spacing="10"></input>
<view class='action'>
<icon class='icon-emojifill text-grey' />
</view>
<button class='bg-green shadow-blur'>发送</button>
</bar>

0
demo/pages/component/bar/bar.wxss Normal file
View File

12
demo/pages/component/card/card.js Normal file
View File

@@ -0,0 +1,12 @@
const app = getApp();
Page({
data: {
StatusBar: app.globalData.StatusBar,
CustomBar: app.globalData.CustomBar
},
isCard(e) {
this.setData({
isCard: e.detail.value
})
},
});

1
demo/pages/component/card/card.json Normal file
View File

@@ -0,0 +1 @@
{}

123
demo/pages/component/card/card.wxml Normal file
View File

@@ -0,0 +1,123 @@
<custom style="height:{{CustomBar}}px;">
<bar class="fixed gradual-pink" style="height:{{CustomBar}}px;padding-top:{{StatusBar}}px;">
<navigator class='action' open-type="navigateBack" delta="1" hover-class="none">
<icon class='icon-back' /> 卡片
</navigator>
</bar>
</custom>
<bar class="solid-bottom">
<view class='action'>
<icon class='icon-titles text-orange ' /> 案例类卡片
</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 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>
<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='content flex-sub'>
<view class='text-grey'>猪皮蛋</view>
<view class='text-gray text-sm flex justify-between'>
十天前
<view class="text-gray text-sm">
<icon class="icon-attentionfill" /> 10
<icon class="icon-appreciatefill" /> 20
<icon class="icon-messagefill" /> 30
</view>
</view>
</view>
</item>
</list>
</item>
</card>
<bar class="solid-bottom {{isCard?'margin-top':''}}">
<view class='action'>
<icon class='icon-titles text-orange ' /> 动态类卡片
</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 class='content flex-sub'>
<view>晓晓萌</view>
<view class='text-gray text-sm flex justify-between'>
2018年12月3日
</view>
</view>
</item>
</list>
<view class='text-content'>
你们的铲屎官是不是经常突然对手机傻笑？我家铲屎官常常坐沙发上笑的发抖！（暗中观察.jpg）
</view>
<view class="grid {{isCard?'col-3 grid-square':'col-1'}} flex-sub padding-lr">
<view class="bg-img {{isCard?'':'only-img'}}" style="background-image:url(https://image.weilanwl.com/img/square-1.jpg);" wx:for="{{isCard?9:1}}" wx:key>
</view>
</view>
<view class='text-gray text-sm text-right padding'>
<icon class="icon-attentionfill" /> 10
<icon class="icon-appreciatefill" /> 20
<icon class="icon-messagefill" /> 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='content'>
<view class='text-grey'>猪皮蛋</view>
<view class='text-gray text-content text-df'>
我家铲屎官不舔毛，还抠脚！
</view>
<view class='bg-grey padding-sm radius margin-top-sm text-sm' wx:if="{{index==1}}">
<view class="flex {{index!=0?'margin-top-sm':'' }}" wx:for="{{2}}" wx:key>
<view>我：</view>
<view class='flex-sub'>我家的铲屎官也不舔毛！</view>
</view>
</view>
<view class='margin-top-sm flex justify-between'>
<view class='text-gray text-df'>2018年12月4日</view>
<view>
<icon class="icon-appreciate{{!isZan?'fill':''}} text-{{!isZan?'red':'gray'}}" />
<icon class="icon-messagefill text-gray margin-left-sm" />
</view>
</view>
</view>
</item>
</list>
</item>
</card>
<bar class="solid-bottom margin-top">
<view class='action'>
<icon class='icon-titles text-orange ' /> 文章类卡片
</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 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>
</view>
</view>
</item>
</card>

0
demo/pages/component/card/card.wxss Normal file
View File

9
demo/pages/component/chat/chat.js Normal file
View File

@@ -0,0 +1,9 @@
const app = getApp();
Page({
data: {
StatusBar: app.globalData.StatusBar,
CustomBar: app.globalData.CustomBar
},
onLoad: function () { },
});

1
demo/pages/component/chat/chat.json Normal file
View File

@@ -0,0 +1 @@
{}

91
demo/pages/component/chat/chat.wxml Normal file
View File

@@ -0,0 +1,91 @@
<custom style="height:{{CustomBar}}px;">
<bar class="fixed gradual-pink" style="height:{{CustomBar}}px;padding-top:{{StatusBar}}px;">
<navigator class='action' open-type="navigateBack" delta="1" hover-class="none">
<icon class='icon-back'/>
聊天
</navigator>
</bar>
</custom>
<chat>
<item class="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='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 class="main">
<view class='content shadow'>
<text>喵喵喵！喵喵喵！</text>
</view>
</view>
<view class='date '> 13:23</view>
</item>
<info>
<icon class='icon-roundclosefill text-red '/> 对方拒绝了你的消息
</info>
<info>
对方开启了好友验证，你还不是他(她)的好友。请先发送好友验证请求，对方验证通过后，才能聊天。
<text class='text-blue'>发送好友验证</text>
</info>
<item class="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='date'> 13:23</view>
</item>
<item class="self">
<view class="main">
<view class='action text-bold text-grey'>
3"
</view>
<view class='content shadow'>
<icon class='icon-sound text-xxl padding-right-xl'> </icon>
</view>
</view>
<avatar class="radius" style="background-image:url(https://image.weilanwl.com/img/square-3.jpg);"></avatar>
<view class='date'>13:23</view>
</item>
<item class="self">
<view class="main">
<view class='action'>
<icon class='icon-locationfill text-orange text-xxl'/>
</view>
<view class='content shadow'>
喵星球，喵喵市
</view>
</view>
<avatar class="radius" style="background-image:url(https://image.weilanwl.com/img/square-3.jpg);"></avatar>
<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 class="main">
<view class='content shadow'>
@#$^&**
</view>
<view class='action text-grey'>
<icon class='icon-warnfill text-red text-xxl'/> <text class='text-sm margin-left-sm'>翻译错误</text>
</view>
</view>
<view class='date'>13:23</view>
</item>
</chat>
<bar class="foot input">
<view class='action'>
<icon class='icon-sound text-grey'/>
</view>
<input class='solid-bottom' focus="{{false}}" maxlength="300" cursor-spacing="10"></input>
<view class='action'>
<icon class='icon-emojifill text-grey'/>
</view>
<button class='bg-green shadow-blur'>发送</button>
</bar>

3
demo/pages/component/chat/chat.wxss Normal file
View File

@@ -0,0 +1,3 @@
page{
padding-bottom: 60px;
}

147
demo/pages/component/form/form.js Normal file
View File

@@ -0,0 +1,147 @@
const app = getApp();
Page({
data: {
StatusBar: app.globalData.StatusBar,
CustomBar: app.globalData.CustomBar,
index: null,
picker: ['喵喵喵', '汪汪汪', '哼唧哼唧'],
multiArray: [
['无脊柱动物', '脊柱动物'],
['扁性动物', '线形动物', '环节动物', '软体动物', '节肢动物'],
['猪肉绦虫', '吸血虫']
],
objectMultiArray: [
[
{
id: 0,
name: '无脊柱动物'
},
{
id: 1,
name: '脊柱动物'
}
], [
{
id: 0,
name: '扁性动物'
},
{
id: 1,
name: '线形动物'
},
{
id: 2,
name: '环节动物'
},
{
id: 3,
name: '软体动物'
},
{
id: 3,
name: '节肢动物'
}
], [
{
id: 0,
name: '猪肉绦虫'
},
{
id: 1,
name: '吸血虫'
}
]
],
multiIndex: [0, 0, 0],
time: '12:01',
date: '2018-12-25',
region: ['广东省', '广州市', '海珠区'],
},
PickerChange(e) {
console.log(e);
this.setData({
index: e.detail.value
})
},
MultiChange (e) {
this.setData({
multiIndex: e.detail.value
})
},
MultiColumnChange(e) {
let data = {
multiArray: this.data.multiArray,
multiIndex: this.data.multiIndex
};
data.multiIndex[e.detail.column] = e.detail.value;
switch (e.detail.column) {
case 0:
switch (data.multiIndex[0]) {
case 0:
data.multiArray[1] = ['扁性动物', '线形动物', '环节动物', '软体动物', '节肢动物'];
data.multiArray[2] = ['猪肉绦虫', '吸血虫'];
break;
case 1:
data.multiArray[1] = ['鱼', '两栖动物', '爬行动物'];
data.multiArray[2] = ['鲫鱼', '带鱼'];
break;
}
data.multiIndex[1] = 0;
data.multiIndex[2] = 0;
break;
case 1:
switch (data.multiIndex[0]) {
case 0:
switch (data.multiIndex[1]) {
case 0:
data.multiArray[2] = ['猪肉绦虫', '吸血虫'];
break;
case 1:
data.multiArray[2] = ['蛔虫'];
break;
case 2:
data.multiArray[2] = ['蚂蚁', '蚂蟥'];
break;
case 3:
data.multiArray[2] = ['河蚌', '蜗牛', '蛞蝓'];
break;
case 4:
data.multiArray[2] = ['昆虫', '甲壳动物', '蛛形动物', '多足动物'];
break;
}
break;
case 1:
switch (data.multiIndex[1]) {
case 0:
data.multiArray[2] = ['鲫鱼', '带鱼'];
break;
case 1:
data.multiArray[2] = ['青蛙', '娃娃鱼'];
break;
case 2:
data.multiArray[2] = ['蜥蜴', '龟', '壁虎'];
break;
}
break;
}
data.multiIndex[2] = 0;
break;
}
this.setData(data);
},
TimeChange(e) {
this.setData({
time: e.detail.value
})
},
DateChange (e) {
this.setData({
date: e.detail.value
})
},
RegionChange: function (e) {
this.setData({
region: e.detail.value
})
},
})

1
demo/pages/component/form/form.json Normal file
View File

@@ -0,0 +1 @@
{}

175
demo/pages/component/form/form.wxml Normal file
View File

@@ -0,0 +1,175 @@
<custom style="height:{{CustomBar}}px;">
<bar class="fixed gradual-pink" style="height:{{CustomBar}}px;padding-top:{{StatusBar}}px;">
<navigator class='action' open-type="navigateBack" delta="1" hover-class="none">
<icon class='icon-back' /> 表单
</navigator>
</bar>
</custom>
<form>
<form-group class="margin-top">
<view class='title'>邮件</view>
<input placeholder="两字短标题" class='radius' name='input'></input>
</form-group>
<form-group>
<view class='title'>输入框</view>
<input placeholder="三字标题" class='radius' name='input'></input>
</form-group>
<form-group>
<view class='title'>收货地址</view>
<input placeholder="统一标题的宽度" class='radius' name='input'></input>
</form-group>
<form-group>
<view class='title'>收货地址</view>
<input placeholder="输入框带个图标" class='radius' name='input'></input>
<icon class='icon-locationfill text-orange' />
</form-group>
<form-group>
<view class='title'>验证码</view>
<input placeholder="输入框带个按钮" class='radius' name='input'></input>
<button class='bg-green shadow'>验证码</button>
</form-group>
<form-group>
<view class='title'>手机号码</view>
<input placeholder="输入框带标签" class='radius' name='input'></input>
<capsule class="radius">
<tag class='bg-blue '>
+86
</tag>
<tag class="line-blue">
中国大陆
</tag>
</capsule>
</form-group>
<form-group class="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 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 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 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 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>
<form-group class="margin-top">
<view class='title'>开关选择</view>
<switch class='sm'></switch>
</form-group>
<form-group>
<view class='title'>大号开关</view>
<switch class=''></switch>
</form-group>
<form-group>
<view class='title'>定义颜色</view>
<switch class='red sm' checked/>
</form-group>
<form-group>
<view class='title'>定义图标</view>
<switch class='switch-sex sm' checked/>
</form-group>
<form-group>
<view class='title'>方形开关</view>
<switch class='orange radius sm' checked/>
</form-group>
<radio-group class="block">
<form-group class="margin-top">
<view class='title'>单选操作(radio)</view>
<radio checked />
</form-group>
<form-group>
<view class='title'>定义尺寸</view>
<radio class='sm' />
</form-group>
<form-group>
<view class='title'>定义样式</view>
<radio class='radio' />
</form-group>
<form-group>
<view class='title'>定义颜色</view>
<view>
<radio class='blue radio' />
<radio class='red margin-left-sm' />
</view>
</form-group>
</radio-group>
<form-group class="margin-top">
<view class='title'>复选选操作(checkbox)</view>
<checkbox></checkbox>
</form-group>
<form-group>
<view class='title'>定义尺寸</view>
<checkbox class='sm' checked></checkbox>
</form-group>
<form-group>
<view class='title'>定义形状</view>
<checkbox class='round' checked></checkbox>
</form-group>
<form-group>
<view class='title'>定义颜色</view>
<checkbox class='round blue' checked></checkbox>
</form-group>
<form-group class="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">
<icon class='icon-close'></icon>
</tag>
</view>
<view class="padding-xs solids">
<icon class='icon-cameraadd'></icon>
</view>
</view>
</form-group>
<form-group class="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 class='title'>点文本框</view>
<textarea placeholder="多行文本输入框" maxlength="-1" disabled="{{modalName!=null}}" placeholder-class='placeholder'></textarea>
</form-group>
<!--
<form-group class="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> -->
</form>

3
demo/pages/component/form/form.wxss Normal file
View File

@@ -0,0 +1,3 @@
form-group .title {
min-width: calc(4em + 15px);
}

17
demo/pages/component/home/home.js Normal file
View File

@@ -0,0 +1,17 @@
Page({
data: {
elements: [
{ title: '操作条', name: 'bar', color: 'purple', icon: 'vipcard' },
{ title: '导航栏 ', name: 'nav', color: 'mauve', icon: 'formfill' },
{ title: '列表', name: 'list', color: 'pink', icon: 'list' },
{ title: '卡片', name: 'card', color: 'brown', icon: 'newsfill' },
{ title: '表单', name: 'form', color: 'red', icon: 'formfill' },
{ title: '时间轴', name: 'timeline', color: 'orange', icon: 'timefill' },
{ title: '聊天', name: 'chat', color: 'green', icon: 'messagefill' },
{ title: '轮播', name: 'swiper', color: 'olive', icon: 'album'},
{ title: '模态框', name: 'modal', color: 'grey', icon: 'squarecheckfill' },
],
},
onLoad: function () {
},
})

1
demo/pages/component/home/home.json Normal file
View File

@@ -0,0 +1 @@
{}

8
demo/pages/component/home/home.wxml Normal file
View File

@@ -0,0 +1,8 @@
<image src='/images/componentBg.png' mode='widthFix' class='response'></image>
<view class='nav-list'>
<navigator hover-class='none' url="../{{item.name}}/{{item.name}}" class="nav-li bg-{{item.color}}" style='animation: show {{(index+1)*0.2+1}}s 1;-webkit-animation: show {{(index+1)*0.2+1}}s 1;' wx:for="{{elements}}" wx:key>
<view class="nav-title">{{item.title}}</view>
<view class="nav-name">{{item.name}}</view>
<icon class='icon-{{item.icon}}'/>
</navigator>
</view>

0
demo/pages/component/home/home.wxss Normal file
View File

13
demo/pages/component/list/list.js Normal file
View File

@@ -0,0 +1,13 @@
const app = getApp();
Page({
data: {
StatusBar: app.globalData.StatusBar,
CustomBar: app.globalData.CustomBar,
skin: false
},
switchSex: function(e) {
this.setData({
skin: e.detail.value
});
},
})

1
demo/pages/component/list/list.json Normal file
View File

@@ -0,0 +1 @@
{}

432
demo/pages/component/list/list.wxml Normal file
View File

@@ -0,0 +1,432 @@
<custom style="height:{{CustomBar}}px;">
<bar class="fixed gradual-pink" style="height:{{CustomBar}}px;padding-top:{{StatusBar}}px;">
<navigator class='action' open-type="navigateBack" delta="1" hover-class="none">
<icon class='icon-back'/> 列表
</navigator>
</bar>
</custom>
<view class="page {{skin?' invert ':' '}}">
<list class="grid col-3">
<item>
<icon class='icon-cardboardfill text-red'/>
<text>VR</text>
</item>
<item>
<icon class='icon-recordfill text-orange'/>
<text>录像</text>
</item>
<item>
<icon class='icon-picfill text-yellow'/>
<text>图像</text>
</item>
<item>
<icon class='icon-noticefill text-olive'>
<tag class="badge">99+</tag>
</icon>
<text>通知</text>
</item>
<item>
<icon class='icon-upstagefill text-cyan'/>
<text>排行榜</text>
</item>
<item>
<icon class='icon-clothesfill text-blue'>
<tag class="badge"></tag>
</icon>
<text>皮肤</text>
</item>
<item>
<icon class='icon-discoverfill text-purple'/>
<text>发现</text>
</item>
<item>
<icon class='icon-questionfill text-mauve'/>
<text>帮助</text>
</item>
<item>
<icon class='icon-servicefill text-pink'/>
<text>反馈</text>
</item>
</list>
<list class="grid col-4">
<item>
<icon class='icon-cardboardfill text-red'/>
<text>VR</text>
</item>
<item>
<icon class='icon-recordfill text-orange'/>
<text>录像</text>
</item>
<item>
<icon class='icon-picfill text-yellow'/>
<text>图像</text>
</item>
<item>
<icon class='icon-noticefill text-olive'>
<tag class="badge">99+</tag>
</icon>
<text>通知</text>
</item>
<item>
<icon class='icon-upstagefill text-cyan'/>
<text>排行榜</text>
</item>
<item>
<icon class='icon-clothesfill text-blue'>
<tag class="badge"></tag>
</icon>
<text>皮肤</text>
</item>
<item>
<icon class='icon-discoverfill text-purple'/>
<text>发现</text>
</item>
<item>
<icon class='icon-questionfill text-mauve'/>
<text>帮助</text>
</item>
</list>
<list class="grid no-border col-4">
<item>
<icon class='icon-cardboardfill text-red'/>
<text>VR</text>
</item>
<item>
<icon class='icon-recordfill text-orange'/>
<text>录像</text>
</item>
<item>
<icon class='icon-picfill text-yellow'/>
<text>图像</text>
</item>
<item>
<icon class='icon-noticefill text-olive'>
<tag class="badge">99+</tag>
</icon>
<text>通知</text>
</item>
<item>
<icon class='icon-upstagefill text-cyan'/>
<text>排行榜</text>
</item>
<item>
<icon class='icon-clothesfill text-blue'>
<tag class="badge"></tag>
</icon>
<text>皮肤</text>
</item>
<item>
<icon class='icon-discoverfill text-purple'/>
<text>发现</text>
</item>
<item>
<icon class='icon-questionfill text-mauve'/>
<text>帮助</text>
</item>
</list>
<list class="grid col-5 no-border">
<item>
<icon class='icon-cardboardfill text-red'>
<tag class="badge">99+</tag>
</icon>
<text>VR</text>
</item>
<item>
<icon class='icon-recordfill text-orange'/>
<text>录像</text>
</item>
<item>
<icon class='icon-picfill text-yellow'/>
<text>图像</text>
</item>
<item>
<icon class='icon-noticefill text-olive'>
</icon>
<text>通知</text>
</item>
<item>
<icon class='icon-upstagefill text-cyan'/>
<text>排行榜</text>
</item>
<item>
<icon class='icon-clothesfill text-blue'>
<tag class="badge"></tag>
</icon>
<text>皮肤</text>
</item>
<item>
<icon class='icon-discoverfill text-purple'/>
<text>发现</text>
</item>
<item>
<icon class='icon-questionfill text-mauve'/>
<text>帮助</text>
</item>
<item>
<icon class='icon-commandfill text-purple'/>
<text>问答</text>
</item>
<item>
<icon class='icon-brandfill text-mauve'/>
<text>版权</text>
</item>
</list>
<list class="menu no-padding">
<item>
<view class='content'>
<view>
<icon class='icon-clothesfill text-blue'/> 皮肤设置</view>
<view class='text-gray text-sm'>
<icon class='icon-infofill'/> 皮肤需要付费购买</view>
</view>
<view class='action'>
<switch class='switch-sex sm' bindchange="switchSex" />
</view>
</item>
<item>
<view class='content'>
<view>
<icon class='icon-musicfill text-red'/> 声音控制</view>
<view class='text-gray text-sm'>
<icon class='icon-infofill'/> 需要获得系统权限</view>
</view>
<view class='action'>
<switch class='switch-music' />
</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 class='content'>
<view class='text-grey'>文晓港</view>
<view class='text-gray text-sm'>
<icon class='icon-infofill text-red'/> 消息未送达</view>
</view>
<view class='action'>
<view class='text-grey text-xs'>22:20</view>
<tag class="round bg-grey sm">5</tag>
</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>
<view class='text-gray text-sm'>
<icon class='icon-redpacket_fill text-red'/> 收到红包</view>
</view>
<view class='action'>
<view class='text-grey text-xs'>22:20</view>
<icon class='icon-notice_forbid_fill text-gray'/>
</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 class='content'>
<view>喵星人互动群</view>
<view class='text-gray text-sm'>
喵星酱：喵喵喵！</view>
</view>
<view class='action'>
<view class='text-grey text-xs'>22:20</view>
<tag class="round bg-red sm">5</tag>
</view>
</item>
<item class="grayscale">
<avatar class="radius lg" style="background-image:url(https://image.weilanwl.com/img/square-3.jpg);"></avatar>
<view class='content'>
<view>喵星人互动群</view>
<view class='text-gray text-sm'>
喵星酱：喵喵喵！</view>
</view>
<view class='action'>
<view class='text-grey text-xs'>22:20</view>
<tag class="round bg-red sm">5</tag>
</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>
<view class='text-gray text-sm'>
喵星酱：
<icon class='icon-picfill text-orange'/> 图片传输中...</view>
</view>
<view class='action'>
<view class='text-grey text-xs'>22:20</view>
<icon class='icon-notice_forbid_fill text-gray'/>
</view>
</item>
</list>
<list class="menu">
<item>
<view class='content'>
<icon class='icon-circlefill text-grey'/>
<text class='text-grey'>默认</text>
</view>
</item>
<item>
<view class='content'>
<icon class='icon-emojifill text-red'/>
<text class='text-grey'>头像</text>
</view>
<view class='action'>
<avatar class="sm round">
<icon class='icon-people'/>
</avatar>
</view>
</item>
<item>
<view class='content'>
<icon class='icon-emojiflashfill text-pink'/>
<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>
<text class='text-grey text-sm'>4 人</text>
</view>
</item>
<item>
<view class='content'>
<icon class='icon-crown text-green'/>
<text class='text-grey'>按钮</text>
</view>
<view class='action'>
<button class='round bg-green sm'>
<icon class='icon-upload'/> 上传</button>
</view>
</item>
<item>
<view class='content'>
<icon class='icon-crownfill text-green'/>
<text class='text-grey'>按钮</text>
</view>
<view class='action'>
<button class='round bg-blue'>
<icon class='icon-down'/> 下载</button>
</view>
</item>
</list>
<list class="menu">
<item class="arrow">
<view class='content'>
<icon class='icon-roundrightfill text-grey'/>
<text class='text-grey'>箭头</text>
</view>
</item>
<item class="arrow">
<view class='content'>
<icon class='icon-tagfill text-red'/>
<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>
</item>
<item class="arrow">
<view class='content'>
<icon class='icon-warn text-green'/>
<text class='text-grey'>文本</text>
</view>
<view class='action'>
<text class='text-grey text-sm'>小目标还没有实现！</text>
</view>
</item>
<item class="arrow">
<view class='content'>
<icon class='icon-warnfill text-green'/>
<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 class='content'>
<icon class='icon-radiobox text-orange'/>
<text class='text-grey'>徽章</text>
</view>
<view class='action'>
<tag class='bg-red round'></tag>
</view>
</item>
<item>
<view class='content'>
<icon class='icon-tagfill text-olive'/>
<text class='text-grey'>标签</text>
</view>
<view class='action'>
<tag class='bg-olive round'>9</tag>
</view>
</item>
<item class="arrow">
<view class='content'>
<icon class='icon-radioboxfill text-blue'/>
<text class='text-grey'>胶囊</text>
</view>
<view class='action'>
<capsule class="round">
<tag class='bg-blue'>
<icon class='icon-locationfill'/>
</tag>
<tag class="line-blue">
广州
</tag>
</capsule>
</view>
</item>
</list>
<list class="menu no-padding card-menu margin-bottom-xl">
<item>
<view class='content'>
<icon class='icon-radiobox text-orange'/>
<text class='text-grey'>徽章</text>
</view>
<view class='action'>
<tag class='bg-red round'></tag>
</view>
</item>
<item>
<view class='content'>
<icon class='icon-tagfill text-olive'/>
<text class='text-grey'>标签</text>
</view>
<view class='action'>
<tag class='bg-olive round'>9</tag>
</view>
</item>
<item class="arrow">
<view class='content'>
<icon class='icon-radioboxfill text-blue'/>
<text class='text-grey'>胶囊</text>
</view>
<view class='action'>
<capsule class="round">
<tag class='bg-blue'>
<icon class='icon-locationfill'/>
</tag>
<tag class="line-blue">
广州
</tag>
</capsule>
</view>
</item>
</list>
</view>

Some files were not shown because too many files have changed in this diff Show More