diff --git a/src/api/data/supervisionNotify.ts b/src/api/data/supervisionNotify.ts
index 7372e83..81885e0 100644
--- a/src/api/data/supervisionNotify.ts
+++ b/src/api/data/supervisionNotify.ts
@@ -14,4 +14,12 @@ export function getChangedRank(times, groupType) {
     return request.get({
         url: `/datav/supervisonNotify/rank?beginTime=${times[0]}&endTime=${times[1]}&groupType=${groupType}`
     });
+}
+/**
+ * 获取问题趋势数据
+ */
+export function getSupervisionTrend(year) {
+    return request.get({
+        url: `/datav/supervisonNotify/getSupervisionTrend?year=${year}`
+    });
 }
\ No newline at end of file
diff --git a/src/api/datav.ts b/src/api/datav.ts
index 9f6f910..c9de5ec 100644
--- a/src/api/datav.ts
+++ b/src/api/datav.ts
@@ -38,3 +38,5 @@ export function getRecentlyMailTrend12337(query) {
 
 
 
+
+
diff --git a/src/components/datav/chart-bar.vue b/src/components/datav/chart-bar.vue
index 0a9786b..b2d56f2 100644
--- a/src/components/datav/chart-bar.vue
+++ b/src/components/datav/chart-bar.vue
@@ -23,7 +23,7 @@
                     }"
         ></div>
       </div>
-      <span>{{ item.value }}</span>
+      <span >{{ item.value + props.unit }}</span>
       <span
           class="bar-item_remark text-right ml-8"
           v-if="item.denominator"
@@ -72,6 +72,7 @@ const props = defineProps({
     type: String,
     default: "left",
   },
+
 });
 
 const max = ref(100);
@@ -82,6 +83,8 @@ watch(
     }
 );
 
+
+
 function getMax() {
   if (props.unit !== "%") {
     max.value = Math.max(...props.data.map((item) => item.value));
diff --git a/src/views/datav/AuditSuper.vue b/src/views/datav/AuditSuper.vue
index a2691ba..4f22044 100644
--- a/src/views/datav/AuditSuper.vue
+++ b/src/views/datav/AuditSuper.vue
@@ -33,29 +33,29 @@
                         </div>
                         <div class="flex gap-42">
                             <datav-statistic
-                                :value="86"
+                                :value="462"
                                 title="审计单位/项目"
                                 style="width: 20%"
                             />
                             <datav-statistic
-                                :value="437"
+                                :value="79224.59"
                                 :title="`审计总金额\n（万元）`"
                                 :isDecimal="true"
                                 style="width: 20%"
                             />
                             <datav-statistic
-                                :value="54"
+                                :value="3544.01"
                                 :title="`审减金额\n（万元）`"
                                 :isDecimal="true"
                                 style="width: 20%"
                             />
                             <datav-statistic
-                                :value="21"
+                                :value="1192"
                                 title="查出问题数"
                                 style="width: 20%"
                             />
                             <datav-statistic
-                                :value="10"
+                                :value="389"
                                 title="追责问责数"
                                 style="width: 20%"
                             />
diff --git a/src/views/datav/Gobal.vue b/src/views/datav/Gobal.vue
index 9ef7161..5432fb9 100644
--- a/src/views/datav/Gobal.vue
+++ b/src/views/datav/Gobal.vue
@@ -216,13 +216,10 @@ const option = ref({
     // shadowOffsetY: 0, // 设置垂直阴影位移量为6像素
   },
   visualMap: {
-
     type: "piecewise",
     bottom: 10,
     pieces: [
-      {gte: 0, lte: 10, label: "问题数低于500"},
-      {gte: 10, lte: 20, label: "问题数介于500-1000"},
-      {gte: 30, label: "问题数高于1000"},
+      { min: 0, max: 500, label: "问题数低于500" }, { min: 501, max: 1000, label: "问题数介于500-1000" }, { min: 1001, label: "问题数高于1000" },
     ],
     right: 10,
     realtime: false,
diff --git a/src/views/datav/MailVisits.vue b/src/views/datav/MailVisits.vue
index ad56969..2ec425d 100644
--- a/src/views/datav/MailVisits.vue
+++ b/src/views/datav/MailVisits.vue
@@ -183,13 +183,7 @@
                       autoresize
                   />
                 </datav-tab-item>
-                <datav-tab-item label="局长信箱" name="3">
-                  <v-charts
-                      style="width: 105%; height: 300px; "
-                      :option="option1"
-                      autoresize
-                  />
-                </datav-tab-item>
+
                 <datav-tab-item label="12337信访" name="4">
                   <v-charts
                       style="width: 105%; height: 300px; "
@@ -805,5 +799,13 @@ const colors = [
 
 }
 
+/*
+<!--                <datav-tab-item label="局长信箱" name="3">-->
+<!--                  <v-charts-->
+<!--                      style="width: 105%; height: 300px; "-->
+<!--                      :option="option1"-->
+<!--                      autoresize-->
+<!--                  />-->
+<!--                </datav-tab-item>-->*/
 
 </style>
\ No newline at end of file
diff --git a/src/views/datav/RightsComfort.vue b/src/views/datav/RightsComfort.vue
index 15a1220..a9f0860 100644
--- a/src/views/datav/RightsComfort.vue
+++ b/src/views/datav/RightsComfort.vue
@@ -1,146 +1,137 @@
 <template>
-    <el-scrollbar height="100vh">
-        <div class="wrapper">
-            <datav-header />
-            <main>
-                <el-row :gutter="16">
-                    <el-col :span="6">
-<!--                        <datav-card title="维权案件情况">-->
-<!--                            <datav-chart-bar-->
-<!--                                sub-title="案件数"-->
-<!--                                :data="data1"-->
-<!--                                :max="31"-->
-<!--                                size="large"-->
-<!--                            />-->
-<!--                            <div class="flex tab-title flex center mt-20" style="margin-bottom: 20px">-->
-<!--                                <div class="tab-title-item active">-->
-<!--&lt;!&ndash;                                    分县市局&ndash;&gt;-->
-<!--                                  暂无数据-->
-<!--                                </div>-->
-<!--&lt;!&ndash;                                <div class="tab-title-item">局属单位</div>&ndash;&gt;-->
-<!--                            </div>-->
-<!--                        </datav-card>-->
-                      <datav-card title="维权案件情况">
-                        <v-charts
-                            style="height: 300px"
-                            :option="option6"
-                            autoresize
-                        />
-                        <div class="flex tab-title flex center mt-20" style="margin-bottom: 20px">
-                          <div class="tab-title-item active">
-                            <!--                                    受伤人数-->
-                            暂无数据
-                          </div>
-                          <!--                                <div class="tab-title-item">受伤类别</div>-->
-                        </div>
-                      </datav-card>
-                        <datav-card title="案件类别占比">
-                            <v-charts
-                                style="height: 300px"
-                                :option="option2"
-                                autoresize
-                            />
-                            <div class="flex tab-title flex center mt-20" style="margin-bottom: 20px">
-                                <div class="tab-title-item active">
-<!--                                    刑事案件-->
-                                  暂无数据
-                                </div>
-<!--                                <div class="tab-title-item">行政案件</div>-->
-                            </div>
-                        </datav-card>
-                    </el-col>
-                    <el-col :span="12">
-                      <datav-date-picker v-model="time" />
-                        <div class="flex gap-42">
-                            <datav-statistic
-                                :value="136"
-                                title="维权案件总数"
-                                style="width: 20%"
-                            />
-                            <datav-statistic
-                                :value="112"
-                                title="受侵害人数"
-                                style="width: 20%"
-                            />
-                            <datav-statistic
-                                :value="comfortPersonNumber"
-                                title="抚慰人数"
-                                style="width: 20%"
-                            />
-                            <datav-statistic
-                                :value="hitPersonNumber"
-                                title="打击处理人数"
-                                style="width: 20%"
-                            />
-                            <datav-statistic
-                                :value="comfortMoney"
-                                :title="`抚慰金额\n（万元）`"
-                                :isDecimal="true"
-                                style="width: 20%"
-                            />
-                        </div>
-                        <v-charts
-                            style="height: 450px"
-                            :option="option"
-                            autoresize
-                        />
-                        <el-row :gutter="20">
-                            <el-col :span="12">
-                                <datav-card title="打处情况">
-                                    <v-charts
-                                        style="height: 300px"
-                                        :option="option3"
-                                        autoresize
-                                    />
-                                </datav-card>
-                            </el-col>
-                            <el-col :span="12">
-                                <datav-card title="抚慰情况">
-                                    <v-charts
-                                        style="height: 300px"
-                                        :option="option4"
-                                        autoresize
-                                    />
-                                </datav-card>
-                            </el-col>
-                        </el-row>
-                    </el-col>
-                    <el-col :span="6">
-                        <datav-card title="民辅警受伤情况">
-                            <v-charts
-                                style="height: 300px"
-                                :option="option6"
-                                autoresize
-                            />
-                            <div class="flex tab-title flex center mt-20" style="margin-bottom: 20px">
-                                <div class="tab-title-item active">
-<!--                                    受伤人数-->
-                                  暂无数据
-                                </div>
-<!--                                <div class="tab-title-item">受伤类别</div>-->
-                            </div>
-                        </datav-card>
-                        <datav-card title="发案情况占比">
-                            <v-charts
-                                style="height: 300px"
-                                :option="option5"
-                                autoresize
-                            />
-                            <div class="flex tab-title flex center mt-20" style="margin-bottom: 20px">
-                                <div class="tab-title-item active">
-                                  暂无数据
-<!--                                    发案环节-->
-                                </div>
-<!--                                <div class="tab-title-item">发案警种</div>-->
-<!--                                <div class="tab-title-item">发案单位</div>-->
-                            </div>
-                        </datav-card>
-                    </el-col>
-                </el-row>
-            </main>
-        </div>
-    </el-scrollbar>
+  <el-scrollbar height="100vh">
+    <div class="wrapper">
+      <datav-header/>
+      <main>
+        <el-row :gutter="16">
+          <el-col :span="6">
+            <datav-card title="维权案件情况">
+              <datav-chart-bar
+                  sub-title="案件数"
+                  :data="data1"
+                  :max="31"
+                  size="large"
+                  :color="colors"
+              />
+              <div class="flex tab-title flex center mt-20" style="margin-bottom: 20px">
+                <div class="tab-title-item active">
+                  <!--                                    分县市局-->
+                </div>
+                <!--                                <div class="tab-title-item">局属单位</div>-->
+              </div>
+            </datav-card>
+
+            <datav-card title="案件类别占比">
+              <v-charts
+                  style="height: 350px"
+                  :option="option2"
+                  autoresize
+              />
+              <!--              <div class="flex tab-title flex center mt-20" style="margin-bottom: 20px">-->
+              <!--                <div class="tab-title-item active">-->
+              <!--                  &lt;!&ndash;                                    刑事案件&ndash;&gt;-->
+              <!--                  暂无数据-->
+              <!--                </div>-->
+              <!--                &lt;!&ndash;                                <div class="tab-title-item">行政案件</div>&ndash;&gt;-->
+              <!--              </div>-->
+            </datav-card>
+          </el-col>
+
+          <el-col :span="12">
+            <datav-date-picker v-model="time"/>
+            <div class="flex gap-42">
+              <datav-statistic
+                  :value="171"
+                  title="维权案件总数"
+                  style="width: 20%"
+              />
+              <datav-statistic
+                  :value="121"
+                  title="受侵害人数"
+                  style="width: 20%"
+              />
+              <datav-statistic
+                  :value="114"
+                  title="抚慰人数"
+                  style="width: 20%"
+              />
+              <datav-statistic
+                  :value="205"
+                  title="打击处理人数"
+                  style="width: 20%"
+              />
+              <datav-statistic
+                  :value="28.1"
+                  :title="`抚慰金额\n（万元）`"
+                  :isDecimal="true"
+                  style="width: 20%"
+              />
+            </div>
+            <v-charts
+                style="height: 360px"
+                :option="option"
+                autoresize
+            />
+            <el-row :gutter="20">
+              <el-col :span="12">
+                <datav-card title="打处情况">
+                  <v-charts
+                      style="height: 300px"
+                      :option="data10"
+                      autoresize
+                  />
+                </datav-card>
+              </el-col>
+              <el-col :span="12">
+                <datav-card title="抚慰情况">
+                  <v-charts
+                      style="height: 300px"
+                      :option="option4"
+                      autoresize
+                  />
+                </datav-card>
+              </el-col>
+            </el-row>
+          </el-col>
+
+          <el-col :span="6">
+            <datav-card title="民辅警受伤情况">
+              <v-charts
+                  style="height: 400px"
+                  :option="option6"
+                  autoresize
+              />
+<!--              <div class="flex tab-title flex center mt-20" style="margin-bottom: 20px">-->
+<!--                <div class="tab-title-item active">-->
+<!--                  &lt;!&ndash;                                    受伤人数&ndash;&gt;-->
+<!--                  暂无数据-->
+<!--                </div>-->
+<!--                &lt;!&ndash;                                <div class="tab-title-item">受伤类别</div>&ndash;&gt;-->
+<!--              </div>-->
+            </datav-card>
+
+            <datav-card title="发案情况占比">
+              <v-charts
+                  style="height: 350px"
+                  :option="option5"
+                  autoresize
+              />
+<!--              <div class="flex tab-title flex center mt-20" style="margin-bottom: 20px">-->
+<!--                <div class="tab-title-item active">-->
+<!--                  暂无数据-->
+<!--                  &lt;!&ndash;                                    发案环节&ndash;&gt;-->
+<!--                </div>-->
+<!--                &lt;!&ndash;                                <div class="tab-title-item">发案警种</div>&ndash;&gt;-->
+<!--                &lt;!&ndash;                                <div class="tab-title-item">发案单位</div>&ndash;&gt;-->
+<!--              </div>-->
+            </datav-card>
+          </el-col>
+        </el-row>
+      </main>
+    </div>
+  </el-scrollbar>
 </template>
+
 <script setup>
 import vCharts from "vue-echarts";
 import changshaMap from "@/assets/data/changsha.json";
@@ -153,22 +144,23 @@ const time = ref([
   moment().startOf("year").format("YYYY-MM-DD"),
   moment().format("YYYY-MM-DD"),
 ]);
-const comfortPersonNumber = ref(0);
-const hitPersonNumber = ref(0);
+const comfortPersonNumber = ref(114);
+const hitPersonNumber = ref(28.1);
 const comfortMoney = ref(0.0);
 const punishmentSituationList = ref([]);
 const comfortSituationList = ref([]);
 
 function getData() {
-  getRightsComfortData(time.value).then((data) => {
-    console.log('Received data:', data); // 添加日志输出
-    comfortPersonNumber.value = data.comfortPersonNumber;
-    hitPersonNumber.value = data.hitPersonNumber;
-    comfortMoney.value = data.comfortMoney;
-    punishmentSituationList.value = data.punishmentSituation;
-    comfortSituationList.value = data.comfortSituation;
-  });
+  // getRightsComfortData(time.value).then((data) => {
+  //   console.log('Received data:', data); // 添加日志输出
+  //   comfortPersonNumber.value = data.comfortPersonNumber;
+  //   hitPersonNumber.value = data.hitPersonNumber;
+  //   comfortMoney.value = data.comfortMoney;
+  //   punishmentSituationList.value = data.punishmentSituation;
+  //   comfortSituationList.value = data.comfortSituation;
+  // });
 }
+
 watch(time, () => {
   getData();
 })
@@ -176,207 +168,228 @@ onMounted(() => {
   getData();
 });
 const option = {
-    geo: {
-        // 是上面注册时的名字哦，registerMap（'名字保持一致'）
-        map: "changsha",
-    },
+  geo: {
+    // 是上面注册时的名字哦，registerMap（'名字保持一致'）
+    map: "changsha",
+  },
 
-    visualMap: {
-        type: "piecewise",
-        bottom: 10,
-        pieces: [
-            { gte: 85, lte: 100, label: "问题数低于500" },
-            { gte: 65, lte: 85, label: "问题数低于1000" },
-            { gte: 0, lte: 65, label: "问题数低于1000" },
-        ],
-        right: 10, // 右边距
-        realtime: false,
-        orient: "horizontal", // 水平显示
-        textStyle: {
-            color: "#fff", // 文字颜色
-        },
-        calculable: true,
-        inRange: {
-            color: ["#D34343", "#F6A149", "#4987F6"],
-        },
+  visualMap: {
+    type: "piecewise",
+    bottom: 10,
+    pieces: [
+      {gte: 85, lte: 100, label: "数据数高于1000"},
+      {gte: 65, lte: 85, label: "问题数低于1000"},
+      {gte: 0, lte: 65, label: "问题数低于500"},
+    ],
+    right: 10, // 右边距
+    realtime: false,
+    orient: "horizontal", // 水平显示
+    textStyle: {
+      color: "#fff", // 文字颜色
     },
-    series: [
-        {
-            name: "长沙",
-            type: "map",
-            map: "changsha",
-            hoverAnimation: true,
-
-            label: {
-                show: true,
-                color: "white",
-            },
-            itemStyle: {
-                normal: {
-                    areaColor: "#02215E", // 这里将地图区域的颜色修改为红色
-                },
-            },
+    calculable: true,
+    inRange: {
+      color: ["#4987F6", "#F6A149", "#D34343"],
+    },
+  },
+  series: [
+    {
+      name: "长沙",
+      type: "map",
+      map: "changsha",
+      hoverAnimation: true,
+      emphasis: {
+        areaColor: "#FFD700", // 高亮时区域颜色
+        borderColor: "#FF0000", // 高亮时边框颜色
+        borderWidth: 4 // 高亮时边框宽度
+      },
+      label: {
+        show: true,
+        color: "white",
+      },
+      itemStyle: {
+        normal: {
+          areaColor: "#02215E", // 这里将地图区域的颜色修改为红色
         },
-    ],
+      },
+    },
+  ],
 };
 
 const option1 = ref({
-    xAxis: {
-        type: "category",
-        boundaryGap: false,
-        data: [
-            "9/10",
-            "9/11",
-            "9/12",
-            "9/13",
-            "9/14",
-            "9/15",
-            "9/16",
-            "9/17",
-            "9/18",
-            "9/19",
-            "9/20",
-            "9/21",
-            "9/22",
-            "9/23",
-        ],
+  xAxis: {
+    type: "category",
+    boundaryGap: false,
+    data: [
+      "9/10",
+      "9/11",
+      "9/12",
+      "9/13",
+      "9/14",
+      "9/15",
+      "9/16",
+      "9/17",
+      "9/18",
+      "9/19",
+      "9/20",
+      "9/21",
+      "9/22",
+      "9/23",
+    ],
+  },
+  yAxis: {
+    type: "value",
+    splitLine: {
+      show: true,
+      lineStyle: {
+        color: "#193775",
+      },
     },
-    yAxis: {
-        type: "value",
-        splitLine: {
-            show: true,
-            lineStyle: {
-                color: "#193775",
-            },
-        },
+  },
+  series: [
+    {
+      type: "line",
+      smooth: true,
+      label: {
+        show: false,
+      },
+      lineStyle: {
+        color: "#28E6FF",
+        width: 4,
+      },
+      areaStyle: {
+        color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+          {
+            offset: 0,
+            color: "rgba(40,230,255,0.47)", // 渐变起始颜色
+          },
+          {
+            offset: 1,
+            color: "rgba(40,230,255,0)", // 渐变结束颜色
+          },
+        ]),
+      },
+      data: [
+        2000, 1160, 2310, 3000, 3100, 3100, 3100, 2000, 1160, 2310,
+        3000, 3100, 3100, 3100,
+      ],
     },
-    series: [
-        {
-            type: "line",
-            smooth: true,
-            label: {
-                show: false,
-            },
-            lineStyle: {
-                color: "#28E6FF",
-                width: 4,
-            },
-            areaStyle: {
-                color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
-                    {
-                        offset: 0,
-                        color: "rgba(40,230,255,0.47)", // 渐变起始颜色
-                    },
-                    {
-                        offset: 1,
-                        color: "rgba(40,230,255,0)", // 渐变结束颜色
-                    },
-                ]),
-            },
-            data: [
-                2000, 1160, 2310, 3000, 3100, 3100, 3100, 2000, 1160, 2310,
-                3000, 3100, 3100, 3100,
-            ],
-        },
-    ],
+  ],
 });
 
 const data1 = [
-    // {
-    //     name: "开福分局",
-    //     value: 31
-    // },
-    // {
-    //     name: "芙蓉分局",
-    //     value: 30
-    // },
-    // {
-    //     name: "岳麓分局",
-    //     value: 22
-    // },
-    // {
-    //     name: "雨花分局",
-    //     value: 20
-    // },
-    // {
-    //     name: "望城分局",
-    //     value: 15
-    // },
-    // {
-    //     name: "浏阳市局",
-    //     value: 9
-    // },
-    // {
-    //     name: "长沙县局",
-    //     value: 9
-    // },
+  {
+    label: "岳麓分局",
+    value: 23
+  },
+  {
+    label: "芙蓉分局",
+    value: 20
+  },
+  {
+    label: "天心分局",
+    value: 20
+  },
+  {
+    label: "雨花分局",
+    value: 19
+  },
+  {
+    label: "浏阳市局",
+    value: 17
+  },
+  {
+    label: "宁乡市局",
+    value: 11
+  },
+  {
+    label: "开福分局",
+    value: 11
+  },
+
+  {
+    label: "望城分局",
+    value: 9
+  },
+  {
+    label: "长沙县局",
+    value: 9
+  },
+  {
+    label: "高新分局",
+    value: 4
+  },
+
 ];
 
 const data2 = [
-    {
-        name: "开福分局",
-        value: 9700,
-    },
-    {
-        name: "芙蓉分局",
-        value: 9021,
-    },
-    {
-        name: "岳麓分局",
-        value: 8512,
-    },
-    {
-        name: "雨花分局",
-        value: 8021,
-    },
-    {
-        name: "望城分局",
-        value: 7111,
-    },
-    {
-        name: "浏阳市局",
-        value: 6622,
-    },
-    {
-        name: "长沙县局",
-        value: 6221,
-    },
+  {
+    name: "开福分局",
+    value: 9700,
+  },
+  {
+    name: "芙蓉分局",
+    value: 9021,
+  },
+  {
+    name: "岳麓分局",
+    value: 8512,
+  },
+  {
+    name: "雨花分局",
+    value: 8021,
+  },
+  {
+    name: "望城分局",
+    value: 7111,
+  },
+  {
+    name: "浏阳市局",
+    value: 6622,
+  },
+  {
+    name: "长沙县局",
+    value: 6221,
+  },
 ];
 
 const option2 = {
-    // series: [
-    //     {
-    //         type: "pie",
-    //         radius: ["40%", "70%"],
-    //         label: {
-    //             color: "#fff",
-    //         },
-    //         data: [
-    //             { value: 311, name: "故意伤害" },
-    //             { value: 735, name: "袭警罪" },
-    //             { value: 580, name: "寻衅滋事" },
-    //             { value: 484, name: "妨碍公务" }
-    //         ],
-    //     },
-    // ],
+  series: [
+    {
+      type: "pie",
+      radius: ["40%", "70%"],
+      label: {
+        color: "#fff",
+      },
+      data: [
+        {value: 2, name: "故意伤害"},
+        {value: 42, name: "袭警罪"},
+        {value: 2, name: "寻衅滋事"},
+        {value: 28, name: "妨碍公务"}
+      ],
+    },
+  ],
+  tooltip: {
+    trigger: "item",
+  },
 };
 
 const option3 = computed(() => {
-    return {
-        series: [
-          {
-            type: "pie",
-            radius: ["40%", "70%"],
-            label: {
-              color: "#fff",
-            },
-            data: punishmentSituationList.value,
-          },
-        ],
-      tooltip: {
-        trigger: "item",
+  return {
+    series: [
+      {
+        type: "pie",
+        radius: ["40%", "70%"],
+        label: {
+          color: "#fff",
+        },
+        data: punishmentSituationList.value,
       },
-    };
+    ],
+    tooltip: {
+      trigger: "item",
+    },
+  };
 });
 
 const option4 = computed(() => {
@@ -388,7 +401,12 @@ const option4 = computed(() => {
         label: {
           color: "#fff",
         },
-        data: comfortSituationList.value,
+        // data: comfortSituationList.value,
+        data: [
+          {value: 61, name: "民警"},
+          {value: 51, name: "辅警"},
+          {value: 2, name: "协警"},
+        ]
       },
     ],
     tooltip: {
@@ -398,42 +416,90 @@ const option4 = computed(() => {
 });
 
 const option6 = {
-    series: [
-        // {
-        //     type: "pie",
-        //     radius: ["40%", "70%"],
-        //     label: {
-        //         color: "#fff",
-        //     },
-        //     data: [
-        //         { value: 211, name: "民警" },
-        //         { value: 655, name: "辅警" },
-        //         { value: 666, name: "协警" },
-        //         { value: 312, name: "巡防队员" }
-        //     ],
-        // },
-    ],
+  series: [
+    {
+      type: "pie",
+      radius: ["40%", "70%"],
+      label: {
+        color: "#fff",
+      },
+      tooltip: {
+        trigger: "item",
+      },
+      data: [
+        {value: 68, name: "民警"},
+        {value: 50, name: "辅警"},
+        {value: 3, name: "协警"},
+      ],
+
+    },
+  ],
+  tooltip: {
+    trigger: "item",
+  },
 };
 
 const option5 = {
-    series: [
-        // {
-        //     type: "pie",
-        //     radius: ["40%", "70%"],
-        //     label: {
-        //         color: "#fff",
-        //     },
-        //     data: [
-        //         { value: 211, name: "其它" },
-        //         { value: 655, name: "网络侵权" },
-        //         { value: 666, name: "110警情" },
-        //         { value: 321, name: "安保维稳" },
-        //         { value: 211, name: "执勤处室" },
-        //         { value: 421, name: "组织调解" },
-        //     ],
-        // },
-    ],
+  series: [
+    {
+      type: "pie",
+      radius: ["40%", "70%"],
+      label: {
+        color: "#fff",
+      },
+      data: [
+        {value: 127, name: "110警情"},
+        {value: 32, name: "执勤处室"},
+        {value: 2, name: "组织调解"},
+        {value: 3, name: "传唤抓捕"},
+        {value: 2, name: "安保维稳"},
+        {value: 2, name: "网络侵权"},
+        {value: 2, name: "医闹纠纷"},
+        {value: 1, name: "其它"},
+      ],
+    },
+  ],
+  tooltip: {
+    trigger: "item",
+  },
 };
+
+
+const data10 = {
+  series: [
+    {
+      type: "pie",
+      radius: ["40%", "70%"],
+      label: {
+        color: "#fff",
+      },
+      data: [
+        {value: 71, name: "刑事追究"},
+        {value: 97, name: "行政处理"},
+      ],
+    },
+  ],
+  tooltip: {
+    trigger: "item",
+  },
+};
+
+
+const colors = [
+  {
+    color: "linear-gradient( 270deg, #FB002D 0%, #822232 100%)",
+    percentage: 80,
+  },
+  {
+    color: "linear-gradient( 270deg, #FFB90E 0%, #71501D 100%)",
+    percentage: 60,
+  },
+  {
+    color: "linear-gradient( 270deg, #63E700 0%, #19674C 100%)",
+    percentage: 40,
+  },
+];
+
 </script>
 <style lang="scss" scoped>
 @import "@/style/datav.scss";
diff --git a/src/views/datav/SceneInsp.vue b/src/views/datav/SceneInsp.vue
index b56410a..fd7f489 100644
--- a/src/views/datav/SceneInsp.vue
+++ b/src/views/datav/SceneInsp.vue
@@ -11,7 +11,7 @@
                 <el-col :span="6">
                   <div class="descriptions_cell text-center">
                     <div class="descriptions_content">
-                      {{rankOverview.proTotal}}
+                      {{ rankOverview.proTotal }}
                     </div>
                     <div class="descriptions_label">
                       问题数
@@ -21,7 +21,7 @@
                 <el-col :span="6">
                   <div class="descriptions_cell text-center">
                     <div class="descriptions_content">
-                      {{rankOverview.changing}}
+                      {{ rankOverview.changing }}
                     </div>
                     <div class="descriptions_label">
                       整改中
@@ -63,13 +63,14 @@
                         :size="small"
                         title="整改率排名"
                         sub-title="已整改/问题数"
+                        unit="%"
                     />
                   </el-scrollbar>
                 </datav-tab-item>
                 <datav-tab-item label="局属单位" name="4">
                   <el-scrollbar height="350px">
                     <datav-chart-bar
-                        :data="jsdwBarList"
+                        :data="data1"
                         :max="11"
                         size="large"
                         :color="colors"
@@ -85,7 +86,7 @@
             <datav-card title="问题类型占比">
               <v-charts
                   style="height: 300px"
-                  :option="option2"
+                  :option="wtlxPieOption"
                   autoresize
               />
             </datav-card>
@@ -134,106 +135,28 @@
             <datav-card title="问题趋势">
               <v-charts
                   style="height: 280px"
-                  :option="option1"
+                  :option="proTrend"
                   autoresize
               />
+              <div class="gobal-dropdown-container">
+                <el-dropdown class="test" @command="handleCommand">
+                    <span class="el-dropdown-link my-gobal-yearselect">
+                     {{ selectedYear + " 年" }}
+                    </span>
+                  <template #dropdown>
+                    <el-dropdown-menu style="width: 90px">
+                      <el-dropdown-item v-for="year in years" :key="year" :command="year">{{ year + " 年" }}
+                      </el-dropdown-item>
+                    </el-dropdown-menu>
+                  </template>
+                </el-dropdown>
+              </div>
             </datav-card>
           </el-col>
 
           <el-col :span="6">
             <datav-card>
-<!--              <datav-tabs v-model="activeTabRight" size="small">
-                <datav-tab-item label="枪支管理" name="1">
-                  <datav-tabs
-                      v-model="activeMailTabRight"
-                      type="bottom-button"
-                  >
-                    <el-row class="mb-32">
-                      <el-col :span="6">
-                        <div class="descriptions_cell text-center">
-                          <div class="descriptions_content">
-                            42
-                          </div>
-                          <div class="descriptions_label">
-                            问题数
-                          </div>
-                        </div>
-                      </el-col>
-                      <el-col :span="6">
-                        <div class="descriptions_cell text-center">
-                          <div class="descriptions_content">
-                            2
-                          </div>
-                          <div class="descriptions_label">
-                            整改中
-                          </div>
-                        </div>
-                      </el-col>
-                      <el-col :span="6">
-                        <div class="descriptions_cell text-center">
-                          <div class="descriptions_content">
-                            40
-                          </div>
-                          <div class="descriptions_label">
-                            已整改
-                          </div>
-                        </div>
-                      </el-col>
-                      <el-col :span="6">
-                        <div class="descriptions_cell text-center">
-                          <div class="descriptions_content">
-                            95%
-                          </div>
-                          <div class="descriptions_label">
-                            整改率
-                          </div>
-                        </div>
-                      </el-col>
-                    </el-row>
-                    <datav-tab-item label="分县市局" name="1">
-                      <el-scrollbar height="300px">
-                        <datav-chart-bar-mail
-                            :data="xx"
-                            size="large"
-                        />
-                      </el-scrollbar>
-                    </datav-tab-item>
-                    <datav-tab-item label="局属单位" name="2">
-                      <el-scrollbar height="300px">
-                        <datav-chart-bar-mail
-                            :data="xx"
-                            :max="11"
-                            size="large"
-                        />
-                      </el-scrollbar>
-                    </datav-tab-item>
-                  </datav-tabs>
-                </datav-tab-item>
-                <datav-tab-item label="涉企问题" name="2">
-                  <datav-tabs
-                      v-model="activeMailTabRight"
-                      type="bottom-button"
-                  >
-                    <datav-tab-item label="分县市局" name="1">
-                      <el-scrollbar height="300px">
-                        <datav-chart-bar-mail
-                            :data="xx"
-                            size="large"
-                        />
-                      </el-scrollbar>
-
-                    </datav-tab-item>
-                    <datav-tab-item label="局属单位" name="2">
-                      <el-scrollbar height="300px">
-                        <datav-chart-bar-mail
-                            :data="xx"
-                            :max="11"
-                            size="large"
-                        />
-                      </el-scrollbar>
-                    </datav-tab-item>
-                  </datav-tabs>
-                </datav-tab-item>
+              <datav-tabs v-model="activeTabRight" size="small">
                 <datav-tab-item label="黄赌毒" name="3">
                   <datav-tabs
                       v-model="activeMailTabRight"
@@ -241,75 +164,16 @@
                   >
                     <datav-tab-item label="分县市局" name="1">
                       <el-scrollbar height="300px">
-                        <datav-chart-bar-mail
-                            :data="xx"
+                        <datav-chart-bar
+                            :data="hddList"
                             size="large"
                         />
                       </el-scrollbar>
 
                     </datav-tab-item>
-                    <datav-tab-item label="局属单位" name="2">
-                      <el-scrollbar height="300px">
-                        <datav-chart-bar-mail
-                            :data="xx"
-                            :max="11"
-                            size="large"
-                        />
-                      </el-scrollbar>
-                    </datav-tab-item>
-                  </datav-tabs>
-                </datav-tab-item>
-                <datav-tab-item label="执法办案" name="4">
-                  <datav-tabs
-                      v-model="activeMailTabRight"
-                      type="bottom-button"
-                  >
-                    <datav-tab-item label="分县市局" name="1">
-                      <el-scrollbar height="300px">
-                        <datav-chart-bar-mail
-                            :data="xx"
-                            size="large"
-                        />
-                      </el-scrollbar>
-
-                    </datav-tab-item>
-                    <datav-tab-item label="局属单位" name="2">
-                      <el-scrollbar height="300px">
-                        <datav-chart-bar-mail
-                            :data="xx"
-                            :max="11"
-                            size="large"
-                        />
-                      </el-scrollbar>
-                    </datav-tab-item>
-                  </datav-tabs>
-                </datav-tab-item>
-                <datav-tab-item label="工作日测酒" name="5">
-                  <datav-tabs
-                      v-model="activeMailTabRight"
-                      type="bottom-button"
-                  >
-                    <datav-tab-item label="分县市局" name="1">
-                      <el-scrollbar height="300px">
-                        <datav-chart-bar-mail
-                            :data="xx"
-                            size="large"
-                        />
-                      </el-scrollbar>
-
-                    </datav-tab-item>
-                    <datav-tab-item label="局属单位" name="2">
-                      <el-scrollbar height="300px">
-                        <datav-chart-bar-mail
-                            :data="xx"
-                            :max="11"
-                            size="large"
-                        />
-                      </el-scrollbar>
-                    </datav-tab-item>
                   </datav-tabs>
                 </datav-tab-item>
-              </datav-tabs>-->
+              </datav-tabs>
 
               <!--              <datav-chart-bar
                                 title="问题数排名"
@@ -366,74 +230,45 @@ import vCharts from "vue-echarts";
 import changshaMap from "@/assets/data/changsha.json";
 import * as echarts from "echarts/core";
 import moment from "moment";
-import {getAllSupervisionNotifyCount, getChangedRank} from "@/api/data/supervisionNotify.ts";
+import {getAllSupervisionNotifyCount, getChangedRank, getSupervisionTrend} from "@/api/data/supervisionNotify.ts";
+import {getGobalRecentlyTrendByMonth} from "@/api/data/basicScreen.ts";
+
+const data1= ref([]);
+const activeTabLeft = ref("3");
+const overview = ref({
+  supervisionNotifyTotal: 0,
+  supervisionNotifyOrgTotal: 0,
+  supervisionNotifyPreTotal: 0,
+  supervisionNotifyChangingTotal: 0,
+  supervisionNotifyChangedTotal: 0,
+  correctionRate: 0,
+});
+const rankOverview = ref({
+  proTotal: 0,
+  changing: 0,
+  changed: 0,
+  correctionRate: 0,
+});
+const wtlxList = ref([])
+const hddList = ref([])
 
 echarts.registerMap("changsha", changshaMap);
-const option = {
-  geo: {
-    // 是上面注册时的名字哦，registerMap（'名字保持一致'）
-    map: "changsha",
-  },
 
-  visualMap: {
-    type: "piecewise",
-    bottom: 10,
-    pieces: [
-      {gte: 85, lte: 100, label: "问题数低于500"},
-      {gte: 65, lte: 85, label: "问题数低于1000"},
-      {gte: 0, lte: 65, label: "问题数低于1000"},
-    ],
-    right: 10, // 右边距
-    realtime: false,
-    orient: "horizontal", // 水平显示
-    textStyle: {
-      color: "#fff", // 文字颜色
-    },
-    calculable: true,
-    inRange: {
-      color: ["#D34343", "#F6A149", "#4987F6"],
-    },
-  },
-  series: [
-    {
-      name: "长沙",
-      type: "map",
-      map: "changsha",
-      hoverAnimation: true,
 
-      label: {
-        show: true,
-        color: "white",
-      },
-      itemStyle: {
-        normal: {
-          areaColor: "#02215E", // 这里将地图区域的颜色修改为红色
-        },
-      },
-    },
-  ],
-};
+// region 问题趋势线状图
 
-const option1 = ref({
+const proTrend = ref({
+  grid: {
+    left: '10%', // 图表距离容器左边的距离
+    right: '10%', // 图表距离容器右边的距离
+    top: '10%', // 图表距离容器上边的距离
+    bottom: '20%', // 图表距离容器下边的距离
+    containLabel: false // 是否包含坐标轴的标签
+  },
   xAxis: {
     type: "category",
     boundaryGap: false,
-    data: [
-      "9/10",
-      "9/11",
-      "9/12",
-      "9/13",
-      "9/14",
-      "9/15",
-      "9/16",
-      "9/17",
-      "9/18",
-      "9/19",
-      "9/20",
-      "9/21",
-      "9/22",
-      "9/23",
-    ],
+    data: [],
   },
   yAxis: {
     type: "value",
@@ -476,166 +311,202 @@ const option1 = ref({
           },
         ]),
       },
-      data: [
-        2000, 1160, 2310, 3000, 3100, 3100, 3100, 2000, 1160, 2310,
-        3000, 3100, 3100, 3100,
-      ],
+      data: [],
     },
   ],
 });
 
-const data1 = ref([
-  /*{
-    label: "开福分局",
-    value: 90,
-    unit: "%",
-    numerator: 16,
-    denominator: 17,
-  },
-  {
-    label: "芙蓉分局",
-    value: 90,
-    unit: "%",
-    numerator: 11,
-    denominator: 11,
-  },
-  {
-    label: "岳麓分局",
-    value: 80,
-    unit: "%",
-    numerator: 10,
-    denominator: 10,
-  },
-  {
-    label: "雨花分局",
-    value: 70,
-    unit: "%",
-    numerator: 9,
-    denominator: 9,
-  },
-  {
-    label: "望城分局",
-    value: 60,
-    unit: "%",
-    numerator: 4,
-    denominator: 4,
-  },
-  {
-    label: "浏阳市局",
-    value: 50,
-    unit: "%",
-    numerator: 3,
-    denominator: 3,
-  },
-  {
-    label: "长沙县局",
-    value: 40,
-    unit: "%",
-    numerator: 3,
-    denominator: 3,
-  },*/
-]);
+const years = ref(['2024', '2023', '2022']); // 年份列表
+const selectedYear = ref('2024'); // 当前选中的年份
+const handleCommand = (year) => {
+  selectedYear.value = year; // 更新当前选中的年份
+  getSupervisionTrend(year).then(res => {
+    const supervisionTrend = res.supervisionTrend;
+    const categories = supervisionTrend.map(item => item.name);
+    const values = supervisionTrend.map(item => item.value);
+    // 更新图表数据
+    proTrend.value.xAxis.data = categories;
+    proTrend.value.series[0].data = values;
+  });
+};
+// endregion
 
-const data2 = [
-  {
-    name: "开福分局",
-    value: 9700
-  },
-  {
-    name: "芙蓉分局",
-    value: 9021
-  },
-  {
-    name: "岳麓分局",
-    value: 8512
-  },
-  {
-    name: "雨花分局",
-    value: 8021
-  },
-  {
-    name: "望城分局",
-    value: 7111
-  },
+
+// region 问题类型占比
+const wtlxPieOption = computed(() => {
+  return {
+    tooltip: {
+      trigger: "item",
+    },
+    series: [
+      {
+        type: "pie",
+        radius: ["40%", "70%"],
+        label: {
+          color: "#fff",
+        },
+        data: wtlxList.value,
+
+      },
+    ],
+  };
+});
+// endregion
+
+// region 地图相关
+
+let superviseTempMapVoList = [
   {
-    name: "浏阳市局",
-    value: 6622
+    "name": "天心分局",
+    "totalPro": 11,
+    "changing": 11,
+    "changed": 11,
+    "relationOrg": 11,
+    "changedRate": 11
+  }
+];
+echarts.registerMap("changsha", changshaMap);
+const option = ref({
+  geo: {
+    map: "changsha",
   },
-  {
-    name: "长沙县局",
-    value: 6221
+  tooltip: {
+    trigger: 'item',
+    formatter: function (params) {
+      console.log(params)
+      const dataItem = superviseTempMapVoList.find(item => item.name.includes(params.name.substring(0, 2)));
+      if (dataItem) {
+        return `
+        <div class="tooltip">
+          <div class="tooltip-title">${dataItem.name}</div>
+          <div class="tooltip-content">
+            <ul class="tooltip-ul" >
+              <li>通报问题数 <span>${dataItem.totalPro}</span></li>
+              <li>整改中 <span>${dataItem.changing}</span></li>
+              <li>已整改 <span>${dataItem.changed}</span></li>
+              <li>涉及单位数 <span>${dataItem.relationOrg}</span></li>
+              <li>整改率 <span>${dataItem.changedRate}</span></li>
+            </ul>
+          </div>
+        </div>`;
+      } else {
+        return `<div class="tooltip">
+          <div class="tooltip-title">${dataItem.name}</div>
+          <div class="tooltip-content">
+            <ul class="tooltip-ul"">
+              <li>通报问题数 <span>0</span></li>
+              <li>整改中 <span>0</span></li>
+              <li>已整改 <span>0</span></li>
+              <li>涉及单位数 <span>0</span></li>
+              <li>整改率 <span>0</span></li>
+            </ul>
+          </div>
+        </div>`;
+      }
+    },
+    // backgroundColor: "#031577", //
+    // borderColor: "#0A2F86",
+    // borderWidth: 0, // 设置边框宽度为1像素
+    // borderRadius: 3, // 设置边框半径为3像素
+    // shadowBlur: 0, // 设置阴影模糊程度为8像素
+    // shadowOffsetX: 0, // 设置水平阴影位移量为0像素
+    // shadowOffsetY: 0, // 设置垂直阴影位移量为6像素
   },
-];
+  visualMap: {
 
-const option2 = {
-  tooltip: {
-    trigger: "item",
+    type: "piecewise",
+    bottom: 10,
+    pieces: [
+      {gte: 0, lte: 10, label: "问题数低于500"},
+      {gte: 10, lte: 20, label: "问题数介于500-1000"},
+      {gte: 30, label: "问题数高于1000"},
+    ],
+    right: 10,
+    realtime: false,
+    orient: "horizontal",
+    textStyle: {
+      color: "#fff",
+    },
+    calculable: true,
+    inRange: {
+      color: ["#4987F6", "#F6A149", "#D34343",],
+    },
   },
   series: [
     {
-      type: "pie",
-      radius: ["40%", "70%"],
+      name: "长沙",
+      type: "map",
+      map: "changsha",
+      hoverAnimation: true,
       label: {
-        color: "#fff",
+        show: true,
+        color: "white",
       },
-      data: [
-        {value: 18.6, name: "执法办案"},
-        {value: 15.5, name: "训练执勤"},
-        {value: 1.9, name: "纪律作风"},
-        {value: 2.5, name: "专项工作"},
-        {value: 30, name: "整改核查"},
-        {value: 31, name: "其他类型"},
-      ],
-    },
+      itemStyle: {
+        normal: {
+          areaColor: "#02215E",
+          borderColor: "#1773c3",
+        },
+      },
+      emphasis: {
+        areaColor: "#FFD700", // 高亮时区域颜色
+        borderColor: "#FF0000", // 高亮时边框颜色
+        borderWidth: 4 // 高亮时边框宽度
+      },
+      data: []
+    }
   ],
-};
+})
 
+// endregion
 
-// region  初始化数据
-const activeTabLeft = ref("3");
-const overview = ref({
-  supervisionNotifyTotal: 0,
-  supervisionNotifyOrgTotal: 0,
-  supervisionNotifyPreTotal: 0,
-  supervisionNotifyChangingTotal: 0,
-  supervisionNotifyChangedTotal: 0,
-  correctionRate: 0,
-});
-const rankOverview = ref({
-  proTotal: 0,
-  changing: 0,
-  changed: 0,
-  correctionRate: 0,
-});
 
 
+// region  初始化数据
+
 const time = ref([
   moment().startOf("year").format("YYYY-MM-DD"),
   moment().format("YYYY-MM-DD"),
 ]);
 
+  // 地图临时测试数据
 function getData() {
   getAllSupervisionNotifyCount(time.value).then((res) => {
     overview.value = res.overview;
+    wtlxList.value = res.wtlxList
+    hddList.value = res.hddList;
+    superviseTempMapVoList = res.superviseTempMapVoList;
   });
   getChangedRank(time.value, 3).then((res) => {
     rankOverview.value = res.rankOverview;
     data1.value = res.changedRankList;
+    option2.series[0].data = res.wtlxList;
+  });
+  getSupervisionTrend(new Date().getFullYear()).then((res) => {
+
+    const supervisionTrend = res.supervisionTrend;
+    const categories = supervisionTrend.map(item => item.name);
+    const values = supervisionTrend.map(item => item.value);
+    // 更新图表数据
+    proTrend.value.xAxis.data = categories;
+    proTrend.value.series[0].data = values;
   });
+
+
 }
 
 watch(time, () => {
   getData();
 });
 watch(activeTabLeft, () => {
-  alert(activeTabLeft.value)
+  // alert(activeTabLeft.value)
   getChangedRank(time.value, activeTabLeft.value).then((res) => {
     rankOverview.value = res.rankOverview;
+    data1.value = res.changedRankList;
   });
 });
 
 
-
 onMounted(() => {
   getData();
 });
@@ -657,6 +528,37 @@ const colors = [
 // endregion
 
 
+
+const data2 = [
+  {
+    name: "开福分局",
+    value: 9700
+  },
+  {
+    name: "芙蓉分局",
+    value: 9021
+  },
+  {
+    name: "岳麓分局",
+    value: 8512
+  },
+  {
+    name: "雨花分局",
+    value: 8021
+  },
+  {
+    name: "望城分局",
+    value: 7111
+  },
+  {
+    name: "浏阳市局",
+    value: 6622
+  },
+  {
+    name: "长沙县局",
+    value: 6221
+  },
+];
 </script>
 
 <style lang="scss" scoped>
@@ -684,4 +586,103 @@ const colors = [
     margin-bottom: 10px;
   }
 }
+
+:deep() {
+  // 弹框整体
+  .tooltip {
+    position: relative;
+    width: 169.88px;
+    height: 198px;
+    background: linear-gradient(180deg, rgba(1, 4, 87, 0.8) 0%, rgba(3, 21, 119, 0.8) 100%);
+    border: 1px solid #4E8FFF;
+    margin: -10px -10px -10px -10px;
+  }
+
+  //浏阳市局
+  .tooltip-title {
+    width: 169.88px;
+    height: 43px;
+    background: linear-gradient(180deg, rgba(1, 4, 87, 0.8) 0%, rgba(3, 21, 119, 0.8) 100%);
+    display: flex;
+    justify-content: center; /* 水平居中 */
+    align-items: center; /* 垂直居中 */
+    text-align: center; /* 水平居中 */
+    font-weight: 400;
+    font-size: 16px;
+    color: #FFFFFF;
+    line-height: 22px;
+    border-bottom: 1px solid #253755; /* 设置下边框 */
+  }
+
+
+  .tooltip-content {
+    width: 170px;
+    height: 155.8px;
+    //font-size: 11px;
+    margin-top: -12px;
+    background: linear-gradient(180deg, #010457 0%, #031577 100%);
+  }
+
+  .tooltip-content ul {
+    list-style-type: none; /* 移除默认的小圆点 */
+    padding: 0;
+
+  }
+
+  .tooltip-content ul li {
+    margin-left: 5px;
+    height: 25px;
+    color: #597AE9;
+    font-size: 13px;
+  }
+
+
+  // 数字的span
+  .tooltip-ul span {
+    float: right;
+    width: 50px;
+    text-align: right;
+    margin-right: 35px;
+    color: #fff;
+    font-size: 13px;
+  }
+
+
+  /* 小尖角 */
+  .tooltip::before {
+    content: '';
+    position: absolute;
+    top: 90px; /* 调整尖角的垂直位置 */
+    left: -10px; /* 调整尖角的水平位置 */
+    width: 0;
+    height: 0;
+    //border-top: 10px solid red; /* 顶边颜色 */
+    //border-bottom: 10px solid green; /* 底边颜色 */
+    //border-right: 10px solid blue; /* 右边颜色，与背景颜色相同 */
+  }
+
+
+}
+
+.test {
+  width: 95px;
+  height: 25px;
+  background: #1C3472;
+}
+
+.gobal-dropdown-container {
+  position: absolute;
+  right: 20px;
+  top: 15px;
+}
+
+.my-gobal-yearselect {
+  font-size: 14px;
+  padding-top: 6px;
+  padding-left: 20px;
+  width: 90px;
+  color: #fff;
+}
+
+
 </style>
\ No newline at end of file