/* 头部 */ .top { width: 750rpx; /* height: 1052rpx; */ } .top .top-bgc { width: 750rpx; height: 844rpx; position: absolute; top: 0; left: 0; z-index: -1; } .center-bgc{ width: 750rpx; height: 1440rpx; position: absolute; margin-top: 844rpx; z-index: -99; } .bottom-bgc{ width: 750rpx; height: 940rpx; position: absolute; margin-top: 2262rpx; } .top-position{ position: absolute; margin-left: 30rpx; } .coupon { width: 690rpx; height: 268rpx; margin: 0 auto; margin-top: 704rpx; } .coupon swiper-item { width: 690rpx; height: 218rpx; background: url('https://we-spa.oss-cn-shenzhen.aliyuncs.com/wxapp/20220901/%E5%BD%A2%E7%8A%B6%E7%BB%93%E5%90%88%202%402x.png') no-repeat; background-size: 100% 218rpx; display: flex; } .item-left { width: 256rpx; height: 218rpx; } .item-left .price { height: 141.7rpx; width: 256rpx; padding-top: 20rpx; box-sizing: border-box; display: flex; line-height: 150rpx; justify-content: center; } .item-left .price text { font-size: 36rpx; color: white; margin-top: 16rpx; } .item-left .priceFree { height: 65%; width: 100%; font-size: 36rpx; color: white; margin-left: 40rpx; margin-top: 10rpx; padding-top: 20rpx; box-sizing: border-box; } .item-left .priceFree text { color: white; font-size: 90rpx; } .item-left .price view { /* width: 190rpx; height: 100rpx; */ width: max-content; color: white; font-size: 90rpx; /* line-height: 160rpx; */ } .item-left .type { font-size: 28rpx; color: white; text-align: center; margin-top: 5rpx; } .item-right { flex: 1; height: 190rpx; } .item-right .title { height: 140rpx; width: 100%; font-size: 36rpx; color: white; padding-top: 40rpx; padding-left: 30rpx; box-sizing: border-box; text-overflow: -o-ellipsis-lastline; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; line-clamp: 2; -webkit-box-orient: vertical; } .item-right .title2 { width: 100%; font-size: 36rpx; color: white; padding-top: 40rpx; padding-left: 30rpx; box-sizing: border-box; } .title-detail { font-size: 20rpx; color: white; width: 366rpx; margin-left: 30rpx; margin-top: 4rpx; } .full_price { color: white; } .item-right .btn { font-size: 20rpx; color: white; width: 100rpx; height: 30rpx; background-color: #FF5459; border-radius: 22rpx; text-align: center; margin-left: 300rpx; margin-top: 20rpx; } /* 项目活动 */ .projectAct { width: 350rpx; height: 78rpx; margin-top: 950rpx; } .projectAct image { width: 100%; height: 100%; margin-left: 168rpx; } .recharge{ margin-top: 40rpx; width: 690rpx; height: 300rpx; background-color: #d8d8d8; border-radius: 20rpx; } .recharge image{ width: 100%; height: 100%; } .discount { width: 670rpx; height: 300rpx; } .discount image { width: 690rpx; height: 300rpx; margin-top: 40rpx; border-radius: 20rpx; } /* 中间 */ .center { width: 750rpx; min-height: 650rpx; background-size: 100% 100%; } /* 项目分类 */ .classify { width: 100%; height: 140rpx; display: flex; align-items: center; justify-content: space-around; } .classify image { width: 100rpx; height: 100rpx; } /* 项目分类商品 */ .classifyProject { width: 100%; height: 514rpx; margin-top: 38rpx; display: flex; } .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; box-sizing: border-box; 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 { width: 750rpx; height: 94rpx; display: flex; justify-content: center; /* margin-top: 20rpx; */ } .cardAct .cardAct-image { width: 212rpx; height: 94rpx; margin: 0 auto; } /* 次卡轮播图 */ .cardImage { width: 100%; height: 570rpx; margin-top: 20rpx; } .cardImage-item { width: 420rpx; height: 530rpx; margin: 0 auto; display: flex; justify-content: center; } .cardImage-item .imageSmall { width: 368rpx; height: 462.8rpx; margin: 0 auto; border-radius: 20rpx; } .cardImage-item .imageBig { width: 420rpx; /* border: 1rpx solid white; */ height: 540rpx; margin: 0 auto; border-radius: 20rpx; } .cardImage-item button { position: absolute; transform: translate(-50%); bottom: 2rpx; left: 50%; width: 262rpx; height: 60rpx; background-color: #FA7D22; color: white; border-radius: 40px; line-height: 60rpx; font-size: 28rpx; } /* 底部 */ .bottom { width: 750rpx; min-height: 1206rpx; /* background: url('https://we-spa.oss-cn-shenzhen.aliyuncs.com/wxapp/20220901/%E7%BC%96%E7%BB%84%2012%402x%282%29.png') no-repeat; */ background-size: 100% 100%; } /* 商品活动 */ .commodity { width: 100%; height: 94rpx; margin-top: 20rpx; } .commodity image { width: 212rpx; height: 94rpx; margin: 0 auto; display: block; } /* 商品活动轮播图 */ .commodity-swiper { width: 690rpx; height: 300rpx; margin: 0 auto; margin-top: 20rpx; /* border: 1px solid #FFFFFF; */ border-radius: 20px; box-sizing: border-box; } .commodity-swiper swiper { width: 100%; height: 100%; } /* .commodity-swiper swiper-item{ display: flex; justify-content: center; align-items: center; } */ .commodity-swiper swiper-item image { width: 100%; height: 100%; border-radius: 20px; } /* .commodity-swiper swiper-item image { width: 97%; height: 98%; border-radius: 20px; } */ /* 商品活动商品轮播图 */ .classifyProject swiper { width: 100%; height: 100%; } .classifyProject swiper-item { width: 100%; height: 100%; display: flex; justify-content: space-around; } /* 拼团专区 */ .joinGroup{ height: 1174rpx; } .joinGroup .joinGroup-top{ width: 212rpx; height: 94rpx; margin-left: 266rpx; margin-top: 738rpx; } .joinGroup .joinGroup-bottom{ width: 726rpx; height: 336rpx; margin-left: 12rpx; position: relative; bottom: 10rpx; /* margin-top: 10rpx; */ }