diff --git a/src/assets/safetyIndex/back003.png b/src/assets/safetyIndex/back003.png
new file mode 100644
index 0000000..13a0c03
Binary files /dev/null and b/src/assets/safetyIndex/back003.png differ
diff --git a/src/assets/safetyIndex/back004.png b/src/assets/safetyIndex/back004.png
new file mode 100644
index 0000000..b29ca1c
Binary files /dev/null and b/src/assets/safetyIndex/back004.png differ
diff --git a/src/assets/safetyIndex/employee02.png b/src/assets/safetyIndex/employee02.png
new file mode 100644
index 0000000..b3e686c
Binary files /dev/null and b/src/assets/safetyIndex/employee02.png differ
diff --git a/src/assets/safetyIndex/incaricon.png b/src/assets/safetyIndex/incaricon.png
new file mode 100644
index 0000000..ba8f378
Binary files /dev/null and b/src/assets/safetyIndex/incaricon.png differ
diff --git a/src/assets/safetyIndex/service001.png b/src/assets/safetyIndex/service001.png
new file mode 100644
index 0000000..6dad9d1
Binary files /dev/null and b/src/assets/safetyIndex/service001.png differ
diff --git a/src/assets/safetyIndex/service002.png b/src/assets/safetyIndex/service002.png
new file mode 100644
index 0000000..3f93e30
Binary files /dev/null and b/src/assets/safetyIndex/service002.png differ
diff --git a/src/assets/safetyIndex/service003.png b/src/assets/safetyIndex/service003.png
new file mode 100644
index 0000000..c988900
Binary files /dev/null and b/src/assets/safetyIndex/service003.png differ
diff --git a/src/utils/request.js b/src/utils/request.js
index 56dd381..bbddc92 100644
--- a/src/utils/request.js
+++ b/src/utils/request.js
@@ -7,8 +7,8 @@ const request = axios.create({
   //baseURL: 'http://172.18.113.50:8080/zhapi',
   //baseURL: 'http://172.18.113.13:8080/zhapi', // 孙强
   //baseURL: 'http://192.168.0.188:8888/zhapi',
-  baseURL: 'http://121.41.91.94:12002/zhapi',
-  //baseURL: `http://${window.location.host}/zhapi`,
+  //baseURL: 'http://121.41.91.94:12002/zhapi',
+  baseURL: `http://${window.location.host}/zhapi`,
   timeout: 50000,
   headers: { 'content-type': 'application/json' },
 })
diff --git a/src/views/compositeIndex/components/companyCar.vue b/src/views/compositeIndex/components/companyCar.vue
new file mode 100644
index 0000000..ade0f5b
--- /dev/null
+++ b/src/views/compositeIndex/components/companyCar.vue
@@ -0,0 +1,243 @@
+<!-- 园区车辆 -->
+<template>
+  <div class="company_car_box">
+    <!-- 模块标题 -->
+    <div class="title">
+      <div class="img_box">
+        <!-- <img src="@/assets/safetyIndex/装饰009991.png" alt="" /> -->
+      </div>
+      <div class="title_text">园区车辆</div>
+    </div>
+    <div class="car_num_box">
+      <!-- 进园区车辆 -->
+      <div class="in_car">
+        <div class="in_car_icon">
+          <div class="in_car_icon_item"></div>
+        </div>
+        <div class="in_car_item">
+          <div class="in_car_item_text">今日进园区</div>
+          <div class="in_car_item_value">
+            <div class="in_car_num">
+              {{ this.in_car_num }}
+            </div>
+            <div class="num_text">辆</div>
+          </div>
+        </div>
+      </div>
+      <!-- 出园区车辆 -->
+      <div class="out_car">
+        <div class="out_car_icon">
+          <div class="out_car_icon_item"></div>
+        </div>
+        <div class="out_car_item">
+          <div class="out_car_item_text">今日出园区</div>
+          <div class="out_car_item_value">
+            <div class="out_car_num">
+              {{ this.out_car_num }}
+            </div>
+            <div class="num_text">辆</div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+<script>
+import { vehicleIn } from "@/api/safetyIndex";
+export default {
+  name: "CompanyCar",
+  data() {
+    return {
+      in_car_num: "", // 今日进园区车数量
+      out_car_num: "", // 今日出园区车数量
+    };
+  },
+  created() {
+    this.get_in_car_num();
+    this.get_out_car_num();
+  },
+  methods: {
+    // 获取进园区车辆数
+    get_in_car_num() {
+      let params = {
+        direction: 1,
+        pageSize: 1,
+        pageNum: 1,
+      };
+      vehicleIn(params).then((res) => {
+        this.in_car_num = res.total;
+      });
+    },
+    // 获取出园区车辆数
+    get_out_car_num() {
+      let params = {
+        direction: 2,
+        pageSize: 1,
+        pageNum: 1,
+      };
+      vehicleIn(params).then((res) => {
+        this.out_car_num = res.total;
+      });
+    },
+  },
+};
+</script>
+<style lang="less" scoped>
+.company_car_box {
+  margin-top: 10px;
+  width: 24vw;
+  height: 28vh;
+  background: url("~@/assets/safetyIndex/back001.png") no-repeat;
+  background-size: 100% 100%;
+  /* 盒子标题 */
+  .title {
+    width: 24vw;
+    height: 2.7vh;
+    display: flex;
+    font-size: 16px;
+    color: #d9e7ff;
+    font-weight: 500;
+    /* 图片盒子 */
+    .img_box {
+      width: 1.5vw;
+      height: 2.7vh;
+      display: flex;
+      justify-content: center;
+      align-items: center;
+      img {
+        width: 16px;
+        height: 16px;
+      }
+    }
+    .title_text {
+      width: 4vw;
+      height: 3.2vh;
+      line-height: 3.2vh;
+      text-align: right;
+    }
+  }
+  .car_num_box {
+    margin-left: 1vw;
+    margin-top: 1vh;
+    width: 22vw;
+    height: 5vh;
+    display: flex;
+    justify-content: space-around;
+    .in_car {
+      width: 10vw;
+      height: 5vh;
+      //   border: 0.1px solid #495e70;
+      display: flex;
+      .in_car_icon {
+        width: 2.5vw;
+        height: 5vh;
+        background: url("~@/assets/safetyIndex/back003.png") no-repeat;
+        background-size: 100% 100%;
+        display: flex;
+        justify-content: center;
+        align-items: center;
+        .in_car_icon_item {
+          width: 20px;
+          height: 20px;
+          background: url("~@/assets/safetyIndex/incaricon.png") no-repeat;
+          background-size: 100% 100%;
+        }
+      }
+      .in_car_item {
+        width: 7vw;
+        height: 5vh;
+        // border: 0.1px solid #495e70;
+        .in_car_item_text {
+          width: 7vw;
+          height: 2.5vh;
+          line-height: 2.5vh;
+          color: #d9e7ff;
+          font-size: 14px;
+          text-shadow: 0 0 9px rgba(21, 255, 198, 0.64);
+        }
+        .in_car_item_value {
+          background: url("~@/assets/safetyIndex/back004.png") no-repeat;
+          background-size: 100% 100%;
+          width: 7vw;
+          height: 2.5vh;
+          display: flex;
+          .in_car_num {
+            width: 4vw;
+            height: 2.5vh;
+            color: #d9e7ff;
+            line-height: 2.5vh;
+            text-align: center;
+            font-size: 20px;
+            font-weight: 600;
+            text-shadow: 0 0 9px rgba(21, 255, 198, 0.64);
+          }
+          .num_text {
+            color: #d9e7ff;
+            font-size: 12px;
+            width: 2vw;
+            height: 2.5vh;
+            line-height: 2.5vh;
+          }
+        }
+      }
+    }
+    .out_car {
+      width: 10vw;
+      height: 5vh;
+      display: flex;
+      .out_car_icon {
+        width: 2.5vw;
+        height: 5vh;
+        background: url("~@/assets/safetyIndex/back003.png") no-repeat;
+        background-size: 100% 100%;
+        display: flex;
+        justify-content: center;
+        align-items: center;
+        .out_car_icon_item {
+          width: 20px;
+          height: 20px;
+          background: url("~@/assets/safetyIndex/incaricon.png") no-repeat;
+          background-size: 100% 100%;
+        }
+      }
+      .out_car_item {
+        width: 7vw;
+        height: 5vh;
+        // border: 0.1px solid #495e70;
+        .out_car_item_text {
+          width: 7vw;
+          height: 2.5vh;
+          line-height: 2.5vh;
+          color: #d9e7ff;
+          font-size: 14px;
+          text-shadow: 0 0 9px rgba(21, 255, 198, 0.64);
+        }
+        .out_car_item_value {
+          background: url("~@/assets/safetyIndex/back004.png") no-repeat;
+          background-size: 100% 100%;
+          width: 7vw;
+          height: 2.5vh;
+          display: flex;
+          .out_car_num {
+            width: 4vw;
+            height: 2.5vh;
+            color: #d9e7ff;
+            line-height: 2.5vh;
+            text-align: center;
+            font-size: 20px;
+            font-weight: 600;
+            text-shadow: 0 0 9px rgba(21, 255, 198, 0.64);
+          }
+          .num_text {
+            color: #d9e7ff;
+            font-size: 12px;
+            width: 2vw;
+            height: 2.5vh;
+            line-height: 2.5vh;
+          }
+        }
+      }
+    }
+  }
+}
+</style>
\ No newline at end of file
diff --git a/src/views/compositeIndex/components/companyNum.vue b/src/views/compositeIndex/components/companyNum.vue
index d547a29..b2e5200 100644
--- a/src/views/compositeIndex/components/companyNum.vue
+++ b/src/views/compositeIndex/components/companyNum.vue
@@ -184,7 +184,6 @@ export default {
 <style lang="less" scoped>
 .company_num_box {
   margin-top: 10px;
-  margin-left: 20px;
   width: 24vw;
   height: 28vh;
   // border: 0.1px solid #495e70;
diff --git a/src/views/compositeIndex/components/companyService.vue b/src/views/compositeIndex/components/companyService.vue
new file mode 100644
index 0000000..5e03761
--- /dev/null
+++ b/src/views/compositeIndex/components/companyService.vue
@@ -0,0 +1,242 @@
+<!-- 惠企服务 -->
+<template>
+  <div class="company_service_box">
+    <!-- 模块标题 -->
+    <div class="title">
+      <div class="img_box">
+        <!-- <img src="@/assets/safetyIndex/装饰009991.png" alt="" /> -->
+      </div>
+      <div class="title_text">惠企服务</div>
+    </div>
+    <!-- 服务类别 -->
+    <div class="service_type">
+      <div class="month_service">
+        <div class="month_service_text">当月服务</div>
+        <div class="month_service_value">123</div>
+      </div>
+      <div class="season_service">
+        <div class="season_service_text">季度服务</div>
+        <div class="season_service_value">123</div>
+      </div>
+      <div class="year_service">
+        <div class="year_service_text">年度服务</div>
+        <div class="year_service_value">123</div>
+      </div>
+    </div>
+    <!-- 服务echarts表 -->
+    <div class="service_echarts">
+      <div class="left_chart"></div>
+      <div class="right_chart"></div>
+    </div>
+    <div class="chart_num">
+      <div class="left_chart_num">
+        <div class="chart_num_text">惠企服务总量</div>
+        <div class="chart_num_value">1222</div>
+      </div>
+      <div class="right_chart_num">
+        <div class="chart_num_text">请求受理总量</div>
+        <div class="chart_num_value">1222</div>
+      </div>
+    </div>
+  </div>
+</template>
+<script>
+export default {
+  name: "CompanyService",
+  data() {
+    return {};
+  },
+};
+</script>
+<style lang="less" scoped>
+.company_service_box {
+  margin-top: 10px;
+  width: 24vw;
+  height: 28vh;
+  // border: 0.1px solid #495e70;
+  background: url("~@/assets/safetyIndex/back001.png") no-repeat;
+  background-size: 100% 100%;
+  /* 盒子标题 */
+  .title {
+    width: 24vw;
+    height: 2.7vh;
+    display: flex;
+    font-size: 16px;
+    color: #d9e7ff;
+    font-weight: 500;
+    /* 图片盒子 */
+    .img_box {
+      width: 1.5vw;
+      height: 2.7vh;
+      display: flex;
+      justify-content: center;
+      align-items: center;
+      img {
+        width: 16px;
+        height: 16px;
+      }
+    }
+    .title_text {
+      width: 4vw;
+      height: 3.2vh;
+      line-height: 3.2vh;
+      text-align: right;
+    }
+  }
+  .service_type {
+    width: 22vw;
+    height: 6vh;
+    margin-top: 1vh;
+    margin-left: 1vw;
+    display: flex;
+    justify-content: space-around;
+    .month_service {
+      width: 6vw;
+      height: 6.5vh;
+      background: url("~@/assets/safetyIndex/service001.png") no-repeat;
+      background-size: 100% 100%;
+      .month_service_text {
+        width: 6vw;
+        height: 3vh;
+        color: #37fdc7;
+        font-size: 14px;
+        font-weight: 600;
+        letter-spacing: 2px;
+        text-align: center;
+        line-height: 3vh;
+      }
+      .month_service_value {
+        text-align: center;
+        color: #37fdc7;
+        width: 6vw;
+        height: 3.5vh;
+        line-height: 3.5vh;
+        font-size: 28px;
+        font-weight: 600;
+      }
+    }
+    .season_service {
+      width: 6vw;
+      height: 6.5vh;
+      background: url("~@/assets/safetyIndex/service002.png") no-repeat;
+      background-size: 100% 100%;
+      .season_service_text {
+        width: 6vw;
+        height: 3vh;
+        color: #ecde3d;
+        font-size: 14px;
+        font-weight: 600;
+        letter-spacing: 2px;
+        text-align: center;
+        line-height: 3vh;
+      }
+      .season_service_value {
+        text-align: center;
+        color: #ecde3d;
+        width: 6vw;
+        height: 3.5vh;
+        line-height: 3.5vh;
+        font-size: 28px;
+        font-weight: 600;
+      }
+    }
+    .year_service {
+      width: 6vw;
+      height: 6.5vh;
+      background: url("~@/assets/safetyIndex/service001.png") no-repeat;
+      background-size: 100% 100%;
+      .year_service_text {
+        width: 6vw;
+        height: 3vh;
+        color: #37fdc7;
+        font-size: 14px;
+        font-weight: 600;
+        letter-spacing: 2px;
+        text-align: center;
+        line-height: 3vh;
+      }
+      .year_service_value {
+        text-align: center;
+        color: #37fdc7;
+        width: 6vw;
+        height: 3.5vh;
+        line-height: 3.5vh;
+        font-size: 28px;
+        font-weight: 600;
+      }
+    }
+  }
+  .service_echarts {
+    width: 24vw;
+    height: 13vh;
+    display: flex;
+    .left_chart {
+      width: 12vw;
+      height: 13vh;
+      border: 0.1px solid #495e70;
+    }
+    .right_chart {
+      width: 12vw;
+      height: 13vh;
+      border: 0.1px solid #495e70;
+    }
+  }
+  .chart_num {
+    margin-top: 0.5vh;
+    width: 24vw;
+    height: 3vh;
+    display: flex;
+    justify-content: space-around;
+    .left_chart_num {
+      width: 10vw;
+      height: 3vh;
+      background: url("~@/assets/safetyIndex/service003.png") no-repeat;
+      background-size: 100% 100%;
+      display: flex;
+      justify-content: center;
+      .chart_num_text {
+        width: 5vw;
+        height: 3vh;
+        text-align: center;
+        line-height: 3vh;
+        color: #d9e7ff;
+        font-size: 14px;
+      }
+      .chart_num_value {
+        width: 3vw;
+        height: 3vh;
+        text-align: center;
+        line-height: 3vh;
+        color: #d9e7ff;
+        font-size: 18px;
+        font-weight: 600;
+      }
+    }
+    .right_chart_num {
+      width: 10vw;
+      height: 3vh;
+      background: url("~@/assets/safetyIndex/service003.png") no-repeat;
+      background-size: 100% 100%;
+      display: flex;
+      justify-content: center;
+      .chart_num_text {
+        width: 5vw;
+        height: 3vh;
+        text-align: center;
+        line-height: 3vh;
+        color: #d9e7ff;
+        font-size: 14px;
+      }
+      .chart_num_value {
+        width: 3vw;
+        height: 3vh;
+        text-align: center;
+        line-height: 3vh;
+        color: #d9e7ff;
+        font-size: 18px;
+        font-weight: 600;
+      }
+    }
+  }
+}
+</style>
\ No newline at end of file
diff --git a/src/views/compositeIndex/components/employee.vue b/src/views/compositeIndex/components/employee.vue
index bbbd99b..f612954 100644
--- a/src/views/compositeIndex/components/employee.vue
+++ b/src/views/compositeIndex/components/employee.vue
@@ -44,32 +44,70 @@
         <!-- 员工类型数量 -->
         <div class="person_type_num">
           <div class="person_type_num_item">
-            {{ this.person_list[0].number }}
+            {{ this.person_one }}
           </div>
           <div class="person_type_num_item">
-            {{ this.person_list[1].number }}
+            {{ this.person_two }}
           </div>
           <div class="person_type_num_item">
-            {{ this.person_list[2].number }}
+            {{ this.person_three }}
           </div>
           <div class="person_type_num_item">
-            {{ this.person_list[3].number }}
+            {{ this.person_four }}
           </div>
         </div>
+        <!-- 员工占比 -->
+        <div class="person_proportion">
+          <div class="person_proportion_item">
+            {{ this.proportion_list[0] }}
+          </div>
+          <div class="person_proportion_item">
+            {{ this.proportion_list[1] }}
+          </div>
+          <div class="person_proportion_item">
+            {{ this.proportion_list[2] }}
+          </div>
+          <div class="person_proportion_item">
+            {{ this.proportion_list[3] }}
+          </div>
+        </div>
+      </div>
+    </div>
+    <!-- 访客和流动人员 -->
+    <div class="visitor_person_body">
+      <div class="visitor_body">
+        <div class="visitor_text">访客</div>
+        <div class="visitor_value">{{ this.visitor_num }}</div>
+      </div>
+      <div class="person_body">
+        <div class="person_text">流动人员</div>
+        <div class="person_value">{{ this.flow_person_num }}</div>
       </div>
     </div>
   </div>
 </template>
 <script>
 import HighCharts from "highcharts";
-import { staffStatistics } from "@/api/safetyIndex";
+import {
+  staffStatistics,
+  visitStatistics,
+  flowStatistics,
+} from "@/api/safetyIndex";
 export default {
   name: "Employee",
   data() {
     return {
       person_sum: "", // 员工总数
       person_list: [], // 员工类型数量
+      next_person_list: [], // 员工类型数量数组，另存，以免影响3d环图
+      person_one: "", // 普通岗位人数
+      person_two: "", // 重点岗位人数
+      person_three: "", // 专家岗位人数
+      person_four: "", // 重点人员人数
       option_data: [],
+      proportion_list: [],
+      visitor_num: 0,
+      flow_person_num: 0,
       statusChart: null,
       id: "DispatchProportion",
       option: {
@@ -144,6 +182,9 @@ export default {
   },
   created() {
     this.get_data();
+    this.get_person_data();
+    this.get_visitor_data();
+    this.get_flow_person_data()
   },
   // mounted() {
 
@@ -170,6 +211,17 @@ export default {
         this.person_sum = res.data.filter((item) => {
           return item.type == "全部";
         })[0].number;
+        // 求员工类型人员数量占比
+        for (let i = 0; i < this.person_list.length; i++) {
+          this.proportion_list.push(
+            Math.round(
+              (Number(this.person_list[i].number) / Number(this.person_sum)) *
+                10000
+            ) /
+              100 +
+              "%"
+          );
+        }
         console.log("this.optionData123", this.option_data);
         let data = [
           ["普通岗位", Number(this.option_data[0].value)],
@@ -181,13 +233,36 @@ export default {
         HighCharts.chart(this.id, this.option);
       });
     },
+    // 员工数量重新请求渲染 --> 原请求数据直接调用会和3d环图起冲突
+    get_person_data() {
+      staffStatistics().then((res) => {
+        let list = res.data.filter((item) => {
+          return item.type != "全部";
+        });
+        this.person_one = list[0].number;
+        this.person_two = list[1].number;
+        this.person_three = list[2].number;
+        this.person_four = list[3].number;
+      });
+    },
+    // 请求访客数量
+    get_visitor_data() {
+      visitStatistics().then((res) => {
+        this.visitor_num = res.data;
+      });
+    },
+    // 请求流动人员数量
+    get_flow_person_data() {
+      flowStatistics().then((res)=>{
+        this.flow_person_num = res.data
+      })
+    },
   },
 };
 </script>
 <style lang="less" scoped>
 .employee_box {
   margin-top: 10px;
-  margin-left: 20px;
   width: 24vw;
   height: 32vh;
   //   border: 0.1px solid #495e70;
@@ -269,7 +344,7 @@ export default {
     .chart_data_body {
       width: 12vw;
       height: 16vh;
-      border: 0.1px solid #495e70;
+      // border: 0.1px solid #495e70;
       display: flex;
       .data_icon {
         width: 1vw;
@@ -320,7 +395,6 @@ export default {
       .person_type_num {
         width: 3vw;
         height: 16vh;
-        border: 0.1px solid #495e70;
         .person_type_num_item {
           width: 3vw;
           height: 4vh;
@@ -329,6 +403,82 @@ export default {
           line-height: 4vh;
         }
       }
+      .person_proportion {
+        width: 3vw;
+        height: 16vh;
+        // border: 0.1px solid #495e70;
+        .person_proportion_item {
+          width: 3vw;
+          height: 4vh;
+          color: #d9e7ff;
+          text-align: center;
+          line-height: 4vh;
+        }
+      }
+    }
+  }
+  .visitor_person_body {
+    width: 22vw;
+    height: 5vh;
+    // border: 0.1px solid #495e70;
+    margin-left: 1vw;
+    display: flex;
+    justify-content: space-around;
+    .visitor_body {
+      width: 10vw;
+      height: 5vh;
+      background: url("~@/assets/safetyIndex/employee01.png") no-repeat;
+      background-size: 100% 100%;
+      display: flex;
+      justify-content: center;
+      .visitor_text {
+        width: 4vw;
+        height: 5vh;
+        text-align: right;
+        color: #d9e7ff;
+        line-height: 5vh;
+        font-size: 14px;
+        letter-spacing: 2px;
+        font-weight: 500;
+      }
+      .visitor_value {
+        width: 3vw;
+        height: 5vh;
+        color: #d9e7ff;
+        line-height: 5vh;
+        text-align: center;
+        font-weight: 800;
+        font-size: 18px;
+        text-shadow: 0 0 9px rgba(21, 255, 198, 0.64);
+      }
+    }
+    .person_body {
+      width: 10vw;
+      height: 5vh;
+      background: url("~@/assets/safetyIndex/employee02.png") no-repeat;
+      background-size: 100% 100%;
+      // border: 0.1px solid #495e70;
+      display: flex;
+      justify-content: center;
+      .person_text {
+        width: 5.5vw;
+        height: 5vh;
+        text-align: right;
+        color: #d9e7ff;
+        line-height: 5vh;
+        font-size: 14px;
+        font-weight: 500;
+      }
+      .person_value {
+        width: 3vw;
+        height: 5vh;
+        color: #d9e7ff;
+        line-height: 5vh;
+        text-align: center;
+        font-weight: 800;
+        font-size: 18px;
+        text-shadow: 0 0 9px rgba(21, 255, 198, 0.64);
+      }
     }
   }
 }
diff --git a/src/views/compositeIndex/components/notification.vue b/src/views/compositeIndex/components/notification.vue
new file mode 100644
index 0000000..66c3e45
--- /dev/null
+++ b/src/views/compositeIndex/components/notification.vue
@@ -0,0 +1,57 @@
+<!-- 警情通报 -->
+<template>
+  <div class="notification_box">
+    <!-- 模块标题 -->
+    <div class="title">
+      <div class="img_box">
+        <!-- <img src="@/assets/safetyIndex/装饰009991.png" alt="" /> -->
+      </div>
+      <div class="title_text">警情通报</div>
+    </div>
+  </div>
+</template>
+<script>
+export default {
+  name: "Notification",
+  data() {
+    return {};
+  },
+};
+</script>
+<style lang="less" scoped>
+.notification_box {
+  margin-top: 10px;
+  width: 24vw;
+  height: 32vh;
+  // border: 0.1px solid #495e70;
+  background: url("~@/assets/safetyIndex/back001.png") no-repeat;
+  background-size: 100% 100%;
+  /* 盒子标题 */
+  .title {
+    width: 24vw;
+    height: 2.7vh;
+    display: flex;
+    font-size: 16px;
+    color: #d9e7ff;
+    font-weight: 500;
+    /* 图片盒子 */
+    .img_box {
+      width: 1.5vw;
+      height: 2.7vh;
+      display: flex;
+      justify-content: center;
+      align-items: center;
+      img {
+        width: 16px;
+        height: 16px;
+      }
+    }
+    .title_text {
+      width: 4vw;
+      height: 3.2vh;
+      line-height: 3.2vh;
+      text-align: right;
+    }
+  }
+}
+</style>
\ No newline at end of file
diff --git a/src/views/compositeIndex/index.vue b/src/views/compositeIndex/index.vue
index 126232f..7f9466a 100644
--- a/src/views/compositeIndex/index.vue
+++ b/src/views/compositeIndex/index.vue
@@ -3,21 +3,37 @@
   <div>
     <!-- 最底层地图框 -->
     <div class="map_box">
-      <!-- 园区企业 -->
-      <CompanyNum ref="companyNum"></CompanyNum>
-      <!-- 企业员工 -->
-      <Employee ref="employee"></Employee>
+      <div class="left_box">
+        <!-- 园区企业 -->
+        <CompanyNum ref="companyNum"></CompanyNum>
+        <!-- 企业员工 -->
+        <Employee ref="employee"></Employee>
+        <!-- 园区车辆 -->
+        <CompanyCar ref="companyCar"></CompanyCar>
+      </div>
+      <div class="right_box">
+        <!-- 惠企服务 -->
+        <CompanyService ref="companyService"></CompanyService>
+        <!-- 警情通报 -->
+        <Notification ref="notification"></Notification>
+      </div>
     </div>
   </div>
 </template>
 <script>
 import CompanyNum from "./components/companyNum";
 import Employee from "./components/employee";
+import CompanyCar from "./components/companyCar";
+import CompanyService from "./components/companyService";
+import Notification from "./components/notification"
 export default {
   name: "CompositeIndex",
   components: {
     CompanyNum,
     Employee,
+    CompanyCar,
+    CompanyService,
+    Notification
   },
   data() {
     return {};
@@ -30,6 +46,17 @@ export default {
   width: 100%;
   height: calc(100% - 80px);
   box-sizing: border-box;
+  position: relative;
   //   border: 0.1px solid #495e70;
+  .left_box {
+    position: absolute;
+    width: 24vw;
+    left: 20px;
+  }
+  .right_box {
+    position: absolute;
+    width: 24vw;
+    right: 20px;
+  }
 }
 </style>
\ No newline at end of file
diff --git a/src/views/realtimeWarning/index.vue b/src/views/realtimeWarning/index.vue
index 2ec3720..0c13f43 100644
--- a/src/views/realtimeWarning/index.vue
+++ b/src/views/realtimeWarning/index.vue
@@ -21,7 +21,7 @@
         <div class="totalTitle">
           <div class="titleText">预警列表</div>
           <span
-            >&nbsp;（ <span class="redText">{{ total }}</span> ）</span
+            >( <span class="redText">{{ total }}</span> )</span
           >
           <div class="searchBox">
             <el-form :model="formInline" class="search">
@@ -293,7 +293,7 @@ export default {
           font-size: 16px;
           color: #ebfff4;
           letter-spacing: 2px;
-          width: 120px;
+          width: 80px;
           text-shadow: 0 0 9px rgba(21, 255, 195, 0.6);
           font-weight: 400;
         }
diff --git a/src/views/safetyIndex/anjian.vue b/src/views/safetyIndex/anjian.vue
index 2939a4a..c7aa2c9 100644
--- a/src/views/safetyIndex/anjian.vue
+++ b/src/views/safetyIndex/anjian.vue
@@ -1,22 +1,38 @@
 <template>
-    <div class="asj">
-        <div class="title"><img src="../../assets/safetyIndex/装饰009991.png" alt="">案事件</div>
-        <div class="qyclBody">
-            <swiper :options="swiperOption1" class="swiper" ref="mySwiper1" v-if="caseTotalList.length">
-                <swiper-slide v-for="(item, index) of caseTotalList" :key="index" class="today">
-                    <div class="todayChild" @click="showfangkeVisible(item)">
-                        <div class="caseDetail">{{ item.caseName }}</div>
-                        <div class="caseMsg">
-                            <div>企业名称：{{ item.caseAddress }}</div>
-                            <div>时间：{{ item.registerTime }}</div>
-                        </div>
-                    </div>
-                </swiper-slide>
-            </swiper>
-        </div>
-        <el-dialog title="案件详情" :visible.sync="fangkeVisible" class="picForm" v-if="anjianDetail">
-            <div class="jibenx">
-                <!-- <div class="jibenhang">
+  <div class="asj">
+    <div class="title">
+      <img src="../../assets/safetyIndex/装饰009991.png" alt="" />案事件
+    </div>
+    <div class="qyclBody">
+      <swiper
+        :options="swiperOption1"
+        class="swiper"
+        ref="mySwiper1"
+        v-if="caseTotalList.length"
+      >
+        <swiper-slide
+          v-for="(item, index) of caseTotalList"
+          :key="index"
+          class="today"
+        >
+          <div class="todayChild" @click="showfangkeVisible(item)">
+            <div class="caseDetail">{{ item.caseName }}</div>
+            <div class="caseMsg">
+              <div>企业名称：{{ item.caseAddress }}</div>
+              <div>时间：{{ item.registerTime }}</div>
+            </div>
+          </div>
+        </swiper-slide>
+      </swiper>
+    </div>
+    <el-dialog
+      title="案件详情"
+      :visible.sync="fangkeVisible"
+      class="picForm"
+      v-if="anjianDetail"
+    >
+      <div class="jibenx">
+        <!-- <div class="jibenhang">
         <div class="jibenhangTitle">企业名称</div>
         <div class="jibenhangleftText">
             <span v-html="anjianDetail.caseName"></span>
@@ -26,411 +42,396 @@
             <div>{{ anjianDetail.caseName }}</div>
         </div>
     </div> -->
-                <div class="jibenhang">
-                    <div class="jibenhangTitle">案件编号</div>
-                    <div class="jibenhangleftText">
-                        <span v-html="anjianDetail.caseNo"></span>
-                    </div>
-                    <div class="jibenhangTitle">案件名称</div>
-                    <div class="jibenhangrightText">
-                        <div>{{ anjianDetail.caseName }}</div>
-                    </div>
-                </div>
-                <div class="jibenhang">
-                    <div class="jibenhangTitle">案件分类</div>
-                    <div class="jibenhangleftText">
-                        <span v-html="anjianDetail.caseType"></span>
-                    </div>
-                    <div class="jibenhangTitle">案件类别</div>
-                    <div class="jibenhangrightText">
-                        <div>{{ anjianDetail.caseCategory }}</div>
-                    </div>
-                </div>
-                <div class="jibenhang">
-                    <div class="jibenhangTitle">发案区划</div>
-                    <div class="jibenhangleftText">
-                        <span v-html="anjianDetail.policeDistrictCode"></span>
-                    </div>
-                    <div class="jibenhangTitle">派出所</div>
-                    <div class="jibenhangrightText">
-                        <div>{{ anjianDetail.policeDistrictCn }}</div>
-                    </div>
-                </div>
-                <div class="jibenhang">
-                    <div class="jibenhangTitle">破案情况</div>
-                    <div class="jibenhangleftText">
-                        <span v-html="anjianDetail.caseState"></span>
-                    </div>
-                    <div class="jibenhangTitle">发案地点</div>
-                    <div class="jibenhangrightText">
-                        <div>{{ anjianDetail.caseAddress }}</div>
-                    </div>
-                </div>
-                <div class="jibenhang1 jibenhang">
-                    <div class="jibenhangTitle">简要案情</div>
-                    <div class="jibenhangText">
-                        <span>{{ anjianDetail.caseDetail }}</span>
-                    </div>
-
-                </div>
-            </div>
-        </el-dialog>
-    </div>
+        <div class="jibenhang">
+          <div class="jibenhangTitle">案件编号</div>
+          <div class="jibenhangleftText">
+            <span v-html="anjianDetail.caseNo"></span>
+          </div>
+          <div class="jibenhangTitle">案件名称</div>
+          <div class="jibenhangrightText">
+            <div>{{ anjianDetail.caseName }}</div>
+          </div>
+        </div>
+        <div class="jibenhang">
+          <div class="jibenhangTitle">案件分类</div>
+          <div class="jibenhangleftText">
+            <span v-html="anjianDetail.caseType"></span>
+          </div>
+          <div class="jibenhangTitle">案件类别</div>
+          <div class="jibenhangrightText">
+            <div>{{ anjianDetail.caseCategory }}</div>
+          </div>
+        </div>
+        <div class="jibenhang">
+          <div class="jibenhangTitle">发案区划</div>
+          <div class="jibenhangleftText">
+            <span v-html="anjianDetail.policeDistrictCode"></span>
+          </div>
+          <div class="jibenhangTitle">派出所</div>
+          <div class="jibenhangrightText">
+            <div>{{ anjianDetail.policeDistrictCn }}</div>
+          </div>
+        </div>
+        <div class="jibenhang">
+          <div class="jibenhangTitle">破案情况</div>
+          <div class="jibenhangleftText">
+            <span v-html="anjianDetail.caseState"></span>
+          </div>
+          <div class="jibenhangTitle">发案地点</div>
+          <div class="jibenhangrightText">
+            <div>{{ anjianDetail.caseAddress }}</div>
+          </div>
+        </div>
+        <div class="jibenhang1 jibenhang">
+          <div class="jibenhangTitle">简要案情</div>
+          <div class="jibenhangText">
+            <span>{{ anjianDetail.caseDetail }}</span>
+          </div>
+        </div>
+      </div>
+    </el-dialog>
+  </div>
 </template>
 
 <script>
 import "swiper/dist/css/swiper.min.css";
-import { swiper, swiperSlide } from "vue-awesome-swiper/dist/vue-awesome-swiper.js";
-import { caseList } from '@/api/safetyIndex'
+import {
+  swiper,
+  swiperSlide,
+} from "vue-awesome-swiper/dist/vue-awesome-swiper.js";
+import { caseList } from "@/api/safetyIndex";
 export default {
-    components: {
-        swiper,
-        swiperSlide
+  components: {
+    swiper,
+    swiperSlide,
+  },
+  data() {
+    return {
+      staffStatisticsList: [],
+      staffDetailList: [],
+      listTotal: {},
+      fangkeVisible: false,
+      fangkepageSize: 10,
+      fangkepageNum: 1,
+      fangketotal: 0,
+      fangkeList: [],
+      intotal: 0,
+      outtotal: 0,
+      ziyouTotal: 0,
+      zulintotal: 0,
+      useType: 0,
+      caseTotalList: [],
+      anjianDetail: {},
+      swiperOption1: {
+        direction: "vertical",
+        // cubeEffect:true,
+        grabCursor: true,
+        // centeredSlides: true,
+        slidesPerView: "auto",
+        loop: true, // 循环模式选项 设置为true 则开启loop模式。loop模式：会在原本slide前后复制若干个slide(默认一个)并在合适的时候切换，让Swiper看起来是循环的。
+        loopedSlides: 2, //在loop模式下使用slidesPerview:'auto'，还需使用该参数设置所要用到的loop个数(一般设置大于可视slide个数2个即可)。
+        autoplay: {
+          delay: 3000,
+          disableOnInteraction: false,
+        },
+        //滑动速度
+        speed: 1000,
+      },
+    };
+  },
+  created() {
+    this.getList();
+  },
+  methods: {
+    getList() {
+      caseList().then((res) => {
+        this.caseTotalList = res.data;
+      });
     },
-    data() {
+    tableRowStyle({ rowIndex }) {
+      if ((rowIndex + 1) % 2 == 1) {
+        return { background: "rgba(0,0,0,0)", color: "#fff", border: "0" };
+      } else {
         return {
-            staffStatisticsList: [],
-            staffDetailList: [],
-            listTotal: {},
-            fangkeVisible: false,
-            fangkepageSize: 10,
-            fangkepageNum: 1,
-            fangketotal: 0,
-            fangkeList: [],
-            intotal: 0,
-            outtotal: 0,
-            ziyouTotal: 0,
-            zulintotal: 0,
-            useType: 0,
-            caseTotalList: [],
-            anjianDetail: {},
-            swiperOption1: {
-                direction: "vertical",
-                // cubeEffect:true,
-                grabCursor: true,
-                // centeredSlides: true,
-                slidesPerView: 'auto',
-                loop: true, // 循环模式选项 设置为true 则开启loop模式。loop模式：会在原本slide前后复制若干个slide(默认一个)并在合适的时候切换，让Swiper看起来是循环的。
-                loopedSlides: 2, //在loop模式下使用slidesPerview:'auto'，还需使用该参数设置所要用到的loop个数(一般设置大于可视slide个数2个即可)。
-                autoplay: {
-                    delay: 3000,
-                    disableOnInteraction: false,
-                },
-                //滑动速度
-                speed: 1000,
-            }
-        }
+          background: "rgba(61, 85, 102, 0.16)",
+          border: "0",
+          color: "#fff",
+        };
+      }
     },
-    created() {
-        this.getList()
-
+    tableHeaderColor() {
+      return {
+        background:
+          "linear-gradient( rgba(38, 88, 76, 0.6) 100%, rgba(55, 131, 128, 0.6) 100%, rgba(34, 74, 53, 0.46) 46%)",
+      };
+      // return { 'background': 'url("~@/assets/archives/列表9910.png") no-repeat;', 'background-size': '100% 100%;', 'color': '#fff' }
+    },
+    tableHeaderCellColor() {
+      return { background: "rgba(0,0,0,0)", border: "0", color: "#fff" };
     },
-    methods: {
-        getList() {
-            caseList().then(res => {
-                this.caseTotalList = res.data
-            })
-        },
-        tableRowStyle({ rowIndex }) {
-            if ((rowIndex + 1) % 2 == 1) {
-                return { 'background': 'rgba(0,0,0,0)', 'color': '#fff', 'border': '0' }
-            } else {
-                return { 'background': 'rgba(61, 85, 102, 0.16)', 'border': '0', 'color': '#fff' }
-            }
-        },
-        tableHeaderColor() {
-            return { 'background': 'linear-gradient( rgba(38, 88, 76, 0.6) 100%, rgba(55, 131, 128, 0.6) 100%, rgba(34, 74, 53, 0.46) 46%)' }
-            // return { 'background': 'url("~@/assets/archives/列表9910.png") no-repeat;', 'background-size': '100% 100%;', 'color': '#fff' }
-        },
-        tableHeaderCellColor() {
-            return { 'background': 'rgba(0,0,0,0)', 'border': '0', 'color': '#fff' }
-        },
-
-        fangkeSizeChange(val) {
-            this.fangkepageNum = 1;
-            this.fangkepageSize = val;
-            this.showfangkeVisible(this.useType)
-        },
-        fangkeCurrentChange(val) {
-            this.fangkepageNum = val;
-            this.showfangkeVisible(this.useType)
-        },
 
+    fangkeSizeChange(val) {
+      this.fangkepageNum = 1;
+      this.fangkepageSize = val;
+      this.showfangkeVisible(this.useType);
+    },
+    fangkeCurrentChange(val) {
+      this.fangkepageNum = val;
+      this.showfangkeVisible(this.useType);
+    },
 
-        showfangkeVisible(val) {
-            this.anjianDetail = val
-            this.fangkeVisible = true
-        }
+    showfangkeVisible(val) {
+      this.anjianDetail = val;
+      this.fangkeVisible = true;
     },
-}
+  },
+};
 </script>
 
 <style lang="less" scoped>
 .asj {
-    height: 23%;
+  height: 23%;
+  width: 100%;
+  margin-bottom: 20px;
+  background: url("~@/assets/safetyIndex/主屏板块1.png") no-repeat;
+  background-size: 100% 100%;
+
+  .title {
     width: 100%;
-    margin-bottom: 20px;
-    background: url('~@/assets/safetyIndex/主屏板块1.png') no-repeat;
+    height: 33px;
+    background: url("~@/assets/safetyIndex/标题样式.png") no-repeat;
     background-size: 100% 100%;
+    font-size: 16px;
+    color: #d9e7ff;
+    letter-spacing: 1px;
+    text-align: center;
+    font-weight: 500;
+    display: flex;
+    align-items: center;
+
+    img {
+      width: 16px;
+      height: 16px;
+      margin: 0 12px;
+    }
+  }
 
+  .qyclBody {
+    width: 100%;
+    height: calc(100% - 33px);
+    padding: 0 20px;
+    box-sizing: border-box;
+    display: flex;
+    justify-content: center;
+    align-content: space-around;
+    flex-wrap: wrap;
+    overflow: hidden;
+
+    .swiper {
+      width: 100%;
+      height: 100%;
+    }
 
+    .today {
+      width: 100%;
+      height: 50%;
+      display: flex;
+      justify-content: space-between;
+      align-items: center;
+      padding: 5px 0;
+      box-sizing: border-box;
 
-    .title {
+      .todayChild {
         width: 100%;
-        height: 33px;
-        background: url('~@/assets/safetyIndex/标题样式.png') no-repeat;
-        background-size: 100% 100%;
-        font-size: 16px;
-        color: #D9E7FF;
-        letter-spacing: 1px;
-        text-align: center;
-        font-weight: 500;
+        height: 100%;
         display: flex;
         align-items: center;
-
-        img {
-            width: 16px;
-            height: 16px;
-            margin: 0 12px;
-        }
-    }
-
-    .qyclBody {
-        width: 100%;
-        height: calc(100% - 33px);
-        padding: 0 20px;
-        box-sizing: border-box;
-        display: flex;
-        justify-content: center;
-        align-content: space-around;
         flex-wrap: wrap;
-        overflow: hidden;
-
-        .swiper {
-            width: 100%;
-            height: 100%;
+        box-sizing: border-box;
+        position: relative;
+        padding: 10px 8px;
+        background: rgba(0, 0, 0, 0);
+        z-index: 200;
+        cursor: pointer;
+
+        .caseDetail {
+          width: 100%;
+          height: 60%;
+          font-size: 16px;
+          color: #ffe6d9;
+          letter-spacing: 0;
+          line-height: 16px;
+          text-shadow: 0 0 8px rgba(255, 119, 52, 0.5);
+          font-weight: 400;
+          // display: flex;
+          // align-items: center;
+          overflow: hidden;
+          white-space: nowrap; //禁止换行
+          text-overflow: ellipsis; //...
         }
 
-        .today {
-            width: 100%;
-            height: 50%;
-            display: flex;
-            justify-content: space-between;
-            align-items: center;
-            padding: 5px 0;
-            box-sizing: border-box;
-
-
-            .todayChild {
-                width: 100%;
-                height: 100%;
-                display: flex;
-                align-items: center;
-                flex-wrap: wrap;
-                box-sizing: border-box;
-                position: relative;
-                padding: 10px 8px;
-                background: rgba(0, 0, 0, 0);
-                z-index: 200;
-                cursor: pointer;
-
-                .caseDetail {
-                    width: 100%;
-                    height: 60%;
-                    font-size: 16px;
-                    color: #FFE6D9;
-                    letter-spacing: 0;
-                    line-height: 16px;
-                    text-shadow: 0 0 8px rgba(255, 119, 52, 0.50);
-                    font-weight: 400;
-                    // display: flex;
-                    // align-items: center;
-                    overflow: hidden;
-                    white-space: nowrap; //禁止换行
-                    text-overflow: ellipsis; //...
-                }
-
-                .caseMsg {
-                    width: 100%;
-                    height: 40%;
-                    font-size: 14px;
-                    color: #D0DEEE;
-                    letter-spacing: 0;
-                    line-height: 16px;
-                    font-weight: 400;
-                    display: flex;
-                    justify-content: space-between;
-                    align-items: center;
-                }
-
-            }
-
-            .todayChild::after {
-                content: "";
-                background: url('~@/assets/safetyIndex/0091.png') no-repeat;
-                background-size: 100% 100%;
-                opacity: 0.5;
-                top: 0;
-                left: 0;
-                bottom: 0;
-                right: 0;
-                position: absolute;
-                z-index: -1;
-            }
-
+        .caseMsg {
+          width: 100%;
+          height: 40%;
+          font-size: 14px;
+          color: #d0deee;
+          letter-spacing: 0;
+          line-height: 16px;
+          font-weight: 400;
+          display: flex;
+          justify-content: space-between;
+          align-items: center;
         }
+      }
 
-
+      .todayChild::after {
+        content: "";
+        background: url("~@/assets/safetyIndex/0091.png") no-repeat;
+        background-size: 100% 100%;
+        opacity: 0.5;
+        top: 0;
+        left: 0;
+        bottom: 0;
+        right: 0;
+        position: absolute;
+        z-index: -1;
+      }
     }
-
-
-
+  }
 }
 
-
 .picForm {
+  /deep/ .el-dialog {
+    background-color: rgba(0, 0, 0, 0);
+    background: url("~@/assets/companyFile/背景2.png") no-repeat;
+    background-size: 100% 100%;
+    width: 811px;
+    height: 420px;
+    position: relative;
 
+    .el-dialog__title {
+      font-size: 16px;
+      color: #ebfff4;
+      letter-spacing: 2px;
 
-    /deep/ .el-dialog {
-        background-color: rgba(0, 0, 0, 0);
-        background: url('~@/assets/companyFile/背景2.png') no-repeat;
-        background-size: 100% 100%;
-        width: 811px;
-        height: 420px;
-        position: relative;
-
-        .el-dialog__title {
-            font-size: 16px;
-            color: #EBFFF4;
-            letter-spacing: 2px;
-
-            text-shadow: 0 0 9px rgba(21, 255, 195, 0.77);
-            font-weight: 400;
-        }
-
-        .el-dialog__body {
-            box-sizing: border-box;
-            height: 360px;
-
-
-            .jibenx {
-                width: 100%;
-                height: 100%;
-                border: 1px solid rgba(91, 116, 140, 0.6);
-
-                .jibenhang {
-                    height: 19%;
-                    width: 100%;
-                    display: flex;
-                    border-bottom: 1px solid rgba(91, 116, 140, 0.6);
-
-                    .jibenhangTitle {
-                        box-sizing: border-box;
-                        padding-left: 10px;
-                        width: 15%;
-                        height: 100%;
-                        background: rgba(108, 128, 151, 0.20);
-                        line-height: 48px;
-                        border-right: 1px solid rgba(91, 116, 140, 0.6);
-                        font-size: 14px;
-                        color: rgba(255, 255, 255, 0.8);
-                        letter-spacing: 0;
-                        font-weight: 400;
+      text-shadow: 0 0 9px rgba(21, 255, 195, 0.77);
+      font-weight: 400;
+    }
 
-                    }
+    .el-dialog__body {
+      box-sizing: border-box;
+      height: 360px;
 
-                    .jibenhangleftText {
-                        width: 30%;
-                        box-sizing: border-box;
-                        padding-left: 10px;
-                        height: 100%;
-                        border-right: 1px solid rgba(91, 116, 140, 0.6);
-                        line-height: 48px;
-                        font-size: 12px;
-                        color: #FFFFFF;
-                        letter-spacing: 0;
-                        font-weight: 400;
-                    }
+      .jibenx {
+        width: 100%;
+        height: 100%;
+        border: 1px solid rgba(91, 116, 140, 0.6);
 
-                    .jibenhangrightText {
-                        box-sizing: border-box;
-                        padding-left: 10px;
-                        width: 40%;
-                        height: 100%;
-                        line-height: 48px;
-                        font-size: 12px;
-                        color: #FFFFFF;
-                        letter-spacing: 0;
-                        font-weight: 400;
-                        overflow: hidden;
-                    }
+        .jibenhang {
+          height: 19%;
+          width: 100%;
+          display: flex;
+          border-bottom: 1px solid rgba(91, 116, 140, 0.6);
 
-                    .jibenhangText {
-                        padding-left: 10px;
-                        width: 85%;
-                        height: 100%;
-                        display: flex;
-                        align-items: center;
-                        font-size: 12px;
-                        color: #FFFFFF;
-                    }
-                }
+          .jibenhangTitle {
+            box-sizing: border-box;
+            padding-left: 10px;
+            width: 15%;
+            height: 100%;
+            background: rgba(108, 128, 151, 0.2);
+            line-height: 48px;
+            border-right: 1px solid rgba(91, 116, 140, 0.6);
+            font-size: 14px;
+            color: rgba(255, 255, 255, 0.8);
+            letter-spacing: 0;
+            font-weight: 400;
+          }
 
-                .jibenhang1 {
-                    height: 24%;
-                    width: 100%;
-                    border-bottom: 0;
-                    box-sizing: border-box;
+          .jibenhangleftText {
+            width: 30%;
+            box-sizing: border-box;
+            padding-left: 10px;
+            height: 100%;
+            border-right: 1px solid rgba(91, 116, 140, 0.6);
+            line-height: 48px;
+            font-size: 12px;
+            color: #ffffff;
+            letter-spacing: 0;
+            font-weight: 400;
+          }
 
-                    .jibenhangTitle {
+          .jibenhangrightText {
+            box-sizing: border-box;
+            padding-left: 10px;
+            width: 40%;
+            height: 100%;
+            line-height: 48px;
+            font-size: 12px;
+            color: #ffffff;
+            letter-spacing: 0;
+            font-weight: 400;
+            overflow: hidden;
+          }
 
-                        padding-left: 12px;
-                        width: 15%;
-                        height: 100%;
-                        background: rgba(108, 128, 151, 0.20);
-                        line-height: 57px;
-                        border-right: 1px solid rgba(91, 116, 140, 0.6);
-                        font-size: 14px;
-                        color: rgba(255, 255, 255, 0.8);
-                        letter-spacing: 0;
-                        font-weight: 400;
+          .jibenhangText {
+            padding-left: 10px;
+            width: 85%;
+            height: 100%;
+            display: flex;
+            align-items: center;
+            font-size: 12px;
+            color: #ffffff;
+          }
+        }
 
-                    }
+        .jibenhang1 {
+          height: 24%;
+          width: 100%;
+          border-bottom: 0;
+          box-sizing: border-box;
 
-                    .jibenhangText {
-                        padding-left: 10px;
-                        width: 84.8%;
-                        height: 100%;
-                        display: flex;
-                        align-items: center;
-                        font-size: 12px;
-                        color: #FFFFFF;
-                        box-sizing: border-box;
-                    }
-                }
-            }
+          .jibenhangTitle {
+            padding-left: 12px;
+            width: 15%;
+            height: 100%;
+            background: rgba(108, 128, 151, 0.2);
+            line-height: 57px;
+            border-right: 1px solid rgba(91, 116, 140, 0.6);
+            font-size: 14px;
+            color: rgba(255, 255, 255, 0.8);
+            letter-spacing: 0;
+            font-weight: 400;
+          }
 
+          .jibenhangText {
+            padding-left: 10px;
+            width: 84.8%;
+            height: 100%;
+            display: flex;
+            align-items: center;
+            font-size: 12px;
+            color: #ffffff;
+            box-sizing: border-box;
+          }
         }
+      }
     }
+  }
 }
 
-
-
 /deep/.el-input__inner {
-    // background: url('~@/assets/companyFile/2121.png') no-repeat;
-    background: url('~@/assets/companyFile/矩形备份 18.png') no-repeat;
-    background-size: 100% 100%;
-    border: 1px solid rgba(40, 132, 126, 1);
-    color: rgba(234, 246, 255, 0.7);
-    ;
-
-    .el-range-separator {
-        color: #ccc;
-    }
-
-    .el-range-input {
-        background: rgba(0, 0, 0, 0);
-        color: #ccc;
-    }
+  // background: url('~@/assets/companyFile/2121.png') no-repeat;
+  background: url("~@/assets/companyFile/矩形备份 18.png") no-repeat;
+  background-size: 100% 100%;
+  border: 1px solid rgba(40, 132, 126, 1);
+  color: rgba(234, 246, 255, 0.7);
+  .el-range-separator {
+    color: #ccc;
+  }
+
+  .el-range-input {
+    background: rgba(0, 0, 0, 0);
+    color: #ccc;
+  }
 }
 </style>
\ No newline at end of file