/** 穿搭编辑:无缝拼图预览 + 发丝线表单 + 悬浮底部操作条 **/ .page-flex { height: 100vh; display: flex; flex-direction: column; overflow: hidden; } .scroll-body { flex: 1; height: 0; } /* 预览区 */ .oe-preview { margin: 40rpx var(--pad) 0; } .oe-empty { display: flex; flex-direction: column; align-items: center; justify-content: center; aspect-ratio: 1 / 1; background: var(--paper-2); border-radius: var(--r-img); color: var(--ink-4); } .oe-empty .icon { width: 96rpx; height: 96rpx; } .oe-empty-t { margin-top: 24rpx; font-family: var(--serif); font-size: 32rpx; color: var(--ink-2); } .oe-empty-d { margin-top: 10rpx; font-size: 23rpx; color: var(--ink-3); } /* 表单 */ .oe-form { padding: 64rpx var(--pad) 0; } .oe-field { margin-bottom: 40rpx; } .oe-field:last-child { margin-bottom: 0; } .oe-label { display: flex; align-items: center; justify-content: space-between; font-size: 26rpx; color: var(--ink-2); margin-bottom: 16rpx; } .oe-req { color: var(--ink); } .oe-count { font-size: 22rpx; color: var(--ink-3); } .oe-grp { margin-top: 64rpx; } .oe-entry-d { margin-top: 6rpx; font-size: 23rpx; color: var(--ink-3); } /* 多选视图 */ .segbar { position: sticky; top: 0; z-index: 20; background: var(--glass); -webkit-backdrop-filter: saturate(180%) blur(20px); backdrop-filter: saturate(180%) blur(20px); border-bottom: 1rpx solid var(--hairline); flex-shrink: 0; } .select-body { flex: 1; height: 0; } .oe-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 44rpx 26rpx; padding: 40rpx var(--pad) 0; } .oe-skel { display: flex; flex-direction: column; gap: 18rpx; } .oe-tile { display: block; width: 100%; } /* 底部操作条 */ .oe-del { display: block; text-align: center; padding: 8rpx 0 28rpx; } .oe-count-wrap { flex: 1; min-width: 0; } .oe-count-t { font-size: 30rpx; font-weight: 600; color: var(--ink); } .oe-count-d { margin-top: 4rpx; font-size: 22rpx; color: var(--ink-3); } .oe-confirm { width: 240rpx; height: 88rpx; font-size: 28rpx; }