.topbox{ height: 485px; width: 100%; padding-bottom: 20px; .mainbox{ height: 100%; position: relative; display: flex; .mainleft{ width:800px; height: 100%; float: left; .inputbox{ width: 343px; height: 58px; margin:2px 6px; float: left; text-align: end; } .organizationbox{ width:538px; height: 200px; background: white; position: absolute; top: 164px; left:166px; z-index: 100; border: 1px solid grey; overflow: auto; li{ list-style: none; } mat-tree-node{ cursor: pointer; } mat-tree-node:hover{ background: rgba(225, 225, 225, 0.8); } } .addbtn{ width: 695px; margin:20px 0; padding-bottom: 20px; } .uploadimg{ width: 400px; height: 200px; float: left; margin-top:12px; position: relative; margin-left: 80px; span{ float: left; } .uploadingimg{ width: 299px; height: 170px; cursor: pointer; position: absolute; top: 0px; left: 79px; border: 1px dashed gray; border-radius:3px; } } .image{ input{ width: 190px; margin-top: 160px; cursor: pointer; } } } .mainright{ float: left; flex: 1; height: 430px; margin-right: 100px; position: relative; .searchinput{ display: flex; position: absolute; left: 0; top: 0; } .gistopbox{ position: absolute; box-shadow: 0px 3px 6px rgba(0, 0, 0, 0.16); border-radius: 4px; left: 5%; top: 10px; width: 90%; height:46px; background: #FFFFFF; display: flex; justify-content: space-around; align-items: center; cursor: default;; .positionItem{ width: 30%; height: 35px; display: flex; align-items: center; .itemNum{ background: #F2F2F2; box-sizing: border-box; padding-left: 10px; width: 80%; height: 32px; line-height: 32px; margin-left: 5px; border-radius: 4px; } } .setPosition{ cursor: pointer; width: 15%; height: 32px; background: #2196F3; color: #fff; border-radius: 4px; display: flex; align-items: center; justify-content: center; } .inputBox{ width: 63%; display: flex; align-items: center; .positionInput{ border: 0; border-radius: 6px; width: 90%; height: 34px; background: #F2F2F2; margin-left: 8px; box-sizing: border-box; padding-left: 10px; } } } .hidden{ opacity: 0; z-index: -1; } .show{ opacity: 1; z-index: 1; } } } } .bottombox{ // height:400px; width: 100%; // background-color: skyblue; .bottomtitle{ height: 60px; // background-color: orange; line-height: 60px; border-top: 1px solid black; border-bottom: 1px solid black; } .houseinfobox{ // height:340px; overflow: auto; .addhouseinfo{ float: left; } .infobtnbox{ margin-left: 800px; position: absolute; top: 30px; right: 75px; button{ width: 80px; height: 40px; margin: 0 12px; margin-top: 15px; } } .infotitle{ font-size: 28px; font-weight: 900; margin-left: 180px; } .houseinfoinput{ width: 393px; text-align: end; margin-left:240px; } } } .btn{ width: 100%; text-align: center; button{ margin: 0 8px; } } .mat-spinner{ margin-top: 58px; margin-left: 203px; } .mat-table{ width: 99%; } table{ width: 1000px; thead{ tr{ th{ width: 60px; display: block; float: left; } } } tbody{ tr{ td{ width: 60px; display: block; float: left; text-align: center; } } } } .deviceinfo{ // border-bottom: 1px solid black;; padding-bottom: 60px; } .tankdetailinfo{ // border-bottom: 1px solid black;; padding-bottom: 35px; table{ th{ text-align: center; } } } .tankinfo{ display: block; width: 100%; // height: 45px; text-align: center; } // .adddeviceinfo{ // // position: absolute; // // left: 0px; // } .submit1{ margin-left: -66px !important; } textarea { vertical-align: middle; border-radius: 5px; padding: 5px; width: 600px; height: 110px; resize: none; } //预览图片旋转角度 .img1{ transform:rotate(90deg) scale(0.55); height: 100%; } .img2{ transform:rotate(180deg); // height: 100%; } .img3{ transform:rotate(270deg) scale(0.55); // height: 100%; } .img4{ transform:rotate(90deg) scale(1.3); // height: 100%; } .img5{ transform:rotate(180deg); // height: 100%; } .img6{ transform:rotate(270deg) scale(1.3); // height: 100%; } .imgbox{ text-align: center; height: 750px; img{ max-width: 1500px; max-height: 740px; } } .previewImgBottom{ text-align: center; } .alert-danger { margin-top: -16px; text-align: left; padding-left: 77px; font-size: 12px; color: red; }