diff --git a/src/assets/img/elder/1.png b/src/assets/img/elder/1.png
new file mode 100644
index 0000000..30c5335
Binary files /dev/null and b/src/assets/img/elder/1.png differ
diff --git a/src/assets/img/elder/2.png b/src/assets/img/elder/2.png
new file mode 100644
index 0000000..3867fc8
Binary files /dev/null and b/src/assets/img/elder/2.png differ
diff --git a/src/assets/img/elder/3.png b/src/assets/img/elder/3.png
new file mode 100644
index 0000000..bf14146
Binary files /dev/null and b/src/assets/img/elder/3.png differ
diff --git a/src/assets/img/elder/4.png b/src/assets/img/elder/4.png
new file mode 100644
index 0000000..81a8b6e
Binary files /dev/null and b/src/assets/img/elder/4.png differ
diff --git a/src/components/InnerBox.vue b/src/components/InnerBox.vue
new file mode 100644
index 0000000..541862b
--- /dev/null
+++ b/src/components/InnerBox.vue
@@ -0,0 +1,44 @@
+<template>
+  <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>{{header_title}}</span>
+          <span class="little_font" v-if="little_font">{{little_font}}</span>
+        </div>
+      </div>
+    </div>
+    <div class="box_content">
+      <div class="chart_box">
+        <Echarts class="echarts" :echartObj="echartObj" />
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+  import Echarts from "@/components/echarts";
+  export default {
+    name: "InnerBox",
+    components: {
+      Echarts,
+    },
+    data () {
+      return {
+      }
+    },
+    props: ['echartObj', 'header_title', 'little_font'],
+    computed: {},
+    created () {},
+    methods: {},
+  }
+</script>
+
+<style scoped lang="less">
+
+</style>
\ No newline at end of file
diff --git a/src/main.js b/src/main.js
index e92783a..ca445cf 100644
--- a/src/main.js
+++ b/src/main.js
@@ -36,6 +36,9 @@ Vue.prototype.formatNum = formatNum
 import VueCookies from 'vue-cookies'
 Vue.use(VueCookies)
 
+import InnerBox from '@/components/InnerBox.vue'
+// Vue.use(InnerBox)
+Vue.component('InnerBox', InnerBox)
 
 // 表格懒加载 自定义指令
 Vue.directive('loadmore', {
diff --git a/src/pages/elder/home.vue b/src/pages/elder/home.vue
index 764393b..01f1cfe 100644
--- a/src/pages/elder/home.vue
+++ b/src/pages/elder/home.vue
@@ -1,36 +1,612 @@
 <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 class="div1">{{item}}</div>
+            <div class="div2"></div>
+            <div class="div3">
+              <div class="div4" :style="'width:' + (100 - (echartObj5.data[index]/echartObj5Max*100)) / 2 + '%;'"></div>
+              <div class="div5" :style="'width: '+ echartObj5.data[index]/echartObj5Max*100 + '%;'">
+                <span style="font-size: 14px; font-weight: bold">{{echartObj5.data[index]}}</span>
+              </div>
+              <div class="div6" :style="'width:' + (100 - (echartObj5.data[index]/echartObj5Max*100)) / 2 + '%;'"></div>
+            </div>
+            <div class="div7"></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">
+      <!--长者总数-->
+      <div class="inner_box" style="height: 17%;">
+        <div class="inner_header">
+          <div class="header_title">
+            <div>
+              <span>长者总数</span>
+            </div>
+          </div>
+        </div>
+        <div class="zz">
+          <div>
+            <div>
+              <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>
+          <div>
+            <img src="@/assets/img/elder/2.png" alt="">
+            <div>医疗人数</div>
+            <div>373</div>
+          </div>
+          <div>
+            <img src="@/assets/img/elder/3.png" alt="">
+            <div>养护人数</div>
+            <div>595</div>
+          </div>
+          <div>
+            <img src="@/assets/img/elder/4.png" alt="">
+            <div>颐养人数</div>
+            <div>490</div>
+          </div>
+        </div>
+      </div>
     </div>
     <div class="home_right">
+      <InnerBox :echartObj="echartObj1" header_title="长者年龄分析" little_font="(人)" />
+      <InnerBox :echartObj="echartObj1" header_title="长者年龄分析" little_font="(人)" />
+      <InnerBox :echartObj="echartObj1" header_title="长者年龄分析" little_font="(人)" />
+      <InnerBox :echartObj="echartObj1" header_title="长者年龄分析" little_font="(人)" />
+      <InnerBox :echartObj="echartObj1" header_title="长者年龄分析" little_font="(人)" />
+      <InnerBox :echartObj="echartObj1" header_title="长者年龄分析" little_font="(人)" />
+      <InnerBox :echartObj="echartObj1" header_title="长者年龄分析" little_font="(人)" />
+      <InnerBox :echartObj="echartObj1" header_title="长者年龄分析" little_font="(人)" />
     </div>
   </div>
 </template>
 
 <script>
-import echarts from "echarts";
 import Vue from 'vue'
-import Echarts from "@/components/echarts";
 import { Progress,Divider } from 'ant-design-vue';
-import SvgIcon from '@/components/svgIcon.vue';
 Vue.use(Progress);
 Vue.use(Divider);
-import { fxjIndex } from "@/api/cultApi";
-import {createOperationLog} from "@/api/api"
+
 export default {
   data() {
-    let self = this
     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],
+      },
+      // 入住长者夫妻占比
+      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)' },
+                  ]);
+                }
+              }
+            },
+          },
+        ]
+      },
     }
   },
   created() {
     this.init();
   },
   components: {
-    Echarts,
-    SvgIcon,
   },
   methods: {
     init() {
@@ -41,9 +617,185 @@ export default {
     },
     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 48px;
+  > div{
+    padding: 0;
+  }
+  .home_left,
+  .home_right{
+    width: 30%;
+  }
+  .home_center{
+    width: 40%;
+    padding: 0 24px;
+    .zz{
+      padding: 16px 30px;
+      height: calc(100% - 60px);
+      display: flex;
+      justify-content: space-between;
+      >div{
+        text-align: center;
+        border: 1px solid;
+        border-image: linear-gradient(180deg, rgba(238,124,17,0.32) 0%, #E48900 100%) 1;
+        // border-image: linear-gradient(180deg, #20F6A5 0%, #00bbf2 20%, #038F81 99%) 1 1 1 1;
+        // border-radius: 10000px;
+        padding: 0 16px;
+      }
+      >div:nth-child(1){
+        width: 50%;
+        padding: 16px 30px 16px 0;
+        display: flex;
+        justify-content: space-between;
+        align-items: center;
+        background: linear-gradient(89deg, #088152 3%, #01190C 99%);
+        border: 3px solid #08B975;
+        border-radius: 10000px;
+        .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;
+          }
+        }
+        >div:nth-child(1){
+          display: flex;
+          align-items: center;
+          img{
+            height: 100%;
+          }
+        }
+      }
+    }
+  }
+  .echart5{
+    > div{
+      font-size: 1rem;
+      color: #FFFFFF;
+      width: 100%;
+      display: flex;
+      align-items: center;
+      margin-bottom: 16px;
+      &:last-child{
+        margin: 0;
+      }
+      &:nth-child(1) .div5{
+        background: #FA6C06;
+      }
+      &:nth-child(2) .div5{
+        background: #F5B12D;
+      }
+      &:nth-child(3) .div5{
+        background: #1974DF;
+      }
+      &:nth-child(4) .div5{
+        background: #18DFE8;
+      }
+      &:nth-child(5) .div5{
+        background: #0CB872;
+      }
+    }
+    .div1{
+      flex-shrink: 0;
+      margin-left: 10px;
+      width: 30%;
+    }
+    .div2{
+      width: 5%;
+      height: 1px;
+      border-bottom: 1px dashed rgba(230, 247, 255, 0.5);
+    }
+    .div3{
+      display: flex;
+      justify-content: center;
+      align-items: center;
+      width: 100%;
+    }
+    .div4{
+      height: 1px;
+      border-bottom: 1px dashed rgba(230, 247, 255, 0.5);
+      flex: 1;
+      margin-right: 10px;
+    }
+    .div5{
+      height: 20px;
+      border-radius: 2px;
+      text-align: center;
+    }
+    .div6{
+      height: 1px;
+      border-bottom: 1px dashed rgba(230, 247, 255, 0.5);
+      flex: 1;
+      margin-left: 10px;
+    }
+    .div7{
+      width: 5%;
+      height: 1px;
+      margin-right: 10px;
+      border-bottom: 1px dashed rgba(230, 247, 255, 0.5);
+    }
+  }
+}
 </style>