@opendesign-plus-test/components 0.0.1-rc.1 → 0.0.1-rc.14
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/dist/components.cjs.js +3 -3
- package/dist/components.css +1 -1
- package/dist/components.es.js +115 -115
- package/package.json +1 -1
- package/src/components/events/OEventsApply.vue +322 -320
- package/src/components/events/OEventsCalendar.vue +4 -4
- package/src/components/events/OEventsList.vue +3 -3
|
@@ -13,7 +13,7 @@ defineProps<EventsApplyPropsT>();
|
|
|
13
13
|
</script>
|
|
14
14
|
|
|
15
15
|
<template>
|
|
16
|
-
<div class="events-apply
|
|
16
|
+
<div class="o-events-apply">
|
|
17
17
|
<div class="events-apply-grid">
|
|
18
18
|
<template v-for="(step, idx) in steps" :key="idx">
|
|
19
19
|
<!-- 移动端序号（grid第1列） -->
|
|
@@ -65,421 +65,423 @@ defineProps<EventsApplyPropsT>();
|
|
|
65
65
|
</div>
|
|
66
66
|
</template>
|
|
67
67
|
|
|
68
|
-
<style
|
|
69
|
-
.events-apply
|
|
68
|
+
<style lang="scss">
|
|
69
|
+
.o-events-apply {
|
|
70
70
|
width: 100%;
|
|
71
|
-
|
|
72
|
-
|
|
73
|
-
//
|
|
74
|
-
|
|
75
|
-
|
|
76
|
-
|
|
77
|
-
|
|
78
|
-
align-items: flex-start;
|
|
79
|
-
padding-top: var(--o-gap-3); // 与 step-title 的 padding 对齐
|
|
80
|
-
position: relative;
|
|
81
|
-
grid-column: 1; // 固定在第1列
|
|
82
|
-
|
|
83
|
-
.number-circle {
|
|
84
|
-
width: 24px;
|
|
85
|
-
height: 24px;
|
|
86
|
-
border-radius: 50%;
|
|
87
|
-
background-color: var(--o-color-primary1);
|
|
88
|
-
color: #fff;
|
|
89
|
-
font-size: 12px;
|
|
90
|
-
line-height: 24px;
|
|
91
|
-
text-align: center;
|
|
92
|
-
font-weight: 400;
|
|
71
|
+
// 移动端时间线序号
|
|
72
|
+
.timeline-number {
|
|
73
|
+
display: none; // 桌面端隐藏
|
|
74
|
+
@include respond-to('<=pad_v') {
|
|
75
|
+
display: flex;
|
|
76
|
+
align-items: flex-start;
|
|
77
|
+
padding-top: var(--o-gap-3); // 与 step-title 的 padding 对齐
|
|
93
78
|
position: relative;
|
|
94
|
-
|
|
95
|
-
}
|
|
79
|
+
grid-column: 1; // 固定在第1列
|
|
96
80
|
|
|
97
|
-
|
|
98
|
-
|
|
99
|
-
|
|
100
|
-
|
|
101
|
-
|
|
102
|
-
|
|
103
|
-
|
|
104
|
-
|
|
105
|
-
|
|
106
|
-
|
|
107
|
-
|
|
108
|
-
|
|
109
|
-
}
|
|
110
|
-
@include respond-to('pad_h') {
|
|
111
|
-
--height: var(--o-gap-4);
|
|
112
|
-
}
|
|
113
|
-
@include respond-to('pad_v') {
|
|
114
|
-
--height: var(--o-gap-5);
|
|
81
|
+
.number-circle {
|
|
82
|
+
width: 24px;
|
|
83
|
+
height: 24px;
|
|
84
|
+
border-radius: 50%;
|
|
85
|
+
background-color: var(--o-color-primary1);
|
|
86
|
+
color: #fff;
|
|
87
|
+
font-size: 12px;
|
|
88
|
+
line-height: 24px;
|
|
89
|
+
text-align: center;
|
|
90
|
+
font-weight: 400;
|
|
91
|
+
position: relative;
|
|
92
|
+
z-index: 1;
|
|
115
93
|
}
|
|
116
|
-
|
|
117
|
-
|
|
94
|
+
|
|
95
|
+
// 连接线（伪元素）
|
|
96
|
+
&::after {
|
|
97
|
+
content: '';
|
|
98
|
+
position: absolute;
|
|
99
|
+
left: 11px; // 圆圈中心 (24px / 2 - 1px = 11px)
|
|
100
|
+
top: 44px; // number-circle 下方
|
|
101
|
+
width: 1px;
|
|
102
|
+
--height: var(--o-gap-6);
|
|
103
|
+
height: calc(100% + var(--height) - 40px); // 延伸到下一个元素
|
|
104
|
+
background-color: var(--o-color-control4);
|
|
105
|
+
@include respond-to('laptop') {
|
|
106
|
+
--height: var(--o-gap-5);
|
|
107
|
+
}
|
|
108
|
+
@include respond-to('pad_h') {
|
|
109
|
+
--height: var(--o-gap-4);
|
|
110
|
+
}
|
|
111
|
+
@include respond-to('pad_v') {
|
|
112
|
+
--height: var(--o-gap-5);
|
|
113
|
+
}
|
|
114
|
+
@include respond-to('phone') {
|
|
115
|
+
--height: var(--o-gap-5);
|
|
116
|
+
}
|
|
118
117
|
}
|
|
119
|
-
}
|
|
120
118
|
|
|
121
|
-
|
|
122
|
-
|
|
123
|
-
|
|
119
|
+
// 最后一个序号不显示连接线（倒数第2个子元素，因为最后一个是step-item）
|
|
120
|
+
&:nth-last-child(2)::after {
|
|
121
|
+
display: none;
|
|
122
|
+
}
|
|
124
123
|
}
|
|
125
124
|
}
|
|
126
|
-
}
|
|
127
125
|
|
|
128
|
-
.events-apply-grid {
|
|
129
|
-
|
|
130
|
-
|
|
131
|
-
|
|
132
|
-
|
|
133
|
-
|
|
134
|
-
@include respond-to('laptop') {
|
|
135
|
-
gap: var(--o-gap-5);
|
|
136
|
-
}
|
|
137
|
-
@include respond-to('pad_h') {
|
|
138
|
-
gap: var(--o-gap-4);
|
|
139
|
-
}
|
|
140
|
-
@include respond-to('pad_v') {
|
|
141
|
-
gap: var(--o-gap-5);
|
|
142
|
-
}
|
|
143
|
-
@include respond-to('phone') {
|
|
144
|
-
gap: var(--o-gap-5);
|
|
145
|
-
}
|
|
146
|
-
|
|
147
|
-
// 移动端：2列布局（序号列 + 内容列）
|
|
148
|
-
@include respond-to('<=pad_v') {
|
|
149
|
-
grid-template-columns: auto 1fr; // 第1列自适应，第2列占满
|
|
150
|
-
grid-template-rows: auto; // 行数自动
|
|
151
|
-
gap: 0 var(--o-gap-3); // 列间距12px，行间距0
|
|
152
|
-
row-gap: var(--o-gap-6); // 行间距
|
|
126
|
+
.events-apply-grid {
|
|
127
|
+
display: grid;
|
|
128
|
+
grid-template-columns: repeat(3, 1fr); // 桌面端：3列
|
|
129
|
+
grid-template-rows: repeat(3, auto); // 桌面端：3行
|
|
130
|
+
gap: var(--o-gap-6);
|
|
153
131
|
|
|
154
132
|
@include respond-to('laptop') {
|
|
155
|
-
|
|
133
|
+
gap: var(--o-gap-5);
|
|
156
134
|
}
|
|
157
135
|
@include respond-to('pad_h') {
|
|
158
|
-
|
|
136
|
+
gap: var(--o-gap-4);
|
|
159
137
|
}
|
|
160
138
|
@include respond-to('pad_v') {
|
|
161
|
-
|
|
139
|
+
gap: var(--o-gap-5);
|
|
162
140
|
}
|
|
163
141
|
@include respond-to('phone') {
|
|
164
|
-
|
|
142
|
+
gap: var(--o-gap-5);
|
|
165
143
|
}
|
|
166
|
-
}
|
|
167
144
|
|
|
168
|
-
|
|
169
|
-
background: var(--o-color-fill2);
|
|
170
|
-
border-radius: var(--o-radius-xs);
|
|
171
|
-
display: flex;
|
|
172
|
-
flex-direction: column; // 垂直排列子元素
|
|
173
|
-
--idx-size: 20px;
|
|
174
|
-
--idx-gap: var(--o-gap-3);
|
|
175
|
-
@include respond-to('laptop') {
|
|
176
|
-
--idx-gap: var(--o-gap-2);
|
|
177
|
-
}
|
|
178
|
-
@include respond-to('pad_h') {
|
|
179
|
-
--idx-gap: var(--o-gap-2);
|
|
180
|
-
}
|
|
181
|
-
// 移动端：强制在第2列显示
|
|
145
|
+
// 移动端：2列布局（序号列 + 内容列）
|
|
182
146
|
@include respond-to('<=pad_v') {
|
|
183
|
-
grid-
|
|
184
|
-
grid-
|
|
185
|
-
|
|
147
|
+
grid-template-columns: auto 1fr; // 第1列自适应，第2列占满
|
|
148
|
+
grid-template-rows: auto; // 行数自动
|
|
149
|
+
gap: 0 var(--o-gap-3); // 列间距12px，行间距0
|
|
150
|
+
row-gap: var(--o-gap-6); // 行间距
|
|
186
151
|
|
|
187
|
-
.step-title {
|
|
188
|
-
font-weight: 600;
|
|
189
|
-
color: var(--o-color-info1);
|
|
190
|
-
margin-bottom: var(--o-gap-4);
|
|
191
|
-
padding: var(--o-gap-5) var(--o-gap-6) 0 var(--o-gap-6);
|
|
192
|
-
display: flex;
|
|
193
|
-
align-items: center;
|
|
194
|
-
@include h2;
|
|
195
152
|
@include respond-to('laptop') {
|
|
196
|
-
|
|
197
|
-
padding: var(--o-gap-4) var(--o-gap-5) 0 var(--o-gap-5);
|
|
153
|
+
row-gap: var(--o-gap-5);
|
|
198
154
|
}
|
|
199
155
|
@include respond-to('pad_h') {
|
|
200
|
-
|
|
201
|
-
padding: var(--o-gap-3) var(--o-gap-4) 0 var(--o-gap-4);
|
|
156
|
+
row-gap: var(--o-gap-4);
|
|
202
157
|
}
|
|
203
158
|
@include respond-to('pad_v') {
|
|
204
|
-
|
|
205
|
-
padding: var(--o-gap-3) var(--o-gap-4);
|
|
206
|
-
border-bottom: 1px solid var(--o-color-control4);
|
|
207
|
-
@include text1;
|
|
159
|
+
row-gap: var(--o-gap-5);
|
|
208
160
|
}
|
|
209
161
|
@include respond-to('phone') {
|
|
210
|
-
|
|
211
|
-
padding: var(--o-gap-3) var(--o-gap-4);
|
|
212
|
-
border-bottom: 1px solid var(--o-color-control4);
|
|
213
|
-
@include text1;
|
|
214
|
-
}
|
|
215
|
-
|
|
216
|
-
.step-idx {
|
|
217
|
-
margin-right: var(--idx-gap);
|
|
218
|
-
width: var(--idx-size);
|
|
219
|
-
height: var(--idx-size);
|
|
220
|
-
font-size: 12px;
|
|
221
|
-
line-height: 20px;
|
|
222
|
-
border-radius: 50%;
|
|
223
|
-
background-color: var(--o-color-primary1);
|
|
224
|
-
color: #fff;
|
|
225
|
-
text-align: center;
|
|
226
|
-
font-weight: 400;
|
|
227
|
-
@include respond-to('pad_v') {
|
|
228
|
-
display: none;
|
|
229
|
-
}
|
|
230
|
-
@include respond-to('phone') {
|
|
231
|
-
display: none;
|
|
232
|
-
}
|
|
162
|
+
row-gap: var(--o-gap-5);
|
|
233
163
|
}
|
|
234
164
|
}
|
|
235
165
|
|
|
236
|
-
.step-
|
|
237
|
-
|
|
238
|
-
|
|
239
|
-
|
|
166
|
+
.step-item {
|
|
167
|
+
background: var(--o-color-fill2);
|
|
168
|
+
border-radius: var(--o-radius-xs);
|
|
169
|
+
display: flex;
|
|
170
|
+
flex-direction: column; // 垂直排列子元素
|
|
171
|
+
--idx-size: 20px;
|
|
172
|
+
--idx-gap: var(--o-gap-3);
|
|
240
173
|
@include respond-to('laptop') {
|
|
241
|
-
|
|
174
|
+
--idx-gap: var(--o-gap-2);
|
|
242
175
|
}
|
|
243
176
|
@include respond-to('pad_h') {
|
|
244
|
-
|
|
177
|
+
--idx-gap: var(--o-gap-2);
|
|
245
178
|
}
|
|
246
|
-
|
|
247
|
-
|
|
179
|
+
// 移动端：强制在第2列显示
|
|
180
|
+
@include respond-to('<=pad_v') {
|
|
181
|
+
grid-column: 2 !important;
|
|
182
|
+
grid-row: auto !important;
|
|
248
183
|
}
|
|
249
|
-
|
|
250
|
-
|
|
184
|
+
|
|
185
|
+
.step-title {
|
|
186
|
+
font-weight: 600;
|
|
187
|
+
color: var(--o-color-info1);
|
|
188
|
+
margin-bottom: var(--o-gap-4);
|
|
189
|
+
padding: var(--o-gap-5) var(--o-gap-6) 0 var(--o-gap-6);
|
|
190
|
+
display: flex;
|
|
191
|
+
align-items: center;
|
|
192
|
+
@include h2;
|
|
193
|
+
@include respond-to('laptop') {
|
|
194
|
+
margin-bottom: var(--o-gap-3);
|
|
195
|
+
padding: var(--o-gap-4) var(--o-gap-5) 0 var(--o-gap-5);
|
|
196
|
+
}
|
|
197
|
+
@include respond-to('pad_h') {
|
|
198
|
+
margin-bottom: var(--o-gap-2);
|
|
199
|
+
padding: var(--o-gap-3) var(--o-gap-4) 0 var(--o-gap-4);
|
|
200
|
+
}
|
|
201
|
+
@include respond-to('pad_v') {
|
|
202
|
+
margin-bottom: 0;
|
|
203
|
+
padding: var(--o-gap-3) var(--o-gap-4);
|
|
204
|
+
border-bottom: 1px solid var(--o-color-control4);
|
|
205
|
+
@include text1;
|
|
206
|
+
}
|
|
207
|
+
@include respond-to('phone') {
|
|
208
|
+
margin-bottom: 0;
|
|
209
|
+
padding: var(--o-gap-3) var(--o-gap-4);
|
|
210
|
+
border-bottom: 1px solid var(--o-color-control4);
|
|
211
|
+
@include text1;
|
|
212
|
+
}
|
|
213
|
+
|
|
214
|
+
.step-idx {
|
|
215
|
+
margin-right: var(--idx-gap);
|
|
216
|
+
width: var(--idx-size);
|
|
217
|
+
height: var(--idx-size);
|
|
218
|
+
font-size: 12px;
|
|
219
|
+
line-height: 20px;
|
|
220
|
+
border-radius: 50%;
|
|
221
|
+
background-color: var(--o-color-primary1);
|
|
222
|
+
color: #fff;
|
|
223
|
+
text-align: center;
|
|
224
|
+
font-weight: 400;
|
|
225
|
+
@include respond-to('pad_v') {
|
|
226
|
+
display: none;
|
|
227
|
+
}
|
|
228
|
+
@include respond-to('phone') {
|
|
229
|
+
display: none;
|
|
230
|
+
}
|
|
231
|
+
}
|
|
251
232
|
}
|
|
252
233
|
|
|
253
|
-
.desc
|
|
234
|
+
.step-desc {
|
|
235
|
+
color: var(--o-color-info2);
|
|
236
|
+
padding: 0 var(--o-gap-6) var(--o-gap-4) var(--o-gap-6);
|
|
254
237
|
@include tip1;
|
|
255
|
-
|
|
238
|
+
@include respond-to('laptop') {
|
|
239
|
+
padding: 0 var(--o-gap-5) var(--o-gap-3) var(--o-gap-5);
|
|
240
|
+
}
|
|
241
|
+
@include respond-to('pad_h') {
|
|
242
|
+
padding: 0 var(--o-gap-4) var(--o-gap-3) var(--o-gap-4);
|
|
243
|
+
}
|
|
244
|
+
@include respond-to('pad_v') {
|
|
245
|
+
padding: var(--o-gap-3) var(--o-gap-4);
|
|
246
|
+
}
|
|
247
|
+
@include respond-to('phone') {
|
|
248
|
+
padding: var(--o-gap-3) var(--o-gap-4);
|
|
249
|
+
}
|
|
256
250
|
|
|
257
|
-
|
|
258
|
-
|
|
259
|
-
@include respond-to('<=pad_v') {
|
|
260
|
-
display: none;
|
|
251
|
+
.desc-list-wrapper {
|
|
252
|
+
@include tip1;
|
|
261
253
|
}
|
|
262
|
-
}
|
|
263
254
|
|
|
264
|
-
|
|
265
|
-
|
|
266
|
-
|
|
267
|
-
|
|
255
|
+
.desc-list-title {
|
|
256
|
+
padding-left: calc(var(--idx-size) + var(--idx-gap));
|
|
257
|
+
@include respond-to('<=pad_v') {
|
|
258
|
+
display: none;
|
|
259
|
+
}
|
|
268
260
|
}
|
|
269
261
|
|
|
270
|
-
.desc-list-
|
|
271
|
-
|
|
272
|
-
|
|
262
|
+
.desc-list-content {
|
|
263
|
+
.desc-list-item {
|
|
264
|
+
margin-top: var(--o-gap-1);
|
|
265
|
+
font-weight: 400;
|
|
266
|
+
}
|
|
273
267
|
|
|
274
|
-
.
|
|
275
|
-
|
|
276
|
-
|
|
268
|
+
.desc-list-item-title {
|
|
269
|
+
display: flex;
|
|
270
|
+
align-items: center;
|
|
271
|
+
|
|
272
|
+
.o-icon {
|
|
273
|
+
font-size: 16px;
|
|
274
|
+
margin-right: var(--o-gap-4);
|
|
275
|
+
@include respond-to('laptop') {
|
|
276
|
+
margin-right: var(--o-gap-3);
|
|
277
|
+
}
|
|
278
|
+
@include respond-to('pad_h') {
|
|
279
|
+
margin-right: var(--o-gap-2);
|
|
280
|
+
}
|
|
281
|
+
@include respond-to('pad_v') {
|
|
282
|
+
margin-right: var(--o-gap-2);
|
|
283
|
+
}
|
|
284
|
+
@include respond-to('phone') {
|
|
285
|
+
margin-right: var(--o-gap-2);
|
|
286
|
+
}
|
|
287
|
+
}
|
|
288
|
+
|
|
289
|
+
span {
|
|
290
|
+
font-weight: 600;
|
|
291
|
+
}
|
|
292
|
+
}
|
|
293
|
+
|
|
294
|
+
.desc-list-item-desc {
|
|
295
|
+
font-weight: 400;
|
|
296
|
+
--padding-left: var(--o-gap-4);
|
|
297
|
+
padding-left: calc(var(--o-gap-4) + var(--padding-left));
|
|
298
|
+
color: rgba(255, 255, 255, 0.8);
|
|
277
299
|
@include respond-to('laptop') {
|
|
278
|
-
|
|
300
|
+
--padding-left: var(--o-gap-3);
|
|
279
301
|
}
|
|
280
302
|
@include respond-to('pad_h') {
|
|
281
|
-
|
|
303
|
+
--padding-left: var(--o-gap-2);
|
|
282
304
|
}
|
|
283
305
|
@include respond-to('pad_v') {
|
|
284
|
-
|
|
306
|
+
padding-left: var(--o-gap-5);
|
|
307
|
+
color: var(--o-color-info2);
|
|
285
308
|
}
|
|
286
309
|
@include respond-to('phone') {
|
|
287
|
-
|
|
310
|
+
padding-left: var(--o-gap-5);
|
|
311
|
+
color: var(--o-color-info2);
|
|
288
312
|
}
|
|
289
313
|
}
|
|
290
|
-
|
|
291
|
-
span {
|
|
292
|
-
font-weight: 600;
|
|
293
|
-
}
|
|
294
|
-
}
|
|
295
|
-
|
|
296
|
-
.desc-list-item-desc {
|
|
297
|
-
font-weight: 400;
|
|
298
|
-
--padding-left: var(--o-gap-4);
|
|
299
|
-
padding-left: calc(var(--o-gap-4) + var(--padding-left));
|
|
300
|
-
color: rgba(255, 255, 255, 0.8);
|
|
301
|
-
@include respond-to('laptop') {
|
|
302
|
-
--padding-left: var(--o-gap-3);
|
|
303
|
-
}
|
|
304
|
-
@include respond-to('pad_h') {
|
|
305
|
-
--padding-left: var(--o-gap-2);
|
|
306
|
-
}
|
|
307
|
-
@include respond-to('pad_v') {
|
|
308
|
-
padding-left: var(--o-gap-5);
|
|
309
|
-
color: var(--o-color-info2);
|
|
310
|
-
}
|
|
311
|
-
@include respond-to('phone') {
|
|
312
|
-
padding-left: var(--o-gap-5);
|
|
313
|
-
color: var(--o-color-info2);
|
|
314
|
-
}
|
|
315
314
|
}
|
|
316
315
|
}
|
|
317
|
-
}
|
|
318
|
-
|
|
319
|
-
.img-wrapper,
|
|
320
|
-
.img-wrapper-phone {
|
|
321
|
-
background-position: center bottom;
|
|
322
|
-
margin-top: auto; // 将元素推到父容器底部
|
|
323
|
-
background-size: contain;
|
|
324
|
-
background-repeat: no-repeat;
|
|
325
|
-
}
|
|
326
316
|
|
|
327
|
-
|
|
328
|
-
|
|
329
|
-
|
|
317
|
+
.img-wrapper,
|
|
318
|
+
.img-wrapper-phone {
|
|
319
|
+
background-position: center bottom;
|
|
320
|
+
margin-top: auto; // 将元素推到父容器底部
|
|
321
|
+
background-size: contain;
|
|
322
|
+
background-repeat: no-repeat;
|
|
330
323
|
}
|
|
331
|
-
}
|
|
332
324
|
|
|
333
|
-
|
|
334
|
-
|
|
335
|
-
|
|
325
|
+
.img-wrapper {
|
|
326
|
+
@include respond-to('<=pad_v') {
|
|
327
|
+
display: none;
|
|
328
|
+
}
|
|
336
329
|
}
|
|
337
|
-
}
|
|
338
330
|
|
|
339
|
-
|
|
340
|
-
.step-desc {
|
|
331
|
+
.img-wrapper-phone {
|
|
341
332
|
@include respond-to('>pad_v') {
|
|
342
|
-
|
|
333
|
+
display: none;
|
|
343
334
|
}
|
|
344
335
|
}
|
|
345
336
|
|
|
346
|
-
|
|
347
|
-
|
|
348
|
-
|
|
337
|
+
&.step-1 {
|
|
338
|
+
.step-desc {
|
|
339
|
+
@include respond-to('>pad_v') {
|
|
340
|
+
padding-bottom: 0;
|
|
341
|
+
}
|
|
342
|
+
}
|
|
349
343
|
|
|
350
|
-
&.is-dark {
|
|
351
344
|
.img-wrapper {
|
|
352
|
-
|
|
345
|
+
height: 130px;
|
|
353
346
|
}
|
|
354
|
-
|
|
355
|
-
|
|
356
|
-
|
|
357
|
-
|
|
358
|
-
|
|
359
|
-
padding-bottom: 0;
|
|
347
|
+
|
|
348
|
+
&.is-dark {
|
|
349
|
+
.img-wrapper {
|
|
350
|
+
opacity: 0.8;
|
|
351
|
+
}
|
|
360
352
|
}
|
|
361
353
|
}
|
|
362
354
|
|
|
363
|
-
|
|
364
|
-
|
|
365
|
-
|
|
355
|
+
&.step-2 {
|
|
356
|
+
.step-desc {
|
|
357
|
+
@include respond-to('>pad_v') {
|
|
358
|
+
padding-bottom: 0;
|
|
359
|
+
}
|
|
360
|
+
}
|
|
366
361
|
|
|
367
|
-
&.is-dark {
|
|
368
362
|
.img-wrapper {
|
|
369
|
-
|
|
363
|
+
height: 136px;
|
|
370
364
|
}
|
|
371
|
-
|
|
372
|
-
}
|
|
373
|
-
&.step-3 {
|
|
374
|
-
@include respond-to('>pad_v') {
|
|
375
|
-
background: linear-gradient(
|
|
376
|
-
142.13deg,
|
|
377
|
-
color-mix(in srgb, transparent 0%, transparent) 0%,
|
|
378
|
-
color-mix(in srgb, rgba(var(--o-white), 0.6) 60%, transparent) 100%
|
|
379
|
-
),
|
|
380
|
-
var(--o-color-primary1);
|
|
365
|
+
|
|
381
366
|
&.is-dark {
|
|
367
|
+
.img-wrapper {
|
|
368
|
+
opacity: 0.8;
|
|
369
|
+
}
|
|
370
|
+
}
|
|
371
|
+
}
|
|
372
|
+
|
|
373
|
+
&.step-3 {
|
|
374
|
+
@include respond-to('>pad_v') {
|
|
382
375
|
background: linear-gradient(
|
|
383
376
|
142.13deg,
|
|
384
|
-
color-mix(in srgb,
|
|
385
|
-
color-mix(in srgb, var(--o-
|
|
377
|
+
color-mix(in srgb, transparent 0%, transparent) 0%,
|
|
378
|
+
color-mix(in srgb, rgba(var(--o-white), 0.6) 60%, transparent) 100%
|
|
386
379
|
),
|
|
387
|
-
var(--o-color-
|
|
388
|
-
|
|
389
|
-
|
|
390
|
-
|
|
391
|
-
|
|
380
|
+
var(--o-color-primary1);
|
|
381
|
+
&.is-dark {
|
|
382
|
+
background: linear-gradient(
|
|
383
|
+
142.13deg,
|
|
384
|
+
color-mix(in srgb, var(--o-color-primary1) 40%, transparent) 0%,
|
|
385
|
+
color-mix(in srgb, var(--o-color-primary1) 16%, transparent) 100%
|
|
386
|
+
),
|
|
387
|
+
var(--o-color-fill2);
|
|
388
|
+
}
|
|
389
|
+
.step-idx {
|
|
390
|
+
background-color: #fff;
|
|
391
|
+
color: #000;
|
|
392
|
+
}
|
|
393
|
+
.step-title {
|
|
394
|
+
color: #fff;
|
|
395
|
+
}
|
|
396
|
+
.step-desc {
|
|
397
|
+
color: #fff;
|
|
398
|
+
}
|
|
392
399
|
}
|
|
393
|
-
|
|
394
|
-
|
|
400
|
+
|
|
401
|
+
.img-wrapper {
|
|
402
|
+
height: 280px;
|
|
403
|
+
--width: var(--o-gap-6);
|
|
404
|
+
width: calc(100% - var(--width) * 2);
|
|
405
|
+
margin-left: auto;
|
|
406
|
+
margin-right: auto;
|
|
407
|
+
@include respond-to('laptop') {
|
|
408
|
+
--width: var(--o-gap-5);
|
|
409
|
+
}
|
|
410
|
+
@include respond-to('pad_h') {
|
|
411
|
+
--width: var(--o-gap-4);
|
|
412
|
+
height: 220px;
|
|
413
|
+
}
|
|
414
|
+
@include respond-to('pad_v') {
|
|
415
|
+
--width: var(--o-gap-5);
|
|
416
|
+
}
|
|
417
|
+
@include respond-to('phone') {
|
|
418
|
+
--width: var(--o-gap-5);
|
|
419
|
+
}
|
|
395
420
|
}
|
|
396
|
-
|
|
397
|
-
|
|
421
|
+
|
|
422
|
+
.img-wrapper-phone {
|
|
423
|
+
height: 66px;
|
|
424
|
+
width: calc(100% - 24px);
|
|
425
|
+
margin: 0 12px 12px;
|
|
398
426
|
}
|
|
399
427
|
}
|
|
400
428
|
|
|
401
|
-
|
|
402
|
-
|
|
403
|
-
|
|
404
|
-
width: calc(100% - var(--width) * 2);
|
|
405
|
-
margin-left: auto;
|
|
406
|
-
margin-right: auto;
|
|
407
|
-
@include respond-to('laptop') {
|
|
408
|
-
--width: var(--o-gap-5);
|
|
409
|
-
}
|
|
429
|
+
&.step-4 {
|
|
430
|
+
position: relative;
|
|
431
|
+
padding-right: 292px;
|
|
410
432
|
@include respond-to('pad_h') {
|
|
411
|
-
|
|
412
|
-
height: 220px;
|
|
413
|
-
}
|
|
414
|
-
@include respond-to('pad_v') {
|
|
415
|
-
--width: var(--o-gap-5);
|
|
433
|
+
padding-right: 192px;
|
|
416
434
|
}
|
|
417
|
-
@include respond-to('
|
|
418
|
-
|
|
435
|
+
@include respond-to('<=pad_v') {
|
|
436
|
+
padding-right: var(--o-gap-4);
|
|
419
437
|
}
|
|
420
|
-
}
|
|
421
438
|
|
|
422
|
-
.img-wrapper-phone {
|
|
423
|
-
height: 66px;
|
|
424
|
-
width: calc(100% - 24px);
|
|
425
|
-
margin: 0 12px 12px;
|
|
426
|
-
}
|
|
427
|
-
}
|
|
428
|
-
|
|
429
|
-
&.step-4 {
|
|
430
|
-
position: relative;
|
|
431
|
-
padding-right: 292px;
|
|
432
|
-
@include respond-to('pad_h') {
|
|
433
|
-
padding-right: 192px;
|
|
434
|
-
}
|
|
435
|
-
@include respond-to('<=pad_v') {
|
|
436
|
-
padding-right: var(--o-gap-4);
|
|
437
|
-
}
|
|
438
|
-
|
|
439
|
-
.img-wrapper {
|
|
440
|
-
width: 226px;
|
|
441
|
-
height: 116px;
|
|
442
|
-
position: absolute;
|
|
443
|
-
bottom: 0;
|
|
444
|
-
right: 0;
|
|
445
|
-
}
|
|
446
|
-
|
|
447
|
-
&.is-dark {
|
|
448
439
|
.img-wrapper {
|
|
449
|
-
|
|
440
|
+
width: 226px;
|
|
441
|
+
height: 116px;
|
|
442
|
+
position: absolute;
|
|
443
|
+
bottom: 0;
|
|
444
|
+
right: 0;
|
|
445
|
+
}
|
|
446
|
+
|
|
447
|
+
&.is-dark {
|
|
448
|
+
.img-wrapper {
|
|
449
|
+
opacity: 0.8;
|
|
450
|
+
}
|
|
450
451
|
}
|
|
451
452
|
}
|
|
452
453
|
}
|
|
453
|
-
}
|
|
454
454
|
|
|
455
|
-
|
|
456
|
-
|
|
457
|
-
|
|
458
|
-
|
|
459
|
-
|
|
455
|
+
// 卡片1: 第1行第1列
|
|
456
|
+
.step-1 {
|
|
457
|
+
grid-row: 1;
|
|
458
|
+
grid-column: 1;
|
|
459
|
+
}
|
|
460
460
|
|
|
461
|
-
|
|
462
|
-
|
|
463
|
-
|
|
464
|
-
|
|
465
|
-
|
|
461
|
+
// 卡片2: 第1行第2列
|
|
462
|
+
.step-2 {
|
|
463
|
+
grid-row: 1;
|
|
464
|
+
grid-column: 2;
|
|
465
|
+
}
|
|
466
466
|
|
|
467
|
-
|
|
468
|
-
|
|
469
|
-
|
|
470
|
-
|
|
471
|
-
|
|
467
|
+
// 卡片3: 跨3行，占据第3列
|
|
468
|
+
.step-3 {
|
|
469
|
+
grid-row: 1 / 4; // 从第1行到第4行（跨3行）
|
|
470
|
+
grid-column: 3;
|
|
471
|
+
}
|
|
472
472
|
|
|
473
|
-
|
|
474
|
-
|
|
475
|
-
|
|
476
|
-
|
|
477
|
-
|
|
473
|
+
// 卡片4: 第2行，占据第1-2列
|
|
474
|
+
.step-4 {
|
|
475
|
+
grid-row: 2;
|
|
476
|
+
grid-column: 1 / 3; // 从第1列到第3列（占2列）
|
|
477
|
+
}
|
|
478
478
|
|
|
479
|
-
|
|
480
|
-
|
|
481
|
-
|
|
482
|
-
|
|
479
|
+
// 卡片5: 第3行，占据第1-2列
|
|
480
|
+
.step-5 {
|
|
481
|
+
grid-row: 3;
|
|
482
|
+
grid-column: 1 / 3;
|
|
483
|
+
}
|
|
483
484
|
}
|
|
484
485
|
}
|
|
486
|
+
|
|
485
487
|
</style>
|