.gb-top-title{ display: flex; align-items: center; column-gap: 10px; margin-bottom: 10px; .gb-top-icon{ width: 5px; height: 20px; background-color: #0079fe; } } .gsnl-content{ display: flex; column-gap: 10px; padding-right:10px; .content-left{ width: 700px; padding: 10px; border: 1px solid #dfdfdf; border-radius: 5px; overflow-y: auto; height: calc( 100vh - 100px); .content-card{ display: flex; flex-wrap: wrap; column-gap: 20px; padding-top: 10px; .card-item{ width: 325px; border: 1px solid #dfdfdf; border-radius: 5px; margin-bottom: 20px; padding: 10px; padding-bottom: 0; box-shadow: 5px 5px 5px 0px rgba(0, 0, 0, 0.4); .card-title{ display: flex; align-items: center; column-gap: 10px; font-size: 18px; margin-bottom: 10px; } .card-value{ display: flex; align-items: baseline; flex-wrap: nowrap; .nl-value{ font-size: 36px; font-weight: 700; color:#02a7f0; } .nl-time{ font-size: 14px; font-weight: bold; } } img{ width: 40px; } } .yc-content{ display: flex; flex-direction: column; .yc-input{ display: inline-block; width: 80%; height: 40px; padding: 10px; border-radius: 5px; background-color: #f0f6ff; margin-bottom: 15px; } } } } .content-right{ width: 850px; border: 1px solid #dfdfdf; padding: 10px; border-radius: 5px; } }