.syr_card.data-v-3306d54a { display: flex; flex-wrap: wrap; justify-content: center; gap: 20rpx 18rpx; } .syr_item.data-v-3306d54a { box-sizing: border-box; width: 346rpx; border-radius: 20rpx; overflow: hidden; background-color: #fff; box-shadow: 0 0 12rpx 0 rgba(0, 0, 0, 0.05); } .syr_item .imageBox.data-v-3306d54a { width: 346rpx; height: 346rpx; position: relative; } .syr_item .imageBox .distance.data-v-3306d54a { position: absolute; font-family: DINPro, DINPro; font-weight: 500; font-size: 20rpx; color: #ffffff; bottom: 14rpx; left: 14rpx; display: flex; align-items: center; justify-content: center; gap: 6rpx; background-color: rgba(102, 102, 102, 0.6); padding: 4rpx 10rpx; border-radius: 100rpx; overflow: hidden; } .syr_item .imageBox .distance .position.data-v-3306d54a { width: 12rpx; height: 15rpx; } .syr_item .syr_image.data-v-3306d54a { width: 346rpx; height: 346rpx; } .syr_item .syr_info.data-v-3306d54a { padding: 20rpx 10rpx; } .syr_item .syr_info .belong.data-v-3306d54a { font-size: 22rpx; color: #8d8d8d; width: 100%; margin-top: 8rpx; } .syr_item .syr_info .syr_title_info.data-v-3306d54a { width: 100%; display: flex; align-items: center; gap: 20rpx; } .syr_item .syr_info .syr_title_info .syr_title.data-v-3306d54a { flex: 1; width: 100%; font-weight: 500; font-size: 28rpx; color: #333333; } .syr_item .syr_info .syr_title_info .time_info.data-v-3306d54a { display: flex; align-items: center; font-size: 18rpx; } .syr_item .syr_info .syr_title_info .time_info .time_tag.data-v-3306d54a { border-radius: 6rpx 0 0 6rpx; background-color: #e8101e; color: #fff; height: 31rpx; display: flex; align-items: center; justify-content: center; padding: 0 4rpx; } .syr_item .syr_info .syr_title_info .time_info .time.data-v-3306d54a { color: #e8101e; border: 1rpx solid #e8101e; font-family: DINPro, DINPro; font-weight: 500; border-radius: 0 6rpx 6rpx 0; height: 29rpx; display: flex; align-items: center; justify-content: center; padding: 0 8rpx 0 1rpx; }