/* * @Descripttion: * @version: * @Author: sueRimn * @Date: 2021-05-19 15:50:20 * @LastEditors: sueRimn * @LastEditTime: 2021-05-21 16:55:49 */ .box{ height: 97%; width: 100%; padding: 10px; background-color: #F7F8FA; display: flex; .boxleft{ width: 20%; height: 100%; background-color: #FFFFFF; display: flex; flex-direction: column; .lefthead{ height: 50px; width: 100%; display: flex; justify-content: space-between; border-bottom: 1px solid #F7F8FA; span{ font-size: 16px; } .leftheadone{ width: 60%; height: 100%; span{ margin: 10px 10px; height: 50px; line-height: 50px; } } .leftheadtwo{ width: 30%; height: 100%; cursor: pointer; img{ position: relative; top: 2px; } span{ margin-left: 2px; //margin: 10px 10px; height: 50px; line-height: 50px; color: #2196F3; } } } .leftbox{ height: 100%; width: 100%; display: flex; flex-direction: column; .selectedTr{ background-color: #E1F1FF; span{ color: #2196F3; } } .leftbody{ width: 100%; height: 40px; display: flex; justify-content: space-between; cursor: pointer; .bodyname{ height: 40px; width: 70%; span{ font-size: 16px; height: 40px; line-height: 40px; margin-left: 10px; } } .bodycz{ height: 40px; width: 30%; img{ margin-left: 10px; cursor: pointer; } span{ color: #B2BEC7; font-size: 16px; height: 40px; line-height: 40px; //margin-left: 30%; } } } } } .boxright{ margin-left: 10px; height: 100%; width: 78%; background-color: #FFFFFF; display: flex; flex-direction: column; .righthead{ height: 50px; width: 100%; display: flex; justify-content: space-between; border-bottom: 1px solid #F7F8FA; span{ font-size: 16px; } .rightheadone{ width: 50%; height: 100%; span{ margin: 10px 10px; height: 50px; line-height: 50px; } } .rightheadtwo{ width: 50%; height: 100%; button{ margin-left: 80%; margin-top: 5px; } } } } }