From fb1b10e0a6e3caf38354954377f63e788c30cabc Mon Sep 17 00:00:00 2001 From: xushengni Date: Wed, 8 Dec 2021 15:07:38 +0800 Subject: [PATCH] feat: weui v2.5.3 --- CHANGELOG.md | 14 + dist/example/example.css | 2 +- dist/example/index.html | 251 ++++++++++++++--- dist/style/weui.css | 258 ++++++++++++------ dist/style/weui.min.css | 4 +- package.json | 2 +- src/example/article/article.html | 76 ++++-- src/example/example.less | 2 +- src/example/form/form.html | 1 + src/example/form/form_input_status.html | 6 +- src/example/form/form_page.html | 4 +- src/example/form/form_primary.html | 153 +++++++++++ src/example/form/form_switch.html | 2 +- src/example/form/form_vcode.html | 2 +- .../half-screen-dialog.html | 3 +- src/example/index.html | 1 + src/example/list/list.html | 1 + .../widget/weui-cell/weui-cell_global.less | 19 +- .../widget/weui-cell/weui-cell_swiped.less | 3 +- .../widget/weui-cell/weui-cells__group.less | 182 ++++++++---- .../weui-cell/weui-form/weui-form_common.less | 53 ++-- src/style/widget/weui-cell/weui-switch.less | 26 +- src/style/widget/weui-page/weui-article.less | 13 +- src/style/widget/weui-page/weui-form.less | 2 + .../weui-tips/weui-half-screen-dialog.less | 3 + 25 files changed, 818 insertions(+), 265 deletions(-) create mode 100644 src/example/form/form_primary.html diff --git a/CHANGELOG.md b/CHANGELOG.md index 88bbf582..82a32be9 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -1,3 +1,17 @@ +### v2.5.3 (2021-12-08) + +#### Features +* feat: 升级form组件UI +* feat: 升级switch组件UI +* feat: 升级articleUI、新增列表类型 +* feat: cell组件新增副标题 +* feat: 半屏弹窗新增下拉关闭图标（见样式二） + +#### Bugfixes +* fix: 修复表单weui-agree组件对齐问题 + + + ### v2.5.2 (2021-11-29) #### Features diff --git a/dist/example/example.css b/dist/example/example.css index 084508a7..acbcf8da 100644 --- a/dist/example/example.css +++ b/dist/example/example.css @@ -1 +1 @@ -body,html{height:100%;-webkit-tap-highlight-color:transparent}body{font-family:-apple-system-font,Helvetica Neue,Helvetica,sans-serif}ul{list-style:none}.page,body{background-color:var(--weui-BG-0)}.page{position:absolute;top:0;right:0;bottom:0;left:0;overflow-y:auto;-webkit-overflow-scrolling:touch;box-sizing:border-box;opacity:0;z-index:1}.page.js_show{opacity:1}.page.actionsheet,.page.article,.page.dialog,.page.form,.page.loadmore,.page.msg,.page.msg_success,.page.msg_text,.page.msg_text_primary,.page.msg_warn,.page.picker,.page.progress,.page.toast,.page.top-tips{background-color:var(--weui-BG-2)}.link{color:var(--weui-LINK)}.container{position:absolute;top:0;right:0;bottom:0;left:0;overflow:hidden;color:var(--weui-FG-0)}.page{outline:0}.page__hd{padding:40px}.page__bd_spacing{padding:0 16px}.page__ft{padding-top:40px;padding-bottom:10px;padding-bottom:calc(10px + constant(safe-area-inset-bottom));padding-bottom:calc(10px + env(safe-area-inset-bottom));text-align:center}.page__ft img{height:19px}body[data-weui-theme=dark] .page__ft img{-webkit-filter:invert(100) hue-rotate(180deg);filter:invert(100) hue-rotate(180deg)}@media (prefers-color-scheme:dark){body:not([data-weui-theme=light]) .page__ft img{-webkit-filter:invert(100) hue-rotate(180deg);filter:invert(100) hue-rotate(180deg)}}.page__ft.j_bottom{position:absolute;bottom:0;left:0;right:0}.page__title{text-align:left;font-size:20px;font-weight:400}.page__desc{margin-top:4px;color:var(--weui-FG-1);text-align:left;font-size:14px}.page.footer .page__ft,.page.gallery .page__ft,.page.navbar .page__ft,.page.tabbar .page__ft,.page[class*=button_] .page__ft,.page[class*=form_] .page__ft,.page[class*=msg_] .page__ft{display:none}.weui-cell_example:before{left:52px}.page.home .page__intro-icon{margin-top:-.2em;margin-left:5px;width:16px;height:16px;vertical-align:middle}.page.home .page__title{font-size:0;margin-bottom:15px}body[data-weui-theme=dark] .page.home .page__title{-webkit-filter:invert(100) hue-rotate(180deg);filter:invert(100) hue-rotate(180deg)}@media (prefers-color-scheme:dark){body:not([data-weui-theme=light]) .page.home .page__title{-webkit-filter:invert(100) hue-rotate(180deg);filter:invert(100) hue-rotate(180deg)}}.page.home .page__bd img{width:30px;height:30px}body[data-weui-theme=dark] .page.home .page__bd img{-webkit-filter:invert(100) hue-rotate(180deg);filter:invert(100) hue-rotate(180deg)}@media (prefers-color-scheme:dark){body:not([data-weui-theme=light]) .page.home .page__bd img{-webkit-filter:invert(100) hue-rotate(180deg);filter:invert(100) hue-rotate(180deg)}}.page.home .page__bd li{margin:8px 0;background-color:var(--weui-BG-2);overflow:hidden;border-radius:2px;cursor:pointer}.page.home .page__bd li.js_show .weui-flex{opacity:.5}.page.home .page__bd li.js_show .page__category{height:auto}.page.home .page__bd li.js_show .page__category-content{opacity:1;-webkit-transform:translateY(0);transform:translateY(0)}.page.home .page__bd li:first-child{margin-top:0}.page.home .page__category{height:0;overflow:hidden}.page.home .page__category-content{opacity:0;-webkit-transform:translateY(-50%);transform:translateY(-50%);-webkit-transition:.3s;transition:.3s}.page.home .weui-flex{padding:20px;-webkit-box-align:center;-webkit-align-items:center;align-items:center;-webkit-transition:.3s;transition:.3s}.page.home .weui-cells{margin-top:0}.page.home .weui-cells:after,.page.home .weui-cells:before{display:none}.page.home .weui-cell{padding-left:20px;padding-right:20px}.page.home .weui-cell:before{left:20px;right:20px}.page.badge .demo_badge_tips{vertical-align:middle;font-size:17px}.page.badge .demo_badge_tips+.weui-badge{margin-left:5px;margin-right:5px}.page.badge .demo_badge_cells .weui-cell__hd{position:relative;margin-right:10px}.page.badge .demo_badge_cells .weui-cell__hd img{width:50px;display:block}.page.badge .demo_badge_cells .weui-cell__hd .weui-badge{position:absolute;top:-.4em;right:-.4em}.page.badge .demo_badge_cells .weui-cell__bd .demo_badge_title{vertical-align:middle}.page.badge .demo_badge_cells .weui-cell__bd .demo_badge_title+.weui-badge{margin-left:5px}.page.badge .demo_badge_cells .weui-cell__bd .demo_badge_desc{display:block;font-size:13px;color:#888}.page.form .page__bd{padding-bottom:30px}.page.form .weui-label{width:3.14em}.page.form_page .weui-label{width:4.1em}.page.form_select .weui-cells__group_form .weui-cell_select-before .weui-select{width:3.14em}[class*=" form_"].page,[class^=form_].page{padding:0}.page.form_input_status .weui-label,.page.form_select .weui-label,.page.form_select_primary .weui-label,.page.form_vcode .weui-label{width:3.14em}.page.button,.page.button_default{background-color:var(--weui-BG-0)}.page.button .weui-btn_mini,.page.button_default .weui-btn_mini{vertical-align:middle;margin:0 12px}.page.button .page__bd,.page.button_default .page__bd{padding:0}.page.button .button-sp-area,.page.button_default .button-sp-area{margin:15px auto;padding:15px;text-align:center}.page.button .button-sp-area.cell,.page.button_default .button-sp-area.cell{padding:15px 0}.page.button_bottom_fixed{background-color:var(--weui-BG-2)}.page.button_bottom_fixed .weui-bottom-fixed-opr-demo{padding:32px 32px 0}.page.cell .page__bd{padding-bottom:30px}.page.dialog .page__bd{padding:0 15px}.page.panel .page__bd{padding-bottom:20px}.page.panel .weui-cell_example .weui-cell__hd img{width:20px;height:20px;display:block;margin-right:16px}.page.icons,.page.icons-svg{text-align:center}.page.icons-svg .page__bd,.page.icons .page__bd{padding:0 40px;text-align:left}.page.icons-svg .icon-box,.page.icons .icon-box{margin-bottom:25px;display:-webkit-box;display:-webkit-flex;display:flex;-webkit-box-align:center;-webkit-align-items:center;align-items:center}.page.icons-svg .icon-box i,.page.icons .icon-box i{margin-right:18px}.page.icons-svg .icon-box__ctn,.page.icons .icon-box__ctn{-webkit-flex-shrink:100;flex-shrink:100}.page.icons-svg .icon-box__title,.page.icons .icon-box__title{font-weight:400}.page.icons-svg .icon-box__desc,.page.icons .icon-box__desc{margin-top:6px;font-size:12px;color:#888}.page.icons-svg .icon_sp_area,.page.icons .icon_sp_area{margin-top:10px;text-align:left}.page.icons-svg .icon_sp_area i:before,.page.icons .icon_sp_area i:before{margin-bottom:5px}.page.flex .placeholder{margin:5px;padding:0 10px;background-color:var(--weui-BG-1);height:2.3em;line-height:2.3;text-align:center;color:var(--weui-FG-1)}.page.layers{overflow-x:hidden;-webkit-perspective:1000px;perspective:1000px}@media only screen and (max-width:320px){.page.layers .page__hd{padding-left:20px;padding-right:20px}}.page.layers .page__bd{position:relative}.page.layers .page__desc{min-height:4.8em}.page.layers .layers__layer{position:absolute;left:50%;width:150px;height:266px;margin-left:-75px;box-sizing:border-box;-webkit-transition:.5s;transition:.5s;background:url(images/layers/transparent.gif) no-repeat 50%;background-size:contain;font-size:14px;color:var(--weui-WHITE)}.page.layers .layers__layer span{position:absolute;bottom:5px;left:0;right:0;text-align:center;-webkit-transition:.5s;transition:.5s}.page.layers .layers__layer:last-child span{color:#aaa}.page.layers .layers__layer.j_hide{opacity:0}.page.layers .layers__layer.j_pic span{color:transparent}@media only screen and (min-width:375px) and (min-height:603px){.page.layers .layers__layer{width:180px;height:320px;margin-left:-90px}}@media only screen and (min-width:414px) and (min-height:640px){.page.layers .layers__layer{width:200px;height:355px;margin-left:-100px}}.page.layers .layers__layer_popout{border:1px solid hsla(0,0%,80%,.5);z-index:4}.page.layers .layers__layer_popout.j_transform{-webkit-transform:translateX(15px) rotateX(45deg) rotate(10deg) skew(-15deg) translateZ(120px);transform:translateX(15px) rotateX(45deg) rotate(10deg) skew(-15deg) translateZ(120px)}@media only screen and (max-width:320px){.page.layers .layers__layer_popout.j_transform{-webkit-transform:translateX(15px) rotateX(45deg) rotate(10deg) skew(-15deg) translateZ(140px);transform:translateX(15px) rotateX(45deg) rotate(10deg) skew(-15deg) translateZ(140px)}}.page.layers .layers__layer_popout.j_pic{border-color:transparent;background-image:url(images/layers/popout.png)}.page.layers .layers__layer_mask{background-color:rgba(0,0,0,.5);z-index:3}.page.layers .layers__layer_mask.j_transform{-webkit-transform:translateX(15px) rotateX(45deg) rotate(10deg) skew(-15deg) translateZ(40px);transform:translateX(15px) rotateX(45deg) rotate(10deg) skew(-15deg) translateZ(40px)}@media only screen and (max-width:320px){.page.layers .layers__layer_mask.j_transform{-webkit-transform:translateX(15px) rotateX(45deg) rotate(10deg) skew(-15deg) translateZ(80px);transform:translateX(15px) rotateX(45deg) rotate(10deg) skew(-15deg) translateZ(80px)}}.page.layers .layers__layer_navigation{background-color:rgba(40,187,102,.5);z-index:2}.page.layers .layers__layer_navigation.j_transform{-webkit-transform:translateX(15px) rotateX(45deg) rotate(10deg) skew(-15deg) translateZ(-40px);transform:translateX(15px) rotateX(45deg) rotate(10deg) skew(-15deg) translateZ(-40px)}@media only screen and (max-width:320px){.page.layers .layers__layer_navigation.j_transform{-webkit-transform:translateX(15px) rotateX(45deg) rotate(10deg) skew(-15deg) translateZ(20px);transform:translateX(15px) rotateX(45deg) rotate(10deg) skew(-15deg) translateZ(20px)}}.page.layers .layers__layer_navigation.j_pic{background-color:transparent;background-image:url(images/layers/navigation.png)}.page.layers .layers__layer_content{background-color:var(--weui-BG-2);z-index:1}.page.layers .layers__layer_content.j_transform{-webkit-transform:translateX(15px) rotateX(45deg) rotate(10deg) skew(-15deg) translateZ(-120px);transform:translateX(15px) rotateX(45deg) rotate(10deg) skew(-15deg) translateZ(-120px)}@media only screen and (max-width:320px){.page.layers .layers__layer_content.j_transform{-webkit-transform:translateX(15px) rotateX(45deg) rotate(10deg) skew(-15deg) translateZ(-40px);transform:translateX(15px) rotateX(45deg) rotate(10deg) skew(-15deg) translateZ(-40px)}}.page.layers .layers__layer_content.j_pic{background-image:url(images/layers/content.png)}.page.searchbar .searchbar-result{display:none;margin-top:0;font-size:14px}.page.searchbar .searchbar-result .weui-cell__bd{padding:2px 0 2px 20px;color:var(--weui-FG-1)}.page.gallery{overflow:hidden}.page.navbar .weui-tab__panel,.page.tabbar .weui-tab__panel{padding:32px}.weui-half-screen-dialog{-webkit-transition:-webkit-transform .3s;transition:-webkit-transform .3s;transition:transform .3s;transition:transform .3s,-webkit-transform .3s;-webkit-transform:translateY(100%);transform:translateY(100%)}.weui-half-screen-dialog_show{-webkit-transform:translateY(0);transform:translateY(0)}.loading_demo{display:-webkit-box;display:-webkit-flex;display:flex;-webkit-box-align:center;-webkit-align-items:center;align-items:center;-webkit-box-pack:center;-webkit-justify-content:center;justify-content:center}.loading_demo .weui-loading,.loading_demo .weui-primary-loading{margin:0 5px}@-webkit-keyframes a{0%{-webkit-transform:translate3d(100%,0,0);transform:translate3d(100%,0,0);opacity:0}to{-webkit-transform:translateZ(0);transform:translateZ(0);opacity:1}}@keyframes a{0%{-webkit-transform:translate3d(100%,0,0);transform:translate3d(100%,0,0);opacity:0}to{-webkit-transform:translateZ(0);transform:translateZ(0);opacity:1}}@-webkit-keyframes b{0%{-webkit-transform:translateZ(0);transform:translateZ(0);opacity:1}to{-webkit-transform:translate3d(100%,0,0);transform:translate3d(100%,0,0);opacity:0}}@keyframes b{0%{-webkit-transform:translateZ(0);transform:translateZ(0);opacity:1}to{-webkit-transform:translate3d(100%,0,0);transform:translate3d(100%,0,0);opacity:0}}.page.slideIn{-webkit-animation:a .2s forwards;animation:a .2s forwards}.page.slideOut{-webkit-animation:b .2s forwards;animation:b .2s forwards}@supports (top:constant(safe-area-inset-top)){.page{padding:constant(safe-area-inset-top) constant(safe-area-inset-right) constant(safe-area-inset-bottom) constant(safe-area-inset-left)}.page.navbar,.page.tabbar{padding-left:0;padding-right:0}.weui-tab__panel{padding-left:constant(safe-area-inset-left);padding-right:constant(safe-area-inset-right)}}@supports (top:env(safe-area-inset-top)){.page{padding:env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left)}.page.article,.page.msg_success,.page.msg_text,.page.msg_text_primary,.page.msg_warn,.page.navbar,.page.tabbar{padding:0}} \ No newline at end of file +body,html{height:100%;-webkit-tap-highlight-color:transparent}body{font-family:-apple-system-font,Helvetica Neue,Helvetica,sans-serif}ul{list-style:none}.page,body{background-color:var(--weui-BG-0)}.page{position:absolute;top:0;right:0;bottom:0;left:0;overflow-y:auto;-webkit-overflow-scrolling:touch;box-sizing:border-box;opacity:0;z-index:1}.page.js_show{opacity:1}.page.actionsheet,.page.article,.page.dialog,.page.form,.page.loadmore,.page.msg,.page.msg_success,.page.msg_text,.page.msg_text_primary,.page.msg_warn,.page.picker,.page.progress,.page.toast,.page.top-tips{background-color:var(--weui-BG-2)}.link{color:var(--weui-LINK)}.container{position:absolute;top:0;right:0;bottom:0;left:0;overflow:hidden;color:var(--weui-FG-0)}.page{outline:0}.page__hd{padding:40px}.page__bd_spacing{padding:0 16px}.page__ft{padding-top:40px;padding-bottom:10px;padding-bottom:calc(10px + constant(safe-area-inset-bottom));padding-bottom:calc(10px + env(safe-area-inset-bottom));text-align:center}.page__ft img{height:19px}body[data-weui-theme=dark] .page__ft img{-webkit-filter:invert(100) hue-rotate(180deg);filter:invert(100) hue-rotate(180deg)}@media (prefers-color-scheme:dark){body:not([data-weui-theme=light]) .page__ft img{-webkit-filter:invert(100) hue-rotate(180deg);filter:invert(100) hue-rotate(180deg)}}.page__ft.j_bottom{position:absolute;bottom:0;left:0;right:0}.page__title{text-align:left;font-size:20px;font-weight:400}.page__desc{margin-top:4px;color:var(--weui-FG-1);text-align:left;font-size:14px}.page.footer .page__ft,.page.gallery .page__ft,.page.navbar .page__ft,.page.tabbar .page__ft,.page[class*=button_] .page__ft,.page[class*=form_] .page__ft,.page[class*=msg_] .page__ft{display:none}.weui-cell_example:before{left:52px}.page.home .page__intro-icon{margin-top:-.2em;margin-left:5px;width:16px;height:16px;vertical-align:middle}.page.home .page__title{font-size:0;margin-bottom:15px}body[data-weui-theme=dark] .page.home .page__title{-webkit-filter:invert(100) hue-rotate(180deg);filter:invert(100) hue-rotate(180deg)}@media (prefers-color-scheme:dark){body:not([data-weui-theme=light]) .page.home .page__title{-webkit-filter:invert(100) hue-rotate(180deg);filter:invert(100) hue-rotate(180deg)}}.page.home .page__bd img{width:30px;height:30px}body[data-weui-theme=dark] .page.home .page__bd img{-webkit-filter:invert(100) hue-rotate(180deg);filter:invert(100) hue-rotate(180deg)}@media (prefers-color-scheme:dark){body:not([data-weui-theme=light]) .page.home .page__bd img{-webkit-filter:invert(100) hue-rotate(180deg);filter:invert(100) hue-rotate(180deg)}}.page.home .page__bd li{margin:8px 0;background-color:var(--weui-BG-2);overflow:hidden;border-radius:2px;cursor:pointer}.page.home .page__bd li.js_show .weui-flex{opacity:.5}.page.home .page__bd li.js_show .page__category{height:auto}.page.home .page__bd li.js_show .page__category-content{opacity:1;-webkit-transform:translateY(0);transform:translateY(0)}.page.home .page__bd li:first-child{margin-top:0}.page.home .page__category{height:0;overflow:hidden}.page.home .page__category-content{opacity:0;-webkit-transform:translateY(-50%);transform:translateY(-50%);-webkit-transition:.3s;transition:.3s}.page.home .weui-flex{padding:20px;-webkit-box-align:center;-webkit-align-items:center;align-items:center;-webkit-transition:.3s;transition:.3s}.page.home .weui-cells{margin-top:0}.page.home .weui-cells:after,.page.home .weui-cells:before{display:none}.page.home .weui-cell{padding-left:20px;padding-right:20px}.page.home .weui-cell:before{left:20px;right:20px}.page.badge .demo_badge_tips{vertical-align:middle;font-size:17px}.page.badge .demo_badge_tips+.weui-badge{margin-left:5px;margin-right:5px}.page.badge .demo_badge_cells .weui-cell__hd{position:relative;margin-right:10px}.page.badge .demo_badge_cells .weui-cell__hd img{width:50px;display:block}.page.badge .demo_badge_cells .weui-cell__hd .weui-badge{position:absolute;top:-.4em;right:-.4em}.page.badge .demo_badge_cells .weui-cell__bd .demo_badge_title{vertical-align:middle}.page.badge .demo_badge_cells .weui-cell__bd .demo_badge_title+.weui-badge{margin-left:5px}.page.badge .demo_badge_cells .weui-cell__bd .demo_badge_desc{display:block;font-size:13px;color:#888}.page.form .page__bd{padding-bottom:30px}.page.form .weui-label{width:3.14em}.page.form_page .weui-label{width:4.1em}.page.form_primary .weui-cells__group_form .weui-cell_select-before .weui-select,.page.form_select .weui-cells__group_form .weui-cell_select-before .weui-select{width:3.14em}[class*=" form_"].page,[class^=form_].page{padding:0}.page.form_input_status .weui-label,.page.form_select .weui-label,.page.form_select_primary .weui-label,.page.form_vcode .weui-label{width:3.14em}.page.button,.page.button_default{background-color:var(--weui-BG-0)}.page.button .weui-btn_mini,.page.button_default .weui-btn_mini{vertical-align:middle;margin:0 12px}.page.button .page__bd,.page.button_default .page__bd{padding:0}.page.button .button-sp-area,.page.button_default .button-sp-area{margin:15px auto;padding:15px;text-align:center}.page.button .button-sp-area.cell,.page.button_default .button-sp-area.cell{padding:15px 0}.page.button_bottom_fixed{background-color:var(--weui-BG-2)}.page.button_bottom_fixed .weui-bottom-fixed-opr-demo{padding:32px 32px 0}.page.cell .page__bd{padding-bottom:30px}.page.dialog .page__bd{padding:0 15px}.page.panel .page__bd{padding-bottom:20px}.page.panel .weui-cell_example .weui-cell__hd img{width:20px;height:20px;display:block;margin-right:16px}.page.icons,.page.icons-svg{text-align:center}.page.icons-svg .page__bd,.page.icons .page__bd{padding:0 40px;text-align:left}.page.icons-svg .icon-box,.page.icons .icon-box{margin-bottom:25px;display:-webkit-box;display:-webkit-flex;display:flex;-webkit-box-align:center;-webkit-align-items:center;align-items:center}.page.icons-svg .icon-box i,.page.icons .icon-box i{margin-right:18px}.page.icons-svg .icon-box__ctn,.page.icons .icon-box__ctn{-webkit-flex-shrink:100;flex-shrink:100}.page.icons-svg .icon-box__title,.page.icons .icon-box__title{font-weight:400}.page.icons-svg .icon-box__desc,.page.icons .icon-box__desc{margin-top:6px;font-size:12px;color:#888}.page.icons-svg .icon_sp_area,.page.icons .icon_sp_area{margin-top:10px;text-align:left}.page.icons-svg .icon_sp_area i:before,.page.icons .icon_sp_area i:before{margin-bottom:5px}.page.flex .placeholder{margin:5px;padding:0 10px;background-color:var(--weui-BG-1);height:2.3em;line-height:2.3;text-align:center;color:var(--weui-FG-1)}.page.layers{overflow-x:hidden;-webkit-perspective:1000px;perspective:1000px}@media only screen and (max-width:320px){.page.layers .page__hd{padding-left:20px;padding-right:20px}}.page.layers .page__bd{position:relative}.page.layers .page__desc{min-height:4.8em}.page.layers .layers__layer{position:absolute;left:50%;width:150px;height:266px;margin-left:-75px;box-sizing:border-box;-webkit-transition:.5s;transition:.5s;background:url(images/layers/transparent.gif) no-repeat 50%;background-size:contain;font-size:14px;color:var(--weui-WHITE)}.page.layers .layers__layer span{position:absolute;bottom:5px;left:0;right:0;text-align:center;-webkit-transition:.5s;transition:.5s}.page.layers .layers__layer:last-child span{color:#aaa}.page.layers .layers__layer.j_hide{opacity:0}.page.layers .layers__layer.j_pic span{color:transparent}@media only screen and (min-width:375px) and (min-height:603px){.page.layers .layers__layer{width:180px;height:320px;margin-left:-90px}}@media only screen and (min-width:414px) and (min-height:640px){.page.layers .layers__layer{width:200px;height:355px;margin-left:-100px}}.page.layers .layers__layer_popout{border:1px solid hsla(0,0%,80%,.5);z-index:4}.page.layers .layers__layer_popout.j_transform{-webkit-transform:translateX(15px) rotateX(45deg) rotate(10deg) skew(-15deg) translateZ(120px);transform:translateX(15px) rotateX(45deg) rotate(10deg) skew(-15deg) translateZ(120px)}@media only screen and (max-width:320px){.page.layers .layers__layer_popout.j_transform{-webkit-transform:translateX(15px) rotateX(45deg) rotate(10deg) skew(-15deg) translateZ(140px);transform:translateX(15px) rotateX(45deg) rotate(10deg) skew(-15deg) translateZ(140px)}}.page.layers .layers__layer_popout.j_pic{border-color:transparent;background-image:url(images/layers/popout.png)}.page.layers .layers__layer_mask{background-color:rgba(0,0,0,.5);z-index:3}.page.layers .layers__layer_mask.j_transform{-webkit-transform:translateX(15px) rotateX(45deg) rotate(10deg) skew(-15deg) translateZ(40px);transform:translateX(15px) rotateX(45deg) rotate(10deg) skew(-15deg) translateZ(40px)}@media only screen and (max-width:320px){.page.layers .layers__layer_mask.j_transform{-webkit-transform:translateX(15px) rotateX(45deg) rotate(10deg) skew(-15deg) translateZ(80px);transform:translateX(15px) rotateX(45deg) rotate(10deg) skew(-15deg) translateZ(80px)}}.page.layers .layers__layer_navigation{background-color:rgba(40,187,102,.5);z-index:2}.page.layers .layers__layer_navigation.j_transform{-webkit-transform:translateX(15px) rotateX(45deg) rotate(10deg) skew(-15deg) translateZ(-40px);transform:translateX(15px) rotateX(45deg) rotate(10deg) skew(-15deg) translateZ(-40px)}@media only screen and (max-width:320px){.page.layers .layers__layer_navigation.j_transform{-webkit-transform:translateX(15px) rotateX(45deg) rotate(10deg) skew(-15deg) translateZ(20px);transform:translateX(15px) rotateX(45deg) rotate(10deg) skew(-15deg) translateZ(20px)}}.page.layers .layers__layer_navigation.j_pic{background-color:transparent;background-image:url(images/layers/navigation.png)}.page.layers .layers__layer_content{background-color:var(--weui-BG-2);z-index:1}.page.layers .layers__layer_content.j_transform{-webkit-transform:translateX(15px) rotateX(45deg) rotate(10deg) skew(-15deg) translateZ(-120px);transform:translateX(15px) rotateX(45deg) rotate(10deg) skew(-15deg) translateZ(-120px)}@media only screen and (max-width:320px){.page.layers .layers__layer_content.j_transform{-webkit-transform:translateX(15px) rotateX(45deg) rotate(10deg) skew(-15deg) translateZ(-40px);transform:translateX(15px) rotateX(45deg) rotate(10deg) skew(-15deg) translateZ(-40px)}}.page.layers .layers__layer_content.j_pic{background-image:url(images/layers/content.png)}.page.searchbar .searchbar-result{display:none;margin-top:0;font-size:14px}.page.searchbar .searchbar-result .weui-cell__bd{padding:2px 0 2px 20px;color:var(--weui-FG-1)}.page.gallery{overflow:hidden}.page.navbar .weui-tab__panel,.page.tabbar .weui-tab__panel{padding:32px}.weui-half-screen-dialog{-webkit-transition:-webkit-transform .3s;transition:-webkit-transform .3s;transition:transform .3s;transition:transform .3s,-webkit-transform .3s;-webkit-transform:translateY(100%);transform:translateY(100%)}.weui-half-screen-dialog_show{-webkit-transform:translateY(0);transform:translateY(0)}.loading_demo{display:-webkit-box;display:-webkit-flex;display:flex;-webkit-box-align:center;-webkit-align-items:center;align-items:center;-webkit-box-pack:center;-webkit-justify-content:center;justify-content:center}.loading_demo .weui-loading,.loading_demo .weui-primary-loading{margin:0 5px}@-webkit-keyframes a{0%{-webkit-transform:translate3d(100%,0,0);transform:translate3d(100%,0,0);opacity:0}to{-webkit-transform:translateZ(0);transform:translateZ(0);opacity:1}}@keyframes a{0%{-webkit-transform:translate3d(100%,0,0);transform:translate3d(100%,0,0);opacity:0}to{-webkit-transform:translateZ(0);transform:translateZ(0);opacity:1}}@-webkit-keyframes b{0%{-webkit-transform:translateZ(0);transform:translateZ(0);opacity:1}to{-webkit-transform:translate3d(100%,0,0);transform:translate3d(100%,0,0);opacity:0}}@keyframes b{0%{-webkit-transform:translateZ(0);transform:translateZ(0);opacity:1}to{-webkit-transform:translate3d(100%,0,0);transform:translate3d(100%,0,0);opacity:0}}.page.slideIn{-webkit-animation:a .2s forwards;animation:a .2s forwards}.page.slideOut{-webkit-animation:b .2s forwards;animation:b .2s forwards}@supports (top:constant(safe-area-inset-top)){.page{padding:constant(safe-area-inset-top) constant(safe-area-inset-right) constant(safe-area-inset-bottom) constant(safe-area-inset-left)}.page.navbar,.page.tabbar{padding-left:0;padding-right:0}.weui-tab__panel{padding-left:constant(safe-area-inset-left);padding-right:constant(safe-area-inset-right)}}@supports (top:env(safe-area-inset-top)){.page{padding:env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left)}.page.article,.page.msg_success,.page.msg_text,.page.msg_text_primary,.page.msg_warn,.page.navbar,.page.tabbar{padding:0}} \ No newline at end of file diff --git a/dist/example/index.html b/dist/example/index.html index 88052349..8736207a 100644 --- a/dist/example/index.html +++ b/dist/example/index.html @@ -581,6 +581,7 @@

List

cell standard +
副标题
 @@ -866,6 +867,7 @@

Form

表单结构 + 输入框状态 验证码 复选框 @@ -878,6 +880,162 @@

Form

+ + + diff --git a/src/example/form/form_switch.html b/src/example/form/form_switch.html index d86a593f..1715a901 100644 --- a/src/example/form/form_switch.html +++ b/src/example/form/form_switch.html @@ -5,7 +5,7 @@

开关样式展示

-
+