home.page.scss 1.1 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051
  1. ion-content {
  2. --padding-top: 0;
  3. --padding-bottom: 0;
  4. --padding-start: 0;
  5. --padding-end: 0;
  6. .top-section {
  7. display: flex;
  8. height: 73vh; // 占据3/4的高度
  9. .left, .right {
  10. display: flex;
  11. flex-direction: column;
  12. justify-content: space-between;
  13. align-items: center;
  14. }
  15. .left {
  16. width: 33.33%; // 左侧宽度1/3
  17. background-color: #f0f0f0;
  18. }
  19. .right {
  20. width: 66.66%; // 右侧宽度2/3
  21. background-color: #e0e0e0;
  22. }
  23. .task-time, .task-content {
  24. display: flex;
  25. justify-content: center;
  26. align-items: center;
  27. height: 33.33%; // 每项高度1/3
  28. font-size: 1.2em;
  29. }
  30. }
  31. .bottom-section {
  32. display: flex;
  33. justify-content: space-around;
  34. align-items: center;
  35. height: 20vh; // 占据1/4的高度
  36. ion-button {
  37. width: 40%; // 按钮宽度40%
  38. height: 40%; // 按钮高度40%
  39. border-radius: 50%;
  40. font-size: 1.2em;
  41. }
  42. }
  43. }