.edit-page { height: 100vh; display: flex; flex-direction: column; } .scroll-body { flex: 1; height: 0; } .nav-cancel { font-size: 30rpx; color: #007AFF; padding: 0 8rpx; } /* 预览区 */ .preview { margin: 24rpx; height: 320rpx; display: flex; align-items: center; justify-content: center; position: relative; overflow: hidden; } .preview-empty { display: flex; flex-direction: column; align-items: center; color: #C7C7CC; } .preview-empty .icon { width: 96rpx; height: 96rpx; } .pe-title { font-size: 26rpx; color: #8E8E93; margin-top: 16rpx; } .pe-desc { font-size: 22rpx; color: #C7C7CC; margin-top: 8rpx; } .preview-items { width: 100%; height: 100%; position: relative; } .preview-item { position: absolute; width: 140rpx; height: 180rpx; background: #F8F8FA; border-radius: 16rpx; border: 1rpx solid #E5E5EA; display: flex; align-items: center; justify-content: center; overflow: hidden; } .preview-0 { left: 30rpx; top: 60rpx; transform: rotate(-5deg); } .preview-1 { left: 120rpx; top: 100rpx; transform: rotate(3deg); } .preview-2 { left: 210rpx; top: 50rpx; transform: rotate(6deg); } .preview-3 { left: 300rpx; top: 110rpx; transform: rotate(-3deg); } .preview-4 { left: 390rpx; top: 70rpx; transform: rotate(8deg); } .preview-img { width: 100%; height: 100%; } .preview-placeholder { width: 56rpx; height: 56rpx; color: #C7C7CC; } .preview-more { position: absolute; right: 24rpx; top: 24rpx; width: 56rpx; height: 56rpx; border-radius: 50%; background: #007AFF; color: #fff; font-size: 24rpx; display: flex; align-items: center; justify-content: center; } /* 表单 */ .form-card { margin: 0 24rpx 24rpx; } .field { margin-bottom: 32rpx; } .field:last-child { margin-bottom: 0; } .field-label { display: flex; align-items: center; justify-content: space-between; font-size: 26rpx; font-weight: 600; color: #1C1C1E; margin-bottom: 16rpx; } .req { color: #FF3B30; } .count { font-size: 22rpx; color: #8E8E93; font-weight: 400; } /* 选择衣物入口 */ .select-entry { margin: 0 24rpx 24rpx; display: flex; align-items: center; justify-content: space-between; } .entry-left { display: flex; align-items: center; } .entry-icon { width: 72rpx; height: 72rpx; border-radius: 24rpx; background: rgba(0, 122, 255, 0.1); color: #007AFF; display: flex; align-items: center; justify-content: center; margin-right: 24rpx; } .entry-icon .icon { width: 40rpx; height: 40rpx; } .entry-title { font-size: 28rpx; font-weight: 600; color: #1C1C1E; } .entry-desc { font-size: 24rpx; color: #8E8E93; margin-top: 4rpx; } .entry-right { display: flex; align-items: center; color: #8E8E93; } .entry-count { font-size: 26rpx; margin-right: 8rpx; } .entry-count.on { color: #007AFF; } .entry-right .icon { width: 28rpx; height: 28rpx; color: #C7C7CC; } /* 底部按钮 */ .footer { padding: 16rpx 24rpx; padding-bottom: calc(40rpx + env(safe-area-inset-bottom)); } .delete-link { text-align: center; padding: 16rpx 0 24rpx; } /* 多选视图 */ .select-view { flex: 1; height: 0; display: flex; flex-direction: column; } .cat-scroll { background: #fff; white-space: nowrap; flex-shrink: 0; } .cat-row { display: inline-flex; padding: 20rpx 24rpx; } .cat-item { flex-shrink: 0; padding: 0 32rpx; height: 60rpx; line-height: 60rpx; border-radius: 30rpx; font-size: 26rpx; color: #3C3C43; background: #F2F2F7; margin-right: 16rpx; } .cat-item.active { background: #007AFF; color: #fff; } .select-body { flex: 1; height: 0; } .grid { display: flex; flex-wrap: wrap; padding: 24rpx; gap: 24rpx; } .grid-item { width: calc(50% - 12rpx); box-sizing: border-box; } .sk-card { height: 360rpx; border-radius: 32rpx; } .select-footer { flex-shrink: 0; background: #fff; border-top: 1rpx solid #E5E5EA; display: flex; align-items: center; justify-content: space-between; padding: 20rpx 32rpx; padding-bottom: calc(20rpx + env(safe-area-inset-bottom)); } .sf-count { font-size: 30rpx; font-weight: 600; color: #1C1C1E; } .sf-desc { font-size: 22rpx; color: #8E8E93; margin-top: 4rpx; } .sf-confirm { width: 200rpx; height: 80rpx; font-size: 28rpx; }