diff --git a/components/AirQuality.vue b/components/AirQuality.vue
index 97093fb..6e7244b 100644
--- a/components/AirQuality.vue
+++ b/components/AirQuality.vue
@@ -22,5 +22,9 @@ export default {
 .air-quality-content {
   width: 100%;
   height: 601px;
+  background-image: linear-gradient(62deg, rgba(8,31,55,0.10) 0%, rgba(18,50,81,0.10) 100%);
+  border: 1px solid transparent; /* 先将边框颜色设置为透明 */
+  border-image: linear-gradient(rgba(79,182,238,0), rgba(39,127,216,1)); /* 使用线性渐变作为边框图片 */
+  border-image-slice: 1; /* 指定切分边框图像的位置 */
 }
 </style>
diff --git a/components/CheckData.vue b/components/CheckData.vue
new file mode 100644
index 0000000..044920f
--- /dev/null
+++ b/components/CheckData.vue
@@ -0,0 +1,49 @@
+<!--实时检查数据-->
+<template>
+  <div class="check-data">
+    <secondary-title :title="title" longBg>
+      <template>
+        <div class="right-tip">
+          注释：表头为“污染物名称[污染物标准值]”
+        </div>
+      </template>
+    </secondary-title>
+  </div>
+</template>
+
+<script>
+export default {
+  name: "CheckData",
+  data() {
+    return {
+      title: '实时检查数据'
+    }
+  }
+}
+</script>
+
+<style scoped lang="less">
+@import "assets/styles/mixin";
+
+.check-data {
+  margin-top: 43px;
+  height: 984px;
+  width: 100%;
+  background-image: linear-gradient(62deg, rgba(8, 31, 55, 0.10) 0%, rgba(18, 50, 81, 0.10) 100%);
+  border: 1px solid transparent; /* 先将边框颜色设置为透明 */
+  border-image: linear-gradient(rgba(79, 182, 238, 0), rgba(39, 127, 216, 1)); /* 使用线性渐变作为边框图片 */
+  border-image-slice: 1; /* 指定切分边框图像的位置 */
+
+  .right-tip {
+    height: 100%;
+    font-family: MicrosoftYaHei;
+    font-size: 29.97px;
+    color: #6AC4FF;
+    letter-spacing: 1.97px;
+    text-align: right;
+    font-weight: 400;
+    padding-right: 10px;
+    .flex-row;
+  }
+}
+</style>
diff --git a/components/DeviceRun.vue b/components/DeviceRun.vue
new file mode 100644
index 0000000..3ca370a
--- /dev/null
+++ b/components/DeviceRun.vue
@@ -0,0 +1,31 @@
+<!--设备运行情况-->
+<template>
+  <div class="device-run">
+    <secondary-title :title="title" longBg></secondary-title>
+  </div>
+</template>
+
+<script>
+export default {
+  name: "DeviceRun",
+  data() {
+    return {
+      title: '设备运行情况'
+    }
+  }
+}
+</script>
+
+<style scoped lang="less">
+@import "assets/styles/mixin";
+
+.device-run {
+  margin-top: 43px;
+  height: 416px;
+  width: 100%;
+  background-image: linear-gradient(62deg, rgba(8, 31, 55, 0.10) 0%, rgba(18, 50, 81, 0.10) 100%);
+  border: 1px solid transparent; /* 先将边框颜色设置为透明 */
+  border-image: linear-gradient(rgba(79, 182, 238, 0), rgba(39, 127, 216, 1)); /* 使用线性渐变作为边框图片 */
+  border-image-slice: 1; /* 指定切分边框图像的位置 */
+}
+</style>
diff --git a/components/EnergyUse.vue b/components/EnergyUse.vue
new file mode 100644
index 0000000..aba9f0d
--- /dev/null
+++ b/components/EnergyUse.vue
@@ -0,0 +1,33 @@
+<!--能源使用情况-->
+<template>
+  <div class="energy-use">
+    <secondary-title :title="title">
+      <template>
+        <div class="right-tip">
+        </div>
+      </template>
+    </secondary-title>
+  </div>
+</template>
+
+<script>
+export default {
+  name: "EnergyUse",
+  data() {
+    return {
+      title: '能源使用情况'
+    }
+  }
+}
+</script>
+
+<style scoped lang="less">
+.energy-use {
+  height: 777px;
+  width: 100%;
+  background-image: linear-gradient(62deg, rgba(8, 31, 55, 0.10) 0%, rgba(18, 50, 81, 0.10) 100%);
+  border: 1px solid transparent; /* 先将边框颜色设置为透明 */
+  border-image: linear-gradient(rgba(79, 182, 238, 0), rgba(39, 127, 216, 1)); /* 使用线性渐变作为边框图片 */
+  border-image-slice: 1; /* 指定切分边框图像的位置 */
+}
+</style>
diff --git a/components/EnterpriseOperations.vue b/components/EnterpriseOperations.vue
new file mode 100644
index 0000000..ce3c622
--- /dev/null
+++ b/components/EnterpriseOperations.vue
@@ -0,0 +1,33 @@
+<!--企业运营情况-->
+<template>
+  <div class="enterprise-operations">
+    <secondary-title :title="title">
+      <template>
+        <div class="right-tip">
+        </div>
+      </template>
+    </secondary-title>
+  </div>
+</template>
+
+<script>
+export default {
+  name: "EnterpriseOperations",
+  data() {
+    return {
+      title: '企业运营情况'
+    }
+  }
+}
+</script>
+
+<style scoped lang="less">
+.enterprise-operations {
+  height: 777px;
+  width: 100%;
+  background-image: linear-gradient(62deg, rgba(8, 31, 55, 0.10) 0%, rgba(18, 50, 81, 0.10) 100%);
+  border: 1px solid transparent; /* 先将边框颜色设置为透明 */
+  border-image: linear-gradient(rgba(79, 182, 238, 0), rgba(39, 127, 216, 1)); /* 使用线性渐变作为边框图片 */
+  border-image-slice: 1; /* 指定切分边框图像的位置 */
+}
+</style>
diff --git a/components/LatestWarning.vue b/components/LatestWarning.vue
new file mode 100644
index 0000000..1755247
--- /dev/null
+++ b/components/LatestWarning.vue
@@ -0,0 +1,32 @@
+<!--最新预警-->
+<template>
+  <div class="latest-warning">
+    <secondary-title :title="title"/>
+
+  </div>
+</template>
+
+<script>
+export default {
+  name: "LatestWarning",
+  data() {
+    return {
+      title: '最新预警'
+    }
+  }
+}
+</script>
+
+<style scoped lang="less">
+@import "assets/styles/mixin";
+
+.latest-warning {
+  margin-top: 43px;
+  height: 984px;
+  width: 100%;
+  background-image: linear-gradient(62deg, rgba(8, 31, 55, 0.10) 0%, rgba(18, 50, 81, 0.10) 100%);
+  border: 1px solid transparent; /* 先将边框颜色设置为透明 */
+  border-image: linear-gradient(rgba(79, 182, 238, 0), rgba(39, 127, 216, 1)); /* 使用线性渐变作为边框图片 */
+  border-image-slice: 1; /* 指定切分边框图像的位置 */
+}
+</style>
diff --git a/components/OverviewPollutants.vue b/components/OverviewPollutants.vue
new file mode 100644
index 0000000..3015270
--- /dev/null
+++ b/components/OverviewPollutants.vue
@@ -0,0 +1,29 @@
+<!--污染物信息总览-->
+<template>
+  <div class="overview-pollutants">
+    <secondary-title :title="title" longBg/>
+  </div>
+</template>
+
+<script>
+export default {
+  name: "OverviewPollutants",
+  data() {
+    return {
+      title: '污染物信息总览'
+    }
+  }
+}
+</script>
+
+<style scoped lang="less">
+.overview-pollutants {
+  margin-top: 43px;
+  height: 601px;
+  width: 100%;
+  background-image: linear-gradient(62deg, rgba(8,31,55,0.10) 0%, rgba(18,50,81,0.10) 100%);
+  border: 1px solid transparent; /* 先将边框颜色设置为透明 */
+  border-image: linear-gradient(rgba(79,182,238,0), rgba(39,127,216,1)); /* 使用线性渐变作为边框图片 */
+  border-image-slice: 1; /* 指定切分边框图像的位置 */
+}
+</style>
diff --git a/components/PollutantTrends.vue b/components/PollutantTrends.vue
index 8158b39..5b7510f 100644
--- a/components/PollutantTrends.vue
+++ b/components/PollutantTrends.vue
@@ -1,13 +1,18 @@
 <!--首要污染物变化趋势-->
 <template>
   <div class="pollutant-trends">
-
+    <secondary-title :title="title"/>
   </div>
 </template>
 
 <script>
 export default {
-  name: "PollutantTrends"
+  name: "PollutantTrends",
+  data() {
+    return {
+      title: '首要污染物变化趋势'
+    }
+  }
 }
 </script>
 
@@ -15,5 +20,9 @@ export default {
 .pollutant-trends{
   width: 100%;
   height: 601px;
+  background-image: linear-gradient(62deg, rgba(8,31,55,0.10) 0%, rgba(18,50,81,0.10) 100%);
+  border: 1px solid transparent; /* 先将边框颜色设置为透明 */
+  border-image: linear-gradient(rgba(79,182,238,0), rgba(39,127,216,1)); /* 使用线性渐变作为边框图片 */
+  border-image-slice: 1; /* 指定切分边框图像的位置 */
 }
 </style>
diff --git a/components/SecondaryTitle.vue b/components/SecondaryTitle.vue
index 9efa89c..9e95929 100644
--- a/components/SecondaryTitle.vue
+++ b/components/SecondaryTitle.vue
@@ -33,26 +33,28 @@ export default {
   background: url("assets/peakCoalImages/coommon/small-seconfary-title-bg.png") no-repeat;
   background-size: 100% 100%;
   .clear-fix;
-  &.longBg{
+
+  &.longBg {
     width: 100%;
     height: 84px;
     background: url("assets/peakCoalImages/coommon/long-seconfary-title-bg.png") no-repeat;
     background-size: 100% 100%;
   }
-  ._title{
+
+  ._title {
     padding-left: 100px;
     float: left;
     font-family: AlimamaShuHeiTi-Bold;
     font-size: 46.24px;
-    color: transparent;
+    color: #D8F0FF;
     letter-spacing: 3.04px;
+    text-shadow: 0 0 25px rgba(0, 145, 255, 0.50);
     font-weight: 700;
-    background-image: linear-gradient(rgba(0,145,255,1), rgba(0,145,255,0.5),rgba(216,240,255,1));
-    -webkit-background-clip: text;
-    -webkit-text-fill-color: transparent;
   }
-  ._right{
+
+  ._right {
     float: right;
+    height: 100%;
   }
 }
 
diff --git a/components/WarningStatistics.vue b/components/WarningStatistics.vue
new file mode 100644
index 0000000..b9ead60
--- /dev/null
+++ b/components/WarningStatistics.vue
@@ -0,0 +1,32 @@
+<!--智能预警统计-->
+<template>
+  <div class="warning-statistics">
+    <secondary-title :title="title"/>
+
+  </div>
+</template>
+
+<script>
+export default {
+  name: "WarningStatistics",
+  data() {
+    return {
+      title: '智能预警统计'
+    }
+  }
+}
+</script>
+
+<style scoped lang="less">
+@import "assets/styles/mixin";
+
+.warning-statistics {
+  margin-top: 43px;
+  height: 984px;
+  width: 100%;
+  background-image: linear-gradient(62deg, rgba(8, 31, 55, 0.10) 0%, rgba(18, 50, 81, 0.10) 100%);
+  border: 1px solid transparent; /* 先将边框颜色设置为透明 */
+  border-image: linear-gradient(rgba(79, 182, 238, 0), rgba(39, 127, 216, 1)); /* 使用线性渐变作为边框图片 */
+  border-image-slice: 1; /* 指定切分边框图像的位置 */
+}
+</style>
diff --git a/pages/visual/PeakCoalView.vue b/pages/visual/PeakCoalView.vue
index 3409026..7aaa5de 100644
--- a/pages/visual/PeakCoalView.vue
+++ b/pages/visual/PeakCoalView.vue
@@ -8,11 +8,19 @@
       <!--      左侧内容-->
       <div class="left-content">
         <div class="left-data-panel">
-          <a-row>
+          <a-row :gutter="24">
             <a-col :span="12">
               <air-quality/>
             </a-col>
-            <a-col :span="12"></a-col>
+            <a-col :span="12">
+              <pollutant-trends/>
+            </a-col>
+            <a-col :span="24">
+              <overview-pollutants/>
+            </a-col>
+            <a-col :span="24">
+              <check-data/>
+            </a-col>
           </a-row>
         </div>
       </div>
@@ -24,7 +32,23 @@
       <!--      右侧内容-->
       <div class="right-content">
         <div class="right-data-panel">
-
+          <a-row :gutter="24">
+            <a-col :span="12">
+              <energy-use/>
+            </a-col>
+            <a-col :span="12">
+              <enterprise-operations/>
+            </a-col>
+            <a-col :span="24">
+              <device-run/>
+            </a-col>
+            <a-col :span="12">
+              <warning-statistics/>
+            </a-col>
+            <a-col :span="12">
+              <latest-warning/>
+            </a-col>
+          </a-row>
         </div>
       </div>
     </div>
@@ -136,12 +160,12 @@ body, html, #__nuxt, #__layout {
       width: 2935px;
       height: 2721px;
       background: url("assets/peakCoalImages/left/left-content-bg.png") no-repeat center 60px;
-      padding: 206px 476px 100px 412px;
+      padding: 300px 476px 100px 412px;
 
       .left-data-panel {
         height: 100%;
         width: 100%;
-
+        transform: rotate(2deg);
       }
     }
 
@@ -152,8 +176,12 @@ body, html, #__nuxt, #__layout {
       width: 2935px;
       height: 2721px;
       background: url("assets/peakCoalImages/right/right-content-bg.png") no-repeat center 60px;
+      padding: 300px 476px 100px 480px;
 
       .right-data-panel {
+        height: 100%;
+        width: 100%;
+        transform: rotate(-2deg);
       }
     }