diff --git a/demo/app.js b/demo/app.js index 998edf1..d5a9867 100644 --- a/demo/app.js +++ b/demo/app.js @@ -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; } diff --git a/demo/app.json b/demo/app.json index 8cee531..7687b49 100644 --- a/demo/app.json +++ b/demo/app.json @@ -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" ], diff --git a/demo/colorui.wxss b/demo/colorui.wxss index d422858..5be1d23 100644 --- a/demo/colorui.wxss +++ b/demo/colorui.wxss @@ -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.cur { - background-color: #fcf7e9; + +.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>.cu-item:last-child { +.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.no-padding>.cu-item { - padding: 30rpx; +.cu-list.menu>.cu-item.cur { + background-color: #fcf7e9; } -.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,16 +1587,16 @@ 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: 110rpx; + padding-left: 140rpx; height: 140rpx; } +.cu-list.menu-avatar>.cu-item>.cu-avatar { + position: absolute; + left: 30rpx; +} + .cu-list.menu>.cu-item .content .cu-tag.sm { font-size: 16rpx; line-height: 80%; @@ -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-3>.cu-item:nth-child(3n)::after { + border-right-width: 0px; } -.cu-list.grid.col-4>.cu-item:nth-child(4n) { - 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) { - border-right: 0rpx; +.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; -} \ No newline at end of file +} diff --git a/demo/images/tabbar/about.png b/demo/images/tabbar/about.png new file mode 100644 index 0000000..a2e5acc Binary files /dev/null and b/demo/images/tabbar/about.png differ diff --git a/demo/images/tabbar/about_cur.png b/demo/images/tabbar/about_cur.png new file mode 100644 index 0000000..36769f6 Binary files /dev/null and b/demo/images/tabbar/about_cur.png differ diff --git a/demo/images/wave.gif b/demo/images/wave.gif new file mode 100644 index 0000000..5e50b86 Binary files /dev/null and b/demo/images/wave.gif differ diff --git a/demo/images/zanCode.jpg b/demo/images/zanCode.jpg new file mode 100644 index 0000000..765e600 Binary files /dev/null and b/demo/images/zanCode.jpg differ diff --git a/demo/pages/about/about/about.js b/demo/pages/about/about/about.js new file mode 100644 index 0000000..386ee94 --- /dev/null +++ b/demo/pages/about/about/about.js @@ -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 () { + + } +}) \ No newline at end of file diff --git a/demo/pages/about/about/about.json b/demo/pages/about/about/about.json new file mode 100644 index 0000000..8835af0 --- /dev/null +++ b/demo/pages/about/about/about.json @@ -0,0 +1,3 @@ +{ + "usingComponents": {} +} \ No newline at end of file diff --git a/demo/pages/about/about/about.wxml b/demo/pages/about/about/about.wxml new file mode 100644 index 0000000..7cfd7b9 --- /dev/null +++ b/demo/pages/about/about/about.wxml @@ -0,0 +1,2 @@ + +pages/about/about/about.wxml diff --git a/demo/pages/about/about/about.wxss b/demo/pages/about/about/about.wxss new file mode 100644 index 0000000..6eee00d --- /dev/null +++ b/demo/pages/about/about/about.wxss @@ -0,0 +1 @@ +/* pages/about/about/about.wxss */ \ No newline at end of file diff --git a/demo/pages/about/home/home.js b/demo/pages/about/home/home.js new file mode 100644 index 0000000..7ec8c7c --- /dev/null +++ b/demo/pages/about/home/home.js @@ -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 () { + + } +}) \ No newline at end of file diff --git a/demo/pages/about/home/home.json b/demo/pages/about/home/home.json new file mode 100644 index 0000000..8835af0 --- /dev/null +++ b/demo/pages/about/home/home.json @@ -0,0 +1,3 @@ +{ + "usingComponents": {} +} \ No newline at end of file diff --git a/demo/pages/about/home/home.wxml b/demo/pages/about/home/home.wxml new file mode 100644 index 0000000..7024580 --- /dev/null +++ b/demo/pages/about/home/home.wxml @@ -0,0 +1,2 @@ + +pages/about/home/home.wxml diff --git a/demo/pages/about/home/home.wxss b/demo/pages/about/home/home.wxss new file mode 100644 index 0000000..99cc239 --- /dev/null +++ b/demo/pages/about/home/home.wxss @@ -0,0 +1 @@ +/* pages/about/home/home.wxss */ \ No newline at end of file diff --git a/demo/pages/about/log/log.js b/demo/pages/about/log/log.js new file mode 100644 index 0000000..e6c6760 --- /dev/null +++ b/demo/pages/about/log/log.js @@ -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 () { + + } +}) \ No newline at end of file diff --git a/demo/pages/about/log/log.json b/demo/pages/about/log/log.json new file mode 100644 index 0000000..8835af0 --- /dev/null +++ b/demo/pages/about/log/log.json @@ -0,0 +1,3 @@ +{ + "usingComponents": {} +} \ No newline at end of file diff --git a/demo/pages/about/log/log.wxml b/demo/pages/about/log/log.wxml new file mode 100644 index 0000000..ebb6a0a --- /dev/null +++ b/demo/pages/about/log/log.wxml @@ -0,0 +1,2 @@ + +pages/about/log/log.wxml diff --git a/demo/pages/about/log/log.wxss b/demo/pages/about/log/log.wxss new file mode 100644 index 0000000..441b07e --- /dev/null +++ b/demo/pages/about/log/log.wxss @@ -0,0 +1 @@ +/* pages/about/log/log.wxss */ \ No newline at end of file diff --git a/demo/pages/about/test/filter.js b/demo/pages/about/test/filter.js new file mode 100644 index 0000000..8bdf3d0 --- /dev/null +++ b/demo/pages/about/test/filter.js @@ -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 () { + + } +}) \ No newline at end of file diff --git a/demo/pages/about/test/filter.json b/demo/pages/about/test/filter.json new file mode 100644 index 0000000..8835af0 --- /dev/null +++ b/demo/pages/about/test/filter.json @@ -0,0 +1,3 @@ +{ + "usingComponents": {} +} \ No newline at end of file diff --git a/demo/pages/about/test/filter.wxml b/demo/pages/about/test/filter.wxml new file mode 100644 index 0000000..f9f6f66 --- /dev/null +++ b/demo/pages/about/test/filter.wxml @@ -0,0 +1,2 @@ + +pages/about/test/filter.wxml diff --git a/demo/pages/about/test/filter.wxss b/demo/pages/about/test/filter.wxss new file mode 100644 index 0000000..a5b136f --- /dev/null +++ b/demo/pages/about/test/filter.wxss @@ -0,0 +1 @@ +/* pages/about/test/filter.wxss */ \ No newline at end of file diff --git a/demo/pages/about/test/list.js b/demo/pages/about/test/list.js new file mode 100644 index 0000000..51e08e2 --- /dev/null +++ b/demo/pages/about/test/list.js @@ -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 () { + + } +}) \ No newline at end of file diff --git a/demo/pages/about/test/list.json b/demo/pages/about/test/list.json new file mode 100644 index 0000000..8835af0 --- /dev/null +++ b/demo/pages/about/test/list.json @@ -0,0 +1,3 @@ +{ + "usingComponents": {} +} \ No newline at end of file diff --git a/demo/pages/about/test/list.wxml b/demo/pages/about/test/list.wxml new file mode 100644 index 0000000..870361f --- /dev/null +++ b/demo/pages/about/test/list.wxml @@ -0,0 +1,2 @@ + +pages/about/test/list.wxml diff --git a/demo/pages/about/test/list.wxss b/demo/pages/about/test/list.wxss new file mode 100644 index 0000000..a5499fa --- /dev/null +++ b/demo/pages/about/test/list.wxss @@ -0,0 +1 @@ +/* pages/about/test/list.wxss */ \ No newline at end of file diff --git a/demo/pages/auth/auth.js b/demo/pages/auth/auth.js new file mode 100644 index 0000000..c1ab869 --- /dev/null +++ b/demo/pages/auth/auth.js @@ -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 () { + + } +}) \ No newline at end of file diff --git a/demo/pages/auth/auth.json b/demo/pages/auth/auth.json new file mode 100644 index 0000000..8835af0 --- /dev/null +++ b/demo/pages/auth/auth.json @@ -0,0 +1,3 @@ +{ + "usingComponents": {} +} \ No newline at end of file diff --git a/demo/pages/auth/auth.wxml b/demo/pages/auth/auth.wxml new file mode 100644 index 0000000..b75058d --- /dev/null +++ b/demo/pages/auth/auth.wxml @@ -0,0 +1,2 @@ + +pages/auth/auth.wxml diff --git a/demo/pages/auth/auth.wxss b/demo/pages/auth/auth.wxss new file mode 100644 index 0000000..656b39d --- /dev/null +++ b/demo/pages/auth/auth.wxss @@ -0,0 +1 @@ +/* pages/auth/auth.wxss */ \ No newline at end of file diff --git a/demo/pages/basics/icon/icon.js b/demo/pages/basics/icon/icon.js index 8f4fddc..d4a589d 100644 --- a/demo/pages/basics/icon/icon.js +++ b/demo/pages/basics/icon/icon.js @@ -3,23 +3,909 @@ Page({ data: { StatusBar: app.globalData.StatusBar, CustomBar: app.globalData.CustomBar, - icon: [{ name: 'appreciate', isShow: true }, { name: 'check', isShow: true }, { name: 'close', isShow: true }, { name: 'edit', isShow: true }, { name: 'emoji', isShow: true }, { name: 'favorfill', isShow: true }, { name: 'favor', isShow: true }, { name: 'loading', isShow: true }, { name: 'locationfill', isShow: true }, { name: 'location', isShow: true }, { name: 'phone', isShow: true }, { name: 'roundcheckfill', isShow: true }, { name: 'roundcheck', isShow: true }, { name: 'roundclosefill', isShow: true }, { name: 'roundclose', isShow: true }, { name: 'roundrightfill', isShow: true }, { name: 'roundright', isShow: true }, { name: 'search', isShow: true }, { name: 'taxi', isShow: true }, { name: 'timefill', isShow: true }, { name: 'time', isShow: true }, { name: 'unfold', isShow: true }, { name: 'warnfill', isShow: true }, { name: 'warn', isShow: true }, { name: 'camerafill', isShow: true }, { name: 'camera', isShow: true }, { name: 'commentfill', isShow: true }, { name: 'comment', isShow: true }, { name: 'likefill', isShow: true }, { name: 'like', isShow: true }, { name: 'notificationfill', isShow: true }, { name: 'notification', isShow: true }, { name: 'order', isShow: true }, { name: 'samefill', isShow: true }, { name: 'same', isShow: true }, { name: 'deliver', isShow: true }, { name: 'evaluate', isShow: true }, { name: 'pay', isShow: true }, { name: 'send', isShow: true }, { name: 'shop', isShow: true }, { name: 'ticket', isShow: true }, { name: 'back', isShow: true }, { name: 'cascades', isShow: true }, { name: 'discover', isShow: true }, { name: 'list', isShow: true }, { name: 'more', isShow: true }, { name: 'scan', isShow: true }, { name: 'settings', isShow: true }, { name: 'questionfill', isShow: true }, { name: 'question', isShow: true }, { name: 'shopfill', isShow: true }, { name: 'form', isShow: true }, { name: 'pic', isShow: true }, { name: 'filter', isShow: true }, { name: 'footprint', isShow: true }, { name: 'top', isShow: true }, { name: 'pulldown', isShow: true }, { name: 'pullup', isShow: true }, { name: 'action', isShow: true }, { name: 'refresh', isShow: true }, { name: 'moreandroid', isShow: true }, { name: 'deletefill', isShow: true }, { name: 'refund', isShow: true }, { name: 'cart', isShow: true }, { name: 'qrcode', isShow: true }, { name: 'remind', isShow: true }, { name: 'delete', isShow: true }, { name: 'profile', isShow: true }, { name: 'home', isShow: true }, { name: 'cartfill', isShow: true }, { name: 'discoverfill', isShow: true }, { name: 'homefill', isShow: true }, { name: 'message', isShow: true }, { name: 'addressbook', isShow: true }, { name: 'link', isShow: true }, { name: 'lock', isShow: true }, { name: 'unlock', isShow: true }, { name: 'vip', isShow: true }, { name: 'weibo', isShow: true }, { name: 'activity', isShow: true }, { name: 'friendaddfill', isShow: true }, { name: 'friendadd', isShow: true }, { name: 'friendfamous', isShow: true }, { name: 'friend', isShow: true }, { name: 'goods', isShow: true }, { name: 'selection', isShow: true }, { name: 'explore', isShow: true }, { name: 'present', isShow: true }, { name: 'squarecheckfill', isShow: true }, { name: 'square', isShow: true }, { name: 'squarecheck', isShow: true }, { name: 'round', isShow: true }, { name: 'roundaddfill', isShow: true }, { name: 'roundadd', isShow: true }, { name: 'add', isShow: true }, { name: 'notificationforbidfill', isShow: true }, { name: 'explorefill', isShow: true }, { name: 'fold', isShow: true }, { name: 'game', isShow: true }, { name: 'redpacket', isShow: true }, { name: 'selectionfill', isShow: true }, { name: 'similar', isShow: true }, { name: 'appreciatefill', isShow: true }, { name: 'infofill', isShow: true }, { name: 'info', isShow: true }, { name: 'forwardfill', isShow: true }, { name: 'forward', isShow: true }, { name: 'rechargefill', isShow: true }, { name: 'recharge', isShow: true }, { name: 'vipcard', isShow: true }, { name: 'voice', isShow: true }, { name: 'voicefill', isShow: true }, { name: 'friendfavor', isShow: true }, { name: 'wifi', isShow: true }, { name: 'share', isShow: true }, { name: 'wefill', isShow: true }, { name: 'we', isShow: true }, { name: 'lightauto', isShow: true }, { name: 'lightforbid', isShow: true }, { name: 'lightfill', isShow: true }, { name: 'camerarotate', isShow: true }, { name: 'light', isShow: true }, { name: 'barcode', isShow: true }, { name: 'flashlightclose', isShow: true }, { name: 'flashlightopen', isShow: true }, { name: 'searchlist', isShow: true }, { name: 'service', isShow: true }, { name: 'sort', isShow: true }, { name: 'down', isShow: true }, { name: 'mobile', isShow: true }, { name: 'mobilefill', isShow: true }, { name: 'copy', isShow: true }, { name: 'countdownfill', isShow: true }, { name: 'countdown', isShow: true }, { name: 'noticefill', isShow: true }, { name: 'notice', isShow: true }, { name: 'upstagefill', isShow: true }, { name: 'upstage', isShow: true }, { name: 'babyfill', isShow: true }, { name: 'baby', isShow: true }, { name: 'brandfill', isShow: true }, { name: 'brand', isShow: true }, { name: 'choicenessfill', isShow: true }, { name: 'choiceness', isShow: true }, { name: 'clothesfill', isShow: true }, { name: 'clothes', isShow: true }, { name: 'creativefill', isShow: true }, { name: 'creative', isShow: true }, { name: 'female', isShow: true }, { name: 'keyboard', isShow: true }, { name: 'male', isShow: true }, { name: 'newfill', isShow: true }, { name: 'new', isShow: true }, { name: 'pullleft', isShow: true }, { name: 'pullright', isShow: true }, { name: 'rankfill', isShow: true }, { name: 'rank', isShow: true }, { name: 'bad', isShow: true }, { name: 'cameraadd', isShow: true }, { name: 'focus', isShow: true }, { name: 'friendfill', isShow: true }, { name: 'cameraaddfill', isShow: true }, { name: 'apps', isShow: true }, { name: 'paintfill', isShow: true }, { name: 'paint', isShow: true }, { name: 'picfill', isShow: true }, { name: 'refresharrow', isShow: true }, { name: 'colorlens', isShow: true }, { name: 'markfill', isShow: true }, { name: 'mark', isShow: true }, { name: 'presentfill', isShow: true }, { name: 'repeal', isShow: true }, { name: 'album', isShow: true }, { name: 'peoplefill', isShow: true }, { name: 'people', isShow: true }, { name: 'servicefill', isShow: true }, { name: 'repair', isShow: true }, { name: 'file', isShow: true }, { name: 'repairfill', isShow: true }, { name: 'taoxiaopu', isShow: true }, { name: 'weixin', isShow: true }, { name: 'attentionfill', isShow: true }, { name: 'attention', isShow: true }, { name: 'commandfill', isShow: true }, { name: 'command', isShow: true }, { name: 'communityfill', isShow: true }, { name: 'community', isShow: true }, { name: 'read', isShow: true }, { name: 'calendar', isShow: true }, { name: 'cut', isShow: true }, { name: 'magic', isShow: true }, { name: 'backwardfill', isShow: true }, { name: 'playfill', isShow: true }, { name: 'stop', isShow: true }, { name: 'tagfill', isShow: true }, { name: 'tag', isShow: true }, { name: 'group', isShow: true }, { name: 'all', isShow: true }, { name: 'backdelete', isShow: true }, { name: 'hotfill', isShow: true }, { name: 'hot', isShow: true }, { name: 'post', isShow: true }, { name: 'radiobox', isShow: true }, { name: 'rounddown', isShow: true }, { name: 'upload', isShow: true }, { name: 'writefill', isShow: true }, { name: 'write', isShow: true }, { name: 'radioboxfill', isShow: true }, { name: 'punch', isShow: true }, { name: 'shake', isShow: true }, { name: 'move', isShow: true }, { name: 'safe', isShow: true }, { name: 'activityfill', isShow: true }, { name: 'crownfill', isShow: true }, { name: 'crown', isShow: true }, { name: 'goodsfill', isShow: true }, { name: 'messagefill', isShow: true }, { name: 'profilefill', isShow: true }, { name: 'sound', isShow: true }, { name: 'sponsorfill', isShow: true }, { name: 'sponsor', isShow: true }, { name: 'upblock', isShow: true }, { name: 'weblock', isShow: true }, { name: 'weunblock', isShow: true }, { name: 'my', isShow: true }, { name: 'myfill', isShow: true }, { name: 'emojifill', isShow: true }, { name: 'emojiflashfill', isShow: true }, { name: 'flashbuyfill', isShow: true }, { name: 'text', isShow: true }, { name: 'goodsfavor', isShow: true }, { name: 'musicfill', isShow: true }, { name: 'musicforbidfill', isShow: true }, { name: 'card', isShow: true }, { name: 'triangledownfill', isShow: true }, { name: 'triangleupfill', isShow: true }, { name: 'roundleftfill', isShow: true }, { name: 'font', isShow: true }, { name: 'title', isShow: true }, { name: 'recordfill', isShow: true }, { name: 'record', isShow: true }, { name: 'cardboardfill', isShow: true }, { name: 'cardboard', isShow: true }, { name: 'formfill', isShow: true }, { name: 'coin', isShow: true }, { name: 'cardboardforbid', isShow: true }, { name: 'circlefill', isShow: true }, { name: 'circle', isShow: true }, { name: 'attentionforbid', isShow: true }, { name: 'attentionforbidfill', isShow: true }, { name: 'attentionfavorfill', isShow: true }, { name: 'attentionfavor', isShow: true }, { name: 'titles', isShow: true }, { name: 'icloading', isShow: true }, { name: 'full', isShow: true }, { name: 'mail', isShow: true }, { name: 'peoplelist', isShow: true }, { name: 'goodsnewfill', isShow: true }, { name: 'goodsnew', isShow: true }, { name: 'medalfill', isShow: true }, { name: 'medal', isShow: true }, { name: 'newsfill', isShow: true }, { name: 'newshotfill', isShow: true }, { name: 'newshot', isShow: true }, { name: 'news', isShow: true }, { name: 'videofill', isShow: true }, { name: 'video', isShow: true }, { name: 'exit', isShow: true }, { name: 'skinfill', isShow: true }, { name: 'skin', isShow: true }, { name: 'moneybagfill', isShow: true }, { name: 'usefullfill', isShow: true }, { name: 'usefull', isShow: true }, { name: 'moneybag', isShow: true }, { name: 'redpacket_fill', isShow: true }, { name: 'subscription', isShow: true }, { name: 'loading1', isShow: true }, { name: 'global', isShow: true }, { name: 'settingsfill', isShow: true }, { name: 'back_android', isShow: true }, { name: 'expressman', isShow: true }, { name: 'evaluate_fill', isShow: true }, { name: 'group_fill', isShow: true }, { name: 'play_forward_fill', isShow: true }, { name: 'deliver_fill', isShow: true }, { name: 'notice_forbid_fill', isShow: true }, { name: 'pick', isShow: true }, { name: 'wenzi', isShow: true }, { name: 'ellipse', isShow: true }, { name: 'qr_code', isShow: true }, { name: 'dianhua', isShow: true }, { name: 'icon', isShow: true }, { name: 'loading2', isShow: true }, { name: 'btn', isShow: true }, - -] + icon: [{ + name: 'appreciate', + isShow: true + }, { + name: 'check', + isShow: true + }, { + name: 'close', + isShow: true + }, { + name: 'edit', + isShow: true + }, { + name: 'emoji', + isShow: true + }, { + name: 'favorfill', + isShow: true + }, { + name: 'favor', + isShow: true + }, { + name: 'loading', + isShow: true + }, { + name: 'locationfill', + isShow: true + }, { + name: 'location', + isShow: true + }, { + name: 'phone', + isShow: true + }, { + name: 'roundcheckfill', + isShow: true + }, { + name: 'roundcheck', + isShow: true + }, { + name: 'roundclosefill', + isShow: true + }, { + name: 'roundclose', + isShow: true + }, { + name: 'roundrightfill', + isShow: true + }, { + name: 'roundright', + isShow: true + }, { + name: 'search', + isShow: true + }, { + name: 'taxi', + isShow: true + }, { + name: 'timefill', + isShow: true + }, { + name: 'time', + isShow: true + }, { + name: 'unfold', + isShow: true + }, { + name: 'warnfill', + isShow: true + }, { + name: 'warn', + isShow: true + }, { + name: 'camerafill', + isShow: true + }, { + name: 'camera', + isShow: true + }, { + name: 'commentfill', + isShow: true + }, { + name: 'comment', + isShow: true + }, { + name: 'likefill', + isShow: true + }, { + name: 'like', + isShow: true + }, { + name: 'notificationfill', + isShow: true + }, { + name: 'notification', + isShow: true + }, { + name: 'order', + isShow: true + }, { + name: 'samefill', + isShow: true + }, { + name: 'same', + isShow: true + }, { + name: 'deliver', + isShow: true + }, { + name: 'evaluate', + isShow: true + }, { + name: 'pay', + isShow: true + }, { + name: 'send', + isShow: true + }, { + name: 'shop', + isShow: true + }, { + name: 'ticket', + isShow: true + }, { + name: 'back', + isShow: true + }, { + name: 'cascades', + isShow: true + }, { + name: 'discover', + isShow: true + }, { + name: 'list', + isShow: true + }, { + name: 'more', + isShow: true + }, { + name: 'scan', + isShow: true + }, { + name: 'settings', + isShow: true + }, { + name: 'questionfill', + isShow: true + }, { + name: 'question', + isShow: true + }, { + name: 'shopfill', + isShow: true + }, { + name: 'form', + isShow: true + }, { + name: 'pic', + isShow: true + }, { + name: 'filter', + isShow: true + }, { + name: 'footprint', + isShow: true + }, { + name: 'top', + isShow: true + }, { + name: 'pulldown', + isShow: true + }, { + name: 'pullup', + isShow: true + }, { + name: 'right', + isShow: true + }, { + name: 'refresh', + isShow: true + }, { + name: 'moreandroid', + isShow: true + }, { + name: 'deletefill', + isShow: true + }, { + name: 'refund', + isShow: true + }, { + name: 'cart', + isShow: true + }, { + name: 'qrcode', + isShow: true + }, { + name: 'remind', + isShow: true + }, { + name: 'delete', + isShow: true + }, { + name: 'profile', + isShow: true + }, { + name: 'home', + isShow: true + }, { + name: 'cartfill', + isShow: true + }, { + name: 'discoverfill', + isShow: true + }, { + name: 'homefill', + isShow: true + }, { + name: 'message', + isShow: true + }, { + name: 'addressbook', + isShow: true + }, { + name: 'link', + isShow: true + }, { + name: 'lock', + isShow: true + }, { + name: 'unlock', + isShow: true + }, { + name: 'vip', + isShow: true + }, { + name: 'weibo', + isShow: true + }, { + name: 'activity', + isShow: true + }, { + name: 'friendaddfill', + isShow: true + }, { + name: 'friendadd', + isShow: true + }, { + name: 'friendfamous', + isShow: true + }, { + name: 'friend', + isShow: true + }, { + name: 'goods', + isShow: true + }, { + name: 'selection', + isShow: true + }, { + name: 'explore', + isShow: true + }, { + name: 'present', + isShow: true + }, { + name: 'squarecheckfill', + isShow: true + }, { + name: 'square', + isShow: true + }, { + name: 'squarecheck', + isShow: true + }, { + name: 'round', + isShow: true + }, { + name: 'roundaddfill', + isShow: true + }, { + name: 'roundadd', + isShow: true + }, { + name: 'add', + isShow: true + }, { + name: 'notificationforbidfill', + isShow: true + }, { + name: 'explorefill', + isShow: true + }, { + name: 'fold', + isShow: true + }, { + name: 'game', + isShow: true + }, { + name: 'redpacket', + isShow: true + }, { + name: 'selectionfill', + isShow: true + }, { + name: 'similar', + isShow: true + }, { + name: 'appreciatefill', + isShow: true + }, { + name: 'infofill', + isShow: true + }, { + name: 'info', + isShow: true + }, { + name: 'forwardfill', + isShow: true + }, { + name: 'forward', + isShow: true + }, { + name: 'rechargefill', + isShow: true + }, { + name: 'recharge', + isShow: true + }, { + name: 'vipcard', + isShow: true + }, { + name: 'voice', + isShow: true + }, { + name: 'voicefill', + isShow: true + }, { + name: 'friendfavor', + isShow: true + }, { + name: 'wifi', + isShow: true + }, { + name: 'share', + isShow: true + }, { + name: 'wefill', + isShow: true + }, { + name: 'we', + isShow: true + }, { + name: 'lightauto', + isShow: true + }, { + name: 'lightforbid', + isShow: true + }, { + name: 'lightfill', + isShow: true + }, { + name: 'camerarotate', + isShow: true + }, { + name: 'light', + isShow: true + }, { + name: 'barcode', + isShow: true + }, { + name: 'flashlightclose', + isShow: true + }, { + name: 'flashlightopen', + isShow: true + }, { + name: 'searchlist', + isShow: true + }, { + name: 'service', + isShow: true + }, { + name: 'sort', + isShow: true + }, { + name: 'down', + isShow: true + }, { + name: 'mobile', + isShow: true + }, { + name: 'mobilefill', + isShow: true + }, { + name: 'copy', + isShow: true + }, { + name: 'countdownfill', + isShow: true + }, { + name: 'countdown', + isShow: true + }, { + name: 'noticefill', + isShow: true + }, { + name: 'notice', + isShow: true + }, { + name: 'upstagefill', + isShow: true + }, { + name: 'upstage', + isShow: true + }, { + name: 'babyfill', + isShow: true + }, { + name: 'baby', + isShow: true + }, { + name: 'brandfill', + isShow: true + }, { + name: 'brand', + isShow: true + }, { + name: 'choicenessfill', + isShow: true + }, { + name: 'choiceness', + isShow: true + }, { + name: 'clothesfill', + isShow: true + }, { + name: 'clothes', + isShow: true + }, { + name: 'creativefill', + isShow: true + }, { + name: 'creative', + isShow: true + }, { + name: 'female', + isShow: true + }, { + name: 'keyboard', + isShow: true + }, { + name: 'male', + isShow: true + }, { + name: 'newfill', + isShow: true + }, { + name: 'new', + isShow: true + }, { + name: 'pullleft', + isShow: true + }, { + name: 'pullright', + isShow: true + }, { + name: 'rankfill', + isShow: true + }, { + name: 'rank', + isShow: true + }, { + name: 'bad', + isShow: true + }, { + name: 'cameraadd', + isShow: true + }, { + name: 'focus', + isShow: true + }, { + name: 'friendfill', + isShow: true + }, { + name: 'cameraaddfill', + isShow: true + }, { + name: 'apps', + isShow: true + }, { + name: 'paintfill', + isShow: true + }, { + name: 'paint', + isShow: true + }, { + name: 'picfill', + isShow: true + }, { + name: 'refresharrow', + isShow: true + }, { + name: 'colorlens', + isShow: true + }, { + name: 'markfill', + isShow: true + }, { + name: 'mark', + isShow: true + }, { + name: 'presentfill', + isShow: true + }, { + name: 'repeal', + isShow: true + }, { + name: 'album', + isShow: true + }, { + name: 'peoplefill', + isShow: true + }, { + name: 'people', + isShow: true + }, { + name: 'servicefill', + isShow: true + }, { + name: 'repair', + isShow: true + }, { + name: 'file', + isShow: true + }, { + name: 'repairfill', + isShow: true + }, { + name: 'taoxiaopu', + isShow: true + }, { + name: 'weixin', + isShow: true + }, { + name: 'attentionfill', + isShow: true + }, { + name: 'attention', + isShow: true + }, { + name: 'commandfill', + isShow: true + }, { + name: 'command', + isShow: true + }, { + name: 'communityfill', + isShow: true + }, { + name: 'community', + isShow: true + }, { + name: 'read', + isShow: true + }, { + name: 'calendar', + isShow: true + }, { + name: 'cut', + isShow: true + }, { + name: 'magic', + isShow: true + }, { + name: 'backwardfill', + isShow: true + }, { + name: 'playfill', + isShow: true + }, { + name: 'stop', + isShow: true + }, { + name: 'tagfill', + isShow: true + }, { + name: 'tag', + isShow: true + }, { + name: 'group', + isShow: true + }, { + name: 'all', + isShow: true + }, { + name: 'backdelete', + isShow: true + }, { + name: 'hotfill', + isShow: true + }, { + name: 'hot', + isShow: true + }, { + name: 'post', + isShow: true + }, { + name: 'radiobox', + isShow: true + }, { + name: 'rounddown', + isShow: true + }, { + name: 'upload', + isShow: true + }, { + name: 'writefill', + isShow: true + }, { + name: 'write', + isShow: true + }, { + name: 'radioboxfill', + isShow: true + }, { + name: 'punch', + isShow: true + }, { + name: 'shake', + isShow: true + }, { + name: 'move', + isShow: true + }, { + name: 'safe', + isShow: true + }, { + name: 'activityfill', + isShow: true + }, { + name: 'crownfill', + isShow: true + }, { + name: 'crown', + isShow: true + }, { + name: 'goodsfill', + isShow: true + }, { + name: 'messagefill', + isShow: true + }, { + name: 'profilefill', + isShow: true + }, { + name: 'sound', + isShow: true + }, { + name: 'sponsorfill', + isShow: true + }, { + name: 'sponsor', + isShow: true + }, { + name: 'upblock', + isShow: true + }, { + name: 'weblock', + isShow: true + }, { + name: 'weunblock', + isShow: true + }, { + name: 'my', + isShow: true + }, { + name: 'myfill', + isShow: true + }, { + name: 'emojifill', + isShow: true + }, { + name: 'emojiflashfill', + isShow: true + }, { + name: 'flashbuyfill', + isShow: true + }, { + name: 'text', + isShow: true + }, { + name: 'goodsfavor', + isShow: true + }, { + name: 'musicfill', + isShow: true + }, { + name: 'musicforbidfill', + isShow: true + }, { + name: 'card', + isShow: true + }, { + name: 'triangledownfill', + isShow: true + }, { + name: 'triangleupfill', + isShow: true + }, { + name: 'roundleftfill-copy', + isShow: true + }, { + name: 'font', + isShow: true + }, { + name: 'title', + isShow: true + }, { + name: 'recordfill', + isShow: true + }, { + name: 'record', + isShow: true + }, { + name: 'cardboardfill', + isShow: true + }, { + name: 'cardboard', + isShow: true + }, { + name: 'formfill', + isShow: true + }, { + name: 'coin', + isShow: true + }, { + name: 'cardboardforbid', + isShow: true + }, { + name: 'circlefill', + isShow: true + }, { + name: 'circle', + isShow: true + }, { + name: 'attentionforbid', + isShow: true + }, { + name: 'attentionforbidfill', + isShow: true + }, { + name: 'attentionfavorfill', + isShow: true + }, { + name: 'attentionfavor', + isShow: true + }, { + name: 'titles', + isShow: true + }, { + name: 'icloading', + isShow: true + }, { + name: 'full', + isShow: true + }, { + name: 'mail', + isShow: true + }, { + name: 'peoplelist', + isShow: true + }, { + name: 'goodsnewfill', + isShow: true + }, { + name: 'goodsnew', + isShow: true + }, { + name: 'medalfill', + isShow: true + }, { + name: 'medal', + isShow: true + }, { + name: 'newsfill', + isShow: true + }, { + name: 'newshotfill', + isShow: true + }, { + name: 'newshot', + isShow: true + }, { + name: 'news', + isShow: true + }, { + name: 'videofill', + isShow: true + }, { + name: 'video', + isShow: true + }, { + name: 'exit', + isShow: true + }, { + name: 'skinfill', + isShow: true + }, { + name: 'skin', + isShow: true + }, { + name: 'moneybagfill', + isShow: true + }, { + name: 'usefullfill', + isShow: true + }, { + name: 'usefull', + isShow: true + }, { + name: 'moneybag', + isShow: true + }, { + name: 'redpacket_fill', + isShow: true + }, { + name: 'subscription', + isShow: true + }, { + name: 'loading1', + isShow: true + }, { + name: 'github', + isShow: true + }, { + name: 'global', + isShow: true + }, { + name: 'settingsfill', + isShow: true + }, { + name: 'back_android', + isShow: true + }, { + name: 'expressman', + isShow: true + }, { + name: 'evaluate_fill', + isShow: true + }, { + name: 'group_fill', + isShow: true + }, { + name: 'play_forward_fill', + isShow: true + }, { + name: 'deliver_fill', + isShow: true + }, { + name: 'notice_forbid_fill', + isShow: true + }, { + name: 'fork', + isShow: true + }, { + name: 'pick', + isShow: true + }, { + name: 'wenzi', + isShow: true + }, { + name: 'ellipse', + isShow: true + }, { + name: 'qr_code', + isShow: true + }, { + name: 'dianhua', + isShow: true + }, { + name: 'icon', + isShow: true + }, { + name: 'loading2', + isShow: true + }, { + name: 'btn', + isShow: true + }] }, - searchIcon(e){ + searchIcon(e) { let key = e.detail.value.toLowerCase(); - let list=this.data.icon; - for (let i = 0; i < list.length;i++){ + let list = this.data.icon; + for (let i = 0; i < list.length; i++) { let a = key; - let b = list[i].name.toLowerCase(); + let b = list[i].name.toLowerCase(); if (b.search(a) != -1) { - list[i].isShow=true - } else{ - list[i].isShow = false - } + list[i].isShow = true + } else { + list[i].isShow = false + } } this.setData({ icon: list diff --git a/demo/pages/basics/image/image.js b/demo/pages/basics/image/image.js index 60e3cb3..52d317b 100644 --- a/demo/pages/basics/image/image.js +++ b/demo/pages/basics/image/image.js @@ -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 () { + + } +}) \ No newline at end of file diff --git a/demo/pages/basics/image/image.json b/demo/pages/basics/image/image.json index 9e26dfe..8835af0 100644 --- a/demo/pages/basics/image/image.json +++ b/demo/pages/basics/image/image.json @@ -1 +1,3 @@ -{} \ No newline at end of file +{ + "usingComponents": {} +} \ No newline at end of file diff --git a/demo/pages/basics/image/image.wxml b/demo/pages/basics/image/image.wxml index 6b0d70b..0b0d421 100644 --- a/demo/pages/basics/image/image.wxml +++ b/demo/pages/basics/image/image.wxml @@ -1,14 +1,2 @@ - - - - - 图片 - - - - - - - - -好 \ No newline at end of file + +pages/basics/image/image.wxml diff --git a/demo/pages/basics/image/image.wxss b/demo/pages/basics/image/image.wxss index 53189da..488b8bc 100644 --- a/demo/pages/basics/image/image.wxss +++ b/demo/pages/basics/image/image.wxss @@ -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 */ \ No newline at end of file diff --git a/demo/pages/component/form/form.wxml b/demo/pages/component/form/form.wxml index 9763004..b3cff46 100644 --- a/demo/pages/component/form/form.wxml +++ b/demo/pages/component/form/form.wxml @@ -86,11 +86,7 @@ 开关选择 - - - - 大号开关 - + 定义颜色 @@ -109,10 +105,6 @@ 单选操作(radio) - - 定义尺寸 - - 定义样式 @@ -130,10 +122,6 @@ 复选选操作(checkbox) - - 定义尺寸 - - 定义形状 diff --git a/demo/pages/component/home/home.js b/demo/pages/component/home/home.js index ae9fe90..882fcde 100644 --- a/demo/pages/component/home/home.js +++ b/demo/pages/component/home/home.js @@ -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 () { diff --git a/demo/pages/component/list/list.js b/demo/pages/component/list/list.js index b631447..341797e 100644 --- a/demo/pages/component/list/list.js +++ b/demo/pages/component/list/list.js @@ -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 + }) }, }) \ No newline at end of file diff --git a/demo/pages/component/list/list.wxml b/demo/pages/component/list/list.wxml index f2fce0c..d175362 100644 --- a/demo/pages/component/list/list.wxml +++ b/demo/pages/component/list/list.wxml @@ -5,446 +5,269 @@ - - - - - VR - - - - 录像 - - - - 图像 - - - - 99+ - - 通知 - - - - 排行榜 - - - - - - 皮肤 - - - - 发现 - - - - 帮助 - - - - 反馈 - + + + 宫格列表 - - - - VR - - - - 录像 - - - - 图像 - - - - 99+ - - 通知 - - - - 排行榜 - - - - - - 皮肤 - - - - 发现 - - - - 帮助 - - - - - - VR - - - - 录像 - - - - 图像 - - - - 99+ - - 通知 - - - - 排行榜 - - - - - - 皮肤 - - - - 发现 - - - - 帮助 - - - - - - 99+ - - VR - - - - 录像 - - - - 图像 - - - - - 通知 - - - - 排行榜 - - - - - - 皮肤 - - - - 发现 - - - - 帮助 - - - - 问答 - - - - 版权 - + + - - - - - 皮肤设置 - - 皮肤需要付费购买 - - - - - - - - - 声音控制 - - 需要获得系统权限 + + + + + + + + - - + + + + + 边框 + + + + - - - - - 文晓港 - - 消息未送达 - - - 22:20 - 5 + + + + + + {{item.badge>99?'99+':item.badge}} - - - 99+ + {{item.name}} + + + + + + + 菜单列表 + + + + + + + + + + + 短边框 + + + + - - 文晓港 - SVIP + + + 箭头 + + + - - 收到红包 - - 22:20 - + + + 卡片 + + + + - - - - - 喵星人互动群 - - 喵星酱：喵喵喵！ - - - 22:20 - 5 - + + + + + + 图标 + 标题 - - - - 喵星人互动群 - - 喵星酱：喵喵喵！ - - - 22:20 - 5 - + + + + + 图片 + 标题 - - - - - - 喵星人互动群 - 6人 - - - 喵星酱： - 图片传输中... - - - 22:20 - + + + + + + + + Navigator 跳转 + + + + + + 头像组 + + + + + + + + 4 人 - - - - - 图标 + 标题 - + + + + 按钮 - - - - 图片 + 标题 - + + - - + + + + + 标签 - - - - Navigator 跳转 - + + 音乐 + 电影 + 旅行 - - - - 头像 - - - - - - + + + + + 文本 - - - - 头像组 - - - - - - - - - 4 人 - + + 小目标还没有实现！ - - - - 按钮 - - - - + + + + + 多行Item + + 小目标还没有实现！ - - - - 按钮 - - - - + + - - - - - 箭头 - + + + + + 消息列表 + + + + + + + 文晓港 + + 消息未送达 + + + 22:20 + 5 - - - - 标签 - - - 音乐 - 电影 - 旅行 - + + + + 99+ - - - - 文本 - - - 小目标还没有实现！ + + 文晓港 + SVIP + + 收到红包 - - - - 文本 - 小目标还没有实现！ - + + 22:20 + - - - - - 徽章 - - - - + + + + 喵星人互动群 + + 喵星酱：喵喵喵！ - - - - 标签 - - - 9 - + + 22:20 + 5 - - - - 胶囊 - - - - - - - - 广州 - - - + + + + + 喵星人互动群 + + 喵星酱：喵喵喵！ + + + 22:20 + 5 - - - - - 徽章 - - - - + + + - - - - 标签 - - - 9 + + 喵星人互动群 + 6人 + + 喵星酱： + 图片传输中... - - - - 胶囊 - - - - - - - - 广州 - - - + + 22:20 + - \ No newline at end of file + + + + + + 列表右滑 + + + + + + + 文晓港 + + 消息未送达 + + + 22:20 + 5 + + + 置顶 + 删除 + + + diff --git a/demo/pages/component/list/list.wxss b/demo/pages/component/list/list.wxss index 92fb008..073589e 100644 --- a/demo/pages/component/list/list.wxss +++ b/demo/pages/component/list/list.wxss @@ -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; -} diff --git a/demo/pages/component/modal/modal.wxml b/demo/pages/component/modal/modal.wxml index 5c0ed3c..82a3153 100644 --- a/demo/pages/component/modal/modal.wxml +++ b/demo/pages/component/modal/modal.wxml @@ -6,9 +6,9 @@ - + - 模态窗口 + 模态窗口 @@ -28,9 +28,9 @@ - + - 底部窗口 + 底部窗口 @@ -38,7 +38,7 @@ - + 确定 取消 @@ -48,9 +48,9 @@ - + - 对话窗口 + 对话窗口 @@ -98,9 +98,9 @@ - + - 图片窗口 + 图片窗口 @@ -120,4 +120,107 @@ 我知道了 + + + + + + 单选窗口 + + + + + + + + + + + + + + + + + + + + + 多选窗口 + + + + + + + + + 确定 + 取消 + + + + + + + + + + + + 侧边抽屉 + + + + + + + + + + + + Item {{index +1}} + + + + + + + + + + + + + 文晓港 + + 消息未送达 + + + 22:20 + 5 + + + + + 99+ + + + 文晓港 + SVIP + + + 收到红包 + + + 22:20 + + + + + \ No newline at end of file diff --git a/demo/pages/component/steps/steps.js b/demo/pages/component/steps/steps.js new file mode 100644 index 0000000..0e939df --- /dev/null +++ b/demo/pages/component/steps/steps.js @@ -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 + }) + } + +}); \ No newline at end of file diff --git a/demo/pages/component/steps/steps.json b/demo/pages/component/steps/steps.json new file mode 100644 index 0000000..8835af0 --- /dev/null +++ b/demo/pages/component/steps/steps.json @@ -0,0 +1,3 @@ +{ + "usingComponents": {} +} \ No newline at end of file diff --git a/demo/pages/component/steps/steps.wxml b/demo/pages/component/steps/steps.wxml new file mode 100644 index 0000000..83748e2 --- /dev/null +++ b/demo/pages/component/steps/steps.wxml @@ -0,0 +1,66 @@ + + + + 步骤条 + + + + + + 基本用法 + + + + + + + + + {{item.name}} + + + + + + + + {{item.name}} + + + + + + + + {{item.name}} + + + + + + 数字完成 + + + + + + + + + {{item.name}} + + + + + + 多级显示 + + + + + + + + Level {{index + 1}} + + diff --git a/demo/pages/component/steps/steps.wxss b/demo/pages/component/steps/steps.wxss new file mode 100644 index 0000000..9315f92 --- /dev/null +++ b/demo/pages/component/steps/steps.wxss @@ -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"; +} diff --git a/demo/pages/plugin/animation/animation.wxml b/demo/pages/plugin/animation/animation.wxml index 9a6161f..267c8e3 100644 --- a/demo/pages/plugin/animation/animation.wxml +++ b/demo/pages/plugin/animation/animation.wxml @@ -6,13 +6,29 @@ - + - + - + + + + + + + + + + + + + + + + + \ No newline at end of file diff --git a/demo/pages/plugin/animation/animation.wxss b/demo/pages/plugin/animation/animation.wxss index a5a847a..787a6f7 100644 --- a/demo/pages/plugin/animation/animation.wxss +++ b/demo/pages/plugin/animation/animation.wxss @@ -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; } diff --git a/demo/project.config.json b/demo/project.config.json index 00f276d..7f2efdb 100644 --- a/demo/project.config.json +++ b/demo/project.config.json @@ -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": "" } - ] - } - } + ] + } + } } \ No newline at end of file diff --git a/template/colorui.wxss b/template/colorui.wxss index d422858..5be1d23 100644 --- a/template/colorui.wxss +++ b/template/colorui.wxss @@ -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.cur { - background-color: #fcf7e9; + +.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>.cu-item:last-child { +.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.no-padding>.cu-item { - padding: 30rpx; +.cu-list.menu>.cu-item.cur { + background-color: #fcf7e9; } -.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,16 +1587,16 @@ 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: 110rpx; + padding-left: 140rpx; height: 140rpx; } +.cu-list.menu-avatar>.cu-item>.cu-avatar { + position: absolute; + left: 30rpx; +} + .cu-list.menu>.cu-item .content .cu-tag.sm { font-size: 16rpx; line-height: 80%; @@ -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-3>.cu-item:nth-child(3n)::after { + border-right-width: 0px; } -.cu-list.grid.col-4>.cu-item:nth-child(4n) { - 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) { - border-right: 0rpx; +.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; -} \ No newline at end of file +}