blackteay/vant-weapp
1
0
Fork 0
mirror of https://gitee.com/vant-contrib/vant-weapp.git synced 2025-04-06 03:58:05 +08:00
Code Issues Projects Releases Wiki Activity

Merge branch 'master' of gitlab.qima-inc.com:weapp/zui

Browse Source
This commit is contained in:
Nino 2017-01-10 18:05:36 +08:00
commit 79e8d41ae1
12 changed files with 183 additions and 235 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
app.json
View File

@ -15,7 +15,6 @@
"example/steps/index",
"example/card/index",
"example/toast/index",
"example/vsteps/index",
"example/icon/index",
"example/dialog/index"
],

1
dist/index.wxss vendored
View File

@ -14,5 +14,4 @@
@import "steps/index.wxss";
@import "toast/index.wxss";
@import "toptips/index.wxss";
@import "vsteps/index.wxss";
@import "icon/index.wxss";

14
dist/steps/index.wxml vendored Normal file
View File

@ -0,0 +1,14 @@
<template name="zui-steps">
<view class="zui-steps zui-steps--{{ type == 'vertical' ? 'vsteps' : 'steps' }} zui-steps--{{ steps.length }} {{ className }}">
<view
wx:for="{{ steps }}" wx:for-item="step" wx:key="unique" wx:for-index="index"
class="zui-steps__step {{ 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' : '' }}"
>
<view class="zui-steps__title">{{ step.text }}</view>
<view class="zui-steps__icons">
<view class="zui-steps__circle"></view>
</view>
<view class="zui-steps__line"></view>
</view>
</view>
</template>

119
dist/steps/index.wxss vendored
View File

@ -1,119 +1,6 @@
@import "wxss/step.wxss";
@import "wxss/vstep.wxss";
.zui-steps {
position: relative;
}
.zui-steps-5 .zui-steps__step {
width: 25%;
}
.zui-steps-4 .zui-steps__step {
width: 33%;
}
.zui-steps-3 .zui-steps__step {
width: 50%;
}
.zui-steps__step {
position: relative;
float: left;
padding-bottom: 20px;
color: #b1b1b1;
}
.zui-steps__title {
display: inline-block;
transform: translateX(-50%);
margin-left: 2px;
font-size: 10px;
}
.zui-steps__icon {
position: absolute;
top: 28px;
left: -8px;
padding: 0 8px;
background-color: #fff;
z-index: 10;
}
.zui-steps__circle {
display: block;
position: relative;
width: 5px;
height: 5px;
background-color: #e5e5e5;
border-radius: 50%;
}
.zui-steps__line {
position: absolute;
left: 0px;
top: 30px;
width: 100%;
height: 1px;
background-color: #e5e5e5;
}
/* 已完成的steps */
.zui-steps__step--done {
color: #333;
}
.zui-steps__step--done .zui-steps__line {
background-color: #06bf04;
}
.zui-steps__step--done .zui-steps__circle {
width: 5px;
height: 5px;
background-color: #09bb07;
}
/* 正在进行中的steps */
.zui-steps__step--cur .zui-steps__icon {
top: 24px;
}
.zui-steps__step--cur .zui-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__step--cur .zui-steps__title {
margin-left: 6px;
}
.zui-steps__step--cur .zui-steps__line {
background-color: #e5e5e5;
}
/* 各种不同位置的 */
.zui-steps__step--first-child .zui-steps__title {
margin-left: 0;
transform: none;
}
.zui-steps__step--last-child {
position: absolute;
right: 0;
top: 0;
bottom: 0;
text-align: right;
}
.zui-steps__step--last-child .zui-steps__title {
transform: none;
}
.zui-steps__step--last-child .zui-steps__icon {
left: auto;
right: -6px;
}
.zui-steps__step--last-child .zui-steps__line {
display: none;
}

115
dist/steps/wxss/step.wxss vendored Normal file
View File

@ -0,0 +1,115 @@
.zui-steps--steps.zui-steps--5 .zui-steps__step {
width: 25%;
}
.zui-steps--steps.zui-steps--4 .zui-steps__step {
width: 33%;
}
.zui-steps--steps.zui-steps--3 .zui-steps__step {
width: 50%;
}
.zui-steps--steps .zui-steps__step {
position: relative;
float: left;
padding-bottom: 20px;
color: #b1b1b1;
}
.zui-steps--steps .zui-steps__title {
display: inline-block;
transform: translateX(-50%);
margin-left: 2px;
font-size: 10px;
}
.zui-steps--steps .zui-steps__icons {
position: absolute;
top: 28px;
left: -8px;
padding: 0 8px;
background-color: #fff;
z-index: 10;
}
.zui-steps--steps .zui-steps__circle {
display: block;
position: relative;
width: 5px;
height: 5px;
background-color: #e5e5e5;
border-radius: 50%;
}
.zui-steps--steps .zui-steps__line {
position: absolute;
left: 0px;
top: 30px;
width: 100%;
height: 1px;
background-color: #e5e5e5;
}
/* 已完成的steps */
.zui-steps--steps .zui-steps__step--done {
color: #333;
}
.zui-steps--steps .zui-steps__step--done .zui-steps__line {
background-color: #06bf04;
}
.zui-steps--steps .zui-steps__step--done .zui-steps__circle {
width: 5px;
height: 5px;
background-color: #09bb07;
}
/* 正在进行中的steps */
.zui-steps--steps .zui-steps__step--cur .zui-steps__icons {
top: 24px;
}
.zui-steps--steps .zui-steps__step--cur .zui-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__title {
margin-left: 6px;
}
.zui-steps--steps .zui-steps__step--cur .zui-steps__line {
background-color: #e5e5e5;
}
/* 各种不同位置的 */
.zui-steps--steps .zui-steps__step--first-child .zui-steps__title {
margin-left: 0;
transform: none;
}
.zui-steps--steps .zui-steps__step--last-child {
position: absolute;
right: 0;
top: 0;
bottom: 0;
text-align: right;
}
.zui-steps--steps .zui-steps__step--last-child .zui-steps__title {
transform: none;
}
.zui-steps--steps .zui-steps__step--last-child .zui-steps__icons {
left: auto;
right: -6px;
}
.zui-steps--steps .zui-steps__step--last-child .zui-steps__line {
display: none;
}

41
dist/vsteps/index.wxss → dist/steps/wxss/vstep.wxss vendored
View File

@ -1,35 +1,34 @@
.zui-vsteps {
position: relative;
padding: 15px;
.zui-steps--vsteps {
color: #999;
font-size: 14px;
}
.zui-vsteps::after {
left: 42px;
.zui-steps--vsteps .zui-steps__step {
position: relative;
padding: 15px 0;
}
.zui-vsteps__step--done {
.zui-steps--vsteps .zui-steps__step--done {
color: #44BB00;
}
.zui-vsteps__line {
.zui-steps--vsteps .zui-steps__line {
position: absolute;
top: 0;
bottom: 0;
left: 22px;
left: 7px;
width: 1px;
background-color: #e5e5e5;
}
.zui-vsteps__title {
.zui-steps--vsteps .zui-steps__title {
line-height: 20px;
padding-left: 27px;
}
.zui-vsteps__icons {
.zui-steps--vsteps .zui-steps__icons {
position: absolute;
left: 22px;
left: 7px;
top: 50%;
transform: translate(-50%, -50%);
z-index: 2;
@ -37,43 +36,43 @@
background-color: #fff;
}
.zui-vsteps__circle {
.zui-steps--vsteps .zui-steps__circle {
width: 5px;
height: 5px;
background-color: #cacaca;
border-radius: 10px;
}
.zui-vsteps__step--done .zui-vsteps__circle {
.zui-steps--vsteps .zui-steps__step--done .zui-steps__circle {
width: 13px;
height: 13px;
color: #09bb07;
background-color: transparent;
background: transparent url("https://b.yzcdn.cn/v2/image/wap/success_small@2x.png");
background-size: 13px 13px;
border-radius:0;
}
.zui-vsteps__icon--active {
.zui-steps--vsteps .zui-steps__icon--active {
width: 13px;
height: 13px;
}
.zui-vsteps--first-child .zui-vsteps__title::before {
.zui-steps--vsteps .zui-steps__step--first-child .zui-steps__title::before {
content: '';
position: absolute;
top: 0;
bottom: 50%;
left: 22px;
left: 7px;
width: 1px;
background-color: #fff;
z-index: 1;
}
.zui-vsteps--last-child .zui-vsteps__title::before {
.zui-steps--vsteps .zui-steps__step--last-child .zui-steps__title::before {
content: '';
position: absolute;
top: 50%;
bottom: 0%;
left: 22px;
left: 7px;
width: 1px;
background-color: #fff;
z-index: 1;

3
example/dashboard/index.js
View File

@ -42,9 +42,6 @@ Page({
}, {
name: 'Steps',
path: '/example/steps/index'
}, {
name: 'Vsteps',
path: '/example/vsteps/index'
}, {
name: 'Tab',
path: '/example/tab/index'

17
example/steps/index.js
View File

@ -2,6 +2,23 @@ var app = getApp()
Page({
data: {
steps: [
{
current: false,
done: true,
text: '步骤一'
},
{
done: true,
current: true,
text: '步骤二'
},
{
done: false,
current: false,
text: '步骤三'
}
]
},
onLoad: function () {

66
example/steps/index.wxml
View File

@ -1,69 +1,25 @@
<import src="/dist/steps/index.wxml" />
<view class="container">
<view class="zui-panel">
<view class="zui-cell">
<view class="zui-cell__bd">
<view class="top-info__steps zui-steps zui-steps-3">
<view
class="zui-steps__step zui-steps__step--first-child zui-steps__step--done">
<text class="zui-steps__title">步骤一</text>
<view class="zui-steps__icon">
<view class="zui-steps__circle"></view>
</view>
<view class="zui-steps__line"></view>
</view>
<view class="zui-steps__step zui-steps__step--done zui-steps__step--cur">
<text class="zui-steps__title">步骤二</text>
<view class="zui-steps__icon">
<view class="zui-steps__circle"></view>
</view>
<view class="zui-steps__line"></view>
</view>
<view class="zui-steps__step zui-steps__step--last-child">
<text class="zui-steps__title">步骤三</text>
<view class="zui-steps__icon">
<view class="zui-steps__circle"></view>
</view>
<view class="zui-steps__line"></view>
</view>
</view>
<template is="zui-steps" data="{{ type: 'horizon', steps }}"></template>
</view>
</view>
<view class="zui-cell zui-cell--last-child">
<view class="zui-cell__bd">
<view class="top-info__steps zui-steps zui-steps-4">
<view
class="zui-steps__step zui-steps__step--first-child zui-steps__step--done">
<text class="zui-steps__title">步骤一</text>
<view class="zui-steps__icon">
<view class="zui-steps__circle"></view>
</view>
<view class="zui-steps__line"></view>
</view>
<view class="zui-steps__step zui-steps__step--done">
<text class="zui-steps__title">步骤二</text>
<view class="zui-steps__icon">
<view class="zui-steps__circle"></view>
</view>
<view class="zui-steps__line"></view>
</view>
<view class="zui-steps__step zui-steps__step--done zui-steps__step--cur">
<text class="zui-steps__title">步骤三</text>
<view class="zui-steps__icon">
<view class="zui-steps__circle"></view>
</view>
<view class="zui-steps__line"></view>
</view>
<view class="zui-steps__step zui-steps__step--last-child">
<text class="zui-steps__title">步骤四</text>
<view class="zui-steps__icon">
<view class="zui-steps__circle"></view>
</view>
<view class="zui-steps__line"></view>
</view>
</view>
<template is="zui-steps" data="{{ type: 'vertical', steps }}"></template>
</view>
</view>
</view>
<view class="zui-panel">
<view class="zui-cell">
<view class="zui-cell__bd">可自定义class</view>
</view>
<template is="zui-steps" data="{{ type: 'vertical', steps, className: 'my-class' }}"></template>
</view>
</view>

3
example/steps/index.wxss Normal file
View File

@ -0,0 +1,3 @@
.my-class {
padding: 5px 15px;
}

13
example/vsteps/index.js
View File

@ -1,13 +0,0 @@
var app = getApp()
Page({
data: {
},
onLoad: function () {
},
onShow: function() {
},
})

25
example/vsteps/index.wxml
View File

@ -1,25 +0,0 @@
<view class="container">
<view class="zui-panel">
<view class="zui-vsteps zui-vsteps__step--done zui-vsteps--first-child">
<view class="zui-vsteps__title">买家退款 (2016-03-21 19:20:20)</view>
<view class="zui-vsteps__icons">
<view class="zui-vsteps__circle zui-icon zui-icon-checked"></view>
</view>
<view class="zui-vsteps__line"></view>
</view>
<view class="zui-vsteps zui-vsteps__step--done zui-vsteps__step--cur">
<view class="zui-vsteps__title">卖家同意 (2016-03-22 21:20:20)</view>
<view class="zui-vsteps__icons">
<view class="zui-vsteps__circle zui-icon zui-icon-checked"></view>
</view>
<view class="zui-vsteps__line"></view>
</view>
<view class="zui-vsteps zui-vsteps--last-child">
<view class="zui-vsteps__title">卖家退款 (2016-03-23 20:20:20)</view>
<view class="zui-vsteps__icons">
<view class="zui-vsteps__circle"></view>
</view>
<view class="zui-vsteps__line"></view>
</view>
</view>
</view>