page{ background-color:#caece3 ; } .box { position: relative; } /* 头部 */ .top { position: absolute; } .top-bgc { width: 750rpx; height: 1486rpx; } .bottom-bgc { position: absolute; top: 1486rpx; } .bottom-bgc image { width: 750rpx; height: 1480rpx; } /* 中间 */ .center {} /* 项目分类商品 */ .classifyProject { position: absolute; width: 750rpx; height: 514rpx; display: flex; top: 2066rpx; } .classifyProject .classifyProject-item { height: 100%; width: 330rpx; border-radius: 24rpx; background-color: white; margin-left: 30rpx; } .classifyProject-item-top { width: 100%; height: 330rpx; } .classifyProject-item-top image { width: 100%; height: 100%; border-radius: 24rpx 24rpx 0 0; } .classifyProject-item-bottom { height: 184rpx; width: 100%; padding: 0 18rpx; box-sizing: border-box; padding-top: 8rpx; display: flex; flex-direction: column; justify-content: space-between; } .classifyProject-title { font-size: 28rpx; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; } .classifyProject-price { width: 100%; height: 110rpx; display: flex; align-items: center; justify-content: space-between; } .classifyProject-price .price { font-size: 20rpx; color: #FF3007; } .classifyProject-price .price text { font-size: 36rpx; color: #FF3007; } .classifyProject-price image { width: 48rpx; height: 48rpx; margin-top: 10rpx; box-sizing: border-box; } /* 次卡活动 */ .cardAct { position: absolute; margin-top: 822rpx; } .cardAct .cardAct-image { width: 480rpx; height: 80rpx; margin-left: 135rpx; } /* 次卡轮播图 */ .cardImage { width: 750rpx; height: 618rpx; position: absolute; margin-top: 30rpx; } .cardImage .wx-swiper-dot { width: 20rpx; /*点的长*/ height: 20rpx; /*点的高*/ } .cardImage-item { border-radius: 10rpx; width: 540rpx; height: 540rpx; display: flex; justify-content: center; } .cardImage-item .imageSmall { width: 540rpx; height: 540rpx; border-radius: 30rpx; border: 2rpx solid #24A8AD; } /* 底部 */ .bottom { position: absolute; } /* 商品活动 */ .commodity { width: 750rpx; position: absolute; height: 558rpx; top: 1606rpx; } .commodity .commodity-image { width: 480rpx; height: 80rpx; margin-left: 135rpx; } .commodity-bgc{ width: 690rpx; height: 300rpx; margin-left: 30rpx; border-radius: 30rpx; border: 2rpx solid #24A8AD; overflow: hidden; margin-top: 30rpx; transform-style:preserve-3d; background-color: #24A8AD; } /* 商品活动轮播图 */ .commodity-swiper { width: 100%; height: 100%; overflow: hidden; transform-style:preserve-3d; } .commodity-swiper swiper-item image { width: 100%; height: 100%; } /* 商品活动商品轮播图 */ .classifyProject swiper { width: 100%; height: 100%; } .classifyProject swiper-item { width: 100%; height: 100%; display: flex; justify-content: space-around; }