:deep(.point-info) { border: 1px solid #2a81fc; padding: 2px 15px 15px; width: 350px; font-size: 14px; display: flex; flex-wrap: wrap; background-color: #1c294c; color: #d5dde3; position: relative; .table-box { max-height: 175px; overflow-y: auto; width: 100%; &::-webkit-scrollbar { width: 1px; } } .table { border-top: 1px solid #3d66ae; border-right: 1px solid #3d66ae; display: flex; flex-wrap: wrap; width: 100%; .tr { width: 100%; display: flex; } } .point-item { display: flex; width: 100%; } .point-item-hover { cursor: pointer; &:hover { background-color: #1a326e; } } .point-item2 { display: flex; width: 100%; } .td1 { width: 67px; } .td1, .td3 { background-color: #1a326e; padding: 8px 5px; color: #c6d1e6; border-bottom: 1px solid #3d66ae; border-left: 1px solid #3d66ae; } .td2, .td4 { padding: 8px 5px; border-bottom: 1px solid #3d66ae; border-left: 1px solid #3d66ae; } .td2, .td3, .td4 { flex: 1; } .close { position: absolute; top: 10px; right: 20px; width: 10px; height: 10px; background: url('@/assets/images/close2.png') no-repeat; background-size: 100% 100%; cursor: pointer; } .title-box { width: 100%; height: 25px; position: relative; background: url('@/assets/images/line.png') no-repeat bottom left; background-size: 14px 6px; margin-bottom: 5px; &::before { content: ""; width: 280px; height: 1px; background-image: linear-gradient(to right, rgba(0, 191, 252, 0.35) 0, rgba(0, 191, 252, 0) 100%); display: block; position: absolute; left: 16px; bottom: 2.5px; } } .gradient-text { font-size: 14px; } .icon1, .icon2, .icon3, .icon4 { position: absolute; top: 5px; left: 5px; width: 6px; height: 6px; background: url('@/assets/images/inputIcon1.png') no-repeat; background-size: 100% 100%; } .icon2 { left: unset; right: 10px; transform: rotate(90deg); } .icon3 { left: unset; top: unset; right: 10px; bottom: 10px; transform: rotate(180deg); } .icon4 { top: unset; bottom: 10px; transform: rotate(-90deg); } .flex { width: 100%; display: flex; justify-content: flex-end; margin-top: -20px; } }