page{ padding-bottom: 60rpx; } /* 头部banner */ .top { width: 750rpx; height: 508rpx; position: relative; } .top .bgc { width: 750rpx; height: 390rpx; } .top .bgc image { width: 100%; height: 100%; } .top .seckillBox { height: 208rpx; width: 690rpx; margin-left: 30rpx; position: absolute; top: 300rpx; left: 0; background: url('https://we-spa.oss-cn-shenzhen.aliyuncs.com/wxapp/20230106/%E7%BC%96%E7%BB%84%203%402x%20%285%29.png'); background-size: 100% 100%; padding: 40rpx 0rpx 28rpx 0rpx; box-sizing: border-box; text-align: center; } .top .seckillBox .time { font-size: 36rpx; color: #333; } .top .seckillBox .seckill { display: flex; align-items: center; justify-content: center; margin-top: 18rpx; } .box { margin-left: 22rpx; } .item { display: inline-block; width: 54rpx; height: 72rpx; line-height: 72rpx; background: linear-gradient(180deg, #FA7D22 50%, #F7AF41 50%,#FA7D22 100%); opacity: 0.77rpx; border-radius: 6rpx; font-size: 44rpx; color: #fff; margin-right: 8rpx; } /*动画部分*/ .flip-animation-start { animation: flipBook1 3s forwards; -moz-animation: flipBook1 3s forwards; /* Firefox */ -webkit-animation: flipBook1 3s forwards; /* Safari and Chrome */ -o-animation: flipBook1 3s forwards; /* Opera */ } @keyframes flipBook1 { 0% { -webkit-transform: rotateY(0deg); -ms-transform: rotateY(0deg); -o-transform: rotateY(0deg); transform: rotateY(0deg); } 100% { -webkit-transform: rotateX(-180deg); -ms-transform: rotateX(-180deg); -o-transform: rotateX(-180deg); transform: rotateX(-180deg); } } .item1 { font-size: 36rpx; font-weight: 600; color: #333; margin-right: 8rpx; } /* 底部秒杀产品 */ .seckillList{ margin-top: 40rpx; } .seckill-item{ height: 240rpx; width: 690rpx; background-color: #fff; margin-left: 30rpx; display: flex; border-radius: 24rpx; margin-top: 20rpx; } .seckill-item-left image{ width: 200rpx; height: 200rpx; margin-top: 20rpx; margin-left: 20rpx; margin-right: 44rpx; border-radius: 20rpx; } .seckill-item-right{ flex: 1; padding: 40rpx 24rpx 40rpx 0; box-sizing: border-box; display: flex; flex-direction: column; justify-content: space-evenly; } .seckill-item-right .item-title{ flex-shrink: 0; font-size: 32rpx; color: #333; font-weight: 600; width: 400rpx; display:-webkit-box; -webkit-box-orient:vertical; -webkit-line-clamp:2; overflow: hidden; } .seckill-item-right .item-oldPrice{ font-size: 28rpx; color: #999999; text-decoration: line-through; margin-top: 10rpx; margin-bottom: 10rpx; } .right-bottom{ display: flex; align-items: center; justify-content: space-between; } .seckill-item-right .item-price text{ color: #FA4622; font-size: 24rpx; } .seckill-item-right .item-price .price__big { color: #FA4622; font-size: 40rpx; } .seckill-item-right .item-button{ width: 140rpx; height: 48rpx; background-color: #FA7D22; color: #fff; border-radius: 28rpx; text-align: center; line-height:46rpx ; font-size: 28rpx; } .activeClass{ opacity: 0.5; }