yuminge-app/yun-min-program-plugin-master/packageC/orders/Lottery/Lottery.wxss

/* packageC/orders/Lottery/Lottery.wxss */
.van-content {
  padding: 32rpx;
  position: relative;
}

.van-content .button {
  position: fixed;
  bottom: 32rpx;
  width: 690rpx;
  height: 92rpx;
  background-color: #f15353;
  border-radius: 12rpx;
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
}

.van-content .radio {
  margin-bottom: 32rpx;
  display: flex;
  width: 100%;
}

.van-content .avatar {
  width: 64rpx;
  height: 64rpx;
  border-radius: 50%;
}

.van-content .avatar image {
  width: 100%;
  height: 100%;
  border-radius: 50%;
}

.wap {
  background: linear-gradient(rgba(255, 70, 63, 0.88), #f73d3d);
  overflow: hidden;
}

.wap .logo {
  position: absolute;
  top: 32rpx;
  left: 32rpx;
  width: 64rpx;
  height: 64rpx;
  z-index: 2;
}

.wap .img {
  width: 100%;
  height: 100%;

  /* border-radius: 50%; */
}

.wap .img image {
  width: 100%;
  height: 100%;

  /* border-radius: 50%; */
}

.wap .banner {
  width: 100%;
  height: 320rpx;
  position: relative;
}

.wap .banner .bannerImg {
  width: 100%;

  /* height: 320rpx; */
}

.wap .banner .bannerImg image {
  width: 100%;
}

.wap .banner .prizeInfoBtn {
  width: 200rpx;
  height: 128rpx;
  position: absolute;
  top: 0;
  right: 0;
}

.wap .banner .prizeInfoBtn .prizeInfoBtnImg {
  width: 200rpx;
  height: 128rpx;
}

.wap .banner .prizeInfoBtn image {
  width: 100%;
}

.wap .banner .priceChanceBtn {
  height: 70rpx;
  border-radius: 32rpx;
  background-color: #ff9600;
  position: absolute;
  bottom: -32rpx;
  left: 50%;
  transform: translateX(-50%);
  line-height: 67rpx;
  font-size: 36rpx;
  color: #fff;
  font-weight: 500;
  text-align: center;
  padding: 6rpx 32rpx;
}

.wap .banner .whiteBar {
  position: absolute;
  z-index: 0;
  transform: rotate(-30deg);
}

.wap .banner .whiteBar image {
  width: 100%;
  height: 100%;
  display: block;
}

.wap .box {
  margin: 90rpx 36rpx;
  /* width: 672rpx; */
  height: 672rpx;

  /* padding: 32rpx; */
  background-color: #fff;
  border: 16rpx solid transparent;
  border-radius: 22rpx;
  box-sizing: border-box;
  position: relative;
}

.wap .box .div {
  background-size: 100%;
  width: 149rpx;
  height: 149rpx;
  float: left;
  margin-right: 16rpx;
  margin-bottom: 16rpx;
  position: relative;
  box-sizing: border-box;
}

.wap .box .div:nth-child(4n) {
  margin-right: 0;
}

.wap .box .div:nth-child(8) {
  margin-left: 23rpx;
}

.wap .box .div:nth-child(12) {
  margin-left: 5rpx;
}

.wap .box .div .img {
  width: 60%;
  height: 60%;
  position: absolute;
  top: 40%;
  left: 50%;
  transform: translate(-50%, -50%);
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

.wap .box .div .activeNameImg {
  width: 75%;
  height: 75%;
  top: 48%;
  left: 51%;
}

.wap .box .div .img image {
  width: 100%;
  height: 100%;
  flex-grow: 1;
}

.wap .box .title {
  color: #666;
  width: 82%;
  font-size: 24rpx;
  text-align: center;
  position: absolute;
  bottom: 7%;
  left: 9%;
  white-space: nowrap;
  overflow: hidden;
  word-break: break-all;
}

.wap .box .prizeBtn1,
.wap .box .prizeBtn3 {
  margin: 10rpx 0 0 11rpx;
}

.wap .box .prizeBtn2 {
  margin: 10rpx 0 0 0;
}

.wap .box .prizeBtn3,
.wap .box .prizeBtn4 {
  margin-top: -11rpx;
}

.wap .box .turn {
  width: 256rpx;
  height: 256rpx;
  font-size: 40rpx;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.wap .box .text {
  text-align: center;
  color: white;
  font-size: 40rpx;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 100%;
}

.wap .score {
  color: #fff;
  font-size: 32rpx;
  text-align: center;
  position: relative;
}

.wap .prizers {
  height: 512rpx;
  width: 672rpx;
  position: relative;
  margin: 32rpx auto 16rpx;
}

.wap .prizers .prizeBar {
  height: 32rpx;
  width: 672rpx;
}

.wap .prizers .prizeBar image {
  width: 100%;
  height: 100%;
}

.wap .prizers .prizer {
  width: 608rpx;
  height: 416rpx;
  background-color: #fff;
  position: absolute;
  top: 16rpx;
  left: 32rpx;
  padding: 16rpx 6rpx 14rpx;
  overflow: hidden;
  box-sizing: border-box;
}

.wap .prizers .prizer .prizeIcon {
  width: 598rpx;
  height: 64rpx;
  margin-bottom: 32rpx;
}

.wap .prizers .prizer .prizeIcon image {
  width: 100%;
  height: 100%;
}

.wap .prizers .prizer .prizerList {
  z-index: 0;
  height: 288rpx;
  overflow: hidden;
}

.wap .prizers .prizer .prizerList .li {
  line-height: 48rpx;
  font-size: 28rpx;
  color: #232323;
  overflow: hidden;
  display: flex;
}

/* .wap .prizers .prizer .prizerList .li .span {} */

.wap .prizers .prizer .prizerList .li .span:first-child {
  display: block;
  flex: 1;
  text-align: center;
}

.wap .prizers .prizer .prizerList .li .span:last-child {
  text-align: left;
  word-break: break-all;
  text-overflow: ellipsis;
  overflow: hidden;
  flex: 2;
}

.wap .info .title {
  width: 272rpx;
  height: 38rpx;
  position: relative;
  overflow: hidden;
  margin-left: 50%;
  transform: translateX(-50%);
  vertical-align: middle;
}

.wap .info .title .squire1 {
  float: left;
}

.wap .info .title .squire2 {
  float: right;
}

.wap .info .title .squire {
  width: 64rpx;
  height: 38rpx;
}

.wap .info .title .squire image {
  display: inline-block;
  line-height: 38rpx;
  width: 38rpx;
  height: 10rpx;
  vertical-align: middle;
}

.wap .info .title .span {
  display: block;
  position: absolute;
  text-align: justify;
  text-align-last: justify;
  width: 144rpx;
  left: 50%;
  transform: translateX(-50%);
  font-size: 32rpx;
  color: #fff;
  font-weight: 700;
  float: left;
  line-height: 38rpx;
}

.wap .info .infoContent {
  width: 640rpx;
  height: auto;
  margin: 32rpx 64rpx;
  background-color: rgba(255, 255, 255, 0.25);
  padding: 32rpx;
  box-sizing: border-box;
}

.wap .info .infoContent .ul {
  margin-left: 9rpx;
}

.wap .info .infoContent .ul .li {
  list-style-type: disc;
  list-style-position: outside;
  font-size: 28rpx;
  color: #fff;
  text-align: left;
  margin-bottom: 16rpx;
  position: relative;
}

.wap .info .infoContent .ul .li image {
  position: absolute;
  top: 5rpx;
  left: 3rpx;
  width: 3rpx;
  height: 3rpx;
  float: left;
  margin-right: 3rpx;
  vertical-align: middle;
}

.wap .massage {
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.6);
  position: fixed;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
}

.wap .massage .noPrize {
  width: 576rpx;
  height: 320rpx;
  background-color: #fff;
  position: absolute;
  top: 320rpx;
  left: 90rpx;
  border-radius: 12.8rpx;
}

.wap .massage .noPrize .close {
  position: absolute;
  width: 50rpx;
  height: 50rpx;
  top: -30rpx;
  right: -30rpx;
  z-index: 2;
}

.wap .massage .noPrize .close image {
  width: 100%;
  height: 100%;
}

.wap .massage .noPrize .p {
  font-size: 32rpx;
  color: #707070;
  margin: 12rpx auto 6.4rpx;
  text-align: center;
}

.wap .massage .noPrize .xiaofu {
  width: 160rpx;
  height: 160rpx;
  border-radius: 100%;
  margin: 0 auto 10rpx;
}

.wap .massage .noPrize .xiaofu image {
  width: 100%;
  height: 100%;
  display: block;
}

.wap .massage .noPrize .btn {
  width: 160rpx;
  height: 64rpx;
  margin: 0 auto;
  background: url("https://mini-app-img-1251768088.cos.ap-guangzhou.myqcloud.com/lottery/btn.png") no-repeat;
  background-size: 160rpx 48rpx;
  font-size: 28rpx;
  color: #fff;
  line-height: 48rpx;
  text-align: center;
  font-weight: 600;
}

.wap .massage .haveLottery {
  width: 640rpx;
  height: 320rpx;
  background-color: #fff;
  position: absolute;
  top: 384rpx;
  left: 57rpx;
  border-radius: 12.8rpx;
}

.wap .massage .haveLottery .close {
  position: absolute;
  width: 50rpx;
  height: 50rpx;
  top: -30rpx;
  right: -30rpx;
  z-index: 2;
}

.wap .massage .haveLottery .close image {
  width: 100%;
  height: 100%;
}

.wap .massage .haveLottery .xiaofu {
  width: 128rpx;
  height: 128rpx;
  margin: 32rpx auto 6rpx;
}

.wap .massage .haveLottery .xiaofu image {
  width: 100%;
  height: 100%;
  display: block;
}

.wap .massage .haveLottery .p {
  font-size: 32rpx;
  color: #707070;
  margin: 6.72rpx auto 12rpx;
  text-align: center;
}

.wap .massage .haveLottery .btn {
  width: 160rpx;
  height: 64rpx;
  margin: 0 auto;
  background: url("https://mini-app-img-1251768088.cos.ap-guangzhou.myqcloud.com/lottery/btn.png") no-repeat;
  background-size: 160rpx 48rpx;
  font-size: 28rpx;
  color: #fff;
  line-height: 48rpx;
  text-align: center;
  font-weight: 600;
}

.wap .massage .circleLight {
  width: 672rpx;
  height: 672rpx;
  position: absolute;
  top: 224rpx;
  left: 50%;
  margin-left: -336rpx;
  -webkit-animation: rotate 20s infinite linear;
  animation: rotate 20s infinite linear;
  transform-origin: 50% 50%;
}

.wap .massage .circleLight image {
  width: 100%;
  height: 100%;
}

@-webkit-keyframes rotate {
  0% {
    -webkit-transform: rotate(0deg);
  }

  100% {
    -webkit-transform: rotate(360deg);
  }
}

@keyframes rotate {
  0% {
    transform: rotate(0deg);
  }

  100% {
    transform: rotate(360deg);
  }
}

.wap .massage .havePrize {
  width: 540rpx;
  padding-bottom: 16rpx;
  border-radius: 12.8rpx;
  position: absolute;
  top: 352rpx;
  left: 110rpx;
  background: #fff;
}

.wap .massage .havePrize .oneBar {
  width: 38rpx;
  height: 15rpx;
  position: absolute;
  top: -3.2rpx;
  right: 35rpx;
}

.wap .massage .havePrize .oneBar image {
  width: 100%;
  height: 100%;
}

.wap .massage .havePrize .p {
  padding: 0 3.2rpx;
  font-size: 28rpx;
  color: #707070;
  font-weight: 600;
  margin: 55rpx auto 6.4rpx;
  text-align: center;
}

.wap .massage .havePrize .proImg {
  width: 330rpx;

  /* height: auto; */
  margin: 16rpx auto;
}

.wap .massage .havePrize .proImg image {
  width: 100%;

  /* height: auto; */
}

.wap .massage .havePrize .btn {
  width: 160rpx;
  height: 64rpx;
  margin: 0 auto;
  background: url("https://mini-app-img-1251768088.cos.ap-guangzhou.myqcloud.com/lottery/btn.png") no-repeat;
  background-size: 160rpx 48rpx;
  text-align: center;
}

.wap .massage .havePrize .btn .a {
  font-size: 28rpx;
  color: #fff;
  line-height: 48rpx;
  text-align: center;
  font-weight: 600;
}

.home_box {
  position: fixed;
  z-index: 1000;
  right: 0;
  bottom: 120rpx;
  width: 72rpx;
  height: 72rpx;
  background: rgba(0, 0, 0, 0.8) url('https://static-o2o.360buyimg.com/daojia/new/images/menu/bm.png') 14rpx 14rpx no-repeat;
  background-size: 130rpx 40rpx;
  border: 2rpx solid #757575;
  border-radius: 8rpx 0 0 8rpx;
}

.home_box .y5.bothvisible {
  border-radius: 8rpx 0 0 0;
}

.home_box .y6 {
  position: absolute;
  right: -2rpx;
  bottom: 84rpx;
  width: 190rpx;
  border: 2rpx solid #757575;
  background: rgba(0, 0, 0, 0.8);
}

.home_box .y6 .a {
  display: block;
  padding-left: 44rpx;
  border-bottom: 2rpx solid #4b4b4b;
  line-height: 70rpx;
  height: 70rpx;
  color: #fff;
  background-image: url('https://static-o2o.360buyimg.com/daojia/new/images/icon/bmenu.png');
  background-repeat: no-repeat;
  background-size: 32rpx 600rpx;
  background-position: 0 -100rpx;
}

.home_box .y8 {
  background-position: 20rpx -100rpx;
}

.home_box .y9 {
  background-position: 20rpx -200rpx;
}

.home_box .ya {
  background-position: 20rpx -300rpx;
}

.home_box .yb {
  background-position: 20rpx -400rpx;
}

.home_box .yc {
  background-position: 20rpx -500rpx;
  border: none;
}

.home_box .yd {
  position: absolute;
  bottom: -24rpx;
  right: 20rpx;
  width: 0;
  height: 0;
  z-index: 15;
  border-width: 12rpx;
  border-color: rgba(0, 0, 0, 0.8) transparent transparent transparent;
  border-style: solid;
}