.home_page { width: 100%; height: 100%; /* overflow-x: hidden; */ background-color: #f3f3f3; font-family: 'PingFangSC-Semibold', 'Microsoft YaHei', Tahoma, Arial, 'Hiragino Sans GB'; } .header { position: relative; height: 340px; margin-bottom: 16px; background-color: #ffffff; } .title { float: left; margin-top: 16px; margin-left: 16px; font-family: PingFangSC-Semibold; font-size: 20px; color: rgba(0, 0, 0, 0.85); letter-spacing: 0; line-height: 28px; font-weight: 600; } .header_title { position: relative; height: 44px; width: 100%; } .header_workshop { width: 100%; min-width: 184px; font-family: PingFangSC-Semibold; font-size: 20px; color: rgba(0, 0, 0, 0.85); letter-spacing: 0; line-height: 28px; font-weight: 600; } .equip_state_mark { float: right; margin-top: 16px; margin-right: 16px; } .equip_state_mark li { display: inline-block; opacity: 0.85; font-family: PingFangSC-Regular; font-size: 14px; list-style: none; color: #000000; letter-spacing: 0; font-weight: 400; } .equip_state_mark li:first-child { margin-right: 24px; } .equip_state_mark li:nth-child(2) { margin-right: 24px; } .equip_state_mark li span { display: inline-block; width: 16px; height: 10px; margin-right: 4px; } .equip_state_card { position: relative; height: 256px; margin-top: 16px; margin-left: 16px; margin-right: 16px; overflow: auto; } .equip_state_card::-webkit-scrollbar { width: 10px; background-color: #fff; } .equip_state_card:hover ::-webkit-scrollbar-track-piece { /*鼠标移动上去再显示滚动条*/ background-color: #fff; /* 滚动条的背景颜色 */ border-radius: 6px; /* 滚动条的圆角宽度 */ } .equip_state_card:hover::-webkit-scrollbar-thumb:hover { background-color: #cccccc; } .equip_state_card:hover::-webkit-scrollbar-thumb:vertical { background-color: #cccccc; border-radius: 6px; outline: 2px solid #fff; outline-offset: -2px; border: 2px solid #fff; } .content { position: relative; margin-bottom: 16px; height: 304px; width: 100%; } .content_row { display: flex; height: 100%; } .content_row > div { position: relative; min-width: 39%; margin-right: 16px; background-color: #ffffff; } .content_row .content_last_col { min-width: calc(22% - 32px); margin-right: 0; } /* 设置高度修改时间稼动率水波图的大小 height*/ .liquid_parent { position: absolute; height: 45%; width: 100%; top: 0; bottom: 0; left: 0; right: 0; margin: auto; } .liquid_parent > div { float: left; width: 33.33%; height: 100%; text-align: center; } .progress_parent { position: absolute; height: 52%; width: 88%; top: 0; bottom: 0; left: 0; right: 0; margin: auto; } /* 调高度设置性能稼动率的大小 height*/ .progress_child { width: 100%; height: 70px; margin-top: -20px; } .progress_child .progress_child_title { float: left; width: 10%; height: 100%; font-family: PingFangSC-Medium; font-size: 16px; color: #000000; text-align: left; line-height: 70px; font-weight: 500; } .progress_child .progress_child_bar { float: left; width: 75%; height: 100%; } .progress_child .progress_child_val { float: left; width: 15%; height: 100%; font-family: PingFangSC-Medium; font-size: 16px; color: #000000; text-align: right; line-height: 80px; font-weight: 500; } .ringgraph_parent { position: absolute; width: 60%; height: 50%; top: 20px; bottom: 0; left: 10px; right: 0; margin: auto; } .ringgraph_child { width: 100%; height: 100%; } .footer { position: relative; height: 444px; } .footer_row { display: flex; height: 100%; } .footer_row > div { position: relative; min-width: calc((100% - 16px) / 2); margin-right: 16px; background-color: #ffffff; } .footer_content { position: absolute; width: 95%; height: 83%; top: 0; right: 0; bottom: 0; left: 0; margin: 60px auto 0; } .footer_statistics { display: flex; justify-content: space-between; width: 100%; margin-bottom: 24px; } .footer_statistics > li { flex: 1; height: 52px; margin-right: 2%; text-align: center; line-height: 52px; cursor: pointer; background-color: #fafafa; } .footer_statistics .footer_statistics_last { margin-right: 0; } /* .footer_statistics_content { height: 24px; width: 57%; margin-top: 14px; margin-left: 25%; }*/ .footer_statistics_title { display: inline-block; font-family: PingFangSC-Semibold; font-size: 16px; padding-right: 16px; color: rgba(0, 0, 0, 0.85); font-weight: 600; } .footer_statistics_val { display: inline-block; vertical-align: bottom; font-family: PingFangSC-Semibold; font-size: 20px; font-weight: 600; } .footer_tips { width: 100%; height: calc(100% - 76px); overflow-x: auto; } .footer_tips::-webkit-scrollbar { width: 10px; background-color: #fff; } .footer_tips:hover ::-webkit-scrollbar-track-piece { /*鼠标移动上去再显示滚动条*/ background-color: #fff; /* 滚动条的背景颜色 */ border-radius: 6px; /* 滚动条的圆角宽度 */ } .footer_tips:hover::-webkit-scrollbar-thumb:hover { background-color: #cccccc; } .footer_tips:hover::-webkit-scrollbar-thumb:vertical { background-color: #cccccc; border-radius: 6px; outline: 2px solid #fff; outline-offset: -2px; border: 2px solid #fff; } .footer_tips_title { font-family: PingFangSC-Medium; font-size: 14px; line-height: 22px; font-weight: 500; } .footer_tips_content { min-width: 100px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; opacity: 0.65; font-family: PingFangSC-Regular; font-size: 14px; color: #000000; letter-spacing: 0; line-height: 22px; font-weight: 400; } .footer_tips_time { height: 22px; opacity: 0.45; font-family: PingFangSC-Regular; font-size: 14px; color: #000000; letter-spacing: 0; line-height: 22px; font-weight: 400; } /* 设置合格率折现图的大小 padding */ .footer_qualified_rate { width: 100%; height: 100%; padding: 80px 32px 16px; }