Optimize UI for unit converter and random draw, remove relative calculator page

games/minipro/calculation/miniprogram/pages/unit-converter/unit-converter.wxss

@@ -1,56 +1,151 @@
+page {
+  background-color: #f7f8fa;
+  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
+}
+
 .container {
   padding: 20px;
+  max-width: 600px;
+  margin: 0 auto;
 }
 
-.section {
-  background: #f0f0f0;
-  border-radius: 8px;
-  margin-bottom: 20px;
-  padding: 10px;
-  text-align: center;
+/* 顶部选择区 */
+.header-section {
+  margin-bottom: 24px;
+  display: flex;
+  justify-content: center;
 }
 
-.picker {
-  font-size: 18px;
+.category-picker {
+  background: #ffffff;
+  padding: 10px 24px;
+  border-radius: 50px;
+  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
+  display: flex;
+  align-items: center;
+  gap: 10px;
   color: #333;
 }
 
-.converter-box {
+.category-picker .label {
+  font-size: 14px;
+  color: #888;
+}
+
+.category-picker .value {
+  font-size: 18px;
+  font-weight: 600;
+  color: #007aff;
+}
+
+.category-picker .arrow {
+  font-size: 12px;
+  color: #ccc;
+}
+
+/* 核心转换卡片 */
+.converter-card {
+  background: #ffffff;
+  border-radius: 20px;
+  padding: 10px;
+  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.06);
   display: flex;
   flex-direction: column;
-  gap: 20px;
 }
 
-.input-group {
+.conversion-row {
+  padding: 20px;
+  position: relative;
+}
+
+.input-row {
+  background-color: #fff;
+  border-radius: 16px 16px 4px 4px;
+}
+
+.output-row {
+  background-color: #f9fbfd; /* 稍微不同的背景色区分输入输出 */
+  border-radius: 4px 4px 16px 16px;
+}
+
+.row-label {
+  font-size: 12px;
+  color: #999;
+  margin-bottom: 8px;
+  text-transform: uppercase;
+  letter-spacing: 1px;
+}
+
+.row-content {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+}
+
+.value-input, .value-display {
+  flex: 1;
+  font-size: 32px;
+  font-weight: 500;
+  color: #333;
+  height: 48px;
+  line-height: 48px;
+  min-width: 0; /* 防止flex子项溢出 */
+}
+
+.value-display {
+  color: #007aff; /* 结果颜色高亮 */
+}
+
+/* 单位选择器 */
+.unit-selector {
+  margin-left: 15px;
+}
+
+.unit-text {
   display: flex;
   align-items: center;
-  border: 1px solid #ddd;
-  border-radius: 8px;
-  padding: 10px;
-  background: #fff;
-}
-
-.input-group input, .result-display {
-  flex: 1;
-  font-size: 24px;
-  height: 40px;
-  line-height: 40px;
-}
-
-.result-display {
-    min-height: 40px; 
-}
-
-.unit-picker {
-  margin-left: 10px;
-  padding: 5px 10px;
-  background: #eee;
-  border-radius: 4px;
+  gap: 6px;
+  padding: 8px 16px;
+  background-color: #f0f2f5;
+  border-radius: 12px;
   font-size: 16px;
+  color: #444;
+  font-weight: 500;
+  transition: background-color 0.2s;
 }
 
-.separator {
-  text-align: center;
-  font-size: 30px;
-  color: #999;
+.unit-text:active {
+  background-color: #e1e4e8;
+}
+
+.unit-arrow {
+  font-size: 10px;
+  color: #888;
+}
+
+/* 分割线和图标 */
+.divider {
+  height: 1px;
+  background-color: #eee;
+  margin: 0 20px;
+  position: relative;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+
+.icon-transfer {
+  position: absolute;
+  background: #fff;
+  color: #ccc;
+  font-size: 20px;
+  padding: 0 10px;
+  top: -14px;
+}
+
+.tips {
+  text-align: center;
+  margin-top: 30px;
+  font-size: 13px;
+  color: #ccc;
 }