* { margin: 0px; padding: 0px; user-select: none; box-sizing: border-box; } html, body { height: 100%; } #container { height: 100%; display: flex; } #menu { width: 200px; } #menu .menu-title { background-color: rgb(12, 135, 203); height: 100px; line-height: 100px; text-align: center; color: white; font-size: 18px; } #menu .menu-tree { list-style-type: none; } #menu .menu-tree li { border-width: 0px 1px 1px 1px; border-style: solid; border-color: #80808073; padding: 5px 10px; background-color: rgb(249, 249, 249); cursor: pointer; } #menu .menu-tree li.active { background-color: white; color: rgb(61, 144, 200); border-width: 0px 0px 1px 1px; } #menu .menu-tree li i{ margin-right: 5px; } .prospect-detail{ boder-collapse: collapse; } .prospect-detail td{ border: 1px solid #80808047; padding: 5px; min-width: 80px ; } .prospect-detail td:nth-child(odd){ background-color: rgb(237,243,244); color: rgb(58,105,161); text-align: right; } .prospect-detail td:nth-child(1){ width: 80px; } .prospect-detail td:nth-child(3){ width: 100px; } .chart-label{ margin-bottom: 10px; } .chart-label span{ border: 1px solid rgb(20,120,188); color: rgb(20,120,188); padding: 5px; margin-left: 3px; cursor: pointer; display: inline-block; } .chart-label span i{ margin-right: 3px; } .record-item{ background-color: rgb(242,246,249); padding: 10px; border: 1px solid #8080804a; } .record-item .item-title{ color: rgb(42,138,204); padding-bottom: 6px; font-weight: bold; } .record-item .item-title .star{ margin: 0px 10px 0px 5px; color: gray; } .record-item .item-title .clip{ margin: 0px 10px 0px 200px; } .record-item .item-title .square{ margin: 0px 5px 0px 30px; color: rgb(214,72,126); } .record-item .item-title .date{ margin-left: 20px; } .record-item .record-content{ height: 100px; background-color: white; } .custom-tab-content{ height: calc(100% - 41px); } .custom-tab-item{ height: 100%; overflow: auto; }