.page { position: relative; .banner { width: 100%; min-height: 344rpx; } .container { padding: 48rpx 40rpx; position: absolute; top: 316rpx; left: 0; width: 100%; min-height: 100vh; border-radius: 24rpx 24rpx 0 0; background-color: #fafafa; box-sizing: border-box; .title { font-size: 36rpx; color: #484848; font-weight: bold; } .tags { margin-top: 16rpx; display: flex; .tag { margin-right: 16rpx; padding-right: 8rpx; font-size: 22rpx; color: #e04775; line-height: 1; border-radius: 8rpx; background-color: #f5dfe6; display: flex; align-items: center; .icon { margin-right: 8rpx; padding: 4rpx; width: 24rpx; max-height: 24rpx; background-color: #e04775; border-radius: 8rpx; } } } .content { margin-top: 32rpx; margin-bottom: 20rpx; display: flex; justify-content: space-between; .inner { .site { font-size: 28rpx; color: #9e9e9e; } .tel { font-size: 28rpx; color: #9b9ea6; } } .options { flex-shrink: 0; display: flex; .option { margin-left: 30rpx; .phone { width: 48rpx; height: 48rpx; border-radius: 50%; display: flex; align-items: center; justify-content: center; background-color: #fff; box-shadow: 0 4rpx 20rpx 0 rgba(0, 0, 0, 0.1); &-img { width: 24rpx; height: 24rpx; } } .name { margin-top: 8rpx; font-size: 24rpx; color: #484848; } } } } .card { margin-bottom: 16rpx; padding: 32rpx 30rpx; border-radius: 24rpx; background-color: #fff; .c-title { font-size: 32rpx; font-weight: bold; color: #484848; display: flex; align-items: center; .c-icon { margin-right: 16rpx; width: 36rpx; height: 36rpx; } } .c-content{ margin-top: 24rpx; font-size: 28rpx; color: #9E9E9E; } } .remark{ padding: 32rpx; border-radius: 24rpx; background-color: #fff; .r-title{ font-size: 32rpx; color: #484848; font-weight: bold; } .r-content{ margin-top: 20rpx; font-size: 28rpx; color: #9E9E9E; } } } }