twin-web/css/bpb.css

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{

}