.title { font-weight: Medium; font-size: 36rpx; color: #222222; } .text-large { font-size: 36rpx; } .text { font-size: 30rpx; word-break: keep-all; } .text-small { font-size: 24rpx; word-break: keep-all; } .grey { color: #666666; } .horizontal { padding: 20rpx; font-size: 24rpx; } .horizontal .goods { display: flex; align-items: end; width: 100%; padding: 10rpx; margin-top: 20rpx; background: #ffffff; border-radius: 20rpx; } .horizontal .goods .goods-image-wrapper { width: 180rpx; height: 180rpx; } .horizontal .goods .goods-image-wrapper .goods-image { width: 100%; height: 100%; text-align: center; border-radius: 20rpx; } .horizontal .goods .goods-detail { flex: 1; padding: 0 20rpx; } .horizontal .goods .goods-detail .goods-name { width: 100%; margin: 10rpx 0; font-size: 30rpx; color: #222222; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical; } .horizontal .goods .goods-detail .goods-describe { width: 100%; margin: 10rpx 0; min-height: 80rpx; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; } .horizontal .goods .goods-detail .goods-tags { width: 100%; margin: 8rpx 0; min-height: 60rpx; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; } .horizontal .goods .goods-detail .goods-detail-bottom { display: flex; align-items: center; justify-content: space-between; } .horizontal .goods .goods-detail .goods-detail-bottom .goods-price-wrapper { display: flex; color: #F01740; margin-top: 10rpx; } .horizontal .goods .goods-detail .goods-detail-bottom .goods-price-wrapper .goods-price-text { margin: 0 10rpx 0 0; } .horizontal .goods .goods-detail .goods-detail-bottom .goods-price-wrapper .goods-price-num { font-size: 28rpx; font-weight: 600; } .horizontal .goods .goods-detail .goods-detail-bottom .bottom-btns { width: 180rpx; } .horizontal .goods .goods-detail .goods-detail-bottom .bottom-btns .btn-text { letter-spacing: 6rpx; } .vertical { display: flex; justify-content: space-between; flex-wrap: wrap; padding: 20rpx; font-size: 24rpx; } .vertical .goods { width: 48%; margin-top: 20rpx; background: #ffffff; border-radius: 20rpx; } .vertical .goods .goods-image-wrapper { width: 100%; height: 240rpx; } .vertical .goods .goods-image-wrapper .goods-image { width: 100%; height: 100%; text-align: center; border-radius: 20rpx; } .vertical .goods .goods-detail { flex: 1; padding: 10rpx 20rpx; } .vertical .goods .goods-detail .goods-name { margin-top: 10rpx; min-height: 80rpx; font-size: 30rpx; color: #222222; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; } .vertical .goods .goods-detail .goods-describe { width: 100%; margin: 10rpx 0; min-height: 80rpx; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; } .vertical .goods .goods-detail .goods-tags { width: 100%; margin: 8rpx 0; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; } .vertical .goods .goods-detail .goods-price-wrapper { display: flex; color: #F01740; margin-top: 10rpx; } .vertical .goods .goods-detail .goods-price-wrapper .goods-price-text { margin: 0 10rpx 0 0; } .vertical .goods .goods-detail .goods-price-wrapper .goods-price-num { font-size: 28rpx; font-weight: 600; } .vertical .goods .goods-detail .address { margin-top: 10rpx; display: flex; } .vertical .goods .goods-detail .address .hotel-address { color: #666666; }