From 451a3b19fc95ba05a05a0e0e3535eddb7b02f958 Mon Sep 17 00:00:00 2001 From: Yao Date: Sun, 29 Oct 2017 10:42:28 +0800 Subject: [PATCH] =?UTF-8?q?[new=20feature]=20=E5=A2=9E=E5=8A=A0=20css=20?= =?UTF-8?q?=E7=BC=96=E8=AF=91=EF=BC=8C=E6=96=B9=E4=BE=BF=E7=BB=84=E4=BB=B6?= =?UTF-8?q?=E4=B9=A6=E5=86=99=20(#40)?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit * add src dir && add build * add build watch && change dir name * bower ignore package.json --- .eslintrc | 3 +- bower.json | 10 ++- build/build-components.js | 7 ++ build/build-css.js | 12 +++ build/build-dev.js | 8 ++ build/build-icon.sh | 4 +- build/release.sh | 7 ++ build/utils/extracter.js | 26 ++++++ dist/badge/index.wxss | 25 +----- dist/btn/index.wxss | 143 +-------------------------------- dist/capsule/index.wxss | 40 +-------- dist/card/index.wxss | 54 +------------ dist/cell/index.wxss | 78 +----------------- dist/color/index.wxss | 28 +------ dist/dialog/index.wxss | 28 +------ dist/field/index.wxss | 51 +----------- dist/helper/index.wxss | 102 +---------------------- dist/icon/index.wxss | 131 +----------------------------- dist/index.wxss | 23 +----- dist/label/index.wxss | 35 +------- dist/loadmore/index.wxss | 71 +--------------- dist/noticebar/index.wxss | 8 +- dist/panel/index.wxss | 20 +---- dist/popup/index.wxss | 32 +------- dist/quantity/index.wxss | 47 +---------- dist/select/index.wxss | 4 +- dist/steps/index.wxss | 7 +- dist/steps/wxss/step.wxss | 134 +----------------------------- dist/steps/wxss/vstep.wxss | 91 +-------------------- dist/switch/index.wxss | 70 +--------------- dist/tab/index.wxss | 49 +---------- dist/toast/index.wxss | 18 +---- dist/toptips/index.wxss | 23 +----- package.json | 18 ++++- packages/badge/index.wxss | 24 ++++++ packages/btn/index.wxss | 142 ++++++++++++++++++++++++++++++++ packages/capsule/index.wxml | 12 +++ packages/capsule/index.wxss | 39 +++++++++ packages/card/index.wxss | 53 ++++++++++++ packages/cell/index.wxss | 77 ++++++++++++++++++ packages/color/index.wxss | 27 +++++++ packages/dialog/index.wxss | 27 +++++++ packages/field/index.js | 14 ++++ packages/field/index.wxml | 23 ++++++ packages/field/index.wxss | 50 ++++++++++++ packages/helper/index.wxss | 101 +++++++++++++++++++++++ packages/icon/index.wxss | 130 ++++++++++++++++++++++++++++++ packages/index.js | 8 ++ packages/index.wxss | 22 +++++ packages/label/index.wxss | 34 ++++++++ packages/loadmore/index.wxml | 24 ++++++ packages/loadmore/index.wxss | 70 ++++++++++++++++ packages/noticebar/index.js | 55 +++++++++++++ packages/noticebar/index.wxml | 16 ++++ packages/noticebar/index.wxss | 7 ++ packages/panel/index.wxss | 19 +++++ packages/popup/index.wxss | 31 +++++++ packages/quantity/index.js | 61 ++++++++++++++ packages/quantity/index.wxml | 28 +++++++ packages/quantity/index.wxss | 46 +++++++++++ packages/select/index.js | 26 ++++++ packages/select/index.wxml | 38 +++++++++ packages/select/index.wxss | 3 + packages/steps/index.wxml | 15 ++++ packages/steps/index.wxss | 6 ++ packages/steps/wxss/step.wxss | 133 ++++++++++++++++++++++++++++++ packages/steps/wxss/vstep.wxss | 90 +++++++++++++++++++++ packages/switch/index.js | 25 ++++++ packages/switch/index.wxml | 15 ++++ packages/switch/index.wxss | 69 ++++++++++++++++ packages/tab/index.js | 17 ++++ packages/tab/index.wxml | 31 +++++++ packages/tab/index.wxss | 48 +++++++++++ packages/toast/index.js | 32 ++++++++ packages/toast/index.wxml | 3 + packages/toast/index.wxss | 17 ++++ packages/toptips/index.js | 39 +++++++++ packages/toptips/index.wxml | 3 + packages/toptips/index.wxss | 22 +++++ postcss.config.js | 13 +++ 80 files changed, 1897 insertions(+), 1295 deletions(-) create mode 100644 build/build-components.js create mode 100644 build/build-css.js create mode 100644 build/build-dev.js create mode 100644 build/utils/extracter.js create mode 100644 packages/badge/index.wxss create mode 100644 packages/btn/index.wxss create mode 100644 packages/capsule/index.wxml create mode 100644 packages/capsule/index.wxss create mode 100644 packages/card/index.wxss create mode 100644 packages/cell/index.wxss create mode 100644 packages/color/index.wxss create mode 100644 packages/dialog/index.wxss create mode 100644 packages/field/index.js create mode 100644 packages/field/index.wxml create mode 100644 packages/field/index.wxss create mode 100644 packages/helper/index.wxss create mode 100644 packages/icon/index.wxss create mode 100644 packages/index.js create mode 100644 packages/index.wxss create mode 100644 packages/label/index.wxss create mode 100644 packages/loadmore/index.wxml create mode 100644 packages/loadmore/index.wxss create mode 100644 packages/noticebar/index.js create mode 100644 packages/noticebar/index.wxml create mode 100644 packages/noticebar/index.wxss create mode 100644 packages/panel/index.wxss create mode 100644 packages/popup/index.wxss create mode 100644 packages/quantity/index.js create mode 100644 packages/quantity/index.wxml create mode 100644 packages/quantity/index.wxss create mode 100644 packages/select/index.js create mode 100644 packages/select/index.wxml create mode 100644 packages/select/index.wxss create mode 100644 packages/steps/index.wxml create mode 100644 packages/steps/index.wxss create mode 100644 packages/steps/wxss/step.wxss create mode 100644 packages/steps/wxss/vstep.wxss create mode 100644 packages/switch/index.js create mode 100644 packages/switch/index.wxml create mode 100644 packages/switch/index.wxss create mode 100644 packages/tab/index.js create mode 100644 packages/tab/index.wxml create mode 100644 packages/tab/index.wxss create mode 100644 packages/toast/index.js create mode 100644 packages/toast/index.wxml create mode 100644 packages/toast/index.wxss create mode 100644 packages/toptips/index.js create mode 100644 packages/toptips/index.wxml create mode 100644 packages/toptips/index.wxss create mode 100644 postcss.config.js diff --git a/.eslintrc b/.eslintrc index 5b990b89..4e9c2ccb 100644 --- a/.eslintrc +++ b/.eslintrc @@ -38,6 +38,7 @@ "no-unused-expressions": 0, "no-underscore-dangle": 0, "no-use-before-define": 0, - "no-new": 0 + "no-new": 0, + "import/no-extraneous-dependencies": 0 } } diff --git a/bower.json b/bower.json index 44476c2b..2b66efb7 100644 --- a/bower.json +++ b/bower.json @@ -11,10 +11,14 @@ "homepage": "", "ignore": [ "**/.*", - "example", - "build", - "assets", ".github", + "assets", + "build", + "example", + "node_modules", + "packages", + "postcss.config.js", + "package.json", "app.*", "*.md", "*.log" diff --git a/build/build-components.js b/build/build-components.js new file mode 100644 index 00000000..7e0fd05e --- /dev/null +++ b/build/build-components.js @@ -0,0 +1,7 @@ +const path = require('path'); +const extracter = require('./utils/extracter'); + +extracter({ + src: path.resolve(__dirname, '../packages'), + dist: path.resolve(__dirname, '../dist') +}); diff --git a/build/build-css.js b/build/build-css.js new file mode 100644 index 00000000..2385a1ba --- /dev/null +++ b/build/build-css.js @@ -0,0 +1,12 @@ +const gulp = require('gulp'); +const postcss = require('gulp-postcss'); +const cssmin = require('gulp-clean-css'); + +gulp.task('compile', () => { + return gulp.src('../packages/**/*.wxss') + .pipe(postcss()) + .pipe(cssmin()) + .pipe(gulp.dest('../dist')); +}); + +gulp.task('build', ['compile']); diff --git a/build/build-dev.js b/build/build-dev.js new file mode 100644 index 00000000..a5b9a824 --- /dev/null +++ b/build/build-dev.js @@ -0,0 +1,8 @@ +const path = require('path'); +const extracter = require('./utils/extracter'); + +extracter({ + src: path.resolve(__dirname, '../packages'), + dist: path.resolve(__dirname, '../dist'), + watch: true +}); diff --git a/build/build-icon.sh b/build/build-icon.sh index 13770154..87ef06db 100644 --- a/build/build-icon.sh +++ b/build/build-icon.sh @@ -27,7 +27,7 @@ fi # generate fontface style eot=$(fontname eot) -cat > $basepath/../dist/icon/index.wxss < $basepath/../src/icon/index.wxss < $basepath/../dist/icon/index.wxss <> $basepath/../dist/icon/index.wxss +cat $basepath/../assets/icons/build/css/zanui-weapp-icon-codes.css >> $basepath/../src/icon/index.wxss diff --git a/build/release.sh b/build/release.sh index 92c4fbb6..1d0b2ff5 100644 --- a/build/release.sh +++ b/build/release.sh @@ -11,6 +11,13 @@ if [[ $REPLY =~ ^[Yy]$ ]] then echo "Releasing $VERSION ..." + # build + npm run components + + # commit build + git add -A + git commit -m "[build] $VERSION" + # commit npm version $VERSION --message "[release] $VERSION" diff --git a/build/utils/extracter.js b/build/utils/extracter.js new file mode 100644 index 00000000..ee99a2c3 --- /dev/null +++ b/build/utils/extracter.js @@ -0,0 +1,26 @@ +const fs = require('fs-extra'); +const nodeWatch = require('node-watch'); +require('shelljs/global'); + +module.exports = function (config = {}) { + // 清空 dist 目录 + fs.emptyDirSync(config.dist); + + if (config.watch) { + extracter(config); + nodeWatch(config.src, { recursive: true }, () => extracter(config)); + } else { + extracter(config); + } +}; + + +function extracter(config = {}) { + // 复制 src + fs.copySync(config.src, config.dist); + + // js 无需编译，让微信开发者工具处理 + + // 编译 wxss 文件 + exec('npm run css'); +} diff --git a/dist/badge/index.wxss b/dist/badge/index.wxss index eecdb63c..b3c1bca3 100644 --- a/dist/badge/index.wxss +++ b/dist/badge/index.wxss @@ -1,24 +1 @@ -.zan-badge { - position: relative; -} -.zan-badge__count { - position: absolute; - top: -8px; - right: 0px; - height: 1.6em; - min-width: 1.6em; - line-height: 1.6; - padding: 0 .4em; - font-size: 10px; - font-family: tahoma; - border-radius: .8em; - background: #FF4444; - color: #fff; - text-align: center; - white-space: nowrap; - transform: translateX(50%); - transform-origin: -10% center; - z-index: 10; - box-shadow: 0 0 0 1px #fff; - box-sizing: border-box; -} +.zan-badge{position:relative}.zan-badge__count{position:absolute;top:-8px;right:0;height:1.6em;min-width:1.6em;line-height:1.6;padding:0 .4em;font-size:10px;font-family:tahoma;border-radius:.8em;background:#f44;color:#fff;text-align:center;white-space:nowrap;transform:translateX(50%);transform-origin:-10% center;z-index:10;box-shadow:0 0 0 1px #fff;box-sizing:border-box} \ No newline at end of file diff --git a/dist/btn/index.wxss b/dist/btn/index.wxss index 7e945c87..56386852 100644 --- a/dist/btn/index.wxss +++ b/dist/btn/index.wxss @@ -1,142 +1 @@ -.zan-btn { - position: relative; - color: #333; - background-color: #fff; - margin-bottom: 10px; - padding-left: 15px; - padding-right: 15px; - border-radius: 2px; - border: 1rpx solid #e5e5e5; - font-size: 16px; - line-height: 45px; - height: 45px; - box-sizing: border-box; - text-decoration: none; - text-align: center; - vertical-align: middle; -} -.zan-btn::after { - display: none; -} -.zan-btns { - margin: 15px; -} - -/* type */ -.zan-btn--primary { - color: #fff; - background-color: #4b0; - border-color: #0a0; -} - -.zan-btn--warn { - color: #fff; - background-color: #f85; - border-color: #f85; -} - -.zan-btn--danger { - color: #fff; - background-color: #f44; - border-color: #e33; -} - -/* size */ -.zan-btn--small { - display: inline-block; - height: 30px; - line-height: 30px; - font-size: 12px; - margin-right: 5px; - margin-bottom: 0; -} -.zan-btn--mini { - display: inline-block; - line-height: 21px; - height: 22px; - font-size: 10px; - margin-right: 5px; - margin-bottom: 0; - padding-left: 5px; - padding-right: 5px; -} -.zan-btn--large { - border-radius: 0; - margin-bottom: 0; - border: none; - line-height: 50px; - height: 50px; -} - -/* plain */ -.zan-btn--plain.zan-btn { - background-color: transparent; -} -.zan-btn--plain.zan-btn--primary { - color: #06BF04; -} -.zan-btn--plain.zan-btn--warn { - color: #FF6600; -} -.zan-btn--plain.zan-btn--danger { - color: #FF4444; -} - -/* 重写button组件的button-hover样式 */ -.button-hover { - opacity: 0.9; -} - -/* loading */ -.zan-btn--loading { - color: transparent; - opacity: 1; -} -.zan-btn--loading::before { - position: absolute; - left: 50%; - top: 50%; - content: ' '; - width: 16px; - height: 16px; - margin-left: -8px; - margin-top: -8px; - border: 3px solid #e5e5e5; - border-color: #666 #e5e5e5 #e5e5e5 #e5e5e5; - border-radius: 8px; - box-sizing: border-box; - animation: btn-spin 0.6s linear; - animation-iteration-count: infinite; -} -.zan-btn--primary.zan-btn--loading::before, -.zan-btn--warn.zan-btn--loading::before, -.zan-btn--danger.zan-btn--loading::before { - border-color: #fff rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1); -} - -@keyframes btn-spin { - 0% { - transform: rotate(0); - } - 100% { - transform: rotate(360deg); - } -} - -/* disabled */ -.zan-btn.zan-btn--disabled { - /* 防止样式被 button[disabled] 的规则覆盖，所以使用了important */ - color: #999 ! important; - background: #f8f8f8 ! important; - border-color: #e5e5e5 ! important; - cursor: not-allowed ! important; - opacity: 1 ! important; -} - -/* :last-child */ -.zan-btn--last-child, -.zan-btn:last-child { - margin-bottom: 0; - margin-right: 0; -} - +.zan-btn{position:relative;color:#333;background-color:#fff;margin-bottom:10px;padding-left:15px;padding-right:15px;border-radius:2px;border:1rpx solid #e5e5e5;font-size:16px;line-height:45px;height:45px;box-sizing:border-box;text-decoration:none;text-align:center;vertical-align:middle}.zan-btn::after{display:none}.zan-btns{margin:15px}.zan-btn--primary{color:#fff;background-color:#4b0;border-color:#0a0}.zan-btn--warn{color:#fff;background-color:#f85;border-color:#f85}.zan-btn--danger{color:#fff;background-color:#f44;border-color:#e33}.zan-btn--small{display:inline-block;height:30px;line-height:30px;font-size:12px;margin-right:5px;margin-bottom:0}.zan-btn--mini{display:inline-block;line-height:21px;height:22px;font-size:10px;margin-right:5px;margin-bottom:0;padding-left:5px;padding-right:5px}.zan-btn--large{border-radius:0;margin-bottom:0;border:none;line-height:50px;height:50px}.zan-btn--plain.zan-btn{background-color:transparent}.zan-btn--plain.zan-btn--primary{color:#06bf04}.zan-btn--plain.zan-btn--warn{color:#f60}.zan-btn--plain.zan-btn--danger{color:#f44}.button-hover{opacity:.9}.zan-btn--loading{color:transparent;opacity:1}.zan-btn--loading::before{position:absolute;left:50%;top:50%;content:' ';width:16px;height:16px;margin-left:-8px;margin-top:-8px;border:3px solid #e5e5e5;border-color:#666 #e5e5e5 #e5e5e5 #e5e5e5;border-radius:8px;box-sizing:border-box;animation:btn-spin .6s linear;animation-iteration-count:infinite}.zan-btn--danger.zan-btn--loading::before,.zan-btn--primary.zan-btn--loading::before,.zan-btn--warn.zan-btn--loading::before{border-color:#fff rgba(0,0,0,.1) rgba(0,0,0,.1) rgba(0,0,0,.1)}@keyframes btn-spin{0%{transform:rotate(0)}100%{transform:rotate(360deg)}}.zan-btn.zan-btn--disabled{color:#999!important;background:#f8f8f8!important;border-color:#e5e5e5!important;cursor:not-allowed!important;opacity:1!important}.zan-btn--last-child,.zan-btn:last-child{margin-bottom:0;margin-right:0} \ No newline at end of file diff --git a/dist/capsule/index.wxss b/dist/capsule/index.wxss index 48be9a49..dd450d90 100644 --- a/dist/capsule/index.wxss +++ b/dist/capsule/index.wxss @@ -1,39 +1 @@ -.zan-capsule { - display: inline-block; - font-size: 12px; - vertical-align: middle; - line-height: 16px; - transform: scale(0.83); -} -.zan-capsule__left, -.zan-capsule__right { - display: inline-block; - line-height: 16px; - height: 16px; - vertical-align: middle; - box-sizing: border-box; -} -.zan-capsule__left { - padding: 0 2px; - color: #FFF; - background: #999; - border-radius: 2px 0 0 2px; - border: 1rpx solid #999; -} -.zan-capsule__right { - padding: 0 5px; - color: #999; - border-radius: 0 2px 2px 0; - border: 1rpx solid #999; -} - -.zan-capsule--danger .zan-capsule__left { - color: #FFF; - background: #F24544; - border-color: #F24544; -} - -.zan-capsule--danger .zan-capsule__right { - color: #F24544; - border-color: #F24544; -} +.zan-capsule{display:inline-block;font-size:12px;vertical-align:middle;line-height:16px;transform:scale(.83)}.zan-capsule__left,.zan-capsule__right{display:inline-block;line-height:16px;height:16px;vertical-align:middle;box-sizing:border-box}.zan-capsule__left{padding:0 2px;color:#fff;background:#999;border-radius:2px 0 0 2px;border:1rpx solid #999}.zan-capsule__right{padding:0 5px;color:#999;border-radius:0 2px 2px 0;border:1rpx solid #999}.zan-capsule--danger .zan-capsule__left{color:#fff;background:#f24544;border-color:#f24544}.zan-capsule--danger .zan-capsule__right{color:#f24544;border-color:#f24544} \ No newline at end of file diff --git a/dist/card/index.wxss b/dist/card/index.wxss index 27a4376c..6557fa46 100644 --- a/dist/card/index.wxss +++ b/dist/card/index.wxss @@ -1,53 +1 @@ -.zan-card { - margin-left: 0px; - width: auto; - padding: 5px 15px; - overflow: hidden; - position: relative; - font-size: 14px; -} - -.zan-card__thumb { - width: 90px; - height: 90px; - float: left; - position: relative; - margin-left: auto; - margin-right: auto; - overflow: hidden; - background-size: cover; -} - -.zan-card__img { - position: absolute; - top: 0; - left: 0; - right: 0; - bottom: 0; - width: auto; - height: auto; - max-width: 100%; - max-height: 100%; -} - -.zan-card__detail { - margin-left: 100px; - width: auto; - position: relative; -} - -.zan-card__detail-row { - overflow: hidden; - line-height: 20px; - min-height: 20px; - margin-bottom: 3px; -} - -.zan-card__right-col { - float: right; -} - -.zan-card__left-col { - margin-right: 80px; -} - +.zan-card{margin-left:0;width:auto;padding:5px 15px;overflow:hidden;position:relative;font-size:14px}.zan-card__thumb{width:90px;height:90px;float:left;position:relative;margin-left:auto;margin-right:auto;overflow:hidden;background-size:cover}.zan-card__img{position:absolute;top:0;left:0;right:0;bottom:0;width:auto;height:auto;max-width:100%;max-height:100%}.zan-card__detail{margin-left:100px;width:auto;position:relative}.zan-card__detail-row{overflow:hidden;line-height:20px;min-height:20px;margin-bottom:3px}.zan-card__right-col{float:right}.zan-card__left-col{margin-right:80px} \ No newline at end of file diff --git a/dist/cell/index.wxss b/dist/cell/index.wxss index e8cb1d3a..62d58499 100644 --- a/dist/cell/index.wxss +++ b/dist/cell/index.wxss @@ -1,77 +1 @@ -.zan-cell { - position: relative; - padding: 12px 15px; - display: flex; - align-items: center; - line-height: 1.4; - font-size: 14px; -} - -.zan-cell::after { - position: absolute; - left: 15px; - right: 0; - bottom: 0; - border-top: 1rpx solid #e5e5e5; - background: #e5e5e5; - content: ' '; -} -.zan-cell__icon { - margin-right: 5px; -} -.zan-cell__bd { - flex: 1; -} -.zan-cell__text { - line-height: 24px; - font-size: 14px; -} -.zan-cell__desc { - line-height: 1.2; - font-size: 12px; - color: #666; -} -.zan-cell__ft { - position: relative; - text-align: right; - color: #666; -} -.zan-cell__no-pading{ - padding: 0; -} -.zan-cell__no-pading .zan-cell__bd_padding { - padding: 12px 0 12px 15px; -} -.zan-cell__no-pading .zan-cell__bd_padding .zan-form__input{ - height: 26px; -} -.zan-cell__no-pading .zan-cell__ft_padding { - padding: 12px 15px 12px 0; -} - -.zan-cell--last-child::after, -.zan-cell:last-child::after { - display: none; -} - -.zan-cell--access .zan-cell__ft { - padding-right: 13px; -} - -.zan-cell--access .zan-cell__ft::after { - position: absolute; - top: 50%; - right: 2px; - content: " "; - display: inline-block; - height: 6px; - width: 6px; - border-width: 2px 2px 0 0; - border-color: #c8c8c8; - border-style: solid; - transform: translateY(-50%) matrix(0.71, 0.71, -0.71, 0.71, 0, 0); -} -.zan-cell--switch { - padding-top: 6px; - padding-bottom: 6px; -} +.zan-cell{position:relative;padding:12px 15px;display:flex;align-items:center;line-height:1.4;font-size:14px}.zan-cell::after{position:absolute;left:15px;right:0;bottom:0;border-top:1rpx solid #e5e5e5;background:#e5e5e5;content:' '}.zan-cell__icon{margin-right:5px}.zan-cell__bd{flex:1}.zan-cell__text{line-height:24px;font-size:14px}.zan-cell__desc{line-height:1.2;font-size:12px;color:#666}.zan-cell__ft{position:relative;text-align:right;color:#666}.zan-cell__no-pading{padding:0}.zan-cell__no-pading .zan-cell__bd_padding{padding:12px 0 12px 15px}.zan-cell__no-pading .zan-cell__bd_padding .zan-form__input{height:26px}.zan-cell__no-pading .zan-cell__ft_padding{padding:12px 15px 12px 0}.zan-cell--last-child::after,.zan-cell:last-child::after{display:none}.zan-cell--access .zan-cell__ft{padding-right:13px}.zan-cell--access .zan-cell__ft::after{position:absolute;top:50%;right:2px;content:" ";display:inline-block;height:6px;width:6px;border-width:2px 2px 0 0;border-color:#c8c8c8;border-style:solid;transform:translateY(-50%) matrix(.71,.71,-.71,.71,0,0)}.zan-cell--switch{padding-top:6px;padding-bottom:6px} \ No newline at end of file diff --git a/dist/color/index.wxss b/dist/color/index.wxss index f61ea662..83436914 100644 --- a/dist/color/index.wxss +++ b/dist/color/index.wxss @@ -1,27 +1 @@ -.zan-c-red { - color: #f44 !important; -} - -.zan-c-gray { - color: #c9c9c9 !important; -} - -.zan-c-gray-dark { - color: #999 !important; -} - -.zan-c-gray-darker { - color: #666 !important; -} - -.zan-c-black { - color: #333 !important; -} - -.zan-c-blue { - color: #3283fa !important; -} - -.zan-c-green { - color: #44BB00 !important; -} +.zan-c-red{color:#f44!important}.zan-c-gray{color:#c9c9c9!important}.zan-c-gray-dark{color:#999!important}.zan-c-gray-darker{color:#666!important}.zan-c-black{color:#333!important}.zan-c-blue{color:#3283fa!important}.zan-c-green{color:#4b0!important} \ No newline at end of file diff --git a/dist/dialog/index.wxss b/dist/dialog/index.wxss index cd1016f6..b4b260d3 100644 --- a/dist/dialog/index.wxss +++ b/dist/dialog/index.wxss @@ -1,27 +1 @@ -.zan-dialog__mask { - position: fixed; - top: 0; - left: 0; - right: 0; - bottom: 0; - z-index: 10; - background: rgba(0, 0, 0, 0.7); - display: none; -} -.zan-dialog__container { - position: fixed; - left: 0; - bottom: 0; - width: 750rpx; - background: white; - transform: translateY(150%); - transition: all 0.4s ease; - z-index: 11; -} -.zan-dialog--show .zan-dialog__container { - transform: translateY(0); -} -.zan-dialog--show .zan-dialog__mask { - display: block; -} - +.zan-dialog__mask{position:fixed;top:0;left:0;right:0;bottom:0;z-index:10;background:rgba(0,0,0,.7);display:none}.zan-dialog__container{position:fixed;left:0;bottom:0;width:750rpx;background:#fff;transform:translateY(150%);transition:all .4s ease;z-index:11}.zan-dialog--show .zan-dialog__container{transform:translateY(0)}.zan-dialog--show .zan-dialog__mask{display:block} \ No newline at end of file diff --git a/dist/field/index.wxss b/dist/field/index.wxss index 5be58895..52961d6c 100644 --- a/dist/field/index.wxss +++ b/dist/field/index.wxss @@ -1,50 +1 @@ -@import '../cell/index.wxss'; - -.zan-field { - padding: 7px 15px; - color: #333; -} - -.zan-field--wrapped { - margin: 0 15px; - border: 1rpx solid #e5e5e5; - border-radius: 8rpx; - background-color: #fff; -} - -.zan-field--wrapped::after { - border: 0rpx; -} - -.zan-field--wrapped + .zan-field--wrapped { - margin-top: 10px; -} - -.zan-field--error { - /* 圆角输入框时，将边框也置红 */ - border-color: #f40; - color: #f40; -} - -.zan-field__title { - color: #333; - min-width: 65px; - padding-right: 10px; -} - -.zan-field__input { - flex: 1; - line-height: 1.6; - padding: 4px 0; - min-height: 22px; - height: auto; - font-size: 14px; -} - -.zan-field__placeholder { - font-size: 14px; -} - -.zan-field__input--right { - text-align: right; -} +.zan-cell{position:relative;padding:12px 15px;display:flex;align-items:center;line-height:1.4;font-size:14px}.zan-cell::after{position:absolute;left:15px;right:0;bottom:0;border-top:1rpx solid #e5e5e5;background:#e5e5e5;content:' '}.zan-cell__icon{margin-right:5px}.zan-cell__bd{flex:1}.zan-cell__text{line-height:24px;font-size:14px}.zan-cell__desc{line-height:1.2;font-size:12px;color:#666}.zan-cell__ft{position:relative;text-align:right;color:#666}.zan-cell__no-pading{padding:0}.zan-cell__no-pading .zan-cell__bd_padding{padding:12px 0 12px 15px}.zan-cell__no-pading .zan-cell__bd_padding .zan-form__input{height:26px}.zan-cell__no-pading .zan-cell__ft_padding{padding:12px 15px 12px 0}.zan-cell--last-child::after,.zan-cell:last-child::after{display:none}.zan-cell--access .zan-cell__ft{padding-right:13px}.zan-cell--access .zan-cell__ft::after{position:absolute;top:50%;right:2px;content:" ";display:inline-block;height:6px;width:6px;border-width:2px 2px 0 0;border-color:#c8c8c8;border-style:solid;transform:translateY(-50%) matrix(.71,.71,-.71,.71,0,0)}.zan-cell--switch{padding-top:6px;padding-bottom:6px}.zan-field{padding:7px 15px;color:#333}.zan-field--wrapped{margin:0 15px;border:1rpx solid #e5e5e5;border-radius:8rpx;background-color:#fff}.zan-field--wrapped::after{border:0rpx}.zan-field--wrapped+.zan-field--wrapped{margin-top:10px}.zan-field--error{border-color:#f40;color:#f40}.zan-field__title{color:#333;min-width:65px;padding-right:10px}.zan-field__input{flex:1;line-height:1.6;padding:4px 0;min-height:22px;height:auto;font-size:14px}.zan-field__placeholder{font-size:14px}.zan-field__input--right{text-align:right} \ No newline at end of file diff --git a/dist/helper/index.wxss b/dist/helper/index.wxss index a80f4d34..181207ea 100644 --- a/dist/helper/index.wxss +++ b/dist/helper/index.wxss @@ -1,101 +1 @@ -.zan-pull-left { - float: left; -} - -.zan-pull-right { - float: right; -} - -.zan-center { - text-align: center; -} - -.zan-right { - text-align: right; -} - -.zan-text-deleted { - text-decoration: line-through; -} -.zan-font-8 { - font-size: 8px; -} -.zan-font-10 { - font-size: 10px; -} -.zan-font-12 { - font-size: 12px; -} -.zan-font-14 { - font-size: 14px; -} -.zan-font-16 { - font-size: 16px; -} -.zan-font-18 { - font-size: 18px; -} -.zan-font-20 { - font-size: 20px; -} -.zan-font-22 { - font-size: 22px; -} -.zan-font-24 { - font-size: 22px; -} -.zan-font-30 { - font-size: 30px; -} -.zan-font-bold { - font-weight: bold; -} - -.zan-arrow { - position: absolute; - right: 15px; - top: 50%; - display: inline-block; - height: 6px; - width: 6px; - border-width: 2px 2px 0 0; - border-color: #c8c8c8; - border-style: solid; - transform: translateY(-50%) matrix(0.71, 0.71, -0.71, 0.71, 0, 0); -} - -.zan-ellipsis { - overflow: hidden; - text-overflow: ellipsis; - white-space: nowrap; - word-wrap: normal; -} - -.zan-ellipsis--l2 { - max-height: 40px; - line-height: 20px; - overflow: hidden; - text-overflow: ellipsis; - display: -webkit-box; - -webkit-line-clamp: 2; - -webkit-box-orient: vertical; -} - -.zan-ellipsis--l3 { - max-height: 60px; - line-height: 20px; - overflow: hidden; - text-overflow: ellipsis; - display: -webkit-box; - -webkit-line-clamp: 3; - -webkit-box-orient: vertical; -} - -.zan-clearfix { - zoom: 1; -} -.zan-clearfix::after { - content: ''; - display: table; - clear: both; -} +.zan-pull-left{float:left}.zan-pull-right{float:right}.zan-center{text-align:center}.zan-right{text-align:right}.zan-text-deleted{text-decoration:line-through}.zan-font-8{font-size:8px}.zan-font-10{font-size:10px}.zan-font-12{font-size:12px}.zan-font-14{font-size:14px}.zan-font-16{font-size:16px}.zan-font-18{font-size:18px}.zan-font-20{font-size:20px}.zan-font-22{font-size:22px}.zan-font-24{font-size:22px}.zan-font-30{font-size:30px}.zan-font-bold{font-weight:700}.zan-arrow{position:absolute;right:15px;top:50%;display:inline-block;height:6px;width:6px;border-width:2px 2px 0 0;border-color:#c8c8c8;border-style:solid;transform:translateY(-50%) matrix(.71,.71,-.71,.71,0,0)}.zan-ellipsis{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;word-wrap:normal}.zan-ellipsis--l2{max-height:40px;line-height:20px;overflow:hidden;text-overflow:ellipsis;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}.zan-ellipsis--l3{max-height:60px;line-height:20px;overflow:hidden;text-overflow:ellipsis;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical}.zan-clearfix{zoom:1}.zan-clearfix::after{content:'';display:table;clear:both} \ No newline at end of file diff --git a/dist/icon/index.wxss b/dist/icon/index.wxss index 8f83272a..808567da 100644 --- a/dist/icon/index.wxss +++ b/dist/icon/index.wxss @@ -1,130 +1 @@ -/* DO NOT EDIT! Generated by fount */ - -@font-face { - font-family: 'zanui-weapp-icon'; - src: url('https://b.yzcdn.cn/zanui-weapp/zanui-weapp-icon-9e9804afef.eot'); - src: url('https://b.yzcdn.cn/zanui-weapp/zanui-weapp-icon-9e9804afef.eot?#iefix') format('embedded-opentype'), - url('https://b.yzcdn.cn/zanui-weapp/zanui-weapp-icon-9e9804afef.woff2') format('woff2'), - url('https://b.yzcdn.cn/zanui-weapp/zanui-weapp-icon-9e9804afef.woff') format('woff'), - url('https://b.yzcdn.cn/zanui-weapp/zanui-weapp-icon-9e9804afef.ttf') format('truetype') -} - -.zan-icon { - display: inline-block; -} -.zan-icon::before { - font-family: "zanui-weapp-icon" !important; - font-style: normal; - font-weight: normal; - speak: none; - - display: inline-block; - text-decoration: inherit; - width: 1em; - text-align: center; - - /* For safety - reset parent styles, that can break glyph codes*/ - font-variant: normal; - text-transform: none; - - /* fix buttons height, for twitter bootstrap */ - line-height: 1em; - - /* Animation center compensation - margins should be symmetric */ - /* remove if not needed */ - /* margin-left: .2em; */ - - /* you can be more comfortable with increased icons size */ - /* font-size: 120%; */ - - /* Font smoothing. That was taken from TWBS */ - -webkit-font-smoothing: antialiased; - - /* Uncomment for 3D effect */ - /* text-shadow: 1px 1px 1px rgba(127, 127, 127, 0.3); */ -} -/* DO NOT EDIT! Generated by iconfount */ - - -.zan-icon-qr-invalid:before { content: '\e800'; } /* '' */ -.zan-icon-qr:before { content: '\e801'; } /* '' */ -.zan-icon-exchange:before { content: '\e802'; } /* '' */ -.zan-icon-close:before { content: '\e803'; } /* '' */ -.zan-icon-location:before { content: '\e804'; } /* '' */ -.zan-icon-upgrade:before { content: '\e805'; } /* '' */ -.zan-icon-check:before { content: '\e806'; } /* '' */ -.zan-icon-checked:before { content: '\e807'; } /* '' */ -.zan-icon-like-o:before { content: '\e808'; } /* '' */ -.zan-icon-like:before { content: '\e809'; } /* '' */ -.zan-icon-chat:before { content: '\e80a'; } /* '' */ -.zan-icon-shop:before { content: '\e80b'; } /* '' */ -.zan-icon-photograph:before { content: '\e80c'; } /* '' */ -.zan-icon-add:before { content: '\e80d'; } /* '' */ -.zan-icon-add2:before { content: '\e80e'; } /* '' */ -.zan-icon-photo:before { content: '\e80f'; } /* '' */ -.zan-icon-logistics:before { content: '\e810'; } /* '' */ -.zan-icon-edit:before { content: '\e811'; } /* '' */ -.zan-icon-passed:before { content: '\e812'; } /* '' */ -.zan-icon-shopping-cart:before { content: '\e813'; } /* '' */ -.zan-icon-arrow:before { content: '\e814'; } /* '' */ -.zan-icon-gift:before { content: '\e815'; } /* '' */ -.zan-icon-search:before { content: '\e816'; } /* '' */ -.zan-icon-clear:before { content: '\e817'; } /* '' */ -.zan-icon-success:before { content: '\e818'; } /* '' */ -.zan-icon-fail:before { content: '\e819'; } /* '' */ -.zan-icon-contact:before { content: '\e81a'; } /* '' */ -.zan-icon-wechat:before { content: '\e81b'; } /* '' */ -.zan-icon-alipay:before { content: '\e81c'; } /* '' */ -.zan-icon-password-view:before { content: '\e81d'; } /* '' */ -.zan-icon-password-not-view:before { content: '\e81e'; } /* '' */ -.zan-icon-wap-nav:before { content: '\e81f'; } /* '' */ -.zan-icon-wap-home:before { content: '\e820'; } /* '' */ -.zan-icon-ecard-pay:before { content: '\e821'; } /* '' */ -.zan-icon-balance-pay:before { content: '\e822'; } /* '' */ -.zan-icon-peer-pay:before { content: '\e823'; } /* '' */ -.zan-icon-credit-pay:before { content: '\e824'; } /* '' */ -.zan-icon-debit-pay:before { content: '\e825'; } /* '' */ -.zan-icon-other-pay:before { content: '\e826'; } /* '' */ -.zan-icon-cart:before { content: '\e827'; } /* '' */ -.zan-icon-browsing-history:before { content: '\e828'; } /* '' */ -.zan-icon-goods-collect:before { content: '\e829'; } /* '' */ -.zan-icon-shop-collect:before { content: '\e82a'; } /* '' */ -.zan-icon-receive-gift:before { content: '\e82b'; } /* '' */ -.zan-icon-send-gift:before { content: '\e82c'; } /* '' */ -.zan-icon-setting:before { content: '\e82d'; } /* '' */ -.zan-icon-points:before { content: '\e82e'; } /* '' */ -.zan-icon-coupon:before { content: '\e82f'; } /* '' */ -.zan-icon-free-postage:before { content: '\e830'; } /* '' */ -.zan-icon-discount:before { content: '\e831'; } /* '' */ -.zan-icon-birthday-privilege:before { content: '\e832'; } /* '' */ -.zan-icon-member-day-privilege:before { content: '\e833'; } /* '' */ -.zan-icon-balance-details:before { content: '\e834'; } /* '' */ -.zan-icon-cash-back-record:before { content: '\e835'; } /* '' */ -.zan-icon-points-mall:before { content: '\e836'; } /* '' */ -.zan-icon-exchange-record:before { content: '\e837'; } /* '' */ -.zan-icon-pending-payment:before { content: '\e838'; } /* '' */ -.zan-icon-pending-orders:before { content: '\e839'; } /* '' */ -.zan-icon-pending-deliver:before { content: '\e83a'; } /* '' */ -.zan-icon-pending-evaluate:before { content: '\e83b'; } /* '' */ -.zan-icon-gift-card-pay:before { content: '\e83c'; } /* '' */ -.zan-icon-cash-on-deliver:before { content: '\e83d'; } /* '' */ -.zan-icon-underway:before { content: '\e83e'; } /* '' */ -.zan-icon-point-gift:before { content: '\e83f'; } /* '' */ -.zan-icon-after-sale:before { content: '\e840'; } /* '' */ -.zan-icon-edit-data:before { content: '\e841'; } /* '' */ -.zan-icon-question:before { content: '\e842'; } /* '' */ -.zan-icon-delete:before { content: '\e843'; } /* '' */ -.zan-icon-records:before { content: '\e844'; } /* '' */ -.zan-icon-description:before { content: '\e845'; } /* '' */ -.zan-icon-card:before { content: '\e846'; } /* '' */ -.zan-icon-gift-card:before { content: '\e847'; } /* '' */ -.zan-icon-coupon:before { content: '\e848'; } /* '' */ -.zan-icon-clock:before { content: '\e849'; } /* '' */ -.zan-icon-gold-coin:before { content: '\e84a'; } /* '' */ -.zan-icon-completed:before { content: '\e84b'; } /* '' */ -.zan-icon-value-card:before { content: '\e84c'; } /* '' */ -.zan-icon-certificate:before { content: '\e84d'; } /* '' */ -.zan-icon-tosend:before { content: '\e84e'; } /* '' */ -.zan-icon-sign:before { content: '\e84f'; } /* '' */ -.zan-icon-home:before { content: '\e850'; } /* '' */ -.zan-icon-phone:before { content: '\e851'; } /* '' */ \ No newline at end of file +@font-face{font-family:zanui-weapp-icon;src:url(https://b.yzcdn.cn/zanui-weapp/zanui-weapp-icon-9e9804afef.eot);src:url(https://b.yzcdn.cn/zanui-weapp/zanui-weapp-icon-9e9804afef.eot?#iefix) format('embedded-opentype'),url(https://b.yzcdn.cn/zanui-weapp/zanui-weapp-icon-9e9804afef.woff2) format('woff2'),url(https://b.yzcdn.cn/zanui-weapp/zanui-weapp-icon-9e9804afef.woff) format('woff'),url(https://b.yzcdn.cn/zanui-weapp/zanui-weapp-icon-9e9804afef.ttf) format('truetype')}.zan-icon{display:inline-block}.zan-icon::before{font-family:zanui-weapp-icon!important;font-style:normal;font-weight:400;speak:none;display:inline-block;text-decoration:inherit;width:1em;text-align:center;font-variant:normal;text-transform:none;line-height:1em;-webkit-font-smoothing:antialiased}.zan-icon-qr-invalid:before{content:'\e800'}.zan-icon-qr:before{content:'\e801'}.zan-icon-exchange:before{content:'\e802'}.zan-icon-close:before{content:'\e803'}.zan-icon-location:before{content:'\e804'}.zan-icon-upgrade:before{content:'\e805'}.zan-icon-check:before{content:'\e806'}.zan-icon-checked:before{content:'\e807'}.zan-icon-like-o:before{content:'\e808'}.zan-icon-like:before{content:'\e809'}.zan-icon-chat:before{content:'\e80a'}.zan-icon-shop:before{content:'\e80b'}.zan-icon-photograph:before{content:'\e80c'}.zan-icon-add:before{content:'\e80d'}.zan-icon-add2:before{content:'\e80e'}.zan-icon-photo:before{content:'\e80f'}.zan-icon-logistics:before{content:'\e810'}.zan-icon-edit:before{content:'\e811'}.zan-icon-passed:before{content:'\e812'}.zan-icon-shopping-cart:before{content:'\e813'}.zan-icon-arrow:before{content:'\e814'}.zan-icon-gift:before{content:'\e815'}.zan-icon-search:before{content:'\e816'}.zan-icon-clear:before{content:'\e817'}.zan-icon-success:before{content:'\e818'}.zan-icon-fail:before{content:'\e819'}.zan-icon-contact:before{content:'\e81a'}.zan-icon-wechat:before{content:'\e81b'}.zan-icon-alipay:before{content:'\e81c'}.zan-icon-password-view:before{content:'\e81d'}.zan-icon-password-not-view:before{content:'\e81e'}.zan-icon-wap-nav:before{content:'\e81f'}.zan-icon-wap-home:before{content:'\e820'}.zan-icon-ecard-pay:before{content:'\e821'}.zan-icon-balance-pay:before{content:'\e822'}.zan-icon-peer-pay:before{content:'\e823'}.zan-icon-credit-pay:before{content:'\e824'}.zan-icon-debit-pay:before{content:'\e825'}.zan-icon-other-pay:before{content:'\e826'}.zan-icon-cart:before{content:'\e827'}.zan-icon-browsing-history:before{content:'\e828'}.zan-icon-goods-collect:before{content:'\e829'}.zan-icon-shop-collect:before{content:'\e82a'}.zan-icon-receive-gift:before{content:'\e82b'}.zan-icon-send-gift:before{content:'\e82c'}.zan-icon-setting:before{content:'\e82d'}.zan-icon-points:before{content:'\e82e'}.zan-icon-coupon:before{content:'\e82f'}.zan-icon-free-postage:before{content:'\e830'}.zan-icon-discount:before{content:'\e831'}.zan-icon-birthday-privilege:before{content:'\e832'}.zan-icon-member-day-privilege:before{content:'\e833'}.zan-icon-balance-details:before{content:'\e834'}.zan-icon-cash-back-record:before{content:'\e835'}.zan-icon-points-mall:before{content:'\e836'}.zan-icon-exchange-record:before{content:'\e837'}.zan-icon-pending-payment:before{content:'\e838'}.zan-icon-pending-orders:before{content:'\e839'}.zan-icon-pending-deliver:before{content:'\e83a'}.zan-icon-pending-evaluate:before{content:'\e83b'}.zan-icon-gift-card-pay:before{content:'\e83c'}.zan-icon-cash-on-deliver:before{content:'\e83d'}.zan-icon-underway:before{content:'\e83e'}.zan-icon-point-gift:before{content:'\e83f'}.zan-icon-after-sale:before{content:'\e840'}.zan-icon-edit-data:before{content:'\e841'}.zan-icon-question:before{content:'\e842'}.zan-icon-delete:before{content:'\e843'}.zan-icon-records:before{content:'\e844'}.zan-icon-description:before{content:'\e845'}.zan-icon-card:before{content:'\e846'}.zan-icon-gift-card:before{content:'\e847'}.zan-icon-coupon:before{content:'\e848'}.zan-icon-clock:before{content:'\e849'}.zan-icon-gold-coin:before{content:'\e84a'}.zan-icon-completed:before{content:'\e84b'}.zan-icon-value-card:before{content:'\e84c'}.zan-icon-certificate:before{content:'\e84d'}.zan-icon-tosend:before{content:'\e84e'}.zan-icon-sign:before{content:'\e84f'}.zan-icon-home:before{content:'\e850'}.zan-icon-phone:before{content:'\e851'} \ No newline at end of file diff --git a/dist/index.wxss b/dist/index.wxss index c5b70894..d1adeb2e 100644 --- a/dist/index.wxss +++ b/dist/index.wxss @@ -1,22 +1 @@ -@import "badge/index.wxss"; -@import "btn/index.wxss"; -@import "capsule/index.wxss"; -@import "card/index.wxss"; -@import "cell/index.wxss"; -@import "color/index.wxss"; -@import "dialog/index.wxss"; -@import "field/index.wxss"; -@import "helper/index.wxss"; -@import "icon/index.wxss"; -@import "label/index.wxss"; -@import "loadmore/index.wxss"; -@import "noticebar/index.wxss"; -@import "panel/index.wxss"; -@import "popup/index.wxss"; -@import "quantity/index.wxss"; -@import "select/index.wxss"; -@import "steps/index.wxss"; -@import "switch/index.wxss"; -@import "tab/index.wxss"; -@import "toast/index.wxss"; -@import "toptips/index.wxss"; +.zan-badge{position:relative}.zan-badge__count{position:absolute;top:-8px;right:0;height:1.6em;min-width:1.6em;line-height:1.6;padding:0 .4em;font-size:10px;font-family:tahoma;border-radius:.8em;background:#f44;color:#fff;text-align:center;white-space:nowrap;transform:translateX(50%);transform-origin:-10% center;z-index:10;box-shadow:0 0 0 1px #fff;box-sizing:border-box}.zan-btn{position:relative;color:#333;background-color:#fff;margin-bottom:10px;padding-left:15px;padding-right:15px;border-radius:2px;border:1rpx solid #e5e5e5;font-size:16px;line-height:45px;height:45px;box-sizing:border-box;text-decoration:none;text-align:center;vertical-align:middle}.zan-btn::after{display:none}.zan-btns{margin:15px}.zan-btn--primary{color:#fff;background-color:#4b0;border-color:#0a0}.zan-btn--warn{color:#fff;background-color:#f85;border-color:#f85}.zan-btn--danger{color:#fff;background-color:#f44;border-color:#e33}.zan-btn--small{display:inline-block;height:30px;line-height:30px;font-size:12px;margin-right:5px;margin-bottom:0}.zan-btn--mini{display:inline-block;line-height:21px;height:22px;font-size:10px;margin-right:5px;margin-bottom:0;padding-left:5px;padding-right:5px}.zan-btn--large{border-radius:0;margin-bottom:0;border:none;line-height:50px;height:50px}.zan-btn--plain.zan-btn{background-color:transparent}.zan-btn--plain.zan-btn--primary{color:#06bf04}.zan-btn--plain.zan-btn--warn{color:#f60}.zan-btn--plain.zan-btn--danger{color:#f44}.button-hover{opacity:.9}.zan-btn--loading{color:transparent;opacity:1}.zan-btn--loading::before{position:absolute;left:50%;top:50%;content:' ';width:16px;height:16px;margin-left:-8px;margin-top:-8px;border:3px solid #e5e5e5;border-color:#666 #e5e5e5 #e5e5e5 #e5e5e5;border-radius:8px;box-sizing:border-box;animation:btn-spin .6s linear;animation-iteration-count:infinite}.zan-btn--danger.zan-btn--loading::before,.zan-btn--primary.zan-btn--loading::before,.zan-btn--warn.zan-btn--loading::before{border-color:#fff rgba(0,0,0,.1) rgba(0,0,0,.1) rgba(0,0,0,.1)}@keyframes btn-spin{0%{transform:rotate(0)}100%{transform:rotate(360deg)}}.zan-btn.zan-btn--disabled{color:#999!important;background:#f8f8f8!important;border-color:#e5e5e5!important;cursor:not-allowed!important;opacity:1!important}.zan-btn--last-child,.zan-btn:last-child{margin-bottom:0;margin-right:0}.zan-capsule{display:inline-block;font-size:12px;vertical-align:middle;line-height:16px;transform:scale(.83)}.zan-capsule__left,.zan-capsule__right{display:inline-block;line-height:16px;height:16px;vertical-align:middle;box-sizing:border-box}.zan-capsule__left{padding:0 2px;color:#fff;background:#999;border-radius:2px 0 0 2px;border:1rpx solid #999}.zan-capsule__right{padding:0 5px;color:#999;border-radius:0 2px 2px 0;border:1rpx solid #999}.zan-capsule--danger .zan-capsule__left{color:#fff;background:#f24544;border-color:#f24544}.zan-capsule--danger .zan-capsule__right{color:#f24544;border-color:#f24544}.zan-card{margin-left:0;width:auto;padding:5px 15px;overflow:hidden;position:relative;font-size:14px}.zan-card__thumb{width:90px;height:90px;float:left;position:relative;margin-left:auto;margin-right:auto;overflow:hidden;background-size:cover}.zan-card__img{position:absolute;top:0;left:0;right:0;bottom:0;width:auto;height:auto;max-width:100%;max-height:100%}.zan-card__detail{margin-left:100px;width:auto;position:relative}.zan-card__detail-row{overflow:hidden;line-height:20px;min-height:20px;margin-bottom:3px}.zan-card__right-col{float:right}.zan-card__left-col{margin-right:80px}.zan-cell{position:relative;padding:12px 15px;display:flex;align-items:center;line-height:1.4;font-size:14px}.zan-cell::after{position:absolute;left:15px;right:0;bottom:0;border-top:1rpx solid #e5e5e5;background:#e5e5e5;content:' '}.zan-cell__icon{margin-right:5px}.zan-cell__bd{flex:1}.zan-cell__text{line-height:24px;font-size:14px}.zan-cell__desc{line-height:1.2;font-size:12px;color:#666}.zan-cell__ft{position:relative;text-align:right;color:#666}.zan-cell__no-pading{padding:0}.zan-cell__no-pading .zan-cell__bd_padding{padding:12px 0 12px 15px}.zan-cell__no-pading .zan-cell__bd_padding .zan-form__input{height:26px}.zan-cell__no-pading .zan-cell__ft_padding{padding:12px 15px 12px 0}.zan-cell--last-child::after,.zan-cell:last-child::after{display:none}.zan-cell--access .zan-cell__ft{padding-right:13px}.zan-cell--access .zan-cell__ft::after{position:absolute;top:50%;right:2px;content:" ";display:inline-block;height:6px;width:6px;border-width:2px 2px 0 0;border-color:#c8c8c8;border-style:solid;transform:translateY(-50%) matrix(.71,.71,-.71,.71,0,0)}.zan-cell--switch{padding-top:6px;padding-bottom:6px}.zan-c-red{color:#f44!important}.zan-c-gray{color:#c9c9c9!important}.zan-c-gray-dark{color:#999!important}.zan-c-gray-darker{color:#666!important}.zan-c-black{color:#333!important}.zan-c-blue{color:#3283fa!important}.zan-c-green{color:#4b0!important}.zan-dialog__mask{position:fixed;top:0;left:0;right:0;bottom:0;z-index:10;background:rgba(0,0,0,.7);display:none}.zan-dialog__container{position:fixed;left:0;bottom:0;width:750rpx;background:#fff;transform:translateY(150%);transition:all .4s ease;z-index:11}.zan-dialog--show .zan-dialog__container{transform:translateY(0)}.zan-dialog--show .zan-dialog__mask{display:block}.zan-field{padding:7px 15px;color:#333}.zan-field--wrapped{margin:0 15px;border:1rpx solid #e5e5e5;border-radius:8rpx;background-color:#fff}.zan-field--wrapped::after{border:0rpx}.zan-field--wrapped+.zan-field--wrapped{margin-top:10px}.zan-field--error{border-color:#f40;color:#f40}.zan-field__title{color:#333;min-width:65px;padding-right:10px}.zan-field__input{flex:1;line-height:1.6;padding:4px 0;min-height:22px;height:auto;font-size:14px}.zan-field__placeholder{font-size:14px}.zan-field__input--right{text-align:right}.zan-pull-left{float:left}.zan-pull-right{float:right}.zan-center{text-align:center}.zan-right{text-align:right}.zan-text-deleted{text-decoration:line-through}.zan-font-8{font-size:8px}.zan-font-10{font-size:10px}.zan-font-12{font-size:12px}.zan-font-14{font-size:14px}.zan-font-16{font-size:16px}.zan-font-18{font-size:18px}.zan-font-20{font-size:20px}.zan-font-22{font-size:22px}.zan-font-24{font-size:22px}.zan-font-30{font-size:30px}.zan-font-bold{font-weight:700}.zan-arrow{position:absolute;right:15px;top:50%;display:inline-block;height:6px;width:6px;border-width:2px 2px 0 0;border-color:#c8c8c8;border-style:solid;transform:translateY(-50%) matrix(.71,.71,-.71,.71,0,0)}.zan-ellipsis{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;word-wrap:normal}.zan-ellipsis--l2{max-height:40px;line-height:20px;overflow:hidden;text-overflow:ellipsis;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}.zan-ellipsis--l3{max-height:60px;line-height:20px;overflow:hidden;text-overflow:ellipsis;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical}.zan-clearfix{zoom:1}.zan-clearfix::after{content:'';display:table;clear:both}@font-face{font-family:zanui-weapp-icon;src:url(https://b.yzcdn.cn/zanui-weapp/zanui-weapp-icon-9e9804afef.eot);src:url(https://b.yzcdn.cn/zanui-weapp/zanui-weapp-icon-9e9804afef.eot?#iefix) format('embedded-opentype'),url(https://b.yzcdn.cn/zanui-weapp/zanui-weapp-icon-9e9804afef.woff2) format('woff2'),url(https://b.yzcdn.cn/zanui-weapp/zanui-weapp-icon-9e9804afef.woff) format('woff'),url(https://b.yzcdn.cn/zanui-weapp/zanui-weapp-icon-9e9804afef.ttf) format('truetype')}.zan-icon{display:inline-block}.zan-icon::before{font-family:zanui-weapp-icon!important;font-style:normal;font-weight:400;speak:none;display:inline-block;text-decoration:inherit;width:1em;text-align:center;font-variant:normal;text-transform:none;line-height:1em;-webkit-font-smoothing:antialiased}.zan-icon-qr-invalid:before{content:'\e800'}.zan-icon-qr:before{content:'\e801'}.zan-icon-exchange:before{content:'\e802'}.zan-icon-close:before{content:'\e803'}.zan-icon-location:before{content:'\e804'}.zan-icon-upgrade:before{content:'\e805'}.zan-icon-check:before{content:'\e806'}.zan-icon-checked:before{content:'\e807'}.zan-icon-like-o:before{content:'\e808'}.zan-icon-like:before{content:'\e809'}.zan-icon-chat:before{content:'\e80a'}.zan-icon-shop:before{content:'\e80b'}.zan-icon-photograph:before{content:'\e80c'}.zan-icon-add:before{content:'\e80d'}.zan-icon-add2:before{content:'\e80e'}.zan-icon-photo:before{content:'\e80f'}.zan-icon-logistics:before{content:'\e810'}.zan-icon-edit:before{content:'\e811'}.zan-icon-passed:before{content:'\e812'}.zan-icon-shopping-cart:before{content:'\e813'}.zan-icon-arrow:before{content:'\e814'}.zan-icon-gift:before{content:'\e815'}.zan-icon-search:before{content:'\e816'}.zan-icon-clear:before{content:'\e817'}.zan-icon-success:before{content:'\e818'}.zan-icon-fail:before{content:'\e819'}.zan-icon-contact:before{content:'\e81a'}.zan-icon-wechat:before{content:'\e81b'}.zan-icon-alipay:before{content:'\e81c'}.zan-icon-password-view:before{content:'\e81d'}.zan-icon-password-not-view:before{content:'\e81e'}.zan-icon-wap-nav:before{content:'\e81f'}.zan-icon-wap-home:before{content:'\e820'}.zan-icon-ecard-pay:before{content:'\e821'}.zan-icon-balance-pay:before{content:'\e822'}.zan-icon-peer-pay:before{content:'\e823'}.zan-icon-credit-pay:before{content:'\e824'}.zan-icon-debit-pay:before{content:'\e825'}.zan-icon-other-pay:before{content:'\e826'}.zan-icon-cart:before{content:'\e827'}.zan-icon-browsing-history:before{content:'\e828'}.zan-icon-goods-collect:before{content:'\e829'}.zan-icon-shop-collect:before{content:'\e82a'}.zan-icon-receive-gift:before{content:'\e82b'}.zan-icon-send-gift:before{content:'\e82c'}.zan-icon-setting:before{content:'\e82d'}.zan-icon-points:before{content:'\e82e'}.zan-icon-coupon:before{content:'\e82f'}.zan-icon-free-postage:before{content:'\e830'}.zan-icon-discount:before{content:'\e831'}.zan-icon-birthday-privilege:before{content:'\e832'}.zan-icon-member-day-privilege:before{content:'\e833'}.zan-icon-balance-details:before{content:'\e834'}.zan-icon-cash-back-record:before{content:'\e835'}.zan-icon-points-mall:before{content:'\e836'}.zan-icon-exchange-record:before{content:'\e837'}.zan-icon-pending-payment:before{content:'\e838'}.zan-icon-pending-orders:before{content:'\e839'}.zan-icon-pending-deliver:before{content:'\e83a'}.zan-icon-pending-evaluate:before{content:'\e83b'}.zan-icon-gift-card-pay:before{content:'\e83c'}.zan-icon-cash-on-deliver:before{content:'\e83d'}.zan-icon-underway:before{content:'\e83e'}.zan-icon-point-gift:before{content:'\e83f'}.zan-icon-after-sale:before{content:'\e840'}.zan-icon-edit-data:before{content:'\e841'}.zan-icon-question:before{content:'\e842'}.zan-icon-delete:before{content:'\e843'}.zan-icon-records:before{content:'\e844'}.zan-icon-description:before{content:'\e845'}.zan-icon-card:before{content:'\e846'}.zan-icon-gift-card:before{content:'\e847'}.zan-icon-coupon:before{content:'\e848'}.zan-icon-clock:before{content:'\e849'}.zan-icon-gold-coin:before{content:'\e84a'}.zan-icon-completed:before{content:'\e84b'}.zan-icon-value-card:before{content:'\e84c'}.zan-icon-certificate:before{content:'\e84d'}.zan-icon-tosend:before{content:'\e84e'}.zan-icon-sign:before{content:'\e84f'}.zan-icon-home:before{content:'\e850'}.zan-icon-phone:before{content:'\e851'}.zan-label{display:inline-block;font-size:12px;height:28px;line-height:28px;color:#333;border:1rpx solid #999;padding:0 10px;border-radius:2px;margin-right:10px;box-sizing:border-box;vertical-align:middle;text-align:center}.zan-label--primary{color:#fff;background:#f44;border:1rpx solid #f44}.zan-label--disabled{color:#cacaca;background:#eee;border:1rpx solid #e5e5e5}.zan-label--small{font-size:11px;height:16px;line-height:16px;padding:0 3px}.zan-label--plain.zan-label--primary{color:#f44;background:#fff}.zan-loadmore{position:relative;width:65%;margin:21px auto;line-height:20px;font-size:14px;text-align:center;vertical-align:middle}.zan-loading{width:20px;height:20px;display:inline-block;vertical-align:middle;animation:weuiLoading 1s steps(12,end) infinite;background:transparent url(data:image/svg+xml;base64,PHN2ZyBjbGFzcz0iciIgd2lkdGg9JzEyMHB4JyBoZWlnaHQ9JzEyMHB4JyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAxMDAgMTAwIj4KICAgIDxyZWN0IHg9IjAiIHk9IjAiIHdpZHRoPSIxMDAiIGhlaWdodD0iMTAwIiBmaWxsPSJub25lIiBjbGFzcz0iYmsiPjwvcmVjdD4KICAgIDxyZWN0IHg9JzQ2LjUnIHk9JzQwJyB3aWR0aD0nNycgaGVpZ2h0PScyMCcgcng9JzUnIHJ5PSc1JyBmaWxsPScjRTlFOUU5JwogICAgICAgICAgdHJhbnNmb3JtPSdyb3RhdGUoMCA1MCA1MCkgdHJhbnNsYXRlKDAgLTMwKSc+CiAgICA8L3JlY3Q+CiAgICA8cmVjdCB4PSc0Ni41JyB5PSc0MCcgd2lkdGg9JzcnIGhlaWdodD0nMjAnIHJ4PSc1JyByeT0nNScgZmlsbD0nIzk4OTY5NycKICAgICAgICAgIHRyYW5zZm9ybT0ncm90YXRlKDMwIDUwIDUwKSB0cmFuc2xhdGUoMCAtMzApJz4KICAgICAgICAgICAgICAgICByZXBlYXRDb3VudD0naW5kZWZpbml0ZScvPgogICAgPC9yZWN0PgogICAgPHJlY3QgeD0nNDYuNScgeT0nNDAnIHdpZHRoPSc3JyBoZWlnaHQ9JzIwJyByeD0nNScgcnk9JzUnIGZpbGw9JyM5Qjk5OUEnCiAgICAgICAgICB0cmFuc2Zvcm09J3JvdGF0ZSg2MCA1MCA1MCkgdHJhbnNsYXRlKDAgLTMwKSc+CiAgICAgICAgICAgICAgICAgcmVwZWF0Q291bnQ9J2luZGVmaW5pdGUnLz4KICAgIDwvcmVjdD4KICAgIDxyZWN0IHg9JzQ2LjUnIHk9JzQwJyB3aWR0aD0nNycgaGVpZ2h0PScyMCcgcng9JzUnIHJ5PSc1JyBmaWxsPScjQTNBMUEyJwogICAgICAgICAgdHJhbnNmb3JtPSdyb3RhdGUoOTAgNTAgNTApIHRyYW5zbGF0ZSgwIC0zMCknPgogICAgPC9yZWN0PgogICAgPHJlY3QgeD0nNDYuNScgeT0nNDAnIHdpZHRoPSc3JyBoZWlnaHQ9JzIwJyByeD0nNScgcnk9JzUnIGZpbGw9JyNBQkE5QUEnCiAgICAgICAgICB0cmFuc2Zvcm09J3JvdGF0ZSgxMjAgNTAgNTApIHRyYW5zbGF0ZSgwIC0zMCknPgogICAgPC9yZWN0PgogICAgPHJlY3QgeD0nNDYuNScgeT0nNDAnIHdpZHRoPSc3JyBoZWlnaHQ9JzIwJyByeD0nNScgcnk9JzUnIGZpbGw9JyNCMkIyQjInCiAgICAgICAgICB0cmFuc2Zvcm09J3JvdGF0ZSgxNTAgNTAgNTApIHRyYW5zbGF0ZSgwIC0zMCknPgogICAgPC9yZWN0PgogICAgPHJlY3QgeD0nNDYuNScgeT0nNDAnIHdpZHRoPSc3JyBoZWlnaHQ9JzIwJyByeD0nNScgcnk9JzUnIGZpbGw9JyNCQUI4QjknCiAgICAgICAgICB0cmFuc2Zvcm09J3JvdGF0ZSgxODAgNTAgNTApIHRyYW5zbGF0ZSgwIC0zMCknPgogICAgPC9yZWN0PgogICAgPHJlY3QgeD0nNDYuNScgeT0nNDAnIHdpZHRoPSc3JyBoZWlnaHQ9JzIwJyByeD0nNScgcnk9JzUnIGZpbGw9JyNDMkMwQzEnCiAgICAgICAgICB0cmFuc2Zvcm09J3JvdGF0ZSgyMTAgNTAgNTApIHRyYW5zbGF0ZSgwIC0zMCknPgogICAgPC9yZWN0PgogICAgPHJlY3QgeD0nNDYuNScgeT0nNDAnIHdpZHRoPSc3JyBoZWlnaHQ9JzIwJyByeD0nNScgcnk9JzUnIGZpbGw9JyNDQkNCQ0InCiAgICAgICAgICB0cmFuc2Zvcm09J3JvdGF0ZSgyNDAgNTAgNTApIHRyYW5zbGF0ZSgwIC0zMCknPgogICAgPC9yZWN0PgogICAgPHJlY3QgeD0nNDYuNScgeT0nNDAnIHdpZHRoPSc3JyBoZWlnaHQ9JzIwJyByeD0nNScgcnk9JzUnIGZpbGw9JyNEMkQyRDInCiAgICAgICAgICB0cmFuc2Zvcm09J3JvdGF0ZSgyNzAgNTAgNTApIHRyYW5zbGF0ZSgwIC0zMCknPgogICAgPC9yZWN0PgogICAgPHJlY3QgeD0nNDYuNScgeT0nNDAnIHdpZHRoPSc3JyBoZWlnaHQ9JzIwJyByeD0nNScgcnk9JzUnIGZpbGw9JyNEQURBREEnCiAgICAgICAgICB0cmFuc2Zvcm09J3JvdGF0ZSgzMDAgNTAgNTApIHRyYW5zbGF0ZSgwIC0zMCknPgogICAgPC9yZWN0PgogICAgPHJlY3QgeD0nNDYuNScgeT0nNDAnIHdpZHRoPSc3JyBoZWlnaHQ9JzIwJyByeD0nNScgcnk9JzUnIGZpbGw9JyNFMkUyRTInCiAgICAgICAgICB0cmFuc2Zvcm09J3JvdGF0ZSgzMzAgNTAgNTApIHRyYW5zbGF0ZSgwIC0zMCknPgogICAgPC9yZWN0Pgo8L3N2Zz4=) no-repeat;-webkit-background-size:100%;background-size:100%}.zan-loadmore .zan-loading{margin-right:4px}.zan-loadmore__tips{display:inline-block;vertical-align:middle;height:20px;line-height:20px}.zan-loadmore--nodata,.zan-loadmore--nomore{border-top:1rpx solid #e5e5e5;color:#999}.zan-loadmore--nodata{margin-top:120px}.zan-loadmore--nodata .zan-loadmore__tips{position:relative;top:-11px;background:#f9f9f9;padding:0 6px}.zan-loadmore--nomore .zan-loadmore__tips{position:relative;top:-11px;background:#f9f9f9;padding:0 6px}.zan-loadmore__dot{position:absolute;left:50%;top:10px;margin-left:-2px;margin-top:-2px;content:" ";width:4px;height:4px;border-radius:50%;background-color:#e5e5e5;display:inline-block;vertical-align:middle}.zan-noticebar{color:#f60;padding:9px 10px;font-size:12px;line-height:1.5;background-color:#fff7cc}.zan-panel{background:#fff;border-top:1rpx solid #e5e5e5;border-bottom:1rpx solid #e5e5e5;margin-top:10px;overflow:hidden}.zan-panel-title{font-size:14px;line-height:1;color:#999;padding:20px 15px 0 15px}.zan-panel--without-margin-top{margin-top:0}.zan-popup{position:fixed;background-color:#fff;width:100%;height:100%;top:50%;left:50%;transform:translate3d(-50%,-50%,0);transition:.2s ease-out}.zan-popup--top{width:100%;top:0;right:auto;bottom:auto;left:50%;transform:translate3d(-50%,0,0)}.zan-popup--right{transform:translate3d(50%,-50%,0)}.zan-popup--left{transform:translate3d(-150%,-50%,0)}.zan-popup--show{transform:translate3d(-50%,-50%,0)}.zan-quantity{color:#666}.zan-quantity view{display:inline-block;line-height:20px;padding:5px 0;text-align:center;min-width:40px;box-sizing:border-box;vertical-align:middle;font-size:12px;border:1rpx solid #999}.zan-quantity .zan-quantity__minus{border-right:none;border-radius:2px 0 0 2px}.zan-quantity .zan-quantity__text{border:1rpx solid #999;display:inline-block;text-align:center;vertical-align:middle;height:30px;width:40px;font-size:12px;line-height:30px}.zan-quantity .zan-quantity__plus{border-left:none;border-radius:0 2px 2px 0}.zan-quantity .zan-quantity--disabled{background:#f8f8f8;color:#bbb;border-color:#e8e8e8}.zan-quantity--small view{min-width:36px;line-height:18px}.zan-quantity--small .zan-quantity__text{width:36px;line-height:28px;height:28px}.zan-select__list .zan-select__radio{display:none}.zan-steps--steps.zan-steps--5 .zan-steps__step{width:25%}.zan-steps--steps.zan-steps--4 .zan-steps__step{width:33%}.zan-steps--steps.zan-steps--3 .zan-steps__step{width:50%}.zan-steps--steps .zan-steps__step{position:relative;float:left;padding-bottom:25px;color:#b1b1b1}.zan-steps--steps .zan-steps__title{transform:translateX(-50%);font-size:10px;text-align:center}.zan-steps--steps .zan-steps__icons{position:absolute;top:30px;left:-10px;padding:0 8px;background-color:#fff;z-index:10}.zan-steps--steps .zan-steps__circle{display:block;position:relative;width:5px;height:5px;background-color:#e5e5e5;border-radius:50%}.zan-steps--steps .zan-steps__line{position:absolute;left:0;top:32px;width:100%;height:1px;background-color:#e5e5e5}.zan-steps--steps .zan-steps__step--done{color:#333}.zan-steps--steps .zan-steps__step--done .zan-steps__line{background-color:#06bf04}.zan-steps--steps .zan-steps__step--done .zan-steps__circle{width:5px;height:5px;background-color:#09bb07}.zan-steps--steps .zan-steps__step--cur .zan-steps__icons{top:25px;left:-14px}.zan-steps--steps .zan-steps__step--cur .zan-steps__circle{width:13px;height:13px;background-image:url(https://b.yzcdn.cn/v2/image/wap/success_small@2x.png);background-size:13px 13px}.zan-steps--steps .zan-steps__step--cur .zan-steps__line{background-color:#e5e5e5}.zan-steps--steps .zan-steps__step--first-child .zan-steps__title{margin-left:0;transform:none;text-align:left}.zan-steps--steps .zan-steps__step--first-child .zan-steps__icons{left:-7px}.zan-steps--steps .zan-steps__step--last-child{position:absolute;right:0;top:0;text-align:right}.zan-steps--steps .zan-steps__step--last-child .zan-steps__title{transform:none;text-align:right}.zan-steps--steps .zan-steps__step--last-child .zan-steps__icons{left:auto;right:-6px}.zan-steps--steps .zan-steps__step--last-child .zan-steps__line{display:none}.zan-steps--steps .zan-steps__step--db-title{min-height:29px}.zan-steps--steps .zan-steps__step--db-title .zan-steps__line{top:45px}.zan-steps--steps .zan-steps__step--db-title .zan-steps__icons{top:43px}.zan-steps--steps .zan-steps__step--db-title.zan-steps__step--cur .zan-steps__icons{top:39px}.zan-steps--vsteps{color:#999;font-size:14px}.zan-steps--vsteps .zan-steps__step{position:relative;padding:15px 0}.zan-steps--vsteps .zan-steps__step--done{color:#4b0}.zan-steps--vsteps .zan-steps__line{position:absolute;top:0;bottom:0;left:7px;width:1px;background-color:#e5e5e5}.zan-steps--vsteps .zan-steps__title{display:inline-block;line-height:20px;padding-left:27px}.zan-steps--vsteps .zan-steps__title--desc{padding-left:3px}.zan-steps--vsteps .zan-steps__icons{position:absolute;left:7px;top:50%;transform:translate(-50%,-50%);z-index:2;padding:3px 0;background-color:#fff}.zan-steps--vsteps .zan-steps__circle{width:5px;height:5px;background-color:#cacaca;border-radius:10px}.zan-steps--vsteps .zan-steps__step--done .zan-steps__circle{width:5px;height:5px;background-color:#09bb07}.zan-steps--vsteps .zan-steps__step--cur .zan-steps__circle{width:13px;height:13px;background:transparent url(https://b.yzcdn.cn/v2/image/wap/success_small@2x.png);background-size:13px 13px;border-radius:0}.zan-steps--vsteps .zan-steps__icon--active{width:13px;height:13px}.zan-steps--vsteps .zan-steps__step--first-child .zan-steps__title::before{content:'';position:absolute;top:0;bottom:50%;left:7px;width:1px;background-color:#fff;z-index:1}.zan-steps--vsteps .zan-steps__step--last-child .zan-steps__title::after{content:'';position:absolute;top:50%;bottom:0;left:7px;width:1px;background-color:#fff;z-index:1}.zan-steps{position:relative}.zan-switch{position:relative;display:inline-block;width:52px;height:32px;vertical-align:middle;box-sizing:border-box;border-radius:16px;background:#44db5e;border:1px solid #44db5e}.zan-switch__circle{position:absolute;top:0;left:0;width:30px;height:30px;display:inline-block;background:#fff;border-radius:15px;box-sizing:border-box;box-shadow:0 0 0 1px rgba(0,0,0,.1),0 3px 1px 0 rgba(0,0,0,.05),0 2px 2px 0 rgba(0,0,0,.1),0 3px 3px 0 rgba(0,0,0,.05);transition:transform .35s cubic-bezier(.45,1,.4,1);z-index:2}.zan-switch__bg{position:absolute;top:-1px;left:-1px;width:52px;height:32px;background:#fff;border-radius:26px;display:inline-block;border:1px solid #e5e5e5;box-sizing:border-box;transition:transform .35s cubic-bezier(.45,1,.4,1);transform:scale(0);transform-origin:36px 16px}.zan-switch--on .zan-switch__circle{transform:translateX(20px)}.zan-switch--off .zan-switch__bg{transform:scale(1)}.zan-swtich--disabled{opacity:.4}.zan-switch__loading{position:absolute;left:7px;top:7px;width:16px;height:16px;background:url(https://img.yzcdn.cn/public_files/2017/02/24/9acec77d91106cd15b8107c4633d9155.png) no-repeat;background-size:16px 16px;animation:zan-switch-loading .8s infinite linear}@keyframes zan-switch-loading{from{transform:rotate(0)}to{transform:rotate(360deg)}}.zan-tab{height:45px}.zan-tab__bd{width:750rpx;display:flex;flex-direction:row;border-bottom:1rpx solid #e5e5e5;background:#fff}.zan-tab__bd--fixed{position:fixed;top:0;z-index:2}.zan-tab__item{flex:1;display:inline-block;text-align:center;box-sizing:border-box}.zan-tab__title{font-size:14px;display:inline-block;color:#666;height:44px;line-height:44px;box-sizing:border-box;margin:0 10px;word-break:keep-all}.zan-tab__item--selected .zan-tab__title{color:#f44;border-bottom:2px solid #f44}.zan-tab__bd--scroll{display:block;white-space:nowrap}.zan-tab__bd--scroll .zan-tab__item{min-width:80px}.zan-tab__bd--scroll .zan-tab__text{margin:0 20px}.zan-toast{position:fixed;top:35%;left:20%;transform:translateZ(0) translateY(-100%);background:rgba(0,0,0,.7);color:#fff;font-size:14px;width:60%;line-height:1.5em;margin:0 auto;box-sizing:border-box;padding:10px;text-align:center;border-radius:4px;z-index:100}.zan-toptips{display:block;position:fixed;-webkit-transform:translateZ(0) translateY(-100%);width:100%;min-height:32px;top:0;line-height:2.3;font-size:14px;text-align:center;color:#fff;background-color:#e64340;z-index:110;transition:all .4s ease}.zan-toptips--show{-webkit-transform:translateZ(0) translateY(0)} \ No newline at end of file diff --git a/dist/label/index.wxss b/dist/label/index.wxss index 7c02728a..95810b46 100644 --- a/dist/label/index.wxss +++ b/dist/label/index.wxss @@ -1,34 +1 @@ -.zan-label { - display: inline-block; - font-size: 12px; - height: 28px; - line-height: 28px; - color: #333; - border: 1rpx solid #999; - padding: 0px 10px; - border-radius: 2px; - margin-right: 10px; - box-sizing: border-box; - vertical-align: middle; - text-align: center; -} -.zan-label--primary { - color: #fff; - background: #f44; - border: 1rpx solid #f44; -} -.zan-label--disabled { - color: #cacaca; - background: #eee; - border: 1rpx solid #e5e5e5; -} -.zan-label--small { - font-size: 11px; - height: 16px; - line-height: 16px; - padding: 0px 3px; -} -.zan-label--plain.zan-label--primary { - color: #f44; - background: #fff; -} +.zan-label{display:inline-block;font-size:12px;height:28px;line-height:28px;color:#333;border:1rpx solid #999;padding:0 10px;border-radius:2px;margin-right:10px;box-sizing:border-box;vertical-align:middle;text-align:center}.zan-label--primary{color:#fff;background:#f44;border:1rpx solid #f44}.zan-label--disabled{color:#cacaca;background:#eee;border:1rpx solid #e5e5e5}.zan-label--small{font-size:11px;height:16px;line-height:16px;padding:0 3px}.zan-label--plain.zan-label--primary{color:#f44;background:#fff} \ No newline at end of file diff --git a/dist/loadmore/index.wxss b/dist/loadmore/index.wxss index 538195eb..3352bcfc 100644 --- a/dist/loadmore/index.wxss +++ b/dist/loadmore/index.wxss @@ -1,70 +1 @@ -.zan-loadmore { - position: relative; - width: 65%; - margin: 21px auto; - line-height: 20px; - font-size: 14px; - text-align: center; - vertical-align: middle; -} - -.zan-loading { - width:20px; - height:20px; - display: inline-block; - vertical-align: middle; - animation: weuiLoading 1s steps(12, end) infinite; - background: transparent url(data:image/svg+xml;base64,PHN2ZyBjbGFzcz0iciIgd2lkdGg9JzEyMHB4JyBoZWlnaHQ9JzEyMHB4JyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAxMDAgMTAwIj4KICAgIDxyZWN0IHg9IjAiIHk9IjAiIHdpZHRoPSIxMDAiIGhlaWdodD0iMTAwIiBmaWxsPSJub25lIiBjbGFzcz0iYmsiPjwvcmVjdD4KICAgIDxyZWN0IHg9JzQ2LjUnIHk9JzQwJyB3aWR0aD0nNycgaGVpZ2h0PScyMCcgcng9JzUnIHJ5PSc1JyBmaWxsPScjRTlFOUU5JwogICAgICAgICAgdHJhbnNmb3JtPSdyb3RhdGUoMCA1MCA1MCkgdHJhbnNsYXRlKDAgLTMwKSc+CiAgICA8L3JlY3Q+CiAgICA8cmVjdCB4PSc0Ni41JyB5PSc0MCcgd2lkdGg9JzcnIGhlaWdodD0nMjAnIHJ4PSc1JyByeT0nNScgZmlsbD0nIzk4OTY5NycKICAgICAgICAgIHRyYW5zZm9ybT0ncm90YXRlKDMwIDUwIDUwKSB0cmFuc2xhdGUoMCAtMzApJz4KICAgICAgICAgICAgICAgICByZXBlYXRDb3VudD0naW5kZWZpbml0ZScvPgogICAgPC9yZWN0PgogICAgPHJlY3QgeD0nNDYuNScgeT0nNDAnIHdpZHRoPSc3JyBoZWlnaHQ9JzIwJyByeD0nNScgcnk9JzUnIGZpbGw9JyM5Qjk5OUEnCiAgICAgICAgICB0cmFuc2Zvcm09J3JvdGF0ZSg2MCA1MCA1MCkgdHJhbnNsYXRlKDAgLTMwKSc+CiAgICAgICAgICAgICAgICAgcmVwZWF0Q291bnQ9J2luZGVmaW5pdGUnLz4KICAgIDwvcmVjdD4KICAgIDxyZWN0IHg9JzQ2LjUnIHk9JzQwJyB3aWR0aD0nNycgaGVpZ2h0PScyMCcgcng9JzUnIHJ5PSc1JyBmaWxsPScjQTNBMUEyJwogICAgICAgICAgdHJhbnNmb3JtPSdyb3RhdGUoOTAgNTAgNTApIHRyYW5zbGF0ZSgwIC0zMCknPgogICAgPC9yZWN0PgogICAgPHJlY3QgeD0nNDYuNScgeT0nNDAnIHdpZHRoPSc3JyBoZWlnaHQ9JzIwJyByeD0nNScgcnk9JzUnIGZpbGw9JyNBQkE5QUEnCiAgICAgICAgICB0cmFuc2Zvcm09J3JvdGF0ZSgxMjAgNTAgNTApIHRyYW5zbGF0ZSgwIC0zMCknPgogICAgPC9yZWN0PgogICAgPHJlY3QgeD0nNDYuNScgeT0nNDAnIHdpZHRoPSc3JyBoZWlnaHQ9JzIwJyByeD0nNScgcnk9JzUnIGZpbGw9JyNCMkIyQjInCiAgICAgICAgICB0cmFuc2Zvcm09J3JvdGF0ZSgxNTAgNTAgNTApIHRyYW5zbGF0ZSgwIC0zMCknPgogICAgPC9yZWN0PgogICAgPHJlY3QgeD0nNDYuNScgeT0nNDAnIHdpZHRoPSc3JyBoZWlnaHQ9JzIwJyByeD0nNScgcnk9JzUnIGZpbGw9JyNCQUI4QjknCiAgICAgICAgICB0cmFuc2Zvcm09J3JvdGF0ZSgxODAgNTAgNTApIHRyYW5zbGF0ZSgwIC0zMCknPgogICAgPC9yZWN0PgogICAgPHJlY3QgeD0nNDYuNScgeT0nNDAnIHdpZHRoPSc3JyBoZWlnaHQ9JzIwJyByeD0nNScgcnk9JzUnIGZpbGw9JyNDMkMwQzEnCiAgICAgICAgICB0cmFuc2Zvcm09J3JvdGF0ZSgyMTAgNTAgNTApIHRyYW5zbGF0ZSgwIC0zMCknPgogICAgPC9yZWN0PgogICAgPHJlY3QgeD0nNDYuNScgeT0nNDAnIHdpZHRoPSc3JyBoZWlnaHQ9JzIwJyByeD0nNScgcnk9JzUnIGZpbGw9JyNDQkNCQ0InCiAgICAgICAgICB0cmFuc2Zvcm09J3JvdGF0ZSgyNDAgNTAgNTApIHRyYW5zbGF0ZSgwIC0zMCknPgogICAgPC9yZWN0PgogICAgPHJlY3QgeD0nNDYuNScgeT0nNDAnIHdpZHRoPSc3JyBoZWlnaHQ9JzIwJyByeD0nNScgcnk9JzUnIGZpbGw9JyNEMkQyRDInCiAgICAgICAgICB0cmFuc2Zvcm09J3JvdGF0ZSgyNzAgNTAgNTApIHRyYW5zbGF0ZSgwIC0zMCknPgogICAgPC9yZWN0PgogICAgPHJlY3QgeD0nNDYuNScgeT0nNDAnIHdpZHRoPSc3JyBoZWlnaHQ9JzIwJyByeD0nNScgcnk9JzUnIGZpbGw9JyNEQURBREEnCiAgICAgICAgICB0cmFuc2Zvcm09J3JvdGF0ZSgzMDAgNTAgNTApIHRyYW5zbGF0ZSgwIC0zMCknPgogICAgPC9yZWN0PgogICAgPHJlY3QgeD0nNDYuNScgeT0nNDAnIHdpZHRoPSc3JyBoZWlnaHQ9JzIwJyByeD0nNScgcnk9JzUnIGZpbGw9JyNFMkUyRTInCiAgICAgICAgICB0cmFuc2Zvcm09J3JvdGF0ZSgzMzAgNTAgNTApIHRyYW5zbGF0ZSgwIC0zMCknPgogICAgPC9yZWN0Pgo8L3N2Zz4=) no-repeat; - -webkit-background-size: 100%; - background-size: 100%; -} - -.zan-loadmore .zan-loading { - margin-right: 4px; -} - -.zan-loadmore__tips { - display: inline-block; - vertical-align: middle; - height: 20px; - line-height: 20px; -} - -.zan-loadmore--nodata, -.zan-loadmore--nomore { - border-top: 1rpx solid #e5e5e5; - color: #999; -} - -.zan-loadmore--nodata { - margin-top: 120px; -} - -.zan-loadmore--nodata .zan-loadmore__tips { - position: relative; - top: -11px; - background: #f9f9f9; - padding: 0 6px; -} - -.zan-loadmore--nomore .zan-loadmore__tips { - position: relative; - top: -11px; - background: #f9f9f9; - padding: 0 6px; -} - -.zan-loadmore__dot { - position: absolute; - left: 50%; - top: 10px; - margin-left: -2px; - margin-top: -2px; - content: " "; - width: 4px; - height: 4px; - border-radius: 50%; - background-color: #E5E5E5; - display: inline-block; - vertical-align: middle; -} +.zan-loadmore{position:relative;width:65%;margin:21px auto;line-height:20px;font-size:14px;text-align:center;vertical-align:middle}.zan-loading{width:20px;height:20px;display:inline-block;vertical-align:middle;animation:weuiLoading 1s steps(12,end) infinite;background:transparent url(data:image/svg+xml;base64,PHN2ZyBjbGFzcz0iciIgd2lkdGg9JzEyMHB4JyBoZWlnaHQ9JzEyMHB4JyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAxMDAgMTAwIj4KICAgIDxyZWN0IHg9IjAiIHk9IjAiIHdpZHRoPSIxMDAiIGhlaWdodD0iMTAwIiBmaWxsPSJub25lIiBjbGFzcz0iYmsiPjwvcmVjdD4KICAgIDxyZWN0IHg9JzQ2LjUnIHk9JzQwJyB3aWR0aD0nNycgaGVpZ2h0PScyMCcgcng9JzUnIHJ5PSc1JyBmaWxsPScjRTlFOUU5JwogICAgICAgICAgdHJhbnNmb3JtPSdyb3RhdGUoMCA1MCA1MCkgdHJhbnNsYXRlKDAgLTMwKSc+CiAgICA8L3JlY3Q+CiAgICA8cmVjdCB4PSc0Ni41JyB5PSc0MCcgd2lkdGg9JzcnIGhlaWdodD0nMjAnIHJ4PSc1JyByeT0nNScgZmlsbD0nIzk4OTY5NycKICAgICAgICAgIHRyYW5zZm9ybT0ncm90YXRlKDMwIDUwIDUwKSB0cmFuc2xhdGUoMCAtMzApJz4KICAgICAgICAgICAgICAgICByZXBlYXRDb3VudD0naW5kZWZpbml0ZScvPgogICAgPC9yZWN0PgogICAgPHJlY3QgeD0nNDYuNScgeT0nNDAnIHdpZHRoPSc3JyBoZWlnaHQ9JzIwJyByeD0nNScgcnk9JzUnIGZpbGw9JyM5Qjk5OUEnCiAgICAgICAgICB0cmFuc2Zvcm09J3JvdGF0ZSg2MCA1MCA1MCkgdHJhbnNsYXRlKDAgLTMwKSc+CiAgICAgICAgICAgICAgICAgcmVwZWF0Q291bnQ9J2luZGVmaW5pdGUnLz4KICAgIDwvcmVjdD4KICAgIDxyZWN0IHg9JzQ2LjUnIHk9JzQwJyB3aWR0aD0nNycgaGVpZ2h0PScyMCcgcng9JzUnIHJ5PSc1JyBmaWxsPScjQTNBMUEyJwogICAgICAgICAgdHJhbnNmb3JtPSdyb3RhdGUoOTAgNTAgNTApIHRyYW5zbGF0ZSgwIC0zMCknPgogICAgPC9yZWN0PgogICAgPHJlY3QgeD0nNDYuNScgeT0nNDAnIHdpZHRoPSc3JyBoZWlnaHQ9JzIwJyByeD0nNScgcnk9JzUnIGZpbGw9JyNBQkE5QUEnCiAgICAgICAgICB0cmFuc2Zvcm09J3JvdGF0ZSgxMjAgNTAgNTApIHRyYW5zbGF0ZSgwIC0zMCknPgogICAgPC9yZWN0PgogICAgPHJlY3QgeD0nNDYuNScgeT0nNDAnIHdpZHRoPSc3JyBoZWlnaHQ9JzIwJyByeD0nNScgcnk9JzUnIGZpbGw9JyNCMkIyQjInCiAgICAgICAgICB0cmFuc2Zvcm09J3JvdGF0ZSgxNTAgNTAgNTApIHRyYW5zbGF0ZSgwIC0zMCknPgogICAgPC9yZWN0PgogICAgPHJlY3QgeD0nNDYuNScgeT0nNDAnIHdpZHRoPSc3JyBoZWlnaHQ9JzIwJyByeD0nNScgcnk9JzUnIGZpbGw9JyNCQUI4QjknCiAgICAgICAgICB0cmFuc2Zvcm09J3JvdGF0ZSgxODAgNTAgNTApIHRyYW5zbGF0ZSgwIC0zMCknPgogICAgPC9yZWN0PgogICAgPHJlY3QgeD0nNDYuNScgeT0nNDAnIHdpZHRoPSc3JyBoZWlnaHQ9JzIwJyByeD0nNScgcnk9JzUnIGZpbGw9JyNDMkMwQzEnCiAgICAgICAgICB0cmFuc2Zvcm09J3JvdGF0ZSgyMTAgNTAgNTApIHRyYW5zbGF0ZSgwIC0zMCknPgogICAgPC9yZWN0PgogICAgPHJlY3QgeD0nNDYuNScgeT0nNDAnIHdpZHRoPSc3JyBoZWlnaHQ9JzIwJyByeD0nNScgcnk9JzUnIGZpbGw9JyNDQkNCQ0InCiAgICAgICAgICB0cmFuc2Zvcm09J3JvdGF0ZSgyNDAgNTAgNTApIHRyYW5zbGF0ZSgwIC0zMCknPgogICAgPC9yZWN0PgogICAgPHJlY3QgeD0nNDYuNScgeT0nNDAnIHdpZHRoPSc3JyBoZWlnaHQ9JzIwJyByeD0nNScgcnk9JzUnIGZpbGw9JyNEMkQyRDInCiAgICAgICAgICB0cmFuc2Zvcm09J3JvdGF0ZSgyNzAgNTAgNTApIHRyYW5zbGF0ZSgwIC0zMCknPgogICAgPC9yZWN0PgogICAgPHJlY3QgeD0nNDYuNScgeT0nNDAnIHdpZHRoPSc3JyBoZWlnaHQ9JzIwJyByeD0nNScgcnk9JzUnIGZpbGw9JyNEQURBREEnCiAgICAgICAgICB0cmFuc2Zvcm09J3JvdGF0ZSgzMDAgNTAgNTApIHRyYW5zbGF0ZSgwIC0zMCknPgogICAgPC9yZWN0PgogICAgPHJlY3QgeD0nNDYuNScgeT0nNDAnIHdpZHRoPSc3JyBoZWlnaHQ9JzIwJyByeD0nNScgcnk9JzUnIGZpbGw9JyNFMkUyRTInCiAgICAgICAgICB0cmFuc2Zvcm09J3JvdGF0ZSgzMzAgNTAgNTApIHRyYW5zbGF0ZSgwIC0zMCknPgogICAgPC9yZWN0Pgo8L3N2Zz4=) no-repeat;-webkit-background-size:100%;background-size:100%}.zan-loadmore .zan-loading{margin-right:4px}.zan-loadmore__tips{display:inline-block;vertical-align:middle;height:20px;line-height:20px}.zan-loadmore--nodata,.zan-loadmore--nomore{border-top:1rpx solid #e5e5e5;color:#999}.zan-loadmore--nodata{margin-top:120px}.zan-loadmore--nodata .zan-loadmore__tips{position:relative;top:-11px;background:#f9f9f9;padding:0 6px}.zan-loadmore--nomore .zan-loadmore__tips{position:relative;top:-11px;background:#f9f9f9;padding:0 6px}.zan-loadmore__dot{position:absolute;left:50%;top:10px;margin-left:-2px;margin-top:-2px;content:" ";width:4px;height:4px;border-radius:50%;background-color:#e5e5e5;display:inline-block;vertical-align:middle} \ No newline at end of file diff --git a/dist/noticebar/index.wxss b/dist/noticebar/index.wxss index f6a94b91..fd39ee5d 100644 --- a/dist/noticebar/index.wxss +++ b/dist/noticebar/index.wxss @@ -1,7 +1 @@ -.zan-noticebar { - color: #f60; - padding: 9px 10px; - font-size: 12px; - line-height: 1.5; - background-color: #fff7cc; -} +.zan-noticebar{color:#f60;padding:9px 10px;font-size:12px;line-height:1.5;background-color:#fff7cc} \ No newline at end of file diff --git a/dist/panel/index.wxss b/dist/panel/index.wxss index 02a85335..3067fb75 100644 --- a/dist/panel/index.wxss +++ b/dist/panel/index.wxss @@ -1,19 +1 @@ -.zan-panel { - background: #fff; - border-top: 1rpx solid #e5e5e5; - border-bottom: 1rpx solid #e5e5e5; - margin-top: 10px; - overflow: hidden; -} - -.zan-panel-title { - font-size: 14px; - line-height: 1; - color: #999; - padding: 20px 15px 0 15px; -} - - -.zan-panel--without-margin-top { - margin-top: 0; -} +.zan-panel{background:#fff;border-top:1rpx solid #e5e5e5;border-bottom:1rpx solid #e5e5e5;margin-top:10px;overflow:hidden}.zan-panel-title{font-size:14px;line-height:1;color:#999;padding:20px 15px 0 15px}.zan-panel--without-margin-top{margin-top:0} \ No newline at end of file diff --git a/dist/popup/index.wxss b/dist/popup/index.wxss index 98fdfcc2..dd1fa4a6 100644 --- a/dist/popup/index.wxss +++ b/dist/popup/index.wxss @@ -1,31 +1 @@ -.zan-popup { - position: fixed; - background-color: #fff; - width: 100%; - height: 100%; - top: 50%; - left: 50%; - transform: translate3d(-50%, -50%, 0); - transition: .2s ease-out; -} - -.zan-popup--top { - width: 100%; - top: 0; - right: auto; - bottom: auto; - left: 50%; - transform: translate3d(-50%, 0, 0); -} - -.zan-popup--right { - transform: translate3d(50%, -50%, 0); -} - -.zan-popup--left { - transform: translate3d(-150%, -50%, 0); -} - -.zan-popup--show { - transform: translate3d(-50%, -50%, 0); -} +.zan-popup{position:fixed;background-color:#fff;width:100%;height:100%;top:50%;left:50%;transform:translate3d(-50%,-50%,0);transition:.2s ease-out}.zan-popup--top{width:100%;top:0;right:auto;bottom:auto;left:50%;transform:translate3d(-50%,0,0)}.zan-popup--right{transform:translate3d(50%,-50%,0)}.zan-popup--left{transform:translate3d(-150%,-50%,0)}.zan-popup--show{transform:translate3d(-50%,-50%,0)} \ No newline at end of file diff --git a/dist/quantity/index.wxss b/dist/quantity/index.wxss index 513de17e..70b0ad50 100644 --- a/dist/quantity/index.wxss +++ b/dist/quantity/index.wxss @@ -1,46 +1 @@ -.zan-quantity { - color: #666; -} -.zan-quantity view { - display: inline-block; - line-height: 20px; - padding: 5px 0; - text-align: center; - min-width: 40px; - box-sizing: border-box; - vertical-align: middle; - font-size: 12px; - border: 1rpx solid #999; -} -.zan-quantity .zan-quantity__minus { - border-right: none; - border-radius: 2px 0 0 2px; -} -.zan-quantity .zan-quantity__text { - border: 1rpx solid #999; - display: inline-block; - text-align: center; - vertical-align: middle; - height: 30px; - width: 40px; - font-size: 12px; - line-height: 30px; -} -.zan-quantity .zan-quantity__plus { - border-left: none; - border-radius: 0 2px 2px 0; -} -.zan-quantity .zan-quantity--disabled { - background: #f8f8f8; - color: #bbb; - border-color: #e8e8e8; -} -.zan-quantity--small view { - min-width: 36px; - line-height: 18px; -} -.zan-quantity--small .zan-quantity__text { - width: 36px; - line-height: 28px; - height: 28px; -} +.zan-quantity{color:#666}.zan-quantity view{display:inline-block;line-height:20px;padding:5px 0;text-align:center;min-width:40px;box-sizing:border-box;vertical-align:middle;font-size:12px;border:1rpx solid #999}.zan-quantity .zan-quantity__minus{border-right:none;border-radius:2px 0 0 2px}.zan-quantity .zan-quantity__text{border:1rpx solid #999;display:inline-block;text-align:center;vertical-align:middle;height:30px;width:40px;font-size:12px;line-height:30px}.zan-quantity .zan-quantity__plus{border-left:none;border-radius:0 2px 2px 0}.zan-quantity .zan-quantity--disabled{background:#f8f8f8;color:#bbb;border-color:#e8e8e8}.zan-quantity--small view{min-width:36px;line-height:18px}.zan-quantity--small .zan-quantity__text{width:36px;line-height:28px;height:28px} \ No newline at end of file diff --git a/dist/select/index.wxss b/dist/select/index.wxss index 0695dae7..e97a0083 100644 --- a/dist/select/index.wxss +++ b/dist/select/index.wxss @@ -1,3 +1 @@ -.zan-select__list .zan-select__radio{ - display: none; -} +.zan-select__list .zan-select__radio{display:none} \ No newline at end of file diff --git a/dist/steps/index.wxss b/dist/steps/index.wxss index 14532034..406208b5 100644 --- a/dist/steps/index.wxss +++ b/dist/steps/index.wxss @@ -1,6 +1 @@ -@import "wxss/step.wxss"; -@import "wxss/vstep.wxss"; - -.zan-steps { - position: relative; -} +.zan-steps--steps.zan-steps--5 .zan-steps__step{width:25%}.zan-steps--steps.zan-steps--4 .zan-steps__step{width:33%}.zan-steps--steps.zan-steps--3 .zan-steps__step{width:50%}.zan-steps--steps .zan-steps__step{position:relative;float:left;padding-bottom:25px;color:#b1b1b1}.zan-steps--steps .zan-steps__title{transform:translateX(-50%);font-size:10px;text-align:center}.zan-steps--steps .zan-steps__icons{position:absolute;top:30px;left:-10px;padding:0 8px;background-color:#fff;z-index:10}.zan-steps--steps .zan-steps__circle{display:block;position:relative;width:5px;height:5px;background-color:#e5e5e5;border-radius:50%}.zan-steps--steps .zan-steps__line{position:absolute;left:0;top:32px;width:100%;height:1px;background-color:#e5e5e5}.zan-steps--steps .zan-steps__step--done{color:#333}.zan-steps--steps .zan-steps__step--done .zan-steps__line{background-color:#06bf04}.zan-steps--steps .zan-steps__step--done .zan-steps__circle{width:5px;height:5px;background-color:#09bb07}.zan-steps--steps .zan-steps__step--cur .zan-steps__icons{top:25px;left:-14px}.zan-steps--steps .zan-steps__step--cur .zan-steps__circle{width:13px;height:13px;background-image:url(https://b.yzcdn.cn/v2/image/wap/success_small@2x.png);background-size:13px 13px}.zan-steps--steps .zan-steps__step--cur .zan-steps__line{background-color:#e5e5e5}.zan-steps--steps .zan-steps__step--first-child .zan-steps__title{margin-left:0;transform:none;text-align:left}.zan-steps--steps .zan-steps__step--first-child .zan-steps__icons{left:-7px}.zan-steps--steps .zan-steps__step--last-child{position:absolute;right:0;top:0;text-align:right}.zan-steps--steps .zan-steps__step--last-child .zan-steps__title{transform:none;text-align:right}.zan-steps--steps .zan-steps__step--last-child .zan-steps__icons{left:auto;right:-6px}.zan-steps--steps .zan-steps__step--last-child .zan-steps__line{display:none}.zan-steps--steps .zan-steps__step--db-title{min-height:29px}.zan-steps--steps .zan-steps__step--db-title .zan-steps__line{top:45px}.zan-steps--steps .zan-steps__step--db-title .zan-steps__icons{top:43px}.zan-steps--steps .zan-steps__step--db-title.zan-steps__step--cur .zan-steps__icons{top:39px}.zan-steps--vsteps{color:#999;font-size:14px}.zan-steps--vsteps .zan-steps__step{position:relative;padding:15px 0}.zan-steps--vsteps .zan-steps__step--done{color:#4b0}.zan-steps--vsteps .zan-steps__line{position:absolute;top:0;bottom:0;left:7px;width:1px;background-color:#e5e5e5}.zan-steps--vsteps .zan-steps__title{display:inline-block;line-height:20px;padding-left:27px}.zan-steps--vsteps .zan-steps__title--desc{padding-left:3px}.zan-steps--vsteps .zan-steps__icons{position:absolute;left:7px;top:50%;transform:translate(-50%,-50%);z-index:2;padding:3px 0;background-color:#fff}.zan-steps--vsteps .zan-steps__circle{width:5px;height:5px;background-color:#cacaca;border-radius:10px}.zan-steps--vsteps .zan-steps__step--done .zan-steps__circle{width:5px;height:5px;background-color:#09bb07}.zan-steps--vsteps .zan-steps__step--cur .zan-steps__circle{width:13px;height:13px;background:transparent url(https://b.yzcdn.cn/v2/image/wap/success_small@2x.png);background-size:13px 13px;border-radius:0}.zan-steps--vsteps .zan-steps__icon--active{width:13px;height:13px}.zan-steps--vsteps .zan-steps__step--first-child .zan-steps__title::before{content:'';position:absolute;top:0;bottom:50%;left:7px;width:1px;background-color:#fff;z-index:1}.zan-steps--vsteps .zan-steps__step--last-child .zan-steps__title::after{content:'';position:absolute;top:50%;bottom:0;left:7px;width:1px;background-color:#fff;z-index:1}.zan-steps{position:relative} \ No newline at end of file diff --git a/dist/steps/wxss/step.wxss b/dist/steps/wxss/step.wxss index cdfe0a35..626bd888 100644 --- a/dist/steps/wxss/step.wxss +++ b/dist/steps/wxss/step.wxss @@ -1,133 +1 @@ -.zan-steps--steps.zan-steps--5 .zan-steps__step { - width: 25%; -} - -.zan-steps--steps.zan-steps--4 .zan-steps__step { - width: 33%; -} - -.zan-steps--steps.zan-steps--3 .zan-steps__step { - width: 50%; -} - -.zan-steps--steps .zan-steps__step { - position: relative; - float: left; - padding-bottom: 25px; - color: #b1b1b1; -} - -.zan-steps--steps .zan-steps__title { - transform: translateX(-50%); - font-size: 10px; - text-align: center; -} - -.zan-steps--steps .zan-steps__icons { - position: absolute; - top: 30px; - left: -10px; - padding: 0 8px; - background-color: #fff; - z-index: 10; -} - -.zan-steps--steps .zan-steps__circle { - display: block; - position: relative; - width: 5px; - height: 5px; - background-color: #e5e5e5; - border-radius: 50%; -} - -.zan-steps--steps .zan-steps__line { - position: absolute; - left: 0px; - top: 32px; - width: 100%; - height: 1px; - background-color: #e5e5e5; -} - - -/* 已完成的steps */ -.zan-steps--steps .zan-steps__step--done { - color: #333; -} - -.zan-steps--steps .zan-steps__step--done .zan-steps__line { - background-color: #06bf04; -} - -.zan-steps--steps .zan-steps__step--done .zan-steps__circle { - width: 5px; - height: 5px; - background-color: #09bb07; -} - -/* 正在进行中的steps */ -.zan-steps--steps .zan-steps__step--cur .zan-steps__icons { - top: 25px; - left: -14px; -} - -.zan-steps--steps .zan-steps__step--cur .zan-steps__circle { - width: 13px; - height: 13px; - background-image: url("https://b.yzcdn.cn/v2/image/wap/success_small@2x.png"); - background-size: 13px 13px; -} - -.zan-steps--steps .zan-steps__step--cur .zan-steps__line { - background-color: #e5e5e5; -} - -/* 各种不同位置的 */ -.zan-steps--steps .zan-steps__step--first-child .zan-steps__title { - margin-left: 0; - transform: none; - text-align: left; -} - -.zan-steps--steps .zan-steps__step--first-child .zan-steps__icons { - left: -7px; -} - -.zan-steps--steps .zan-steps__step--last-child { - position: absolute; - right: 0; - top: 0; - text-align: right; -} - -.zan-steps--steps .zan-steps__step--last-child .zan-steps__title { - transform: none; - text-align: right; -} - -.zan-steps--steps .zan-steps__step--last-child .zan-steps__icons { - left: auto; - right: -6px; -} - -.zan-steps--steps .zan-steps__step--last-child .zan-steps__line { - display: none; -} - -/* 有描述的step */ -.zan-steps--steps .zan-steps__step--db-title { - min-height: 29px; -} - -.zan-steps--steps .zan-steps__step--db-title .zan-steps__line { - top: 45px; -} - -.zan-steps--steps .zan-steps__step--db-title .zan-steps__icons { - top: 43px; -} - -.zan-steps--steps .zan-steps__step--db-title.zan-steps__step--cur .zan-steps__icons { - top: 39px; -} +.zan-steps--steps.zan-steps--5 .zan-steps__step{width:25%}.zan-steps--steps.zan-steps--4 .zan-steps__step{width:33%}.zan-steps--steps.zan-steps--3 .zan-steps__step{width:50%}.zan-steps--steps .zan-steps__step{position:relative;float:left;padding-bottom:25px;color:#b1b1b1}.zan-steps--steps .zan-steps__title{transform:translateX(-50%);font-size:10px;text-align:center}.zan-steps--steps .zan-steps__icons{position:absolute;top:30px;left:-10px;padding:0 8px;background-color:#fff;z-index:10}.zan-steps--steps .zan-steps__circle{display:block;position:relative;width:5px;height:5px;background-color:#e5e5e5;border-radius:50%}.zan-steps--steps .zan-steps__line{position:absolute;left:0;top:32px;width:100%;height:1px;background-color:#e5e5e5}.zan-steps--steps .zan-steps__step--done{color:#333}.zan-steps--steps .zan-steps__step--done .zan-steps__line{background-color:#06bf04}.zan-steps--steps .zan-steps__step--done .zan-steps__circle{width:5px;height:5px;background-color:#09bb07}.zan-steps--steps .zan-steps__step--cur .zan-steps__icons{top:25px;left:-14px}.zan-steps--steps .zan-steps__step--cur .zan-steps__circle{width:13px;height:13px;background-image:url(https://b.yzcdn.cn/v2/image/wap/success_small@2x.png);background-size:13px 13px}.zan-steps--steps .zan-steps__step--cur .zan-steps__line{background-color:#e5e5e5}.zan-steps--steps .zan-steps__step--first-child .zan-steps__title{margin-left:0;transform:none;text-align:left}.zan-steps--steps .zan-steps__step--first-child .zan-steps__icons{left:-7px}.zan-steps--steps .zan-steps__step--last-child{position:absolute;right:0;top:0;text-align:right}.zan-steps--steps .zan-steps__step--last-child .zan-steps__title{transform:none;text-align:right}.zan-steps--steps .zan-steps__step--last-child .zan-steps__icons{left:auto;right:-6px}.zan-steps--steps .zan-steps__step--last-child .zan-steps__line{display:none}.zan-steps--steps .zan-steps__step--db-title{min-height:29px}.zan-steps--steps .zan-steps__step--db-title .zan-steps__line{top:45px}.zan-steps--steps .zan-steps__step--db-title .zan-steps__icons{top:43px}.zan-steps--steps .zan-steps__step--db-title.zan-steps__step--cur .zan-steps__icons{top:39px} \ No newline at end of file diff --git a/dist/steps/wxss/vstep.wxss b/dist/steps/wxss/vstep.wxss index 4dfa57f8..36f03db1 100644 --- a/dist/steps/wxss/vstep.wxss +++ b/dist/steps/wxss/vstep.wxss @@ -1,90 +1 @@ -.zan-steps--vsteps { - color: #999; - font-size: 14px; -} - -.zan-steps--vsteps .zan-steps__step { - position: relative; - padding: 15px 0; -} - -.zan-steps--vsteps .zan-steps__step--done { - color: #44BB00; -} - -.zan-steps--vsteps .zan-steps__line { - position: absolute; - top: 0; - bottom: 0; - left: 7px; - width: 1px; - background-color: #e5e5e5; -} - -.zan-steps--vsteps .zan-steps__title { - display: inline-block; - line-height: 20px; - padding-left: 27px; -} - -.zan-steps--vsteps .zan-steps__title--desc { - padding-left: 3px; -} - -.zan-steps--vsteps .zan-steps__icons { - position: absolute; - left: 7px; - top: 50%; - transform: translate(-50%, -50%); - z-index: 2; - padding: 3px 0; - background-color: #fff; -} - -.zan-steps--vsteps .zan-steps__circle { - width: 5px; - height: 5px; - background-color: #cacaca; - border-radius: 10px; -} - -.zan-steps--vsteps .zan-steps__step--done .zan-steps__circle { - width: 5px; - height: 5px; - background-color: #09bb07; -} - -.zan-steps--vsteps .zan-steps__step--cur .zan-steps__circle { - width: 13px; - height: 13px; - background: transparent url("https://b.yzcdn.cn/v2/image/wap/success_small@2x.png"); - background-size: 13px 13px; - border-radius:0; -} - -.zan-steps--vsteps .zan-steps__icon--active { - width: 13px; - height: 13px; -} - -.zan-steps--vsteps .zan-steps__step--first-child .zan-steps__title::before { - content: ''; - position: absolute; - top: 0; - bottom: 50%; - left: 7px; - width: 1px; - background-color: #fff; - z-index: 1; -} - -.zan-steps--vsteps .zan-steps__step--last-child .zan-steps__title::after { - content: ''; - position: absolute; - top: 50%; - bottom: 0%; - left: 7px; - width: 1px; - background-color: #fff; - z-index: 1; -} +.zan-steps--vsteps{color:#999;font-size:14px}.zan-steps--vsteps .zan-steps__step{position:relative;padding:15px 0}.zan-steps--vsteps .zan-steps__step--done{color:#4b0}.zan-steps--vsteps .zan-steps__line{position:absolute;top:0;bottom:0;left:7px;width:1px;background-color:#e5e5e5}.zan-steps--vsteps .zan-steps__title{display:inline-block;line-height:20px;padding-left:27px}.zan-steps--vsteps .zan-steps__title--desc{padding-left:3px}.zan-steps--vsteps .zan-steps__icons{position:absolute;left:7px;top:50%;transform:translate(-50%,-50%);z-index:2;padding:3px 0;background-color:#fff}.zan-steps--vsteps .zan-steps__circle{width:5px;height:5px;background-color:#cacaca;border-radius:10px}.zan-steps--vsteps .zan-steps__step--done .zan-steps__circle{width:5px;height:5px;background-color:#09bb07}.zan-steps--vsteps .zan-steps__step--cur .zan-steps__circle{width:13px;height:13px;background:transparent url(https://b.yzcdn.cn/v2/image/wap/success_small@2x.png);background-size:13px 13px;border-radius:0}.zan-steps--vsteps .zan-steps__icon--active{width:13px;height:13px}.zan-steps--vsteps .zan-steps__step--first-child .zan-steps__title::before{content:'';position:absolute;top:0;bottom:50%;left:7px;width:1px;background-color:#fff;z-index:1}.zan-steps--vsteps .zan-steps__step--last-child .zan-steps__title::after{content:'';position:absolute;top:50%;bottom:0;left:7px;width:1px;background-color:#fff;z-index:1} \ No newline at end of file diff --git a/dist/switch/index.wxss b/dist/switch/index.wxss index 796c9130..092778cd 100644 --- a/dist/switch/index.wxss +++ b/dist/switch/index.wxss @@ -1,69 +1 @@ -.zan-switch { - position: relative; - display: inline-block; - width: 52px; - height: 32px; - vertical-align: middle; - box-sizing: border-box; - border-radius: 16px; - background: #44DB5E; - border: 1px solid #44DB5E; -} -.zan-switch__circle { - position: absolute; - top: 0; - left: 0; - width: 30px; - height: 30px; - display: inline-block; - background: #fff; - border-radius: 15px; - box-sizing: border-box; - box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.1), 0 3px 1px 0 rgba(0, 0, 0, 0.05), 0 2px 2px 0 rgba(0, 0, 0, 0.1), 0 3px 3px 0 rgba(0, 0, 0, 0.05); - transition: transform 0.35s cubic-bezier(0.45, 1, 0.4, 1); - z-index: 2; -} -.zan-switch__bg { - position: absolute; - top: -1px; - left: -1px; - width: 52px; - height: 32px; - background: #fff; - border-radius: 26px; - display: inline-block; - border: 1px solid #e5e5e5; - box-sizing: border-box; - transition: transform 0.35s cubic-bezier(0.45, 1, 0.4, 1); - transform: scale(0); - transform-origin: 36px 16px; -} -.zan-switch--on .zan-switch__circle { - transform: translateX(20px); -} -.zan-switch--off .zan-switch__bg { - transform: scale(1); -} -.zan-swtich--disabled { - opacity: 0.4; -} -.zan-switch__loading { - position: absolute; - left: 7px; - top: 7px; - width: 16px; - height: 16px; - background: url(https://img.yzcdn.cn/public_files/2017/02/24/9acec77d91106cd15b8107c4633d9155.png) no-repeat; - background-size: 16px 16px; - animation: zan-switch-loading 0.8s infinite linear; -} - -@keyframes zan-switch-loading { - from { - transform: rotate(0); - } - to { - transform: rotate(360deg); - } -} - +.zan-switch{position:relative;display:inline-block;width:52px;height:32px;vertical-align:middle;box-sizing:border-box;border-radius:16px;background:#44db5e;border:1px solid #44db5e}.zan-switch__circle{position:absolute;top:0;left:0;width:30px;height:30px;display:inline-block;background:#fff;border-radius:15px;box-sizing:border-box;box-shadow:0 0 0 1px rgba(0,0,0,.1),0 3px 1px 0 rgba(0,0,0,.05),0 2px 2px 0 rgba(0,0,0,.1),0 3px 3px 0 rgba(0,0,0,.05);transition:transform .35s cubic-bezier(.45,1,.4,1);z-index:2}.zan-switch__bg{position:absolute;top:-1px;left:-1px;width:52px;height:32px;background:#fff;border-radius:26px;display:inline-block;border:1px solid #e5e5e5;box-sizing:border-box;transition:transform .35s cubic-bezier(.45,1,.4,1);transform:scale(0);transform-origin:36px 16px}.zan-switch--on .zan-switch__circle{transform:translateX(20px)}.zan-switch--off .zan-switch__bg{transform:scale(1)}.zan-swtich--disabled{opacity:.4}.zan-switch__loading{position:absolute;left:7px;top:7px;width:16px;height:16px;background:url(https://img.yzcdn.cn/public_files/2017/02/24/9acec77d91106cd15b8107c4633d9155.png) no-repeat;background-size:16px 16px;animation:zan-switch-loading .8s infinite linear}@keyframes zan-switch-loading{from{transform:rotate(0)}to{transform:rotate(360deg)}} \ No newline at end of file diff --git a/dist/tab/index.wxss b/dist/tab/index.wxss index 5b1e18e1..e042134a 100644 --- a/dist/tab/index.wxss +++ b/dist/tab/index.wxss @@ -1,48 +1 @@ -.zan-tab { - height: 45px; -} -.zan-tab__bd { - width: 750rpx; - display: flex; - flex-direction: row; - border-bottom: 1rpx solid #e5e5e5; - background: #fff; -} -.zan-tab__bd--fixed { - position: fixed; - top: 0; - z-index: 2; -} -.zan-tab__item { - flex: 1; - display: inline-block; - text-align: center; - box-sizing: border-box; -} - -.zan-tab__title { - font-size: 14px; - display: inline-block; - color: #666; - height: 44px; - line-height: 44px; - box-sizing: border-box; - margin: 0 10px; - word-break: keep-all; -} - -.zan-tab__item--selected .zan-tab__title { - color: #f44; - border-bottom: 2px solid #f44; -} - -.zan-tab__bd--scroll { - display: block; - white-space: nowrap; -} -.zan-tab__bd--scroll .zan-tab__item { - min-width: 80px; -} -.zan-tab__bd--scroll .zan-tab__text { - margin: 0 20px; -} +.zan-tab{height:45px}.zan-tab__bd{width:750rpx;display:flex;flex-direction:row;border-bottom:1rpx solid #e5e5e5;background:#fff}.zan-tab__bd--fixed{position:fixed;top:0;z-index:2}.zan-tab__item{flex:1;display:inline-block;text-align:center;box-sizing:border-box}.zan-tab__title{font-size:14px;display:inline-block;color:#666;height:44px;line-height:44px;box-sizing:border-box;margin:0 10px;word-break:keep-all}.zan-tab__item--selected .zan-tab__title{color:#f44;border-bottom:2px solid #f44}.zan-tab__bd--scroll{display:block;white-space:nowrap}.zan-tab__bd--scroll .zan-tab__item{min-width:80px}.zan-tab__bd--scroll .zan-tab__text{margin:0 20px} \ No newline at end of file diff --git a/dist/toast/index.wxss b/dist/toast/index.wxss index a3bc3ceb..03073eac 100644 --- a/dist/toast/index.wxss +++ b/dist/toast/index.wxss @@ -1,17 +1 @@ -.zan-toast { - position: fixed; - top: 35%; - left: 20%; - transform: translateZ(0) translateY(-100%); - background: rgba(0, 0, 0, 0.7); - color: #fff; - font-size: 14px; - width: 60%; - line-height: 1.5em; - margin: 0 auto; - box-sizing: border-box; - padding: 10px; - text-align: center; - border-radius: 4px; - z-index: 100; -} +.zan-toast{position:fixed;top:35%;left:20%;transform:translateZ(0) translateY(-100%);background:rgba(0,0,0,.7);color:#fff;font-size:14px;width:60%;line-height:1.5em;margin:0 auto;box-sizing:border-box;padding:10px;text-align:center;border-radius:4px;z-index:100} \ No newline at end of file diff --git a/dist/toptips/index.wxss b/dist/toptips/index.wxss index 07c9a2fb..e6928821 100644 --- a/dist/toptips/index.wxss +++ b/dist/toptips/index.wxss @@ -1,22 +1 @@ -.zan-toptips { - display: block; - position: fixed; - -webkit-transform: translateZ(0) translateY(-100%); - width: 100%; - /* 至少有一行的高度，保证第一次动画显示正常 */ - min-height: 32px; - top: 0; - line-height: 2.3; - font-size: 14px; - text-align: center; - color: #FFF; - background-color: #E64340; - z-index: 110; - - /* 动画部分 */ - transition: all 0.4s ease; -} - -.zan-toptips--show { - -webkit-transform: translateZ(0) translateY(0); -} +.zan-toptips{display:block;position:fixed;-webkit-transform:translateZ(0) translateY(-100%);width:100%;min-height:32px;top:0;line-height:2.3;font-size:14px;text-align:center;color:#fff;background-color:#e64340;z-index:110;transition:all .4s ease}.zan-toptips--show{-webkit-transform:translateZ(0) translateY(0)} \ No newline at end of file diff --git a/package.json b/package.json index 3f0265b7..ed1d88f5 100644 --- a/package.json +++ b/package.json @@ -8,8 +8,11 @@ }, "scripts": { "release": "sh build/release.sh", + "components": "node build/build-components.js --color", + "css": "gulp build --gulpfile build/build-css.js --color", "changelog": "sh build/build-changelog.sh", - "icon": "sh build/build-icon.sh" + "icon": "sh build/build-icon.sh", + "dev": "node build/build-dev.js --color" }, "repository": { "type": "git", @@ -20,5 +23,16 @@ "bugs": { "url": "https://github.com/youzan/zanui-weapp/issues" }, - "homepage": "https://github.com/youzan/zanui-weapp#readme" + "homepage": "https://github.com/youzan/zanui-weapp#readme", + "devDependencies": { + "fs-extra": "^4.0.2", + "gulp": "^3.9.1", + "gulp-clean-css": "^3.9.0", + "gulp-postcss": "^7.0.0", + "node-watch": "^0.5.5", + "postcss-calc": "^6.0.1", + "postcss-easy-import": "^3.0.0", + "precss": "^2.0.0", + "shelljs": "^0.7.8" + } } diff --git a/packages/badge/index.wxss b/packages/badge/index.wxss new file mode 100644 index 00000000..eecdb63c --- /dev/null +++ b/packages/badge/index.wxss @@ -0,0 +1,24 @@ +.zan-badge { + position: relative; +} +.zan-badge__count { + position: absolute; + top: -8px; + right: 0px; + height: 1.6em; + min-width: 1.6em; + line-height: 1.6; + padding: 0 .4em; + font-size: 10px; + font-family: tahoma; + border-radius: .8em; + background: #FF4444; + color: #fff; + text-align: center; + white-space: nowrap; + transform: translateX(50%); + transform-origin: -10% center; + z-index: 10; + box-shadow: 0 0 0 1px #fff; + box-sizing: border-box; +} diff --git a/packages/btn/index.wxss b/packages/btn/index.wxss new file mode 100644 index 00000000..7e945c87 --- /dev/null +++ b/packages/btn/index.wxss @@ -0,0 +1,142 @@ +.zan-btn { + position: relative; + color: #333; + background-color: #fff; + margin-bottom: 10px; + padding-left: 15px; + padding-right: 15px; + border-radius: 2px; + border: 1rpx solid #e5e5e5; + font-size: 16px; + line-height: 45px; + height: 45px; + box-sizing: border-box; + text-decoration: none; + text-align: center; + vertical-align: middle; +} +.zan-btn::after { + display: none; +} +.zan-btns { + margin: 15px; +} + +/* type */ +.zan-btn--primary { + color: #fff; + background-color: #4b0; + border-color: #0a0; +} + +.zan-btn--warn { + color: #fff; + background-color: #f85; + border-color: #f85; +} + +.zan-btn--danger { + color: #fff; + background-color: #f44; + border-color: #e33; +} + +/* size */ +.zan-btn--small { + display: inline-block; + height: 30px; + line-height: 30px; + font-size: 12px; + margin-right: 5px; + margin-bottom: 0; +} +.zan-btn--mini { + display: inline-block; + line-height: 21px; + height: 22px; + font-size: 10px; + margin-right: 5px; + margin-bottom: 0; + padding-left: 5px; + padding-right: 5px; +} +.zan-btn--large { + border-radius: 0; + margin-bottom: 0; + border: none; + line-height: 50px; + height: 50px; +} + +/* plain */ +.zan-btn--plain.zan-btn { + background-color: transparent; +} +.zan-btn--plain.zan-btn--primary { + color: #06BF04; +} +.zan-btn--plain.zan-btn--warn { + color: #FF6600; +} +.zan-btn--plain.zan-btn--danger { + color: #FF4444; +} + +/* 重写button组件的button-hover样式 */ +.button-hover { + opacity: 0.9; +} + +/* loading */ +.zan-btn--loading { + color: transparent; + opacity: 1; +} +.zan-btn--loading::before { + position: absolute; + left: 50%; + top: 50%; + content: ' '; + width: 16px; + height: 16px; + margin-left: -8px; + margin-top: -8px; + border: 3px solid #e5e5e5; + border-color: #666 #e5e5e5 #e5e5e5 #e5e5e5; + border-radius: 8px; + box-sizing: border-box; + animation: btn-spin 0.6s linear; + animation-iteration-count: infinite; +} +.zan-btn--primary.zan-btn--loading::before, +.zan-btn--warn.zan-btn--loading::before, +.zan-btn--danger.zan-btn--loading::before { + border-color: #fff rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1); +} + +@keyframes btn-spin { + 0% { + transform: rotate(0); + } + 100% { + transform: rotate(360deg); + } +} + +/* disabled */ +.zan-btn.zan-btn--disabled { + /* 防止样式被 button[disabled] 的规则覆盖，所以使用了important */ + color: #999 ! important; + background: #f8f8f8 ! important; + border-color: #e5e5e5 ! important; + cursor: not-allowed ! important; + opacity: 1 ! important; +} + +/* :last-child */ +.zan-btn--last-child, +.zan-btn:last-child { + margin-bottom: 0; + margin-right: 0; +} + diff --git a/packages/capsule/index.wxml b/packages/capsule/index.wxml new file mode 100644 index 00000000..da86deba --- /dev/null +++ b/packages/capsule/index.wxml @@ -0,0 +1,12 @@ + \ No newline at end of file diff --git a/packages/capsule/index.wxss b/packages/capsule/index.wxss new file mode 100644 index 00000000..48be9a49 --- /dev/null +++ b/packages/capsule/index.wxss @@ -0,0 +1,39 @@ +.zan-capsule { + display: inline-block; + font-size: 12px; + vertical-align: middle; + line-height: 16px; + transform: scale(0.83); +} +.zan-capsule__left, +.zan-capsule__right { + display: inline-block; + line-height: 16px; + height: 16px; + vertical-align: middle; + box-sizing: border-box; +} +.zan-capsule__left { + padding: 0 2px; + color: #FFF; + background: #999; + border-radius: 2px 0 0 2px; + border: 1rpx solid #999; +} +.zan-capsule__right { + padding: 0 5px; + color: #999; + border-radius: 0 2px 2px 0; + border: 1rpx solid #999; +} + +.zan-capsule--danger .zan-capsule__left { + color: #FFF; + background: #F24544; + border-color: #F24544; +} + +.zan-capsule--danger .zan-capsule__right { + color: #F24544; + border-color: #F24544; +} diff --git a/packages/card/index.wxss b/packages/card/index.wxss new file mode 100644 index 00000000..27a4376c --- /dev/null +++ b/packages/card/index.wxss @@ -0,0 +1,53 @@ +.zan-card { + margin-left: 0px; + width: auto; + padding: 5px 15px; + overflow: hidden; + position: relative; + font-size: 14px; +} + +.zan-card__thumb { + width: 90px; + height: 90px; + float: left; + position: relative; + margin-left: auto; + margin-right: auto; + overflow: hidden; + background-size: cover; +} + +.zan-card__img { + position: absolute; + top: 0; + left: 0; + right: 0; + bottom: 0; + width: auto; + height: auto; + max-width: 100%; + max-height: 100%; +} + +.zan-card__detail { + margin-left: 100px; + width: auto; + position: relative; +} + +.zan-card__detail-row { + overflow: hidden; + line-height: 20px; + min-height: 20px; + margin-bottom: 3px; +} + +.zan-card__right-col { + float: right; +} + +.zan-card__left-col { + margin-right: 80px; +} + diff --git a/packages/cell/index.wxss b/packages/cell/index.wxss new file mode 100644 index 00000000..e8cb1d3a --- /dev/null +++ b/packages/cell/index.wxss @@ -0,0 +1,77 @@ +.zan-cell { + position: relative; + padding: 12px 15px; + display: flex; + align-items: center; + line-height: 1.4; + font-size: 14px; +} + +.zan-cell::after { + position: absolute; + left: 15px; + right: 0; + bottom: 0; + border-top: 1rpx solid #e5e5e5; + background: #e5e5e5; + content: ' '; +} +.zan-cell__icon { + margin-right: 5px; +} +.zan-cell__bd { + flex: 1; +} +.zan-cell__text { + line-height: 24px; + font-size: 14px; +} +.zan-cell__desc { + line-height: 1.2; + font-size: 12px; + color: #666; +} +.zan-cell__ft { + position: relative; + text-align: right; + color: #666; +} +.zan-cell__no-pading{ + padding: 0; +} +.zan-cell__no-pading .zan-cell__bd_padding { + padding: 12px 0 12px 15px; +} +.zan-cell__no-pading .zan-cell__bd_padding .zan-form__input{ + height: 26px; +} +.zan-cell__no-pading .zan-cell__ft_padding { + padding: 12px 15px 12px 0; +} + +.zan-cell--last-child::after, +.zan-cell:last-child::after { + display: none; +} + +.zan-cell--access .zan-cell__ft { + padding-right: 13px; +} + +.zan-cell--access .zan-cell__ft::after { + position: absolute; + top: 50%; + right: 2px; + content: " "; + display: inline-block; + height: 6px; + width: 6px; + border-width: 2px 2px 0 0; + border-color: #c8c8c8; + border-style: solid; + transform: translateY(-50%) matrix(0.71, 0.71, -0.71, 0.71, 0, 0); +} +.zan-cell--switch { + padding-top: 6px; + padding-bottom: 6px; +} diff --git a/packages/color/index.wxss b/packages/color/index.wxss new file mode 100644 index 00000000..f61ea662 --- /dev/null +++ b/packages/color/index.wxss @@ -0,0 +1,27 @@ +.zan-c-red { + color: #f44 !important; +} + +.zan-c-gray { + color: #c9c9c9 !important; +} + +.zan-c-gray-dark { + color: #999 !important; +} + +.zan-c-gray-darker { + color: #666 !important; +} + +.zan-c-black { + color: #333 !important; +} + +.zan-c-blue { + color: #3283fa !important; +} + +.zan-c-green { + color: #44BB00 !important; +} diff --git a/packages/dialog/index.wxss b/packages/dialog/index.wxss new file mode 100644 index 00000000..cd1016f6 --- /dev/null +++ b/packages/dialog/index.wxss @@ -0,0 +1,27 @@ +.zan-dialog__mask { + position: fixed; + top: 0; + left: 0; + right: 0; + bottom: 0; + z-index: 10; + background: rgba(0, 0, 0, 0.7); + display: none; +} +.zan-dialog__container { + position: fixed; + left: 0; + bottom: 0; + width: 750rpx; + background: white; + transform: translateY(150%); + transition: all 0.4s ease; + z-index: 11; +} +.zan-dialog--show .zan-dialog__container { + transform: translateY(0); +} +.zan-dialog--show .zan-dialog__mask { + display: block; +} + diff --git a/packages/field/index.js b/packages/field/index.js new file mode 100644 index 00000000..6ec9d18e --- /dev/null +++ b/packages/field/index.js @@ -0,0 +1,14 @@ +module.exports = { + _handleZanFieldChange(event) { + const { componentId } = event.currentTarget.dataset; + event.componentId = componentId; + + console.info('[zan:field:change]', event); + + if (this.handleZanFieldChange) { + this.handleZanFieldChange(event); + } else { + console.warn('页面缺少 handleZanFieldChange 回调函数'); + } + } +}; diff --git a/packages/field/index.wxml b/packages/field/index.wxml new file mode 100644 index 00000000..b95a5eae --- /dev/null +++ b/packages/field/index.wxml @@ -0,0 +1,23 @@ + diff --git a/packages/field/index.wxss b/packages/field/index.wxss new file mode 100644 index 00000000..5be58895 --- /dev/null +++ b/packages/field/index.wxss @@ -0,0 +1,50 @@ +@import '../cell/index.wxss'; + +.zan-field { + padding: 7px 15px; + color: #333; +} + +.zan-field--wrapped { + margin: 0 15px; + border: 1rpx solid #e5e5e5; + border-radius: 8rpx; + background-color: #fff; +} + +.zan-field--wrapped::after { + border: 0rpx; +} + +.zan-field--wrapped + .zan-field--wrapped { + margin-top: 10px; +} + +.zan-field--error { + /* 圆角输入框时，将边框也置红 */ + border-color: #f40; + color: #f40; +} + +.zan-field__title { + color: #333; + min-width: 65px; + padding-right: 10px; +} + +.zan-field__input { + flex: 1; + line-height: 1.6; + padding: 4px 0; + min-height: 22px; + height: auto; + font-size: 14px; +} + +.zan-field__placeholder { + font-size: 14px; +} + +.zan-field__input--right { + text-align: right; +} diff --git a/packages/helper/index.wxss b/packages/helper/index.wxss new file mode 100644 index 00000000..a80f4d34 --- /dev/null +++ b/packages/helper/index.wxss @@ -0,0 +1,101 @@ +.zan-pull-left { + float: left; +} + +.zan-pull-right { + float: right; +} + +.zan-center { + text-align: center; +} + +.zan-right { + text-align: right; +} + +.zan-text-deleted { + text-decoration: line-through; +} +.zan-font-8 { + font-size: 8px; +} +.zan-font-10 { + font-size: 10px; +} +.zan-font-12 { + font-size: 12px; +} +.zan-font-14 { + font-size: 14px; +} +.zan-font-16 { + font-size: 16px; +} +.zan-font-18 { + font-size: 18px; +} +.zan-font-20 { + font-size: 20px; +} +.zan-font-22 { + font-size: 22px; +} +.zan-font-24 { + font-size: 22px; +} +.zan-font-30 { + font-size: 30px; +} +.zan-font-bold { + font-weight: bold; +} + +.zan-arrow { + position: absolute; + right: 15px; + top: 50%; + display: inline-block; + height: 6px; + width: 6px; + border-width: 2px 2px 0 0; + border-color: #c8c8c8; + border-style: solid; + transform: translateY(-50%) matrix(0.71, 0.71, -0.71, 0.71, 0, 0); +} + +.zan-ellipsis { + overflow: hidden; + text-overflow: ellipsis; + white-space: nowrap; + word-wrap: normal; +} + +.zan-ellipsis--l2 { + max-height: 40px; + line-height: 20px; + overflow: hidden; + text-overflow: ellipsis; + display: -webkit-box; + -webkit-line-clamp: 2; + -webkit-box-orient: vertical; +} + +.zan-ellipsis--l3 { + max-height: 60px; + line-height: 20px; + overflow: hidden; + text-overflow: ellipsis; + display: -webkit-box; + -webkit-line-clamp: 3; + -webkit-box-orient: vertical; +} + +.zan-clearfix { + zoom: 1; +} +.zan-clearfix::after { + content: ''; + display: table; + clear: both; +} diff --git a/packages/icon/index.wxss b/packages/icon/index.wxss new file mode 100644 index 00000000..8f83272a --- /dev/null +++ b/packages/icon/index.wxss @@ -0,0 +1,130 @@ +/* DO NOT EDIT! Generated by fount */ + +@font-face { + font-family: 'zanui-weapp-icon'; + src: url('https://b.yzcdn.cn/zanui-weapp/zanui-weapp-icon-9e9804afef.eot'); + src: url('https://b.yzcdn.cn/zanui-weapp/zanui-weapp-icon-9e9804afef.eot?#iefix') format('embedded-opentype'), + url('https://b.yzcdn.cn/zanui-weapp/zanui-weapp-icon-9e9804afef.woff2') format('woff2'), + url('https://b.yzcdn.cn/zanui-weapp/zanui-weapp-icon-9e9804afef.woff') format('woff'), + url('https://b.yzcdn.cn/zanui-weapp/zanui-weapp-icon-9e9804afef.ttf') format('truetype') +} + +.zan-icon { + display: inline-block; +} +.zan-icon::before { + font-family: "zanui-weapp-icon" !important; + font-style: normal; + font-weight: normal; + speak: none; + + display: inline-block; + text-decoration: inherit; + width: 1em; + text-align: center; + + /* For safety - reset parent styles, that can break glyph codes*/ + font-variant: normal; + text-transform: none; + + /* fix buttons height, for twitter bootstrap */ + line-height: 1em; + + /* Animation center compensation - margins should be symmetric */ + /* remove if not needed */ + /* margin-left: .2em; */ + + /* you can be more comfortable with increased icons size */ + /* font-size: 120%; */ + + /* Font smoothing. That was taken from TWBS */ + -webkit-font-smoothing: antialiased; + + /* Uncomment for 3D effect */ + /* text-shadow: 1px 1px 1px rgba(127, 127, 127, 0.3); */ +} +/* DO NOT EDIT! Generated by iconfount */ + + +.zan-icon-qr-invalid:before { content: '\e800'; } /* '' */ +.zan-icon-qr:before { content: '\e801'; } /* '' */ +.zan-icon-exchange:before { content: '\e802'; } /* '' */ +.zan-icon-close:before { content: '\e803'; } /* '' */ +.zan-icon-location:before { content: '\e804'; } /* '' */ +.zan-icon-upgrade:before { content: '\e805'; } /* '' */ +.zan-icon-check:before { content: '\e806'; } /* '' */ +.zan-icon-checked:before { content: '\e807'; } /* '' */ +.zan-icon-like-o:before { content: '\e808'; } /* '' */ +.zan-icon-like:before { content: '\e809'; } /* '' */ +.zan-icon-chat:before { content: '\e80a'; } /* '' */ +.zan-icon-shop:before { content: '\e80b'; } /* '' */ +.zan-icon-photograph:before { content: '\e80c'; } /* '' */ +.zan-icon-add:before { content: '\e80d'; } /* '' */ +.zan-icon-add2:before { content: '\e80e'; } /* '' */ +.zan-icon-photo:before { content: '\e80f'; } /* '' */ +.zan-icon-logistics:before { content: '\e810'; } /* '' */ +.zan-icon-edit:before { content: '\e811'; } /* '' */ +.zan-icon-passed:before { content: '\e812'; } /* '' */ +.zan-icon-shopping-cart:before { content: '\e813'; } /* '' */ +.zan-icon-arrow:before { content: '\e814'; } /* '' */ +.zan-icon-gift:before { content: '\e815'; } /* '' */ +.zan-icon-search:before { content: '\e816'; } /* '' */ +.zan-icon-clear:before { content: '\e817'; } /* '' */ +.zan-icon-success:before { content: '\e818'; } /* '' */ +.zan-icon-fail:before { content: '\e819'; } /* '' */ +.zan-icon-contact:before { content: '\e81a'; } /* '' */ +.zan-icon-wechat:before { content: '\e81b'; } /* '' */ +.zan-icon-alipay:before { content: '\e81c'; } /* '' */ +.zan-icon-password-view:before { content: '\e81d'; } /* '' */ +.zan-icon-password-not-view:before { content: '\e81e'; } /* '' */ +.zan-icon-wap-nav:before { content: '\e81f'; } /* '' */ +.zan-icon-wap-home:before { content: '\e820'; } /* '' */ +.zan-icon-ecard-pay:before { content: '\e821'; } /* '' */ +.zan-icon-balance-pay:before { content: '\e822'; } /* '' */ +.zan-icon-peer-pay:before { content: '\e823'; } /* '' */ +.zan-icon-credit-pay:before { content: '\e824'; } /* '' */ +.zan-icon-debit-pay:before { content: '\e825'; } /* '' */ +.zan-icon-other-pay:before { content: '\e826'; } /* '' */ +.zan-icon-cart:before { content: '\e827'; } /* '' */ +.zan-icon-browsing-history:before { content: '\e828'; } /* '' */ +.zan-icon-goods-collect:before { content: '\e829'; } /* '' */ +.zan-icon-shop-collect:before { content: '\e82a'; } /* '' */ +.zan-icon-receive-gift:before { content: '\e82b'; } /* '' */ +.zan-icon-send-gift:before { content: '\e82c'; } /* '' */ +.zan-icon-setting:before { content: '\e82d'; } /* '' */ +.zan-icon-points:before { content: '\e82e'; } /* '' */ +.zan-icon-coupon:before { content: '\e82f'; } /* '' */ +.zan-icon-free-postage:before { content: '\e830'; } /* '' */ +.zan-icon-discount:before { content: '\e831'; } /* '' */ +.zan-icon-birthday-privilege:before { content: '\e832'; } /* '' */ +.zan-icon-member-day-privilege:before { content: '\e833'; } /* '' */ +.zan-icon-balance-details:before { content: '\e834'; } /* '' */ +.zan-icon-cash-back-record:before { content: '\e835'; } /* '' */ +.zan-icon-points-mall:before { content: '\e836'; } /* '' */ +.zan-icon-exchange-record:before { content: '\e837'; } /* '' */ +.zan-icon-pending-payment:before { content: '\e838'; } /* '' */ +.zan-icon-pending-orders:before { content: '\e839'; } /* '' */ +.zan-icon-pending-deliver:before { content: '\e83a'; } /* '' */ +.zan-icon-pending-evaluate:before { content: '\e83b'; } /* '' */ +.zan-icon-gift-card-pay:before { content: '\e83c'; } /* '' */ +.zan-icon-cash-on-deliver:before { content: '\e83d'; } /* '' */ +.zan-icon-underway:before { content: '\e83e'; } /* '' */ +.zan-icon-point-gift:before { content: '\e83f'; } /* '' */ +.zan-icon-after-sale:before { content: '\e840'; } /* '' */ +.zan-icon-edit-data:before { content: '\e841'; } /* '' */ +.zan-icon-question:before { content: '\e842'; } /* '' */ +.zan-icon-delete:before { content: '\e843'; } /* '' */ +.zan-icon-records:before { content: '\e844'; } /* '' */ +.zan-icon-description:before { content: '\e845'; } /* '' */ +.zan-icon-card:before { content: '\e846'; } /* '' */ +.zan-icon-gift-card:before { content: '\e847'; } /* '' */ +.zan-icon-coupon:before { content: '\e848'; } /* '' */ +.zan-icon-clock:before { content: '\e849'; } /* '' */ +.zan-icon-gold-coin:before { content: '\e84a'; } /* '' */ +.zan-icon-completed:before { content: '\e84b'; } /* '' */ +.zan-icon-value-card:before { content: '\e84c'; } /* '' */ +.zan-icon-certificate:before { content: '\e84d'; } /* '' */ +.zan-icon-tosend:before { content: '\e84e'; } /* '' */ +.zan-icon-sign:before { content: '\e84f'; } /* '' */ +.zan-icon-home:before { content: '\e850'; } /* '' */ +.zan-icon-phone:before { content: '\e851'; } /* '' */ \ No newline at end of file diff --git a/packages/index.js b/packages/index.js new file mode 100644 index 00000000..48cf5846 --- /dev/null +++ b/packages/index.js @@ -0,0 +1,8 @@ +exports.CheckLabel = require('./select/index'); +exports.Field = require('./field/index'); +exports.NoticeBar = require('./noticebar/index'); +exports.Quantity = require('./quantity/index'); +exports.Switch = require('./switch/index'); +exports.Tab = require('./tab/index'); +exports.Toast = require('./toast/index'); +exports.TopTips = require('./toptips/index'); diff --git a/packages/index.wxss b/packages/index.wxss new file mode 100644 index 00000000..c5b70894 --- /dev/null +++ b/packages/index.wxss @@ -0,0 +1,22 @@ +@import "badge/index.wxss"; +@import "btn/index.wxss"; +@import "capsule/index.wxss"; +@import "card/index.wxss"; +@import "cell/index.wxss"; +@import "color/index.wxss"; +@import "dialog/index.wxss"; +@import "field/index.wxss"; +@import "helper/index.wxss"; +@import "icon/index.wxss"; +@import "label/index.wxss"; +@import "loadmore/index.wxss"; +@import "noticebar/index.wxss"; +@import "panel/index.wxss"; +@import "popup/index.wxss"; +@import "quantity/index.wxss"; +@import "select/index.wxss"; +@import "steps/index.wxss"; +@import "switch/index.wxss"; +@import "tab/index.wxss"; +@import "toast/index.wxss"; +@import "toptips/index.wxss"; diff --git a/packages/label/index.wxss b/packages/label/index.wxss new file mode 100644 index 00000000..7c02728a --- /dev/null +++ b/packages/label/index.wxss @@ -0,0 +1,34 @@ +.zan-label { + display: inline-block; + font-size: 12px; + height: 28px; + line-height: 28px; + color: #333; + border: 1rpx solid #999; + padding: 0px 10px; + border-radius: 2px; + margin-right: 10px; + box-sizing: border-box; + vertical-align: middle; + text-align: center; +} +.zan-label--primary { + color: #fff; + background: #f44; + border: 1rpx solid #f44; +} +.zan-label--disabled { + color: #cacaca; + background: #eee; + border: 1rpx solid #e5e5e5; +} +.zan-label--small { + font-size: 11px; + height: 16px; + line-height: 16px; + padding: 0px 3px; +} +.zan-label--plain.zan-label--primary { + color: #f44; + background: #fff; +} diff --git a/packages/loadmore/index.wxml b/packages/loadmore/index.wxml new file mode 100644 index 00000000..8c41cf40 --- /dev/null +++ b/packages/loadmore/index.wxml @@ -0,0 +1,24 @@ + diff --git a/packages/loadmore/index.wxss b/packages/loadmore/index.wxss new file mode 100644 index 00000000..538195eb --- /dev/null +++ b/packages/loadmore/index.wxss @@ -0,0 +1,70 @@ +.zan-loadmore { + position: relative; + width: 65%; + margin: 21px auto; + line-height: 20px; + font-size: 14px; + text-align: center; + vertical-align: middle; +} + +.zan-loading { + width:20px; + height:20px; + display: inline-block; + vertical-align: middle; + animation: weuiLoading 1s steps(12, end) infinite; + background: transparent url(data:image/svg+xml;base64,PHN2ZyBjbGFzcz0iciIgd2lkdGg9JzEyMHB4JyBoZWlnaHQ9JzEyMHB4JyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAxMDAgMTAwIj4KICAgIDxyZWN0IHg9IjAiIHk9IjAiIHdpZHRoPSIxMDAiIGhlaWdodD0iMTAwIiBmaWxsPSJub25lIiBjbGFzcz0iYmsiPjwvcmVjdD4KICAgIDxyZWN0IHg9JzQ2LjUnIHk9JzQwJyB3aWR0aD0nNycgaGVpZ2h0PScyMCcgcng9JzUnIHJ5PSc1JyBmaWxsPScjRTlFOUU5JwogICAgICAgICAgdHJhbnNmb3JtPSdyb3RhdGUoMCA1MCA1MCkgdHJhbnNsYXRlKDAgLTMwKSc+CiAgICA8L3JlY3Q+CiAgICA8cmVjdCB4PSc0Ni41JyB5PSc0MCcgd2lkdGg9JzcnIGhlaWdodD0nMjAnIHJ4PSc1JyByeT0nNScgZmlsbD0nIzk4OTY5NycKICAgICAgICAgIHRyYW5zZm9ybT0ncm90YXRlKDMwIDUwIDUwKSB0cmFuc2xhdGUoMCAtMzApJz4KICAgICAgICAgICAgICAgICByZXBlYXRDb3VudD0naW5kZWZpbml0ZScvPgogICAgPC9yZWN0PgogICAgPHJlY3QgeD0nNDYuNScgeT0nNDAnIHdpZHRoPSc3JyBoZWlnaHQ9JzIwJyByeD0nNScgcnk9JzUnIGZpbGw9JyM5Qjk5OUEnCiAgICAgICAgICB0cmFuc2Zvcm09J3JvdGF0ZSg2MCA1MCA1MCkgdHJhbnNsYXRlKDAgLTMwKSc+CiAgICAgICAgICAgICAgICAgcmVwZWF0Q291bnQ9J2luZGVmaW5pdGUnLz4KICAgIDwvcmVjdD4KICAgIDxyZWN0IHg9JzQ2LjUnIHk9JzQwJyB3aWR0aD0nNycgaGVpZ2h0PScyMCcgcng9JzUnIHJ5PSc1JyBmaWxsPScjQTNBMUEyJwogICAgICAgICAgdHJhbnNmb3JtPSdyb3RhdGUoOTAgNTAgNTApIHRyYW5zbGF0ZSgwIC0zMCknPgogICAgPC9yZWN0PgogICAgPHJlY3QgeD0nNDYuNScgeT0nNDAnIHdpZHRoPSc3JyBoZWlnaHQ9JzIwJyByeD0nNScgcnk9JzUnIGZpbGw9JyNBQkE5QUEnCiAgICAgICAgICB0cmFuc2Zvcm09J3JvdGF0ZSgxMjAgNTAgNTApIHRyYW5zbGF0ZSgwIC0zMCknPgogICAgPC9yZWN0PgogICAgPHJlY3QgeD0nNDYuNScgeT0nNDAnIHdpZHRoPSc3JyBoZWlnaHQ9JzIwJyByeD0nNScgcnk9JzUnIGZpbGw9JyNCMkIyQjInCiAgICAgICAgICB0cmFuc2Zvcm09J3JvdGF0ZSgxNTAgNTAgNTApIHRyYW5zbGF0ZSgwIC0zMCknPgogICAgPC9yZWN0PgogICAgPHJlY3QgeD0nNDYuNScgeT0nNDAnIHdpZHRoPSc3JyBoZWlnaHQ9JzIwJyByeD0nNScgcnk9JzUnIGZpbGw9JyNCQUI4QjknCiAgICAgICAgICB0cmFuc2Zvcm09J3JvdGF0ZSgxODAgNTAgNTApIHRyYW5zbGF0ZSgwIC0zMCknPgogICAgPC9yZWN0PgogICAgPHJlY3QgeD0nNDYuNScgeT0nNDAnIHdpZHRoPSc3JyBoZWlnaHQ9JzIwJyByeD0nNScgcnk9JzUnIGZpbGw9JyNDMkMwQzEnCiAgICAgICAgICB0cmFuc2Zvcm09J3JvdGF0ZSgyMTAgNTAgNTApIHRyYW5zbGF0ZSgwIC0zMCknPgogICAgPC9yZWN0PgogICAgPHJlY3QgeD0nNDYuNScgeT0nNDAnIHdpZHRoPSc3JyBoZWlnaHQ9JzIwJyByeD0nNScgcnk9JzUnIGZpbGw9JyNDQkNCQ0InCiAgICAgICAgICB0cmFuc2Zvcm09J3JvdGF0ZSgyNDAgNTAgNTApIHRyYW5zbGF0ZSgwIC0zMCknPgogICAgPC9yZWN0PgogICAgPHJlY3QgeD0nNDYuNScgeT0nNDAnIHdpZHRoPSc3JyBoZWlnaHQ9JzIwJyByeD0nNScgcnk9JzUnIGZpbGw9JyNEMkQyRDInCiAgICAgICAgICB0cmFuc2Zvcm09J3JvdGF0ZSgyNzAgNTAgNTApIHRyYW5zbGF0ZSgwIC0zMCknPgogICAgPC9yZWN0PgogICAgPHJlY3QgeD0nNDYuNScgeT0nNDAnIHdpZHRoPSc3JyBoZWlnaHQ9JzIwJyByeD0nNScgcnk9JzUnIGZpbGw9JyNEQURBREEnCiAgICAgICAgICB0cmFuc2Zvcm09J3JvdGF0ZSgzMDAgNTAgNTApIHRyYW5zbGF0ZSgwIC0zMCknPgogICAgPC9yZWN0PgogICAgPHJlY3QgeD0nNDYuNScgeT0nNDAnIHdpZHRoPSc3JyBoZWlnaHQ9JzIwJyByeD0nNScgcnk9JzUnIGZpbGw9JyNFMkUyRTInCiAgICAgICAgICB0cmFuc2Zvcm09J3JvdGF0ZSgzMzAgNTAgNTApIHRyYW5zbGF0ZSgwIC0zMCknPgogICAgPC9yZWN0Pgo8L3N2Zz4=) no-repeat; + -webkit-background-size: 100%; + background-size: 100%; +} + +.zan-loadmore .zan-loading { + margin-right: 4px; +} + +.zan-loadmore__tips { + display: inline-block; + vertical-align: middle; + height: 20px; + line-height: 20px; +} + +.zan-loadmore--nodata, +.zan-loadmore--nomore { + border-top: 1rpx solid #e5e5e5; + color: #999; +} + +.zan-loadmore--nodata { + margin-top: 120px; +} + +.zan-loadmore--nodata .zan-loadmore__tips { + position: relative; + top: -11px; + background: #f9f9f9; + padding: 0 6px; +} + +.zan-loadmore--nomore .zan-loadmore__tips { + position: relative; + top: -11px; + background: #f9f9f9; + padding: 0 6px; +} + +.zan-loadmore__dot { + position: absolute; + left: 50%; + top: 10px; + margin-left: -2px; + margin-top: -2px; + content: " "; + width: 4px; + height: 4px; + border-radius: 50%; + background-color: #E5E5E5; + display: inline-block; + vertical-align: middle; +} diff --git a/packages/noticebar/index.js b/packages/noticebar/index.js new file mode 100644 index 00000000..0904e8e4 --- /dev/null +++ b/packages/noticebar/index.js @@ -0,0 +1,55 @@ +var ZanNoticeBar = { + initZanNoticeBarScroll: function (componentId) { + this.zanNoticeBarNode = this.zanNoticeBarNode || {}; + this.zanNoticeBarNode[`${componentId}`] = { + width: undefined, + wrapWidth: undefined, + animation: null, + resetAnimation: null + }; + var currentComponent = this.zanNoticeBarNode[`${componentId}`]; + var _this = this; + wx.createSelectorQuery().select(`#${componentId}__content`).boundingClientRect(function (rect) { + if (rect.width) { + currentComponent.width = rect.width; + wx.createSelectorQuery().select(`#${componentId}__content-wrap`).boundingClientRect(function (rect) { + currentComponent.wrapWidth = rect.width; + if (currentComponent.wrapWidth < currentComponent.width) { + var mstime = currentComponent.width / 40 * 1000; + currentComponent.animation = wx.createAnimation({ + duration: mstime, + timingFunction: 'linear' + }); + currentComponent.resetAnimation = wx.createAnimation({ + duration: 0, + timingFunction: 'linear' + }); + _this.scrollZanNoticeBar(componentId, mstime); + } + }).exec(); + } else { + console.warn('页面缺少 noticebar 元素'); + } + }).exec(); + }, + scrollZanNoticeBar: function (componentId, mstime) { + var currentComponent = this.zanNoticeBarNode[`${componentId}`]; + var resetAnimationData = currentComponent.resetAnimation.translateX(currentComponent.wrapWidth).step(); + this.setData({ + [`${componentId}.animationData`]: resetAnimationData.export() + }); + var aninationData = currentComponent.animation.translateX(-mstime * 40 / 1000).step(); + var _this = this; + setTimeout(function () { + _this.setData({ + [`${componentId}.animationData`]: aninationData.export() + }); + }, 100); + + setTimeout(function () { + _this.scrollZanNoticeBar(componentId, mstime); + }, mstime); + } +}; + +module.exports = ZanNoticeBar; diff --git a/packages/noticebar/index.wxml b/packages/noticebar/index.wxml new file mode 100644 index 00000000..a3bc85e3 --- /dev/null +++ b/packages/noticebar/index.wxml @@ -0,0 +1,16 @@ + diff --git a/packages/noticebar/index.wxss b/packages/noticebar/index.wxss new file mode 100644 index 00000000..f6a94b91 --- /dev/null +++ b/packages/noticebar/index.wxss @@ -0,0 +1,7 @@ +.zan-noticebar { + color: #f60; + padding: 9px 10px; + font-size: 12px; + line-height: 1.5; + background-color: #fff7cc; +} diff --git a/packages/panel/index.wxss b/packages/panel/index.wxss new file mode 100644 index 00000000..02a85335 --- /dev/null +++ b/packages/panel/index.wxss @@ -0,0 +1,19 @@ +.zan-panel { + background: #fff; + border-top: 1rpx solid #e5e5e5; + border-bottom: 1rpx solid #e5e5e5; + margin-top: 10px; + overflow: hidden; +} + +.zan-panel-title { + font-size: 14px; + line-height: 1; + color: #999; + padding: 20px 15px 0 15px; +} + + +.zan-panel--without-margin-top { + margin-top: 0; +} diff --git a/packages/popup/index.wxss b/packages/popup/index.wxss new file mode 100644 index 00000000..98fdfcc2 --- /dev/null +++ b/packages/popup/index.wxss @@ -0,0 +1,31 @@ +.zan-popup { + position: fixed; + background-color: #fff; + width: 100%; + height: 100%; + top: 50%; + left: 50%; + transform: translate3d(-50%, -50%, 0); + transition: .2s ease-out; +} + +.zan-popup--top { + width: 100%; + top: 0; + right: auto; + bottom: auto; + left: 50%; + transform: translate3d(-50%, 0, 0); +} + +.zan-popup--right { + transform: translate3d(50%, -50%, 0); +} + +.zan-popup--left { + transform: translate3d(-150%, -50%, 0); +} + +.zan-popup--show { + transform: translate3d(-50%, -50%, 0); +} diff --git a/packages/quantity/index.js b/packages/quantity/index.js new file mode 100644 index 00000000..86aea36b --- /dev/null +++ b/packages/quantity/index.js @@ -0,0 +1,61 @@ +function handle(e, num) { + var dataset = e.currentTarget.dataset; + var componentId = dataset.componentId; + var disabled = dataset.disabled; + var quantity = +dataset.quantity; + + if (disabled) return null; + + callback.call(this, componentId, quantity + num); +} + +function callback(componentId, quantity) { + quantity = +quantity; + var e = { componentId, quantity }; + console.info('[zan:quantity:change]', e); + + if (this.handleZanQuantityChange) { + this.handleZanQuantityChange(e); + } else { + console.warn('页面缺少 handleZanQuantityChange 回调函数'); + } +} + +var Quantity = { + _handleZanQuantityMinus(e) { + handle.call(this, e, -1); + }, + + _handleZanQuantityPlus(e) { + handle.call(this, e, +1); + }, + + _handleZanQuantityBlur(e) { + var dataset = e.currentTarget.dataset; + var componentId = dataset.componentId; + var max = +dataset.max; + var min = +dataset.min; + var value = e.detail.value; + + if (!value) { + setTimeout(() => { + callback.call(this, componentId, min); + }, 16); + callback.call(this, componentId, value); + return '' + value; + } + + value = +value; + if (value > max) { + value = max; + } else if (value < min) { + value = min; + } + + callback.call(this, componentId, value); + + return '' + value; + } +}; + +module.exports = Quantity; diff --git a/packages/quantity/index.wxml b/packages/quantity/index.wxml new file mode 100644 index 00000000..cdfb225f --- /dev/null +++ b/packages/quantity/index.wxml @@ -0,0 +1,28 @@ + diff --git a/packages/quantity/index.wxss b/packages/quantity/index.wxss new file mode 100644 index 00000000..513de17e --- /dev/null +++ b/packages/quantity/index.wxss @@ -0,0 +1,46 @@ +.zan-quantity { + color: #666; +} +.zan-quantity view { + display: inline-block; + line-height: 20px; + padding: 5px 0; + text-align: center; + min-width: 40px; + box-sizing: border-box; + vertical-align: middle; + font-size: 12px; + border: 1rpx solid #999; +} +.zan-quantity .zan-quantity__minus { + border-right: none; + border-radius: 2px 0 0 2px; +} +.zan-quantity .zan-quantity__text { + border: 1rpx solid #999; + display: inline-block; + text-align: center; + vertical-align: middle; + height: 30px; + width: 40px; + font-size: 12px; + line-height: 30px; +} +.zan-quantity .zan-quantity__plus { + border-left: none; + border-radius: 0 2px 2px 0; +} +.zan-quantity .zan-quantity--disabled { + background: #f8f8f8; + color: #bbb; + border-color: #e8e8e8; +} +.zan-quantity--small view { + min-width: 36px; + line-height: 18px; +} +.zan-quantity--small .zan-quantity__text { + width: 36px; + line-height: 28px; + height: 28px; +} diff --git a/packages/select/index.js b/packages/select/index.js new file mode 100644 index 00000000..aef70111 --- /dev/null +++ b/packages/select/index.js @@ -0,0 +1,26 @@ +function handle(e) { + var dataset = e.currentTarget.dataset; + var componentId = dataset.componentId; + var value = e.detail.value; + + callback.call(this, componentId, value); +} + +function callback(componentId, value) { + var e = { componentId, value }; + console.info('[zan:Select:change]', e); + + if (this.handleZanSelectChange) { + this.handleZanSelectChange(e); + } else { + console.warn('页面缺少 handleZanSelectChange 回调函数'); + } +} + +var Select = { + _handleZanSelectChange(e) { + handle.call(this, e); + }, +}; + +module.exports = Select; diff --git a/packages/select/index.wxml b/packages/select/index.wxml new file mode 100644 index 00000000..5437bcfa --- /dev/null +++ b/packages/select/index.wxml @@ -0,0 +1,38 @@ + + + +function getColor(color) { + color = color || '#ff4444' + return color; +} + +module.exports = { + getColor: getColor, + getItemStyle: function(item, checkedValue, activeColor) { + var padding = item.padding * 10; + var style = 'padding-left: ' + padding + 'px;'; + + // 如果为选中状态，则高亮 + if (item.value === checkedValue) { + style += 'color: ' + getColor(activeColor); + } + + return style; + } +}; + diff --git a/packages/select/index.wxss b/packages/select/index.wxss new file mode 100644 index 00000000..0695dae7 --- /dev/null +++ b/packages/select/index.wxss @@ -0,0 +1,3 @@ +.zan-select__list .zan-select__radio{ + display: none; +} diff --git a/packages/steps/index.wxml b/packages/steps/index.wxml new file mode 100644 index 00000000..7e57b18b --- /dev/null +++ b/packages/steps/index.wxml @@ -0,0 +1,15 @@ + diff --git a/packages/steps/index.wxss b/packages/steps/index.wxss new file mode 100644 index 00000000..14532034 --- /dev/null +++ b/packages/steps/index.wxss @@ -0,0 +1,6 @@ +@import "wxss/step.wxss"; +@import "wxss/vstep.wxss"; + +.zan-steps { + position: relative; +} diff --git a/packages/steps/wxss/step.wxss b/packages/steps/wxss/step.wxss new file mode 100644 index 00000000..cdfe0a35 --- /dev/null +++ b/packages/steps/wxss/step.wxss @@ -0,0 +1,133 @@ +.zan-steps--steps.zan-steps--5 .zan-steps__step { + width: 25%; +} + +.zan-steps--steps.zan-steps--4 .zan-steps__step { + width: 33%; +} + +.zan-steps--steps.zan-steps--3 .zan-steps__step { + width: 50%; +} + +.zan-steps--steps .zan-steps__step { + position: relative; + float: left; + padding-bottom: 25px; + color: #b1b1b1; +} + +.zan-steps--steps .zan-steps__title { + transform: translateX(-50%); + font-size: 10px; + text-align: center; +} + +.zan-steps--steps .zan-steps__icons { + position: absolute; + top: 30px; + left: -10px; + padding: 0 8px; + background-color: #fff; + z-index: 10; +} + +.zan-steps--steps .zan-steps__circle { + display: block; + position: relative; + width: 5px; + height: 5px; + background-color: #e5e5e5; + border-radius: 50%; +} + +.zan-steps--steps .zan-steps__line { + position: absolute; + left: 0px; + top: 32px; + width: 100%; + height: 1px; + background-color: #e5e5e5; +} + + +/* 已完成的steps */ +.zan-steps--steps .zan-steps__step--done { + color: #333; +} + +.zan-steps--steps .zan-steps__step--done .zan-steps__line { + background-color: #06bf04; +} + +.zan-steps--steps .zan-steps__step--done .zan-steps__circle { + width: 5px; + height: 5px; + background-color: #09bb07; +} + +/* 正在进行中的steps */ +.zan-steps--steps .zan-steps__step--cur .zan-steps__icons { + top: 25px; + left: -14px; +} + +.zan-steps--steps .zan-steps__step--cur .zan-steps__circle { + width: 13px; + height: 13px; + background-image: url("https://b.yzcdn.cn/v2/image/wap/success_small@2x.png"); + background-size: 13px 13px; +} + +.zan-steps--steps .zan-steps__step--cur .zan-steps__line { + background-color: #e5e5e5; +} + +/* 各种不同位置的 */ +.zan-steps--steps .zan-steps__step--first-child .zan-steps__title { + margin-left: 0; + transform: none; + text-align: left; +} + +.zan-steps--steps .zan-steps__step--first-child .zan-steps__icons { + left: -7px; +} + +.zan-steps--steps .zan-steps__step--last-child { + position: absolute; + right: 0; + top: 0; + text-align: right; +} + +.zan-steps--steps .zan-steps__step--last-child .zan-steps__title { + transform: none; + text-align: right; +} + +.zan-steps--steps .zan-steps__step--last-child .zan-steps__icons { + left: auto; + right: -6px; +} + +.zan-steps--steps .zan-steps__step--last-child .zan-steps__line { + display: none; +} + +/* 有描述的step */ +.zan-steps--steps .zan-steps__step--db-title { + min-height: 29px; +} + +.zan-steps--steps .zan-steps__step--db-title .zan-steps__line { + top: 45px; +} + +.zan-steps--steps .zan-steps__step--db-title .zan-steps__icons { + top: 43px; +} + +.zan-steps--steps .zan-steps__step--db-title.zan-steps__step--cur .zan-steps__icons { + top: 39px; +} diff --git a/packages/steps/wxss/vstep.wxss b/packages/steps/wxss/vstep.wxss new file mode 100644 index 00000000..4dfa57f8 --- /dev/null +++ b/packages/steps/wxss/vstep.wxss @@ -0,0 +1,90 @@ +.zan-steps--vsteps { + color: #999; + font-size: 14px; +} + +.zan-steps--vsteps .zan-steps__step { + position: relative; + padding: 15px 0; +} + +.zan-steps--vsteps .zan-steps__step--done { + color: #44BB00; +} + +.zan-steps--vsteps .zan-steps__line { + position: absolute; + top: 0; + bottom: 0; + left: 7px; + width: 1px; + background-color: #e5e5e5; +} + +.zan-steps--vsteps .zan-steps__title { + display: inline-block; + line-height: 20px; + padding-left: 27px; +} + +.zan-steps--vsteps .zan-steps__title--desc { + padding-left: 3px; +} + +.zan-steps--vsteps .zan-steps__icons { + position: absolute; + left: 7px; + top: 50%; + transform: translate(-50%, -50%); + z-index: 2; + padding: 3px 0; + background-color: #fff; +} + +.zan-steps--vsteps .zan-steps__circle { + width: 5px; + height: 5px; + background-color: #cacaca; + border-radius: 10px; +} + +.zan-steps--vsteps .zan-steps__step--done .zan-steps__circle { + width: 5px; + height: 5px; + background-color: #09bb07; +} + +.zan-steps--vsteps .zan-steps__step--cur .zan-steps__circle { + width: 13px; + height: 13px; + background: transparent url("https://b.yzcdn.cn/v2/image/wap/success_small@2x.png"); + background-size: 13px 13px; + border-radius:0; +} + +.zan-steps--vsteps .zan-steps__icon--active { + width: 13px; + height: 13px; +} + +.zan-steps--vsteps .zan-steps__step--first-child .zan-steps__title::before { + content: ''; + position: absolute; + top: 0; + bottom: 50%; + left: 7px; + width: 1px; + background-color: #fff; + z-index: 1; +} + +.zan-steps--vsteps .zan-steps__step--last-child .zan-steps__title::after { + content: ''; + position: absolute; + top: 50%; + bottom: 0%; + left: 7px; + width: 1px; + background-color: #fff; + z-index: 1; +} diff --git a/packages/switch/index.js b/packages/switch/index.js new file mode 100644 index 00000000..c73c0cab --- /dev/null +++ b/packages/switch/index.js @@ -0,0 +1,25 @@ +var Switch = { + _handleZanSwitchChange(e) { + var dataset = e.currentTarget.dataset; + + var checked = !dataset.checked; + var loading = dataset.loading; + var disabled = dataset.disabled; + var componentId = dataset.componentId; + + if (loading || disabled) return; + + console.info('[zan:switch:change]', { checked, componentId }); + + if (this.handleZanSwitchChange) { + this.handleZanSwitchChange({ + checked, + componentId + }); + } else { + console.warn('页面缺少 handleZanSwitchChange 回调函数'); + } + } +}; + +module.exports = Switch; diff --git a/packages/switch/index.wxml b/packages/switch/index.wxml new file mode 100644 index 00000000..b99d2e3b --- /dev/null +++ b/packages/switch/index.wxml @@ -0,0 +1,15 @@ + diff --git a/packages/switch/index.wxss b/packages/switch/index.wxss new file mode 100644 index 00000000..796c9130 --- /dev/null +++ b/packages/switch/index.wxss @@ -0,0 +1,69 @@ +.zan-switch { + position: relative; + display: inline-block; + width: 52px; + height: 32px; + vertical-align: middle; + box-sizing: border-box; + border-radius: 16px; + background: #44DB5E; + border: 1px solid #44DB5E; +} +.zan-switch__circle { + position: absolute; + top: 0; + left: 0; + width: 30px; + height: 30px; + display: inline-block; + background: #fff; + border-radius: 15px; + box-sizing: border-box; + box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.1), 0 3px 1px 0 rgba(0, 0, 0, 0.05), 0 2px 2px 0 rgba(0, 0, 0, 0.1), 0 3px 3px 0 rgba(0, 0, 0, 0.05); + transition: transform 0.35s cubic-bezier(0.45, 1, 0.4, 1); + z-index: 2; +} +.zan-switch__bg { + position: absolute; + top: -1px; + left: -1px; + width: 52px; + height: 32px; + background: #fff; + border-radius: 26px; + display: inline-block; + border: 1px solid #e5e5e5; + box-sizing: border-box; + transition: transform 0.35s cubic-bezier(0.45, 1, 0.4, 1); + transform: scale(0); + transform-origin: 36px 16px; +} +.zan-switch--on .zan-switch__circle { + transform: translateX(20px); +} +.zan-switch--off .zan-switch__bg { + transform: scale(1); +} +.zan-swtich--disabled { + opacity: 0.4; +} +.zan-switch__loading { + position: absolute; + left: 7px; + top: 7px; + width: 16px; + height: 16px; + background: url(https://img.yzcdn.cn/public_files/2017/02/24/9acec77d91106cd15b8107c4633d9155.png) no-repeat; + background-size: 16px 16px; + animation: zan-switch-loading 0.8s infinite linear; +} + +@keyframes zan-switch-loading { + from { + transform: rotate(0); + } + to { + transform: rotate(360deg); + } +} + diff --git a/packages/tab/index.js b/packages/tab/index.js new file mode 100644 index 00000000..98be2947 --- /dev/null +++ b/packages/tab/index.js @@ -0,0 +1,17 @@ +var Tab = { + _handleZanTabChange(e) { + var dataset = e.currentTarget.dataset; + var componentId = dataset.componentId; + var selectedId = dataset.itemId; + var data = { componentId, selectedId }; + + console.info('[zan:tab:change]', data); + if (this.handleZanTabChange) { + this.handleZanTabChange(data); + } else { + console.warn('页面缺少 handleZanTabChange 回调函数'); + } + } +}; + +module.exports = Tab; diff --git a/packages/tab/index.wxml b/packages/tab/index.wxml new file mode 100644 index 00000000..628d1a60 --- /dev/null +++ b/packages/tab/index.wxml @@ -0,0 +1,31 @@ + + + diff --git a/packages/tab/index.wxss b/packages/tab/index.wxss new file mode 100644 index 00000000..5b1e18e1 --- /dev/null +++ b/packages/tab/index.wxss @@ -0,0 +1,48 @@ +.zan-tab { + height: 45px; +} +.zan-tab__bd { + width: 750rpx; + display: flex; + flex-direction: row; + border-bottom: 1rpx solid #e5e5e5; + background: #fff; +} +.zan-tab__bd--fixed { + position: fixed; + top: 0; + z-index: 2; +} +.zan-tab__item { + flex: 1; + display: inline-block; + text-align: center; + box-sizing: border-box; +} + +.zan-tab__title { + font-size: 14px; + display: inline-block; + color: #666; + height: 44px; + line-height: 44px; + box-sizing: border-box; + margin: 0 10px; + word-break: keep-all; +} + +.zan-tab__item--selected .zan-tab__title { + color: #f44; + border-bottom: 2px solid #f44; +} + +.zan-tab__bd--scroll { + display: block; + white-space: nowrap; +} +.zan-tab__bd--scroll .zan-tab__item { + min-width: 80px; +} +.zan-tab__bd--scroll .zan-tab__text { + margin: 0 20px; +} diff --git a/packages/toast/index.js b/packages/toast/index.js new file mode 100644 index 00000000..57b1c9fe --- /dev/null +++ b/packages/toast/index.js @@ -0,0 +1,32 @@ +module.exports = { + showZanToast(title, timeout) { + var zanToast = this.data.zanToast || {}; + clearTimeout(zanToast.timer); + + // 弹层设置~ + zanToast = { + show: true, + title + }; + this.setData({ + zanToast + }); + + var timer = setTimeout(() => { + this.clearZanToast(); + }, timeout || 3000); + + this.setData({ + 'zanToast.timer': timer + }); + }, + + clearZanToast() { + var zanToast = this.data.zanToast || {}; + clearTimeout(zanToast.timer); + + this.setData({ + 'zanToast.show': false + }); + } +}; diff --git a/packages/toast/index.wxml b/packages/toast/index.wxml new file mode 100644 index 00000000..ccf0e8d0 --- /dev/null +++ b/packages/toast/index.wxml @@ -0,0 +1,3 @@ + diff --git a/packages/toast/index.wxss b/packages/toast/index.wxss new file mode 100644 index 00000000..a3bc3ceb --- /dev/null +++ b/packages/toast/index.wxss @@ -0,0 +1,17 @@ +.zan-toast { + position: fixed; + top: 35%; + left: 20%; + transform: translateZ(0) translateY(-100%); + background: rgba(0, 0, 0, 0.7); + color: #fff; + font-size: 14px; + width: 60%; + line-height: 1.5em; + margin: 0 auto; + box-sizing: border-box; + padding: 10px; + text-align: center; + border-radius: 4px; + z-index: 100; +} diff --git a/packages/toptips/index.js b/packages/toptips/index.js new file mode 100644 index 00000000..af5104ea --- /dev/null +++ b/packages/toptips/index.js @@ -0,0 +1,39 @@ +module.exports = { + showZanTopTips(content = '', options = {}) { + let zanTopTips = this.data.zanTopTips || {}; + // 如果已经有一个计时器在了，就清理掉先 + if (zanTopTips.timer) { + clearTimeout(zanTopTips.timer); + zanTopTips.timer = undefined; + } + + if (typeof options === 'number') { + options = { + duration: options + }; + } + + // options参数默认参数扩展 + options = Object.assign({ + duration: 3000 + }, options); + + // 设置定时器，定时关闭topTips + let timer = setTimeout(() => { + this.setData({ + 'zanTopTips.show': false, + 'zanTopTips.timer': undefined + }); + }, options.duration); + + // 展示出topTips + this.setData({ + zanTopTips: { + show: true, + content, + options, + timer + } + }); + } +}; diff --git a/packages/toptips/index.wxml b/packages/toptips/index.wxml new file mode 100644 index 00000000..fe089460 --- /dev/null +++ b/packages/toptips/index.wxml @@ -0,0 +1,3 @@ + diff --git a/packages/toptips/index.wxss b/packages/toptips/index.wxss new file mode 100644 index 00000000..07c9a2fb --- /dev/null +++ b/packages/toptips/index.wxss @@ -0,0 +1,22 @@ +.zan-toptips { + display: block; + position: fixed; + -webkit-transform: translateZ(0) translateY(-100%); + width: 100%; + /* 至少有一行的高度，保证第一次动画显示正常 */ + min-height: 32px; + top: 0; + line-height: 2.3; + font-size: 14px; + text-align: center; + color: #FFF; + background-color: #E64340; + z-index: 110; + + /* 动画部分 */ + transition: all 0.4s ease; +} + +.zan-toptips--show { + -webkit-transform: translateZ(0) translateY(0); +} diff --git a/postcss.config.js b/postcss.config.js new file mode 100644 index 00000000..1290e52f --- /dev/null +++ b/postcss.config.js @@ -0,0 +1,13 @@ +const postcssEasyImport = require('postcss-easy-import'); +const precss = require('precss'); +const postcssCalc = require('postcss-calc'); + +module.exports = { + plugins: [ + postcssEasyImport({ + extensions: ['wxss', 'css'] + }), + precss(), + postcssCalc() + ] +};