Page{ background: #C8223C; } .headerbg image{ display: block; width: 100%; } .fl{ float: left; } .fr{ float: right; } .title{ padding: 20rpx 40rpx 30rpx; color: #fff; text-align: center; font-size:26rpx; } .card{ position: relative; width: 335rpx; margin: 0 auto 18rpx; border-radius:16rpx; overflow: hidden; padding-bottom: 20rpx; background: #fff; height: 185rpx; } .txt01 text{ display: block; text-align: center; } .cards{ padding: 0 33rpx; } .cards>view:nth-of-type(2n){ float: right; } .cards>view:nth-of-type(2n+1){ float: left; } .tit{ font-size:36rpx; color:rgba(51,51,51,1); margin-top: -40rpx; } .cardtype{ position: absolute; right: 28rpx; top: 20rpx; font-size: 24rpx; color:rgba(99,188,230,1); } .footer{ margin-top: 26rpx; font-size:26rpx; font-weight:500; color:rgba(153,153,153,1); } .footer text{ text-indent: 33rpx; } .footer image{ width: 24rpx; margin-right: 33rpx; } .triangle { width: 0px; height: 0px; border-color: transparent #DAB055; border-width: 0 0 110rpx 110rpx; border-style: solid; } .discount{ position: absolute; color: #fff; width: 110rpx; height: 100rpx; font-size: 20rpx; left:13rpx; top:-11rpx; z-index: 10; transform:rotate(315deg); } .discount text{ font-size: 28rpx; }