.details .surface_plot { position: relative; width: 100%; min-height: 400rpx; background-color: #fff; } .details .surface_plot image { width: 100%; } .details .recommend { position: absolute; left: 19rpx; bottom: 43rpx; width: 317rpx; height: 77rpx; background-color: rgba(255, 99, 51, 0.8); border-radius: 39rpx; display: flex; } .details .recommend .left { width: 79rpx; height: 79rpx; border-radius: 50%; } .details .recommend .left image { width: 100%; height: 100%; border-radius: 50%; } .details .recommend .right { flex: 1; font-size: 28rpx; font-weight: normal; font-stretch: normal; line-height: 36rpx; color: #fff; /* text-overflow: -o-ellipsis-lastline; */ overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; padding-right: 30rpx; } .details_message { padding-top: 23rpx; padding-left: 25rpx; background-color: #fff; margin-bottom: 20rpx; } .details_message .top { display: flex; justify-content: space-between; padding-bottom: 26rpx; } .details_message .top .left { width: 574rpx; font-size: 32rpx; line-height: 40rpx; color: #000; /* text-overflow: -o-ellipsis-lastline; */ overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; } .details_message .top .share { width: 113rpx; height: 49rpx; background-color: #f4f4f4; border-radius: 25rpx 0rpx 0rpx 25rpx; display: flex; align-items: center; } .details_message .top .share .shareleft { margin-left: 12rpx; } .details_message .top .share .shareleft .iconfont { font-size: 30rpx; } .details_message .top .share .shareright { font-size: 24rpx; line-height: 40rpx; color: #000; margin-left: 7rpx; } .details_message .bottom { display: flex; padding-bottom: 22rpx; } .details_message .bottom .li { width: 50%; display: flex; align-items: center; justify-content: center; } .details_message .bottom .li .iconfont { font-size: 28rpx; color: #9f9f9f; } .details_message .bottom .li .partake_right, .details_message .bottom .li .poster_right { font-size: 24rpx; line-height: 40rpx; color: #9f9f9f; margin-left: 15rpx; } .select_list { background: #fff; padding-bottom: 40rpx; } .select_list .tilte { font-size: 36rpx; line-height: 40rpx; color: #000; padding-left: 32rpx; padding-top: 20rpx; padding-bottom: 41rpx; } .select_list .li { display: flex; align-items: center; padding-left: 30rpx; padding-bottom: 22rpx; } .select_list .li .details { margin-left: 16rpx; display: flex; } .select_list .li .details .left { width: 225rpx; height: 225rpx; background-color: #000; border-radius: 10rpx; } .select_list .li .details .left image { width: 100%; height: 100%; border-radius: 10rpx; } .select_list .li .details .right { margin-left: 17rpx; display: flex; flex-direction: column; justify-content: space-between; flex: 1; } .select_list .li .details .right .top { font-size: 28rpx; line-height: 40rpx; color: #000; /* text-overflow: -o-ellipsis-lastline; */ overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; } .select_list .li .details .right .bottom { font-size: 28rpx; line-height: 40rpx; color: #ff2c29; } .activity_content { background-color: #fff; } .activity_content .top { font-size: 36rpx; line-height: 40rpx; color: #000; padding-left: 32rpx; padding-bottom: 36rpx; } .activity_content .bottom { padding-left: 25rpx; padding-right: 25rpx; } .btngroup { position: fixed; left: 0; bottom: 0; width: 100%; height: 100rpx; background-color: #fff; display: flex; align-items: center; } .btngroup .left { padding-left: 26rpx; display: flex; } .btngroup .left .li { margin-right: 44rpx; } .btngroup .left .iconfont { font-size: 40rpx; color: #7e7e7e; } .btngroup .left .bottom { font-size: 24rpx; line-height: 38rpx; color: #7e7e7e; text-align: center; } .btngroup .right .buybtn { width: 423rpx; height: 73rpx; border-radius: 37rpx; font-size: 32rpx; color: #ffff; line-height: 73rpx; text-align: center; background-color: #999; } .btngroup .right .buybtn.active { background-image: linear-gradient( 90deg, #ff6333 0%, #ff2c29 100% ), linear-gradient( #ff7653, #ff7653 ); background-blend-mode: normal, normal; } .details_title { position: fixed; left: 0; top: 0; width: 100%; display: flex; z-index: 10; } .details_title .li { flex: 1; text-align: center; height: 70rpx; font-size: 28rpx; line-height: 70rpx; color: #7e7e7e; background: #fff; } .postershow { width: 100%; height: 100%; } .postershow image { border-radius: 25rpx; width: 100%; height: 100%; } .postershow .close { position: absolute; width: 48rpx; height: 48rpx; left: 50%; margin-left: -24rpx; bottom: -76rpx; } .postershow .close .icon-adsystem_icon_cancle { color: #fff; font-size: 80rpx; } .specifications { display: block; padding-top: 20rpx; width: 100%; } .specifications .icon_close { position: absolute; top: -40rpx; right: 0; width: 80rpx; height: 100rpx; } .specifications .icon_close .guanbi_icon { position: absolute; left: 25%; top: 50%; width: 40rpx; } .specifications .shopimg { display: flex; overflow: visible; } .specifications .shopimg .chooser_img { position: relative; width: 180rpx; height: 180rpx; overflow: visible; } .specifications .shopimg .chooser_img image { position: absolute; top: -70rpx; left: 20rpx; width: 100%; border-radius: 4rpx; border: 2rpx solid #f0f1f3; } .specifications .shopimg .right { margin-left: 60rpx; } .specifications .shopimg .price { color: #f15353; font-size: 32rpx; line-height: 60rpx; height: 60rpx; overflow: hidden; } .specifications .shopimg .price text { font-size: 36rpx; } .specifications .shopimg .option { color: #999; font-size: 20rpx; line-height: 32rpx; height: 32rpx; overflow: hidden; } .specifications .goodsnum { border-top: solid 2rpx #f2f2f2; border-bottom: solid 2rpx #f2f2f2; margin: 40rpx 28rpx; padding: 0; font-size: 28rpx; display: flex; justify-content: space-between; } .specifications .goodsnum .num { height: 120rpx; line-height: 120rpx; } .specifications .goodsnum .calculation { display: flex; margin-top: 32rpx; border-radius: 4rpx; background-color: #fff; } .specifications .goodsnum .calculation .leftnav { height: 56rpx; width: 56rpx; background-color: #f2f2f2; color: #999; text-align: center; border-radius: 4rpx; line-height: 56rpx; font-size: 36rpx; font-weight: bold; } .specifications .goodsnum .calculation .shownum { height: 56rpx; width: 56rpx; border: 0; margin: 0px 8px; padding: 0; text-align: center; color: #333; } .specifications .goodsnum .calculation .rightnav { height: 56rpx; width: 56rpx; background-color: #f2f2f2; color: #999; text-align: center; border-radius: 4rpx; line-height: 56rpx; font-size: 36rpx; font-weight: bold; } .specifications .shopinfo { text-align: left; padding-left: 20rpx; margin: 20rpx 0; max-height: 200rpx; overflow: scroll; } .specifications .shopinfo .dl .dt { margin-bottom: 10rpx; } .specifications .shopinfo .dl .dd { margin-bottom: 10rpx; display: flex; flex-wrap: wrap; } .specifications .shopinfo .dl .dd .spec { border: 1px solid #bfcbd9; padding: 10rpx; min-width: 50rpx; border-radius: 6rpx; margin-right: 10rpx; margin-bottom: 10rpx; text-align: center; } .specifications .shopinfo .dl .dd .spec.sele { background-color: #f15353; border-color: #f15353; color: #fff; } .specifications .shopinfo .dl .dd .spec.disab { opacity: 0.5; } .specifications .subbtn { line-height: 100rpx; width: 100%; text-align: center; background: #e64340; color: #fff; font-size: 30rpx; }