b.wxss 1.1 KB

123456789101112131415161718192021222324252627282930313233343536373839404142
  1. .container {
  2. display: flex;
  3. flex-direction: column;
  4. align-items: center;
  5. justify-content: center;
  6. padding: 50px 40px;
  7. height: 50vh; /* 使容器占据整个屏幕高度 */
  8. }
  9. .input {
  10. width: 100%;
  11. height: 30px;
  12. margin-bottom: 10px;
  13. padding: 0 20px;
  14. border: 1px solid #ddd;
  15. border-radius: var(--border-radius, 10px);
  16. box-sizing: border-box;
  17. }
  18. .btn {
  19. width: 30%; /* 按钮占满宽度 */
  20. height: 40px;
  21. padding: 1px 0; /* 按钮内边距,控制高度 */
  22. margin: 1px 0; /* 按钮间距 */
  23. background-color: #3EC01E; /* 按钮背景颜色 */
  24. color: white; /* 按钮文字颜色 */
  25. font-size: 16px; /* 按钮文字大小 */
  26. border: none; /* 去除按钮边框 */
  27. outline: none; /* 去除焦点边框 */
  28. text-align: center; /* 文字居中 */
  29. border-radius: 5px; /* 圆角效果 */
  30. }
  31. .btn:active {
  32. background-color: var(--active-color, #128c13);
  33. box-shadow: 0 2rpx 5rpx rgba(0, 0, 0, 0.2); /* 按钮点击时阴影变化 */
  34. }
  35. .btn:hover {
  36. background-color: var(--hover-color, #16b818);
  37. cursor: pointer; /* 鼠标悬浮时显示手型 */
  38. }