* { scrollbar-width: none; /* Firefox */ } ::-webkit-scrollbar { display: none; /* Chrome Safari */ } .bigbox { width: 100%; height: 100%; transform: translate(0, 0); background: #f2f4f5; .redspan { color: red; } .titlebox { z-index: 100; width: 100%; height: 50px; background-color: white; position: fixed; top: 8px; display: flex; justify-content: center; align-items: center; .titleitembox { display: flex; .item { cursor: pointer; height: 36px; line-height: 36px; background: #e8e9e9; border-radius: 40px; color: #8b8c8c; margin: 0 3px; text-align: center; box-sizing: border-box; padding: 0 10px; font-size: 14px; overflow: hidden; /*超出部分隐藏*/ white-space: nowrap; /*不换行*/ text-overflow: ellipsis; /*超出部分文字以...显示*/ } .item:hover { background: #e8f4fe; color: #2196f3; } .selectedItem { background: #e8f4fe; color: #2196f3; } } .btnbox { position: absolute; right: 24px; top: 7px; button { margin-left: 10px; mat-icon { font-size: 21px; width: 22px; height: 22px; } } } } .contentbox { height: 100%; box-sizing: border-box; padding-top: 66px; overflow-y: auto; .leftbox { position: fixed; width: 14%; height: 85%; background-color: white; top: 66px; min-width: 268px; overflow-y: auto; .leftKeyImg { .keyImgTitle { width: 100%; height: 33px; line-height: 33px; text-align: center; font-size: 15px; color: #2196f3; background: #e8f4fe; } .planlist { width: 100%; height: 100%; overflow-y: auto; } .content { box-sizing: border-box; padding: 15px; display: flex; flex-wrap: wrap; justify-content: flex-start; .realPictureItem { width: 100%; display: flex; flex-wrap: wrap; justify-content: flex-start; } .realPictureTitle { width: 100%; font-size: 14px; height: 33px; line-height: 33px; text-align: center; margin-bottom: 5px; } .contentitem { margin-right: 15px; div { width: 100px; height: 100px; border-radius: 10px; border: 1px solid #2196f3; overflow: hidden; img { width: 100%; height: 100%; cursor: pointer; } } p { text-align: center; font-size: 13px; margin: 5px 0; width: 100px; } } .realPictureImgItem { position: relative; img { cursor: default !important; } .realPictureImgItemBtn { position: absolute; left: 50%; transform: translateX(-50%); width: 66px; height: 30px; line-height: 30px; text-align: center; color: white; background: #2196f3; display: none; border-radius: 8px; cursor: pointer; font-size: 12px; } .realPictureImgItemBtn1 { top: 15px; } .realPictureImgItemBtn2 { top: 55px; } } .realPictureImgItem:hover { // background: rgba(0,0,0,0.2); .realPictureImgItemBtn { display: block; } } } } .leftBuilding { width: 100%; height: 100%; display: flex; flex-direction: column; } .buildingHead { height: 40px; width: 100%; background-color: #e8f4fe; text-align: center; span { line-height: 40px; color: #2196f3; font-size: 16px; } } .buildingBody { width: 100%; height: 100%; display: flex; flex-direction: column; .selectedTr { background-color: #b3d3ee; } .buildName { cursor: pointer; height: 40px; width: 100%; border-bottom: 1px solid #f2f4f5; .example-margin { width: 14px; height: 14px; margin-left: 30px; margin-bottom: 7px; position: relative; bottom: 1px; } span { line-height: 40px; font-size: 16px; margin-left: 5px; } } } } .leftnew{ position: fixed; width: 14%; height: 90%; background-color: white; top: 66px; min-width: 300px; overflow-y: auto; display: flex; flex-direction: column; .newHead{ width: 100%; height: 40px; text-align: center; background-color: #e1f1ff; span{ text-align: center; font-size: 16px; color: #2196F3; height: 40px; line-height: 40px; } } .newBody{ width: 100%; height: 100%; display: flex; flex-direction: column; .search{ margin: 10px; width: 280px; height: 32px; background-color: #E8E9E9; border-radius: 20px; display: flex; .searchChoose{ width: 30%; height: 70%; margin-top: 2%; border-right: 1px solid #9EAAB4; //text-align: center; select{ background-color: transparent; border: 0; outline: none; margin-left: 5px; //height: 22px; width: 85%; font-size: 14px; position: relative; bottom: 3px; } } .searchText{ width: 65%; height: 100%; input { margin-left: 2%; width: 90%; height: 100%; border: none; outline: none; background-color: #E8E9E9; //line-height: 32px; //border-radius: 3px; } .queryField { height: 32px; //margin: 0 10px; } .ordiv{ position: relative; .organizationbox{ width:280px; height: 600px; background: white; position: absolute; top: 38px; right: -40px; z-index: 999; border: 1px solid grey; overflow-y: auto; li{ overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } mat-tree-node{ cursor: pointer; white-space:pre; } mat-tree-node:hover{ background: rgba(225, 225, 225, 0.8); } .closediv{ z-index: 100; position: absolute; right: 0; top: 0; width: 30px; height: 30px; cursor: pointer; line-height: 30px; text-align: center; } .closediv:hover{ background:rgba(225, 225, 225, 0.8); } } } .zdy{ width: 100%; height: 100%; } } .searImg{ width: 15%; height: 100%; cursor: pointer; img{ position: relative; top: 20%; left: 10%; } } } .newBodycenter{ height: 86%; width: 100%; display: flex; flex-wrap: wrap; align-content: flex-start; overflow-y: auto; //flex-direction: column; .centerfen{ //width: 50%; margin: 15px 0 12px 24px; //height: 150px; display: flex; flex-direction: column; .tu{ height: 100px; width: 110px; cursor: pointer; img{ width: 110px; height: 100px; } } .org{ width: 110px; } .lry{ width: 110px; } span{ display: inline-block; } } } .fenye{ width: 100%; } } } .mainbox { background-color: white; width: 745px; margin: 0 auto; min-height: 97%; box-sizing: border-box; padding: 10px 10px 0; .cover { width: 100%; min-height: 780px; input, select { border: 1px solid #ebebeb; border-radius: 4px; height: 28px; line-height: 28px; } input{ width: 140px; } p { height: 28px; line-height: 28px; } h1 { font-size: 46px; color: #2196f3; text-align: center; font-weight: 600; height: 230px; display: flex; justify-content: center; align-items: center; } li { width: 100%; display: flex; div { height: 38px; line-height: 38px; } div:first-child { width: 45%; text-align: right; } div:last-child { width: 55%; text-align: left; } } } .centerBox { width: 100%; height: 100%; display: flex; flex-direction: column; overflow-y: auto; .boxHead { height: 40px; width: 100%; background-color: #e8f4fe; //opacity: 0.1; span { margin-left: 20px; font-size: 16px; color: #2196f3; opacity: 1; height: 40px; line-height: 40px; } } .boxBody { height: 100%; width: 100%; display: flex; flex-direction: column; .boxBodyHead { width: 100%; height: 40px; background-color: #ffd91d; text-align: center; span { font-size: 16px; text-align: center; height: 40px; line-height: 40px; color: #b99a00; } img { cursor: pointer; width: 20px; height: 20px; float: right; margin-top: 10px; margin-right: 10px; } } .body { width: 100%; height: 100%; thead { width: 100%; background-color: #e8e9e9; } table { width: 100%; border-collapse: collapse; //background-color: #E8E9E9; } th { //background-color: #E8E9E9; border: 1px solid #999; height: 40px; font-size: 16px; text-align: center; input { background-color: #e8e9e9; text-align: center; height: 100%; width: 100%; font-size: 16px; border: none; outline: none; } } td { border: 1px solid #999; height: 40px; font-size: 16px; text-align: center; input { background-color: #ffffff; text-align: center; height: 100%; width: 100%; font-size: 16px; border: none; outline: none; } } .inputtext { width: 100%; height: 100%; display: flex; flex-direction: column; input { //width: 100%; height: 40px; font-size: 16px; border: none; outline: none; } .inputj { width: 100%; height: 100%; display: flex; } } .keyImg { width: 100%; height: 100%; .keyImgImg { .imgbox { margin-top: 10px; text-align: center; position: relative; img { max-width: 100%; width: auto; height: auto; } .deleteImg { display: none; cursor: pointer; position: absolute; right: 0px; top: 0px; } } .imgbox:hover { .deleteImg { display: block; } } .uploadBtn { display: flex; justify-content: center; margin: 50px 0; position: relative; input { width: 112px; height: 36px; position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); opacity: 0; cursor: pointer; } } } .addkeyImgItem { display: flex; justify-content: center; margin: 10px 0; } } } } } .keyImg { div { width: 100%; } .keyImgItem { border: 1px solid #e8e9e9; .keyImgTitle { height: 30px; border-left: 1px solid #2196f3; position: relative; input { width: 100%; height: 100%; background: #e8f4fe; color: #2196f3; border: 0; box-sizing: border-box; padding: 0 5px; } .deleteItem { position: absolute; right: 5px; top: 3px; cursor: pointer; color: #292c2c; } .deleteItem:hover { color: red; } } .keyImgImg { .imgbox { margin-top: 10px; text-align: center; position: relative; img { max-width: 100%; width: auto; height: auto; } .deleteImg { display: none; cursor: pointer; position: absolute; right: 0px; top: 0px; } } .imgbox:hover { .deleteImg { display: block; } } .uploadBtn { display: flex; justify-content: center; margin: 50px 0; position: relative; input { width: 112px; height: 36px; position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); opacity: 0; cursor: pointer; } } } } .addkeyImgItem { display: flex; justify-content: center; margin: 10px 0; } } .unit { width: 100%; height: 100%; display: flex; flex-direction: column; overflow-y: auto; .unithead { height: 40px; width: 100%; background-color: #e8f4fe; //opacity: 0.1; span { margin-left: 20px; font-size: 16px; color: #2196f3; opacity: 1; height: 40px; line-height: 40px; } } .unitbody { height: 100%; width: 100%; display: flex; flex-direction: column; .unitbodyHead { width: 100%; height: 40px; background-color: #2196f3; text-align: center; span { font-size: 16px; text-align: center; height: 40px; line-height: 40px; color: #ffffff; } img { cursor: pointer; width: 20px; height: 20px; float: right; margin-top: 10px; margin-right: 10px; } } .body { width: 100%; height: 100%; .attack { width: 100%; height: 100%; .attackhead { width: 100%; height: 40px; background-color: #ffd91d; text-align: center; span { font-size: 16px; text-align: center; height: 40px; line-height: 40px; color: #b99a00; } img { cursor: pointer; width: 20px; height: 20px; float: right; margin-top: 10px; margin-right: 10px; } } .attackbody { width: 100%; height: 100%; thead { width: 100%; background-color: #e8e9e9; } table { width: 100%; border-collapse: collapse; //background-color: #E8E9E9; } th { //background-color: #E8E9E9; border: 1px solid #999; height: 40px; font-size: 16px; text-align: center; input { background-color: #e8e9e9; text-align: center; height: 100%; width: 100%; font-size: 16px; border: none; outline: none; } } td { border: 1px solid #999; height: 40px; font-size: 16px; text-align: center; input { background-color: #ffffff; text-align: center; height: 100%; width: 100%; font-size: 16px; border: none; outline: none; } } } } .building{ height: 100%; width: 100%; display: flex; flex-direction: column; } .onetext{ height: 40px; width: 100%; border-bottom: 1px solid #F2F4F5; span{ height: 40px; width: 40%; font-size: 16px; background-color: #F2F4F5; } input{ height: 40px; //width: 60%; font-size: 16px; border: none; outline: none; border-bottom: 1px solid #F2F4F5; } img{ height: 20px; width: 20px; position: relative; top: 10px; } } .file{ width: 100%; height: 100%; .fileHead{ height: 40px; width: 100%; background-color: #ffd91d; text-align: center; span { font-size: 16px; text-align: center; height: 40px; line-height: 40px; color: #b99a00; } } .fileBody{ height: 100%; width: 100%; display: flex; flex-direction: column; } } .fouradj{ width: 100%; height: 100%; display: flex; justify-content: space-between; flex-wrap: wrap; //flex-direction: column; .adjtop,.adjbottom{ width: 100%; height: 50%; display: flex; .adjbody{ height: 100%; width: 50%; input{ height: 40px; //width: 60%; font-size: 16px; border: none; outline: none; } } } .fourTexttwo{ height: 40px; width: 50%; border-bottom: 1px solid #F2F4F5; input{ height: 40px; //width: 60%; font-size: 16px; border: none; outline: none; } } } .parts{ height: 100%; width: 100%; display: flex; flex-direction: column; .partsHead{ width: 100%; height: 40px; background-color: #ffd91d; text-align: center; input{ height: 40px; font-size: 16px; border: none; outline: none; background-color: #ffd91d; color: #b99a00; } img { cursor: pointer; width: 20px; height: 20px; float: right; margin-top: 10px; margin-right: 10px; } } .partsBody{ width: 100%; height: 100%; display: flex; flex-direction: column; .duohang{ width: 100%; height: 40px; display: flex; border-bottom: 1px solid #FFFFFF; .duohangHalf{ height: 40px; width: 50%; input{ height: 40px; //width: 60%; font-size: 16px; border: none; outline: none; } } } .danhang{ width: 100%; height: 40px; //border-top: 1px solid #FFFFFF; input{ height: 40px; //width: 60%; font-size: 16px; border: none; outline: none; } } } } } } } .disposalPoint { div { width: 100%; } .disposalPointItem { border: 1px solid #e8e9e9; .disposalPointTitle { height: 30px; border-left: 1px solid #2196f3; position: relative; input { width: 100%; height: 100%; background: #e8f4fe; color: #2196f3; border: 0; box-sizing: border-box; padding: 0 5px; } .deleteItem { position: absolute; right: 5px; top: 3px; cursor: pointer; color: #292c2c; } .deleteItem:hover { color: red; } } .disposalPointTextarea { textarea { width: 100%; height: 100%; border: 0; resize: none; vertical-align: top; box-sizing: border-box; padding: 5px; } } } .addDisposalPointItem { display: flex; justify-content: center; margin: 10px 0; } } .titleItem{ width: 100%; height: 36px; line-height: 36px; background-color: #2196F3; text-align: center; color: white; } } .toolDiv{ position: fixed; right: 20%; bottom: 20px; display: flex; flex-direction: column; button{ margin: 5px 0; } } .oldData{ width: 100px; height: 36px; background-color: #FFFFFF; border-radius: 0px 60px 60px 0px; position: fixed; right: 25.3%; top: 120px; display: flex; cursor: pointer; span{ color: #2196f3; font-size: 16px; line-height: 36px; margin-left: 5px; } img{ width: 18px; height: 15px; position: relative; top: 10px; left: 5px; } } } .noPadding{ padding-top: 10px; } .quitPreview{ position: fixed; top: 10px; right: 15px; } } .yinrubox{ width: 100%; height: 100%; display: flex; flex-direction: column; .yinruboxHead{ width: 100%; height:7%; border-bottom:1px solid #8b8c8c; span{ font-size: 18px; color: #2196f3; line-height: 40px; } button{ float: right; } } .boxBody { //height: 100%; width: 100%; overflow-y: auto; display: flex; flex-direction: column; .boxBodyHead { width: 100%; height: 40px; margin-top: 3%; background-color: #ffd91d; text-align: center; span { font-size: 16px; text-align: center; height: 40px; line-height: 40px; color: #b99a00; } img { cursor: pointer; width: 20px; height: 20px; float: right; margin-top: 10px; margin-right: 10px; } } .body { width: 100%; //height: 100%; thead { width: 100%; background-color: #e8e9e9; } table { width: 100%; border-collapse: collapse; //background-color: #E8E9E9; } th { //background-color: #E8E9E9; border: 1px solid #999; height: 40px; font-size: 16px; text-align: center; input { background-color: #e8e9e9; text-align: center; height: 100%; width: 100%; font-size: 16px; border: none; outline: none; } } td { border: 1px solid #999; height: 40px; font-size: 16px; text-align: center; input { background-color: #ffffff; text-align: center; height: 100%; width: 100%; font-size: 16px; border: none; outline: none; } } .inputtext { width: 100%; height: 100%; display: flex; flex-direction: column; input { //width: 100%; height: 40px; font-size: 16px; border: none; outline: none; } .inputj { width: 100%; //height: 100%; display: flex; } } .keyImg { width: 100%; height: 100%; .keyImgImg { .imgbox { margin-top: 10px; text-align: center; position: relative; img { max-width: 100%; width: auto; height: auto; } .deleteImg { display: none; cursor: pointer; position: absolute; right: 0px; top: 0px; } } .imgbox:hover { .deleteImg { display: block; } } .uploadBtn { display: flex; justify-content: center; margin: 50px 0; position: relative; input { width: 112px; height: 36px; position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); opacity: 0; cursor: pointer; } } } .addkeyImgItem { display: flex; justify-content: center; margin: 10px 0; } } } } }