yuminge-app/yun-min-program-plugin-master/packageH/blindBox/blindBoxHelping/blindBoxHelping.wxss

/* packageH/blindBox/blindBoxHelping/blindBoxHelping.wxss */

/* packageH/blindBox/blindBoxDetail/blindBoxDetail.wxss */
.headMr {
  background-image: url('https://mini-app-img-1251768088.cos.ap-guangzhou.myqcloud.com/blindHead.png');
  background-size: 100% 100%;
  background-color: #7f88d9;
  height: 297rpx;
}

.head {
  width: 100%;

  /* height: 297rpx; */
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
}

.head image {
  width: 100%;
}

.isTitle {
  color: #fff;
  font-size: 48rpx;
  font-weight: 600;
  text-shadow: 4px 4px 0 #fda610, 4px -4px 0 #fda610, -4px -4px 0 #fda610, -4px 4px 0 #fda610, 4px 3px 0 #fda610, 4px -3px 0 #fda610, -4px -3px 0 #fda610, -4px 3px 0 #fda610, 4px 2px 0 #fda610, 4px -2px 0 #fda610, -4px -2px 0 #fda610, -4px 2px 0 #fda610, 4px 1px 0 #fda610, 4px -1px 0 #fda610, -4px -1px 0 #fda610, -4px 1px 0 #fda610, 4px 0 0 #fda610, 4px 0 0 #fda610, -4px 0 0 #fda610, -4px 0 0 #fda610, 3px 4px 0 #fda610, 3px -4px 0 #fda610, -3px -4px 0 #fda610, -3px 4px 0 #fda610, 3px 3px 0 #fda610, 3px -3px 0 #fda610, -3px -3px 0 #fda610, -3px 3px 0 #fda610, 3px 2px 0 #fda610, 3px -2px 0 #fda610, -3px -2px 0 #fda610, -3px 2px 0 #fda610, 3px 1px 0 #fda610, 3px -1px 0 #fda610, -3px -1px 0 #fda610, -3px 1px 0 #fda610, 3px 0 0 #fda610, 3px 0 0 #fda610, -3px 0 0 #fda610, -3px 0 0 #fda610, 2px 4px 0 #fda610, 2px -4px 0 #fda610, -2px -4px 0 #fda610, -2px 4px 0 #fda610, 2px 3px 0 #fda610, 2px -3px 0 #fda610, -2px -3px 0 #fda610, -2px 3px 0 #fda610, 2px 2px 0 #fda610, 2px -2px 0 #fda610, -2px -2px 0 #fda610, -2px 2px 0 #fda610, 2px 1px 0 #fda610, 2px -1px 0 #fda610, -2px -1px 0 #fda610, -2px 1px 0 #fda610, 2px 0 0 #fda610, 2px 0 0 #fda610, -2px 0 0 #fda610, -2px 0 0 #fda610, 1px 4px 0 #fda610, 1px -4px 0 #fda610, -1px -4px 0 #fda610, -1px 4px 0 #fda610, 1px 3px 0 #fda610, 1px -3px 0 #fda610, -1px -3px 0 #fda610, -1px 3px 0 #fda610, 1px 2px 0 #fda610, 1px -2px 0 #fda610, -1px -2px 0 #fda610, -1px 2px 0 #fda610, 1px 1px 0 #fda610, 1px -1px 0 #fda610, -1px -1px 0 #fda610, -1px 1px 0 #fda610, 1px 0 0 #fda610, 1px 0 0 #fda610, -1px 0 0 #fda610, -1px 0 0 #fda610, 0 4px 0 #fda610, 0 -4px 0 #fda610, 0 -4px 0 #fda610, 0 4px 0 #fda610, 0 3px 0 #fda610, 0 -3px 0 #fda610, 0 -3px 0 #fda610, 0 3px 0 #fda610, 0 2px 0 #fda610, 0 -2px 0 #fda610, 0 -2px 0 #fda610, 0 2px 0 #fda610, 0 1px 0 #fda610, 0 -1px 0 #fda610, 0 -1px 0 #fda610, 0 1px 0 #fda610, 0 0 0 #fda610, 0 0 0 #fda610, 0 0 0 #fda610, 0 0 0 #fda610, 0 0 0 #fda610;
}

.titleBox {
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  position: absolute;

  /* top: 105rpx; */
}

.postionBtn {
  position: absolute;
  right: 0;
  top: 27rpx;
  z-index: 999;
}

.posBtn {
  box-shadow:
    1.4rpx 1.4rpx 4rpx 0rpx rgba(107, 63, 193, 0.64),
    inset -0.1rpx -7rpx 9rpx 0rpx var(--iscolor--),
    inset -0.1rpx -7rpx 9rpx 0rpx var(--iscolor--);
  border-radius: 25rpx 0rpx 0rpx 25rpx;
  font-size: 20rpx;
  color: #fff;
  padding: 10rpx 14rpx 10rpx 19rpx;
}

.contenBox {
  /* background-image: linear-gradient(to right, #8184d9, #8e89dc, #8184d9); */
  overflow: hidden;
  padding: 20rpx 0;
  position: relative;
  display: flex;
  flex-direction: column;
}

.circle {
  border-radius: 50%;
  background-color: #fff;
  margin: 0 14rpx;
}

.poster {
  position: absolute;
  top: 0;
  right: 25rpx;
  width: 70rpx;
  height: 95rpx;
  background-color: #6d44ab;
  border-radius: 13rpx;
  border: solid 8rpx #bb92ee;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.poster_pay {
  width: 70rpx;
  height: 95rpx;
  background-color: #6d44ab;
  border-radius: 13rpx;
  border: solid 8rpx #bb92ee;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.poster icon,
.poster_pay icon {
  font-size: 55rpx;
  height: 61rpx;
  margin-top: -9rpx;
  margin-bottom: 8rpx;
  color: #fff;
}

.poster .text,
.poster_pay .text {
  color: #fff;
}

.countDown {
  width: 400rpx;
  height: 50rpx;
  background-image:
    linear-gradient(
      0deg,
      rgba(136, 92, 215, 0.6) 0%,
      rgba(125, 77, 211, 0.6) 100%
    ),
    linear-gradient(
      #48246e,
      #48246e
    );
  background-blend-mode:
    normal,
    normal;
  box-shadow: inset 0rpx 5rpx 20rpx 0rpx #9e91ca;
  border-radius: 25rpx;

  /* margin: 0 auto; */
  display: flex;
  align-items: center;
  justify-content: center;
  color: #ffca10;
  font-size: 24rpx;
  font-weight: 600;
  padding: 5rpx 19rpx;
  margin: 0 auto;

  /* border: solid 3rpx #6a32cc; */
}

.blindBox {
  width: 540rpx;
  height: 540rpx;
  background-image: url('https://mini-app-img-1251768088.cos.ap-guangzhou.myqcloud.com/blindBoxJT.png');
  background-size: 100% 100%;
  margin: 0 auto;
}

.blindBoxTap {
  width: 384rpx;
  height: 120rpx;
  background-image: url('https://mini-app-img-1251768088.cos.ap-guangzhou.myqcloud.com/blindBtn.png');
  background-size: 100% 100%;
  line-height: 120rpx;
  text-align: center;
  color: #f14b08;
  letter-spacing: 10.8rpx;
  font-weight: 600;
  margin: 0 auto;
}

.payBox {
  display: flex;
  align-items: center;
  justify-content: space-around;
}

.blindBoxTapPay {
  width: 384rpx;
  height: 120rpx;
  background-image: url('https://mini-app-img-1251768088.cos.ap-guangzhou.myqcloud.com/blindBtn.png');
  background-size: 100% 100%;
  line-height: 120rpx;
  text-align: center;
  color: #f14b08;
  letter-spacing: 10.8rpx;
  font-weight: 600;
  margin-left: 75rpx;
  margin-top: -10rpx;
}

.txtPay {
  font-size: 24rpx;
  color: #fff;
  margin: 0 auto;
}

.blindBoxTap_end {
  width: 300rpx;
  height: 79rpx;
  background-color: #d0d0d0;
  border-radius: 40rpx 40rpx 30rpx 30rpx;
  font-size: 26rpx;
  color: #929191;
  text-align: center;
  line-height: 79rpx;
  margin: 0 auto;
  font-weight: 600;
  letter-spacing: 7rpx;
}

.maybeIcon {
  margin: 0 auto;
  margin-top: 103rpx;
  background-image: url('https://mini-app-img-1251768088.cos.ap-guangzhou.myqcloud.com/blindPD.png');
  background-size: 100% 100%;
  width: 476rpx;
  height: 60rpx;
  text-align: center;
  line-height: 50rpx;
  color: #fff;
}

.shopBox {
  padding: 0 28rpx 0 31rpx;
  margin-top: 37rpx;
  display: flex;
  flex-wrap: wrap;
}

.shoplist {
  width: 217rpx;
  height: 352rpx;
  background-color: #a27deb;
  border-radius: 20rpx;
  padding: 14rpx 15rpx;
  box-sizing: border-box;
  margin-right: 3%;
  margin-bottom: 20rpx;
}

.shoplist:last-child {
  margin-bottom: 0;
}

.shoplist:nth-child(3n) {
  margin-right: 0;
}

.shopImg {
  width: 187rpx;
  height: 217rpx;
  background-color: #fff;
  border-radius: 20rpx;
}

.shopBottom {
  display: flex;
  flex-direction: column;
  justify-content: space-around;
}

.shopTxt {
  overflow: hidden;
  text-overflow: ellipsis;
  font-size: 22rpx;
  color: #fff;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  margin-top: 10rpx;
}

.price {
  font-size: 22rpx;
  color: #fff;
  margin-top: 5rpx;
}

.tapMore {
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-size: 20rpx;
  margin-top: 41rpx;
}

.tapMore icon {
  margin-top: -5rpx;
}

.rule {
  display: flex;
  justify-content: center;
  flex-direction: column;
  align-items: center;
  margin-top: 59rpx;
}

.ruleBox {
  width: 685rpx;
  height: 70rpx;
  background-image:
    linear-gradient(
      0deg,
      #8256d6 0%,
      #b67deb 100%
    );
  border-radius: 8rpx;
}

.ruleTxt {
  width: 621rpx;
  height: 438rpx;
  background-color: #fff;
  box-shadow: 0rpx 5rpx 10rpx 0rpx rgba(100, 16, 195, 0.8);
  border-radius: 0rpx 0rpx 8rpx 8rpx;
  padding: 52rpx 35rpx 0 29rpx;
  box-sizing: border-box;
  overflow-y: scroll;
}

.ruleLine {
  width: 602rpx;
  height: 9rpx;
  border-radius: 0rpx 0rpx 8rpx 8rpx;
  box-shadow: 0rpx 5rpx 10rpx 0rpx rgba(100, 16, 195, 0.3);
  background-color: #fff;
}

.freeHint {
  width: 417rpx;

  /* height: 480rpx; */
  border: radius 30rpx;

  /* background-image: url('https://mini-app-img-1251768088.cos.ap-guangzhou.myqcloud.com/blindToast.png'); */

  /* background-size: 100% 100%; */
  display: flex;
  align-items: center;
  flex-direction: column;
  border-radius: 20rpx;
}

.freeHintShop {
  width: 286rpx;
  height: 286rpx;
  background-color: #fff;
  border-radius: 20rpx;
}

.freeHintShop image {
  width: 100%;
  height: 100%;
}

.freeTxt {
  font-size: 24rpx;
  color: #fff;
}

.relevance {
  width: 342rpx;
  background-color: #fff;
  border-radius: 20rpx;
  padding: 10rpx 11rpx;
  overflow-x: scroll;
  display: flex;
  box-sizing: border-box;
}

.relevance .relevanceList {
  width: 100rpx;
  height: 100rpx;
  background-color: #d4d4d4;
  border-radius: 10rpx;
  border: solid 2rpx #6881e1;
  margin-right: 10rpx;
  flex-shrink: 0;
}

.relevance .relevanceList:last-child {
  margin-right: 0;
}

/* 联系商家 */
.merchant {
  width: 230rpx;
  height: 230rpx;
  background-color: #fff;
  border-radius: 20rpx;
  margin-top: 55rpx;
  margin-bottom: 20rpx;
}

.merchant image {
  width: 230rpx;
  height: 230rpx;
  border-radius: 20rpx;
}

.merchantTxt {
  font-size: 28rpx;
  color: #fff;
  margin-bottom: 30rpx;
}

.blindBoxContact {
  width: 322rpx;
  height: 60rpx;
  background-image: url('https://mini-app-img-1251768088.cos.ap-guangzhou.myqcloud.com/blindBoxContact.png');
  background-size: 100% 100%;
}

/* end */

/* 助力成功弹窗 */
.helpTxt {
  display: flex;
  align-items: center;
  font-size: 20rpx;
  color: #d72c11;
  margin-top: 35rpx;
}

.helpTxt van-checkbox {
  margin-right: 12rpx;
}

.help {
  width: 176rpx;
  height: 176rpx;
  background-color: #fff;
  border-radius: 20rpx;
  margin-top: 26rpx;
}

.help image {
  width: 100%;
  height: 100%;
  border-radius: 20rpx;
}

.helpText {
  font-size: 20rpx;
  color: #fff;
  display: flex;
  align-items: center;
  margin-top: 20rpx;
}

.helpTextD {
  color: #f52100;
  margin: 0 10rpx;
}

.introduction {
  font-size: 20rpx;
  color: #f52100;
}

.invite {
  width: 322rpx;
  height: 60rpx;
  background-image: url('https://mini-app-img-1251768088.cos.ap-guangzhou.myqcloud.com/blindBoxFriends.png');
  background-size: 100% 100%;
  margin-top: 25rpx;
}

/* end */

/* 邀请好友进度 */
.invitePlan {
  font-size: 26rpx;
}

.invitePlanBox {
  width: 384rpx;
  height: 120rpx;
  background-image: url('https://mini-app-img-1251768088.cos.ap-guangzhou.myqcloud.com/blindBtn.png');
  background-size: 100% 100%;
  color: #f14b08;
  margin: 0 auto;
  margin-top: -10rpx;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  font-weight: 600;
}

.invitePlanBox view {
  line-height: 26rpx;
}

.inviteTime {
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 26rpx;
  color: #fff;
}

.inviteTimeR {
  color: #f14b08;
}

/* end */

/* 好友进度 */
.planDetail {
  /* margin: 0 33rpx;/ */
  margin-top: 56rpx;
}

.isPlan {
  height: 70rpx;

  /* background-image: linear-gradient(0deg,
      #8256d6 0%,
      #b67deb 100%); */
  border-radius: 8rpx;
  line-height: 70rpx;
  text-align: center;
  color: #fff;
  font-size: 32rpx;
  display: flex;
  justify-content: center;
  align-items: center;
}

.isPlanConten {
  margin: 0 32rpx;
  background-color: #fff;
  box-shadow: 0rpx 5rpx 10rpx 0rpx rgba(100, 16, 195, 0.3);
  border-radius: 8rpx;
  display: flex;
  align-items: center;
  padding: 62rpx 0;

  /* padding-bottom: 20rpx; */
}

.fans {
  /* margin: 0 26rpx; */
  width: 100%;
  height: 100%;
  display: flex;

  /* justify-content: center; */
  align-items: center;
  flex-wrap: wrap;
}

.fansUser {
  width: 20%;
  height: 118rpx;
  text-align: center;
  margin-bottom: 30rpx;
}

.fansUser image {
  width: 80rpx;
  height: 80rpx;
  background-color: #929292;
  border: solid 2rpx #ffd45b;
  border-radius: 100%;
}

.fansName {
  font-size: 20rpx;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  padding-left: 15rpx;
  text-align: center;
}

.planNot {
  text-align: center;
  font-size: 32rpx;
  width: 100%;
}

/* end */

/* 查看盲盒 */
.seePrizeWrapper {
  width: 580rpx;
  height: 835rpx;
  background-image: url('https://mini-app-img-1251768088.cos.ap-guangzhou.myqcloud.com/blindBoxSee.png');
  background-size: 100% 100%;
  position: relative;

  /* transform:  translateY(0deg) scale(0); */

  /* transition: 30s; */
}

.posCheckBtn {
  width: 100%;
  position: absolute;
  bottom: 40rpx;
  display: flex;
  justify-content: center;
}

.checkBtn {
  width: 322rpx;
  height: 60rpx;
  background-color: #d72d11;
  border-radius: 30rpx;
  text-shadow: 5rpx 5rpx 2rpx #f00;
  font-size: 30rpx;
  text-align: center;
  line-height: 60rpx;
  color: #fff;
  box-shadow: 0 1rpx 4rpx #000;
}

/* end */

/* 助力 */
.helpPage {
  width: 690rpx;
  height: 336rpx;
  background-color: #fff;
  box-shadow: 0rpx 5rpx 10rpx 0rpx rgba(100, 16, 195, 0.3);
  border-radius: 8rpx;
  margin: 0 auto;
  margin-top: 71rpx;
}

.user {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  margin-top: -55rpx;
}

.userImg {
  width: 99rpx;
  height: 99rpx;
  background-color: #d4d4d4;
  border-radius: 100%;
  border: solid 2rpx #ffd45b;
}

.userImg image {
  width: 100%;
  height: 100%;
  border-radius: 100%;
}

.userName {
  font-size: 24rpx;
  color: #333;
  margin-top: 17rpx;
}

.timeLose {
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 26rpx;
  color: #999;
  font-weight: 600;
}

.timeLoseEnd {
  color: #f14b08;
}

/* .timeLose .timeLoseEnd van-count-down .timeLoseEnd{
  color: #f14b08 !important;
} */
.van-count-down {
  color: #f14b08 !important;
}

.helpBtn {
  width: 322rpx;
  height: 60rpx;
  background-image:
    linear-gradient(
      #d72c11,
      #d72c11
    ),
    linear-gradient(
      #48246e,
      #48246e
    );
  background-blend-mode:
    normal,
    normal;
  border-radius: 30rpx;
  margin: 0 auto;
  margin-top: 47rpx;
  display: flex;
  justify-content: center;
  align-items: center;
  box-shadow: 0rpx 5rpx 1rpx #7c2e22;
}

.helpBtn text {
  font-size: 30rpx;
  color: #fff;
  text-shadow: 2rpx 2rpx 0rpx 1rpx rgba(137, 63, 124, 0.5);
  font-weight: 600;
  letter-spacing: 5rpx;
}