diff --git a/src/assets/img/activity/center-bottom1.png b/src/assets/img/activity/center-bottom1.png
new file mode 100644
index 0000000..969730f
Binary files /dev/null and b/src/assets/img/activity/center-bottom1.png differ
diff --git a/src/assets/img/activity/center-title.png b/src/assets/img/activity/center-title.png
new file mode 100644
index 0000000..246a617
Binary files /dev/null and b/src/assets/img/activity/center-title.png differ
diff --git a/src/assets/img/activity/center-top.png b/src/assets/img/activity/center-top.png
new file mode 100644
index 0000000..2f08bd3
Binary files /dev/null and b/src/assets/img/activity/center-top.png differ
diff --git a/src/assets/img/activity/right-top.png b/src/assets/img/activity/right-top.png
new file mode 100644
index 0000000..065e075
Binary files /dev/null and b/src/assets/img/activity/right-top.png differ
diff --git a/src/components/header.vue b/src/components/header.vue
index 7497984..3bff98f 100644
--- a/src/components/header.vue
+++ b/src/components/header.vue
@@ -88,7 +88,7 @@ export default {
         {
           index: "8",
           title: "活动管理",
-          path: "/08"
+          path: "/activity"
         },
       ],
       timeout: undefined,
diff --git a/src/pages/activity/home.vue b/src/pages/activity/home.vue
new file mode 100644
index 0000000..c8da5b7
--- /dev/null
+++ b/src/pages/activity/home.vue
@@ -0,0 +1,1020 @@
+<template>
+  <div class="main_box">
+    <div class="home_left">
+      <!-- 各机构入住率 -->
+      <div class="inner_box">
+        <div class="inner_header">
+          <div class="header_left"></div>
+          <div class="header_icon">
+            <div style="width: 12px; height: 10px; margin-bottom: -6px"><img src="@/assets/img/bigScreen/polygon1.png"></div>
+            <div style="width: 12px; height: 10px; margin-bottom: 10px"><img src="@/assets/img/bigScreen/polygon2.png"></div>
+          </div>
+          <div class="header_title">
+            <div>
+              <span>本年度活动点赞TOP5</span>
+              <span class="little_font">（%）</span>
+            </div>
+          </div>
+        </div>
+        <div class="box_content">
+          <div class="chart_box" style="justify-content: center; align-items: center; display: flex; flex-direction: column">
+            <div style="height:23%;display: flex;justify-content: center;align-items: center">
+              <div style="font-size: 14px;width: 200px;text-align: right">3月《美好明天》唱歌比赛</div>
+              <div style="margin-left: 10px">
+                <svg-icon icon-class="smile" :style="echartObj6.tomorrow > 5 ? 'color: #F5B12D;width:25px;height: 25px' : 'color: #35596B;width:25px;height: 25px'"/>
+                <svg-icon icon-class="smile" :style="echartObj6.tomorrow > 15 ? 'color: #F5B12D;width:25px;height: 25px' : 'color: #35596B;width:25px;height: 25px'"/>
+                <svg-icon icon-class="smile" :style="echartObj6.tomorrow > 25 ? 'color: #F5B12D;width:25px;height: 25px' : 'color: #35596B;width:25px;height: 25px'"/>
+                <svg-icon icon-class="smile" :style="echartObj6.tomorrow > 35 ? 'color: #F5B12D;width:25px;height: 25px' : 'color: #35596B;width:25px;height: 25px'"/>
+                <svg-icon icon-class="smile" :style="echartObj6.tomorrow > 45 ? 'color: #F5B12D;width:25px;height: 25px' : 'color: #35596B;width:25px;height: 25px'"/>
+                <svg-icon icon-class="smile" :style="echartObj6.tomorrow > 55 ? 'color: #F5B12D;width:25px;height: 25px' : 'color: #35596B;width:25px;height: 25px'"/>
+                <svg-icon icon-class="smile" :style="echartObj6.tomorrow > 65 ? 'color: #F5B12D;width:25px;height: 25px' : 'color: #35596B;width:25px;height: 25px'"/>
+                <svg-icon icon-class="smile" :style="echartObj6.tomorrow > 75 ? 'color: #F5B12D;width:25px;height: 25px' : 'color: #35596B;width:25px;height: 25px'"/>
+                <svg-icon icon-class="smile" :style="echartObj6.tomorrow > 85 ? 'color: #F5B12D;width:25px;height: 25px' : 'color: #35596B;width:25px;height: 25px'"/>
+                <svg-icon icon-class="smile" :style="echartObj6.tomorrow > 95 ? 'color: #F5B12D;width:25px;height: 25px' : 'color: #35596B;width:25px;height: 25px'"/>
+              </div>
+              <div style="color: #00C7F2;font-size: 16px;margin-left: 13px">{{echartObj6.tomorrow}}%</div>
+            </div>
+            <div style="height:23%;display: flex;justify-content: center;align-items: center">
+              <div style="font-size: 14px;width: 200px;text-align: right">3月《幸福生活》诗歌朗诵</div>
+              <div style="margin-left: 10px">
+                <svg-icon icon-class="smile" :style="echartObj6.happiness > 5 ? 'color: #3CD495;width:25px;height: 25px' : 'color: #35596B;width:25px;height: 25px'"/>
+                <svg-icon icon-class="smile" :style="echartObj6.happiness > 15 ? 'color: #3CD495;width:25px;height: 25px' : 'color: #35596B;width:25px;height: 25px'"/>
+                <svg-icon icon-class="smile" :style="echartObj6.happiness > 25 ? 'color: #3CD495;width:25px;height: 25px' : 'color: #35596B;width:25px;height: 25px'"/>
+                <svg-icon icon-class="smile" :style="echartObj6.happiness > 35 ? 'color: #3CD495;width:25px;height: 25px' : 'color: #35596B;width:25px;height: 25px'"/>
+                <svg-icon icon-class="smile" :style="echartObj6.happiness > 45 ? 'color: #3CD495;width:25px;height: 25px' : 'color: #35596B;width:25px;height: 25px'"/>
+                <svg-icon icon-class="smile" :style="echartObj6.happiness > 55 ? 'color: #3CD495;width:25px;height: 25px' : 'color: #35596B;width:25px;height: 25px'"/>
+                <svg-icon icon-class="smile" :style="echartObj6.happiness > 65 ? 'color: #3CD495;width:25px;height: 25px' : 'color: #35596B;width:25px;height: 25px'"/>
+                <svg-icon icon-class="smile" :style="echartObj6.happiness > 75 ? 'color: #3CD495;width:25px;height: 25px' : 'color: #35596B;width:25px;height: 25px'"/>
+                <svg-icon icon-class="smile" :style="echartObj6.happiness > 85 ? 'color: #3CD495;width:25px;height: 25px' : 'color: #35596B;width:25px;height: 25px'"/>
+                <svg-icon icon-class="smile" :style="echartObj6.happiness > 95 ? 'color: #3CD495;width:25px;height: 25px' : 'color: #35596B;width:25px;height: 25px'"/>
+              </div>
+              <div style="color: #00C7F2;font-size: 16px;margin-left: 13px">{{echartObj6.happiness}}%</div>
+            </div>
+            <div style="height:23%;display: flex;justify-content: center;align-items: center">
+              <div style="font-size: 14px;width: 200px;text-align: right">5月《拥抱生活》健康讲座</div>
+              <div style="margin-left: 10px">
+                <svg-icon icon-class="smile" :style="echartObj6.hug > 5 ? 'color: #3D7DFA;width:25px;height: 25px' : 'color: #35596B;width:25px;height: 25px'"/>
+                <svg-icon icon-class="smile" :style="echartObj6.hug > 15 ? 'color: #3D7DFA;width:25px;height: 25px' : 'color: #35596B;width:25px;height: 25px'"/>
+                <svg-icon icon-class="smile" :style="echartObj6.hug > 25 ? 'color: #3D7DFA;width:25px;height: 25px' : 'color: #35596B;width:25px;height: 25px'"/>
+                <svg-icon icon-class="smile" :style="echartObj6.hug > 35 ? 'color: #3D7DFA;width:25px;height: 25px' : 'color: #35596B;width:25px;height: 25px'"/>
+                <svg-icon icon-class="smile" :style="echartObj6.hug > 45 ? 'color: #3D7DFA;width:25px;height: 25px' : 'color: #35596B;width:25px;height: 25px'"/>
+                <svg-icon icon-class="smile" :style="echartObj6.hug > 55 ? 'color: #3D7DFA;width:25px;height: 25px' : 'color: #35596B;width:25px;height: 25px'"/>
+                <svg-icon icon-class="smile" :style="echartObj6.hug > 65 ? 'color: #3D7DFA;width:25px;height: 25px' : 'color: #35596B;width:25px;height: 25px'"/>
+                <svg-icon icon-class="smile" :style="echartObj6.hug > 75 ? 'color: #3D7DFA;width:25px;height: 25px' : 'color: #35596B;width:25px;height: 25px'"/>
+                <svg-icon icon-class="smile" :style="echartObj6.hug > 85 ? 'color: #3D7DFA;width:25px;height: 25px' : 'color: #35596B;width:25px;height: 25px'"/>
+                <svg-icon icon-class="smile" :style="echartObj6.hug > 95 ? 'color: #3D7DFA;width:25px;height: 25px' : 'color: #35596B;width:25px;height: 25px'"/>
+              </div>
+              <div style="color: #00C7F2;font-size: 16px;margin-left: 13px">{{echartObj6.hug}}%</div>
+            </div>
+            <div style="height:23%;display: flex;justify-content: center;align-items: center">
+              <div style="font-size: 14px;width: 200px;text-align: right">7月《我的祖国》唱歌比赛</div>
+              <div style="margin-left: 10px">
+                <svg-icon icon-class="smile" :style="echartObj6.motherland > 5 ? 'color: #3D7DFA;width:25px;height: 25px' : 'color: #35596B;width:25px;height: 25px'"/>
+                <svg-icon icon-class="smile" :style="echartObj6.motherland > 15 ? 'color: #3D7DFA;width:25px;height: 25px' : 'color: #35596B;width:25px;height: 25px'"/>
+                <svg-icon icon-class="smile" :style="echartObj6.motherland > 25 ? 'color: #3D7DFA;width:25px;height: 25px' : 'color: #35596B;width:25px;height: 25px'"/>
+                <svg-icon icon-class="smile" :style="echartObj6.motherland > 35 ? 'color: #3D7DFA;width:25px;height: 25px' : 'color: #35596B;width:25px;height: 25px'"/>
+                <svg-icon icon-class="smile" :style="echartObj6.motherland > 45 ? 'color: #3D7DFA;width:25px;height: 25px' : 'color: #35596B;width:25px;height: 25px'"/>
+                <svg-icon icon-class="smile" :style="echartObj6.motherland > 55 ? 'color: #3D7DFA;width:25px;height: 25px' : 'color: #35596B;width:25px;height: 25px'"/>
+                <svg-icon icon-class="smile" :style="echartObj6.motherland > 65 ? 'color: #3D7DFA;width:25px;height: 25px' : 'color: #35596B;width:25px;height: 25px'"/>
+                <svg-icon icon-class="smile" :style="echartObj6.motherland > 75 ? 'color: #3D7DFA;width:25px;height: 25px' : 'color: #35596B;width:25px;height: 25px'"/>
+                <svg-icon icon-class="smile" :style="echartObj6.motherland > 85 ? 'color: #3D7DFA;width:25px;height: 25px' : 'color: #35596B;width:25px;height: 25px'"/>
+                <svg-icon icon-class="smile" :style="echartObj6.motherland > 95 ? 'color: #3D7DFA;width:25px;height: 25px' : 'color: #35596B;width:25px;height: 25px'"/>
+              </div>
+              <div style="color: #00C7F2;font-size: 16px;margin-left: 13px">{{echartObj6.hug}}%</div>
+            </div>
+            <div style="height:23%;display: flex;justify-content: center;align-items: center">
+              <div style="font-size: 14px;width: 200px;text-align: right">4月《美食节》健康饮食</div>
+              <div style="margin-left: 10px">
+                <svg-icon icon-class="smile" :style="echartObj6.food > 5 ? 'color: #3D7DFA;width:25px;height: 25px' : 'color: #35596B;width:25px;height: 25px'"/>
+                <svg-icon icon-class="smile" :style="echartObj6.food > 15 ? 'color: #3D7DFA;width:25px;height: 25px' : 'color: #35596B;width:25px;height: 25px'"/>
+                <svg-icon icon-class="smile" :style="echartObj6.food > 25 ? 'color: #3D7DFA;width:25px;height: 25px' : 'color: #35596B;width:25px;height: 25px'"/>
+                <svg-icon icon-class="smile" :style="echartObj6.food > 35 ? 'color: #3D7DFA;width:25px;height: 25px' : 'color: #35596B;width:25px;height: 25px'"/>
+                <svg-icon icon-class="smile" :style="echartObj6.food > 45 ? 'color: #3D7DFA;width:25px;height: 25px' : 'color: #35596B;width:25px;height: 25px'"/>
+                <svg-icon icon-class="smile" :style="echartObj6.food > 55 ? 'color: #3D7DFA;width:25px;height: 25px' : 'color: #35596B;width:25px;height: 25px'"/>
+                <svg-icon icon-class="smile" :style="echartObj6.food > 65 ? 'color: #3D7DFA;width:25px;height: 25px' : 'color: #35596B;width:25px;height: 25px'"/>
+                <svg-icon icon-class="smile" :style="echartObj6.food > 75 ? 'color: #3D7DFA;width:25px;height: 25px' : 'color: #35596B;width:25px;height: 25px'"/>
+                <svg-icon icon-class="smile" :style="echartObj6.food > 85 ? 'color: #3D7DFA;width:25px;height: 25px' : 'color: #35596B;width:25px;height: 25px'"/>
+                <svg-icon icon-class="smile" :style="echartObj6.food > 95 ? 'color: #3D7DFA;width:25px;height: 25px' : 'color: #35596B;width:25px;height: 25px'"/>
+              </div>
+              <div style="color: #00C7F2;font-size: 16px;margin-left: 13px">{{echartObj6.hug}}%</div>
+            </div>
+          </div>
+        </div>
+
+      </div>
+      <InnerBox :echartObj="echartObj3" style="height: 33%" header_title="本年度活动类型占比" little_font="(%)"/>
+      <InnerBox :echartObj="echartObj4" style="height: 33%" header_title="本年度活动类型年龄段统计" little_font="(人)"/>
+    </div>
+    <div class="home_center" style="display: block">
+      <div class="inner_box center-top" style="width: 99%;height:63%;margin-top: 0">
+      </div>
+      <div class="inner_box" style="width: 99%;height:36%">
+        <div style="display: flex;justify-content: space-around;width: 100%;height: 100%">
+          <div class="center-left">
+          </div>
+          <div class="center-right">
+            <div class="center-right-title"></div>
+            <Echarts class="echarts" style="height: 90%" :echartObj="echartObj9" />
+          </div>
+        </div>
+      </div>
+      </div>
+    <div class="home_right">
+      <div class="right-top"></div>
+      <InnerBox :echartObj="echartObj7" style="width: 99%;height: 33%" header_title="活动区域统计分析" little_font="（人）"/>
+      <InnerBox :echartObj="echartObj8" style="width: 99%;height: 33%" header_title="本年度积分消耗占比分析" little_font="（%）"/>
+    </div>
+  </div>
+</template>
+
+<script>
+import Vue from 'vue'
+import { Progress,Divider } from 'ant-design-vue';
+Vue.use(Progress);
+Vue.use(Divider);
+import Echarts from "@/components/echarts";
+import echarts from "echarts";
+import SvgIcon from '@/components/svgIcon.vue';
+// 定义柱状图左侧图形元素
+const leftRect = echarts.graphic.extendShape({
+  shape: {
+    x: 0,
+    y: 0,
+    width: 16, //柱状图宽
+    zWidth: 8, //阴影折角宽
+    zHeight: 4 //阴影折角高
+  },
+  buildPath: function (ctx, shape) {
+    const api = shape.api;
+    const xAxisPoint = api.coord([shape.xValue, 0]);
+    const p0 = [shape.x - shape.width / 2, shape.y - shape.zHeight];
+    const p1 = [shape.x - shape.width / 2, shape.y - shape.zHeight];
+    const p2 = [xAxisPoint[0] - shape.width / 2, xAxisPoint[1]];
+    const p3 = [xAxisPoint[0] + shape.width / 2, xAxisPoint[1]];
+    const p4 = [shape.x + shape.width / 2, shape.y];
+
+    ctx.moveTo(p0[0], p0[1]);
+    ctx.lineTo(p1[0], p1[1]);
+    ctx.lineTo(p2[0], p2[1]);
+    ctx.lineTo(p3[0], p3[1]);
+    ctx.lineTo(p4[0], p4[1]);
+    ctx.lineTo(p0[0], p0[1]);
+    ctx.closePath();
+  }
+});
+// 定义柱状图右侧以及顶部图形元素
+const rightRect = echarts.graphic.extendShape({
+  shape: {
+    x: 0,
+    y: 0,
+    width: 15,
+    zWidth: 12,
+    zHeight: 8
+  },
+  buildPath: function (ctx, shape) {
+    const api = shape.api;
+    const xAxisPoint = api.coord([shape.xValue, 0]);
+    const p1 = [shape.x - shape.width / 2, shape.y - shape.zHeight / 2];
+    const p3 = [xAxisPoint[0] + shape.width / 2, xAxisPoint[1]];
+    const p4 = [shape.x + shape.width / 2, shape.y];
+    const p5 = [xAxisPoint[0] + shape.width / 2 + shape.zWidth, xAxisPoint[1]];
+    const p6 = [
+      shape.x + shape.width / 2 + shape.zWidth,
+      shape.y - shape.zHeight / 2
+    ];
+    const p7 = [
+      shape.x - shape.width / 2 + shape.zWidth,
+      shape.y - shape.zHeight
+    ];
+    ctx.moveTo(p4[0], p4[1]);
+    ctx.lineTo(p3[0], p3[1]);
+    ctx.lineTo(p5[0], p5[1]);
+    ctx.lineTo(p6[0], p6[1]);
+    ctx.lineTo(p4[0], p4[1]);
+
+    ctx.moveTo(p4[0], p4[1]);
+    ctx.lineTo(p6[0], p6[1]);
+    ctx.lineTo(p7[0], p7[1]);
+    ctx.lineTo(p1[0], p1[1]);
+    ctx.lineTo(p4[0], p4[1]);
+    ctx.closePath();
+  }
+});
+// 注册图形元素
+echarts.graphic.registerShape('leftRect', leftRect);
+echarts.graphic.registerShape('rightRect', rightRect);
+export default {
+  data() {
+    return {
+      echartObj1: {
+        legend: {
+          show: true,
+          bottom: 10,
+          data: ['套餐(单)','自定义餐(单)','营养餐(单)'],
+          textStyle: {
+            color: '#FFFFFF',
+            lineHeight: 10
+          },
+        },
+        color: ['#2B8EF3','#F5B12D','#48E5E5'],
+        tooltip: {
+          trigger: 'axis',
+          axisPointer: {
+            type: 'shadow'
+          }
+        },
+        xAxis: {
+          type: 'category',
+          axisLabel: {//x轴文字的配置
+            show: true,
+            textStyle: {
+              color: "#fff",
+              fontSize: 10,
+            }
+          },
+          data: ['1月','2月','3月','4月','5月','6月'],
+        },
+        yAxis: {
+          type: 'value',
+          axisLabel: {//y轴文字的配置
+            textStyle: {
+              color: "#fff",
+            },
+          },
+          splitLine: {
+            show: true,
+            lineStyle: {
+              type: 'dashed',
+              color: ['#1F7DAF']
+            }
+          },
+        },
+        series: [
+          {
+            name: '套餐(单)',
+            data: [
+              {name: '套餐(单)', value: 210},
+              {name: '套餐(单)', value: 140},
+              {name: '套餐(单)', value: 130},
+              {name: '套餐(单)', value: 130},
+              {name: '套餐(单)', value: 130},
+              {name: '套餐(单)', value: 130},
+            ],
+            type: 'bar',
+            barWidth: 10,
+            barGap:0.5,
+            itemStyle: {
+              normal: {
+                label: {
+                  show: true,
+                  position: 'top',
+                  textStyle: {
+                    color: '#FFFFFF',
+                    fontSize: 10
+                  },
+                },
+                // color: '#1B7EF2'
+                color: () => {
+                  return new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                    { offset: 0, color: '#1976E2' },
+                    { offset: 1, color: 'rgba(25,118,226,0.30)' },
+                  ]);
+                },
+              }
+            },
+          },
+          {
+            name: '自定义餐(单)',
+            data: [
+              {name: '自定义餐(单)', value: 180} ,
+              {name: '自定义餐(单)', value: 120},
+              {name: '自定义餐(单)', value: 48},
+              {name: '自定义餐(单)', value: 50},
+              {name: '自定义餐(单)', value: 90},
+              {name: '自定义餐(单)', value: 120},
+            ],
+            type: 'bar',
+            barGap:0.5,
+            barWidth: 10,
+            itemStyle: {
+              normal: {
+                label: {
+                  show: true,
+                  position: 'top',
+                  textStyle: {
+                    color: '#FFFFFF',
+                    fontSize: 10
+                  },
+                },
+                // color: '#1B7EF2'
+                color: () => {
+                  return new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                    { offset: 0, color: '#FF7B00' },
+                    { offset: 1, color: 'rgba(255,123,0,0.30)' },
+                  ]);
+                },
+              }
+            },
+          },
+          {
+            name: '营养餐(单)',
+            data: [
+              {name: '营养餐(单)', value: 90} ,
+              {name: '自定义餐(单)', value: 170},
+              {name: '营养餐(单)', value: 70},
+              {name: '营养餐(单)', value: 120},
+              {name: '营养餐(单)', value: 180},
+              {name: '营养餐(单)', value: 110}
+            ],
+            type: 'bar',
+            barGap:0.5,
+            barWidth: 10,
+            //同一系列的柱间距离
+            itemStyle: {
+              normal: {
+                label: {
+                  show: true,
+                  position: 'top',
+                  textStyle: {
+                    color: '#FFFFFF',
+                    fontSize: 12
+                  },
+                },
+                // color: '#1B7EF2'
+                color: () => {
+                  return new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                    { offset: 0, color: '#48E5E5' },
+                    { offset: 1, color: 'rgba(72,228,229,0.30)' },
+                  ]);
+                }
+              }
+            },
+          },
+        ]
+      },
+      echartObj2: {
+        grid: {
+          show: false,
+          left: '20',
+          top: 20,
+          bottom: '20',
+          containLabel: true
+        },
+        xAxis: {
+          type: 'value',
+          axisLabel: {//x轴文字的配置
+            show: true,
+            textStyle: {
+              color: "#fff",
+              fontSize: 10,
+            },
+          },
+          splitLine:{
+            show:false
+          }
+        },
+        yAxis: {
+          type: 'category',
+          splitLine:{
+            show:false
+          },
+          axisLabel: {//y轴文字的配置
+            textStyle: {
+              color: "#fff",
+            },
+          },
+          data: ['水煮鱼','麻婆豆腐','锅包肉','糖醋排骨','红烧鱼','切丁肉末','清炒油麦菜', '蒜蓉娃娃菜','青椒肉丝','西红柿鸡蛋',]
+        },
+        series: [
+          {
+            data: [130,60,40,130,100,160,180,190,260,300],
+            type: 'bar',
+            itemStyle:{
+              normal: {
+                color: (param)=>{
+                  if(param.dataIndex % 2 ==0){
+                    return new echarts.graphic.LinearGradient(0, 0, 1, 0, [
+                      { offset: 0, color:'rgba(255,187,0,0.30)' },
+                      { offset: 1, color: '#FFBB00'  },
+                    ]);
+                  }else {
+                    return new echarts.graphic.LinearGradient(0, 0, 1, 0, [
+                      { offset: 0, color:'rgba(25,118,226,0.30)' },
+                      { offset: 1, color: '#1B7EF2'  },
+                    ]);
+                  }
+                },
+              }
+            },
+            showBackground: true,
+            backgroundStyle: {
+              color: 'rgba(180, 180, 180, 0.2)'
+            },
+            barWidth: 10,
+
+          }
+        ]
+      },
+      echartObj3: {
+        legend: {
+          show: true,
+          top: 'middle',
+          right: 0,
+          orient: 'vertical',
+          data: ['兴趣小组','健身活动','唱歌比赛','手工制作','活动讲座','社交活动'],
+          textStyle: {
+            color: '#FFFFFF',
+            lineHeight: 18
+          },
+          formatter:  (name) => {
+            let data = this.echartObj3.series[0].data
+            let total = 0
+            let tarValue
+            for (let i = 0; i < data.length; i++) {
+              total += data[i].value
+              if (data[i].name == name) {
+                tarValue = data[i].value
+              }
+            }
+            //计算出百分比
+            let p = Math.round((tarValue / total) * 100) + '%'
+            return `${name}${p}`
+          }
+        },
+        color: ['#2B8EF3','#48E5E5','#3D7DFA','#68A400','#F5B12D','#D599FD'],
+        series: [
+          {
+            name: 'Access From',
+            type: 'pie',
+            radius: [60, 90],
+            top: 'middle',
+            left: -50,
+            avoidLabelOverlap: false,
+            label: {
+              show: false,
+              position: 'center'
+            },
+            emphasis: {
+              label: {
+                show: false,
+                fontSize: 20,
+              }
+            },
+            labelLine: {
+              show: false
+            },
+            data: [
+              { value: 35, name: '兴趣小组' },
+              { value: 15, name: '健身活动' },
+              { value: 15, name: '唱歌比赛' },
+              { value: 11, name: '手工制作' },
+              { value: 10, name: '活动讲座' },
+              { value: 9, name: '社交活动' },
+            ]
+          }
+        ]
+      },
+      echartObj4: {
+        legend: {
+          show: true,
+          bottom: 10,
+          data: ['<60','60-70','70-80','>80'],
+          itemHeight: 8, // 图例高度
+          itemWidth: 15, // 图例高度
+          textStyle: {
+            color: '#FFFFFF',
+            lineHeight: 10,
+            fontSize: 10,
+          },
+        },
+        color: ['#2B8EF3','#21C180','#F5B12D','#48E5E5'],
+        tooltip: {
+          trigger: 'axis',
+          axisPointer: {
+            type: 'shadow'
+          }
+        },
+        xAxis: {
+          type: 'category',
+          axisLabel: {//x轴文字的配置
+            show: true,
+            interval: 0, // 强制文字全部显示
+            textStyle: {
+              color: "#fff",
+              fontSize: 10,
+            }
+          },
+          data: ['手工制作','唱歌比赛','兴趣小组','活动健身','讲座活动','社交活动'],
+        },
+        yAxis: {
+          type: 'value',
+          axisLabel: {//y轴文字的配置
+            textStyle: {
+              color: "#fff",
+            },
+          },
+          splitLine: {
+            show: true,
+            lineStyle: {
+              type: 'dashed',
+              color: ['#1F7DAF']
+            }
+          },
+        },
+        series: [
+          {
+            name: '<60',
+            data: [30,30,60,50,30,10],
+            type: 'bar',
+            stack: 'Ad',
+            barWidth: 18,
+            itemStyle: {
+              normal: {
+                label: {
+                  show: false,
+                  position: 'top',
+                  textStyle: {
+                    color: '#FFFFFF',
+                    fontSize: 10
+                  },
+                },
+                // color: '#1B7EF2'
+                color: () => {
+                  return new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                    { offset: 0, color: '#1976E2' },
+                    { offset: 1, color: 'rgba(25,118,226,0.30)' },
+                  ]);
+                },
+              }
+            },
+          },
+          {
+            name: '60-70',
+            data: [80,10,110,10,30,10],
+            type: 'bar',
+            stack: 'Ad',
+            barWidth: 18,
+            itemStyle: {
+              normal: {
+                label: {
+                  show: false,
+                  position: 'top',
+                  textStyle: {
+                    color: '#FFFFFF',
+                    fontSize: 10
+                  },
+                },
+                // color: '#1B7EF2'
+                color: () => {
+                  return new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                    { offset: 0, color: '#FFBB00' },
+                    { offset: 1, color: '#FF7B00' },
+                  ]);
+                },
+              }
+            },
+          },
+          {
+            name: '70-80',
+            data: [20,110,30,80,90,10],
+            type: 'bar',
+            stack: 'Ad',
+            barWidth: 18,
+            itemStyle: {
+              normal: {
+                label: {
+                  show: false,
+                  position: 'top',
+                  textStyle: {
+                    color: '#FFFFFF',
+                    fontSize: 10
+                  },
+                },
+                color: () => {
+                  return new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                    { offset: 0, color: '#21C180' },
+                    { offset: 1, color: '#21C180' },
+                  ]);
+                },
+              }
+            },
+          },
+          {
+            name: '>80',
+            data: [50,10,100,10,50,10],
+            type: 'bar',
+            stack: 'Ad',
+            barWidth: 18,
+            itemStyle: {
+              normal: {
+                label: {
+                  show: false,
+                  position: 'top',
+                  textStyle: {
+                    color: '#FFFFFF',
+                    fontSize: 10
+                  },
+                },
+                // color: '#1B7EF2'
+                color: () => {
+                  return new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                    { offset: 0, color: '#48E5E5' },
+                    { offset: 1, color: '#48E5E5' },
+                  ]);
+                },
+              }
+            },
+          },
+        ]
+      },
+      echartObj5: {
+        legend: {
+          show: true,
+          top: 'middle',
+          right: 0,
+          orient: 'vertical',
+          data: ['已处理','处理中','未处理'],
+          textStyle: {
+            color: '#FFFFFF',
+            lineHeight: 18
+          },
+          formatter:  (name) => {
+            let data = this.echartObj5.series[0].data
+            let total = 0
+            let tarValue
+            for (let i = 0; i < data.length; i++) {
+              total += data[i].value
+              if (data[i].name == name) {
+                tarValue = data[i].value
+              }
+            }
+            //计算出百分比
+            let p = Math.round((tarValue / total) * 100) + '%'
+            return `${name}${p}`
+          }
+        },
+        color: ['#3D7DFA','#48E5E5','#F5B12D'],
+        series: [
+          {
+            name: 'Access From',
+            type: 'pie',
+            radius: [60, 90],
+            top: 'middle',
+            left: -50,
+            avoidLabelOverlap: false,
+            label: {
+              show: false,
+              position: 'center'
+            },
+            emphasis: {
+              label: {
+                show: false,
+                fontSize: 20,
+              }
+            },
+            labelLine: {
+              show: false
+            },
+            data: [
+              { value: 35, name: '已处理' },
+              { value: 35, name: '处理中' },
+              { value: 30, name: '未处理' },
+            ]
+          }
+        ]
+      },
+      echartObj6: {
+        tomorrow: 70,
+        happiness: 20,
+        hug: 10,
+        motherland: 90,
+        food: 50,
+
+      },
+      echartObj7:{
+
+        xAxis: {
+          type: 'category',
+          axisLabel: {//x轴文字的配置
+            show: true,
+            textStyle: {
+              color: "#fff",
+              fontSize: 10,
+            }
+          },
+          data: ['活动中心','广场','图书室','户外'],
+        },
+        yAxis: {
+          type: 'value',
+          axisLabel: {//y轴文字的配置
+            textStyle: {
+              color: "#fff",
+            },
+          },
+          splitLine: {
+            show: true,
+            lineStyle: {
+              type: 'dashed',
+              color: ['#1F7DAF']
+            }
+          },
+        },
+        series: [
+          {
+            data: [180,290,240,180],
+            type: 'custom',
+            renderItem: function (params, api) {
+              const index = params.seriesIndex;
+              let location = api.coord([api.value(0) + index, api.value(1)]);
+              var extent = api.size([0, api.value(1)]);
+              return {
+                type: 'group',
+                children: [
+                  {
+                    type: 'leftRect',
+                    shape: {
+                      api,
+                      xValue: api.value(0) + index,
+                      yValue: api.value(1),
+                      x: location[0],
+                      y: location[1]
+                    },
+                    style: api.style()
+                  },
+                  {
+                    type: 'rightRect',
+                    shape: {
+                      api,
+                      xValue: api.value(0) + index,
+                      yValue: api.value(1),
+                      x: location[0],
+                      y: location[1]
+                    },
+                    style: api.style()
+                  }
+                ]
+              };
+            },
+            barWidth: 18,
+            itemStyle: {
+              normal: {
+                // color: '#1B7EF2'
+                color: () => {
+                  return new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                    { offset: 0, color: 'rgba(26, 132, 191, 1)' },
+                    { offset: 1, color: 'rgba(27,126,242,0.00)' },
+                  ]);
+                },
+              }
+            }
+          },
+        ]
+      },
+      echartObj8: {
+        legend: {
+          show: true,
+          top: 'middle',
+          right: 0,
+          orient: 'vertical',
+          data: ['花篮','鲜花','文具','凳子','画册'],
+          textStyle: {
+            color: '#FFFFFF',
+            lineHeight: 18
+          },
+          formatter:  (name) => {
+            let data = this.echartObj8.series[0].data
+            let total = 0
+            let tarValue
+            for (let i = 0; i < data.length; i++) {
+              total += data[i].value
+              if (data[i].name == name) {
+                tarValue = data[i].value
+              }
+            }
+            //计算出百分比
+            let p = Math.round((tarValue / total) * 100) + '%'
+            return `${name}${p}`
+          }
+        },
+        color: ['#2B8EF3','#48E5E5','#3D7DFA','#68A400','#F5B12D','#D599FD'],
+        series: [
+          {
+            name: 'Access From',
+            type: 'pie',
+            radius: [60, 90],
+            top: 'middle',
+            left: -50,
+            avoidLabelOverlap: false,
+            label: {
+              show: false,
+              position: 'center'
+            },
+            emphasis: {
+              label: {
+                show: false,
+                fontSize: 20,
+              }
+            },
+            labelLine: {
+              show: false
+            },
+            data: [
+              { value: 32, name: '花篮' },
+              { value: 28, name: '鲜花' },
+              { value: 20, name: '文具' },
+              { value: 20, name: '凳子' },
+              { value: 20, name: '画册' },
+            ]
+          }
+        ]
+      },
+      echartObj9: {
+        tooltip: {
+          trigger: 'axis',
+          axisPointer: {
+            type: 'shadow'
+          }
+        },
+        xAxis: {
+          type: 'category',
+          axisLabel: {//x轴文字的配置
+            show: true,
+            textStyle: {
+              color: "#fff",
+              fontSize: 10,
+            }
+          },
+          data: ['1月','2月','3月','4月','5月','6月','7月','8月','9月','10月','11月','12月'],
+        },
+        yAxis: {
+          type: 'value',
+          axisLabel: {//y轴文字的配置
+            textStyle: {
+              color: "rgba(255, 255, 255, 0.64)",
+            },
+          },
+          splitLine: {
+            show: true,
+            lineStyle: {
+              type: 'dashed',
+              color: ['#1F7DAF']
+            }
+          },
+        },
+        series: [
+          {
+            data: [
+              {name: '1月', value: 300 },
+              {name: '2月', value: 460 },
+              {name: '3月', value: 280 },
+              {name: '4月', value: 490 },
+              {name: '5月', value: 370 },
+              {name: '6月', value: 280 },
+              {name: '7月', value: 480 },
+              {name: '8月', value: 560 },
+              {name: '9月', value: 510 },
+              {name: '10月', value: 430 },
+              {name: '11月', value: 290 },
+              {name: '12月', value: 150 },
+            ],
+            type: 'bar',
+            barWidth: 10,
+            barGap:'100%',
+            itemStyle: this.setSeriesItemStyle('huang'),
+          },
+        ]
+      },
+
+
+    }
+  },
+  created() {
+    this.init();
+  },
+  components: {
+    Echarts,
+    SvgIcon,
+
+  },
+  methods: {
+    init() {
+      this.getData();
+    },
+    search() {
+      this.init();
+    },
+    getData() {
+    },
+    setSeriesItemStyle(color, obj={}){
+      let colors = {
+        qing: ['#48E5E5', 'rgba(72,228,229,0.30)'],
+        lan: ['#2B8EF3', 'rgba(25,118,226,0.30)'],
+        // huang: ['#F5B12D', 'rgba(255,123,0,0.30)'],
+        huang: ['#FF7B00', 'rgba(255,123,0,0.30)'],
+        lv: ['#07F090', 'rgba(60,212,149,0.28)'],
+        zi: ['#9B64D3', 'rgba(155,100,211,0.24)'],
+      }
+      return {
+        normal: {
+          label: {
+            show: true,
+            position: 'top',
+            textStyle: {
+              color: '#FFFFFF',
+              fontSize: 12
+            },
+          },
+          color: () => {
+            return new this.$echarts.graphic.LinearGradient(0, 0, 0, 1, [
+              { offset: 0, color: colors[color][0] },
+              { offset: 1, color: colors[color][1] },
+            ]);
+          },
+          ...obj,
+        }
+      }
+    },
+  },
+};
+</script>
+
+<style lang="less" scoped>
+/deep/ .ant-progress-circle .ant-progress-text {
+  color: #FFFFFF;
+  font-size: 20px;
+}
+/deep/ .ant-progress-circle-trail{
+  stroke:#334D60 !important;
+}
+.main_box{
+  padding: 0 2rem;
+  > div{
+    padding: 0;
+  }
+  img{
+    max-width: 100%;
+  }
+  .home_center {
+    width: 49%;
+    padding: 0 10px;
+    .inner_box{
+      margin-top: 1%;
+    }
+   .center-top{
+     width: 100%;
+     height: 100%;
+     background-image: url(../../assets/img/activity/center-top.png);
+     background-repeat: no-repeat;
+     background-size: 100% 100%;
+   }
+
+    .center-left{
+      width: 49%;
+      height: 100%;
+      background-image: url(../../assets/img/activity/center-bottom1.png);
+      background-repeat: no-repeat;
+      background-size: 100% 100%;
+    }
+    .center-right{
+      width: 49%;
+      height: 97%;
+      border: 1px solid;
+      border-image: linear-gradient(180deg, rgba(1,105,178,0.20) 0%, #0169B2 100%) 1;
+      .center-right-title{
+        width: 100%;
+        height: 12%;
+        background-image: url(../../assets/img/activity/center-title.png);
+        background-repeat: no-repeat;
+        background-size: 100% 100%;
+      }
+    }
+  }
+
+  .inner_box{
+    overflow: hidden;
+  }
+  .home_left,
+  .home_right{
+    width: 24%;
+    .right-top{
+      width: 100%;
+      height: 33%;
+      background-image: url(../../assets/img/activity/right-top.png);
+      background-repeat: no-repeat;
+      background-size: 100% 100%;
+    }
+    .right-center{
+      width: 100%;
+      height: 24%;
+      background-image: url(../../assets/img/comprehensive/right1.png);
+      background-repeat: no-repeat;
+      background-size: 100% 100%;
+    }
+    .inner_box{
+      width: 99%;
+      height: 32%;
+      margin-left: 1%;
+    }
+  }
+}
+</style>
diff --git a/src/pages/page/08.vue b/src/pages/activity/index.vue
similarity index 79%
rename from src/pages/page/08.vue
rename to src/pages/activity/index.vue
index c8b0394..1fa18e4 100644
--- a/src/pages/page/08.vue
+++ b/src/pages/activity/index.vue
@@ -1,11 +1,19 @@
 <template>
   <div class="main">
+    <!--    <userStatus />-->
+    <!-- <h1>首页</h1> -->
+    <!--    <img class="h1" src="../../assets/img/h1.png" />-->
     <Header :headerObj="{title:'中科软养老大数据分析平台', index: '8'}"/>
-    <img src="@/assets/img/page2/08活动管理.png" alt="" style="width: 100vw;height: calc(100vh - 5vw);">
+    <home></home>
+    <!--    <Nav />-->
+    <!--    <img class="b" src="../../assets/img/1.png" alt="" />-->
   </div>
 </template>
 <script>
 import Header from '@/components/header'
+import home from './home.vue'
+import userStatus from "@/components/userStatus";
+import { Index } from "@/api/index";
 
 export default {
   name: "index",
@@ -26,9 +34,11 @@ export default {
   },
   components: {
     Header,
+    home,
+    userStatus,
   },
   methods: {
-     init() {
+    init() {
       this.getData();
     },
     getData() {
diff --git a/src/pages/live/home.vue b/src/pages/live/home.vue
index 2faaf39..09083e9 100644
--- a/src/pages/live/home.vue
+++ b/src/pages/live/home.vue
@@ -129,6 +129,7 @@
           <div class="center-bottom-title btm-til2"></div>
           <div class="chart_box">
             <Echarts
+                :key="echartObjKey"
                 class="echarts"
                 :echartObj="echartObj7"
             ></Echarts>
@@ -173,10 +174,78 @@ Vue.use(Progress);
 Vue.use(Divider);
 import Echarts from "@/components/echarts";
 import echarts from "echarts";
+// 定义柱状图左侧图形元素
+const leftRect = echarts.graphic.extendShape({
+  shape: {
+    x: 0,
+    y: 0,
+    width: 16, //柱状图宽
+    zWidth: 8, //阴影折角宽
+    zHeight: 4 //阴影折角高
+  },
+  buildPath: function (ctx, shape) {
+    const api = shape.api;
+    const xAxisPoint = api.coord([shape.xValue, 0]);
+    const p0 = [shape.x - shape.width / 2, shape.y - shape.zHeight];
+    const p1 = [shape.x - shape.width / 2, shape.y - shape.zHeight];
+    const p2 = [xAxisPoint[0] - shape.width / 2, xAxisPoint[1]];
+    const p3 = [xAxisPoint[0] + shape.width / 2, xAxisPoint[1]];
+    const p4 = [shape.x + shape.width / 2, shape.y];
 
+    ctx.moveTo(p0[0], p0[1]);
+    ctx.lineTo(p1[0], p1[1]);
+    ctx.lineTo(p2[0], p2[1]);
+    ctx.lineTo(p3[0], p3[1]);
+    ctx.lineTo(p4[0], p4[1]);
+    ctx.lineTo(p0[0], p0[1]);
+    ctx.closePath();
+  }
+});
+// 定义柱状图右侧以及顶部图形元素
+const rightRect = echarts.graphic.extendShape({
+  shape: {
+    x: 0,
+    y: 0,
+    width: 15,
+    zWidth: 12,
+    zHeight: 8
+  },
+  buildPath: function (ctx, shape) {
+    const api = shape.api;
+    const xAxisPoint = api.coord([shape.xValue, 0]);
+    const p1 = [shape.x - shape.width / 2, shape.y - shape.zHeight / 2];
+    const p3 = [xAxisPoint[0] + shape.width / 2, xAxisPoint[1]];
+    const p4 = [shape.x + shape.width / 2, shape.y];
+    const p5 = [xAxisPoint[0] + shape.width / 2 + shape.zWidth, xAxisPoint[1]];
+    const p6 = [
+      shape.x + shape.width / 2 + shape.zWidth,
+      shape.y - shape.zHeight / 2
+    ];
+    const p7 = [
+      shape.x - shape.width / 2 + shape.zWidth,
+      shape.y - shape.zHeight
+    ];
+    ctx.moveTo(p4[0], p4[1]);
+    ctx.lineTo(p3[0], p3[1]);
+    ctx.lineTo(p5[0], p5[1]);
+    ctx.lineTo(p6[0], p6[1]);
+    ctx.lineTo(p4[0], p4[1]);
+
+    ctx.moveTo(p4[0], p4[1]);
+    ctx.lineTo(p6[0], p6[1]);
+    ctx.lineTo(p7[0], p7[1]);
+    ctx.lineTo(p1[0], p1[1]);
+    ctx.lineTo(p4[0], p4[1]);
+    ctx.closePath();
+  }
+});
+// 注册图形元素
+echarts.graphic.registerShape('leftRect', leftRect);
+echarts.graphic.registerShape('rightRect', rightRect);
 export default {
   data() {
     return {
+      echartObjKey: "echartObjKey",
       // 各机构能床位TOP5
       echartObj1: {
         legend: {
diff --git a/src/router.js b/src/router.js
index 7bf9ce8..36fea66 100644
--- a/src/router.js
+++ b/src/router.js
@@ -74,9 +74,9 @@ export default new Router({
       }
     },
     {
-      path: '/08',
-      name: '08',
-      component: () => import('@/pages/page/08'),
+      path: '/activity',
+      name: 'activity',
+      component: () => import('@/pages/activity/index'),
       meta: {
         index: 0,
       }