body{ width: 1366px; height: 764px; } input{ background: rgba(41, 85, 137, 0.70) !important; border: 1px solid rgba(102, 174, 243, 1); color: rgba(231, 248, 255, 1); font-size: 16px; height: 28px; line-height: 28px; border-radius: 2px; } @keyframes rotate { from { transform: rotate(0deg); /* 动画开始时图片的角度 */ } to { transform: rotate(360deg); /* 动画结束时图片旋转360度 */ } } .refresh{ animation: rotate 2s linear infinite; } .abs{ position: absolute; left: 0; top:0; z-index: 1000; } .fontcolor{ transform: rotateZ(-3deg) rotateX(31deg) rotateY(-47deg) skew(-21deg); background: -webkit-linear-gradient(#ffffff, #9c9ded); -webkit-background-clip: text; -webkit-text-fill-color: transparent; } .bpb_bg{ background-image: url('../image/bpb/bg.png'); background-size: contain; } .bpb_title{ background-image: url('../image/bpb/title.png'); background-repeat: no-repeat; background-size: contain; height: calc(0.7*99px); } .bpb_content{ position: relative; width: 100%; height: 91%; color: #fff; } .bpb_order_num{ position: absolute; left:35%; top: -5%; z-index: 2; font-weight: bold; font-size: 20px; transform: rotateZ(210deg) rotateX(183deg) rotateY(-203deg) skew(37deg); } .bpb_orderlist,.bpb_order_resultlist{ position: absolute; left:calc(0.7*358px); top: calc(0.7*20px); width: calc(0.7*234px); height: calc(0.7*140px); } .bpb_order_item{ position: absolute; background-image: url('../image/bpb/Exclude.png'); background-size: contain; background-repeat: no-repeat; width: calc(0.7*234px); height: calc(0.7*140px); z-index: 1; left: 0; right: 0; } .bpb_order_item.alarm{ background-image: url('../image/bpb/Exclude1.png') !important; } .bpb_order_resultlist .bpb_order_item .no{ font-size: 12px !important; top: 34px; left: 28px; position: absolute; transform: rotateZ(32deg) rotateX(35deg) rotateY(-3deg) skew(-28deg); } .bpb_order_item .no{ position: absolute; transform: rotateZ(32deg) rotateX(35deg) rotateY(-3deg) skew(-36deg); left: 17px; top: 45px; font-size: 14px; font-weight: 400; } .pbp_order_app,.pbp_storage,.pbp_plc{ position: absolute; left: 5%; top: 20%; height: 150px; width: 130px; } .pbp_order_app .title,.pbp_storage .title,.pbp_plc .title{ position: absolute; left: -45px; top: 30px; font-weight: bold; font-size: 24px; letter-spacing: 5px; } .pbp_order_app img,.pbp_storage img,.pbp_plc img{ width: calc(0.7*130px); height: calc(0.7*112px); position: absolute; left: 0; top: 50px; } .bpb_mt_list{ position: absolute; /*background-image: url('../image/bpb/bg2.png');*/ background-size: contain; background-repeat: no-repeat; z-index: 1; left: 33%; top:23%; width: calc(0.7*700px); height: calc(0.7*423px); } .bpb_mt_list .title{ transform: rotateZ(1deg) rotateX(13deg) rotateY(-291deg) !important; letter-spacing: 28px !important; font-weight: bold; font-size: 32px; text-align: center; width: 100%; top: 0%; position: absolute; left: 160px; } .bpb_mt_list .wlbg{ width: 100%;height: 100%;position: absolute; } .bpb_mt_list .bpb_mt_item{ position: absolute; background-image: url('../image/bpb/wl0.png'); background-size: contain; background-repeat: no-repeat; width: calc(0.7*280px); height: calc(0.7*166px); z-index: 1; left: 272px; top: 11px; } .bpb_mt_list .bpb_mt_item.alarm{ background-image: url('../image/bpb/wl1.png') !important; } .bpb_mt_list table{ width: 187%; transform: rotateZ(0deg) rotateX(13deg) rotateY(-291deg) skew(-67deg) !important; letter-spacing: 5px; position: absolute; top: 28%; left: -83px; } .bpb_mt_list tr{ background: none !important; height: 24px !important; } .bpb_mt_list td{ border-bottom: 0px !important; font-size: 18px; } .bpb_mt_list .bpb_mt_item.alarm table tr:last-child>td:last-child{ color: rgba(255, 99, 65, 1) !important; font-weight: bold; } .bpb_mt_list .link_point{ position: absolute; width: calc(0.7*117px); height: calc(0.7*70px); } .bpb_mt_list .cl{ background-image: url('../image/bpb/device.png'); background-size: contain; position: absolute; width: calc(0.7*0.8*174px); height: calc(0.7*0.8*174px); } .bpb_mt_list .cl b{ transform: rotateZ(0deg) rotateX(31deg) rotateY(-308deg) skew(0deg); letter-spacing: 1px !important; font-weight: bold; text-align: center; position: absolute; left: 29px; top: 0px; font-size: 22px; } #plc_wl_line{ /*transform-origin: left bottom; transform: rotateZ(-27deg) rotateX(24deg) rotateY(-334deg);*/ } .order_result_line{ }