app的ui修改

apps/hand-factory/components/klp-ui/k-collapse-panel/k-collapse-panel.vue

@@ -74,29 +74,33 @@ export default {
 </script>
 
 <style lang="scss" scoped>
+/* 简洁折叠面板 */
 .collapse-panel {
   margin: 16rpx 0;
-  border-radius: 8rpx;
+  border-radius: 16rpx;
   overflow: hidden;
-  border: 1rpx solid #eee;
+  background: #ffffff;
+  box-shadow: 0 2rpx 12rpx rgba(0, 0, 0, 0.04);
+  border: 1rpx solid #e8e8e8;
+  transition: all 0.3s ease;
 
   .collapse-header {
     display: flex;
     justify-content: space-between;
     align-items: center;
-    padding: 24rpx;
-    background-color: #2bf;
+    padding: 24rpx 30rpx;
+    background: #1a73e8;
     color: white;
-    transition: background-color 0.2s;
+    transition: all 0.2s ease;
 
     &:active {
-      background-color: #f1f3f5;
+      opacity: 0.9;
     }
 
     .title {
       font-size: 32rpx;
-      font-weight: 500;
-      color: white;
+      font-weight: 600;
+      color: #ffffff;
       display: flex;
       align-items: center;
       gap: 12rpx;
@@ -116,6 +120,9 @@ export default {
     .arrow {
       transition: transform 0.3s ease;
       color: white;
+      display: flex;
+      align-items: center;
+      justify-content: center;
 
       &-open {
         transform: rotate(90deg);
@@ -125,10 +132,9 @@ export default {
 
   .collapse-content {
     overflow: hidden;
-    padding: 0 24rpx;
-    background-color: #fff;
+    padding: 0;
+    background: #fff;
     
-    // 展开动画
     &-enter-active,
     &-leave-active {
       transition: all 0.3s ease;

apps/hand-factory/components/klp-ui/k-info-card/k-info-card.vue

@@ -56,62 +56,83 @@ export default {
 </script>
 
 <style scoped>
-/* 卡片容器 */
+/* 简洁信息卡片容器 */
 .card-container {
   overflow: hidden;
-  background: #fff;
-  box-shadow: 0 2rpx 12rpx rgba(0,0,0,0.05);
+  background: #ffffff;
+  border-radius: 16rpx;
+  box-shadow: 0 2rpx 12rpx rgba(0, 0, 0, 0.04);
+  border: 1rpx solid #e8e8e8;
+  transition: all 0.2s ease;
+  
+  &:active {
+    box-shadow: 0 4rpx 16rpx rgba(0, 0, 0, 0.08);
+  }
 }
 
-/* 头部样式 */
+/* 简洁头部样式 */
 .card-header {
   display: flex;
   justify-content: space-between;
   align-items: center;
-  padding: 20rpx;
+  padding: 24rpx 30rpx;
+  background: #1a73e8;
 }
 
 .header-title {
   font-size: 32rpx;
-  color: #333;
+  color: #ffffff;
+  font-weight: 600;
 }
 
 .header-value {
   font-size: 36rpx;
-  color: #2a7ae9;
-  font-weight: 500;
+  color: #ffffff;
+  font-weight: 700;
 }
 
 /* 信息容器 */
 .info-container {
-  padding: 20rpx;
+  padding: 30rpx;
   display: flex;
   box-sizing: border-box;
   flex-wrap: wrap;
-  justify-content: space-between;
+  gap: 20rpx;
+  background: #fff;
 }
 
 .info-row {
   display: flex;
   justify-content: space-between;
-  margin-bottom: 24rpx;
+  margin-bottom: 20rpx;
 }
 
+/* 信息项 */
 .info-item {
   display: flex;
   align-items: baseline;
+  flex: 0 0 calc(50% - 10rpx);
+  padding: 16rpx 20rpx;
+  background: #f8f9fa;
+  border-radius: 10rpx;
+  border: 1rpx solid #e8e8e8;
+  transition: all 0.2s ease;
+  
+  &:active {
+    background: #f0f2f5;
+  }
 }
 
 .info-label {
   color: #666;
-  font-size: 28rpx;
+  font-size: 26rpx;
   flex-shrink: 0;
   margin-right: 16rpx;
 }
 
 .info-value {
   color: #333;
-  font-size: 30rpx;
+  font-size: 28rpx;
   font-weight: 500;
   word-break: break-all;
 }

apps/hand-factory/components/klp-ui/k-metric-card/k-metric-card.vue

@@ -27,42 +27,54 @@ export default {
 </script>
 
 <style scoped>
+/* 简洁指标卡片容器 */
 .metric-container {
   display: grid;
   gap: 20rpx;
-  padding: 20rpx;
+  padding: 30rpx;
   box-sizing: border-box;
-  background-color: #fff;
-  box-shadow: 0 4rpx 12rpx rgba(0,0,0,0.05);
+  background: #fff;
 }
 
+/* 单个指标项 */
 .metric-item {
   display: flex;
   flex-direction: column;
   justify-content: center;
   align-items: center;
-  padding: 20rpx;
+  padding: 30rpx 20rpx;
+  background: #f8f9fa;
+  border-radius: 12rpx;
+  border: 1rpx solid #e8e8e8;
+  transition: all 0.2s ease;
+  
+  &:active {
+    background: #f0f2f5;
+  }
 }
 
+/* 指标数值 */
 .metric-value {
   font-size: 48rpx;
   font-weight: 600;
   margin-bottom: 16rpx;
   line-height: 1.2;
-  color: #333;
+  color: #1a73e8;
 }
 
+/* 单位 */
 .metric-unit {
   font-size: 0.7em;
   color: #999;
   margin-left: 8rpx;
 }
 
+/* 指标标签 */
 .metric-label {
-  font-size: 28rpx;
+  font-size: 26rpx;
   color: #666;
-  letter-spacing: 2rpx;
+  letter-spacing: 1rpx;
   text-align: center;
-  line-height: 1.4;
+  line-height: 1.5;
 }
 </style>