mirror of
https://gitee.com/vant-contrib/vant-weapp.git
synced 2025-04-06 03:58:05 +08:00
zui改名为zanui-weapp (#6)
This commit is contained in:
Nino
GitHub
parent
5a6e886240
commit
cc11e6dea4
README.mdapp.jsonbower.json
dist
badge
btn
card
cell
color
dialog
form
helper
icon
label
loadmore
panel
quantity
steps
tab
toast
toptips
example
badge
btn
card
cell
dashboard
dialog
form
helper
icon
label
loadmore
panel
quantity
steps
tab
toast
toptips
18
README.md
18
README.md
@ -3,19 +3,19 @@
|
||||
</p>
|
||||
|
||||
|
||||
ZUI 为微信小程序量身设计
|
||||
ZanUI Weapp是有赞移动端UI规范ZanUI的小程序现实版本。
|
||||
====
|
||||
|
||||
## 概述
|
||||
[ZUI] 是一套用于微信小程序开发的基础UI组件库，由有赞官方提供，结合了微信的视觉规范，为用户提供更加统一的使用感知。包含 `btn`、`card`、`cell`、`icon`、`tab` 等各式元素
|
||||
[ZanUI Weapp] 是一套用于微信小程序开发的基础UI组件库，由有赞官方提供，结合了微信的视觉规范，为用户提供更加统一的使用感知。包含 `btn`、`card`、`cell`、`icon`、`tab` 等各式元素
|
||||
|
||||
## 例子
|
||||
``` bash
|
||||
git clone https://github.com/youzan/zui.git
|
||||
cd zui
|
||||
git clone https://github.com/youzan/zanui-weapp.git
|
||||
cd zan
|
||||
```
|
||||
|
||||
将 [ZUI] 目录放入 微信Web开发者工具 中，可以预览各种组件的 Demo 和使用方法
|
||||
将 [ZanUI Weapp] 目录放入 微信Web开发者工具 中，可以预览各种组件的 Demo 和使用方法
|
||||
|
||||
## 协议
|
||||
[MIT]
|
||||
@ -24,9 +24,9 @@ cd zui
|
||||
|
||||
## 贡献
|
||||
|
||||
如果你有好的意见或建议，欢迎给我们提 [issue] 或 [PR]，为提升 [ZUI] 贡献力量
|
||||
如果你有好的意见或建议，欢迎给我们提 [issue] 或 [PR]，为提升 [ZanUI Weapp] 贡献力量
|
||||
|
||||
[issue]: https://github.com/youzan/zui/issues/new
|
||||
[PR]: https://github.com/youzan/zui/compare
|
||||
[ZUI]: https://github.com/youzan/zui
|
||||
[issue]: https://github.com/youzan/zanui-weapp/issues/new
|
||||
[PR]: https://github.com/youzan/zanui-weapp/compare
|
||||
[ZanUI Weapp]: https://github.com/youzan/zanui-weapp
|
||||
[MIT]: http://opensource.org/licenses/MIT
|
||||
|
||||
2
app.json
2
app.json
@ -20,7 +20,7 @@
|
||||
],
|
||||
"window":{
|
||||
"navigationBarBackgroundColor": "#FAFAFA",
|
||||
"navigationBarTitleText": "ZUI",
|
||||
"navigationBarTitleText": "ZanUI",
|
||||
"navigationBarTextStyle":"black",
|
||||
"backgroundTextStyle":"dark",
|
||||
"backgroundColor": "#f9f9f9"
|
||||
|
||||
@ -1,12 +1,12 @@
|
||||
{
|
||||
"name": "zui",
|
||||
"name": "zanui-weapp",
|
||||
"authors": [
|
||||
"Nino <nino@youzan.com>",
|
||||
"Nino <ninofocus@gmail.com>",
|
||||
"Pangxie <pangxie@youzan.com>"
|
||||
],
|
||||
"directory": "zui",
|
||||
"directory": "zanui-weapp",
|
||||
"description": "A UI Library for Weapp",
|
||||
"main": "zui",
|
||||
"main": "zan",
|
||||
"license": "MIT",
|
||||
"homepage": "",
|
||||
"ignore": [
|
||||
|
||||
4
dist/badge/index.wxss
vendored
4
dist/badge/index.wxss
vendored
@ -1,7 +1,7 @@
|
||||
.zui-badge {
|
||||
.zan-badge {
|
||||
position: relative;
|
||||
}
|
||||
.zui-badge__count {
|
||||
.zan-badge__count {
|
||||
position: absolute;
|
||||
top: -8px;
|
||||
right: 0px;
|
||||
|
||||
40
dist/btn/index.wxss
vendored
40
dist/btn/index.wxss
vendored
@ -1,4 +1,4 @@
|
||||
.zui-btn {
|
||||
.zan-btn {
|
||||
position: relative;
|
||||
color: #333;
|
||||
background-color: #fff;
|
||||
@ -15,34 +15,34 @@
|
||||
text-align: center;
|
||||
vertical-align: middle;
|
||||
}
|
||||
.zui-btn::after {
|
||||
.zan-btn::after {
|
||||
display: none;
|
||||
}
|
||||
.zui-btns {
|
||||
.zan-btns {
|
||||
margin: 15px;
|
||||
}
|
||||
|
||||
/* type */
|
||||
.zui-btn--primary {
|
||||
.zan-btn--primary {
|
||||
color: #fff;
|
||||
background-color: #4b0;
|
||||
border-color: #0a0;
|
||||
}
|
||||
|
||||
.zui-btn--warn {
|
||||
.zan-btn--warn {
|
||||
color: #fff;
|
||||
background-color: #f85;
|
||||
border-color: #f85;
|
||||
}
|
||||
|
||||
.zui-btn--danger {
|
||||
.zan-btn--danger {
|
||||
color: #fff;
|
||||
background-color: #f44;
|
||||
border-color: #e33;
|
||||
}
|
||||
|
||||
/* size */
|
||||
.zui-btn--small {
|
||||
.zan-btn--small {
|
||||
display: inline-block;
|
||||
height: 30px;
|
||||
line-height: 30px;
|
||||
@ -50,7 +50,7 @@
|
||||
margin-right: 5px;
|
||||
margin-bottom: 0;
|
||||
}
|
||||
.zui-btn--mini {
|
||||
.zan-btn--mini {
|
||||
display: inline-block;
|
||||
line-height: 21px;
|
||||
height: 22px;
|
||||
@ -60,7 +60,7 @@
|
||||
padding-left: 5px;
|
||||
padding-right: 5px;
|
||||
}
|
||||
.zui-btn--large {
|
||||
.zan-btn--large {
|
||||
border-radius: 0;
|
||||
margin-bottom: 0;
|
||||
border: none;
|
||||
@ -69,16 +69,16 @@
|
||||
}
|
||||
|
||||
/* plain */
|
||||
.zui-btn--plain.zui-btn {
|
||||
.zan-btn--plain.zan-btn {
|
||||
background-color: transparent;
|
||||
}
|
||||
.zui-btn--plain.zui-btn--primary {
|
||||
.zan-btn--plain.zan-btn--primary {
|
||||
color: #06BF04;
|
||||
}
|
||||
.zui-btn--plain.zui-btn--warn {
|
||||
.zan-btn--plain.zan-btn--warn {
|
||||
color: #FF6600;
|
||||
}
|
||||
.zui-btn--plain.zui-btn--danger {
|
||||
.zan-btn--plain.zan-btn--danger {
|
||||
color: #FF4444;
|
||||
}
|
||||
|
||||
@ -88,11 +88,11 @@
|
||||
}
|
||||
|
||||
/* loading */
|
||||
.zui-btn--loading {
|
||||
.zan-btn--loading {
|
||||
color: transparent;
|
||||
opacity: 1;
|
||||
}
|
||||
.zui-btn--loading::before {
|
||||
.zan-btn--loading::before {
|
||||
position: absolute;
|
||||
left: 50%;
|
||||
top: 50%;
|
||||
@ -108,9 +108,9 @@
|
||||
animation: btn-spin 0.6s linear;
|
||||
animation-iteration-count: infinite;
|
||||
}
|
||||
.zui-btn--primary.zui-btn--loading::before,
|
||||
.zui-btn--warn.zui-btn--loading::before,
|
||||
.zui-btn--danger.zui-btn--loading::before {
|
||||
.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);
|
||||
}
|
||||
|
||||
@ -124,7 +124,7 @@
|
||||
}
|
||||
|
||||
/* disabled */
|
||||
.zui-btn.zui-btn--disabled {
|
||||
.zan-btn.zan-btn--disabled {
|
||||
/* 防止样式被 button[disabled] 的规则覆盖，所以使用了important */
|
||||
color: #999 ! important;
|
||||
background: #f8f8f8 ! important;
|
||||
@ -134,7 +134,7 @@
|
||||
}
|
||||
|
||||
/* ::last-child */
|
||||
.zui-btn--last-child {
|
||||
.zan-btn--last-child {
|
||||
margin-bottom: 0;
|
||||
margin-right: 0;
|
||||
}
|
||||
|
||||
14
dist/card/index.wxss
vendored
14
dist/card/index.wxss
vendored
@ -1,4 +1,4 @@
|
||||
.zui-card {
|
||||
.zan-card {
|
||||
margin-left: 0px;
|
||||
width: auto;
|
||||
padding: 5px 15px;
|
||||
@ -7,7 +7,7 @@
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
.zui-card__thumb {
|
||||
.zan-card__thumb {
|
||||
width: 90px;
|
||||
height: 90px;
|
||||
float: left;
|
||||
@ -18,7 +18,7 @@
|
||||
background-size: cover;
|
||||
}
|
||||
|
||||
.zui-card__img {
|
||||
.zan-card__img {
|
||||
position: absolute;
|
||||
margin: auto;
|
||||
top: 0;
|
||||
@ -31,24 +31,24 @@
|
||||
max-height: 100%;
|
||||
}
|
||||
|
||||
.zui-card__detail {
|
||||
.zan-card__detail {
|
||||
margin-left: 100px;
|
||||
width: auto;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.zui-card__detail-row {
|
||||
.zan-card__detail-row {
|
||||
overflow: hidden;
|
||||
line-height: 20px;
|
||||
min-height: 20px;
|
||||
margin-bottom: 3px;
|
||||
}
|
||||
|
||||
.zui-card__right-col {
|
||||
.zan-card__right-col {
|
||||
float: right;
|
||||
}
|
||||
|
||||
.zui-card__left-col {
|
||||
.zan-card__left-col {
|
||||
margin-right: 80px;
|
||||
}
|
||||
|
||||
|
||||
14
dist/cell/index.wxss
vendored
14
dist/cell/index.wxss
vendored
@ -1,4 +1,4 @@
|
||||
.zui-cell {
|
||||
.zan-cell {
|
||||
position: relative;
|
||||
padding: 12px 15px;
|
||||
display: flex;
|
||||
@ -7,7 +7,7 @@
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
.zui-cell::after {
|
||||
.zan-cell::after {
|
||||
position: absolute;
|
||||
left: 15px;
|
||||
right: 0;
|
||||
@ -16,24 +16,24 @@
|
||||
background: #e5e5e5;
|
||||
content: ' ';
|
||||
}
|
||||
.zui-cell__bd {
|
||||
.zan-cell__bd {
|
||||
flex: 1;
|
||||
}
|
||||
.zui-cell__ft {
|
||||
.zan-cell__ft {
|
||||
position: relative;
|
||||
text-align: right;
|
||||
color: #666;
|
||||
}
|
||||
|
||||
.zui-cell--last-child::after {
|
||||
.zan-cell--last-child::after {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.zui-cell--access .zui-cell__ft {
|
||||
.zan-cell--access .zan-cell__ft {
|
||||
padding-right: 13px;
|
||||
}
|
||||
|
||||
.zui-cell--access .zui-cell__ft::after {
|
||||
.zan-cell--access .zan-cell__ft::after {
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
right: 2px;
|
||||
|
||||
14
dist/color/index.wxss
vendored
14
dist/color/index.wxss
vendored
@ -1,27 +1,27 @@
|
||||
.zui-c-red {
|
||||
.zan-c-red {
|
||||
color: #f44 !important;
|
||||
}
|
||||
|
||||
.zui-c-gray {
|
||||
.zan-c-gray {
|
||||
color: #c9c9c9 !important;
|
||||
}
|
||||
|
||||
.zui-c-gray-dark {
|
||||
.zan-c-gray-dark {
|
||||
color: #999 !important;
|
||||
}
|
||||
|
||||
.zui-c-gray-darker {
|
||||
.zan-c-gray-darker {
|
||||
color: #666 !important;
|
||||
}
|
||||
|
||||
.zui-c-black {
|
||||
.zan-c-black {
|
||||
color: #333 !important;
|
||||
}
|
||||
|
||||
.zui-c-blue {
|
||||
.zan-c-blue {
|
||||
color: #3283fa !important;
|
||||
}
|
||||
|
||||
.zui-c-green {
|
||||
.zan-c-green {
|
||||
color: #44BB00 !important;
|
||||
}
|
||||
|
||||
8
dist/dialog/index.wxss
vendored
8
dist/dialog/index.wxss
vendored
@ -1,4 +1,4 @@
|
||||
.zui-dialog__mask {
|
||||
.zan-dialog__mask {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
@ -8,7 +8,7 @@
|
||||
background: rgba(0, 0, 0, 0.7);
|
||||
display: none;
|
||||
}
|
||||
.zui-dialog__container {
|
||||
.zan-dialog__container {
|
||||
position: fixed;
|
||||
bottom: 0;
|
||||
width: 750rpx;
|
||||
@ -17,10 +17,10 @@
|
||||
transition: all 0.4s ease;
|
||||
z-index: 11;
|
||||
}
|
||||
.zui-dialog--show .zui-dialog__container {
|
||||
.zan-dialog--show .zan-dialog__container {
|
||||
transform: translateY(0);
|
||||
}
|
||||
.zui-dialog--show .zui-dialog__mask {
|
||||
.zan-dialog--show .zan-dialog__mask {
|
||||
display: block;
|
||||
}
|
||||
|
||||
|
||||
16
dist/form/index.wxss
vendored
16
dist/form/index.wxss
vendored
@ -1,38 +1,38 @@
|
||||
.zui-form {
|
||||
.zan-form {
|
||||
background-color: #fff;
|
||||
border-top: 1rpx solid #e5e5e5;
|
||||
border-bottom: 1rpx solid #e5e5e5;
|
||||
}
|
||||
|
||||
.zui-form__item {
|
||||
.zan-form__item {
|
||||
line-height: 26px;
|
||||
}
|
||||
|
||||
.zui-form__title {
|
||||
.zan-form__title {
|
||||
float: left;
|
||||
width: 80px;
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
.zui-form__title--top {
|
||||
.zan-form__title--top {
|
||||
align-self: flex-start;
|
||||
}
|
||||
|
||||
.zui-form__input, .zui-form__textarea {
|
||||
.zan-form__input, .zan-form__textarea {
|
||||
min-height: 26px;
|
||||
}
|
||||
|
||||
.zui-form__input input {
|
||||
.zan-form__input input {
|
||||
min-height: 26px;
|
||||
}
|
||||
|
||||
.zui-form__textarea {
|
||||
.zan-form__textarea {
|
||||
display: -webkit-flex;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.zui-form__textarea textarea {
|
||||
.zan-form__textarea textarea {
|
||||
width: auto;
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
44
dist/helper/index.wxss
vendored
44
dist/helper/index.wxss
vendored
@ -1,57 +1,57 @@
|
||||
.zui-pull-left {
|
||||
.zan-pull-left {
|
||||
float: left;
|
||||
}
|
||||
|
||||
.zui-pull-right {
|
||||
.zan-pull-right {
|
||||
float: right;
|
||||
}
|
||||
|
||||
.zui-center {
|
||||
.zan-center {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.zui-right {
|
||||
.zan-right {
|
||||
text-align: right;
|
||||
}
|
||||
|
||||
.zui-text-deleted {
|
||||
.zan-text-deleted {
|
||||
text-decoration: line-through;
|
||||
}
|
||||
.zui-font-8 {
|
||||
.zan-font-8 {
|
||||
font-size: 8px;
|
||||
}
|
||||
.zui-font-10 {
|
||||
.zan-font-10 {
|
||||
font-size: 10px;
|
||||
}
|
||||
.zui-font-12 {
|
||||
.zan-font-12 {
|
||||
font-size: 12px;
|
||||
}
|
||||
.zui-font-14 {
|
||||
.zan-font-14 {
|
||||
font-size: 14px;
|
||||
}
|
||||
.zui-font-16 {
|
||||
.zan-font-16 {
|
||||
font-size: 16px;
|
||||
}
|
||||
.zui-font-18 {
|
||||
.zan-font-18 {
|
||||
font-size: 18px;
|
||||
}
|
||||
.zui-font-20 {
|
||||
.zan-font-20 {
|
||||
font-size: 20px;
|
||||
}
|
||||
.zui-font-22 {
|
||||
.zan-font-22 {
|
||||
font-size: 22px;
|
||||
}
|
||||
.zui-font-24 {
|
||||
.zan-font-24 {
|
||||
font-size: 22px;
|
||||
}
|
||||
.zui-font-30 {
|
||||
.zan-font-30 {
|
||||
font-size: 30px;
|
||||
}
|
||||
.zui-font-bold {
|
||||
.zan-font-bold {
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.zui-arrow {
|
||||
.zan-arrow {
|
||||
position: absolute;
|
||||
right: 15px;
|
||||
top: 50%;
|
||||
@ -64,14 +64,14 @@
|
||||
transform: translateY(-50%) matrix(0.71, 0.71, -0.71, 0.71, 0, 0);
|
||||
}
|
||||
|
||||
.zui-ellipsis {
|
||||
.zan-ellipsis {
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
word-wrap: normal;
|
||||
}
|
||||
|
||||
.zui-ellipsis--l2 {
|
||||
.zan-ellipsis--l2 {
|
||||
max-height: 40px;
|
||||
line-height: 20px;
|
||||
overflow: hidden;
|
||||
@ -81,7 +81,7 @@
|
||||
-webkit-box-orient: vertical;
|
||||
}
|
||||
|
||||
.zui-ellipsis--l3 {
|
||||
.zan-ellipsis--l3 {
|
||||
max-height: 60px;
|
||||
line-height: 20px;
|
||||
overflow: hidden;
|
||||
@ -91,10 +91,10 @@
|
||||
-webkit-box-orient: vertical;
|
||||
}
|
||||
|
||||
.zui-clearfix {
|
||||
.zan-clearfix {
|
||||
zoom: 1;
|
||||
}
|
||||
.zui-clearfix::after {
|
||||
.zan-clearfix::after {
|
||||
content: '';
|
||||
display: table;
|
||||
clear: both;
|
||||
|
||||
38
dist/icon/index.wxss
vendored
38
dist/icon/index.wxss
vendored
@ -9,10 +9,10 @@
|
||||
url('https://b.yzcdn.cn/zui/font/zuiicon-b37948cf5d.ttf') format('truetype')
|
||||
}
|
||||
|
||||
.zui-icon {
|
||||
.zan-icon {
|
||||
display: inline-block;
|
||||
}
|
||||
.zui-icon::before {
|
||||
.zan-icon::before {
|
||||
font-family: "zuiicon" !important;
|
||||
font-style: normal;
|
||||
font-weight: normal;
|
||||
@ -47,20 +47,20 @@
|
||||
/* DO NOT EDIT! Generated by fount */
|
||||
|
||||
|
||||
.zui-icon-album:before { content: '\e800'; } /* '' */
|
||||
.zui-icon-arrow:before { content: '\e801'; } /* '' */
|
||||
.zui-icon-camera:before { content: '\e802'; } /* '' */
|
||||
.zui-icon-certificate:before { content: '\e803'; } /* '' */
|
||||
.zui-icon-check:before { content: '\e804'; } /* '' */
|
||||
.zui-icon-checked:before { content: '\e805'; } /* '' */
|
||||
.zui-icon-close:before { content: '\e806'; } /* '' */
|
||||
.zui-icon-gift:before { content: '\e807'; } /* '' */
|
||||
.zui-icon-home:before { content: '\e808'; } /* '' */
|
||||
.zui-icon-location:before { content: '\e809'; } /* '' */
|
||||
.zui-icon-message:before { content: '\e80a'; } /* '' */
|
||||
.zui-icon-send:before { content: '\e80b'; } /* '' */
|
||||
.zui-icon-shopping-cart:before { content: '\e80c'; } /* '' */
|
||||
.zui-icon-sign:before { content: '\e80d'; } /* '' */
|
||||
.zui-icon-store:before { content: '\e80e'; } /* '' */
|
||||
.zui-icon-topay:before { content: '\e80f'; } /* '' */
|
||||
.zui-icon-tosend:before { content: '\e810'; } /* '' */
|
||||
.zan-icon-album:before { content: '\e800'; } /* '' */
|
||||
.zan-icon-arrow:before { content: '\e801'; } /* '' */
|
||||
.zan-icon-camera:before { content: '\e802'; } /* '' */
|
||||
.zan-icon-certificate:before { content: '\e803'; } /* '' */
|
||||
.zan-icon-check:before { content: '\e804'; } /* '' */
|
||||
.zan-icon-checked:before { content: '\e805'; } /* '' */
|
||||
.zan-icon-close:before { content: '\e806'; } /* '' */
|
||||
.zan-icon-gift:before { content: '\e807'; } /* '' */
|
||||
.zan-icon-home:before { content: '\e808'; } /* '' */
|
||||
.zan-icon-location:before { content: '\e809'; } /* '' */
|
||||
.zan-icon-message:before { content: '\e80a'; } /* '' */
|
||||
.zan-icon-send:before { content: '\e80b'; } /* '' */
|
||||
.zan-icon-shopping-cart:before { content: '\e80c'; } /* '' */
|
||||
.zan-icon-sign:before { content: '\e80d'; } /* '' */
|
||||
.zan-icon-store:before { content: '\e80e'; } /* '' */
|
||||
.zan-icon-topay:before { content: '\e80f'; } /* '' */
|
||||
.zan-icon-tosend:before { content: '\e810'; } /* '' */
|
||||
|
||||
10
dist/label/index.wxss
vendored
10
dist/label/index.wxss
vendored
@ -1,4 +1,4 @@
|
||||
.zui-label {
|
||||
.zan-label {
|
||||
display: inline-block;
|
||||
font-size: 12px;
|
||||
height: 28px;
|
||||
@ -12,23 +12,23 @@
|
||||
vertical-align: middle;
|
||||
text-align: center;
|
||||
}
|
||||
.zui-label--primary {
|
||||
.zan-label--primary {
|
||||
color: #fff;
|
||||
background: #f44;
|
||||
border: 1rpx solid #f44;
|
||||
}
|
||||
.zui-label--disabled {
|
||||
.zan-label--disabled {
|
||||
color: #cacaca;
|
||||
background: #eee;
|
||||
border: 1rpx solid #e5e5e5;
|
||||
}
|
||||
.zui-label--small {
|
||||
.zan-label--small {
|
||||
font-size: 11px;
|
||||
height: 16px;
|
||||
line-height: 16px;
|
||||
padding: 0px 3px;
|
||||
}
|
||||
.zui-label--plain.zui-label--primary {
|
||||
.zan-label--plain.zan-label--primary {
|
||||
color: #f44;
|
||||
background: #fff;
|
||||
}
|
||||
|
||||
18
dist/loadmore/index.wxml
vendored
18
dist/loadmore/index.wxml
vendored
@ -1,23 +1,23 @@
|
||||
<template name="zui-loadmore">
|
||||
<template name="zan-loadmore">
|
||||
|
||||
<block wx:if="{{nomore}}">
|
||||
<view class="zui-loadmore zui-loadmore--nomore">
|
||||
<view class="zui-loadmore__tips">
|
||||
<view class="zui-loadmore__dot"></view>
|
||||
<view class="zan-loadmore zan-loadmore--nomore">
|
||||
<view class="zan-loadmore__tips">
|
||||
<view class="zan-loadmore__dot"></view>
|
||||
</view>
|
||||
</view>
|
||||
</block>
|
||||
|
||||
<block wx:elif="{{nodata}}">
|
||||
<view class="zui-loadmore zui-loadmore--nodata">
|
||||
<view class="zui-loadmore__tips">{{ nodata_str || '暂无数据' }}</view>
|
||||
<view class="zan-loadmore zan-loadmore--nodata">
|
||||
<view class="zan-loadmore__tips">{{ nodata_str || '暂无数据' }}</view>
|
||||
</view>
|
||||
</block>
|
||||
|
||||
<block wx:elif="{{loading}}">
|
||||
<view class="zui-loadmore">
|
||||
<view class="zui-loading"></view>
|
||||
<view class="zui-loadmore__tips">加载中...</view>
|
||||
<view class="zan-loadmore">
|
||||
<view class="zan-loading"></view>
|
||||
<view class="zan-loadmore__tips">加载中...</view>
|
||||
</view>
|
||||
</block>
|
||||
|
||||
|
||||
20
dist/loadmore/index.wxss
vendored
20
dist/loadmore/index.wxss
vendored
@ -1,4 +1,4 @@
|
||||
.zui-loadmore {
|
||||
.zan-loadmore {
|
||||
position: relative;
|
||||
width: 65%;
|
||||
margin: 21px auto;
|
||||
@ -8,7 +8,7 @@
|
||||
vertical-align: middle;
|
||||
}
|
||||
|
||||
.zui-loading {
|
||||
.zan-loading {
|
||||
width:20px;
|
||||
height:20px;
|
||||
display: inline-block;
|
||||
@ -19,42 +19,42 @@
|
||||
background-size: 100%;
|
||||
}
|
||||
|
||||
.zui-loadmore .zui-loading {
|
||||
.zan-loadmore .zan-loading {
|
||||
margin-right: 4px;
|
||||
}
|
||||
|
||||
.zui-loadmore__tips {
|
||||
.zan-loadmore__tips {
|
||||
display: inline-block;
|
||||
vertical-align: middle;
|
||||
height: 20px;
|
||||
line-height: 20px;
|
||||
}
|
||||
|
||||
.zui-loadmore--nodata,
|
||||
.zui-loadmore--nomore {
|
||||
.zan-loadmore--nodata,
|
||||
.zan-loadmore--nomore {
|
||||
border-top: 1rpx solid #e5e5e5;
|
||||
color: #999;
|
||||
}
|
||||
|
||||
.zui-loadmore--nodata {
|
||||
.zan-loadmore--nodata {
|
||||
margin-top: 120px;
|
||||
}
|
||||
|
||||
.zui-loadmore--nodata .zui-loadmore__tips {
|
||||
.zan-loadmore--nodata .zan-loadmore__tips {
|
||||
position: relative;
|
||||
top: -11px;
|
||||
background: #f9f9f9;
|
||||
padding: 0 6px;
|
||||
}
|
||||
|
||||
.zui-loadmore--nomore .zui-loadmore__tips {
|
||||
.zan-loadmore--nomore .zan-loadmore__tips {
|
||||
position: relative;
|
||||
top: -11px;
|
||||
background: #f9f9f9;
|
||||
padding: 0 6px;
|
||||
}
|
||||
|
||||
.zui-loadmore__dot {
|
||||
.zan-loadmore__dot {
|
||||
position: absolute;
|
||||
left: 50%;
|
||||
top: 10px;
|
||||
|
||||
6
dist/panel/index.wxss
vendored
6
dist/panel/index.wxss
vendored
@ -1,4 +1,4 @@
|
||||
.zui-panel {
|
||||
.zan-panel {
|
||||
background: #fff;
|
||||
border-top: 1rpx solid #e5e5e5;
|
||||
border-bottom: 1rpx solid #e5e5e5;
|
||||
@ -6,7 +6,7 @@
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.zui-panel-title {
|
||||
.zan-panel-title {
|
||||
font-size: 14px;
|
||||
line-height: 14px;
|
||||
color: #999;
|
||||
@ -14,6 +14,6 @@
|
||||
}
|
||||
|
||||
|
||||
.zui-panel--without-margin-top {
|
||||
.zan-panel--without-margin-top {
|
||||
margin-top: 0;
|
||||
}
|
||||
|
||||
14
dist/quantity/index.js
vendored
14
dist/quantity/index.js
vendored
@ -12,25 +12,25 @@ function handle(e, num) {
|
||||
function callback(componentId, quantity) {
|
||||
quantity = +quantity;
|
||||
var e = { componentId, quantity };
|
||||
console.info('[zui:quantity:change]', e);
|
||||
console.info('[zan:quantity:change]', e);
|
||||
|
||||
if (this.handleZuiQuantityChange) {
|
||||
this.handleZuiQuantityChange(e);
|
||||
if (this.handleZanQuantityChange) {
|
||||
this.handleZanQuantityChange(e);
|
||||
} else {
|
||||
console.warn('页面缺少 handleZuiQuantityChange 回调函数');
|
||||
console.warn('页面缺少 handleZanQuantityChange 回调函数');
|
||||
}
|
||||
}
|
||||
|
||||
var Quantity = {
|
||||
_handleZuiQuantityMinus(e) {
|
||||
_handleZanQuantityMinus(e) {
|
||||
handle.call(this, e, -1);
|
||||
},
|
||||
|
||||
_handleZuiQuantityPlus(e) {
|
||||
_handleZanQuantityPlus(e) {
|
||||
handle.call(this, e, +1);
|
||||
},
|
||||
|
||||
_handleZuiQuantityBlur(e) {
|
||||
_handleZanQuantityBlur(e) {
|
||||
var dataset = e.currentTarget.dataset;
|
||||
var componentId = dataset.componentId;
|
||||
var max = +dataset.max;
|
||||
|
||||
16
dist/quantity/index.wxml
vendored
16
dist/quantity/index.wxml
vendored
@ -1,28 +1,28 @@
|
||||
<template name="zui-quantity">
|
||||
<view class="zui-quantity {{ size === 'small' ? 'zui-quantity--small' : '' }}">
|
||||
<template name="zan-quantity">
|
||||
<view class="zan-quantity {{ size === 'small' ? 'zan-quantity--small' : '' }}">
|
||||
<view
|
||||
class="zui-quantity__minus {{ quantity <= min ? 'zui-quantity--disabled' : '' }}"
|
||||
class="zan-quantity__minus {{ quantity <= min ? 'zan-quantity--disabled' : '' }}"
|
||||
data-component-id="{{ componentId }}"
|
||||
data-quantity="{{ quantity }}"
|
||||
data-disabled="{{ quantity <= min }}"
|
||||
bindtap="_handleZuiQuantityMinus"
|
||||
bindtap="_handleZanQuantityMinus"
|
||||
>-</view>
|
||||
<input
|
||||
class="zui-quantity__text {{ min >= max ? 'zui-quantity--disabled' : '' }}"
|
||||
class="zan-quantity__text {{ min >= max ? 'zan-quantity--disabled' : '' }}"
|
||||
type="number"
|
||||
data-component-id="{{ componentId }}"
|
||||
data-min="{{ min }}"
|
||||
data-max="{{ max }}"
|
||||
value="{{ quantity }}"
|
||||
disabled="{{ min >= max }}"
|
||||
bindblur="_handleZuiQuantityBlur"
|
||||
bindblur="_handleZanQuantityBlur"
|
||||
></input>
|
||||
<view
|
||||
class="zui-quantity__plus {{ quantity >= max ? 'zui-quantity--disabled' : '' }}"
|
||||
class="zan-quantity__plus {{ quantity >= max ? 'zan-quantity--disabled' : '' }}"
|
||||
data-component-id="{{ componentId }}"
|
||||
data-quantity="{{ quantity }}"
|
||||
data-disabled="{{ quantity >= max }}"
|
||||
bindtap="_handleZuiQuantityPlus"
|
||||
bindtap="_handleZanQuantityPlus"
|
||||
>+</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
16
dist/quantity/index.wxss
vendored
16
dist/quantity/index.wxss
vendored
@ -1,7 +1,7 @@
|
||||
.zui-quantity {
|
||||
.zan-quantity {
|
||||
color: #666;
|
||||
}
|
||||
.zui-quantity view {
|
||||
.zan-quantity view {
|
||||
display: inline-block;
|
||||
line-height: 20px;
|
||||
padding: 5px 0;
|
||||
@ -12,11 +12,11 @@
|
||||
font-size: 12px;
|
||||
border: 1rpx solid #999;
|
||||
}
|
||||
.zui-quantity .zui-quantity__minus {
|
||||
.zan-quantity .zan-quantity__minus {
|
||||
border-right: none;
|
||||
border-radius: 2px 0 0 2px;
|
||||
}
|
||||
.zui-quantity .zui-quantity__text {
|
||||
.zan-quantity .zan-quantity__text {
|
||||
border: 1rpx solid #999;
|
||||
display: inline-block;
|
||||
text-align: center;
|
||||
@ -26,20 +26,20 @@
|
||||
font-size: 12px;
|
||||
line-height: 30px;
|
||||
}
|
||||
.zui-quantity .zui-quantity__plus {
|
||||
.zan-quantity .zan-quantity__plus {
|
||||
border-left: none;
|
||||
border-radius: 0 2px 2px 0;
|
||||
}
|
||||
.zui-quantity .zui-quantity--disabled {
|
||||
.zan-quantity .zan-quantity--disabled {
|
||||
background: #f8f8f8;
|
||||
color: #bbb;
|
||||
border-color: #e8e8e8;
|
||||
}
|
||||
.zui-quantity--small view {
|
||||
.zan-quantity--small view {
|
||||
min-width: 36px;
|
||||
line-height: 18px;
|
||||
}
|
||||
.zui-quantity--small .zui-quantity__text {
|
||||
.zan-quantity--small .zan-quantity__text {
|
||||
width: 36px;
|
||||
line-height: 28px;
|
||||
height: 28px;
|
||||
|
||||
16
dist/steps/index.wxml
vendored
16
dist/steps/index.wxml
vendored
@ -1,15 +1,15 @@
|
||||
<template name="zui-steps">
|
||||
<view class="zui-steps zui-steps--{{ type == 'vertical' ? 'vsteps' : 'steps' }} zui-steps--{{ steps.length }} {{ className }}">
|
||||
<template name="zan-steps">
|
||||
<view class="zan-steps zan-steps--{{ type == 'vertical' ? 'vsteps' : 'steps' }} zan-steps--{{ steps.length }} {{ className }}">
|
||||
<view
|
||||
wx:for="{{ steps }}" wx:for-item="step" wx:key="unique" wx:for-index="index"
|
||||
class="zui-steps__step {{ hasDesc ? 'zui-steps__step--db-title' : '' }} {{ index == 0 ? 'zui-steps__step--first-child' : '' }} {{ index == steps.length - 1 ? 'zui-steps__step--last-child' : '' }} {{ step.done ? 'zui-steps__step--done' : '' }} {{ step.current ? 'zui-steps__step--cur' : '' }}"
|
||||
class="zan-steps__step {{ hasDesc ? 'zan-steps__step--db-title' : '' }} {{ index == 0 ? 'zan-steps__step--first-child' : '' }} {{ index == steps.length - 1 ? 'zan-steps__step--last-child' : '' }} {{ step.done ? 'zan-steps__step--done' : '' }} {{ step.current ? 'zan-steps__step--cur' : '' }}"
|
||||
>
|
||||
<view class="zui-steps__title">{{ step.text }}</view>
|
||||
<view wx:if="{{ hasDesc && step.desc }}" class="zui-steps__title zui-steps__title--desc">{{ step.desc }}</view>
|
||||
<view class="zui-steps__icons">
|
||||
<view class="zui-steps__circle"></view>
|
||||
<view class="zan-steps__title">{{ step.text }}</view>
|
||||
<view wx:if="{{ hasDesc && step.desc }}" class="zan-steps__title zan-steps__title--desc">{{ step.desc }}</view>
|
||||
<view class="zan-steps__icons">
|
||||
<view class="zan-steps__circle"></view>
|
||||
</view>
|
||||
<view class="zui-steps__line"></view>
|
||||
<view class="zan-steps__line"></view>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
2
dist/steps/index.wxss
vendored
2
dist/steps/index.wxss
vendored
@ -1,6 +1,6 @@
|
||||
@import "wxss/step.wxss";
|
||||
@import "wxss/vstep.wxss";
|
||||
|
||||
.zui-steps {
|
||||
.zan-steps {
|
||||
position: relative;
|
||||
}
|
||||
|
||||
48
dist/steps/wxss/step.wxss
vendored
48
dist/steps/wxss/step.wxss
vendored
@ -1,29 +1,29 @@
|
||||
.zui-steps--steps.zui-steps--5 .zui-steps__step {
|
||||
.zan-steps--steps.zan-steps--5 .zan-steps__step {
|
||||
width: 25%;
|
||||
}
|
||||
|
||||
.zui-steps--steps.zui-steps--4 .zui-steps__step {
|
||||
.zan-steps--steps.zan-steps--4 .zan-steps__step {
|
||||
width: 33%;
|
||||
}
|
||||
|
||||
.zui-steps--steps.zui-steps--3 .zui-steps__step {
|
||||
.zan-steps--steps.zan-steps--3 .zan-steps__step {
|
||||
width: 50%;
|
||||
}
|
||||
|
||||
.zui-steps--steps .zui-steps__step {
|
||||
.zan-steps--steps .zan-steps__step {
|
||||
position: relative;
|
||||
float: left;
|
||||
padding-bottom: 25px;
|
||||
color: #b1b1b1;
|
||||
}
|
||||
|
||||
.zui-steps--steps .zui-steps__title {
|
||||
.zan-steps--steps .zan-steps__title {
|
||||
transform: translateX(-50%);
|
||||
font-size: 10px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.zui-steps--steps .zui-steps__icons {
|
||||
.zan-steps--steps .zan-steps__icons {
|
||||
position: absolute;
|
||||
top: 30px;
|
||||
left: -10px;
|
||||
@ -32,7 +32,7 @@
|
||||
z-index: 10;
|
||||
}
|
||||
|
||||
.zui-steps--steps .zui-steps__circle {
|
||||
.zan-steps--steps .zan-steps__circle {
|
||||
display: block;
|
||||
position: relative;
|
||||
width: 5px;
|
||||
@ -41,7 +41,7 @@
|
||||
border-radius: 50%;
|
||||
}
|
||||
|
||||
.zui-steps--steps .zui-steps__line {
|
||||
.zan-steps--steps .zan-steps__line {
|
||||
position: absolute;
|
||||
left: 0px;
|
||||
top: 32px;
|
||||
@ -52,82 +52,82 @@
|
||||
|
||||
|
||||
/* 已完成的steps */
|
||||
.zui-steps--steps .zui-steps__step--done {
|
||||
.zan-steps--steps .zan-steps__step--done {
|
||||
color: #333;
|
||||
}
|
||||
|
||||
.zui-steps--steps .zui-steps__step--done .zui-steps__line {
|
||||
.zan-steps--steps .zan-steps__step--done .zan-steps__line {
|
||||
background-color: #06bf04;
|
||||
}
|
||||
|
||||
.zui-steps--steps .zui-steps__step--done .zui-steps__circle {
|
||||
.zan-steps--steps .zan-steps__step--done .zan-steps__circle {
|
||||
width: 5px;
|
||||
height: 5px;
|
||||
background-color: #09bb07;
|
||||
}
|
||||
|
||||
/* 正在进行中的steps */
|
||||
.zui-steps--steps .zui-steps__step--cur .zui-steps__icons {
|
||||
.zan-steps--steps .zan-steps__step--cur .zan-steps__icons {
|
||||
top: 25px;
|
||||
left: -14px;
|
||||
}
|
||||
|
||||
.zui-steps--steps .zui-steps__step--cur .zui-steps__circle {
|
||||
.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;
|
||||
}
|
||||
|
||||
.zui-steps--steps .zui-steps__step--cur .zui-steps__line {
|
||||
.zan-steps--steps .zan-steps__step--cur .zan-steps__line {
|
||||
background-color: #e5e5e5;
|
||||
}
|
||||
|
||||
/* 各种不同位置的 */
|
||||
.zui-steps--steps .zui-steps__step--first-child .zui-steps__title {
|
||||
.zan-steps--steps .zan-steps__step--first-child .zan-steps__title {
|
||||
margin-left: 0;
|
||||
transform: none;
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
.zui-steps--steps .zui-steps__step--first-child .zui-steps__icons {
|
||||
.zan-steps--steps .zan-steps__step--first-child .zan-steps__icons {
|
||||
left: -7px;
|
||||
}
|
||||
|
||||
.zui-steps--steps .zui-steps__step--last-child {
|
||||
.zan-steps--steps .zan-steps__step--last-child {
|
||||
position: absolute;
|
||||
right: 0;
|
||||
top: 0;
|
||||
text-align: right;
|
||||
}
|
||||
|
||||
.zui-steps--steps .zui-steps__step--last-child .zui-steps__title {
|
||||
.zan-steps--steps .zan-steps__step--last-child .zan-steps__title {
|
||||
transform: none;
|
||||
text-align: right;
|
||||
}
|
||||
|
||||
.zui-steps--steps .zui-steps__step--last-child .zui-steps__icons {
|
||||
.zan-steps--steps .zan-steps__step--last-child .zan-steps__icons {
|
||||
left: auto;
|
||||
right: -6px;
|
||||
}
|
||||
|
||||
.zui-steps--steps .zui-steps__step--last-child .zui-steps__line {
|
||||
.zan-steps--steps .zan-steps__step--last-child .zan-steps__line {
|
||||
display: none;
|
||||
}
|
||||
|
||||
/* 有描述的step */
|
||||
.zui-steps--steps .zui-steps__step--db-title {
|
||||
.zan-steps--steps .zan-steps__step--db-title {
|
||||
min-height: 29px;
|
||||
}
|
||||
|
||||
.zui-steps--steps .zui-steps__step--db-title .zui-steps__line {
|
||||
.zan-steps--steps .zan-steps__step--db-title .zan-steps__line {
|
||||
top: 45px;
|
||||
}
|
||||
|
||||
.zui-steps--steps .zui-steps__step--db-title .zui-steps__icons {
|
||||
.zan-steps--steps .zan-steps__step--db-title .zan-steps__icons {
|
||||
top: 43px;
|
||||
}
|
||||
|
||||
.zui-steps--steps .zui-steps__step--db-title.zui-steps__step--cur .zui-steps__icons {
|
||||
.zan-steps--steps .zan-steps__step--db-title.zan-steps__step--cur .zan-steps__icons {
|
||||
top: 39px;
|
||||
}
|
||||
|
||||
24
dist/steps/wxss/vstep.wxss
vendored
24
dist/steps/wxss/vstep.wxss
vendored
@ -1,18 +1,18 @@
|
||||
.zui-steps--vsteps {
|
||||
.zan-steps--vsteps {
|
||||
color: #999;
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
.zui-steps--vsteps .zui-steps__step {
|
||||
.zan-steps--vsteps .zan-steps__step {
|
||||
position: relative;
|
||||
padding: 15px 0;
|
||||
}
|
||||
|
||||
.zui-steps--vsteps .zui-steps__step--done {
|
||||
.zan-steps--vsteps .zan-steps__step--done {
|
||||
color: #44BB00;
|
||||
}
|
||||
|
||||
.zui-steps--vsteps .zui-steps__line {
|
||||
.zan-steps--vsteps .zan-steps__line {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
@ -21,17 +21,17 @@
|
||||
background-color: #e5e5e5;
|
||||
}
|
||||
|
||||
.zui-steps--vsteps .zui-steps__title {
|
||||
.zan-steps--vsteps .zan-steps__title {
|
||||
display: inline-block;
|
||||
line-height: 20px;
|
||||
padding-left: 27px;
|
||||
}
|
||||
|
||||
.zui-steps--vsteps .zui-steps__title--desc {
|
||||
.zan-steps--vsteps .zan-steps__title--desc {
|
||||
padding-left: 3px;
|
||||
}
|
||||
|
||||
.zui-steps--vsteps .zui-steps__icons {
|
||||
.zan-steps--vsteps .zan-steps__icons {
|
||||
position: absolute;
|
||||
left: 7px;
|
||||
top: 50%;
|
||||
@ -41,14 +41,14 @@
|
||||
background-color: #fff;
|
||||
}
|
||||
|
||||
.zui-steps--vsteps .zui-steps__circle {
|
||||
.zan-steps--vsteps .zan-steps__circle {
|
||||
width: 5px;
|
||||
height: 5px;
|
||||
background-color: #cacaca;
|
||||
border-radius: 10px;
|
||||
}
|
||||
|
||||
.zui-steps--vsteps .zui-steps__step--done .zui-steps__circle {
|
||||
.zan-steps--vsteps .zan-steps__step--done .zan-steps__circle {
|
||||
width: 13px;
|
||||
height: 13px;
|
||||
background: transparent url("https://b.yzcdn.cn/v2/image/wap/success_small@2x.png");
|
||||
@ -56,12 +56,12 @@
|
||||
border-radius:0;
|
||||
}
|
||||
|
||||
.zui-steps--vsteps .zui-steps__icon--active {
|
||||
.zan-steps--vsteps .zan-steps__icon--active {
|
||||
width: 13px;
|
||||
height: 13px;
|
||||
}
|
||||
|
||||
.zui-steps--vsteps .zui-steps__step--first-child .zui-steps__title::before {
|
||||
.zan-steps--vsteps .zan-steps__step--first-child .zan-steps__title::before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: 0;
|
||||
@ -72,7 +72,7 @@
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
.zui-steps--vsteps .zui-steps__step--last-child .zui-steps__title::before {
|
||||
.zan-steps--vsteps .zan-steps__step--last-child .zan-steps__title::before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
|
||||
10
dist/tab/index.js
vendored
10
dist/tab/index.js
vendored
@ -1,15 +1,15 @@
|
||||
var Tab = {
|
||||
_handleZuiTabChange(e) {
|
||||
_handleZanTabChange(e) {
|
||||
var dataset = e.currentTarget.dataset;
|
||||
var componentId = dataset.componentId;
|
||||
var selectedId = dataset.itemId;
|
||||
var data = { componentId, selectedId };
|
||||
|
||||
console.info('[zui:tab:change]', data);
|
||||
if (this.handleZuiTabChange) {
|
||||
this.handleZuiTabChange(data);
|
||||
console.info('[zan:tab:change]', data);
|
||||
if (this.handleZanTabChange) {
|
||||
this.handleZanTabChange(data);
|
||||
} else {
|
||||
console.warn('页面缺少 handleZuiTabChange 回调函数');
|
||||
console.warn('页面缺少 handleZanTabChange 回调函数');
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
20
dist/tab/index.wxml
vendored
20
dist/tab/index.wxml
vendored
@ -1,27 +1,27 @@
|
||||
<template name="zui-tab">
|
||||
<view class="zui-tab">
|
||||
<template name="zan-tab">
|
||||
<view class="zan-tab">
|
||||
<block wx:if="{{tab.scroll}}">
|
||||
<scroll-view class="zui-tab__bd zui-tab__bd--scroll {{fixed ? 'zui-tab__bd--fixed' : ''}}" scroll-x="true">
|
||||
<template is="zui-tab-list" data="{{ tab, componentId }}"></template>
|
||||
<scroll-view class="zan-tab__bd zan-tab__bd--scroll {{fixed ? 'zan-tab__bd--fixed' : ''}}" scroll-x="true">
|
||||
<template is="zan-tab-list" data="{{ tab, componentId }}"></template>
|
||||
</scroll-view>
|
||||
</block>
|
||||
<block wx:else>
|
||||
<view class="zui-tab__bd {{fixed ? 'zui-tab__bd--fixed' : ''}}">
|
||||
<template is="zui-tab-list" data="{{ tab, componentId }}"></template>
|
||||
<view class="zan-tab__bd {{fixed ? 'zan-tab__bd--fixed' : ''}}">
|
||||
<template is="zan-tab-list" data="{{ tab, componentId }}"></template>
|
||||
</view>
|
||||
</block>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<template name="zui-tab-list">
|
||||
<template name="zan-tab-list">
|
||||
<view
|
||||
wx:for="{{tab.list}}"
|
||||
wx:key="id"
|
||||
class="zui-tab__item {{tab.selectedId == item.id ? 'zui-tab__item--selected' : ''}}"
|
||||
class="zan-tab__item {{tab.selectedId == item.id ? 'zan-tab__item--selected' : ''}}"
|
||||
data-component-id="{{componentId}}"
|
||||
data-item-id="{{item.id}}"
|
||||
bindtap="_handleZuiTabChange"
|
||||
bindtap="_handleZanTabChange"
|
||||
>
|
||||
<view class="zui-tab__title">{{item.title}}</view>
|
||||
<view class="zan-tab__title">{{item.title}}</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
18
dist/tab/index.wxss
vendored
18
dist/tab/index.wxss
vendored
@ -1,26 +1,26 @@
|
||||
.zui-tab {
|
||||
.zan-tab {
|
||||
height: 45px;
|
||||
}
|
||||
.zui-tab__bd {
|
||||
.zan-tab__bd {
|
||||
width: 750rpx;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
border-bottom: 1rpx solid #e5e5e5;
|
||||
background: #fff;
|
||||
}
|
||||
.zui-tab__bd--fixed {
|
||||
.zan-tab__bd--fixed {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
z-index: 2;
|
||||
}
|
||||
.zui-tab__item {
|
||||
.zan-tab__item {
|
||||
flex: 1;
|
||||
display: inline-block;
|
||||
text-align: center;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.zui-tab__title {
|
||||
.zan-tab__title {
|
||||
font-size: 14px;
|
||||
display: inline-block;
|
||||
color: #666;
|
||||
@ -31,18 +31,18 @@
|
||||
word-break: keep-all;
|
||||
}
|
||||
|
||||
.zui-tab__item--selected .zui-tab__title {
|
||||
.zan-tab__item--selected .zan-tab__title {
|
||||
color: #f44;
|
||||
border-bottom: 2px solid #f44;
|
||||
}
|
||||
|
||||
.zui-tab__bd--scroll {
|
||||
.zan-tab__bd--scroll {
|
||||
display: block;
|
||||
white-space: nowrap;
|
||||
}
|
||||
.zui-tab__bd--scroll .zui-tab__item {
|
||||
.zan-tab__bd--scroll .zan-tab__item {
|
||||
min-width: 80px;
|
||||
}
|
||||
.zui-tab__bd--scroll .zui-tab__text {
|
||||
.zan-tab__bd--scroll .zan-tab__text {
|
||||
margin: 0 20px;
|
||||
}
|
||||
|
||||
22
dist/toast/index.js
vendored
22
dist/toast/index.js
vendored
@ -1,32 +1,32 @@
|
||||
module.exports = {
|
||||
showZuiToast(title, timeout) {
|
||||
var zuiToast = this.data.zuiToast || {};
|
||||
clearTimeout(zuiToast.timer);
|
||||
showZanToast(title, timeout) {
|
||||
var zanToast = this.data.zanToast || {};
|
||||
clearTimeout(zanToast.timer);
|
||||
|
||||
// 弹层设置~
|
||||
zuiToast = {
|
||||
zanToast = {
|
||||
show: true,
|
||||
title
|
||||
};
|
||||
this.setData({
|
||||
zuiToast
|
||||
zanToast
|
||||
});
|
||||
|
||||
var timer = setTimeout(() => {
|
||||
this.clearZuiToast();
|
||||
this.clearZanToast();
|
||||
}, timeout || 3000);
|
||||
|
||||
this.setData({
|
||||
'zuiToast.timer': timer
|
||||
'zanToast.timer': timer
|
||||
});
|
||||
},
|
||||
|
||||
clearZuiToast() {
|
||||
var zuiToast = this.data.zuiToast || {};
|
||||
clearTimeout(zuiToast.timer);
|
||||
clearZanToast() {
|
||||
var zanToast = this.data.zanToast || {};
|
||||
clearTimeout(zanToast.timer);
|
||||
|
||||
this.setData({
|
||||
'zuiToast.show': false
|
||||
'zanToast.show': false
|
||||
});
|
||||
}
|
||||
};
|
||||
|
||||
4
dist/toast/index.wxml
vendored
4
dist/toast/index.wxml
vendored
@ -1,3 +1,3 @@
|
||||
<template name="zui-toast">
|
||||
<view class="zui-toast" wx:if="{{ zuiToast.show }}" bindtap="clearZuiToast">{{ zuiToast.title }}</view>
|
||||
<template name="zan-toast">
|
||||
<view class="zan-toast" wx:if="{{ zanToast.show }}" bindtap="clearZanToast">{{ zanToast.title }}</view>
|
||||
</template>
|
||||
|
||||
2
dist/toast/index.wxss
vendored
2
dist/toast/index.wxss
vendored
@ -1,4 +1,4 @@
|
||||
.zui-toast {
|
||||
.zan-toast {
|
||||
position: fixed;
|
||||
top: 35%;
|
||||
left: 20%;
|
||||
|
||||
6
dist/toptips/index.js
vendored
6
dist/toptips/index.js
vendored
@ -1,7 +1,7 @@
|
||||
var timer = undefined;
|
||||
|
||||
module.exports = {
|
||||
showZuiTopTips(content = '', options = {}) {
|
||||
showZanTopTips(content = '', options = {}) {
|
||||
// 如果已经有一个计时器在了，就清理掉先
|
||||
if (timer) {
|
||||
clearTimeout(timer);
|
||||
@ -21,7 +21,7 @@ module.exports = {
|
||||
|
||||
// 展示出topTips
|
||||
this.setData({
|
||||
zuiTopTips: {
|
||||
zanTopTips: {
|
||||
show: true,
|
||||
content,
|
||||
options
|
||||
@ -31,7 +31,7 @@ module.exports = {
|
||||
// 设置定时器，定时关闭topTips
|
||||
timer = setTimeout(() => {
|
||||
this.setData({
|
||||
'zuiTopTips.show': false
|
||||
'zanTopTips.show': false
|
||||
});
|
||||
timer = undefined;
|
||||
}, options.duration);
|
||||
|
||||
4
dist/toptips/index.wxml
vendored
4
dist/toptips/index.wxml
vendored
@ -1,3 +1,3 @@
|
||||
<template name="zui-toptips">
|
||||
<view class="zui-toptips {{ zuiTopTips.show ? 'zui-toptips--show' : '' }}">{{ zuiTopTips.content }}</view>
|
||||
<template name="zan-toptips">
|
||||
<view class="zan-toptips {{ zanTopTips.show ? 'zan-toptips--show' : '' }}">{{ zanTopTips.content }}</view>
|
||||
</template>
|
||||
|
||||
4
dist/toptips/index.wxss
vendored
4
dist/toptips/index.wxss
vendored
@ -1,4 +1,4 @@
|
||||
.zui-toptips {
|
||||
.zan-toptips {
|
||||
display: block;
|
||||
position: fixed;
|
||||
-webkit-transform: translateZ(0) translateY(-100%);
|
||||
@ -17,6 +17,6 @@
|
||||
transition: all 0.4s ease;
|
||||
}
|
||||
|
||||
.zui-toptips--show {
|
||||
.zan-toptips--show {
|
||||
-webkit-transform: translateZ(0) translateY(0);
|
||||
}
|
||||
|
||||
@ -4,22 +4,22 @@
|
||||
|
||||
<view class="demo">
|
||||
<view class="demo__item">
|
||||
<view class="demo__icon zui-badge">
|
||||
<view class="demo__icon zan-badge">
|
||||
</view>
|
||||
</view>
|
||||
<view class="demo__item">
|
||||
<view class="demo__icon zui-badge">
|
||||
<view class="zui-badge__count">9</view>
|
||||
<view class="demo__icon zan-badge">
|
||||
<view class="zan-badge__count">9</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="demo__item">
|
||||
<view class="demo__icon zui-badge">
|
||||
<view class="zui-badge__count">19</view>
|
||||
<view class="demo__icon zan-badge">
|
||||
<view class="zan-badge__count">19</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="demo__item">
|
||||
<view class="demo__icon zui-badge">
|
||||
<view class="zui-badge__count">99+</view>
|
||||
<view class="demo__icon zan-badge">
|
||||
<view class="zan-badge__count">99+</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
@ -2,54 +2,54 @@
|
||||
|
||||
<view class="doc-title">BUTTON</view>
|
||||
|
||||
<view class="zui-panel-title">普通按钮</view>
|
||||
<view class="zui-panel">
|
||||
<view class="zui-btns">
|
||||
<button class="zui-btn">取消订单</button>
|
||||
<button class="zui-btn zui-btn--primary">确认付款</button>
|
||||
<button class="zui-btn zui-btn--danger">确认付款</button>
|
||||
<button class="zui-btn zui-btn--warn zui-btn--last-child">确认付款</button>
|
||||
<view class="zan-panel-title">普通按钮</view>
|
||||
<view class="zan-panel">
|
||||
<view class="zan-btns">
|
||||
<button class="zan-btn">取消订单</button>
|
||||
<button class="zan-btn zan-btn--primary">确认付款</button>
|
||||
<button class="zan-btn zan-btn--danger">确认付款</button>
|
||||
<button class="zan-btn zan-btn--warn zan-btn--last-child">确认付款</button>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view class="zui-panel-title">大号按钮，没有边框线及圆角</view>
|
||||
<view class="zui-panel">
|
||||
<button class="zui-btn zui-btn--large zui-btn--primary">确认付款</button>
|
||||
<button class="zui-btn zui-btn--large zui-btn--warn">立即购买</button>
|
||||
<button class="zui-btn zui-btn--large zui-btn--danger">立即购买</button>
|
||||
<view class="zan-panel-title">大号按钮，没有边框线及圆角</view>
|
||||
<view class="zan-panel">
|
||||
<button class="zan-btn zan-btn--large zan-btn--primary">确认付款</button>
|
||||
<button class="zan-btn zan-btn--large zan-btn--warn">立即购买</button>
|
||||
<button class="zan-btn zan-btn--large zan-btn--danger">立即购买</button>
|
||||
</view>
|
||||
|
||||
<view class="zui-panel-title">小号按钮</view>
|
||||
<view class="zui-panel" style="padding: 15px;">
|
||||
<button class="zui-btn zui-btn--small">取消订单</button>
|
||||
<button class="zui-btn zui-btn--small zui-btn--primary">确认付款</button>
|
||||
<view class="zan-panel-title">小号按钮</view>
|
||||
<view class="zan-panel" style="padding: 15px;">
|
||||
<button class="zan-btn zan-btn--small">取消订单</button>
|
||||
<button class="zan-btn zan-btn--small zan-btn--primary">确认付款</button>
|
||||
</view>
|
||||
|
||||
<view class="zui-panel-title">迷你按钮</view>
|
||||
<view class="zui-panel" style="padding: 15px;">
|
||||
<button class="zui-btn zui-btn--mini zui-btn--plain">取消订单</button>
|
||||
<button class="zui-btn zui-btn--mini zui-btn--primary zui-btn--plain">确认付款</button>
|
||||
<button class="zui-btn zui-btn--mini zui-btn--warn zui-btn--plain">确认付款</button>
|
||||
<button class="zui-btn zui-btn--mini zui-btn--danger zui-btn--plain">确认付款</button>
|
||||
<view class="zan-panel-title">迷你按钮</view>
|
||||
<view class="zan-panel" style="padding: 15px;">
|
||||
<button class="zan-btn zan-btn--mini zan-btn--plain">取消订单</button>
|
||||
<button class="zan-btn zan-btn--mini zan-btn--primary zan-btn--plain">确认付款</button>
|
||||
<button class="zan-btn zan-btn--mini zan-btn--warn zan-btn--plain">确认付款</button>
|
||||
<button class="zan-btn zan-btn--mini zan-btn--danger zan-btn--plain">确认付款</button>
|
||||
</view>
|
||||
|
||||
<view class="zui-panel-title">Loading</view>
|
||||
<view class="zui-panel">
|
||||
<view class="zui-btns">
|
||||
<button class="zui-btn zui-btn--loading">取消订单</button>
|
||||
<button class="zui-btn zui-btn--loading zui-btn--primary">确认付款</button>
|
||||
<button class="zui-btn zui-btn--loading zui-btn--danger">确认付款</button>
|
||||
<button class="zui-btn zui-btn--loading zui-btn--warn zui-btn--last-child">确认付款</button>
|
||||
<view class="zan-panel-title">Loading</view>
|
||||
<view class="zan-panel">
|
||||
<view class="zan-btns">
|
||||
<button class="zan-btn zan-btn--loading">取消订单</button>
|
||||
<button class="zan-btn zan-btn--loading zan-btn--primary">确认付款</button>
|
||||
<button class="zan-btn zan-btn--loading zan-btn--danger">确认付款</button>
|
||||
<button class="zan-btn zan-btn--loading zan-btn--warn zan-btn--last-child">确认付款</button>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view class="zui-panel-title">Disabled</view>
|
||||
<view class="zui-panel">
|
||||
<view class="zui-btns">
|
||||
<button class="zui-btn zui-btn--disabled" disabled>取消订单</button>
|
||||
<button class="zui-btn zui-btn--disabled zui-btn--primary" disabled>确认付款</button>
|
||||
<button class="zui-btn zui-btn--disabled zui-btn--danger" disabled>确认付款</button>
|
||||
<button class="zui-btn zui-btn--disabled zui-btn--warn zui-btn--last-child" disabled>确认付款</button>
|
||||
<view class="zan-panel-title">Disabled</view>
|
||||
<view class="zan-panel">
|
||||
<view class="zan-btns">
|
||||
<button class="zan-btn zan-btn--disabled" disabled>取消订单</button>
|
||||
<button class="zan-btn zan-btn--disabled zan-btn--primary" disabled>确认付款</button>
|
||||
<button class="zan-btn zan-btn--disabled zan-btn--danger" disabled>确认付款</button>
|
||||
<button class="zan-btn zan-btn--disabled zan-btn--warn zan-btn--last-child" disabled>确认付款</button>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
|
||||
@ -2,31 +2,31 @@
|
||||
|
||||
<view class="doc-title">CARD</view>
|
||||
|
||||
<view class="zui-panel">
|
||||
<view class="zui-card">
|
||||
<view class="zui-card__thumb">
|
||||
<image class="zui-card__img"
|
||||
<view class="zan-panel">
|
||||
<view class="zan-card">
|
||||
<view class="zan-card__thumb">
|
||||
<image class="zan-card__img"
|
||||
src="https://img.yzcdn.cn/upload_files/2016/11/25/FpqPXlrMRjKwJs8VdTu3ZDJCj4j5.jpeg?imageView2/2/w/200/h/200/q/90/format/jpeg"
|
||||
mode="aspectFit"
|
||||
></image>
|
||||
</view>
|
||||
<view class="zui-card__detail">
|
||||
<view class="zui-card__detail-row">
|
||||
<view class="zui-card__right-col">¥ 999.99</view>
|
||||
<view class="zui-card__left-col zui-ellipsis--l2">
|
||||
<view class="zan-card__detail">
|
||||
<view class="zan-card__detail-row">
|
||||
<view class="zan-card__right-col">¥ 999.99</view>
|
||||
<view class="zan-card__left-col zan-ellipsis--l2">
|
||||
红烧牛肉【虚拟商品】【有库存】【有sku】
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view class="zui-card__detail-row zui-c-gray-darker">
|
||||
<view class="zui-card__right-col">x2</view>
|
||||
<view class="zui-card__left-col">
|
||||
<view class="zan-card__detail-row zan-c-gray-darker">
|
||||
<view class="zan-card__right-col">x2</view>
|
||||
<view class="zan-card__left-col">
|
||||
3000克 50%
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view class="zui-card__detail-row zui-c-gray-darker">
|
||||
<view class="zui-card__left-col zui-c-red">已发货</view>
|
||||
<view class="zan-card__detail-row zan-c-gray-darker">
|
||||
<view class="zan-card__left-col zan-c-red">已发货</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
@ -2,87 +2,87 @@
|
||||
|
||||
<view class="doc-title">CELL</view>
|
||||
|
||||
<view class="zui-panel">
|
||||
<view class="zui-cell zui-cell--last-child">
|
||||
<view class="zui-cell__bd">单行列表</view>
|
||||
<view class="zan-panel">
|
||||
<view class="zan-cell zan-cell--last-child">
|
||||
<view class="zan-cell__bd">单行列表</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view class="zui-panel">
|
||||
<view class="zui-cell zui-cell--last-child">
|
||||
<view class="zui-cell__bd">单行列表</view>
|
||||
<view class="zui-cell__ft">详细信息</view>
|
||||
<view class="zan-panel">
|
||||
<view class="zan-cell zan-cell--last-child">
|
||||
<view class="zan-cell__bd">单行列表</view>
|
||||
<view class="zan-cell__ft">详细信息</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view class="zui-panel">
|
||||
<view class="zui-cell zui-cell--last-child zui-cell--access">
|
||||
<view class="zui-cell__bd">单行列表</view>
|
||||
<view class="zui-cell__ft"></view>
|
||||
<view class="zan-panel">
|
||||
<view class="zan-cell zan-cell--last-child zan-cell--access">
|
||||
<view class="zan-cell__bd">单行列表</view>
|
||||
<view class="zan-cell__ft"></view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view class="zui-panel">
|
||||
<view class="zui-cell zui-cell--last-child zui-cell--access">
|
||||
<view class="zui-cell__bd">单行列表</view>
|
||||
<view class="zui-cell__ft">详细信息</view>
|
||||
<view class="zan-panel">
|
||||
<view class="zan-cell zan-cell--last-child zan-cell--access">
|
||||
<view class="zan-cell__bd">单行列表</view>
|
||||
<view class="zan-cell__ft">详细信息</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view class="zui-panel">
|
||||
<view class="zui-cell">
|
||||
<view class="zui-cell__bd">多行列表</view>
|
||||
<view class="zan-panel">
|
||||
<view class="zan-cell">
|
||||
<view class="zan-cell__bd">多行列表</view>
|
||||
</view>
|
||||
<view class="zui-cell">
|
||||
<view class="zui-cell__bd">多行列表</view>
|
||||
<view class="zan-cell">
|
||||
<view class="zan-cell__bd">多行列表</view>
|
||||
</view>
|
||||
<view class="zui-cell zui-cell--last-child">
|
||||
<view class="zui-cell__bd">多行列表</view>
|
||||
<view class="zan-cell zan-cell--last-child">
|
||||
<view class="zan-cell__bd">多行列表</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view class="zui-panel">
|
||||
<view class="zui-cell">
|
||||
<view class="zui-cell__bd">多行列表</view>
|
||||
<view class="zui-cell__ft">详细信息</view>
|
||||
<view class="zan-panel">
|
||||
<view class="zan-cell">
|
||||
<view class="zan-cell__bd">多行列表</view>
|
||||
<view class="zan-cell__ft">详细信息</view>
|
||||
</view>
|
||||
<view class="zui-cell">
|
||||
<view class="zui-cell__bd">多行列表</view>
|
||||
<view class="zui-cell__ft">详细信息</view>
|
||||
<view class="zan-cell">
|
||||
<view class="zan-cell__bd">多行列表</view>
|
||||
<view class="zan-cell__ft">详细信息</view>
|
||||
</view>
|
||||
<view class="zui-cell zui-cell--last-child">
|
||||
<view class="zui-cell__bd">多行列表</view>
|
||||
<view class="zui-cell__ft">详细信息</view>
|
||||
<view class="zan-cell zan-cell--last-child">
|
||||
<view class="zan-cell__bd">多行列表</view>
|
||||
<view class="zan-cell__ft">详细信息</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view class="zui-panel">
|
||||
<view class="zui-cell zui-cell--access">
|
||||
<view class="zui-cell__bd">多行列表</view>
|
||||
<view class="zui-cell__ft"></view>
|
||||
<view class="zan-panel">
|
||||
<view class="zan-cell zan-cell--access">
|
||||
<view class="zan-cell__bd">多行列表</view>
|
||||
<view class="zan-cell__ft"></view>
|
||||
</view>
|
||||
<view class="zui-cell zui-cell--access">
|
||||
<view class="zui-cell__bd">多行列表</view>
|
||||
<view class="zui-cell__ft"></view>
|
||||
<view class="zan-cell zan-cell--access">
|
||||
<view class="zan-cell__bd">多行列表</view>
|
||||
<view class="zan-cell__ft"></view>
|
||||
</view>
|
||||
<view class="zui-cell zui-cell--access zui-cell--last-child">
|
||||
<view class="zui-cell__bd">多行列表</view>
|
||||
<view class="zui-cell__ft"></view>
|
||||
<view class="zan-cell zan-cell--access zan-cell--last-child">
|
||||
<view class="zan-cell__bd">多行列表</view>
|
||||
<view class="zan-cell__ft"></view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view class="zui-panel">
|
||||
<view class="zui-cell zui-cell--access">
|
||||
<view class="zui-cell__bd">多行列表</view>
|
||||
<view class="zui-cell__ft">详细信息</view>
|
||||
<view class="zan-panel">
|
||||
<view class="zan-cell zan-cell--access">
|
||||
<view class="zan-cell__bd">多行列表</view>
|
||||
<view class="zan-cell__ft">详细信息</view>
|
||||
</view>
|
||||
<view class="zui-cell zui-cell--access">
|
||||
<view class="zui-cell__bd">多行列表</view>
|
||||
<view class="zui-cell__ft">详细信息</view>
|
||||
<view class="zan-cell zan-cell--access">
|
||||
<view class="zan-cell__bd">多行列表</view>
|
||||
<view class="zan-cell__ft">详细信息</view>
|
||||
</view>
|
||||
<view class="zui-cell zui-cell--access zui-cell--last-child">
|
||||
<view class="zui-cell__bd">多行列表</view>
|
||||
<view class="zui-cell__ft">详细信息</view>
|
||||
<view class="zan-cell zan-cell--access zan-cell--last-child">
|
||||
<view class="zan-cell__bd">多行列表</view>
|
||||
<view class="zan-cell__ft">详细信息</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
|
||||
@ -2,10 +2,10 @@
|
||||
|
||||
<image class="logo" src="https://img.yzcdn.cn/public_files/2017/02/06/ee0ebced79a80457d77ce71c7d414c74.png"></image>
|
||||
|
||||
<view class="zui-panel">
|
||||
<navigator wx:for="{{ list }}" wx:key="name" class="zui-cell zui-cell--access" url="{{ item.path }}">
|
||||
<view class="zui-cell__bd">{{ item.name }}</view>
|
||||
<view class="zui-cell__ft"></view>
|
||||
<view class="zan-panel">
|
||||
<navigator wx:for="{{ list }}" wx:key="name" class="zan-cell zan-cell--access" url="{{ item.path }}">
|
||||
<view class="zan-cell__bd">{{ item.name }}</view>
|
||||
<view class="zan-cell__ft"></view>
|
||||
</navigator>
|
||||
</view>
|
||||
|
||||
|
||||
@ -2,15 +2,15 @@
|
||||
|
||||
<view class="doc-title">DIALOG</view>
|
||||
|
||||
<view class="zui-btns" style="margin-top: 30vh;">
|
||||
<button class="zui-btn" bindtap="toggleDialog">
|
||||
<view class="zan-btns" style="margin-top: 30vh;">
|
||||
<button class="zan-btn" bindtap="toggleDialog">
|
||||
显示Dialog
|
||||
</button>
|
||||
</view>
|
||||
|
||||
<view class="zui-dialog {{ showDialog ? 'zui-dialog--show' : '' }}">
|
||||
<view class="zui-dialog__mask" bindtap="toggleDialog" />
|
||||
<view class="zui-dialog__container">
|
||||
<view class="zan-dialog {{ showDialog ? 'zan-dialog--show' : '' }}">
|
||||
<view class="zan-dialog__mask" bindtap="toggleDialog" />
|
||||
<view class="zan-dialog__container">
|
||||
<view style="padding: 100px 0; text-align: center;">Dialog内容</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
@ -2,26 +2,26 @@
|
||||
|
||||
<view class="doc-title">FORM</view>
|
||||
|
||||
<view class="zui-form">
|
||||
<view class="zui-cell zui-form__item">
|
||||
<text class="zui-form__title">收货人</text>
|
||||
<view class="zan-form">
|
||||
<view class="zan-cell zan-form__item">
|
||||
<text class="zan-form__title">收货人</text>
|
||||
<input
|
||||
class="zui-form__input zui-cell__bd"
|
||||
class="zan-form__input zan-cell__bd"
|
||||
placeholder="名字"
|
||||
/>
|
||||
</view>
|
||||
<view class="zui-cell zui-form__item">
|
||||
<text class="zui-form__title">联系电话</text>
|
||||
<view class="zan-cell zan-form__item">
|
||||
<text class="zan-form__title">联系电话</text>
|
||||
<input
|
||||
class="zui-form__input zui-cell__bd"
|
||||
class="zan-form__input zan-cell__bd"
|
||||
type="number"
|
||||
maxlength="20"
|
||||
placeholder="手机或固定电话"
|
||||
/>
|
||||
</view>
|
||||
<view class="zui-cell zui-form__item zui-cell--last-child">
|
||||
<text class="zui-form__title">选择区域</text>
|
||||
<view class="zui-form__input zui-cell__bd">
|
||||
<view class="zan-cell zan-form__item zan-cell--last-child">
|
||||
<text class="zan-form__title">选择区域</text>
|
||||
<view class="zan-form__input zan-cell__bd">
|
||||
<picker
|
||||
mode="selector"
|
||||
range="{{ area }}"
|
||||
|
||||
@ -1,71 +1,71 @@
|
||||
<view class="container">
|
||||
|
||||
<view class="zui-panel">
|
||||
<view class="zui-cell">
|
||||
<view class="zui-cell__bd">
|
||||
<view class="zui-pull-right">zui-pull-right: 往右靠</view>
|
||||
<view class="zan-panel">
|
||||
<view class="zan-cell">
|
||||
<view class="zan-cell__bd">
|
||||
<view class="zan-pull-right">zan-pull-right: 往右靠</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view class="zui-cell">
|
||||
<view class="zui-cell__bd">
|
||||
<view class="zui-text-deleted">zui-text-deleted：被删除的效果</view>
|
||||
<view class="zan-cell">
|
||||
<view class="zan-cell__bd">
|
||||
<view class="zan-text-deleted">zan-text-deleted：被删除的效果</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view class="zui-cell">
|
||||
<view class="zui-cell__bd">
|
||||
<view class="zan-cell">
|
||||
<view class="zan-cell__bd">
|
||||
<view>
|
||||
<view class="zui-font-12">zui-font-12：字号12</view>
|
||||
<view class="zui-font-12 zui-font-bold">zui-font-bold：再来个加粗</view>
|
||||
<view class="zan-font-12">zan-font-12：字号12</view>
|
||||
<view class="zan-font-12 zan-font-bold">zan-font-bold：再来个加粗</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view class="zui-cell">
|
||||
<view class="zui-cell__bd">
|
||||
<view class="zan-cell">
|
||||
<view class="zan-cell__bd">
|
||||
<view>
|
||||
<view class="zui-font-16">zui-font-16：字号16</view>
|
||||
<view class="zui-font-16 zui-font-bold">zui-font-bold：再来个加粗</view>
|
||||
<view class="zan-font-16">zan-font-16：字号16</view>
|
||||
<view class="zan-font-16 zan-font-bold">zan-font-bold：再来个加粗</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view class="zui-cell">
|
||||
<view class="zui-cell__bd">
|
||||
<view class="zan-cell">
|
||||
<view class="zan-cell__bd">
|
||||
<view class="">
|
||||
<view>字体颜色</view>
|
||||
<view class="zui-c-red">zui-c-red: 红色</view>
|
||||
<view class="zui-c-gray">zui-c-gray: 灰色</view>
|
||||
<view class="zui-c-gray-dark">zui-c-gray-dark: 再灰一点点</view>
|
||||
<view class="zui-c-gray-darker">zui-c-gray-darker: 更深的灰色</view>
|
||||
<view class="zui-c-black">zui-c-black: 黑色</view>
|
||||
<view class="zui-c-blue">zui-c-blue: 蓝色</view>
|
||||
<view class="zui-c-green">zui-c-green: 绿色</view>
|
||||
<view class="zan-c-red">zan-c-red: 红色</view>
|
||||
<view class="zan-c-gray">zan-c-gray: 灰色</view>
|
||||
<view class="zan-c-gray-dark">zan-c-gray-dark: 再灰一点点</view>
|
||||
<view class="zan-c-gray-darker">zan-c-gray-darker: 更深的灰色</view>
|
||||
<view class="zan-c-black">zan-c-black: 黑色</view>
|
||||
<view class="zan-c-blue">zan-c-blue: 蓝色</view>
|
||||
<view class="zan-c-green">zan-c-green: 绿色</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view class="zui-cell">
|
||||
<view class="zui-cell__bd">
|
||||
<view>zui-arrow：箭头</view>
|
||||
<view class="zui-arrow"></view>
|
||||
<view class="zan-cell">
|
||||
<view class="zan-cell__bd">
|
||||
<view>zan-arrow：箭头</view>
|
||||
<view class="zan-arrow"></view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view class="zui-cell">
|
||||
<view class="zui-cell__bd">
|
||||
<view class="zui-ellipsis" style="width: 300px;">
|
||||
zui-ellipsis：单行点点点
|
||||
<view class="zan-cell">
|
||||
<view class="zan-cell__bd">
|
||||
<view class="zan-ellipsis" style="width: 300px;">
|
||||
zan-ellipsis：单行点点点
|
||||
->我是占位的字符我是占位的字符我是占位的字符我是占位的字符我是占位的字符我是占位的字符
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view class="zui-cell zui-cell--last-child">
|
||||
<view class="zui-cell__bd">
|
||||
<view class="zui-ellipsis--l2">
|
||||
zui-ellipsis--l2：单行点点点
|
||||
<view class="zan-cell zan-cell--last-child">
|
||||
<view class="zan-cell__bd">
|
||||
<view class="zan-ellipsis--l2">
|
||||
zan-ellipsis--l2：单行点点点
|
||||
->我是占位的字符我是占位的字符我是占位的字符我是占位的字符我是占位的字符我是占位的字符
|
||||
</view>
|
||||
</view>
|
||||
|
||||
@ -2,16 +2,16 @@
|
||||
|
||||
<view class="doc-title">ICON</view>
|
||||
|
||||
<view class="zui-panel">
|
||||
<view class="zan-panel">
|
||||
<view wx:for="{{ icons }}" wx:for-item="icon" class="icon-wrap">
|
||||
<view class="zui-icon zui-icon-{{ icon }}" style="font-size: 20px; color: #ff4343;"></view>
|
||||
<view class="icon-classname">zui-icon-{{ icon }}</view>
|
||||
<view class="zan-icon zan-icon-{{ icon }}" style="font-size: 20px; color: #ff4343;"></view>
|
||||
<view class="icon-classname">zan-icon-{{ icon }}</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="zui-panel" style="margin-bottom: 40px;">
|
||||
<view class="zan-panel" style="margin-bottom: 40px;">
|
||||
<view wx:for="{{ icons }}" wx:for-item="icon" class="icon-wrap">
|
||||
<view class="zui-icon zui-icon-{{ icon }}" style="font-size: 40px;"></view>
|
||||
<view class="icon-classname">zui-icon-{{ icon }}</view>
|
||||
<view class="zan-icon zan-icon-{{ icon }}" style="font-size: 40px;"></view>
|
||||
<view class="icon-classname">zan-icon-{{ icon }}</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
@ -8,7 +8,7 @@
|
||||
color: #999;
|
||||
font-size: 10px;
|
||||
}
|
||||
.zui-icon {
|
||||
.zan-icon {
|
||||
font-size: 40px;
|
||||
margin: 20px;
|
||||
}
|
||||
|
||||
@ -2,24 +2,24 @@
|
||||
|
||||
<view class="doc-title">LABEL</view>
|
||||
|
||||
<view class="zui-panel">
|
||||
<view class="zui-cell zui-cell--last-child">
|
||||
<view class="zui-label">蓝色</view>
|
||||
<view class="zui-label zui-label--primary">红色</view>
|
||||
<view class="zui-label zui-label--disabled">黑色</view>
|
||||
<view class="zan-panel">
|
||||
<view class="zan-cell zan-cell--last-child">
|
||||
<view class="zan-label">蓝色</view>
|
||||
<view class="zan-label zan-label--primary">红色</view>
|
||||
<view class="zan-label zan-label--disabled">黑色</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="zui-panel">
|
||||
<view class="zui-cell zui-cell--last-child">
|
||||
<view class="zui-label zui-label--primary zui-label--small">会员折扣</view>
|
||||
<view class="zui-label zui-label--primary zui-label--small">返现</view>
|
||||
<view class="zan-panel">
|
||||
<view class="zan-cell zan-cell--last-child">
|
||||
<view class="zan-label zan-label--primary zan-label--small">会员折扣</view>
|
||||
<view class="zan-label zan-label--primary zan-label--small">返现</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view class="zui-panel">
|
||||
<view class="zui-cell zui-cell--last-child">
|
||||
<view class="zui-label zui-label--primary zui-label--small zui-label--plain">会员折扣</view>
|
||||
<view class="zui-label zui-label--primary zui-label--small zui-label--plain">返现</view>
|
||||
<view class="zan-panel">
|
||||
<view class="zan-cell zan-cell--last-child">
|
||||
<view class="zan-label zan-label--primary zan-label--small zan-label--plain">会员折扣</view>
|
||||
<view class="zan-label zan-label--primary zan-label--small zan-label--plain">返现</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
@ -3,7 +3,7 @@
|
||||
|
||||
<view class="doc-title">LOADMORE</view>
|
||||
|
||||
<template is="zui-loadmore" data="{{loading: true}}" />
|
||||
<template is="zui-loadmore" data="{{nodata: true}}" />
|
||||
<template is="zui-loadmore" data="{{nomore: true}}" />
|
||||
<template is="zan-loadmore" data="{{loading: true}}" />
|
||||
<template is="zan-loadmore" data="{{nodata: true}}" />
|
||||
<template is="zan-loadmore" data="{{nomore: true}}" />
|
||||
</view>
|
||||
|
||||
@ -2,16 +2,16 @@
|
||||
|
||||
<view class="doc-title">PANEL</view>
|
||||
|
||||
<view class="zui-panel-title">标题</view>
|
||||
<view class="zui-panel">
|
||||
<view class="zan-panel-title">标题</view>
|
||||
<view class="zan-panel">
|
||||
<view style="padding: 15px;">内容</view>
|
||||
</view>
|
||||
|
||||
<view class="zui-panel">
|
||||
<view class="zan-panel">
|
||||
<view style="padding: 15px;">内容</view>
|
||||
</view>
|
||||
|
||||
<view class="zui-panel">
|
||||
<view class="zan-panel">
|
||||
<view style="padding: 15px;">内容</view>
|
||||
</view>
|
||||
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
var ZUI = require('../../dist/index');
|
||||
var Zan = require('../../dist/index');
|
||||
|
||||
Page(Object.assign({}, ZUI.Quantity, {
|
||||
Page(Object.assign({}, Zan.Quantity, {
|
||||
data: {
|
||||
quantity1: {
|
||||
quantity: 10,
|
||||
@ -19,7 +19,7 @@ Page(Object.assign({}, ZUI.Quantity, {
|
||||
}
|
||||
},
|
||||
|
||||
handleZuiQuantityChange(e) {
|
||||
handleZanQuantityChange(e) {
|
||||
var componentId = e.componentId;
|
||||
var quantity = e.quantity;
|
||||
|
||||
|
||||
@ -5,16 +5,16 @@
|
||||
<view class="doc-title">QUANTITY</view>
|
||||
|
||||
<view style="padding: 40px 15px">
|
||||
<template is="zui-quantity" data="{{ ...quantity1, componentId: 'quantity1' }}" />
|
||||
<template is="zan-quantity" data="{{ ...quantity1, componentId: 'quantity1' }}" />
|
||||
</view>
|
||||
|
||||
<!-- 当最大值等于最小值时，组件不可用 -->
|
||||
<view style="padding: 40px 15px ">
|
||||
<template is="zui-quantity" data="{{ ...quantity2, componentId: 'quantity2' }}" />
|
||||
<template is="zan-quantity" data="{{ ...quantity2, componentId: 'quantity2' }}" />
|
||||
</view>
|
||||
|
||||
<!-- small size -->
|
||||
<view style="padding: 40px 15px ">
|
||||
<template is="zui-quantity" data="{{ ...quantity3, componentId: 'quantity3', size: 'small' }}" />
|
||||
<template is="zan-quantity" data="{{ ...quantity3, componentId: 'quantity3', size: 'small' }}" />
|
||||
</view>
|
||||
</view>
|
||||
|
||||
@ -4,66 +4,66 @@
|
||||
|
||||
<view class="doc-title">STEPS</view>
|
||||
|
||||
<view class="zui-panel">
|
||||
<view class="zui-cell">
|
||||
<view class="zui-cell__bd">
|
||||
<template is="zui-steps" data="{{ type: 'horizon', steps: steps }}"></template>
|
||||
<view class="zan-panel">
|
||||
<view class="zan-cell">
|
||||
<view class="zan-cell__bd">
|
||||
<template is="zan-steps" data="{{ type: 'horizon', steps: steps }}"></template>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view class="zui-cell">
|
||||
<view class="zui-cell__bd">
|
||||
<template is="zui-steps" data="{{ type: 'horizon', steps: steps2 }}"></template>
|
||||
<view class="zan-cell">
|
||||
<view class="zan-cell__bd">
|
||||
<template is="zan-steps" data="{{ type: 'horizon', steps: steps2 }}"></template>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view class="zui-cell zui-cell--last-child">
|
||||
<view class="zui-cell__bd">
|
||||
<template is="zui-steps" data="{{ type: 'horizon', steps: steps3 }}"></template>
|
||||
<view class="zan-cell zan-cell--last-child">
|
||||
<view class="zan-cell__bd">
|
||||
<template is="zan-steps" data="{{ type: 'horizon', steps: steps3 }}"></template>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view class="zui-panel-title">有描述的steps</view>
|
||||
<view class="zui-panel">
|
||||
<view class="zui-cell">
|
||||
<view class="zui-cell__bd">
|
||||
<template is="zui-steps" data="{{ type: 'horizon', hasDesc: true, steps: steps }}"></template>
|
||||
<view class="zan-panel-title">有描述的steps</view>
|
||||
<view class="zan-panel">
|
||||
<view class="zan-cell">
|
||||
<view class="zan-cell__bd">
|
||||
<template is="zan-steps" data="{{ type: 'horizon', hasDesc: true, steps: steps }}"></template>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view class="zui-cell">
|
||||
<view class="zui-cell__bd">
|
||||
<template is="zui-steps" data="{{ type: 'horizon', hasDesc: true, steps: steps2 }}"></template>
|
||||
<view class="zan-cell">
|
||||
<view class="zan-cell__bd">
|
||||
<template is="zan-steps" data="{{ type: 'horizon', hasDesc: true, steps: steps2 }}"></template>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view class="zui-cell zui-cell--last-child">
|
||||
<view class="zui-cell__bd">
|
||||
<template is="zui-steps" data="{{ type: 'horizon', hasDesc: true, steps: steps3 }}"></template>
|
||||
<view class="zan-cell zan-cell--last-child">
|
||||
<view class="zan-cell__bd">
|
||||
<template is="zan-steps" data="{{ type: 'horizon', hasDesc: true, steps: steps3 }}"></template>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view class="zui-panel-title">垂直方向的steps</view>
|
||||
<view class="zui-panel">
|
||||
<view class="zui-cell zui-cell">
|
||||
<view class="zui-cell__bd">
|
||||
<template is="zui-steps" data="{{ type: 'vertical', hasDesc: true, steps }}"></template>
|
||||
<view class="zan-panel-title">垂直方向的steps</view>
|
||||
<view class="zan-panel">
|
||||
<view class="zan-cell zan-cell">
|
||||
<view class="zan-cell__bd">
|
||||
<template is="zan-steps" data="{{ type: 'vertical', hasDesc: true, steps }}"></template>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view class="zui-cell zui-cell--last-child">
|
||||
<view class="zui-cell__bd">
|
||||
<template is="zui-steps" data="{{ type: 'vertical', steps }}"></template>
|
||||
<view class="zan-cell zan-cell--last-child">
|
||||
<view class="zan-cell__bd">
|
||||
<template is="zan-steps" data="{{ type: 'vertical', steps }}"></template>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view class="zui-panel-title">可自定义class</view>
|
||||
<view class="zui-panel">
|
||||
<view class="zui-cell__bd">
|
||||
<template is="zui-steps" data="{{ type: 'vertical', steps, className: 'my-class' }}"></template>
|
||||
<view class="zan-panel-title">可自定义class</view>
|
||||
<view class="zan-panel">
|
||||
<view class="zan-cell__bd">
|
||||
<template is="zan-steps" data="{{ type: 'vertical', steps, className: 'my-class' }}"></template>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
.my-class {
|
||||
padding: 10px;
|
||||
}
|
||||
.my-class .zui-steps__step--done {
|
||||
.my-class .zan-steps__step--done {
|
||||
color: #f44;
|
||||
}
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
var ZUI = require('../../dist/index');
|
||||
var Zan = require('../../dist/index');
|
||||
|
||||
Page(Object.assign({}, ZUI.Tab, {
|
||||
Page(Object.assign({}, Zan.Tab, {
|
||||
data: {
|
||||
tab1: {
|
||||
list: [{
|
||||
@ -70,7 +70,7 @@ Page(Object.assign({}, ZUI.Tab, {
|
||||
}
|
||||
},
|
||||
|
||||
handleZuiTabChange(e) {
|
||||
handleZanTabChange(e) {
|
||||
var componentId = e.componentId;
|
||||
var selectedId = e.selectedId;
|
||||
|
||||
|
||||
@ -5,12 +5,12 @@
|
||||
<view class="doc-title">TAB</view>
|
||||
|
||||
<view style="margin: 20px 0">
|
||||
<template is="zui-tab" data="{{tab: tab1, componentId: 'tab1'}}"></template>
|
||||
<template is="zan-tab" data="{{tab: tab1, componentId: 'tab1'}}"></template>
|
||||
</view>
|
||||
<view style="margin: 20px 0">
|
||||
<template is="zui-tab" data="{{tab: tab2, componentId: 'tab2'}}"></template>
|
||||
<template is="zan-tab" data="{{tab: tab2, componentId: 'tab2'}}"></template>
|
||||
</view>
|
||||
<view style="margin: 20px 0">
|
||||
<template is="zui-tab" data="{{tab: tab3, componentId: 'tab3'}}"></template>
|
||||
<template is="zan-tab" data="{{tab: tab3, componentId: 'tab3'}}"></template>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
@ -1,9 +1,9 @@
|
||||
var ZUI = require('../../dist/index');
|
||||
var Zan = require('../../dist/index');
|
||||
|
||||
Page(Object.assign({}, ZUI.Toast, {
|
||||
Page(Object.assign({}, Zan.Toast, {
|
||||
data: {},
|
||||
|
||||
showToast() {
|
||||
this.showZuiToast('toast的内容');
|
||||
this.showZanToast('toast的内容');
|
||||
}
|
||||
}));
|
||||
|
||||
@ -4,11 +4,11 @@
|
||||
|
||||
<view class="doc-title">TOAST</view>
|
||||
|
||||
<view class="zui-btns" style="margin-top: 30vh;">
|
||||
<button class="zui-btn" bindtap="showToast">
|
||||
<view class="zan-btns" style="margin-top: 30vh;">
|
||||
<button class="zan-btn" bindtap="showToast">
|
||||
显示toast
|
||||
</button>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<template is="zui-toast" data="{{ zuiToast }}"></template>
|
||||
<template is="zan-toast" data="{{ zanToast }}"></template>
|
||||
|
||||
@ -1,9 +1,9 @@
|
||||
var ZUI = require('../../dist/index');
|
||||
var Zan = require('../../dist/index');
|
||||
|
||||
Page(Object.assign({}, ZUI.TopTips, {
|
||||
Page(Object.assign({}, Zan.TopTips, {
|
||||
data: {},
|
||||
|
||||
showTopTips() {
|
||||
this.showZuiTopTips('toptips的内容');
|
||||
this.showZanTopTips('toptips的内容');
|
||||
}
|
||||
}));
|
||||
|
||||
@ -4,11 +4,11 @@
|
||||
|
||||
<view class="doc-title">TOPTIPS</view>
|
||||
|
||||
<view class="zui-btns" style="margin-top: 30vh;">
|
||||
<button class="zui-btn" bindtap="showTopTips">
|
||||
<view class="zan-btns" style="margin-top: 30vh;">
|
||||
<button class="zan-btn" bindtap="showTopTips">
|
||||
显示toptips
|
||||
</button>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<template is="zui-toptips" data="{{ zuiTopTips }}"></template>
|
||||
<template is="zan-toptips" data="{{ zanTopTips }}"></template>
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user