yuminge-app/yun-min-program-plugin-master/packageD/businessActivity/businessActivity.wxss

/* 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;
}