/* packageD/businessActivity/businessActivity.wxss */ @charset "UTF-8"; #Activity { /* padding-top: 40px; */ padding-bottom: 136px; /* width: 100%; */ } #Activity .content_box .top_music { z-index: 10; position: fixed; /* top: 80rpx; */ background: rgba(0, 0, 0, 0.5); height: 80rpx; line-height: 80rpx; width: 100%; padding: 0 2rpx; text-align: right; } #Activity .content_box .top_music .icon-active_music_open { font-size: 72rpx; color: #fff; display: block; position: absolute; right: 6.4rpx; } #Activity .content_box .top_music .icon-active_music_close { font-size: 72rpx; color: #fff; display: block; position: absolute; right: 6.4rpx; } #Activity .content_box .top_music .xuanzhuan { animation: xz 2s linear infinite; } @keyframes xz { from { transform: rotate(0deg); } to { transform: rotate(360deg); } } #Activity .content_box .banner { width: 690rpx; overflow: hidden; background: #f2f2f2; margin: 0 auto; } #Activity .content_box .banner a { width: 100%; height: 100%; display: block; } #Activity .content_box .banner image { width: 100%; height: 100%; display: block; } #Activity .content_box .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 .content_box .member-people .span { font-size: 14px; color: #fff; } #Activity .content_box .number_time { width: 720rpx; height: 188.8rpx; margin: 0 auto; margin-top: 40rpx; align-items: center; background-image: url("https://mini-app-img-1251768088.cos.ap-guangzhou.myqcloud.com/number_time_bg.png"); background-repeat: no-repeat; background-size: 720rpx 206rpx; color: #fff; font-size: 14px; display: flex; justify-content: center; flex-wrap: wrap; } #Activity .content_box .number_time .active_number .span { color: #fca232; } #Activity .content_box .number_time .active_time { display: flex; align-items: center; justify-content: center; } #Activity .content_box .number_time .active_time .span { display: flex; align-items: center; justify-content: center; font-size: 24px; } #Activity .content_box .business_box { background: #fff; width: 690rpx; margin: 0 auto; margin-top: 40rpx; border-radius: 16rpx; padding-bottom: 30rpx; } #Activity .content_box .business_box .title { height: 100rpx; display: flex; align-items: center; justify-content: center; } #Activity .content_box .business_box .title .h2 { font-size: 20px; color: #f7806c; margin: 0 40rpx; } #Activity .content_box .business_box .title .left { width: 36rpx; height: 22rpx; background-image: url("https://mini-app-img-1251768088.cos.ap-guangzhou.myqcloud.com/business_title_left.png"); background-repeat: no-repeat; background-size: 36rpx 22rpx; } #Activity .content_box .business_box .title .right { width: 36rpx; height: 22rpx; background-image: url("https://mini-app-img-1251768088.cos.ap-guangzhou.myqcloud.com/business_title_right.png"); background-repeat: no-repeat; background-size: 36rpx 22rpx; } #Activity .content_box .business_box .title_b { text-align: center; font-size: 14px; color: #8c8c8c; } #Activity .content_box .business_box .business { margin-top: 30rpx; } #Activity .content_box .business_box .business .user_box { display: flex; flex-wrap: wrap; } #Activity .content_box .business_box .business .user_box .user { width: 20%; margin-bottom: 32rpx; text-align: center; } #Activity .content_box .business_box .business .user_box .user .img { width: 96rpx; height: 96rpx; border-radius: 48rpx; margin: 0 auto; overflow: hidden; background: #f2f2f2; } #Activity .content_box .business_box .business .user_box .user .img image { width: 100%; height: 100%; } #Activity .content_box .business_box .business .user_box .user .span { line-height: 48rpx; display: block; word-break: break-word; padding: 0 8rpx; } #Activity .content_box .active_rule { background: #fff; width: 690rpx; margin: 40rpx auto 0; border-radius: 16rpx; } #Activity .content_box .active_rule .title { height: 100rpx; display: flex; align-items: center; justify-content: center; } #Activity .content_box .active_rule .title .h2 { font-size: 20px; color: #f7806c; margin: 0 40rpx; } #Activity .content_box .active_rule .title .left { width: 36rpx; height: 22rpx; background-image: url("https://mini-app-img-1251768088.cos.ap-guangzhou.myqcloud.com/business_title_left.png"); background-repeat: no-repeat; background-size: 36rpx 22rpx; } #Activity .content_box .active_rule .title .right { width: 36rpx; height: 22rpx; background-image: url("https://mini-app-img-1251768088.cos.ap-guangzhou.myqcloud.com/business_title_right.png"); background-repeat: no-repeat; background-size: 36rpx 22rpx; } #Activity .content_box .active_rule .rule_text { /* padding: 0 40rpx; text-align: left; color: #666; line-height:44rpx; */ /* height:300rpx; */ overflow: hidden; margin: 0; transition: 1s; } #Activity .content_box .active_rule .rule_text_es { /* padding: 0 40rpx; text-align: left; color: #666; line-height:44rpx; */ overflow: hidden; margin: 0; transition: 1s; } #Activity .content_box .active_rule .iconfont { width: 80rpx; height: 80rpx; line-height: 80rpx; font-size: 24px; color: #ccc; margin: 20rpx auto 0; display: block; } #Activity .content_box .free_detail { background: #fff; width: 690rpx; margin: 40rpx auto 0; border-radius: 16rpx; padding-bottom: 30rpx; position: relative; } #Activity .content_box .free_detail .title { height: 100rpx; display: flex; align-items: center; justify-content: center; } #Activity .content_box .free_detail .title .h2 { font-size: 20px; color: #f7806c; margin: 0 40rpx; } #Activity .content_box .free_detail .title .left { width: 36rpx; height: 22rpx; background-image: url("https://mini-app-img-1251768088.cos.ap-guangzhou.myqcloud.com/business_title_left.png"); background-repeat: no-repeat; background-size: 36rpx 22rpx; } #Activity .content_box .free_detail .title .right { width: 36rpx; height: 22rpx; background-image: url("https://mini-app-img-1251768088.cos.ap-guangzhou.myqcloud.com/business_title_right.png"); background-repeat: no-repeat; background-size: 36rpx 22rpx; } #Activity .content_box .free_detail .list_box { width: 630rpx; margin: 30rpx auto 0; } .list_box swiper { height: 700rpx; } #Activity .content_box .free_detail .list_box .store_info .top { display: flex; position: relative; } #Activity .content_box .free_detail .list_box .store_info .top .img { width: 120rpx; height: 120rpx; margin-right: 20rpx; } #Activity .content_box .free_detail .list_box .store_info .top .img image { width: 100%; height: 120rpx; border-radius: 60rpx; border: solid 2rpx #ccc; } #Activity .content_box .free_detail .list_box .store_info .top .info { overflow: hidden; width: 400rpx; } #Activity .content_box .free_detail .list_box .store_info .top .info .li { display: flex; /* line-height: 40rpx; */ align-items: center; height: 40rpx; } #Activity .content_box .free_detail .list_box .store_info .top .info .li .iconfont { margin-right: 8rpx; font-size: 32rpx; } #Activity .content_box .free_detail .list_box .store_info .top .info .li .span { text-align: left; } #Activity .content_box .free_detail .list_box .store_info .top .top_right { position: absolute; right: 0; color: #fca232; } #Activity .content_box .free_detail .list_box .store_info .store_banner { margin-top: 40rpx; width: 100%; background: #f2f2f2; border-radius: 12rpx; overflow: hidden; } #Activity .content_box .free_detail .list_box .store_info .store_banner image { width: 100%; } #Activity .content_box .free_detail .look_detail { height: 80rpx; line-height: 80rpx; color: #8c8c8c; display: flex; justify-content: center; align-items: center; } #Activity .content_box .free_detail .look_detail .h2 { font-weight: normal; margin: 0 40rpx; } #Activity .content_box .free_detail .look_detail .look_left { width: 48rpx; height: 12rpx; background-image: url("https://mini-app-img-1251768088.cos.ap-guangzhou.myqcloud.com/look_left.png"); background-size: 48rpx 12rpx; background-repeat: no-repeat; } #Activity .content_box .free_detail .look_bottom { position: absolute; bottom: -64rpx; display: flex; justify-content: space-between; width: 100%; } #Activity .content_box .free_detail .look_bottom .left, #Activity .content_box .free_detail .look_bottom .right { width: 32rpx; height: 108rpx; background-image: url('https://mini-app-img-1251768088.cos.ap-guangzhou.myqcloud.com/look_bottom.png'); background-size: 32rpx 108rpx; background-repeat: no-repeat; } #Activity .content_box .ranking_list { background: #fff; width: 690rpx; margin: 40rpx auto 0; border-radius: 16rpx; padding-bottom: 30rpx; } #Activity .content_box .ranking_list .title { height: 100rpx; display: flex; align-items: center; justify-content: center; } #Activity .content_box .ranking_list .title .h2 { font-size: 20px; color: #f7806c; margin: 0 40rpx; } #Activity .content_box .ranking_list .title .left { width: 36rpx; height: 22rpx; background-image: url("https://mini-app-img-1251768088.cos.ap-guangzhou.myqcloud.com/business_title_left.png"); background-repeat: no-repeat; background-size: 36rpx 22rpx; } #Activity .content_box .ranking_list .title .right { width: 36rpx; height: 22rpx; background-image: url("https://mini-app-img-1251768088.cos.ap-guangzhou.myqcloud.com/business_title_right.png"); background-repeat: no-repeat; background-size: 36rpx 22rpx; } #Activity .content_box .ranking_list .store_list { padding: 0 30rpx; height: 560rpx; overflow: hidden; overflow-y: scroll; } #Activity .content_box .ranking_list .store_list .header_box { display: flex; align-items: center; position: relative; border-bottom: solid 2rpx #ccc; font-size: 16px; height: 70px; } #Activity .content_box .ranking_list .store_list .header_box .header { width: 96rpx; height: 96rpx; border-radius: 48rpx; overflow: hidden; border: solid 2rpx #ccc; margin-right: 20rpx; } #Activity .content_box .ranking_list .store_list .header_box .header image { width: 100%; height: 100%; } #Activity .content_box .ranking_list .store_list .header_box .name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; width: 320rpx; text-align: left; font-size: 14px; } #Activity .content_box .ranking_list .store_list .header_box .right { position: absolute; right: 0; font-size: 14px; color: #fca232; } #Activity .content_box .ranking_list .store_list .blank { height: 60px; } #Activity .content_box .store_into { position: fixed; bottom: 160rpx; left: 20rpx; display: flex; } #Activity .content_box .store_into .animated { -webkit-animation-duration: 2s; animation-duration: 2s; /* 动画时间 */ -webkit-animation-fill-mode: both; animation-fill-mode: both; /* 播放后的状态 */ } #Activity .content_box .store_into .animated { -webkit-animation-iteration-count: infinite; animation-iteration-count: infinite; /* 动作循环的次数:infinite 无限循环 */ } #Activity .content_box .store_into .animated { -webkit-animation-duration: 2s; animation-duration: 2s; /* 动画时间 */ } #Activity .content_box .store_into .up { -webkit-animation-name: upanimation; animation-name: upAnimation; /* 动画的名称 */ -webkit-transform-origin: center bottom; transform-origin: center bottom; /* 设置动画旋转元素的基点为 */ cursor: pointer; } #Activity .content_box .store_into .bag { display: flex; align-items: center; justify-content: center; background-image: url("https://mini-app-img-1251768088.cos.ap-guangzhou.myqcloud.com/store_into.png"); background-size: cover; width: 80px; height: 80px; } #Activity .content_box .store_into .bag .text { margin-left: 37.6rpx; margin-top: 48rpx; color: #fff; width: 64rpx; font-size: 12px; } @keyframes upAnimation { 0%, 100%, 20%, 50%, 80% { -webkit-transition-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); transition-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } 40%, 43% { -webkit-transition-timing-function: cubic-bezier(0.755, 0.5, 0.855, 0.06); transition-timing-function: cubic-bezier(0.755, 0.5, 0.855, 0.06); -webkit-transform: translate3d(0, -30px, 0); transform: translate3d(0, -30px, 0); } 70% { -webkit-transition-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06); transition-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06); -webkit-transform: translate3d(0, -15px, 0); transform: translate3d(0, -15px, 0); } 90% { -webkit-transform: translate3d(0, -4px, 0); transform: translate3d(0, -4px, 0); } } #Activity .content_box .bottom_btn { position: fixed; bottom: 0; width: 100%; } #Activity .content_box .bottom_btn button { width: 100%; height: 100rpx; background: #f7806c; font-size: 18px; color: #fff; border: none; } .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; }