diff --git a/src/assets/icon-gas.png b/src/assets/icon-gas.png
new file mode 100644
index 0000000..d67112a
Binary files /dev/null and b/src/assets/icon-gas.png differ
diff --git a/src/assets/icon-kiln-bottom.png b/src/assets/icon-kiln-bottom.png
new file mode 100644
index 0000000..fb892e9
Binary files /dev/null and b/src/assets/icon-kiln-bottom.png differ
diff --git a/src/assets/icon-kiln-top.png b/src/assets/icon-kiln-top.png
new file mode 100644
index 0000000..4a2fa7b
Binary files /dev/null and b/src/assets/icon-kiln-top.png differ
diff --git a/src/assets/icon-left-bottom.png b/src/assets/icon-left-bottom.png
new file mode 100644
index 0000000..73ab333
Binary files /dev/null and b/src/assets/icon-left-bottom.png differ
diff --git a/src/assets/icon-left-middle.png b/src/assets/icon-left-middle.png
new file mode 100644
index 0000000..82666e5
Binary files /dev/null and b/src/assets/icon-left-middle.png differ
diff --git a/src/assets/icon-right-bottom.png b/src/assets/icon-right-bottom.png
new file mode 100644
index 0000000..d567d36
Binary files /dev/null and b/src/assets/icon-right-bottom.png differ
diff --git a/src/assets/icon-right-top.png b/src/assets/icon-right-top.png
new file mode 100644
index 0000000..5d8f2ba
Binary files /dev/null and b/src/assets/icon-right-top.png differ
diff --git a/src/components/yx-dark/containers/rect.vue b/src/components/yx-dark/containers/rect.vue
index 1fa16a0..3d46678 100644
--- a/src/components/yx-dark/containers/rect.vue
+++ b/src/components/yx-dark/containers/rect.vue
@@ -7,7 +7,13 @@
 
 <template>
   <div class="rect-container">
-    <slot />
+    <section class="title" v-if="title">
+      <span class="icon" v-if="icon" :class="icon"></span>
+      <span class="title__value">{{ title }}</span>
+    </section>
+    <section class="content">
+      <slot />
+    </section>
   </div>
 </template>
 
@@ -15,7 +21,7 @@
 export default {
   name: "RectContainer",
   components: {},
-  props: {},
+  props: ["icon", "title"],
   data() {
     return {};
   },
@@ -25,10 +31,70 @@ export default {
 </script>
 
 <style scoped lang="scss">
+span {
+  display: inline-block;
+}
+
 .rect-container {
   // background: url(../../../assets/rect-bg.png) no-repeat 100% / contain; // rgba(45, 230, 196, 0.8);
   padding: 24px;
   // width: 624px;
   // height: 304px;
+  display: flex;
+  flex-direction: column;
+}
+
+section.title {
+  display: flex;
+  align-items: center;
+  margin-bottom: 12px;
+}
+
+.title__value {
+  font-size: 24px;
+  letter-spacing: 1px;
+  line-height: 1;
+  color: #7ffff5;
+}
+
+section.content {
+  height: 1px;
+  flex: 1;
+  overflow: visible;
+}
+
+.icon {
+  width: 28px;
+  height: 28px;
+  margin-right: 8px;
+}
+
+.icon-left-middle {
+  background: url(../../../assets/icon-left-middle.png) no-repeat 100% / contain;
+}
+
+.icon-left-bottom {
+  background: url(../../../assets/icon-left-bottom.png) no-repeat 100% / contain;
+}
+
+.icon-gas {
+  background: url(../../../assets/icon-gas.png) no-repeat 100% / contain;
+}
+
+.icon-kiln-top {
+  background: url(../../../assets/icon-kiln-top.png) no-repeat 100% / contain;
+}
+
+.icon-kiln-bottom {
+  background: url(../../../assets/icon-kiln-bottom.png) no-repeat 100% / contain;
+}
+
+.icon-right-bottom {
+  background: url(../../../assets/icon-right-bottom.png) no-repeat 100% /
+    contain;
+}
+
+.icon-right-top {
+  background: url(../../../assets/icon-right-top.png) no-repeat 100% / contain;
 }
 </style>
diff --git a/src/views/MainPanel.vue b/src/views/MainPanel.vue
index 85ac37f..a5a004b 100644
--- a/src/views/MainPanel.vue
+++ b/src/views/MainPanel.vue
@@ -10,26 +10,26 @@
     <RectContainer class="leftTop">
       <WaterTemp />
     </RectContainer>
-    <RectContainer class="leftMiddle">
+    <RectContainer class="leftMiddle" title="窑炉进口水温历史" icon="icon-left-middle">
       <GradientChart />
     </RectContainer>
     <!-- <RectContainer class="leftBottom">
       <ChartContainer />
     </RectContainer> -->
 
-    <RectContainer class="bottom-1 bg-bottom">
+    <RectContainer class="bottom-1 bg-bottom" title="油流量" icon="icon-left-bottom">
       <ChartContainer />
     </RectContainer>
-    <RectContainer class="bottom-2 bg-bottom">
+    <RectContainer class="bottom-2 bg-bottom" title="天然气流量" icon="icon-gas">
       <ChartContainer />
     </RectContainer>
-    <RectContainer class="bottom-3 bg-bottom">
+    <RectContainer class="bottom-3 bg-bottom" title="窑顶温度" icon="icon-kiln-top">
       <ChartContainer />
     </RectContainer>
-    <RectContainer class="bottom-4 bg-bottom">
+    <RectContainer class="bottom-4 bg-bottom" title="窑底温度" icon="icon-kiln-bottom">
       <ChartContainer />
     </RectContainer>
-    <RectContainer class="bottom-5 bg-bottom">
+    <RectContainer class="bottom-5 bg-bottom" title="锡槽温度" icon="icon-right-bottom">
       <ChartContainer />
     </RectContainer>
     <!-- <RectContainer class="bottom-6">
@@ -42,7 +42,7 @@
       <ChartContainer />
     </RectContainer> -->
 
-    <RectContainer class="rightTop">
+    <RectContainer class="rightTop" title="风机运行情况" icon="icon-right-top">
       <TablesContainer />
     </RectContainer>
     <!-- <RectContainer class="rightMiddle">