驾驶舱细节优化

src/main/webapp/HG/BI/components/hipi/001/left-manage-device.vue

@@ -16,7 +16,7 @@
       <div style="width: 50%;height: 100%">
         <div class="content-content-img device-img1" style="width: 79%;margin-left: 3.2vw;">
           <img :src="`${ctx}/common/img/device-img3-content.png`" class="device-img1-content img" alt/>
-          <div class="content-content-title" style="justify-content: flex-start;margin-top: 2.8vh;padding-left: 1.5vw">组立机</div>
+          <div class="content-content-title" style="justify-content: flex-start;margin-top: 2.8vh;margin-left: 0.5vw;">龙门加工中心</div>
         </div>
         <div style="width: 79%;margin-left: 3.2vw;height: 28vh;margin-top: 2vh">
           <div class="content-device-img img">
@@ -26,17 +26,41 @@
         </div>
       </div>
       <div  class="right-device img">
-        <div style="width: 100%;height: 30%;display: flex;margin-top: 3vh;">
-          <div class="content-content-title" style="width: 40%;">组立机</div>
-          <img :src="`${ctx}/common/img/device-img3-content.png`" class="device-img1-content img" style="margin: 0;" alt/>
+<!--        <div style="width: 100%;height: 30%;display: flex;margin-top: 3vh;">-->
+<!--          <div class="content-content-title" style="width: 40%;">组立机</div>-->
+<!--          <img :src="`${ctx}/common/img/device-img3-content.png`" class="device-img1-content img" style="margin: 0;" alt/>-->
+<!--        </div>-->
+<!--        <div style="width: 100%;height: 30%;display: flex;margin-top: 2vh;">-->
+<!--          <div class="content-content-title" style="width: 40%;">埋弧焊机</div>-->
+<!--          <img  :src="`${ctx}/common/img/device-img4-content.png`" class="device-img1-content img" style="margin: 0;" alt/>-->
+<!--        </div>-->
+        <div class="device-item">
+          <div class="name" style="width: 40%;">
+            <span class="text-1">数控平面钻床</span>
+            <span class="text-2">(HG004)</span>
           </div>
-        <div style="width: 100%;height: 30%;display: flex;margin-top: 2vh;">
-          <div class="content-content-title" style="width: 40%;">埋弧焊机</div>
-          <img  :src="`${ctx}/common/img/device-img4-content.png`" class="device-img1-content img" style="margin: 0;" alt/>
+          <img  :src="`${ctx}/common/img/device-img5-content.png`" class="device-img1-content img"  alt/>
         </div>
-        <div style="width: 100%;height: 30%;display: flex;margin-top: 2vh;">
-          <div class="content-content-title" style="width: 40%;">龙门加工中心</div>
-          <img  :src="`${ctx}/common/img/device-img5-content.png`" class="device-img1-content img" style="margin: 0;" alt/>
+        <div class="device-item">
+          <div class="name" style="width: 40%;">
+            <span class="text-1">数控平面钻床</span>
+            <span class="text-2">(HG005)</span>
+          </div>
+          <img  :src="`${ctx}/common/img/device-img5-content.png`" class="device-img1-content img"  alt/>
+        </div>
+        <div class="device-item">
+          <div class="name" style="width: 40%;">
+            <span class="text-1">数控平面钻床</span>
+            <span class="text-2">(HG006)</span>
+          </div>
+          <img  :src="`${ctx}/common/img/device-img5-content.png`" class="device-img1-content img"  alt/>
+        </div>
+        <div class="device-item">
+          <div class="name" style="width: 40%;">
+            <span class="text-1">数控平面钻床</span>
+            <span class="text-2">(HG007)</span>
+          </div>
+          <img  :src="`${ctx}/common/img/device-img5-content.png`" class="device-img1-content img"  alt/>
         </div>
       </div>
     </div>
@@ -137,11 +161,42 @@ module.exports = {
   display: flex;
   justify-content: center;
   align-items: center;
-  //background-image: url("../../../../../common/img/titleContentDevice.png");
+  /*background-image: url("../../../../../common/img/titleContentDevice.png");*/
 }
 .right-device{
   width: 46%;
   height: 100%;
   background-image: url("../../../../../common/img/rightLongBg.png");
 }
+  .device-item{
+    display: flex;
+    flex-direction: row;
+    /*justify-content: center;*/
+    align-items: center;
+    width: 100%;
+    height: 25%;
+    padding-left: 1%;
+  }
+.device-item .device-img1-content{
+    margin: 2% 0 0 1%;
+  }
+.device-item .name{
+    display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  }
+.device-item .name .text-1{
+  font-family: Adobe Heiti Std;
+  font-weight: normal;
+  font-size: 1vw;
+  color: #FFFFFF;
+  background: linear-gradient(180deg, #ACE5FF 0%, #FFFFFF 100%);
+  -webkit-background-clip: text;
+  -webkit-text-fill-color: transparent;
+}
+.device-item .name .text-2{
+  font-size: 0.8vw;
+  color: #FFFFFF;
+}
 </style>