.buyVip { position: fixed; z-index: 12; left: 0rpx; top: 0rpx; width: 100vw; height: 100vh; background: rgba(0, 0, 0, 0.7); .modal { position: relative; width: 677rpx; margin: 140rpx auto 0rpx; border-radius: 20rpx; text-align: center; overflow: hidden; background-color: white; .header { width: 100%; height: 172rpx; background-image: linear-gradient(129deg, #F9D9BF 0%, #F6D0B2 45%, #F3C0A3 70%, #F1B998 100%); text-align: center; font-size: 36rpx; font-weight: bold; border-bottom-left-radius: 100rpx; border-bottom-right-radius: 100rpx; overflow: hidden; .h1 { margin: 24rpx 0rpx; } } .goodsList { margin: 50rpx 0 30rpx; width: 100%; height: 310rpx; padding: 0rpx 20rpx; white-space: nowrap; .payBox { position: relative; margin-right: 22rpx; width: 268rpx; height: 268rpx; background-size: cover; text-align: center; display: inline-block; border-radius: 20rpx; .pay { position: absolute; bottom: 24rpx; left: 50%; transform: translateX(-50%); padding: 6rpx 40rpx; font-size: 26rpx; font-weight: bold; border-radius: 50rpx; } } .payBox::after { content: ''; position: absolute; width: 268rpx; height: 45rpx; left: 0; bottom: -42rpx; background: linear-gradient(180deg, #2A2116 0%, rgba(255, 255, 255, 0) 100%); border-radius: 22rpx 22rpx 0rpx 0rpx; opacity: 0.26; } .pbbg1 { background-image: url(http://reader-wx.ai160.com/images/reader/v3/12992x.png); .pay { background: linear-gradient(325deg, #FFBD96 0%, #FFF1E7 100%); } } .pbbg2 { background-image: url(http://reader-wx.ai160.com/images/reader/v3/2992x.png); .pay { background: linear-gradient(285deg, #DFF2EE 0%, #D8E9FD 39%, #BDE6F8 72%, #BAE7F7 100%); } } .pbbg3 { background-image: url(http://reader-wx.ai160.com/images/reader/v3/55152x.png); .pay { background: linear-gradient(325deg, #FFBD96 0%, #FFF1E7 100%); } } } .iosVip{ margin: 30rpx 0; width: 580rpx; height: 560rpx; } } .close { display: block; margin: 0 auto; padding: 40rpx; width: 54rpx; height: 54rpx; } }