.container { width: 100%; align-items: stretch; padding: 0; box-sizing: border-box; } .banner-swiper { width: 100%; height: 380rpx; } .banner-item { width: 100%; height: 100%; position: relative; } .banner-image { width: 100%; height: 100%; } .banner-content { position: absolute; bottom: 0; left: 0; right: 0; padding: 30rpx; background: linear-gradient(transparent, rgba(0, 0, 0, 0.6)); color: white; } .banner-title { font-size: 32rpx; font-weight: bold; display: block; margin-bottom: 10rpx; } .banner-desc { font-size: 24rpx; opacity: 0.9; } .feature-section { background: white; margin: 20rpx; border-radius: 20rpx; padding: 30rpx; box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.05); } .feature-title { font-size: 32rpx; font-weight: bold; color: #333; margin-bottom: 30rpx; padding-left: 10rpx; border-left: 6rpx solid #007AFF; } .feature-grid { display: flex; justify-content: space-around; flex-wrap: wrap; } .feature-item { display: flex; flex-direction: column; align-items: center; width: 33.33%; padding: 20rpx 0; } .feature-icon { width: 100rpx; height: 100rpx; margin-bottom: 15rpx; } .feature-text { font-size: 26rpx; color: #333; } .intro-section { background: white; margin: 20rpx; border-radius: 20rpx; padding: 30rpx; box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.05); } .intro-title { font-size: 32rpx; font-weight: bold; color: #333; margin-bottom: 30rpx; padding-left: 10rpx; border-left: 6rpx solid #007AFF; } .intro-content { display: flex; flex-direction: column; } .intro-item { display: flex; align-items: center; padding: 25rpx 0; border-bottom: 1rpx solid #f0f0f0; } .intro-item:last-child { border-bottom: none; } .intro-icon { width: 80rpx; height: 80rpx; margin-right: 25rpx; flex-shrink: 0; } .intro-text { flex: 1; display: flex; flex-direction: column; } .intro-subtitle { font-size: 28rpx; font-weight: bold; color: #333; margin-bottom: 8rpx; } .intro-desc { font-size: 24rpx; color: #999; } .hospital-section { background: white; margin: 20rpx; border-radius: 20rpx; padding: 30rpx; box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.05); margin-bottom: 30rpx; } .hospital-title { display: flex; justify-content: space-between; align-items: center; margin-bottom: 25rpx; padding-left: 10rpx; border-left: 6rpx solid #007AFF; font-size: 32rpx; font-weight: bold; color: #333; } .hospital-more { font-size: 24rpx; color: #007AFF; font-weight: normal; } .hospital-scroll { width: 100%; white-space: nowrap; } .hospital-list { display: inline-flex; padding: 10rpx 0; } .hospital-item { display: inline-flex; flex-direction: column; width: 280rpx; margin-right: 20rpx; background: #f8f8f8; border-radius: 15rpx; overflow: hidden; flex-shrink: 0; } .hospital-item:last-child { margin-right: 0; } .hospital-image { width: 100%; height: 160rpx; } .hospital-info { padding: 20rpx; display: flex; flex-direction: column; } .hospital-name { font-size: 26rpx; font-weight: bold; color: #333; margin-bottom: 8rpx; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .hospital-address { font-size: 22rpx; color: #999; margin-bottom: 10rpx; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .hospital-rating { display: flex; justify-content: space-between; align-items: center; } .rating-text { font-size: 22rpx; color: #FF6B35; font-weight: bold; } .distance-text { font-size: 22rpx; color: #007AFF; }