/* pages/calculator/calculator.wxss */ page { height: 100%; background-color: #000000; display: flex; flex-direction: column; } .calculator-container { display: flex; flex-direction: column; height: 100%; padding-bottom: constant(safe-area-inset-bottom); padding-bottom: env(safe-area-inset-bottom); } /* 显示区域 */ .display-area { flex: 1; display: flex; flex-direction: column; justify-content: flex-end; align-items: flex-end; padding: 40rpx; background-color: #000; position: relative; } .mode-indicator { position: absolute; top: 40rpx; left: 40rpx; } .mode-indicator text { color: #444; font-size: 24rpx; border: 1px solid #444; padding: 10rpx 20rpx; border-radius: 30rpx; } .mode-indicator text.active { color: #ff9f0a; border-color: #ff9f0a; background: rgba(255, 159, 10, 0.1); } .history-text { font-size: 36rpx; color: #666; min-height: 50rpx; margin-bottom: 20rpx; font-family: monospace; text-align: right; width: 100%; } .current-value { font-size: 160rpx; color: #fff; line-height: 1; font-weight: 200; word-break: break-all; text-align: right; width: 100%; } .current-value.shrink { font-size: 100rpx; } .current-value.shrink-more { font-size: 70rpx; } /* 键盘区域 */ .keypad-area { background-color: #000; padding: 0 30rpx 30rpx 30rpx; display: flex; flex-direction: column; gap: 30rpx; } /* 科学模式适配 */ .keypad-area.scientific-pad { gap: 20rpx; padding-bottom: 20rpx; } /* 统一圆形按钮 */ .keypad-area.scientific-pad .btn { width: 130rpx; height: 130rpx; font-size: 50rpx; border-radius: 50%; /* 保持圆形 */ } .keypad-area.scientific-pad .zero { width: 280rpx; /* 适配新的宽度 */ border-radius: 65rpx; /* 圆角为高度一半 */ } /* 科学功能键行 */ .keypad-area.scientific-pad .sci-btn { width: 120rpx; /* 稍微大一点,填满宽度 */ height: 120rpx; /* 正圆 */ font-size: 36rpx; background: #222; color: #fff; border-radius: 50%; } .small-row { justify-content: space-around; /* 均匀分布 */ gap: 10rpx; } .row { display: flex; justify-content: space-between; gap: 30rpx; } .keypad-area.scientific-pad .row { gap: 20rpx; } .btn { width: 150rpx; height: 150rpx; border-radius: 75rpx; /* 圆形按钮 */ display: flex; justify-content: center; align-items: center; font-size: 60rpx; font-weight: 500; } /* 数字键 */ .digit { background-color: #333333; color: #fff; } /* 功能键 (AC, Del, +/-) */ .func { background-color: #a5a5a5; color: #000; font-size: 50rpx; font-weight: 600; } /* 运算符 */ .operator { background-color: #ff9f0a; color: #fff; font-size: 70rpx; padding-bottom: 10rpx; padding: 0; } /* 0键特殊处理 */ .zero { width: 330rpx; border-radius: 75rpx; justify-content: flex-start; padding-left: 60rpx; box-sizing: border-box; } /* 点击反馈 */ .btn-hover { opacity: 0.7; } /* 平板适配或小屏适配 */ @media (max-width: 360px) { .btn { width: 140rpx; height: 140rpx; font-size: 50rpx; } .zero { width: 310rpx; } }