/* packageI/components/footer/footer.wxss */ @import "/mycss/iconfont.wxss"; .footer { position: fixed; bottom: 0; width: 100%; border-top: 0 solid #e2e2e2; z-index: 2; padding: 0; height: calc(98rpx + env(safe-area-inset-bottom)); padding-bottom: env(safe-area-inset-bottom); display: flex; align-items: center; background: #fff; } .footer .addfav { display: flex; flex-direction: column; align-items: center; margin-left: 27rpx; } .footer .addfav .iconfont { height: 60rpx; font-size: 45rpx; } .footer .addfav.active { color: #f14e4e; } .footer .buy { margin-left: 42rpx; flex: 1; display: flex; align-items: center; justify-content: center; height: 98rpx; font-size: 30rpx; color: #fff; background-color: #f14e4e; } .posterWrapper { display: flex; flex-direction: column; height: 100vh; } .posterWrapper .imageWrapper { flex: 1; display: flex; align-items: center; justify-content: center; } .posterWrapper .imageWrapper .poster-main { position: relative; width: 500rpx; height: 700rpx; background: #fff; border-radius: 10rpx; } .posterWrapper .imageWrapper .poster-main image { width: 500rpx; height: auto; } .posterWrapper .imageWrapper .poster-main .close { position: absolute; top: -70rpx; right: -70rpx; color: #fff; font-size: 65rpx; } .posterWrapper .memberWrapper { width: 100%; height: calc(320rpx + env(safe-area-inset-bottom)); padding: 32rpx 30rpx; border-radius: 20rpx 20rpx 0rpx 0rpx; background-color: #fff; } .posterWrapper .memberWrapper .member-text { font-size: 24rpx; color: #6c6c6c; } .posterWrapper .memberWrapper .member-list { display: flex; margin-top: 45rpx; overflow-x: auto; } .posterWrapper .memberWrapper .member-list .member-item { position: relative; display: flex; justify-content: center; flex-shrink: 0; width: 110rpx; height: 100rpx; } .posterWrapper .memberWrapper .member-list .member-item.active .face { border: solid 2rpx #ff2c29; } .posterWrapper .memberWrapper .member-list .member-item.active .current-member { position: absolute; bottom: 0; display: flex; align-items: center; justify-content: center; width: 110rpx; height: 36rpx; font-size: 20rpx; color: #fff; background-color: #ff2c29; border-radius: 18rpx; } .posterWrapper .memberWrapper .member-list .member-item .face { width: 70rpx; height: 70rpx; border-radius: 50%; } .posterWrapper .send-btn { display: flex; align-items: center; justify-content: center; width: 400rpx; height: 72rpx; margin: 30rpx auto 0; background-color: rgb(255, 38, 38); color: rgb(255, 255, 255); border-radius: 10rpx; font-size: 24rpx; } /* 客服 */ /* kefu */ .icon-close11 { font-size: 18px; } .pop-content { background-color: #fff; border-radius: 38rpx; text-align: center; background: #fff; padding: 35rpx 0; position: relative; justify-content: center; display: flex; flex-direction: column; align-items: center; width: 650rpx; } .pop-content .pop-top { display: flex; justify-content: space-between; width: 100%; /* flex-wrap: wrap; */ } .pop-content .pop-top .left { flex: 1; display: flex; justify-content: center; position: relative; margin-bottom: 24rpx; } .pop-content .pop-top .left .wrap { display: flex; flex-direction: column; align-items: center; } .pop-content .pop-top .left .wrap .image { width: 84rpx; height: 84rpx; margin: 0 auto; margin-bottom: 16rpx; } .pop-content .pop-top .left .wrap .image image { width: 100%; height: 100%; } .pop-content .pop-top .right { flex: 1; display: flex; justify-content: center; margin-bottom: 24rpx; } .pop-content .pop-top .right .wrap { display: flex; flex-direction: column; align-items: center; } .pop-content .pop-top .right .wrap .image { width: 84rpx; height: 84rpx; margin: 0 auto; margin-bottom: 16rpx; } .pop-content .pop-top .right .wrap icon { width: 84rpx; height: 84rpx; margin: 0 auto; margin-bottom: 16rpx; border-radius: 50%; overflow: hidden; font-size: 50rpx; background-color: #02c777; color: #fff; } .pop-content .pop-top .right .wrap .color2 { background: #ff9329; } .pop-content .pop-top .right .wrap .color3 { background: #2aa7fb; } .pop-content .pop-top .right .wrap .image image { width: 100%; height: 100%; } .pop-content .line { width: 1px; height: 51rpx; background-color: #999; } .pop-bottom { margin-top: 32rpx; width: 327rpx; display: flex; justify-content: center; height: 327rpx; } .pop-bottom .image { width: 100%; height: 100%; } .pop-bottom .image image { width: 100%; height: 100%; }