login.wxss 2.7 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176
  1. .login-box {
  2. text-align: center;
  3. padding: 220rpx 60rpx 320rpx;
  4. height: 100vh;
  5. box-sizing: border-box;
  6. display: flex;
  7. flex-direction: column;
  8. justify-content: space-between;
  9. align-items: center;
  10. }
  11. .list-block {
  12. width: 90%;
  13. }
  14. .login-box image {
  15. width: 300rpx;
  16. height: 310rpx;
  17. }
  18. .login-box button {
  19. margin-top: 80rpx;
  20. background-color: #283a8d;
  21. color: #fff;
  22. margin-bottom: 30rpx;
  23. width: 100%;
  24. font-size: 30rpx;
  25. }
  26. input {
  27. /* border-radius: 40rpx; */
  28. height: 80rpx;
  29. line-height: 80rpx;
  30. width: 100%;
  31. box-sizing: border-box;
  32. text-align: left;
  33. padding: 0 20rpx;
  34. }
  35. .loginInput {
  36. border: 2rpx solid #ccc;
  37. border-radius: 40rpx;
  38. }
  39. .item-content {
  40. flex-direction: column;
  41. margin-top: 20rpx;
  42. }
  43. .btnBottom {
  44. color: #283a8d;
  45. font-size: 28rpx;
  46. }
  47. .avatar-wrapper {
  48. padding: 0;
  49. width: 150rpx !important;
  50. height: 150rpx;
  51. border-radius: 50%;
  52. /* height: 100%; */
  53. margin: 0;
  54. display: flex;
  55. justify-content: center;
  56. align-items: center;
  57. font-size: 80rpx;
  58. font-weight: 600;
  59. color: #fff;
  60. background-color: #bbbbbd;
  61. }
  62. .avatar-wrapper view {
  63. height: 100%;
  64. display: flex;
  65. align-items: center;
  66. margin-top: -10rpx;
  67. }
  68. .avatar {
  69. display: block;
  70. width: 100%;
  71. height: 100%;
  72. z-index: 2;
  73. }
  74. .name {
  75. display: flex;
  76. align-items: center;
  77. /* height: 90rpx; */
  78. /* line-height: 90rpx; */
  79. border-bottom: 2rpx solid #f6f6f6;
  80. box-sizing: border-box;
  81. padding: 30rpx 0rpx;
  82. font-size: 28rpx;
  83. /* margin-bottom: 30rpx; */
  84. }
  85. .getPhoneNumber {
  86. font-size: 24rpx;
  87. height: 50rpx;
  88. background-color: var(--subtitleColor);
  89. color: white;
  90. text-align: center;
  91. line-height: 50rpx;
  92. border-radius: 60rpx;
  93. }
  94. .name input {
  95. height: 60rpx;
  96. line-height: 60rpx;
  97. width: calc(100% - 220rpx);
  98. }
  99. .nc {
  100. width: 150rpx;
  101. }
  102. .div {
  103. position: relative;
  104. width: 100vw;
  105. height: 100vh;
  106. box-sizing: border-box;
  107. padding: 20px 20rpx;
  108. background-color: #fff;
  109. }
  110. .sure {
  111. position: absolute;
  112. bottom: 0;
  113. width: 90%;
  114. height: 90rpx;
  115. background-color: var(--subtitleColor);
  116. color: white;
  117. text-align: center;
  118. line-height: 90rpx;
  119. border-radius: 60rpx;
  120. left: 50%;
  121. transform: translate(-50%, -50%)
  122. }
  123. /* 弹窗 */
  124. .popupContent {
  125. height: 100%;
  126. display: flex;
  127. justify-content: center;
  128. align-items: center;
  129. }
  130. .contentText {
  131. width: 80%;
  132. min-height: 200rpx;
  133. background-color: #fff;
  134. display: flex;
  135. align-items: center;
  136. flex-direction: column;
  137. justify-content: center;
  138. padding: 40rpx 20rpx;
  139. }
  140. .contentText .num {
  141. font-size: 34rpx;
  142. font-weight: 600;
  143. }
  144. .progressText {
  145. font-size: 28rpx;
  146. margin: 30rpx 40rpx;
  147. }
  148. .btnSize {
  149. width: 40%;
  150. height: 50rpx;
  151. line-height: 50rpx;
  152. font-size: 28rpx;
  153. margin-top: 40rpx;
  154. }