src/views/3DOverview/index.vue

@@ -37,13 +37,15 @@
                   </p>
                   <p>
                     <b>通信状态 :</b>
-                    <span
+                    <span class="round-dot">
-                      class="round-dot"
+                      <span
-                      :class="{
+                        class="dot-icon"
-                        'danger-dot': currentEquipment.status === '故障',
+                        :class="{
-                        'warning-dot': currentEquipment.status === '调试中'
+                          'green-dot': currentEquipment.status === '生产中',
-                      }"
+                          'red-dot': currentEquipment.status === '故障',
-                    >
+                          'yellow-dot': currentEquipment.status === '调试中'
+                        }"
+                      ></span>
                       {{ currentEquipment.status }}
                     </span>
                   </p>
@@ -328,8 +330,8 @@ export default {
   position: absolute;
   top: 0;
   left: 0;
-  height: calc(136px * var(--beilv));
+  height: calc(128px * var(--beilv));
-  width: calc(176px * var(--beilv));
+  width: calc(188px * var(--beilv));
 }
 
 .techy-body-part__middle__inner {
@@ -338,6 +340,7 @@ export default {
   display: flex;
   flex-direction: column;
   justify-content: space-between;
+  /* gap: calc(6px * var(--beilv)); */
 }
 
 .techy-body-part__middle__inner p {
@@ -346,6 +349,7 @@ export default {
   font-size: calc(12px * var(--beilv));
   line-height: 1.5;
   color: #fff;
+  display: flex;
 }
 
 .techy-body-part__middle__inner p > span {
@@ -354,19 +358,40 @@ export default {
 }
 
 .techy-body-part__middle__inner p > span.round-dot {
-  padding-left: calc(28px * var(--beilv));
+  /* padding-left: calc(28px * var(--beilv)); */
+  display: flex;
+  align-items: center;
+  gap: calc(4px * var(--beilv));
 }
 
-.round-dot::before {
+.dot-icon {
-  content: '';
+  height: calc(16px * var(--beilv));
-  position: absolute;
+  width: calc(16px * var(--beilv));
+}
+
+.red-dot {
+  background: url(./components/assets/red.png) 20% center / 100% no-repeat;
+}
+.green-dot {
+  background: url(./components/assets/green.png) 20% center / 100% no-repeat;
+}
+.yellow-dot {
+  background: url(./components/assets/orange.png) 20% center / 100% no-repeat;
+}
+.blue-dot {
+  background: url(./components/assets/blue.png) 20% center / 100% no-repeat;
+}
+
+/* .round-dot::before {
+  content: ''; */
+/* position: absolute;
   top: calc(4px * var(--beilv));
-  left: calc(16px * var(--beilv));
+  left: calc(16px * var(--beilv)); */
-  width: calc(8px * var(--beilv));
+/* width: calc(8px * var(--beilv));
   height: calc(8px * var(--beilv));
   background-color: rgb(82, 231, 82);
   border-radius: calc(4px * var(--beilv));
-}
+} */
 
 .danger-dot::before {
   background-color: #e71837;

src/views/QualityManager/HomePage.vue

@@ -627,7 +627,7 @@ export default {
   width: calc(375px * var(--beilv));
 }
 
-@media all and (max-width: 2000px) {
+@media all and (max-width: 2040px) {
   .production-rate {
     /* text-align: left; */
   }