添加掌上工厂应用

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

@@ -0,0 +1,124 @@
+<template>
+  <view class="card-container" :style="{ borderRadius: borderRadius }">
+    <!-- 头部区域 -->
+    <view class="card-header" :style="headerStyle">
+      <text class="header-title">{{ title }}</text>
+      <text class="header-value">{{ value }}</text>
+    </view>
+
+    <!-- 信息容器（条件渲染） -->
+    <view v-if="info && info.length" class="info-container">
+      <view v-for="(item, rowIndex) in info" :key="rowIndex" class="info-item">
+          <text class="info-label">{{ item.label }}</text>
+          <text class="info-value">
+            {{ item.value }}
+            <text v-if="item.unit" class="unit-text">{{ item.unit }}</text>
+          </text>
+        </view>
+    </view>
+  </view>
+</template>
+
+<script>
+export default {
+  name: 'DeviceInfoCard',
+  props: {
+    title: {
+      type: String,
+      required: true
+    },
+    value: {
+      type: [String, Number],
+      required: true
+    },
+    info: {
+      type: Array,
+      default: () => []
+    },
+    // 样式相关props
+    borderRadius: {
+      type: String,
+      default: '10rpx'
+    },
+    headerStyle: {
+      type: Object,
+      default: () => ({
+        backgroundColor: '#d9edf6',
+        border: '1px solid #d9edf6'
+      })
+    },
+    itemWidth: {
+      type: String,
+      default: '48%'  // 控制信息项宽度
+    }
+  }
+}
+</script>
+
+<style scoped>
+/* 卡片容器 */
+.card-container {
+  overflow: hidden;
+  background: #fff;
+  box-shadow: 0 2rpx 12rpx rgba(0,0,0,0.05);
+}
+
+/* 头部样式 */
+.card-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding: 20rpx;
+}
+
+.header-title {
+  font-size: 32rpx;
+  color: #333;
+}
+
+.header-value {
+  font-size: 36rpx;
+  color: #2a7ae9;
+  font-weight: 500;
+}
+
+/* 信息容器 */
+.info-container {
+  padding: 20rpx;
+  display: flex;
+  box-sizing: border-box;
+  flex-wrap: wrap;
+  justify-content: space-between;
+}
+
+.info-row {
+  display: flex;
+  justify-content: space-between;
+  margin-bottom: 24rpx;
+}
+
+.info-item {
+  display: flex;
+  align-items: baseline;
+}
+
+.info-label {
+  color: #666;
+  font-size: 28rpx;
+  flex-shrink: 0;
+  margin-right: 16rpx;
+}
+
+.info-value {
+  color: #333;
+  font-size: 30rpx;
+  font-weight: 500;
+  word-break: break-all;
+}
+
+.unit-text {
+  font-size: 0.8em;
+  color: #999;
+  margin-left: 6rpx;
+}
+</style>