.commodity .cardBox { display: flex; align-items: center; justify-content: space-between; padding: 34rpx 21rpx; background-color: white; } .commodity .cardBox .vipBox { position: relative; width: 340rpx; height: 198rpx; background-size: cover; -webkit-box-reflect: below 0rpx linear-gradient(top, rgba(255, 0, 0, 0), rgba(255, 0, 0, 0.24)); -webkit-box-reflect: below 4rpx -webkit-linear-gradient(top, rgba(255, 0, 0, 0), rgba(255, 0, 0, 0.24)); } .commodity .cardBox .bg1 { background-image: url(http://reader-wx.ai160.com/images/reader/v3/learn/svip.png); } .commodity .cardBox .bg2 { background-image: url(http://reader-wx.ai160.com/images/reader/v3/learn/vip.png); } .commodity .cardBox .selectBtn { position: absolute; bottom: 10rpx; right: 10rpx; width: 48rpx; height: 46rpx; line-height: 50rpx; text-align: center; border-radius: 50%; color: white; font-size: 34rpx; background-color: white; } .commodity .cardBox .checked { background-color: #30C866; } .commodity .introduce { margin: 20rpx 0; position: relative; z-index: 2; width: 100%; padding: 0rpx 20rpx 30rpx; background-color: white; box-shadow: 0 -31rpx 30rpx #ffffff; } .commodity .introduce .title { margin-bottom: 20rpx; font-size: 32rpx; font-weight: bold; } .commodity .introduce .price { font-size: 34rpx; font-weight: bold; color: #FF3B00; } .commodity .entry { margin-top: 10rpx; padding: 36rpx 0rpx; display: flex; align-items: center; background-color: white; font-size: 30rpx; } .commodity .entry .title { width: 140rpx; text-align: center; color: #666666; } .commodity .entry .detaild { font-weight: bold; } .commodity .remind { padding: 25rpx 36rpx; } .commodity .remind .title { font-weight: bold; color: #212122; } .commodity .remind .li { margin-top: 20rpx; font-size: 28rpx; } .commodity .payBox { position: fixed; width: 100%; bottom: 0px; left: 0; display: flex; align-items: center; justify-content: space-between; padding: 22rpx 36rpx 30rpx; box-sizing: border-box; background-color: white; box-shadow: rgba(0, 0, 0, 0.35) 0px 30rpx 20rpx 20rpx; } .commodity .payBox .left { font-size: 32rpx; } .commodity .payBox .left text { font-size: 36rpx; color: #FF3B00; } .commodity .payBox .buyBtn { padding: 14rpx 100rpx; background-color: #FF8E20; border-radius: 50rpx; color: white; font-size: 36rpx; } .commodity .activationModal { position: fixed; z-index: 2; left: 0rpx; top: 0rpx; width: 100vw; height: 100vh; background: rgba(0, 0, 0, 0.7); } .commodity .activationModal .bg { position: absolute; width: 100%; height: 200rpx; z-index: -1; border-radius: 0 0 100rpx 100rpx; background-image: linear-gradient(132deg, #FFF4DB 14%, #FFF4DB 62%, #FEE5B5 100%); font-size: 40rpx; font-weight: bold; padding-top: 60rpx; box-sizing: border-box; text-align: center; } .commodity .activationModal .box { position: absolute; left: 0; right: 0; top: 30%; margin: auto; width: 660rpx; height: 550rpx; background-color: white; border-radius: 20rpx; text-align: center; } .commodity .activationModal .box .sLcon { margin-top: 164rpx; width: 580rpx; height: 326rpx; } .commodity .activationModal .box .close { position: absolute; padding: 40rpx; width: 54rpx; height: 54rpx; left: 0; right: 0; bottom: -140rpx; margin: auto; }