diff --git a/src/App.vue b/src/App.vue
index 1c8a32f..a6a6bd5 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -1,6 +1,24 @@
 <template>
   <div id="app">
-    <router-view />
+    <dv-full-screen-container class="btgym">
+      <!-- 顶部信息 -->
+      <div class="topnav">
+        <div class="toptxt">
+            <div style="margin-left: 2%;" class="topTitle">累计进馆人数：3,435,123万人</div>
+            <img class="topImg" src="@/assets/index/top_title.png"/>
+            <div style="margin-right: 2%;" class="topTitle">星期四 16:33:33 天气：晴</div>
+        </div>
+        <div class="links">
+          <router-link to="/ty">体育</router-link>
+          <router-link to="/">概览</router-link>
+          <router-link to="/cultrue">文化</router-link>
+        </div>
+      </div>
+
+      <router-view />
+      <!-- 底部信息 -->
+      <div class="footer"></div>
+    </dv-full-screen-container>
   </div>
 </template>
 
@@ -13,4 +31,52 @@ body {
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
 }
+// 基类
+.btgym {
+  width: 100vw;
+  height: 100vh;
+  position: relative;
+  background-image: url("assets/g_bg.jpg");
+  background-size: 100%;
+  background-repeat:no-repeat ;
+
+  .topnav{
+    width: 100%;
+    height: 20%;
+    background-image: url('assets/index/topnav.png');
+    background-size: 100% 100%;
+    background-repeat: no-repeat;
+    position: relative;
+
+    .toptxt{
+      display: flex;
+      justify-content: space-between;
+
+      .topImg{
+          margin-top: 1%;
+          width: 35%;
+          height: 15%;
+        }
+        .topTitle{
+          margin-top: 1%;
+          color: #00C6FF;
+          font-size: 14px;
+          font-weight: bold;
+        }
+    }
+
+
+  }
+
+  .footer {
+    // width: 100%;
+    height: 120vh;
+    background-image: url("assets/g_footbg.png");
+    background-repeat: no-repeat;
+    background-size: 100% 100%;
+    position: absolute;
+    bottom: 0;
+    left: 0;
+  }
+}
 </style>
diff --git a/src/assets/g_bg.jpg b/src/assets/g_bg.jpg
new file mode 100644
index 0000000..c878f51
Binary files /dev/null and b/src/assets/g_bg.jpg differ
diff --git a/src/assets/g_footbg.png b/src/assets/g_footbg.png
new file mode 100644
index 0000000..e402cda
Binary files /dev/null and b/src/assets/g_footbg.png differ
diff --git a/src/assets/less/dashboard.less b/src/assets/less/dashboard.less
index 4302af1..7b281cd 100644
--- a/src/assets/less/dashboard.less
+++ b/src/assets/less/dashboard.less
@@ -1,4 +1,6 @@
-
+.bg{
+    background-image: url("../index/bg.jpg");
+}
 .content {
     height: auto;
     width: 100%;
diff --git a/src/components/btgym/Btbuttom.vue b/src/components/btgym/Btbuttom.vue
new file mode 100644
index 0000000..b5b1d66
--- /dev/null
+++ b/src/components/btgym/Btbuttom.vue
@@ -0,0 +1,3 @@
+<template>
+    <div class="buttom"></div>
+</template>
\ No newline at end of file
diff --git a/src/components/btgym/Topnav.vue b/src/components/btgym/Topnav.vue
new file mode 100644
index 0000000..bab9d32
--- /dev/null
+++ b/src/components/btgym/Topnav.vue
@@ -0,0 +1,5 @@
+<template>
+    <div class="topnav">
+        顶部信息
+    </div>
+</template>
\ No newline at end of file
diff --git a/src/views/bottomLeft.vue b/src/views/bottomLeft.vue
deleted file mode 100644
index e4fd862..0000000
--- a/src/views/bottomLeft.vue
+++ /dev/null
@@ -1,55 +0,0 @@
-<template>
-  <div id="bottomLeft">
-    <div class="bg-color-black">
-      <div class="d-flex pt-2 pl-2">
-        <span style="color:#5cd9e8">
-          <icon name="chart-bar"></icon>
-        </span>
-        <div class="d-flex">
-          <span class="fs-xl text mx-2">数据统计图</span>
-        </div>
-      </div>
-      <div>
-        <bottomLeftChart />
-      </div>
-    </div>
-  </div>
-</template>
-
-<script>
-import bottomLeftChart from "@/components/echart/bottom/bottomLeftChart";
-export default {
-  data() {
-    return {};
-  },
-  components: {
-    bottomLeftChart
-  },
-  mounted() {},
-  methods: {}
-};
-</script>
-
-<style lang="scss">
-#bottomLeft {
-  padding: 0.3rem 0.2rem;
-  height: 6.5rem;
-  min-width: 3.75rem;
-  border-radius: 0.0625rem;
-  .bg-color-black {
-    height: 6.0625rem;
-    border-radius: 0.125rem;
-  }
-  .text {
-    color: #c3cbde;
-  }
-  .chart-box {
-    margin-top: 0.2rem;
-    width: 2.125rem;
-    height: 2.125rem;
-    .active-ring-name {
-      padding-top: 0.125rem;
-    }
-  }
-}
-</style>
\ No newline at end of file
diff --git a/src/views/bottomRight.vue b/src/views/bottomRight.vue
deleted file mode 100644
index 30d7395..0000000
--- a/src/views/bottomRight.vue
+++ /dev/null
@@ -1,62 +0,0 @@
-<template>
-  <div id="bottomRight">
-    <div class="bg-color-black">
-      <div class="d-flex pt-2 pl-2">
-        <span style="color:#5cd9e8">
-          <icon name="chart-area"></icon>
-        </span>
-        <div class="d-flex">
-          <span class="fs-xl text mx-2">工单修复以及满意度统计图</span>
-          <div class="decoration2">
-            <dv-decoration-2 :reverse="true" style="width:5px;height:480px;" />
-          </div>
-        </div>
-      </div>
-      <div>
-        <bottomRightChart />
-      </div>
-    </div>
-  </div>
-</template>
-
-<script>
-import bottomRightChart from "@/components/echart/bottom/bottomRightChart";
-export default {
-  data() {
-    return {};
-  },
-  components: {
-    bottomRightChart
-  },
-  mounted() {},
-  methods: {}
-};
-</script>
-
-<style lang="scss">
-#bottomRight {
-  padding: 0.2rem 0.2rem 0;
-  height: 6.5rem;
-  min-width: 3.75rem;
-  border-radius: 0.0625rem;
-  .bg-color-black {
-    height: 6.1875rem;
-    border-radius: 0.125rem;
-  }
-  .text {
-    color: #c3cbde;
-  } //下滑线动态
-  .decoration2 {
-    position: absolute;
-    right: 0.125rem;
-  }
-  .chart-box {
-    margin-top: 0.2rem;
-    width: 2.125rem;
-    height: 2.125rem;
-    .active-ring-name {
-      padding-top: 0.125rem;
-    }
-  }
-}
-</style>
\ No newline at end of file
diff --git a/src/views/center.vue b/src/views/center.vue
deleted file mode 100644
index 6d2d841..0000000
--- a/src/views/center.vue
+++ /dev/null
@@ -1,228 +0,0 @@
-<template>
-  <div id="center">
-    <div class="up">
-      <div class="bg-color-black item" v-for="item in titleItem" :key="item.title">
-        <p class="ml-3 colorBlue fw-b">{{item.title}}</p>
-        <div>
-          <dv-digital-flop :config="item.number" style="width:1.25rem;height:.625rem;" />
-        </div>
-      </div>
-    </div>
-    <div class="down">
-      <div class="ranking bg-color-black">
-        <span style="color:#5cd9e8">
-          <icon name="align-left"></icon>
-        </span>
-        <span class="fs-xl text mx-2 mb-1">年度负责人组件达标榜</span>
-        <dv-scroll-ranking-board :config="ranking" style="height:2.75rem" />
-      </div>
-      <div class="percent">
-        <div class="item bg-color-black">
-          <span>今日任务通过率</span>
-          <centerChart :id="rate[0].id" :tips="rate[0].tips" :colorObj="rate[0].colorData" />
-        </div>
-        <div class="item bg-color-black">
-          <span>今日任务达标率</span>
-          <centerChart :id="rate[1].id" :tips="rate[1].tips" :colorObj="rate[1].colorData" />
-        </div>
-        <div class="water">
-          <dv-water-level-pond :config="water" style="height: 1.5rem" />
-        </div>
-      </div>
-    </div>
-  </div>
-</template>
-
-<script>
-import centerChart from "@/components/echart/center/centerChartRate";
-
-export default {
-  data() {
-    return {
-      titleItem: [
-        {
-          title: "今年累计任务建次数",
-          number: {
-            number: [120],
-            toFixed: 1,
-            content: "{nt}"
-          }
-        },
-        {
-          title: "本月累计任务次数",
-          number: {
-            number: [18],
-            toFixed: 1,
-            content: "{nt}"
-          }
-        },
-        {
-          title: "今日累计任务次数",
-          number: {
-            number: [2],
-            toFixed: 1,
-            content: "{nt}"
-          }
-        },
-        {
-          title: "今年失败任务次数",
-          number: {
-            number: [14],
-            toFixed: 1,
-            content: "{nt}"
-          }
-        },
-        {
-          title: "今年成功任务次数",
-          number: {
-            number: [106],
-            toFixed: 1,
-            content: "{nt}"
-          }
-        },
-        {
-          title: "今年达标任务个数",
-          number: {
-            number: [100],
-            toFixed: 1,
-            content: "{nt}"
-          }
-        }
-      ],
-      ranking: {
-        data: [
-          {
-            name: "周口",
-            value: 55
-          },
-          {
-            name: "南阳",
-            value: 120
-          },
-          {
-            name: "西峡",
-            value: 78
-          },
-          {
-            name: "驻马店",
-            value: 66
-          },
-          {
-            name: "新乡",
-            value: 80
-          },
-          {
-            name: "新乡",
-            value: 80
-          },
-          {
-            name: "新乡",
-            value: 80
-          },
-          {
-            name: "新乡",
-            value: 80
-          }
-        ],
-        waitTime: 4000,
-        carousel: "page",
-        unit: "份"
-      },
-      water: {
-        data: [24, 45],
-        shape: "roundRect",
-        formatter: "{value}%",
-        waveNum: 3
-      },
-      // 通过率和达标率的组件复用数据
-      rate: [
-        {
-          id: "centerRate1",
-          tips: 60,
-          colorData: {
-            textStyle: "#3fc0fb",
-            series: {
-              color: ["#00bcd44a", "transparent"],
-              dataColor: {
-                normal: "#03a9f4",
-                shadowColor: "#97e2f5"
-              }
-            }
-          }
-        },
-        {
-          id: "centerRate2",
-          tips: 40,
-          colorData: {
-            textStyle: "#67e0e3",
-            series: {
-              color: ["#faf3a378", "transparent"],
-              dataColor: {
-                normal: "#ff9800",
-                shadowColor: "#fcebad"
-              }
-            }
-          }
-        }
-      ]
-    };
-  },
-  components: {
-    centerChart
-    // centerChart1,
-    // centerChart2
-  }
-};
-</script>
-
-<style lang="scss" scoped>
-#center {
-  display: flex;
-  flex-direction: column;
-  .up {
-    width: 100%;
-    display: flex;
-    flex-wrap: wrap;
-    justify-content: space-around;
-    .item {
-      border-radius: 0.0625rem;
-      padding-top: 0.2rem;
-      margin-top: 0.1rem;
-      width: 32%;
-      height: 0.875rem;
-    }
-  }
-  .down {
-    padding: 0.07rem 0.05rem;
-    padding-bottom: 0;
-    width: 100%;
-    display: flex;
-    height: 3.1875rem;
-    justify-content: space-between;
-    .bg-color-black {
-      border-radius: 0.0625rem;
-    }
-    .ranking {
-      padding: 0.125rem;
-      width: 59%;
-    }
-    .percent {
-      width: 40%;
-      display: flex;
-      flex-wrap: wrap;
-      .item {
-        width: 50%;
-        height: 1.5rem;
-        span {
-          margin-top: 0.0875rem;
-          display: flex;
-          justify-content: center;
-        }
-      }
-      .water {
-        width: 100%;
-      }
-    }
-  }
-}
-</style>
\ No newline at end of file
diff --git a/src/views/centerLeft1.vue b/src/views/centerLeft1.vue
deleted file mode 100644
index c0c105e..0000000
--- a/src/views/centerLeft1.vue
+++ /dev/null
@@ -1,166 +0,0 @@
-<template>
-  <div id="centreLeft1">
-    <div class="bg-color-black">
-      <div class="d-flex pt-2 pl-2">
-        <span style="color:#5cd9e8">
-          <icon name="chart-bar"></icon>
-        </span>
-        <div class="d-flex">
-          <span class="fs-xl text mx-2">任务通过率</span>
-          <dv-decoration-3 style="width:1.25rem;height:.25rem; position:relative;top:-.0375rem;" />
-        </div>
-      </div>
-      <div class="d-flex jc-center">
-        <centreLeft1Chart />
-      </div>
-      <!-- 4个主要的数据 -->
-      <div class="bottom-data">
-        <div class="item-box" v-for="(item,index) in numberData" :key="index">
-          <div class="d-flex">
-            <span class="coin">￥</span>
-            <dv-digital-flop :config="item.number" style="width:2.5rem;height:.625rem;" />
-          </div>
-          <p class="text" style="text-align: center;">
-            {{item.text}}
-            <span class="colorYellow">(件)</span>
-          </p>
-        </div>
-      </div>
-    </div>
-  </div>
-</template>
-
-<script>
-import centreLeft1Chart from "@/components/echart/centerLeft2/centreLeft1Chart";
-export default {
-  data() {
-    return {
-      config: {
-        lineWidth: 30,
-        activeRadius: "80%",
-        radius: "75%",
-        activeTimeGap: 2000,
-        data: [
-          {
-            name: "周口",
-            value: 55
-          },
-          {
-            name: "南阳",
-            value: 120
-          },
-          {
-            name: "西峡",
-            value: 78
-          },
-          {
-            name: "驻马店",
-            value: 66
-          },
-          {
-            name: "新乡",
-            value: 80
-          }
-        ]
-      },
-      numberData: [
-        {
-          number: {
-            number: [15],
-            toFixed: 1,
-            content: "{nt}"
-          },
-          text: "今日构建总量"
-        },
-        {
-          number: {
-            number: [1144],
-            toFixed: 1,
-            content: "{nt}"
-          },
-          text: "总共完成数量"
-        },
-        {
-          number: {
-            number: [361],
-            toFixed: 1,
-            content: "{nt}"
-          },
-          text: "正在编译数量"
-        },
-        {
-          number: {
-            number: [157],
-            toFixed: 1,
-            content: "{nt}"
-          },
-          text: "未通过数量"
-        }
-      ]
-    };
-  },
-  components: {
-    centreLeft1Chart
-  },
-  mounted() {
-    this.changeTiming();
-  },
-  methods: {
-    changeTiming() {
-      setInterval(() => {
-        this.changeNumber();
-      }, 3000);
-    },
-    changeNumber() {
-      this.numberData.forEach((item, index) => {
-        item.number.number[0] += ++index;
-        item.number = { ...item.number };
-      });
-    }
-  }
-};
-</script>
-
-<style lang="scss">
-#centreLeft1 {
-  padding: 0.2rem;
-  height: 5.125rem;
-  min-width: 3.75rem;
-  border-radius: 0.0625rem;
-  .bg-color-black {
-    height: 4.8125rem;
-    border-radius: 0.125rem;
-  }
-  .text {
-    color: #c3cbde;
-  }
-  .chart-box {
-    margin-top: 0.2rem;
-    width: 2.125rem;
-    height: 2.125rem;
-    .active-ring-name {
-      padding-top: 0.125rem;
-    }
-  }
-
-  .bottom-data {
-    .item-box {
-      float: right;
-      position: relative;
-      width: 50%;
-      color: #d3d6dd;
-      // 金币
-      .coin {
-        position: absolute;
-        left: 0.1rem;
-        top: 0.2125rem;
-        font-size: 0.25rem;
-        color: #ffc107;
-      }
-      .colorYellow {
-        color: yellowgreen;
-      }
-    }
-  }
-}
-</style>
\ No newline at end of file
diff --git a/src/views/centerLeft2.vue b/src/views/centerLeft2.vue
deleted file mode 100644
index 6a5cf98..0000000
--- a/src/views/centerLeft2.vue
+++ /dev/null
@@ -1,56 +0,0 @@
-<template>
-  <div id="centreLeft1">
-    <div class="bg-color-black">
-      <div class="d-flex pt-2 pl-2">
-        <span style="color:#5cd9e8">
-          <icon name="chart-pie"></icon>
-        </span>
-        <div class="d-flex">
-          <span class="fs-xl text mx-2">数据情况雷达图</span>
-          <dv-decoration-1 style="width:1.25rem;height:.25rem; position:relative;top:-.0375rem;" />
-        </div>
-      </div>
-      <div class="d-flex jc-center">
-        <centreLeft2Chart />
-      </div>
-    </div>
-  </div>
-</template>
-
-<script>
-import centreLeft2Chart from "@/components/echart/centerLeft2/centreLeft2Chart";
-export default {
-  data() {
-    return {};
-  },
-  components: {
-    centreLeft2Chart
-  },
-  mounted() {},
-  methods: {}
-};
-</script>
-
-<style lang="scss">
-#centreLeft1 {
-  padding: 0.2rem;
-  height: 5.125rem;
-  min-width: 3.75rem;
-  border-radius: 0.0625rem;
-  .bg-color-black {
-    height: 4.8125rem;
-    border-radius: 0.125rem;
-  }
-  .text {
-    color: #c3cbde;
-  }
-  .chart-box {
-    margin-top: 0.2rem;
-    width: 2.125rem;
-    height: 2.125rem;
-    .active-ring-name {
-      padding-top: 0.125rem;
-    }
-  }
-}
-</style>
\ No newline at end of file
diff --git a/src/views/centerRight1.vue b/src/views/centerRight1.vue
deleted file mode 100644
index ce07455..0000000
--- a/src/views/centerRight1.vue
+++ /dev/null
@@ -1,72 +0,0 @@
-<template>
-  <div id="centreRight1">
-    <div class="bg-color-black">
-      <div class="d-flex pt-2 pl-2">
-        <span style="color:#5cd9e8">
-          <icon name="chart-line"></icon>
-        </span>
-        <div class="d-flex">
-          <span class="fs-xl text mx-2">任务完成排行榜</span>
-        </div>
-      </div>
-      <div class="d-flex jc-center body-box">
-        <dv-scroll-board :config="config" style="width:3.375rem;height:4.28rem" />
-      </div>
-    </div>
-  </div>
-</template>
-
-<script>
-export default {
-  data() {
-    return {
-      config: {
-        header: ["组件", "分支", "覆盖率"],
-        data: [
-          ["组件1", "dev-1", "<span  class='colorGrass'>↑75%</span>"],
-          ["组件2", "dev-2", "<span  class='colorRed'>↓33%</span>"],
-          ["组件3", "dev-3", "<span  class='colorGrass'>↑100%</span>"],
-          ["组件4", "rea-1", "<span  class='colorGrass'>↑94%</span>"],
-          ["组件5", "rea-2", "<span  class='colorGrass'>↑95%</span>"],
-          ["组件6", "fix-2", "<span  class='colorGrass'>↑63%</span>"],
-          ["组件7", "fix-4", "<span  class='colorGrass'>↑84%</span>"],
-          ["组件8", "fix-7", "<span  class='colorRed'>↓46%</span>"],
-          ["组件9", "dev-2", "<span  class='colorRed'>↓13%</span>"],
-          ["组件10", "dev-9", "<span  class='colorGrass'>↑76%</span>"]
-        ],
-        rowNum: 7, //表格行数
-        headerHeight: 35,
-        headerBGC: "#0f1325", //表头
-        oddRowBGC: "#0f1325", //奇数行
-        evenRowBGC: "#171c33", //偶数行
-        index: true,
-        columnWidth: [50],
-        align: ["center"]
-      }
-    };
-  },
-  components: {},
-  mounted() {},
-  methods: {}
-};
-</script>
-
-<style lang="scss">
-#centreRight1 {
-  padding: 0.2rem;
-  height: 5.125rem;
-  min-width: 3.75rem;
-  border-radius: 0.0625rem;
-  .bg-color-black {
-    height: 4.8125rem;
-    border-radius: 0.125rem;
-  }
-  .text {
-    color: #c3cbde;
-  }
-  .body-box {
-    border-radius: 0.125rem;
-    overflow: hidden;
-  }
-}
-</style>
\ No newline at end of file
diff --git a/src/views/centerRight2.vue b/src/views/centerRight2.vue
deleted file mode 100644
index 878c0da..0000000
--- a/src/views/centerRight2.vue
+++ /dev/null
@@ -1,76 +0,0 @@
-<template>
-  <div id="centreRight2">
-    <div class="bg-color-black">
-      <div class="d-flex pt-2 pl-2">
-        <span style="color:#5cd9e8">
-          <icon name="align-left"></icon>
-        </span>
-        <span class="fs-xl text mx-2">产品销售渠道分析</span>
-      </div>
-      <div class="d-flex jc-center body-box" style=" margin-top: 0;">
-        <dv-capsule-chart :config="config" style="width: 100%;height:2rem" />
-        <!-- ---------------------------------------- -->
-        <centreRight2Chart1></centreRight2Chart1>
-      </div>
-    </div>
-  </div>
-</template>
-
-<script>
-import centreRight2Chart1 from "@/components/echart/centreRight2/centreRight2Chart1";
-
-export default {
-  data() {
-    return {
-      config: {
-        data: [
-          {
-            name: "南阳",
-            value: 167
-          },
-          {
-            name: "周口",
-            value: 67
-          },
-          {
-            name: "漯河",
-            value: 123
-          },
-          {
-            name: "郑州",
-            value: 55
-          },
-          {
-            name: "西峡",
-            value: 98
-          }
-        ]
-      }
-    };
-  },
-  components: { centreRight2Chart1 },
-  mounted() {},
-  methods: {}
-};
-</script>
-
-<style lang="scss">
-#centreRight2 {
-  padding: 0.0625rem;
-  height: 5rem;
-  min-width: 3.75rem;
-  border-radius: 0.0625rem;
-  .bg-color-black {
-    padding: 0.0625rem;
-    height: 5.0625rem;
-    border-radius: 0.125rem;
-  }
-  .text {
-    color: #c3cbde;
-  }
-  .body-box {
-    border-radius: 0.125rem;
-    overflow: hidden;
-  }
-}
-</style>
\ No newline at end of file
diff --git a/src/views/dashboard/index.vue b/src/views/dashboard/index.vue
index 1b6839c..4904576 100644
--- a/src/views/dashboard/index.vue
+++ b/src/views/dashboard/index.vue
@@ -1,22 +1,36 @@
 <template>
+  <!-- 系统总览 -->
+  <dv-full-screen-container class="bg">
+    <!-- 顶部 -->
 
-    <!-- 系统总览 -->
-    <dv-full-screen-container>
-    <div class="hello" >
+    <!-- 中间 -->
+    <!-- 底部 -->
+    <btbuttom></btbuttom>
+
+    <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
+                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" id="homebar" style="height: 230px; width: 100%"></div>
-  
+
+          <div
+            class="tongjitu"
+            id="homebar"
+            style="height: 230px; width: 100%"
+          ></div>
+
           <div class="qushiBaifb">
             <div class="baifbLeft">
               <div class="baiFbitem">
@@ -38,24 +52,46 @@
               </div>
               <div class="baiFbitem">
                 <div style="font-size: 14px">体育馆</div>
-                <div  style="  color: white; font-size: 18px; font-weight: bold; margin-left: 10%; " >
+                <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"/>
+                <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"
+                <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%; " >
+                <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>
@@ -99,12 +135,20 @@
           <!-- 今日各场馆人数趋势 折线图 -->
           <div class="keliu keliuTu1">
             <div class="keliuTxt">今日各场馆人数趋势</div>
-            <div id="kl-line" style="width: 100%; height: 180px;"></div>
+            <div id="kl-line" style="width: 100%; height: 180px"></div>
           </div>
         </div>
-  
+
         <div class="middle">
-          <div style=" position: absolute; color: white; top: 11%; left: 18%; font-weight: bold;  " >
+          <div
+            style="
+              position: absolute;
+              color: white;
+              top: 11%;
+              left: 18%;
+              font-weight: bold;
+            "
+          >
             345,235
           </div>
           <div
@@ -129,7 +173,7 @@
           >
             2,345万
           </div>
-  
+
           <img
             src="../../assets/index/zt.png"
             class="aimImg"
@@ -141,7 +185,7 @@
               top: 29%;
             "
           />
-  
+
           <div
             style="
               position: absolute;
@@ -166,7 +210,7 @@
             33,532,890
           </div>
         </div>
-  
+
         <div class="renshu">
           <div class="keliu">
             <div class="keliuTxt">各场馆实施实时进馆人数</div>
@@ -180,47 +224,47 @@
               />
             </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>
@@ -228,154 +272,120 @@
         </div>
       </div>
     </div>
-
-</dv-full-screen-container>
-  </template>
+  </dv-full-screen-container>
+</template>
     
   <script>
-  // 引入echarts
-  import * as echarts from "echarts";
-  // 引入api
-  import * as homeApi from '@/api/home'
-  
-  export default {
-    data() {
-      return {
-        selectVal: 1,
-        keliuList: [
-          {
-            unit: "年",
-          },
-          {
-            unit: "月",
-          },
-          {
-            unit: "日",
-          },
-        ],
-        // 条线图
-        bar_data:[],
-        // 柱子图x轴
-        bar_tdata:[],
-        selectVal1: "年",
-      };
+// 引入echarts
+import * as echarts from "echarts";
+// 引入api
+import * as homeApi from "@/api/home";
+import btButtom from '@/components/btgym/Btbuttom'
+import Btbuttom from '@/components/btgym/Btbuttom.vue';
+
+export default {
+  components: { Btbuttom },
+  comments:{
+    btButtom
+  },
+  data() {
+    return {
+      selectVal: 1,
+      keliuList: [
+        {
+          unit: "年",
+        },
+        {
+          unit: "月",
+        },
+        {
+          unit: "日",
+        },
+      ],
+      // 条线图
+      bar_data: [],
+      // 柱子图x轴
+      bar_tdata: [],
+      selectVal1: "年",
+    };
+  },
+  mounted() {
+    // 首页线图
+    this.home_bar();
+    // 折线图
+    this.line_zone();
+
+    this.getStat();
+  },
+  methods: {
+    clickItme(val) {
+      this.selectVal = val;
     },
-    mounted() {
-      // 首页线图
-      this.home_bar();
-      // 折线图
-      this.line_zone();
-      
-      this.getStat();
+    clickQushi(val) {
+      this.selectVal1 = val;
     },
-    methods: {
-      clickItme(val) {
-        this.selectVal = val;
-      },
-      clickQushi(val) {
-        this.selectVal1 = val;
-      },
-  
-      //获取统计数据
-      getStat(){
-        let that = this
-        homeApi.allGroupTimeNum().then(res=>{
-          // get allTimeData
-          const tmpdata = res.data.allTimeData
-          that.bar_data =tmpdata
+
+    //获取统计数据
+    getStat() {
+      let that = this;
+      homeApi.allGroupTimeNum().then((res) => {
+        // get allTimeData
+        const tmpdata = res.data.allTimeData;
+        that.bar_data = tmpdata;
         //   let btdata = new Array();
         //   let bvdata = new Array();
-          tmpdata.foreach(function(item,key){
-            console.log(key)
-            console.log(item);
-          });
-  
+        tmpdata.foreach(function (item, key) {
+          console.log(key);
+          console.log(item);
         });
-      },
-  
-      // 透明背景柱状统计图
-      home_bar() {
-        var chartDom = document.getElementById("homebar");
-        var myChart = echarts.init(chartDom);
-        var option;
-  
-        //
-        let that = this
-  
-        option = {
-          xAxis: {
-            type: "category",
-            data: that.bar_tdata,
-          },
-          yAxis: {
-            type: "value",
-            //网格线
-            splitLine: {
-              lineStyle: {
-                type: "soild",
-                color: "#2F00FF",
-              },
+      });
+    },
+
+    // 透明背景柱状统计图
+    home_bar() {
+      var chartDom = document.getElementById("homebar");
+      var myChart = echarts.init(chartDom);
+      var option;
+
+      //
+      let that = this;
+
+      option = {
+        xAxis: {
+          type: "category",
+          data: that.bar_tdata,
+        },
+        yAxis: {
+          type: "value",
+          //网格线
+          splitLine: {
+            lineStyle: {
+              type: "soild",
+              color: "#2F00FF",
             },
           },
-          series: [
-            {
-              //data: [120, 200, 150, 80, 70, 110, 130, 630, 530, 460],
-              data: that.bar_data,
-              type: "bar",
-              showBackground: true,
-              // 设置顶部圆形
-              symbolSize: function (d) {
-                console.log(d);
-                return d > 0 ? [10, 20] : [0, 0];
-              },
+        },
+        series: [
+          {
+            //data: [120, 200, 150, 80, 70, 110, 130, 630, 530, 460],
+            data: that.bar_data,
+            type: "bar",
+            showBackground: true,
+            // 设置顶部圆形
+            symbolSize: function (d) {
+              console.log(d);
+              return d > 0 ? [10, 20] : [0, 0];
+            },
+            symbolPosition: "end",
+
+            // symbolPosition:'end',
+            // 背景颜色
+            backgroundStyle: {
               symbolPosition: "end",
-  
-              // symbolPosition:'end',
-              // 背景颜色
-              backgroundStyle: {
-                symbolPosition: "end",
-                symbolSize: [20, 20],
-                symbolOffset: [0, "-20%"],
-                opacity: 0.75,
-                //color: 'rgba(180, 180, 180, 0.2)'
-                color: {
-                  type: "linear",
-                  x: 0,
-                  y: 1,
-                  x2: 1,
-                  y2: 1,
-                  colorStops: [
-                    {
-                      offset: 0,
-                      color: "#2F00FF", // 0% 处的颜色
-                    },
-                    {
-                      offset: 0.2,
-                      color: "#000", // 50% 处的颜色
-                    },
-                    {
-                      offset: 0.8,
-                      color: "#000", // 50% 处的颜色
-                    },
-                    {
-                      offset: 1,
-                      color: "#2F00FF", // 0% 处的颜色
-                    },
-                  ],
-                  global: false, // 缺省为 false
-                },
-              },
-  
-              //
-              //  itemStyle:{
-              //  normal:{
-              //   barBorderRadius:[2,2,0,0]
-              //  }
-              //symbolOffset:[14,14],
-              //borderRadius:[15,15,0,0]
-              //  },
-  
-              // 条柱颜色
+              symbolSize: [20, 20],
+              symbolOffset: [0, "-20%"],
+              opacity: 0.75,
+              //color: 'rgba(180, 180, 180, 0.2)'
               color: {
                 type: "linear",
                 x: 0,
@@ -385,99 +395,136 @@
                 colorStops: [
                   {
                     offset: 0,
-                    color: "#00B4FF", // 0% 处的颜色
+                    color: "#2F00FF", // 0% 处的颜色
                   },
                   {
-                    offset: 0.6,
-                    color: "#2f00ff",
+                    offset: 0.2,
+                    color: "#000", // 50% 处的颜色
                   },
                   {
                     offset: 0.8,
-                    color: "#2f00ff",
+                    color: "#000", // 50% 处的颜色
                   },
                   {
                     offset: 1,
-                    color: "#00B4FF", // 100% 处的颜色
+                    color: "#2F00FF", // 0% 处的颜色
                   },
                 ],
                 global: false, // 缺省为 false
               },
             },
-          ],
-        };
-  
-        option && myChart.setOption(option);
-      },
-  
-      // 大面积折线图
-      line_zone() {
-        var chartDom = document.getElementById("kl-line");
-        var myChart = echarts.init(chartDom);
-        var option;
-  
-        let base = +new Date(2022, 9, 3);
-        let oneDay = 24 * 3600 * 1000;
-        let date = [];
-        let data = [Math.random() * 300];
-        for (let i = 1; i < 20000; i++) {
-          var now = new Date((base += oneDay));
-          date.push(
-            [now.getFullYear(), now.getMonth() + 1, now.getDate()].join("/")
-          );
-          data.push(Math.round((Math.random() - 0.5) * 20 + data[i - 1]));
-        }
-        option = {
-          xAxis: {
-            type: "category",
-            boundaryGap: false,
-            data: date,
+
+            //
+            //  itemStyle:{
+            //  normal:{
+            //   barBorderRadius:[2,2,0,0]
+            //  }
+            //symbolOffset:[14,14],
+            //borderRadius:[15,15,0,0]
+            //  },
+
+            // 条柱颜色
+            color: {
+              type: "linear",
+              x: 0,
+              y: 1,
+              x2: 1,
+              y2: 1,
+              colorStops: [
+                {
+                  offset: 0,
+                  color: "#00B4FF", // 0% 处的颜色
+                },
+                {
+                  offset: 0.6,
+                  color: "#2f00ff",
+                },
+                {
+                  offset: 0.8,
+                  color: "#2f00ff",
+                },
+                {
+                  offset: 1,
+                  color: "#00B4FF", // 100% 处的颜色
+                },
+              ],
+              global: false, // 缺省为 false
+            },
           },
-          yAxis: {
-            type: "value",
-            boundaryGap: [0, "100%"],
-            //网格线
-            splitLine: {
-              lineStyle: {
-                type: "soild",
-                color: "#2F00FF",
-              },
+        ],
+      };
+
+      option && myChart.setOption(option);
+    },
+
+    // 大面积折线图
+    line_zone() {
+      var chartDom = document.getElementById("kl-line");
+      var myChart = echarts.init(chartDom);
+      var option;
+
+      let base = +new Date(2022, 9, 3);
+      let oneDay = 24 * 3600 * 1000;
+      let date = [];
+      let data = [Math.random() * 300];
+      for (let i = 1; i < 20000; i++) {
+        var now = new Date((base += oneDay));
+        date.push(
+          [now.getFullYear(), now.getMonth() + 1, now.getDate()].join("/")
+        );
+        data.push(Math.round((Math.random() - 0.5) * 20 + data[i - 1]));
+      }
+      option = {
+        xAxis: {
+          type: "category",
+          boundaryGap: false,
+          data: date,
+        },
+        yAxis: {
+          type: "value",
+          boundaryGap: [0, "100%"],
+          //网格线
+          splitLine: {
+            lineStyle: {
+              type: "soild",
+              color: "#2F00FF",
             },
-  
           },
-  
-          series: [
-            {
-              name: "Fake Data",
-              type: "line",
-              symbol: "none",
-              sampling: "lttb",
-              itemStyle: {
-                color: "rgb(255, 170, 131)",
-              },
-              areaStyle: {
-                color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
-                  {
-                    offset: 0,
-                    color: "rgba(255, 158, 68,0.6)",
-                  },
-                  {
-                    offset: 1,
-                    color: "rgb(255, 70, 131,0.6)",
-                  },
-                ]),
-              },
-              data: data,
+        },
+
+        series: [
+          {
+            name: "Fake Data",
+            type: "line",
+            symbol: "none",
+            sampling: "lttb",
+            itemStyle: {
+              color: "rgb(255, 170, 131)",
             },
-          ],
-        };
-  
-        option && myChart.setOption(option);
-      },
+            areaStyle: {
+              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                {
+                  offset: 0,
+                  color: "rgba(255, 158, 68,0.6)",
+                },
+                {
+                  offset: 1,
+                  color: "rgb(255, 70, 131,0.6)",
+                },
+              ]),
+            },
+            data: data,
+          },
+        ],
+      };
+
+      option && myChart.setOption(option);
     },
-  };
-  </script>
+  },
+};
+</script>
     
   <style lang="less" scoped>
-  @import "../../assets/less/dashboard.less";
-  </style>
+@import "../../assets/less/dashboard.less";
+</style>
     
\ No newline at end of file
diff --git a/src/views/index.vue b/src/views/index.vue
index ea4113c..7e08f60 100644
--- a/src/views/index.vue
+++ b/src/views/index.vue
@@ -1,137 +1,6 @@
 <template>
-  <div id="index">
-    <dv-full-screen-container class="bg">
-      <dv-loading v-if="loading">Loading...</dv-loading>
-      <div v-else class="host-body">
-        <div class="d-flex jc-center">
-          <dv-decoration-10 style="width:33.3%;height:.0625rem;" />
-          <div class="d-flex jc-center">
-            <dv-decoration-8 :color="['#568aea', '#000000']" style="width:2.5rem;height:.625rem;" />
-            <div class="title">
-              <span class="title-text">大数据可视化平台</span>
-              <dv-decoration-6
-                class="title-bototm"
-                :reverse="true"
-                :color="['#50e3c2', '#67a1e5']"
-                style="width:3.125rem;height:.1rem;"
-              />
-            </div>
-            <dv-decoration-8
-              :reverse="true"
-              :color="['#568aea', '#000000']"
-              style="width:2.5rem;height:.625rem;"
-            />
-          </div>
-          <dv-decoration-10 style="width:33.3%;height:.0625rem; transform: rotateY(180deg);" />
-        </div>
+    <div id="index">
 
-        <!-- 第二行 -->
-        <div class="d-flex jc-between px-2">
-          <div class="d-flex" style="width: 40%">
-            <div
-              class="react-right ml-4"
-              style="width: 6.25rem; text-align: left;background-color: #0f1325;"
-            >
-              <span class="react-before"></span>
-              <span class="text">数据分析1</span>
-            </div>
-            <div class="react-right ml-3" style="background-color: #0f1325;">
-              <span class="text colorBlue">数据分析2</span>
-            </div>
-          </div>
-          <div style="width: 40%" class="d-flex">
-            <div class="react-left bg-color-blue mr-3">
-              <span class="text fw-b">vue-big-screen</span>
-            </div>
-            <div
-              class="react-left mr-4"
-              style="width: 6.25rem; background-color: #0f1325; text-align: right;"
-            >
-              <span class="react-after"></span>
-              <span class="text">2020年03月16日 周一 12:00</span>
-            </div>
-          </div>
-        </div>
-
-        <div class="body-box">
-          <!-- 第三行数据 -->
-          <div class="content-box">
-            <div>
-              <dv-border-box-12>
-                <centerLeft1 />
-              </dv-border-box-12>
-            </div>
-            <div>
-              <dv-border-box-12>
-                <centerLeft2 />
-              </dv-border-box-12>
-            </div>
-            <!-- 中间 -->
-            <div>
-              <center />
-            </div>
-            <!-- 中间 -->
-            <div>
-              <centerRight2 />
-            </div>
-            <div>
-              <dv-border-box-13>
-                <centerRight1 />
-              </dv-border-box-13>
-            </div>
-          </div>
-
-          <!-- 第四行数据 -->
-          <div class="bototm-box">
-            <dv-border-box-13>
-              <bottomLeft />
-            </dv-border-box-13>
-            <dv-border-box-12>
-              <bottomRight />
-            </dv-border-box-12>
-          </div>
-        </div>
-      </div>
-    </dv-full-screen-container>
-  </div>
-</template>
-
-<script>
-import centerLeft1 from "./centerLeft1";
-import centerLeft2 from "./centerLeft2";
-import centerRight1 from "./centerRight1";
-import centerRight2 from "./centerRight2";
-import center from "./center";
-import bottomLeft from "./bottomLeft";
-import bottomRight from "./bottomRight";
-export default {
-  data() {
-    return {
-      loading: true
-    };
-  },
-  components: {
-    centerLeft1,
-    centerLeft2,
-    centerRight1,
-    centerRight2,
-    center,
-    bottomLeft,
-    bottomRight
-  },
-  mounted() {
-    this.cancelLoading();
-  },
-  methods: {
-    cancelLoading() {
-      setTimeout(() => {
-        this.loading = false;
-      }, 500);
-    }
-  }
-};
-</script>
-
-<style lang="scss">
-@import "../assets/scss/index.scss";
-</style>
\ No newline at end of file
+        总览的内容
+    </div>
+</template>
\ No newline at end of file