mirror of
https://gitee.com/vant-contrib/vant-weapp.git
synced 2025-04-05 19:41:45 +08:00
[breaking change] Steps: rewrite
This commit is contained in:
陈嘉涵
parent
3434eb2ac7
commit
553628143d
@ -10,6 +10,10 @@ page {
|
||||
font-family: 'PingFang SC', Helvetica, 'STHeiti STXihei', 'Microsoft YaHei', Tohoma, Arial, sans-serif;
|
||||
}
|
||||
|
||||
.demo-margin-left {
|
||||
margin-left: 10px;
|
||||
}
|
||||
|
||||
.demo-margin-right {
|
||||
margin-right: 10px;
|
||||
}
|
||||
|
||||
@ -1,98 +1,29 @@
|
||||
Page({
|
||||
data: {
|
||||
active: 0,
|
||||
steps: [
|
||||
{
|
||||
current: true,
|
||||
done: true,
|
||||
text: '步骤一',
|
||||
desc: '10.01'
|
||||
desc: '描述信息'
|
||||
},
|
||||
{
|
||||
done: false,
|
||||
current: false,
|
||||
text: '步骤二',
|
||||
desc: '10.02'
|
||||
desc: '描述信息'
|
||||
},
|
||||
{
|
||||
done: false,
|
||||
current: false,
|
||||
text: '步骤三'
|
||||
}
|
||||
],
|
||||
steps2: [
|
||||
{
|
||||
current: false,
|
||||
done: true,
|
||||
text: '步骤一',
|
||||
desc: '10.01'
|
||||
},
|
||||
{
|
||||
done: true,
|
||||
current: true,
|
||||
text: '步骤二',
|
||||
desc: '10.02'
|
||||
},
|
||||
{
|
||||
done: false,
|
||||
current: false,
|
||||
text: '步骤三',
|
||||
desc: '10.03'
|
||||
}
|
||||
],
|
||||
steps3: [
|
||||
{
|
||||
current: false,
|
||||
done: true,
|
||||
text: '步骤一',
|
||||
desc: '10.01'
|
||||
desc: '描述信息'
|
||||
},
|
||||
{
|
||||
done: true,
|
||||
current: false,
|
||||
text: '步骤二',
|
||||
desc: '10.02'
|
||||
},
|
||||
{
|
||||
done: true,
|
||||
current: true,
|
||||
text: '步骤三',
|
||||
desc: '10.03'
|
||||
text: '步骤四',
|
||||
desc: '描述信息'
|
||||
}
|
||||
],
|
||||
steps4: [
|
||||
{
|
||||
current: true,
|
||||
done: false,
|
||||
text: '步骤一',
|
||||
desc: '10.01'
|
||||
},
|
||||
{
|
||||
done: false,
|
||||
current: false,
|
||||
text: '步骤二',
|
||||
desc: '10.02'
|
||||
}
|
||||
],
|
||||
steps5: [
|
||||
{
|
||||
done: true,
|
||||
current: false,
|
||||
text: '步骤一',
|
||||
desc: '10.01'
|
||||
},
|
||||
{
|
||||
done: false,
|
||||
current: true,
|
||||
text: '步骤二',
|
||||
desc: '10.02'
|
||||
}
|
||||
]
|
||||
},
|
||||
|
||||
onLoad() {
|
||||
|
||||
},
|
||||
|
||||
onShow() {
|
||||
},
|
||||
nextStep() {
|
||||
this.setData({
|
||||
active: ++this.data.active % 4
|
||||
});
|
||||
}
|
||||
});
|
||||
|
||||
@ -1,9 +1,8 @@
|
||||
{
|
||||
"navigationBarTitleText": "Steps 步骤条",
|
||||
"usingComponents": {
|
||||
"van-cell": "../../dist/cell/index",
|
||||
"van-cell-group": "../../dist/cell-group/index",
|
||||
"van-panel": "../../dist/panel/index",
|
||||
"demo-block": "../../components/demo-block/index",
|
||||
"van-button": "../../dist/button/index",
|
||||
"van-steps": "../../dist/steps/index"
|
||||
}
|
||||
}
|
||||
|
||||
@ -1,63 +1,18 @@
|
||||
<van-panel title="基础用法">
|
||||
<van-cell-group>
|
||||
<van-cell>
|
||||
<van-steps type="horizon" steps="{{steps}}"></van-steps>
|
||||
</van-cell>
|
||||
<van-cell>
|
||||
<van-steps type="horizon" steps="{{steps2}}"></van-steps>
|
||||
</van-cell>
|
||||
<van-cell>
|
||||
<van-steps type="horizon" steps="{{steps3}}"></van-steps>
|
||||
</van-cell>
|
||||
</van-cell-group>
|
||||
</van-panel>
|
||||
<demo-block title="基础用法">
|
||||
<van-steps
|
||||
steps="{{ steps }}"
|
||||
active="{{ active }}"
|
||||
custom-class="demo-margin-bottom"
|
||||
/>
|
||||
|
||||
<van-panel title="2步完成">
|
||||
<van-cell-group>
|
||||
<van-cell>
|
||||
<van-steps type="horizon" steps="{{steps4}}"></van-steps>
|
||||
</van-cell>
|
||||
<van-cell>
|
||||
<van-steps type="horizon" steps="{{steps5}}"></van-steps>
|
||||
</van-cell>
|
||||
</van-cell-group>
|
||||
</van-panel>
|
||||
<van-button custom-class="demo-margin-left" bind:tap="nextStep">下一步</van-button>
|
||||
</demo-block>
|
||||
|
||||
<van-panel title="有描述的steps">
|
||||
<van-cell-group>
|
||||
<van-cell>
|
||||
<van-steps type="horizon" hasDesc steps="{{steps}}"></van-steps>
|
||||
</van-cell>
|
||||
<van-cell>
|
||||
<van-steps type="horizon" hasDesc steps="{{steps2}}"></van-steps>
|
||||
</van-cell>
|
||||
<van-cell>
|
||||
<van-steps type="horizon" hasDesc steps="{{steps3}}"></van-steps>
|
||||
</van-cell>
|
||||
</van-cell-group>
|
||||
</van-panel>
|
||||
|
||||
<van-panel title="垂直方向的steps">
|
||||
<van-cell-group>
|
||||
<van-cell>
|
||||
<van-steps type="vertical" hasDesc steps="{{steps}}"></van-steps>
|
||||
</van-cell>
|
||||
<van-cell>
|
||||
<van-steps type="vertical" hasDesc steps="{{steps2}}"></van-steps>
|
||||
</van-cell>
|
||||
</van-cell-group>
|
||||
</van-panel>
|
||||
|
||||
<van-panel title="自定义 class">
|
||||
<van-cell-group>
|
||||
<van-cell cell-class="gray">
|
||||
<van-steps
|
||||
steps-class="my-class"
|
||||
icon-class="gray"
|
||||
title-class="white"
|
||||
type="horizon"
|
||||
steps="{{steps}}"
|
||||
></van-steps>
|
||||
</van-cell>
|
||||
</van-cell-group>
|
||||
</van-panel>
|
||||
<demo-block title="竖向步骤条">
|
||||
<van-steps
|
||||
steps="{{ steps }}"
|
||||
active="{{ active }}"
|
||||
direction="vertical"
|
||||
active-color="#f60"
|
||||
/>
|
||||
</demo-block>
|
||||
|
||||
@ -1,11 +0,0 @@
|
||||
.my-class {
|
||||
margin: 20px;
|
||||
}
|
||||
|
||||
.gray {
|
||||
background-color: #ccc !important;
|
||||
}
|
||||
|
||||
.white {
|
||||
color: #fff !important;
|
||||
}
|
||||
@ -29,8 +29,8 @@ Component({
|
||||
const style = gutter ? `margin-right: ${margin}; margin-left: ${margin};` : '';
|
||||
|
||||
this.setData({ style });
|
||||
this.getRelationNodes(COL_PATH).forEach(col => {
|
||||
col.setGutter(this.data.gutter)
|
||||
this.getRelationNodes(COL_PATH).forEach((col) => {
|
||||
col.setGutter(this.data.gutter);
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
@ -8,10 +8,8 @@
|
||||
|
||||
在 index.json 中引入组件
|
||||
```json
|
||||
{
|
||||
"usingComponents": {
|
||||
"van-steps": "path/to/vant-weapp/dist/steps/index"
|
||||
}
|
||||
"usingComponents": {
|
||||
"van-steps": "path/to/vant-weapp/dist/steps/index"
|
||||
}
|
||||
```
|
||||
|
||||
@ -20,92 +18,59 @@
|
||||
#### 基础用法
|
||||
|
||||
```html
|
||||
<van-steps type="horizon" steps="{{steps}}"></van-steps>
|
||||
<van-steps
|
||||
steps="{{ steps }}"
|
||||
active="{{ active }}"
|
||||
/>
|
||||
```
|
||||
|
||||
#### 2步完成
|
||||
|
||||
```html
|
||||
<van-steps type="horizon" steps="{{steps}}"></van-steps>
|
||||
```javascript
|
||||
Page({
|
||||
data: {
|
||||
steps: [
|
||||
{
|
||||
text: '步骤一',
|
||||
desc: '描述信息'
|
||||
},
|
||||
{
|
||||
text: '步骤二',
|
||||
desc: '描述信息'
|
||||
},
|
||||
{
|
||||
text: '步骤三',
|
||||
desc: '描述信息'
|
||||
},
|
||||
{
|
||||
text: '步骤四',
|
||||
desc: '描述信息'
|
||||
}
|
||||
]
|
||||
}
|
||||
});
|
||||
```
|
||||
|
||||
```js
|
||||
steps: [
|
||||
{
|
||||
done: true,
|
||||
current: false,
|
||||
text: '步骤一',
|
||||
desc: '10.01'
|
||||
},
|
||||
{
|
||||
done: false,
|
||||
current: true,
|
||||
text: '步骤二',
|
||||
desc: '10.02'
|
||||
}
|
||||
]
|
||||
```
|
||||
|
||||
#### 有描述的steps
|
||||
|
||||
```html
|
||||
<van-steps type="horizon" hasDesc steps="{{steps}}"></van-steps>
|
||||
```
|
||||
|
||||
#### 垂直方向的steps
|
||||
|
||||
```html
|
||||
<van-steps type="vertical" steps="{{steps}}"></van-steps>
|
||||
```
|
||||
|
||||
#### 自定义 class
|
||||
#### 竖向步骤条
|
||||
可以通过设置`direction`属性来改变步骤条的显示方式
|
||||
|
||||
```html
|
||||
<van-steps
|
||||
steps-class="my-class"
|
||||
icon-class="gray"
|
||||
title-class="white"
|
||||
type="horizon"
|
||||
steps="{{steps}}"
|
||||
></van-steps>
|
||||
steps="{{ steps }}"
|
||||
active="{{ active }}"
|
||||
direction="vertical"
|
||||
active-color="#f60"
|
||||
/>
|
||||
```
|
||||
|
||||
### Steps API
|
||||
|
||||
| 参数 | 说明 | 类型 | 默认值 |
|
||||
|-----------|-----------|-----------|-------------|
|
||||
| active | 当前步骤 | `Number` | 0 |
|
||||
| direction | 显示方向，可选值为 `horizontal` `vertical` | `String` | `horizontal` |
|
||||
| active-color | 激活状态颜色 | `String` | `#06bf04` |
|
||||
|
||||
| 参数 | 说明 | 类型 | 默认值 | 必须 |
|
||||
|-----------|-----------|-----------|-------------|-------------|
|
||||
| type | steps 的展示状态，可选值为 'horizon', 'vertical' | String | horizon | |
|
||||
| hasDesc | 是否展示描述 | Boolean | false | |
|
||||
| steps | 步骤条展示数据 | Array | | 必须 |
|
||||
| steps-class | 自定义类，可改变steps外层样式 | String | | |
|
||||
| icon-class | 自定义类，可改变icon样式 | String | | |
|
||||
| title-class | 自定义类，可改变标题样式 | String | | |
|
||||
| desc-class | 自定义类，可改变描述样式 | String | | |
|
||||
### 外部样式类
|
||||
|
||||
steps 数据格式如下：
|
||||
```js
|
||||
[
|
||||
{
|
||||
// 此步骤是否当前完成状态
|
||||
current: false,
|
||||
// 此步骤是否已经完成
|
||||
done: true,
|
||||
// 此步骤显示文案
|
||||
text: '步骤一',
|
||||
// 此步骤描述语
|
||||
desc: '10.01'
|
||||
},
|
||||
{
|
||||
done: true,
|
||||
current: false,
|
||||
text: '步骤二',
|
||||
desc: '10.02'
|
||||
},
|
||||
{
|
||||
done: true,
|
||||
current: true,
|
||||
text: '步骤三',
|
||||
desc: '10.03'
|
||||
}
|
||||
]
|
||||
```
|
||||
| 类名 | 说明 |
|
||||
|-----------|-----------|
|
||||
| custom-class | 根节点样式类 |
|
||||
|
||||
@ -1,21 +1,61 @@
|
||||
Component({
|
||||
externalClasses: ['steps-class', 'icon-class', 'title-class', 'desc-class'],
|
||||
externalClasses: [
|
||||
'custom-class',
|
||||
],
|
||||
|
||||
properties: {
|
||||
type: {
|
||||
type: String,
|
||||
value: 'horizon'
|
||||
},
|
||||
|
||||
hasDesc: {
|
||||
type: Boolean,
|
||||
value: false
|
||||
},
|
||||
|
||||
steps: { // 必须
|
||||
icon: String,
|
||||
steps: {
|
||||
type: Array,
|
||||
value: []
|
||||
observer() {
|
||||
this.formatSteps();
|
||||
}
|
||||
},
|
||||
active: {
|
||||
type: Number,
|
||||
observer() {
|
||||
this.formatSteps();
|
||||
}
|
||||
},
|
||||
direction: {
|
||||
type: String,
|
||||
value: 'horizontal'
|
||||
},
|
||||
activeColor: {
|
||||
type: String,
|
||||
value: '#06bf04'
|
||||
}
|
||||
},
|
||||
|
||||
attached() {
|
||||
this.formatSteps();
|
||||
},
|
||||
|
||||
methods: {
|
||||
formatSteps() {
|
||||
const { steps } = this.data;
|
||||
const formattedSteps = steps.map((step, index) => {
|
||||
return {
|
||||
...step,
|
||||
status: this.getStatus(index)
|
||||
};
|
||||
});
|
||||
|
||||
this.setData({
|
||||
formattedSteps
|
||||
});
|
||||
},
|
||||
|
||||
className: String
|
||||
getStatus(index) {
|
||||
const { active } = this.data;
|
||||
|
||||
if (index < active) {
|
||||
return 'finish';
|
||||
} else if (index === active) {
|
||||
return 'process';
|
||||
}
|
||||
|
||||
return '';
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
@ -1,3 +1,6 @@
|
||||
{
|
||||
"component": true
|
||||
"component": true,
|
||||
"usingComponents": {
|
||||
"van-icon": "../icon/index"
|
||||
}
|
||||
}
|
||||
|
||||
@ -1,6 +1,158 @@
|
||||
@import "wxss/step.pcss";
|
||||
@import "wxss/vstep.pcss";
|
||||
@import '../common/index.pcss';
|
||||
|
||||
.van-steps {
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
background-color: $white;
|
||||
|
||||
&--horizontal {
|
||||
display: flex;
|
||||
overflow: hidden;
|
||||
position: relative;
|
||||
padding: 10px 10px 15px;
|
||||
}
|
||||
|
||||
&--vertical {
|
||||
padding: 0 0 0 35px;
|
||||
}
|
||||
}
|
||||
|
||||
.van-step {
|
||||
flex: 1;
|
||||
font-size: 14px;
|
||||
position: relative;
|
||||
color: $gray-dark;
|
||||
|
||||
&--finish {
|
||||
color: $text-color;
|
||||
}
|
||||
|
||||
&__circle {
|
||||
width: 5px;
|
||||
height: 5px;
|
||||
background-color: #999;
|
||||
border-radius: 50%;
|
||||
}
|
||||
|
||||
&--horizontal {
|
||||
float: left;
|
||||
padding-bottom: 10px;
|
||||
|
||||
&:first-child {
|
||||
.van-step__title {
|
||||
transform: none;
|
||||
margin-left: 0;
|
||||
}
|
||||
}
|
||||
|
||||
&:last-child {
|
||||
position: absolute;
|
||||
right: 10px;
|
||||
width: auto;
|
||||
|
||||
.van-step__title {
|
||||
transform: none;
|
||||
margin-left: 0;
|
||||
text-align: right;
|
||||
}
|
||||
|
||||
.van-step__circle-container {
|
||||
left: auto;
|
||||
right: -9px;
|
||||
}
|
||||
|
||||
.van-step__line {
|
||||
width: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.van-step__circle-container {
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
left: -8px;
|
||||
padding: 0 8px;
|
||||
background-color: $white;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
.van-step__title {
|
||||
font-size: 12px;
|
||||
transform: translate3d(-50%, 0, 0);
|
||||
display: inline-block;
|
||||
margin-left: 3px;
|
||||
}
|
||||
|
||||
.van-step__line {
|
||||
position: absolute;
|
||||
left: 0;
|
||||
bottom: 2px;
|
||||
width: 100%;
|
||||
height: 1px;
|
||||
background-color: $border-color;
|
||||
}
|
||||
|
||||
&.van-step--process {
|
||||
color: $text-color;
|
||||
|
||||
.van-step__circle-container {
|
||||
bottom: -4px;
|
||||
}
|
||||
|
||||
.van-step__active {
|
||||
font-size: 12px;
|
||||
color: $green;
|
||||
display: block;
|
||||
line-height: 1;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&--vertical {
|
||||
font-size: 14px;
|
||||
line-height: 18px;
|
||||
padding: 10px 10px 10px 0;
|
||||
|
||||
&:not(:last-child)::after {
|
||||
border-bottom-width: 1px;
|
||||
}
|
||||
|
||||
&:first-child {
|
||||
&::before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
width: 1px;
|
||||
height: 20px;
|
||||
background-color: $white;
|
||||
top: 0;
|
||||
left: -15px;
|
||||
z-index: 1;
|
||||
}
|
||||
}
|
||||
|
||||
.van-step__active,
|
||||
.van-step__circle {
|
||||
z-index: 2;
|
||||
position: absolute;
|
||||
}
|
||||
|
||||
.van-step__active {
|
||||
top: 12px;
|
||||
left: -20px;
|
||||
line-height: 1;
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
.van-step__circle {
|
||||
top: 16px;
|
||||
left: -17px;
|
||||
}
|
||||
|
||||
.van-step__line {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: -15px;
|
||||
width: 1px;
|
||||
height: 100%;
|
||||
background-color: $border-color;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@ -1,13 +1,18 @@
|
||||
<view class="steps-class van-steps van-steps--{{ type == 'vertical' ? 'vsteps' : 'steps' }} van-steps--{{ steps.length }} {{ className }}">
|
||||
<view class="custom-class van-steps van-steps--{{ direction }}">
|
||||
<view
|
||||
wx:for="{{ steps }}" wx:for-item="step" wx:key="unique" wx:for-index="index"
|
||||
class="van-steps__step {{ hasDesc ? 'van-steps__step--db-title' : '' }} {{ index == 0 ? 'van-steps__step--first-child' : '' }} {{ index == steps.length - 1 ? 'van-steps__step--last-child' : '' }} {{ step.done ? 'van-steps__step--done' : '' }} {{ step.current ? 'van-steps__step--cur' : '' }}"
|
||||
wx:for="{{ formattedSteps }}"
|
||||
wx:key="index"
|
||||
class="van-step van-hairline van-step--{{ direction }} {{ item.status ? 'van-step--' + item.status : '' }}"
|
||||
style="{{ width ? 'width:' + width + 'px' : '' }}"
|
||||
>
|
||||
<view class="van-steps__title title-class">{{ step.text }}</view>
|
||||
<view wx:if="{{ hasDesc && step.desc }}" class="van-steps__title van-steps__title--desc desc-class">{{ step.desc }}</view>
|
||||
<view class="van-steps__icons icon-class">
|
||||
<view class="van-steps__circle"></view>
|
||||
<view class="van-step__title" style="{{ item.status === 'process' ? 'color: ' + activeColor : '' }}">
|
||||
<view>{{ item.text }}</view>
|
||||
<view>{{ item.desc }}</view>
|
||||
</view>
|
||||
<view class="van-steps__line"></view>
|
||||
<view class="van-step__circle-container">
|
||||
<view class="van-step__circle" wx:if="{{ item.status !== 'process' }}" style="{{ item.status === 'finish' ? 'background-color: ' + activeColor : '' }}" />
|
||||
<van-icon wx:else name="checked" color="{{ activeColor }}" custom-class="van-step__active" />
|
||||
</view>
|
||||
<view class="van-step__line" style="{{ item.status === 'finish' ? 'background-color: ' + activeColor : '' }}" />
|
||||
</view>
|
||||
</view>
|
||||
|
||||
@ -1,134 +0,0 @@
|
||||
.van-steps--steps.van-steps--5 .van-steps__step {
|
||||
width: 25%;
|
||||
}
|
||||
|
||||
.van-steps--steps.van-steps--4 .van-steps__step {
|
||||
width: 33%;
|
||||
}
|
||||
|
||||
.van-steps--steps.van-steps--3 .van-steps__step {
|
||||
width: 50%;
|
||||
}
|
||||
|
||||
.van-steps--steps .van-steps__step {
|
||||
position: relative;
|
||||
float: left;
|
||||
padding-bottom: 25px;
|
||||
color: #b1b1b1;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.van-steps--steps .van-steps__title {
|
||||
transform: translateX(-50%);
|
||||
font-size: 10px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.van-steps--steps .van-steps__icons {
|
||||
position: absolute;
|
||||
top: 30px;
|
||||
left: -10px;
|
||||
padding: 0 8px;
|
||||
background-color: #fff;
|
||||
z-index: 10;
|
||||
}
|
||||
|
||||
.van-steps--steps .van-steps__circle {
|
||||
display: block;
|
||||
position: relative;
|
||||
width: 5px;
|
||||
height: 5px;
|
||||
background-color: #e5e5e5;
|
||||
border-radius: 50%;
|
||||
}
|
||||
|
||||
.van-steps--steps .van-steps__line {
|
||||
position: absolute;
|
||||
left: 0px;
|
||||
top: 32px;
|
||||
width: 100%;
|
||||
height: 1px;
|
||||
background-color: #e5e5e5;
|
||||
}
|
||||
|
||||
|
||||
/* 已完成的steps */
|
||||
.van-steps--steps .van-steps__step--done {
|
||||
color: #333;
|
||||
}
|
||||
|
||||
.van-steps--steps .van-steps__step--done .van-steps__line {
|
||||
background-color: #06bf04;
|
||||
}
|
||||
|
||||
.van-steps--steps .van-steps__step--done .van-steps__circle {
|
||||
width: 5px;
|
||||
height: 5px;
|
||||
background-color: #09bb07;
|
||||
}
|
||||
|
||||
/* 正在进行中的steps */
|
||||
.van-steps--steps .van-steps__step--cur .van-steps__icons {
|
||||
top: 25px;
|
||||
left: -14px;
|
||||
}
|
||||
|
||||
.van-steps--steps .van-steps__step--cur .van-steps__circle {
|
||||
width: 13px;
|
||||
height: 13px;
|
||||
background-image: url("https://b.yzcdn.cn/v2/image/wap/success_small@2x.png");
|
||||
background-size: 13px 13px;
|
||||
}
|
||||
|
||||
.van-steps--steps .van-steps__step--cur .van-steps__line {
|
||||
background-color: #e5e5e5;
|
||||
}
|
||||
|
||||
/* 各种不同位置的 */
|
||||
.van-steps--steps .van-steps__step--first-child .van-steps__title {
|
||||
margin-left: 0;
|
||||
transform: none;
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
.van-steps--steps .van-steps__step--first-child .van-steps__icons {
|
||||
left: -7px;
|
||||
}
|
||||
|
||||
.van-steps--steps .van-steps__step--last-child {
|
||||
position: absolute;
|
||||
right: 0;
|
||||
top: 0;
|
||||
text-align: right;
|
||||
}
|
||||
|
||||
.van-steps--steps .van-steps__step--last-child .van-steps__title {
|
||||
transform: none;
|
||||
text-align: right;
|
||||
}
|
||||
|
||||
.van-steps--steps .van-steps__step--last-child .van-steps__icons {
|
||||
left: auto;
|
||||
right: -6px;
|
||||
}
|
||||
|
||||
.van-steps--steps .van-steps__step--last-child .van-steps__line {
|
||||
display: none;
|
||||
}
|
||||
|
||||
/* 有描述的step */
|
||||
.van-steps--steps .van-steps__step--db-title {
|
||||
min-height: 29px;
|
||||
}
|
||||
|
||||
.van-steps--steps .van-steps__step--db-title .van-steps__line {
|
||||
top: 45px;
|
||||
}
|
||||
|
||||
.van-steps--steps .van-steps__step--db-title .van-steps__icons {
|
||||
top: 43px;
|
||||
}
|
||||
|
||||
.van-steps--steps .van-steps__step--db-title.van-steps__step--cur .van-steps__icons {
|
||||
top: 39px;
|
||||
}
|
||||
@ -1,90 +0,0 @@
|
||||
.van-steps--vsteps {
|
||||
color: #999;
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
.van-steps--vsteps .van-steps__step {
|
||||
position: relative;
|
||||
padding: 15px 0;
|
||||
}
|
||||
|
||||
.van-steps--vsteps .van-steps__step--done {
|
||||
color: #44BB00;
|
||||
}
|
||||
|
||||
.van-steps--vsteps .van-steps__line {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
left: 7px;
|
||||
width: 1px;
|
||||
background-color: #e5e5e5;
|
||||
}
|
||||
|
||||
.van-steps--vsteps .van-steps__title {
|
||||
display: inline-block;
|
||||
line-height: 20px;
|
||||
padding-left: 27px;
|
||||
}
|
||||
|
||||
.van-steps--vsteps .van-steps__title--desc {
|
||||
padding-left: 3px;
|
||||
}
|
||||
|
||||
.van-steps--vsteps .van-steps__icons {
|
||||
position: absolute;
|
||||
left: 7px;
|
||||
top: 50%;
|
||||
transform: translate(-50%, -50%);
|
||||
z-index: 2;
|
||||
padding: 3px 0;
|
||||
background-color: #fff;
|
||||
}
|
||||
|
||||
.van-steps--vsteps .van-steps__circle {
|
||||
width: 5px;
|
||||
height: 5px;
|
||||
background-color: #e5e5e5;
|
||||
border-radius: 10px;
|
||||
}
|
||||
|
||||
.van-steps--vsteps .van-steps__step--done .van-steps__circle {
|
||||
width: 5px;
|
||||
height: 5px;
|
||||
background-color: #09bb07;
|
||||
}
|
||||
|
||||
.van-steps--vsteps .van-steps__step--cur .van-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;
|
||||
}
|
||||
|
||||
.van-steps--vsteps .van-steps__icon--active {
|
||||
width: 13px;
|
||||
height: 13px;
|
||||
}
|
||||
|
||||
.van-steps--vsteps .van-steps__step--first-child .van-steps__title::before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: 0;
|
||||
bottom: 50%;
|
||||
left: 7px;
|
||||
width: 1px;
|
||||
background-color: #fff;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
.van-steps--vsteps .van-steps__step--last-child .van-steps__title::after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
bottom: 0%;
|
||||
left: 7px;
|
||||
width: 1px;
|
||||
background-color: #fff;
|
||||
z-index: 1;
|
||||
}
|
||||
Loading…
x
Reference in New Issue
Block a user