html, body { width: 100% !important; /* width: 6145px !important; */ min-height: 2572px; 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/newImage/62dbe366-d64f-434e-ad1c-c57312a3d11d.png"); */ background-repeat: no-repeat; background-size: 100% 100%; overflow-y: hidden; } :root { --bg: #dcf0fc0c; } /* 强制去掉滚动条 */ /* 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%; } .box_item_title { width: 100%; height: 145px; background: url("../images/indexittle@2x.png") no-repeat; background-size: 100% 100%; display: flex; justify-content: center; align-items: center; } .box_item_title span { font-size: 72px; font-weight: bold; margin-bottom: 35px; background: linear-gradient(-3deg, #99eeff 0%, #99eeff 30%, #ffffff 91%); -webkit-background-clip: text; -webkit-text-fill-color: transparent; } .box_item_main { width: 100%; height: calc(100% - 145px); display: flex; justify-content: space-between; align-items: center; padding: 30px 50px; box-sizing: border-box; } .box_left, .box_right { width: calc(40% - 30px); height: 100%; display: flex; flex-direction: column; justify-content: space-between; align-items: center; } .box_main { width: 20%; height: 100%; display: flex; flex-direction: column; justify-content: space-between; align-items: center; } .left_item { width: 100%; height: calc(25% - 15px); /* background: url("../images/lb-back.png") no-repeat; */ background-size: 100% 100%; /* padding: 10px 40px 30px; */ box-sizing: border-box; } .main_item_one { width: 100%; height: calc(65% - 10px); /* overflow: hidden; */ position: relative; } .main_item_one img { width: 140%; height: 100%; position: absolute; bottom: -10%; left: -19.5%; z-index: 0; } .svg_box { width: 100%; height: 100%; position: absolute; left: 0; top: 0; transform-origin: center bottom; transform-style: preserve-3d; } .svg_box_item { width: 700px; height: 700px; transform-origin: center top; transform: rotateX(65deg) scale(1.6); text-align: center; position: absolute; bottom: -355px; left: 21%; } .svg_box_item_else { width: 700px; height: 700px; transform-origin: center top; transform: rotateX(73deg) scale(1.7); text-align: center; position: absolute; bottom: -479px; left: 19%; } .main_item { width: 100%; height: calc(30% - 10px); /* background: url("../images/lb-back.png") no-repeat; */ background-size: 100% 100%; /* padding: 30px; */ box-sizing: border-box; z-index: 999; } .title { width: 300px; height: 65px; font-size: 35px; font-weight: bolder; text-align: center; /* line-height: 57px; */ box-sizing: border-box; border-radius: 10px; margin-bottom: 10px; } .title_else { width: 100%; height: 85px; font-size: 50px; font-weight: bolder; line-height: 75px; text-indent: 50px; box-sizing: border-box; color: #3699ff; border-radius: 10px; margin-bottom: 10px; position: relative; /* background: url("../images/newImage/tit_bg.png") no-repeat; */ background: url("../images/newImage/c905a4b1-a8ed-4542-ba65-7825534708ff.png") no-repeat; background-size: 100% 100%; } .title_else_s { width: 100%; height: 85px; font-size: 50px; font-weight: bolder; line-height: 75px; text-indent: 50px; box-sizing: border-box; color: #3699ff; border-radius: 10px; margin-bottom: 10px; position: relative; /* background: url("../images/newImage/tit_bg.png") no-repeat; */ background: url("../images/newImage/5c6d9f2b-2325-4824-9c77-57c99bef749e.png") no-repeat; background-size: 100% 100%; } .title_else span:nth-child(1) { background: linear-gradient(-3deg, #99eeff 0%, #99eeff 30%, #ffffff 91%); -webkit-background-clip: text; -webkit-text-fill-color: transparent; } .title_else_s span:nth-child(1) { background: linear-gradient(-3deg, #99eeff 0%, #99eeff 30%, #ffffff 91%); -webkit-background-clip: text; -webkit-text-fill-color: transparent; } .icon_tit { width: 80px; height: 80px; z-index: 9999; position: absolute; top: 1px; right: 100px; } .left_main { width: 100%; height: calc(100% - 85px); } .left_main_else { width: 100%; height: calc(100% - 85px); display: flex; flex-direction: column; justify-content: space-between; } .left_main_top { width: 100%; height: 75%; display: flex; justify-content: space-between; align-items: center; } .left_main_top_left { width: calc(60% - 10px); height: calc(100% - 30px); background-color: var(--bg); padding: 10px; box-sizing: border-box; } .left_main_top_right { width: calc(40% - 10px); height: calc(100% - 30px); background-color: var(--bg); padding: 10px; box-sizing: border-box; } .left_main_btm { width: 100%; height: 25%; } .left_user_top { width: 100%; height: calc(10% - 10px); display: flex; justify-content: space-between; align-items: center; } .left_user_number { width: 25%; height: 100%; } .text_box { width: 100%; height: 100%; /* background: url("../images/man.png") no-repeat; */ display: flex; flex-direction: column; justify-content: center; align-items: flex-start; position: relative; padding-left: 300px; box-sizing: border-box; } .text_box img { width: 20%; height: 65%; position: absolute; top: 50%; left: 40%; transform: translate(-50%, -50%); } .text_num { font-size: 40px; font-weight: bolder; font-style: italic; margin-top: 10px; color: #69C0FF; } .text_num span { font-size: 24px !important; } .text_title { font-size: 30px; } .left_user_main { width: 100%; height: calc(45% - 10px); display: flex; justify-content: space-between; } .left_user_main_item { width: calc(33% - 5px); height: 100%; padding: 20px; box-sizing: border-box; /* background: url("../images/rt-back.png") no-repeat; */ /* background-size: 100% 100%; */ background-color: var(--bg); display: flex; flex-direction: column; justify-content: space-between; align-items: center; position: relative; } .mark_none { width: 100%; height: 100%; position: absolute; top: 0; left: 0; z-index: 9999999999999; pointer-events: none; } .left_salary_box, .left_salary_box_else { width: 100%; height: calc(40% - 10px); } .left_salary_box { /* background: url("../images/lb-back.png") no-repeat; background-size: 100% 100%; */ background-color: var(--bg); padding: 10px; box-sizing: border-box; } .left_salary_box_else { display: flex; justify-content: space-between; } .left_salary_item { width: calc(50% - 10px); height: 100%; /* background: url("../images/rt-back.png") no-repeat; background-size: 100% 100%; */ background-color: var(--bg); padding: 10px 30px; box-sizing: border-box; position: relative; } .title_box { position: absolute; right: 50px; top: 10px; font-size: 30px; z-index: 99; } .right_item { width: 100%; height: calc(25% - 10px); /* background: url("../images/lb-back.png") no-repeat; */ background-size: 100% 100%; /* background-color: var(--bg); */ padding: 10px 45px 20px; box-sizing: border-box; /* display: flex; justify-content: space-between; align-items: center; */ } .right_item_else { width: 100%; height: calc(100%); /* display: flex; flex-direction: column; justify-content: space-between; */ } .right_user_box { width: 100%; height: calc(25% - 10px); /* background: url("../images/lb-back.png") no-repeat; */ background-size: 100% 100%; /* padding: 10px 45px 20px; */ box-sizing: border-box; } .right_item_item_top { width: 100%; height: 100px; background-color: rgb(139, 45, 226); } .right_item_item_btm { width: 100%; height: calc(100% - 110px); display: flex; justify-content: space-between; } .right_item_item { width: calc(50% - 10px); height: 100%; background-color: var(--bg); /* background: url("../images/rt-back.png") no-repeat; background-size: 100% 100%; padding: 10px 30px; box-sizing: border-box; */ } .right_item_main { width: 100%; height: calc(100% - 70px); } .right_item_item_else { width: calc(50% - 10px); height: 100%; background-color: var(--bg); padding: 5px 30px 10px; box-sizing: border-box; } .scroll_board_bg { width: 100%; height: 80%; /* background: url("../images/rt-back.png") no-repeat; background-size: 100% 100%; */ /* padding: 30px; box-sizing: border-box; */ } .right_echarts { width: calc(50% - 10px); height: 100%; background: url("../images/rt-back.png") no-repeat; background-size: 100% 100%; padding: 30px; box-sizing: border-box; } .right_echarts_else { width: calc(50% - 10px); height: 100%; background: url("../images/rt-back.png") no-repeat; background-size: 100% 100%; padding: 30px; box-sizing: border-box; } .right_echarts_else_bg { width: calc(50% - 10px); height: 100%; background-color: var(--bg); padding: 30px; box-sizing: border-box; } .three_box { width: 100%; height: calc(100% - 65px); display: flex; justify-content: space-between; align-items: center; } .left_main_btm .dv-scroll-board div { font-size: 32px !important; } .right_btm_item { width: 100%; height: calc(100% - 65px); } .right_btm_item_else { width: 100%; height: 100%; display: flex; justify-content: center; align-items: center; position: relative; } .po_title { position: absolute; right: 4%; top: 4%; font-size: 26px; } .right_item_btm_box { width: calc(40% - 10px); height: 100%; /* background: url("../images/rt-back.png") no-repeat; background-size: 100% 100%; */ background-color: var(--bg); padding: 20px; box-sizing: border-box; } .image_box_else { width: 280px; height: 280px; position: relative; } .image_box_else span { font-size: 60px; font-weight: bolder; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); z-index: 999; } .image_box_else img { animation: fadenum 8s infinite linear; } .image_box { width: calc(60% - 10px); height: 70%; display: flex; flex-direction: column; justify-content: space-around; align-items: center; } .image_box div:nth-child(1) { margin-top: 30px; } .box_item { width: 100%; height: 100px; display: flex; align-items: center; justify-content: flex-start; margin-left: 100px; font-size: 40px; text-indent: 50px; } .box_item img { width: 100px; height: 100px; } .box_item div span { font-size: 50px; font-weight: bolder; color: #69c0ff; font-style: italic; font-weight: bold; margin: 0 10px; } .top { width: 100%; height: 140px; font-size: 40px; } .flex { display: flex; } .justify-between { justify-content: space-between; } .items-center { align-items: center; } .top-img { width: 127px; height: 127px; margin-right: 15px; } .top-text { font-size: 60px; color: #69c0ff; font-style: italic; font-weight: bold; display: inline-block; margin: 0 15px; } .right_bg_item { width: calc(33% - 20px); height: 100%; background-image: url("../images/bottom-right.png"); background-repeat: no-repeat; background-size: 100% 100%; display: flex; flex-direction: column; justify-content: center; align-items: center; padding-top: 50px; box-sizing: border-box; } .bg_item_gif { width: 230px; height: 300px; } .bg_item_gif img { width: 100%; height: 100%; } .bg_item_num { font-size: 48px; font-weight: bolder; margin-bottom: -90px; z-index: 9; } .bg_item_title { font-size: 28px; font-weight: 600; } .right_item_item_else_title { width: 100%; height: 25%; display: flex; justify-content: center; align-items: center; position: relative; } .right_item_item_else_title img { width: 40%; height: 100%; } .w_100_right_box { width: 100%; height: 100%; } .title_right { width: 100%; height: 100%; position: absolute; display: flex; justify-content: center; align-items: center; font-size: 30px; } .title_right span { color: rgb(69, 218, 209); } .big_color { display: inline-block; font-size: 40px; font-weight: bolder; margin: 0 0 0 25px; } .echarts { width: 100%; height: 100%; } .echarts_else { width: 100%; height: calc(100% - 65px); } .echarts_else_top { width: 100%; height: calc(25%); display: flex; justify-content: space-around; align-items: center; } .echarts_else_top_item { padding: 5px 20px; box-sizing: border-box; background: rgba(0, 179, 254, 0.25); border: 1px solid #69C0FF; border-radius: 10px; display: flex; justify-content: center; align-items: center; } .echarts_else_top_item_on { padding: 5px 20px; box-sizing: border-box; background: rgba(0, 254, 199, 0.25); border: 1px solid #00ffff; border-radius: 10px; display: flex; justify-content: center; align-items: center; } .item_left_t { width: 65px; height: 65px; } .item_right_t { padding-left: 10px; display: flex; flex-direction: column; justify-content: space-around; align-items: flex-start; } .item_right_t div:nth-child(1) { font-size: 24px; font-family: Source Han Sans CN; font-weight: 400; color: #FFFFFF; } .item_right_t div:nth-child(2) { font-size: 28px; font-family: HelveticaNeueLT; font-weight: bolder; color: #69C0FF; } .item_right_t div:nth-child(2) span { font-size: 20px; font-family: Source Han Sans CN; font-weight: 400; color: #69C0FF; } .echarts_else_btm { width: 100%; height: calc(80% - 20px); } .left_user_title { width: 100%; height: 40px; display: flex; flex-direction: column; justify-content: space-between; align-items: flex-start; } .icon_title .title { width: calc(100% - 40px); height: 100%; text-align: left; text-indent: 20px; } .icon { width: 20px; height: 70%; } img { width: 100%; height: 100%; } .icon_title { width: 100%; height: calc(100%); z-index: 999; display: flex; justify-content: flex-start; align-items: center; } .line { width: 100%; height: 2px; } .echarts_90 { width: 100%; height: 80%; } .flex_column { display: flex; flex-direction: column; justify-content: space-between; align-items: flex-start; } .main_item_echarts { width: 100%; height: calc(100% - 90px); background-color: var(--bg); } .right_item_item_else_top { width: 100%; height: calc(25% - 10px); margin-bottom: 15px; } .right_item_item_else_main { width: 100%; height: calc(75%); /* background-color: var(--bg); */ /* background: url("../images/rt-back.png") no-repeat; background-size: 100% 100%; padding: 30px; box-sizing: border-box; */ } .w_100 { width: 100%; height: calc(100% - 65px); } .w_100_right { width: 100%; height: calc(100% - 85px); display: flex; justify-content: space-between; align-items: center; } .flex_sb { display: flex; justify-content: space-between; } .right_echarts_item { width: 100%; height: calc(100% - 65px); } .right_btm_item_box { width: calc(60% - 10px); height: 100%; /* background: url("../images/rt-back.png") no-repeat; background-size: 100% 100%; */ background-color: var(--bg); padding: 17px; box-sizing: border-box; } .echarts_map { width: 100%; height: 100%; position: absolute; top: 0; left: 0; } .tooltip-cont { margin: -15px; border: 1px solid #3699ff; border-radius: 0px; font-size: 35px; padding: 10px 15px 10px; background-color: #0725558a !important; } .tooltip-cont p { line-height: 1.8; color: #f3f3f3; position: relative; padding-left: 12px; /* color: #5340ff; */ /* color: #277d8a; color: #1F6276; color: #13405c; color: #0a2547; */ } .tooltip-cont p::before { position: absolute; display: inline-block; content: ''; left: 0px; top: 10px; width: 5px; height: 5px; border-radius: 50%; /* background-color: #40a9ff; */ } .tooltip-cont span { color: #FFAD05; font-weight: bolder; } .dv-scroll-board div { font-size: 28px; } .main_item_one_info { width: 100%; height: 150px; display: flex; justify-content: space-between; align-items: center; position: absolute; top: 0; left: 0; z-index: 999999; } .main_info_item { /* width: 370px; */ height: 100%; display: flex; justify-content: center; align-items: center; } .main_info_item_img { width: 180px; height: 100px; background-color: #40a9ff; background: url("../images/newImage/loginUser.png") no-repeat; background-size: cover; margin: 0 15px; } .main_info_item_title { display: flex; flex-direction: column; justify-content: space-around; align-items: flex-start; } .main_info_item_title div:nth-child(1) { font-size: 36px; font-family: Helvetica Neue Extra Black Cond; font-weight: 600; color: #6BC1FF; } .main_info_item_title div:nth-child(2) { font-size: 25px; font-family: Source Han Sans CN; font-weight: 500; color: #FFFFFF; } .mark_box { width: 100% !important; min-height: 2576px; height: 100%; background-color: #1b1b1b6b; position: absolute; top: 0; left: 0; z-index: 999999999999999999; } .mark_box_else { width: 100% !important; min-height: 2576px; height: 100%; background-color: #1b1b1b6b; position: absolute; top: 0; left: 0; z-index: 999999999999999999; float: left; } .ml0 { margin-left: 0%; } .ml100 { margin-left: -100%; } .ml200 { margin-left: -200%; } .mark_centter { width: 2300px; height: 1000px; /* margin: 1500px 1000px 0; */ z-index: 999999999999999999; background: url("../images/markBG.png") no-repeat; background-size: 100% 100%; padding: 20px 40px 30px; box-sizing: border-box; align-items: center !important; position: absolute; top: 20%; right: 10%; } .mark_title { width: 100%; height: 150px; text-align: center; line-height: 150px; font-size: 35px; font-weight: bolder; } .mark_main { width: 100%; height: calc(100% - 70px); } .mark_pdf { /* width: 2176px; */ height: 1500px; background: url("../images/markBG.png") no-repeat; background-size: 100% 100%; padding: 50px; box-sizing: border-box; position: absolute; top: 20%; left: 5%; } .f_box { width: 100%; height: calc(100% - 65px); display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; } .f_item { width: calc(50% - 10px); height: calc(50% - 10px); font-size: 32px; overflow: hidden; } .f_item span:nth-child(1) { color: #4BB2FF; margin-bottom: 10px; font-weight: bolder; display: block; } .f_item span:nth-child(2) { width: 95%; height: 160px; text-indent: 50px; opacity: 0.7; display: -webkit-box; /* 将元素作为弹性伸缩盒子展示 */ -webkit-line-clamp: 4; /* 限制显示的行数 */ -webkit-box-orient: vertical; /* 设置垂直方向 */ overflow: hidden; /* 隐藏超出部分 */ } .right_item_main_header { width: 100%; height: 80px; position: relative; display: flex; justify-content: center; align-items: center; } .right_item_main_header img { width: 50%; height: 100%; } .right_item_main_header .right_text { width: 100%; height: 100%; text-align: center; font-size: 30px; line-height: 70px; position: absolute; top: 0; left: 0; } .right_text span { font-size: 40px; font-weight: bolder; color: rgb(69, 218, 209); } .echarts_6 { width: 100%; height: calc(100% - 65px); } .echarts_top { width: 100%; height: 70%; margin-top: 30px; box-sizing: border-box; display: flex; justify-content: space-around; align-items: center; } .top_image { width: calc(100% / 6); height: 90%; margin-top: 20px; position: relative; } .top_text { width: 150%; font-size: 32px; font-weight: bolder; color: #5AC9FD; position: absolute; top: 25%; left: 36%; transform: translateY(-30%); } .top_text_on { width: 150%; font-size: 32px; font-weight: bolder; color: #EBB829; position: absolute; top: 25%; left: 36%; transform: translateY(-30%); } .top_text span { font-size: 30px; } .top_text_on span { font-size: 30px; } .echarts_top img { width: 100%; height: 100%; transform: translateX(-15%); } .echarts_btm { width: 100%; height: 30%; position: relative; margin-top: -30px; } .btm_text { width: 100%; height: 100%; display: flex; justify-content: space-around; align-items: center; } .btm_text_on { width: 100%; height: 100%; display: flex; justify-content: space-around; align-items: center; } .btm_text_span { font-size: 26px; color: #5AC9FD; letter-spacing: 5px; } .btm_text_span_on { font-size: 26px; letter-spacing: 5px; color: #EBB829; } /* .red { color: red; } */ .echarts_else { position: relative; } .echarts_else .img { width: 420px; height: 420px; z-index: 99999; position: absolute; left: -36px; top: calc(50% - 210px); animation: fadenum 8s infinite linear; } .tit_text { margin-top: 10px; } .tit_icon { width: 200px; height: 65px; display: flex; justify-content: center; align-items: center; margin-top: 10px; } .tit_icon img { width: 33px; height: 21px; } .title_else_sb { width: 100%; height: 65px; text-indent: 30px; font-size: 35px; line-height: 65px; font-weight: bolder; text-align: center; /* line-height: 57px; */ box-sizing: border-box; border-radius: 10px; } .mark_main_item { position: absolute; bottom: 15%; left: 50%; transform: translateX(-50%); width: 2300px; height: 1000px; z-index: 999999999999999999; background: url("../images/markBG.png") no-repeat; background-size: 100% 100%; padding: 20px 40px 30px; box-sizing: border-box; align-items: center !important; } .mark_main_item .main_item_center { width: 100%; height: 100%; } .right_flex_item { width: 100%; height: calc(50% - 10px); } .item-tl-item { width: calc(33% - 10px); height: 50%; position: relative; } .item_main { width: 100%; height: 100%; } .item_main_top { width: calc(140px * 2); height: 80%; margin: -40px auto 0; } .item_title { width: 100%; font-size: 35px; text-align: center; position: absolute; top: 25%; } .item_main_main { width: 100%; height: 70px; background: url("../images/count.png") no-repeat; background-size: 100% 100%; margin: 15px auto 0; display: flex; justify-content: center; align-items: center; } .flex_center { display: flex; justify-content: center; align-items: center; } .item_main_text { display: flex; justify-content: center; align-items: center; font-size: 30px; font-weight: bolder; font-family: HelveticaNeue LT 107 XBlkCn; font-style: italic; } .item_main_text img { width: calc(31px * 2); height: calc(31px * 2); } .icon_box_else{ width: 100px; height: 100px; position: absolute; right: 50px; top: 70px; z-index: 9999; /* filter: drop-shadow(16px 16px 20px red) invert(75%); */ /* filter: hue-rotate(204deg); */ filter: hue-rotate(204deg); } .icon_box { width: 100px; height: 100px; position: absolute; right: 50px; top: 70px; z-index: 9999; /* filter: drop-shadow(16px 16px 20px red) invert(75%); */ } .echarts_mark_view { width: 4000px; height: 1250px; background: url("../images/markBG.png") no-repeat; background-size: 100% 100%; padding: 55px 85px; box-sizing: border-box; position: absolute; top: 30%; left: 50%; transform: translateX(-50%); } .echarts_box { width: 100%; height: calc(100% - 85px); display: flex; justify-content: space-between; align-items: center; } /* .mark_view_else{ width: calc(60% - 10px); height: 100%; background-color: var(--bg); padding: 20px 0 0; box-sizing: border-box; } */ .echarts_main { width: 100%; height: calc(100% - 80px); } .mark_view { width: calc(30% - 10px); height: 100%; background-color: var(--bg); padding: 20px 0 0; box-sizing: border-box; margin-top: 40px; } .am_else { width: 90px; height: 100%; background-color: #3699ff; display: flex; justify-content: center; align-items: center; } .more_change { display: flex; justify-content: center; align-items: center; } .dv-border-box-6 circle { r: 5px !important; fill: #B2CBE2; } .echarts_mark_view .title_else { text-indent: 90px; } rect { height: 10px; } polyline { stroke-width: 5px !important; } @keyframes fadenum { 100% { transform: rotate(360deg); } } .item_content_6 .rows .row-item:nth-child(2) { color: #E1AF27; background-color: #302e2d50 !important; } .item_content .rows .row-item:nth-child(1) { color: #E1AF27; background-color: #302e2d50 !important; } .text_list { padding: 20px; box-sizing: border-box; font-size: 26px; color: #E1AF27; background-color: #302e2d50; letter-spacing: 9px; line-height: 1.5; } .mark_select{ width: 200px; padding: 10px 20px; box-sizing: border-box; background-color: #302e2d50; } .select_option{ width: 100%; height: 50px; line-height: 50px; text-align: center; font-size: 35px; margin: 10px 0; }