.origin-container { display: flex; // float:right; justify-content: flex-end; .origin-left { display: flex; width: 63.48vw; justify-content: center; flex-wrap: wrap; .search-container { width: 44.9vw; margin-top: 11.29vh; margin-bottom: 2.13vh; } .origin-map { position: relative; width: 63.34vw; height: 52.63vh; border-radius: 40px; overflow: hidden; background-color: rgba(117, 117, 117, 0.8); // img { // width: 100%; // height: 102%; // } } .image-container { width: 100%; height: 11.66vh; margin-top: 6.38vh; } .bench-button { width: 41.14vw; height: 6.67vh; line-height: 6.67vh; background: linear-gradient( 358deg, rgba(255, 255, 255, 0.63) 0%, rgba(255, 255, 255, 0) 66%, rgba(84, 84, 84, 0) 100% ); border-radius: 79px 79px 79px 79px; position: relative; top: -20.37vh; z-index: 3; color: #fff; display: flex; align-items: center; .btn-item { height: 100%; img { width: 2.23vw; } } i { font-size: 30px; } } .bench-button:before { background: linear-gradient( 179deg, rgba(255, 255, 255, 0.36) 0%, rgba(255, 255, 255, 0) 100% ); border-radius: 79px 79px 79px 79px; opacity: 1; content: ""; position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: -1; backdrop-filter: blur(2px); } } .origin-right { // margin-top: 11.29vh; display: flex; flex-direction: column; justify-content: center; padding: 20px; } .origin-basic { height: 26.38vh; margin-bottom: 1.85vh; background: rgba(0, 0, 0, 0.49); border-radius: 2.08vw; border: 1px solid #707070; margin-left: 1.56vw; } .origin-list { width: 26.36vw; // height: 60.92vh; margin-left: 1.56vw; } .origin-list { .item-box { width: 100%; padding: 1.04vw 1.66vh 1.04vw; background: rgba(0, 0, 0, 0.2); border-radius: 20px 20px 20px 20px; opacity: 1; display: flex; justify-content: space-between; .item-right { width: 12vw; } .item-title { height: 4.17vh; font-size: 28px; font-family: PingFang SC-Bold, PingFang SC; font-weight: 400; color: #fbfbfb; line-height: 4.17vh; } .item-description { margin-top: 0.37vh; height: 2.31vh; font-size: 16px; font-family: PingFang SC-Regular, PingFang SC; font-weight: 400; color: #dfdfdf; line-height: 2.31vh; } .item-tag { display: flex; margin-top: 0vh; width: 10vw; .tag { margin-bottom: 0.2vh; //width: 3.13vw; font-size: xx-small; text-align: center; background-color: #5d9a6d; border-radius: 10px; color: #f2f2f2; margin-right: 0.2vw; padding: 5px 10px; } } } } } // .ready { // color: #65c94c !important; // font-size: 30px; // } // .occupied { // color: #478bc3 !important; // font-size: 30px; // } // .offline { // color: #cdd0cf !important; // font-size: 30px; // } // .offline { // color: red !important; // font-size: 30px; // } .item-image { width: 7.29vw; height: 7.29vw; border-radius: 15px; border: 2px solid #dfdfdf; img { width: 100%; height: 100%; border-radius: 15px; } } *::-webkit-scrollbar { /*滚动条整体样式*/ width: 6px; /*高宽分别对应横竖滚动条的尺寸*/ height: 1px; } *::-webkit-scrollbar-thumb { /*滚动条里面小方块*/ border-radius: 5px; box-shadow: inset 0 0 5px rgba(180, 180, 180, 0.5); background: rgba(180, 180, 180, 0.2); } *::-webkit-scrollbar-track { /*滚动条里面轨道*/ /* box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2); */ border-radius: 10px; background: transparent; }