Calculate.wxss 1.7 KB

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465
  1. .green-box {
  2. width: 95%; /* 绿色框的宽度 */
  3. margin: 10rpx auto 0; /* 减少顶部外边距 */
  4. padding: 10rpx; /* 内边距 */
  5. background-color: #1aad19; /* 背景绿色 */
  6. border-radius: 10rpx; /* 圆角 */
  7. text-align: center; /* 内容水平居中 */
  8. color: #fff; /* 字体白色 */
  9. }
  10. .title {
  11. display: block; /* 强制换行 */
  12. font-size: 40rpx; /* 标题字体大小 */
  13. font-weight: bold; /* 加粗 */
  14. }
  15. .subtitle {
  16. display: block; /* 强制换行 */
  17. font-size: 36rpx; /* 副标题字体大小 */
  18. font-weight: bold; /* 加粗 */
  19. margin-top: 5rpx; /* 减少上下间距 */
  20. }
  21. .description-box {
  22. width: 90%; /* 白色框的宽度 */
  23. margin: 10rpx auto; /* 减少上下间距 */
  24. padding: 15rpx; /* 增加文字周围空间 */
  25. background-color: #fff; /* 背景为白色 */
  26. }
  27. .bold-text {
  28. font-size: 32rpx; /* 加粗字体大小 */
  29. font-weight: bold; /* 加粗 */
  30. color: #000; /* 黑色字体 */
  31. }
  32. .regular-text {
  33. font-size: 28rpx; /* 正文字体大小 */
  34. color: #333; /* 深灰色字体 */
  35. }
  36. .btn {
  37. width: 100%;
  38. height: 80rpx;
  39. background-color: var(--primary-color, #1aad19);
  40. color: #fff;
  41. border: none;
  42. border-radius: var(--border-radius, 10rpx);
  43. text-align: center;
  44. line-height: 45rpx;
  45. font-size: 36rpx;
  46. box-shadow: 0 4rpx 10rpx rgba(0, 0, 0, 0.1); /* 添加阴影 */
  47. transition: background-color 0.3s ease, box-shadow 0.3s ease; /* 背景颜色和阴影过渡效果 */
  48. }
  49. .btn:active {
  50. background-color: var(--active-color, #128c13);
  51. box-shadow: 0 2rpx 5rpx rgba(0, 0, 0, 0.2); /* 按钮点击时阴影变化 */
  52. }
  53. .btn:hover {
  54. background-color: var(--hover-color, #16b818);
  55. cursor: pointer; /* 鼠标悬浮时显示手型 */
  56. }