feat 分层架构

src/components/home/projectList.vue

@@ -0,0 +1,189 @@
+<template>
+  <view class="card">
+    <view class="card-header">
+      <text class="card-title">
+        项目列表
+      </text>
+      <text class="card-link">
+        查看全部
+      </text>
+    </view>
+    <view class="card-body">
+      <view class="project-item">
+        <view class="project-info">
+          <view class="avatar" />
+          <view class="info">
+            <text class="name">
+              G6高速改扩建项目
+            </text>
+            <text class="sub">
+              K1+200-K1+800
+            </text>
+          </view>
+          <view class="status-tag">
+            作业中
+          </view>
+        </view>
+        <view class="project-params">
+          <view class="param">
+            <text class="param-label">
+              作业时长
+            </text>
+            <text class="param-value">
+              8h
+            </text>
+          </view>
+          <view class="param">
+            <text class="param-label">
+              压实面积
+            </text>
+            <text class="param-value">
+              28.5m²
+            </text>
+          </view>
+          <view class="param">
+            <text class="param-label">
+              碾压遍数
+            </text>
+            <text class="param-value">
+              10遍
+            </text>
+          </view>
+        </view>
+        <view class="project-actions">
+          <button class="btn-action btn-start">
+            开始项目
+          </button>
+          <button class="btn-action btn-pause">
+            暂停项目
+          </button>
+          <button class="btn-action btn-end">
+            结束项目
+          </button>
+        </view>
+      </view>
+    </view>
+  </view>
+</template>
+
+<style scoped>
+.card {
+  background-color: #ffffff;
+  border-radius: 12px;
+  margin-bottom: 12px;
+  overflow: hidden;
+}
+
+.card-header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 12px 16px;
+  border-bottom: 1px solid #f5f5f5;
+}
+
+.card-title {
+  font-size: 15px;
+  font-weight: bold;
+  color: #333333;
+}
+
+.card-link {
+  font-size: 12px;
+  color: #4685FD;
+}
+
+.card-body {
+  padding: 12px 16px;
+}
+
+.project-info {
+  display: flex;
+  align-items: center;
+  margin-bottom: 12px;
+}
+
+.avatar {
+  width: 48px;
+  height: 48px;
+  border-radius: 8px;
+  background-color: #f0f0f0;
+  margin-right: 12px;
+}
+
+.info {
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+}
+
+.name {
+  font-size: 14px;
+  font-weight: bold;
+  color: #333333;
+  margin-bottom: 4px;
+}
+
+.sub {
+  font-size: 12px;
+  color: #999999;
+}
+
+.status-tag {
+  font-size: 12px;
+  color: #52c41a;
+  padding: 2px 8px;
+  background-color: #f6ffed;
+  border-radius: 4px;
+}
+
+.project-params {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 12px;
+  margin-bottom: 12px;
+}
+
+.param {
+  display: flex;
+  flex-direction: column;
+}
+
+.param-label {
+  font-size: 12px;
+  color: #999999;
+  margin-bottom: 4px;
+}
+
+.param-value {
+  font-size: 14px;
+  font-weight: bold;
+  color: #333333;
+}
+
+.project-actions {
+  display: flex;
+  gap: 8px;
+}
+
+.btn-action {
+  flex: 1;
+  border: none;
+  border-radius: 4px;
+  padding: 8px 0;
+  font-size: 12px;
+  color: #ffffff;
+}
+
+.btn-start {
+  background-color: #4685FD;
+}
+
+.btn-pause {
+  background-color: #faad14;
+}
+
+.btn-end {
+  background-color: #ff4d4f;
+}
+</style>