.wrapper { width: 100%; padding-top: 20rpx; } .page-section { width: 100%; margin: 42rpx auto 48rpx; swiper { width: 100%; height: 590rpx; } .swiper-item-wrap { width: 590rpx !important; padding-left: 30rpx; } .swiper-item { position: relative; left: 0; top: 0; width: 590rpx; height: 100%; border-radius: 24rpx; overflow: hidden; } .swiper-item image { display: block; width: 100%; height: 100%; } .info { position: absolute; left: 0; bottom: 0; z-index: 1; width: 100%; padding: 0 28rpx 20rpx; } .name { font-size: 36rpx; line-height: 44rpx; font-weight: 500; color: rgba(255, 255, 255, 1); word-break: break-all; word-wrap: break-word; } .address { width: 100%; font-size: 20rpx; line-height: 32rpx; color: rgba(229, 229, 229, 1); word-break: break-all; word-wrap: break-word; } } .page-title { position: relative; left: 0; top: 0; display: flex; align-items: center; width: 100%; padding-left: 46rpx; line-height: 40rpx; font-size: 36rpx; font-weight: 500; color: #1F1F39; &:before { content: ''; position: absolute; left: 16rpx; top: 1rpx; width: 14rpx; height: 37rpx; border-radius: 40rpx; background: #91B379; } } .main { padding: 48rpx 0 278rpx; } .list { display: flex; width: 690rpx; min-height: 278rpx; padding: 20rpx 28rpx 34rpx; margin: 0 auto 20rpx; border-radius: 24rpx; background: rgba(255, 255, 255, 1); box-shadow: 0 4rpx 8rpx 0 rgba(0, 0, 0, 0.1); overflow: hidden; .photo-wrap { width: 224rpx; height: 224rpx; border-radius: 16rpx; overflow: hidden; image { display: block; width: 100%; height: 100%; } } .info { width: calc(100% - 224rpx); padding-left: 28rpx; padding-top: 18rpx; } .name { font-size: 32rpx; line-height: 46rpx; color: rgba(31, 51, 73, 1); } .address { margin-top: 8rpx; font-size: 24rpx; line-height: 34rpx; color: rgba(153, 153, 153, 1); } }