/* packageD/ActivityDetail/ActivityDetail.wxss */ /* .Activity{ width: 100%; background-color: rgb(64, 158, 255); } .banner{ width: 100%; } .banner image{ width: 100%; } */ .Activity { /* padding-top: 40px; */ padding-bottom: 100px; width: 100%; overflow: hidden; } .Activity .van-popup { border-radius: 10px; background: transparent; } .Activity .popop-box { width: 640rpx; height: 832rpx; margin: 0 auto; border-radius: 10px; } .Activity .popop-box .popup-content { background: #fff; width: 640rpx; height: 704rpx; border-radius: 10px; } .Activity .popop-box .popup-head { padding: 1rem 0; border-bottom: 1px dashed #ebebeb; } .Activity .popop-box .popup-head p { font-size: 14px; font-weight: bold; } .Activity .popop-box .green { background: #37ce50; color: #fff; width: 224rpx; height: 64rpx; margin: 0 auto; border-radius: 32rpx; line-height: 64rpx; display: flex; padding: 0 16rpx; margin-top: 48rpx; } .Activity .popop-box .green img { width: 38.4rpx; height: 38.4rpx; flex: 0 0 48rpx; margin-right: 6.4rpx; } .Activity .popop-box .green span { flex: 1; } .Activity .popop-box .qr { display: flex; flex-direction: column; margin-top: 32rpx; } .Activity .popop-box .qr img { width: 352rpx; height: 352rpx; } .Activity .popop-box .qr span { color: #999; } .Activity .popop-box .close { position: absolute; bottom: 0; left: calc(50% - 32rpx); } .Activity .popop-box .close img { width: 64rpx; height: 64rpx; } .Activity .top_music { z-index: 10; position: fixed; top: 0; background: rgba(0, 0, 0, 0.5); height: 80rpx; line-height: 80rpx; width: 100%; text-align: right; } .Activity .top_music .icon-active_music_open { font-size: 72rpx; color: #fff; display: block; position: absolute; right: 6.4rpx; } .Activity .top_music .icon-active_music_close { font-size: 72rpx; color: #fff; display: block; position: absolute; right: 6.4rpx; } .Activity .top_music .xuanzhuan { animation: xz 2s linear infinite; } @keyframes xz { from { transform: rotate(0deg); } to { transform: rotate(360deg); } } .Activity .banner { overflow: hidden; margin: 0 auto; padding: 0; } .Activity .banner image { width: 100%; } .Activity .member-people { width: 384rpx; overflow: hidden; background-color: rgba(0, 0, 0, 0.2); margin: 0 auto; margin-top: 40rpx; border-radius: 16px; height: 64rpx; display: flex; align-items: center; justify-content: center; } .Activity .member-people span { font-size: 14px; color: #fff; } .Activity .number_time { margin: 48rpx auto; align-items: center; background-size: 720rpx 206rpx; color: #333; font-size: 14px; display: flex; justify-content: center; flex-wrap: wrap; } .Activity .number_time .active_time { display: flex; align-items: center; justify-content: center; } .Activity .number_time .active_time .span { display: flex; align-items: center; justify-content: center; font-size: 24px; font-weight: bold; background-color: #f2f4f7; padding: 1rem; border-radius: 12px; } .Activity .number_time .active_time .em { font-weight: bold; display: inline-block; padding: 0 16rpx; } .Activity .business { margin: 32rpx; text-align: left; color: #666; } .business .p { display: flex; } .Activity .business .span { color: #ff812d; } .Activity .bottom-line { padding-bottom: 32rpx; border-bottom: 1px solid #ebebeb; } .Activity .bottom-line .p { display: flex; } .Activity .business_box { background: #fff; width: 690rpx; margin: 0 auto; margin-top: 40rpx; border-radius: 16rpx; padding-bottom: 30rpx; position: relative; } .Activity .business_box .title { height: 100rpx; display: flex; align-items: center; justify-content: center; } .Activity .business_box .title .h2 { font-size: 20px; color: #2748d7; margin: 0 40rpx; } .Activity .business_box .title .left { width: 36rpx; height: 22rpx; background-image: url("http://yunzmall.com/min_img/title_img@2x.png"); background-repeat: no-repeat; background-size: 36rpx 22rpx; } .Activity .business_box .title .right { width: 36rpx; height: 22rpx; background-image: url("http://yunzmall.com/min_img/title_img@2x.png"); background-repeat: no-repeat; background-size: 36rpx 22rpx; } .Activity .business_box .title_b { display: flex; margin: 0 1rem; } .Activity .business_box .title_b .p { flex: 1; text-align: left; } .Activity .business_box .title_b .orange { text-align: right; color: #ff812d; } /* .Activity .business_box .user { display: flex; flex-wrap: wrap; } */ .Activity .business_box .user .img { width: 96rpx; height: 96rpx; border-radius: 48rpx; margin: 0 auto; overflow: hidden; background: #f2f2f2; position: absolute; bottom: 20px; } .Activity .business_box .user .img image { width: 100%; height: 100%; } .Activity .ranking_list { background: #fff; width: 690rpx; margin: 40rpx auto 0; border-radius: 16rpx; padding-bottom: 30rpx; } .Activity .ranking_list .title { height: 100rpx; display: flex; align-items: center; justify-content: center; } .Activity .ranking_list .title .h2 { font-size: 20px; color: #2748d7; margin: 0 40rpx; } .Activity .ranking_list .title .left { width: 36rpx; height: 22rpx; background-image: url("http://yunzmall.com/min_img/title_img@2x.png"); background-repeat: no-repeat; background-size: 36rpx 22rpx; } .Activity .ranking_list .title .right { width: 36rpx; height: 22rpx; background-image: url("http://yunzmall.com/min_img/title_img@2x.png"); background-repeat: no-repeat; background-size: 36rpx 22rpx; } .Activity .ranking_list .store_list { padding: 0 30rpx; height: 560rpx; overflow: hidden; /* overflow-y: scroll; */ } .Activity .ranking_list .min_list { padding: 0 30rpx; overflow: hidden; } .Activity .ranking_list .store_list .header_box { display: flex; align-items: center; position: relative; font-size: 14px; height: 70px; } .Activity .ranking_list .store_list .header_box .header { flex: 0 0 96rpx; width: 96rpx; height: 96rpx; border-radius: 48rpx; overflow: hidden; border: solid 2rpx #ccc; margin-right: 20rpx; } .Activity .ranking_list .store_list .header_box .header image { width: 100%; height: 100%; } .Activity .ranking_list .store_list .header_box .content { flex: 1; display: flex; } .Activity .ranking_list .store_list .header_box .content span { padding: 9.6rpx 0; } .Activity .ranking_list .store_list .header_box .left { text-align: left; } .Activity .ranking_list .store_list .header_box .right { text-align: right; } .Activity .ranking_list .store_list .header_box .left, .Activity .ranking_list .store_list .header_box .right { flex: 1; display: flex; flex-direction: column; } .Activity .ranking_list .store_list .header_box .time { font-size: 12px; color: #999; } .Activity .ranking_list .store_list .header_box .money { color: #ff812d; } .Activity .ranking_list .store_list .header_box .name, .Activity .ranking_list .store_list .header_box .money { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; width: 256rpx; } .Activity .ranking_list .store_list .blank { height: 60px; } .Activity .ranking_list .business .p { display: flex; justify-content: center; } .Activity .active_rule { background: #fff; width: 690rpx; margin: 40rpx auto 0; border-radius: 16rpx; } .Activity .active_rule .title { height: 100rpx; display: flex; align-items: center; justify-content: center; } .Activity .active_rule .title .h2 { font-size: 20px; color: #2748d7; margin: 0 40rpx; } .Activity .active_rule .title .left { width: 36rpx; height: 22rpx; background-image: url("http://yunzmall.com/min_img/title_img@2x.png"); background-repeat: no-repeat; background-size: 36rpx 22rpx; } .Activity .active_rule .title .right { width: 36rpx; height: 22rpx; background-image: url("http://yunzmall.com/min_img/title_img@2x.png"); background-repeat: no-repeat; background-size: 36rpx 22rpx; } .Activity .active_rule #rule_text { margin: 0 40rpx; text-align: left; color: #666; line-height: 44rpx; overflow: hidden; } .Activity .active_rule .iconfont { width: 80rpx; height: 80rpx; line-height: 80rpx; font-size: 24px; color: #ccc; margin: 20rpx auto 0; display: block; } .Activity .store_into { position: fixed; right: 0; top: 60%; z-index: 999; } .Activity .store_into .fixed-box { padding: 6.4rpx 16rpx; background-color: #fff; border-radius: 22px 0 0 22px; opacity: 0.8; display: flex; margin-bottom: 32rpx; position: relative; } .btns { position: absolute; width: 100%; height: 100%; left: 0; top: 0; z-index: 9999; } .btns button { width: 100%; height: 100%; opacity: 0; } .Activity .store_into .fixed-box image { width: 64rpx; height: 64rpx; margin-right: 16rpx; } .Activity .store_into .fixed-box .text { width: 64rpx; font-size: 12px; } .Activity .store_into .blue { color: #2892ff; } .Activity .store_into .orange { color: #ff8229; } .Activity .store_into .yellow { color: #ffb126; } .Activity .bottom_btn { position: fixed; bottom: 0; width: 100%; z-index: 999; } .Activity .bottom_btn .button { width: 100%; height: 100rpx; background: #58c232; font-size: 18px; color: #fff; border: none; text-align: center; line-height: 100rpx; } .overhidden { height: 176rpx; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 5; -webkit-box-orient: vertical; } .text_down { width: 100%; overflow: hidden; } .boxHeight { height: 300rpx; overflow: hidden; margin: 0; transition: 1s; } .noneHri { overflow: hidden; margin: 0; transition: 1s; } .explainWrapper { width: 680rpx; display: flex; flex-direction: column; align-items: center; } .explainWrapper .explainTextWrapper { width: 640rpx; height: 1008rpx; background: #fff; border-radius: 18rpx; overflow: hidden; } .explainWrapper .close { color: #fff; font-size: 100rpx; } .contactWrapper { background: red; width: 20rem; border-radius: 10px; } .contactWrapper .popup-head { padding: 1rem 0; box-sizing: border-box; border-bottom: 1px dashed #ebebeb; } .contactWrapper .popup-head .icon-zx_map_tel{ font-size: 28rpx; transform: translateY(-4rpx) translateX(6rpx); } .contactWrapper .green { background: #37ce50; color: #fff; width: 7rem; height: 2rem; margin: 0 auto; border-radius: 1rem; line-height: 2rem; display: flex; padding: 0 0.5rem; margin-top: 1.5rem; box-sizing: border-box; } .contactWrapper .green text { flex: 1; text-align: center; font-size: 28rpx; } .contactWrapper .qr { display: flex; flex-direction: column; align-items: center; margin-top: 1rem; padding-bottom: 1rem; } .contactWrapper .qr image { width: 11rem; height: 11rem; } .contactWrapper .qr text { color: #999; }