/* packageD/directSeeding/livePage/livePage.wxss */ page { width: 100%; /* height: 100vh; */ } .backRight { display: flex; align-items: center; margin-right: 14rpx; } .backRight van-icon { display: flex; align-items: center; } .directSeeding { position: relative; width: 100%; background-image: url("https://mini-app-img-1251768088.cos.ap-guangzhou.myqcloud.com/livePK_bg.png"); background-size: 100% 100%; /* height: 100vh; */ } .directSeeding live-player { /* width: 100%; height: 100vh; */ } .directSeeding .directSeeding_content { position: absolute; z-index: 10; top: 0; /* left: 0; right: 0; bottom: 0; */ } .directSeeding .directSeeding_content .directSeeding_content_top { display: flex; padding-left: 25rpx; padding-top: 10rpx; /* justify-content: space-between; */ padding-right: 29rpx; } .directSeeding .directSeeding_content .directSeeding_content_top .personal_information { display: flex; /* min-width: 295rpx; min-height: 53rpx; */ align-items: center; background-color: rgba(0, 0, 0, 0.4); border-radius: 60rpx; padding: 11rpx 14rpx; margin-right: 10rpx; } .directSeeding .directSeeding_content .directSeeding_content_top .personal_information .information_left { width: 48rpx; height: 48rpx; background-color: #333; border: solid 2rpx #f2f2f7; border-radius: 50%; margin-right: 8rpx; } .directSeeding .directSeeding_content .directSeeding_content_top .personal_information .information_left image { width: 100%; height: 100%; border-radius: 50%; } .directSeeding .directSeeding_content .directSeeding_content_top .personal_information .information_center { margin-right: 3rpx; } .directSeeding .directSeeding_content .directSeeding_content_top .personal_information .information_center .top { font-size: 24rpx; color: #fff; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; width: 160rpx; } .directSeeding .directSeeding_content .directSeeding_content_top .personal_information .information_center .bottom { font-size: 24rpx; color: #fff; min-width: 160rpx; } .directSeeding .directSeeding_content .directSeeding_content_top .personal_information .information_right { width: 84rpx; height: 42rpx; background-color: #fff; border-radius: 21rpx; font-size: 24rpx; line-height: 42rpx; text-align: center; color: #f10505; } .share_message { display: flex; align-items: center; flex-direction: column; justify-content: center; position: absolute; right: 25rpx; bottom: 80rpx; z-index: 14; } .share_message .share_message_left { width: 64rpx; height: 64rpx; background-color: rgba(0, 0, 0, 0.4); border-radius: 50%; display: flex; align-items: center; justify-content: center; margin-bottom: 31rpx; } .share_message .share_message_left icon { font-size: 46rpx; color: #fff; } .directSeeding .directSeeding_content .directSeeding_content_center { display: flex; justify-content: flex-end; padding-top: 50rpx; padding-right: 27rpx; padding-bottom: 14rpx; /* margin-bottom: 190rpx; */ } .directSeeding .directSeeding_content .directSeeding_content_center .preferential_list { box-sizing: border-box; /* padding-top: 47rpx; */ /* height: 359rpx; */ width: 170rpx; /* border: 1px solid #333; */ } .directSeeding .directSeeding_content .directSeeding_content_center .preferential_list image { width: 100%; /* height: 100%; */ } /* .directSeeding .directSeeding_content .directSeeding_content_center .preferential_list .tilie { font-size: 28rpx; color: #6100d4; text-align: center; padding-bottom: 20rpx; } .directSeeding .directSeeding_content .directSeeding_content_center .preferential_list .li { height: 54rpx; line-height: 54rpx; color: #ed6603; text-align: center; font-size: 22rpx; border-bottom: 1px solid #b4c4db; margin-left: 12rpx; margin-right: 12rpx; } */ .directSeeding .directSeeding_content .directSeeding_content_bottom { position: absolute; left: 0; right: 0; bottom: 10rpx; z-index: 5; } .directSeeding .directSeeding_content .directSeeding_content_bottom .gift_screen { overflow: hidden; width: 100%; } .directSeeding .directSeeding_content .directSeeding_content_bottom .gift_screen .ul { display: flex; align-items: center; } .directSeeding .directSeeding_content .directSeeding_content_bottom .gift_screen .li { flex-shrink: 0; display: flex; align-items: center; /* min-width: 247rpx; */ min-height: 65rpx; /* background-color: rgba(0, 0, 0, 0.4); */ border-radius: 32.5rpx; padding-right: 92rpx; box-sizing: border-box; } .directSeeding .directSeeding_content .directSeeding_content_bottom .gift_screen .li .li_left { width: 65rpx; height: 65rpx; background-color: #fff; border: solid 2rpx #fff; border-radius: 50%; margin-right: 6rpx; } .directSeeding .directSeeding_content .directSeeding_content_bottom .gift_screen .li .li_left image { width: 65rpx; height: 65rpx; border-radius: 50%; } .directSeeding .directSeeding_content .directSeeding_content_bottom .gift_screen .li .li_right .top { font-size: 28rpx; color: #fff; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; width: 168rpx; } .directSeeding .directSeeding_content .directSeeding_content_bottom .gift_screen .li .li_right .bottom { font-size: 22rpx; color: #fff; } .directSeeding .directSeeding_content .directSeeding_content_bottom .gift_screen { margin-bottom: 12rpx; } .directSeeding .directSeeding_content .directSeeding_content_bottom .purchase_tips { display: flex; margin-bottom: 17rpx; } .directSeeding .directSeeding_content .directSeeding_content_bottom .purchase_tips .purchase_tips_content { margin-left: 25rpx; height: 44rpx; overflow-y: auto; background-color: #d19e1c; border-radius: 22rpx; } .directSeeding .directSeeding_content .directSeeding_content_bottom .purchase_tips .purchase_tips_content .li { min-width: 364rpx; height: 44rpx; display: flex; align-items: center; color: #fff; font-size: 24rpx; padding-left: 14rpx; padding-right: 14rpx; } /* .directSeeding .directSeeding_content .directSeeding_content_bottom .purchase_tips .purchase_tips_content .img { width: 28rpx; height: 28rpx; } */ .directSeeding .directSeeding_content .directSeeding_content_bottom .purchase_tips .purchase_tips_content .buyicon { display: flex; align-items: center; font-size: 30rpx; margin-right: 4rpx; } /* .directSeeding .directSeeding_content .directSeeding_content_bottom .purchase_tips .purchase_tips_content .icon {} */ .directSeeding .directSeeding_content .directSeeding_content_bottom .purchase_tips .purchase_tips_content .name { max-width: 160rpx; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .directSeeding .directSeeding_content .directSeeding_content_bottom .chat_messages { margin-left: 25rpx; height: 260rpx; overflow-y: scroll; } .directSeeding .directSeeding_content .directSeeding_content_bottom .chat_messages .li { max-width: 552rpx; min-height: 49rpx; align-items: center; background-color: rgba(0, 0, 0, 0.4); border-radius: 6rpx; padding: 4rpx 6rpx; line-height: 40rpx; display: flex; flex-wrap: wrap; color: #fff; font-size: 28rpx; margin-bottom: 10rpx; } .directSeeding .directSeeding_content .directSeeding_content_bottom .chat_messages .li .text { /* white-space: pre-wrap; */ } .directSeeding .directSeeding_content .directSeeding_content_bottom .chat_messages .li .characteristic { width: 50rpx; height: 50rpx; color: #fff; border-radius: 6rpx; margin-right: 8rpx; display: inline-block; } .level_tag { position: absolute; bottom: 0; right: 0; min-width: 22rpx; height: 22rpx; border-radius: 11rpx; font-size: 16rpx; text-align: center; line-height: 22rpx; color: #fff; } .level_tag.color_0 { background-color: #00f3d4; } .level_tag.color_1, .level_tag.color_2 { background-color: #ffc323; } .level_tag.color_3, .level_tag.color_4 { background-color: #ff7f29; } .level_tag.color_5, .level_tag.color_6 { background-color: #ff2c29; } .level_tag.color_7, .level_tag.color_8 { background-color: #6700f3; } .level_tag.color_9, .level_tag.color_10 { background-color: #f30061; } .directSeeding .directSeeding_content .directSeeding_content_bottom .chat_messages .li .characteristic .characteristic_li { width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; position: relative; } .directSeeding .directSeeding_content .directSeeding_content_bottom .chat_messages .li .characteristic .img { width: 40rpx; height: 40rpx; border: solid 2rpx #fff; vertical-align: middle; border-radius: 50%; } .level_tag.color_0 { background-color: #00f3d4; } .level_tag.color_1, .level_tag.color_2 { background-color: #ffc323; } .level_tag.color_3, .level_tag.color_4 { background-color: #ff7f29; } .level_tag.color_5, .level_tag.color_6 { background-color: #ff2c29; } .level_tag.color_7, .level_tag.color_8 { background-color: #6700f3; } .level_tag.color_9, .level_tag.color_10 { background-color: #f30061; } .directSeeding .directSeeding_content .directSeeding_content_bottom .chat_messages .li .characteristic.color_0 { background-color: #00f3d4; } .directSeeding .directSeeding_content .directSeeding_content_bottom .chat_messages .li .characteristic.color_1, .directSeeding .directSeeding_content .directSeeding_content_bottom .chat_messages .li .characteristic.color_2 { background-color: #ffc323; } .directSeeding .directSeeding_content .directSeeding_content_bottom .chat_messages .li .characteristic.color_3, .directSeeding .directSeeding_content .directSeeding_content_bottom .chat_messages .li .characteristic.color_4 { background-color: #ff7f29; } .directSeeding .directSeeding_content .directSeeding_content_bottom .chat_messages .li .characteristic.color_5, .directSeeding .directSeeding_content .directSeeding_content_bottom .chat_messages .li .characteristic.color_6 { background-color: #ff2c29; } .directSeeding .directSeeding_content .directSeeding_content_bottom .chat_messages .li .characteristic.color_7, .directSeeding .directSeeding_content .directSeeding_content_bottom .chat_messages .li .characteristic.color_8 { background-color: #6700f3; } .directSeeding .directSeeding_content .directSeeding_content_bottom .chat_messages .li .characteristic.color_9, .directSeeding .directSeeding_content .directSeeding_content_bottom .chat_messages .li .characteristic.color_10 { background-color: #f30061; } /* .directSeeding .directSeeding_content .directSeeding_content_bottom .chat_messages .name {} */ .directSeeding .directSeeding_content .directSeeding_content_bottom .chat_messages .li .name.color_0 { color: #00f3d4; } .directSeeding .directSeeding_content .directSeeding_content_bottom .chat_messages .li .name.color_1, .directSeeding .directSeeding_content .directSeeding_content_bottom .chat_messages .li .name.color_2 { color: #ffc323; } .directSeeding .directSeeding_content .directSeeding_content_bottom .chat_messages .li .name.color_3, .directSeeding .directSeeding_content .directSeeding_content_bottom .chat_messages .li .name.color_4 { color: #ff7f29; } .directSeeding .directSeeding_content .directSeeding_content_bottom .chat_messages .li .name.color_5, .directSeeding .directSeeding_content .directSeeding_content_bottom .chat_messages .li .name.color_6 { color: #ff2c29; } .directSeeding .directSeeding_content .directSeeding_content_bottom .chat_messages .li .name.color_7, .directSeeding .directSeeding_content .directSeeding_content_bottom .chat_messages .li .name.color_8 { color: #6700f3; } .directSeeding .directSeeding_content .directSeeding_content_bottom .chat_messages .li .name.color_9, .directSeeding .directSeeding_content .directSeeding_content_bottom .chat_messages .li .name.color_10 { color: #f30061; } .directSeeding .directSeeding_content .directSeeding_content_bottom .interaction_bottom { display: flex; justify-content: space-between; margin-right: 30rpx; position: relative; z-index: 99; } .directSeeding .directSeeding_content .directSeeding_content_bottom .interaction_bottom .left { display: flex; padding-top: 16rpx; } .directSeeding .directSeeding_content .directSeeding_content_bottom .interaction_bottom .right { display: flex; } .directSeeding .directSeeding_content .directSeeding_content_bottom .interaction_bottom .good { width: 80rpx; height: 80rpx; display: flex; align-items: center; justify-content: center; font-size: 40rpx; border-radius: 50%; position: relative; margin-left: 25rpx; margin-right: 18rpx; } .directSeeding .directSeeding_content .directSeeding_content_bottom .interaction_bottom .good .icon-zb_goods { font-size: 60rpx; color: #fc7d26; } .directSeeding .directSeeding_content .directSeeding_content_bottom .interaction_bottom .good .num { position: absolute; top: -4rpx; right: 0; background: #6100d4; border-radius: 50%; display: flex; min-width: 36rpx; height: 36rpx; justify-content: center; align-items: center; font-size: 24rpx; color: #fff; } .directSeeding .directSeeding_content .directSeeding_content_bottom .interaction_bottom .chat_content { width: 273rpx; height: 68rpx; border-bottom: 1px solid #fff; margin-right: 47rpx; } .directSeeding .directSeeding_content .directSeeding_content_bottom .interaction_bottom .chat_content .text { width: 273rpx; line-height: 68rpx; font-size: 32rpx; color: #fefefe; padding-left: 4rpx; } .directSeeding .directSeeding_content .directSeeding_content_bottom .interaction_bottom .chaticon_list { display: flex; } .directSeeding .directSeeding_content .directSeeding_content_bottom .interaction_bottom .chaticon_list .li { margin-right: 48rpx; position: relative; } .directSeeding .directSeeding_content .directSeeding_content_bottom .interaction_bottom .chaticon_list .li .top { width: 64rpx; height: 64rpx; background-color: rgba(0, 0, 0, 0.4); border-radius: 50%; display: flex; align-items: center; justify-content: center; } .directSeeding .directSeeding_content .directSeeding_content_bottom .interaction_bottom .chaticon_list .li .top .iconfont { color: #fff; font-size: 40rpx; } .directSeeding .directSeeding_content .directSeeding_content_bottom .interaction_bottom .chaticon_list .li .top .img { width: 40rpx; height: 40rpx; } .directSeeding .directSeeding_content .directSeeding_content_bottom .interaction_bottom .chaticon_list .bottom { padding-top: 11rpx; height: 21rpx; font-size: 22rpx; color: #fefefe; line-height: 21rpx; text-align: center; } .directSeeding .directSeeding_content .directSeeding_content_bottom .interaction_bottom .chaticon_list .li.active .top .icon-zb_all_like { color: #fc7d26; } .directSeeding .directSeeding_content .directSeeding_content_bottom .interaction_bottom .chaticon_list .li.shownum .num { position: absolute; top: -14rpx; right: -10rpx; background: #fa0; border-radius: 50%; display: flex; min-width: 36rpx; height: 36rpx; justify-content: center; align-items: center; font-size: 24rpx; color: #fff; } .directSeeding .directSeeding_content .directSeeding_content_bottom .interaction_bottom .chaticon_list .GiftBtn-box { margin-right: 0; } /* .directSeeding .directSeeding_content .directSeeding_content_bottom .interaction_bottom .text {} */ .directSeeding .directSeeding_content .directSeeding_content_bottom .interaction_bottom .chat { width: 329rpx; height: 80rpx; background-color: rgba(0, 0, 0, 0.4); border-radius: 40rpx; display: flex; align-items: center; padding-left: 10rpx; font-size: 32rpx; color: #fff; margin-right: 30rpx; } .directSeeding .directSeeding_content .directSeeding_content_bottom .interaction_bottom .chat .left { font-size: 38rpx; margin-right: 10rpx; display: flex; align-items: center; } /* .directSeeding .directSeeding_content .directSeeding_content_bottom .interaction_bottom .chat .img { width: 38rpx; height: 38rpx; margin-right: 10rpx; } */ .directSeeding .directSeeding_content .directSeeding_content_bottom .interaction_bottom .chat .text { color: #fefefe; } /* .directSeeding .directSeeding_content .directSeeding_content_bottom .interaction_bottom .chat textarea { flex: 1; height: 40rpx; margin-left: 13rpx; } */ .directSeeding .directSeeding_content .directSeeding_content_bottom .interaction_bottom .chat_list { display: flex; justify-content: flex-end; } .directSeeding .directSeeding_content .directSeeding_content_bottom .interaction_bottom .chat_list .li { width: 80rpx; height: 80rpx; background-color: rgba(0, 0, 0, 0.4); display: flex; align-items: center; justify-content: center; font-size: 40rpx; border-radius: 50%; margin-right: 30rpx; } .directSeeding .directSeeding_content .directSeeding_content_bottom .interaction_bottom .chat_list .li.showGood { position: relative; } .directSeeding .directSeeding_content .directSeeding_content_bottom .interaction_bottom .chat_list .li.showGood .iconfont { display: flex; align-items: center; font-size: 55rpx; } .directSeeding .directSeeding_content .directSeeding_content_bottom .interaction_bottom .chat_list .li.showGood .num { position: absolute; top: -4rpx; right: 0; background: #6100d4; border-radius: 50%; display: flex; min-width: 36rpx; height: 36rpx; justify-content: center; align-items: center; font-size: 24rpx; color: #fff; } .directSeeding .directSeeding_content .directSeeding_content_bottom .interaction_bottom .chat_list .li.shownum { margin-right: 0; position: relative; } .directSeeding .directSeeding_content .directSeeding_content_bottom .interaction_bottom .chat_list .li.shownum .num { position: absolute; top: -4rpx; right: 0; background: #fa0; border-radius: 50%; display: flex; min-width: 36rpx; height: 36rpx; justify-content: center; align-items: center; font-size: 24rpx; color: #fff; } .directSeeding .directSeeding_content .directSeeding_content_bottom .interaction_bottom .chat_list .li .img { width: 47rpx; height: 47rpx; } .directSeeding .directSeeding_content .directSeeding_content_bottom .interaction_bottom .chat_list .li.li_0 { background-image: linear-gradient( 0deg, #ea650a 0%, #fed279 100% ), linear-gradient( #000, #000 ); } .directSeeding .directSeeding_content .directSeeding_content_bottom .interaction_bottom .chat_list .li.li_0 .iconfont { color: #fff; } .directSeeding .directSeeding_content .directSeeding_content_bottom .interaction_bottom .chat_list .li.li_1 .iconfont { color: #f30061; } .directSeeding .directSeeding_content .directSeeding_content_bottom .interaction_bottom .chat_list .li.li_2 .iconfont { color: #ffc323; } /* .directSeeding .directSeeding_content .directSeeding_content_bottom .interaction_bottom .chat_list .li {} */ .directSeeding .directSeeding_content .directSeeding_content_bottom .interaction_bottom .chat_list .li.li_2 { margin-right: 0; margin-left: 60rpx; } .directSeeding .success_tips { width: 251rpx; height: 72rpx; background-color: rgba(0, 0, 0, 0.4); border-radius: 36rpx; color: #fff; text-align: center; line-height: 72rpx; margin: 0 auto; } .shade { position: absolute; background-color: rgba(0, 0, 0, 0.6); left: 0; right: 0; bottom: 0; top: 0; z-index: 10; } .chatInput { position: absolute; left: 0; right: 0; bottom: 0; height: 100rpx; z-index: 11; background-color: #f6f6f6; } .chatInput .chatInputContent { display: flex; height: 100%; align-items: center; padding-left: 25rpx; } .chatInput .chatInputContent .submit { width: 127rpx; height: 70rpx; background-color: #ee0223; border-radius: 39rpx; margin-left: 18rpx; font-size: 30rpx; line-height: 70rpx; text-align: center; color: #fff; } .chatInputContent .cover-input { width: 538rpx; height: 78rpx; background-color: #fff; border-radius: 10rpx; padding-left: 17rpx; } .chatInputContent .input { height: 78rpx; line-height: 78rpx; } .sharing_code { z-index: 11; width: 500rpx; height: auto; /* background-color: #ffffff; */ border-radius: 16rpx; position: absolute; left: 50%; top: 50%; margin-top: -441rpx; margin-left: -250rpx; overflow: visible; } .sharing_code .close_icon { position: absolute; z-index: 12; bottom: -121rpx; left: 50%; margin-left: -32rpx; width: 64rpx; height: 64rpx; border-radius: 50%; border: 1px solid #fff; display: flex; align-items: center; justify-content: center; } .sharing_code .close_icon .iconfont { display: flex; align-items: center; justify-content: center; font-size: 40rpx; color: #fff; } .sharing_code .icon_btn { width: 100%; position: fixed; bottom: 80rpx; left: 0; /* height: 120rpx; */ background: #fff; text-align: center; display: flex; justify-content: space-around; } .sharing_code .icon_btn .box { width: 50%; display: flex; align-items: center; flex-direction: column; justify-content: center; text-align: center; padding: 20rpx 0; position: relative; } .sharing_code .icon_btn image { width: 80rpx; height: 80rpx; margin-bottom: 8rpx; } .sharing_code .icon_close { position: fixed; bottom: 0rpx; left: 0; width: 100%; height: 90rpx; line-height: 90rpx; text-align: center; background: #efefef; color: #333; font-size: 32rpx; } .anchorman_details { position: absolute; z-index: 12; left: 50%; top: 50%; margin-top: -285rpx; margin-left: -310rpx; width: 620rpx; height: 570rpx; background-color: #fff; border-radius: 16rpx; overflow-y: visible; } .anchorman_details .photo { position: absolute; z-index: 12; width: 168rpx; height: 168rpx; /* margin: auto; */ left: 50%; top: -84rpx; margin-left: -84rpx; background-color: #333; border: solid 6rpx #fff; border-radius: 50%; } .anchorman_details .photo image { width: 100%; height: 100%; border-radius: 50%; } .anchorman_details .name { padding-top: 104rpx; font-size: 36rpx; line-height: 36rpx; color: #000; text-align: center; margin-bottom: 16rpx; } .anchorman_details .anchorma_type { display: flex; align-items: center; justify-content: center; height: 53rpx; margin-bottom: 70rpx; } .anchorman_details .anchorma_type .left { height: 53rpx; line-height: 53rpx; font-size: 28rpx; color: #000; margin-right: 15rpx; } .anchorman_details .anchorma_type .right { width: 106rpx; height: 53rpx; background-color: #ff7200; border-radius: 26.5rpx; line-height: 53rpx; text-align: center; color: #fff; } .anchorman_details .anchorma_type .right.active { background-color: #999; } .anchorman_details .anchorm_follow { display: flex; justify-content: center; } .anchorman_details .anchorm_follow .anchorm_follow_left { margin-right: 26rpx; } .anchorman_details .anchorm_follow .anchorm_follow_left, .anchorman_details .anchorm_follow .anchorm_follow_right { width: 256rpx; text-align: center; } .anchorman_details .anchorm_follow .top { font-size: 48rpx; line-height: 36rpx; color: #000; margin-bottom: 34rpx; } .anchorman_details .anchorm_follow .center { font-size: 28rpx; line-height: 36rpx; color: #999; margin-bottom: 43rpx; } .anchorman_details .anchorm_follow .bottom { width: 256rpx; height: 80rpx; background-color: #ff7200; border-radius: 40rpx; text-align: center; line-height: 80rpx; color: #fff; } .anchorman_details .anchorm_follow .anchorm_follow_right .bottom { background-color: #7e02e7; } .anchorman_details .close { z-index: 12; position: absolute; top: 26rpx; right: 31rpx; width: 28rpx; height: 28rpx; } .anchorman_details .close .img { width: 100%; height: 100%; } .goods_list { z-index: 12; position: absolute; left: 0; right: 0; bottom: 0; height: 627rpx; padding-top: 38rpx; background-color: #fff; overflow-y: scroll; border-top-left-radius: 15rpx; border-top-right-radius: 15rpx; } .goods_list .close { position: absolute; width: 50rpx; height: 50rpx; display: flex; align-items: center; justify-content: center; top: 10rpx; right: 20rpx; z-index: 15; } .goods_list .close .iconfont { font-size: 30rpx; } .goods_list .ul .li { padding-top: 22rpx; padding-bottom: 26rpx; border-bottom: 1px solid #f3f3f4; margin-left: 25rpx; margin-right: 25rpx; display: flex; } .goods_list .ul .li .li_left { width: 157rpx; height: 158rpx; background-color: #333; border-radius: 8rpx; margin-right: 28rpx; position: relative; } .goods_list .ul .li .li_left .tag { position: absolute; left: 0; top: 0; color: #fff; line-height: 33rpx; text-align: center; padding-left: 6rpx; padding-right: 6rpx; min-width: 45rpx; height: 33rpx; background-color: #ff9c00; border-radius: 7.5rpx 0rpx 7.5rpx 0rpx; } .goods_list .ul .li .li_left image { width: 100%; height: 100%; } .goods_list .ul .li .li_right { flex: 1; } .goods_list .ul .li .li_right .name { font-size: 28rpx; line-height: 36rpx; color: #010101; white-space: pre-wrap; height: 108rpx; /* text-overflow: -o-ellipsis-lastline; */ overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; } .goods_list .ul .li .li_right .bottom { display: flex; justify-content: space-between; align-items: center; } .goods_list .ul .li .li_right .bottom .left { display: flex; align-items: center; } .goods_list .ul .li .li_right .bottom .left .symbol { font-size: 24rpx; line-height: 36rpx; color: #999; } .goods_list .ul .li .li_right .bottom .left .num { font-size: 34rpx; line-height: 36rpx; color: #f53c3f; } .goods_list .ul .li .li_right .bottom .right { width: 49rpx; height: 49rpx; background-color: #f21a1b; color: #fff; display: flex; align-items: center; justify-content: center; border-radius: 50%; } .goods_list .ul .li .li_right .bottom .right .iconfont { display: flex; align-items: center; font-size: 32rpx; justify-content: center; } /* .goods_list .ul .li .li_right .bottom .right image { width: 100%; height: 100%; } */ .gift_list { position: absolute; z-index: 12; left: 0; right: 0; bottom: 0; /* height: 640rpx; */ background-color: #fff; border-radius: 20rpx 20rpx 0rpx 0rpx; padding-bottom: 10rpx; padding-top: 34rpx; } .gift_list .close { position: absolute; width: 50rpx; height: 50rpx; display: flex; align-items: center; justify-content: center; top: 10rpx; right: 20rpx; z-index: 15; } .gift_list .close .iconfont { font-size: 30rpx; } .gift_list .contentTop { overflow-y: auto; } .gift_list .gift_list_top { display: flex; flex-wrap: wrap; padding-left: 10rpx; /* padding-top: 23rpx; */ /* height: 300rpx; */ padding-top: 4rpx; } .gift_list .gift_list_top .li { flex-shrink: 0; width: 180rpx; display: flex; flex-direction: column; align-items: center; border: 1px solid #fff; padding-top: 10rpx; padding-bottom: 10rpx; } .gift_list .gift_list_top .li.active { border: 1px solid #ff3902; } .gift_list .gift_list_top .li .top { width: 114rpx; height: 114rpx; } .gift_list .gift_list_top .li .top image { width: 100%; height: 100%; } .gift_list .gift_list_top .li .name { font-size: 24rpx; line-height: 36rpx; color: #000; padding-bottom: 6rpx; } .gift_list .gift_list_top .li .center { font-size: 20rpx; line-height: 26rpx; letter-spacing: 0rpx; color: #666; } .gift_list .gift_list_top .li .bottom { font-size: 20rpx; line-height: 26rpx; letter-spacing: 0rpx; color: #666; } .gift_list .gift_list_bottom { /* position: absolute; left: 0; right: 0; bottom: 0; */ display: flex; justify-content: space-between; padding-left: 31rpx; padding-right: 26rpx; padding-top: 10rpx; height: 130rpx; align-items: center; border-top: 1px solid #f6f6f6; } .gift_list .gift_list_bottom .gift_list_bottom_left .left_li { height: 45rpx; line-height: 45rpx; display: flex; align-items: center; } .gift_list .gift_list_bottom .gift_list_bottom_left .left_li .left { width: 30rpx; height: 30rpx; border: 1px solid #666; border-radius: 50%; margin-right: 7rpx; } .gift_list .gift_list_bottom .gift_list_bottom_left .left_li .right { font-size: 26rpx; line-height: 30rpx; color: #000; } .gift_list .gift_list_bottom .gift_list_bottom_left .left_li .left.active { border: 1px solid #f15353; background: url("https://mini-app-img-1251768088.cos.ap-guangzhou.myqcloud.com/goods_finish.png") no-repeat center; background-size: 100% 100%; } .gift_list .gift_list_bottom .gift_list_bottom_right { width: 160rpx; height: 59rpx; background-image: linear-gradient( 90deg, #f23a3a 0%, #f75f30 100% ), linear-gradient( #e93534, #e93534 ); background-blend-mode: normal, normal; /* background-color: #e93534; */ border-radius: 29.5rpx; text-align: center; color: #fff; line-height: 59rpx; font-size: 36rpx; } .marketing_list { width: 620rpx; height: 846rpx; background-color: #fff; border-radius: 20rpx; overflow: visible; } .marketing_list .marketing_content { padding-top: 49rpx; } .marketing_list .title { display: flex; align-items: center; justify-content: center; height: 40rpx; } .marketing_list .title .left { display: flex; align-items: center; } .marketing_list .title .left .circle { width: 20rpx; height: 20rpx; background-color: #d56604; border-radius: 50%; } .marketing_list .title .left .line { width: 105rpx; height: 4rpx; background-color: #d56604; } .marketing_list .title .name { line-height: 40rpx; font-size: 36rpx; /* color: #ffffff; */ } .marketing_list .title .right { display: flex; align-items: center; } .marketing_list .title .right .circle { width: 20rpx; height: 20rpx; background-color: #d56604; border-radius: 50%; } .marketing_list .title .right .line { width: 105rpx; height: 4rpx; background-color: #d56604; } .marketing_list .marketing_content .list { padding-top: 80rpx; margin-left: 45rpx; margin-right: 45rpx; height: 450rpx; overflow-y: scroll; margin-bottom: 31rpx; } .marketing_list .marketing_content .list .li { background-color: #ff7800; padding-top: 8rpx; padding-bottom: 8rpx; display: flex; align-items: center; border-radius: 10rpx; margin-bottom: 31rpx; } .marketing_list .marketing_content .list .li .left { width: 163rpx; height: 75rpx; border-right: 1px dashed #fff; display: flex; justify-content: center; align-items: center; color: #fff; margin-right: 29rpx; } .marketing_list .marketing_content .list .li .left .num { font-size: 48rpx; margin-right: 14rpx; } .marketing_list .marketing_content .list .li .left .pic { font-size: 25.89rpx; } .marketing_list .marketing_content .list .li .right { display: flex; flex: 1; justify-content: space-between; align-items: center; padding-right: 25rpx; } .marketing_list .marketing_content .list .li .right .name { font-size: 32rpx; color: #fff; } .marketing_list .marketing_content .list .li .right .btn { width: 100rpx; height: 40rpx; line-height: 40rpx; text-align: center; background-color: #fff; border-radius: 18rpx; } .marketing_list .marketing_content .list .li .right .tips { font-size: 20rpx; color: #000; } .marketing_list .marketing_content .list .li.disabled { background-color: #ccc; } .marketing_list .marketing_content .drawBtn { width: 424rpx; height: 69rpx; background-color: #ff7800; border-radius: 34.5rpx; margin: 0 auto; line-height: 69rpx; text-align: center; color: #fff; font-size: 36rpx; } .marketing_list .marketing_content .drawBtn.disabled { background-color: #999; } .marketing_list .close { position: absolute; z-index: 13; bottom: -98rpx; left: 50%; margin-left: -32.5rpx; width: 63rpx; height: 63rpx; display: flex; align-items: center; justify-content: center; border: 1px solid #fff; border-radius: 50%; } .marketing_list .close .iconfont { font-size: 40rpx; display: flex; align-items: center; color: #fff; } .lose_tips { z-index: 12; position: absolute; top: 50%; left: 50%; margin-left: -310rpx; margin-top: -270rpx; width: 620rpx; height: 474rpx; background-color: #fff; border-radius: 20rpx; overflow: visible; padding-top: 66rpx; } .lose_tips .lose_content .top { width: 110rpx; height: 110rpx; margin: 0 auto 41rpx; display: flex; align-items: center; justify-content: center; background-color: #949494; border-radius: 50%; } .lose_tips .lose_content .top .iconfont { color: #fff; font-size: 80rpx; display: flex; align-items: center; } .lose_tips .lose_content .center .tips { font-size: 48rpx; color: #000; margin-bottom: 30rpx; } .lose_tips .lose_content .center .title { font-size: 28rpx; color: #999; } .lose_tips .lose_content .center { text-align: center; margin-bottom: 65rpx; } .lose_tips .lose_content .button { width: 408rpx; height: 90rpx; background-color: #fe8a02; border-radius: 45rpx; text-align: center; line-height: 90rpx; font-size: 36rpx; color: #fff; margin: 0 auto; } .coverImg { width: 100%; height: 100%; filter: blur(15px); -webkit-filter: blur(15px); object-fit: contain; } .wechatpayContent { position: relative; width: 100%; height: 100%; } .wechatpayContent .icon-close11 { position: absolute; font-size: 40rpx; top: 20rpx; right: 41rpx; } .wechatpayContent .title { font-size: 36rpx; line-height: 36rpx; color: #000; text-align: center; padding-top: 38rpx; } .wechatpayContent .pay { font-size: 24rpx; line-height: 36rpx; color: #999; padding-top: 25rpx; padding-left: 46rpx; } .wechatpayContent .ul { padding-left: 34rpx; padding-right: 34rpx; } .wechatpayContent .ul .li { display: flex; align-items: center; justify-content: space-between; } .wechatpayContent .ul .li .left { display: flex; align-items: center; } .wechatpayContent .ul .li .left .icon-card_weixin { color: #08c160; font-size: 40rpx; margin-right: 30rpx; } .wechatpayContent .ul .li .left .payName { font-size: 28rpx; line-height: 36rpx; color: #000; } .wechatpayContent .ul .li .right { color: #ff2c29; } .wechatpayContent .wechatpaybtn { width: 120rpx; height: 50rpx; background-color: #08c160; border-radius: 10rpx; font-size: 28rpx; line-height: 50rpx; text-align: center; color: #fff; position: absolute; bottom: 40rpx; left: 50%; margin-left: -60rpx; } .show_shoplist_content { display: flex; align-items: center; flex-direction: column; justify-content: center; position: absolute; right: 0; top: -190rpx; z-index: 14; } .show_shoplist_content .show_shoplist { margin-right: 10rpx; width: 110rpx; height: 310rpx; } .show_shoplist_content .show_shoplist .li { position: relative; padding-top: 12rpx; } .show_shoplist_content .show_shoplist .li .top { width: 90rpx; height: 90rpx; border-radius: 50%; margin: 0 auto; } .show_shoplist_content .show_shoplist .li .top image { width: 100%; height: 100%; border-radius: 50%; } .show_shoplist_content .show_shoplist .li .bottom { color: #fff; font-size: 24rpx; line-height: 26rpx; text-align: center; } .show_shoplist_content .show_shoplist .li .close { width: 40rpx; height: 40rpx; display: flex; align-items: center; justify-content: center; position: absolute; right: -6rpx; top: -3rpx; } .show_shoplist_content .show_shoplist .li .close .iconfont { color: #fff; font-size: 38rpx; } .moreContent { padding-top: 39rpx; padding-left: 39rpx; display: flex; flex-wrap: wrap; } .moreContent .li { width: 110rpx; margin-bottom: 40rpx; margin-right: 31rpx; } .moreContent .li .top { width: 110rpx; height: 110rpx; border-radius: 20rpx; } .moreContent .li .top image { border-radius: 20rpx; width: 100%; height: 100%; } .moreContent .li .bottom { line-height: 36rpx; color: #999; text-align: center; padding-top: 14rpx; max-height: 72rpx; /* text-overflow: -o-ellipsis-lastline; */ overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; } .commodities { position: absolute; z-index: 12; left: 25rpx; top: 320rpx; width: 165rpx; height: 217rpx; background-color: rgba(0, 0, 0, 0.2); border-radius: 10rpx; box-sizing: border-box; padding-left: 5rpx; padding-right: 5rpx; padding-bottom: 11rpx; } .commodities .title { padding-top: 8rpx; font-size: 22rpx; line-height: 36rpx; color: #fff; text-align: center; padding-bottom: 6rpx; } .commodities .picshow { width: 155rpx; height: 155rpx; border-radius: 10rpx; position: relative; } .commodities .picshow .top { width: 100%; height: 100%; } .commodities .picshow .top image { width: 100%; height: 100%; border-radius: 10rpx; } .commodities .picshow .bottom { position: absolute; z-index: 13; left: 0; bottom: 0; width: 100%; height: 38rpx; background-color: rgba(255, 255, 255, 0.8); border-radius: 0rpx 0rpx 10rpx 10rpx; font-size: 24rpx; line-height: 38rpx; color: #ff2c29; padding-left: 11rpx; box-sizing: border-box; } .commodities .close { position: absolute; left: 0; top: -52rpx; width: 40rpx; height: 40rpx; } .commodities .close .icon-adsystem_icon_cancle { font-size: 40rpx; color: #fff; } .passwordContent .title { padding-top: 19rpx; text-align: center; padding-bottom: 50rpx; } .passwordContent .content { width: 355rpx; margin: 0 auto 50rpx; border-bottom: #bbb 1rpx solid; display: flex; align-items: center; } .passwordContent .content input { width: 100%; padding-left: 10rpx; } .passwordContent .left { float: 1; } .passwordContent .right { display: flex; align-items: center; justify-content: center; width: 100rpx; } .passwordContent .btn { background-color: #f53939; width: 600rpx; height: 80rpx; text-align: center; line-height: 80rpx; color: #fff; margin: 0 auto; font-size: 28rpx; border-radius: 20rpx; } .luck_draw_btn { position: fixed; top: 180rpx; left: 32rpx; z-index: 999; } .luck_draw_btn .luck_draw_btn_img { width: 96rpx; height: 96rpx; border-radius: 50%; overflow: hidden; margin: 0; display: block; } .luck_draw_btn .CloneBtn { color: #fff; position: absolute; top: -32rpx; left: -32rpx; } .luck_draw_btn .CloneBtn icon { font-size: 32rpx; padding: 8rpx; } .posterWord .h2 { line-height: 28px; height: 36px; text-align: center; font-size: 16px; font-weight: bold; } .advertising-Box { position: absolute; right: 44rpx; top: 188rpx; z-index: 99; } .advertising-Box .advertising-Box-child { width: 120rpx; height: 120rpx; position: relative; } .advertising-Box .advertising-Box-child image { width: 100%; height: 100%; object-fit: contain; } .advertising-Box .advertising-Box-child .icon-adsystem_icon_cancle { position: absolute; top: -28rpx; right: -32rpx; color: #fff; padding: 8rpx; } .advertising-Box .member-look-ads { margin-bottom: 24rpx; } .gift-effects { position: fixed; width: 100%; left: 0; top: 0; z-index: 1; } .gift-effects image { width: 100%; height: 100%; } .fullScreens { height: 100vh; } .topScreens { height: 50vh; } .bottomScreens { height: 50vh; top: auto; bottom: 0; } .pk-video-main { height: 40vh; width: 100%; top: auto; left: 0; bottom: 45%; position: absolute; } .pk-video-main live-player { width: 50% !important; height: 40vh !important; } .pk-video-main .videos-pk { left: auto !important; right: 0 !important; position: absolute; top: 0; width: 50% !important; height: 40vh !important; display: flex; align-items: flex-end; } .pk-video-main .videos-pk-anchor { display: flex; align-items: flex-end; z-index: 9999; } .pk-video-main .videos-pk-anchor .pkAnchor-info { display: flex; align-items: center; height: 1.375rem; line-height: 1.375rem; max-width: 8rem; margin: 0.375rem; padding: 0 0.125rem; border-radius: 1rem; overflow: hidden; background: rgba(0, 0, 0, 0.2); } .pk-video-main .videos-pk-anchor .pkAnchor-info .pkAnchor-info-avatar { width: 1.25rem; height: 1.25rem; border-radius: 50%; overflow: hidden; margin: 0; } .pk-video-main .videos-pk-anchor .pkAnchor-info .pkAnchor-info-name { font-size: 12px; color: #fff; padding: 0 0.5rem 0 0.25rem; flex: 1; text-align: left; overflow: hidden; /* 超出部分隐藏 */ text-overflow: ellipsis; /* 超出部分显示省略号 */ white-space: nowrap; /* 规定段落中的文本不进行换行 */ } .pk-video-main .pk-video-time { z-index: 999; color: #fff; text-align: center; position: absolute; left: 50%; top: -0.75rem; transform: translateX(-50%); background: rgba(0, 0, 0, 0.8); padding: 0 1.5rem; height: 1.5rem; line-height: 1.5rem; border-radius: 0.75rem; } .horizontal-screen { background: #000; } .horizontal-screen live-player { transform: translateY(-10%); }