Przeglądaj źródła

fix: 登录浮层四步闭环单行显示(防止四字文本换行)

- .loop-pill 加 flex-shrink:0 + white-space:nowrap,防止被压缩
- .loop-pill-text 加 white-space:nowrap,四字步骤强制单行
- .loop-arrow 加 flex-shrink:0,箭头不被压缩
- 适配 750rpx 屏宽,四个 pill + 三个箭头容纳一行
liaoxg 1 tydzień temu
rodzic
commit
bc0e974a91
1 zmienionych plików z 9 dodań i 3 usunięć
  1. 9 3
      cfc-frontend/components/login-sheet.vue

+ 9 - 3
cfc-frontend/components/login-sheet.vue

@@ -355,18 +355,24 @@ export default {
   flex-direction: row;
   align-items: center;
   border-radius: 999rpx;
-  padding: 6rpx 14rpx;
+  padding: 6rpx 12rpx;
   font-size: 22rpx;
+  flex-shrink: 0;  /* 防止被压缩导致文本换行 */
+  white-space: nowrap;
 }
 .loop-pill-indigo { background: rgba(99, 102, 241, 0.12); color: #6366f1; }
 .loop-pill-green { background: rgba(16, 185, 129, 0.12); color: #10b981; }
 .loop-pill-amber { background: rgba(245, 158, 11, 0.12); color: #f59e0b; }
 .loop-pill-red { background: rgba(239, 68, 68, 0.12); color: #ef4444; }
-.loop-pill-text { margin-left: 4rpx; }
+.loop-pill-text {
+  margin-left: 4rpx;
+  white-space: nowrap;  /* 禁止四字步骤文本换行 */
+}
 .loop-arrow {
   font-size: 24rpx;
   color: #bbb;
-  padding: 0 4rpx;
+  padding: 0 2rpx;
+  flex-shrink: 0;  /* 箭头不被压缩 */
 }
 
 /* ===== 五维标签 ===== */