Regular.wxss 3.7 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206
  1. .container {
  2. display: flex;
  3. flex-direction: column;
  4. align-items: center;
  5. justify-content: center;
  6. <<<<<<< HEAD
  7. padding: 50px 40px;
  8. =======
  9. padding: 20rpx 40rpx;
  10. >>>>>>> origin/soligd
  11. height: 50vh; /* 使容器占据整个屏幕高度 */
  12. }
  13. .input {
  14. width: 100%;
  15. <<<<<<< HEAD
  16. height: 30px;
  17. margin-bottom: 10px;
  18. padding: 0 20px;
  19. border: 1px solid #ddd;
  20. border-radius: var(--border-radius, 10px);
  21. =======
  22. height: 80rpx;
  23. margin-bottom: 20rpx;
  24. padding: 0 20rpx;
  25. border: 1px solid #ddd;
  26. border-radius: var(--border-radius, 10rpx);
  27. >>>>>>> origin/soligd
  28. box-sizing: border-box;
  29. }
  30. .btn {
  31. <<<<<<< HEAD
  32. width: 30%; /* 按钮占满宽度 */
  33. height: 40px;
  34. padding: 1px 0; /* 按钮内边距,控制高度 */
  35. margin: 1px 0; /* 按钮间距 */
  36. background-color: #3EC01E; /* 按钮背景颜色 */
  37. color: white; /* 按钮文字颜色 */
  38. font-size: 16px; /* 按钮文字大小 */
  39. border: none; /* 去除按钮边框 */
  40. outline: none; /* 去除焦点边框 */
  41. text-align: center; /* 文字居中 */
  42. border-radius: 5px; /* 圆角效果 */
  43. =======
  44. width: 100%;
  45. height: 80rpx;
  46. background-color: var(--primary-color, #1aad19);
  47. color: #fff;
  48. border: none;
  49. border-radius: var(--border-radius, 10rpx);
  50. text-align: center;
  51. line-height: 45rpx;
  52. font-size: 36rpx;
  53. box-shadow: 0 4rpx 10rpx rgba(0, 0, 0, 0.1); /* 添加阴影 */
  54. transition: background-color 0.3s ease, box-shadow 0.3s ease; /* 背景颜色和阴影过渡效果 */
  55. >>>>>>> origin/soligd
  56. }
  57. .btn:active {
  58. background-color: var(--active-color, #128c13);
  59. box-shadow: 0 2rpx 5rpx rgba(0, 0, 0, 0.2); /* 按钮点击时阴影变化 */
  60. }
  61. .btn:hover {
  62. background-color: var(--hover-color, #16b818);
  63. cursor: pointer; /* 鼠标悬浮时显示手型 */
  64. <<<<<<< HEAD
  65. =======
  66. }
  67. .error {
  68. color: red;
  69. margin-top: 10rpx;
  70. animation: fadeIn 0.5s ease;
  71. }
  72. @keyframes fadeIn {
  73. from {
  74. opacity: 0;
  75. }
  76. to {
  77. opacity: 1;
  78. }
  79. }
  80. .avatar {
  81. width: 150rpx;
  82. height: 150rpx;
  83. border-radius: 50%;
  84. margin-top: 20rpx;
  85. object-fit: cover;
  86. }
  87. @media screen and (max-width: 375px) {
  88. .container {
  89. padding: 100rpx 20rpx;
  90. }
  91. .btn {
  92. font-size: 28rpx;
  93. height: 60rpx;
  94. line-height: 60rpx;
  95. }
  96. .input {
  97. height: 60rpx;
  98. }
  99. }
  100. /* pages/demo/demo.wxss */
  101. .root {
  102. display: flex;
  103. justify-content: center;
  104. align-items: center;
  105. flex-direction: column;
  106. }
  107. .touxiang {
  108. width: 300rpx;
  109. height: 300rpx;
  110. border-radius: 50%;
  111. margin-top: 30rpx;
  112. }
  113. .name {
  114. margin-top: 30rpx;
  115. }
  116. /* 弹窗 */
  117. .pop_root {
  118. position: fixed;
  119. top: 0;
  120. right: 0;
  121. bottom: 0;
  122. left: 0;
  123. background: rgb(0, 0, 0, 0.6);
  124. z-index: 1000;
  125. }
  126. .pop_content {
  127. position: fixed;
  128. bottom: 0;
  129. left: 0;
  130. right: 0;
  131. background: white;
  132. display: flex;
  133. flex-direction: column;
  134. align-items: center;
  135. border-radius: 30rpx 30rpx 0 0;
  136. }
  137. .pot_tip {
  138. font-size: 48rpx;
  139. margin-top: 30rpx;
  140. }
  141. .pop_avatar {
  142. width: 200rpx;
  143. height: 200rpx;
  144. border-radius: 50%;
  145. background: gainsboro;
  146. font-size: 35rpx;
  147. display: flex;
  148. flex-direction: center;
  149. align-items: center;
  150. margin: 30rpx;
  151. padding: 0;
  152. }
  153. .pop_img {
  154. width: 100%;
  155. height: 100%;
  156. }
  157. .pop_name {
  158. width: 300rpx;
  159. bottom: 1px solid gray;
  160. border-radius: 25epx;
  161. padding-left: 160rpx;
  162. margin-bottom: 50rpx;
  163. }
  164. .pop_bot {
  165. display: flex;
  166. margin-bottom: 50rpx;
  167. }
  168. .btn {
  169. width: 150rpx;
  170. border: 1px solid gray;
  171. border-radius: 20rpx;
  172. text-align: center;
  173. background: red;
  174. color: white;
  175. }
  176. .btn1 {
  177. width: 150rpx;
  178. border: 1px solid gray;
  179. border-radius: 20rpx;
  180. text-align: center;
  181. background: green;
  182. color: white;
  183. margin-left: 90rpx;
  184. >>>>>>> origin/soligd
  185. }