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.5

Browse Source 
1.修复时间线图标显示问题
2.switch、radio、checkbox单位改成px，抛弃小尺寸
3.更新多种窗口组件
4.更新多种动画
5.新增步骤条组件
6.优化列表组件，新增右滑操作
7.优化图标搜索
This commit is contained in:
Weilanwl
2019-01-13 23:29:19 +08:00
parent 523eaba3c6
commit 8af7413e6e
50 changed files with 2704 additions and 880 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
demo/app.js
View File

@@ -2,7 +2,7 @@
App({
onLaunch: function() {
wx.getSystemInfo({
success: e=> {
success: e => {
this.globalData.StatusBar = e.statusBarHeight;
this.globalData.CustomBar = e.platform == 'android' ? e.statusBarHeight + 50 : e.statusBarHeight + 45;
}

18
demo/app.json
View File

@@ -2,30 +2,30 @@
"pages": [
"pages/basics/home/home",
"pages/basics/layout/layout",
"pages/component/home/home",
"pages/plugin/home/home",
"pages/basics/button/button",
"pages/basics/button/design",
"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/home/home",
"pages/component/list/list",
"pages/component/bar/bar",
"pages/component/timeline/timeline",
"pages/component/chat/chat",
"pages/component/form/form",
"pages/component/nav/nav",
"pages/component/card/card",
"pages/component/swiper/swiper",
"pages/component/modal/modal",
"pages/component/steps/steps",
"pages/plugin/home/home",
"pages/plugin/indexes/indexes",
"pages/basics/button/design",
"pages/plugin/gradual/gradual",
"pages/plugin/animation/animation"
],

391
demo/colorui.wxss
View File

@@ -1,5 +1,5 @@
/*
Color UI v2.0.4 | by 文晓港
Color UI v2.0.5 | by 文晓港
仅供学习交流，如作它用所承受的法律责任一概与作者无关
（QQ交流群：240787041）
文档：http://www.color-ui.com/
@@ -17,7 +17,8 @@ page {
font-family: Helvetica Neue, Helvetica, sans-serif;
}
view, text, custom, .cu-tag, .cu-capsule, scroll-view, swiper, button, .cu-timeline, form, .cu-form-group, info, .cu-bar, progress, input, textarea, label, navigator, list, item, chat, image {
view, text, scroll-view, swiper, button, form, input, textarea, label, navigator,
image {
box-sizing: border-box;
}
@@ -81,9 +82,9 @@ switch::after, switch::before {
color: #fff;
top: 0%;
left: 0rpx;
font-size: 32rpx;
line-height: 64rpx;
width: 64rpx;
font-size: 26rpx;
line-height: 26px;
width: 26px;
text-align: center;
pointer-events: none;
transform: scale(0, 0);
@@ -112,10 +113,10 @@ radio::before, checkbox::before {
position: absolute;
color: #fff;
top: 50%;
margin-top: -16rpx;
right: 10rpx;
margin-top: -8px;
right: 5px;
font-size: 32rpx;
line-height: 32rpx;
line-height: 16px;
pointer-events: none;
transform: scale(1, 1);
transition: all 0.3s ease-in-out 0s;
@@ -129,16 +130,17 @@ switch[checked]::before {
switch .wx-switch-input {
background: #aaa !important;
border: none;
padding: 0 60rpx;
height: 64rpx;
padding: 0 24px;
width: 48px;
height: 26px;
margin: 0;
border-radius: 100rpx;
}
switch .wx-switch-input::after {
margin: auto !important;
width: 64rpx !important;
height: 64rpx !important;
width: 26px !important;
height: 26px !important;
border-radius: 100rpx;
left: 0rpx !important;
top: 0rpx !important;
@@ -150,7 +152,7 @@ switch .wx-switch-input::after {
switch .wx-switch-input-checked::after {
margin: auto !important;
left: 57rpx !important;
left: 22px !important;
box-shadow: none !important;
}
@@ -160,19 +162,21 @@ radio-group {
radio .wx-radio-input, checkbox .wx-checkbox-input {
margin: 0;
width: 48rpx;
height: 48rpx;
width: 24px;
height: 24px;
}
checkbox.round .wx-checkbox-input {
border-radius: 100rpx;
}
switch.radius .wx-switch-input::after, switch.radius .wx-switch-input, switch.radius .wx-switch-input::before {
switch.radius .wx-switch-input::after, switch.radius .wx-switch-input,
switch.radius .wx-switch-input::before {
border-radius: 10rpx;
}
switch .wx-switch-input::before, radio.radio::before, checkbox .wx-checkbox-input::before, radio .wx-radio-input::before {
switch .wx-switch-input::before, radio.radio::before,
checkbox .wx-checkbox-input::before, radio .wx-radio-input::before {
display: none;
}
@@ -181,8 +185,8 @@ radio.radio[checked]::after {
background: transparent;
display: block;
position: absolute;
width: 16rpx;
height: 16rpx;
width: 8px;
height: 8px;
z-index: 999;
top: 0rpx;
left: 0rpx;
@@ -190,11 +194,7 @@ radio.radio[checked]::after {
bottom: 0;
margin: auto;
border-radius: 200rpx;
border: 16rpx solid #fff;
}
switch.sm, checkbox.sm, radio.sm {
transform: scale(0.8);
border: 8px solid #fff;
}
.switch-sex::after {
@@ -219,137 +219,179 @@ switch.sm, checkbox.sm, radio.sm {
背景
==================== */
.line-red::after, .lines-red::after, switch.red[checked] .wx-switch-input, checkbox.red[checked] .wx-checkbox-input, radio.red[checked] .wx-radio-input {
.line-red::after, .lines-red::after, switch.red[checked] .wx-switch-input,
checkbox.red[checked] .wx-checkbox-input, radio.red[checked] .wx-radio-input {
border-color: #e54d42 !important;
}
.line-orange::after, .lines-orange::after, switch.orange[checked] .wx-switch-input, checkbox.orange[checked] .wx-checkbox-input, radio.orange[checked] .wx-radio-input {
.line-orange::after, .lines-orange::after,
switch.orange[checked] .wx-switch-input,
checkbox.orange[checked] .wx-checkbox-input,
radio.orange[checked] .wx-radio-input {
border-color: #f37b1d !important;
}
.line-yellow::after, .lines-yellow::after, switch.yellow[checked] .wx-switch-input, checkbox.yellow[checked] .wx-checkbox-input, radio.yellow[checked] .wx-radio-input {
.line-yellow::after, .lines-yellow::after,
switch.yellow[checked] .wx-switch-input,
checkbox.yellow[checked] .wx-checkbox-input,
radio.yellow[checked] .wx-radio-input {
border-color: #fbbd08 !important;
}
.line-olive::after, .lines-olive::after, switch.olive[checked] .wx-switch-input, checkbox.olive[checked] .wx-checkbox-input, radio.olive[checked] .wx-radio-input {
.line-olive::after, .lines-olive::after, switch.olive[checked] .wx-switch-input,
checkbox.olive[checked] .wx-checkbox-input, radio.olive[checked] .wx-radio-input {
border-color: #8dc63f !important;
}
.line-green::after, .lines-green::after, switch.green[checked] .wx-switch-input, checkbox.green[checked] .wx-checkbox-input, checkbox[checked] .wx-checkbox-input, radio.green[checked] .wx-radio-input {
.line-green::after, .lines-green::after, switch.green[checked] .wx-switch-input,
checkbox.green[checked] .wx-checkbox-input, checkbox[checked] .wx-checkbox-input,
radio.green[checked] .wx-radio-input {
border-color: #39b54a !important;
}
.line-cyan::after, .lines-cyan::after, switch.cyan[checked] .wx-switch-input, checkbox.cyan[checked] .wx-checkbox-input, radio.cyan[checked] .wx-radio-input {
.line-cyan::after, .lines-cyan::after, switch.cyan[checked] .wx-switch-input,
checkbox.cyan[checked] .wx-checkbox-input, radio.cyan[checked] .wx-radio-input {
border-color: #1cbbb4 !important;
}
.line-blue::after, .lines-blue::after, switch.blue[checked] .wx-switch-input, checkbox.blue[checked] .wx-checkbox-input, radio.blue[checked] .wx-radio-input {
.line-blue::after, .lines-blue::after, switch.blue[checked] .wx-switch-input,
checkbox.blue[checked] .wx-checkbox-input, radio.blue[checked] .wx-radio-input {
border-color: #0081ff !important;
}
.line-purple::after, .lines-purple::after, switch.purple[checked] .wx-switch-input, checkbox.purple[checked] .wx-checkbox-input, radio.purple[checked] .wx-radio-input {
.line-purple::after, .lines-purple::after,
switch.purple[checked] .wx-switch-input,
checkbox.purple[checked] .wx-checkbox-input,
radio.purple[checked] .wx-radio-input {
border-color: #6739b6 !important;
}
.line-mauve::after, .lines-mauve::after, switch.mauve[checked] .wx-switch-input, checkbox.mauve[checked] .wx-checkbox-input, radio.mauve[checked] .wx-radio-input {
.line-mauve::after, .lines-mauve::after, switch.mauve[checked] .wx-switch-input,
checkbox.mauve[checked] .wx-checkbox-input, radio.mauve[checked] .wx-radio-input {
border-color: #9c26b0 !important;
}
.line-pink::after, .lines-pink::after, switch.pink[checked] .wx-switch-input, checkbox.pink[checked] .wx-checkbox-input, radio.pink[checked] .wx-radio-input {
.line-pink::after, .lines-pink::after, switch.pink[checked] .wx-switch-input,
checkbox.pink[checked] .wx-checkbox-input, radio.pink[checked] .wx-radio-input {
border-color: #e03997 !important;
}
.line-brown::after, .lines-brown::after, switch.brown[checked] .wx-switch-input, checkbox.brown[checked] .wx-checkbox-input, radio.brown[checked] .wx-radio-input {
.line-brown::after, .lines-brown::after, switch.brown[checked] .wx-switch-input,
checkbox.brown[checked] .wx-checkbox-input, radio.brown[checked] .wx-radio-input {
border-color: #a5673f !important;
}
.line-grey::after, .lines-grey::after, switch.grey[checked] .wx-switch-input, checkbox.grey[checked] .wx-checkbox-input, radio.grey[checked] .wx-radio-input {
.line-grey::after, .lines-grey::after, switch.grey[checked] .wx-switch-input,
checkbox.grey[checked] .wx-checkbox-input, radio.grey[checked] .wx-radio-input {
border-color: #8799a3 !important;
}
.line-gray::after, .lines-gray::after, switch.gray[checked] .wx-switch-input, checkbox.gray[checked] .wx-checkbox-input, radio.gray[checked] .wx-radio-input {
.line-gray::after, .lines-gray::after, switch.gray[checked] .wx-switch-input,
checkbox.gray[checked] .wx-checkbox-input, radio.gray[checked] .wx-radio-input {
border-color: #aaa !important;
}
.line-black::after, .lines-black::after, switch.black[checked] .wx-switch-input, checkbox.black[checked] .wx-checkbox-input, radio.black[checked] .wx-radio-input {
.line-black::after, .lines-black::after, switch.black[checked] .wx-switch-input,
checkbox.black[checked] .wx-checkbox-input, radio.black[checked] .wx-radio-input {
border-color: #333 !important;
}
.line-white::after, .lines-white::after, switch.white[checked] .wx-switch-input, checkbox.white[checked] .wx-checkbox-input, radio.white[checked] .wx-radio-input {
.line-white::after, .lines-white::after, switch.white[checked] .wx-switch-input,
checkbox.white[checked] .wx-checkbox-input, radio.white[checked] .wx-radio-input {
border-color: #fff !important;
}
.bg-red, switch.red[checked] .wx-switch-input, checkbox.red[checked] .wx-checkbox-input, radio.red[checked] .wx-radio-input {
.bg-red, switch.red[checked] .wx-switch-input,
checkbox.red[checked] .wx-checkbox-input, radio.red[checked] .wx-radio-input {
background-color: #e54d42 !important;
color: #fff !important;
}
.bg-orange, switch.orange[checked] .wx-switch-input, checkbox.orange[checked] .wx-checkbox-input, radio.orange[checked] .wx-radio-input {
.bg-orange, switch.orange[checked] .wx-switch-input,
checkbox.orange[checked] .wx-checkbox-input,
radio.orange[checked] .wx-radio-input {
background-color: #f37b1d !important;
color: #fff !important;
}
.bg-yellow, switch.yellow[checked] .wx-switch-input, checkbox.yellow[checked] .wx-checkbox-input, radio.yellow[checked] .wx-radio-input {
.bg-yellow, switch.yellow[checked] .wx-switch-input,
checkbox.yellow[checked] .wx-checkbox-input,
radio.yellow[checked] .wx-radio-input {
background-color: #fbbd08 !important;
color: #333 !important;
}
.bg-olive, switch.olive[checked] .wx-switch-input, checkbox.olive[checked] .wx-checkbox-input, radio.olive[checked] .wx-radio-input {
.bg-olive, switch.olive[checked] .wx-switch-input,
checkbox.olive[checked] .wx-checkbox-input, radio.olive[checked] .wx-radio-input {
background-color: #8dc63f !important;
color: #fff !important;
}
.bg-green, switch.green[checked] .wx-switch-input, switch[checked] .wx-switch-input, checkbox.green[checked] .wx-checkbox-input, checkbox[checked] .wx-checkbox-input, radio.green[checked] .wx-radio-input, radio[checked] .wx-radio-input {
.bg-green, switch.green[checked] .wx-switch-input,
switch[checked] .wx-switch-input, checkbox.green[checked] .wx-checkbox-input,
checkbox[checked] .wx-checkbox-input, radio.green[checked] .wx-radio-input,
radio[checked] .wx-radio-input {
background-color: #39b54a !important;
color: #fff !important;
}
.bg-cyan, switch.cyan[checked] .wx-switch-input, checkbox.cyan[checked] .wx-checkbox-input, radio.cyan[checked] .wx-radio-input {
.bg-cyan, switch.cyan[checked] .wx-switch-input,
checkbox.cyan[checked] .wx-checkbox-input, radio.cyan[checked] .wx-radio-input {
background-color: #1cbbb4 !important;
color: #fff !important;
}
.bg-blue, switch.blue[checked] .wx-switch-input, checkbox.blue[checked] .wx-checkbox-input, radio.blue[checked] .wx-radio-input {
.bg-blue, switch.blue[checked] .wx-switch-input,
checkbox.blue[checked] .wx-checkbox-input, radio.blue[checked] .wx-radio-input {
background-color: #0081ff !important;
color: #fff !important;
}
.bg-purple, switch.purple[checked] .wx-switch-input, checkbox.purple[checked] .wx-checkbox-input, radio.purple[checked] .wx-radio-input {
.bg-purple, switch.purple[checked] .wx-switch-input,
checkbox.purple[checked] .wx-checkbox-input,
radio.purple[checked] .wx-radio-input {
background-color: #6739b6 !important;
color: #fff !important;
}
.bg-mauve, switch.mauve[checked] .wx-switch-input, checkbox.mauve[checked] .wx-checkbox-input, radio.mauve[checked] .wx-radio-input {
.bg-mauve, switch.mauve[checked] .wx-switch-input,
checkbox.mauve[checked] .wx-checkbox-input, radio.mauve[checked] .wx-radio-input {
background-color: #9c26b0 !important;
color: #fff !important;
}
.bg-pink, switch.pink[checked] .wx-switch-input, checkbox.pink[checked] .wx-checkbox-input, radio.pink[checked] .wx-radio-input {
.bg-pink, switch.pink[checked] .wx-switch-input,
checkbox.pink[checked] .wx-checkbox-input, radio.pink[checked] .wx-radio-input {
background-color: #e03997 !important;
color: #fff !important;
}
.bg-brown, switch.brown[checked] .wx-switch-input, checkbox.brown[checked] .wx-checkbox-input, radio.brown[checked] .wx-radio-input {
.bg-brown, switch.brown[checked] .wx-switch-input,
checkbox.brown[checked] .wx-checkbox-input, radio.brown[checked] .wx-radio-input {
background-color: #a5673f !important;
color: #fff !important;
}
.bg-grey, switch.grey[checked] .wx-switch-input, checkbox.grey[checked] .wx-checkbox-input, radio.grey[checked] .wx-radio-input {
.bg-grey, switch.grey[checked] .wx-switch-input,
checkbox.grey[checked] .wx-checkbox-input, radio.grey[checked] .wx-radio-input {
background-color: #8799a3 !important;
color: #fff !important;
}
.bg-gray, switch.gray[checked] .wx-switch-input, checkbox.gray[checked] .wx-checkbox-input, radio.gray[checked] .wx-radio-input {
.bg-gray, switch.gray[checked] .wx-switch-input,
checkbox.gray[checked] .wx-checkbox-input, radio.gray[checked] .wx-radio-input {
background-color: #f0f0f0 !important;
color: #666 !important;
}
.bg-black, switch.black[checked] .wx-switch-input, checkbox.black[checked] .wx-checkbox-input, radio.black[checked] .wx-radio-input {
.bg-black, switch.black[checked] .wx-switch-input,
checkbox.black[checked] .wx-checkbox-input, radio.black[checked] .wx-radio-input {
background-color: #333 !important;
color: #fff !important;
}
.bg-white, switch.white[checked] .wx-switch-input, checkbox.white[checked] .wx-checkbox-input, radio.white[checked] .wx-radio-input {
.bg-white, switch.white[checked] .wx-switch-input,
checkbox.white[checked] .wx-checkbox-input, radio.white[checked] .wx-radio-input {
background-color: #fff !important;
color: #666;
}
@@ -720,11 +762,16 @@ switch.sm, checkbox.sm, radio.sm {
/* -- 实线 -- */
.solid, .solid-top, .solid-right, .solid-bottom, .solid-left, .solids, .solids-top, .solids-right, .solids-bottom, .solids-left, .dashed, .dashed-top, .dashed-right, .dashed-bottom, .dashed-left {
.solid, .solid-top, .solid-right, .solid-bottom, .solid-left, .solids,
.solids-top, .solids-right, .solids-bottom, .solids-left, .dashed, .dashed-top,
.dashed-right, .dashed-bottom, .dashed-left {
position: relative;
}
.solid::after, .solid-top::after, .solid-right::after, .solid-bottom::after, .solid-left::after, .solids::after, .solids-top::after, .solids-right::after, .solids-bottom::after, .solids-left::after, .dashed::after, .dashed-top::after, .dashed-right::after, .dashed-bottom::after, .dashed-left::after {
.solid::after, .solid-top::after, .solid-right::after, .solid-bottom::after,
.solid-left::after, .solids::after, .solids-top::after, .solids-right::after,
.solids-bottom::after, .solids-left::after, .dashed::after, .dashed-top::after,
.dashed-right::after, .dashed-bottom::after, .dashed-left::after {
content: " ";
width: 200%;
height: 200%;
@@ -981,7 +1028,7 @@ button.icon.lg {
align-items: stretch;
justify-content: center;
box-sizing: border-box;
padding: 12rpx 14rpx 10rpx;
padding: 12rpx 16rpx 10rpx;
line-height: 1;
background: #fff;
font-family: Helvetica Neue, Helvetica, sans-serif;
@@ -997,7 +1044,7 @@ button.icon.lg {
.cu-tag.sm {
font-size: 20rpx;
padding: 10rpx 12rpx 6rpx;
padding: 10rpx 14rpx 8rpx;
}
.cu-capsule {
@@ -1026,7 +1073,8 @@ button.icon.lg {
border-bottom-left-radius: 6rpx;
}
.cu-capsule.radius .cu-tag:last-child::after, .cu-capsule.radius .cu-tag[class*="line-"] {
.cu-capsule.radius .cu-tag:last-child::after,
.cu-capsule.radius .cu-tag[class*="line-"] {
border-top-right-radius: 12rpx;
border-bottom-right-radius: 12rpx;
}
@@ -1037,7 +1085,8 @@ button.icon.lg {
text-indent: 4rpx;
}
.cu-capsule.round .cu-tag:last-child::after, .cu-capsule.round .cu-tag:last-child {
.cu-capsule.round .cu-tag:last-child::after,
.cu-capsule.round .cu-tag:last-child {
border-top-right-radius: 200rpx;
border-bottom-right-radius: 200rpx;
text-indent: -4rpx;
@@ -1231,6 +1280,7 @@ button.icon.lg {
from {
background-position: 72rpx 0;
}
to {
background-position: 0 0;
}
@@ -1384,6 +1434,7 @@ button.icon.lg {
-webkit-transform: rotate(0);
transform: rotate(0);
}
100% {
-webkit-transform: rotate(360deg);
transform: rotate(360deg);
@@ -1395,6 +1446,7 @@ button.icon.lg {
-webkit-transform: rotate(0);
transform: rotate(0);
}
100% {
-webkit-transform: rotate(360deg);
transform: rotate(360deg);
@@ -1405,24 +1457,10 @@ button.icon.lg {
列表
==================== */
.grayscale {
filter: grayscale(1);
}
.cu-list.menu {
padding: 0 30rpx;
background: #fff;
display: block;
}
.cu-list.menu.no-padding {
padding: 0;
}
.cu-list.menu+.cu-list.menu {
margin-top: 30rpx;
}
.cu-list+.cu-list {
margin-top: 30rpx;
}
@@ -1432,34 +1470,48 @@ button.icon.lg {
display: flex;
justify-content: space-between;
align-items: center;
border-bottom: 1rpx solid #eee;
min-height: 100rpx;
background: #fff;
padding: 0 30rpx;
}
.cu-list.menu>.cu-item::after {
content: " ";
width: 200%;
height: 200%;
position: absolute;
top: 0;
left: 0;
border-radius: inherit;
transform: scale(0.5);
transform-origin: 0 0;
pointer-events: none;
box-sizing: border-box;
border-bottom: 1rpx solid #ddd;
}
.cu-list.menu.sm-border>.cu-item::after {
width: calc(200% - 120rpx);
left: 30rpx;
}
.cu-list.menu>.cu-item:last-child::after {
border: none;
}
.cu-list.menu>.cu-item.cur {
background-color: #fcf7e9;
}
.cu-list.menu>.cu-item:last-child {
border: none;
}
.cu-list.menu.no-padding>.cu-item {
padding: 30rpx;
}
.cu-list.menu-avatar.no-padding>.cu-item {
.cu-list.menu-avatar>.cu-item {
padding-left: 140rpx;
}
.cu-list.menu-avatar.no-padding>.cu-item .cu-avatar {
.cu-list.menu-avatar>.cu-item .cu-avatar {
left: 30rpx;
}
.cu-list.menu.no-padding>.cu-item.arrow {
padding-right: 66rpx;
}
.cu-list.menu>.cu-item .content {
line-height: 1.6em;
flex: 1;
@@ -1469,6 +1521,7 @@ button.icon.lg {
.cu-list.menu>.cu-item button.content {
padding: 0;
justify-content: flex-start;
background-color: transparent;
}
.cu-list.menu>.cu-item button.content::after {
@@ -1479,7 +1532,7 @@ button.icon.lg {
margin-right: 10rpx;
display: inline-block;
width: 1.6em;
text-align: center
text-align: center;
}
.cu-list.menu>.cu-item .content>image {
@@ -1490,12 +1543,12 @@ button.icon.lg {
vertical-align: middle;
}
.cu-list.menu>.cu-item .action {
text-align: right;
.cu-list.menu-avatar>.cu-item .action {
text-align: center;
}
.cu-list>.cu-item.grayscale {
background-color: #f5f5f5;
.cu-list.menu-avatar>.cu-item .action view + view {
margin-top: 10rpx;
}
.cu-list.menu>.cu-item .action .cu-tag:empty {
@@ -1503,10 +1556,10 @@ button.icon.lg {
}
.cu-list.menu>.cu-item.arrow {
padding-right: 36rpx;
padding-right: 90rpx;
}
.cu-list.menu>.cu-item.arrow::after {
.cu-list.menu>.cu-item.arrow::before {
font-family: "iconfont" !important;
display: block;
content: "\e6a3";
@@ -1517,14 +1570,10 @@ button.icon.lg {
height: 30rpx;
width: 30rpx;
text-align: center;
top: 1rpx;
top: 0rpx;
bottom: 0;
right: 0;
margin: auto;
}
.cu-list.menu.no-padding>.cu-item.arrow::after {
right: 30rpx;
margin: auto;
}
.cu-list.menu>.cu-item .cu-avatar-group .cu-avatar {
@@ -1538,14 +1587,14 @@ button.icon.lg {
overflow: hidden;
}
.cu-list.menu-avatar>.cu-item>.cu-avatar {
position: absolute;
left: 0;
.cu-list.menu-avatar>.cu-item {
padding-left: 140rpx;
height: 140rpx;
}
.cu-list.menu-avatar>.cu-item {
padding-left: 110rpx;
height: 140rpx;
.cu-list.menu-avatar>.cu-item>.cu-avatar {
position: absolute;
left: 30rpx;
}
.cu-list.menu>.cu-item .content .cu-tag.sm {
@@ -1557,18 +1606,18 @@ button.icon.lg {
.cu-list.grid {
text-align: center;
background: #fff;
background: #fff;
}
.cu-list.grid>.cu-item {
display: flex;
flex-direction: column;
border-right: 1rpx solid #eee;
border-bottom: 1rpx solid #eee;
padding: 20rpx;
padding: 20rpx 0 30rpx;
position: relative;
transition-duration: 0s;
}
.cu-list.grid>.cu-item text[class*="icon"] {
.cu-list.grid>.cu-item [class*="icon"] {
display: block;
width: 100%;
position: relative;
@@ -1590,16 +1639,32 @@ button.icon.lg {
margin-left: 20rpx;
}
.cu-list.grid.col-3>.cu-item:nth-child(3n) {
border-right: 0rpx;
.cu-list.grid>.cu-item::after {
content: " ";
width: 200%;
height: 200%;
position: absolute;
top: 0;
left: 0;
border-radius: inherit;
transform: scale(0.5);
transform-origin: 0 0;
pointer-events: none;
box-sizing: border-box;
border-right: 1px solid rgba(0, 0, 0, 0.1);
border-bottom: 1px solid rgba(0, 0, 0, 0.1);
}
.cu-list.grid.col-4>.cu-item:nth-child(4n) {
border-right: 0rpx;
.cu-list.grid.col-3>.cu-item:nth-child(3n)::after {
border-right-width: 0px;
}
.cu-list.grid.col-5>.cu-item:nth-child(5n) {
border-right: 0rpx;
.cu-list.grid.col-4>.cu-item:nth-child(4n)::after {
border-right-width: 0px;
}
.cu-list.grid.col-5>.cu-item:nth-child(5n)::after {
border-right-width: 0px;
}
.cu-list.grid.no-border {
@@ -1607,20 +1672,35 @@ button.icon.lg {
}
.cu-list.grid.no-border>.cu-item {
border: none !important;
padding-top: 10rpx;
padding-bottom: 10rpx;
padding-bottom: 20rpx;
}
.cu-list.menu-avatar.comment>.cu-item {
height: auto;
padding-top: 30rpx;
padding-bottom: 30rpx;
padding-left: 90rpx;
.cu-list.grid.no-border>.cu-item::after {
border: none !important;
}
.cu-list.menu-avatar.comment .cu-avatar {
align-self: flex-start;
.cu-list>.cu-item {
transform: translateX(0rpx);
transition: all 0.6s ease-in-out 0s;
}
.cu-list>.cu-item .move {
display: flex;
width: 260rpx;
height: 100%;
position: absolute;
right: 0;
transform: translateX(100%);
}
.cu-list>.cu-item.move-cur {
transform: translateX(-260rpx);
}
.cu-list>.cu-item .move view {
flex: 1;
display: flex;
justify-content: center;
align-items: center;
}
/* ==================
@@ -1736,11 +1816,7 @@ button.icon.lg {
}
.cu-bar .search-form [class*="icon"] {
margin: 0 0.5em;
}
.cu-bar .search-form.round [class*="icon"] {
margin-left: 0.5em;
margin: 0 0.5em 0 0.8em;
}
.cu-bar .search-form [class*="icon"]::before {
@@ -1940,7 +2016,6 @@ button.icon.lg {
.cu-timeline>.cu-item::before {
font-family: "iconfont";
content: "\e763";
display: block;
position: absolute;
top: 36rpx;
@@ -1954,6 +2029,10 @@ button.icon.lg {
left: 36rpx;
}
.cu-timeline>.cu-item:not([class*="icon-"])::before {
content: "\e763";
}
.cu-timeline>.cu-item[class*="icon"]::before {
background: #fff;
width: 50rpx;
@@ -2324,7 +2403,8 @@ button.icon.lg {
margin: auto;
}
.cu-form-group textarea[disabled], .cu-form-group textarea[disabled] .placeholder {
.cu-form-group textarea[disabled],
.cu-form-group textarea[disabled] .placeholder {
color: transparent;
}
@@ -2347,7 +2427,7 @@ button.icon.lg {
backface-visibility: hidden;
perspective: 2000rpx;
background: rgba(0, 0, 0, 0.6);
transition: all 0.6s ease-in-out 0;
transition: all 0.3s ease-in-out 0s;
pointer-events: none;
}
@@ -2398,6 +2478,31 @@ button.icon.lg {
margin-bottom: 0;
}
.cu-modal.drawer-modal {
transform: scale(1);
display: flex;
}
.cu-modal.drawer-modal .cu-dialog {
height: 100%;
min-width: 200rpx;
border-radius: 0;
margin: initial;
transition-duration: 0.3s;
}
.cu-modal.drawer-modal.justify-start .cu-dialog {
transform: translateX(-100%);
}
.cu-modal.drawer-modal.justify-end .cu-dialog {
transform: translateX(100%);
}
.cu-modal.drawer-modal.show .cu-dialog {
transform: translateX(0%);
}
/* ==================
轮播
==================== */
@@ -2657,13 +2762,13 @@ swiper.round-dot .wx-swiper-dot.wx-swiper-dot-active {
overflow: hidden;
}
.grid.col-1.grid-square > view {
.grid.col-1.grid-square > view {
padding-bottom: 100%;
height: 0;
margin-right: 0;
}
.grid.col-2.grid-square > view {
.grid.col-2.grid-square > view {
padding-bottom: calc((100% - 20rpx)/2);
height: 0;
width: calc((100% - 20rpx)/2);
@@ -2673,17 +2778,17 @@ swiper.round-dot .wx-swiper-dot.wx-swiper-dot-active {
margin-right: 0;
}
.grid.col-3.grid-square > view {
.grid.col-3.grid-square > view {
padding-bottom: calc((100% - 40rpx)/3);
height: 0;
width: calc((100% - 40rpx)/3);
}
.grid.col-3.grid-square > view:nth-child(3n){
.grid.col-3.grid-square > view:nth-child(3n) {
margin-right: 0;
}
.grid.col-4.grid-square > view {
.grid.col-4.grid-square > view {
padding-bottom: calc((100% - 60rpx)/4);
height: 0;
width: calc((100% - 60rpx)/4);
@@ -2693,7 +2798,7 @@ swiper.round-dot .wx-swiper-dot.wx-swiper-dot-active {
margin-right: 0;
}
.grid.col-5.grid-square > view {
.grid.col-5.grid-square > view {
padding-bottom: calc((100% - 80rpx)/5);
height: 0;
width: calc((100% - 80rpx)/5);
@@ -3046,4 +3151,4 @@ swiper.round-dot .wx-swiper-dot.wx-swiper-dot-active {
.fr {
float: right;
}
}

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

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 2.4 KiB

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

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 3.8 KiB

BIN
demo/images/wave.gif Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 956 KiB

BIN
demo/images/zanCode.jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 30 KiB

66
demo/pages/about/about/about.js Normal file
View File

@@ -0,0 +1,66 @@
// pages/about/about/about.js
Page({
/**
* 页面的初始数据
*/
data: {
},
/**
* 生命周期函数--监听页面加载
*/
onLoad: function (options) {
},
/**
* 生命周期函数--监听页面初次渲染完成
*/
onReady: function () {
},
/**
* 生命周期函数--监听页面显示
*/
onShow: function () {
},
/**
* 生命周期函数--监听页面隐藏
*/
onHide: function () {
},
/**
* 生命周期函数--监听页面卸载
*/
onUnload: function () {
},
/**
* 页面相关事件处理函数--监听用户下拉动作
*/
onPullDownRefresh: function () {
},
/**
* 页面上拉触底事件的处理函数
*/
onReachBottom: function () {
},
/**
* 用户点击右上角分享
*/
onShareAppMessage: function () {
}
})

3
demo/pages/about/about/about.json Normal file
View File

@@ -0,0 +1,3 @@
{
"usingComponents": {}
}

2
demo/pages/about/about/about.wxml Normal file
View File

@@ -0,0 +1,2 @@
<!--pages/about/about/about.wxml-->
<text>pages/about/about/about.wxml</text>

1
demo/pages/about/about/about.wxss Normal file
View File

@@ -0,0 +1 @@
/* pages/about/about/about.wxss */

66
demo/pages/about/home/home.js Normal file
View File

@@ -0,0 +1,66 @@
// pages/about/home/home.js
Page({
/**
* 页面的初始数据
*/
data: {
},
/**
* 生命周期函数--监听页面加载
*/
onLoad: function (options) {
},
/**
* 生命周期函数--监听页面初次渲染完成
*/
onReady: function () {
},
/**
* 生命周期函数--监听页面显示
*/
onShow: function () {
},
/**
* 生命周期函数--监听页面隐藏
*/
onHide: function () {
},
/**
* 生命周期函数--监听页面卸载
*/
onUnload: function () {
},
/**
* 页面相关事件处理函数--监听用户下拉动作
*/
onPullDownRefresh: function () {
},
/**
* 页面上拉触底事件的处理函数
*/
onReachBottom: function () {
},
/**
* 用户点击右上角分享
*/
onShareAppMessage: function () {
}
})

3
demo/pages/about/home/home.json Normal file
View File

@@ -0,0 +1,3 @@
{
"usingComponents": {}
}

2
demo/pages/about/home/home.wxml Normal file
View File

@@ -0,0 +1,2 @@
<!--pages/about/home/home.wxml-->
<text>pages/about/home/home.wxml</text>

1
demo/pages/about/home/home.wxss Normal file
View File

@@ -0,0 +1 @@
/* pages/about/home/home.wxss */

66
demo/pages/about/log/log.js Normal file
View File

@@ -0,0 +1,66 @@
// pages/about/log/log.js
Page({
/**
* 页面的初始数据
*/
data: {
},
/**
* 生命周期函数--监听页面加载
*/
onLoad: function (options) {
},
/**
* 生命周期函数--监听页面初次渲染完成
*/
onReady: function () {
},
/**
* 生命周期函数--监听页面显示
*/
onShow: function () {
},
/**
* 生命周期函数--监听页面隐藏
*/
onHide: function () {
},
/**
* 生命周期函数--监听页面卸载
*/
onUnload: function () {
},
/**
* 页面相关事件处理函数--监听用户下拉动作
*/
onPullDownRefresh: function () {
},
/**
* 页面上拉触底事件的处理函数
*/
onReachBottom: function () {
},
/**
* 用户点击右上角分享
*/
onShareAppMessage: function () {
}
})

3
demo/pages/about/log/log.json Normal file
View File

@@ -0,0 +1,3 @@
{
"usingComponents": {}
}

2
demo/pages/about/log/log.wxml Normal file
View File

@@ -0,0 +1,2 @@
<!--pages/about/log/log.wxml-->
<text>pages/about/log/log.wxml</text>

1
demo/pages/about/log/log.wxss Normal file
View File

@@ -0,0 +1 @@
/* pages/about/log/log.wxss */

66
demo/pages/about/test/filter.js Normal file
View File

@@ -0,0 +1,66 @@
// pages/about/test/filter.js
Page({
/**
* 页面的初始数据
*/
data: {
},
/**
* 生命周期函数--监听页面加载
*/
onLoad: function (options) {
},
/**
* 生命周期函数--监听页面初次渲染完成
*/
onReady: function () {
},
/**
* 生命周期函数--监听页面显示
*/
onShow: function () {
},
/**
* 生命周期函数--监听页面隐藏
*/
onHide: function () {
},
/**
* 生命周期函数--监听页面卸载
*/
onUnload: function () {
},
/**
* 页面相关事件处理函数--监听用户下拉动作
*/
onPullDownRefresh: function () {
},
/**
* 页面上拉触底事件的处理函数
*/
onReachBottom: function () {
},
/**
* 用户点击右上角分享
*/
onShareAppMessage: function () {
}
})

3
demo/pages/about/test/filter.json Normal file
View File

@@ -0,0 +1,3 @@
{
"usingComponents": {}
}

2
demo/pages/about/test/filter.wxml Normal file
View File

@@ -0,0 +1,2 @@
<!--pages/about/test/filter.wxml-->
<text>pages/about/test/filter.wxml</text>

1
demo/pages/about/test/filter.wxss Normal file
View File

@@ -0,0 +1 @@
/* pages/about/test/filter.wxss */

66
demo/pages/about/test/list.js Normal file
View File

@@ -0,0 +1,66 @@
// pages/about/test/list.js
Page({
/**
* 页面的初始数据
*/
data: {
},
/**
* 生命周期函数--监听页面加载
*/
onLoad: function (options) {
},
/**
* 生命周期函数--监听页面初次渲染完成
*/
onReady: function () {
},
/**
* 生命周期函数--监听页面显示
*/
onShow: function () {
},
/**
* 生命周期函数--监听页面隐藏
*/
onHide: function () {
},
/**
* 生命周期函数--监听页面卸载
*/
onUnload: function () {
},
/**
* 页面相关事件处理函数--监听用户下拉动作
*/
onPullDownRefresh: function () {
},
/**
* 页面上拉触底事件的处理函数
*/
onReachBottom: function () {
},
/**
* 用户点击右上角分享
*/
onShareAppMessage: function () {
}
})

3
demo/pages/about/test/list.json Normal file
View File

@@ -0,0 +1,3 @@
{
"usingComponents": {}
}

2
demo/pages/about/test/list.wxml Normal file
View File

@@ -0,0 +1,2 @@
<!--pages/about/test/list.wxml-->
<text>pages/about/test/list.wxml</text>

1
demo/pages/about/test/list.wxss Normal file
View File

@@ -0,0 +1 @@
/* pages/about/test/list.wxss */

66
demo/pages/auth/auth.js Normal file
View File

@@ -0,0 +1,66 @@
// pages/auth/auth.js
Page({
/**
* 页面的初始数据
*/
data: {
},
/**
* 生命周期函数--监听页面加载
*/
onLoad: function (options) {
},
/**
* 生命周期函数--监听页面初次渲染完成
*/
onReady: function () {
},
/**
* 生命周期函数--监听页面显示
*/
onShow: function () {
},
/**
* 生命周期函数--监听页面隐藏
*/
onHide: function () {
},
/**
* 生命周期函数--监听页面卸载
*/
onUnload: function () {
},
/**
* 页面相关事件处理函数--监听用户下拉动作
*/
onPullDownRefresh: function () {
},
/**
* 页面上拉触底事件的处理函数
*/
onReachBottom: function () {
},
/**
* 用户点击右上角分享
*/
onShareAppMessage: function () {
}
})

3
demo/pages/auth/auth.json Normal file
View File

@@ -0,0 +1,3 @@
{
"usingComponents": {}
}

2
demo/pages/auth/auth.wxml Normal file
View File

@@ -0,0 +1,2 @@
<!--pages/auth/auth.wxml-->
<text>pages/auth/auth.wxml</text>

1
demo/pages/auth/auth.wxss Normal file
View File

@@ -0,0 +1 @@
/* pages/auth/auth.wxss */

908
demo/pages/basics/icon/icon.js
View File

File diff suppressed because one or more lines are too long

68
demo/pages/basics/image/image.js
View File

@@ -1,10 +1,66 @@
const app = getApp();
// pages/basics/image/image.js
Page({
/**
* 页面的初始数据
*/
data: {
StatusBar: app.globalData.StatusBar,
CustomBar: app.globalData.CustomBar
},
onLoad: function() {
/**
* 生命周期函数--监听页面加载
*/
onLoad: function (options) {
},
});
/**
* 生命周期函数--监听页面初次渲染完成
*/
onReady: function () {
},
/**
* 生命周期函数--监听页面显示
*/
onShow: function () {
},
/**
* 生命周期函数--监听页面隐藏
*/
onHide: function () {
},
/**
* 生命周期函数--监听页面卸载
*/
onUnload: function () {
},
/**
* 页面相关事件处理函数--监听用户下拉动作
*/
onPullDownRefresh: function () {
},
/**
* 页面上拉触底事件的处理函数
*/
onReachBottom: function () {
},
/**
* 用户点击右上角分享
*/
onShareAppMessage: function () {
}
})

4
demo/pages/basics/image/image.json
View File

@@ -1 +1,3 @@
{}
{
"usingComponents": {}
}

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

@@ -1,14 +1,2 @@
<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>
</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>
<!--pages/basics/image/image.wxml-->
<text>pages/basics/image/image.wxml</text>

20
demo/pages/basics/image/image.wxss
View File

@@ -1,19 +1 @@
/* 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);
} */
/* pages/basics/image/image.wxss */

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

@@ -86,11 +86,7 @@
<view class="cu-form-group margin-top">
<view class='title'>开关选择</view>
<switch class='sm'></switch>
</view>
<view class="cu-form-group">
<view class='title'>大号开关</view>
<switch class=''></switch>
<switch></switch>
</view>
<view class="cu-form-group">
<view class='title'>定义颜色</view>
@@ -109,10 +105,6 @@
<view class='title'>单选操作(radio)</view>
<radio checked></radio>
</view>
<view class="cu-form-group">
<view class='title'>定义尺寸</view>
<radio class='sm'></radio>
</view>
<view class="cu-form-group">
<view class='title'>定义样式</view>
<radio class='radio'></radio>
@@ -130,10 +122,6 @@
<view class='title'>复选选操作(checkbox)</view>
<checkbox></checkbox>
</view>
<view class="cu-form-group">
<view class='title'>定义尺寸</view>
<checkbox class='sm' checked></checkbox>
</view>
<view class="cu-form-group">
<view class='title'>定义形状</view>
<checkbox class='round' checked></checkbox>

3
demo/pages/component/home/home.js
View File

@@ -8,8 +8,9 @@ Page({
{ 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: 'swiper', color: 'olive', icon: 'album' },
{ title: '模态框', name: 'modal', color: 'grey', icon: 'squarecheckfill' },
{ title: '步骤条', name: 'steps', color: 'cyan', icon: 'roundcheckfill' },
],
},
onLoad: function () {

121
demo/pages/component/list/list.js
View File

@@ -3,11 +3,128 @@ Page({
data: {
StatusBar: app.globalData.StatusBar,
CustomBar: app.globalData.CustomBar,
iconList: [{
icon: 'cardboardfill',
color: 'red',
badge: 120,
name: 'VR'
}, {
icon: 'recordfill',
color: 'orange',
badge: 1,
name: '录像'
}, {
icon: 'picfill',
color: 'yellow',
badge: 0,
name: '图像'
}, {
icon: 'noticefill',
color: 'olive',
badge: 22,
name: '通知'
}, {
icon: 'upstagefill',
color: 'cyan',
badge: 0,
name: '排行榜'
}, {
icon: 'clothesfill',
color: 'blue',
badge: 0,
name: '皮肤'
}, {
icon: 'discoverfill',
color: 'purple',
badge: 0,
name: '发现'
}, {
icon: 'questionfill',
color: 'mauve',
badge: 0,
name: '帮助'
}, {
icon: 'commandfill',
color: 'purple',
badge: 0,
name: '问答'
}, {
icon: 'brandfill',
color: 'mauve',
badge: 0,
name: '版权'
}],
gridCol:3,
skin: false
},
switchSex: function(e) {
showModal(e) {
this.setData({
modalName: e.currentTarget.dataset.target
})
},
hideModal(e) {
this.setData({
modalName: null
})
},
gridchange: function (e) {
this.setData({
gridCol: e.detail.value
});
},
gridswitch: function (e) {
this.setData({
gridBorder: e.detail.value
});
},
menuBorder: function (e) {
this.setData({
menuBorder: e.detail.value
});
},
menuArrow: function (e) {
this.setData({
menuArrow: e.detail.value
});
},
menuCard: function (e) {
this.setData({
menuCard: e.detail.value
});
},
switchSex: function (e) {
this.setData({
skin: e.detail.value
});
});
},
// ListTouch触摸开始
ListTouchStart(e) {
this.setData({
ListTouchStart: e.touches[0].pageX
})
},
// ListTouch计算方向
ListTouchMove(e) {
this.setData({
ListTouchDirection: e.touches[0].pageX - this.data.ListTouchStart > 0 ? 'right' : 'left'
})
},
// ListTouch计算滚动
ListTouchEnd(e) {
if (this.data.ListTouchDirection =='left'){
this.setData({
modalName: e.currentTarget.dataset.target
})
} else {
this.setData({
modalName: null
})
}
this.setData({
ListTouchDirection: null
})
},
})

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

@@ -5,446 +5,269 @@
</navigator>
</view>
</view>
<view class="page {{skin?' invert ':' '}}">
<view class="cu-list grid col-3">
<view class="cu-item">
<text class='icon-cardboardfill text-red'></text>
<text>VR</text>
</view>
<view class="cu-item">
<text class='icon-recordfill text-orange'></text>
<text>录像</text>
</view>
<view class="cu-item">
<text class='icon-picfill text-yellow'></text>
<text>图像</text>
</view>
<view class="cu-item">
<text class='icon-noticefill text-olive'>
<view class="cu-tag badge">99+</view>
</text>
<text>通知</text>
</view>
<view class="cu-item">
<text class='icon-upstagefill text-cyan'></text>
<text>排行榜</text>
</view>
<view class="cu-item">
<text class='icon-clothesfill text-blue'>
<view class="cu-tag badge"></view>
</text>
<text>皮肤</text>
</view>
<view class="cu-item">
<text class='icon-discoverfill text-purple'></text>
<text>发现</text>
</view>
<view class="cu-item">
<text class='icon-questionfill text-mauve'></text>
<text>帮助</text>
</view>
<view class="cu-item">
<text class='icon-servicefill text-pink'></text>
<text>反馈</text>
</view>
<view class="cu-bar solid-bottom margin-top">
<view class='action'>
<text class='icon-title text-orange '></text> 宫格列表
</view>
<view class="cu-list grid col-4">
<view class="cu-item">
<text class='icon-cardboardfill text-red'></text>
<text>VR</text>
</view>
<view class="cu-item">
<text class='icon-recordfill text-orange'></text>
<text>录像</text>
</view>
<view class="cu-item">
<text class='icon-picfill text-yellow'></text>
<text>图像</text>
</view>
<view class="cu-item">
<text class='icon-noticefill text-olive'>
<view class="cu-tag badge">99+</view>
</text>
<text>通知</text>
</view>
<view class="cu-item">
<text class='icon-upstagefill text-cyan'></text>
<text>排行榜</text>
</view>
<view class="cu-item">
<text class='icon-clothesfill text-blue'>
<view class="cu-tag badge"></view>
</text>
<text>皮肤</text>
</view>
<view class="cu-item">
<text class='icon-discoverfill text-purple'></text>
<text>发现</text>
</view>
<view class="cu-item">
<text class='icon-questionfill text-mauve'></text>
<text>帮助</text>
</view>
<view class='action'>
<button class='cu-btn bg-green shadow' bindtap="showModal" data-target="gridModal">设置</button>
</view>
<view class="cu-list grid no-border col-4">
<view class="cu-item">
<text class='icon-cardboardfill text-red'></text>
<text>VR</text>
</view>
<view class="cu-item">
<text class='icon-recordfill text-orange'></text>
<text>录像</text>
</view>
<view class="cu-item">
<text class='icon-picfill text-yellow'></text>
<text>图像</text>
</view>
<view class="cu-item">
<text class='icon-noticefill text-olive'>
<view class="cu-tag badge">99+</view>
</text>
<text>通知</text>
</view>
<view class="cu-item">
<text class='icon-upstagefill text-cyan'></text>
<text>排行榜</text>
</view>
<view class="cu-item">
<text class='icon-clothesfill text-blue'>
<view class="cu-tag badge"></view>
</text>
<text>皮肤</text>
</view>
<view class="cu-item">
<text class='icon-discoverfill text-purple'></text>
<text>发现</text>
</view>
<view class="cu-item">
<text class='icon-questionfill text-mauve'></text>
<text>帮助</text>
</view>
</view>
<view class="cu-list grid col-5 no-border">
<view class="cu-item">
<text class='icon-cardboardfill text-red'>
<view class="cu-tag badge">99+</view>
</text>
<text>VR</text>
</view>
<view class="cu-item">
<text class='icon-recordfill text-orange'></text>
<text>录像</text>
</view>
<view class="cu-item">
<text class='icon-picfill text-yellow'></text>
<text>图像</text>
</view>
<view class="cu-item">
<text class='icon-noticefill text-olive'>
</text>
<text>通知</text>
</view>
<view class="cu-item">
<text class='icon-upstagefill text-cyan'></text>
<text>排行榜</text>
</view>
<view class="cu-item">
<text class='icon-clothesfill text-blue'>
<view class="cu-tag badge"></view>
</text>
<text>皮肤</text>
</view>
<view class="cu-item">
<text class='icon-discoverfill text-purple'></text>
<text>发现</text>
</view>
<view class="cu-item">
<text class='icon-questionfill text-mauve'></text>
<text>帮助</text>
</view>
<view class="cu-item">
<text class='icon-commandfill text-purple'></text>
<text>问答</text>
</view>
<view class="cu-item">
<text class='icon-brandfill text-mauve'></text>
<text>版权</text>
</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>
<view class='text-gray text-sm'>
<text class='icon-infofill'></text> 皮肤需要付费购买</view>
</view>
<view class='action'>
<switch class='switch-sex sm' bindchange="switchSex"></switch>
</view>
</view>
<view class="cu-item">
<view class='content'>
<view>
<text class='icon-musicfill text-red'></text> 声音控制</view>
<view class='text-gray text-sm'>
<text class='icon-infofill'></text> 需要获得系统权限</view>
</view>
<view class='action'>
<switch class='switch-music'></switch>
</view>
</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'>
<text class='icon-infofill text-red'></text> 消息未送达</view>
</view>
<view class='action'>
<view class='text-grey text-xs'>22:20</view>
<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>
<view class='content'>
<view class='text-grey'>文晓港
<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>
</view>
<view class='action'>
<view class='text-grey text-xs'>22:20</view>
<text class='icon-notice_forbid_fill text-gray'></text>
</view>
</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'>
喵星酱：喵喵喵！</view>
</view>
<view class='action'>
<view class='text-grey text-xs'>22:20</view>
<view class="cu-tag round bg-red sm">5</view>
</view>
</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'>
喵星酱：喵喵喵！</view>
</view>
<view class='action'>
<view class='text-grey text-xs'>22:20</view>
<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>
<view class='content'>
<view>喵星人互动群
<view class="cu-tag round bg-orange sm">6人</view>
</view>
<view class='text-gray text-sm'>
喵星酱：
<text class='icon-picfill text-orange'></text> 图片传输中...</view>
</view>
<view class='action'>
<view class='text-grey text-xs'>22:20</view>
<text class='icon-notice_forbid_fill text-gray'></text>
</view>
</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>
</view>
<view class="cu-item">
<view class='content'>
<image src='/images/logo.png' class='png' mode='aspectFit'></image>
<text class='text-grey'>图片 + 标题</text>
</view>
</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>
</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>
</view>
<view class="cu-item">
<view class='content'>
<text class='icon-emojifill text-red'></text>
<text class='text-grey'>头像</text>
</view>
<view class='action'>
<view class="cu-avatar sm round">
<text class='icon-people'></text>
</view>
<view class="cu-modal {{modalName=='gridModal'?'show':''}}" bindtap='hideModal'>
<view class="cu-dialog" catchtap>
<radio-group class="block" bindchange="gridchange">
<view class='cu-list menu text-left'>
<view class='cu-item' wx:for="{{3}}" wx:key>
<label class='flex justify-between align-center flex-sub'>
<view class='flex-sub'>{{index +3}} 列</view>
<radio class='round' value='{{index +3}}' checked='{{gridCol==index+3}}'></radio>
</label>
</view>
</view>
</view>
<view class="cu-item">
<view class='content'>
<text class='icon-emojiflashfill text-pink'></text>
<text class='text-grey'>头像组</text>
</view>
<view class='action'>
<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>
</radio-group>
<view class='cu-list menu text-left solid-top'>
<view class='cu-item'>
<view class='content'>
<text class='text-grey'>边框</text>
</view>
<text class='text-grey text-sm'>4 人</text>
</view>
</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='cu-btn round bg-green sm'>
<text class='icon-upload'></text> 上传</button>
</view>
</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='cu-btn round bg-blue'>
<text class='icon-down'></text> 下载</button>
</view>
</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>
</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'>
<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>
</view>
<view class="cu-item arrow">
<view class='content'>
<text class='icon-warn text-green'></text>
<text class='text-grey'>文本</text>
</view>
<view class='action'>
<text class='text-grey text-sm'>小目标还没有实现！</text>
</view>
</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>
</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'>
<view class='cu-tag bg-red round'></view>
</view>
</view>
<view class="cu-item">
<view class='content'>
<text class='icon-tagfill text-olive'></text>
<text class='text-grey'>标签</text>
</view>
<view class='action'>
<view class='cu-tag bg-olive round'>9</view>
</view>
</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'>
<view class="cu-capsule round">
<view class='cu-tag bg-blue'>
<text class='icon-locationfill'></text>
</view>
<view class="cu-tag line-blue">
广州
</view>
<view class='action'>
<switch bindchange="gridswitch"></switch>
</view>
</view>
</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'>
<view class='cu-tag bg-red round'></view>
</view>
<view class="cu-list grid col-{{gridCol}} {{gridBorder?'':'no-border'}}">
<view class="cu-item" wx:for="{{iconList}}" wx:key wx:if="{{index<gridCol*2}}">
<view class='icon-{{item.icon}} text-{{item.color}}'>
<view class="cu-tag badge" wx:if="{{item.badge!=0}}">
<block wx:if="{{item.badge!=1}}">{{item.badge>99?'99+':item.badge}}</block>
</view>
</view>
<view class="cu-item">
<view class='content'>
<text class='icon-tagfill text-olive'></text>
<text class='text-grey'>标签</text>
<text>{{item.name}}</text>
</view>
</view>
<view class="cu-bar solid-bottom margin-top">
<view class='action'>
<text class='icon-title text-orange '></text> 菜单列表
</view>
<view class='action'>
<button class='cu-btn bg-green shadow' bindtap="showModal" data-target="menuModal">设置</button>
</view>
</view>
<view class="cu-modal {{modalName=='menuModal'?'show':''}}" bindtap='hideModal'>
<view class="cu-dialog" catchtap>
<view class='cu-list menu text-left solid-top'>
<view class='cu-item'>
<view class='content'>
<text class='text-grey'>短边框</text>
</view>
<view class='action'>
<switch bindchange="menuBorder"></switch>
</view>
</view>
<view class='action'>
<view class='cu-tag bg-olive round'>9</view>
<view class='cu-item'>
<view class='content'>
<text class='text-grey'>箭头</text>
</view>
<view class='action'>
<switch bindchange="menuArrow"></switch>
</view>
</view>
</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'>
<view class="cu-capsule round">
<view class='cu-tag bg-blue'>
<text class='icon-locationfill'></text>
</view>
<view class="cu-tag line-blue">
广州
</view>
<view class='cu-item'>
<view class='content'>
<text class='text-grey'>卡片</text>
</view>
<view class='action'>
<switch bindchange="menuCard"></switch>
</view>
</view>
</view>
</view>
</view>
</view>
<view class="cu-list menu {{menuBorder?'sm-border':''}} {{menuCard?'card-menu margin-top':''}}">
<view class="cu-item {{menuArrow?'arrow':''}}">
<view class='content'>
<text class='icon-circlefill text-grey'></text>
<text class='text-grey'>图标 + 标题</text>
</view>
</view>
<view class="cu-item {{menuArrow?'arrow':''}}">
<view class='content'>
<image src='/images/logo.png' class='png' mode='aspectFit'></image>
<text class='text-grey'>图片 + 标题</text>
</view>
</view>
<view class="cu-item {{menuArrow?'arrow':''}}">
<button class='cu-btn content' open-type='contact'>
<text class='icon-btn text-olive'></text>
<text class='text-grey'>Open-type 按钮</text>
</button>
</view>
<view class="cu-item {{menuArrow?'arrow':''}}">
<navigator class='content' hover-class='none' url='../list/list' open-type="redirect">
<text class='icon-discoverfill text-orange'></text>
<text class='text-grey'>Navigator 跳转</text>
</navigator>
</view>
<view class="cu-item {{menuArrow?'arrow':''}}">
<view class='content'>
<text class='icon-emojiflashfill text-pink'></text>
<text class='text-grey'>头像组</text>
</view>
<view class='action'>
<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>
</view>
<view class="cu-item {{menuArrow?'arrow':''}}">
<view class='content'>
<text class='icon-btn text-green'></text>
<text class='text-grey'>按钮</text>
</view>
<view class='action'>
<button class='cu-btn round bg-green shadow'>
<text class='icon-upload'></text> 上传</button>
</view>
</view>
<view class="cu-item {{menuArrow?'arrow':''}}">
<view class='content'>
<text class='icon-tagfill text-red'></text>
<text class='text-grey'>标签</text>
</view>
<view class='action'>
<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>
</view>
<view class="cu-item {{menuArrow?'arrow':''}}">
<view class='content'>
<text class='icon-warn text-green'></text>
<text class='text-grey'>文本</text>
</view>
<view class='action'>
<text class='text-grey text-sm'>小目标还没有实现！</text>
</view>
</view>
<view class="cu-item">
<view class='content padding-tb-sm'>
<view>
<text class='icon-clothesfill text-blue'></text> 多行Item</view>
<view class='text-gray text-sm'>
<text class='icon-infofill'></text> 小目标还没有实现！</view>
</view>
<view class='action'>
<switch class='switch-sex sm' bindchange="switchSex"></switch>
</view>
</view>
</view>
<view class="cu-bar solid-bottom margin-top">
<view class='action'>
<text class='icon-title text-orange '></text> 消息列表
</view>
</view>
<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'>
<view class='text-grey'>文晓港</view>
<view class='text-gray text-sm'>
<text class='icon-infofill text-red'></text> 消息未送达</view>
</view>
<view class='action'>
<view class='text-grey text-xs'>22:20</view>
<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>
<view class='content'>
<view class='text-grey'>文晓港
<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>
</view>
<view class='action'>
<view class='text-grey text-xs'>22:20</view>
<view class='icon-notice_forbid_fill text-gray'></view>
</view>
</view>
<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'>
喵星酱：喵喵喵！</view>
</view>
<view class='action'>
<view class='text-grey text-xs'>22:20</view>
<view class="cu-tag round bg-red sm">5</view>
</view>
</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'>
喵星酱：喵喵喵！</view>
</view>
<view class='action'>
<view class='text-grey text-xs'>22:20</view>
<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>
<view class='content'>
<view>喵星人互动群
<view class="cu-tag round bg-orange sm">6人</view>
</view>
<view class='text-gray text-sm'>
喵星酱：
<text class='icon-picfill text-orange'></text> 图片传输中...</view>
</view>
<view class='action'>
<view class='text-grey text-xs'>22:20</view>
<view class='icon-notice_forbid_fill text-gray'></view>
</view>
</view>
</view>
<view class="cu-bar solid-bottom margin-top">
<view class='action'>
<text class='icon-title text-orange '></text> 列表右滑
</view>
</view>
<view class="cu-list menu menu-avatar">
<view class="cu-item {{modalName=='move-box-'+ index?'move-cur':''}}" wx:for="{{4}}" wx:key bindtouchstart='ListTouchStart' bindtouchmove='ListTouchMove' bindtouchend='ListTouchEnd' data-target="move-box-{{index}}">
<view class="cu-avatar round lg" style="background-image:url(https://image.weilanwl.com/img/square-{{index+1}}.jpg);"></view>
<view class='content'>
<view class='text-grey'>文晓港</view>
<view class='text-gray text-sm'>
<text class='icon-infofill text-red'></text> 消息未送达</view>
</view>
<view class='action'>
<view class='text-grey text-xs'>22:20</view>
<view class="cu-tag round bg-grey sm">5</view>
</view>
<view class='move'>
<view class='bg-grey'>置顶</view>
<view class="bg-red">删除</view>
</view>
</view>
</view>

18
demo/pages/component/list/list.wxss
View File

@@ -17,21 +17,3 @@
.switch-music::before {
content: "\e6db";
}
.invert {
filter: invert(100%);
}
.invert avatar tag, .invert [class*="text-"] tag,
.invert [class*="text-"] [class*="text-"] {
filter: invert(0%);
}
.invert button, .invert tag, .invert image, .invert avatar, .invert switch,
.invert [class*="text-"] {
filter: invert(100%);
}
.invert list.menu, .invert list.grid {
background: #ddd;
}

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

@@ -6,9 +6,9 @@
</view>
</view>
<view class="cu-bar ">
<view class="cu-bar">
<view class='action'>
<text class='icon-titles text-orange '></text> 模态窗口
<text class='icon-title text-orange '></text> 模态窗口
</view>
<view class='action'>
<button class='cu-btn bg-green shadow' bindtap="showModal" data-target="Modal">Modal</button>
@@ -28,9 +28,9 @@
</view>
</view>
<view class="cu-bar margin-top">
<view class="cu-bar margin-top">
<view class='action'>
<text class='icon-titles text-orange '></text> 底部窗口
<text class='icon-title text-orange '></text> 底部窗口
</view>
<view class='action'>
<button class='cu-btn bg-green shadow' bindtap="showModal" data-target="bottomModal">Bottom</button>
@@ -38,7 +38,7 @@
</view>
<view class="cu-modal bottom-modal {{modalName=='bottomModal'?'show':''}}">
<view class="cu-dialog">
<view class="cu-bar ">
<view class="cu-bar">
<view class='action text-green'>确定</view>
<view class='action text-blue' bindtap='hideModal'>取消</view>
</view>
@@ -48,9 +48,9 @@
</view>
</view>
<view class="cu-bar margin-top">
<view class="cu-bar margin-top">
<view class='action'>
<text class='icon-titles text-orange '></text> 对话窗口
<text class='icon-title text-orange '></text> 对话窗口
</view>
<view class='action'>
<button class='cu-btn bg-green shadow' bindtap="showModal" data-target="DialogModal1">Dialog</button>
@@ -98,9 +98,9 @@
</view>
</view>
<view class="cu-bar margin-top">
<view class="cu-bar margin-top">
<view class='action'>
<text class='icon-titles text-orange '></text> 图片窗口
<text class='icon-title text-orange '></text> 图片窗口
</view>
<view class='action'>
<button class='cu-btn bg-green shadow' bindtap="showModal" data-target="Image">Image</button>
@@ -120,4 +120,107 @@
<view class='action margin-0 flex-sub solid-left' bindtap='hideModal'>我知道了</view>
</view>
</view>
</view>
<view class="cu-bar margin-top">
<view class='action'>
<text class='icon-title text-orange '></text> 单选窗口
</view>
<view class='action'>
<button class='cu-btn bg-green shadow' bindtap="showModal" data-target="RadioModal">Radio</button>
</view>
</view>
<view class="cu-modal {{modalName=='RadioModal'?'show':''}}" bindtap='hideModal'>
<view class="cu-dialog" catchtap>
<radio-group class="block">
<view class='cu-list menu text-left'>
<view class='cu-item' wx:for="{{5}}" wx:key>
<label class='flex justify-between align-center flex-sub'>
<view class='flex-sub'>Item {{index +1}}</view>
<radio class='round'></radio>
</label>
</view>
</view>
</radio-group>
</view>
</view>
<view class="cu-bar margin-top">
<view class='action'>
<text class='icon-title text-orange '></text> 多选窗口
</view>
<view class='action'>
<button class='cu-btn bg-green shadow' bindtap="showModal" data-target="ChooseModal">Choose</button>
</view>
</view>
<view class="cu-modal bottom-modal {{modalName=='ChooseModal'?'show':''}}" bindtap='hideModal'>
<view class="cu-dialog" catchtap>
<view class="cu-bar">
<view class='action text-green'>确定</view>
<view class='action text-blue' bindtap='hideModal'>取消</view>
</view>
<view class='grid col-3 padding-sm'>
<view wx:for="{{9}}" class='padding-xs' wx:key>
<button class='cu-btn orange lg block {{index == 2?"bg":"line"}}-orange'>Item {{index + 1}}</button>
</view>
</view>
</view>
</view>
<view class="cu-bar margin-top">
<view class='action'>
<text class='icon-title text-orange '></text> 侧边抽屉
</view>
<view class='action'>
<button class='cu-btn bg-green shadow' bindtap="showModal" data-target="DrawerModalL">Left</button>
<button class='cu-btn bg-blue shadow margin-left' bindtap="showModal" data-target="DrawerModalR">Right</button>
</view>
</view>
<view class="cu-modal drawer-modal justify-start {{modalName=='DrawerModalL'?'show':''}}" bindtap='hideModal'>
<view class="cu-dialog basis-lg" catchtap style="top:{{CustomBar}}px;">
<view class='cu-list menu text-left'>
<view class='cu-item arrow' wx:for="{{5}}" wx:key>
<view class='content'>
<view>Item {{index +1}}</view>
</view>
</view>
</view>
</view>
</view>
<view class="cu-modal drawer-modal justify-end {{modalName=='DrawerModalR'?'show':''}}" bindtap='hideModal'>
<view class="cu-dialog basis-lg" catchtap style="top:{{CustomBar}}px;">
<view class="cu-list menu menu-avatar text-left">
<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'>
<text class='icon-infofill text-red'></text> 消息未送达</view>
</view>
<view class='action'>
<view class='text-grey text-xs'>22:20</view>
<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>
<view class='content'>
<view class='text-grey'>文晓港
<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>
</view>
<view class='action'>
<view class='text-grey text-xs'>22:20</view>
<text class='icon-notice_forbid_fill text-gray'></text>
</view>
</view>
</view>
</view>
</view>

48
demo/pages/component/steps/steps.js Normal file
View File

@@ -0,0 +1,48 @@
const app = getApp();
Page({
data: {
StatusBar: app.globalData.StatusBar,
CustomBar: app.globalData.CustomBar,
basicsList: [{
icon: 'usefullfill',
name: '开始'
}, {
icon: 'radioboxfill',
name: '等待'
}, {
icon: 'roundclosefill',
name: '错误'
}, {
icon: 'roundcheckfill',
name: '完成'
},],
basics: 0,
numList: [{
name: '开始'
}, {
name: '等待'
}, {
name: '错误'
}, {
name: '完成'
},],
num: 0,
scroll: 0
},
basicsSteps() {
this.setData({
basics: this.data.basics == this.data.basicsList.length - 1 ? 0 : this.data.basics + 1
})
},
numSteps() {
this.setData({
num: this.data.num == this.data.numList.length - 1 ? 0 : this.data.num + 1
})
},
scrollSteps() {
this.setData({
scroll: this.data.scroll == 9 ? 0 : this.data.scroll + 1
})
}
});

3
demo/pages/component/steps/steps.json Normal file
View File

@@ -0,0 +1,3 @@
{
"usingComponents": {}
}

66
demo/pages/component/steps/steps.wxml Normal file
View File

@@ -0,0 +1,66 @@
<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>
</view>
</view>
<view class="cu-bar solid-bottom">
<view class='action'>
<text class='icon-title text-orange'></text> 基本用法
</view>
<view class='action'>
<button class='cu-btn bg-green shadow' bindtap='basicsSteps'>下一步</button>
</view>
</view>
<view class='bg-white padding'>
<view class='cu-steps'>
<view class='cu-item {{index>basics?"":"text-red"}}' wx:for="{{basicsList}}" wx:key>
<text class='icon-{{item.icon}}'></text> {{item.name}}
</view>
</view>
</view>
<view class='bg-white padding margin-top-xs'>
<view class='cu-steps'>
<view class='cu-item {{index>basics?"":"text-orange"}}' wx:for="{{basicsList}}" wx:key>
<text class='icon-{{index>basics?"title":item.icon}}'></text> {{item.name}}
</view>
</view>
</view>
<view class='bg-white padding margin-top-xs'>
<view class='cu-steps steps-arrow'>
<view class='cu-item {{index>basics?"":"text-blue"}}' wx:for="{{basicsList}}" wx:key>
<text class='icon-{{item.icon}}'></text> {{item.name}}
</view>
</view>
</view>
<view class="cu-bar solid-bottom margin-top">
<view class='action'>
<text class='icon-title text-orange'></text> 数字完成
</view>
<view class='action'>
<button class='cu-btn bg-green shadow' bindtap='numSteps'>下一步</button>
</view>
</view>
<view class='bg-white padding'>
<view class='cu-steps'>
<view class='cu-item {{index>num?"":"text-blue"}}' wx:for="{{numList}}" wx:key>
<text class='num {{index==2?"err":""}}' data-index='{{index + 1}}'></text> {{item.name}}
</view>
</view>
</view>
<view class="cu-bar solid-bottom margin-top">
<view class='action'>
<text class='icon-title text-orange'></text> 多级显示
</view>
<view class='action'>
<button class='cu-btn bg-green shadow' bindtap='scrollSteps'>下一步</button>
</view>
</view>
<scroll-view scroll-x class='bg-white padding response cu-steps steps-bottom' scroll-into-view="scroll-{{scroll}}" scroll-with-animation>
<view class='cu-item {{index>scroll?"":"text-blue"}} padding-lr-xl' wx:for="{{10}}" wx:key id="scroll-{{index}}">
Level {{index + 1}} <text class='num' data-index='{{index + 1}}'></text>
</view>
</scroll-view>

125
demo/pages/component/steps/steps.wxss Normal file
View File

@@ -0,0 +1,125 @@
.steps-bottom.cu-steps .cu-item .num::before {
content: "\e668";
font-family: 'iconfont';
}
.cu-steps {
display: flex;
}
scroll-view.cu-steps {
display: block;
white-space: nowrap;
}
scroll-view.cu-steps .cu-item {
display: inline-block;
}
.cu-steps .cu-item {
flex: 1;
text-align: center;
color: #aaa;
position: relative;
min-width: 100rpx;
}
.cu-steps .cu-item [class*="icon"], .cu-steps .cu-item .num {
display: block;
font-size: 40rpx;
line-height: 80rpx;
}
.cu-steps .cu-item::before, .cu-steps .cu-item::after,.cu-steps.steps-arrow .cu-item::before, .cu-steps.steps-arrow .cu-item::after {
content: "";
display: block;
position: absolute;
height: 0px;
width: calc(100% - 80rpx);
border-bottom: 1px solid #ccc;
left: calc(0px - (100% - 80rpx) / 2);
top: 40rpx;
z-index: 0;
}
.cu-steps.steps-arrow .cu-item::before, .cu-steps.steps-arrow .cu-item::after {
content: "\e6a3";
font-family: 'iconfont';
height: 30rpx;
border-bottom-width: 0px;
line-height: 30rpx;
top: 0;
bottom: 0;
margin: auto;
color: #ccc;
}
.cu-steps.steps-bottom .cu-item::before, .cu-steps.steps-bottom .cu-item::after {
bottom: 40rpx;
top: initial;
}
.cu-steps .cu-item::after {
border-bottom: 1px solid currentColor;
width: 0px;
transition: all 0.3s ease-in-out 0s;
}
.cu-steps .cu-item[class*="text-"]::after {
width: calc(100% - 80rpx);
color: currentColor !important;
}
.cu-steps .cu-item:first-child::before, .cu-steps .cu-item:first-child::after {
display: none;
}
.cu-steps .cu-item .num {
width: 40rpx;
height: 40rpx;
border-radius: 50%;
line-height: 40rpx;
margin: 20rpx auto;
font-size: 24rpx;
border: 1px solid currentColor;
position: relative;
overflow: hidden;
}
.cu-steps .cu-item[class*="text-"] .num {
background-color: currentColor;
}
.cu-steps .cu-item .num::before, .cu-steps .cu-item .num::after {
content: attr(data-index);
position: absolute;
left: 0;
right: 0;
top: 0;
bottom: 0;
margin: auto;
transition: all 0.3s ease-in-out 0s;
transform: translateY(0rpx);
}
.cu-steps .cu-item[class*="text-"] .num::before {
transform: translateY(-40rpx);
color: #fff;
}
.cu-steps .cu-item .num::after {
transform: translateY(40rpx);
color: #fff;
transition: all 0.3s ease-in-out 0s;
}
.cu-steps .cu-item[class*="text-"] .num::after {
content: "\e645";
font-family: 'iconfont';
color: #fff;
transform: translateY(0rpx);
}
.cu-steps .cu-item[class*="text-"] .num.err::after {
content: "\e646";
}

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

@@ -6,13 +6,29 @@
</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>
<image src='https://image.weilanwl.com/gif/wave.gif' mode='scaleToFill' class='gif-black response' style='height:100rpx'></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>
<image src='https://image.weilanwl.com/gif/loading-black.gif' mode='aspectFit' class='gif-black response' style='height:240rpx'></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>
<image src='https://image.weilanwl.com/gif/loading-white.gif' mode='aspectFit' class='gif-white response' style='height:240rpx'></image>
</view>
</view>
<view class="margin flex">
<view class='gradual-blue flex-sub margin-right radius shadow-lg'>
<image src='https://image.weilanwl.com/gif/rhomb-black.gif' mode='aspectFit' class='gif-black response' style='height:240rpx'></image>
</view>
<view class='bg-white flex-sub radius shadow-lg'>
<image src='https://image.weilanwl.com/gif/rhomb-white.gif' mode='aspectFit' class='gif-white response' style='height:240rpx'></image>
</view>
</view>
<view class="margin flex">
<view class='bg-white flex-sub margin-right radius shadow-lg'>
<image src='https://image.weilanwl.com/gif/loading-1.gif' mode='aspectFit' class='gif-white response' style='height:240rpx'></image>
</view>
<view class='bg-black flex-sub radius shadow-lg'>
<image src='https://image.weilanwl.com/gif/loading-2.gif' mode='aspectFit' class='gif-black response' style='height:240rpx'></image>
</view>
</view>

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

@@ -2,20 +2,10 @@ image[class*="gif-"]{
border-radius: 6rpx;
display: block;
}
.gif-wave{
mix-blend-mode: screen;
width: 100%;
height: 100rpx;
}
.gif-loading-black{
.gif-black{
mix-blend-mode: screen;
width: 100%;
height: 280rpx;
}
.gif-loading-white{
.gif-white{
mix-blend-mode: multiply;
width: 100%;
height: 280rpx;
}

104
demo/project.config.json
View File

@@ -1,43 +1,43 @@
{
"description": "项目配置文件",
"packOptions": {
"ignore": []
},
"setting": {
"urlCheck": true,
"es6": true,
"postcss": true,
"minified": true,
"newFeature": true
},
"compileType": "miniprogram",
"libVersion": "2.4.1",
"appid": "wxfd5241d66a07713f",
"projectname": "GitHub-ColorUI",
"debugOptions": {
"hidedInDevtools": []
},
"isGameTourist": false,
"condition": {
"search": {
"current": -1,
"list": []
},
"conversation": {
"current": -1,
"list": []
},
"plugin": {
"current": -1,
"list": []
},
"game": {
"currentL": -1,
"list": []
},
"miniprogram": {
"current": 2,
"list": [
"description": "项目配置文件",
"packOptions": {
"ignore": []
},
"setting": {
"urlCheck": true,
"es6": true,
"postcss": true,
"minified": true,
"newFeature": true
},
"compileType": "miniprogram",
"libVersion": "2.4.1",
"appid": "wxfd5241d66a07713f",
"projectname": "ColorUI2.0-test",
"debugOptions": {
"hidedInDevtools": []
},
"isGameTourist": false,
"condition": {
"search": {
"current": -1,
"list": []
},
"conversation": {
"current": -1,
"list": []
},
"plugin": {
"current": -1,
"list": []
},
"game": {
"currentL": -1,
"list": []
},
"miniprogram": {
"current": 2,
"list": [
{
"id": 0,
"name": "-----基础-首页-----",
@@ -70,43 +70,43 @@
},
{
"id": 2,
"name": "1.2 基础-按钮",
"name": "1.5 基础-按钮",
"pathName": "pages/basics/button/button",
"query": ""
},
{
"id": 2,
"name": "1.2 -- 基础-按钮-设计",
"name": "1.5 -- 基础-按钮-设计",
"pathName": "pages/basics/button/design",
"query": ""
},
{
"id": 2,
"name": "1.3 基础-标签",
"name": "1.6 基础-标签",
"pathName": "pages/basics/tag/tag",
"query": ""
},
{
"id": -1,
"name": "1.4 基础-头像",
"name": "1.7 基础-头像",
"pathName": "pages/basics/avatar/avatar",
"query": ""
},
{
"id": -1,
"name": "1.5 基础-进度条",
"name": "1.8 基础-进度条",
"pathName": "pages/basics/progress/progress",
"query": ""
},
{
"id": 10,
"name": "1.6 基础-边框阴影",
"name": "1.9 基础-边框阴影",
"pathName": "pages/basics/shadow/shadow",
"query": ""
},
{
"id": -1,
"name": "1.7 基础-加载",
"name": "1.10 基础-加载",
"pathName": "pages/basics/loading/loading",
"query": ""
},
@@ -170,6 +170,12 @@
"pathName": "pages/component/modal/modal",
"query": ""
},
{
"id": 20,
"name": "2.10 组件-步骤条",
"pathName": "pages/component/steps/steps",
"query": ""
},
{
"id": -1,
"name": "-----扩展-首页-----",
@@ -188,7 +194,7 @@
"pathName": "pages/plugin/animation/animation",
"query": ""
}
]
}
}
]
}
}
}