login.wxss 7.4 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137
  1. /* 基础容器 */
  2. .login-container.data-v-e4e4508d { width: 100%; min-height: 100vh; background: #fff; position: relative; display: flex; flex-direction: column;
  3. }
  4. .gradient-bg.data-v-e4e4508d { position: absolute; top: 0; left: 0; right: 0; height: 600rpx; background: linear-gradient(180deg, rgba(193, 0, 28, 0.12) 0%, rgba(255, 255, 255, 0) 100%); z-index: 1;
  5. }
  6. .content-wrapper.data-v-e4e4508d { position: relative; z-index: 2; flex: 1; display: flex; flex-direction: column; padding: 0 80rpx; box-sizing: border-box;
  7. }
  8. .logo-section.data-v-e4e4508d { display: flex; flex-direction: column; align-items: center; margin-top: 360rpx; margin-bottom: 120rpx;
  9. }
  10. .logo-outer.data-v-e4e4508d { width: 200rpx; height: 200rpx; background: #fff; border-radius: 48rpx; box-shadow: 0 40rpx 80rpx rgba(193, 0, 28, 0.35), 0 10rpx 30rpx rgba(0, 0, 0, 0.1), inset 0 4rpx 10rpx rgba(255,255,255,0.8); display: flex; align-items: center; justify-content: center; overflow: hidden; margin-bottom: 40rpx;
  11. }
  12. .logo-img.data-v-e4e4508d { width: 100%; height: 100%;
  13. }
  14. .app-title.data-v-e4e4508d { font-size: 48rpx; font-weight: bold; color: #1a1a1a; letter-spacing: 2rpx;
  15. }
  16. .app-subtitle.data-v-e4e4508d { font-size: 26rpx; color: #999; margin-top: 10rpx; letter-spacing: 6rpx;
  17. }
  18. .main-btn.data-v-e4e4508d { width: 100%; height: 100rpx; background: linear-gradient(135deg, #C1001C 0%, #FF4D4F 100%); border-radius: 50rpx; color: #fff; display: flex; align-items: center; justify-content: center; font-size: 32rpx; font-weight: bold; box-shadow: 0 12rpx 30rpx rgba(193, 0, 28, 0.2); border: none; margin-bottom: 40rpx;
  19. }
  20. .btn-icon.data-v-e4e4508d { width: 48rpx; height: 48rpx; margin-right: 16rpx;
  21. }
  22. .agreement-text.data-v-e4e4508d { font-size: 24rpx; color: #999;
  23. }
  24. .link.data-v-e4e4508d { color: #C1001C; margin: 0 4rpx; font-weight: 500;
  25. }
  26. .footer-section.data-v-e4e4508d { margin-top: auto; padding-bottom: 60rpx; text-align: center; font-size: 20rpx; color: #dcdcdc;
  27. }
  28. /* 弹窗通用基础 */
  29. .global-mask.data-v-e4e4508d { position: fixed; top: 0; left: 0; right: 0; bottom: 0; background: rgba(0,0,0,0.5); z-index: 998;
  30. }
  31. .center-card.data-v-e4e4508d { position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 620rpx; background: #fff; border-radius: 32rpx; z-index: 1000; box-shadow: 0 30rpx 80rpx rgba(0,0,0,0.15); padding: 50rpx 40rpx; display: flex; flex-direction: column;
  32. }
  33. .bottom-pop.data-v-e4e4508d { position: fixed; bottom: 0; left: 0; right: 0; background: #fff; border-radius: 40rpx 40rpx 0 0; z-index: 1001; padding: 40rpx; padding-bottom: calc(50rpx + env(safe-area-inset-bottom)); box-shadow: 0 -10rpx 40rpx rgba(0,0,0,0.05);
  34. }
  35. /* 按钮对齐辅助 */
  36. button.data-v-e4e4508d { display: flex !important; align-items: center !important; justify-content: center !important; padding: 0 !important; line-height: normal !important;
  37. }
  38. button.data-v-e4e4508d::after { border: none;
  39. }
  40. /* 协议拦截弹窗 */
  41. .card-title.data-v-e4e4508d { font-size: 38rpx; font-weight: bold; text-align: center; margin-bottom: 30rpx;
  42. }
  43. .card-body.data-v-e4e4508d { font-size: 28rpx; color: #666; line-height: 1.6; text-align: center; margin-bottom: 50rpx;
  44. }
  45. .card-footer-btns.data-v-e4e4508d { display: flex; gap: 24rpx;
  46. }
  47. .btn-item.data-v-e4e4508d { flex: 1; height: 90rpx; border-radius: 45rpx; font-size: 30rpx; display: flex !important; align-items: center !important; justify-content: center !important; text-align: center; line-height: 90rpx;
  48. }
  49. .btn-item.cancel.data-v-e4e4508d { background: #f8f8f8; color: #999;
  50. }
  51. .btn-item.agree.data-v-e4e4508d { background: #C1001C; color: #fff; font-weight: bold;
  52. }
  53. /* 协议内容弹窗专项修复 */
  54. .p-pop-header.data-v-e4e4508d { display: flex; justify-content: space-between; align-items: center; margin-bottom: 30rpx;
  55. }
  56. .p-pop-title.data-v-e4e4508d { font-size: 36rpx; font-weight: bold; color: #1a1a1a;
  57. }
  58. .p-pop-close.data-v-e4e4508d { font-size: 48rpx; color: #ccc; padding: 10rpx;
  59. }
  60. .p-pop-scroll.data-v-e4e4508d { max-height: 55vh; margin-bottom: 30rpx;
  61. }
  62. .rich-text-wrapper.data-v-e4e4508d { padding: 10rpx 0; color: #444; font-size: 28rpx;
  63. }
  64. .p-pop-footer.data-v-e4e4508d { padding-top: 20rpx;
  65. }
  66. .p-pop-btn.data-v-e4e4508d { width: 100%; height: 90rpx; background: #C1001C; color: #fff; border-radius: 45rpx; font-size: 30rpx; font-weight: bold;
  67. }
  68. /* 头像授权弹窗 */
  69. .pop-header-bar.data-v-e4e4508d { display: flex; justify-content: space-between; align-items: center; margin-bottom: 60rpx;
  70. }
  71. .pop-cancel.data-v-e4e4508d { font-size: 30rpx; color: #999;
  72. }
  73. .pop-main-title.data-v-e4e4508d { font-size: 32rpx; font-weight: bold;
  74. }
  75. .pop-done.data-v-e4e4508d { font-size: 30rpx; color: #C1001C; font-weight: bold;
  76. }
  77. .profile-edit-content.data-v-e4e4508d { display: flex; flex-direction: column; align-items: center;
  78. }
  79. .avatar-wrapper-btn.data-v-e4e4508d {
  80. width: 170rpx; height: 170rpx; border-radius: 85rpx; background: #f8f8f8;
  81. position: relative; margin-bottom: 24rpx; padding: 0 !important; overflow: visible;
  82. display: flex !important; align-items: center; justify-content: center;
  83. border: none;
  84. }
  85. .current-avatar.data-v-e4e4508d { width: 100%; height: 100%; border-radius: 85rpx; border: 4rpx solid #fff; box-shadow: 0 4rpx 15rpx rgba(0,0,0,0.05);
  86. }
  87. .camera-icon.data-v-e4e4508d {
  88. position: absolute; bottom: 0; right: 0; background: #fff; width: 56rpx; height: 56rpx;
  89. border-radius: 28rpx; display: flex; align-items: center; justify-content: center;
  90. box-shadow: 0 4rpx 12rpx rgba(0,0,0,0.12); z-index: 5;
  91. }
  92. .camera-icon image.data-v-e4e4508d { width: 30rpx; height: 30rpx;
  93. }
  94. .edit-hint.data-v-e4e4508d { font-size: 24rpx; color: #999; margin-bottom: 70rpx; width: 100%; text-align: center; display: block;
  95. }
  96. .nickname-edit-box.data-v-e4e4508d { width: 100%; display: flex; align-items: center; padding: 36rpx 0; border-top: 1rpx solid #f0f0f0; border-bottom: 1rpx solid #f0f0f0; margin-bottom: 40rpx;
  97. }
  98. .nickname-edit-box .label.data-v-e4e4508d { width: 130rpx; font-size: 32rpx;
  99. }
  100. .nickname-input.data-v-e4e4508d { flex: 1; font-size: 32rpx;
  101. }
  102. .notice-text.data-v-e4e4508d { font-size: 24rpx; color: #bfbfbf; text-align: center; display: block; margin-bottom: 60rpx;
  103. }
  104. .confirm-btn-fixed.data-v-e4e4508d { width: 100%; height: 96rpx; background: #C1001C; color: #fff; border-radius: 16rpx; font-size: 32rpx; font-weight: bold;
  105. }
  106. /* 手机号授权弹窗 */
  107. .p-header.data-v-e4e4508d { display: flex; align-items: center; margin-bottom: 50rpx;
  108. }
  109. .p-mini-logo.data-v-e4e4508d { width: 44rpx; height: 44rpx; border-radius: 8rpx; margin-right: 16rpx;
  110. }
  111. .p-app-name.data-v-e4e4508d { font-size: 28rpx; color: #7f7f7f;
  112. }
  113. .p-title.data-v-e4e4508d { font-size: 40rpx; font-weight: bold; color: #000; margin-bottom: 44rpx; display: block;
  114. }
  115. .p-number-card.data-v-e4e4508d { background: #fbfbfb; padding: 36rpx; border-radius: 20rpx; display: flex; justify-content: space-between; align-items: center; margin-bottom: 30rpx; border: 1rpx solid #f0f0f0;
  116. }
  117. .p-real-num.data-v-e4e4508d { font-size: 36rpx; font-weight: bold; color: #1a1a1a; display: block;
  118. }
  119. .p-num-hint.data-v-e4e4508d { font-size: 24rpx; color: #999;
  120. }
  121. .p-other-link.data-v-e4e4508d { font-size: 28rpx; color: #576b95; display: block; margin-bottom: 60rpx;
  122. }
  123. .p-footer-btns.data-v-e4e4508d { display: flex; gap: 30rpx;
  124. }
  125. .p-btn-fixed.data-v-e4e4508d { flex: 1; height: 96rpx; border-radius: 16rpx; font-size: 32rpx; border: none;
  126. }
  127. .p-deny.data-v-e4e4508d { background: #f2f2f2; color: #C1001C;
  128. }
  129. .p-allow.data-v-e4e4508d { background: #C1001C; color: #fff; font-weight: bold;
  130. }