diff --git a/src/views/workOrder/components/box-3.vue b/src/views/workOrder/components/box-3.vue
index de0448a..4835ee0 100644
--- a/src/views/workOrder/components/box-3.vue
+++ b/src/views/workOrder/components/box-3.vue
@@ -110,6 +110,69 @@
 </script>
 
 <style lang="scss" scoped>
+.chart {
+  display: flex;
+  justify-content: space-between;
+  padding: vw(20) vw(15);
+
+  &__wrapper {
+    width: vw(740);
+    height: vh(370);
+    padding: 0 vw(20);
+    background-image: url('@/assets/images/bg-3.png');
+    background-size: 100% 100%;
+  }
+
+  &__inner {
+    display: flex;
+    align-items: center;
+  }
+
+  &__legend {
+    flex: 1;
+
+    &-item {
+      position: relative;
+      width: 100%;
+      height: vh(40);
+      display: flex;
+      align-items: center;
+      margin-bottom: vh(8);
+      background: linear-gradient(
+              90deg,
+              rgba(0, 150, 255, 0.34) 0%,
+              rgba(0, 150, 255, 0) 100%
+      );
+
+      &::before {
+        position: absolute;
+        content: '';
+        width: vw(4);
+        height: vh(40);
+        background-color: #0096ff;
+      }
+
+      .dot {
+        width: vw(10);
+        height: vw(10);
+        margin: 0 vw(16);
+      }
+
+      .name {
+        font-weight: 400;
+        font-size: vw(12);
+        color: #ffffff;
+        width: vw(130);
+      }
+
+      .value {
+        font-weight: bold;
+        font-size: vw(15);
+        color: #ffffff;
+      }
+    }
+  }
+}
   .work-box-3 {
     width: vw(1000);
     margin-top: vh(120);