first commit

miniprogram/pages/outfit-edit/outfit-edit.wxss

@@ -0,0 +1,296 @@
+.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;
+}