diff --git a/src/assets/tiyuguan/人流.png b/src/assets/tiyuguan/人流.png
new file mode 100644
index 0000000..b6016d5
Binary files /dev/null and b/src/assets/tiyuguan/人流.png differ
diff --git a/src/assets/tiyuguan/人流饱和度.png b/src/assets/tiyuguan/人流饱和度.png
new file mode 100644
index 0000000..a6d40ea
Binary files /dev/null and b/src/assets/tiyuguan/人流饱和度.png differ
diff --git a/src/assets/tiyuguan/视频大框.png b/src/assets/tiyuguan/视频大框.png
new file mode 100644
index 0000000..a6c7d99
Binary files /dev/null and b/src/assets/tiyuguan/视频大框.png differ
diff --git a/src/assets/tiyuguan/视频小框.png b/src/assets/tiyuguan/视频小框.png
new file mode 100644
index 0000000..5ca7b88
Binary files /dev/null and b/src/assets/tiyuguan/视频小框.png differ
diff --git a/src/components/index/index.vue b/src/components/index/index.vue
index c2b5644..054eda8 100644
--- a/src/components/index/index.vue
+++ b/src/components/index/index.vue
@@ -23,7 +23,7 @@
               <div class="txt">游泳场馆</div>
             </div>
             <div @click="clickItme(5)" class="bowu guan" :class="selectVal == 5 ? 'bowuS' : 'bowuD'">
-              <div class="txt">博物馆</div>
+              <div class="txt">图书馆</div>
             </div>
           </div>
         </div>
@@ -71,11 +71,18 @@
         if(val == 1){
           this.$router.push({ path: '/tiyuchang/tiyuchang' })
           this.backVal = 1
-        }
-        if(val == 3){
+        }else if(val == 3){
           this.$router.push({ path: '/zongLan/zongLan' })
           this.backVal = 3
         }
+        else if(val == 2){
+          this.$router.push({ path: '/stadium/stadium' })
+          this.backVal = 2
+        }
+        else if(val == 5){
+          this.$router.push({ path: '/library/library' })
+          this.backVal = 5
+        }
       },
       clickQushi(val){
         this.selectVal1 = val
diff --git a/src/components/library/index.vue b/src/components/library/index.vue
new file mode 100644
index 0000000..c6a0b85
--- /dev/null
+++ b/src/components/library/index.vue
@@ -0,0 +1,479 @@
+<template>
+  <div class="hello">
+    <div class="main">
+      <div class="left">
+        <div class="tiyuBla">
+          <div style="position: absolute; right: 28%; top: 52%">体育场</div>
+        </div>
+
+        <div class="tongji">
+          <canvas
+            id="etELhoiEDSDBklnwaLybhInLlmnhnHuv"
+            :width="cWidth1"
+            :height="cHeight1"
+            class="charts1"
+            @click="tap1"
+          />
+          <!-- <canvas
+            id="etELhoiEDSDBklnwaLybhInLlmnhnHuv1"
+            :width="cWidth1"
+            :height="cHeight1"
+            class="charts1"
+            @click="tap1"
+          /> -->
+        </div>
+
+        <div class="bfb">
+          <div class="renshu"><span><img src="../../assets/tiyuguan/人流.png"></span>进馆人数</div>
+
+          <div class="num">24,352,345</div>
+
+          <!-- <div class="cntTxt">
+                     <div style="font-size: 30px;font-weight: bold;color: white;">75%</div>
+                     <div style="color: #0082FF;font-size: 14px;">人流饱和</div>
+                  </div> -->
+
+          <div class="cntTxt">
+            <canvas
+              id="PvqalmgjxGnTCXyTJMOKLkntpbgRzGND"
+              :width="cWidth"
+              :height="cHeight"
+              class="charts"
+              @click="tap"
+            />
+          </div>
+
+          <div class="rsType">
+            <div class="typeItem">
+              <div>安静</div>
+              <img
+                style="width: 45%; height: 40%; margin-top: 10%"
+                src="../../assets/tiyuguan/安静.png"
+              />
+            </div>
+            <div class="typeItem">
+              <div>舒适</div>
+              <img
+                style="width: 45%; height: 40%; margin-top: 10%"
+                src="../../assets/tiyuguan/舒适.png"
+              />
+            </div>
+            <div class="typeItem">
+              <div>拥挤</div>
+              <img
+                style="width: 45%; height: 40%; margin-top: 10%"
+                src="../../assets/tiyuguan/拥挤.png"
+              />
+            </div>
+          </div>
+        </div>
+      </div>
+
+      <div class="right">
+        <div class="item" ></div>
+        <div class="item"></div>
+        <div class="item"></div>
+        <div class="item"></div>
+      </div>
+    </div>
+  </div>
+</template>
+  
+  <script>
+import uCharts from "../../utils/u-charts";
+function getH5Offset(e) {
+  e.mp = {
+    changedTouches: [],
+  };
+  e.mp.changedTouches.push({
+    x: e.offsetX,
+    y: e.offsetY,
+  });
+  return e;
+}
+var uChartsInstance = {};
+export default {
+  data() {
+    return {
+      cWidth: 225,
+      cHeight: 150,
+      cWidth1: 550,
+      cHeight1: 250,
+    };
+  },
+  mounted() {
+    this.getServerData();
+    this.getServerData1();
+  },
+  methods: {
+    getServerData1() {
+      //模拟从服务器获取数据时的延时
+      setTimeout(() => {
+        //模拟服务器返回数据，如果数据格式和标准格式不同，需自行按下面的格式拼接
+        let res = {
+          categories: ["2018", "2019", "2020", "2021", "2022", "2023"],
+          series: [
+            {
+              name: "成交量A",
+              linearColor: [
+                [0, "#1890FF"],
+                [0.25, "#00B5FF"],
+                [0.5, "#00D1ED"],
+                [0.75, "#00E6BB"],
+                [1, "#90F489"],
+              ],
+              data: [15, 45, 15, 45, 15, 45],
+            },
+            {
+              name: "成交量B",
+              linearColor: [
+                [0, "#91CB74"],
+                [0.25, "#2BDCA8"],
+                [0.5, "#2AE3A0"],
+                [0.75, "#C4D06E"],
+                [1, "#F2D375"],
+              ],
+              data: [55, 85, 55, 85, 55, 85],
+            },
+            {
+              name: "成交量C",
+              linearColor: [
+                [0, "#FAC858"],
+                [0.33, "#FFC371"],
+                [0.66, "#FFC2B2"],
+                [1, "#FA7D8D"],
+              ],
+              data: [95, 125, 95, 125, 95, 125],
+            },
+          ],
+        };
+        let res1 = {
+            categories: ["2018","2019","2020","2021","2022","2023"],
+            series: [
+              
+              {
+                name: "山峰图",
+                index: 1,
+                type: "mount",
+                data: [70,50,85,130,64,88]
+              },
+              {
+                name: "曲线",
+                type: "line",
+                style: "curve",
+                color: "#1890ff",
+                disableLegend: true,
+                data: [70,50,85,130,64,88]
+              }
+            ]
+          };
+        this.drawCharts1("etELhoiEDSDBklnwaLybhInLlmnhnHuv", res);
+        this.drawCharts2("etELhoiEDSDBklnwaLybhInLlmnhnHuv1", res1);
+      }, 50);
+    },
+    drawCharts1(id, data) {
+      const ctx = document.getElementById(id).getContext("2d");
+      uChartsInstance[id] = new uCharts({
+        type: "line",
+        context: ctx,
+        width: this.cWidth1,
+        height: this.cHeight1,
+        categories: data.categories,
+        series: data.series,
+        animation: true,
+        background: "#FFFFFF",
+        color: [
+          "#1890FF",
+          "#91CB74",
+          "#FAC858",
+          "#EE6666",
+          "#73C0DE",
+          "#3CA272",
+          "#FC8452",
+          "#9A60B4",
+          "#ea7ccc",
+        ],
+        padding: [15, 10, 0, 15],
+        dataLabel: false,
+        dataPointShape: false,
+        enableScroll: false,
+        legend: {},
+        xAxis: {
+          disableGrid: true,
+        },
+        yAxis: {
+          gridType: "dash",
+          dashLength: 2,
+          data: [
+            {
+              min: 0,
+              max: 150,
+            },
+          ],
+        },
+        extra: {
+          line: {
+            type: "curve",
+            width: 2,
+            activeType: "hollow",
+            linearType: "custom",
+          },
+        },
+      });
+    },
+    drawCharts2(id, data) {
+      const ctx = document.getElementById(id).getContext("2d");
+      uChartsInstance[id] = new uCharts({
+        type: "mix",
+        context: ctx,
+        width: this.cWidth1,
+        height: this.cHeight1,
+        categories: data.categories,
+        series: data.series,
+        animation: true,
+        background: "#FFFFFF",
+        color: ["#1890FF","#91CB74","#FAC858","#EE6666","#73C0DE","#3CA272","#FC8452","#9A60B4","#ea7ccc"],
+        padding: [15,15,0,15],
+        enableScroll: false,
+        legend: {},
+        xAxis: {
+          disableGrid: true,
+        },
+        yAxis: {
+          disabled: false,
+          disableGrid: false,
+          splitNumber: 5,
+          gridType: "dash",
+          dashLength: 4,
+          gridColor: "#CCCCCC",
+          padding: 10,
+          showTitle: true,
+          data: [
+            {
+              position: "left",
+              title: "折线"
+            },
+            {
+              position: "left",
+              title: "山峰图",
+              min: 0,
+              max: 200,
+            },
+            // {
+            //   position: "right",
+            //   min: 0,
+            //   max: 200,
+            //   title: "柱状图",
+            //   textAlign: "left"
+            // },
+            // {
+            //   position: "right",
+            //   min: 0,
+            //   max: 200,
+            //   title: "点",
+            //   textAlign: "left"
+            // }
+          ]
+        },
+        extra: {
+          mount: {
+            type: "triangle",
+            widthRatio: 1,
+            borderWidth: 2,
+            linearType: "custom"
+          },
+          mix: {
+            column: {
+              width: 20
+            }
+          }
+        }
+      });
+    },
+
+    getServerData() {
+      //模拟从服务器获取数据时的延时
+      setTimeout(() => {
+        //模拟服务器返回数据
+        let res = {
+          series: [
+            {
+              name: "一班",
+              data: 0.75,
+            },
+          ],
+        };
+        this.drawCharts("PvqalmgjxGnTCXyTJMOKLkntpbgRzGND", res);
+      }, 50);
+    },
+    drawCharts(id, data) {
+      const ctx = document.getElementById(id).getContext("2d");
+      uChartsInstance[id] = new uCharts({
+        type: "arcbar",
+        context: ctx,
+        width: this.cWidth,
+        height: this.cHeight,
+        series: data.series,
+        animation: true,
+        background: "#FFFFFF",
+        color: ["#FFFF00"],
+        padding: undefined,
+        title: {
+          name: "75%",
+          fontSize: 30,
+          color: "#fff",
+          fontWeight: "bold",
+        },
+        subtitle: {
+          name: "人流饱和",
+          fontSize: 12,
+          color: "#0082FF",
+        },
+        extra: {
+          arcbar: {
+            type: "circle",
+            width: 10,
+            backgroundColor: "#070A24",
+            startAngle: 1.5,
+            endAngle: 0.25,
+            gap: 2,
+          },
+        },
+      });
+    },
+    tap(e) {
+      uChartsInstance[e.target.id].touchLegend(getH5Offset(e));
+      uChartsInstance[e.target.id].showToolTip(getH5Offset(e));
+    },
+    tap1(e) {
+      uChartsInstance[e.target.id].touchLegend(getH5Offset(e));
+      uChartsInstance[e.target.id].showToolTip(getH5Offset(e));
+    },
+  },
+};
+</script>
+  
+  <style lang="less" scoped>
+.main {
+  display: flex;
+  justify-content: space-between;
+  .left {
+    width: 30%;
+    height: 75vh;
+    // border: 1px solid red;
+    margin-left: 2%;
+    margin-top: -4%;
+    .tiyuBla {
+      width: 100%;
+      height: 40%;
+      background-image: url("../../assets/tiyuguan/进馆人流标题.png");
+      background-repeat: no-repeat;
+      background-size: 100% 100%;
+      color: white;
+      font-size: 38px;
+      font-weight: bold;
+      position: relative;
+    }
+
+    .tongji {
+      width: 100%;
+      height: 35%;
+      border: 1px solid #019ade;
+    }
+
+    .bfb {
+      width: 100%;
+      height: 25%;
+      background-image: url("../../assets/tiyuguan/人流饱和度.png");
+      background-repeat: no-repeat;
+      background-size: 100% 100%;
+      position: relative;
+      .renshu {
+        span{
+          margin-right: 5px;
+          img{
+            width: 10px;
+            height: 12px;
+          }
+        }
+        position: absolute;
+        top: 30%;
+        left: 10%;
+        color: #8199bd;
+        font-weight: bold;
+        font-size: 14px;
+      }
+      .num {
+        color: white;
+        font-weight: bold;
+        font-size: 20px;
+        position: absolute;
+        top: 45%;
+        left: 6%;
+      }
+      .cntTxt {
+        width: 20%;
+        height: 60%;
+        // border: 1px solid red;
+        position: absolute;
+        top: -5%;
+        left: 30.5%;
+        text-align: center;
+        padding-top: 2.5%;
+      }
+      .rsType {
+        width: 30%;
+        height: 35%;
+        // border: 1px solid red;
+        position: absolute;
+        top: 30%;
+        right: 4%;
+        display: flex;
+        justify-content: space-between;
+        .typeItem {
+          width: 30%;
+          height: 95%;
+          text-align: center;
+          color: #687c9e;
+          font-size: 14px;
+        }
+      }
+    }
+  }
+
+  .right {
+    margin-top: 3%;
+    width: 65%;
+    height: 66vh;
+    // border: 1px solid #019ade;
+    display: flex;
+    flex-wrap: wrap;
+    // align-items: center;
+    align-content: center;
+    justify-content: center;
+    background-image: url("../../assets/tiyuguan/视频大框.png") ;
+    background-size:contain;
+    background-repeat:no-repeat;
+    .item{
+      width: 40%; 
+      height: 40%; 
+      margin-top: 5px;
+      background-image: url("../../assets/tiyuguan/视频小框.png") ;
+      background-size:contain;
+      background-repeat:no-repeat;
+    }
+    .item:nth-child(2),.item:nth-child(4){
+      margin-right: 60px;
+    }
+  }
+
+  .charts {
+    width: 225px;
+    height: 150px;
+  }
+  .charts1 {
+    width: 550px;
+    height: 250px;
+  }
+}
+</style>
\ No newline at end of file
diff --git a/src/components/stadium/stadium.vue b/src/components/stadium/stadium.vue
new file mode 100644
index 0000000..c6a0b85
--- /dev/null
+++ b/src/components/stadium/stadium.vue
@@ -0,0 +1,479 @@
+<template>
+  <div class="hello">
+    <div class="main">
+      <div class="left">
+        <div class="tiyuBla">
+          <div style="position: absolute; right: 28%; top: 52%">体育场</div>
+        </div>
+
+        <div class="tongji">
+          <canvas
+            id="etELhoiEDSDBklnwaLybhInLlmnhnHuv"
+            :width="cWidth1"
+            :height="cHeight1"
+            class="charts1"
+            @click="tap1"
+          />
+          <!-- <canvas
+            id="etELhoiEDSDBklnwaLybhInLlmnhnHuv1"
+            :width="cWidth1"
+            :height="cHeight1"
+            class="charts1"
+            @click="tap1"
+          /> -->
+        </div>
+
+        <div class="bfb">
+          <div class="renshu"><span><img src="../../assets/tiyuguan/人流.png"></span>进馆人数</div>
+
+          <div class="num">24,352,345</div>
+
+          <!-- <div class="cntTxt">
+                     <div style="font-size: 30px;font-weight: bold;color: white;">75%</div>
+                     <div style="color: #0082FF;font-size: 14px;">人流饱和</div>
+                  </div> -->
+
+          <div class="cntTxt">
+            <canvas
+              id="PvqalmgjxGnTCXyTJMOKLkntpbgRzGND"
+              :width="cWidth"
+              :height="cHeight"
+              class="charts"
+              @click="tap"
+            />
+          </div>
+
+          <div class="rsType">
+            <div class="typeItem">
+              <div>安静</div>
+              <img
+                style="width: 45%; height: 40%; margin-top: 10%"
+                src="../../assets/tiyuguan/安静.png"
+              />
+            </div>
+            <div class="typeItem">
+              <div>舒适</div>
+              <img
+                style="width: 45%; height: 40%; margin-top: 10%"
+                src="../../assets/tiyuguan/舒适.png"
+              />
+            </div>
+            <div class="typeItem">
+              <div>拥挤</div>
+              <img
+                style="width: 45%; height: 40%; margin-top: 10%"
+                src="../../assets/tiyuguan/拥挤.png"
+              />
+            </div>
+          </div>
+        </div>
+      </div>
+
+      <div class="right">
+        <div class="item" ></div>
+        <div class="item"></div>
+        <div class="item"></div>
+        <div class="item"></div>
+      </div>
+    </div>
+  </div>
+</template>
+  
+  <script>
+import uCharts from "../../utils/u-charts";
+function getH5Offset(e) {
+  e.mp = {
+    changedTouches: [],
+  };
+  e.mp.changedTouches.push({
+    x: e.offsetX,
+    y: e.offsetY,
+  });
+  return e;
+}
+var uChartsInstance = {};
+export default {
+  data() {
+    return {
+      cWidth: 225,
+      cHeight: 150,
+      cWidth1: 550,
+      cHeight1: 250,
+    };
+  },
+  mounted() {
+    this.getServerData();
+    this.getServerData1();
+  },
+  methods: {
+    getServerData1() {
+      //模拟从服务器获取数据时的延时
+      setTimeout(() => {
+        //模拟服务器返回数据，如果数据格式和标准格式不同，需自行按下面的格式拼接
+        let res = {
+          categories: ["2018", "2019", "2020", "2021", "2022", "2023"],
+          series: [
+            {
+              name: "成交量A",
+              linearColor: [
+                [0, "#1890FF"],
+                [0.25, "#00B5FF"],
+                [0.5, "#00D1ED"],
+                [0.75, "#00E6BB"],
+                [1, "#90F489"],
+              ],
+              data: [15, 45, 15, 45, 15, 45],
+            },
+            {
+              name: "成交量B",
+              linearColor: [
+                [0, "#91CB74"],
+                [0.25, "#2BDCA8"],
+                [0.5, "#2AE3A0"],
+                [0.75, "#C4D06E"],
+                [1, "#F2D375"],
+              ],
+              data: [55, 85, 55, 85, 55, 85],
+            },
+            {
+              name: "成交量C",
+              linearColor: [
+                [0, "#FAC858"],
+                [0.33, "#FFC371"],
+                [0.66, "#FFC2B2"],
+                [1, "#FA7D8D"],
+              ],
+              data: [95, 125, 95, 125, 95, 125],
+            },
+          ],
+        };
+        let res1 = {
+            categories: ["2018","2019","2020","2021","2022","2023"],
+            series: [
+              
+              {
+                name: "山峰图",
+                index: 1,
+                type: "mount",
+                data: [70,50,85,130,64,88]
+              },
+              {
+                name: "曲线",
+                type: "line",
+                style: "curve",
+                color: "#1890ff",
+                disableLegend: true,
+                data: [70,50,85,130,64,88]
+              }
+            ]
+          };
+        this.drawCharts1("etELhoiEDSDBklnwaLybhInLlmnhnHuv", res);
+        this.drawCharts2("etELhoiEDSDBklnwaLybhInLlmnhnHuv1", res1);
+      }, 50);
+    },
+    drawCharts1(id, data) {
+      const ctx = document.getElementById(id).getContext("2d");
+      uChartsInstance[id] = new uCharts({
+        type: "line",
+        context: ctx,
+        width: this.cWidth1,
+        height: this.cHeight1,
+        categories: data.categories,
+        series: data.series,
+        animation: true,
+        background: "#FFFFFF",
+        color: [
+          "#1890FF",
+          "#91CB74",
+          "#FAC858",
+          "#EE6666",
+          "#73C0DE",
+          "#3CA272",
+          "#FC8452",
+          "#9A60B4",
+          "#ea7ccc",
+        ],
+        padding: [15, 10, 0, 15],
+        dataLabel: false,
+        dataPointShape: false,
+        enableScroll: false,
+        legend: {},
+        xAxis: {
+          disableGrid: true,
+        },
+        yAxis: {
+          gridType: "dash",
+          dashLength: 2,
+          data: [
+            {
+              min: 0,
+              max: 150,
+            },
+          ],
+        },
+        extra: {
+          line: {
+            type: "curve",
+            width: 2,
+            activeType: "hollow",
+            linearType: "custom",
+          },
+        },
+      });
+    },
+    drawCharts2(id, data) {
+      const ctx = document.getElementById(id).getContext("2d");
+      uChartsInstance[id] = new uCharts({
+        type: "mix",
+        context: ctx,
+        width: this.cWidth1,
+        height: this.cHeight1,
+        categories: data.categories,
+        series: data.series,
+        animation: true,
+        background: "#FFFFFF",
+        color: ["#1890FF","#91CB74","#FAC858","#EE6666","#73C0DE","#3CA272","#FC8452","#9A60B4","#ea7ccc"],
+        padding: [15,15,0,15],
+        enableScroll: false,
+        legend: {},
+        xAxis: {
+          disableGrid: true,
+        },
+        yAxis: {
+          disabled: false,
+          disableGrid: false,
+          splitNumber: 5,
+          gridType: "dash",
+          dashLength: 4,
+          gridColor: "#CCCCCC",
+          padding: 10,
+          showTitle: true,
+          data: [
+            {
+              position: "left",
+              title: "折线"
+            },
+            {
+              position: "left",
+              title: "山峰图",
+              min: 0,
+              max: 200,
+            },
+            // {
+            //   position: "right",
+            //   min: 0,
+            //   max: 200,
+            //   title: "柱状图",
+            //   textAlign: "left"
+            // },
+            // {
+            //   position: "right",
+            //   min: 0,
+            //   max: 200,
+            //   title: "点",
+            //   textAlign: "left"
+            // }
+          ]
+        },
+        extra: {
+          mount: {
+            type: "triangle",
+            widthRatio: 1,
+            borderWidth: 2,
+            linearType: "custom"
+          },
+          mix: {
+            column: {
+              width: 20
+            }
+          }
+        }
+      });
+    },
+
+    getServerData() {
+      //模拟从服务器获取数据时的延时
+      setTimeout(() => {
+        //模拟服务器返回数据
+        let res = {
+          series: [
+            {
+              name: "一班",
+              data: 0.75,
+            },
+          ],
+        };
+        this.drawCharts("PvqalmgjxGnTCXyTJMOKLkntpbgRzGND", res);
+      }, 50);
+    },
+    drawCharts(id, data) {
+      const ctx = document.getElementById(id).getContext("2d");
+      uChartsInstance[id] = new uCharts({
+        type: "arcbar",
+        context: ctx,
+        width: this.cWidth,
+        height: this.cHeight,
+        series: data.series,
+        animation: true,
+        background: "#FFFFFF",
+        color: ["#FFFF00"],
+        padding: undefined,
+        title: {
+          name: "75%",
+          fontSize: 30,
+          color: "#fff",
+          fontWeight: "bold",
+        },
+        subtitle: {
+          name: "人流饱和",
+          fontSize: 12,
+          color: "#0082FF",
+        },
+        extra: {
+          arcbar: {
+            type: "circle",
+            width: 10,
+            backgroundColor: "#070A24",
+            startAngle: 1.5,
+            endAngle: 0.25,
+            gap: 2,
+          },
+        },
+      });
+    },
+    tap(e) {
+      uChartsInstance[e.target.id].touchLegend(getH5Offset(e));
+      uChartsInstance[e.target.id].showToolTip(getH5Offset(e));
+    },
+    tap1(e) {
+      uChartsInstance[e.target.id].touchLegend(getH5Offset(e));
+      uChartsInstance[e.target.id].showToolTip(getH5Offset(e));
+    },
+  },
+};
+</script>
+  
+  <style lang="less" scoped>
+.main {
+  display: flex;
+  justify-content: space-between;
+  .left {
+    width: 30%;
+    height: 75vh;
+    // border: 1px solid red;
+    margin-left: 2%;
+    margin-top: -4%;
+    .tiyuBla {
+      width: 100%;
+      height: 40%;
+      background-image: url("../../assets/tiyuguan/进馆人流标题.png");
+      background-repeat: no-repeat;
+      background-size: 100% 100%;
+      color: white;
+      font-size: 38px;
+      font-weight: bold;
+      position: relative;
+    }
+
+    .tongji {
+      width: 100%;
+      height: 35%;
+      border: 1px solid #019ade;
+    }
+
+    .bfb {
+      width: 100%;
+      height: 25%;
+      background-image: url("../../assets/tiyuguan/人流饱和度.png");
+      background-repeat: no-repeat;
+      background-size: 100% 100%;
+      position: relative;
+      .renshu {
+        span{
+          margin-right: 5px;
+          img{
+            width: 10px;
+            height: 12px;
+          }
+        }
+        position: absolute;
+        top: 30%;
+        left: 10%;
+        color: #8199bd;
+        font-weight: bold;
+        font-size: 14px;
+      }
+      .num {
+        color: white;
+        font-weight: bold;
+        font-size: 20px;
+        position: absolute;
+        top: 45%;
+        left: 6%;
+      }
+      .cntTxt {
+        width: 20%;
+        height: 60%;
+        // border: 1px solid red;
+        position: absolute;
+        top: -5%;
+        left: 30.5%;
+        text-align: center;
+        padding-top: 2.5%;
+      }
+      .rsType {
+        width: 30%;
+        height: 35%;
+        // border: 1px solid red;
+        position: absolute;
+        top: 30%;
+        right: 4%;
+        display: flex;
+        justify-content: space-between;
+        .typeItem {
+          width: 30%;
+          height: 95%;
+          text-align: center;
+          color: #687c9e;
+          font-size: 14px;
+        }
+      }
+    }
+  }
+
+  .right {
+    margin-top: 3%;
+    width: 65%;
+    height: 66vh;
+    // border: 1px solid #019ade;
+    display: flex;
+    flex-wrap: wrap;
+    // align-items: center;
+    align-content: center;
+    justify-content: center;
+    background-image: url("../../assets/tiyuguan/视频大框.png") ;
+    background-size:contain;
+    background-repeat:no-repeat;
+    .item{
+      width: 40%; 
+      height: 40%; 
+      margin-top: 5px;
+      background-image: url("../../assets/tiyuguan/视频小框.png") ;
+      background-size:contain;
+      background-repeat:no-repeat;
+    }
+    .item:nth-child(2),.item:nth-child(4){
+      margin-right: 60px;
+    }
+  }
+
+  .charts {
+    width: 225px;
+    height: 150px;
+  }
+  .charts1 {
+    width: 550px;
+    height: 250px;
+  }
+}
+</style>
\ No newline at end of file
diff --git a/src/components/tiyuchang/1.vue b/src/components/tiyuchang/1.vue
new file mode 100644
index 0000000..4c1e13f
--- /dev/null
+++ b/src/components/tiyuchang/1.vue
@@ -0,0 +1,154 @@
+<template>
+  <div>
+    <canvas id="UKijRCmzReSTcyEAGvEhdEhlfvWfNbtZ" :width="cWidth" :height="cHeight" class="charts" @click="tap"/>
+  </div>
+</template>
+
+<script>
+// 需要在您的项目内执行 npm i @qiun/ucharts
+import uCharts from '@qiun/ucharts';
+function getH5Offset(e) {
+  e.mp = {
+    changedTouches: []
+  };
+  e.mp.changedTouches.push({
+    x: e.offsetX,
+    y: e.offsetY
+  });
+  return e;
+}
+var uChartsInstance = {};
+export default {
+  data() {
+    return {
+      cWidth: 750,
+      cHeight: 500
+    };
+  },
+  mounted() {
+    this.getServerData();
+  },
+  methods: {
+    getServerData() {
+      //模拟从服务器获取数据时的延时
+      setTimeout(() => {
+        //模拟服务器返回数据，如果数据格式和标准格式不同，需自行按下面的格式拼接
+        let res = {
+            categories: ["2018","2019","2020","2021","2022","2023"],
+            series: [
+              {
+                name: "曲面",
+                type: "area",
+                style: "curve",
+                data: [70,50,85,130,64,88]
+              },
+              {
+                name: "柱1",
+                index: 1,
+                type: "column",
+                data: [40,{"value":30,"color":"#f04864"},55,110,24,58]
+              },
+              {
+                name: "柱2",
+                index: 1,
+                type: "column",
+                data: [50,20,75,60,34,38]
+              },
+              {
+                name: "曲线",
+                type: "line",
+                style: "curve",
+                color: "#1890ff",
+                disableLegend: true,
+                data: [70,50,85,130,64,88]
+              },
+              {
+                name: "折线",
+                type: "line",
+                color: "#2fc25b",
+                data: [120,140,105,170,95,160]
+              },
+              {
+                name: "点",
+                index: 2,
+                type: "point",
+                color: "#f04864",
+                data: [100,80,125,150,112,132]
+              }
+            ]
+          };
+        this.drawCharts('UKijRCmzReSTcyEAGvEhdEhlfvWfNbtZ', res);
+      }, 500);
+    },
+    drawCharts(id,data){
+      const ctx = document.getElementById(id).getContext("2d");
+      uChartsInstance[id] = new uCharts({
+        type: "mix",
+        context: ctx,
+        width: this.cWidth,
+        height: this.cHeight,
+        categories: data.categories,
+        series: data.series,
+        animation: true,
+        background: "#FFFFFF",
+        color: ["#1890FF","#91CB74","#FAC858","#EE6666","#73C0DE","#3CA272","#FC8452","#9A60B4","#ea7ccc"],
+        padding: [15,15,0,15],
+        enableScroll: false,
+        legend: {},
+        xAxis: {
+          disableGrid: true,
+          title: "单位：年"
+        },
+        yAxis: {
+          disabled: false,
+          disableGrid: false,
+          splitNumber: 5,
+          gridType: "dash",
+          dashLength: 4,
+          gridColor: "#CCCCCC",
+          padding: 10,
+          showTitle: true,
+          data: [
+            {
+              position: "left",
+              title: "折线"
+            },
+            {
+              position: "right",
+              min: 0,
+              max: 200,
+              title: "柱状图",
+              textAlign: "left"
+            },
+            {
+              position: "right",
+              min: 0,
+              max: 200,
+              title: "点",
+              textAlign: "left"
+            }
+          ]
+        },
+        extra: {
+          mix: {
+            column: {
+              width: 20
+            }
+          }
+        }
+      });
+    },
+    tap(e){
+      uChartsInstance[e.target.id].touchLegend(getH5Offset(e));
+      uChartsInstance[e.target.id].showToolTip(getH5Offset(e));
+    }
+  }
+};
+</script>
+
+<style scoped>
+  .charts{
+    width: 750px;
+    height: 500px;
+  }
+</style>
\ No newline at end of file
diff --git a/src/components/tiyuchang/tiyuchang copy.vue b/src/components/tiyuchang/tiyuchang copy.vue
new file mode 100644
index 0000000..c6a0b85
--- /dev/null
+++ b/src/components/tiyuchang/tiyuchang copy.vue	
@@ -0,0 +1,479 @@
+<template>
+  <div class="hello">
+    <div class="main">
+      <div class="left">
+        <div class="tiyuBla">
+          <div style="position: absolute; right: 28%; top: 52%">体育场</div>
+        </div>
+
+        <div class="tongji">
+          <canvas
+            id="etELhoiEDSDBklnwaLybhInLlmnhnHuv"
+            :width="cWidth1"
+            :height="cHeight1"
+            class="charts1"
+            @click="tap1"
+          />
+          <!-- <canvas
+            id="etELhoiEDSDBklnwaLybhInLlmnhnHuv1"
+            :width="cWidth1"
+            :height="cHeight1"
+            class="charts1"
+            @click="tap1"
+          /> -->
+        </div>
+
+        <div class="bfb">
+          <div class="renshu"><span><img src="../../assets/tiyuguan/人流.png"></span>进馆人数</div>
+
+          <div class="num">24,352,345</div>
+
+          <!-- <div class="cntTxt">
+                     <div style="font-size: 30px;font-weight: bold;color: white;">75%</div>
+                     <div style="color: #0082FF;font-size: 14px;">人流饱和</div>
+                  </div> -->
+
+          <div class="cntTxt">
+            <canvas
+              id="PvqalmgjxGnTCXyTJMOKLkntpbgRzGND"
+              :width="cWidth"
+              :height="cHeight"
+              class="charts"
+              @click="tap"
+            />
+          </div>
+
+          <div class="rsType">
+            <div class="typeItem">
+              <div>安静</div>
+              <img
+                style="width: 45%; height: 40%; margin-top: 10%"
+                src="../../assets/tiyuguan/安静.png"
+              />
+            </div>
+            <div class="typeItem">
+              <div>舒适</div>
+              <img
+                style="width: 45%; height: 40%; margin-top: 10%"
+                src="../../assets/tiyuguan/舒适.png"
+              />
+            </div>
+            <div class="typeItem">
+              <div>拥挤</div>
+              <img
+                style="width: 45%; height: 40%; margin-top: 10%"
+                src="../../assets/tiyuguan/拥挤.png"
+              />
+            </div>
+          </div>
+        </div>
+      </div>
+
+      <div class="right">
+        <div class="item" ></div>
+        <div class="item"></div>
+        <div class="item"></div>
+        <div class="item"></div>
+      </div>
+    </div>
+  </div>
+</template>
+  
+  <script>
+import uCharts from "../../utils/u-charts";
+function getH5Offset(e) {
+  e.mp = {
+    changedTouches: [],
+  };
+  e.mp.changedTouches.push({
+    x: e.offsetX,
+    y: e.offsetY,
+  });
+  return e;
+}
+var uChartsInstance = {};
+export default {
+  data() {
+    return {
+      cWidth: 225,
+      cHeight: 150,
+      cWidth1: 550,
+      cHeight1: 250,
+    };
+  },
+  mounted() {
+    this.getServerData();
+    this.getServerData1();
+  },
+  methods: {
+    getServerData1() {
+      //模拟从服务器获取数据时的延时
+      setTimeout(() => {
+        //模拟服务器返回数据，如果数据格式和标准格式不同，需自行按下面的格式拼接
+        let res = {
+          categories: ["2018", "2019", "2020", "2021", "2022", "2023"],
+          series: [
+            {
+              name: "成交量A",
+              linearColor: [
+                [0, "#1890FF"],
+                [0.25, "#00B5FF"],
+                [0.5, "#00D1ED"],
+                [0.75, "#00E6BB"],
+                [1, "#90F489"],
+              ],
+              data: [15, 45, 15, 45, 15, 45],
+            },
+            {
+              name: "成交量B",
+              linearColor: [
+                [0, "#91CB74"],
+                [0.25, "#2BDCA8"],
+                [0.5, "#2AE3A0"],
+                [0.75, "#C4D06E"],
+                [1, "#F2D375"],
+              ],
+              data: [55, 85, 55, 85, 55, 85],
+            },
+            {
+              name: "成交量C",
+              linearColor: [
+                [0, "#FAC858"],
+                [0.33, "#FFC371"],
+                [0.66, "#FFC2B2"],
+                [1, "#FA7D8D"],
+              ],
+              data: [95, 125, 95, 125, 95, 125],
+            },
+          ],
+        };
+        let res1 = {
+            categories: ["2018","2019","2020","2021","2022","2023"],
+            series: [
+              
+              {
+                name: "山峰图",
+                index: 1,
+                type: "mount",
+                data: [70,50,85,130,64,88]
+              },
+              {
+                name: "曲线",
+                type: "line",
+                style: "curve",
+                color: "#1890ff",
+                disableLegend: true,
+                data: [70,50,85,130,64,88]
+              }
+            ]
+          };
+        this.drawCharts1("etELhoiEDSDBklnwaLybhInLlmnhnHuv", res);
+        this.drawCharts2("etELhoiEDSDBklnwaLybhInLlmnhnHuv1", res1);
+      }, 50);
+    },
+    drawCharts1(id, data) {
+      const ctx = document.getElementById(id).getContext("2d");
+      uChartsInstance[id] = new uCharts({
+        type: "line",
+        context: ctx,
+        width: this.cWidth1,
+        height: this.cHeight1,
+        categories: data.categories,
+        series: data.series,
+        animation: true,
+        background: "#FFFFFF",
+        color: [
+          "#1890FF",
+          "#91CB74",
+          "#FAC858",
+          "#EE6666",
+          "#73C0DE",
+          "#3CA272",
+          "#FC8452",
+          "#9A60B4",
+          "#ea7ccc",
+        ],
+        padding: [15, 10, 0, 15],
+        dataLabel: false,
+        dataPointShape: false,
+        enableScroll: false,
+        legend: {},
+        xAxis: {
+          disableGrid: true,
+        },
+        yAxis: {
+          gridType: "dash",
+          dashLength: 2,
+          data: [
+            {
+              min: 0,
+              max: 150,
+            },
+          ],
+        },
+        extra: {
+          line: {
+            type: "curve",
+            width: 2,
+            activeType: "hollow",
+            linearType: "custom",
+          },
+        },
+      });
+    },
+    drawCharts2(id, data) {
+      const ctx = document.getElementById(id).getContext("2d");
+      uChartsInstance[id] = new uCharts({
+        type: "mix",
+        context: ctx,
+        width: this.cWidth1,
+        height: this.cHeight1,
+        categories: data.categories,
+        series: data.series,
+        animation: true,
+        background: "#FFFFFF",
+        color: ["#1890FF","#91CB74","#FAC858","#EE6666","#73C0DE","#3CA272","#FC8452","#9A60B4","#ea7ccc"],
+        padding: [15,15,0,15],
+        enableScroll: false,
+        legend: {},
+        xAxis: {
+          disableGrid: true,
+        },
+        yAxis: {
+          disabled: false,
+          disableGrid: false,
+          splitNumber: 5,
+          gridType: "dash",
+          dashLength: 4,
+          gridColor: "#CCCCCC",
+          padding: 10,
+          showTitle: true,
+          data: [
+            {
+              position: "left",
+              title: "折线"
+            },
+            {
+              position: "left",
+              title: "山峰图",
+              min: 0,
+              max: 200,
+            },
+            // {
+            //   position: "right",
+            //   min: 0,
+            //   max: 200,
+            //   title: "柱状图",
+            //   textAlign: "left"
+            // },
+            // {
+            //   position: "right",
+            //   min: 0,
+            //   max: 200,
+            //   title: "点",
+            //   textAlign: "left"
+            // }
+          ]
+        },
+        extra: {
+          mount: {
+            type: "triangle",
+            widthRatio: 1,
+            borderWidth: 2,
+            linearType: "custom"
+          },
+          mix: {
+            column: {
+              width: 20
+            }
+          }
+        }
+      });
+    },
+
+    getServerData() {
+      //模拟从服务器获取数据时的延时
+      setTimeout(() => {
+        //模拟服务器返回数据
+        let res = {
+          series: [
+            {
+              name: "一班",
+              data: 0.75,
+            },
+          ],
+        };
+        this.drawCharts("PvqalmgjxGnTCXyTJMOKLkntpbgRzGND", res);
+      }, 50);
+    },
+    drawCharts(id, data) {
+      const ctx = document.getElementById(id).getContext("2d");
+      uChartsInstance[id] = new uCharts({
+        type: "arcbar",
+        context: ctx,
+        width: this.cWidth,
+        height: this.cHeight,
+        series: data.series,
+        animation: true,
+        background: "#FFFFFF",
+        color: ["#FFFF00"],
+        padding: undefined,
+        title: {
+          name: "75%",
+          fontSize: 30,
+          color: "#fff",
+          fontWeight: "bold",
+        },
+        subtitle: {
+          name: "人流饱和",
+          fontSize: 12,
+          color: "#0082FF",
+        },
+        extra: {
+          arcbar: {
+            type: "circle",
+            width: 10,
+            backgroundColor: "#070A24",
+            startAngle: 1.5,
+            endAngle: 0.25,
+            gap: 2,
+          },
+        },
+      });
+    },
+    tap(e) {
+      uChartsInstance[e.target.id].touchLegend(getH5Offset(e));
+      uChartsInstance[e.target.id].showToolTip(getH5Offset(e));
+    },
+    tap1(e) {
+      uChartsInstance[e.target.id].touchLegend(getH5Offset(e));
+      uChartsInstance[e.target.id].showToolTip(getH5Offset(e));
+    },
+  },
+};
+</script>
+  
+  <style lang="less" scoped>
+.main {
+  display: flex;
+  justify-content: space-between;
+  .left {
+    width: 30%;
+    height: 75vh;
+    // border: 1px solid red;
+    margin-left: 2%;
+    margin-top: -4%;
+    .tiyuBla {
+      width: 100%;
+      height: 40%;
+      background-image: url("../../assets/tiyuguan/进馆人流标题.png");
+      background-repeat: no-repeat;
+      background-size: 100% 100%;
+      color: white;
+      font-size: 38px;
+      font-weight: bold;
+      position: relative;
+    }
+
+    .tongji {
+      width: 100%;
+      height: 35%;
+      border: 1px solid #019ade;
+    }
+
+    .bfb {
+      width: 100%;
+      height: 25%;
+      background-image: url("../../assets/tiyuguan/人流饱和度.png");
+      background-repeat: no-repeat;
+      background-size: 100% 100%;
+      position: relative;
+      .renshu {
+        span{
+          margin-right: 5px;
+          img{
+            width: 10px;
+            height: 12px;
+          }
+        }
+        position: absolute;
+        top: 30%;
+        left: 10%;
+        color: #8199bd;
+        font-weight: bold;
+        font-size: 14px;
+      }
+      .num {
+        color: white;
+        font-weight: bold;
+        font-size: 20px;
+        position: absolute;
+        top: 45%;
+        left: 6%;
+      }
+      .cntTxt {
+        width: 20%;
+        height: 60%;
+        // border: 1px solid red;
+        position: absolute;
+        top: -5%;
+        left: 30.5%;
+        text-align: center;
+        padding-top: 2.5%;
+      }
+      .rsType {
+        width: 30%;
+        height: 35%;
+        // border: 1px solid red;
+        position: absolute;
+        top: 30%;
+        right: 4%;
+        display: flex;
+        justify-content: space-between;
+        .typeItem {
+          width: 30%;
+          height: 95%;
+          text-align: center;
+          color: #687c9e;
+          font-size: 14px;
+        }
+      }
+    }
+  }
+
+  .right {
+    margin-top: 3%;
+    width: 65%;
+    height: 66vh;
+    // border: 1px solid #019ade;
+    display: flex;
+    flex-wrap: wrap;
+    // align-items: center;
+    align-content: center;
+    justify-content: center;
+    background-image: url("../../assets/tiyuguan/视频大框.png") ;
+    background-size:contain;
+    background-repeat:no-repeat;
+    .item{
+      width: 40%; 
+      height: 40%; 
+      margin-top: 5px;
+      background-image: url("../../assets/tiyuguan/视频小框.png") ;
+      background-size:contain;
+      background-repeat:no-repeat;
+    }
+    .item:nth-child(2),.item:nth-child(4){
+      margin-right: 60px;
+    }
+  }
+
+  .charts {
+    width: 225px;
+    height: 150px;
+  }
+  .charts1 {
+    width: 550px;
+    height: 250px;
+  }
+}
+</style>
\ No newline at end of file
diff --git a/src/components/tiyuchang/tiyuchang.vue b/src/components/tiyuchang/tiyuchang.vue
index 138fa65..44313d3 100644
--- a/src/components/tiyuchang/tiyuchang.vue
+++ b/src/components/tiyuchang/tiyuchang.vue
@@ -1,184 +1,177 @@
 <template>
-    
-
-    <div class="hello">
-         <div class="main">
-           
-           <div class="left">
-              <div class="tiyuBla">
-                <div style="position: absolute;right: 28%;top: 52%;">体育场</div>
-              </div>
+  <div class="hello">
+    <div class="main">
+      <div class="left">
+        <div class="tiyuBla">
+          <div style="position: absolute; right: 28%; top: 52%">体育场</div>
+        </div>
 
-              <div class="tongji">
-                <canvas id="etELhoiEDSDBklnwaLybhInLlmnhnHuv" :width="cWidth1" :height="cHeight1" class="charts1" @click="tap1"/>
-              </div>
+        <div class="tongji">
+          <!-- <canvas
+            id="etELhoiEDSDBklnwaLybhInLlmnhnHuv"
+            :width="cWidth1"
+            :height="cHeight1"
+            class="charts1"
+            @click="tap1"
+          /> -->
+          <canvas
+            id="etELhoiEDSDBklnwaLybhInLlmnhnHuv1"
+            :width="cWidth1"
+            :height="cHeight1"
+            class="charts1"
+            @click="tap1"
+          />
+        </div>
 
-              <div class="bfb">
-                  <div class="renshu">进馆人数</div>
+        <div class="bfb">
+          <div class="renshu"><span><img src="../../assets/tiyuguan/人流.png"></span>进馆人数</div>
 
-                  <div class="num">24,352,345</div>
+          <div class="num">24,352,345</div>
 
-                  <!-- <div class="cntTxt">
+          <!-- <div class="cntTxt">
                      <div style="font-size: 30px;font-weight: bold;color: white;">75%</div>
                      <div style="color: #0082FF;font-size: 14px;">人流饱和</div>
                   </div> -->
-                   
-                  <div class="cntTxt">
-                      <canvas id="PvqalmgjxGnTCXyTJMOKLkntpbgRzGND" :width="cWidth" :height="cHeight" class="charts" @click="tap"/>
-                  </div>
-
-
-
-                  <div class="rsType">
-                     <div class="typeItem">
-                       <div>安静</div>
-                       <img style="width: 45%;height: 40%;margin-top: 10%;" src="../../assets/tiyuguan/安静.png" />
-                     </div>
-                     <div class="typeItem">
-                        <div>舒适</div>
-                        <img style="width: 45%;height: 40%;margin-top: 10%;" src="../../assets/tiyuguan/舒适.png" />
-                     </div>
-                     <div class="typeItem">
-                        <div>拥挤</div>
-                        <img style="width: 45%;height: 40%;margin-top: 10%;" src="../../assets/tiyuguan/拥挤.png" />
-                     </div>
-                  </div>
-              </div>
-           </div>
-
 
+          <div class="cntTxt">
+            <canvas
+              id="PvqalmgjxGnTCXyTJMOKLkntpbgRzGND"
+              :width="cWidth"
+              :height="cHeight"
+              class="charts"
+              @click="tap"
+            />
+          </div>
 
-           <div class="right">
-               <div style="width: 45%;height: 45%;border: 1px solid #019ADE;"></div>
-               <div style="width: 45%;height: 45%;border: 1px solid #019ADE;"></div>
-               <div style="width: 45%;height: 45%;border: 1px solid #019ADE;"></div>
-               <div style="width: 45%;height: 45%;border: 1px solid #019ADE;"></div>
-
-               
-           </div>
-
-
-           
+          <div class="rsType">
+            <div class="typeItem">
+              <div>安静</div>
+              <img
+                style="width: 45%; height: 40%; margin-top: 10%"
+                src="../../assets/tiyuguan/安静.png"
+              />
+            </div>
+            <div class="typeItem">
+              <div>舒适</div>
+              <img
+                style="width: 45%; height: 40%; margin-top: 10%"
+                src="../../assets/tiyuguan/舒适.png"
+              />
+            </div>
+            <div class="typeItem">
+              <div>拥挤</div>
+              <img
+                style="width: 45%; height: 40%; margin-top: 10%"
+                src="../../assets/tiyuguan/拥挤.png"
+              />
+            </div>
+          </div>
         </div>
+      </div>
 
-        
+      <div class="right">
+        <div class="item" ></div>
+        <div class="item"></div>
+        <div class="item"></div>
+        <div class="item"></div>
       </div>
-  </template>
+    </div>
+  </div>
+</template>
   
   <script>
-  import uCharts from '../../utils/u-charts';
-  function getH5Offset(e) {
-    e.mp = {
-      changedTouches: []
+import uCharts from "../../utils/u-charts";
+function getH5Offset(e) {
+  e.mp = {
+    changedTouches: [],
+  };
+  e.mp.changedTouches.push({
+    x: e.offsetX,
+    y: e.offsetY,
+  });
+  return e;
+}
+var uChartsInstance = {};
+export default {
+  data() {
+    return {
+      cWidth: 225,
+      cHeight: 150,
+      cWidth1: 550,
+      cHeight1: 250,
     };
-    e.mp.changedTouches.push({
-      x: e.offsetX,
-      y: e.offsetY
-    });
-    return e;
-  }
-  var uChartsInstance = {};
-  export default {
-    data() {
-      return {
-        cWidth: 225,
-        cHeight: 150,
-        cWidth1: 550,
-        cHeight1: 250
-      };
-    },
-    mounted() {
-      this.getServerData();
-      this.getServerData1()
-    },
-    methods: {
-        getServerData1() {
+  },
+  mounted() {
+    this.getServerData();
+    this.getServerData1();
+  },
+  methods: {
+    getServerData1() {
       //模拟从服务器获取数据时的延时
       setTimeout(() => {
         //模拟服务器返回数据，如果数据格式和标准格式不同，需自行按下面的格式拼接
         let res = {
+          categories: ["2018", "2019", "2020", "2021", "2022", "2023"],
+          series: [
+            {
+              name: "成交量A",
+              linearColor: [
+                [0, "#1890FF"],
+                [0.25, "#00B5FF"],
+                [0.5, "#00D1ED"],
+                [0.75, "#00E6BB"],
+                [1, "#90F489"],
+              ],
+              data: [15, 45, 15, 45, 15, 45],
+            },
+            {
+              name: "成交量B",
+              linearColor: [
+                [0, "#91CB74"],
+                [0.25, "#2BDCA8"],
+                [0.5, "#2AE3A0"],
+                [0.75, "#C4D06E"],
+                [1, "#F2D375"],
+              ],
+              data: [55, 85, 55, 85, 55, 85],
+            },
+            {
+              name: "成交量C",
+              linearColor: [
+                [0, "#FAC858"],
+                [0.33, "#FFC371"],
+                [0.66, "#FFC2B2"],
+                [1, "#FA7D8D"],
+              ],
+              data: [95, 125, 95, 125, 95, 125],
+            },
+          ],
+        };
+        let res1 = {
             categories: ["2018","2019","2020","2021","2022","2023"],
             series: [
+              
               {
-                name: "成交量A",
-                linearColor: [
-                  [
-                    0,
-                    "#1890FF"
-                  ],
-                  [
-                    0.25,
-                    "#00B5FF"
-                  ],
-                  [
-                    0.5,
-                    "#00D1ED"
-                  ],
-                  [
-                    0.75,
-                    "#00E6BB"
-                  ],
-                  [
-                    1,
-                    "#90F489"
-                  ]
-                ],
-                data: [15,45,15,45,15,45]
+                name: "山峰图",
+                index: 1,
+                type: "column",
+                data: [40,{"value":30,"color":"#f04864"},55,110,24,58]
               },
               {
-                name: "成交量B",
-                linearColor: [
-                  [
-                    0,
-                    "#91CB74"
-                  ],
-                  [
-                    0.25,
-                    "#2BDCA8"
-                  ],
-                  [
-                    0.5,
-                    "#2AE3A0"
-                  ],
-                  [
-                    0.75,
-                    "#C4D06E"
-                  ],
-                  [
-                    1,
-                    "#F2D375"
-                  ]
-                ],
-                data: [55,85,55,85,55,85]
-              },
-              {
-                name: "成交量C",
-                linearColor: [
-                  [
-                    0,
-                    "#FAC858"
-                  ],
-                  [
-                    0.33,
-                    "#FFC371"
-                  ],
-                  [
-                    0.66,
-                    "#FFC2B2"
-                  ],
-                  [
-                    1,
-                    "#FA7D8D"
-                  ]
-                ],
-                data: [95,125,95,125,95,125]
+                name: "曲线",
+                type: "line",
+                style: "curve",
+                color: "#1890ff",
+                disableLegend: true,
+                data: [40,30,55,110,24,58]
               }
             ]
           };
-        this.drawCharts1('etELhoiEDSDBklnwaLybhInLlmnhnHuv', res);
+        // this.drawCharts1("etELhoiEDSDBklnwaLybhInLlmnhnHuv", res);
+        this.drawCharts2("etELhoiEDSDBklnwaLybhInLlmnhnHuv1", res1);
       }, 50);
     },
-    drawCharts1(id,data){
+    drawCharts1(id, data) {
       const ctx = document.getElementById(id).getContext("2d");
       uChartsInstance[id] = new uCharts({
         type: "line",
@@ -189,14 +182,24 @@
         series: data.series,
         animation: true,
         background: "#FFFFFF",
-        color: ["#1890FF","#91CB74","#FAC858","#EE6666","#73C0DE","#3CA272","#FC8452","#9A60B4","#ea7ccc"],
-        padding: [15,10,0,15],
+        color: [
+          "#1890FF",
+          "#91CB74",
+          "#FAC858",
+          "#EE6666",
+          "#73C0DE",
+          "#3CA272",
+          "#FC8452",
+          "#9A60B4",
+          "#ea7ccc",
+        ],
+        padding: [15, 10, 0, 15],
         dataLabel: false,
         dataPointShape: false,
         enableScroll: false,
         legend: {},
         xAxis: {
-          disableGrid: true
+          disableGrid: true,
         },
         yAxis: {
           gridType: "dash",
@@ -204,186 +207,276 @@
           data: [
             {
               min: 0,
-              max: 150
-            }
-          ]
+              max: 150,
+            },
+          ],
         },
         extra: {
           line: {
             type: "curve",
             width: 2,
             activeType: "hollow",
+            linearType: "custom",
+          },
+        },
+      });
+    },
+    drawCharts2(id, data) {
+      const ctx = document.getElementById(id).getContext("2d");
+      uChartsInstance[id] = new uCharts({
+        type: "mix",
+        context: ctx,
+        width: this.cWidth1,
+        height: this.cHeight1,
+        categories: data.categories,
+        series: data.series,
+        animation: true,
+        background: "#FFFFFF",
+        color: ["#1890FF","#91CB74","#FAC858","#EE6666","#73C0DE","#3CA272","#FC8452","#9A60B4","#ea7ccc"],
+        padding: [15,15,0,15],
+        enableScroll: false,
+        legend: {},
+        xAxis: {
+          disableGrid: true,
+        },
+        yAxis: {
+          disabled: false,
+          disableGrid: false,
+          splitNumber: 5,
+          gridType: "dash",
+          dashLength: 4,
+          gridColor: "#CCCCCC",
+          padding: 10,
+          showTitle: false,
+          data: [
+            {
+              position: "left",
+              title: "",
+              min: 0,
+              max: 200,
+            },
+            {
+              axisLine:false,
+              position: "right",
+              title: "",
+              min: 0,
+              max: 200,
+            },
+            // {
+            //   position: "right",
+            //   min: 0,
+            //   max: 200,
+            //   title: "柱状图",
+            //   textAlign: "left"
+            // },
+            // {
+            //   position: "right",
+            //   min: 0,
+            //   max: 200,
+            //   title: "点",
+            //   textAlign: "left"
+            // }
+          ]
+        },
+        extra: {
+          mount: {
+            type: "triangle",
+            widthRatio: 1,
+            borderWidth: 2,
             linearType: "custom"
+          },
+          mix: {
+            column: {
+              width: 20
+            }
           }
         }
       });
     },
 
-
-
-      getServerData() {
-        //模拟从服务器获取数据时的延时
-        setTimeout(() => {
-          //模拟服务器返回数据
-          let res = {
-              series: [
-                {
-                  name: "一班",
-                  data: 0.75
-                }
-              ]
-            };
-          this.drawCharts('PvqalmgjxGnTCXyTJMOKLkntpbgRzGND', res);
-        }, 50);
-      },
-      drawCharts(id,data){
-        const ctx = document.getElementById(id).getContext("2d");
-        uChartsInstance[id] = new uCharts({
-          type: "arcbar",
-          context: ctx,
-          width: this.cWidth,
-          height: this.cHeight,
-          series: data.series,
-          animation: true,
-          background: "#FFFFFF",
-          color: ["#FFFF00"],
-          padding: undefined,
-          title: {
-            name: "75%",
-            fontSize: 30,
-            color: "#fff",
-            fontWeight: "bold"
-          },
-          subtitle: {
-            name: "人流饱和",
-            fontSize: 12,
-            color: "#0082FF"
+    getServerData() {
+      //模拟从服务器获取数据时的延时
+      setTimeout(() => {
+        //模拟服务器返回数据
+        let res = {
+          series: [
+            {
+              name: "一班",
+              data: 0.75,
+            },
+          ],
+        };
+        this.drawCharts("PvqalmgjxGnTCXyTJMOKLkntpbgRzGND", res);
+      }, 50);
+    },
+    drawCharts(id, data) {
+      const ctx = document.getElementById(id).getContext("2d");
+      uChartsInstance[id] = new uCharts({
+        type: "arcbar",
+        context: ctx,
+        width: this.cWidth,
+        height: this.cHeight,
+        series: data.series,
+        animation: true,
+        background: "#FFFFFF",
+        color: ["#FFFF00"],
+        padding: undefined,
+        title: {
+          name: "75%",
+          fontSize: 30,
+          color: "#fff",
+          fontWeight: "bold",
+        },
+        subtitle: {
+          name: "人流饱和",
+          fontSize: 12,
+          color: "#0082FF",
+        },
+        extra: {
+          arcbar: {
+            type: "circle",
+            width: 10,
+            backgroundColor: "#070A24",
+            startAngle: 1.5,
+            endAngle: 0.25,
+            gap: 2,
           },
-          extra: {
-            arcbar: {
-              type: "circle",
-              width: 10,
-              backgroundColor: "#070A24",
-              startAngle: 1.5,
-              endAngle: 0.25,
-              gap: 2,
-            }
-          }
-        });
-      },
-      tap(e){
-        uChartsInstance[e.target.id].touchLegend(getH5Offset(e));
-        uChartsInstance[e.target.id].showToolTip(getH5Offset(e));
-      },
-      tap1(e){
-        uChartsInstance[e.target.id].touchLegend(getH5Offset(e));
-        uChartsInstance[e.target.id].showToolTip(getH5Offset(e));
-      }
-    }
-  };
-  </script>
+        },
+      });
+    },
+    tap(e) {
+      uChartsInstance[e.target.id].touchLegend(getH5Offset(e));
+      uChartsInstance[e.target.id].showToolTip(getH5Offset(e));
+    },
+    tap1(e) {
+      uChartsInstance[e.target.id].touchLegend(getH5Offset(e));
+      uChartsInstance[e.target.id].showToolTip(getH5Offset(e));
+    },
+  },
+};
+</script>
   
   <style lang="less" scoped>
-    
-    .main{
-        display: flex;
-        justify-content: space-between;
-     .left{
-        width: 30%;
-        height: 75vh;
-        // border: 1px solid red;
-        margin-left: 2%;
-        margin-top: -4%;
-        .tiyuBla{
-            width: 100%;
-            height: 40%;
-            background-image: url('../../assets/tiyuguan/进馆人流标题.png');
-            background-repeat: no-repeat;
-            background-size: 100% 100%;
-            color: white;
-            font-size: 38px;
-            font-weight: bold;
-            position: relative;
-        }
+.main {
+  display: flex;
+  justify-content: space-between;
+  .left {
+    width: 30%;
+    height: 75vh;
+    // border: 1px solid red;
+    margin-left: 2%;
+    margin-top: -4%;
+    .tiyuBla {
+      width: 100%;
+      height: 40%;
+      background-image: url("../../assets/tiyuguan/进馆人流标题.png");
+      background-repeat: no-repeat;
+      background-size: 100% 100%;
+      color: white;
+      font-size: 38px;
+      font-weight: bold;
+      position: relative;
+    }
 
-        .tongji{
-            width: 100%;
-            height: 35%;
-            border: 1px solid #019ADE;
-        }
+    .tongji {
+      width: 100%;
+      height: 35%;
+      border: 1px solid #019ade;
+    }
 
-        .bfb{
-            width: 100%;
-            height: 25%;
-            background-image: url('../../assets/tiyuguan/人流密集度.png');
-            background-repeat: no-repeat;
-            background-size: 100% 100%;
-            position: relative;
-            .renshu{
-               position: absolute;
-               top: 30%;
-               left: 10%;
-               color: #8199BD;
-               font-weight: bold;
-               font-size: 14px;
-            }
-            .num{
-                color: white;
-                font-weight: bold;
-                font-size: 20px;
-                position: absolute;
-                top: 45%;
-                left: 6%;
-            }
-            .cntTxt{
-                width: 20%;
-                height: 60%;
-                // border: 1px solid red;
-                position: absolute;
-                top: -5%;
-                left: 30.5%;
-                text-align: center;
-                padding-top: 2.5%;
-            }
-            .rsType{
-                width: 30%;
-                height: 35%;
-                // border: 1px solid red;
-                position: absolute;
-                top: 30%;
-                right: 4%;
-                display: flex;
-                justify-content: space-between;
-                .typeItem{
-                    width: 30%;
-                    height: 95%;
-                    text-align: center;
-                    color: #687C9E;
-                    font-size: 14px;
-                }
-            }
+    .bfb {
+      width: 100%;
+      height: 25%;
+      background-image: url("../../assets/tiyuguan/人流饱和度.png");
+      background-repeat: no-repeat;
+      background-size: 100% 100%;
+      position: relative;
+      .renshu {
+        span{
+          margin-right: 5px;
+          img{
+            width: 10px;
+            height: 12px;
+          }
         }
-     }
-
-     .right{
-        margin-top: 3%;
-        margin-right: 2%;
-        width: 63%;
-        height: 66vh;
-        border: 1px solid #019ADE;
+        position: absolute;
+        top: 30%;
+        left: 10%;
+        color: #8199bd;
+        font-weight: bold;
+        font-size: 14px;
+      }
+      .num {
+        color: white;
+        font-weight: bold;
+        font-size: 20px;
+        position: absolute;
+        top: 45%;
+        left: 6%;
+      }
+      .cntTxt {
+        width: 20%;
+        height: 60%;
+        // border: 1px solid red;
+        position: absolute;
+        top: -5%;
+        left: 30.5%;
+        text-align: center;
+        padding-top: 2.5%;
+      }
+      .rsType {
+        width: 30%;
+        height: 35%;
+        // border: 1px solid red;
+        position: absolute;
+        top: 30%;
+        right: 4%;
         display: flex;
-        flex-wrap: wrap;
-        align-items: center;
-        justify-content: space-around;
-     }
-
-     .charts{
-      width: 225px;
-      height: 150px;
+        justify-content: space-between;
+        .typeItem {
+          width: 30%;
+          height: 95%;
+          text-align: center;
+          color: #687c9e;
+          font-size: 14px;
+        }
+      }
     }
-    .charts1{
-        width: 550px;
-      height: 250px;
   }
+
+  .right {
+    margin-top: 3%;
+    width: 65%;
+    height: 66vh;
+    // border: 1px solid #019ade;
+    display: flex;
+    flex-wrap: wrap;
+    // align-items: center;
+    align-content: center;
+    justify-content: center;
+    background-image: url("../../assets/tiyuguan/视频大框.png") ;
+    background-size:contain;
+    background-repeat:no-repeat;
+    .item{
+      width: 40%; 
+      height: 40%; 
+      margin-top: 5px;
+      background-image: url("../../assets/tiyuguan/视频小框.png") ;
+      background-size:contain;
+      background-repeat:no-repeat;
+    }
+    .item:nth-child(2),.item:nth-child(4){
+      margin-right: 60px;
     }
-  </style>
\ No newline at end of file
+  }
+
+  .charts {
+    width: 225px;
+    height: 150px;
+  }
+  .charts1 {
+    width: 550px;
+    height: 250px;
+  }
+}
+</style>
\ No newline at end of file
diff --git a/src/components/zongLan/zongLan.vue b/src/components/zongLan/zongLan.vue
index 8bac5cf..6bab628 100644
--- a/src/components/zongLan/zongLan.vue
+++ b/src/components/zongLan/zongLan.vue
@@ -1,387 +1,516 @@
 <template>
-    <div class="hello">
-        
-         
-        <div class="content">
+  <div class="hello">
+    <div class="content">
+      <div class="qushi">
+        <div class="keliu">
+          <div class="keliuTxt">客流趋势</div>
+          <div class="keliuBtn">
+            <div
+              v-for="(item, index) in keliuList"
+              :key="index"
+              class="btnItem"
+              @click="clickQushi(item.unit)"
+              :class="item.unit == selectVal1 ? 'btnItemS' : 'btnItemD'"
+            >
+              <div class="txt">{{ item.unit }}</div>
+            </div>
+          </div>
+        </div>
+
+        <div class="tongjitu"></div>
 
-          <div class="qushi">
-            <div class="keliu">
-              <div class="keliuTxt">客流趋势</div>
-              <div class="keliuBtn">
-                <div v-for="(item, index) in keliuList" :key="index" class="btnItem" @click="clickQushi(item.unit)" :class="item.unit == selectVal1 ? 'btnItemS' : 'btnItemD'">
-                  <div class="txt">{{ item.unit }}</div>
-                </div>
+        <div class="qushiBaifb">
+          <div class="baifbLeft">
+            <div class="baiFbitem">
+              <div style="font-size: 14px">体育场</div>
+              <div
+                style="
+                  color: white;
+                  font-size: 18px;
+                  font-weight: bold;
+                  margin-left: 10%;
+                "
+              >
+                20%
               </div>
+              <img
+                style="width: 10%; height: 60%"
+                src="../../assets/index/体育场图例.png"
+              />
             </div>
-
-            <div class="tongjitu">
-              
+            <div class="baiFbitem">
+              <div style="font-size: 14px">体育馆</div>
+              <div
+                style="
+                  color: white;
+                  font-size: 18px;
+                  font-weight: bold;
+                  margin-left: 10%;
+                "
+              >
+                12%
+              </div>
+              <img
+                style="width: 10%; height: 60%"
+                src="../../assets/index/体育馆图例.png"
+              />
             </div>
-
-            <div class="qushiBaifb">
-               <div class="baifbLeft">
-                <div class="baiFbitem">
-                  <div style="font-size: 14px;">体育场</div>
-                  <div style="color: white;font-size: 18px;font-weight: bold;margin-left: 10%;">20%</div>
-                  <img style="width: 10%;height: 60%;" src="../../assets/index/体育场图例.png" />
-                </div>
-                <div class="baiFbitem">
-                  <div style="font-size: 14px;">体育馆</div>
-                  <div style="color: white;font-size: 18px;font-weight: bold;margin-left: 10%;">12%</div>
-                  <img style="width: 10%;height: 60%;" src="../../assets/index/体育馆图例.png" />
-                </div>
-                <div class="baiFbitem">
-                  <div style="font-size: 14px;">游泳场馆</div>
-                  <div style="color: white;font-size: 18px;font-weight: bold;">12%</div>
-                  <img style="width: 10%;height: 60%;" src="../../assets/index/体育馆图例.png" />
-                </div>
-               </div>
-               <div class="baiFbRight">
-                <div class="baiFbitem">
-                  <img style="width: 10%;height: 60%;" src="../../assets/index/体育场图例.png" />
-                  <div style="color: white;font-size: 18px;font-weight: bold;margin-right: 10%;">20%</div>
-                  <div style="font-size: 14px;">图书馆</div>
-                </div>
-                <div class="baiFbitem">
-                  <img style="width: 10%;height: 60%;" src="../../assets/index/体育馆图例.png" />
-                  <div style="color: white;font-size: 18px;font-weight: bold;margin-right: 10%;">12%</div>
-                  <div style="font-size: 14px;">文化馆</div>
-                </div>
-                <div class="baiFbitem">
-                  <img style="width: 10%;height: 60%;" src="../../assets/index/体育馆图例.png" />
-                  <div style="color: white;font-size: 18px;font-weight: bold;margin-right: 10%;">12%</div>
-                  <div style="font-size: 14px;">博物馆</div>
-                </div>
-               </div>
+            <div class="baiFbitem">
+              <div style="font-size: 14px">游泳场馆</div>
+              <div style="color: white; font-size: 18px; font-weight: bold">
+                12%
+              </div>
+              <img
+                style="width: 10%; height: 60%"
+                src="../../assets/index/体育馆图例.png"
+              />
             </div>
-
-
-            <div class="keliu keliuTu1">
-              <div class="keliuTxt">今日各场馆人数趋势</div>
+          </div>
+          <div class="baiFbRight">
+            <div class="baiFbitem">
+              <img
+                style="width: 10%; height: 60%"
+                src="../../assets/index/体育场图例.png"
+              />
+              <div
+                style="
+                  color: white;
+                  font-size: 18px;
+                  font-weight: bold;
+                  margin-right: 10%;
+                "
+              >
+                20%
+              </div>
+              <div style="font-size: 14px">图书馆</div>
+            </div>
+            <div class="baiFbitem">
+              <img
+                style="width: 10%; height: 60%"
+                src="../../assets/index/体育馆图例.png"
+              />
+              <div
+                style="
+                  color: white;
+                  font-size: 18px;
+                  font-weight: bold;
+                  margin-right: 10%;
+                "
+              >
+                12%
+              </div>
+              <div style="font-size: 14px">文化馆</div>
+            </div>
+            <div class="baiFbitem">
+              <img
+                style="width: 10%; height: 60%"
+                src="../../assets/index/体育馆图例.png"
+              />
+              <div
+                style="
+                  color: white;
+                  font-size: 18px;
+                  font-weight: bold;
+                  margin-right: 10%;
+                "
+              >
+                12%
+              </div>
+              <div style="font-size: 14px">博物馆</div>
             </div>
           </div>
+        </div>
 
-          
+        <div class="keliu keliuTu1">
+          <div class="keliuTxt">今日各场馆人数趋势</div>
+        </div>
+      </div>
 
+      <div class="middle">
+        <div
+          style="
+            position: absolute;
+            color: white;
+            top: 11%;
+            left: 18%;
+            font-weight: bold;
+          "
+        >
+          345,235
+        </div>
+        <div
+          style="
+            position: absolute;
+            color: white;
+            top: 11%;
+            left: 43.5%;
+            font-weight: bold;
+          "
+        >
+          2,345,235
+        </div>
+        <div
+          style="
+            position: absolute;
+            color: white;
+            top: 11%;
+            left: 71%;
+            font-weight: bold;
+          "
+        >
+          2,345万
+        </div>
 
-          <div class="middle">
-            <div style="position: absolute;color: white;top: 11%;left: 18%;font-weight: bold;">345,235</div>
-            <div style="position: absolute;color: white;top: 11%;left: 43.5%;font-weight: bold;">2,345,235</div>
-            <div style="position: absolute;color: white;top: 11%;left: 71%;font-weight: bold;">2,345万</div>
-            
-            <img src="../../assets/index/主体.png" class="aimImg" style="width: 70%;height: 50%;position: absolute;left: 15%;top: 29%;" />
+        <img
+          src="../../assets/index/主体.png"
+          class="aimImg"
+          style="
+            width: 70%;
+            height: 50%;
+            position: absolute;
+            left: 15%;
+            top: 29%;
+          "
+        />
+
+        <div
+          style="
+            position: absolute;
+            color: white;
+            left: 42%;
+            bottom: 15.5%;
+            font-weight: bold;
+          "
+        >
+          年度进馆人数
+        </div>
+        <div
+          style="
+            position: absolute;
+            color: white;
+            left: 39%;
+            bottom: 8%;
+            font-weight: bold;
+            font-size: 24px;
+          "
+        >
+          33,532,890
+        </div>
+      </div>
+
+      <div class="renshu">
+        <div class="keliu">
+          <div class="keliuTxt">各场馆实施实时进馆人数</div>
+          <!-- <div>
+            <canvas
+              id="etELhoiEDSDBklnwaLybhInLlmnhnHuv"
+              :width="cWidth"
+              :height="cHeight"
+              class="charts"
+              @click="tap"
+            />
+          </div> -->
+        </div>
 
+        <div class="renshuItme">
+          <div style="margin-right: 2%" class="renshuChild">
+            <div class="title">体育场</div>
+            <div class="dangq">当前人数</div>
 
-            <div style="position: absolute;color: white;left: 42%;bottom: 15.5%;font-weight: bold;">年度进馆人数</div>
-            <div style="position: absolute;color: white;left: 39%;bottom: 8%;font-weight: bold;font-size: 24px;">33,532,890</div>
+            <div class="number">4,738</div>
+            <div class="bfb">40%</div>
           </div>
+          <div class="renshuChild">
+            <div class="title">图书馆</div>
+            <div class="dangq">当前人数</div>
 
-          <div class="renshu">
-            <div class="keliu">
-              <div class="keliuTxt">各场馆实施实时进馆人数</div>
-            </div>
-            
-            <div class="renshuItme">
-              <div style="margin-right: 2%;" class="renshuChild">
-                <div class="title">体育场</div> 
-                <div class="dangq">当前人数</div>
-                
-                <div class="number">4,738</div>
-                <div class="bfb">40%</div>
-              </div>
-              <div class="renshuChild">
-                <div class="title">图书馆</div> 
-                <div class="dangq">当前人数</div>
-                
-                <div class="number">34,738</div>
-                <div class="bfb">50%</div>
-              </div>
-              <div style="margin-right: 2%;" class="renshuChild">
-                <div class="title">体育馆</div> 
-                <div class="dangq">当前人数</div>
-                
-                <div class="number">899,738</div>
-                <div class="bfb">80%</div>
-              </div>
-              <div class="renshuChild">
-                <div class="title">文化馆</div> 
-                <div class="dangq">当前人数</div>
-                
-                <div class="number">240</div>
-                <div class="bfb">25%</div>
-              </div>
-              <div style="margin-right: 2%;" class="renshuChild">
-                <div class="title">游泳场馆</div> 
-                <div class="dangq">当前人数</div>
-                
-                <div class="number">33,738</div>
-                <div class="bfb">75%</div>
-              </div>
-              <div class="renshuChild">
-                <div class="title">博物馆</div> 
-                <div class="dangq">当前人数</div>
-                
-                <div class="number">4,738</div>
-                <div class="bfb">40%</div>
-              </div>
-            </div>
+            <div class="number">34,738</div>
+            <div class="bfb">50%</div>
           </div>
-        </div>
-        
-        
+          <div style="margin-right: 2%" class="renshuChild">
+            <div class="title">体育馆</div>
+            <div class="dangq">当前人数</div>
+
+            <div class="number">899,738</div>
+            <div class="bfb">80%</div>
+          </div>
+          <div class="renshuChild">
+            <div class="title">文化馆</div>
+            <div class="dangq">当前人数</div>
+
+            <div class="number">240</div>
+            <div class="bfb">25%</div>
+          </div>
+          <div style="margin-right: 2%" class="renshuChild">
+            <div class="title">游泳场馆</div>
+            <div class="dangq">当前人数</div>
+
+            <div class="number">33,738</div>
+            <div class="bfb">75%</div>
+          </div>
+          <div class="renshuChild">
+            <div class="title">博物馆</div>
+            <div class="dangq">当前人数</div>
 
+            <div class="number">4,738</div>
+            <div class="bfb">40%</div>
+          </div>
+        </div>
       </div>
-  </template>
+    </div>
+  </div>
+</template>
   
   <script>
-  export default {
-    data () {
-      return {
-        msg: 'Welcome to Your Vue.js App',
-        selectVal: 1,
-        keliuList: [
-          {
-            unit: '年'
-          },
-          {
-            unit: '月'
-          },
-          {
-            unit: '日'
-          }
-        ],
-        selectVal1: '年'
 
-      }
+var uChartsInstance = {};
+export default {
+  data() {
+    return {
+      msg: "Welcome to Your Vue.js App",
+      selectVal: 1,
+      keliuList: [
+        {
+          unit: "年",
+        },
+        {
+          unit: "月",
+        },
+        {
+          unit: "日",
+        },
+      ],
+      selectVal1: "年",
+      
+    };
+  },
+  methods: {
+    
+    clickItme(val) {
+      this.selectVal = val;
     },
-    methods: {
-      clickItme(val){
-        this.selectVal = val
-      },
-      clickQushi(val){
-        this.selectVal1 = val
-      }
-    }
-  }
-  </script>
+    clickQushi(val) {
+      this.selectVal1 = val;
+    },
+  },
+};
+</script>
   
   <style lang="less" scoped>
-      .content{
-        height: auto;
-        width: 100%;
-        margin-top: -3%;
+.content {
+  height: auto;
+  width: 100%;
+  margin-top: -3%;
+  display: flex;
+  justify-content: space-between;
+  // border: 1px solid red;
+  .qushi {
+    width: 32%;
+    // border: 1px solid red;
+    margin-left: 1%;
+    .keliu {
+      width: 100%;
+      height: 8vh;
+      background-image: url(../../assets/index/左1标题.png);
+      background-repeat: no-repeat;
+      background-size: 100% 100%;
+      position: relative;
+      .keliuTxt {
+        position: absolute;
+        left: 28%;
+        top: 25%;
+        color: white;
+        font-size: 18px;
+        color: #b5b7c5;
+        font-weight: bold;
+      }
+      .keliuBtn {
+        width: 20%;
+        height: 50%;
+        // border: 1px solid red;
+        position: absolute;
+        right: 0;
+        bottom: 15%;
         display: flex;
         justify-content: space-between;
-        // border: 1px solid red;  
-        .qushi{
-          width: 32%;
-          // border: 1px solid red;
-          margin-left: 1%;
-          .keliu{
-            width: 100%;
-            height: 8vh;
-            background-image: url(../../assets/index/左1标题.png);
-            background-repeat: no-repeat;
-            background-size: 100% 100%;
-            position: relative;
-            .keliuTxt{
-              position: absolute;
-              left: 28%;
-              top: 25%;
-              color: white;
-              font-size: 18px;
-              color: #B5B7C5;
-              font-weight: bold;
-            }
-            .keliuBtn{
-              width: 20%;
-              height: 50%;
-              // border: 1px solid red;
-              position: absolute;
-              right: 0;
-              bottom: 15%;
-              display: flex;
-              justify-content: space-between;
-              // align-items: center;
-              .btnItemD{
-                color: #006BFF;
-                background-image: url('../../assets/index/年月日1.png');
-              }
-              .btnItemS{
-                color: white;
-                background-image: url('../../assets/index/年月日2.png');
-              }
-              .btnItem{
-                cursor:pointer;
-                width: 30%;
-                height: 95%;
-                background-repeat: no-repeat;
-                background-size: 100% 100%;
-                text-align: center;
-                line-height: 200%;
-                display: flex;
-                flex-direction: column;
-                justify-content: center;
-              }
-            }
-          }
-          .keliuTu1{
-            background-image: url('../../assets/index/左2标题.png');
-          }
-          .tongjitu{
-            width: 100%;
-            height: 16vh;
-            // border: 1px solid red;
-          }
-          .qushiBaifb{
-            width: 100%;
-            height: 30vh;
-            // border: 1px solid red;
-            background-image: url('../../assets/index/左1-2背景.png');
-            background-repeat: no-repeat;
-            background-size: 100% 100%;
-            position: relative;
-            display: flex;
-            align-items: center;
-            justify-content: space-between;
-            .baifbLeft{
-              width: 25%;
-              height: 30%;
-              // border: 1px solid red;
-              .baiFbitem{
-                width: 100%;
-                height: 30%;
-                color: #0096FF;
-                // border: 1px solid red;
-                display: flex;
-                align-items: center;
-                justify-content: space-between;
-              }
-            }
-            .baiFbRight{
-              width: 25%;
-              height: 30%;
-              // border: 1px solid red;
-              .baiFbitem{
-                width: 100%;
-                height: 30%;
-                color: #0096FF;
-                // border: 1px solid red;
-                display: flex;
-                align-items: center;
-                justify-content: space-between;
-              }
-            }
-          }
+        // align-items: center;
+        .btnItemD {
+          color: #006bff;
+          background-image: url("../../assets/index/年月日1.png");
         }
-
-        .middle{
+        .btnItemS {
+          color: white;
+          background-image: url("../../assets/index/年月日2.png");
+        }
+        .btnItem {
+          cursor: pointer;
           width: 30%;
-          height: 70vh;
-          background-image: url('../../assets/index/中间数据.png');
+          height: 95%;
           background-repeat: no-repeat;
           background-size: 100% 100%;
-          margin-top: 4%;
-          position: relative;
-          .aimImg{
-            animation: firstdiv 2s linear 2s infinite alternate;
-          }
-          @keyframes firstdiv{
-              0%{
-                  opacity: 1;
-                  margin-top: 0%;
-              }
-              25%{
-                  opacity: 0.7;
-                  margin-top: 3%;
-              }
-              50%{
-                  opacity: 0.5;
-                  margin-top: 5%;
-              }
-              75%{
-                  opacity: 0.7;
-                  margin-top: 3%;
-              }
-              100%{
-                  opacity: 1;
-                  margin-top: 0%;
-              }
-            }
+          text-align: center;
+          line-height: 200%;
+          display: flex;
+          flex-direction: column;
+          justify-content: center;
         }
-        
-        .renshu{
-          width: 32%;
-          // height: 50vh;
-          margin-right: 1%;
+      }
+    }
+    .keliuTu1 {
+      background-image: url("../../assets/index/左2标题.png");
+    }
+    .tongjitu {
+      width: 100%;
+      height: 16vh;
+      // border: 1px solid red;
+    }
+    .qushiBaifb {
+      width: 100%;
+      height: 30vh;
+      // border: 1px solid red;
+      background-image: url("../../assets/index/左1-2背景.png");
+      background-repeat: no-repeat;
+      background-size: 100% 100%;
+      position: relative;
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+      .baifbLeft {
+        width: 25%;
+        height: 30%;
+        // border: 1px solid red;
+        .baiFbitem {
+          width: 100%;
+          height: 30%;
+          color: #0096ff;
           // border: 1px solid red;
-          .keliu{
-            width: 100%;
-            height: 8vh;
-            background-image: url(../../assets/index/右1标题.png);
-            background-repeat: no-repeat;
-            background-size: 100% 100%;
-            position: relative;
-            .keliuTxt{
-              position: absolute;
-              right: 28%;
-              top: 25%;
-              color: white;
-              font-size: 18px;
-              color: #B5B7C5;
-              font-weight: bold;
-            }
-          }
-          
-          .renshuItme{
-              width: 100%;
-              height: auto;
-              display: flex;
-              flex-wrap: wrap;
-              .renshuChild{
-                width: 45%;
-                height: 23vh;
-                background-image: url('../../assets/index/右1数据.png');
-                background-repeat: no-repeat;
-                background-size: 100% 100%;
-                margin-bottom: 2%;
-                position: relative;
-                .title{
-                  color: #0095FF;
-                  font-weight: bold;
-                  position: absolute;
-                  top: 19%;
-                  right: 10%;
-                  font-size: 14px;
-                }
-                .dangq{
-                  position: absolute;
-                  top: 31.5%;
-                  left: 20%;
-                  color: white;
-                  font-weight: bold;
-                  font-size: 14px;
-                }
-                .number{
-                  color: white;
-                  position: absolute;
-                  font-size: 22px;
-                  font-weight: bold;
-                  bottom: 18%;
-                  left: 10%;
-                }
-                .bfb{
-                  position: absolute;
-                  bottom: 18%;
-                  right: 15%;
-                  color: #00D7FF;
-                  font-weight: bold;
-                }
-              }
-            }
+          display: flex;
+          align-items: center;
+          justify-content: space-between;
+        }
+      }
+      .baiFbRight {
+        width: 25%;
+        height: 30%;
+        // border: 1px solid red;
+        .baiFbitem {
+          width: 100%;
+          height: 30%;
+          color: #0096ff;
+          // border: 1px solid red;
+          display: flex;
+          align-items: center;
+          justify-content: space-between;
+        }
+      }
+    }
+  }
 
+  .middle {
+    width: 30%;
+    height: 70vh;
+    background-image: url("../../assets/index/中间数据.png");
+    background-repeat: no-repeat;
+    background-size: 100% 100%;
+    margin-top: 4%;
+    position: relative;
+    .aimImg {
+      animation: firstdiv 2s linear 2s infinite alternate;
+    }
+    @keyframes firstdiv {
+      0% {
+        opacity: 1;
+        margin-top: 0%;
+      }
+      25% {
+        opacity: 0.7;
+        margin-top: 3%;
+      }
+      50% {
+        opacity: 0.5;
+        margin-top: 5%;
+      }
+      75% {
+        opacity: 0.7;
+        margin-top: 3%;
+      }
+      100% {
+        opacity: 1;
+        margin-top: 0%;
+      }
+    }
+  }
+
+  .renshu {
+    width: 32%;
+    // height: 50vh;
+    margin-right: 1%;
+    // border: 1px solid red;
+    .keliu {
+      width: 100%;
+      height: 8vh;
+      background-image: url(../../assets/index/右1标题.png);
+      background-repeat: no-repeat;
+      background-size: 100% 100%;
+      position: relative;
+      .keliuTxt {
+        position: absolute;
+        right: 28%;
+        top: 25%;
+        color: white;
+        font-size: 18px;
+        color: #b5b7c5;
+        font-weight: bold;
+      }
+    }
+
+    .renshuItme {
+      width: 100%;
+      height: auto;
+      display: flex;
+      flex-wrap: wrap;
+      .renshuChild {
+        width: 45%;
+        height: 23vh;
+        background-image: url("../../assets/index/右1数据.png");
+        background-repeat: no-repeat;
+        background-size: 100% 100%;
+        margin-bottom: 2%;
+        position: relative;
+        .title {
+          color: #0095ff;
+          font-weight: bold;
+          position: absolute;
+          top: 19%;
+          right: 10%;
+          font-size: 14px;
+        }
+        .dangq {
+          position: absolute;
+          top: 31.5%;
+          left: 20%;
+          color: white;
+          font-weight: bold;
+          font-size: 14px;
+        }
+        .number {
+          color: white;
+          position: absolute;
+          font-size: 22px;
+          font-weight: bold;
+          bottom: 18%;
+          left: 10%;
+        }
+        .bfb {
+          position: absolute;
+          bottom: 18%;
+          right: 15%;
+          color: #00d7ff;
+          font-weight: bold;
         }
       }
-    
-  </style>
+    }
+  }
+}
+</style>
   
\ No newline at end of file
diff --git a/src/router/index.js b/src/router/index.js
index 5c460db..577e000 100644
--- a/src/router/index.js
+++ b/src/router/index.js
@@ -4,6 +4,8 @@ import HelloWorld from '@/components/HelloWorld'
 import index from '@/components/index'
 import zongLan from '@/components/zongLan/zongLan'
 import tiyuchang from '@/components/tiyuchang/tiyuchang'
+import stadium from '@/components/stadium/stadium'
+import library from '@/components/library/index'
 
 Vue.use(Router)
 
@@ -13,7 +15,7 @@ export default new Router({
       path: '/',
       name: 'index',
       component: index,
-      children:[
+      children: [
         {
           path: '/zongLan/zongLan',
           name: "zongLan",
@@ -23,6 +25,16 @@ export default new Router({
           path: '/tiyuchang/tiyuchang',
           name: "tiyuchang",
           component: tiyuchang
+        },
+        {
+          path: '/stadium/stadium',
+          name: "stadium",
+          component: stadium
+        },
+        {
+          path: '/library/library',
+          name: "library",
+          component: library
         }
       ]
     },
@@ -31,6 +43,6 @@ export default new Router({
       name: 'HelloWorld',
       component: HelloWorld
     }
-    
+
   ]
 })