Apply Morandi 2024 Color Scheme to Calculator page

codes/minipro/calculation/miniprogram/pages/calculator/calculator.wxss

@@ -3,7 +3,7 @@
 /* ========== 全局 ========== */
 page {
   height: 100%;
-  background-color: #1c1c1e;
+  background-color: #EBF4F8; /* Color 03 (Background) */
   display: flex;
   flex-direction: column;
 }
@@ -24,7 +24,7 @@ page {
   justify-content: flex-end;
   align-items: flex-end;
   padding: 30rpx 40rpx 20rpx;
-  background: linear-gradient(180deg, #1c1c1e 0%, #2c2c2e 100%);
+  background: transparent; /* No more dark gradient */
   position: relative;
   overflow: hidden;
 }
@@ -52,32 +52,34 @@ page {
   align-items: center;
   justify-content: center;
   border-radius: 50%;
-  background: rgba(255,255,255,0.08);
+  background: rgba(17, 97, 107, 0.1); /* Color 01 with opacity */
 }
 
 .action-icon {
   font-size: 30rpx;
+  color: #11616B; /* Color 01 */
 }
 
 /* 模式切换 */
 .mode-indicator text {
-  color: rgba(255,255,255,0.4);
+  color: #7BBDB6; /* Color 02 text */
   font-size: 24rpx;
   padding: 10rpx 24rpx;
   border-radius: 30rpx;
-  background: rgba(255,255,255,0.06);
+  background: rgba(123, 189, 182, 0.2); /* Color 02 bg */
   border: none;
 }
 
 .mode-indicator text.active {
-  color: #ff9f0a;
-  background: rgba(255, 159, 10, 0.15);
+  color: #11616B; /* Color 01 text */
+  background: rgba(17, 97, 107, 0.15); /* Color 01 bg */
+  font-weight: 600;
 }
 
 /* 表达式行 */
 .history-text {
   font-size: 32rpx;
-  color: rgba(255,255,255,0.35);
+  color: rgba(17, 97, 107, 0.6); /* Color 01 faded */
   min-height: 44rpx;
   margin-bottom: 12rpx;
   font-family: -apple-system, 'SF Pro Display', 'Helvetica Neue', sans-serif;
@@ -89,7 +91,7 @@ page {
 /* 当前值 */
 .current-value {
   font-size: 130rpx;
-  color: #ffffff;
+  color: #11616B; /* Color 01 (Deep Teal) */
   line-height: 1.1;
   font-weight: 200;
   word-break: break-all;
@@ -108,7 +110,7 @@ page {
 
 /* ========== 键盘区域 ========== */
 .keypad-area {
-  background: #1c1c1e;
+  background: #EBF4F8; /* Color 03 */
   padding: 16rpx 24rpx 24rpx;
   display: flex;
   flex-direction: column;
@@ -149,17 +151,18 @@ page {
   font-family: -apple-system, 'SF Pro Display', 'Helvetica Neue', sans-serif;
   position: relative;
   overflow: hidden;
+  box-shadow: 0 4rpx 10rpx rgba(17, 97, 107, 0.05); /* Very subtle shadow */
 }
 
 /* 数字键 */
 .digit {
-  background-color: #3a3a3c;
-  color: #ffffff;
+  background-color: #ffffff;
+  color: #11616B; /* Color 01 */
 }
 
-/* 功能键 */
+/* 功能键 (AC, +/-, %) */
 .func {
-  background-color: #636366;
+  background-color: #7BBDB6; /* Color 02 (Medium Teal) */
   color: #ffffff;
   font-size: 46rpx;
   font-weight: 500;
@@ -167,16 +170,17 @@ page {
 
 /* 运算符 */
 .operator {
-  background-color: #ff9f0a;
-  color: #ffffff;
+  background-color: #FED9CD; /* Color 04 (Pale Pink/Peach) */
+  color: #DC8B70; /* Color 05 (Terracotta) for contrast */
   font-size: 64rpx;
   font-weight: 400;
 }
 
 /* 等号键：渐变突出 */
 .equal {
-  background: linear-gradient(135deg, #ff9f0a 0%, #ff6723 100%);
-  box-shadow: 0 6rpx 20rpx rgba(255, 159, 10, 0.35);
+  background: #11616B; /* Color 01 (Deep Teal) */
+  color: #ffffff;
+  box-shadow: 0 6rpx 20rpx rgba(17, 97, 107, 0.3);
 }
 
 /* 0键 */
@@ -191,7 +195,7 @@ page {
 /* 点击反馈 */
 .btn-hover {
   transform: scale(0.92);
-  opacity: 0.75;
+  opacity: 0.9;
 }
 
 /* 科学模式缩放 */
@@ -219,8 +223,8 @@ page {
   width: 120rpx !important;
   height: 120rpx !important;
   font-size: 32rpx !important;
-  background: rgba(255,255,255,0.08) !important;
-  color: #64d2ff !important;
+  background: rgba(17, 97, 107, 0.05) !important; /* Very light teal bg */
+  color: #11616B !important; /* Color 01 */
   border-radius: 50% !important;
   font-weight: 500 !important;
   letter-spacing: 1rpx;
@@ -249,18 +253,18 @@ page {
   left: 0;
   right: 0;
   bottom: 0;
-  background: rgba(0,0,0,0.55);
+  background: rgba(17, 97, 107, 0.4); /* Color 01 dim */
 }
 
 .history-content {
   position: relative;
   z-index: 101;
-  background: #2c2c2e;
+  background: #EBF4F8; /* Color 03 */
   border-radius: 0 0 36rpx 36rpx;
   max-height: 70vh;
   display: flex;
   flex-direction: column;
-  box-shadow: 0 16rpx 48rpx rgba(0,0,0,0.5);
+  box-shadow: 0 16rpx 48rpx rgba(17, 97, 107, 0.2);
 }
 
 .history-panel.show .history-content {
@@ -277,22 +281,22 @@ page {
   justify-content: space-between;
   align-items: center;
   padding: 36rpx 40rpx;
-  border-bottom: 1rpx solid rgba(255,255,255,0.08);
+  border-bottom: 2rpx solid rgba(17, 97, 107, 0.1);
 }
 
 .history-title {
-  color: #ffffff;
+  color: #11616B; /* Color 01 */
   font-size: 34rpx;
   font-weight: 600;
   letter-spacing: 1rpx;
 }
 
 .history-clear {
-  color: #ff9f0a;
+  color: #DC8B70; /* Color 05 */
   font-size: 28rpx;
   padding: 8rpx 24rpx;
   border-radius: 20rpx;
-  background: rgba(255, 159, 10, 0.1);
+  background: rgba(220, 139, 112, 0.15); /* Color 05 faint */
 }
 
 .history-list {
@@ -329,7 +333,7 @@ page {
 .history-empty {
   text-align: center;
   padding: 100rpx 0;
-  color: rgba(255,255,255,0.25);
+  color: rgba(17, 97, 107, 0.4);
   font-size: 28rpx;
 }
 
@@ -337,6 +341,7 @@ page {
   font-size: 64rpx;
   display: block;
   margin-bottom: 16rpx;
+  opacity: 0.5;
 }
 
 /* ========== 小屏适配 ========== */