/* pages/index/index.wxss */ page { background-color: #f5f5f5; } .top-all{ background-color: #ffffff; border-radius: 0px 0px 40rpx 40rpx; padding-bottom: 15rpx; } .top { width: 750rpx; padding: 40rpx 0rpx 0; } .title { font-size: 36rpx; color: #ffffff; line-height: 90rpx; height: 90rpx; text-align: center; } .topCont{ width: 690rpx; padding: 0 30rpx; margin-top: 20rpx; } .address{ width: 290rpx; height: 56rpx; } .address-icon{ width: 23rpx; height: 34rpx; } .address-name{ font-size: 32rpx; color: #ffffff; width: 220rpx; } .address-right{ width: 19rpx; height: 10rpx; } .top-search { height: 56rpx; display: flex; justify-content: space-between; align-items: center; width: 380rpx; } .search { width:260rpx; font-size: 24rpx; display: flex; align-items: center; height: 56rpx; background-color: #f3f4f8; border-radius: 28rpx; padding: 0 30rpx; } .search image { width: 32rpx; height: 32rpx; margin-right:10rpx; } .search input { width:200rpx; } .sear { font-size: 24rpx; color: #fff; width: 50rpx; text-align: right; } .banner{height: 302rpx;margin: 0 auto;margin-top: 30rpx;} .banner swiper-item{text-align: center;} .banner image{width: 654rpx !important;height: 300rpx !important;margin: 0 auto;background: #eee;border-radius: 10rpx;overflow: hidden} .bannner { width: 690rpx; height: 280rpx; border-radius: 20rpx; margin:30rpx auto; } .bannner image { width: 690rpx; height: 280rpx; border-radius: 20rpx; } /* 默认指示点的样式 */ .bannner .wx-swiper-dot { width: 10rpx; height: 10rpx; background-color: #ffddcc; } /* 选中指示点的样式 */ .bannner .wx-swiper-dot.wx-swiper-dot-active { width: 43rpx; height: 10rpx; background-color: #ffffff; border-radius: 5rpx; } .jg{ width: 690rpx; margin: 0 auto; } .jg::after{ display: block; content: ''; clear: both; } .jg-cont{ margin-bottom:40rpx; float: left; width: 100rpx; margin-right: 96rpx; } .jg-cont:nth-child(4n){ margin-right: 0; } .jg-cont image{ width: 100rpx; height: 100rpx; border-radius: 50%; } .jg-name{ width: 100rpx; font-size: 24rpx; color: #333333; text-align: center; } .zone{ width:690rpx; padding: 30rpx; background-color: #ffffff; border-radius: 40rpx; margin-top: 30rpx; } .zone-l{ width: 280rpx; height: 390rpx; background-color: #fff7f6; border-radius: 10rpx; } .zone-name{ font-size: 40rpx; line-height: 65rpx; } .zone-name__1{ text-align: center; font-weight: bold; -webkit-line-clamp: 2; background-image: -webkit-linear-gradient(left, #fd7503,#ff291e); background-clip: text; -webkit-background-clip: text; -webkit-text-fill-color: transparent; } .zone-tips{ font-size: 28rpx; letter-spacing: 1rpx; color: #999999; } .zone-icon{ margin-top: 20rpx; font-size: 24rpx; letter-spacing: 1rpx; color: #ffffff; width: 80rpx; height: 36rpx; border-radius: 18rpx; } .zone-icon__1{ background-color: #fd7503; margin: 20rpx auto 30rpx; } .zone-icon image{ width: 9rpx; height: 11rpx; margin-left: 10rpx; } .zone-l>image{ width: 240rpx; height: 190rpx; margin-left: 20rpx; } .zone-r{ width: 380rpx; } .zone-2{ width: 380rpx; height: 180rpx; border-radius: 10rpx; } .zone-name__2{ color: #04a47e; padding-left: 30rpx; } .zone-name__3{ color: #e79928; padding-left: 30rpx; } .zone-icon__2{ background-color: #04a47e; margin-left: 40rpx; } .zone-icon__3{ background-color: #e79928; margin-left: 40rpx; } .zone-tips__2{ padding-left: 40rpx; } .zone-2>image{ margin-top: 45rpx; width: 135rpx; height: 135rpx; } .goods{ width: 690rpx; background-image: linear-gradient(180deg, #ffffff 0%, #f5f5f5 44%, #f5f5f5 100%); border-radius: 40rpx 40rpx 0px 0px; margin-top: 30rpx; padding: 30rpx; } .type-all{ width: 690rpx; overflow-x: scroll; } .type-all::-webkit-scrollbar { display: none; } .type{ margin-right: 40rpx; } .type view{ width: 142rpx; text-align: center; } .type-name{ font-size: 32rpx; color: #333333; } .type-label{ font-size: 24rpx; color: #999999; margin-top: 15rpx; } .type-active .type-name{ color: #ee7b1e; } .type-active .type-label{ color: #ffffff; width: 120rpx; height: 42rpx; background-image: linear-gradient(135deg, #fd9603 0%, #ee7b1e 100%); border-radius: 21rpx; line-height: 42rpx; text-align: center; margin:10rpx auto 0; } .cont-all{ width: 690rpx; margin:0 auto 30rpx; } .cont-all::after{ display: block; content: ''; clear: both; } .cont{ float: left; width: 330rpx; background-color: #ffffff; border-radius: 10rpx; margin: 0 30rpx 30rpx 0; } .cont:nth-child(2n){ margin-right: 0; } .goods-img{ width: 330rpx; height: 330rpx; } .goods-name{ width: 280rpx; padding:0 25rpx; font-size: 32rpx; color: #333333; margin-top: 25rpx; } .goods-price{ margin: 0 auto; padding: 18rpx 10rpx; border-bottom: 1rpx solid #e5e5e5; } .price{ font-size: 36rpx; color: #ee7b1e; } .price-text1{ font-size: 28rpx; } .price-text2{ font-size: 24rpx; color: #999999; text-decoration: line-through; } .goods-sales{ font-size: 24rpx; color: #999999; line-height: 62rpx; padding:0 25rpx; } .empty{ text-align: center; margin: 250rpx auto; font-size: 28rpx; letter-spacing: 3rpx; color: #bababa; } .fx{ width: 715rpx; height: 270rpx; margin: 0 auto; } .fx image{ width: 100%; height: 100%; } .fl{ width:690rpx; padding: 30rpx; background-color: #ffffff; border-radius: 40rpx; } .fl view{ width: 330rpx; height: 180rpx; background-color: #fb492f; border-radius: 10rpx; } .fl view image{ width: 100%; height: 100%; } /* 促销专区 */ .cx{ width: 750rpx; background-color: #ffffff; border-radius: 40rpx; margin-top: 30rpx; padding-bottom: 15rpx; height: 350rpx; /* border: red solid 1rpx;*/ } .cx-top{ border-radius: 40rpx 40rpx 0 0; width: 750rpx; height: 85rpx; padding: 15rpx 30rpx 0; box-sizing: border-box; } .cx-topl{ height: 70rpx; font-size: 40rpx; } .cx-topl1{ color: #ff291e; } .cx-topl2{ color: #333333; } .cx-topl3{ display: inline-block; width: 120rpx; height: 40rpx; background-color: #ff5502; border-radius: 20rpx 0rpx 20rpx 0rpx; text-align: center; font-size: 24rpx; color: #ffffff; line-height: 40rpx; margin-left: 20rpx; } .cx-topr{ height: 70rpx; font-size: 24rpx; color: #ee7b1e; } .cx-topr image{ width: 36rpx; height: 36rpx; margin-left: 10rpx; } .cx-goods{ margin-top: 15rpx; padding: 0 30rpx; float: left; } .cg{ width: 230rpx; } .cg-img image{ width: 180rpx; height: 180rpx; } .cg-name{ font-size: 32rpx; color: #ff291e; line-height: 80rpx; text-align: center; } .cg-name text{ color: #999999; text-decoration: line-through; font-size:28rpx; margin-left: 15rpx; }