样式调整

src/views/yhlywsytst/yhlywsytst/index.vue

@@ -24,8 +24,12 @@
       </div>
     </div> -->
     <!-- 右侧操作边框-->
-<!--    <div class="rightOpt">
-      <div class="full padding5" style="padding-top: 10px;">
+   <div class="rightOpt">
+      <div class="full padding5">
+        <!-- title-->
+        <div class="optTitle">
+            {{selectedModel.name?selectedModel.name+'的':''}}设备信息
+        </div>
         <div class="full  data-box1" style="position: relative;">
           <i class="topL"></i>
           <i class="topR"></i>
@@ -39,7 +43,7 @@
         </div>
       </div>
 
-    </div> -->
+    </div>
 
     <!-- threeDdiv-->
     <div id="container" ref="container" class="full">
@@ -93,6 +97,9 @@
       },
     data() {
       return {
+        selectedModel:{
+          name:''
+        },
         /* 加载相关动画*/
         loading:true,
         loadingText:'正在加载模型,请等待!',
@@ -146,7 +153,7 @@
       },
       loadDm(){
         const geometry = new THREE.PlaneGeometry(1000, 1000, 500, 500); // 创建一个100x100的平面，水平和垂直各10条线
-        const material = new THREE.LineBasicMaterial({ color: 0x63625b, linewidth: 0.5 });
+        const material = new THREE.LineBasicMaterial({ color: 0x585858, linewidth: 0.5 });
         const grid = new THREE.LineSegments(geometry, material);
         grid.rotation.x = -Math.PI / 2; // 旋转网格，使其平铺在x-z平面上
         grid.position.y = -18; // 将网格向下移动一点，使其位于底部
@@ -171,6 +178,7 @@
               return
             }
             const model = intersects[0].object
+            this.selectedModel=model
             /* 执行并情况材料队列 */
             this.reMaterialQue.forEach(item => {
               item.revert()
@@ -380,11 +388,22 @@
   }
 
   .data-box1 {
-    background-color: rgba(13, 37, 66, 0.5);
+    background-color: rgba(13, 37, 66, 0.1);
     border: 2px solid #032d60;
     -webkit-box-shadow: #07417a 0px 0px 10px;
     -moz-box-shadow: #07417a 0px 0px 10px;
     box-shadow: inset 0 0 30px #07417a;
     /*position: relative;*/
   }
+  /* 调整*/
+  .optTitle{
+    position: absolute;
+    background-color:rgba(28, 144, 198, 0.7);
+    height: 40px;
+    width: 100%;
+    line-height: 40px;
+    font-size: 16px;
+    text-align: center;
+    color: #fff;
+  }
 </style>