feat: ui update

2026-09-15 16:01:59 +08:00
parent 1a11816839
commit 26c392d612
89 changed files with 10377 additions and 4861 deletions
@@ -1,156 +1,68 @@
-.upload-page {
-  padding: 32rpx;
-  box-sizing: border-box;
+/** 上传衣物：虚线投放框 / 处理中三步进度轨 / 失败双按钮 **/
+.up-page {
+  min-height: 100vh;
+  padding-bottom: calc(60rpx + env(safe-area-inset-bottom));
 }

 /* 初始态 */
-.upload-zone {
-  margin-top: 40rpx;
-  height: 520rpx;
-  border: 3rpx dashed #C7C7CC;
-  border-radius: 32rpx;
-  background: #fff;
+.up-drop {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
+  width: calc(100% - var(--pad) * 2);
+  margin: 56rpx var(--pad) 0;
+  padding: 108rpx 48rpx;
+  border: 1rpx dashed var(--hairline-2);
+  border-radius: var(--r-img);
+  transition: background .2s var(--ease), border-color .2s var(--ease);
 }

-.upload-camera {
-  width: 100rpx;
-  height: 100rpx;
-  color: #007AFF;
-  margin-bottom: 24rpx;
+.up-drop-press {
+  background: var(--fill);
+  border-color: var(--ink-4);
 }

-.upload-title {
-  font-size: 30rpx;
-  color: #000;
+.up-drop-ic {
+  width: 68rpx;
+  height: 68rpx;
+  color: var(--ink-3);
+  margin-bottom: 36rpx;
+}
+
+.up-drop-t {
+  font-family: var(--serif);
+  font-size: 34rpx;
  font-weight: 500;
 }

-.upload-desc {
-  font-size: 22rpx;
-  color: #8E8E93;
-  margin-top: 12rpx;
+.up-drop-d {
+  margin-top: 18rpx;
+  font-size: 23rpx;
+  color: var(--ink-3);
+  letter-spacing: .01em;
 }

-.upload-tip {
+.up-note {
+  margin-top: 44rpx;
  text-align: center;
-  font-size: 24rpx;
-  color: #8E8E93;
-  margin-top: 24rpx;
+  font-size: 23rpx;
+  color: var(--ink-3);
+  letter-spacing: .01em;
 }

-/* 处理中 */
-.processing {
-  margin-top: 40rpx;
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-}
-
-.proc-img {
-  width: 480rpx;
-  height: 480rpx;
-  border-radius: 32rpx;
-  background: #F2F2F7;
-}
-
-.steps {
-  display: flex;
-  align-items: center;
-  margin-top: 56rpx;
-}
-
-.step {
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  font-size: 22rpx;
-  color: #C7C7CC;
-}
-
-.step-dot {
-  width: 20rpx;
-  height: 20rpx;
-  border-radius: 50%;
-  background: #E5E5EA;
-  margin-bottom: 12rpx;
-}
-
-.step-dot.active {
-  background: #007AFF;
-}
-
-.active-text {
-  color: #007AFF;
-}
-
-.step-line {
-  width: 100rpx;
-  height: 2rpx;
-  background: #E5E5EA;
-  margin: 0 16rpx 34rpx;
-}
-
-.step-line.active {
-  background: #007AFF;
-}
-
-.proc-text {
-  margin-top: 56rpx;
-  font-size: 30rpx;
-  font-weight: 500;
-  color: #000;
-}
-
-.proc-desc {
-  font-size: 24rpx;
-  color: #8E8E93;
-  margin-top: 12rpx;
+.up-note-left {
+  margin-top: 20rpx;
+  font-size: 25rpx;
+  color: var(--ink-2);
+  line-height: 1.7;
 }

 /* 失败态 */
-.failed {
-  margin-top: 120rpx;
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  padding: 0 40rpx;
+.up-failed {
+  padding-top: 40rpx;
 }

-.fail-icon {
-  width: 120rpx;
-  height: 120rpx;
-  border-radius: 50%;
-  background: #FF3B30;
-  color: #fff;
-  font-size: 72rpx;
-  font-weight: 700;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-}
-
-.fail-title {
-  margin-top: 40rpx;
-  font-size: 32rpx;
-  font-weight: 600;
-  color: #000;
-  text-align: center;
-}
-
-.fail-desc {
-  font-size: 24rpx;
-  color: #8E8E93;
-  margin-top: 16rpx;
-}
-
-.fail-btns {
-  width: 100%;
-  margin-top: 56rpx;
-  display: flex;
-  flex-direction: column;
-  gap: 24rpx;
+.up-failed .up-bang {
+  margin-left: var(--pad);
 }