feat 分层架构

src/components/home/progress.vue

@@ -0,0 +1,161 @@
+<template>
+  <view class="card">
+    <view class="card-header">
+      <text class="card-title">
+        项目作业进度
+      </text>
+      <text class="card-sub">
+        K1+200-K1+800
+      </text>
+    </view>
+    <view class="card-body">
+      <view class="progress-content">
+        <view class="progress-circle">
+          <text class="progress-percent">
+            25%
+          </text>
+          <text class="progress-label">
+            jobs
+          </text>
+        </view>
+        <view class="progress-details">
+          <view class="progress-item">
+            <text class="progress-name">
+              压实合格率
+            </text>
+            <text class="progress-value">
+              95.65%
+            </text>
+          </view>
+          <view class="progress-item">
+            <text class="progress-name">
+              完成进度
+            </text>
+            <text class="progress-value">
+              66%
+            </text>
+          </view>
+          <view class="progress-item">
+            <text class="progress-name">
+              总面积
+            </text>
+            <text class="progress-value">
+              1164m²
+            </text>
+          </view>
+          <view class="progress-item">
+            <text class="progress-name">
+              已压实面积
+            </text>
+            <text class="progress-value">
+              664m²
+            </text>
+          </view>
+          <view class="progress-item">
+            <text class="progress-name">
+              未压实面积
+            </text>
+            <text class="progress-value">
+              500m²
+            </text>
+          </view>
+        </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-sub {
+  font-size: 12px;
+  color: #999999;
+}
+
+.card-body {
+  padding: 12px 16px;
+}
+
+.progress-content {
+  display: flex;
+  align-items: center;
+  gap: 16px;
+}
+
+.progress-circle {
+  width: 80px;
+  height: 80px;
+  border-radius: 50%;
+  background: conic-gradient(#4685FD 0% 25%, #f0f0f0 25% 100%);
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  position: relative;
+}
+
+.progress-circle::before {
+  content: '';
+  position: absolute;
+  width: 60px;
+  height: 60px;
+  border-radius: 50%;
+  background-color: #ffffff;
+}
+
+.progress-percent {
+  font-size: 18px;
+  font-weight: bold;
+  color: #4685FD;
+  z-index: 1;
+}
+
+.progress-label {
+  font-size: 10px;
+  color: #999999;
+  z-index: 1;
+}
+
+.progress-details {
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+}
+
+.progress-item {
+  display: flex;
+  justify-content: space-between;
+}
+
+.progress-name {
+  font-size: 12px;
+  color: #666666;
+}
+
+.progress-value {
+  font-size: 12px;
+  font-weight: bold;
+  color: #333333;
+}
+</style>