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

/* packageH/blindBox/blindBoxDetail/blindBoxDetail.wxss */
.countDownText {
  font-size: 30rpx;
  font-weight: 600;
}

.van-count-down {
  color: var(--iscolor--) !important;
  font-size: 26rpx !important;
  font-weight: 600 !important;
}

.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%;
}

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

.isTitle {
  text-align: center;
  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;
}

.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: url('https://mini-app-img-1251768088.cos.ap-guangzhou.myqcloud.com/blindBoxBJ.png');
  background-size: 100% 100%; */
  overflow: hidden;
  padding: 50rpx 0;
  position: relative;
  display: flex;
  flex-direction: column;

  /* align-items: center; */
  justify-content: center;
  padding-bottom: 0;
}

.poster {
  position: absolute;
  top: 662rpx;
  right: 35rpx;
  width: 58rpx;
  height: 83rpx;
  background-color: #fff;
  border-radius: 13rpx;
  border: solid 1rpx #fff;
  display: flex;
  flex-direction: column;
  align-items: center;
  box-sizing: border-box;
  padding: 4rpx;
}

.poster_pay {
  position: absolute;
  top: 757rpx;
  right: 35rpx;
  width: 58rpx;
  height: 83rpx;
  background-color: #fff;
  border-radius: 13rpx;
  border: solid 1rpx #fff;
  display: flex;
  flex-direction: column;
  align-items: center;
  box-sizing: border-box;
  padding: 4rpx;
}

.poster icon,
.poster_pay icon {
  height: 61rpx;
  margin-top: -12rpx;
  margin-bottom: -14rpx;
}

.lineBorder {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  border-radius: 9rpx;
  position: relative;
}

.poster .text,
.poster_pay .text {
  color: #8183d9;
  font-size: 20rpx;
}

.num {
  position: absolute;
  top: -21rpx;
  right: -32%;
  height: 28.992rpx;
  line-height: 28.992rpx;
  padding: 0.32rpx 9.6rpx;
  font-size: 20rpx;
  color: #fff;
  background-color: #ef1b76;
  border-radius: 16rpx;
}

.countDown {
  background-color: #fff;
  width: 400rpx;
  height: 50rpx;
  border-radius: 25rpx;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 30rpx;
  font-weight: 600;
  padding: 5rpx 19rpx;
  margin: 0 auto;
  font-style: italic;

  /* 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%;
  background-repeat: no-repeat;
  margin: 0 auto;
  margin-bottom: 50rpx;
  margin-top: 50rpx;
}

.blindBoxGif {
  width: 540rpx;
  height: 540rpx;
  background-image: url('https://mini-app-img-1251768088.cos.ap-guangzhou.myqcloud.com/blindBoxGif.gif');
  background-size: 100% 100%;

  /* background-position: 30rpx 50rpx; */
  background-repeat: no-repeat;
  margin: 0 auto;
  transition: 1s;
  margin-bottom: 50rpx;
  margin-top: 50rpx;
}

.blindBoxTap {
  width: 384rpx;
  height: 100rpx;
  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: #fff;
  letter-spacing: 10.8rpx;
  font-weight: 600;
  font-size: 34rpx;
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
}

.blindBoxTap.disabled {
  filter: grayscale(100%);
}

.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;
  margin-top: 5rpx;
}

.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: 50rpx;
  font-size: 36rpx;
  width: 476rpx;
  height: 60rpx;
  text-align: center;
  line-height: 50rpx;
  color: #fff;
  display: flex;
  justify-content: center;
  align-items: center;
  font-weight: 600;
}

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

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

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

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

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

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

.shopImg image {
  width: 100%;
  height: 100%;
  border-radius: 10rpx;
}

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

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

.price {
  font-size: 22rpx;
  color: #f15353;
  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: 50rpx;
  margin-bottom: 50rpx;
}

.ruleBox {
  width: 100%;
  height: 70rpx;
  color: #fff;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 32rpx;
}

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

.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;
  border-bottom: 1rpx solid #ebebeb;
}

.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;
}

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

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

.freeTxt {
  padding-top: 46.4rpx;
  padding-bottom: 28.992rpx;
  font-size: 30.016rpx;
  color: #fff;
}

.goodsWrapper {
  width: 512.992rpx;
  height: 435.2rpx;
  margin: 0 auto;
  padding: 0 3.2rpx;
  border-radius: 20rpx;
  overflow: scroll;
}

.goodsWrapper .goodsItem {
  display: flex;
  align-items: center;
  width: 100%;
  height: 134.016rpx;
  margin-bottom: 19.2rpx;
  background-color: #fff;
  border-radius: 10.016rpx;
}

.goodsWrapper .goodsItem .goods_img {
  height: 100rpx;
  padding: 0 16rpx;
  border-radius: 4rpx;
}

.goodsWrapper .goodsItem .goods_img image {
  width: 100rpx;
  height: 100rpx;
}

.goodsWrapper .goodsItem .content {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  min-height: 100rpx;
  padding-right: 41.6rpx;
  text-align: left;
}

.goodsWrapper .goodsItem .content .name {
  font-size: 24rpx;
  color: #333;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}

.goodsWrapper .goodsItem .content .price {
  font-size: 24rpx;
  color: #f14e4e;
}

.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;
  margin-right: 10rpx;
  flex-shrink: 0;
}

.relevanceList image {
  width: 97%;
  height: 98%;
}

.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: #fff;
  margin: 0 auto;
  margin-top: -10rpx;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  font-weight: 600;
  font-size: 30rpx;
  position: relative;
}

.posShareBtn {
  position: absolute;
  width: 100%;
  height: 100%;
  opacity: 0;
}

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

.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;
}

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

.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 */

/* 查看盲盒 */
.active {
  transform: rotateY(360deg) translateZ(0) scale(1) !important;
}

.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: rotateY(100deg) translateZ(0) scale(0);

  /* transform-origin: 9rem; */
  transition: 1s;
}

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

.buyBtn {
  padding: 0 70rpx;
  height: 65rpx;
  background: #d72c11;
  border-radius: 37rpx;
  font-size: 37rpx;
  color: #fff;
  text-align: center;
  line-height: 65rpx;
}

.checkBtn {
  width: 322rpx;
  height: 80rpx;
}

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

.orderInclass {
  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 */

/* 海报 */
.posterWrapper {
  width: 580rpx;
  height: 835rpx;
}

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

.popupWrapper .close {
  display: flex;
  align-items: center;
  justify-content: center;
}

.popupWrapper icon {
  color: #fff;
}