html, body { width: 100% !important; /* width: 4874px !important; */ /* min-height: 2743px; */ height: 100%; font-size: 20px; color: #fff; font-family: 'Microsoft YaHei'; /* background-image: url("../images/indexBg.png"); */ /* background-image: url("../images/newImage/4ca24a27-c946-4f59-90a5-af00530ddb59.png"); */ background-image: url("../images/humanResources/bg.png"); background-repeat: no-repeat; background-size: 100% 100%; overflow-y: hidden; } :root { /* --bg: #dcf0fc0c; */ --bgc: #63b6ff11; } /* 强制去掉滚动条 */ /* html { overflow-x: hidden !important; } */ * { -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; } img *, *, *:before, *:after { padding: 0; margin: 0; box-sizing: border-box; } a { text-decoration: none; cursor: pointer; } [v-cloak] { display: none; } .app_box { width: 100%; height: 100%; } .app_box { width: 100%; height: 100%; padding: 40px 30px 20px; box-sizing: border-box; display: flex; flex-direction: column; justify-content: space-between; align-items: center; } .page_title { width: 100%; height: 6%; font-size: 90px; font-family: Source Han Sans CN; font-weight: bold; text-align: center; background: linear-gradient(-3deg, #99eeff 0%, #99eeff 30%, #ffffff 91%); -webkit-background-clip: text; -webkit-text-fill-color: transparent; } .page_main { width: 100%; height: calc(79% - 100px); margin-top: 1%; display: flex; justify-content: space-between; align-items: center; position: relative; } .page_btm { width: 100%; height: 15%; background-color: var(--bgc); position: relative; } .flex_column { display: flex; flex-direction: column; justify-content: space-around; align-items: center; } .flex_sp { display: flex; justify-content: space-between; align-items: center; } .flex { display: flex; justify-content: center; align-items: center; } .page_main_left, .page_main_right { width: 34%; height: 100%; position: absolute; } .page_main_left { left: 0; } .page_main_right { right: 0; } img { width: 100%; height: 100%; } .page_main_center { width: calc(41% - 30px); height: 100%; position: absolute; left: 50%; transform: translateX(-50%); z-index: 9999; } .page_main_center .page_main_center_image { width: 90%; z-index: 0; height: 84%; transform: scale(1.1) translate(5%, 20%); } .center_top { width: 100%; height: 210px; padding: 0 15%; box-sizing: border-box; /* background-color: #ffffff; */ position: absolute; top: 4.5%; } .center_main { width: 100%; height: 55%; position: absolute; top: 13.5%; } .center_main_item { width: 350px; height: 350px; position: absolute; background: url("../images/humanResources/icon2.png"); background-repeat: no-repeat; background-size: cover; justify-content: center; animation: remove 2s steps(60) infinite; } .center_main_item_icon { width: 110px; height: 110px; margin-bottom: 10px; } .center_main_item span { font-size: 30px; font-weight: 500; text-align: center; } .left_top { width: 100%; height: calc(70% - 15px); background-color: var(--bgc); } .left_btm { width: 100%; height: calc(30% - 15px); background-color: var(--bgc); } .title { width: 70%; height: 75px; background: url("../images/humanResources/title.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; } .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); padding: 40px 40px 10px; box-sizing: border-box; } .main_item { width: calc(50% - 10px); height: 100%; background-color: #69c1ff09; overflow: hidden; /* padding-top: 20px; box-sizing: border-box; */ } .right_top { width: 100%; height: calc(25% - 15px); background-color: var(--bgc); } .right_main { width: 100%; height: calc(35% - 15px); background-color: var(--bgc); } .right_btm { width: 100%; height: calc(40% - 15px); background-color: var(--bgc); } .main_item_top { width: 100%; height: calc(37% - 15px); background-color: var(--bgc); overflow: hidden; } .main_item_btm { width: 100%; height: calc(63% - 15px); background-color: var(--bgc); } .echarts_dom { width: 100%; height: 100%; } .item_content_6, .item_content_7, .item_content_8, .item_content_9, .item_content_10, .item_content_11, .item_content_12, .item_content_13, .item_content_14, .item_content_15, .item_content_16, .item_content_17, .item_content_99, .item_content_6_false { width: 100%; height: calc(60% - 10px); } .item_content_4 { width: 100%; height: calc(40% - 10px); } .header-item { font-size: 20px; color: #69C0FF; } .row-item { font-size: 23px !important; } .content_4_top { width: 100%; height: 100px; align-items: flex-end; } .content_4_title { width: 100%; height: 50px; justify-content: space-around; } .content_4_time { width: 45%; height: 40px; } .btn_on { width: 250px; height: 100%; background: url("../images/humanResources/btn_on.png") no-repeat; background-size: 100% 100%; margin: 0 20px; font-size: 25px; font-family: Source Han Sans CN; font-weight: 500; color: #ECE278; text-align: center; line-height: 50px; } .btn_off { width: 250px; height: 100%; background: url("../images/humanResources/btn_off.png") no-repeat; background-size: 100% 100%; margin: 0 20px; font-size: 25px; font-family: Source Han Sans CN; font-weight: 500; color: #47C0FF; text-align: center; line-height: 50px; } .img_class { width: 22px; /* height: 16px; */ margin-left: 10px; } img { width: 100%; height: 100%; } .content_4_btm { width: 100%; height: calc(100% - 90px); margin-top: 5px; } .yellow { color: yellow; } .red { color: red; } .green { color: green; } /* .item_content_6 .rows .row-item:nth-child(2){ color: #E1AF27; background-color: #302e2d50 !important; } */ .item_content_99 .rows .row-item:nth-child(1) { color: #E1AF27; background-color: #302e2d50 !important; } .item_content_6 .rows .row-item:nth-child(2) { color: #E1AF27; background-color: #302e2d50 !important; } .item_content_6_else .rows .row-item:nth-child(2) { color: #E1AF27; background-color: #302e2d50 !important; } .item_content_5 .rows .row-item:nth-child(2) { color: #E1AF27; background-color: #302e2d50 !important; } .item_content_7 .rows .row-item:nth-child(3) { color: #E1AF27; background-color: #302e2d50 !important; } .item_content_8 .rows .row-item:nth-child(4) { color: #E1AF27; background-color: #302e2d50 !important; } .item_content_9 .rows .row-item:nth-child(5) { color: #E1AF27; background-color: #302e2d50 !important; } .item_content_10 .rows .row-item:nth-child(6) { color: #E1AF27; background-color: #302e2d50 !important; } .item_content_11 .rows .row-item:nth-child(7) { color: #E1AF27; background-color: #302e2d50 !important; } .item_content_12 .rows .row-item:nth-child(8) { color: #E1AF27; background-color: #302e2d50 !important; } .item_content_13 .rows .row-item:nth-child(9) { color: #E1AF27; background-color: #302e2d50 !important; } .item_content_14 .rows .row-item:nth-child(10) { color: #E1AF27; background-color: #302e2d50 !important; } @keyframes remove { 0% { transform: translateY(0); } 25% { transform: translateY(-5%); } 50% { transform: translateY(0); } 75% { transform: translateY(5%); } 100% { transform: translateY(0); } } .item { width: 100%; padding: 0px 30px; box-sizing: border-box; } li { width: 100%; display: flex; flex-direction: column; justify-content: flex-start; align-items: flex-start; font-size: 27px; } .list_img { width: 40px; height: 40px; border-radius: 50%; margin-top: 15px; } .main_item_title { width: 270px; height: 50px; background: url("../images/humanResources/btn_on.png") no-repeat; background-size: 100% 100%; font-size: 24px; font-family: Source Han Sans CN; font-weight: 500; color: #FFFFFF; text-align: center; line-height: 50px; margin-top: -20px; } .main_item_main { width: 100%; /* height: calc(100% - 70px); */ height: 100%; } .center_top_item { width: 45%; height: 210px; } .center_top_image { width: 350px; height: 210px; margin-right: 30px; } .center_top_image img { width: 100% !important; height: 100% !important; } .center_top_info { justify-content: flex-start; align-items: flex-start; } .num { font-size: 72px; font-family: Helvetica Neue Extra Black Cond; font-weight: bolder; color: #5BCBFF; } .num span { font-size: 30px; font-family: Source Han Sans CN; font-weight: bold; } .name { font-size: 36px; font-family: Source Han Sans CN; font-weight: bolder; color: #FFFFFF; } .fireworks { position: absolute; width: 150px; height: 150px; background: red; -webkit-mask: url('../images/humanResources/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; /* animation: fireworks 2s steps(24) infinite; */ /* display: none; */ } .fireworkss { position: absolute; width: 150px; height: 150px; top: 10%; right: 0%; background: red; } .fireworks_line { position: absolute; width: 10px; height: 60px; bottom: 10%; left: calc(50% - 2.5px); animation: fireworks_line 2s steps(120) infinite; display: flex; flex-direction: column; justify-content: center; align-items: center; } .line { width: 1px; height: 50px; background-color: #faf89a; } @keyframes fireworks { to { -webkit-mask-position: 100%; /* transform: scale(1.65) */ } } @keyframes fireworks_line { to { bottom: 68%; } } @keyframes random { 25% { transform: translate(200%, 50%) scale(1.4); } 50% { transform: translate(80%, 80%) scale(1.7); } 75% { transform: translate(-20%, -60%) scale(1.95); } } @keyframes random_color { 0% { background-color: #ffefad; } 25% { background-color: #ffadad; } 50% { background-color: #aeadff; } 75% { background-color: #adffd9; } } .warp { width: 100%; /* height: 90%; */ /* height: 950px; */ /* height: 200px; */ overflow: hidden; } .warp>div{ height: 90%; } .item_title { width: 100%; text-align: center; font-size: 34px; font-family: Source Han Sans CN; font-weight: bolder; color: #7CC8FF; margin: 10px 0; } .item_con { width: 100%; margin: 10px 0; font-size: 24px; line-height: 50px; display: flex; flex-direction: column; justify-content: flex-start; align-items: flex-start; /* letter-spacing: 9px; */ } .item_con .note_title { font-size: 26px; font-family: Source Han Sans CN; font-weight: bolder; margin-top: 10px; color: #7CC8FF; } .item_con .note_info { margin-left: 20px; line-height: 40px; text-indent: 60px; margin: 5px 0; /* white-space: pre-wrap; */ } .item_con_main { line-height: 40px; white-space: pre-wrap; font-size: 26px; font-family: Source Han Sans CN; /* font-weight: bolder; */ margin-top: 10px; color: #fff !important; } .main_item_2 { width: 20%; height: 100%; } .main_item_8 { width: 80%; height: 100%; } .main_2_item { width: 100%; height: 20%; display: flex; justify-content: center; align-items: center; } .main_item_8_box { width: 100%; height: 50%; justify-content: flex-start; } .box_icon { width: 10px; height: calc(100% - 10px); background-color: #0093E9; } .main_item_8 .el-progress-bar__inner { background-image: linear-gradient(270deg, #0093E9 0%, #80D0C7 100%) !important; } .el-progress-bar__outer { background-color: #1C4B8E !important; } .main_item_8 .el-progress-bar { width: 95% !important; } .main_item_box { width: 100%; height: calc(20% - 10px); } .box_title { font-size: 30px; text-indent: 10px; margin-bottom: 2px; } .main_8_item { width: 100%; height: 20%; } .main_item_8 .el-progress__text { font-size: 35px !important; color: #fff !important; } .main_item_2 .el-progress__text { font-size: 25px !important; color: #fff !important; } .main_item_btn { width: 100%; height: 50px; z-index: 99999; justify-content: space-around; } .main_item_main_bg { width: 100%; height: calc(100% - 90px); position: relative; } .main_item_main_bg img { width: 75%; height: 180%; position: absolute; top: -45%; left: 50%; transform: translateX(-50%); } .main_item_text { font-size: 40px; font-weight: bolder; margin-top: 10px; } .left { background: rgba(102, 130, 245, 0.4); border: 2px solid #839BFF; position: absolute; top: 20%; left: 25%; animation: leftRemove 2s steps(60) infinite; } @keyframes leftRemove { 0% { transform: translateY(0); } 25% { transform: translateY(-5%); } 50% { transform: translateY(0); } 75% { transform: translateY(5%); } 100% { transform: translateY(0); } } @keyframes rightRemove { 0% { transform: translateY(0); } 25% { transform: translateY(10%); } 50% { transform: translateY(0); } 75% { transform: translateY(-10%); } 100% { transform: translateY(0); } } .right { background: rgba(0, 202, 197, 0.23); border: 2px solid #40A9FF; position: absolute; top: 20%; right: 25%; animation: rightRemove 2s steps(60) infinite; } .bg_cyc { width: 120px; height: 120px; border-radius: 50%; z-index: 9999; justify-content: center; font-size: 20px; } .bg_cyc_text { font-size: 30px; font-weight: bolder; } .bg_cyc_text span { font-size: 20px; font-weight: normal; } .btm_item { width: calc(50% - 10px); height: 100%; } .main_item_left { width: 20%; height: 100%; } .main_item_right { width: calc(100% - 10px); height: 100%; } .right_item { width: 100%; height: 20%; display: flex; /* flex-direction: column; */ justify-content: space-around; align-items: flex-start; } .right_item_tit { width: 25%; height: 100%; display: flex; justify-content: flex-start; align-items: center; } .icon_tit { width: 5px; height: 30%; background: #40A9FF; margin: 5px 10px 0; } .tit_text { font-size: 28px; font-family: Source Han Sans CN; font-weight: bold; color: #FFFFFF; } .echarts_dom_else { width: 75%; height: 100%; } .main_item_left_item { width: 100%; height: 20%; } .page_main_center_svg { width: 700px; height: 700px; position: absolute; bottom: -10%; z-index: 0; /* transform-origin: center bottom; transform-style: preserve-3d; */ } .svg_box { transform-origin: center top; transform: rotateX(80deg) scale(2.6); text-align: center; 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: 90px; height: 90px; position: fixed; left: 32.5%; top: 62%; z-index: 999999; } .echarts_icon_else { width: 90px; height: 90px; position: fixed; left: 32.5%; top: 62%; z-index: 999999; filter: hue-rotate(204deg); } .svg_box { width: 40%; height: 500px; position: absolute; left: 50%; bottom: 15%; transform: translateX(-15%); transform-origin: center bottom; transform-style: preserve-3d; } .svg_item { width: 800px; height: 800px; transform-origin: center top; transform: rotateX(81deg) scale(2.4); position: absolute; bottom: -100%; } .svg_item_s { width: 800px; height: 800px; transform-origin: center top; transform: rotateX(83deg) scale(1.65) translateX(-1.2%); position: absolute; bottom: -90%; } .svg_item_shu { width: 800px; height: 800px; transform-origin: center top; transform: rotateX(79deg) scale(2.1) translateX(-1%); position: absolute; bottom: -85%; } .svg { width: 100%; height: 100%; } /* .page_type{ width: 100%; height: 100%; } */ .w100 .header .header-item { font-size: 30px; } .w100 .row-item { font-size: 35px !important; } ::-webkit-scrollbar { display: none; }