Merge

css/index.css

@@ -40,9 +40,11 @@ body {
   text-align: center;
   box-sizing: border-box;
   color: #8FE4E9;
-  line-height: 50px;
+  line-height: 40px;
   font-weight: 600;
   font-size: 18px;
+  background-image: url('../imgs/Headline@2x.png');
+  background-size: 100% 100%;
 }
 .main_wrap {
   height: calc(100% - 50px);
@@ -58,8 +60,9 @@ body {
   display: flex;
   flex-direction: column;
 }
-.view div {
+.view>div {
   flex: 1;
+  overflow: auto;
 }
 
 .view_left {
@@ -72,9 +75,67 @@ body {
 .item_header {
   height: 32px;
   line-height: 32px;
+  display: flex;
+  align-items: center;
+}
+
+.item_alarm {
+  background: url('../imgs/Subtitle@2x.png');
+  background-size:100% 100%;
+}
+
+.item_title_alarm {
+  flex: 1;
+  color: #5BFCF4;
+  margin-left: 10px;
+}
+
+.item_subTitle {
+  flex: 1.2;
+  font-size: 14px;
+}
+
+.red {
+  color: red;
 }
 
 .item_wrap {
   height: calc(100% - 32px);
   line-height: 32px;
 }
+
+.item_img {
+  width: 23px;
+  height: 23px;
+}
+
+.item_title {
+  margin-left: 6px;
+}
+
+.item_alarm_wrap {
+  padding: 0 10px;
+  overflow: auto;
+}
+
+.list {
+  height: 26px;
+  line-height: 26px;
+  margin-top: 12px;
+  width: 100%;
+  border-bottom: 1px dashed rgba(26, 202, 204, 0.4);
+  background: url('../imgs/Normal1@2x.png') no-repeat;
+  background-size: 100% 100%;
+  font-size: 12px;
+  padding-left: 50px;
+  box-sizing: border-box;
+}
+.list_blue {
+  background: url('../imgs/Normal1@2x.png');
+  background-size: 100% 100%;
+}
+
+.list_red {
+  background: url('../imgs/Normal2@2x.png');
+  background-size: 100% 100%;
+}
\ No newline at end of file

index.html

@@ -20,8 +20,24 @@
       <div class="view view_left">
         <div class="item">
           <div class="item_header" >
-            <img src="" alt="">
-            <span>文本标题</span>
+            <img class="item_img" src="./imgs/title@2x.png" alt="">
+            <span class="item_title" >文本标题</span>
+          </div>
+          <div class="item_wrap" ></div>
+        </div>
+
+        <div class="item">
+          <div class="item_header" >
+            <img class="item_img" src="./imgs/title@2x.png" alt="">
+            <span class="item_title" >文本标题</span>
+          </div>
+          <div class="item_wrap" ></div>
+        </div>
+
+        <div class="item">
+          <div class="item_header" >
+            <img class="item_img" src="./imgs/title@2x.png" alt="">
+            <span class="item_title" >文本标题</span>
           </div>
           <div class="item_wrap" >
             <div>
@@ -54,9 +70,42 @@
         </div>
       </div>
       <div class="view view_right">
-        <div>1</div>
-        <div>2</div>
-        <div>3</div>
+        <div class="item">
+          <div class="item_header" >
+            <img class="item_img" src="./imgs/title@2x.png" alt="">
+            <span class="item_title" >文本标题</span>
+          </div>
+          <div class="item_wrap" id="right1"></div>
+        </div>
+
+        <div class="item">
+          <div class="item_header" >
+            <img class="item_img" src="./imgs/title@2x.png" alt="">
+            <span class="item_title" >文本标题</span>
+          </div>
+          <div class="item_wrap" id="right2"></div>
+        </div>
+
+        <div class="item">
+          <div class="item_header item_alarm" >
+            <div class="item_title_alarm" >报警信息</div>
+            <div class="item_subTitle" >当前报警数：<span class="red" >1</span></div>
+          </div>
+          <div class="item_wrap item_alarm_wrap" >
+            <!-- 渲染报警信息 -->
+            <div class="list">
+              <span>2021-11-11  12:36:30  越限报警越限报警...</span>
+            </div>
+            <div class="list list_blue">
+              <span>2021-11-11  12:36:30  越限报警越限报警...</span>
+            </div>
+
+            <div class="list list_red">
+              <span>2021-11-11  12:36:30  越限报警越限报警...</span>
+            </div>
+
+          </div>
+        </div>
       </div>
     </div>
   </div>