.content{ width: 100%; display: flex; flex-direction: column; background-color: white; } .content .top-tab{ width: 100%; display: flex; align-items: center; justify-content: center; position: relative; padding: 28rpx 0; font-size: 32rpx; font-weight: bold; } .content .top-tab .tab-location{ font-size: 28rpx; font-weight: 500; position: absolute; left:28rpx; display: flex; align-items: center; } .content .top-tab .tab-location .icon-dingwei{ color: blue; font-size: 28rpx; } .content .content-map{ width: 100%; height: 300rpx; } .content .content-map .map{ width:100%; } .content .content-type{ width: 100%; display: flex; flex-direction: row; padding:40rpx 28rpx; flex-wrap: wrap; grid-row-gap: 28rpx; background-color: white; border-radius: 24rpx 24rpx 0 0; position: relative; top: -10rpx; } .content .content-type .type-item{ flex: 20%; display: flex; flex-direction: column; text-align: center; align-items: center; } .content .content-type .type-item .type-item-img{ width: 48rpx; height: 48rpx; } .content .content-type .type-item .type-item-text{ color: #999; font-size: 24rpx; margin-top: 4rpx; } .content .content-list{ width: 100%; display: flex; flex-direction: column; } .content .content-list .list-tab{ padding:24rpx 28rpx; display: flex; grid-gap: 24rpx; font-size: 36rpx; } .content .content-list .list-tab .action{ font-weight: bold; } .content .content-list .list-container .list-item{ background-color: #F2F2F2; display: flex; border-radius: 20rpx; margin: 24rpx 28rpx; padding: 24rpx 0; } .content .content-list .list-container .list-item .list-item-left{ display: flex; justify-content: center; align-items: center; padding: 0 10rpx; } .content .content-list .list-container .list-item .list-item-left image{ width: 160rpx; height: 160rpx; border: solid 1px red; border-radius: 20rpx; } .content .content-list .list-container .list-item .list-item-right{ display: flex; flex-direction: column; grid-gap: 8rpx; } .content .content-list .list-container .list-item .list-item-right .item-title{ font-size: 14px; font-weight: bold; } .content .content-list .list-container .list-item .list-item-right .item-content{ display: flex; justify-content: space-between; padding-right: 6rpx; } .content .content-list .list-container .list-item .list-item-right .item-content .right-center-left .center-left-score{ color:#FE8C16; font-size: 24rpx; padding: 4rpx 0; } .content .content-list .list-container .list-item .list-item-right .item-content .right-center-right{ color:white; background-color: #F87320; font-size: 24rpx; line-height: 36rpx; width: 128rpx; height: 46rpx; text-align: center; padding: 4rpx 8rpx; border-radius: 30px; } .content .content-list .list-container .list-item .list-item-right .item-content .right-center-left .center-left-time{ font-size: 24rpx; } .content .content-list .list-container .list-item .list-item-right .item-address{ display: flex; justify-content: space-between; color: #999999; font-size: 24rpx; padding-right: 6rpx; grid-gap: 12rpx; max-width: 500rpx; } .content .content-list .list-container .list-item .list-item-right .item-address .address{ overflow: hidden; white-space: nowrap; text-overflow: ellipsis; min-width: 0; max-width: 360rpx; } .content .content-list .list-container .list-item .list-item-right .item-address .distance{ display: 1; display: flex; overflow:hidden; }