diff --git a/src/assets/img/elder/5.png b/src/assets/img/elder/5.png
new file mode 100644
index 0000000..05b2909
Binary files /dev/null and b/src/assets/img/elder/5.png differ
diff --git a/src/assets/img/elder/6.png b/src/assets/img/elder/6.png
new file mode 100644
index 0000000..4e22ef8
Binary files /dev/null and b/src/assets/img/elder/6.png differ
diff --git a/src/components/header.vue b/src/components/header.vue
index 621bc0c..a9600ac 100644
--- a/src/components/header.vue
+++ b/src/components/header.vue
@@ -60,7 +60,8 @@ export default {
         },
         {
           index: "4",
-          title: "居住"
+          title: "居住",
+          path: "/live"
         },
         {
           index: "5",
diff --git a/src/pages/live/home.vue b/src/pages/live/home.vue
new file mode 100644
index 0000000..c787c34
--- /dev/null
+++ b/src/pages/live/home.vue
@@ -0,0 +1,1432 @@
+<template>
+  <div class="main_box">
+    <div class="home_left">
+      <InnerBox :echartObj="echartObj1" header_title="长者年龄分析" little_font="（人）" />
+      <InnerBox :echartObj="echartObj2" header_title="各机构长者数量TOP5" little_font="（人）" />
+      <InnerBox :echartObj="echartObj3" style="width: 99%;" header_title="各机构能力评估人数TOP5" little_font="（人）" />
+      <InnerBox :echartObj="echartObj4" style="width: 99%;" header_title="入住人数趋势分析" little_font="（人）" />
+
+      <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 echart5">
+          <div v-for="(item,index) in echartObj5.title">
+            <div style="flex-shrink: 0;margin-left: 10px;width: 30%;">{{item}}</div>
+            <div style="width: 5%;height: 1px;border-bottom: 1px dashed rgba(230, 247, 255, 0.5);"></div>
+            <div style="display: flex;justify-content: center;align-items: center;width: 100%;">
+              <div :style="'width:' + (100 - (echartObj5.data[index]/echartObj5Max*100)) / 2 + '%;height: 1px;border-bottom: 1px dashed rgba(230, 247, 255, 0.5);flex: 1;margin-right: 10px;'"></div>
+              <div :style="'width: '+ echartObj5.data[index]/echartObj5Max*100 + '%;height: 20px;border-radius: 2px;text-align: center;' + 'background:' + echartObj5.colors[index]">
+                <span style="font-size: 14px; font-weight: bold">{{echartObj5.data[index]}}</span>
+              </div>
+              <div :style="'width:' + (100 - (echartObj5.data[index]/echartObj5Max*100)) / 2 + '%;height: 1px;border-bottom: 1px dashed rgba(230, 247, 255, 0.5);flex: 1;margin-left: 10px;'"></div>
+            </div>
+            <div style="width: 5%;height: 1px;margin-right: 10px;border-bottom: 1px dashed rgba(230, 247, 255, 0.5);"></div>
+          </div>
+        </div>
+      </div>
+      <!--入住长者夫妻占比-->
+      <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>入住长者夫妻占比</span>
+              <span class="little_font">（%）</span>
+            </div>
+          </div>
+        </div>
+        <div class="box_content" style="flex-direction: row;">
+          <div class="chart_box" style="width: 49%; justify-content: center; align-items: center;display: flex;flex-direction: column">
+            <div style="border: solid 12px #004657; border-radius: 100%">
+              <a-progress :strokeWidth="13" type="circle" :stroke-color="{'9%': '#FA6400','89%': '#FEDB65'}" :percent="70" />
+            </div>
+            <div style="color: #FFFFFF;margin-top: 15px">夫妻</div>
+          </div>
+          <div class="chart_box" style="width: 49%; justify-content: center; align-items: center;display: flex;flex-direction: column">
+            <div style="border: solid 12px #004657; border-radius: 100%">
+              <a-progress :strokeWidth="13" type="circle" :stroke-color="{'9%': '#FA6400','89%': '#FEDB65'}" :percent="30" />
+            </div>
+            <div style="color: #FFFFFF;margin-top: 15px">非夫妻</div>
+          </div>
+        </div>
+      </div>
+    </div>
+    <div class="home_center">
+      <!--长者总数-->
+      <dv-border-box-11 title="长者总数" :color="['#48E5E5', '#1F7DAF']" style="height: 17%;">
+        <div class="zz">
+          <div class="zz1">
+            <div style="display: flex;align-items: center;">
+              <img src="@/assets/img/elder/1.png" alt="">
+              <div>
+                <div>长者总数</div>
+                <div><span>1761</span>人</div>
+              </div>
+            </div>
+            <div>
+              <div><i class="circle"></i>男性长者</div>
+              <div>1761人</div>
+            </div>
+            <div>
+              <div><i class="circle circle2"></i>女性长者</div>
+              <div>1761人</div>
+            </div>
+          </div>
+          <!-- <dv-border-box-8 :color="['#20F6A5', '#038F81']" class="zz1">
+            <div style="display: flex;align-items: center;">
+              <img src="@/assets/img/elder/1.png" alt="">
+              <div>
+                <div>长者总数</div>
+                <div><span>1761</span>人</div>
+              </div>
+            </div>
+            <div>
+              <div><i class="circle"></i>男性长者</div>
+              <div>1761人</div>
+            </div>
+            <div>
+              <div><i class="circle circle2"></i>女性长者</div>
+              <div>1761人</div>
+            </div>
+          </dv-border-box-8> -->
+          <dv-border-box-8 :color="['#EE7C11', '#E48900']" class="box8">
+            <img src="@/assets/img/elder/2.png" alt="">
+            <div>医疗人数</div>
+            <div><b>373</b>人</div>
+          </dv-border-box-8>
+          <dv-border-box-8 :color="['#053D7E', '#1E6FEA']" class="box8">
+            <img src="@/assets/img/elder/3.png" alt="">
+            <div>养护人数</div>
+            <div><b>595</b>人</div>
+          </dv-border-box-8>
+          <dv-border-box-8 :color="['#00D0FF', '#48E5E5']" class="box8">
+            <img src="@/assets/img/elder/4.png" alt="">
+            <div>颐养人数</div>
+            <div><b>490</b>人</div>
+          </dv-border-box-8>
+        </div>
+      </dv-border-box-11>
+
+      <dv-border-box-11 title="各机构、养老人数TOP5（人）" :titleWidth="400" :color="['#16ADDE', '#0C7DE7']" style="height: 20%;">
+        <Echarts class="echarts" :echartObj="echartObj7" />
+      </dv-border-box-11>
+
+      <!--能力评估-->
+      <dv-border-box-11 title="能力评估" :color="['#16ADDE', '#0C7DE7']" style="height: 17%;">
+        <div class="box_content" style="display: flex;flex-direction: row;">
+          <div class="chart_box" style="width: 25%; justify-content: center; align-items: center;display: flex;flex-direction: column">
+            <a-progress :strokeWidth="13" type="circle" :stroke-color="{'9%': '#16ADDE','89%': '#0C7DE7'}" :percent="8" />
+            <div style="color: #FFFFFF;">重度失能</div>
+          </div>
+          <div class="chart_box" style="width: 25%; justify-content: center; align-items: center;display: flex;flex-direction: column">
+            <a-progress :strokeWidth="13" type="circle" :stroke-color="{'9%': '#16ADDE','89%': '#0C7DE7'}" :percent="15" />
+            <div style="color: #FFFFFF;">中度失能</div>
+          </div>
+          <div class="chart_box" style="width: 25%; justify-content: center; align-items: center;display: flex;flex-direction: column">
+            <a-progress :strokeWidth="13" type="circle" :stroke-color="{'9%': '#16ADDE','89%': '#0C7DE7'}" :percent="35" />
+            <div style="color: #FFFFFF;">轻度失能</div>
+          </div>
+          <div class="chart_box" style="width: 25%; justify-content: center; align-items: center;display: flex;flex-direction: column">
+            <a-progress :strokeWidth="13" type="circle" :stroke-color="{'9%': '#16ADDE','89%': '#0C7DE7'}" :percent="42" />
+            <div style="color: #FFFFFF;">能力完好</div>
+          </div>
+        </div>
+      </dv-border-box-11>
+
+      <InnerBox :echartObj="echartObj8" style="width: 49%;height: 20%;" header_title="慢病统计" little_font="（人）" />
+      <InnerBox :echartObj="echartObj9" style="width: 49%;height: 20%;" header_title="一月内健康监测报警情况占比分析" little_font="（%）" />
+      <!-- <InnerBox :echartObj="echartObj10" header_title="" little_font="（%）" /> -->
+
+      <!--一月内未有亲友探视长者人数分析-->
+      <div class="inner_box" style="width: 49%;height: 20%;">
+        <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>一月内未有亲友探视长者人数分析</span>
+              <span class="little_font">（%）</span>
+            </div>
+          </div>
+        </div>
+        <div class="box_content">
+          <img src="@/assets/img/elder/5.png">
+        </div>
+      </div>
+      <!--一月内未参加活动长者人数分析-->
+      <div class="inner_box" style="width: 49%;height: 20%;">
+        <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>一月内未有亲友探视长者人数分析</span>
+              <span class="little_font">（人）</span>
+            </div>
+          </div>
+        </div>
+        <div class="box_content">
+          <img src="@/assets/img/elder/6.png">
+        </div>
+      </div>
+    </div>
+    <div class="home_right">
+      <InnerBox :echartObj="echartObj12" header_title="长者学历分析" little_font="(人)" />
+      <InnerBox :echartObj="echartObj13" header_title="长者婚姻分析" little_font="(人)" />
+
+      <!--长者子女人数情况分析-->
+      <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>长者子女人数情况分析</span>
+              <span class="little_font">（人）</span>
+            </div>
+          </div>
+        </div>
+        <div class="box_content">
+          <dv-capsule-chart :config="echartObj14" style="height: 100%" />
+        </div>
+      </div>
+      <InnerBox :echartObj="echartObj15" header_title="长者子女居住情况分析" />
+      <InnerBox :echartObj="echartObj16" header_title="长者子女年龄分析" little_font="(人)" />
+
+      <!-- 长者入住前居住情况统计 -->
+      <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>长者子女人数情况分析</span>
+              <span class="little_font">（人）</span>
+            </div>
+          </div>
+        </div>
+        <div class="box_content">
+          <dv-capsule-chart :config="echartObj17" style="height: 100%" />
+        </div>
+      </div>
+      <!--长者收入来源分析-->
+      <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>长者收入来源分析</span>
+              <span class="little_font">（人）</span>
+            </div>
+          </div>
+        </div>
+        <div class="box_content" style="flex-direction: row;">
+          <div class="chart_box" style="width: 50%; justify-content: center; align-items: center;display: flex;flex-direction: column">
+            <div style="border: solid 12px #004657; border-radius: 100%">
+              <a-progress :strokeWidth="13" type="circle" :stroke-color="{'9%': '#009CFF','89%': '#226C9B'}" :percent="70" />
+            </div>
+            <div style="color: #FFFFFF;">退休金</div>
+          </div>
+          <div class="chart_box" style="width: 50%; justify-content: center; align-items: center;display: flex;flex-direction: column">
+            <div style="border: solid 12px #004657; border-radius: 100%">
+              <a-progress :strokeWidth="13" type="circle" :stroke-color="{'9%': '#FA6400','89%': '#FEDB65'}" :percent="30" />
+            </div>
+            <div style="color: #FFFFFF;">子女赡养</div>
+          </div>
+        </div>
+      </div>
+      <!--抑郁、焦虑长者占比分析-->
+      <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>抑郁、焦虑长者占比分析</span>
+              <span class="little_font">（人）</span>
+            </div>
+          </div>
+        </div>
+        <div class="box_content" style="flex-direction: row;">
+          <div class="chart_box" style="width: 50%; justify-content: center; align-items: center;display: flex;flex-direction: column">
+            <div style="border: solid 12px #004657; border-radius: 100%">
+              <a-progress :strokeWidth="13" type="circle" :stroke-color="{'9%': '#009CFF','89%': '#226C9B'}" :percent="70" />
+            </div>
+            <div style="color: #FFFFFF;">心理健康</div>
+          </div>
+          <div class="chart_box" style="width: 50%; justify-content: center; align-items: center;display: flex;flex-direction: column">
+            <div style="border: solid 12px #004657; border-radius: 100%">
+              <a-progress :strokeWidth="13" type="circle" :stroke-color="{'9%': '#FA6400','89%': '#FEDB65'}" :percent="30" />
+            </div>
+            <div style="color: #FFFFFF;">抑郁、焦虑</div>
+          </div>
+        </div>
+      </div>
+    </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";
+
+export default {
+  data() {
+    return {
+      // 长者年龄分析
+      echartObj1: {
+        tooltip: {
+          trigger: 'axis',
+          axisPointer: {
+            type: 'shadow'
+          }
+        },
+        xAxis: {
+          type: 'category',
+          axisLabel: {//x轴文字的配置
+            show: true,
+            textStyle: {
+              color: "#fff",
+              fontSize: 10,
+            }
+          },
+          data: ['60-65岁','65-70岁','70-75岁','75-80岁','80-85岁','85岁以上'],
+        },
+        yAxis: {
+          type: 'value',
+          axisLabel: {//y轴文字的配置
+            textStyle: {
+              color: "rgba(255, 255, 255, 0.64)",
+            },
+          },
+          splitLine: {
+            show: true,
+            lineStyle: {
+              type: 'dashed',
+              color: ['#1F7DAF']
+            }
+          },
+        },
+        series: [
+          {
+            data: [
+              {name: '60-65岁', value: 120 },
+              {name: '65-70岁', value: 160 },
+              {name: '70-75岁', value: 150 },
+              {name: '75-80岁', value: 120 },
+              {name: '80-85岁', value: 80 },
+              {name: '85岁以上', value: 60 },
+            ],
+            type: 'bar',
+            barWidth: 10,
+            barGap:'100%',
+            itemStyle: this.setSeriesItemStyle('lan'),
+          },
+        ]
+      },
+      // 各机构长者数量TOP5
+      echartObj2: {
+        legend: {
+          show: true,
+          bottom: 10,
+          data: ['长者人数','男','女'],
+          textStyle: {
+            color: '#FFFFFF',
+            lineHeight: 10
+          },
+        },
+        color: ['#48E5E5','#2B8EF3','#F5B12D',],
+        tooltip: {
+          trigger: 'axis',
+          axisPointer: {
+            type: 'shadow'
+          }
+        },
+        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: [
+          {
+            name: '长者人数',
+            data: [
+              {name: '长者人数', value: 457},
+              {name: '男', value: 1300},
+              {name: '女', value: 950},
+            ],
+            type: 'bar',
+            barWidth: 10,
+            barGap:'100%',
+            itemStyle: this.setSeriesItemStyle('qing'),
+          },
+          {
+            name: '男',
+            data: [
+              {name: '长者人数', value: 136},
+              {name: '男', value: 600},
+              {name: '女', value: 245},
+            ],
+            type: 'bar',
+            barGap:'100%',
+            barWidth: 10,
+            itemStyle: this.setSeriesItemStyle('lan'),
+          },
+          {
+            name: '女',
+            data: [
+              {name: '长者人数', value: 321},
+              {name: '男', value: 700},
+              {name: '女', value: 750}
+            ],
+            type: 'bar',
+            barGap:'100%',
+            barWidth: 10,
+            itemStyle: this.setSeriesItemStyle('huang'),
+          },
+        ]
+      },
+      // 各机构能力评估人数TOP5
+      echartObj3: {
+        legend: {
+          show: true,
+          bottom: 10,
+          data: ['总人数','重度失能','中度失能','轻度失能','能力完好'],
+          textStyle: {
+            color: '#FFFFFF',
+            lineHeight: 10
+          },
+        },
+        color: ['#07F090','#2B8EF3','#FF7B00','#48E5E5','#9B64D3'],
+        tooltip: {
+          trigger: 'axis',
+          axisPointer: {
+            type: 'shadow'
+          }
+        },
+        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: [
+          {
+            name: '总人数',
+            data: [
+              {name: '深业颐居', value: 358},
+              {name: '深业龙投', value: 916},
+              {name: '深业世纪山谷', value: 486},
+            ],
+            type: 'bar',
+            barGap:'100%',
+            barWidth: 10,
+            itemStyle: this.setSeriesItemStyle('lv'),
+          },
+          {
+            name: '重度失能',
+            data: [
+              {name: '深业颐居', value: 98},
+              {name: '深业龙投', value: 198},
+              {name: '深业世纪山谷', value: 77},
+            ],
+            type: 'bar',
+            barWidth: 10,
+            barGap:'100%',
+            itemStyle: this.setSeriesItemStyle('lan'),
+          },
+          {
+            name: '中度失能',
+            data: [
+              {name: '深业颐居', value: 232},
+              {name: '深业龙投', value: 361},
+              {name: '深业世纪山谷', value: 247},
+            ],
+            type: 'bar',
+            barGap:'100%',
+            barWidth: 10,
+            itemStyle: this.setSeriesItemStyle('huang'),
+          },
+          {
+            name: '轻度失能',
+            data: [
+              {name: '深业颐居', value: 28},
+              {name: '深业龙投', value: 357},
+              {name: '深业世纪山谷', value: 152},
+            ],
+            type: 'bar',
+            barGap:'100%',
+            barWidth: 10,
+            itemStyle: this.setSeriesItemStyle('qing'),
+          },
+          {
+            name: '能力完好',
+            data: [
+              {name: '深业颐居', value: 28},
+              {name: '深业龙投', value: 28},
+              {name: '深业世纪山谷', value: 28},
+            ],
+            type: 'bar',
+            barGap:'100%',
+            barWidth: 10,
+            itemStyle: this.setSeriesItemStyle('zi'),
+          },
+        ]
+      },
+      // 入住人数趋势分析
+      echartObj4: {
+        tooltip: {
+          trigger: 'axis',
+          axisPointer: {
+            type: 'cross',
+            label: {
+              backgroundColor: '#6a7985'
+            }
+          }
+        },
+        xAxis: [
+          {
+            type: 'category',
+            boundaryGap: false,
+            axisLabel: {//x轴文字的配置
+              show: true,
+              interval: 0, // 强制文字全部显示
+              textStyle: {
+                color: "#fff",
+                fontSize: 10,
+              }
+            },
+            data: ['2022年9月','2022年10月','2022年11月','2022年12月','2023年1月','2023年2月','2023年3月'],
+          }
+        ],
+        yAxis: [
+          {
+            type: 'value',
+            axisLabel: {//y轴文字的配置
+              textStyle: {
+                color: "#fff",
+              },
+            },
+            splitLine: {
+              show: true,
+              lineStyle: {
+                type: 'dashed',
+                color: ['#1F7DAF']
+              }
+            },
+          }
+        ],
+        series: [
+          {
+            type: 'line',
+            stack: 'Total',
+            smooth: true,
+            lineStyle: {
+              width: 2,
+              color: ['rgba(255,167,85,1)']
+            },
+            showSymbol: false,
+            areaStyle: {
+              opacity: 0.8,
+              color: new this.$echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                {
+                  offset: 0,
+                  color: 'rgba(255,167,85,0.35)'
+                },
+                {
+                  offset: 0.48,
+                  color: 'rgba(255,167,85,0.21)'
+                },
+                {
+                  offset: 0.99,
+                  color: 'rgba(255,167,85,0.00)'
+                }
+              ])
+            },
+            emphasis: {
+              focus: 'series'
+            },
+            data: [90, 87, 100, 146, 130, 90, 150, 190, 180, 140]
+          }
+        ]
+      },
+      // 护理服务需求TOP5
+      echartObj5Max: 135,
+      echartObj5: {
+        title: ['衣物清洗','助餐','助浴','康复训练','陪同散步',],
+        data: [135,132,88,70,60],
+        colors: ['#FA6C06', '#F5B12D', '#1974DF', '#18DFE8', '#0CB872'],
+      },
+      // 入住长者夫妻占比
+      echartObj6: {
+        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: ['深业颐居','深业龙投','深业世纪山谷'],
+        },
+        yAxis: {
+          type: 'value',
+          axisLabel: {//y轴文字的配置
+            textStyle: {
+              color: "#fff",
+            },
+          },
+          splitLine: {
+            show: true,
+            lineStyle: {
+              type: 'dashed',
+              color: ['#1F7DAF']
+            }
+          },
+        },
+        series: [
+          {
+            name: '总床位',
+            data: [
+              {name: '总床位', value: 457},
+              {name: '医疗床位', value: 1300},
+              {name: '养老床位', value: 950},
+            ],
+            type: 'bar',
+            barWidth: 10,
+            barGap:'100%',
+            itemStyle: {
+              normal: {
+                label: {
+                  show: true,
+                  position: 'top',
+                  textStyle: {
+                    color: '#FFFFFF',
+                    fontSize: 10
+                  },
+                },
+                color: () => {
+                  return new this.$echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                    { offset: 0, color: '#1976E2' },
+                    { offset: 1, color: 'rgba(25,118,226,0.30)' },
+                  ]);
+                },
+              }
+            },
+          },
+          {
+            name: '医疗床位',
+            data: [
+              {name: '总床位', value: 136},
+              {name: '医疗床位', value: 600},
+              {name: '养老床位', value: 245},
+            ],
+            type: 'bar',
+            barGap:'100%',
+            barWidth: 10,
+            itemStyle: {
+              normal: {
+                label: {
+                  show: true,
+                  position: 'top',
+                  textStyle: {
+                    color: '#FFFFFF',
+                    fontSize: 10
+                  },
+                },
+                color: () => {
+                  return new this.$echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                    { offset: 0, color: '#FF7B00' },
+                    { offset: 1, color: 'rgba(255,123,0,0.30)' },
+                  ]);
+                },
+              }
+            },
+          },
+          {
+            name: '养老床位',
+            data: [
+                {name: '总床位', value: 321},
+                {name: '医疗床位', value: 700},
+                {name: '养老床位', value: 750}
+                ],
+            type: 'bar',
+            barGap:'100%',
+            barWidth: 10,
+            itemStyle: {
+              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: '#48E5E5' },
+                    { offset: 1, color: 'rgba(72,228,229,0.30)' },
+                  ]);
+                }
+              }
+            },
+          },
+        ]
+      },
+      // 各机构、养老人数TOP5(人)
+      echartObj7: {
+        legend: {
+          show: true,
+          orient: 'vertical', // 图例竖着显示
+          right: 0,
+          data: ['总人数','医疗人数','养护人数','颐养人数'],
+          textStyle: {
+            color: '#FFFFFF',
+            lineHeight: 10
+          },
+        },
+        color: ['#07F090','#FF7B00','#2B8EF3','#48E5E5',],
+        tooltip: {
+          trigger: 'axis',
+          axisPointer: {
+            type: 'shadow'
+          }
+        },
+        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: [
+          {
+            name: '总人数',
+            data: [
+              {name: '深业颐居', value: 358},
+              {name: '深业龙投', value: 916},
+              {name: '深业世纪山谷', value: 486},
+            ],
+            type: 'bar',
+            barWidth: 10,
+            barGap:'100%',
+            itemStyle: this.setSeriesItemStyle('lv'),
+          },
+          {
+            name: '医疗人数',
+            data: [
+              {name: '深业颐居', value: 98},
+              {name: '深业龙投', value: 198},
+              {name: '深业世纪山谷', value: 77},
+            ],
+            type: 'bar',
+            barGap:'100%',
+            barWidth: 10,
+            itemStyle: this.setSeriesItemStyle('huang'),
+          },
+          {
+            name: '养护人数',
+            data: [
+              {name: '深业颐居', value: 232},
+              {name: '深业龙投', value: 361},
+              {name: '深业世纪山谷', value: 247},
+            ],
+            type: 'bar',
+            barGap:'100%',
+            barWidth: 10,
+            itemStyle: this.setSeriesItemStyle('lan'),
+          },
+          {
+            name: '颐养人数',
+            data: [
+              {name: '深业颐居', value: 28},
+              {name: '深业龙投', value: 357},
+              {name: '深业世纪山谷', value: 152},
+            ],
+            type: 'bar',
+            barGap:'100%',
+            barWidth: 10,
+            itemStyle: this.setSeriesItemStyle('qing'),
+          },
+        ]
+      },
+      // 慢病统计
+      echartObj8: {
+        radar: {
+          indicator: [
+            { name: '高血压', max: 25,},
+            { name: '糖尿病', max: 25, axisLabel:{show:false}},
+            { name: '冠心病', max: 25,axisLabel:{show:false} },
+            { name: '心肌梗塞', max: 25,axisLabel:{show:false} },
+            { name: '慢性胃炎', max: 25,axisLabel:{show:false}},
+          ],
+          radius: '90%', // 坐标轴半径占可显示区域的比例
+          axisLine: { // 坐标轴样式
+            lineStyle: {
+              color: '#BBBBBB',
+              type: 'solid',
+              width: 1
+            }
+          },
+          axisTick: { // 氪度线样式
+            lineStyle: {
+            },
+          },
+          axisLabel: {// 是否展示坐标数字
+            show: true
+          },
+          splitArea: { // 坐标轴分隔区显示颜色:默认是一深一浅的间隔颜色，这里我们设置间隔之间是空白
+            areaStyle: {
+              opacity: 0.5,
+              color: ['#032750','rgba(25, 118, 226, 0.2)'],
+            }
+          },
+          splitLine: { // 分割线样式
+            lineStyle: {
+              color: 'rgba(25, 118, 226, 0.2)',
+              type: 'solid',
+              width: 1
+            }
+          },
+          axisName: { // 指示器样式
+            color: '#FFFFFF',
+            fontSize: 16
+          },
+        },
+        series: [
+          {
+            type: 'radar',
+            data: [
+              {
+                value: [12, 25, 3, 12, 20],
+                name: 'Allocated Budget'
+              },
+            ],
+            itemStyle: {
+              color: new this.$echarts.graphic.LinearGradient(0, 0, 0, 1,[{ offset: 0, color: 'rgba(72,228,229,0.73)' },{ offset: 1, color: 'rgba(72,228,229,0.17)' }])
+            },
+            areaStyle: {// 雷达图辐射区域的样式
+              color: new this.$echarts.graphic.LinearGradient(0, 0, 0, 1,[{ offset: 0, color: 'rgba(72,228,229,0.73)' },{ offset: 1, color: 'rgba(72,228,229,0.17)' }])
+            },
+          }
+        ]
+      },
+      // 一月内健康监测报警情况占比分析
+      echartObj9: {
+        tooltip: {
+          trigger: 'item',
+          formatter: '{a} <br/>{b} : {c} ({d}%)'
+        },
+        legend: {
+          right: '0',
+          top: '0',
+          orient: 'vertical',
+          data: ['血压异常', '心率异常', '呼吸异常','跌倒',],
+          textStyle: {
+            color: '#FFFFFF',
+            lineHeight: 18
+          },
+          formatter: (name) => {
+            let data = this.echartObj9.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, 2) + '%'
+            return `${name}(${p})`
+          }
+        },
+        color: ['#2B8EF3','#48E5E5','#F5B12D','#3CD495'],
+        toolbox: {
+          show: false,
+          feature: {
+            mark: {show: true},
+            dataView: {show: true, readOnly: false},
+            magicType: {
+              show: true,
+              type: ['pie', 'funnel']
+            },
+            restore: {show: true},
+            saveAsImage: {show: true}
+          }
+        },
+        series: [
+          {
+            name: '占比分析',
+            type: 'pie',
+            radius: [20, 80],
+            roseType: 'area',
+            top: 'middle',
+            left: -100,
+            label: {
+              show: false,
+              position: 'inside',
+              formatter: '{d}%',
+            },
+            data: [
+              {value: 40, name: '血压异常'},
+              {value: 30, name: '心率异常'},
+              {value: 20, name: '呼吸异常'},
+              {value: 10, name: '跌倒'},
+            ]
+          }
+        ]
+      },
+      // 一月内未有亲友探视长者人数分析
+      echartObj10: {},
+      // 一月内未参加活动长者人数分析
+      echartObj11: {},
+      // 长者学历分析
+      echartObj12: {
+        tooltip: {
+          trigger: 'axis',
+          axisPointer: {
+            type: 'shadow'
+          }
+        },
+        xAxis: {
+          type: 'category',
+          axisLabel: {//x轴文字的配置
+            show: true,
+            textStyle: {
+              color: "#fff",
+              fontSize: 10,
+            }
+          },
+          data: ['博士','硕士','本科','大专','高中','初中','小学'],
+        },
+        yAxis: {
+          type: 'value',
+          axisLabel: {//y轴文字的配置
+            textStyle: {
+              color: "rgba(255, 255, 255, 0.64)",
+            },
+          },
+          splitLine: {
+            show: true,
+            lineStyle: {
+              type: 'dashed',
+              color: ['#1F7DAF']
+            }
+          },
+        },
+        series: [
+          {
+            data: [
+              {name: '博士', value: 110 },
+              {name: '硕士', value: 200 },
+              {name: '本科', value: 170 },
+              {name: '大专', value: 120 },
+              {name: '高中', value: 160 },
+              {name: '初中', value: 160 },
+              {name: '小学', value: 20 },
+            ],
+            type: 'bar',
+            barWidth: 10,
+            barGap:'100%',
+            itemStyle: this.setSeriesItemStyle('lan', {label: {show: false}}),
+          },
+        ]
+      },
+      // 长者婚姻分析
+      echartObj13: {
+        tooltip: {
+          trigger: 'axis',
+          axisPointer: {
+            type: 'shadow'
+          }
+        },
+        xAxis: {
+          type: 'category',
+          axisLabel: {//x轴文字的配置
+            show: true,
+            textStyle: {
+              color: "#fff",
+              fontSize: 10,
+            }
+          },
+          data: ['未婚','已婚','离异','丧偶',],
+        },
+        yAxis: {
+          type: 'value',
+          axisLabel: {//y轴文字的配置
+            textStyle: {
+              color: "rgba(255, 255, 255, 0.64)",
+            },
+          },
+          splitLine: {
+            show: true,
+            lineStyle: {
+              type: 'dashed',
+              color: ['#1F7DAF']
+            }
+          },
+        },
+        series: [
+          {
+            data: [
+              {name: '未婚', value: 410 },
+              {name: '已婚', value: 190 },
+              {name: '离异', value: 291 },
+              {name: '丧偶', value: 200 },
+            ],
+            type: 'bar',
+            barWidth: 20,
+            barGap:'100%',
+            itemStyle: this.setSeriesItemStyle('lan'),
+          },
+        ]
+      },
+      // 长者子女人数情况分析
+      echartObj14: {
+        data: [
+          {
+            name: '独生子女',
+            value: 537
+          },
+          {
+            name: '2个子女',
+            value: 631
+          },
+          {
+            name: '3个及以上',
+            value: 482
+          },
+          {
+            name: '无子女',
+            value: 432
+          },
+        ],
+        colors: ['#08EC8F', '#2B8EF3', '#08FFFF', '#F5B12D'],
+        unit: '单位(人)',
+        showValue: true
+      },
+      // 长者子女居住情况分析
+      echartObj15: {
+        legend: {
+          show: true,
+          top: 'middle',
+          right: 0,
+          orient: 'vertical',
+          data: ['国内同城', '国内省外', '国外',],
+          textStyle: {
+            color: '#FFFFFF',
+            lineHeight: 18
+          },
+          formatter:  (name) => {
+            let data = this.echartObj15.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: ['#507AFC','#48E5E5','#FAC858'],
+        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: 75, name: '国内同城' },
+              { value: 15, name: '国内省外' },
+              { value: 5, name: '国外' },
+            ]
+          }
+        ]
+      },
+      // 长者子女年龄分析
+      echartObj16: {
+        tooltip: {
+          trigger: 'axis',
+          axisPointer: {
+            type: 'shadow'
+          }
+        },
+        xAxis: {
+          type: 'category',
+          axisLabel: {//x轴文字的配置
+            show: true,
+            textStyle: {
+              color: "#fff",
+              fontSize: 10,
+            }
+          },
+          data: ['60-65岁','65-70岁','70-75岁','75-80岁','80-85岁','85岁以上'],
+        },
+        yAxis: {
+          type: 'value',
+          axisLabel: {//y轴文字的配置
+            textStyle: {
+              color: "rgba(255, 255, 255, 0.64)",
+            },
+          },
+          splitLine: {
+            show: true,
+            lineStyle: {
+              type: 'dashed',
+              color: ['#1F7DAF']
+            }
+          },
+        },
+        series: [
+          {
+            data: [
+              {name: '60-65岁', value: 120 },
+              {name: '65-70岁', value: 160 },
+              {name: '70-75岁', value: 150 },
+              {name: '75-80岁', value: 120 },
+              {name: '80-85岁', value: 80 },
+              {name: '85岁以上', value: 60 },
+            ],
+            type: 'bar',
+            barWidth: 10,
+            barGap:'100%',
+            itemStyle: this.setSeriesItemStyle('lan'),
+          },
+        ]
+      },
+      // 长者入住前居住情况统计
+      echartObj17: {
+        data: [
+          {
+            name: '与子女同住',
+            value: 537
+          },
+          {
+            name: '空巢老人',
+            value: 631
+          },
+          {
+            name: '独居老人',
+            value: 482
+          },
+          {
+            name: '集中居住',
+            value: 432
+          },
+          {
+            name: '与亲友同住',
+            value: 432
+          },
+          {
+            name: '其他',
+            value: 432
+          },
+        ],
+        colors: ['#08EC8F', '#2B8EF3', '#08FFFF', '#F5B12D'],
+        // unit: '单位(人)',
+        // showValue: true
+      },
+    }
+  },
+  created() {
+    this.init();
+  },
+  components: {
+    Echarts,
+  },
+  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;
+  }
+  .inner_box{
+    overflow: hidden;
+  }
+  .home_left,
+  .home_right{
+    width: 30%;
+    .inner_box{
+      margin-left: 1%;
+    }
+  }
+  .home_center{
+    width: 40%;
+    padding: 0 1em;
+    .dv-border-box-11 {
+      font-size: 1rem;
+      /deep/ .border-box-content {
+        padding: 4rem 1.5rem 1rem;
+      }
+    }
+    .zz{
+      display: flex;
+      justify-content: space-between;
+      align-items: center;
+      height: 100%;
+      overflow: hidden;
+      .dv-border-box-8{
+        margin-right: 1%;
+      }
+      .box8{
+        width: 15%;
+        /deep/ .border-box-content {
+          padding: 0;
+          display: flex;
+          flex-direction: column;
+          justify-content: center;
+          align-items: center;
+        }
+      }
+      .zz1{
+        width: 50%;
+        background: linear-gradient(89deg, #088152 3%, #01190C 99%);
+        padding: 0 1rem;
+
+        height: 100%;
+        border-radius: 100vw;
+        border: 3px solid #038F81;
+        display: flex;
+        justify-content: space-between;
+        align-items: center;
+
+        /*/deep/ .border-box-content{
+          padding: 0;
+          display: flex;
+          justify-content: space-between;
+          align-items: center;
+        }*/
+        .circle{
+          display: inline-block;
+          position: absolute;
+          width: 12px;
+          height: 1.5em;
+          border-left: 1px solid;
+          border-bottom: 1px solid;
+          border-color: #00B4FF;
+          margin-left: -12px;
+          // margin-top: -0.5em;
+          &:after{
+            content: "";
+            display: block;
+            width: 7px;
+            height: 7px;
+            border-radius: 7px;
+            background: #00B4FF;
+            position: absolute;
+            margin-top: -7px;
+            margin-left: -3.5px;
+          }
+        }
+        .circle2{
+          border-color: #F77802;
+          &:after{
+            background: #F77802;
+          }
+        }
+      }
+    }
+    .inner_box /deep/ .box_content{
+      flex: 1;
+      height: calc(100% - 60px);
+    }
+  }
+  .echart5{
+    > div{
+      font-size: 1rem;
+      color: #FFFFFF;
+      width: 100%;
+      display: flex;
+      align-items: center;
+      margin-bottom: 0.8rem;
+      &:last-child{
+        margin: 0;
+      }
+    }
+  }
+}
+</style>
diff --git a/src/pages/live/index.vue b/src/pages/live/index.vue
new file mode 100644
index 0000000..7318ac6
--- /dev/null
+++ b/src/pages/live/index.vue
@@ -0,0 +1,91 @@
+<template>
+  <div class="main">
+    <!--    <userStatus />-->
+    <!-- <h1>首页</h1> -->
+    <!--    <img class="h1" src="../../assets/img/h1.png" />-->
+    <Header :headerObj="{title:'深圳颐居养老大数据分析平台', index: '3'}"/>
+    <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",
+  data: function () {
+    return {
+      param: {
+        startYear: "",
+        endYear: "",
+      },
+    };
+  },
+  created() {
+    this.param = {
+      startYear: "",
+      endYear: "",
+    };
+    // this.init();
+  },
+  components: {
+    Header,
+    home,
+    userStatus,
+  },
+  methods: {
+    init() {
+      this.getData();
+    },
+    getData() {
+      Index(this.param).then((res) => {
+        console.log(res);
+      });
+    },
+  },
+};
+</script>
+<style scoped lang="less">
+.main {
+  height: 100%;
+  background: url(../../assets/img/bigScreen/background.jpg) no-repeat;
+  background-size: 100% 100%;
+  /deep/ .modal,
+  /deep/ .el-icon-close {
+    display: none;
+  }
+  h1 {
+    font-size: 50px;
+    font-weight: 600;
+    padding-top: 50px;
+    text-align: center;
+    -webkit-line-clamp: 2;
+    background-image: -webkit-linear-gradient(bottom, #eefcff, #51dcfe);
+    -webkit-background-clip: text;
+    -webkit-text-fill-color: transparent;
+  }
+  .h1 {
+    position: absolute;
+    left: 50%;
+    margin-left: -509px;
+  }
+  //.b {
+  //  position: absolute;
+  //  bottom: 0;
+  //  width: 100%;
+  //  // animation:turn 10s linear infinite;
+  //}
+  @keyframes turn {
+    0% {
+      transform: rotateX(0deg) rotateY(0deg) rotateZ(0deg);
+    }
+    100% {
+      transform: rotateX(0deg) rotateY(180deg) rotateZ(0deg);
+    }
+  }
+}
+</style>
diff --git a/src/router.js b/src/router.js
index 2ce376a..5aaa0b0 100644
--- a/src/router.js
+++ b/src/router.js
@@ -47,6 +47,15 @@ export default new Router({
         index: 0,
       }
     },
+    /*居住*/
+    {
+      path: '/live',
+      name: 'live',
+      component: () => import('@/pages/live/index'),
+      meta: {
+        index: 0,
+      }
+    },
     // 首页
     {
       path: '/home',