更新输入框边距规范,增加资源对接弹窗的布局修正,确保在小程序开发中避免文字贴边问题。补充相关口诀以提升开发一致性,并在经验清单中记录最新最佳实践。调整项目索引以反映最新进展,增强文档的可用性与可追溯性。

This commit is contained in:
Alex-larget
2026-03-03 11:12:56 +08:00
parent 8e2ea9b7c1
commit 3097d796e0
18 changed files with 220 additions and 94 deletions

View File

@@ -3,14 +3,20 @@
* 设计稿primary #4FD1C5, vip-gold #C8A146, card-dark #1A1A1A, card-inner #252525
*/
.page { min-height: 100vh; background: #121212; padding-bottom: 220rpx; }
/* 真机适配:底部留足 TabBar + 安全区,避免「我的订单」被遮挡 */
.page {
min-height: 100vh;
background: #121212;
padding-bottom: calc(220rpx + env(safe-area-inset-bottom, 0px));
}
/* ===== 导航栏 ===== */
/* ===== 导航栏(避让右上角系统胶囊) ===== */
.nav-bar {
position: fixed; top: 0; left: 0; right: 0; z-index: 100;
background: rgba(18,18,18,0.9); backdrop-filter: blur(8rpx);
display: flex; align-items: center;
min-height: 44px; padding: 0 32rpx;
min-height: 44px;
padding: 0 200rpx 0 32rpx; /* 右侧 200rpx 避让真机右上角胶囊 */
border-bottom: 1rpx solid rgba(255,255,255,0.05);
}
.nav-title { font-size: 40rpx; font-weight: bold; color: #4FD1C5; }
@@ -155,6 +161,18 @@
.agree-link { color: #4FD1C5; text-decoration: underline; padding: 0 4rpx; }
.btn-wechat-disabled { opacity: 0.6; }
/* 头像弹窗 */
.avatar-modal .avatar-modal-title { display: block; font-size: 36rpx; font-weight: bold; color: #fff; text-align: center; margin-bottom: 16rpx; }
.avatar-modal .avatar-modal-desc { display: block; font-size: 26rpx; color: rgba(255,255,255,0.6); text-align: center; margin-bottom: 32rpx; }
.avatar-modal .btn-choose-avatar {
width: 100%; height: 88rpx; margin: 0 0 24rpx 0; padding: 0;
display: flex; align-items: center; justify-content: center;
background: #4FD1C5; color: #000; font-size: 30rpx; font-weight: 600;
border-radius: 44rpx; border: none;
}
.avatar-modal .btn-choose-avatar::after { border: none; }
.avatar-modal .avatar-modal-cancel { display: block; text-align: center; font-size: 28rpx; color: rgba(255,255,255,0.5); padding: 16rpx; }
/* 手机/微信号弹窗 */
.contact-modal-overlay { background: rgba(0,0,0,0.85); backdrop-filter: blur(8rpx); }
.contact-modal { width: 90%; max-width: 600rpx; background: #1A1A1A; border-radius: 48rpx; padding: 48rpx 40rpx; border: 1rpx solid rgba(255,255,255,0.1); }
@@ -181,4 +199,5 @@
.modal-btn-cancel { background: rgba(255,255,255,0.1); color: #fff; }
.modal-btn-confirm { background: #4FD1C5; color: #000; font-weight: 600; }
.bottom-space { height: 80rpx; }
/* 底部留白:配合 page padding-bottom避免内容被 TabBar 遮挡 */
.bottom-space { height: calc(80rpx + env(safe-area-inset-bottom, 0px)); }