.operatingModelModal { .operatingModelModalBox { width: 100%; display: flex; align-items: center; flex-wrap: wrap; gap: 10px; // Add spacing between items margin-top: 30px; .operatingModelModalItemBox { width: calc(50% - 5px); // Adjust width to accommodate gap padding: 20px; text-align: center; border: 1px solid #d9d9d9; border-radius: 4px; cursor: pointer; // margin-bottom: 10px; // This can now be handled by gap transition: all 0.3s ease; &:hover { border-color: #1890ff; background-color: #e6f7ff; } &.selected { border-color: #1890ff; background-color: #e6f7ff; box-shadow: 0 0 0 2px rgba(24, 144, 255, 0.2); } } } } .rentCalculateModalContent::-webkit-scrollbar { display: none; } .analysisModalBox { .analysisModalContentBox { width: 100%; max-height: 700px; overflow-y: auto; .serverPart { display: flex; //align-items: center; justify-content: space-between; width: 100%; height: 70px; border-bottom: 2px solid #EBEDF5; margin-bottom: 16px; .serverPartBox { width: 80px; height: 60px; border-radius: 8px; overflow: hidden; position: relative; margin-right: 12px; .serverPartBoxBg { width: 80px; height: 80px; position: absolute; top: 0; left: 0; z-index: 1; } .nameBox { position: absolute; z-index: 2; top: 14px; left: 10px; display: flex; flex-direction: column; .titleName { font-family: PingFangSC, PingFang SC; font-weight: 600; font-size: 14px; color: #2858CC; line-height: 20px; text-align: left; font-style: normal; } .labelName { font-family: PingFangSC, PingFang SC; font-weight: 500; font-size: 12px; color: #2858CC; line-height: 12px; text-align: left; font-style: normal; } } .statusBox { padding: 1px 4px; box-sizing: border-box; color: #fff; font-size: 10px; background: #2ABAC6; border-radius: 0px 8px 0px 8px; z-index: 2; display: inline-block; position: absolute; top: 0; right: 0; } } .serverPartDetail { height: 60px; display: flex; flex-direction: column; justify-content: space-between; .serverPartDetailTop { display: flex; align-items: center; flex-wrap: wrap; .serverPartName { font-family: PingFangSC, PingFang SC; font-weight: 600; font-size: 20px; color: #333333; line-height: 28px; text-align: left; font-style: normal; } .serverPartType { margin-left: 8px; background: linear-gradient(134deg, #FFEED1 0%, #FFE1CD 100%); border-radius: 2px; box-sizing: border-box; color: #FFA509; padding: 0 10px; } } .serverPartDetailBottom { display: flex; margin-top: 12px; .businessBox { margin-right: 8px; background: #E7F0FF; box-sizing: border-box; padding: 2px 8px; border-radius: 2px; display: flex; align-items: center; .businessIcon { width: 16px; height: 16px; margin-right: 4px; } .businessText { font-family: PingFangSC, PingFang SC; font-weight: 400; font-size: 14px; color: #1E58BE; line-height: 22px; text-align: left; font-style: normal; margin-right: 4px; white-space: nowrap; } .businessValue { font-family: DINAlternate, DINAlternate; font-weight: bold; font-size: 18px; color: #1E58BE; line-height: 22px; text-align: left; font-style: normal; } } } .bigTitlte { font-family: PingFangSC, PingFang SC; font-weight: 600; font-size: 20px; color: #333333; line-height: 28px; text-align: left; margin-bottom: 0 !important; } } .brandBox { display: flex; width: 250px; flex-direction: column; .brandIcon { width: 80px; height: 80px; } .brandName { font-family: PingFangSC, PingFang SC; font-weight: 600; font-size: 14px; color: #2858CC; line-height: 20px; text-align: left; font-style: normal; width: 170px; white-space: nowrap; text-overflow: ellipsis; overflow: hidden; } } } .operateLeft { display: flex; align-items: center; margin-bottom: 6px; .operateIcon { width: 24px; height: 24px; margin-right: 6px; } .titleName { font-family: PingFangSC, PingFang SC; font-weight: 600; font-size: 14px; color: #183362; line-height: 24px; text-align: left; font-style: normal; } } .paragraph { font-family: PingFangSC, PingFang SC; font-size: 14px !important; line-height: 28px !important; .keynote { font-weight: 600; color: #1890ff; font-family: PingFangSC, PingFang SC; } .beforeBluePoint { position: relative; } .beforeBluePoint::before { content: ''; width: 8px; height: 8px; border-radius: 50%; background-color: #1890ff; position: absolute; top: 50%; transform: translateY(-50%); left: 1rem; } .titleName { font-family: PingFangSC, PingFang SC; font-weight: 600; font-size: 14px; color: #333333; line-height: 20px; text-align: left; font-style: normal; } .numberValue { font-family: PingFangSC, PingFang SC; font-weight: bold; font-size: 14px; color: #243F6E; line-height: 28px; text-align: left; font-style: normal; } .compare { font-family: PingFangSC, PingFang SC; font-weight: bold; font-size: 14px; color: #FE7628; line-height: 28px; text-align: left; font-style: normal; } .unit { font-family: PingFangSC, PingFang SC; font-weight: 400; font-size: 14px; color: #788395; line-height: 22px; text-align: left; font-style: normal; } } .proposal { text-indent: 2rem; font-size: 14px !important; line-height: 28px !important; font-family: PingFangSC, PingFang SC; .keynote { font-weight: 600; color: #1890ff; } .proposalTitle { font-weight: 600; color: #FE7628; } } } }