update 架子

css/index.css

@@ -33,11 +33,28 @@ body {
   position: relative;
 }
 
+.main_header {
+  width: 60%;
+  height: 50px;
+  margin: 0 auto;
+  text-align: center;
+  box-sizing: border-box;
+  color: #8FE4E9;
+  line-height: 50px;
+  font-weight: 600;
+  font-size: 18px;
+}
+.main_wrap {
+  height: calc(100% - 50px);
+  box-sizing: border-box;
+  border: 1px solid blue;
+}
+
 .view {
-  width: 300px;
+  width: 320px;
   height: 85%;
   position: absolute;
-  top: 50px;
+  top: 80px;
   background: rgba(11, 28, 56, 0.7);
   display: flex;
   flex-direction: column;
@@ -47,9 +64,9 @@ body {
   border: 1px solid red;
 }
 
-.view-left {
+.view_left {
   left: 40px
 }
-.view-right {
+.view_right {
   right: 40px;
 }
\ No newline at end of file

index.html

@@ -13,13 +13,16 @@
       <div>header 部分</div>
     </div> -->
     <div class="main" >
-      <div>3D模型部分</div>
-      <div class="view view-left">
+      <div class="main_header" >实时生产预警和安全预警</div>
+      <div class="main_wrap" >3D 模型部分</div>
+
+      <!-- 左右两侧内容 -->
+      <div class="view view_left">
         <div>1</div>
         <div>2</div>
         <div>3</div>
       </div>
-      <div class="view view-right">
+      <div class="view view_right">
         <div>1</div>
         <div>2</div>
         <div>3</div>