/* packageD/preferential_volume/preferential_volume.wxss */ view, page { background: #fff; } .volume_content { background: #fff; position: relative; } .volume_content .volume_content_top { width: 750rpx; height: 226rpx; background-color: #fd4e4b; } .volume_content .volume_content_center { height: 610rpx; } .volume_content .volume_draw { position: absolute; width: 640rpx; padding-left: 30rpx; padding-right: 30rpx; height: 680rpx; background-color: #fff; box-shadow: 0rpx 7rpx 16rpx 0rpx rgba(0, 0, 0, 0.05); border-radius: 30rpx; left: 50%; top: 114rpx; margin-left: -350rpx; } .volume_content .volume_draw .volume_draw_top { position: absolute; left: 50%; margin-left: -64rpx; width: 128rpx; height: 128rpx; background-color: #121212; border: solid 6rpx #fff; border-radius: 50%; top: -62rpx; } .volume_content .volume_draw .volume_draw_top image { width: 100%; height: 100%; border-radius: 50%; } .volume_content .volume_draw .volume_draw_center { padding-top: 106rpx; text-align: center; } .volume_content .volume_draw .volume_draw_center .volume_name { height: 32rpx; font-size: 30rpx; line-height: 32rpx; color: #666; padding-bottom: 40rpx; } .volume_content .volume_draw .volume_draw_center .volume_price { height: 64rpx; font-size: 60rpx; line-height: 60rpx; color: #fd4e4b; padding-bottom: 20rpx; } .volume_content .volume_draw .volume_draw_center .volume_price .sign { font-size: 32rpx; line-height: 36rpx; color: #fd4e4b; } .volume_content .volume_draw .volume_draw_center .volume_use { font-size: 28rpx; line-height: 36rpx; color: #000; } .volume_content .volume_draw .volume_draw_center { padding-bottom: 70rpx; border-bottom: 1px solid #ededed; } .volume_content .volume_draw .volume_draw_bottom { padding-top: 34rpx; } .volume_content .volume_draw .volume_draw_bottom .draw_top { display: flex; justify-content: space-between; align-items: center; line-height: 36rpx; height: 36rpx; font-size: 28rpx; color: #000; padding-left: 21rpx; padding-right: 7rpx; padding-bottom: 69rpx; } .volume_content .volume_draw .volume_draw_bottom .draw_btn { width: 478rpx; height: 88rpx; background-color: #fd4e4b; box-shadow: 0rpx 0rpx 16rpx 0rpx rgba(253, 78, 75, 0.1); border-radius: 44rpx; line-height: 88rpx; text-align: center; font-size: 28rpx; color: #fff; margin: 0 auto; } .volume_content .volume_draw .volume_draw_bottom .draw_btn.active { background-color: #d4d4d4; } .volume_content .volume_content_bottom { padding-left: 36rpx; padding-right: 36rpx; } .volume_content .volume_content_bottom .name { height: 36rpx; font-size: 32rpx; line-height: 36rpx; color: #000; padding-bottom: 10rpx; } .volume_content .volume_content_bottom .goods_list .li { display: flex; } .volume_content .volume_content_bottom .goods_list .li .left { width: 218rpx; height: 218rpx; border-radius: 10rpx; margin-right: 26rpx; } .volume_content .volume_content_bottom .goods_list .li .left image { width: 100%; height: 100%; border-radius: 10rpx; } .volume_content .volume_content_bottom .goods_list .li .right { width: 440rpx; display: flex; flex-direction: column; justify-content: space-between; } .volume_content .volume_content_bottom .goods_list .li .right .goods_name { width: 100%; height: 84rpx; font-size: 28rpx; line-height: 42rpx; color: #000; /* text-overflow: -o-ellipsis-lastline; */ overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; } .volume_content .volume_content_bottom .goods_list .li .right .goods_price { height: 42rpx; font-size: 28rpx; line-height: 42rpx; color: #ff2c29; }