.content { margin: 0 0 0 10px; width: 100%; height: 100%; overflow-y: auto; display: flex; .leftBox { flex: 15%; padding-top: 10px; .bank { display: flex; padding-left: 10px; .mat-icon {margin-right: 15px;} } } .rightBox { border-left: 1px solid #999; flex: 85%; display: flex; flex-direction: column; .topBox { flex: 5%; padding: 10px; display: flex; :first-child {flex: 85%;}; :last-child {flex: 15%;} } .bottomBox { flex: 95%; padding: 5px 0 0 25px; overflow: auto; .imgsBoxflex { display: flex; flex-direction: row; flex-wrap: wrap; } } } } //icon统一样式 .mat-icon { cursor:pointer; width: 18px; height: 18px; vertical-align:top; margin-right: 10px; } .title {margin-right: 30px;font-weight: 500; font-size: 18px;} .material { cursor:pointer; height: 30px; font-size: 16px; margin-top: 10px; padding-left: 15px; span { max-width: 200px; display: inline-block; overflow: hidden; text-overflow:ellipsis; white-space: nowrap; } .btn { color: #FFC122; } } .imgBox{ width: 300px; height: 200px; margin: 0 35px 35px 0; display: inline-block; position: relative; .fixedImg { width: 100%; height: 170px; text-align: center; margin-bottom: 3px; img { width: auto; height: auto; max-width: 100%; height: 100%; cursor:pointer; } } input{ font-size:12px; width: 100px; height:18px; border-radius:3px; border:1px solid #c8cccf; outline:0; text-align:left; padding-left: 5px; display:inline-block; cursor: pointer;} input::-webkit-input-placeholder{ color: #986655; font-size: 12px; } a {display: inline-block; width: 45px; height: 24px; line-height: 24px; text-align: center; border-radius: 3px; background-color: #2196F3; font-size: 14px; color: #fff;} } .uploadFileFixed { position: relative; .uploadFile { opacity:0; display: inline-block; width: 88px; height: 36px; position: absolute; top: 0px; left: 0px; } } //分页 .mat-paginator { background-color: rgba(255,255,255,0); padding-right: 10%; } .isLoading{ display: inline-block; margin-left: 15px; top: 8px; } //左侧实景图文件样式 .leftFile { background-color: rgba(225,225,225,0.8); } //选中图片样式 .selectImg { -webkit-filter: drop-shadow(0px 0px 5px #000); filter: drop-shadow(0px 0px 5px #000); border: 1px solid red; } .checkedImg { position: absolute; top: 1px; right: 1px; color:#00FF00; font-size: 30px; z-index: 999; } //预览图片旋转角度 .rotateA {transform: rotate(90deg) scale(0.75);} .rotateB {transform: rotate(180deg)} .rotateC {transform: rotate(270deg) scale(0.75);} .imgDiaLogBox{ width: 1450px; height: 810px; //预览图片 .previewImgBox { width: 1350px; height: 700px; text-align: center; img{ width: auto; height: auto; max-width: 100%; height: 100%;} } .previewImgBottom { text-align: center; height: 30px; margin: 20px auto; } } @media screen and (max-width:1300px){ .imgDiaLogBox{ width: 920px; height: 600px; //预览图片 .previewImgBox { width: 800px; height: 500px; text-align: center; } } }