@xtdev/xt-miniprogram-ui 1.1.25 → 1.2.27
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/libs/xt-steps/index.wxml +6 -2
- package/libs/xt-steps/index.wxss +97 -93
- package/package.json +1 -1
package/libs/xt-steps/index.wxml
CHANGED
|
@@ -8,7 +8,9 @@
|
|
|
8
8
|
<view wx:if="{{index === active}}" class="center-box"></view>
|
|
9
9
|
</view>
|
|
10
10
|
<view class="step-title">{{item.title}}</view>
|
|
11
|
-
<view class="step-desc">
|
|
11
|
+
<view class="step-desc">
|
|
12
|
+
<rich-text nodes="{{item.desc}}"></rich-text>
|
|
13
|
+
</view>
|
|
12
14
|
<view wx:if="{{index < steps.length - 1}}" class="{{type === 'brief' ? 'step-line-brief' : 'step-line'}}">
|
|
13
15
|
</view>
|
|
14
16
|
</view>
|
|
@@ -24,7 +26,9 @@
|
|
|
24
26
|
</view>
|
|
25
27
|
<view class="text-box">
|
|
26
28
|
<view class="step-title">{{item.title}}</view>
|
|
27
|
-
<view class="step-desc">
|
|
29
|
+
<view class="step-desc">
|
|
30
|
+
<rich-text nodes="{{item.desc}}"></rich-text>
|
|
31
|
+
</view>
|
|
28
32
|
</view>
|
|
29
33
|
<view wx:if="{{index < steps.length - 1}}" class="{{type === 'brief' ? 'step-line-brief' : 'step-line'}}">
|
|
30
34
|
</view>
|
package/libs/xt-steps/index.wxss
CHANGED
|
@@ -1,180 +1,184 @@
|
|
|
1
1
|
.xt-steps {
|
|
2
|
-
|
|
2
|
+
display: flex;
|
|
3
3
|
}
|
|
4
4
|
|
|
5
5
|
.xt-steps-column {
|
|
6
|
-
|
|
6
|
+
flex-direction: column;
|
|
7
7
|
}
|
|
8
8
|
|
|
9
9
|
.xt-steps-column .xt-step {
|
|
10
|
-
|
|
11
|
-
|
|
10
|
+
flex-grow: 0;
|
|
11
|
+
flex-direction: row;
|
|
12
12
|
}
|
|
13
13
|
|
|
14
14
|
.xt-step {
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
15
|
+
display: flex;
|
|
16
|
+
flex-direction: column;
|
|
17
|
+
align-items: center;
|
|
18
|
+
position: relative;
|
|
19
|
+
flex: 1;
|
|
20
20
|
}
|
|
21
21
|
|
|
22
22
|
.xt-step.active {
|
|
23
|
-
|
|
23
|
+
color: #6622aa;
|
|
24
24
|
}
|
|
25
25
|
|
|
26
26
|
.step-dot {
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
27
|
+
width: 48rpx;
|
|
28
|
+
height: 48rpx;
|
|
29
|
+
min-width: 48rpx;
|
|
30
|
+
border-radius: 24rpx;
|
|
31
|
+
background-color: #ededed;
|
|
32
|
+
text-align: center;
|
|
33
|
+
line-height: 48rpx;
|
|
34
|
+
font-size: 34rpx;
|
|
35
|
+
font-family: FengTan-Regular, FengTan;
|
|
36
|
+
font-weight: 400;
|
|
37
|
+
color: #b8b8b8;
|
|
37
38
|
}
|
|
38
39
|
|
|
39
40
|
.active .step-title {
|
|
40
|
-
|
|
41
|
+
font-weight: 600;
|
|
41
42
|
}
|
|
42
43
|
|
|
43
|
-
.active .step-title
|
|
44
|
-
|
|
44
|
+
.active .step-title,
|
|
45
|
+
.active .step-desc {
|
|
46
|
+
color: #6622aa;
|
|
45
47
|
}
|
|
46
48
|
|
|
47
49
|
.active .step-dot {
|
|
48
|
-
|
|
49
|
-
|
|
50
|
+
background-color: #6622aa;
|
|
51
|
+
color: #fff;
|
|
50
52
|
}
|
|
51
53
|
|
|
52
54
|
.finished .step-dot {
|
|
53
|
-
|
|
54
|
-
|
|
55
|
+
background-color: #30bf67;
|
|
56
|
+
color: #fff;
|
|
55
57
|
}
|
|
56
58
|
|
|
57
59
|
.finished .step-title {
|
|
58
|
-
|
|
60
|
+
font-weight: 600;
|
|
59
61
|
}
|
|
60
62
|
|
|
61
|
-
.finished .step-title
|
|
62
|
-
|
|
63
|
+
.finished .step-title,
|
|
64
|
+
.finished .step-desc {
|
|
65
|
+
color: #000000;
|
|
63
66
|
}
|
|
64
67
|
|
|
65
68
|
.finished .step-line {
|
|
66
|
-
|
|
67
|
-
|
|
69
|
+
border-bottom: 4rpx solid #30bf67;
|
|
70
|
+
border-color: #30bf67;
|
|
68
71
|
}
|
|
69
72
|
|
|
70
73
|
.step-title {
|
|
71
|
-
|
|
72
|
-
|
|
73
|
-
|
|
74
|
-
|
|
75
|
-
|
|
76
|
-
|
|
74
|
+
font-size: 34rpx;
|
|
75
|
+
font-family: PingFang SC-Regular, PingFang SC;
|
|
76
|
+
font-weight: 400;
|
|
77
|
+
color: #999999;
|
|
78
|
+
line-height: 48rpx;
|
|
79
|
+
margin-top: 16rpx;
|
|
77
80
|
}
|
|
78
81
|
|
|
79
82
|
.step-desc {
|
|
80
|
-
|
|
81
|
-
|
|
82
|
-
|
|
83
|
-
|
|
84
|
-
|
|
85
|
-
|
|
86
|
-
|
|
83
|
+
font-size: 28rpx;
|
|
84
|
+
font-family: PingFang SC-Regular, PingFang SC;
|
|
85
|
+
font-weight: 400;
|
|
86
|
+
color: #999999;
|
|
87
|
+
line-height: 40rpx;
|
|
88
|
+
margin-top: 8rpx;
|
|
89
|
+
text-align: center;
|
|
87
90
|
}
|
|
88
91
|
|
|
89
|
-
.step-line,
|
|
90
|
-
|
|
91
|
-
|
|
92
|
-
|
|
93
|
-
|
|
94
|
-
|
|
95
|
-
|
|
92
|
+
.step-line,
|
|
93
|
+
.step-line-brief {
|
|
94
|
+
border-bottom: 4rpx dotted #b8b8b8;
|
|
95
|
+
flex-grow: 1;
|
|
96
|
+
position: absolute;
|
|
97
|
+
width: calc(100% - 24rpx);
|
|
98
|
+
top: 24rpx;
|
|
99
|
+
left: calc(50% + 24rpx);
|
|
96
100
|
}
|
|
97
101
|
|
|
98
102
|
.step-line-brief {
|
|
99
|
-
|
|
100
|
-
|
|
103
|
+
top: 16rpx;
|
|
104
|
+
left: calc(50% + 16rpx);
|
|
101
105
|
}
|
|
102
106
|
|
|
103
107
|
.step-dot-brief {
|
|
104
|
-
|
|
105
|
-
|
|
106
|
-
|
|
107
|
-
|
|
108
|
+
width: 32rpx;
|
|
109
|
+
height: 32rpx;
|
|
110
|
+
border-radius: 50%;
|
|
111
|
+
background-color: #ededed;
|
|
108
112
|
}
|
|
109
113
|
|
|
110
114
|
.active .step-dot-brief {
|
|
111
|
-
|
|
112
|
-
|
|
113
|
-
|
|
114
|
-
|
|
115
|
+
background-color: #fff;
|
|
116
|
+
border: 8rpx solid #6722ab;
|
|
117
|
+
width: 16rpx;
|
|
118
|
+
height: 16rpx;
|
|
115
119
|
}
|
|
116
120
|
|
|
117
121
|
.finished .step-dot-brief {
|
|
118
|
-
|
|
122
|
+
background-color: #6722ab;
|
|
119
123
|
}
|
|
120
124
|
|
|
121
|
-
|
|
122
125
|
.text-box {
|
|
123
|
-
|
|
126
|
+
margin-left: 24rpx;
|
|
124
127
|
}
|
|
125
128
|
|
|
126
129
|
.xt-steps-column .xt-step {
|
|
127
|
-
|
|
130
|
+
align-items: start;
|
|
128
131
|
}
|
|
129
132
|
|
|
130
133
|
.xt-steps-column .step-title {
|
|
131
|
-
|
|
134
|
+
margin-top: 0;
|
|
132
135
|
}
|
|
133
136
|
|
|
134
|
-
.xt-steps-column .xt-step:nth-of-type(n+2) {
|
|
135
|
-
|
|
137
|
+
.xt-steps-column .xt-step:nth-of-type(n + 2) {
|
|
138
|
+
margin-top: 60rpx;
|
|
136
139
|
}
|
|
137
140
|
|
|
138
|
-
.xt-steps-column-brief .xt-step:nth-of-type(n+2) {
|
|
139
|
-
|
|
141
|
+
.xt-steps-column-brief .xt-step:nth-of-type(n + 2) {
|
|
142
|
+
margin-top: 48rpx;
|
|
140
143
|
}
|
|
141
144
|
|
|
142
|
-
.xt-steps-column .step-line,
|
|
143
|
-
|
|
144
|
-
|
|
145
|
-
|
|
146
|
-
|
|
147
|
-
|
|
145
|
+
.xt-steps-column .step-line,
|
|
146
|
+
.xt-steps-column .step-line-brief {
|
|
147
|
+
border-left: 4rpx dotted #b8b8b8;
|
|
148
|
+
width: 0rpx;
|
|
149
|
+
height: calc(100% + 24rpx);
|
|
150
|
+
left: 22rpx;
|
|
151
|
+
top: 48rpx;
|
|
148
152
|
}
|
|
149
153
|
|
|
150
154
|
.xt-steps-column .finished .step-line {
|
|
151
|
-
|
|
155
|
+
border-left: 4rpx solid #30bf67;
|
|
152
156
|
}
|
|
153
157
|
|
|
154
158
|
.xt-steps-column .step-dot-brief {
|
|
155
|
-
|
|
156
|
-
|
|
157
|
-
|
|
159
|
+
width: 16rpx;
|
|
160
|
+
height: 16rpx;
|
|
161
|
+
border-radius: 50%;
|
|
158
162
|
}
|
|
159
163
|
|
|
160
164
|
.xt-steps-column .active .step-dot-brief {
|
|
161
|
-
|
|
162
|
-
|
|
163
|
-
|
|
164
|
-
|
|
165
|
+
width: 12rpx;
|
|
166
|
+
height: 12rpx;
|
|
167
|
+
background-color: #fff;
|
|
168
|
+
border: 2rpx solid #6722ab;
|
|
165
169
|
}
|
|
166
170
|
|
|
167
171
|
.xt-steps-column .step-line-brief {
|
|
168
|
-
|
|
169
|
-
|
|
170
|
-
|
|
172
|
+
left: 6rpx;
|
|
173
|
+
top: 16rpx;
|
|
174
|
+
height: calc(100% + 32rpx);
|
|
171
175
|
}
|
|
172
176
|
|
|
173
|
-
.xt-steps-column-brief .xt-step:nth-of-type(n+2) {
|
|
174
|
-
|
|
177
|
+
.xt-steps-column-brief .xt-step:nth-of-type(n + 2) {
|
|
178
|
+
margin-top: 48rpx;
|
|
175
179
|
}
|
|
176
180
|
|
|
177
181
|
.xt-steps-column-brief .text-box {
|
|
178
|
-
|
|
179
|
-
|
|
180
|
-
}
|
|
182
|
+
margin-left: 16rpx;
|
|
183
|
+
margin-top: -12rpx;
|
|
184
|
+
}
|