feat 项目页样式

src/components/project/item.vue

@@ -1,38 +1,95 @@
 <script setup lang="ts">
 defineProps<{
   projectName: string
-  status: string
-  tags: string[]
-  time: string
-  trigger: string
+  stakeRange: string
+  status: number
+  workTime: string
+  compactArea: string
+  rollerCount: string
 }>()
+
+function getStatusText(status: number) {
+  const map: Record<number, string> = {
+    0: '作业中',
+    1: '暂停中',
+    2: '已结束',
+  }
+  return map[status] || '未知'
+}
+
+function getStatusColor(status: number) {
+  const map: Record<number, string> = {
+    0: '#52c41a',
+    1: '#faad14',
+    2: '#999999',
+  }
+  return map[status] || '#999999'
+}
 </script>
 
 <template>
   <view class="project-item">
+    <!-- 头部：图标 + 项目名 + 状态 -->
     <view class="item-header">
-      <text class="project-name">
-        {{ projectName }}
-      </text>
-      <text class="status">
-        {{ status }}
-      </text>
-    </view>
-
-    <view class="tags">
-      <view v-for="(tag, index) in tags" :key="index" class="tag">
-        <text class="tag-text">
-          {{ tag }}
+      <view class="header-left">
+        <image class="project-icon" src="/static/machine.png" mode="aspectFit" />
+        <view class="header-info">
+          <text class="project-name">
+            {{ projectName }}
+          </text>
+          <text class="stake-range">
+            {{ stakeRange }}
+          </text>
+        </view>
+      </view>
+      <view class="status-badge">
+        <view class="status-dot" :style="{ backgroundColor: getStatusColor(status) }" />
+        <text class="status-text" :style="{ color: getStatusColor(status) }">
+          {{ getStatusText(status) }}
         </text>
       </view>
     </view>
 
-    <text class="time">
-      {{ time }}
-    </text>
-    <text class="trigger">
-      {{ trigger }}
-    </text>
+    <!-- 数据统计 -->
+    <view class="stats-row">
+      <view class="stat-item">
+        <text class="stat-label">
+          作业时长
+        </text>
+        <text class="stat-value">
+          {{ workTime }}
+        </text>
+      </view>
+      <view class="stat-item">
+        <text class="stat-label">
+          压实面积
+        </text>
+        <text class="stat-value">
+          {{ compactArea }}
+        </text>
+      </view>
+      <view class="stat-item">
+        <text class="stat-label">
+          碾压遍数
+        </text>
+        <text class="stat-value">
+          {{ rollerCount }}
+        </text>
+      </view>
+    </view>
+
+    <!-- 操作按钮 -->
+    <view v-if="status === 0 || status === 1" class="btn-row">
+      <wd-button size="large" type="primary" round>
+        开始项目
+      </wd-button>
+      <wd-button size="large" type="warning" round>
+        暂停项目
+      </wd-button>
+      <wd-button size="large" type="danger" round>
+        结束项目
+      </wd-button>
+    </view>
   </view>
 </template>
 
@@ -47,49 +104,85 @@ defineProps<{
   display: flex;
   justify-content: space-between;
   align-items: center;
-  margin-bottom: 12px;
+  margin-bottom: 16px;
+}
+
+.header-left {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+}
+
+.project-icon {
+  width: 40px;
+  height: 40px;
+  border-radius: 8px;
+}
+
+.header-info {
+  display: flex;
+  flex-direction: column;
 }
 
 .project-name {
-  font-size: 22px;
+  font-size: 40rpx;
   font-weight: bold;
   color: #333;
 }
 
-.status {
+.stake-range {
+  font-size: 32rpx;
+  color: #999;
+}
+
+.status-badge {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+}
+
+.status-dot {
+  width: 8px;
+  height: 8px;
+  border-radius: 50%;
+  background-color: #52c41a;
+}
+
+.status-text {
   font-size: 14px;
-  padding: 4px 12px;
-  border-radius: 12px;
-  background-color: #f6ffed;
   color: #52c41a;
 }
 
-.tags {
+.stats-row {
   display: flex;
-  gap: 8px;
-  margin-bottom: 12px;
+  justify-content: space-around;
+  padding: 16px 0;
+  border-top: 1px solid #f5f5f5;
+  border-bottom: 1px solid #f5f5f5;
+  margin-bottom: 16px;
 }
 
-.tag {
-  background-color: #fff1f0;
-  border-radius: 8px;
-  padding: 4px 12px;
+.stat-item {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
 }
 
-.tag-text {
-  font-size: 14px;
-  color: #ff4d4f;
+.stat-label {
+  font-size: 40rpx;
+  color: #999;
+  margin-bottom: 4px;
 }
 
-.time {
-  font-size: 18px;
-  color: #666;
-  display: block;
-  margin-bottom: 8px;
+.stat-value {
+  font-size: 40rpx;
+  font-weight: bold;
+  color: #333;
 }
 
-.trigger {
-  font-size: 18px;
-  color: #666;
+.btn-row {
+  display: flex;
+  justify-content: flex-end;
+  gap: 60rpx;
 }
 </style>