@red:#F01740; @grey: #666666; .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; .goods { display: flex; align-items:end; width: 100%; padding: 10rpx; margin-top: 20rpx; background: #ffffff; border-radius: 20rpx; .goods-image-wrapper { width: 180rpx; height: 180rpx; .goods-image { width: 100%; height: 100%; text-align: center; border-radius: 20rpx; } } .goods-detail { flex:1; padding: 0 20rpx; .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; //一定要写 } .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; //一定要写 } .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; //一定要写 } .goods-detail-bottom { display: flex; align-items: center; justify-content: space-between; .goods-price-wrapper { display: flex; color: @red; margin-top: 10rpx; .goods-price-text { margin: 0 10rpx 0 0; } .goods-price-num{ font-size: 28rpx; font-weight: 600; } } .bottom-btns { width: 180rpx; .btn-text { letter-spacing: 6rpx; } } } } } } .vertical { display: flex; justify-content: space-between; flex-wrap: wrap; padding: 20rpx; font-size: 24rpx; .goods { width: 48%; // padding: 10rpx; margin-top: 20rpx; background: #ffffff; border-radius: 20rpx; .goods-image-wrapper { width: 100%; height: 240rpx; .goods-image { width: 100%; height: 100%; text-align: center; border-radius: 20rpx; } } .goods-detail { flex:1; padding: 10rpx 20rpx; .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; //一定要写 } .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; //一定要写 } .goods-tags { width: 100%; margin:8rpx 0; overflow: hidden; //一定要写 text-overflow: ellipsis; //超出省略号 display: -webkit-box; //一定要写 -webkit-line-clamp: 2; //控制行数 -webkit-box-orient: vertical; //一定要写 } .goods-price-wrapper { display: flex; color: @red; margin-top: 10rpx; .goods-price-text { margin: 0 10rpx 0 0; } .goods-price-num{ font-size: 28rpx; font-weight: 600; } } .address { margin-top: 10rpx; display: flex; .hotel-address { color:@grey; } } } } }