diff --git a/src/assets/nyjc/图层 1.png b/src/assets/nyjc/图层 1.png
new file mode 100644
index 0000000..7024edd
Binary files /dev/null and b/src/assets/nyjc/图层 1.png differ
diff --git a/src/assets/nyjc/水.png b/src/assets/nyjc/水.png
new file mode 100644
index 0000000..2f98b75
Binary files /dev/null and b/src/assets/nyjc/水.png differ
diff --git a/src/assets/nyjc/水1.png b/src/assets/nyjc/水1.png
new file mode 100644
index 0000000..7e30a22
Binary files /dev/null and b/src/assets/nyjc/水1.png differ
diff --git a/src/assets/nyjc/煤 拷贝.png b/src/assets/nyjc/煤 拷贝.png
new file mode 100644
index 0000000..997c7c4
Binary files /dev/null and b/src/assets/nyjc/煤 拷贝.png differ
diff --git a/src/assets/nyjc/煤.png b/src/assets/nyjc/煤.png
new file mode 100644
index 0000000..b17e1cb
Binary files /dev/null and b/src/assets/nyjc/煤.png differ
diff --git a/src/assets/nyjc/煤1.png b/src/assets/nyjc/煤1.png
new file mode 100644
index 0000000..bcf28d0
Binary files /dev/null and b/src/assets/nyjc/煤1.png differ
diff --git a/src/assets/nyjc/电.png b/src/assets/nyjc/电.png
new file mode 100644
index 0000000..1366e68
Binary files /dev/null and b/src/assets/nyjc/电.png differ
diff --git a/src/assets/nyjc/电1.png b/src/assets/nyjc/电1.png
new file mode 100644
index 0000000..bd98e24
Binary files /dev/null and b/src/assets/nyjc/电1.png differ
diff --git a/src/assets/nyjc/组 2 76.png b/src/assets/nyjc/组 2 76.png
new file mode 100644
index 0000000..13a6626
Binary files /dev/null and b/src/assets/nyjc/组 2 76.png differ
diff --git a/src/assets/nyjc/组 276.png b/src/assets/nyjc/组 276.png
new file mode 100644
index 0000000..1528b70
Binary files /dev/null and b/src/assets/nyjc/组 276.png differ
diff --git a/src/assets/nyjc/组 277.png b/src/assets/nyjc/组 277.png
new file mode 100644
index 0000000..b3e970b
Binary files /dev/null and b/src/assets/nyjc/组 277.png differ
diff --git a/src/assets/nyjc/组 963.png b/src/assets/nyjc/组 963.png
new file mode 100644
index 0000000..25ece40
Binary files /dev/null and b/src/assets/nyjc/组 963.png differ
diff --git a/src/assets/nyjc/组 964.png b/src/assets/nyjc/组 964.png
new file mode 100644
index 0000000..4388127
Binary files /dev/null and b/src/assets/nyjc/组 964.png differ
diff --git a/src/router/index.js b/src/router/index.js
index 3e47a34..c675d8f 100644
--- a/src/router/index.js
+++ b/src/router/index.js
@@ -10,19 +10,19 @@ const routes = [
     component: () => import("../views/Index.vue"),
     children: [
       {
-        path: "/znyw",
+        path: "znyw",
         name: "znyw",
         component: () => import("../views/lll/ZNYW.vue"),
       },
       // 负荷管理
       {
-        path: "/fhgl",
+        path: "fhgl",
         name: "fhgl",
         component: () => import("@/views/Zhou/FHGL.vue"),
       },
       // 可调负荷
       {
-        path: "/kdfh",
+        path: "kdfh",
         name: "kdfh",
         component: () => import("@/views/Zhou/KDFH.vue"),
       },
@@ -33,19 +33,31 @@ const routes = [
         component:()=>import("@/views/Zhou/NXGL.vue")
       },
       {
-        path: "/pds",
+        path: "pds",
         name: "pds",
         component: () => import("../views/lll/PDS.vue"),
       },
       {
-        path: "/nyjcd",
-        name: "nyjcd",
-        component: () => import("../views/lll/NYJCD.vue"),
-      },
-      {
-        path: "/nyjc",
-        name: "nyjc",
-        component: () => import("../views/lll/NYJC.vue"),
+        path: "area",
+        name: "area",
+        component: () => import("../views/lll/AREA.vue"),
+        children: [
+          {
+            path: "/",
+            name: "nyjc",
+            component: () => import("../views/lll/NYJC.vue"),
+          },
+          {
+            path: "nyjcd",
+            name: "nyjcd",
+            component: () => import("../views/lll/NYJCD.vue"),
+          },
+          {
+            path: "nyjcs",
+            name: "nyjcs",
+            component: () => import("../views/lll/NYJCS.vue"),
+          },
+        ],
       },
     ],
   },
diff --git a/src/views/lll/AREA.vue b/src/views/lll/AREA.vue
new file mode 100644
index 0000000..a78d57a
--- /dev/null
+++ b/src/views/lll/AREA.vue
@@ -0,0 +1,86 @@
+<template>
+  <div class="box">
+    <div class="a">
+      <img
+        src="../../assets/nyjc/电1.png"
+        alt=""
+        v-show="!dian"
+        @click="
+          (dian = true),
+            (shui = false),
+            (mei = false),
+            $router.push(
+              '/area/nyjcd',
+              () => {},
+              () => {}
+            )
+        "
+      />
+      <img src="../../assets/nyjc/电.png" alt="" v-show="dian" />
+      <img
+        src="../../assets/nyjc/水1.png"
+        alt=""
+        v-show="!shui"
+        @click="
+          (dian = false),
+            (shui = true),
+            (mei = false),
+            $router.push(
+              '/area/nyjcs',
+              () => {},
+              () => {}
+            )
+        "
+      />
+      <img src="../../assets/nyjc/水.png" alt="" v-show="shui" />
+      <img
+        src="../../assets/nyjc/煤1.png"
+        alt=""
+        v-show="!mei"
+        @click="(dian = false), (shui = false), (mei = true)"
+      />
+      <img src="../../assets/nyjc/煤.png" alt="" v-show="mei" />
+    </div>
+    <div class="area">
+      <router-view></router-view>
+    </div>
+  </div>
+</template>
+<script>
+export default {
+  data() {
+    return {
+      dian: false,
+      shui: false,
+      mei: false,
+    };
+  },
+};
+</script>
+<style scoped lang="less">
+.box {
+  width: 100%;
+  height: 100%;
+  box-sizing: border-box;
+  background-color: transparent;
+  display: flex;
+  justify-content: space-between;
+  position: relative;
+  .a {
+    position: absolute;
+    width: 1300px;
+    z-index: 2;
+    top: 420px;
+    right: 1351px;
+
+    img {
+      margin-right: 102px;
+    }
+  }
+}
+.area {
+  width: 100%;
+  height: 100%;
+  background-color: transparent;
+}
+</style>
diff --git a/src/views/lll/NYJC.vue b/src/views/lll/NYJC.vue
index f8fc77d..e018e0b 100644
--- a/src/views/lll/NYJC.vue
+++ b/src/views/lll/NYJC.vue
@@ -501,6 +501,18 @@ export default {
   background-color: transparent;
   display: flex;
   justify-content: space-between;
+  position: relative;
+  .routerLink {
+    position: absolute;
+    width: 1300px;
+    z-index: 2;
+    top: 420px;
+    right: 1351px;
+
+    img {
+      margin-right: 102px;
+    }
+  }
 }
 .left {
   width: 1237px;
diff --git a/src/views/lll/NYJCD.vue b/src/views/lll/NYJCD.vue
index 6488433..8a3b12a 100644
--- a/src/views/lll/NYJCD.vue
+++ b/src/views/lll/NYJCD.vue
@@ -1,5 +1,62 @@
 <template>
   <div class="box">
+    <div class="imgLeft">
+      <div
+        @click="goOne('1号生产线')"
+        :class="click1 == '1号生产线' ? 'active' : ''"
+      >
+        1号生产线
+      </div>
+      <div
+        @click="goOne('2号生产线')"
+        :class="click1 == '2号生产线' ? 'active' : ''"
+      >
+        2号生产线
+      </div>
+      <div
+        @click="goOne('3号生产线')"
+        :class="click1 == '3号生产线' ? 'active' : ''"
+      >
+        3号生产线
+      </div>
+      <div @click="goOne('配电室')" :class="click1 == '配电室' ? 'active' : ''">
+        配电室
+      </div>
+    </div>
+
+    <div class="imgRight">
+      <div
+        @click="goTwo('破碎系统')"
+        :class="click2 == '破碎系统' ? 'active' : ''"
+      >
+        破碎系统
+      </div>
+      <div
+        @click="goTwo('生料系统')"
+        :class="click2 == '生料系统' ? 'active' : ''"
+      >
+        生料系统
+      </div>
+      <div
+        @click="goTwo('回转窑系统')"
+        :class="click2 == '回转窑系统' ? 'active' : ''"
+      >
+        回转窑系统
+      </div>
+      <div
+        @click="goTwo('煤磨系统')"
+        :class="click2 == '煤磨系统' ? 'active' : ''"
+      >
+        煤磨系统
+      </div>
+      <div
+        @click="goTwo('水泥磨系统')"
+        :class="click2 == '水泥磨系统' ? 'active' : ''"
+      >
+        水泥磨系统
+      </div>
+    </div>
+
     <div class="left">
       <img src="../../assets/img/标题/能源监测-电.png" class="title" />
       <div class="qcssdh">
@@ -94,6 +151,8 @@ export default {
   data() {
     return {
       res: "月",
+      click1: "",
+      click2: "",
       option1: {
         xAxis: {
           type: "category",
@@ -341,6 +400,14 @@ export default {
       var myChart = this.$echarts.init(chartDom);
       myChart.setOption(option);
     },
+    goOne(a) {
+      this.click2 = "";
+      this.click1 = a;
+    },
+    goTwo(a) {
+      this.click1 = "";
+      this.click2 = a;
+    },
   },
   mounted() {
     this.defineEcharts("qcssdh", this.option1);
@@ -358,6 +425,44 @@ export default {
   background-color: transparent;
   display: flex;
   justify-content: space-between;
+  position: relative;
+}
+.imgLeft {
+  position: absolute;
+  left: 1300px;
+  top: 1500px;
+  div {
+    width: 457px;
+    height: 140px;
+    text-align: center;
+    line-height: 140px;
+    color: #fff;
+    font-size: 30px;
+    background-image: url("../../assets/nyjc/组 2 76.png");
+    margin: 37px;
+  }
+  .active {
+    background-image: url("../../assets/nyjc/组 276.png");
+  }
+}
+
+.imgRight {
+  position: absolute;
+  right: 1300px;
+  top: 1300px;
+  div {
+    width: 457px;
+    height: 140px;
+    text-align: center;
+    line-height: 140px;
+    color: #fff;
+    font-size: 30px;
+    background-image: url(../../assets/nyjc/组\ 277.png);
+    margin: 37px;
+  }
+  .active {
+    background-image: url("../../assets/nyjc/图层 1.png");
+  }
 }
 .left {
   width: 1237px;
diff --git a/src/views/lll/NYJCS.vue b/src/views/lll/NYJCS.vue
new file mode 100644
index 0000000..9815a80
--- /dev/null
+++ b/src/views/lll/NYJCS.vue
@@ -0,0 +1,944 @@
+<template>
+  <div class="box">
+    <div class="left">
+      <img src="../../assets/img/标题/能源监测-水.png" class="title" />
+      <div class="top">
+        <div>
+          <img src="../../assets/nyjc/组 963.png" alt="" />
+          <p>平阴水泥厂</p>
+        </div>
+        <div class="two">
+          <div class="txt">
+            <span style="color: #95fffe">1218</span><span>t</span>
+          </div>
+          <img src="../../assets/nyjc/煤 拷贝.png" alt="" />
+          <p>今日用水量</p>
+        </div>
+      </div>
+      <div class="rysl">
+        <div class="imgBox">
+          <img src="../../assets/img/小标题栏.png" class="img" />
+          <p>日用水量</p>
+        </div>
+        <div class="tip">
+          <span>今日用水量</span><span>870</span><span>t</span><span>↑</span>
+        </div>
+        <div id="rysl"></div>
+      </div>
+      <div class="yysl">
+        <div class="imgBox">
+          <img src="../../assets/img/小标题栏.png" class="img" />
+          <p>月用水量</p>
+        </div>
+        <div class="tip">
+          <span>本月用水量</span><span>870</span><span>t</span><span>↑</span>
+        </div>
+        <div id="yysl"></div>
+      </div>
+      <div class="nysl">
+        <div class="imgBox">
+          <img src="../../assets/img/小标题栏.png" class="img" />
+          <p>年用水量</p>
+        </div>
+        <div class="tip">
+          <span>本年用水量</span><span>870</span><span>t</span><span>↑</span>
+        </div>
+        <div id="nysl"></div>
+      </div>
+    </div>
+    <div class="right">
+      <div class="ystj">
+        <div class="imgBox">
+          <img src="../../assets/img/小标题栏.png" class="img" />
+          <p>用水统计</p>
+        </div>
+        <div class="chartBox">
+          <div id="ystj">
+            <img src="../../assets/nyjc/组 964.png" alt="" />
+            <div class="zs">
+              <span>总数：</span
+              ><span style="color: #58caff; font-size: 30px">5</span>
+            </div>
+            <div class="zx">
+              <span>在线：</span
+              ><span style="color: #56f671; font-size: 30px">118</span>
+            </div>
+            <div class="zxl">
+              <span>在线率：</span
+              ><span style="color: #56f671; font-size: 30px">72%</span>
+            </div>
+          </div>
+        </div>
+      </div>
+      <div class="sbjc">
+        <div class="imgBox">
+          <img src="../../assets/img/小标题栏.png" class="img" />
+          <p>水表监测</p>
+        </div>
+        <div class="chartBox">
+          <div id="sbjc">
+            <div class="title">
+              <p>水表监测：</p>
+              <span>5</span>
+              <p>个</p>
+            </div>
+            <el-table
+              :data="tableData"
+              :row-class-name="tableRowClassName"
+              style="width: 100%"
+              header-cell-style="background-color: #1969A8; color: white"
+            >
+              <el-table-column label="序号" align="center">
+                <template slot-scope="scope">
+                  {{ scope.$index + 1 }}
+                </template>
+              </el-table-column>
+              <el-table-column prop="date1" label="名称" align="center">
+              </el-table-column>
+              <el-table-column prop="date2" label="出水压力" align="center"
+                ><template slot-scope="scope">
+                  <span style="color: #58ff70"> {{ scope.row.date2 }}</span
+                  ><span>MP</span>
+                </template>
+              </el-table-column>
+              <el-table-column prop="date3" label="瞬间流量" align="center"
+                ><template slot-scope="scope">
+                  <span style="color: #58caff">{{ scope.row.date3 }}</span>
+                  <span>m3/h</span>
+                </template>
+              </el-table-column>
+              <el-table-column prop="date4" label="喷水电耗" align="center"
+                ><template slot-scope="scope">
+                  <span style="color: #abb9fe"> {{ scope.row.date4 }}</span>
+                  <span>kWh</span>
+                </template>
+              </el-table-column>
+            </el-table>
+          </div>
+        </div>
+      </div>
+      <div class="tpt">
+        <div class="imgBox">
+          <img src="../../assets/img/小标题栏.png" class="img" />
+          <p>拓扑图</p>
+        </div>
+        <div class="chartBox">
+          <div id="tpt">
+            <img src="" alt="" />
+          </div>
+        </div>
+      </div>
+      <div class="nhfx">
+        <div class="imgBox">
+          <img src="../../assets/img/小标题栏.png" class="img" />
+          <p>能耗分析</p>
+        </div>
+        <div class="chartBox">
+          <div id="nhfx"></div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+<script>
+export default {
+  data() {
+    return {
+      option1: {
+        legend: {
+          data: [{ icon: "rect", name: "日用水量" }],
+          textStyle: {
+            color: "#fff",
+            fontSize: "20px",
+          },
+        },
+        xAxis: {
+          type: "category",
+          boundaryGap: false,
+          data: ["1月", "2月", "3月", "4月", "5月"],
+          axisLabel: {
+            show: true,
+            textStyle: {
+              color: "#fff",
+              fontSize: 20,
+            },
+            interval: 0, //代表显示所有x轴标签显示
+          },
+        },
+        yAxis: {
+          type: "value",
+          name: "单位:t",
+          nameTextStyle: {
+            color: "#fff",
+            fontSize: 20,
+            padding: 10,
+          },
+          min: 0,
+          max: 500,
+          interval: 100, // 指定刻度间隔
+          axisLabel: {
+            show: true,
+            textStyle: {
+              color: "#fff",
+              fontSize: 20,
+            },
+          },
+        },
+        grid: {
+          // 让图表占满容器
+          //   top: "5%",
+          left: "8%",
+          right: "5%",
+          bottom: "8%",
+        },
+        series: [
+          {
+            type: "line",
+            name: "日用水量",
+            data: [280, 350, 120, 270, 290],
+            smooth: true,
+
+            itemStyle: {
+              normal: {
+                color: "#21EF06",
+                lineStyle: {
+                  width: 5, //折线宽度
+                  color: "#21EF06", //折线颜色
+                },
+                areaStyle: {
+                  color: new this.$echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                    { offset: 1, color: "#0C3431" },
+                    { offset: 0.5, color: "#198522" },
+                    { offset: 0, color: "#18881C" },
+                  ]),
+                },
+              },
+            },
+
+            markPoint: {
+              data: [{ type: "max", name: "Max" }],
+              label: {
+                textStyle: {
+                  color: "#fff",
+                  fontSize: 15,
+                },
+              },
+            },
+          },
+        ],
+      },
+      option2: {
+        legend: {
+          data: [{ icon: "rect", name: "月用水量" }],
+          textStyle: {
+            color: "#fff",
+            fontSize: "20px",
+          },
+        },
+        xAxis: {
+          type: "category",
+          data: ["1月", "2月", "3月", "4月", "5月"],
+          axisLabel: {
+            show: true,
+            textStyle: {
+              color: "#fff",
+              fontSize: 20,
+            },
+            interval: 0, //代表显示所有x轴标签显示
+          },
+        },
+        yAxis: {
+          type: "value",
+          name: "单位:t",
+          nameTextStyle: {
+            color: "#fff",
+            fontSize: 20,
+            padding: 10,
+          },
+          min: 0,
+          max: 500,
+          interval: 100, // 指定刻度间隔
+          axisLabel: {
+            show: true,
+            textStyle: {
+              color: "#fff",
+              fontSize: 20,
+            },
+          },
+        },
+        grid: {
+          // 让图表占满容器
+          //   top: "5%",
+          left: "8%",
+          right: "5%",
+          bottom: "8%",
+        },
+        series: [
+          {
+            type: "bar",
+            markPoint: {
+              data: [{ type: "max", name: "Max" }],
+              label: {
+                textStyle: {
+                  color: "#fff",
+                  fontSize: 15,
+                },
+              },
+            },
+            name: "月用水量",
+            data: [280, 350, 120, 270, 290],
+            smooth: true,
+
+            itemStyle: {
+              normal: {
+                color: "#43FFF4",
+                lineStyle: {
+                  width: 5, //折线宽度
+                  color: "#11C3FF", //折线颜色
+                },
+              },
+            },
+          },
+        ],
+      },
+      option3: {
+        legend: {
+          data: [
+            { icon: "rect", name: "去年用水量" },
+            { icon: "rect", name: "今年用水量" },
+          ],
+          textStyle: {
+            color: "#fff",
+            fontSize: "20px",
+          },
+        },
+        xAxis: {
+          type: "category",
+          data: ["2019", "2020", "2021", "2022", "2023"],
+          axisLabel: {
+            show: true,
+            textStyle: {
+              color: "#fff",
+              fontSize: 20,
+            },
+            interval: 0, //代表显示所有x轴标签显示
+          },
+        },
+        yAxis: {
+          type: "value",
+          name: "单位:t",
+          nameTextStyle: {
+            color: "#fff",
+            fontSize: 20,
+            padding: 10,
+          },
+          min: 0,
+          max: 500,
+          interval: 100, // 指定刻度间隔
+          axisLabel: {
+            show: true,
+            textStyle: {
+              color: "#fff",
+              fontSize: 20,
+            },
+          },
+        },
+        grid: {
+          // 让图表占满容器
+          //   top: "5%",
+          left: "8%",
+          right: "5%",
+          bottom: "8%",
+        },
+        series: [
+          {
+            type: "line",
+            name: "去年用水量",
+            data: [240, 334, 123, 270, 296],
+            symbolSize: 15,
+            itemStyle: {
+              normal: {
+                color: "#56F671",
+                lineStyle: {
+                  width: 5, //折线宽度
+                  color: "#56F671", //折线颜色
+                },
+              },
+            },
+          },
+          {
+            type: "line",
+            name: "今年用水量",
+            symbolSize: 15,
+            data: [223, 434, 423, 254, 216],
+            itemStyle: {
+              normal: {
+                color: "#43FFF4",
+                lineStyle: {
+                  width: 5, //折线宽度
+                  color: "#43FFF4", //折线颜色
+                },
+              },
+            },
+          },
+        ],
+      },
+      option4: {
+        legend: {
+          data: [{ icon: "rect", name: "吨水电耗" }],
+          textStyle: {
+            color: "#fff",
+            fontSize: "20px",
+          },
+        },
+        xAxis: {
+          type: "category",
+          boundaryGap: false,
+          data: ["01-25", "01-26", "01-27", "01-28", "01-29", "01-30"],
+          axisLabel: {
+            show: true,
+            textStyle: {
+              color: "#fff",
+              fontSize: 20,
+            },
+            interval: 0, //代表显示所有x轴标签显示
+          },
+        },
+        yAxis: {
+          type: "value",
+          name: "单位:kWh/t",
+          nameTextStyle: {
+            color: "#fff",
+            fontSize: 20,
+            padding: 10,
+          },
+          min: 0,
+          max: 1,
+          interval: 1, // 指定刻度间隔
+          axisLabel: {
+            show: true,
+            textStyle: {
+              color: "#fff",
+              fontSize: 20,
+            },
+          },
+        },
+        grid: {
+          // 让图表占满容器
+          //   top: "5%",
+          left: "8%",
+          right: "5%",
+          bottom: "8%",
+        },
+        series: [
+          {
+            type: "line",
+            name: "吨水电耗",
+            data: [0.8, 0.6, 0.7, 0.5, 0.6, 0.3],
+            smooth: true,
+
+            itemStyle: {
+              normal: {
+                color: "#43FFF4",
+                lineStyle: {
+                  width: 5, //折线宽度
+                  color: "#43FFF4", //折线颜色
+                },
+                areaStyle: {
+                  color: new this.$echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                    { offset: 0, color: "#2A9095" },
+                    { offset: 0.5, color: "#27888F" },
+                    { offset: 1, color: "#1A3F51" },
+                  ]),
+                },
+              },
+            },
+          },
+        ],
+      },
+      tableData: [
+        {
+          date1: "回转窑",
+          date2: "20.34",
+          date3: "20.34",
+          date4: "20.34",
+        },
+        {
+          date1: "熟料收尘",
+          date2: "17.42",
+          date3: "17.42",
+          date4: "17.42",
+        },
+        {
+          date1: "篦冷机",
+          date2: "12.22",
+          date3: "12.22",
+          date4: "12.22",
+        },
+        {
+          date1: "生料收尘",
+          date2: "19.19",
+          date3: "19.19",
+          date4: "19.19",
+        },
+      ],
+    };
+  },
+  methods: {
+    defineEcharts(dom, option) {
+      var chartDom = document.getElementById(dom);
+      var myChart = this.$echarts.init(chartDom);
+      myChart.setOption(option);
+    },
+    tableRowClassName({ row, rowIndex }) {
+      if ((rowIndex + 1) % 2 === 0) {
+        return "success-row";
+      }
+      return "";
+    },
+  },
+  mounted() {
+    this.defineEcharts("rysl", this.option1);
+    this.defineEcharts("yysl", this.option2);
+    this.defineEcharts("nysl", this.option3);
+    this.defineEcharts("nhfx", this.option4);
+  },
+};
+</script>
+<style scoped lang="less">
+.box {
+  width: 100%;
+  height: 100%;
+  box-sizing: border-box;
+  background-color: transparent;
+  display: flex;
+  padding-top: 400px;
+  justify-content: space-between;
+  position: relative;
+  .left {
+    width: 1237px;
+    height: 2500px;
+    margin-left: 61px;
+    background-image: url("../../assets/img/侧边.png");
+    padding-left: 59px;
+    padding-right: 45px;
+    box-sizing: border-box;
+
+    .title {
+      margin-top: 15px;
+      margin-left: 60px;
+    }
+    .top {
+      position: relative;
+      margin-top: 100px;
+      color: #fff;
+      font-size: 22px;
+      display: flex;
+      div {
+        display: flex;
+        flex-direction: column;
+        width: 1155px;
+        align-items: center;
+        justify-content: space-between;
+        img {
+          height: 130px;
+          width: 200px;
+        }
+        p {
+          margin-top: 20px;
+        }
+      }
+      .two {
+        .txt {
+          position: absolute;
+          display: flex;
+          justify-content: space-around;
+          span:nth-of-type(1) {
+            font-size: 30px;
+          }
+          span:nth-of-type(2) {
+            font-size: 20px;
+            position: absolute;
+            top: 10px;
+            right: 530px;
+          }
+        }
+      }
+    }
+    .rysl {
+      position: relative;
+      margin-top: 56px;
+      .tip {
+        margin-left: 20px;
+        font-size: 20px;
+        position: absolute;
+        color: #fff;
+        top: 110px;
+        span:nth-of-type(1) {
+          margin-right: 30px;
+        }
+        span:nth-of-type(2) {
+          color: #09e83e;
+          font-weight: 600;
+        }
+        span:nth-of-type(4) {
+          color: #09e83e;
+        }
+      }
+      .data {
+        position: absolute;
+        font-size: 20px;
+        font-family: "DOUYU";
+        color: #ffffff;
+        line-height: 18px;
+        display: flex;
+        right: 0;
+        top: 120px;
+        z-index: 1;
+        span {
+          width: 122px;
+          height: 38px;
+          margin: 10px;
+          display: block;
+          line-height: 38px;
+          text-align: center;
+        }
+      }
+      .imgBox {
+        height: 93px;
+        width: 1156px;
+        p {
+          position: absolute;
+          color: #fff;
+          top: 20px;
+          left: 50px;
+          font-size: 30px;
+          font-family: "MicrosoftYaHei";
+        }
+      }
+      #rysl {
+        width: 1155px;
+        height: 500px;
+        margin-top: 50px;
+      }
+    }
+    .yysl {
+      position: relative;
+      margin-top: 56px;
+      .tip {
+        margin-left: 20px;
+        font-size: 20px;
+        position: absolute;
+        color: #fff;
+        top: 110px;
+        span:nth-of-type(1) {
+          margin-right: 30px;
+        }
+        span:nth-of-type(2) {
+          color: #11c3ff;
+          font-weight: 600;
+        }
+        span:nth-of-type(4) {
+          color: #11c3ff;
+        }
+      }
+      .data {
+        position: absolute;
+        font-size: 20px;
+        font-family: "DOUYU";
+        color: #ffffff;
+        line-height: 18px;
+        display: flex;
+        right: 0;
+        top: 120px;
+        z-index: 1;
+        span {
+          width: 122px;
+          height: 38px;
+          margin: 10px;
+          display: block;
+          line-height: 38px;
+          text-align: center;
+        }
+      }
+      .imgBox {
+        height: 93px;
+        width: 1156px;
+        p {
+          position: absolute;
+          color: #fff;
+          top: 20px;
+          left: 50px;
+          font-size: 30px;
+          font-family: "MicrosoftYaHei";
+        }
+      }
+      #yysl {
+        width: 1155px;
+        height: 500px;
+        margin-top: 50px;
+      }
+    }
+    .nysl {
+      position: relative;
+      margin-top: 56px;
+      .tip {
+        margin-left: 20px;
+        font-size: 20px;
+        position: absolute;
+        color: #fff;
+        top: 110px;
+        span:nth-of-type(1) {
+          margin-right: 30px;
+        }
+        span:nth-of-type(2) {
+          color: #43fff4;
+          font-weight: 600;
+        }
+        span:nth-of-type(4) {
+          color: #43fff4;
+        }
+      }
+      .data {
+        position: absolute;
+        font-size: 20px;
+        font-family: "DOUYU";
+        color: #ffffff;
+        line-height: 18px;
+        display: flex;
+        right: 0;
+        top: 120px;
+        z-index: 1;
+        span {
+          width: 122px;
+          height: 38px;
+          margin: 10px;
+          display: block;
+          line-height: 38px;
+          text-align: center;
+        }
+      }
+      .imgBox {
+        height: 93px;
+        width: 1156px;
+        p {
+          position: absolute;
+          color: #fff;
+          top: 20px;
+          left: 50px;
+          font-size: 30px;
+          font-family: "MicrosoftYaHei";
+        }
+      }
+      #nysl {
+        width: 1155px;
+        height: 500px;
+        margin-top: 50px;
+      }
+    }
+  }
+  .right {
+    width: 1237px;
+    height: 2500px;
+    margin-right: 61px;
+    background-image: url("../../assets/img/侧边.png");
+    padding-left: 59px;
+    padding-right: 45px;
+    box-sizing: border-box;
+    .ystj {
+      position: relative;
+      margin-top: 130px;
+      .imgBox {
+        height: 93px;
+        width: 1156px;
+        p {
+          position: absolute;
+          color: #fff;
+          top: 20px;
+          left: 50px;
+          font-size: 30px;
+          font-family: "MicrosoftYaHei";
+        }
+      }
+      .chartBox {
+        margin-top: 50px;
+        #ystj {
+          width: 1156px;
+          font-size: 20px;
+          color: #fff;
+          position: relative;
+          img {
+            height: 180px;
+            width: 200px;
+            margin-left: 60px;
+          }
+
+          .zs {
+            position: absolute;
+            top: 80px;
+            left: 400px;
+          }
+          .zx {
+            position: absolute;
+            top: 30px;
+            left: 700px;
+          }
+          .zxl {
+            position: absolute;
+            top: 100px;
+            left: 700px;
+          }
+        }
+      }
+    }
+    .sbjc {
+      position: relative;
+      margin-top: 56px;
+
+      .imgBox {
+        height: 93px;
+        width: 1156px;
+        p {
+          position: absolute;
+          color: #fff;
+          top: 20px;
+          left: 50px;
+          font-size: 30px;
+          font-family: "MicrosoftYaHei";
+        }
+      }
+      #sbjc {
+        width: 1155px;
+        height: 430px;
+        margin-top: 50px;
+        .title {
+          display: flex;
+          align-items: center;
+          color: #fff;
+          font-size: 20px;
+          margin-left: 50px;
+          margin-bottom: 20px;
+          span {
+            margin: 0 20px;
+            font-size: 30px;
+            color: #56f671;
+          }
+        }
+        /deep/.el-table tr {
+          background: #16253b;
+          color: #fff;
+          font-size: 30px;
+          height: 50px;
+          .cell {
+            line-height: 50px;
+          }
+        }
+        // 去掉eltable的hover效果
+        ::v-deep .el-table tbody tr:hover > td {
+          background-color: #0b679e !important;
+        }
+        //修改表头颜色
+        ::v-deep .has-gutter {
+          background-color: #1969a8;
+          th {
+            background-color: #1969a8;
+          }
+        }
+        //奇偶行颜色
+        ::v-deep .el-table .success-row {
+          background: #184167;
+        }
+        //去掉边框白线
+        ::v-deep .el-table__row > td {
+          border: none;
+        }
+
+        ::v-deep .el-table::before {
+          height: 0px;
+        }
+        /* 移除表头的下边框 */
+        ::v-deep .el-table__header th {
+          border-bottom: none;
+        }
+
+        /deep/ .el-table {
+          tr th,
+          tr td {
+            border-right: none;
+          }
+        }
+      }
+    }
+    .tpt {
+      position: relative;
+      margin-top: 56px;
+
+      .imgBox {
+        height: 93px;
+        width: 1156px;
+        p {
+          position: absolute;
+          color: #fff;
+          top: 20px;
+          left: 50px;
+          font-size: 30px;
+          font-family: "MicrosoftYaHei";
+        }
+      }
+      #tpt {
+        width: 1155px;
+        height: 400px;
+        margin-top: 50px;
+        .title {
+          display: flex;
+          align-items: center;
+          color: #fff;
+          font-size: 20px;
+          margin-left: 50px;
+          margin-bottom: 20px;
+          span {
+            margin: 0 20px;
+            font-size: 30px;
+            color: #56f671;
+          }
+        }
+      }
+    }
+    .nhfx {
+      position: relative;
+      margin-top: 56px;
+
+      .imgBox {
+        height: 93px;
+        width: 1156px;
+        p {
+          position: absolute;
+          color: #fff;
+          top: 20px;
+          left: 50px;
+          font-size: 30px;
+          font-family: "MicrosoftYaHei";
+        }
+      }
+      #nhfx {
+        width: 1155px;
+        height: 500px;
+        margin-top: 50px;
+        .title {
+          display: flex;
+          align-items: center;
+          color: #fff;
+          font-size: 20px;
+          margin-left: 50px;
+          margin-bottom: 20px;
+          span {
+            margin: 0 20px;
+            font-size: 30px;
+            color: #56f671;
+          }
+        }
+      }
+    }
+  }
+}
+</style>