html,body{ width:100%; height:100%; margin:0; padding:0; background: #E6E6E6; } *{ box-sizing: border-box; font-size: 16px; } .containerBox{ width:100%; height:100%; } .left-box{ width:250px; padding:0; background: #fff; position: relative; } .photo-msg{ width:100%; padding:15px 30px; } .photo-msg p{ margin:0; padding-left:5px; border-left:4px solid #167AA1; color:#666; } .radio-box{ width:250px; height:40px; line-height: 40px; text-align: center; color:#fff; background: rgb(64,103,255); cursor: pointer; } .picture-list{ width:250px; background: #fff; height:calc(100% - 200px); overflow-y: auto; text-align: center; } .picture-list img{ width:160px; margin:20px 0; } .edit-box{ width:250px; height:110px; border-top:1px solid #ccc; background: #fff; display: flex; justify-content: space-around } .edit-box div{ text-align: center; cursor: pointer; } .edit-box img{ margin-top:15px; width: 24px; } .edit-box p{ margin-top:5px; } .margin{ margin:20px 0; height:3px; width:100%; background: #ccc; } .right-box{ height:100%; border-left:2px solid #ccc; background: #FFFFFF; position: relative; } .handle-box{ width:100%; display: flex; align-items: center; border-bottom:2px solid #ccc; } .handle-box div{ height:40px; padding:0px 15px; display: flex; align-items: center; text-align: center; border-right:1px solid #ccc; cursor: pointer; } .handle-box div img{ transform: translateY(-2px); margin-right: 5px; width: 20px; } .camera-box{ height:calc(100% - 40px); width:100%; display: flex; overflow: hidden; } .camera-box .camera-left{ width:calc(100% - 300px); background: #ccc; height:100%; position: relative; } .active_photo,.active_rotate{ position: absolute; right:50px; top:40%; cursor: pointer; z-index: 30000; background-color: #fff; width: 80px; height: 90px; border-radius: 8px; margin: 10px 0; } .active_photo img,.active_rotate img{ margin: 27px 19px; width: 40px; } .active_rotate{ top:calc(40% + 120px); } .camera-box .camera-right{ width:300px; height:100%; } .camera-right .camera-title{ width:100%; padding-left:15px; margin-top:10px; margin-bottom:10px; } .camera-right .camera-title span{ color:rgb(64,103,255) } .camera-box .tree-box{ height:500px; overflow-y: scroll; margin-top:20px; } .camera-box .tree-box div{ margin-top:10px; } .treeItem { padding-left: 5px; font-size: 14px; margin: 12px 8px; } .treeItem input{ margin-left:15px; } .itemIcon { display: inline-block; width: 18px; height: 18px; line-height: 16px; color: white; font-weight: bolder; text-align: center; font-size: 16px; border-radius: 50%; background: rgb(85, 141, 213); margin-right: 10px; cursor: pointer; }