├── .eslintignore ├── src ├── style │ ├── base │ │ ├── variable │ │ │ ├── weui-button.less │ │ │ ├── weui-grid.less │ │ │ ├── weui-progress.less │ │ │ ├── weui-dialog.less │ │ │ ├── weui-msg.less │ │ │ ├── global.less │ │ │ ├── color.less │ │ │ └── weui-cell.less │ │ ├── reset.less │ │ ├── fn.less │ │ └── mixin │ │ │ ├── text.less │ │ │ ├── setOnepx.less │ │ │ └── setArrow.less │ ├── widget │ │ ├── weui-flex │ │ │ └── weui-flex.less │ │ ├── weui-cell │ │ │ ├── weui-switch.less │ │ │ ├── weui-form.less │ │ │ ├── weui-check.less │ │ │ ├── weui-access.less │ │ │ ├── weui-form │ │ │ │ ├── weui-vcode.less │ │ │ │ ├── weui-select.less │ │ │ │ ├── weui-form_common.less │ │ │ │ └── weui-form-preview.less │ │ │ ├── weui-cell.less │ │ │ └── weui-uploader.less │ │ ├── weui-button │ │ │ └── weui-button.less │ │ ├── weui-progress │ │ │ └── weui-progress.less │ │ ├── weui-tab │ │ │ ├── weui-tab.less │ │ │ └── weui-navbar.less │ │ ├── weui-tips │ │ │ ├── weui-badge.less │ │ │ └── weui-loadmore.less │ │ ├── weui-page │ │ │ ├── weui-article.less │ │ │ └── weui-msg.less │ │ ├── weui-panel │ │ │ └── weui-panel.less │ │ ├── weui-agree │ │ │ └── weui-agree.less │ │ ├── weui-footer │ │ │ └── weui-footer.less │ │ ├── weui-grid │ │ │ └── weui-grid.less │ │ ├── weui-animate │ │ │ └── weui-animate.less │ │ ├── weui-searchbar │ │ │ └── weui-searchbar.less │ │ ├── weui-media-box │ │ │ └── weui-media-box.less │ │ └── weui-loading │ │ │ └── weui-loading.less │ └── weui.less ├── images │ ├── logo.png │ ├── vcode.png │ ├── pic_160.png │ ├── icon_intro.png │ ├── icon_footer.png │ ├── icon_nav_form.png │ ├── icon_nav_nav.png │ ├── icon_tabbar.png │ ├── pic_article.png │ ├── icon_nav_search.png │ ├── icon_nav_widget.png │ ├── icon_footer_link.png │ ├── icon_nav_feedback.png │ ├── icon_nav_special.png │ ├── icon_nav_z-index.png │ └── base64.js ├── example │ ├── gallery.wpy │ ├── tabbar.wpy │ ├── slider.wpy │ ├── grid.wpy │ ├── msg.wpy │ ├── actionsheet.wpy │ ├── loadmore.wpy │ ├── toast.wpy │ ├── msg_fail.wpy │ ├── msg_success.wpy │ ├── dialog.wpy │ ├── picker.wpy │ ├── footer.wpy │ ├── button.wpy │ ├── flex.wpy │ ├── navbar.wpy │ ├── article.wpy │ ├── progress.wpy │ ├── badge.wpy │ ├── icons.wpy │ ├── searchbar.wpy │ ├── preview.wpy │ ├── uploader.wpy │ ├── list.wpy │ ├── index.wpy │ ├── panel.wpy │ └── input.wpy ├── index.template.html └── app.wpy ├── web ├── images │ ├── logo.png │ ├── vcode.png │ ├── pic_160.png │ ├── icon_intro.png │ ├── icon_footer.png │ ├── icon_nav_form.png │ ├── icon_nav_nav.png │ ├── icon_tabbar.png │ ├── pic_article.png │ ├── icon_nav_search.png │ ├── icon_nav_widget.png │ ├── icon_footer_link.png │ ├── icon_nav_feedback.png │ ├── icon_nav_special.png │ └── icon_nav_z-index.png └── index.html ├── .gitignore ├── .editorconfig ├── README.md ├── .eslintrc.js ├── LICENSE ├── package.json └── wepy.config.js /.eslintignore: -------------------------------------------------------------------------------- 1 | dist/* 2 | -------------------------------------------------------------------------------- /src/style/base/variable/weui-button.less: -------------------------------------------------------------------------------- 1 | @weuiBtnDefaultGap:15px; -------------------------------------------------------------------------------- /src/images/logo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/wepyjs/wepy-weui-demo/HEAD/src/images/logo.png -------------------------------------------------------------------------------- /src/images/vcode.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/wepyjs/wepy-weui-demo/HEAD/src/images/vcode.png -------------------------------------------------------------------------------- /web/images/logo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/wepyjs/wepy-weui-demo/HEAD/web/images/logo.png -------------------------------------------------------------------------------- /web/images/vcode.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/wepyjs/wepy-weui-demo/HEAD/web/images/vcode.png -------------------------------------------------------------------------------- /src/images/pic_160.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/wepyjs/wepy-weui-demo/HEAD/src/images/pic_160.png -------------------------------------------------------------------------------- /web/images/pic_160.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/wepyjs/wepy-weui-demo/HEAD/web/images/pic_160.png -------------------------------------------------------------------------------- /src/images/icon_intro.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/wepyjs/wepy-weui-demo/HEAD/src/images/icon_intro.png -------------------------------------------------------------------------------- /web/images/icon_intro.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/wepyjs/wepy-weui-demo/HEAD/web/images/icon_intro.png -------------------------------------------------------------------------------- /src/images/icon_footer.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/wepyjs/wepy-weui-demo/HEAD/src/images/icon_footer.png -------------------------------------------------------------------------------- /src/images/icon_nav_form.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/wepyjs/wepy-weui-demo/HEAD/src/images/icon_nav_form.png -------------------------------------------------------------------------------- /src/images/icon_nav_nav.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/wepyjs/wepy-weui-demo/HEAD/src/images/icon_nav_nav.png -------------------------------------------------------------------------------- /src/images/icon_tabbar.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/wepyjs/wepy-weui-demo/HEAD/src/images/icon_tabbar.png -------------------------------------------------------------------------------- /src/images/pic_article.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/wepyjs/wepy-weui-demo/HEAD/src/images/pic_article.png -------------------------------------------------------------------------------- /web/images/icon_footer.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/wepyjs/wepy-weui-demo/HEAD/web/images/icon_footer.png -------------------------------------------------------------------------------- /web/images/icon_nav_form.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/wepyjs/wepy-weui-demo/HEAD/web/images/icon_nav_form.png -------------------------------------------------------------------------------- /web/images/icon_nav_nav.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/wepyjs/wepy-weui-demo/HEAD/web/images/icon_nav_nav.png -------------------------------------------------------------------------------- /web/images/icon_tabbar.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/wepyjs/wepy-weui-demo/HEAD/web/images/icon_tabbar.png -------------------------------------------------------------------------------- /web/images/pic_article.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/wepyjs/wepy-weui-demo/HEAD/web/images/pic_article.png -------------------------------------------------------------------------------- /src/images/icon_nav_search.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/wepyjs/wepy-weui-demo/HEAD/src/images/icon_nav_search.png -------------------------------------------------------------------------------- /src/images/icon_nav_widget.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/wepyjs/wepy-weui-demo/HEAD/src/images/icon_nav_widget.png -------------------------------------------------------------------------------- /web/images/icon_nav_search.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/wepyjs/wepy-weui-demo/HEAD/web/images/icon_nav_search.png -------------------------------------------------------------------------------- /web/images/icon_nav_widget.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/wepyjs/wepy-weui-demo/HEAD/web/images/icon_nav_widget.png -------------------------------------------------------------------------------- /src/images/icon_footer_link.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/wepyjs/wepy-weui-demo/HEAD/src/images/icon_footer_link.png -------------------------------------------------------------------------------- /src/images/icon_nav_feedback.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/wepyjs/wepy-weui-demo/HEAD/src/images/icon_nav_feedback.png -------------------------------------------------------------------------------- /src/images/icon_nav_special.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/wepyjs/wepy-weui-demo/HEAD/src/images/icon_nav_special.png -------------------------------------------------------------------------------- /src/images/icon_nav_z-index.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/wepyjs/wepy-weui-demo/HEAD/src/images/icon_nav_z-index.png -------------------------------------------------------------------------------- /web/images/icon_footer_link.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/wepyjs/wepy-weui-demo/HEAD/web/images/icon_footer_link.png -------------------------------------------------------------------------------- /web/images/icon_nav_feedback.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/wepyjs/wepy-weui-demo/HEAD/web/images/icon_nav_feedback.png -------------------------------------------------------------------------------- /web/images/icon_nav_special.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/wepyjs/wepy-weui-demo/HEAD/web/images/icon_nav_special.png -------------------------------------------------------------------------------- /web/images/icon_nav_z-index.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/wepyjs/wepy-weui-demo/HEAD/web/images/icon_nav_z-index.png -------------------------------------------------------------------------------- /src/style/base/variable/weui-grid.less: -------------------------------------------------------------------------------- 1 | @weuiGridBorderColor:#D9D9D9; 2 | @weuiGridFontSize: 14px; 3 | @weuiGridIconSize: 28px; 4 | @weuiGridColumnCount: 3; -------------------------------------------------------------------------------- /src/style/widget/weui-flex/weui-flex.less: -------------------------------------------------------------------------------- 1 | @import "../../base/fn.less"; 2 | 3 | .weui-flex { 4 | display: flex; 5 | } 6 | .weui-flex__item{ 7 | flex: 1; 8 | } 9 | -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | dist/ 2 | node_modules/ 3 | web/style 4 | sftp-config.json 5 | log 6 | npm-debug.log 7 | .vscode 8 | coverage 9 | lerna-debug.log 10 | .DS_Store 11 | .wepycache 12 | -------------------------------------------------------------------------------- /src/style/base/reset.less: -------------------------------------------------------------------------------- 1 | @import "fn.less"; 2 | 3 | page { 4 | line-height: 1.6; 5 | font-family: @weuiFontDefault; 6 | } 7 | 8 | icon{ 9 | vertical-align: middle; 10 | } 11 | -------------------------------------------------------------------------------- /.editorconfig: -------------------------------------------------------------------------------- 1 | root = true 2 | 3 | [*] 4 | charset = utf-8 5 | indent_style = space 6 | indent_size = 4 7 | end_of_line = lf 8 | insert_final_newline = true 9 | trim_trailing_whitespace = true 10 | -------------------------------------------------------------------------------- /src/style/base/variable/weui-progress.less: -------------------------------------------------------------------------------- 1 | @weuiProgressBg: #EBEBEB; 2 | @weuiProgressColor: #09BB07; 3 | @weuiProgressHeight: 3px; 4 | @weuiProgressCloseBg: #EF4F4F; 5 | @weuiProgressActiveBg: #C13E3E; 6 | -------------------------------------------------------------------------------- /src/style/base/variable/weui-dialog.less: -------------------------------------------------------------------------------- 1 | @weuiDialogBackgroundColor: #FFFFFF; 2 | @weuiDialogLineColor: #D5D5D6; 3 | @weuiDialogLinkColor: #3CC51F; 4 | @weuiDialogLinkActiveBc: #EEEEEE; 5 | @weuiDialogGapWidth: 1.6em; 6 | -------------------------------------------------------------------------------- /src/style/base/variable/weui-msg.less: -------------------------------------------------------------------------------- 1 | @weuiMsgPaddingTop:36px; 2 | @weuiMsgIconGap:30px; 3 | @weuiMsgTitleGap:5px; 4 | @weuiMsgTextGap:25px; 5 | @weuiMsgOprGap:25px; 6 | @weuiMsgExtraAreaGap:15px; 7 | @weuiMsgExtraAreaOfMinHeight:438px; -------------------------------------------------------------------------------- /src/style/base/variable/global.less: -------------------------------------------------------------------------------- 1 | // font 2 | @weuiFontEN:-apple-system-font,"Helvetica Neue"; 3 | @weuiFontCN:"PingFang SC","Hiragino Sans GB","Microsoft YaHei"; 4 | @weuiFontSans:sans-serif; 5 | @weuiFontDefault:@weuiFontEN,@weuiFontSans; -------------------------------------------------------------------------------- /src/style/widget/weui-cell/weui-switch.less: -------------------------------------------------------------------------------- 1 | @import "../../base/fn.less"; 2 | 3 | .weui-cell_switch{ 4 | padding-top: (@weuiCellHeight - @weuiSwitchHeight) / 2; 5 | padding-bottom: (@weuiCellHeight - @weuiSwitchHeight) / 2; 6 | } 7 | -------------------------------------------------------------------------------- /src/style/widget/weui-cell/weui-form.less: -------------------------------------------------------------------------------- 1 | @import "../../base/fn.less"; 2 | @import "./weui-form/weui-form_common.less"; 3 | @import "./weui-form/weui-form-preview.less"; 4 | @import "./weui-form/weui-select.less"; 5 | @import "./weui-form/weui-vcode.less"; 6 | -------------------------------------------------------------------------------- /src/style/widget/weui-button/weui-button.less: -------------------------------------------------------------------------------- 1 | @import "../../base/fn.less"; 2 | 3 | .weui-btn{ 4 | margin-top: @weuiBtnDefaultGap; 5 | &:first-child{ 6 | margin-top: 0; 7 | } 8 | } 9 | .weui-btn-area{ 10 | margin: @weuiCellsMarginTop @weuiBtnDefaultGap .3em; 11 | } 12 | -------------------------------------------------------------------------------- /src/style/widget/weui-progress/weui-progress.less: -------------------------------------------------------------------------------- 1 | @import "../../base/fn.less"; 2 | 3 | .weui-progress { 4 | display: flex; 5 | align-items: center; 6 | } 7 | 8 | .weui-progress__bar { 9 | flex: 1; 10 | } 11 | 12 | .weui-progress__opr { 13 | margin-left: 15px; 14 | font-size: 0; 15 | } 16 | -------------------------------------------------------------------------------- /src/style/widget/weui-tab/weui-tab.less: -------------------------------------------------------------------------------- 1 | @import "../../base/fn.less"; 2 | @import "weui-navbar.less"; 3 | 4 | .weui-tab { 5 | position: relative; 6 | height: 100%; 7 | } 8 | 9 | .weui-tab__panel{ 10 | box-sizing: border-box; 11 | height: 100%; 12 | padding-top: 50px; 13 | overflow: auto; 14 | -webkit-overflow-scrolling: touch; 15 | } 16 | -------------------------------------------------------------------------------- /src/example/gallery.wpy: -------------------------------------------------------------------------------- 1 | 9 | 10 | 17 | -------------------------------------------------------------------------------- /src/style/widget/weui-tips/weui-badge.less: -------------------------------------------------------------------------------- 1 | @import "../../base/fn.less"; 2 | 3 | .weui-badge { 4 | display: inline-block; 5 | padding: .15em .4em; 6 | min-width: 8px; 7 | border-radius: 18px; 8 | background-color: @weuiColorWarn; 9 | color: #FFFFFF; 10 | line-height: 1.2; 11 | text-align: center; 12 | font-size: 12px; 13 | vertical-align: middle; 14 | } 15 | .weui-badge_dot { 16 | padding: .4em; 17 | min-width: 0; 18 | } 19 | -------------------------------------------------------------------------------- /src/style/base/fn.less: -------------------------------------------------------------------------------- 1 | // mixin 2 | @import "mixin/setOnepx.less"; 3 | @import "mixin/setArrow.less"; 4 | @import "mixin/text.less"; 5 | 6 | 7 | // variable 8 | @import "variable/global.less"; 9 | @import "variable/color.less"; 10 | 11 | 12 | @import "variable/weui-cell.less"; 13 | @import "variable/weui-button.less"; 14 | @import "variable/weui-msg.less"; 15 | @import "variable/weui-grid.less"; 16 | @import "variable/weui-progress.less"; 17 | @import "variable/weui-dialog.less"; 18 | -------------------------------------------------------------------------------- /src/style/base/variable/color.less: -------------------------------------------------------------------------------- 1 | // color 2 | @weuiColorPrimary: #1AAD19; 3 | @weuiColorWarn: #E64340; 4 | 5 | // link 6 | @weuiLinkColorDefault: #586C94; 7 | 8 | // background 9 | @weuiBgColorDefault: #EFEFF4; 10 | @weuiBgColorActive: #ECECEC; 11 | 12 | // line 13 | @weuiLineColorLight: #E5E5E5; 14 | @weuiLineColorDark: #BCBAB6; 15 | 16 | // text 17 | @weuiTextColorTitle: #000000; 18 | @weuiTextColorTips: #B2B2B2; 19 | @weuiTextColorWarn: @weuiColorWarn; 20 | @weuiTextColorGray: #999999; -------------------------------------------------------------------------------- /src/style/base/mixin/text.less: -------------------------------------------------------------------------------- 1 | .ellipsis(@w:auto) { 2 | width: @w; 3 | overflow: hidden; 4 | text-overflow: ellipsis; 5 | white-space: nowrap; 6 | word-wrap: normal; 7 | } 8 | 9 | .ellipsisLn(@line) { 10 | overflow: hidden; 11 | text-overflow: ellipsis; 12 | display: -webkit-box; 13 | -webkit-box-orient: vertical; 14 | -webkit-line-clamp: @line; 15 | } 16 | .text_wrap() { 17 | word-wrap:break-word; 18 | word-break:break-all; 19 | } 20 | .hyphens() { 21 | word-wrap:break-word; 22 | -webkit-hyphens:auto; 23 | hyphens:auto; 24 | } -------------------------------------------------------------------------------- /src/style/widget/weui-page/weui-article.less: -------------------------------------------------------------------------------- 1 | @import "../../base/fn.less"; 2 | 3 | .weui-article { 4 | padding: 20px 15px; 5 | font-size: 15px; 6 | } 7 | .weui-article__section { 8 | margin-bottom: 1.5em; 9 | } 10 | .weui-article__h1 { 11 | font-size: 18px; 12 | font-weight:400; 13 | margin-bottom: .9em; 14 | } 15 | .weui-article__h2 { 16 | font-size: 16px; 17 | font-weight:400; 18 | margin-bottom: .34em; 19 | } 20 | .weui-article__h3 { 21 | font-weight:400; 22 | font-size: 15px; 23 | margin-bottom: .34em; 24 | } 25 | .weui-article__p { 26 | margin: 0 0 .8em; 27 | } 28 | -------------------------------------------------------------------------------- /src/style/widget/weui-cell/weui-check.less: -------------------------------------------------------------------------------- 1 | @import "../../base/fn.less"; 2 | 3 | // icon 4 | .weui-icon-radio{ 5 | margin-left: 3.2px; 6 | margin-right: 3.2px; 7 | } 8 | .weui-icon-checkbox_circle, 9 | .weui-icon-checkbox_success{ 10 | margin-left: 4.6px; 11 | margin-right: 4.6px; 12 | } 13 | 14 | .weui-check__label{ 15 | &:active{ 16 | background-color: @weuiCellActiveBg; 17 | } 18 | } 19 | .weui-check{ 20 | position: absolute; 21 | left: -9999px; 22 | } 23 | .weui-check__hd_in-checkbox{ 24 | padding-right: @weuiCellInnerGapH; 25 | } 26 | .weui-cell__ft_in-radio{ 27 | padding-left: @weuiCellInnerGapH; 28 | } 29 | -------------------------------------------------------------------------------- /src/example/tabbar.wpy: -------------------------------------------------------------------------------- 1 | 13 | 21 | 22 | 29 | -------------------------------------------------------------------------------- /src/style/widget/weui-panel/weui-panel.less: -------------------------------------------------------------------------------- 1 | @import "../../base/fn.less"; 2 | 3 | 4 | .weui-panel { 5 | background-color: #FFFFFF; 6 | margin-top: 10px; 7 | &:first-child { 8 | margin-top: 0; 9 | } 10 | 11 | position: relative; 12 | overflow: hidden; 13 | &:before { 14 | .setTopLine(@weuiLineColorLight); 15 | } 16 | &:after { 17 | .setBottomLine(@weuiLineColorLight); 18 | } 19 | } 20 | 21 | .weui-panel__hd { 22 | padding: 14px 15px 10px; 23 | color: @weuiTextColorGray; 24 | font-size: 13px; 25 | position: relative; 26 | &:after { 27 | .setBottomLine(@weuiLineColorLight); 28 | left: 15px; 29 | } 30 | } 31 | 32 | 33 | 34 | 35 | -------------------------------------------------------------------------------- /src/style/widget/weui-cell/weui-access.less: -------------------------------------------------------------------------------- 1 | @import "../../base/fn.less"; 2 | 3 | .weui-cell_access { 4 | color: inherit; 5 | } 6 | .weui-cell__ft_in-access { 7 | padding-right: 13px; 8 | position: relative; 9 | &:after { 10 | content: " "; 11 | .setArrow(right, 6px, #C8C8CD, 2px); 12 | position: absolute; 13 | top: 50%; 14 | margin-top: -4px; 15 | right: 2px; 16 | } 17 | } 18 | .weui-cell_link{ 19 | color: @weuiLinkColorDefault; 20 | font-size: 14px; 21 | 22 | &:active{ 23 | background-color: @weuiCellActiveBg; 24 | } 25 | 26 | // 由于weui-cell:first-child的:before为隐藏，所以这里要重新显示出来 27 | &:first-child{ 28 | &:before{ 29 | display: block; 30 | } 31 | } 32 | } 33 | -------------------------------------------------------------------------------- /src/style/widget/weui-agree/weui-agree.less: -------------------------------------------------------------------------------- 1 | @import "../../base/fn.less"; 2 | 3 | .weui-agree{ 4 | display: block; 5 | padding: .5em 15px; 6 | font-size: 13px; 7 | } 8 | .weui-agree__text{ 9 | color: @weuiTextColorGray; 10 | } 11 | .weui-agree__link{ 12 | display: inline; 13 | color: @weuiLinkColorDefault; 14 | } 15 | .weui-agree__checkbox{ 16 | position: absolute; 17 | left: -9999px; 18 | } 19 | .weui-agree__checkbox-icon{ 20 | position: relative; 21 | top: 2px; 22 | display: inline-block; 23 | border: 1px solid #D1D1D1; 24 | background-color: #FFFFFF; 25 | border-radius: 3px; 26 | width: 11px; 27 | height: 11px; 28 | } 29 | .weui-agree__checkbox-icon-check{ 30 | position: absolute; 31 | top: 1px; 32 | left: 1px; 33 | } 34 | -------------------------------------------------------------------------------- /src/style/widget/weui-cell/weui-form/weui-vcode.less: -------------------------------------------------------------------------------- 1 | @import "../../../base/fn.less"; 2 | 3 | .weui-cell_vcode { 4 | padding-right: 0; 5 | } 6 | .weui-vcode-img{ 7 | margin-left: 5px; 8 | height: unit(@weuiCellHeight / @weuiCellFontSize, em); 9 | vertical-align: middle; 10 | } 11 | .weui-vcode-btn { 12 | display: inline-block; 13 | height: unit(@weuiCellHeight / @weuiCellFontSize, em); 14 | margin-left: 5px; 15 | padding: 0 0.6em 0 0.7em; 16 | border-left: 1px solid @weuiLineColorLight; 17 | line-height: unit(@weuiCellHeight / @weuiCellFontSize, em); 18 | vertical-align: middle; 19 | font-size: @weuiCellFontSize; 20 | color: @weuiDialogLinkColor; 21 | white-space: nowrap; 22 | &:active { 23 | color: desaturate(@weuiDialogLinkColor, 30%); 24 | } 25 | } 26 | -------------------------------------------------------------------------------- /src/style/base/variable/weui-cell.less: -------------------------------------------------------------------------------- 1 | @weuiCellBg:#FFFFFF; 2 | @weuiCellBorderColor:#D9D9D9; 3 | @weuiCellGapV:10px; 4 | @weuiCellGapH:15px; 5 | @weuiCellInnerGapH:.35em; 6 | @weuiCellFontSize:17px; 7 | @weuiCellHeight: 44px; 8 | @weuiCellHeightEm: unit(@weuiCellHeight / @weuiCellFontSize, em); 9 | @weuiCellTipsFontSize:14px; 10 | @weuiCellLabelWidth:105px; 11 | @weuiCellActiveBg: #ECECEC; 12 | 13 | @weuiCellLineHeight: unit((@weuiCellHeight - 2 * @weuiCellGapV) / @weuiCellFontSize); // 高度为44px，减去上下padding的行高 14 | @weuiCellsMarginTop:unit(20 / @weuiCellFontSize, em); 15 | 16 | // weui switch 17 | @weuiSwitchHeight: 32px; 18 | 19 | // weui uploader 20 | @weuiUploaderBorderColor:#D9D9D9; 21 | @weuiUploaderActiveBorderColor:#999999; 22 | @weuiUploaderFileSpacing: 9px; 23 | @weuiUploaderSize: 79px; 24 | @weuiUploaderBorderWidth: 1px; -------------------------------------------------------------------------------- /src/style/widget/weui-cell/weui-form/weui-select.less: -------------------------------------------------------------------------------- 1 | @import "../../../base/fn.less"; 2 | 3 | .weui-cell_select { 4 | padding: 0; 5 | } 6 | .weui-select { 7 | position: relative; 8 | padding-left: @weuiCellGapH; 9 | padding-right: 30px; 10 | 11 | height: @weuiCellHeightEm; 12 | min-height: @weuiCellHeightEm; 13 | line-height: @weuiCellHeightEm; 14 | 15 | border-right: 1rpx solid @weuiCellBorderColor; 16 | 17 | &:before{ 18 | content: " "; 19 | .setArrow(right, 6px, #C8C8CD, 2px); 20 | 21 | position: absolute; 22 | top: 50%; 23 | right: @weuiCellGapH; 24 | margin-top: -4px; 25 | } 26 | &_in-select-after{ 27 | padding-left: 0; 28 | } 29 | } 30 | .weui-cell__hd_in-select-after, 31 | .weui-cell__bd_in-select-before{ 32 | padding-left: @weuiCellGapH; 33 | } 34 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # WeUI in WePY 2 | 3 | [WeUI](https://github.com/weui/weui-wxss) 是一套同微信原生视觉体验一致的基础样式库，由微信官方设计团队为微信内网页和微信小程序量身设计，令用户的使用感知更加统一。 4 | 这里是 WeUI 在 WePY 中的使用示例。 5 | 6 | ## 预览 7 | 8 | [Web 版线上DEMO](https://www.madcoder.cn/demos/wepy-weui-demo/index.html) 9 | 10 | ![image](https://cloud.githubusercontent.com/assets/2182004/26298989/c0ae78b2-3f0b-11e7-8979-e37884a86a43.png) 11 | 12 | ## 体验步骤 13 | 14 | ### 1. 安装 wepy 15 | 本项目基于wepy开发，[参考这里](https://github.com/wepyjs/wepy) 16 | ```bash 17 | npm install wepy-cli -g 18 | ``` 19 | 20 | ### 2. 下载源代码 21 | ```bash 22 | git clone git@github.com:wepyjs/wepy-weui-demo.git 23 | ``` 24 | 25 | ### 3. 安装开发依赖 26 | ```bash 27 | npm install 28 | ``` 29 | 30 | ### 4. 编译源代码 31 | ```bash 32 | wepy build 33 | ``` 34 | 35 | ### 5.导入至开发者工具 36 | 37 | 编译完成后会生成`dist`目录，开发者工具本地开发目录指向`dist`目录。 38 | 39 | **切记： 取消勾选`项目-->开启ES6转ES5`，否则代码运行报错。** 40 | 41 | -------------------------------------------------------------------------------- /src/style/widget/weui-footer/weui-footer.less: -------------------------------------------------------------------------------- 1 | @import "../../base/fn.less"; 2 | 3 | .weui-footer { 4 | color: @weuiTextColorGray; 5 | font-size: 14px; 6 | text-align: center; 7 | } 8 | .weui-footer_fixed-bottom{ 9 | position: fixed; 10 | bottom: .52em; 11 | left: 0; 12 | right: 0; 13 | } 14 | .weui-footer__links{ 15 | font-size: 0; 16 | } 17 | .weui-footer__link{ 18 | display: inline-block; 19 | vertical-align: top; 20 | margin: 0 .62em; 21 | position: relative; 22 | font-size: 14px; 23 | color: @weuiLinkColorDefault; 24 | &:before{ 25 | .setLeftLine(); 26 | left: -.65em; 27 | top: .36em; 28 | bottom: .36em; 29 | } 30 | &:first-child{ 31 | &:before{ 32 | display: none; 33 | } 34 | } 35 | } 36 | .weui-footer__text{ 37 | padding: 0 .34em; 38 | font-size: 12px; 39 | } 40 | -------------------------------------------------------------------------------- /src/style/base/mixin/setOnepx.less: -------------------------------------------------------------------------------- 1 | .setTopLine(@c: #C7C7C7) { 2 | content: " "; 3 | position: absolute; 4 | left: 0; 5 | top: 0; 6 | right: 0; 7 | height: 1px; 8 | border-top: 1rpx solid @c; 9 | color: @c; 10 | } 11 | 12 | .setBottomLine(@c: #C7C7C7) { 13 | content: " "; 14 | position: absolute; 15 | left: 0; 16 | bottom: 0; 17 | right: 0; 18 | height: 1px; 19 | border-bottom: 1rpx solid @c; 20 | color: @c; 21 | } 22 | 23 | .setLeftLine(@c: #C7C7C7) { 24 | content: " "; 25 | position: absolute; 26 | left: 0; 27 | top: 0; 28 | width: 1px; 29 | bottom: 0; 30 | border-left: 1rpx solid @c; 31 | color: @c; 32 | } 33 | 34 | .setRightLine(@c: #C7C7C7) { 35 | content: " "; 36 | position: absolute; 37 | right: 0; 38 | top: 0; 39 | width: 1px; 40 | bottom: 0; 41 | border-right: 1rpx solid @c; 42 | color: @c; 43 | } -------------------------------------------------------------------------------- /src/example/slider.wpy: -------------------------------------------------------------------------------- 1 | 6 | 20 | 21 | 33 | -------------------------------------------------------------------------------- /src/style/widget/weui-tab/weui-navbar.less: -------------------------------------------------------------------------------- 1 | @import "../../base/fn.less"; 2 | 3 | @weuiNavBarColor: #1AAD19; 4 | .weui-navbar { 5 | display: flex; 6 | position: absolute; 7 | z-index: 500; 8 | top: 0; 9 | width: 100%; 10 | border-bottom: 1rpx solid #CCCCCC; 11 | } 12 | 13 | .weui-navbar__item { 14 | position: relative; 15 | display: block; 16 | flex: 1; 17 | padding: 13px 0; 18 | text-align: center; 19 | font-size: 0; 20 | 21 | &.weui-bar__item_on { 22 | color: @weuiNavBarColor; 23 | } 24 | } 25 | .weui-navbar__slider { 26 | position: absolute; 27 | content: " "; 28 | left: 0; 29 | bottom: 0; 30 | width: 6em; 31 | height: 3px; 32 | background-color: @weuiNavBarColor; 33 | transition: transform .3s; 34 | } 35 | .weui-navbar__title{ 36 | display: inline-block; 37 | font-size: 15px; 38 | max-width: 8em; 39 | .ellipsis(); 40 | } 41 | -------------------------------------------------------------------------------- /src/example/grid.wpy: -------------------------------------------------------------------------------- 1 | 19 | 20 | 29 | -------------------------------------------------------------------------------- /src/index.template.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | test 11 | 27 | 28 | 29 |
30 | 31 |
32 | 33 | 34 | -------------------------------------------------------------------------------- /src/example/msg.wpy: -------------------------------------------------------------------------------- 1 | 6 | 20 | 21 | 35 | -------------------------------------------------------------------------------- /src/style/widget/weui-grid/weui-grid.less: -------------------------------------------------------------------------------- 1 | @import "../../base/fn.less"; 2 | 3 | .weui-grids { 4 | border-top: 1rpx solid @weuiGridBorderColor; 5 | border-left: 1rpx solid @weuiGridBorderColor; 6 | overflow: hidden; 7 | } 8 | .weui-grid { 9 | position: relative; 10 | float: left; 11 | padding: 20px 10px; 12 | width: 100% / @weuiGridColumnCount; 13 | box-sizing: border-box; 14 | 15 | border-right: 1rpx solid @weuiGridBorderColor; 16 | border-bottom: 1rpx solid @weuiGridBorderColor; 17 | &_active{ 18 | background-color: @weuiBgColorActive; 19 | } 20 | } 21 | .weui-grid__icon { 22 | display: block; 23 | width: @weuiGridIconSize; 24 | height: @weuiGridIconSize; 25 | margin: 0 auto; 26 | } 27 | .weui-grid__label { 28 | margin-top: 5px; 29 | display: block; 30 | text-align: center; 31 | color: @weuiTextColorTitle; 32 | font-size: @weuiGridFontSize; 33 | white-space: nowrap; 34 | text-overflow: ellipsis; 35 | overflow: hidden; 36 | } 37 | -------------------------------------------------------------------------------- /src/example/actionsheet.wpy: -------------------------------------------------------------------------------- 1 | 6 | 19 | 20 | 38 | -------------------------------------------------------------------------------- /web/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | test 11 | 27 | 28 | 29 |
30 | 31 |
32 | 33 | -------------------------------------------------------------------------------- /src/style/widget/weui-animate/weui-animate.less: -------------------------------------------------------------------------------- 1 | @import "../../base/fn.less"; 2 | 3 | @keyframes slideUp { 4 | from { 5 | transform: translate3d(0, 100%, 0); 6 | } 7 | 8 | to { 9 | transform: translate3d(0, 0, 0); 10 | } 11 | } 12 | 13 | .weui-animate-slide-up { 14 | animation: slideUp ease .3s forwards; 15 | } 16 | 17 | @keyframes slideDown { 18 | from { 19 | transform: translate3d(0, 0, 0); 20 | } 21 | 22 | to { 23 | transform: translate3d(0, 100%, 0); 24 | } 25 | } 26 | 27 | .weui-animate-slide-down { 28 | animation: slideDown ease .3s forwards; 29 | } 30 | 31 | @keyframes fadeIn { 32 | from { 33 | opacity: 0; 34 | } 35 | to { 36 | opacity: 1; 37 | } 38 | } 39 | 40 | .weui-animate-fade-in { 41 | animation: fadeIn ease .3s forwards; 42 | } 43 | 44 | @keyframes fadeOut { 45 | from { 46 | opacity: 1; 47 | } 48 | to { 49 | opacity: 0; 50 | } 51 | } 52 | 53 | .weui-animate-fade-out { 54 | animation: fadeOut ease .3s forwards; 55 | } 56 | -------------------------------------------------------------------------------- /src/style/widget/weui-cell/weui-form/weui-form_common.less: -------------------------------------------------------------------------------- 1 | @import "../../../base/fn.less"; 2 | 3 | .weui-cell_input{ 4 | padding-top: 0; 5 | padding-bottom: 0; 6 | } 7 | .weui-label{ 8 | width:@weuiCellLabelWidth; 9 | .text_wrap(); 10 | } 11 | .weui-input{ 12 | height: @weuiCellHeightEm; 13 | min-height: @weuiCellHeightEm; 14 | line-height: @weuiCellHeightEm; 15 | } 16 | .weui-toptips{ 17 | //display: none; // 通过 wx:if 来控制 18 | position: fixed; 19 | transform: translateZ(0); 20 | top: 0; 21 | left: 0; 22 | right: 0; 23 | padding: 5px; 24 | font-size: 14px; 25 | text-align: center; 26 | color: #FFFFFF; 27 | z-index: 5000; 28 | .text_wrap(); 29 | } 30 | .weui-toptips_warn{ 31 | background-color: @weuiColorWarn; 32 | } 33 | .weui-textarea{ 34 | display: block; 35 | width: 100%; 36 | } 37 | .weui-textarea-counter{ 38 | color: @weuiTextColorTips; 39 | text-align: right; 40 | } 41 | .weui-textarea-counter_warn{ 42 | color: @weuiTextColorWarn; 43 | } 44 | .weui-cell_warn{ 45 | color: @weuiTextColorWarn; 46 | } 47 | -------------------------------------------------------------------------------- /src/style/widget/weui-page/weui-msg.less: -------------------------------------------------------------------------------- 1 | @import "../../base/fn.less"; 2 | 3 | .weui-msg { 4 | padding-top: @weuiMsgPaddingTop; 5 | text-align: center; 6 | } 7 | .weui-msg__link{ 8 | display: inline; 9 | color: @weuiLinkColorDefault; 10 | } 11 | .weui-msg__icon-area { 12 | margin-bottom: @weuiMsgIconGap; 13 | } 14 | .weui-msg__text-area { 15 | margin-bottom: @weuiMsgTextGap; 16 | padding:0 20px; 17 | } 18 | .weui-msg__title { 19 | margin-bottom: @weuiMsgTitleGap; 20 | font-weight: 400; 21 | font-size: 20px; 22 | } 23 | .weui-msg__desc { 24 | font-size: 14px; 25 | color: @weuiTextColorGray; 26 | } 27 | .weui-msg__opr-area { 28 | margin-bottom: @weuiMsgOprGap; 29 | } 30 | .weui-msg__extra-area { 31 | margin-bottom: @weuiMsgExtraAreaGap; 32 | font-size: 14px; 33 | color: @weuiTextColorGray; 34 | } 35 | 36 | @media screen and (min-height: @weuiMsgExtraAreaOfMinHeight) { 37 | .weui-msg__extra-area { 38 | position: fixed; 39 | left: 0; 40 | bottom: 0; 41 | width: 100%; 42 | text-align: center; 43 | } 44 | } 45 | -------------------------------------------------------------------------------- /.eslintrc.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | root: true, 3 | parser: 'babel-eslint', 4 | parserOptions: { 5 | sourceType: 'module' 6 | }, 7 | env: { 8 | browser: true 9 | }, 10 | // https://github.com/feross/standard/blob/master/RULES.md#javascript-standard-style 11 | extends: 'standard', 12 | // required to lint *.wpy files 13 | plugins: [ 14 | 'html' 15 | ], 16 | settings: { 17 | 'html/html-extensions': ['.html', '.wpy'] 18 | }, 19 | 'globals': { 20 | 'wx': true 21 | }, 22 | // add your custom rules here 23 | 'rules': { 24 | // allow paren-less arrow functions 25 | 'arrow-parens': 0, 26 | // allow async-await 27 | 'generator-star-spacing': 0, 28 | "semi": [ 29 | "error", 30 | "always" 31 | ], 32 | 'comma-dangle': ["error", "only-multiline"], 33 | 'padded-blocks': 0, 34 | 'one-var': 0, 35 | 'no-return-assign': 0, 36 | 'indent': ['error', 4], 37 | // allow debugger during development 38 | 'no-debugger': process.env.NODE_ENV === 'production' ? 2 : 0, 39 | 'space-before-function-paren': 0 40 | } 41 | } 42 | -------------------------------------------------------------------------------- /src/style/widget/weui-tips/weui-loadmore.less: -------------------------------------------------------------------------------- 1 | @import "../../base/fn.less"; 2 | 3 | .weui-loadmore{ 4 | width: 65%; 5 | margin:1.5em auto; 6 | line-height: 1.6em; 7 | font-size:14px; 8 | text-align: center; 9 | } 10 | .weui-loadmore__tips{ 11 | display: inline-block; 12 | vertical-align: middle; 13 | } 14 | .weui-loadmore_line{ 15 | border-top:1px solid @weuiLineColorLight; 16 | margin-top:2.4em; 17 | } 18 | .weui-loadmore__tips_in-line{ 19 | position: relative; 20 | top:-.9em; 21 | padding:0 .55em; 22 | background-color: #FFFFFF; 23 | color:@weuiTextColorGray; 24 | } 25 | .weui-loadmore_dot{ 26 | } 27 | .weui-loadmore__tips_in-dot{ 28 | position: relative; 29 | padding:0 .16em; 30 | width: 4px; 31 | height: 1.6em; 32 | &:before{ 33 | content: " "; 34 | position: absolute; 35 | top: 50%; 36 | left: 50%; 37 | margin-top: -1px; 38 | margin-left: -2px; 39 | width: 4px; 40 | height: 4px; 41 | border-radius: 50%; 42 | background-color: @weuiLineColorLight; 43 | } 44 | } 45 | -------------------------------------------------------------------------------- /src/example/loadmore.wpy: -------------------------------------------------------------------------------- 1 | 6 | 26 | 27 | 34 | -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | MIT License 2 | 3 | Copyright (c) 2016 wepyjs 4 | 5 | Permission is hereby granted, free of charge, to any person obtaining a copy 6 | of this software and associated documentation files (the "Software"), to deal 7 | in the Software without restriction, including without limitation the rights 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 9 | copies of the Software, and to permit persons to whom the Software is 10 | furnished to do so, subject to the following conditions: 11 | 12 | The above copyright notice and this permission notice shall be included in all 13 | copies or substantial portions of the Software. 14 | 15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE 21 | SOFTWARE. 22 | -------------------------------------------------------------------------------- /src/style/weui.less: -------------------------------------------------------------------------------- 1 | @import "base/reset.less"; 2 | 3 | @import "widget/weui-cell/weui-cell.less"; 4 | @import "widget/weui-cell/weui-access.less"; 5 | @import "widget/weui-cell/weui-check.less"; 6 | @import "widget/weui-cell/weui-form.less"; 7 | @import "widget/weui-cell/weui-switch.less"; 8 | @import "widget/weui-cell/weui-uploader.less"; 9 | 10 | @import "./widget/weui-page/weui-article.less"; 11 | @import "./widget/weui-page/weui-msg.less"; 12 | 13 | @import "widget/weui-flex/weui-flex.less"; 14 | 15 | @import "widget/weui-button/weui-button.less"; 16 | 17 | @import "./widget/weui-agree/weui-agree.less"; 18 | 19 | @import "./widget/weui-footer/weui-footer.less"; 20 | 21 | @import "./widget/weui-grid/weui-grid.less"; 22 | 23 | @import "./widget/weui-loading/weui-loading.less"; 24 | 25 | @import "./widget/weui-tips/weui-badge.less"; 26 | @import "./widget/weui-tips/weui-loadmore.less"; 27 | 28 | @import "./widget/weui-panel/weui-panel.less"; 29 | 30 | @import "./widget/weui-media-box/weui-media-box.less"; 31 | 32 | @import "./widget/weui-progress/weui-progress.less"; 33 | 34 | @import "./widget/weui-tab/weui-tab.less"; 35 | 36 | @import "./widget/weui-searchbar/weui-searchbar.less"; 37 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "wepy-weui-demo", 3 | "version": "1.0.0", 4 | "description": "", 5 | "main": "dist/app.js", 6 | "scripts": { 7 | "build": "cross-env NODE_ENV=production wepy build --no-cache", 8 | "test": "echo \"Error: no test specified\" && exit 1" 9 | }, 10 | "author": "", 11 | "license": "MIT", 12 | "dependencies": { 13 | "wepy": "^1.5.1", 14 | "wepy-async-function": "^1.4.4", 15 | "wepy-com-toast": "^1.0.1" 16 | }, 17 | "devDependencies": { 18 | "babel-eslint": "^7.2.1", 19 | "babel-plugin-syntax-export-extensions": "^6.13.0", 20 | "babel-plugin-transform-export-extensions": "^6.22.0", 21 | "babel-preset-es2015": "^6.24.0", 22 | "babel-preset-stage-1": "^6.22.0", 23 | "cross-env": "^3.2.4", 24 | "eslint": "^3.18.0", 25 | "eslint-config-standard": "^7.1.0", 26 | "eslint-friendly-formatter": "^2.0.7", 27 | "eslint-plugin-html": "^2.0.1", 28 | "eslint-plugin-promise": "^2.0.1", 29 | "eslint-plugin-standard": "^2.0.1", 30 | "wepy-compiler-babel": "^1.5.1", 31 | "wepy-compiler-less": "^1.3.10", 32 | "wepy-eslint": "^1.5.2", 33 | "wepy-plugin-imagemin": "^1.5.2", 34 | "wepy-plugin-uglifyjs": "^1.3.6" 35 | } 36 | } 37 | -------------------------------------------------------------------------------- /src/example/toast.wpy: -------------------------------------------------------------------------------- 1 | 6 | 20 | 21 | 43 | -------------------------------------------------------------------------------- /src/style/base/mixin/setArrow.less: -------------------------------------------------------------------------------- 1 | ._setArrow(@arrowsize, @borderColor, @borderWidth){ 2 | display: inline-block; 3 | height: @arrowsize; 4 | width: @arrowsize; 5 | border-width: @borderWidth @borderWidth 0 0; 6 | border-color: @borderColor; 7 | border-style: solid; 8 | } 9 | 10 | .setArrow(@direction, @arrowsize, @borderColor, @borderWidth) when (@direction = top) { 11 | ._setArrow(@arrowsize, @borderColor, @borderWidth); 12 | transform: matrix(0.71,-0.71,0.71,0.71,0,0); // rotate(-45deg) 13 | } 14 | 15 | .setArrow(@direction, @arrowsize, @borderColor,@borderWidth) when (@direction = right) { 16 | ._setArrow(@arrowsize, @borderColor, @borderWidth); 17 | transform: matrix(0.71,0.71,-0.71,0.71,0,0); // rotate(45deg); 18 | 19 | position: relative; 20 | top: -2px; 21 | } 22 | 23 | .setArrow(@direction, @arrowsize, @borderColor,@borderWidth) when (@direction = down) { 24 | ._setArrow(@arrowsize, @borderColor, @borderWidth); 25 | transform: matrix(-0.71,0.71,-0.71,-0.71,0,0); // rotate(135deg); 26 | 27 | position: relative; 28 | top: -3px; 29 | } 30 | 31 | .setArrow(@direction, @arrowsize, @borderColor,@borderWidth) when (@direction = left) { 32 | ._setArrow(@arrowsize, @borderColor, @borderWidth); 33 | transform: matrix(-0.71,-0.71,0.71,-0.71,0,0); // rotate(-135deg); 34 | 35 | position: relative; 36 | top: -2px; 37 | } -------------------------------------------------------------------------------- /wepy.config.js: -------------------------------------------------------------------------------- 1 | const path = require('path'); 2 | let prod = process.env.NODE_ENV === 'production'; 3 | 4 | module.exports = { 5 | eslint: true, 6 | wpyExt: ".wpy", 7 | build: { 8 | web: { 9 | apis: ['showToast', 'showActionSheet', 'showModal'], 10 | components: ['navigator', 'button', 'icon', 'progress', 'slider', 'radio', 'radio-group', 'checkbox', 'checkbox-group', 'switch'], 11 | htmlTemplate: path.join('src', 'index.template.html'), 12 | htmlOutput: path.join('web', 'index.html'), 13 | jsOutput: path.join('web', 'index.js') 14 | } 15 | }, 16 | compilers: { 17 | less: { 18 | }, 19 | babel: { 20 | sourceMap: true, 21 | presets: [ 22 | "es2015", 23 | "stage-1" 24 | ], 25 | plugins: [ 26 | "transform-export-extensions", 27 | "syntax-export-extensions", 28 | ] 29 | } 30 | } 31 | }; 32 | 33 | 34 | if (prod) { 35 | 36 | delete module.exports.compilers.babel.sourcesMap; 37 | 38 | // 压缩less 39 | module.exports.compilers['less'] = {compress: true} 40 | 41 | // 压缩js 42 | module.exports.plugins = { 43 | uglifyjs: { 44 | filter: /\.js$/, 45 | config: { 46 | } 47 | }, 48 | /*imagemin: { 49 | filter: /\.(jpg|png|jpge)$/, 50 | config: { 51 | jpg: { 52 | quality: 80 53 | }, 54 | png: { 55 | quality: 80 56 | } 57 | } 58 | }*/ 59 | } 60 | } 61 | 62 | -------------------------------------------------------------------------------- /src/example/msg_fail.wpy: -------------------------------------------------------------------------------- 1 | 6 | 33 | 34 | 41 | -------------------------------------------------------------------------------- /src/example/msg_success.wpy: -------------------------------------------------------------------------------- 1 | 6 | 33 | 34 | 41 | -------------------------------------------------------------------------------- /src/style/widget/weui-cell/weui-cell.less: -------------------------------------------------------------------------------- 1 | @import "../../base/fn.less"; 2 | 3 | .weui-cells { 4 | position: relative; 5 | margin-top: @weuiCellsMarginTop; 6 | background-color: @weuiCellBg; 7 | line-height: @weuiCellLineHeight; 8 | font-size: @weuiCellFontSize; //cell中间有效高度23px，跟客户端默认图标尺寸一致 9 | &:before { 10 | .setTopLine(@weuiCellBorderColor); 11 | } 12 | &:after { 13 | .setBottomLine(@weuiCellBorderColor); 14 | } 15 | } 16 | 17 | .weui-cells__title { 18 | margin-top: .77em; // 15px - 行高 19 | margin-bottom: .3em; // 8px - 行高 20 | padding-left: @weuiCellGapH; 21 | padding-right: @weuiCellGapH; 22 | color: @weuiTextColorGray; 23 | font-size: @weuiCellTipsFontSize; 24 | } 25 | .weui-cells_after-title{ 26 | margin-top: 0; 27 | } 28 | 29 | .weui-cells__tips { 30 | margin-top: .3em; // 8px - 行高 31 | color: @weuiTextColorGray; 32 | padding-left: @weuiCellGapH; 33 | padding-right: @weuiCellGapH; 34 | font-size: @weuiCellTipsFontSize; 35 | } 36 | 37 | .weui-cell { 38 | padding: @weuiCellGapV @weuiCellGapH; 39 | position: relative; //这个是为了兼容cells容器onepx方案被before挡住而做的 40 | display: flex; 41 | align-items: center; 42 | &:before { 43 | .setTopLine(@weuiCellBorderColor); 44 | left: @weuiCellGapH; 45 | } 46 | &:first-child { 47 | &:before { 48 | display: none; 49 | } 50 | } 51 | } 52 | .weui-cell_active { 53 | background-color: @weuiCellActiveBg; 54 | } 55 | .weui-cell_primary{ 56 | align-items: flex-start; 57 | } 58 | .weui-cell__bd{ 59 | flex: 1; 60 | } 61 | .weui-cell__ft { 62 | text-align: right; 63 | color: @weuiTextColorGray; 64 | } 65 | -------------------------------------------------------------------------------- /src/images/base64.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | icon20: "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAC4AAAAuCAMAAABgZ9sFAAAAVFBMVEXx8fHMzMzr6+vn5+fv7+/t7e3d3d2+vr7W1tbHx8eysrKdnZ3p6enk5OTR0dG7u7u3t7ejo6PY2Njh4eHf39/T09PExMSvr6+goKCqqqqnp6e4uLgcLY/OAAAAnklEQVRIx+3RSRLDIAxE0QYhAbGZPNu5/z0zrXHiqiz5W72FqhqtVuuXAl3iOV7iPV/iSsAqZa9BS7YOmMXnNNX4TWGxRMn3R6SxRNgy0bzXOW8EBO8SAClsPdB3psqlvG+Lw7ONXg/pTld52BjgSSkA3PV2OOemjIDcZQWgVvONw60q7sIpR38EnHPSMDQ4MjDjLPozhAkGrVbr/z0ANjAF4AcbXmYAAAAASUVORK5CYII=", 3 | icon60: "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAHgAAAB4CAMAAAAOusbgAAAAeFBMVEUAwAD///+U5ZTc9twOww7G8MYwzDCH4YcfyR9x23Hw+/DY9dhm2WZG0kbT9NP0/PTL8sux7LFe115T1VM+zz7i+OIXxhes6qxr2mvA8MCe6J6M4oz6/frr+us5zjn2/fa67rqB4IF13XWn6ad83nxa1loqyirn+eccHxx4AAAC/klEQVRo3u2W2ZKiQBBF8wpCNSCyLwri7v//4bRIFVXoTBBB+DAReV5sG6lTXDITiGEYhmEYhmEYhmEYhmEY5v9i5fsZGRx9PyGDne8f6K9cfd+mKXe1yNG/0CcqYE86AkBMBh66f20deBc7wA/1WFiTwvSEpBMA2JJOBsSLxe/4QEEaJRrASP8EVF8Q74GbmevKg0saa0B8QbwBdjRyADYxIhqxAZ++IKYtciPXLQVG+imw+oo4Bu56rjEJ4GYsvPmKOAB+xlz7L5aevqUXuePWVhvWJ4eWiwUQ67mK51qPj4dFDMlRLBZTqF3SDvmr4BwtkECu5gHWPkmDfQh02WLxXuvbvC8ku8F57GsI5e0CmUwLz1kq3kD17R1In5816rGvQ5VMk5FEtIiWislTffuDpl/k/PzscdQsv8r9qWq4LRWX6tQYtTxvI3XyrwdyQxChXioOngH3dLgOFjk0all56XRi/wDFQrGQU3Os5t0wJu1GNtNKHdPqYaGYQuRDfbfDf26AGLYSyGS3ZAK4S8XuoAlxGSdYMKwqZKM9XJMtyqXi7HX/CiAZS6d8bSVUz5J36mEMFDTlAFQzxOT1dzLRljjB6+++ejFqka+mXIe6F59mw22OuOw1F4T6lg/9VjL1rLDoI9Xzl1MSYDNHnPQnt3D1EE7PrXjye/3pVpr1Z45hMUdcACc5NVQI0bOdS1WA0wuz73e7/5TNqBPhQXPEFGJNV2zNqWI7QKBd2Gn6AiBko02zuAOXeWIXjV0jNqdKegaE/kJQ6Bfs4aju04lMLkA2T5wBSYPKDGF3RKhFYEa6A1L1LG2yacmsaZ6YPOSAMKNsO+N5dNTfkc5Aqe26uxHpx7ZirvgCwJpWq/lmX1hA7LyabQ34tt5RiJKXSwQ+0KU0V5xg+hZrd4Bn1n4EID+WkQdgLfRNtvil9SPfwy+WQ7PFBWQz6dGWZBLkeJFXZGCfLUjCgGgqXo5TuSu3cugdcTv/HjqnBTEMwzAMwzAMwzAMwzAMw/zf/AFbXiOA6frlMAAAAABJRU5ErkJggg==" 4 | }; -------------------------------------------------------------------------------- /src/example/dialog.wpy: -------------------------------------------------------------------------------- 1 | 6 | 20 | 21 | 56 | -------------------------------------------------------------------------------- /src/style/widget/weui-searchbar/weui-searchbar.less: -------------------------------------------------------------------------------- 1 | @import "../../base/fn.less"; 2 | 3 | @weuiSearchBarHeight: 28px; 4 | 5 | .weui-search-bar { 6 | position: relative; 7 | padding: 8px 10px; 8 | display: flex; 9 | box-sizing: border-box; 10 | background-color: #EFEFF4; 11 | border-top: 1rpx solid #D7D6DC; 12 | border-bottom: 1rpx solid #D7D6DC; 13 | } 14 | .weui-icon-search { 15 | margin-right: 8px; 16 | font-size:inherit; 17 | } 18 | .weui-icon-search_in-box { 19 | position: absolute; 20 | left: 10px; 21 | top: 7px; 22 | } 23 | .weui-search-bar__text{ 24 | display: inline-block; 25 | font-size: 14px; 26 | vertical-align: middle; 27 | } 28 | .weui-search-bar__form { 29 | position: relative; 30 | flex: auto; 31 | border-radius: 5px; 32 | background: #FFFFFF; 33 | border: 1rpx solid #E6E6EA; 34 | } 35 | .weui-search-bar__box { 36 | position: relative; 37 | padding-left: 30px; 38 | padding-right: 30px; 39 | width: 100%; 40 | box-sizing: border-box; 41 | z-index: 1; 42 | } 43 | .weui-search-bar__input { 44 | height: @weuiSearchBarHeight; 45 | line-height: @weuiSearchBarHeight; 46 | font-size: 14px; 47 | } 48 | .weui-icon-clear { 49 | position: absolute; 50 | top: 0; 51 | right: 0; 52 | padding: 7px 8px; 53 | font-size: 0; 54 | } 55 | .weui-search-bar__label { 56 | position: absolute; 57 | top: 0; 58 | right: 0; 59 | bottom: 0; 60 | left: 0; 61 | z-index: 2; 62 | border-radius: 3px; 63 | text-align: center; 64 | color: #9B9B9B; 65 | background: #FFFFFF; 66 | line-height: @weuiSearchBarHeight; 67 | } 68 | .weui-search-bar__cancel-btn { 69 | margin-left: 10px; 70 | line-height: @weuiSearchBarHeight; 71 | color: #09BB07; 72 | white-space: nowrap; 73 | } 74 | -------------------------------------------------------------------------------- /src/style/widget/weui-media-box/weui-media-box.less: -------------------------------------------------------------------------------- 1 | @import "../../base/fn.less"; 2 | 3 | .weui-media-box { 4 | padding: 15px; 5 | position: relative; 6 | &:before { 7 | .setTopLine(@weuiLineColorLight); 8 | left: 15px; 9 | } 10 | &:first-child { 11 | &:before { 12 | display: none 13 | } 14 | } 15 | } 16 | .weui-media-box__title { 17 | font-weight: 400; 18 | font-size: 17px; 19 | .ellipsis(); 20 | word-wrap: break-word; 21 | word-break: break-all; 22 | } 23 | .weui-media-box__desc { 24 | color: @weuiTextColorGray; 25 | font-size: 13px; 26 | line-height: 1.2; 27 | .ellipsisLn(2); 28 | } 29 | .weui-media-box__info { 30 | margin-top: 15px; 31 | padding-bottom: 5px; 32 | font-size: 13px; 33 | color: #CECECE; 34 | line-height: 1em; 35 | list-style: none; 36 | overflow: hidden; 37 | } 38 | .weui-media-box__info__meta { 39 | float: left; 40 | padding-right: 1em; 41 | } 42 | .weui-media-box__info__meta_extra { 43 | padding-left: 1em; 44 | border-left: 1px solid #CECECE; 45 | } 46 | .weui-media-box_text { 47 | } 48 | .weui-media-box__title_in-text { 49 | margin-bottom: 8px; 50 | } 51 | .weui-media-box_appmsg { 52 | display: flex; 53 | align-items: center; 54 | } 55 | .weui-media-box__thumb { 56 | width: 100%; 57 | height: 100%; 58 | vertical-align: top; 59 | } 60 | .weui-media-box__hd_in-appmsg { 61 | margin-right: .8em; 62 | width: 60px; 63 | height: 60px; 64 | line-height: 60px; 65 | text-align: center; 66 | } 67 | .weui-media-box__bd_in-appmsg { 68 | flex: 1; 69 | min-width: 0; 70 | } 71 | .weui-media-box_small-appmsg { 72 | padding: 0; 73 | } 74 | .weui-cells_in-small-appmsg { 75 | margin-top: 0; 76 | &:before { 77 | display: none; 78 | } 79 | } 80 | -------------------------------------------------------------------------------- /src/example/picker.wpy: -------------------------------------------------------------------------------- 1 | 6 | 27 | 28 | 54 | -------------------------------------------------------------------------------- /src/example/footer.wpy: -------------------------------------------------------------------------------- 1 | 9 | 47 | 48 | 55 | -------------------------------------------------------------------------------- /src/example/button.wpy: -------------------------------------------------------------------------------- 1 | 11 | 41 | 42 | 49 | -------------------------------------------------------------------------------- /src/style/widget/weui-cell/weui-form/weui-form-preview.less: -------------------------------------------------------------------------------- 1 | @import "../../../base/fn.less"; 2 | 3 | .weui-form-preview{ 4 | position: relative; 5 | background-color: #FFFFFF; 6 | &:before{ 7 | .setTopLine(@weuiCellBorderColor); 8 | } 9 | &:after{ 10 | .setBottomLine(@weuiCellBorderColor); 11 | } 12 | } 13 | .weui-form-preview__value{ 14 | font-size: 14px; 15 | } 16 | .weui-form-preview__value_in-hd{ 17 | font-size: 26px; 18 | } 19 | .weui-form-preview__hd{ 20 | position: relative; 21 | padding: @weuiCellGapV @weuiCellGapH; 22 | text-align: right; 23 | line-height: 2.5em; 24 | &:after{ 25 | .setBottomLine(@weuiCellBorderColor); 26 | left: @weuiCellGapH; 27 | } 28 | } 29 | .weui-form-preview__bd{ 30 | padding: @weuiCellGapV @weuiCellGapH; 31 | font-size: .9em; 32 | text-align: right; 33 | color: @weuiTextColorGray; 34 | line-height: 2; 35 | } 36 | .weui-form-preview__ft{ 37 | position: relative; 38 | line-height: 50px; 39 | display: flex; 40 | &:after { 41 | .setTopLine(@weuiDialogLineColor); 42 | } 43 | } 44 | .weui-form-preview__item{ 45 | overflow: hidden; 46 | } 47 | .weui-form-preview__label{ 48 | float: left; 49 | margin-right: 1em; 50 | min-width: 4em; 51 | color: @weuiTextColorGray; 52 | text-align: justify; 53 | text-align-last: justify; 54 | } 55 | .weui-form-preview__value{ 56 | display: block; 57 | overflow: hidden; 58 | word-break:normal; 59 | word-wrap: break-word; 60 | } 61 | .weui-form-preview__btn { 62 | position: relative; 63 | display: block; 64 | flex: 1; 65 | color: @weuiDialogLinkColor; 66 | text-align: center; 67 | &:after { 68 | .setLeftLine(@weuiDialogLineColor); 69 | } 70 | &:first-child { 71 | &:after { 72 | display: none; 73 | } 74 | } 75 | } 76 | .weui-form-preview__btn_active{ 77 | background-color: @weuiDialogLinkActiveBc; 78 | } 79 | .weui-form-preview__btn_default { 80 | color: @weuiTextColorGray; 81 | } 82 | .weui-form-preview__btn_primary { 83 | color: #0BB20C; 84 | } 85 | -------------------------------------------------------------------------------- /src/example/flex.wpy: -------------------------------------------------------------------------------- 1 | 12 | 45 | 46 | 53 | -------------------------------------------------------------------------------- /src/example/navbar.wpy: -------------------------------------------------------------------------------- 1 | 16 | 35 | 36 | 65 | -------------------------------------------------------------------------------- /src/style/widget/weui-cell/weui-uploader.less: -------------------------------------------------------------------------------- 1 | @import "../../base/fn.less"; 2 | 3 | .weui-uploader{} 4 | .weui-uploader__hd{ 5 | display: flex; 6 | padding-bottom: @weuiCellGapV; 7 | align-items: center; 8 | } 9 | .weui-uploader__title{ 10 | flex: 1; 11 | } 12 | .weui-uploader__info{ 13 | color: @weuiTextColorTips; 14 | } 15 | .weui-uploader__bd{ 16 | margin-bottom: @weuiCellGapH - (@weuiCellGapV + @weuiUploaderFileSpacing); 17 | margin-right: -@weuiUploaderFileSpacing; 18 | overflow: hidden; 19 | } 20 | .weui-uploader__file{ 21 | float: left; 22 | margin-right: @weuiUploaderFileSpacing; 23 | margin-bottom: @weuiUploaderFileSpacing; 24 | } 25 | .weui-uploader__img{ 26 | display: block; 27 | width: @weuiUploaderSize; 28 | height: @weuiUploaderSize; 29 | } 30 | .weui-uploader__file_status{ 31 | position: relative; 32 | &:before{ 33 | content: " "; 34 | position: absolute; 35 | top: 0; 36 | right: 0; 37 | bottom: 0; 38 | left: 0; 39 | background-color: rgba(0, 0, 0, .5); 40 | } 41 | } 42 | .weui-uploader__file-content{ 43 | position: absolute; 44 | top: 50%; 45 | left: 50%; 46 | transform: translate(-50%, -50%); 47 | color: #FFFFFF; 48 | } 49 | .weui-uploader__input-box{ 50 | float:left; 51 | position: relative; 52 | margin-right: @weuiUploaderFileSpacing; 53 | margin-bottom: @weuiUploaderFileSpacing; 54 | width: @weuiUploaderSize - @weuiUploaderBorderWidth * 2; 55 | height: @weuiUploaderSize - @weuiUploaderBorderWidth * 2; 56 | border: @weuiUploaderBorderWidth solid @weuiUploaderBorderColor; 57 | &:before, &:after{ 58 | content: " "; 59 | position: absolute; 60 | top: 50%; 61 | left: 50%; 62 | transform: translate(-50%, -50%); 63 | background-color: @weuiUploaderBorderColor; 64 | } 65 | &:before{ 66 | width: @weuiUploaderBorderWidth + 1; 67 | height: @weuiUploaderSize / 2; 68 | } 69 | &:after{ 70 | width: @weuiUploaderSize / 2; 71 | height: @weuiUploaderBorderWidth + 1; 72 | } 73 | &:active{ 74 | border-color: @weuiUploaderActiveBorderColor; 75 | &:before, &:after{ 76 | background-color: @weuiUploaderActiveBorderColor; 77 | } 78 | } 79 | } 80 | .weui-uploader__input{ 81 | position: absolute; 82 | z-index: 1; 83 | top: 0; 84 | left: 0; 85 | width: 100%; 86 | height: 100%; 87 | opacity: 0; 88 | } 89 | -------------------------------------------------------------------------------- /src/example/article.wpy: -------------------------------------------------------------------------------- 1 | 9 | 47 | 48 | 55 | -------------------------------------------------------------------------------- /src/app.wpy: -------------------------------------------------------------------------------- 1 | 37 | 38 | 100 | -------------------------------------------------------------------------------- /src/example/progress.wpy: -------------------------------------------------------------------------------- 1 | 6 | 51 | 52 | 90 | -------------------------------------------------------------------------------- /src/example/badge.wpy: -------------------------------------------------------------------------------- 1 | 57 | 58 | 65 | -------------------------------------------------------------------------------- /src/example/icons.wpy: -------------------------------------------------------------------------------- 1 | 33 | 88 | 89 | 96 | -------------------------------------------------------------------------------- /src/example/searchbar.wpy: -------------------------------------------------------------------------------- 1 | 13 | 61 | 62 | 89 | -------------------------------------------------------------------------------- /src/example/preview.wpy: -------------------------------------------------------------------------------- 1 | 6 | 65 | 66 | 73 | -------------------------------------------------------------------------------- /src/style/widget/weui-loading/weui-loading.less: -------------------------------------------------------------------------------- 1 | @import "../../base/fn.less"; 2 | 3 | .weui-loading { 4 | margin: 0 5px; 5 | width:20px; 6 | height:20px; 7 | display: inline-block; 8 | vertical-align: middle; 9 | animation: weuiLoading 1s steps(12, end) infinite; 10 | background: transparent url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxMjAiIGhlaWdodD0iMTIwIiB2aWV3Qm94PSIwIDAgMTAwIDEwMCI+PHBhdGggZmlsbD0ibm9uZSIgZD0iTTAgMGgxMDB2MTAwSDB6Ii8+PHJlY3Qgd2lkdGg9IjciIGhlaWdodD0iMjAiIHg9IjQ2LjUiIHk9IjQwIiBmaWxsPSIjRTlFOUU5IiByeD0iNSIgcnk9IjUiIHRyYW5zZm9ybT0idHJhbnNsYXRlKDAgLTMwKSIvPjxyZWN0IHdpZHRoPSI3IiBoZWlnaHQ9IjIwIiB4PSI0Ni41IiB5PSI0MCIgZmlsbD0iIzk4OTY5NyIgcng9IjUiIHJ5PSI1IiB0cmFuc2Zvcm09InJvdGF0ZSgzMCAxMDUuOTggNjUpIi8+PHJlY3Qgd2lkdGg9IjciIGhlaWdodD0iMjAiIHg9IjQ2LjUiIHk9IjQwIiBmaWxsPSIjOUI5OTlBIiByeD0iNSIgcnk9IjUiIHRyYW5zZm9ybT0icm90YXRlKDYwIDc1Ljk4IDY1KSIvPjxyZWN0IHdpZHRoPSI3IiBoZWlnaHQ9IjIwIiB4PSI0Ni41IiB5PSI0MCIgZmlsbD0iI0EzQTFBMiIgcng9IjUiIHJ5PSI1IiB0cmFuc2Zvcm09InJvdGF0ZSg5MCA2NSA2NSkiLz48cmVjdCB3aWR0aD0iNyIgaGVpZ2h0PSIyMCIgeD0iNDYuNSIgeT0iNDAiIGZpbGw9IiNBQkE5QUEiIHJ4PSI1IiByeT0iNSIgdHJhbnNmb3JtPSJyb3RhdGUoMTIwIDU4LjY2IDY1KSIvPjxyZWN0IHdpZHRoPSI3IiBoZWlnaHQ9IjIwIiB4PSI0Ni41IiB5PSI0MCIgZmlsbD0iI0IyQjJCMiIgcng9IjUiIHJ5PSI1IiB0cmFuc2Zvcm09InJvdGF0ZSgxNTAgNTQuMDIgNjUpIi8+PHJlY3Qgd2lkdGg9IjciIGhlaWdodD0iMjAiIHg9IjQ2LjUiIHk9IjQwIiBmaWxsPSIjQkFCOEI5IiByeD0iNSIgcnk9IjUiIHRyYW5zZm9ybT0icm90YXRlKDE4MCA1MCA2NSkiLz48cmVjdCB3aWR0aD0iNyIgaGVpZ2h0PSIyMCIgeD0iNDYuNSIgeT0iNDAiIGZpbGw9IiNDMkMwQzEiIHJ4PSI1IiByeT0iNSIgdHJhbnNmb3JtPSJyb3RhdGUoLTE1MCA0NS45OCA2NSkiLz48cmVjdCB3aWR0aD0iNyIgaGVpZ2h0PSIyMCIgeD0iNDYuNSIgeT0iNDAiIGZpbGw9IiNDQkNCQ0IiIHJ4PSI1IiByeT0iNSIgdHJhbnNmb3JtPSJyb3RhdGUoLTEyMCA0MS4zNCA2NSkiLz48cmVjdCB3aWR0aD0iNyIgaGVpZ2h0PSIyMCIgeD0iNDYuNSIgeT0iNDAiIGZpbGw9IiNEMkQyRDIiIHJ4PSI1IiByeT0iNSIgdHJhbnNmb3JtPSJyb3RhdGUoLTkwIDM1IDY1KSIvPjxyZWN0IHdpZHRoPSI3IiBoZWlnaHQ9IjIwIiB4PSI0Ni41IiB5PSI0MCIgZmlsbD0iI0RBREFEQSIgcng9IjUiIHJ5PSI1IiB0cmFuc2Zvcm09InJvdGF0ZSgtNjAgMjQuMDIgNjUpIi8+PHJlY3Qgd2lkdGg9IjciIGhlaWdodD0iMjAiIHg9IjQ2LjUiIHk9IjQwIiBmaWxsPSIjRTJFMkUyIiByeD0iNSIgcnk9IjUiIHRyYW5zZm9ybT0icm90YXRlKC0zMCAtNS45OCA2NSkiLz48L3N2Zz4=) no-repeat; 11 | background-size: 100%; 12 | &.weui-loading_transparent{ 13 | background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120' viewBox='0 0 100 100'%3E%3Cpath fill='none' d='M0 0h100v100H0z'/%3E%3Crect xmlns='http://www.w3.org/2000/svg' width='7' height='20' x='46.5' y='40' fill='rgba(255,255,255,.56)' rx='5' ry='5' transform='translate(0 -30)'/%3E%3Crect width='7' height='20' x='46.5' y='40' fill='rgba(255,255,255,.5)' rx='5' ry='5' transform='rotate(30 105.98 65)'/%3E%3Crect width='7' height='20' x='46.5' y='40' fill='rgba(255,255,255,.43)' rx='5' ry='5' transform='rotate(60 75.98 65)'/%3E%3Crect width='7' height='20' x='46.5' y='40' fill='rgba(255,255,255,.38)' rx='5' ry='5' transform='rotate(90 65 65)'/%3E%3Crect width='7' height='20' x='46.5' y='40' fill='rgba(255,255,255,.32)' rx='5' ry='5' transform='rotate(120 58.66 65)'/%3E%3Crect width='7' height='20' x='46.5' y='40' fill='rgba(255,255,255,.28)' rx='5' ry='5' transform='rotate(150 54.02 65)'/%3E%3Crect width='7' height='20' x='46.5' y='40' fill='rgba(255,255,255,.25)' rx='5' ry='5' transform='rotate(180 50 65)'/%3E%3Crect width='7' height='20' x='46.5' y='40' fill='rgba(255,255,255,.2)' rx='5' ry='5' transform='rotate(-150 45.98 65)'/%3E%3Crect width='7' height='20' x='46.5' y='40' fill='rgba(255,255,255,.17)' rx='5' ry='5' transform='rotate(-120 41.34 65)'/%3E%3Crect width='7' height='20' x='46.5' y='40' fill='rgba(255,255,255,.14)' rx='5' ry='5' transform='rotate(-90 35 65)'/%3E%3Crect width='7' height='20' x='46.5' y='40' fill='rgba(255,255,255,.1)' rx='5' ry='5' transform='rotate(-60 24.02 65)'/%3E%3Crect width='7' height='20' x='46.5' y='40' fill='rgba(255,255,255,.03)' rx='5' ry='5' transform='rotate(-30 -5.98 65)'/%3E%3C/svg%3E"); 14 | } 15 | } 16 | 17 | @keyframes weuiLoading { 18 | 0% { 19 | transform: rotate3d(0, 0, 1, 0deg); 20 | } 21 | 22 | 100% { 23 | transform: rotate3d(0, 0, 1, 360deg); 24 | } 25 | } 26 | -------------------------------------------------------------------------------- /src/example/uploader.wpy: -------------------------------------------------------------------------------- 1 | 54 | 55 | 82 | -------------------------------------------------------------------------------- /src/example/list.wpy: -------------------------------------------------------------------------------- 1 | 78 | 79 | 93 | -------------------------------------------------------------------------------- /src/example/index.wpy: -------------------------------------------------------------------------------- 1 | 56 | 87 | 88 | 135 | -------------------------------------------------------------------------------- /src/example/panel.wpy: -------------------------------------------------------------------------------- 1 | 6 | 101 | 102 | 120 | -------------------------------------------------------------------------------- /src/example/input.wpy: -------------------------------------------------------------------------------- 1 |