1、新增二级标签

components/AirQuality.vue

@@ -0,0 +1,26 @@
+<!--空气质量指数-->
+<template>
+  <div class="air-quality-content">
+    <secondary-title :title="title"/>
+  </div>
+</template>
+
+<script>
+export default {
+  name: "AirQuality",
+  data() {
+    return {
+      title: '空气质量指数'
+    }
+  }
+}
+</script>
+
+<style scoped lang="less">
+@import "assets/styles/mixin";
+
+.air-quality-content {
+  width: 100%;
+  height: 601px;
+}
+</style>

components/PollutantTrends.vue

@@ -0,0 +1,19 @@
+<!--首要污染物变化趋势-->
+<template>
+  <div class="pollutant-trends">
+
+  </div>
+</template>
+
+<script>
+export default {
+  name: "PollutantTrends"
+}
+</script>
+
+<style scoped lang="less">
+.pollutant-trends{
+  width: 100%;
+  height: 601px;
+}
+</style>

components/SecondaryTitle.vue

@@ -0,0 +1,66 @@
+<!--二级标题-->
+<template>
+  <div class="secondary-title" :class="{longBg}">
+    <div class="_title">{{ title }}</div>
+    <div class="_right">
+      <slot></slot>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  name: "SecondaryTitle",
+  props: {
+    longBg: {
+      type: Boolean,
+      default: false
+    },
+    title: {
+      type: String,
+      default: ''
+    }
+  }
+}
+</script>
+
+<style scoped lang="less">
+@import "assets/styles/mixin";
+
+.secondary-title {
+  width: 100%;
+  height: 84px;
+  background: url("assets/peakCoalImages/coommon/small-seconfary-title-bg.png") no-repeat;
+  background-size: 100% 100%;
+  .clear-fix;
+  &.longBg{
+    width: 100%;
+    height: 84px;
+    background: url("assets/peakCoalImages/coommon/long-seconfary-title-bg.png") no-repeat;
+    background-size: 100% 100%;
+  }
+  ._title{
+    padding-left: 100px;
+    float: left;
+    font-family: AlimamaShuHeiTi-Bold;
+    font-size: 46.24px;
+    color: transparent;
+    letter-spacing: 3.04px;
+    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{
+    float: right;
+  }
+}
+
+/*
+.longBg {
+  width: 100%;
+  height: 84px;
+  background: url("assets/peakCoalImages/coommon/long-seconfary-title-bg.png") no-repeat;
+  background-size: 100% 100%;
+}*/
+</style>

pages/visual/PeakCoalView.vue

@@ -7,9 +7,13 @@
     <div class="body-content">
       <!--      左侧内容-->
       <div class="left-content">
-        <div class="left-icon"></div>
         <div class="left-data-panel">
-
+          <a-row>
+            <a-col :span="12">
+              <air-quality/>
+            </a-col>
+            <a-col :span="12"></a-col>
+          </a-row>
         </div>
       </div>
 
@@ -22,13 +26,17 @@
         <div class="right-data-panel">
 
         </div>
-        <div class="right-icon"></div>
       </div>
     </div>
 
     <div class="footer-content">
 
     </div>
+
+    <div class="left-icon"></div>
+
+    <div class="right-icon"></div>
+
   </div>
 </template>
 
@@ -124,42 +132,28 @@ body, html, #__nuxt, #__layout {
     .left-content {
       position: absolute;
       left: 0px;
-      height: 100%;
+      top: 136px;
-      .flex-row;
+      width: 2935px;
-
+      height: 2721px;
-      .left-icon {
+      background: url("assets/peakCoalImages/left/left-content-bg.png") no-repeat center 60px;
-        width: 531px;
+      padding: 206px 476px 100px 412px;
-        height: 100%;
-        background: url("assets/peakCoalImages/left/left-icon.png") no-repeat center center;
-        background-size: 100% 100%;
-      }
 
       .left-data-panel {
-        width: 2451px;
+        height: 100%;
-        height: 2721px;
+        width: 100%;
-        background: url("assets/peakCoalImages/left/left-content-bg.png") no-repeat center 60px;
+
-        background-size: 100% 100%;
       }
     }
 
     .right-content {
       position: absolute;
       right: 0px;
-      height: 100%;
+      top: 136px;
-      .flex-row;
+      width: 2935px;
-
+      height: 2721px;
-      .right-icon {
+      background: url("assets/peakCoalImages/right/right-content-bg.png") no-repeat center 60px;
-        width: 531px;
-        height: 100%;
-        background: url("assets/peakCoalImages/right/right-icon.png") no-repeat center center;
-        background-size: 100% 100%;
-      }
 
       .right-data-panel {
-        width: 2451px;
-        height: 2721px;
-        background: url("assets/peakCoalImages/right/right-content-bg.png") no-repeat center 60px;
-        background-size: 100% 100%;
       }
     }
 
@@ -168,10 +162,9 @@ body, html, #__nuxt, #__layout {
       left: 50%;
       top: 411px;
       transform: translateX(-50%);
-      width: 4251px;
+      width: 4383px;
       height: 2628px;
       background: url("assets/peakCoalImages/center/center-content-bg.png") no-repeat center center;
-      background-size: 100% 100%;
     }
   }
 
@@ -182,5 +175,24 @@ body, html, #__nuxt, #__layout {
     height: 220px;
     background: url("assets/peakCoalImages/footer/footer-bg.png") no-repeat center center;
   }
+
+
+  .left-icon {
+    position: absolute;
+    left: 0px;
+    width: 531px;
+    height: 100%;
+    background: url("assets/peakCoalImages/left/left-icon.png") no-repeat center center;
+    background-size: 100% 100%;
+  }
+
+  .right-icon {
+    position: absolute;
+    right: 0px;
+    width: 531px;
+    height: 100%;
+    background: url("assets/peakCoalImages/right/right-icon.png") no-repeat center center;
+    background-size: 100% 100%;
+  }
 }
 </style>