ion-content { --padding-top: 0; --padding-bottom: 0; --padding-start: 0; --padding-end: 0; .top-section { display: flex; height: 73vh; // 占据3/4的高度 .left, .right { display: flex; flex-direction: column; justify-content: space-between; align-items: center; } .left { width: 33.33%; // 左侧宽度1/3 background-color: #f0f0f0; } .right { width: 66.66%; // 右侧宽度2/3 background-color: #e0e0e0; } .task-time, .task-content { display: flex; justify-content: center; align-items: center; height: 33.33%; // 每项高度1/3 font-size: 1.2em; } } .bottom-section { display: flex; justify-content: space-around; align-items: center; height: 20vh; // 占据1/4的高度 ion-button { width: 40%; // 按钮宽度40% height: 40%; // 按钮高度40% border-radius: 50%; font-size: 1.2em; } } }