login.wxss 3.5 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184
  1. .login-container.data-v-e4e4508d {
  2. width: 100%;
  3. height: 100vh;
  4. background-color: #FFFFFF;
  5. display: flex;
  6. flex-direction: column;
  7. padding-top: 30px;
  8. box-sizing: border-box;
  9. align-items: center;
  10. padding: 0 60rpx;
  11. box-sizing: border-box;
  12. position: relative;
  13. }
  14. .app-header.data-v-e4e4508d {
  15. display: flex;
  16. flex-direction: column;
  17. align-items: center;
  18. margin-top: 180rpx;
  19. margin-bottom: 80rpx;
  20. flex-shrink: 0;
  21. }
  22. .app-logo.data-v-e4e4508d {
  23. margin-bottom: 30rpx;
  24. }
  25. .logo-square.data-v-e4e4508d {
  26. width: 140rpx;
  27. height: 140rpx;
  28. background-color: #4FC3F7;
  29. border-radius: 20rpx;
  30. display: flex;
  31. align-items: center;
  32. justify-content: center;
  33. }
  34. .book-icon.data-v-e4e4508d {
  35. position: relative;
  36. width: 90rpx;
  37. height: 70rpx;
  38. }
  39. .book-left.data-v-e4e4508d,
  40. .book-right.data-v-e4e4508d {
  41. position: absolute;
  42. width: 45rpx;
  43. height: 70rpx;
  44. background-color: #FFFFFF;
  45. border-radius: 3rpx 0 0 3rpx;
  46. }
  47. .book-right.data-v-e4e4508d {
  48. right: 0;
  49. border-radius: 0 3rpx 3rpx 0;
  50. }
  51. .book-line.data-v-e4e4508d {
  52. position: absolute;
  53. left: 45rpx;
  54. top: 8rpx;
  55. width: 2rpx;
  56. height: 54rpx;
  57. background-color: #4FC3F7;
  58. }
  59. .app-title.data-v-e4e4508d {
  60. font-size: 44rpx;
  61. color: #333333;
  62. font-weight: 600;
  63. }
  64. .form-container.data-v-e4e4508d {
  65. width: 100%;
  66. flex: 1;
  67. display: flex;
  68. flex-direction: column;
  69. justify-content: flex-start;
  70. }
  71. .input-group.data-v-e4e4508d {
  72. position: relative;
  73. margin-bottom: 50rpx;
  74. }
  75. .input-field.data-v-e4e4508d {
  76. width: 100%;
  77. height: 88rpx;
  78. font-size: 30rpx;
  79. padding: 0 20rpx;
  80. color: #333333;
  81. }
  82. .password-input.data-v-e4e4508d {
  83. padding-right: 80rpx;
  84. }
  85. .toggle-password-btn.data-v-e4e4508d {
  86. position: absolute;
  87. right: 20rpx;
  88. top: 50%;
  89. transform: translateY(-50%);
  90. font-size: 26rpx;
  91. color: #4FC3F7;
  92. z-index: 10;
  93. padding: 8rpx 12rpx;
  94. }
  95. .input-line.data-v-e4e4508d {
  96. position: absolute;
  97. bottom: 0;
  98. left: 0;
  99. right: 0;
  100. height: 1rpx;
  101. background-color: #E0E0E0;
  102. }
  103. .login-btn.data-v-e4e4508d {
  104. width: 100%;
  105. height: 96rpx;
  106. background-color: #E0E0E0;
  107. color: #999999;
  108. font-size: 34rpx;
  109. border-radius: 48rpx;
  110. margin-top: 60rpx;
  111. display: flex;
  112. align-items: center;
  113. justify-content: center;
  114. border: none;
  115. flex-shrink: 0;
  116. }
  117. .login-btn.data-v-e4e4508d:not([disabled]) {
  118. background-color: #4FC3F7;
  119. color: #FFFFFF;
  120. }
  121. .login-btn[disabled].data-v-e4e4508d {
  122. background-color: #E0E0E0;
  123. color: #999999;
  124. }
  125. .register-link.data-v-e4e4508d {
  126. margin-top: 40rpx;
  127. text-align: center;
  128. }
  129. .register-text.data-v-e4e4508d {
  130. font-size: 28rpx;
  131. color: #4FC3F7;
  132. }
  133. .third-party-login.data-v-e4e4508d {
  134. display: flex;
  135. justify-content: center;
  136. align-items: center;
  137. gap: 70rpx;
  138. position: absolute;
  139. bottom: 80rpx;
  140. left: 0;
  141. right: 0;
  142. flex-shrink: 0;
  143. padding-bottom: env(safe-area-inset-bottom);
  144. }
  145. .third-party-icon.data-v-e4e4508d {
  146. width: 88rpx;
  147. height: 88rpx;
  148. border-radius: 50%;
  149. border: 1rpx solid #E0E0E0;
  150. display: flex;
  151. align-items: center;
  152. justify-content: center;
  153. background-color: #FFFFFF;
  154. }
  155. .wechat-icon.data-v-e4e4508d {
  156. position: relative;
  157. width: 56rpx;
  158. height: 56rpx;
  159. }
  160. .wechat-bubble1.data-v-e4e4508d,
  161. .wechat-bubble2.data-v-e4e4508d {
  162. position: absolute;
  163. border-radius: 50%;
  164. background-color: #666666;
  165. }
  166. .wechat-bubble1.data-v-e4e4508d {
  167. width: 32rpx;
  168. height: 32rpx;
  169. left: 0;
  170. top: 0;
  171. }
  172. .wechat-bubble2.data-v-e4e4508d {
  173. width: 26rpx;
  174. height: 26rpx;
  175. right: 0;
  176. bottom: 0;
  177. }
  178. .qq-icon.data-v-e4e4508d,
  179. .weibo-icon.data-v-e4e4508d {
  180. font-size: 44rpx;
  181. color: #666666;
  182. font-weight: bold;
  183. }