feat 项目列表

src/components.d.ts

@@ -12,9 +12,11 @@ declare module 'vue' {
     HiCounter: typeof import('./components/HiCounter.vue')['default']
     HomeConstruction: typeof import('./components/home/construction.vue')['default']
     HomeHomeNav: typeof import('./components/home/homeNav.vue')['default']
+    HomeList: typeof import('./components/home/list.vue')['default']
     HomeOverview: typeof import('./components/home/overview.vue')['default']
     HomeProgress: typeof import('./components/home/progress.vue')['default']
     HomeProjectList: typeof import('./components/home/projectList.vue')['default']
+    HomeProjectList_list: typeof import('./components/home/projectList_list.vue')['default']
     HomeStatus: typeof import('./components/home/status.vue')['default']
     HomeWarning: typeof import('./components/home/warning.vue')['default']
     InputEntry: typeof import('./components/InputEntry.vue')['default']

src/components/home/list.vue

@@ -0,0 +1,127 @@
+<template>
+  <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">
+      <wd-button size="large" round>
+        开始项目
+      </wd-button>
+      <wd-button type="warning" size="large" round>
+        暂停项目
+      </wd-button>
+      <wd-button type="danger" size="large" round>
+        结束项目
+      </wd-button>
+    </view>
+  </view>
+</template>
+
+<style scoped>
+.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: 18px;
+  font-weight: bold;
+  color: #333333;
+  margin-bottom: 4px;
+}
+
+.sub {
+  font-size: 18px;
+  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;
+  justify-content: space-around;
+  margin-bottom: 22px;
+}
+
+.param {
+  display: flex;
+  flex-direction: column;
+}
+
+.param-label {
+  font-size: 18px;
+  color: #999999;
+  margin-bottom: 4px;
+}
+
+.param-value {
+  font-size: 18px;
+  font-weight: bold;
+  color: #333333;
+}
+
+.project-actions {
+  display: flex;
+  justify-content: flex-end;
+  gap: 12px;
+}
+</style>

src/components/home/projectList.vue

@@ -4,64 +4,15 @@
       <text class="card-title">
         项目列表
       </text>
-      <text class="card-link">
+      <!-- <text class="card-link">
         查看全部
-      </text>
+      </text> -->
+      <wd-button variant="text">
+        查看全部
+      </wd-button>
     </view>
     <view class="card-body">
-      <view class="project-item">
+      <home-list />
-        <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>
@@ -83,107 +34,12 @@
 }
 
 .card-title {
-  font-size: 15px;
+  font-size: 22px;
   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>

src/components/home/status.vue

@@ -55,7 +55,7 @@
         </view>
       </view>
       <view class="card-footer">
-        <wd-button size="large">
+        <wd-button size="large" round>
           进入作业监控
         </wd-button>
       </view>