temp/UI
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

iter(g174): 时间线支持双侧交替

Browse Source
This commit is contained in:
HIsheR
2026-10-26 16:21:48 +08:00
parent 7084fe1feb
commit 2316445b1e
7 changed files with 63 additions and 12 deletions
Download Patch File Download Diff File Expand all files Collapse all files
packages/skin/ui/ui.css
+35
View File
@@ -2156,6 +2156,41 @@ button.ua-step-dot:hover {
.ua-tl-right .ua-tl-item:last-child {
padding-bottom: 0;
}
.ua-tl-alternate::before {
left: 50%; /* 双侧交替：轴线居中，圆点贴中线 */
}
.ua-tl-alternate .ua-tl-item {
width: 50%;
padding: 0 var(--ua-space-3) var(--ua-space-3) 0;
}
.ua-tl-alternate .ua-tl-item.is-left {
text-align: right;
}
.ua-tl-alternate .ua-tl-item.is-right {
margin-left: 50%;
padding: 0 0 var(--ua-space-3) var(--ua-space-3);
text-align: left;
}
.ua-tl-alternate .ua-tl-dot {
left: auto;
right: -5px;
}
.ua-tl-alternate .is-right .ua-tl-dot {
left: -5px;
right: auto;
}
@media (max-width: 640px) {
.ua-tl-alternate::before { left: 5px; }
.ua-tl-alternate .ua-tl-item,
.ua-tl-alternate .ua-tl-item.is-right {
width: auto;
margin-left: 0;
padding: 0 0 var(--ua-space-3) 22px;
text-align: left;
}
.ua-tl-alternate .ua-tl-dot,
.ua-tl-alternate .is-right .ua-tl-dot { left: 0; right: auto; }
}
.ua-tl-dot {
position: absolute;
left: 0;