.container { display: flex; height: 100%; flex-direction: column; overflow: hidden; box-sizing: border-box; } .map { width: 100%; min-height: 700rpx; box-sizing: border-box; } .bottom-panel { /* position: absolute; bottom: 0; left: 0; right: 0; */ width: 100%; /* height: 660rpx; */ overflow: hidden; overflow: auto; padding: 16rpx; padding-top: 0rpx; box-sizing: border-box; } .trip-card { background-color: white; border-radius: 16rpx; padding: 24rpx; box-shadow: 0 4rpx 16rpx rgba(0, 0, 0, 0.1); } .location-item { display: flex; align-items: flex-start; margin-bottom: 24rpx; } .location-icon { margin-right: 16rpx; margin-top: 8rpx; } .start-icon .icon-circle { width: 24rpx; height: 24rpx; border-radius: 50%; background-color: #666; } .end-icon .icon-marker { width: 24rpx; height: 24rpx; background-color: #2C85FF; clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%); } .location-input input { font-size: 32rpx; color: #333; width: 560rpx; } .trip-info { margin-top: 16rpx; padding-top: 16rpx; border-top: 1rpx solid #eee; display: flex; justify-content: space-between; font-size: 28rpx; color: #666; } /* */ .call-btn { position: absolute; bottom: 0; left: 0; right: 0; margin-bottom: 24rpx; background-color: #00C775; color: white; width: 90%; height: 96rpx; line-height: 96rpx; font-size: 34rpx; border-radius: 48rpx; box-sizing: border-box; display: flex; justify-content:space-around; } .call-btn_left_electricity{ width: 50%; height: 100%; } .call-btn_right_electricity{ width: 50%; height: 100%; border-left: 4rpx solid #ffffff; } .driver-info { background-color: white; border-radius: 16rpx; padding: 24rpx; box-shadow: 0 4rpx 16rpx rgba(0, 0, 0, 0.1); display: flex; align-items: center; margin-top: 26rpx; } .driver-avatar { width: 100rpx; height: 100rpx; border-radius: 50%; } .driver-details { margin-left: 24rpx; flex: 1; display: flex; flex-direction: column; justify-content: center; /* justify-content:space-around; */ /* justify-content: space-between; */ /* align-items: center; */ } .driver-name { font-size: 32rpx; font-weight: bold; } .driver-car { font-size: 28rpx; color: #ccc; margin-top: 8rpx; } .driver-car1 { font-size: 28rpx; color: #00C775; margin-top: 8rpx; } .driver-car2 { font-size: 28rpx; color: #EA6E38; margin-top: 8rpx; } .driver-arrive { font-size: 28rpx; color: #2C85FF; margin-top: 8rpx; } .driver-arrive1 { font-size: 28rpx; margin-top: 8rpx; margin-left: 20rpx; } .cancel-btn { padding: 0rpx 20rpx; height: 48rpx; line-height: 48rpx; font-size: 28rpx; color: #2c85ff; border-radius: 32rpx; /* background-color: #2C85FF; */ border: 1rpx solid #2c85ff; } .cars-nearby { position: fixed; top: 620rpx; left: 10rpx; background-color: rgba(255, 255, 255, 1); border-radius: 16rpx; padding: 12rpx 20rpx; display: flex; /* flex-direction: column; */ align-items: center; box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.1); box-sizing: border-box; } .positioning{ position: fixed; top: 630rpx; right: 40rpx; } .cars-icon { color: #2C85FF; margin-right: 12rpx; } .cars-count { font-size: 28rpx; color: #333; } .icon-car { font-size: 32rpx; } .available{ width: 100%; height: 380rpx; display: flex; align-items: center; justify-content: center; } .available{ display: flex; justify-content: center; align-items: center; margin-top: 100rpx; } .carousel{ width: 100%; height: 300rpx; /* background-color: #222222; */ padding: 20rpx; padding-bottom: 0rpx; border-radius:16rpx; box-sizing: border-box; } .swiper_img{ width: 100%; height: 380rpx; border-radius:16rpx; overflow: hidden; } .swiper-item{ width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; color: #222222; border-radius:16rpx; background-color: #00C775; } /* */ .nearby_icon{ width: 44rpx; height: 44rpx; }