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

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