diff --git a/src/api/api.js b/src/api/api.js
index ab21b61..fa544e5 100644
--- a/src/api/api.js
+++ b/src/api/api.js
@@ -88,64 +88,3 @@ export const getCompleteMonthStatus = (params) => {
   {params},
    )
 };
-export function filterCompanyAPI (params) {
-  return request({
-    url: '/rcm/company-credit/filterCompany',
-    method: 'post',
-    data: params
-  })
-}
-
-export function normalScanAPI (params) {
-  return request({
-    url: '/rcm/company-credit/report',
-    method: 'post',
-    data: params
-  })
-}
-
-export function deepScanAPI (params) {
-  return request({
-    url: '/rcm/company-credit/deepAuthUrl',
-    method: 'post',
-    data: params
-  })
-}
-
-export function reportDetailAPI (params) {
-  return request({
-    url: `/rcm/company-credit/detail?requestId=${params.id}`,
-    method: 'get',
-    data: params,
-    headers: {
-      'Content-Type': 'application/json;charset=UTF-8'
-    }
-  })
-}
-
-export function deepReportAPI (params) {
-  return request({
-    url: `/rcm/company-credit/deep-report`,
-    method: 'post',
-    data: params,
-    headers: {
-      'Content-Type': 'application/json;charset=UTF-8'
-    }
-  })
-}
-
-export function taxInfoAPI (params) {
-  return request({
-    url: `/rcm/company-credit/taxInfo`,
-    method: 'post',
-    data: params
-  })
-}
-
-export function saveScoreAPI (params) {
-  return request({
-    url: `/rcm/company-credit/updateScore`,
-    method: 'post',
-    data: params
-  })
-}
diff --git a/src/api/personnel.js b/src/api/personnel.js
index 7dc8cb9..ec19b9c 100644
--- a/src/api/personnel.js
+++ b/src/api/personnel.js
@@ -26,4 +26,16 @@ export const getUserGroup = (params) => {
     {params},
      )
 };
+//施工人员组成
+export const getGroupCensus = (params) => {
+    return axios.get('api/ems-third-party-service/user/groupCensus',
+    {params},
+     )
+};
+//考勤监控
+export const getAttend = (params) => {
+    return axios.get('api/ems-third-party-service/user/attend',
+    {params},
+     )
+};
 
diff --git a/src/components/common/pieChart.vue b/src/components/common/pieChart.vue
index 2d459a7..0773a54 100644
--- a/src/components/common/pieChart.vue
+++ b/src/components/common/pieChart.vue
@@ -1,7 +1,7 @@
 <template>
   <div style="width:100%;height:100%;">
     <div ref="chart" style="width:100%;height:100%;"></div>
-    <div class="boxPeople aa">
+    <!-- <div class="boxPeople aa">
       <div class="name" style="color: #fcecb8;">架子工</div>
       <div class="nucm" style="color: #eadfb4;">33<span
           style=" font-size: 18px; font-weight: 400;color: #fcecb8;">%</span></div>
@@ -20,7 +20,7 @@
       <div class="name" style="color: #53E3FF">项目监理组</div>
       <div class="nucm" style="color: #d9def4;">40<span style=" font-size: 18px; font-weight: 400;color:#d9def4">%</span>
       </div>
-    </div>
+    </div> -->
   </div>
 </template>
 <script>
@@ -39,7 +39,10 @@ export default {
             return ['#00A572', '#007EC1', '#DA9300', '#878787']
         } 
     },
-
+    constructionPersonnel:{
+      type: Array,
+      default:null 
+    }
   },
 
   components: {
@@ -49,61 +52,30 @@ export default {
     return {}
   },
   mounted() {
-    this.initCharts(window.innerHeight)
+    
   },
   watch: {
-    // 监听父组件中的数据变化，重新触发Echarts
-    chartData: {
+    // // 监听父组件中的数据变化，重新触发Echarts
+    // chartData: {
+    //   deep: true,
+    //   handler() {
+    //     this.resetOption()
+    //   }
+    // },
+    constructionPersonnel:{
       deep: true,
-      handler() {
-        this.resetOption()
+      handler(newVal) {
+        this.initCharts(newVal)
       }
     }
   },
   methods: {
-    initCharts() {
+    initCharts(dataList) {
       let myChart = this.$echarts.init(this.$refs.chart)
-      var val1data2 = [{
-          value: 33,
-          name: '电工',
-          itemStyle: { // 此配置
-                normal: {
-                  borderWidth: 2,
-                  borderColor: '#52FFC1'
-                }
-              },
-        },
-        {
-          value: 13,
-          name: '项目监理组',
-          itemStyle: { // 此配置
-                normal: {
-                  borderWidth: 2,
-                  borderColor: '#B6F9FF'
-                }
-              },
-        },
-        {
-          value: 14,
-          name: '土建专工',
-          itemStyle: { // 此配置
-                normal: {
-                  borderWidth: 2,
-                  borderColor: '#DCD6FF'
-                }
-              },
-        },
-        {
-          value: 43,
-          name: '架子工',
-          itemStyle: { // 此配置
-                normal: {
-                  borderWidth: 2,
-                  borderColor: '#FFF6DA'
-                }
-              },
-        }
-        ]
+      var val1data2 = []
+        val1data2 = Object.keys(dataList).map((item,index)=>{
+          return {name:dataList[item].post,value:dataList[item].percent}
+        })
       var arr = ['middleLost', 0.6, val1data2, '今日完成进度']
       // 绘制图表
       myChart.setOption({
@@ -116,30 +88,37 @@ export default {
               height:120
             },
             left: '162',//
-            top: '109' //配置图片居中
+            top: '104' //配置图片居中
           }]
         },
         series: [
         // ['48%', '60%']
           {
             type: 'pie',
-            radius: this.picIsShow ? ['51%', '63%'] : ['60%', '60%'],
-            center: ['50%', '170'],
+            radius: this.picIsShow ? ['48%', '60%'] : ['57%', '57%'],
+            center: ['50%', '55%'],
             color: this.colorList,
             hoverAnimation: true, /// /设置饼图默认的展开样式
             label: {
-              show: false,
-              formatter: '{b}{c}%',
+              show: true,
+              formatter: '{b}：{c}%',
+              padding:[0,10,0,50],
+              itemStyle: { // 此配置
+                normal: {
+                  borderWidth: 2,
+                  borderColor: '#52FFC1'
+                }
+              },
               rich: {
                 d: {
                   color: '#fff',
-                  fontSize: 16,
+                  fontSize: 20,
                   lineHeight: 24,
                   height: 24
                 },
                 c: {
                   color: "red",
-                  fontSize: 14,
+                  fontSize: 20,
                   lineHeight: 20,
                   align: 'left',
                 }
diff --git a/src/components/common/pieDateChart.vue b/src/components/common/pieDateChart.vue
index c416f25..f9139f9 100644
--- a/src/components/common/pieDateChart.vue
+++ b/src/components/common/pieDateChart.vue
@@ -5,7 +5,7 @@
       <span>{{totalPer}}</span>
       <span>人</span>
     </div>
-    <div ref="chart" style="width:100%;height:100%;"></div>
+    <div ref="chart" style="width:100%;height:100%;position: relative;left: 53%;"></div>
     <div class="jsBox">
       <div class="bogJs" v-for="(item, i) in pieData" :key="i">
         <div class="jsChild">
@@ -101,323 +101,127 @@ export default {
 
     initCharts() {
       let myChart = this.$echarts.init(this.$refs.chart);
-    //   var placeHolderStyle = {
-    //     normal: {
-    //       label: {
-    //         show: false,
-    //         position: "center"
-    //       },
-    //       labelLine: {
-    //         show: false
-    //       },
-    //       color: "#104841a3",
-    //       borderWidth: 0
-    //     },
-    //     emphasis: {
-    //       color: "#104841a3",
-    //       borderColor: "#00b3ff",
-    //       borderWidth: 0
-    //     }
-    //   };
-    //   // 绘制图表
-    //   myChart.setOption({
-    //     series: [
-    //       {
-    //         name: '值',
-    //         type: 'pie',
-    //         clockWise: true,
-    //         hoverAnimation: false,
-    //         radius: ['92%', '97%'],
-    //         center: ['50%', '50%'],
-    //         itemStyle: {
-    //           normal: {
-    //             label: {
-    //               show: false
-    //             },
-    //             labelLine: {
-    //               show: false,
-    //               length: 100,
-    //               smooth: 0.5
-    //             },
-    //             borderWidth: 5,
-    //             shadowBlur: 40,
-    //             borderColor: "#00B3FF",
-    //             shadowColor: 'rgba(0, 0, 0, 0)' //边框阴影
-    //           }
-    //         },
-    //         data: [{
-    //           value: 12,
-    //         }, {
-    //           value: 4,
-    //           name: '',
-    //           itemStyle: placeHolderStyle
-    //         }]
-    //       },
-    //       // ------------2
-    //       {
-    //         name: '值',
-    //         type: 'pie',
-    //         clockWise: true,
-    //         hoverAnimation: false,
-    //         radius: ['72%', '67%'],
-    //         center: ['50%', '50%'],
-    //         itemStyle: {
-    //           normal: {
-    //             label: {
-    //               show: false
-    //             },
-    //             labelLine: {
-    //               show: false,
-    //               length: 100,
-    //               smooth: 0.5
-    //             },
-    //             borderWidth: 5,
-    //             shadowBlur: 40,
-    //             borderColor: "#F1E453",
-    //             shadowColor: 'rgba(0, 0, 0, 0)' //边框阴影
-    //           }
-    //         },
-    //         data: [{
-    //           value: 6,
-    //         }, {
-    //           value: 4,
-    //           name: '',
-    //           itemStyle: placeHolderStyle
-    //         }]
-    //       },
-    //       // ------------3
-    //       {
-    //         name: '值',
-    //         type: 'pie',
-    //         clockWise: true,
-    //         hoverAnimation: false,
-    //         radius: ['48%', '44%'],
-    //         center: ['50%', '50%'],
-    //         itemStyle: {
-    //           normal: {
-    //             label: {
-    //               show: false
-    //             },
-    //             labelLine: {
-    //               show: false,
-    //               length: 100,
-    //               smooth: 0.5
-    //             },
-    //             borderWidth: 5,
-    //             shadowBlur: 40,
-    //             borderColor: "#f85b60",
-    //             shadowColor: 'rgba(0, 0, 0, 0)' //边框阴影
-    //           }
-    //         },
-    //         data: [{
-    //           value: 9,
-    //         }, {
-    //           value: 44,
-    //           name: '',
-    //           itemStyle: placeHolderStyle
-    //         }]
-    //       },
-    //     ]
-    //   });
-   var  data = [{
-        name: "本科及以上",
-        value: 13211
-    },
-    {
-        name: "高中",
-        value: 42111
-    },
-    {
-        name: "初中及以下",
-        value: 81711
-    },
-    {
-        name: "其他",
-        value: 121711
-    }
-];
-function   getArrayValue(array, key) {
-    var key = key || "value";
-    var res = [];
-    if (array) {
-        array.forEach(function(t) {
-            res.push(t[key]);
-        });
-    }
-    return res;
-}
-function array2obj(array,key) {
-	var resObj = {};
-	for(var i=0;i<array.length;i++){
-		resObj[array[i][key]] = array[i];
-	}
-	return resObj;
-}
-function getData(data) {
-    var res = {
-        series: [],
-        yAxis: []
-    };
-    for (let i = 0; i < data.length; i++) {
-        res.series.push({
-            name: '学历',
+      var placeHolderStyle = {
+        normal: {
+          label: {
+            show: false,
+            position: "center"
+          },
+          labelLine: {
+            show: false
+          },
+          color: "#104841a3",
+          borderWidth: 0
+        },
+        emphasis: {
+          color: "#104841a3",
+          borderColor: "#00b3ff",
+          borderWidth: 0
+        }
+      };
+      // 绘制图表
+      myChart.setOption({
+        series: [
+          {
+            name: '值',
             type: 'pie',
-            clockWise: false, //顺时加载
-            hoverAnimation: false, //鼠标移入变大
-            radius: [65 - i * 15 + '%', 57 - i * 15 + '%'],
-            center: ["30%", "55%"],
-            label: {
-                show: false
-            },
+            clockWise: true,
+            hoverAnimation: false,
+            radius: ['92%', '97%'],
+            center: ['50%', '50%'],
             itemStyle: {
+              normal: {
                 label: {
-                    show: false,
+                  show: false
                 },
                 labelLine: {
-                    show: false
+                  show: false,
+                  length: 100,
+                  smooth: 0.5
                 },
                 borderWidth: 5,
+                shadowBlur: 40,
+                borderColor: "#00B3FF",
+                shadowColor: 'rgba(0, 0, 0, 0)' //边框阴影
+              }
             },
             data: [{
-                value: data[i].value,
-                name: data[i].name
+              value: 12,
             }, {
-                value: sumValue - data[i].value,
-                name: '',
-                itemStyle: {
-                    color: "rgba(0,0,0,0)",
-                    borderWidth: 0
-                },
-                tooltip: {
-                    show: false
-                },
-                hoverAnimation: false
+              value: 4,
+              name: '',
+              itemStyle: placeHolderStyle
             }]
-        });
-        res.series.push({
-            name: '',
+          },
+          // ------------2
+          {
+            name: '值',
             type: 'pie',
-            silent: true,
-            z: 1,
-            clockWise: false, //顺时加载
-            hoverAnimation: false, //鼠标移入变大
-            radius: [65 - i * 15 + '%', 57 - i * 15 + '%'],
-            center: ["30%", "55%"],
-            label: {
-                show: false
-            },
+            clockWise: true,
+            hoverAnimation: false,
+            radius: ['72%', '67%'],
+            center: ['50%', '50%'],
             itemStyle: {
+              normal: {
                 label: {
-                    show: false,
+                  show: false
                 },
                 labelLine: {
-                    show: false
+                  show: false,
+                  length: 100,
+                  smooth: 0.5
                 },
                 borderWidth: 5,
+                shadowBlur: 40,
+                borderColor: "#F1E453",
+                shadowColor: 'rgba(0, 0, 0, 0)' //边框阴影
+              }
             },
             data: [{
-                value: 7.5,
-                itemStyle: {
-                    color: "#E3F0FF",
-                    borderWidth: 0
-                },
-                tooltip: {
-                    show: false
-                },
-                hoverAnimation: false
+              value: 6,
             }, {
-                value: 2.5,
-                name: '',
-                itemStyle: {
-                    color: "rgba(0,0,0,0)",
-                    borderWidth: 0
-                },
-                tooltip: {
-                    show: false
-                },
-                hoverAnimation: false
+              value: 4,
+              name: '',
+              itemStyle: placeHolderStyle
             }]
-        });
-        res.yAxis.push((data[i].value / sumValue * 100).toFixed(2) + "%");
-    }
-    return res;
-}
-var arrName = getArrayValue(data, "name");
-var arrValue = getArrayValue(data, "value");
-var sumValue = eval(arrValue.join('+'));
-var objData = array2obj(data, "name");
-var optionData = getData(data);
-
-
-myChart.option = {
-    backgroundColor:'#fff',
-    legend: {
-        show: true,
-        top: "center",
-        left: '70%',
-        data: arrName,
-        itemWidth: 30,
-        itemHeight: 20,
-        width:50,
-        padding: [0, 5],
-        itemGap: 25,
-        formatter: function(name) {
-            return "{title|" + name + "}\n{value|" + (objData[name].value) + "人}"
-        },
-        textStyle: {
-            rich: {
-                title: {
-                    fontSize: 10,
-                    lineHeight: 10,
-                    color: "rgba(0,0,0,.45)"
+          },
+          // ------------3
+          {
+            name: '值',
+            type: 'pie',
+            clockWise: true,
+            hoverAnimation: false,
+            radius: ['48%', '44%'],
+            center: ['50%', '50%'],
+            itemStyle: {
+              normal: {
+                label: {
+                  show: false
                 },
-                value: {
-                    fontSize: 14,
-                    lineHeight: 18,
-                    color: "rgba(0,0,0,.85)"
-                }
-            }
-        },
-    },
-    tooltip: {
-        show: true,
-        trigger: "item",
-        formatter: "{a}<br>{b}:{c}({d}%)"
-    },
-    color: ['#FF8700', '#ffc300', '#00e473', '#009DFF'],
-    grid: {
-        top: '20%',
-        bottom: '48%',
-        left: "30%",
-        containLabel: false
-    },
-    yAxis: [{
-        type: 'category',
-        inverse: true,
-        axisLine: {
-            show: false
-        },
-        axisTick: {
-            show: false
-        },
-        axisLabel: {
-            interval: 0,
-            inside: true,
-            textStyle: {
-                color: "#000",
-                fontSize: 10,
+                labelLine: {
+                  show: false,
+                  length: 100,
+                  smooth: 0.5
+                },
+                borderWidth: 5,
+                shadowBlur: 40,
+                borderColor: "#f85b60",
+                shadowColor: 'rgba(0, 0, 0, 0)' //边框阴影
+              }
             },
-            show: true
-        },
-        data: optionData.yAxis
-    }],
-    xAxis: [{
-        show: false
-    }],
-    series: optionData.series
-};
+            data: [{
+              value: 9,
+            }, {
+              value: 44,
+              name: '',
+              itemStyle: placeHolderStyle
+            }]
+          },
+        ]
+      });
+  
       //默认第一条高亮
-    //   myChart.dispatchAction({ type: 'highlight', seriesIndex: [0, 1, 2], dataIndex: 0 });
+      myChart.dispatchAction({ type: 'highlight', seriesIndex: [0, 1, 2], dataIndex: 0 });
     },
 
   }
@@ -428,7 +232,8 @@ myChart.option = {
 .allTotle {
   position: absolute;
   bottom: 69px;
-    left: 60px;
+    left: 87%;
+    width: 50%;
   div {
     font-size: 14px;
     font-weight: 500;
diff --git a/src/views/modelScreenComponents.vue b/src/views/modelScreenComponents.vue
index 236c443..19bb034 100644
--- a/src/views/modelScreenComponents.vue
+++ b/src/views/modelScreenComponents.vue
@@ -679,7 +679,6 @@ export default {
       getProjectStatus({
         projectId: this.projectId,
       }).then((res) => {
-        console.log(res.data.data,'==================');
         this.jinduList = res.data.data.length
           for(var i = 0; i < res.data.data.length; i++){
               if (res.data.data[i].completionStatusValue == '正常完成') {
@@ -692,7 +691,6 @@ export default {
                 }
               }
           }
-          console.log(this.progress,'----------------');
         this.boxList = Object.keys(res.data.data).map((item, index) => {
           if (res.data.data[item].planEndTime != null) {
             res.data.data[item].planEndTime = res.data.data[
diff --git a/src/views/personnelComponents.vue b/src/views/personnelComponents.vue
index 2b7e83a..5586d68 100644
--- a/src/views/personnelComponents.vue
+++ b/src/views/personnelComponents.vue
@@ -1,114 +1,158 @@
 <template>
-        <div >
-             <div @click="disBox" class="screenBox"
-                :style="{ 'background-image': !boxNone ? `url(${require(`../assets/pic/exitFull.png`)}` : `url(${require(`../assets/pic/fullScreen.png`)}` ,right: boxNone ? '483px' : '10px'}">
-            </div>   
-             <!-- 左侧模块1 -->
-            <div class="leftOneBox" :style="{ left: boxNone ? '27px' : '-443px' }">
-                <div class="titName">
-                    <span></span>
-                    <span>人员统计</span>
-                    <span></span>
-                </div>
-                <div class="concet">
-                    <pieDateChart style="width: 100%; height: 100%" :pieData='pieData'/>
-                </div>
-            </div>
-            <!-- 左侧模块2 -->
-            <div class="leftTwoBox" :style="{ left: boxNone ? '27px' : '-443px' }">
-                <div class="titName">
-                    <span></span>
-                    <span>施工人员组成</span>
-                    <span></span>
-                </div>
-                <div class="pieBox">
-                    <pieChart :colorList='colorList' style="width: 100%; height: 100%" color="#1ffdfa" chart-title="扫描数量分析"
-                        :chart-data="chartData" :x-axis-data="xArry" />
-                </div>
-            </div>
-            <!-- 左侧模块3 -->
-            <div class="leftThreeBox" :style="{ left: boxNone ? '27px' : '-443px' }">
-                <div class="titName">
-                    <span></span>
-                    <span>考勤监控</span>
-                    <span></span>
-                </div>
-                <div class="kqjk">
-                    <div class="oneKqjk">
-                        <img src="@/assets/pic/23.png" alt="" />
-                    </div>
-                    <div class="twoKqjk">
-                        <div class="nameMessage" v-for="(item, i) in peopleList" :key="i">
-                            <span style="color: #7FFFFC;">{{ item.name }}</span>
-                            <span style="color: #ffffff;">{{ item.value }}</span>
-                        </div>
-                    </div>
-                </div>
-            </div>
-            <!-- 右侧模块1 -->
-            <div class="rightOneBox" :style="{ right: boxNone ? '27px' : '-443px' }">
-                <div class="titName">
-                    <span></span>
-                    <span>站班会记录</span>
-                    <span></span>
-                </div>
-                <div class="meeting" style="top: 75px;">基本信息</div>
-                <div class="videoBox">
-                    <div class="oneCls">
-                        <img src="@/assets/pic/23.png" alt="" />
-                    </div>
-                    <div class="mesBox">
-                        <div>
-                            <span style="color: #82dddb;">会议时间：</span>
-                            <span style="color: #ffffff;">2023-01-02</span>
-                        </div>
-                        <div>
-                            <span style="color: #82dddb;">会议类型：</span>
-                            <span style="color: #ffffff;">项目早会</span>
-                        </div>
-                        <div>
-                            <span style="color: #82dddb;">会议主持：</span>
-                            <span style="color: #ffffff;">王毅</span>
-                        </div>
-                        <div>
-                            <span style="color: #82dddb;">参会人员：</span>
-                            <span
-                                style="color: #ffffff;line-height: 24px;display: inline-block; white-space: pre-wrap">王小龙，高红，澄澈</span>
-                        </div>
-                    </div>
-                </div>
-                <div class="meeting">会议内容</div>
-                <div class='mettiogBox'>
-                    <div>
-                        <div>
-                            1、施工部署
-                        </div>
-                        <div>
-                            (1)土方开挖:条基采用机械开挖，局部人工修补，余土外运。桩基采用人工挖土，桩基挖土过程中设置通风设备，保证挖土人员的安全。
-                        </div>
-                        <div>
-                            (2)钢筋加工:现场加工，现场设置钢筋加工棚，布置加工机械梁板钢筋连接采用绑扎接头或闪光对焊，柱及墙板钢筋采用电渣压力焊。
-                        </div>
-
-                    </div>
-                    <div class="lookFor" @click="gantDialog"></div>
-                </div>
-
-            </div>
-            <!-- 右侧模块2 -->
-            <div class="rightThreeBox" :style="{ right: boxNone ? '27px' : '-443px' }">
-                <div class="titName">
-                    <span></span>
-                    <span>站班会统计</span>
-                    <span></span>
-                </div>
-                <div class="securityCheck">
-                    <RadarChart style="width: 100%; height: 100%" grid-bottom="1%" :color-array="['#021C9F', '#01B1FF']"
-                        :chart-data="qyList" :x-axis-data="qyList.map(item => item.name)" />
-                </div>
-            </div>
-            <!-- 右侧菜单 -->
-            <!-- <div class="container" :style="{ right: !type ? '-13px' : '0' }">
+  <div>
+    <div
+      @click="disBox"
+      class="screenBox"
+      :style="{
+        'background-image': !boxNone
+          ? `url(${require(`../assets/pic/exitFull.png`)}`
+          : `url(${require(`../assets/pic/fullScreen.png`)}`,
+        right: boxNone ? '483px' : '10px',
+      }"
+    ></div>
+    <!-- 左侧模块1 -->
+    <div class="leftOneBox" :style="{ left: boxNone ? '27px' : '-443px' }">
+      <div class="titName">
+        <span></span>
+        <span>人员统计</span>
+        <span></span>
+      </div>
+      <div class="concet">
+        <pieDateChart style="width: 100%; height: 100%" :pieData="pieData" />
+      </div>
+    </div>
+    <!-- 左侧模块2 -->
+    <div class="leftTwoBox" :style="{ left: boxNone ? '27px' : '-443px' }">
+      <div class="titName">
+        <span></span>
+        <span>施工人员组成</span>
+        <span></span>
+      </div>
+      <div class="pieBox">
+        <pieChart
+          :colorList="colorList"
+          style="width: 100%; height: 100%"
+          color="#1ffdfa"
+          chart-title="扫描数量分析"
+          :chart-data="chartData"
+          :x-axis-data="xArry"
+          :constructionPersonnel="constructionPersonnel"
+        />
+      </div>
+    </div>
+    <!-- 左侧模块3 -->
+    <div class="leftThreeBox" :style="{ left: boxNone ? '27px' : '-443px' }">
+      <div class="titName">
+        <span></span>
+        <span>考勤监控</span>
+        <span></span>
+      </div>
+      <div class="kqjk">
+        <div class="oneKqjk">
+          <img src="@/assets/pic/23.png" alt="" />
+        </div>
+        <div class="twoKqjk">
+          <div class="nameMessage" v-for="(item, i) in peopleList" :key="i">
+              <div>
+                  <span style="color: #7ffffc">姓名：</span>
+                  <span style="color: #ffffff">{{ item.value }}</span>
+              </div>
+              <div>
+                  <span style="color: #7ffffc">岗位：</span>
+                  <span style="color: #ffffff">{{ item.value }}</span>
+              </div>
+              <div>
+                  <span style="color: #7ffffc">体温：</span>
+                  <span style="color: #ffffff">{{ item.value }}</span>
+              </div>
+              <div>
+                  <span style="color: #7ffffc">入场时间：</span>
+                  <span style="color: #ffffff">{{ item.value }}</span>
+              </div>
+              <div>
+                  <span style="color: #7ffffc">考勤类型：</span>
+                  <span style="color: #ffffff">{{ item.value }}</span>
+              </div>
+              <div>
+                  <span style="color: #7ffffc">打卡设备：</span>
+                  <span style="color: #ffffff">{{ item.value }}</span>
+              </div>
+          </div>
+        </div>
+      </div>
+    </div>
+    <!-- 右侧模块1 -->
+    <div class="rightOneBox" :style="{ right: boxNone ? '27px' : '-443px' }">
+      <div class="titName">
+        <span></span>
+        <span>站班会记录</span>
+        <span></span>
+      </div>
+      <div class="meeting" style="top: 75px">基本信息</div>
+      <div class="videoBox">
+        <div class="oneCls">
+          <img src="@/assets/pic/23.png" alt="" />
+        </div>
+        <div class="mesBox">
+          <div>
+            <span style="color: #82dddb">会议时间：</span>
+            <span style="color: #ffffff">2023-01-02</span>
+          </div>
+          <div>
+            <span style="color: #82dddb">会议类型：</span>
+            <span style="color: #ffffff">项目早会</span>
+          </div>
+          <div>
+            <span style="color: #82dddb">会议主持：</span>
+            <span style="color: #ffffff">王毅</span>
+          </div>
+          <div>
+            <span style="color: #82dddb">参会人员：</span>
+            <span
+              style="
+                color: #ffffff;
+                line-height: 24px;
+                display: inline-block;
+                white-space: pre-wrap;
+              "
+              >王小龙，高红，澄澈</span
+            >
+          </div>
+        </div>
+      </div>
+      <div class="meeting">会议内容</div>
+      <div class="mettiogBox">
+        <div>
+          <div>1、施工部署</div>
+          <div>
+            (1)土方开挖:条基采用机械开挖，局部人工修补，余土外运。桩基采用人工挖土，桩基挖土过程中设置通风设备，保证挖土人员的安全。
+          </div>
+          <div>
+            (2)钢筋加工:现场加工，现场设置钢筋加工棚，布置加工机械梁板钢筋连接采用绑扎接头或闪光对焊，柱及墙板钢筋采用电渣压力焊。
+          </div>
+        </div>
+        <div class="lookFor" @click="gantDialog"></div>
+      </div>
+    </div>
+    <!-- 右侧模块2 -->
+    <div class="rightThreeBox" :style="{ right: boxNone ? '27px' : '-443px' }">
+      <div class="titName">
+        <span></span>
+        <span>站班会统计</span>
+        <span></span>
+      </div>
+      <div class="securityCheck">
+        <RadarChart
+          style="width: 100%; height: 100%"
+          grid-bottom="1%"
+          :color-array="['#021C9F', '#01B1FF']"
+          :chart-data="qyList"
+          :x-axis-data="qyList.map((item) => item.name)"
+        />
+      </div>
+    </div>
+    <!-- 右侧菜单 -->
+    <!-- <div class="container" :style="{ right: !type ? '-13px' : '0' }">
                 <div class="box" id="box" :style="{ width: !type ? '267px' : '0' }">
                     <div v-if="!type" :class="[menuType === 1 ? 'childBoxChoose' : 'childBox']" @click="childBoxClick(1)">
                         <span class="icon1"></span>
@@ -135,1009 +179,1004 @@
                 </div>
                 <div class="closeBtn" :style="{ display: type ? 'none' : 'block' }" @click="switchDiv()"></div>
             </div> -->
-       
-        <div class="gttBox" v-if="dialogShow">
-            <div class="closeIcon" @click="dialogShow = false">
-            </div>
-            <div class="tabGtBox">
-                <div class="nrBox">
-                    <div class="titName" style="width: 80%;">
-                        <span></span>
-                        <span>站班会记录</span>
-                    </div>
-                    <div class="meet2ing" style="top: 58px;left:27px">基本信息</div>
-                    <div class="videoBox" style="top:101px">
-                        <div class="oneCls" style="width:361px;height:267px;margin-left: 0;">
-                            <img src="@/assets/pic/23.png" alt="" />
-                        </div>
-                        <div class="mesBox">
-                            <div>
-                                <span style="color: #82dddb;">会议时间：</span>
-                                <span style="color: #ffffff;">2023-01-02</span>
-                            </div>
-                            <div>
-                                <span style="color: #82dddb;">会议类型：</span>
-                                <span style="color: #ffffff;">项目早会</span>
-                            </div>
-                            <div>
-                                <span style="color: #82dddb;">会议主持：</span>
-                                <span style="color: #ffffff;">王毅</span>
-                            </div>
-                            <div>
-                                <span style="color: #82dddb;">参会人员：</span>
-                                <span
-                                    style="color: #ffffff;line-height: 24px;display: inline-block; white-space: pre-wrap">王小龙，高红，澄澈</span>
-                            </div>
-                        </div>
-                    </div>
-                    <div class="meet2ing">会议内容</div>
-                    <div class='mettiog2Box'>
-                        <div>
-                            <div>
-                                1、施工部署
-                            </div>
-                            <div>
-                                (1)土方开挖:条基采用机械开挖，局部人工修补，余土外运。桩基采用人工挖土，桩基挖土过程中设置通风设备，保证挖土人员的安全。
-                            </div>
-                            <div>
-                                (2)钢筋加工:现场加工，现场设置钢筋加工棚，布置加工机械梁板钢筋连接采用绑扎接头或闪光对焊，柱及墙板钢筋采用电渣压力焊。
 
-                            </div>
-                            <div>
-                                (3)钢筋加工:现场加工，现场设置钢筋加工棚，布置加工机械梁板钢筋连接采用绑扎接头或闪光对焊，柱及墙板钢筋采用电渣压力焊。
-                            </div>
-                            <div>
-                                (4)钢筋加工:现场加工，现场设置钢筋加工棚，布置加工机械梁板钢筋连接采用绑扎接头或闪光对焊，柱及墙板钢筋采用电渣压力焊。
-                            </div>
-                        </div>
-                    </div>
-                </div>
+    <div class="gttBox" v-if="dialogShow">
+      <div class="closeIcon" @click="dialogShow = false"></div>
+      <div class="tabGtBox">
+        <div class="nrBox">
+          <div class="titName" style="width: 80%">
+            <span></span>
+            <span>站班会记录</span>
+          </div>
+          <div class="meet2ing" style="top: 58px; left: 27px">基本信息</div>
+          <div class="videoBox" style="top: 101px">
+            <div
+              class="oneCls"
+              style="width: 361px; height: 267px; margin-left: 0"
+            >
+              <img src="@/assets/pic/23.png" alt="" />
             </div>
-
+            <div class="mesBox">
+              <div>
+                <span style="color: #82dddb">会议时间：</span>
+                <span style="color: #ffffff">2023-01-02</span>
+              </div>
+              <div>
+                <span style="color: #82dddb">会议类型：</span>
+                <span style="color: #ffffff">项目早会</span>
+              </div>
+              <div>
+                <span style="color: #82dddb">会议主持：</span>
+                <span style="color: #ffffff">王毅</span>
+              </div>
+              <div>
+                <span style="color: #82dddb">参会人员：</span>
+                <span
+                  style="
+                    color: #ffffff;
+                    line-height: 24px;
+                    display: inline-block;
+                    white-space: pre-wrap;
+                  "
+                  >王小龙，高红，澄澈</span
+                >
+              </div>
+            </div>
+          </div>
+          <div class="meet2ing">会议内容</div>
+          <div class="mettiog2Box">
+            <div>
+              <div>1、施工部署</div>
+              <div>
+                (1)土方开挖:条基采用机械开挖，局部人工修补，余土外运。桩基采用人工挖土，桩基挖土过程中设置通风设备，保证挖土人员的安全。
+              </div>
+              <div>
+                (2)钢筋加工:现场加工，现场设置钢筋加工棚，布置加工机械梁板钢筋连接采用绑扎接头或闪光对焊，柱及墙板钢筋采用电渣压力焊。
+              </div>
+              <div>
+                (3)钢筋加工:现场加工，现场设置钢筋加工棚，布置加工机械梁板钢筋连接采用绑扎接头或闪光对焊，柱及墙板钢筋采用电渣压力焊。
+              </div>
+              <div>
+                (4)钢筋加工:现场加工，现场设置钢筋加工棚，布置加工机械梁板钢筋连接采用绑扎接头或闪光对焊，柱及墙板钢筋采用电渣压力焊。
+              </div>
+            </div>
+          </div>
         </div>
-         <!-- 遮罩层 -->
-         <div class="zzc" v-if="dialogShow">
- </div>
-</div>
-    <!-- </Resize> -->
+      </div>
+    </div>
+    <!-- 遮罩层 -->
+    <div class="zzc" v-if="dialogShow"></div>
+  </div>
+  <!-- </Resize> -->
 </template>
 
 <script>
 import RadarChart from "@/components/common/RadarChart";
 import pieChart from "@/components/common/pieChart";
 import pieDateChart from "@/components/common/pieDateChart";
-import Resize from '../utils/Resize.vue'
-import {getUserGroup} from "@/api/personnel";
+import Resize from "../utils/Resize.vue";
+import { getUserGroup, getGroupCensus, getAttend } from "@/api/personnel";
 export default {
-    name: "report",
-    components: {
-        pieChart,
-        RadarChart,
-        pieDateChart,
-        Resize
-    },
-    data() {
-        return {
-            boxNone:true,
-            colorList: ['#00A572', '#008AA4', '#7968D9', '#C7A73E'],
-            iconPicList: [
-                {
-                    icon: "wendu",
-                    name: "温度",
-                    val: "19.8",
-                    tem: "℃"
-                },
-                {
-                    icon: "shidu",
-                    name: "湿度",
-                    val: "19.8",
-                    tem: "%"
-                },
-                {
-                    icon: "yangqi",
-                    name: "氧气值",
-                    val: "19.8",
-                    tem: "%VOL"
-                },
-                {
-                    icon: "co2",
-                    name: "二氧化碳",
-                    val: "19.8",
-                    tem: "%VOL"
-                },
-                {
-                    icon: "ch4",
-                    name: "甲烷",
-                    val: "19.8",
-                    tem: "ppm"
-                },
-                {
-                    icon: "h2s",
-                    name: "硫化氢",
-                    val: "19.8",
-                    tem: "ppm"
-                }
-            ],
-            tableData: [
-                {
-                    entName: "我打打死"
-                },
-                {
-                    entName: "我打打死"
-                },
-                {
-                    entName: "我打打死"
-                },
-                {
-                    entName: "我打打死"
-                }
-            ],
-            qyList: [
-                {
-                    name: "1月",
-                    value: 12
-                },
-                {
-                    name: "2月",
-                    value: 21
-                },
-                {
-                    name: "3月",
-                    value: 22
-                },
-                {
-                    name: "4月",
-                    value: 12
-                },
-                {
-                    name: "5月",
-                    value: 10
-                },
-                {
-                    name: "6月",
-                    value: 3
-                },
-                {
-                    name: "7月",
-                    value: 4
-                }, {
-                    name: "8月",
-                    value: 76
-                }, {
-                    name: "9月",
-                    value: 22
-                }, {
-                    name: "10月",
-                    value: 1
-                }, {
-                    name: "11月",
-                    value: 32
-                }, {
-                    name: "12月",
-                    value: 12
-                }
-            ],
-            xArry: [],
-            chartData: [],
-            peopleList: [
-                {
-                    name: "姓名",
-                    value: "：王刚"
-                },
-                {
-                    name: "岗位",
-                    value: "：项目经理"
-                },
-                {
-                    name: "体温",
-                    value: "：36.5℃"
-                },
-                {
-                    name: "入场时间",
-                    value: "：2022-11-26"
-                },
-                {
-                    name: "考勤类型",
-                    value: "：进场"
-                },
-                {
-                    name: "打卡设备",
-                    value: "：1号打卡机"
-                },
-            ],
-            vdaH: 0,
-            type: false,
-            menuType: 1,
-            numberList: [5, 5],
-            innerHeight: null,
-            dialogShow: false,
-            topicSends:[],
-            pieData:[],
-        };
-    },
-    created() {
-        let h = document.documentElement.clientHeight || document.body.clientHeight;
-        this.vdaH = h - 0 + "px";
-        console.log("this.topicSends",this.topicSends)
-        console.log("this.iconPicList",this.iconPicList)
-
-    },
-     mounted() {
-         this.getUser()
-        this.createMqtt()
-        // this.switchDiv();
-        // window.onresize = () => {
-        //         return (() => {
-        //             let h = document.documentElement.clientHeight || document.body.clientHeight;
-        //           this.vdaH = h - 0 + "px";
-        //         })()
-        //     }
-    },
-    methods: {
-        //获取人员统计
-        getUser(){
-            let projectId = sessionStorage.getItem("projectId")
-            console.log("projectId",projectId)
-             getUserGroup({
-          projectId:projectId
-        }).then((res)=>{
-            console.log("res.data.data",res.data.data)
-        //   this.projectUser = res.data.data
-        this.pieData= res.data.data
-        })
+  name: "report",
+  components: {
+    pieChart,
+    RadarChart,
+    pieDateChart,
+    Resize,
+  },
+  data() {
+    return {
+      boxNone: true,
+      colorList: ["#00A572", "#008AA4", "#7968D9", "#C7A73E"],
+      iconPicList: [
+        {
+          icon: "wendu",
+          name: "温度",
+          val: "19.8",
+          tem: "℃",
         },
-         createMqtt() {
-           
-            this.topicSends = ['webdata'];
-             console.log("this.topicSends",this.topicSends)
-        window.PubScribe(this.topicSends, this.realInfo);  
-         },
-         /** 实时数据分类 */
+        {
+          icon: "shidu",
+          name: "湿度",
+          val: "19.8",
+          tem: "%",
+        },
+        {
+          icon: "yangqi",
+          name: "氧气值",
+          val: "19.8",
+          tem: "%VOL",
+        },
+        {
+          icon: "co2",
+          name: "二氧化碳",
+          val: "19.8",
+          tem: "%VOL",
+        },
+        {
+          icon: "ch4",
+          name: "甲烷",
+          val: "19.8",
+          tem: "ppm",
+        },
+        {
+          icon: "h2s",
+          name: "硫化氢",
+          val: "19.8",
+          tem: "ppm",
+        },
+      ],
+      tableData: [
+        {
+          entName: "我打打死",
+        },
+        {
+          entName: "我打打死",
+        },
+        {
+          entName: "我打打死",
+        },
+        {
+          entName: "我打打死",
+        },
+      ],
+      qyList: [
+        {
+          name: "1月",
+          value: 12,
+        },
+        {
+          name: "2月",
+          value: 21,
+        },
+        {
+          name: "3月",
+          value: 22,
+        },
+        {
+          name: "4月",
+          value: 12,
+        },
+        {
+          name: "5月",
+          value: 10,
+        },
+        {
+          name: "6月",
+          value: 3,
+        },
+        {
+          name: "7月",
+          value: 4,
+        },
+        {
+          name: "8月",
+          value: 76,
+        },
+        {
+          name: "9月",
+          value: 22,
+        },
+        {
+          name: "10月",
+          value: 1,
+        },
+        {
+          name: "11月",
+          value: 32,
+        },
+        {
+          name: "12月",
+          value: 12,
+        },
+      ],
+      xArry: [],
+      chartData: [],
+      peopleList: [
+          {
+              name:'王刚'
+          }
+      ],
+      vdaH: 0,
+      type: false,
+      menuType: 1,
+      numberList: [5, 5],
+      innerHeight: null,
+      dialogShow: false,
+      topicSends: [],
+      pieData: [], //人员统计,
+      constructionPersonnel: [], //施工人员组成
+    };
+  },
+  created() {
+    let h = document.documentElement.clientHeight || document.body.clientHeight;
+    this.vdaH = h - 0 + "px";
+    console.log("this.topicSends", this.topicSends);
+    console.log("this.iconPicList", this.iconPicList);
+  },
+  mounted() {
+    this.getUser();
+    this.createMqtt();
+    // this.switchDiv();
+    // window.onresize = () => {
+    //         return (() => {
+    //             let h = document.documentElement.clientHeight || document.body.clientHeight;
+    //           this.vdaH = h - 0 + "px";
+    //         })()
+    //     }
+  },
+  methods: {
+    getUser() {
+      let projectId = sessionStorage.getItem("projectId");
+      console.log("projectId", projectId);
+      //获取人员统计
+      getUserGroup({
+        projectId: projectId,
+      }).then((res) => {
+        console.log("res.data.data", res.data.data);
+        //   this.projectUser = res.data.data
+        this.pieData = res.data.data;
+      });
+      // 施工人员组成
+      getGroupCensus({
+        projectId: projectId,
+      }).then((res) => {
+        this.constructionPersonnel = res.data.data;
+      });
+      getAttend({
+        projectId: projectId,
+      }).then((res) => {
+        console.log(res.data, "=============");
+      });
+    },
+
+    createMqtt() {
+      this.topicSends = ["webdata"];
+      console.log("this.topicSends", this.topicSends);
+      window.PubScribe(this.topicSends, this.realInfo);
+    },
+    /** 实时数据分类 */
     realInfo(topic, message) {
-        // console.log("topic",topic)
+      // console.log("topic",topic)
       switch (topic) {
         // 接收托片
-         case "webdata":
-             try {
-                console.log("message",message)
+        case "webdata":
+          try {
+            console.log("message", message);
             //   const utf8decoder = new TextDecoder()
             //   const u8arr = new Uint8Array(message)
             //   const temp = utf8decoder.decode(u8arr)	// 将二进制数据转为字符串
             //   const msg = JSON.parse(temp)		//这一步报错则返回的是二进制流图片，不报错则返回的是JSON的错误提示数据
             //   console.log("hert", msg)   //msg为转换后的JSON数据
-              
-          } catch (error) {
-
-          }
-          break; 
+          } catch (error) {}
+          break;
       }
     },
-        disBox() {
-            this.boxNone = !this.boxNone
-            this.$refs.screenBox.style.animationPlayState='running'
+    disBox() {
+      this.boxNone = !this.boxNone;
+      this.$refs.screenBox.style.animationPlayState = "running";
     },
-        goBack(val) {
-            if (val === 1) {
-                this.$router.push('/')
-            } else {
-                this.$router.go(0)
-            }
-        },
-        gantDialog() {
-            this.dialogShow = true
-        },
-        tableRowClassName({ row, rowIndex }) {
-            if (rowIndex === 1) {
-                return "warning-row";
-            } else if (rowIndex === 3) {
-                return "success-row";
-            }
-            return "";
-        },
-        // 菜单点击
-        childBoxClick(val) {
-            this.menuType = val;
-            if (val === 3) {
-                this.$router.push('/progress')
-            } else if (val === 2) {
-                this.$router.push('/videoSurveillance')
-            } else if (val === 4) {
-                this.$router.push('/management')
-            }
-        },
-        switchDiv() {
-            if (this.type) {
-                this.type = false;
-                this.$refs.switchBtn.style.display = "none";
-            } else {
-                this.type = true;
-                setTimeout(() => {
-                    // 俩秒之后让模块消失
-                    this.$refs.switchBtn.style.display = "block";
-                }, 800)
-            }
-        }
+    goBack(val) {
+      if (val === 1) {
+        this.$router.push("/");
+      } else {
+        this.$router.go(0);
+      }
     },
-   
+    gantDialog() {
+      this.dialogShow = true;
+    },
+    tableRowClassName({ row, rowIndex }) {
+      if (rowIndex === 1) {
+        return "warning-row";
+      } else if (rowIndex === 3) {
+        return "success-row";
+      }
+      return "";
+    },
+    // 菜单点击
+    childBoxClick(val) {
+      this.menuType = val;
+      if (val === 3) {
+        this.$router.push("/progress");
+      } else if (val === 2) {
+        this.$router.push("/videoSurveillance");
+      } else if (val === 4) {
+        this.$router.push("/management");
+      }
+    },
+    switchDiv() {
+      if (this.type) {
+        this.type = false;
+        this.$refs.switchBtn.style.display = "none";
+      } else {
+        this.type = true;
+        setTimeout(() => {
+          // 俩秒之后让模块消失
+          this.$refs.switchBtn.style.display = "block";
+        }, 800);
+      }
+    },
+  },
 };
 </script>
 
 <style scoped lang="less">
-.zzc{
-    background: rgba(0, 0 ,0, 0.6);
-    width: 100%;
-    height: 100%;
-    position: absolute;
-    top: 0;
+.zzc {
+  background: rgba(0, 0, 0, 0.6);
+  width: 100%;
+  height: 100%;
+  position: absolute;
+  top: 0;
 }
 .nrBox {
-    color: #fff;
-    padding: 30px;
+  color: #fff;
+  padding: 30px;
 }
 
 .gttBox {
-    width: 803px;
-    z-index: 999;
-    height: 751px;
-    position: absolute;
-    top: 50%;
-    left: 50%;
-    background: url("~@/assets/pic/ggt.png") no-repeat;
-    background-size: 100% 100%;
-    transform: translate(-50%, -50%);
+  width: 803px;
+  z-index: 999;
+  height: 751px;
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  background: url("~@/assets/pic/ggt.png") no-repeat;
+  background-size: 100% 100%;
+  transform: translate(-50%, -50%);
 
-    .closeIcon {
-        width: 16px;
-        background: url("~@/assets/pic/close.png") no-repeat;
-        background-size: 100% 100%;
-        height: 16px;
-        color: #90F2EB;
-        float: right;
-        font-size: 50px;
-        cursor: pointer;
-        margin-right: 23px;
-        margin-top: 24px;
-    }
+  .closeIcon {
+    width: 16px;
+    background: url("~@/assets/pic/close.png") no-repeat;
+    background-size: 100% 100%;
+    height: 16px;
+    color: #90f2eb;
+    float: right;
+    font-size: 50px;
+    cursor: pointer;
+    margin-right: 23px;
+    margin-top: 24px;
+  }
 }
 .dh1 {
-    animation: mytest 0.5s linear;
-    animation-fill-mode: forwards;
+  animation: mytest 0.5s linear;
+  animation-fill-mode: forwards;
 }
 
 @keyframes mytest {
-    100% {
-        right: 10px;
-    }
-    90% {
-        right: 120px;
-    }
+  100% {
+    right: 10px;
+  }
+  90% {
+    right: 120px;
+  }
 
-    80% {
-        right: 160px;
-    }
+  80% {
+    right: 160px;
+  }
 
-    70% {
-        right: 200px;
-    }
+  70% {
+    right: 200px;
+  }
 
-    60% {
-        right: 240px;
-    }
+  60% {
+    right: 240px;
+  }
 
-    50% {
-        right: 300px;
-    }
+  50% {
+    right: 300px;
+  }
 
-    40% {
-        right: 340px;
-    }
+  40% {
+    right: 340px;
+  }
 
-    30% {
-        right: 380px;
-    }
+  30% {
+    right: 380px;
+  }
 
-    20% {
-        right: 420px;
-    }
+  20% {
+    right: 420px;
+  }
 
-    10% {
-        right: 460px;
-    }
-    1% {
-        right: 480px;
-    }
+  10% {
+    right: 460px;
+  }
+  1% {
+    right: 480px;
+  }
 }
 
 @keyframes myt2est {
-    1% {
-        right: 10px;
-    }
+  1% {
+    right: 10px;
+  }
 
-    10% {
-        right: 120px;
-    }
+  10% {
+    right: 120px;
+  }
 
-    20% {
-        right: 160px;
-    }
+  20% {
+    right: 160px;
+  }
 
-    30% {
-        right: 200px;
-    }
+  30% {
+    right: 200px;
+  }
 
-    40% {
-        right: 240px;
-    }
+  40% {
+    right: 240px;
+  }
 
-    50% {
-        right: 300px;
-    }
+  50% {
+    right: 300px;
+  }
 
-    60% {
-        right: 340px;
-    }
+  60% {
+    right: 340px;
+  }
 
-    70% {
-        right: 380px;
-    }
+  70% {
+    right: 380px;
+  }
 
-    80% {
-        right: 420px;
-    }
+  80% {
+    right: 420px;
+  }
 
-    90% {
-        right: 460px;
-    }
+  90% {
+    right: 460px;
+  }
 
-    100% {
-        right: 480px;
-    }
+  100% {
+    right: 480px;
+  }
 }
 
 .dh2 {
-    animation-fill-mode: forwards;
-     animation: myt2est 0.5s linear;
-
+  animation-fill-mode: forwards;
+  animation: myt2est 0.5s linear;
 }
 .screenBox {
-    width: 46px;
-    height: 46px;
-    background: url("~@/assets/pic/fullScreen.png") no-repeat;
-    background-size: 100% 100%;
-    position: absolute;
-    bottom: 30px;
-    right: 480px;
-    overflow-x: hidden;
-    transition: right 0.8s, height 1s;
-    overflow-y: hidden; //重点
-    // animation-play-state:paused;
-    cursor: pointer;
-    @media only screen and (max-height: 1000px) {
+  width: 46px;
+  height: 46px;
+  background: url("~@/assets/pic/fullScreen.png") no-repeat;
+  background-size: 100% 100%;
+  position: absolute;
+  bottom: 30px;
+  right: 480px;
+  overflow-x: hidden;
+  transition: right 0.8s, height 1s;
+  overflow-y: hidden; //重点
+  // animation-play-state:paused;
+  cursor: pointer;
+  @media only screen and (max-height: 1000px) {
     bottom: 157px;
   }
 }
 
 .nameMessage {
-    font-size: 14px;
-    font-family: SourceHanSansCN-Medium, SourceHanSansCN;
-    font-weight: 500;
-    margin-top: 10px;
-    margin-left: 18px;
+  font-size: 14px;
+  font-family: SourceHanSansCN-Medium, SourceHanSansCN;
+  font-weight: 500;
+  margin-top: 10px;
+  margin-left: 18px;
 
-    span:nth-child(1) {
-        display: inline-block;
-        width: 56px;
-        text-align-last: justify;
-    }
+  span:nth-child(1) {
+    display: inline-block;
+    width: 56px;
+    text-align-last: justify;
+  }
 }
 
 .meet2ing {
-    width: 76px;
-    height: 29px;
-    background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAFEAAAAdCAYAAADSFYAhAAAAAXNSR0IArs4c6QAABD9JREFUaEPtWk9oHFUY/35vD+bktbvjxZsoSot/sKJoqbaltaUgUkQQK4KIqOwkama3PeRgs9mS3Q0ILeTgwYMHgxfbHurBQynUQ715KIKK2OyaQEuEEtumeZ9kZ97szpt9+95uEjPE5hLmve/7fjO/9/u+982bRT4o7gHEI9T9x4zENcCJa9uF8tf99Lgqjs0uo/irLHlxZOkr7AiKe8Hi0X68CJLRtGj/V1c2LtV86NXtl4xni5NVfBb0x0Klfh5e4L/CwGNJ5UVKXI1GcxENShEyIkFGdiKXVCqicd1ejau4Mcua0nW7jOKD8H2zUru2RuJ+AI+vRylmJbkpbr1K3SL8e60bt87S7OwK8uPFg0LknrCllNO8jCQmck7mG270n+LztWal/t3aMyBfLr4Kxs72Aw1awG0s2IqnSlvTBmOLb5vfRHzB9O18pf5LmzZv3D8CYJftfu7Pdxhg4tvNX6/XaW6unXrwTvhHSdKTvUlS1cpEoW2pTf42P31fzxo+/6RSuU1i4bPiayREgkSRrvR9hahTYnIXhj5RamUk6/j3iL9cmGr8FlehfGnsdQF+Wmvk+mevLjBXYZmiDrhotIX4LOjv1mR9iojitg75sn9MMJ65X/PcGFiVfGmh2jjXbY0dZf8NwXg2qcRIWnFeuQGkrNzaxI5brOjs4t9ZXandPP3F9QSJXvmTN4l4dy+apJThO3RUswTCS8nJF5R4XAsSZ6myj2qigNDecHovUtbwQVhsVWqf63eLQqn4Fkg8N6TW/lduUsoLf1VnLqRIzJf8t0F4PiHP6GKwo5uN41MdIWUNX66IkwvT04spEr2S/w4xXtg4CrZnJAb/3qo0UqncrnZeyX+XGS8mHn3QlsORN+fWO4v4jK9b1drFXo+KQlB8DxAvhZMqgVKHsMlD2jiSnnAGsw6y5qAOf/UEzhY+M/E/t+VHSzMzSwYS/fdB2BPuwppJzKlh3KRAWxxTsbP5KTxbsbTFGRAfzD/PV3uncpjOgf8BBPaGvYtjXupmw6bfRr15bDq+ODM/Nf2DUTNe4H9IwMtD0rf93ZhWaOTW8ebE7LKRxEJp9GMQ7dv+bAz3hEx8pVVpTPbzRiHwfSLsTxq5ft3TvgqSq59+S8PGGdbPHR9Mk81q7XJfEvOBPwbgQLeRdY8dblGNe7oeLjP4TMvNkT+P0cTc3b4keoH/KQEH+/OiFGZaeX08RYuhtXFdjS3CZ7rYnKpXbXcJrzw6TkSH1gzZsDvHytB205iZyM9kl+pMtNOduEvMGn6Ox1qnGletJBaC0RKIDtsM+84P22KsC7TLeTPwQTebDzx4lCYmrI0fHhr3T5LAkbBNjNKm8+LSFkm6nUtuIIKS6Ww6Fozjd6pjIn6m8MHftCr1uss6oxCMPUU5fjhM5/D8ECI679N/qaA+J5vGTYiO9lnCv7vMP95oNOZdSPwXtf3hFdhdhzQAAAAASUVORK5CYII=) no-repeat;
-    background-size: 100% 100%;
-    text-align: center;
-    line-height: 29px;
-    position: absolute;
-    top: 76px;
-    left: 29px;
-    font-size: 14px;
-    font-family: SourceHanSansCN-Medium, SourceHanSansCN;
-    font-weight: 500;
-    color: #FFFFFF;
-    padding-right: 6px;
+  width: 76px;
+  height: 29px;
+  background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAFEAAAAdCAYAAADSFYAhAAAAAXNSR0IArs4c6QAABD9JREFUaEPtWk9oHFUY/35vD+bktbvjxZsoSot/sKJoqbaltaUgUkQQK4KIqOwkama3PeRgs9mS3Q0ILeTgwYMHgxfbHurBQynUQ715KIKK2OyaQEuEEtumeZ9kZ97szpt9+95uEjPE5hLmve/7fjO/9/u+982bRT4o7gHEI9T9x4zENcCJa9uF8tf99Lgqjs0uo/irLHlxZOkr7AiKe8Hi0X68CJLRtGj/V1c2LtV86NXtl4xni5NVfBb0x0Klfh5e4L/CwGNJ5UVKXI1GcxENShEyIkFGdiKXVCqicd1ejau4Mcua0nW7jOKD8H2zUru2RuJ+AI+vRylmJbkpbr1K3SL8e60bt87S7OwK8uPFg0LknrCllNO8jCQmck7mG270n+LztWal/t3aMyBfLr4Kxs72Aw1awG0s2IqnSlvTBmOLb5vfRHzB9O18pf5LmzZv3D8CYJftfu7Pdxhg4tvNX6/XaW6unXrwTvhHSdKTvUlS1cpEoW2pTf42P31fzxo+/6RSuU1i4bPiayREgkSRrvR9hahTYnIXhj5RamUk6/j3iL9cmGr8FlehfGnsdQF+Wmvk+mevLjBXYZmiDrhotIX4LOjv1mR9iojitg75sn9MMJ65X/PcGFiVfGmh2jjXbY0dZf8NwXg2qcRIWnFeuQGkrNzaxI5brOjs4t9ZXandPP3F9QSJXvmTN4l4dy+apJThO3RUswTCS8nJF5R4XAsSZ6myj2qigNDecHovUtbwQVhsVWqf63eLQqn4Fkg8N6TW/lduUsoLf1VnLqRIzJf8t0F4PiHP6GKwo5uN41MdIWUNX66IkwvT04spEr2S/w4xXtg4CrZnJAb/3qo0UqncrnZeyX+XGS8mHn3QlsORN+fWO4v4jK9b1drFXo+KQlB8DxAvhZMqgVKHsMlD2jiSnnAGsw6y5qAOf/UEzhY+M/E/t+VHSzMzSwYS/fdB2BPuwppJzKlh3KRAWxxTsbP5KTxbsbTFGRAfzD/PV3uncpjOgf8BBPaGvYtjXupmw6bfRr15bDq+ODM/Nf2DUTNe4H9IwMtD0rf93ZhWaOTW8ebE7LKRxEJp9GMQ7dv+bAz3hEx8pVVpTPbzRiHwfSLsTxq5ft3TvgqSq59+S8PGGdbPHR9Mk81q7XJfEvOBPwbgQLeRdY8dblGNe7oeLjP4TMvNkT+P0cTc3b4keoH/KQEH+/OiFGZaeX08RYuhtXFdjS3CZ7rYnKpXbXcJrzw6TkSH1gzZsDvHytB205iZyM9kl+pMtNOduEvMGn6Ox1qnGletJBaC0RKIDtsM+84P22KsC7TLeTPwQTebDzx4lCYmrI0fHhr3T5LAkbBNjNKm8+LSFkm6nUtuIIKS6Ww6Fozjd6pjIn6m8MHftCr1uss6oxCMPUU5fjhM5/D8ECI679N/qaA+J5vGTYiO9lnCv7vMP95oNOZdSPwXtf3hFdhdhzQAAAAASUVORK5CYII=)
+    no-repeat;
+  background-size: 100% 100%;
+  text-align: center;
+  line-height: 29px;
+  position: absolute;
+  top: 76px;
+  left: 29px;
+  font-size: 14px;
+  font-family: SourceHanSansCN-Medium, SourceHanSansCN;
+  font-weight: 500;
+  color: #ffffff;
+  padding-right: 6px;
 }
 
 .meet2ing {
-    width: 76px;
-    height: 29px;
-    background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAFEAAAAdCAYAAADSFYAhAAAAAXNSR0IArs4c6QAABD9JREFUaEPtWk9oHFUY/35vD+bktbvjxZsoSot/sKJoqbaltaUgUkQQK4KIqOwkama3PeRgs9mS3Q0ILeTgwYMHgxfbHurBQynUQ715KIKK2OyaQEuEEtumeZ9kZ97szpt9+95uEjPE5hLmve/7fjO/9/u+982bRT4o7gHEI9T9x4zENcCJa9uF8tf99Lgqjs0uo/irLHlxZOkr7AiKe8Hi0X68CJLRtGj/V1c2LtV86NXtl4xni5NVfBb0x0Klfh5e4L/CwGNJ5UVKXI1GcxENShEyIkFGdiKXVCqicd1ejau4Mcua0nW7jOKD8H2zUru2RuJ+AI+vRylmJbkpbr1K3SL8e60bt87S7OwK8uPFg0LknrCllNO8jCQmck7mG270n+LztWal/t3aMyBfLr4Kxs72Aw1awG0s2IqnSlvTBmOLb5vfRHzB9O18pf5LmzZv3D8CYJftfu7Pdxhg4tvNX6/XaW6unXrwTvhHSdKTvUlS1cpEoW2pTf42P31fzxo+/6RSuU1i4bPiayREgkSRrvR9hahTYnIXhj5RamUk6/j3iL9cmGr8FlehfGnsdQF+Wmvk+mevLjBXYZmiDrhotIX4LOjv1mR9iojitg75sn9MMJ65X/PcGFiVfGmh2jjXbY0dZf8NwXg2qcRIWnFeuQGkrNzaxI5brOjs4t9ZXandPP3F9QSJXvmTN4l4dy+apJThO3RUswTCS8nJF5R4XAsSZ6myj2qigNDecHovUtbwQVhsVWqf63eLQqn4Fkg8N6TW/lduUsoLf1VnLqRIzJf8t0F4PiHP6GKwo5uN41MdIWUNX66IkwvT04spEr2S/w4xXtg4CrZnJAb/3qo0UqncrnZeyX+XGS8mHn3QlsORN+fWO4v4jK9b1drFXo+KQlB8DxAvhZMqgVKHsMlD2jiSnnAGsw6y5qAOf/UEzhY+M/E/t+VHSzMzSwYS/fdB2BPuwppJzKlh3KRAWxxTsbP5KTxbsbTFGRAfzD/PV3uncpjOgf8BBPaGvYtjXupmw6bfRr15bDq+ODM/Nf2DUTNe4H9IwMtD0rf93ZhWaOTW8ebE7LKRxEJp9GMQ7dv+bAz3hEx8pVVpTPbzRiHwfSLsTxq5ft3TvgqSq59+S8PGGdbPHR9Mk81q7XJfEvOBPwbgQLeRdY8dblGNe7oeLjP4TMvNkT+P0cTc3b4keoH/KQEH+/OiFGZaeX08RYuhtXFdjS3CZ7rYnKpXbXcJrzw6TkSH1gzZsDvHytB205iZyM9kl+pMtNOduEvMGn6Ox1qnGletJBaC0RKIDtsM+84P22KsC7TLeTPwQTebDzx4lCYmrI0fHhr3T5LAkbBNjNKm8+LSFkm6nUtuIIKS6Ww6Fozjd6pjIn6m8MHftCr1uss6oxCMPUU5fjhM5/D8ECI679N/qaA+J5vGTYiO9lnCv7vMP95oNOZdSPwXtf3hFdhdhzQAAAAASUVORK5CYII=) no-repeat;
-    background-size: 100% 100%;
-    text-align: center;
-    line-height: 29px;
-    position: absolute;
-    top: 408px;
-    left: 29px;
-    font-size: 14px;
-    font-weight: 500;
-    color: #FFFFFF;
-    padding-right: 6px;
+  width: 76px;
+  height: 29px;
+  background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAFEAAAAdCAYAAADSFYAhAAAAAXNSR0IArs4c6QAABD9JREFUaEPtWk9oHFUY/35vD+bktbvjxZsoSot/sKJoqbaltaUgUkQQK4KIqOwkama3PeRgs9mS3Q0ILeTgwYMHgxfbHurBQynUQ715KIKK2OyaQEuEEtumeZ9kZ97szpt9+95uEjPE5hLmve/7fjO/9/u+982bRT4o7gHEI9T9x4zENcCJa9uF8tf99Lgqjs0uo/irLHlxZOkr7AiKe8Hi0X68CJLRtGj/V1c2LtV86NXtl4xni5NVfBb0x0Klfh5e4L/CwGNJ5UVKXI1GcxENShEyIkFGdiKXVCqicd1ejau4Mcua0nW7jOKD8H2zUru2RuJ+AI+vRylmJbkpbr1K3SL8e60bt87S7OwK8uPFg0LknrCllNO8jCQmck7mG270n+LztWal/t3aMyBfLr4Kxs72Aw1awG0s2IqnSlvTBmOLb5vfRHzB9O18pf5LmzZv3D8CYJftfu7Pdxhg4tvNX6/XaW6unXrwTvhHSdKTvUlS1cpEoW2pTf42P31fzxo+/6RSuU1i4bPiayREgkSRrvR9hahTYnIXhj5RamUk6/j3iL9cmGr8FlehfGnsdQF+Wmvk+mevLjBXYZmiDrhotIX4LOjv1mR9iojitg75sn9MMJ65X/PcGFiVfGmh2jjXbY0dZf8NwXg2qcRIWnFeuQGkrNzaxI5brOjs4t9ZXandPP3F9QSJXvmTN4l4dy+apJThO3RUswTCS8nJF5R4XAsSZ6myj2qigNDecHovUtbwQVhsVWqf63eLQqn4Fkg8N6TW/lduUsoLf1VnLqRIzJf8t0F4PiHP6GKwo5uN41MdIWUNX66IkwvT04spEr2S/w4xXtg4CrZnJAb/3qo0UqncrnZeyX+XGS8mHn3QlsORN+fWO4v4jK9b1drFXo+KQlB8DxAvhZMqgVKHsMlD2jiSnnAGsw6y5qAOf/UEzhY+M/E/t+VHSzMzSwYS/fdB2BPuwppJzKlh3KRAWxxTsbP5KTxbsbTFGRAfzD/PV3uncpjOgf8BBPaGvYtjXupmw6bfRr15bDq+ODM/Nf2DUTNe4H9IwMtD0rf93ZhWaOTW8ebE7LKRxEJp9GMQ7dv+bAz3hEx8pVVpTPbzRiHwfSLsTxq5ft3TvgqSq59+S8PGGdbPHR9Mk81q7XJfEvOBPwbgQLeRdY8dblGNe7oeLjP4TMvNkT+P0cTc3b4keoH/KQEH+/OiFGZaeX08RYuhtXFdjS3CZ7rYnKpXbXcJrzw6TkSH1gzZsDvHytB205iZyM9kl+pMtNOduEvMGn6Ox1qnGletJBaC0RKIDtsM+84P22KsC7TLeTPwQTebDzx4lCYmrI0fHhr3T5LAkbBNjNKm8+LSFkm6nUtuIIKS6Ww6Fozjd6pjIn6m8MHftCr1uss6oxCMPUU5fjhM5/D8ECI679N/qaA+J5vGTYiO9lnCv7vMP95oNOZdSPwXtf3hFdhdhzQAAAAASUVORK5CYII=)
+    no-repeat;
+  background-size: 100% 100%;
+  text-align: center;
+  line-height: 29px;
+  position: absolute;
+  top: 408px;
+  left: 29px;
+  font-size: 14px;
+  font-weight: 500;
+  color: #ffffff;
+  padding-right: 6px;
 }
 
 .meeting {
-    width: 76px;
-    height: 29px;
-    background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAFEAAAAdCAYAAADSFYAhAAAAAXNSR0IArs4c6QAABD9JREFUaEPtWk9oHFUY/35vD+bktbvjxZsoSot/sKJoqbaltaUgUkQQK4KIqOwkama3PeRgs9mS3Q0ILeTgwYMHgxfbHurBQynUQ715KIKK2OyaQEuEEtumeZ9kZ97szpt9+95uEjPE5hLmve/7fjO/9/u+982bRT4o7gHEI9T9x4zENcCJa9uF8tf99Lgqjs0uo/irLHlxZOkr7AiKe8Hi0X68CJLRtGj/V1c2LtV86NXtl4xni5NVfBb0x0Klfh5e4L/CwGNJ5UVKXI1GcxENShEyIkFGdiKXVCqicd1ejau4Mcua0nW7jOKD8H2zUru2RuJ+AI+vRylmJbkpbr1K3SL8e60bt87S7OwK8uPFg0LknrCllNO8jCQmck7mG270n+LztWal/t3aMyBfLr4Kxs72Aw1awG0s2IqnSlvTBmOLb5vfRHzB9O18pf5LmzZv3D8CYJftfu7Pdxhg4tvNX6/XaW6unXrwTvhHSdKTvUlS1cpEoW2pTf42P31fzxo+/6RSuU1i4bPiayREgkSRrvR9hahTYnIXhj5RamUk6/j3iL9cmGr8FlehfGnsdQF+Wmvk+mevLjBXYZmiDrhotIX4LOjv1mR9iojitg75sn9MMJ65X/PcGFiVfGmh2jjXbY0dZf8NwXg2qcRIWnFeuQGkrNzaxI5brOjs4t9ZXandPP3F9QSJXvmTN4l4dy+apJThO3RUswTCS8nJF5R4XAsSZ6myj2qigNDecHovUtbwQVhsVWqf63eLQqn4Fkg8N6TW/lduUsoLf1VnLqRIzJf8t0F4PiHP6GKwo5uN41MdIWUNX66IkwvT04spEr2S/w4xXtg4CrZnJAb/3qo0UqncrnZeyX+XGS8mHn3QlsORN+fWO4v4jK9b1drFXo+KQlB8DxAvhZMqgVKHsMlD2jiSnnAGsw6y5qAOf/UEzhY+M/E/t+VHSzMzSwYS/fdB2BPuwppJzKlh3KRAWxxTsbP5KTxbsbTFGRAfzD/PV3uncpjOgf8BBPaGvYtjXupmw6bfRr15bDq+ODM/Nf2DUTNe4H9IwMtD0rf93ZhWaOTW8ebE7LKRxEJp9GMQ7dv+bAz3hEx8pVVpTPbzRiHwfSLsTxq5ft3TvgqSq59+S8PGGdbPHR9Mk81q7XJfEvOBPwbgQLeRdY8dblGNe7oeLjP4TMvNkT+P0cTc3b4keoH/KQEH+/OiFGZaeX08RYuhtXFdjS3CZ7rYnKpXbXcJrzw6TkSH1gzZsDvHytB205iZyM9kl+pMtNOduEvMGn6Ox1qnGletJBaC0RKIDtsM+84P22KsC7TLeTPwQTebDzx4lCYmrI0fHhr3T5LAkbBNjNKm8+LSFkm6nUtuIIKS6Ww6Fozjd6pjIn6m8MHftCr1uss6oxCMPUU5fjhM5/D8ECI679N/qaA+J5vGTYiO9lnCv7vMP95oNOZdSPwXtf3hFdhdhzQAAAAASUVORK5CYII=) no-repeat;
-    background-size: 100% 100%;
-    text-align: center;
-    line-height: 29px;
-    position: absolute;
-    top: 316px;
-    left: 29px;
-    font-size: 14px;
-    font-family: SourceHanSansCN-Medium, SourceHanSansCN;
-    font-weight: 500;
-    color: #FFFFFF;
-    padding-right: 6px;
+  width: 76px;
+  height: 29px;
+  background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAFEAAAAdCAYAAADSFYAhAAAAAXNSR0IArs4c6QAABD9JREFUaEPtWk9oHFUY/35vD+bktbvjxZsoSot/sKJoqbaltaUgUkQQK4KIqOwkama3PeRgs9mS3Q0ILeTgwYMHgxfbHurBQynUQ715KIKK2OyaQEuEEtumeZ9kZ97szpt9+95uEjPE5hLmve/7fjO/9/u+982bRT4o7gHEI9T9x4zENcCJa9uF8tf99Lgqjs0uo/irLHlxZOkr7AiKe8Hi0X68CJLRtGj/V1c2LtV86NXtl4xni5NVfBb0x0Klfh5e4L/CwGNJ5UVKXI1GcxENShEyIkFGdiKXVCqicd1ejau4Mcua0nW7jOKD8H2zUru2RuJ+AI+vRylmJbkpbr1K3SL8e60bt87S7OwK8uPFg0LknrCllNO8jCQmck7mG270n+LztWal/t3aMyBfLr4Kxs72Aw1awG0s2IqnSlvTBmOLb5vfRHzB9O18pf5LmzZv3D8CYJftfu7Pdxhg4tvNX6/XaW6unXrwTvhHSdKTvUlS1cpEoW2pTf42P31fzxo+/6RSuU1i4bPiayREgkSRrvR9hahTYnIXhj5RamUk6/j3iL9cmGr8FlehfGnsdQF+Wmvk+mevLjBXYZmiDrhotIX4LOjv1mR9iojitg75sn9MMJ65X/PcGFiVfGmh2jjXbY0dZf8NwXg2qcRIWnFeuQGkrNzaxI5brOjs4t9ZXandPP3F9QSJXvmTN4l4dy+apJThO3RUswTCS8nJF5R4XAsSZ6myj2qigNDecHovUtbwQVhsVWqf63eLQqn4Fkg8N6TW/lduUsoLf1VnLqRIzJf8t0F4PiHP6GKwo5uN41MdIWUNX66IkwvT04spEr2S/w4xXtg4CrZnJAb/3qo0UqncrnZeyX+XGS8mHn3QlsORN+fWO4v4jK9b1drFXo+KQlB8DxAvhZMqgVKHsMlD2jiSnnAGsw6y5qAOf/UEzhY+M/E/t+VHSzMzSwYS/fdB2BPuwppJzKlh3KRAWxxTsbP5KTxbsbTFGRAfzD/PV3uncpjOgf8BBPaGvYtjXupmw6bfRr15bDq+ODM/Nf2DUTNe4H9IwMtD0rf93ZhWaOTW8ebE7LKRxEJp9GMQ7dv+bAz3hEx8pVVpTPbzRiHwfSLsTxq5ft3TvgqSq59+S8PGGdbPHR9Mk81q7XJfEvOBPwbgQLeRdY8dblGNe7oeLjP4TMvNkT+P0cTc3b4keoH/KQEH+/OiFGZaeX08RYuhtXFdjS3CZ7rYnKpXbXcJrzw6TkSH1gzZsDvHytB205iZyM9kl+pMtNOduEvMGn6Ox1qnGletJBaC0RKIDtsM+84P22KsC7TLeTPwQTebDzx4lCYmrI0fHhr3T5LAkbBNjNKm8+LSFkm6nUtuIIKS6Ww6Fozjd6pjIn6m8MHftCr1uss6oxCMPUU5fjhM5/D8ECI679N/qaA+J5vGTYiO9lnCv7vMP95oNOZdSPwXtf3hFdhdhzQAAAAASUVORK5CYII=)
+    no-repeat;
+  background-size: 100% 100%;
+  text-align: center;
+  line-height: 29px;
+  position: absolute;
+  top: 316px;
+  left: 29px;
+  font-size: 14px;
+  font-family: SourceHanSansCN-Medium, SourceHanSansCN;
+  font-weight: 500;
+  color: #ffffff;
+  padding-right: 6px;
 
-    @media only screen and (max-height: 1000px) {
-        top: 296px;
-    }
+  @media only screen and (max-height: 1000px) {
+    top: 296px;
+  }
 }
 
-
 .mettiog2Box {
-    line-height: 29px;
-    position: absolute;
-    top: 443px;
-    font-size: 14px;
-    font-family: SourceHanSansCN-Medium, SourceHanSansCN;
-    font-weight: 500;
-    color: #FFFFFF;
-    padding: 0 22px 0 0px;
-    height: 260px;
+  line-height: 29px;
+  position: absolute;
+  top: 443px;
+  font-size: 14px;
+  font-family: SourceHanSansCN-Medium, SourceHanSansCN;
+  font-weight: 500;
+  color: #ffffff;
+  padding: 0 22px 0 0px;
+  height: 260px;
 }
 
 .mettiogBox {
-    line-height: 29px;
-    position: absolute;
-    top: 353px;
-    font-size: 14px;
-    font-family: SourceHanSansCN-Medium, SourceHanSansCN;
-    font-weight: 500;
-    color: #FFFFFF;
-    padding: 0 22px 0 30px;
-    height: 260px;
+  line-height: 29px;
+  position: absolute;
+  top: 353px;
+  font-size: 14px;
+  font-family: SourceHanSansCN-Medium, SourceHanSansCN;
+  font-weight: 500;
+  color: #ffffff;
+  padding: 0 22px 0 30px;
+  height: 260px;
 
-    @media only screen and (max-height: 1000px) {
-        top: 330px;
-    }
+  @media only screen and (max-height: 1000px) {
+    top: 330px;
+  }
 }
 
 .lookFor {
-    width: 57px;
-    height: 24px;
-    background: url("~@/assets/pic/view.png") no-repeat;
-    background-size: 100% 100%;
-    float: right;
-    margin-top: 13px;
-    margin-right: 2px;
-    cursor: pointer;
+  width: 57px;
+  height: 24px;
+  background: url("~@/assets/pic/view.png") no-repeat;
+  background-size: 100% 100%;
+  float: right;
+  margin-top: 13px;
+  margin-right: 2px;
+  cursor: pointer;
 
-    @media only screen and (max-height: 1000px) {
-        margin-top: -22px;
-    }
+  @media only screen and (max-height: 1000px) {
+    margin-top: -22px;
+  }
 }
 
 .videoBox {
-    position: absolute;
-    top: 125px;
-    display: flex;
+  position: absolute;
+  top: 125px;
+  display: flex;
 
-    .oneCls {
-        width: 172px;
-        height: 146px;
-        margin-left: 33px;
-        margin-right: 18px;
+  .oneCls {
+    width: 172px;
+    height: 146px;
+    margin-left: 33px;
+    margin-right: 18px;
 
-        img {
-            width: 100%;
-            height: 100%;
-        }
+    img {
+      width: 100%;
+      height: 100%;
     }
+  }
 
-    .mesBox {
-        div {
-            font-size: 14px;
-            height: 26px;
-            font-weight: 500;
-            width: 200px;
-        }
+  .mesBox {
+    div {
+      font-size: 14px;
+      height: 26px;
+      font-weight: 500;
+      width: 200px;
     }
+  }
 }
 
 .pieBox {
-    width: 100%;
-    height: 100%;
-    position: absolute;
+  width: 100%;
+  height: 100%;
+  position: absolute;
 
-    @media only screen and (max-height: 1000px) {
-        height: 299px;
-        top: -10px;
-    }
+  @media only screen and (max-height: 1000px) {
+    height: 299px;
+    top: -10px;
+  }
 }
 
 .kqjk {
-    width: 100%;
-    position: absolute;
-    top: 48px;
-    display: flex;
+  width: 100%;
+  position: absolute;
+  top: 48px;
+  display: flex;
 
-    @media only screen and (max-height: 1000px) {
-        top: 24px;
+  @media only screen and (max-height: 1000px) {
+    top: 24px;
+  }
+
+  .oneKqjk {
+    width: 135px;
+    height: 160px;
+    padding: 5px;
+    border: 1px solid #00ebeb;
+    margin-top: 38px;
+    margin-left: 18px;
+    margin-right: 14px;
+
+    img {
+      width: 100%;
+      height: 100%;
     }
+  }
 
-    .oneKqjk {
-        width: 135px;
-        height: 160px;
-        padding: 5px;
-        border: 1px solid #00EBEB;
-        margin-top: 38px;
-        margin-left: 18px;
-        margin-right: 14px;
-
-        img {
-            width: 100%;
-            height: 100%;
-        }
-    }
-
-    .twoKqjk {
-        width: 234px;
-        height: 200px;
-        margin-top: 25px;
-        background: rgba(0, 84, 79, 0.3);
-    }
+  .twoKqjk {
+    width: 234px;
+    height: 200px;
+    margin-top: 25px;
+    background: rgba(0, 84, 79, 0.3);
+  }
 }
 
 .concet {
-    width: 194px;
-    height: 194px;
-    position: absolute;
-    top: 78px;
-    left: 50%;
-    transform: translateX(-50%);
+  width: 194px;
+  height: 194px;
+  position: absolute;
+  top: 78px;
+  left: 50%;
+  transform: translateX(-50%);
 
-    @media only screen and (max-height: 1000px) {
-        top: 58px;
-    }
+  @media only screen and (max-height: 1000px) {
+    top: 58px;
+  }
 }
 
 .bgPicture {
-    width: 100%;
-    background: url("~@/assets/pic/BG.jpg") no-repeat;
-    background-size: 100% 100%;
+  width: 100%;
+  background: url("~@/assets/pic/BG.jpg") no-repeat;
+  background-size: 100% 100%;
 }
 
 .title {
-    width: 100%;
-    height: 168px;
-    background: url("~@/assets/pic/title1.png") no-repeat;
-    background-size: 100% 100%;
+  width: 100%;
+  height: 168px;
+  background: url("~@/assets/pic/title1.png") no-repeat;
+  background-size: 100% 100%;
 }
 
 .titName {
-    width: 100%;
-    height: 30px;
-    position: absolute;
-    top: 15px;
+  width: 100%;
+  height: 30px;
+  position: absolute;
+  top: 15px;
 
-    span:nth-child(1) {
-        display: inline-block;
-        width: 18px;
-        height: 18px;
-        background: url("~@/assets/pic/titleMark.png") no-repeat;
-        background-size: 100% 100%;
-        margin-left: 16px;
-        margin-right: 8px;
-    }
+  span:nth-child(1) {
+    display: inline-block;
+    width: 18px;
+    height: 18px;
+    background: url("~@/assets/pic/titleMark.png") no-repeat;
+    background-size: 100% 100%;
+    margin-left: 16px;
+    margin-right: 8px;
+  }
 
-    span:nth-child(2) {
-        display: inline-block;
-        font-size: 22px;
-        font-family: ht2;
-        font-weight: bold;
-        color: #86eee7;
-        margin-right: 7px;
-    }
+  span:nth-child(2) {
+    display: inline-block;
+    font-size: 22px;
+    font-family: ht2;
+    font-weight: bold;
+    color: #86eee7;
+    margin-right: 7px;
+  }
 
-    span:nth-child(3) {
-        display: inline-block;
-        width: 248px;
-        height: 12px;
-        background: url("~@/assets/pic/4words.png") no-repeat;
-        background-size: 100% 100%;
-    }
+  span:nth-child(3) {
+    display: inline-block;
+    width: 248px;
+    height: 12px;
+    background: url("~@/assets/pic/4words.png") no-repeat;
+    background-size: 100% 100%;
+  }
 }
 
 .leftOneBox {
-    width: 442.38px;
-    height: 299px;
-    background: url("~@/assets/pic/rightBox.png") no-repeat;
-    background-size: 100% 100%;
-    position: absolute;
-    top: 97px;
-    left: 27px;
-    overflow-x: hidden;
-    transition: left 0.8s, height 1s;
-    overflow-y: hidden; //重点
-    @media only screen and (max-height: 1000px) {
-        height: 269px;
-        top: 76px;
-    }
+  width: 442.38px;
+  height: 299px;
+  background: url("~@/assets/pic/rightBox.png") no-repeat;
+  background-size: 100% 100%;
+  position: absolute;
+  top: 97px;
+  left: 27px;
+  overflow-x: hidden;
+  transition: left 0.8s, height 1s;
+  overflow-y: hidden; //重点
+  @media only screen and (max-height: 1000px) {
+    height: 269px;
+    top: 76px;
+  }
 }
 
 .leftTwoBox {
-    width: 442.38px;
-    height: 299px;
-    background: url("~@/assets/pic/rightBox.png") no-repeat;
-    background-size: 100% 100%;
-    position: absolute;
-    top: 421px;
-    left: 27px;
-    overflow-x: hidden;
-    transition: left 0.8s, height 1s;
-    overflow-y: hidden; //重点
-    @media only screen and (max-height: 1000px) {
-        height: 269px;
-        top: 364px;
-    }
+  width: 442.38px;
+  height: 299px;
+  background: url("~@/assets/pic/rightBox.png") no-repeat;
+  background-size: 100% 100%;
+  position: absolute;
+  top: 421px;
+  left: 27px;
+  overflow-x: hidden;
+  transition: left 0.8s, height 1s;
+  overflow-y: hidden; //重点
+  @media only screen and (max-height: 1000px) {
+    height: 269px;
+    top: 364px;
+  }
 }
 
 .leftThreeBox {
-    overflow-x: hidden;
-    transition: left 0.8s, height 1s;
-    overflow-y: hidden; //重点
-    width: 444px;
-    height: 299px;
-    background: url("~@/assets/pic/rightBox.png") no-repeat;
-    background-size: 100% 100%;
-    position: absolute;
-    top: 746px;
-    left: 27px;
+  overflow-x: hidden;
+  transition: left 0.8s, height 1s;
+  overflow-y: hidden; //重点
+  width: 444px;
+  height: 299px;
+  background: url("~@/assets/pic/rightBox.png") no-repeat;
+  background-size: 100% 100%;
+  position: absolute;
+  top: 746px;
+  left: 27px;
 
-    @media only screen and (max-height: 1000px) {
-        top: 653px;
-        height: 269px;
-    }
+  @media only screen and (max-height: 1000px) {
+    top: 653px;
+    height: 269px;
+  }
 }
 
 .rightOneBox {
-    overflow-x: hidden;
-    transition: right 0.8s, height 1s;
-    overflow-y: hidden; //重点
-    width: 444px;
-    height: 629px;
-    background: url("~@/assets/pic/rightBoxsc.png") no-repeat;
-    background-size: 100% 100%;
-    position: absolute;
-    top: 96px;
-    right: 27px;
+  overflow-x: hidden;
+  transition: right 0.8s, height 1s;
+  overflow-y: hidden; //重点
+  width: 444px;
+  height: 629px;
+  background: url("~@/assets/pic/rightBoxsc.png") no-repeat;
+  background-size: 100% 100%;
+  position: absolute;
+  top: 96px;
+  right: 27px;
 
-    @media only screen and (max-height: 1000px) {
-        top: 76px;
-        height: 558px;
-    }
+  @media only screen and (max-height: 1000px) {
+    top: 76px;
+    height: 558px;
+  }
 }
 
 .securityCheck {
-    width: 100%;
-    height: 100%;
-    position: absolute;
-    bottom: 0;
+  width: 100%;
+  height: 100%;
+  position: absolute;
+  bottom: 0;
 }
 
 .rightThreeBox {
-    overflow-x: hidden;
-    transition: right 0.8s, height 1s;
-    overflow-y: hidden; //重点
-    width: 442.38px;
-    height: 299px;
-    background: url("~@/assets/pic/rightBox.png") no-repeat;
-    background-size: 100% 100%;
-    position: absolute;
-    top: 749px;
-    right: 27px;
+  overflow-x: hidden;
+  transition: right 0.8s, height 1s;
+  overflow-y: hidden; //重点
+  width: 442.38px;
+  height: 299px;
+  background: url("~@/assets/pic/rightBox.png") no-repeat;
+  background-size: 100% 100%;
+  position: absolute;
+  top: 749px;
+  right: 27px;
 
-    @media only screen and (max-height: 1000px) {
-        height: 269px;
-        top: 653px;
-    }
+  @media only screen and (max-height: 1000px) {
+    height: 269px;
+    top: 653px;
+  }
 }
 
 .container {
-    display: flex;
-    position: absolute;
-    top: 50%;
-    transform: translateY(-50%);
-    right: 0;
+  display: flex;
+  position: absolute;
+  top: 50%;
+  transform: translateY(-50%);
+  right: 0;
 }
 
 .box {
-    height: 784px;
-    overflow-x: hidden;
-    transition: width 1s, height 1s;
-    overflow-y: hidden; //重点
-    background: url("~@/assets/pic/closeMenu.png") no-repeat;
-    background-size: 100% 100%;
-    flex-direction: column;
+  height: 784px;
+  overflow-x: hidden;
+  transition: width 1s, height 1s;
+  overflow-y: hidden; //重点
+  background: url("~@/assets/pic/closeMenu.png") no-repeat;
+  background-size: 100% 100%;
+  flex-direction: column;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+
+  .childBoxChoose {
+    cursor: pointer;
+    width: 166px;
+    height: 54px;
+    margin-bottom: 45px;
     display: flex;
     align-items: center;
     justify-content: center;
+    background: url("~@/assets/pic/btn1.png") no-repeat;
+    background-size: 100% 100%;
+    font-size: 19px;
+    font-family: SourceHanSansCN-Bold, SourceHanSansCN;
+    font-weight: bold;
+    color: #ffffff;
+    margin-left: 20px;
 
-    .childBoxChoose {
-        cursor: pointer;
-        width: 166px;
-        height: 54px;
-        margin-bottom: 45px;
-        display: flex;
-        align-items: center;
-        justify-content: center;
-        background: url("~@/assets/pic/btn1.png") no-repeat;
-        background-size: 100% 100%;
-        font-size: 19px;
-        font-family: SourceHanSansCN-Bold, SourceHanSansCN;
-        font-weight: bold;
-        color: #ffffff;
-        margin-left: 20px;
-
-        span:nth-child(1) {
-            display: inline-block;
-            width: 20px;
-            height: 20px;
-            margin-right: 8px;
-        }
-
-        span:nth-child(3) {
-            display: inline-block;
-            width: 10px;
-            height: 17px;
-            margin-left: 10px;
-            background: url("~@/assets/pic/enter1.png") no-repeat;
-            background-size: 100% 100%;
-        }
+    span:nth-child(1) {
+      display: inline-block;
+      width: 20px;
+      height: 20px;
+      margin-right: 8px;
     }
 
-    .childBox:hover {
-        background: url("~@/assets/pic/btn1.png") no-repeat;
+    span:nth-child(3) {
+      display: inline-block;
+      width: 10px;
+      height: 17px;
+      margin-left: 10px;
+      background: url("~@/assets/pic/enter1.png") no-repeat;
+      background-size: 100% 100%;
+    }
+  }
+
+  .childBox:hover {
+    background: url("~@/assets/pic/btn1.png") no-repeat;
+  }
+
+  .childBox {
+    cursor: pointer;
+    width: 166px;
+    height: 54px;
+    margin-bottom: 45px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    background: url("~@/assets/pic/btn2.png") no-repeat;
+    background-size: 100% 100%;
+    font-size: 19px;
+    font-family: SourceHanSansCN-Bold, SourceHanSansCN;
+    font-weight: bold;
+    color: #ffffff;
+    margin-left: 20px;
+
+    span:nth-child(1) {
+      display: inline-block;
+      width: 20px;
+      height: 20px;
+      margin-right: 8px;
     }
 
-    .childBox {
-        cursor: pointer;
-        width: 166px;
-        height: 54px;
-        margin-bottom: 45px;
-        display: flex;
-        align-items: center;
-        justify-content: center;
-        background: url("~@/assets/pic/btn2.png") no-repeat;
-        background-size: 100% 100%;
-        font-size: 19px;
-        font-family: SourceHanSansCN-Bold, SourceHanSansCN;
-        font-weight: bold;
-        color: #ffffff;
-        margin-left: 20px;
-
-        span:nth-child(1) {
-            display: inline-block;
-            width: 20px;
-            height: 20px;
-            margin-right: 8px;
-        }
-
-        span:nth-child(3) {
-            display: inline-block;
-            width: 10px;
-            height: 17px;
-            margin-left: 10px;
-            background: url("~@/assets/pic/enter2.png") no-repeat;
-            background-size: 100% 100%;
-        }
+    span:nth-child(3) {
+      display: inline-block;
+      width: 10px;
+      height: 17px;
+      margin-left: 10px;
+      background: url("~@/assets/pic/enter2.png") no-repeat;
+      background-size: 100% 100%;
     }
+  }
 }
 
 .icon1 {
-    background: url("~@/assets/pic/shipinjiankong.png") no-repeat;
-    background-size: 100% 100%;
+  background: url("~@/assets/pic/shipinjiankong.png") no-repeat;
+  background-size: 100% 100%;
 }
 
 .icon2 {
-    background: url("~@/assets/pic/renyuanguanli.png") no-repeat;
-    background-size: 100% 100%;
+  background: url("~@/assets/pic/renyuanguanli.png") no-repeat;
+  background-size: 100% 100%;
 }
 
 .icon3 {
-    background: url("~@/assets/pic/jinduguanli.png") no-repeat;
-    background-size: 100% 100%;
+  background: url("~@/assets/pic/jinduguanli.png") no-repeat;
+  background-size: 100% 100%;
 }
 
 .icon4 {
-    background: url("~@/assets/pic/anquanguanli.png") no-repeat;
-    background-size: 100% 100%;
+  background: url("~@/assets/pic/anquanguanli.png") no-repeat;
+  background-size: 100% 100%;
 }
 
 .closeBtn {
-    position: relative;
-    top: 343px;
-    height: 53px;
-    width: 14px;
-    cursor: pointer;
-    left: -265px;
+  position: relative;
+  top: 343px;
+  height: 53px;
+  width: 14px;
+  cursor: pointer;
+  left: -265px;
 }
 
 .switchBtn {
-    position: absolute;
-    transform: rotateY(358deg);
-    left: -14px;
-    top: 44%;
-    height: 53px;
-    width: 14px;
-    background: url("~@/assets/pic/openMenu.png") no-repeat;
-    background-size: 100% 100%;
-    cursor: pointer;
-    display: none;
+  position: absolute;
+  transform: rotateY(358deg);
+  left: -14px;
+  top: 44%;
+  height: 53px;
+  width: 14px;
+  background: url("~@/assets/pic/openMenu.png") no-repeat;
+  background-size: 100% 100%;
+  cursor: pointer;
+  display: none;
 }
 
 .titTop {
-    width: 100%;
-    position: absolute;
-    top: 9px;
-    left: 9px;
-    display: flex;
-    justify-content: space-between;
+  width: 100%;
+  position: absolute;
+  top: 9px;
+  left: 9px;
+  display: flex;
+  justify-content: space-between;
 
-    .titLeft {
-        width: 138px;
-        height: 40px;
-        background: #025A5F;
-        line-height: 40px;
-        text-align: center;
+  .titLeft {
+    width: 138px;
+    height: 40px;
+    background: #025a5f;
+    line-height: 40px;
+    text-align: center;
 
-        span:nth-child(1),
-        span:nth-child(2) {
-            font-size: 14px;
-            color: #3CFFF9;
-            letter-spacing: 1px;
-            font-weight: 400;
-            cursor: pointer;
-        }
-
-        span:nth-child(3) {
-            font-size: 14px;
-            color: #fff;
-            letter-spacing: 1px;
-            font-weight: bold;
-            cursor: pointer;
-        }
+    span:nth-child(1),
+    span:nth-child(2) {
+      font-size: 14px;
+      color: #3cfff9;
+      letter-spacing: 1px;
+      font-weight: 400;
+      cursor: pointer;
     }
 
-    .titRight {
-        padding-top: 11px;
-        padding-right: 25px;
-        font-size: 14px;
-        font-weight: 400;
-        color: #D1FFFE;
-
-        span:nth-child(2) {
-            display: inline-block;
-            position: absolute;
-            right: 80px;
-            width: 17.5px;
-            height: 18px;
-            background: url("~@/assets/pic/sun.png") no-repeat;
-            background-size: 100% 100%;
-        }
+    span:nth-child(3) {
+      font-size: 14px;
+      color: #fff;
+      letter-spacing: 1px;
+      font-weight: bold;
+      cursor: pointer;
     }
+  }
 
+  .titRight {
+    padding-top: 11px;
+    padding-right: 25px;
+    font-size: 14px;
+    font-weight: 400;
+    color: #d1fffe;
+
+    span:nth-child(2) {
+      display: inline-block;
+      position: absolute;
+      right: 80px;
+      width: 17.5px;
+      height: 18px;
+      background: url("~@/assets/pic/sun.png") no-repeat;
+      background-size: 100% 100%;
+    }
+  }
 }
 </style>