修改切换、弹窗、数据

cokingCoal/humanResources.html

@@ -31,7 +31,7 @@
         <div class="page_main">
             <div class="page_main_left flex_column">
                 <div class="left_top">
-                    <div class="title">Ⅰ.岗位发布</div>
+                    <div :class="treeList[0].flag?'title_yellow':'title'">Ⅰ.岗位发布</div>
                     <div class="main flex_sp">
 
                         <div class="main_item flex_column">
@@ -42,19 +42,20 @@
                             <div class="item_content_4 flex_column">
                                 <div class="content_4_top flex_column">
                                     <div class="content_4_title flex">
-                                        <div class="btn_on">招聘岗位</div>
-                                        <div class="btn_off">招聘岗位种类</div>
+                                        <div :class="item.flag?'btn_on':'btn_off'" v-for="(item,index) in leftList" @click="handleChangeType(false,index)">{{ item.name }}</div>
+                                        <!-- <div class="btn_off">招聘岗位种类</div> -->
                                     </div>
                                     <div class="content_4_time flex">
-                                        <div class="time flex">
-                                            <span>2022-07</span>
+
+                                        <div class="time flex" @click="handleClick('timeList2',0)">
+                                            <span>{{ timeList2[0] }}</span>
                                             <span class="img_class">
                                                 <img src="./images/humanResources/icon.png" alt="">
                                             </span>
                                         </div>
                                         <div style="margin: 0 10px;">~</div>
-                                        <div class="time flex">
-                                            <span>2022-07</span>
+                                        <div class="time flex" @click="handleClick('timeList2',1)">
+                                            <span>{{ timeList2[1] }}</span>
                                             <span class="img_class">
                                                 <img src="./images/humanResources/icon.png" alt="">
                                             </span>
@@ -62,7 +63,9 @@
                                     </div>
                                 </div>
                                 <div class="content_4_btm">
-                                    <dv-scroll-board :config="config2" style="width: 100%; height: 100%" />
+                                    <div v-if="!leftFlag" class="echarts_dom" ref="leftChange"></div>
+
+                                    <dv-scroll-board v-if="leftFlag" :config="config2" style="width: 100%; height: 100%" />
                                 </div>
                             </div>
                         </div>
@@ -115,14 +118,20 @@
                         </div>
                     </div>
                 </div>
-                <div class="left_btm">
-                    <div class="title">Ⅱ.简历投递</div>
-                    <div class="main flex_sp">
+                <div class="left_btm" >
+                    <div :class="treeList[1].flag?'title_yellow':'title'">Ⅱ.简历投递</div>
+                    <div class="main flex_sp" style="position: relative;">
                         <div class="main_item">
                             <dv-scroll-board :config="configMark" style="width: 100%; height: 100%" />
                         </div>
-                        <div class="main_item">
-                            <div class="echarts_dom" ref="vita"></div>
+                        <div class="main_item" >
+                            <div class="echarts_dom" v-if="downholeFlag" ref="vita"></div>
+                            
+                            <dv-scroll-board v-if="!downholeFlag" :config="typeList" style="width: 100%; height: 100%" />
+
+                        </div>
+                        <div class="echarts_icon" @click="hanleIcon()">
+                            <img src="./images/blue.png" alt="">
                         </div>
                     </div>
                 </div>
@@ -144,7 +153,7 @@
                     <div class="center_main_item flex_column" v-for="(item, index) in treeList" :key="index"
                         :style="item.flag?item.onStyle:item.style">
                         <div class="center_main_item_icon">
-                            <img :src="item.src" alt="">
+                            <img :src="item.flag?item.onSrc:item.src" alt="">
                         </div>
                         <span>{{ item.name }}</span>
                     </div>
@@ -181,27 +190,27 @@
             </div>
             <div class="page_main_right flex_column">
                 <div class="right_top">
-                    <div class="title">Ⅲ.资格审查</div>
+                    <div :class="treeList[2].flag?'title_yellow':'title'">Ⅲ.资格审查</div>
                     <div class="main flex_sp">
                         <div class="main_item flex_column"
                             style="background: none;overflow: hidden;padding-bottom: 15px;">
                             <div class="main_item_btn flex">
-                                <div class="btn_on">当前数</div>
-                                <div class="btn_off">累计数</div>
+                                <div :class="item.flag?'btn_on':'btn_off'" v-for="(item,index) in rightList" @click="handleChangeType(true,index)">{{ item.name }}</div>
+                                <!-- <div class="btn_off" @click="handleChangeType(true,2)">累计数</div> -->
                             </div>
                             <div class="main_item_main_bg">
                                 <div class="bg_cyc left flex_column">
-                                    <div class="bg_cyc_text">100 <span>人</span> </div>
+                                    <div class="bg_cyc_text">{{ rightList[rightIndex].num1 }} <span>人</span> </div>
                                     <div>总人数</div>
                                 </div>
                                 <div class="bg_cyc right flex_column">
-                                    <div class="bg_cyc_text">60 人</div>
+                                    <div class="bg_cyc_text">{{ rightList[rightIndex].num2 }} 人</div>
                                     <div>通过人数</div>
                                 </div>
                                 <img src="./images/humanResources/examination.png" alt="">
 
                             </div>
-                            <div class="main_item_text">通过率 60%</div>
+                            <div class="main_item_text">通过率 {{ rightList[rightIndex].num3 }}%</div>
                         </div>
                         <div class="main_item flex_sp" style="background: none;">
                             <!-- <div class="main_item_box flex_sp" v-for="(item,index) in 5" :key="index">
@@ -264,7 +273,7 @@
                     </div>
                 </div>
                 <div class="right_main">
-                    <div class="title">Ⅳ.综合测评</div>
+                    <div :class="treeList[3].flag?'title_yellow':'title'">Ⅳ.综合测评</div>
                     <div class="main flex_sp">
                         <div class="main_item flex_column" style="background: none;">
                             <div class="main_item_title">笔试安排</div>
@@ -272,16 +281,21 @@
                                 <dv-scroll-board :config="configInterview" style="width: 100%; height: 100%" />
                             </div>
                         </div>
-                        <div class="main_item flex_column" style="background: none;">
+                        <div class="main_item flex_column" style="background: none;position: relative;">
                             <div class="main_item_title">面试安排</div>
                             <div class="main_item_main">
                                 <dv-scroll-board :config="configWritten" style="width: 100%; height: 100%" />
                             </div>
+                            <div class="changeTime" @click="handleMonth()">
+                                <img class="humanResources_times" src="./images/humanResources/time.png" alt="">
+                                <div class="humanResources_text">{{ monthItem }}月</div>
+                                <img class="humanResources_icon_time" src="./images/humanResources/icon.png" alt="">
+                            </div>
                         </div>
                     </div>
                 </div>
                 <div class="right_btm">
-                    <div class="title">Ⅴ.录用公示</div>
+                    <div :class="treeList[4].flag?'title_yellow':'title'">Ⅴ.录用公示</div>
                     <div class="main flex_column">
                         <div class="main_item_top">
                             <vue-seamless-scroll :data="listData" class="warp" :classOption="classOption">
@@ -316,10 +330,42 @@
             </div>
         </div>
         <div class="page_btm">
+            <div class="changeTime_else">
+                <div class="content_4_time flex" style="width: 100%;height: 100%;margin-left: 20px;">
+                    <div class="time flex" @click="handleClick('timeList1', 0)">
+                        <span>{{ timeList1[0] }}</span>
+                        <span class="img_class">
+                            <img src="./images/humanResources/icon.png" alt="">
+                        </span>
+                    </div>
+                    <div style="margin: 0 10px;">~</div>
+                    <div class="time flex" @click="handleClick('timeList1', 1)">
+                        <span>{{ timeList1[1] }}</span>
+                        <span class="img_class">
+                            <img src="./images/humanResources/icon.png" alt="">
+                        </span>
+                    </div>
+                    <!-- <div class="time flex" @click="handleClick(2)">
+                        <span>2022-07</span>
+                        <span class="img_class">
+                            <img src="./images/humanResources/icon.png" alt="">
+                        </span>
+                    </div> -->
+                </div>
+            </div>
             <div class="echarts_dom" ref="pageBtm"></div>
         </div>
 
-
+        <div class="mark_box" v-if="showMark" @click="handleMark()">
+            <div class="mark_select_box" :style="markStyle" v-if="showSelect">
+                <div class="mark_select_options" v-for="(item,index) in newList" ::key="index"
+                    @click="handleOption(item)">{{ item }}</div>
+            </div>
+            <div class="mark_month_box" v-if="showMonth">
+                <div class="mark_select_options" v-for="(item,index) in monthList" :key="index"
+                @click="handleMonthOption(item)">{{ item }}月</div>
+            </div>
+        </div>
 
     </div>
     <script src="./js/humanResources.js"></script>

cokingCoal/js/dataA.js

@@ -77,6 +77,14 @@ let mobilizeList = {
   y4: [13, 25, 15, 4, 9, 6, 22, 2, 11, 0, 5, 18, 1, 3, 0, 11, 0, 9, 10, 0, 5],
   y5: [265, 132, 68, 27, 46, 35, 0, 0, 5, 0, 1, 1, 0, 5, 0, 0, 0, 0, 0, 0, 0],
 }
+
+let admissionList = {
+  x: ["西山煤电", "汾西矿业", "霍州煤电", "山煤国际", "华晋焦煤", "山西焦化", "物资装备公司", "金土地公司", "销售公司", "国发公司", "投资公司", "人力资源公司", "金融资本公司", "民爆集团", "云数据公司", "焦煤置业", "新能源公司", "油品公司", "低碳公司", "交易中心", "招标公司"],
+  y1: [80, 70, 65, 60, 40, 15, 14, 13, 12, 15, 10, 15, 8, 12, 5, 15, 18, 20, 8, 10, 5],
+  y2: [110, 100, 90, 80, 70, 40, 50, 70, 20, 20, 20, 20, 15, 20, 12, 21, 23, 38, 16, 30, 10],
+  y3: [78, 68, 64, 59, 38, 14, 13, 11, 10, 14, 10, 14, 7, 10, 4, 13, 16, 19, 7, 9, 4],
+}
+
 // let mobilizeList = {
 //   x: ["山焦股份", "山焦西山", "山焦汾西", "山焦霍州", "山焦山煤", "山焦华晋", "山焦焦化", "山焦机电", "山焦金土地", "山焦销售", "山焦投资", "山焦人力", "山焦资本", "山西民爆", "山焦云数据", "山焦新能源", "山焦油品", "山焦低碳(重点实验室)", "山焦招标", "山焦置业", "焦煤教育基地", "山焦交易中心", "山焦国发", "山焦盐化"],
 //   y1: [0, 0, 0, 4, 0, 0, 1, 0, 0, 0, 0, 0, 0, 1, 0, 0, 0, 0, 0, 0, 1, 0, 0, 0],
@@ -185,19 +193,19 @@ let rightList = {
   y: [300, 200, 270, 140, 150, 120],
 }
 
-let  studioInformation = {
+let studioInformation = {
   waitTime: 5000,
-  header: ["工作室名称", "工作室所在单位", "颁发单位及时间", "成员数(人)","平均年龄"],
+  header: ["工作室名称", "工作室所在单位", "颁发单位及时间", "成员数(人)", "平均年龄"],
   rowNum: 4,
   columnWidth: [450, 270, 450, 180],
   headerHeight: 90,
   data: [
-    ["马义田焊接创新工作室", '设备修造厂', '全国总工会2014年',"7", '40'],
-    ["王斌俊机电设备维护创新工作室", '高阳煤矿', '人力资源和社会保障部 2017年',"16", '35'],
-    ["王强强技能大师工作室", '贺西煤矿', '人力资源和社会保障部 2020年',"10", '31'],
-    ["马义田焊接创新工作室", '设备修造厂', '全国总工会2014年',"7", '40'],
-    ["王斌俊机电设备维护创新工作室", '高阳煤矿', '人力资源和社会保障部 2017年',"16", '35'],
-    ["王强强技能大师工作室", '贺西煤矿', '人力资源和社会保障部 2020年',"10", '31'],
+    ["马义田焊接创新工作室", '设备修造厂', '全国总工会2014年', "7", '40'],
+    ["王斌俊机电设备维护创新工作室", '高阳煤矿', '人力资源和社会保障部 2017年', "16", '35'],
+    ["王强强技能大师工作室", '贺西煤矿', '人力资源和社会保障部 2020年', "10", '31'],
+    ["马义田焊接创新工作室", '设备修造厂', '全国总工会2014年', "7", '40'],
+    ["王斌俊机电设备维护创新工作室", '高阳煤矿', '人力资源和社会保障部 2017年', "16", '35'],
+    ["王强强技能大师工作室", '贺西煤矿', '人力资源和社会保障部 2020年', "10", '31'],
   ],
   align: ["center", "center", "center", "center", "center"],
   headerBGC: "#153A62",
@@ -206,19 +214,19 @@ let  studioInformation = {
   hoverPause: false,
 }
 
-let  leaderInformation = {
+let leaderInformation = {
   waitTime: 5000,
   header: ["出生年月", "从事职业（工种）", "职业技能等级", "担任职务"],
   rowNum: 4,
   columnWidth: [230, 250, 250, 280],
   headerHeight: 90,
   data: [
-    ["1953年4月", '焊接', '高级技师',"返聘专家"],
-    ["1978年6月", '综采维修电工', '高级技师',"机电副总工程师"],
-    ["1981年8月", '电工', '高级技师',"机运区二级专员"],
-    ["1953年4月", '焊接', '高级技师',"返聘专家"],
-    ["1978年6月", '综采维修电工', '高级技师',"机电副总工程师"],
-    ["1981年8月", '电工', '高级技师',"机运区二级专员"],
+    ["1953年4月", '焊接', '高级技师', "返聘专家"],
+    ["1978年6月", '综采维修电工', '高级技师', "机电副总工程师"],
+    ["1981年8月", '电工', '高级技师', "机运区二级专员"],
+    ["1953年4月", '焊接', '高级技师', "返聘专家"],
+    ["1978年6月", '综采维修电工', '高级技师', "机电副总工程师"],
+    ["1981年8月", '电工', '高级技师', "机运区二级专员"],
 
   ],
   align: ["center", "center", "center", "center", "center"],
@@ -243,22 +251,32 @@ let honorList = [
 
 
 let employmentList = [
-  ["01","陈英","男","142752********0101","杜儿坪矿"],
-  ["02","陈英","男","142752********0101","杜儿坪矿"],
-  ["03","陈英","男","142752********0101","杜儿坪矿"],
-  ["04","陈英","男","142752********0101","杜儿坪矿"],
-  ["05","陈英","男","142752********0101","杜儿坪矿"],
-  ["06","陈英","男","142752********0101","杜儿坪矿"],
-  ["07","陈英","男","142752********0101","杜儿坪矿"],
-  ["08","陈英","男","142752********0101","杜儿坪矿"],
-  ["09","陈英","男","142752********0101","杜儿坪矿"],
-  ["10","陈英","男","142752********0101","杜儿坪矿"],
-  ["11","陈英","男","142752********0101","杜儿坪矿"],
-  ["12","陈英","男","142752********0101","杜儿坪矿"],
-  ["13","陈英","男","142752********0101","杜儿坪矿"],
-  ["14","陈英","男","142752********0101","杜儿坪矿"],
-  ["15","陈英","男","142752********0101","杜儿坪矿"],
-  ["16","陈英","男","142752********0101","杜儿坪矿"],
+  ["01", "陈英", "男", "142752********0101", "杜儿坪矿"],
+  ["02", "李小曼", "女", "142752********0101", "杜儿坪矿"],
+  ["03", "王亮", "男", "142752********0101", "杜儿坪矿"],
+  ["04", "李鑫", "女", "142752********0101", "杜儿坪矿"],
+  ["05", "王伟", "男", "142752********0101", "杜儿坪矿"],
+  ["06", "李梦", "女", "142752********0101", "杜儿坪矿"],
+  ["07", "王小星", "男", "142752********0101", "杜儿坪矿"],
+  ["08", "张爱琴", "女", "142752********0101", "杜儿坪矿"],
+  ["09", "李丽丽", "女", "142752********0101", "杜儿坪矿"],
+  ["10", "王强", "男", "142752********0101", "杜儿坪矿"],
+  ["11", "王国兴", "男", "142752********0101", "杜儿坪矿"],
+  ["12", "王伟杰", "男", "142752********0101", "杜儿坪矿"],
+  ["13", "李亮亮", "女", "142752********0101", "杜儿坪矿"],
+  ["14", "王洁", "男", "142752********0101", "杜儿坪矿"],
 ]
 
+let monthList = ['01', '02', '03', '04', '05', '06', '07', '08', '09', '10', '11', '12']
+let yearList = ["2023", "2022"]
+
+function listToChange(list1, list2) {
+  let list = []
+  list1.forEach(i => {
+    list2.forEach(k => {
+      list.push(i + "-" + k)
+    })
+  });
+  return list
+}
 

cokingCoal/js/humanResources.js

@@ -7,16 +7,17 @@ let app = new Vue({
             treeList: [
                 {
                     name: "岗位发布",
-                    flag: false,
+                    flag: true,
                     src: "./images/humanResources/post.png",
+                    onSrc: "./images/humanResources/post_on.png",
                     style: {
-                        top: "60%",
-                        left: "20%",
+                        top: "55%",
+                        left: "15%",
                         backgroundImage: "url(./images/humanResources/icon_bg_blue.png)"
                     },
                     onStyle: {
-                        top: "60%",
-                        left: "20%",
+                        top: "55%",
+                        left: "15%",
                         backgroundImage: "url(./images/humanResources/iconBg_yellow.png)"
                     }
                 },
@@ -24,22 +25,24 @@ let app = new Vue({
                     name: "简历投递",
                     flag: false,
                     src: "./images/humanResources/notes.png",
+                    onSrc: "./images/humanResources/notes_on.png",
                     style: {
-                        top: "22%",
-                        left: "28%",
+                        top: "17%",
+                        left: "24%",
                         backgroundImage: "url(./images/humanResources/icon_bg_blue.png)"
                     },
                     onStyle: {
-                        top: "22%",
-                        left: "28%",
+                        top: "17%",
+                        left: "24%",
                         backgroundImage: "url(./images/humanResources/iconBg_yellow.png)"
                     }
                 },
 
                 {
                     name: "资格审查",
-                    flag: true,
+                    flag: false,
                     src: "./images/humanResources/qualification.png",
+                    onSrc: "./images/humanResources/qualification_on.png",
                     style: {
                         top: "-80px",
                         left: "calc(50% - 202px)",
@@ -55,14 +58,15 @@ let app = new Vue({
                     name: "综合测评",
                     flag: false,
                     src: "./images/humanResources/comprehensive.png",
+                    onSrc: "./images/humanResources/comprehensive_on.png",
                     style: {
-                        top: "22%",
-                        right: "28%",
+                        top: "17%",
+                        right: "24%",
                         backgroundImage: "url(./images/humanResources/icon_bg_blue.png)"
                     },
                     onStyle: {
-                        top: "22%",
-                        right: "28%",
+                        top: "17%",
+                        right: "24%",
                         backgroundImage: "url(./images/humanResources/iconBg_yellow.png)"
                     }
                 },
@@ -70,14 +74,15 @@ let app = new Vue({
                     name: "录用公式",
                     flag: false,
                     src: "./images/humanResources/publicity.png",
+                    onSrc: "./images/humanResources/publicity_on.png",
                     style: {
-                        top: "60%",
-                        right: "20%",
+                        top: "55%",
+                        right: "15%",
                         backgroundImage: "url(./images/humanResources/icon_bg_blue.png)"
                     },
                     onStyle: {
-                        top: "60%",
-                        right: "20%",
+                        top: "55%",
+                        right: "15%",
                         backgroundImage: "url(./images/humanResources/iconBg_yellow.png)"
                     }
                 },
@@ -90,7 +95,7 @@ let app = new Vue({
                 columnWidth: [230, 170, 100, 100],
                 rowNum: 10,
                 data: [
-                    ["西山煤电屯兰矿", '井下普工', '30', '100', "2023.07.01"],
+                    ["西山煤电屯兰矿", '井下普工', '50', '100', "2023.07.01"],
                     ["西山煤电斜沟煤矿", '井下钻探工', '10', '30', "2023.07.01"],
                     ["汾西矿业高阳煤矿", '井下安全检查员', '5', '10', "2023.07.01"],
                     ["汾西矿业柳湾煤矿", '井下设备管理员', '10', '50', "2023.07.01"],
@@ -107,6 +112,7 @@ let app = new Vue({
                 headerBGC: "#69c1ff2d",
                 oddRowBGC: "rgba(105, 193, 255, 0)",
                 evenRowBGC: "#69c1ff21",
+                hoverPause: false,
             },
             configIndex: 1,
             config2: {
@@ -120,13 +126,17 @@ let app = new Vue({
                     ["<span class='green'>03</span>", "<span class='green'>汾西矿业</span>", "<span class='green'>20个</span>"],
                     ["04", "汾西矿业", "10个"],
                     ["05", "汾西矿业", "8个"],
-
+                    ["<span class='yellow'>01</span>", "<span class='yellow'>西山煤电</span>", "<span class='yellow'>30个</span>"],
+                    ["<span class='red'>02</span>", "<span class='red'>山煤国际</span>", "<span class='red'>25个</span>"],
+                    ["<span class='green'>03</span>", "<span class='green'>汾西矿业</span>", "<span class='green'>20个</span>"],
                     ["06", "汾西矿业", "4个"],
+                    ["07", "山煤国际", "4个"],
                 ],
                 align: ["center", "center", "center", "center", "center"],
                 headerBGC: "#69c1ff2d",
                 oddRowBGC: "rgba(105, 193, 255, 0)",
                 evenRowBGC: "#69c1ff21",
+                carousel: 'page'
             },
             targetIndex: 0,
             classChange: false,
@@ -166,18 +176,18 @@ let app = new Vue({
                 header: ["头像", "姓名", "投递岗位", "时间"],
                 rowNum: 6,
                 headerHeight: 55,
-                // columnWidth: [90, 170, 200, ],
+                columnWidth: [120 ],
                 data: [
-                    ["<img class='list_img' src='https://www.bootcdn.cn/assets/img/m-react.png' alt=''>", "<span class=''>西山煤电</span>", "<span class=''>71</span>", "<span class=''>3月</span>"],
-                    ["<img class='list_img' src='https://www.bootcdn.cn/assets/img/m-react.png' alt=''>", "<span class=''>汾西矿业</span>", "<span class=''>1896</span>", "<span class=''>3月</span>"],
-                    ["<img class='list_img' src='https://www.bootcdn.cn/assets/img/m-react.png' alt=''>", "<span class=''>霍州煤电</span>", "<span class=''>847</span>", "<span class=''>3月</span>"],
-                    ["<img class='list_img' src='https://www.bootcdn.cn/assets/img/m-react.png' alt=''>", "<span class=''>山煤国际</span>", "<span class=''>514</span>", "<span class=''>3月</span>"],
-                    ["<img class='list_img' src='https://www.bootcdn.cn/assets/img/m-react.png' alt=''>", "<span class=''>华晋焦煤</span>", "<span class=''>13</span>", "<span class=''>3月</span>"],
-                    ["<img class='list_img' src='https://www.bootcdn.cn/assets/img/m-react.png' alt=''>", "<span class=''>西山煤电</span>", "<span class=''>71</span>", "<span class=''>3月</span>"],
-                    ["<img class='list_img' src='https://www.bootcdn.cn/assets/img/m-react.png' alt=''>", "<span class=''>汾西矿业</span>", "<span class=''>1896</span>", "<span class=''>3月</span>"],
-                    ["<img class='list_img' src='https://www.bootcdn.cn/assets/img/m-react.png' alt=''>", "<span class=''>霍州煤电</span>", "<span class=''>847</span>", "<span class=''>3月</span>"],
-                    ["<img class='list_img' src='https://www.bootcdn.cn/assets/img/m-react.png' alt=''>", "<span class=''>山煤国际</span>", "<span class=''>514</span>", "<span class=''>3月</span>"],
-                    ["<img class='list_img' src='https://www.bootcdn.cn/assets/img/m-react.png' alt=''>", "<span class=''>华晋焦煤</span>", "<span class=''>13</span>", "<span class=''>3月</span>"],
+                    ["<img class='list_img' src='https://www.bootcdn.cn/assets/img/m-react.png' alt=''>", "<span class=''>王伟</span>", "<span class=''>技术员</span>", "<span class=''>2023.07.29</span>"],
+                    ["<img class='list_img' src='https://www.bootcdn.cn/assets/img/m-react.png' alt=''>", "<span class=''>李丽丽</span>", "<span class=''>井下钻探工</span>", "<span class=''>2023.07.26</span>"],
+                    ["<img class='list_img' src='https://www.bootcdn.cn/assets/img/m-react.png' alt=''>", "<span class=''>王亮</span>", "<span class=''>井下钻探工</span>", "<span class=''>2023.07.18</span>"],
+                    ["<img class='list_img' src='https://www.bootcdn.cn/assets/img/m-react.png' alt=''>", "<span class=''>李星</span>", "<span class=''>井下钻探工</span>", "<span class=''>2023.07.11</span>"],
+                    ["<img class='list_img' src='https://www.bootcdn.cn/assets/img/m-react.png' alt=''>", "<span class=''>韩梅</span>", "<span class=''>生产调度员</span>", "<span class=''>2023.07.08</span>"],
+                    ["<img class='list_img' src='https://www.bootcdn.cn/assets/img/m-react.png' alt=''>", "<span class=''>郑凯</span>", "<span class=''>生产调度员</span>", "<span class=''>2023.07.01</span>"],
+                    ["<img class='list_img' src='https://www.bootcdn.cn/assets/img/m-react.png' alt=''>", "<span class=''>吉宇晟</span>", "<span class=''>技术员</span>", "<span class=''>2023.06.29</span>"],
+                    ["<img class='list_img' src='https://www.bootcdn.cn/assets/img/m-react.png' alt=''>", "<span class=''>李志桐</span>", "<span class=''>技术员</span>", "<span class=''>2023.07.29</span>"],
+                    ["<img class='list_img' src='https://www.bootcdn.cn/assets/img/m-react.png' alt=''>", "<span class=''>赵建国</span>", "<span class=''>井下钻探工</span>", "<span class=''>2023.07.26</span>"],
+                    ["<img class='list_img' src='https://www.bootcdn.cn/assets/img/m-react.png' alt=''>", "<span class=''>杜勇</span>", "<span class=''>井下钻探工</span>", "<span class=''>2023.07.18</span>"],
                 ],
                 align: ["center", "center", "center", "center", "center"],
                 headerBGC: "#69c1ff2d",
@@ -188,15 +198,19 @@ let app = new Vue({
                 waitTime: 2000,
                 header: ["序号", "姓名", "会议厅", "场次", "时间"],
                 headerHeight: 55,
-                columnWidth: [70, 120, 170, 100],
+                columnWidth: [70, 120, 170, 200],
                 rowNum: 5,
                 data: [
-                    ["01", '陈英', '第一洽谈室', '第一场', "2023.07.01   09:30-10:30"],
-                    ["02", '李小曼', '第一洽谈室', '第一场', "2023.07.01   09:30-10:30"],
-                    ["03", '王亮', '第一洽谈室', '第一场', "2023.07.01   09:30-10:30"],
-                    ["04", '李鑫', '第一洽谈室', '第一场', "2023.07.01   09:30-10:30"],
-                    ["05", '王伟', '第一洽谈室', '第一场', "2023.07.01   09:30-10:30"],
-                    ["06", '陈英', '第一洽谈室', '第一场', "2023.07.01   09:30-10:30"],
+                    ["01", '陈英', '洽谈室1', '杜儿坪矿', "2023.07.01   09:30-10:30"],
+                    ["02", '李小曼', '洽谈室1', '杜儿坪矿', "2023.07.01   09:30-10:30"],
+                    ["03", '王亮', '洽谈室1', '杜儿坪矿', "2023.07.01   09:30-10:30"],
+                    ["04", '李鑫', '洽谈室1', '杜儿坪矿', "2023.07.01   09:30-10:30"],
+                    ["05", '王伟', '洽谈室1', '杜儿坪矿', "2023.07.01   09:30-10:30"],
+                    ["06", '张强', '洽谈室1', '杜儿坪矿', "2023.07.05   09:30-10:30"],
+                    ["07", '王强', '洽谈室1', '杜儿坪矿', "2023.07.05   09:30-10:30"],
+                    ["08", '程丽', '洽谈室1', '杜儿坪矿', "2023.07.05   09:30-10:30"],
+                    ["09", '韩赢', '洽谈室1', '杜儿坪矿', "2023.07.05   09:30-10:30"],
+                    ["10", '王丽', '洽谈室1', '杜儿坪矿', "2023.07.05   09:30-10:30"],
                 ],
                 align: ["center", "center", "center", "center", "center"],
                 headerBGC: "#69c1ff2d",
@@ -207,15 +221,19 @@ let app = new Vue({
                 waitTime: 2000,
                 header: ["序号", "姓名", "会议厅", "场次", "时间"],
                 headerHeight: 55,
-                columnWidth: [70, 120, 170, 100],
+                columnWidth: [70, 120, 170, 200],
                 rowNum: 5,
                 data: [
-                    ["01", '陈英', '第一洽谈室', '第一场', "2023.07.01   09:30-10:30"],
-                    ["02", '李小曼', '第一洽谈室', '第一场', "2023.07.01   09:30-10:30"],
-                    ["03", '王亮', '第一洽谈室', '第一场', "2023.07.01   09:30-10:30"],
-                    ["04", '李鑫', '第一洽谈室', '第一场', "2023.07.01   09:30-10:30"],
-                    ["05", '王伟', '第一洽谈室', '第一场', "2023.07.01   09:30-10:30"],
-                    ["06", '陈英', '第一洽谈室', '第一场', "2023.07.01   09:30-10:30"],
+                    ["01", '陈英', '洽谈室1', '杜儿坪矿', "2023.07.01   09:30-10:30"],
+                    ["02", '李小曼', '洽谈室1', '杜儿坪矿', "2023.07.01   09:30-10:30"],
+                    ["03", '王亮', '洽谈室1', '杜儿坪矿', "2023.07.01   09:30-10:30"],
+                    ["04", '李鑫', '洽谈室1', '杜儿坪矿', "2023.07.01   09:30-10:30"],
+                    ["05", '王伟', '洽谈室1', '杜儿坪矿', "2023.07.01   09:30-10:30"],
+                    ["06", '张强', '洽谈室1', '杜儿坪矿', "2023.07.05   09:30-10:30"],
+                    ["07", '王强', '洽谈室1', '杜儿坪矿', "2023.07.05   09:30-10:30"],
+                    ["08", '程丽', '洽谈室1', '杜儿坪矿', "2023.07.05   09:30-10:30"],
+                    ["08", '韩赢', '洽谈室1', '杜儿坪矿', "2023.07.05   09:30-10:30"],
+                    ["09", '王丽', '洽谈室1', '杜儿坪矿', "2023.07.05   09:30-10:30"],
                 ],
                 align: ["center", "center", "center", "center", "center"],
                 headerBGC: "#69c1ff2d",
@@ -264,10 +282,73 @@ let app = new Vue({
                 evenRowBGC: "#69c1ff21",
                 hoverPause: false,
             },
-            vitaEcharts: null
+            typeList: {
+                waitTime: 2000,
+                header: ["单位名称", "岗位名称", "报名人数"],
+                rowNum: 6,
+                headerHeight: 55,
+                columnWidth: [100, 200, 400,],
+                data: [
+                    ["汾西矿业", "综合管理岗", "4"],
+                    ["西山煤电", "综合管理岗", "3"],
+                    ["西山煤电", "财务管理岗", "2"],
+                    ["汾西矿业", "综合管理岗", "4"],
+                    ["西山煤电", "综合管理岗", "3"],
+                    ["西山煤电", "财务管理岗", "2"],
+                    ["汾西矿业", "综合管理岗", "4"],
+                ],
+                align: ["center", "center", "center", "center", "center"],
+                index: true,
+                headerBGC: "#69c1ff2d",
+                oddRowBGC: "rgba(105, 193, 255, 0)",
+                evenRowBGC: "#69c1ff21",
+                hoverPause: false,
+            },
+            vitaEcharts: null,
+            newList: [],
+            showMark: false,
+            showSelect: false,
+            showMonth: false,
+            monthList,
+            monthItem: "07",
+            timeList1: ["2022-07", "2023-07"],
+            timeList2: ["2022-07", "2023-07"],
+            from: "",
+            type: 0,
+            echartsIndex: 1,
+            downholeFlag: true,
+            markStyle: {
+                bottom: "4%",
+                right: "5%"
+            },
+            rightList: [{
+                name: "当前数",
+                flag: true,
+                num1: 100,
+                num2: 60,
+                num3: 60,
+            }, {
+                name: "累计数",
+                flag: false,
+                num1: 500,
+                num2: 400,
+                num3: 80,
+            }],
+            rightIndex: 0,
+            leftList: [{
+                name: "招聘岗位",
+                flag: true
+            }, {
+                name: "招聘岗位种类",
+                flag: false
+            }],
+            leftIndex: 0,
+            roseEcharts: null,
+            leftFlag: true
         }
     },
     created() {
+        this.newList = listToChange(yearList, monthList)
         let employmentList1 = spArr(employmentList, 5)
         let arr1 = []
         let arr2 = []
@@ -288,27 +369,27 @@ let app = new Vue({
             this.initVitaEcharts(vita)
 
             let pageBtm = this.$refs.pageBtm
-            this.initDownholeEcharts(pageBtm, { x: mobilizeList.x, y1: mobilizeList.y3, y2: mobilizeList.y4, y3: mobilizeList.y5 })
+            this.initDownholeEcharts(pageBtm, { x: admissionList.x, y1: admissionList.y1, y2: admissionList.y2, y3: admissionList.y3 })
             let rightOne = this.$refs.rightOne
-            this.initLineRight(rightOne)
+            this.initLineRight(rightOne, { value: 50, total: 118 })
             let rightTwo = this.$refs.rightTwo
-            this.initLineRight(rightTwo)
+            this.initLineRight(rightTwo, { value: 30, total: 118 })
             let rightThree = this.$refs.rightThree
-            this.initLineRight(rightThree)
+            this.initLineRight(rightThree, { value: 20, total: 118 })
             let rightFour = this.$refs.rightFour
-            this.initLineRight(rightFour)
+            this.initLineRight(rightFour, { value: 12, total: 118 })
             let rightFive = this.$refs.rightFive
-            this.initLineRight(rightFive)
+            this.initLineRight(rightFive, { value: 6, total: 118 })
             let c1 = this.$refs.c1
-            this.initRightCycle(c1)
+            this.initRightCycle(c1, 40)
             let c2 = this.$refs.c2
-            this.initRightCycle(c2)
+            this.initRightCycle(c2, 25)
             let c3 = this.$refs.c3
-            this.initRightCycle(c3)
+            this.initRightCycle(c3, 20)
             let c4 = this.$refs.c4
-            this.initRightCycle(c4)
+            this.initRightCycle(c4, 10)
             let c5 = this.$refs.c5
-            this.initRightCycle(c5)
+            this.initRightCycle(c5, 5)
 
 
 
@@ -379,8 +460,8 @@ let app = new Vue({
                     data: ["招聘人数", "报名人数", "录用人数"],
                     align: 'left',
                     itemGap: 50,
-                    right: '1%',
-                    y: '1%',
+                    right: 500,
+                    y: '2%',
                     icon: 'rect',
                     textStyle: {
                         color: "#fff",
@@ -500,7 +581,7 @@ let app = new Vue({
         },
 
         initRightCycle(el, data) {
-            var getvalue = [88];
+            var getvalue = [data];
 
             let chat = echarts.init(el)
 
@@ -578,8 +659,8 @@ let app = new Vue({
             let that = this;
             let myChart = echarts.init(el);
             let nameList = ["a"];
-            let valueList = [1287.5];
-            let total = 1363.88; // 数据总数
+            let valueList = [data.value];
+            let total = data.total; // 数据总数
             var category = nameList.map((item, index) => {
                 return {
                     value: valueList[index],
@@ -743,7 +824,7 @@ let app = new Vue({
                             normal: {
                                 formatter: (params) => {
                                     var text;
-                                    text = `${((params["data"] * 100) / total).toFixed(2)}个`;
+                                    text = `${((params["data"] * 100) / total).toFixed(0)}人`;
                                     return text;
                                 },
                                 textStyle: {
@@ -805,12 +886,12 @@ let app = new Vue({
                 },
                 animation: true,
                 grid: {
-                    top: "7%",
+                    top: "12%",
                     bottom: "8%",
                     right: "2%"
                 },
                 xAxis: {
-                    data: ['一月', '二月', '三月', '四月', '五月', '六月', '七月', '八月', '九月', '十月', '十一月', '十二月'],
+                    data: ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月'],
                     axisLine: {
                         show: false //隐藏X轴轴线
                     },
@@ -835,6 +916,7 @@ let app = new Vue({
                 },
                 yAxis: [
                     {
+                        name:"投递/份",
                         type: "value",
                         gridIndex: 0,
                         min: 0,
@@ -851,6 +933,10 @@ let app = new Vue({
                         axisTick: {
                             show: false
                         },
+                        nameTextStyle:{
+                            fontSize: 28,
+                            color: "#B6BFCE"
+                        },
                         axisLine: {
                             show: false,
                             lineStyle: {
@@ -961,5 +1047,360 @@ let app = new Vue({
                 loopSeries: true,
             });
         },
+        initRoseEcharts(el, myData = {
+            number: ['10', '13', '20'],
+            titlename: ["地面", "辅助", "一线"],
+        }) {
+            this.roseEcharts = echarts.init(el)
+            var colorArr = ["#218de0", "#01cbb3", "#85e647", "#5d5cda", "#f6d54a", "#f845f1"];
+            var colorAlpha = ['rgba(60,170,211,0.05)', 'rgba(1,203,179,0.05)', 'rgba(133,230,71,0.05)', 'rgba(93,92,218,0.05)', 'rgba(5,197,176,0.05)', 'rgba(194,153,39,0.05)'];
+            var myProperty = {
+                titlefontsize: 30,
+                polarradius: '60%',
+                pieradius: '60%',
+                length1: 10,
+                length2: 55,
+
+            };
+
+            var data = [];
+            var total = 0;
+            for (var i = 0; i < myData.number.length; i++) {
+
+                total += (Number)(myData.number[i]);
+
+            }
+            for (let index = 0; index < myData.titlename.length; index++) {
+                data.push({
+
+                    value: myData.number[index],
+                    name: myData.titlename[index],
+                    itemStyle: {
+                        normal: {
+                            borderColor: colorArr[index],
+                            borderWidth: 2,
+                            shadowBlur: 20,
+                            shadowColor: colorArr[index],
+                            shadowOffsetx: 25,
+                            shadowOffsety: 20,
+                            color: colorAlpha[index]
+                        }
+                    },
+
+                    label: {
+                        normal: {
+                            formatter: ['{b|{b}:  {c}个}', '{d|  {d}%}'].join('\n'), //join函数将数组中的元素用选择的分隔符拼接成一个字符串
+                            rich: {
+                                b: {
+                                    color: colorArr[index],
+                                    fontSize: myProperty.titlefontsize,
+                                    lineHeight: 20
+                                },
+                                d: {
+                                    color: '#d0fffc',
+                                    fontSize: myProperty.titlefontsize, //手动输入的字体大小
+                                    height: 50,
+                                    align: 'center', //这里是控制文本的位置 此时是居中
+                                },
+                            },
+
+                        }
+                    },
+                })
+
+            }
+
+            option = {
+                grid: {
+                    left: -100,
+                    top: 50,
+                    bottom: 10,
+                    right: 10,
+                    containLabel: true
+                },
+                tooltip: {
+                    show: true,
+                    trigger: 'item',
+                    textStyle: {
+                        fontSize: 30,
+                        color: '#A3E2F4'
+                    },
+
+                },
+
+
+                polar: {
+                    // radius: ['0%','60%'],
+                    //radius:[0,200]
+                    radius: myProperty.polarradius,
+                },
+                angleAxis: {
+                    interval: 1,
+                    type: 'category',
+                    data: [],
+                    z: 10,
+                    axisLine: {
+                        show: false,
+                        lineStyle: {
+                            color: "#0B4A6B",
+                            width: 1,
+                            type: "solid"
+                        },
+                    },
+                    axisLabel: {
+                        interval: 0,
+                        show: true,
+                        color: "#0B4A6B",
+                        margin: 8,
+                        fontSize: 16
+                    },
+                },
+                radiusAxis: {
+                    min: 20,
+                    max: 120,
+                    interval: 20,
+                    axisLine: {
+                        show: false,
+                        lineStyle: {
+                            color: "#0B3E5E",
+                            width: 1,
+                            type: "solid"
+                        },
+                    },
+                    axisLabel: {
+                        formatter: '{value} %',
+                        show: false,
+                        padding: [0, 0, 20, 0],
+                        color: "#0B3E5E",
+                        fontSize: 16
+                    },
+                    splitLine: {
+                        lineStyle: {
+                            color: "#07385e",
+                            width: 2,
+                            type: "dashed"
+                        }
+                    },
+                },
+
+                calculable: true,
+                series: [{
+                    stack: 'a',
+                    type: 'pie',
+                    radius: myProperty.pieradius,
+                    roseType: 'radius',
+                    zlevel: 10,
+                    startAngle: 100,
+
+                    labelLine: {
+                        normal: {
+                            show: true,
+                            length: myProperty.length1,
+                            length2: myProperty.length2,
+                            lineStyle: {
+                                color: '#0096b1'
+
+                            }
+                        },
+                        emphasis: {
+                            show: false
+                        }
+                    },
+                    data: data,
+
+                },]
+            };
+            this.roseEcharts.setOption(option)
+            tools.loopShowTooltip(this.roseEcharts, option, {
+                nterval: 2000,
+                loopSeries: true,
+            });
+        },
+        handleClick(from, type) {
+            this.handleMark()
+            this.from = from
+            this.type = type
+            let that = this;
+            if (from == "timeList1" && type == 1) {
+                that.markStyle = {
+                    right: "1%",
+                    bottom: "4%"
+                }
+            } else if (from == "timeList1" && type == 0) {
+                that.markStyle = {
+                    right: "5%",
+                    bottom: "4%"
+                }
+            } else if (from == "timeList2" && type == 0) {
+                that.markStyle = {
+                    right: "87%",
+                    bottom: "43%"
+                }
+            } else if (from == "timeList2" && type == 1) {
+                that.markStyle = {
+                    right: "84%",
+                    bottom: "43%"
+                }
+            }
+            this.showMark = true
+            this.showSelect = true
+        },
+        handleMark() {
+            this.showMark = false
+            this.showSelect = false
+            this.showMonth = false
+        },
+        handleOption(item) {
+            this[this.from][this.type] = item
+            this.handleMark()
+        },
+        handleMonthOption(item) {
+            this.monthItem = item
+            this.handleMark()
+        },
+        handleMonth() {
+            this.handleMark()
+            this.showMark = true
+            this.showMonth = true
+        },
+        ortherEcharts(el, data) {
+            this.vitaEcharts = echarts.init(el);
+
+            option = {
+                tooltip: {
+                    show: true,
+                    trigger: 'axis',
+                    textStyle: {
+                        fontSize: 30,
+                        color: '#A3E2F4'
+                    },
+                    axisPointer: { // 坐标轴指示器，坐标轴触发有效
+                        type: 'none' // 默认为直线，可选为：'line' | 'shadow'
+                    }
+                },
+                grid: {
+                    top: '8%',
+                    left: '1%',
+                    right: '1%',
+                    bottom: '8%',
+                    containLabel: true,
+                },
+                xAxis: [{
+                    type: 'category',
+                    boundaryGap: false,
+                    axisLine: { //坐标轴轴线相关设置。数学上的x轴
+                        show: false,
+                        lineStyle: {
+                            color: '#233e64'
+                        },
+                    },
+                    axisLabel: { //坐标轴刻度标签的相关设置
+                        textStyle: {
+                            color: '#fff',
+                            fontSize: 26,
+                            margin: 15,
+                        },
+                    },
+                    axisTick: { show: false, },
+                    data: ['6.1', '6.2', '6.3', '6.4', '6.5', '6.6', '6.7'],
+                }],
+                yAxis: [{
+                    type: 'value',
+                    min: 0,
+                    max: 140,
+                    splitLine: {
+                        show: true,
+                        lineStyle: {
+                            color: '#233e64'
+                        }
+                    },
+                    axisLine: { show: false, },
+                    axisLabel: {
+                        margin: 20,
+                        textStyle: {
+                            color: '#fff',
+                            fontSize: 24,
+                        },
+                    },
+                    axisTick: { show: false, },
+                }],
+                series: [{
+                    name: '异常流量',
+                    type: 'line',
+                    smooth: true, //是否平滑曲线显示
+                    symbol: 'circle',  // 默认是空心圆（中间是白色的），改成实心圆
+                    symbolSize: 0,
+
+                    lineStyle: {
+                        normal: {
+                            color: "#3deaff"   // 线条颜色
+                        }
+                    },
+                    areaStyle: { //区域填充样式
+                        normal: {
+                            //线性渐变，前4个参数分别是x0,y0,x2,y2(范围0~1);相当于图形包围盒中的百分比。如果最后一个参数是‘true’，则该四个值是绝对像素位置。
+                            color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                                { offset: 0, color: 'rgba(61,234,255, 0.9)' },
+                                { offset: 0.7, color: 'rgba(61,234,255, 0.1)' }
+                            ], false),
+
+                            shadowColor: 'rgba(53,142,215, 0.9)', //阴影颜色
+                            shadowBlur: 20 //shadowBlur设图形阴影的模糊大小。配合shadowColor,shadowOffsetX/Y, 设置图形的阴影效果。
+                        }
+                    },
+                    data: [90, 105, 84, 125, 110, 92, 98]
+                }]
+            };
+            this.vitaEcharts.setOption(option);
+            tools.loopShowTooltip(this.vitaEcharts, option, {
+                nterval: 2000,
+                loopSeries: true,
+            });
+        },
+        hanleIcon() {
+            this.vitaEcharts.dispose()
+            this.downholeFlag = !this.downholeFlag
+            if (this.downholeFlag) {
+                setTimeout(() => {
+                    let vita = this.$refs.vita
+                    console.log(vita);
+                    this.initVitaEcharts(vita)
+                })
+            }
+            // if (this.echartsIndex == 1) {
+            //     this.ortherEcharts(vita)
+            //     this.echartsIndex = 2
+            // } else {
+            //     this.echartsIndex = 1
+            // }
+            console.log(12312132132);
+        },
+        handleChangeType(type, index) {
+            let that = this;
+            if (type) {
+                that.rightList.forEach(item => {
+                    item.flag = false
+                })
+                that.rightList[index].flag = true
+                that.rightIndex = index
+            } else {
+                that.leftList.forEach(item => {
+                    item.flag = false
+                })
+                that.leftList[index].flag = true
+                that.leftIndex = index
+                if (index == 0) {
+                    that.leftFlag = true
+                } else {
+                    that.leftFlag = false
+                    setTimeout(() => {
+                        let leftChange = that.$refs.leftChange
+                        console.log(leftChange);
+                        that.initRoseEcharts(leftChange)
+                    })
+                }
+
+            }
+        },
     },
 })

cokingCoal/styles/humanResources.css

@@ -92,6 +92,7 @@ a {
     width: 100%;
     height: 20%;
     background-color: var(--bgc);
+    position: relative;
 }
 
 .flex_column {
@@ -215,6 +216,19 @@ img {
     line-height: 65px;
 }
 
+.title_yellow {
+    width: 70%;
+    height: 75px;
+    background: url("../images/humanResources/title_yellow.png") no-repeat;
+    background-size: 100% 100%;
+    font-size: 36px;
+    font-family: Source Han Sans CN;
+    font-weight: bolder;
+    color: #FFFFFF;
+    text-indent: 8%;
+    line-height: 65px;
+}
+
 .main {
     width: 100%;
     height: calc(100% - 75px);
@@ -287,18 +301,19 @@ img {
 
 .content_4_top {
     width: 100%;
-    height: 90px;
+    height: 100px;
     align-items: flex-end;
 }
 
 .content_4_title {
     width: 100%;
-    height: 42px;
+    height: 50px;
+    justify-content: space-around;
 }
 
 .content_4_time {
     width: 45%;
-    height: 32px;
+    height: 40px;
 }
 
 .btn_on {
@@ -312,7 +327,7 @@ img {
     font-weight: 500;
     color: #ECE278;
     text-align: center;
-    line-height: 42px;
+    line-height: 50px;
 }
 
 .btn_off {
@@ -326,14 +341,10 @@ img {
     font-weight: 500;
     color: #47C0FF;
     text-align: center;
-    line-height: 42px;
+    line-height: 50px;
 }
 
-.time {
-    width: 49%;
-    height: 100%;
-    background: rgba(75, 172, 255, 0.2);
-}
+
 
 .img_class {
     width: 22px;
@@ -486,15 +497,15 @@ li {
     width: 150px;
     height: 150px;
     background: red;
-    -webkit-mask: url('https://imgservices-1252317822.image.myqcloud.com/image/081320210201435/e9951400.png')  no-repeat;
+    -webkit-mask: url('https://imgservices-1252317822.image.myqcloud.com/image/081320210201435/e9951400.png') no-repeat;
     -webkit-mask-size: auto 150px;
-    transform: scale(2.65);
-    animation: fireworks 2s steps(24) infinite, random 8s steps(1) infinite,random_color 1s infinite;
+    /* transform: scale(2.65); */
+    animation: fireworks 2s steps(24) infinite, random 8s steps(1) infinite, random_color 1s infinite;
     /* animation: fireworks 2s steps(24) infinite; */
     /* display: none; */
 }
 
-.fireworkss{
+.fireworkss {
     position: absolute;
     width: 150px;
     height: 150px;
@@ -543,7 +554,7 @@ li {
     }
 
     50% {
-        transform: translate(80%, 80%) scale(2.2);
+        transform: translate(80%, 80%) scale(1.2);
     }
 
     75% {
@@ -680,7 +691,9 @@ li {
 
 .main_item_btn {
     width: 100%;
-    height: 42px;
+    height: 50px;
+    z-index: 99999;
+    justify-content: space-around;
 }
 
 .main_item_main_bg {
@@ -839,12 +852,12 @@ li {
     height: 70%;
 }
 
-.main_item_left_item{
+.main_item_left_item {
     width: 100%;
     height: 20%;
 }
 
-.page_main_center_svg{
+.page_main_center_svg {
     width: 700px;
     height: 700px;
     position: absolute;
@@ -861,4 +874,112 @@ li {
     position: absolute;
     left: 90%;
     bottom: -10%;
+}
+
+.changeTime_else {
+    width: 460px;
+    height: 50px;
+    position: absolute;
+    right: 40px;
+    font-size: 28px !important;
+    z-index: 99999;
+}
+
+.mark_box {
+    width: 100%;
+    height: 100%;
+    position: absolute;
+    top: 0;
+    left: 0;
+    background-color: #1b1b1bb0;
+    z-index: 9999999999999;
+}
+
+.mark_select_box {
+    width: 215px;
+    height: 400px;
+    background-color: var(--bgc);
+    overflow-y: scroll;
+    position: absolute;
+    right: 5%;
+    bottom: 4%;
+    font-size: 28px;
+    text-align: center;
+}
+
+.mark_select_options{
+    width: 100%;
+    height: 50px;
+    line-height: 50px;
+}
+
+.time_box{
+    width: 50%;
+    height: 100%;
+}
+.time {
+    width: 100%;
+    height: 100%;
+    background: rgba(75, 172, 255, 0.2);
+    font-size: 28px;
+
+}
+
+.changeTime{
+    width: 190px;
+    height: 60px;
+    background-color: var(--bgc);
+    position: absolute;
+    right: 0;
+    top: -10px;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+}
+
+.humanResources_times{
+    width: 50px;
+    height: 50px;
+}
+
+.humanResources_text{
+    font-size: 30px;
+    margin: 0 20px;
+}
+
+
+.humanResources_icon_time{
+    width: 24px;
+    height: 16px;
+}
+.mark_month_box{
+    width: 190px;
+    background-color: var(--bgc);
+    position: absolute;
+    right: 1%;
+    top: 38.5%;
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+    overflow-y: scroll;
+    text-align: center;
+    font-size: 28px;
+    padding: 5px 0;
+    box-sizing: border-box;
+}
+
+.echarts_icon{
+    width: 70px;
+    height: 70px;
+    position: fixed;
+    left: 31%;
+    top: 56%;
+    z-index: 9999;
+}
+
+::-webkit-scrollbar {
+
+    display: none;
+
 }